@crosshj/html-next/dist/htmlNext.helpers.js

A modern, declarative web component framework with reactive state management, conditional rendering, data visualization, and server-side fragment loading. Built for building interactive UIs without heavy frameworks.

var t,n,e=Object.freeze,a=Object.defineProperty,o=(t,n)=>e(a(t,"raw",{value:e(n||t.slice())}));const r=String.raw,i=({logoHTML:t})=>r`
		<x-page>
			<x-data name="mainContent"></x-data>

			<x-data name="menuItems"></x-data>

			<x-data name="menuItemsBottom"></x-data>

			<x-data name="activePath"></x-data>

			<x-box class="app-layout">
				<x-box
					id="sidebar"
					class="fade-right"
					onclick="document.getElementById('sidebar')?.classList?.remove('open')"
				>
					<div>
						<x-box sx:height="75px" sx:display="flex" sx:align-items="center">
							${t||""}
						</x-box>
						<x-box
							sx:display="flex"
							sx:flex-direction="column"
							sx:gap="8px"
							sx:flex-grow="1"
						>
							<x-map items="global_menuItems">
								<x-button
									class="menuItem"
									href="{{item_href}}"
									variant="text"
									icon="{{item_icon}}"
									sx:justify-content="flex-start"
									fullWidth
								>
									{{ item_label }}
								</x-button>
							</x-map>
							<x-box sx:flex-grow="1"></x-box>
							<x-map items="global_menuItemsBottom">
								{{#if item_hasAvatar}}
								<x-box class="menuItem">
									<x-link href="{{item_href}}" underline="none">
										<x-box class="menuItem-avatar">
											<img src="{{item_avatar}}" class="avatar-image" />
											<span> {{ item_label }} </span>
										</x-box>
									</x-link>
								</x-box>
								{{/if}} {{#if item_icon}}
								<x-button
									class="menuItem"
									href="{{item_href}}"
									variant="text"
									icon="{{item_icon}}"
									sx:justify-content="flex-start"
									fullWidth
								>
									{{ item_label }}
								</x-button>
								{{/if}}
							</x-map>
							<x-box sx:mb="1"></x-box>
						</x-box>
					</div>
				</x-box>
				<x-box id="main">
					<x-fragment
						contents="global_mainContent"
						showLoading="false"
					></x-fragment>
				</x-box>
			</x-box>
		</x-page>
	`.trim(),s=String.raw,m={pages:{basic:async t=>{const{framework:n,hooks:e={},logoHTML:a,getFragment:o,getData:r,getMenu:s,defaultHash:m}=t,{initializeFramework:l,Router:x,SetData:c}=n,d=new Map,u=async t=>{if(d.has(t))return d.get(t);try{const n=await o(t),e=await n.text().then(t=>t.trim());if(e.trim())return d.set(t,e.trim()),e.trim();throw new Error("Page not found")}catch(n){return console.error(`Failed to fetch page from ${t}:`,n),"404"===t?"<x-page><x-content><x-markdown>Fetch page: Not Found</x-markdown></x-content></x-page>":await u("404")}},p=await(async()=>{const t=(window.location.hash||m).replace(/^#/,"");return x({initialPath:t,beforeEach:async t=>{const n=t.to.href;await c("mainContent",await u(n))},afterEach:async t=>{const n=t.to.href;document.querySelectorAll(".menuItem.active").forEach(t=>{t.classList.remove("active")});const e=document.querySelectorAll(".menuItem");for(const t of e){const e=t.getAttribute("href");n.startsWith(e)&&t.classList.add("active")}document.getElementById("sidebar")?.classList?.remove("open"),window.location.hash=t.to.path}})})(),g=await s(),f={appContent:i({logoHTML:a}),mainContent:"",menuItems:g.top,menuItemsBottom:g.bottom};await l({router:p,state:f,hooks:e}),document.body.classList.add("framework-loaded")},enhanced:async e=>{const{framework:a,hooks:r={},initialState:i={},authSetup:m,logoHTML:l,getFragment:x,getData:c,getMenu:d,defaultHash:u}=e,p={framework:a,authSetup:m,logoHTML:l,getFragment:x,getData:c,getMenu:d,defaultHash:u},g=Object.entries(p).filter(([t,n])=>!n).map(([t])=>t);if(g.length>0)throw new Error(`Missing required arguments: ${g.join(", ")}`);const{initializeFramework:f,Router:h,SetData:b,Trigger:w}=a,y=()=>document.getElementById("fallback404").innerHTML,v=function(t){const n=localStorage.getItem("theme-mode");t||(t=n||(window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light")),document.documentElement.classList.contains(t)||(document.documentElement.classList.remove("light"),document.documentElement.classList.remove("dark"),document.documentElement.classList.add(t)),n!==t&&localStorage.setItem("theme-mode",t);const e=document.getElementById("theme-color-meta");if(e){const n="dark"===t?"#101217":"#fcfcfc";e.getAttribute("content")!==n&&e.setAttribute("content",n)}};v(),window.setTheme=v;const S=await(async()=>{const t=(window.location.hash||u).replace(/^#/,""),n=new Map,e=async()=>{b("mainContent","");const t=(window.location.hash||u).replace(/^#/,"");await b("activePath",t);const e=await(async t=>{if("404"===t)return y();if(n.has(t))return n.get(t);try{const e=await x(t),a=await e.text().then(t=>t.trim());if(a.trim())return n.set(t,a.trim()),a.trim();throw new Error("Fragment not found")}catch(n){return console.error(`Failed to fetch fragment from ${t}:`,n),y()}})(t.replace(/^\//,""));await b("mainContent",e);const a=D.menuItems.findIndex(n=>t?.startsWith&&t.startsWith(n.path));await b("menuItemSelected",a>=0?a:0)};return window.addEventListener("hashchange",e),h({initialPath:t,beforeEach:async t=>{if("/logout"===t.to.href)return n.clear(),await w("logout"),!1;t.to.href===window.location.hash.replace(/^#/,"")?e():window.location.hash=t.to.path}})})(),T=m();window.auth=T;const{data:{session:k}={}}=await T.getSession(),I=k?(({logoHTML:n})=>s(t||(t=o(['\n\t\t<x-page>\n\t\t\t<x-data name="mainContent"></x-data>\n\n\t\t\t\x3c!-- Menu Items - loaded from state --\x3e\n\t\t\t<x-data name="menuItems"></x-data>\n\n\t\t\t\x3c!-- Theme Settings --\x3e\n\t\t\t<x-data name="themeSettings"></x-data>\n\t\t\t<x-subscribe path="themeSettings" handler="themeChanged"></x-subscribe>\n\t\t\t<script type="application/flow" data-key="themeChanged">\n\t\t\t\tif (typeof window.setTheme !== \'function\') return;\n\t\t\t\tconst themeMode = state?.themeSettings?.mode || \'light\';\n\t\t\t\twindow.setTheme(themeMode);\n\t\t\t<\/script>\n\n\t\t\t\x3c!-- Logout flow --\x3e\n\t\t\t<script type="application/flow" data-key="logout">\n\t\t\t\tconst confirmed = await Confirm({\n\t\t\t\t\ttitle: \'Logout\',\n\t\t\t\t\tmessage: \'Are you sure you want to logout?\',\n\t\t\t\t});\n\n\t\t\t\tif (!confirmed) return false;\n\n\t\t\t\ttry {\n\t\t\t\t\tawait SetData(\'appContent\', \'\');\n\t\t\t\t\t// Call logout API\n\t\t\t\t\tawait window.auth.signOut();\n\t\t\t\t\tawait new Promise((resolve) => setTimeout(resolve, 500));\n\t\t\t\t\tdocument.location.reload();\n\t\t\t\t} catch (error) {\n\t\t\t\t\tconsole.error(\'Logout error:\', error);\n\t\t\t\t}\n\t\t\t<\/script>\n\n\t\t\t<x-data name="menuItemSelected" defaultValue="0"></x-data>\n\t\t\t<script type="application/flow" data-key="onMenuSelect">\n\t\t\t\tdocument.getElementById(\'sidebar\')?.classList?.remove(\'open\');\n\t\t\t<\/script>\n\n\t\t\t<style>\n\t\t\t\t#app-menu {\n\t\t\t\t\t& > div {\n\t\t\t\t\t\tdisplay: contents;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t#sidebar > div {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\twidth: 250px;\n\t\t\t\t\tbackground: var(--palettePrimaryNavbar);\n\n\t\t\t\t\tpadding-inline: 16px;\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t\tgap: 12px;\n\n\t\t\t\t\t.is-selected {\n\t\t\t\t\t\t.menuItem button,\n\t\t\t\t\t\t.menuItem .menuItem-avatar {\n\t\t\t\t\t\t\t--bg-color: color-mix(\n\t\t\t\t\t\t\t\tin srgb,\n\t\t\t\t\t\t\t\tvar(--palettePrimaryMain) 80%,\n\t\t\t\t\t\t\t\tvar(--palettePrimaryNavbar)\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tbackground: var(--bg-color);\n\t\t\t\t\t\t\tborder-color: var(--bg-color);\n\t\t\t\t\t\t\tcolor: var(--palettePrimaryContrast);\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tbackground: var(--bg-color);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t.menuItem {\n\t\t\t\t\t\tborder-radius: var(--radius-sm);\n\n\t\t\t\t\t\tbutton,\n\t\t\t\t\t\t.menuItem-avatar {\n\t\t\t\t\t\t\tcolor: var(--paletteTextPrimary);\n\t\t\t\t\t\t\t&:hover {\n\t\t\t\t\t\t\t\tbackground: color-mix(\n\t\t\t\t\t\t\t\t\tin srgb,\n\t\t\t\t\t\t\t\t\tvar(--palettePrimaryNavbar) 70%,\n\t\t\t\t\t\t\t\t\tvar(--palettePrimaryMain)\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\t.fa,\n\t\t\t\t\t\t.fas,\n\t\t\t\t\t\t.far,\n\t\t\t\t\t\t.fal,\n\t\t\t\t\t\t.fad,\n\t\t\t\t\t\t.fab {\n\t\t\t\t\t\t\tcolor: inherit;\n\t\t\t\t\t\t\topacity: 0.6;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t</style>\n\n\t\t\t<x-box class="app-layout">\n\t\t\t\t<x-box\n\t\t\t\t\tid="sidebar"\n\t\t\t\t\tclass="fade-rightDISABLED"\n\t\t\t\t\tonclick="this?.classList?.remove(\'open\')"\n\t\t\t\t>\n\t\t\t\t\t<div>\n\t\t\t\t\t\t<x-box\n\t\t\t\t\t\t\tsx:height="75px"\n\t\t\t\t\t\t\tsx:display="flex"\n\t\t\t\t\t\t\tsx:align-items="center"\n\t\t\t\t\t\t\tsx:px="0.5em"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t','\n\t\t\t\t\t\t</x-box>\n\t\t\t\t\t\t<x-box\n\t\t\t\t\t\t\tsx:display="flex"\n\t\t\t\t\t\t\tsx:flex-direction="column"\n\t\t\t\t\t\t\tsx:gap="8px"\n\t\t\t\t\t\t\tsx:flex-grow="1"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\x3c!-- prettier-ignore --\x3e\n\t\t\t\t\t\t\t<x-map\n\t\t\t\t\t\t\t\tid="app-menu"\n\t\t\t\t\t\t\t\titems="global_menuItems"\n\t\t\t\t\t\t\t\tselectMode="single"\n\t\t\t\t\t\t\t\tselected="global_menuItemSelected"\n\t\t\t\t\t\t\t\tonSelect="onMenuSelect"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{{#if item_icon}}\n\t\t\t\t\t\t\t\t<x-button\n\t\t\t\t\t\t\t\t\tclass="menuItem"\n\t\t\t\t\t\t\t\t\thref="{{item_path}}"\n\t\t\t\t\t\t\t\t\tvariant="text"\n\t\t\t\t\t\t\t\t\ticon="{{item_icon}}"\n\t\t\t\t\t\t\t\t\tsx:justify-content="flex-start"\n\t\t\t\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{{ item_label }}\n\t\t\t\t\t\t\t\t</x-button>\n\t\t\t\t\t\t\t\t{{/if}} \n\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t{{#if item_spacer}}\n\t\t\t\t\t\t\t\t<x-box\n\t\t\t\t\t\t\t\t\tsx:flex-grow="1"\n\t\t\t\t\t\t\t\t\tsx:pointer-events="none"\n\t\t\t\t\t\t\t\t></x-box>\n\t\t\t\t\t\t\t\t{{/if}}\n\n\t\t\t\t\t\t\t\t{{#if item_hasAvatar}}\n\t\t\t\t\t\t\t\t<x-box\n\t\t\t\t\t\t\t\t\tclass="menuItem"\n\t\t\t\t\t\t\t\t\thref="{{item_path}}"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<x-link\n\t\t\t\t\t\t\t\t\t\thref="{{item_path}}"\n\t\t\t\t\t\t\t\t\t\tunderline="none"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<x-box class="menuItem-avatar">\n\t\t\t\t\t\t\t\t\t\t\t<img\n\t\t\t\t\t\t\t\t\t\t\t\tsrc="{{item_avatar}}"\n\t\t\t\t\t\t\t\t\t\t\t\tclass="avatar-image"\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t<span> {{ item_label }} </span>\n\t\t\t\t\t\t\t\t\t\t</x-box>\n\t\t\t\t\t\t\t\t\t</x-link>\n\t\t\t\t\t\t\t\t</x-box>\n\t\t\t\t\t\t\t\t{{/if}} \n\t\t\t\t\t\t\t</x-map>\n\t\t\t\t\t\t\t<x-box sx:mb="1"></x-box>\n\t\t\t\t\t\t</x-box>\n\t\t\t\t\t</div>\n\t\t\t\t</x-box>\n\t\t\t\t<x-box id="main">\n\t\t\t\t\t<x-fragment\n\t\t\t\t\t\tcontents="global_mainContent"\n\t\t\t\t\t\tshowLoading="true"\n\t\t\t\t\t></x-fragment>\n\t\t\t\t</x-box>\n\t\t\t</x-box>\n\t\t</x-page>\n\t'])),n||"").trim())({logoHTML:l}):(({logoHTML:t})=>s(n||(n=o(['\n\t\t<x-page>\n\t\t\t<x-subscribe path="pageLoaded" handler="showLoginForm"></x-subscribe>\n\n\t\t\t<x-data name="formData"></x-data>\n\n\t\t\t<x-data name="currentTemplate" defaultValue=""></x-data>\n\n\t\t\t\x3c!-- Template switching scripts --\x3e\n\t\t\t<script type="application/flow" data-key="showSignupForm">\n\t\t\t\tconst signupTemplate = document.getElementById(\'signupTemplate\');\n\t\t\t\tif (signupTemplate) {\n\t\t\t\t\tSetData(\'currentTemplate\', signupTemplate.innerHTML);\n\t\t\t\t}\n\t\t\t<\/script>\n\n\t\t\t<script type="application/flow" data-key="showLoginForm">\n\t\t\t\tconst loginTemplate = document.getElementById(\'loginTemplate\');\n\t\t\t\tif (loginTemplate) {\n\t\t\t\t\tSetData(\'currentTemplate\', loginTemplate.innerHTML);\n\t\t\t\t}\n\t\t\t<\/script>\n\n\t\t\t<template id="loginTemplate">\n\t\t\t\t\x3c!-- Login form schema --\x3e\n\t\t\t\t<x-schema name="loginSchema">\n\t\t\t\t\temail: string, required, min:1 password: string, required, min:8\n\t\t\t\t</x-schema>\n\n\t\t\t\t<script type="application/flow" data-key="handleLogin">\n\t\t\t\t\t// Get the form and validate manually against login schema\n\t\t\t\t\tconst form = document.querySelector(\'x-form[name="loginForm"]\');\n\t\t\t\t\tif (!form) {\n\t\t\t\t\t\tconsole.error(\'Login form not found\');\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Set the schema and validate\n\t\t\t\t\tform.setAttribute(\'schema\', \'loginSchema\');\n\t\t\t\t\tform.markAsSubmitted();\n\n\t\t\t\t\t// Check if form is valid\n\t\t\t\t\tif (!form.isValid) {\n\t\t\t\t\t\tawait Alert({\n\t\t\t\t\t\t\ttitle: \'Validation Error\',\n\t\t\t\t\t\t\tmessage: \'Please fix the errors in the form before submitting.\'\n\t\t\t\t\t\t});\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Get values from form data\n\t\t\t\t\tconst formData = state.formData;\n\t\t\t\t\tconst { email, password } = formData;\n\n\t\t\t\t\t// Clear template to show loading spinner\n\t\t\t\t\tSetData(\'currentTemplate\', \'\');\n\n\t\t\t\t\ttry {\n\t\t\t\t\t\tconst res = await window.auth.signIn(email, password);\n\t\t\t\t\t\tif(res?.error){\n\t\t\t\t\t\t\tthrow new Error(res.error.message);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tawait new Promise((resolve) => setTimeout(resolve, 500));\n\t\t\t\t\t\tdocument.location.reload();\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\t// Restore login form on network error\n\t\t\t\t\t\tconst loginTemplate = document.getElementById(\'loginTemplate\');\n\t\t\t\t\t\tif (loginTemplate) {\n\t\t\t\t\t\t\tSetData(\'currentTemplate\', loginTemplate.innerHTML);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tawait Alert({\n\t\t\t\t\t\t\ttitle: \'Network Error\',\n\t\t\t\t\t\t\tmessage: \'Please check your connection and try again.\'\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t<\/script>\n\n\t\t\t\t<x-form name="loginForm" data="global_formData">\n\t\t\t\t\t<x-box sx:mb="2" sx:mt="2">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid="loginForm-email"\n\t\t\t\t\t\t\tlabel="Email"\n\t\t\t\t\t\t\tname="email"\n\t\t\t\t\t\t\ttype="email"\n\t\t\t\t\t\t\tplaceholder="Enter your email"\n\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t\tautocomplete="email"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</x-box>\n\n\t\t\t\t\t<x-box sx:mb="3">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid="loginForm-password"\n\t\t\t\t\t\t\tlabel="Password"\n\t\t\t\t\t\t\tname="password"\n\t\t\t\t\t\t\ttype="password"\n\t\t\t\t\t\t\tplaceholder="Enter your password"\n\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t\tautocomplete="current-password"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</x-box>\n\t\t\t\t</x-form>\n\n\t\t\t\t<x-box\n\t\t\t\t\tsx:mb="2"\n\t\t\t\t\tsx:mt="2"\n\t\t\t\t\tsx:display="flex"\n\t\t\t\t\tsx:justify-content="center"\n\t\t\t\t>\n\t\t\t\t\t<x-button\n\t\t\t\t\t\tlabel="Sign In"\n\t\t\t\t\t\tvariant="primary"\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\thandler="handleLogin"\n\t\t\t\t\t></x-button>\n\t\t\t\t</x-box>\n\n\t\t\t\t<x-box sx:text-align="center" sx:mt="3">\n\t\t\t\t\t<p style="margin: 0; color: var(--paletteTextSecondary)">\n\t\t\t\t\t\tDon\'t have an account?\n\t\t\t\t\t\t<x-button\n\t\t\t\t\t\t\tlabel="Sign up here"\n\t\t\t\t\t\t\tvariant="link"\n\t\t\t\t\t\t\thandler="showSignupForm"\n\t\t\t\t\t\t></x-button>\n\t\t\t\t\t</p>\n\t\t\t\t</x-box>\n\t\t\t</template>\n\n\t\t\t<template id="signupTemplate">\n\t\t\t\t\x3c!-- Signup form schema --\x3e\n\t\t\t\t<x-schema name="signupSchema">\n\t\t\t\t\temail: string, required, min:1 password: string, required, min:8\n\t\t\t\t</x-schema>\n\n\t\t\t\t<script type="application/flow" data-key="handleSignup">\n\t\t\t\t\tconst form = document.querySelector(\'x-form[name="signupForm"]\');\n\t\t\t\t\tif (!form) {\n\t\t\t\t\t\tconsole.error(\'Signup form not found\');\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Set the schema and validate\n\t\t\t\t\tform.setAttribute(\'schema\', \'signupSchema\');\n\t\t\t\t\tform.markAsSubmitted();\n\n\t\t\t\t\t// Check if form is valid\n\t\t\t\t\tif (!form.isValid) {\n\t\t\t\t\t\tawait Alert({\n\t\t\t\t\t\t\ttitle: \'Validation Error\',\n\t\t\t\t\t\t\tmessage: \'Please fix the errors in the form before submitting.\'\n\t\t\t\t\t\t});\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\n\t\t\t\t\t// Get values from form data\n\t\t\t\t\tconst formData = state.formData;\n\t\t\t\t\tconst { email, password } = formData;\n\n\t\t\t\t\t// Clear template to show loading spinner\n\t\t\t\t\tSetData(\'currentTemplate\', \'\');\n\n\t\t\t\t\ttry {\n\t\t\t\t\t\tconst res = await window.auth.signUp(email, password);\n\t\t\t\t\t\tif(res?.error){\n\t\t\t\t\t\t\tthrow new Error(res.error.message);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tawait new Promise((resolve) => setTimeout(resolve, 500));\n\t\t\t\t\t\tdocument.location.reload();\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\t// Restore signup form on network error\n\t\t\t\t\t\tconst signupTemplate = document.getElementById(\'signupTemplate\');\n\t\t\t\t\t\tif (signupTemplate) {\n\t\t\t\t\t\t\tSetData(\'currentTemplate\', signupTemplate.innerHTML);\n\t\t\t\t\t\t}\n\t\t\t\t\t\tawait Alert({\n\t\t\t\t\t\t\ttitle: \'Signup Error\',\n\t\t\t\t\t\t\tmessage: \'Please check your details and try again.\'\n\t\t\t\t\t\t});\n\t\t\t\t\t}\n\t\t\t\t<\/script>\n\n\t\t\t\t<x-form name="signupForm" data="global_formData">\n\t\t\t\t\t<x-box sx:mb="2">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid="signupForm-email"\n\t\t\t\t\t\t\tlabel="Email"\n\t\t\t\t\t\t\tname="email"\n\t\t\t\t\t\t\ttype="email"\n\t\t\t\t\t\t\tplaceholder="Enter your email"\n\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t\tautocomplete="email"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</x-box>\n\n\t\t\t\t\t<x-box sx:mb="3">\n\t\t\t\t\t\t<input\n\t\t\t\t\t\t\tid="signupForm-password"\n\t\t\t\t\t\t\tlabel="Password"\n\t\t\t\t\t\t\tname="password"\n\t\t\t\t\t\t\ttype="password"\n\t\t\t\t\t\t\tplaceholder="Create a password (min 8 characters)"\n\t\t\t\t\t\t\trequired\n\t\t\t\t\t\t\tautocomplete="new-password"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</x-box>\n\t\t\t\t</x-form>\n\n\t\t\t\t<x-box\n\t\t\t\t\tsx:mb="2"\n\t\t\t\t\tsx:mt="2"\n\t\t\t\t\tsx:display="flex"\n\t\t\t\t\tsx:justify-content="center"\n\t\t\t\t>\n\t\t\t\t\t<x-button\n\t\t\t\t\t\tlabel="Create Account"\n\t\t\t\t\t\tvariant="primary"\n\t\t\t\t\t\tfullWidth\n\t\t\t\t\t\thandler="handleSignup"\n\t\t\t\t\t></x-button>\n\t\t\t\t</x-box>\n\n\t\t\t\t<x-box sx:text-align="center" sx:mt="3">\n\t\t\t\t\t<p style="margin: 0; color: var(--paletteTextSecondary)">\n\t\t\t\t\t\tAlready have an account?\n\t\t\t\t\t\t<x-button\n\t\t\t\t\t\t\tlabel="Sign in here"\n\t\t\t\t\t\t\tvariant="link"\n\t\t\t\t\t\t\thandler="showLoginForm"\n\t\t\t\t\t\t></x-button>\n\t\t\t\t\t</p>\n\t\t\t\t</x-box>\n\t\t\t</template>\n\n\t\t\t<x-content>\n\t\t\t\t<x-box\n\t\t\t\t\tsx:width="100%"\n\t\t\t\t\tsx:max-width="400px"\n\t\t\t\t\tsx:margin="0 auto"\n\t\t\t\t\tsx:mt="10"\n\t\t\t\t>\n\t\t\t\t\t<x-box\n\t\t\t\t\t\tsx:height="200px"\n\t\t\t\t\t\tsx:display="flex"\n\t\t\t\t\t\tsx:align-items="center"\n\t\t\t\t\t\tsx:mb="4"\n\t\t\t\t\t\tclass="logo-container"\n\t\t\t\t\t>\n\t\t\t\t\t\t','\n\t\t\t\t\t</x-box>\n\n\t\t\t\t\t\x3c!-- Single fragment that renders the current template content --\x3e\n\t\t\t\t\t<x-fragment contents="global_currentTemplate"></x-fragment>\n\t\t\t\t</x-box>\n\t\t\t</x-content>\n\n\t\t\t<x-data name="pageLoaded" defaultValue="true"></x-data>\n\t\t</x-page>\n\t'])),t||"").trim())({logoHTML:l}),L=d({user:k?.user}),_=(window.location.hash||u).replace(/^#/,""),M=L.findIndex(t=>t.path===_),D={...i,appContent:I,mainContent:"",menuItems:L,menuItemSelected:M,themeSettings:{mode:document.documentElement.classList.contains("dark")?"dark":"light"},contentLoaded:!1};await f({router:S,state:D,hooks:r}),document.body.classList.add("framework-loaded")}}};export{m as default};