@stacksjs/hello-world-stx 0.75.330 → 0.75.336

package/README.md

@@ -0,0 +1,7 @@
+# Stacks STX component library
+
+This package publishes the application's `resources/components/` as native STX custom elements.
+
+From a source checkout, run `bun run build` in this directory to compile the components through the maintained Stacks STX library builder. To develop the source components, run `./buddy dev:components` from the application root.
+
+The package exports `dist/index.js` and its TypeScript declarations. Release publication checks those entries in the actual package payload after the build, including the package's `files` rules. A failed build, missing export or failed publication fails the release.

package/dist/bundle.js

@@ -0,0 +1,474 @@
+var O=globalThis.HTMLElement||class{},R=(t)=>String(t??"").replaceAll("&","&amp;").replaceAll("<","&lt;").replaceAll(">","&gt;").replaceAll('"',"&quot;").replaceAll("'","&#039;"),M=(t,e)=>{let i=e.trim().split("."),d=i.shift(),l=t._values&&Object.prototype.hasOwnProperty.call(t._values,d)?t._values[d]:t[d];for(let a of i)l=l?.[a];return typeof l==="function"?l.call(t):l},P=(t,e,i)=>{if(t===null)return e==="boolean"?!1:i;if(e==="boolean")return t!=="false"&&t!=="0";if(e==="number")return Number(t);if(e==="object"||e==="array")try{return JSON.parse(t)}catch{return i}return t},N=(t,e)=>{if(t==null||t===!1)return null;if(e==="boolean")return"";if(e==="object"||e==="array")return JSON.stringify(t);return String(t)},z=(t,e)=>{if(t==null||e!=="object"&&e!=="array")return t;if(typeof structuredClone==="function")return structuredClone(t);return JSON.parse(JSON.stringify(t))},L=(t)=>z(t.default??{string:"",number:0,boolean:!1,object:{},array:[]}[t.type],t.type);class p extends O{static definition={};static get observedAttributes(){return this.definition.observedAttributes||[]}constructor(){super();this._values=Object.create(null),this._reflecting=!1,this._connected=!1,this._hasConnected=!1,this._initializing=!1,this._updatePending=!1,this._listeners=new Map;let t=this.constructor.definition;for(let[e,i]of Object.entries(t.properties||{}))this._values[e]=L(i);if(t.shadowMode&&this.attachShadow&&!this.shadowRoot)this._closedRoot=this.attachShadow({mode:t.shadowMode})}get updateComplete(){return this._updateComplete||Promise.resolve()}get renderRoot(){return this._closedRoot||this.shadowRoot||this}connectedCallback(){if(this._connected)return;this._connected=!0,this._initializing=!0;let t=this.constructor.definition;for(let[l,a]of Object.entries(t.properties||{})){let s=a.attribute===!1?null:a.attribute||l.replace(/[A-Z]/g,(r)=>"-"+r.toLowerCase());if(s&&this.hasAttribute?.(s))this._values[l]=P(this.getAttribute(s),a.type,L(a))}for(let l of Object.keys(t.properties||{}))this._upgradeProperty(l);this._initializing=!1;let i=[...this.renderRoot.childNodes||[]].some((l)=>l.nodeType!==3||l.textContent.trim()),d=!this._hasConnected;if(!(d&&t.progressive&&i))this._render();else this._upgradeDeclarativeEvents();if(this._bindEvents(),d)this._hasConnected=!0,this.setAttribute?.("hydrated",""),this.dispatchEvent?.(new CustomEvent("stx:hydrated",{bubbles:!0,composed:!0}));try{this.onConnect?.()}catch(l){console.error("[stx] onConnect failed",l)}}disconnectedCallback(){this._connected=!1;try{this.onDisconnect?.()}catch(t){console.error("[stx] onDisconnect failed",t)}finally{for(let[t,e]of this._listeners)this.renderRoot.removeEventListener(t,e);this._listeners.clear()}}attributeChangedCallback(t,e,i){if(e===i||this._reflecting)return;let d=this.constructor.definition,l=d.attributeToProperty?.[t];if(!l)return;let a=d.properties[l],s=P(i,a.type,L(a));if(!Object.is(this._values[l],s))this._values[l]=s,this.requestUpdate()}_props(){return this._values}requestUpdate(){if(!this._connected||this._initializing||this._updatePending)return this.updateComplete;return this._updatePending=!0,this._updateComplete=new Promise((t)=>{queueMicrotask(()=>{if(this._updatePending=!1,this._connected)this._render();t()})}),this._updateComplete}emit(t,e,i={}){return this.dispatchEvent(new CustomEvent(t,{detail:e,bubbles:!0,composed:!0,...i}))}_upgradeProperty(t){if(!Object.prototype.hasOwnProperty.call(this,t))return;let e=this[t];delete this[t],this[t]=e}_upgradeDeclarativeEvents(){for(let t of this.renderRoot.querySelectorAll?.("*")||[]){let e=t.getAttributeNames?.()||[...t.attributes||[]].filter(Boolean).map((i)=>i.name);for(let i of e){if(!i?.startsWith("@"))continue;let[d,...l]=i.slice(1).split(".");if(t.setAttribute("data-stx-on-"+d,t.getAttribute(i)),l.length)t.setAttribute("data-stx-mod-"+d,l.join(" "));t.removeAttribute(i)}}}_bindEvents(){for(let t of this.constructor.definition.eventTypes||[]){if(this._listeners.has(t))continue;let e=(i)=>{let d="[data-stx-on-"+t+"]",l=i.target?.closest?.(d);if(!l||!this.renderRoot.contains(l))return;let a=(l.getAttribute("data-stx-mod-"+t)||"").split(" ");if(a.includes("prevent"))i.preventDefault();if(a.includes("stop"))i.stopPropagation();let s=l.getAttribute("data-stx-on-"+t);if(typeof this[s]==="function")this[s](i)};this.renderRoot.addEventListener(t,e),this._listeners.set(t,e)}}_render(){let t=this.constructor.definition,e=this.renderRoot,i=e.activeElement||(e.contains?.(globalThis.document?.activeElement)?globalThis.document.activeElement:null),d=i&&(i.getAttribute?.("data-key")||i.id||i.getAttribute?.("name")),l=i&&"selectionStart"in i?[i.selectionStart,i.selectionEnd]:null,a=typeof this.render==="function"?this.render(q):t.template.replace(new RegExp("\\{!!\\s*([\\w$.]+)\\s*!!\\}","g"),(s,r)=>String(M(this,r)??"")).replace(new RegExp("\\{\\{\\s*([\\w$.]+)\\s*\\}\\}","g"),(s,r)=>R(M(this,r)));if(t.shadowMode&&t.styles)a="<style>"+t.styles+"</style>"+a;if(e.innerHTML=a,this._applyBindings(),this._bindEvents(),d){let s=globalThis.CSS?.escape?globalThis.CSS.escape(d):d.replace(/["\\]/g,"$&"),r=e.querySelector('[data-key="'+s+'"],#'+s+',[name="'+s+'"]');if(r?.focus?.(),l&&r?.setSelectionRange)r.setSelectionRange(l[0],l[1])}this.dispatchEvent?.(new CustomEvent("stx:updated",{bubbles:!1}))}_applyBindings(){for(let t of this.constructor.definition.bindings||[]){let e=this.renderRoot.querySelector("[data-stx-bind-"+t.id+"]");if(!e)continue;let i=M(this,t.expression);if(t.name==="class")e.className=i||"";else if(t.name==="style"&&typeof i==="object")Object.assign(e.style,i);else if(typeof i==="boolean"){if(e.toggleAttribute(t.name,i),t.name in e)e[t.name]=i}else if(i==null||i===!1)e.removeAttribute(t.name);else e.setAttribute(t.name,String(i))}}}var q={escape:R,raw:(t)=>String(t??""),values:(t)=>t==null?[]:t[Symbol.iterator]?t:Object.values(t),entries:(t)=>t==null?[]:Array.isArray(t)?t.entries():Object.entries(t)};function f(t,e){let i=e.properties||{},d={},l=[];for(let[s,r]of Object.entries(i)){let n=r.attribute===!1?null:r.attribute||s.replace(/[A-Z]/g,(c)=>"-"+c.toLowerCase());if(n)d[n]=s,l.push(n);if(s in O.prototype){if(!n)throw TypeError('STX prop "'+s+'" overlaps the native DOM API and needs an attribute binding');continue}Object.defineProperty(t.prototype,s,{configurable:!0,enumerable:!0,get(){return this._values[s]},set(c){let o=this._values[s];if(Object.is(o,c))return;if(this._values[s]=c,r.reflect&&n&&!this._reflecting){let m=N(c,r.type);if(this._reflecting=!0,m===null)this.removeAttribute(n);else this.setAttribute(n,m);this._reflecting=!1}this.requestUpdate(),this.dispatchEvent?.(new CustomEvent(s+"-changed",{detail:{value:c,oldValue:o},bubbles:!0,composed:!0}))}})}t.definition={...e,attributeToProperty:d,observedAttributes:l};let a=globalThis.customElements||globalThis.window?.customElements;if(a&&!a.get(e.tag))a.define(e.tag,t);return t}class b extends p{render(t){let{escape:e,raw:i,values:d,entries:l}=t,{id:a}=this._props(),s="";return s+='<div class="context-menu" id="',s+=e(a),s+=`" style="display: none;">
+        <slot />
+      </div>`,s}}f(b,{tag:"stacks-context-menu",template:`<div class="context-menu" id="{{ id }}" style="display: none;">
+    <slot />
+  </div>`,styles:"",shadowMode:!1,progressive:!0,properties:{id:{type:"string",reflect:!0}},eventTypes:[],bindings:[]});var I=b;class h extends p{render(t){let{escape:e,raw:i,values:d,entries:l}=t,{icon:a="",label:s,onclick:r,hasSubmenu:n=!1}=this._props(),c="";if(n){if(c+=`
+      <div class="context-menu-item has-submenu">
+        `,a)c+=`
+        <div class="context-menu-item-icon">`,c+=e(a),c+=`</div>
+        `;c+="<div>",c+=e(s),c+=`</div>
+        <div class="context-submenu">
+          <slot />
+        </div>
+      </div>
+      `}else{if(c+='<button class="context-menu-item" ',r)c+='onclick="',c+=e(r),c+='"';if(c+=`>
+        `,a)c+=`
+        <div class="context-menu-item-icon">`,c+=e(a),c+=`</div>
+        `;c+="<div>",c+=e(s),c+=`</div>
+      </button>
+      `}return c}}f(h,{tag:"stacks-context-menu-item",template:`@if (hasSubmenu)
+  <div class="context-menu-item has-submenu">
+    @if (icon)
+    <div class="context-menu-item-icon">{{ icon }}</div>
+    @endif
+    <div>{{ label }}</div>
+    <div class="context-submenu">
+      <slot />
+    </div>
+  </div>
+  @else
+  <button class="context-menu-item" @if (onclick)onclick="{{ onclick }}"@endif>
+    @if (icon)
+    <div class="context-menu-item-icon">{{ icon }}</div>
+    @endif
+    <div>{{ label }}</div>
+  </button>
+  @endif`,styles:"",shadowMode:!1,progressive:!0,properties:{icon:{type:"string",default:"",reflect:!0},label:{type:"string",reflect:!0},onclick:{type:"string",reflect:!0},hasSubmenu:{type:"boolean",default:!1,reflect:!0}},eventTypes:[],bindings:[]});var W=h;class y extends p{render(t){let{escape:e,raw:i,values:d,entries:l}=t,{id:a,icon:s="\uD83D\uDCC4",label:r,type:n="window",section:c="",url:o="",onclick:m,left:g="20px",top:u="20px",style:j=""}=this._props(),v="";if(v+=`<button
+        class="desktop-icon"
+        data-icon-id="`,v+=e(a),v+=`"
+        data-icon-type="`,v+=e(n),v+=`"
+        data-icon-section="`,v+=e(c),v+=`"
+        data-icon-url="`,v+=e(o),v+=`"
+        style="`,j)v+=e(j);else v+="left: ",v+=e(g),v+="; top: ",v+=e(u),v+=";";if(v+=`"
+        `,m)v+=`
+        onclick="`,v+=e(m),v+=`"
+        `;return v+=`>
+        <div class="desktop-icon-image">`,v+=e(s),v+=`</div>
+        <div class="desktop-icon-label">`,v+=e(r),v+=`</div>
+      </button>`,v}}f(y,{tag:"stacks-desktop-icon",template:`<button
+    class="desktop-icon"
+    data-icon-id="{{ id }}"
+    data-icon-type="{{ type }}"
+    data-icon-section="{{ section }}"
+    data-icon-url="{{ url }}"
+    style="@if(style){{ style }}@else left: {{ left }}; top: {{ top }};@endif"
+    @if (onclick)
+    onclick="{{ onclick }}"
+    @endif
+  >
+    <div class="desktop-icon-image">{{ icon }}</div>
+    <div class="desktop-icon-label">{{ label }}</div>
+  </button>`,styles:"",shadowMode:!1,progressive:!0,properties:{id:{type:"string",reflect:!0},icon:{type:"string",default:"\uD83D\uDCC4",reflect:!0},label:{type:"string",reflect:!0},type:{type:"string",default:"window",reflect:!0},section:{type:"string",default:"",reflect:!0},url:{type:"string",default:"",reflect:!0},onclick:{type:"string",reflect:!0},left:{type:"string",default:"20px",reflect:!0},top:{type:"string",default:"20px",reflect:!0},style:{type:"string",default:"",reflect:!0}},eventTypes:[],bindings:[]});var B=y;class _ extends p{render(t){let{escape:e,raw:i,values:d,entries:l}=t,{label:a,onclick:s,active:r=!1}=this._props(),n="";if(n+=`<button
+        class="feature-btn `,r)n+="active";if(n+=`"
+        `,s)n+='onclick="',n+=e(s),n+='"';return n+=`>
+        `,n+=e(a),n+=`
+      </button>`,n}}f(_,{tag:"stacks-feature-button",template:`<button
+    class="feature-btn @if (active)active@endif"
+    @if (onclick)onclick="{{ onclick }}"@endif
+  >
+    {{ label }}
+  </button>`,styles:"",shadowMode:!1,progressive:!0,properties:{label:{type:"string",reflect:!0},onclick:{type:"string",reflect:!0},active:{type:"boolean",default:!1,reflect:!0}},eventTypes:[],bindings:[]});var H=_;class w extends p{render(t){let{escape:e,raw:i,values:d,entries:l}=t,{id:a,label:s,type:r="text",placeholder:n="",class:c="login-input"}=this._props(),o="";return o+=`<div class="login-input-group">
+        <label>`,o+=e(s),o+=`:</label>
+        <input
+          type="`,o+=e(r),o+=`"
+          id="`,o+=e(a),o+=`"
+          class="`,o+=e(c),o+=`"
+          placeholder="`,o+=e(n),o+=`"
+        />
+      </div>`,o}}f(w,{tag:"stacks-input-group",template:`<div class="login-input-group">
+    <label>{{ label }}:</label>
+    <input
+      type="{{ type }}"
+      id="{{ id }}"
+      class="{{ classList }}"
+      placeholder="{{ placeholder }}"
+    />
+  </div>`,styles:"",shadowMode:!1,progressive:!0,properties:{id:{type:"string",reflect:!0},label:{type:"string",reflect:!0},type:{type:"string",default:"text",reflect:!0},placeholder:{type:"string",default:"",reflect:!0},class:{type:"string",default:"login-input",reflect:!0}},eventTypes:[],bindings:[]});var K=w;class k extends p{render(t){let{escape:e,raw:i,values:d,entries:l}=t,{id:a,icon:s="\uD83D\uDC64",title:r="Login",prompt:n="Enter your credentials",submitHandler:c="handleLogin()"}=this._props(),o="";return o+='<div id="',o+=e(a),o+=`" class="hidden login-form">
+        <div class="login-form-background">
+          <div class="login-form-container">
+            <button class="login-close-btn" onclick="closeLoginScreens()">×</button>
+            <div class="login-form-header">
+              <button class="login-back-button" onclick="hideLoginForms()">← Back</button>
+              <div class="login-form-title">
+                <div class="login-form-icon">`,o+=e(s),o+=`</div>
+                <h2>`,o+=e(r),o+=`</h2>
+              </div>
+            </div>
+
+            <div class="login-form-content">
+              <div class="login-form-prompt">`,o+=e(n),o+=`</div>
+              <slot />
+              <div class="login-actions">
+                <button class="login-submit-btn" onclick="`,o+=e(c),o+=`">
+                  <span class="login-btn-icon">→</span>
+                  <span>Log In</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>`,o}}f(k,{tag:"stacks-login-form",template:`<div id="{{ id }}" class="hidden login-form">
+    <div class="login-form-background">
+      <div class="login-form-container">
+        <button class="login-close-btn" onclick="closeLoginScreens()">×</button>
+        <div class="login-form-header">
+          <button class="login-back-button" onclick="hideLoginForms()">← Back</button>
+          <div class="login-form-title">
+            <div class="login-form-icon">{{ icon }}</div>
+            <h2>{{ title }}</h2>
+          </div>
+        </div>
+
+        <div class="login-form-content">
+          <div class="login-form-prompt">{{ prompt }}</div>
+          <slot />
+          <div class="login-actions">
+            <button class="login-submit-btn" onclick="{{ submitHandler }}">
+              <span class="login-btn-icon">→</span>
+              <span>Log In</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>`,styles:"",shadowMode:!1,progressive:!0,properties:{id:{type:"string",reflect:!0},icon:{type:"string",default:"\uD83D\uDC64",reflect:!0},title:{type:"string",default:"Login",reflect:!0},prompt:{type:"string",default:"Enter your credentials",reflect:!0},submitHandler:{type:"string",default:"handleLogin()",reflect:!0}},eventTypes:[],bindings:[]});var F=k;class x extends p{render(t){let{escape:e,raw:i,values:d,entries:l}=t,{id:a="login-screen",logoText:s="STACKS",subtitle:r="To begin, click your user name"}=this._props(),n="";return n+='<div id="',n+=e(a),n+=`" class="hidden login-screen">
+        <div class="login-background">
+          <div class="login-container">
+            <button class="login-close-btn" onclick="closeLoginScreens()">×</button>
+            <div class="login-header">
+              <div class="login-logo">`,n+=e(s),n+=`</div>
+              <div class="login-subtitle">`,n+=e(r),n+=`</div>
+            </div>
+
+            <div class="login-users">
+              <slot name="login-options">
+                <button class="login-user-button" id="email-login-btn">
+                  <div class="login-user-icon">\uD83D\uDC64</div>
+                  <div class="login-user-name">Email Login</div>
+                </button>
+                <button class="login-user-button" id="license-login-btn">
+                  <div class="login-user-icon">\uD83D\uDD11</div>
+                  <div class="login-user-name">License Key</div>
+                </button>
+              </slot>
+            </div>
+
+            <div class="login-footer">
+              <slot name="footer">
+                <div class="login-footer-text">After you log in, you can access the STACKS Desktop</div>
+              </slot>
+            </div>
+          </div>
+        </div>
+      </div>`,n}}f(x,{tag:"stacks-login-screen",template:`<div id="{{ id }}" class="hidden login-screen">
+    <div class="login-background">
+      <div class="login-container">
+        <button class="login-close-btn" onclick="closeLoginScreens()">×</button>
+        <div class="login-header">
+          <div class="login-logo">{{ logoText }}</div>
+          <div class="login-subtitle">{{ subtitle }}</div>
+        </div>
+
+        <div class="login-users">
+          <slot name="login-options">
+            <button class="login-user-button" id="email-login-btn">
+              <div class="login-user-icon">\uD83D\uDC64</div>
+              <div class="login-user-name">Email Login</div>
+            </button>
+            <button class="login-user-button" id="license-login-btn">
+              <div class="login-user-icon">\uD83D\uDD11</div>
+              <div class="login-user-name">License Key</div>
+            </button>
+          </slot>
+        </div>
+
+        <div class="login-footer">
+          <slot name="footer">
+            <div class="login-footer-text">After you log in, you can access the STACKS Desktop</div>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>`,styles:"",shadowMode:!1,progressive:!0,properties:{id:{type:"string",default:"login-screen",reflect:!0},logoText:{type:"string",default:"STACKS",reflect:!0},subtitle:{type:"string",default:"To begin, click your user name",reflect:!0}},eventTypes:[],bindings:[]});var U=x;class S extends p{render(t){let{escape:e,raw:i,values:d,entries:l}=t,{id:a="notification-popup",title:s="Notifications",showSignup:r=!0}=this._props(),n="";if(n+='<div class="notification-popup" id="',n+=e(a),n+=`" style="display: none;">
+        <div class="notification-header">
+          <span class="notification-title">`,n+=e(s),n+=`</span>
+          <button class="notification-close" onclick="closeNotificationPopup()">×</button>
+        </div>
+        <div class="notification-content">
+          <slot />
+        </div>
+        `,r)n+=`
+        <div class="notification-signup" id="notification-signup">
+          <div class="notification-separator"></div>
+          <div class="notification-signup-text">Get updates on new features & releases:</div>
+          <div class="notification-signup-form">
+            <input
+              type="email"
+              id="notification-email"
+              class="notification-email-input"
+              placeholder="your@email.com"
+              autocomplete="email"
+            />
+            <button class="notification-signup-btn" onclick="handleEmailSignup()">
+              Sign Up
+            </button>
+          </div>
+        </div>
+        <div class="notification-success" id="notification-success" style="display: none;">
+          <div class="notification-separator"></div>
+          <div class="notification-success-content">
+            <div class="notification-success-icon">✓</div>
+            <div class="notification-success-text">
+              <div class="notification-success-title">Thanks for subscribing!</div>
+              <div class="notification-success-subtitle">We'll keep you updated.</div>
+            </div>
+          </div>
+        </div>
+        `;return n+="</div>",n}}f(S,{tag:"stacks-notification-popup",template:`<div class="notification-popup" id="{{ id }}" style="display: none;">
+    <div class="notification-header">
+      <span class="notification-title">{{ title }}</span>
+      <button class="notification-close" onclick="closeNotificationPopup()">×</button>
+    </div>
+    <div class="notification-content">
+      <slot />
+    </div>
+    @if (showSignup)
+    <div class="notification-signup" id="notification-signup">
+      <div class="notification-separator"></div>
+      <div class="notification-signup-text">Get updates on new features & releases:</div>
+      <div class="notification-signup-form">
+        <input
+          type="email"
+          id="notification-email"
+          class="notification-email-input"
+          placeholder="your@email.com"
+          autocomplete="email"
+        />
+        <button class="notification-signup-btn" onclick="handleEmailSignup()">
+          Sign Up
+        </button>
+      </div>
+    </div>
+    <div class="notification-success" id="notification-success" style="display: none;">
+      <div class="notification-separator"></div>
+      <div class="notification-success-content">
+        <div class="notification-success-icon">✓</div>
+        <div class="notification-success-text">
+          <div class="notification-success-title">Thanks for subscribing!</div>
+          <div class="notification-success-subtitle">We'll keep you updated.</div>
+        </div>
+      </div>
+    </div>
+    @endif
+  </div>`,styles:"",shadowMode:!1,progressive:!0,properties:{id:{type:"string",default:"notification-popup",reflect:!0},title:{type:"string",default:"Notifications",reflect:!0},showSignup:{type:"boolean",default:!0,reflect:!0}},eventTypes:[],bindings:[]});var J=S;class E extends p{render(t){let{escape:e,raw:i,values:d,entries:l}=t,{emoji:a,title:s,description:r}=this._props(),n="";return n+=`<div class="package-item">
+        <div class="package-emoji">`,n+=e(a),n+=`</div>
+        <div class="package-title">`,n+=e(s),n+=`</div>
+        <div class="package-desc">`,n+=e(r),n+=`</div>
+      </div>`,n}}f(E,{tag:"stacks-package-item",template:`<div class="package-item">
+    <div class="package-emoji">{{ emoji }}</div>
+    <div class="package-title">{{ title }}</div>
+    <div class="package-desc">{{ description }}</div>
+  </div>`,styles:"",shadowMode:!1,progressive:!0,properties:{emoji:{type:"string",reflect:!0},title:{type:"string",reflect:!0},description:{type:"string",reflect:!0}},eventTypes:[],bindings:[]});var G=E;class C extends p{render(t){let{escape:e,raw:i,values:d,entries:l}=t,{id:a="start-menu",userName:s="Developer",userImage:r="\uD83D\uDC64"}=this._props(),n="";return n+='<div class="start-menu" id="',n+=e(a),n+=`" style="display: none;">
+        <div class="start-menu-header">
+          <div class="start-menu-user-image">`,n+=e(r),n+=`</div>
+          <div class="start-menu-user-name">`,n+=e(s),n+=`</div>
+        </div>
+
+        <div class="start-menu-content">
+          <div class="start-menu-left">
+            <div class="start-menu-pinned">
+              <slot name="pinned-items" />
+            </div>
+            <div class="start-menu-separator"></div>
+            <slot name="all-programs">
+              <button class="start-menu-item all-programs">
+                <span>All Programs</span>
+                <span class="arrow">▸</span>
+              </button>
+            </slot>
+          </div>
+
+          <div class="start-menu-right">
+            <slot name="right-items" />
+          </div>
+        </div>
+
+        <div class="start-menu-footer">
+          <slot name="footer">
+            <button class="start-menu-footer-btn" onclick="showLoginScreen()">
+              <span class="footer-icon">\uD83D\uDD11</span>
+              <span>Log Off</span>
+            </button>
+            <button class="start-menu-footer-btn" onclick="window.location.reload()">
+              <span class="footer-icon">\uD83D\uDD04</span>
+              <span>Restart</span>
+            </button>
+          </slot>
+        </div>
+      </div>`,n}}f(C,{tag:"stacks-start-menu",template:`<div class="start-menu" id="{{ id }}" style="display: none;">
+    <div class="start-menu-header">
+      <div class="start-menu-user-image">{{ userImage }}</div>
+      <div class="start-menu-user-name">{{ userName }}</div>
+    </div>
+
+    <div class="start-menu-content">
+      <div class="start-menu-left">
+        <div class="start-menu-pinned">
+          <slot name="pinned-items" />
+        </div>
+        <div class="start-menu-separator"></div>
+        <slot name="all-programs">
+          <button class="start-menu-item all-programs">
+            <span>All Programs</span>
+            <span class="arrow">▸</span>
+          </button>
+        </slot>
+      </div>
+
+      <div class="start-menu-right">
+        <slot name="right-items" />
+      </div>
+    </div>
+
+    <div class="start-menu-footer">
+      <slot name="footer">
+        <button class="start-menu-footer-btn" onclick="showLoginScreen()">
+          <span class="footer-icon">\uD83D\uDD11</span>
+          <span>Log Off</span>
+        </button>
+        <button class="start-menu-footer-btn" onclick="window.location.reload()">
+          <span class="footer-icon">\uD83D\uDD04</span>
+          <span>Restart</span>
+        </button>
+      </slot>
+    </div>
+  </div>`,styles:"",shadowMode:!1,progressive:!0,properties:{id:{type:"string",default:"start-menu",reflect:!0},userName:{type:"string",default:"Developer",reflect:!0},userImage:{type:"string",default:"\uD83D\uDC64",reflect:!0}},eventTypes:[],bindings:[]});var Z=C;class D extends p{render(t){let{escape:e,raw:i,values:d,entries:l}=t,{icon:a="\uD83D\uDCC4",label:s,onclick:r,url:n,highlighted:c=!1}=this._props(),o="";if(n)o+=`
+      <button
+        class="start-menu-item `,o+=e(c?"highlighted":""),o+=`"
+        onclick="window.open('`,o+=e(n),o+=`', '_blank')"
+      >
+        <span class="start-menu-item-icon">`,o+=e(a),o+=`</span>
+        <span class="start-menu-item-label">`,o+=e(s),o+=`</span>
+      </button>
+      `;else if(r)o+=`
+      <button
+        class="start-menu-item `,o+=e(c?"highlighted":""),o+=`"
+        onclick="`,o+=e(r),o+=`"
+      >
+        <span class="start-menu-item-icon">`,o+=e(a),o+=`</span>
+        <span class="start-menu-item-label">`,o+=e(s),o+=`</span>
+      </button>
+      `;else o+=`<button
+        class="start-menu-item `,o+=e(c?"highlighted":""),o+=`"
+      >
+        <span class="start-menu-item-icon">`,o+=e(a),o+=`</span>
+        <span class="start-menu-item-label">`,o+=e(s),o+=`</span>
+      </button>
+      `;return o}}f(D,{tag:"stacks-start-menu-item",template:`@if (url)
+  <button
+    class="start-menu-item {{ highlighted ? 'highlighted' : '' }}"
+    onclick="window.open('{{ url }}', '_blank')"
+  >
+    <span class="start-menu-item-icon">{{ icon }}</span>
+    <span class="start-menu-item-label">{{ label }}</span>
+  </button>
+  @elseif (onclick)
+  <button
+    class="start-menu-item {{ highlighted ? 'highlighted' : '' }}"
+    onclick="{{ onclick }}"
+  >
+    <span class="start-menu-item-icon">{{ icon }}</span>
+    <span class="start-menu-item-label">{{ label }}</span>
+  </button>
+  @else
+  <button
+    class="start-menu-item {{ highlighted ? 'highlighted' : '' }}"
+  >
+    <span class="start-menu-item-icon">{{ icon }}</span>
+    <span class="start-menu-item-label">{{ label }}</span>
+  </button>
+  @endif`,styles:"",shadowMode:!1,progressive:!0,properties:{icon:{type:"string",default:"\uD83D\uDCC4",reflect:!0},label:{type:"string",reflect:!0},onclick:{type:"string",reflect:!0},url:{type:"string",reflect:!0},highlighted:{type:"boolean",default:!1,reflect:!0}},eventTypes:[],bindings:[]});var X=D;class T extends p{render(t){let{escape:e,raw:i,values:d,entries:l}=t,{showStartMenu:a=!0}=this._props(),s="";if(s+=`<div class="taskbar">
+        `,a)s+=`
+        <button class="start-button" onclick="toggleStartMenu()">
+          <div class="start-button-flag">
+            <div class="flag-red"></div>
+            <div class="flag-green"></div>
+            <div class="flag-blue"></div>
+            <div class="flag-yellow"></div>
+          </div>
+          <span>Start</span>
+        </button>
+        `;return s+=`<div class="quick-launch">
+          <slot name="quick-launch" />
+        </div>
+
+        <div class="taskbar-windows" id="taskbar-windows">
+          <slot name="taskbar-windows" />
+        </div>
+
+        <div class="system-tray">
+          <slot name="system-tray">
+            <button class="tray-icon" onclick="toggleNotificationPopup()">\uD83D\uDD14</button>
+            <button class="tray-icon" onclick="window.open('https://github.com/stacksjs/stacks', '_blank')">\uD83D\uDCBB</button>
+            <button class="tray-icon" onclick="window.open('https://stacksjs.com/discord', '_blank')">\uD83D\uDCAC</button>
+          </slot>
+          <div class="clock" id="clock"></div>
+        </div>
+      </div>`,s}}f(T,{tag:"stacks-taskbar",template:`<div class="taskbar">
+    @if (showStartMenu)
+    <button class="start-button" onclick="toggleStartMenu()">
+      <div class="start-button-flag">
+        <div class="flag-red"></div>
+        <div class="flag-green"></div>
+        <div class="flag-blue"></div>
+        <div class="flag-yellow"></div>
+      </div>
+      <span>Start</span>
+    </button>
+    @endif
+
+    <div class="quick-launch">
+      <slot name="quick-launch" />
+    </div>
+
+    <div class="taskbar-windows" id="taskbar-windows">
+      <slot name="taskbar-windows" />
+    </div>
+
+    <div class="system-tray">
+      <slot name="system-tray">
+        <button class="tray-icon" onclick="toggleNotificationPopup()">\uD83D\uDD14</button>
+        <button class="tray-icon" onclick="window.open('https://github.com/stacksjs/stacks', '_blank')">\uD83D\uDCBB</button>
+        <button class="tray-icon" onclick="window.open('https://stacksjs.com/discord', '_blank')">\uD83D\uDCAC</button>
+      </slot>
+      <div class="clock" id="clock"></div>
+    </div>
+  </div>`,styles:"",shadowMode:!1,progressive:!0,properties:{showStartMenu:{type:"boolean",default:!0,reflect:!0}},eventTypes:[],bindings:[]});var Q=T;class A extends p{render(t){let{escape:e,raw:i,values:d,entries:l}=t,{id:a,icon:s="\uD83D\uDCC4",title:r,left:n="100px",top:c="80px",width:o="600px",height:m="500px",style:g=""}=this._props(),u="";if(u+='<div id="window-',u+=e(a),u+='" class="window" style="',g)u+=e(g);else u+="left: ",u+=e(n),u+="; top: ",u+=e(c),u+="; width: ",u+=e(o),u+="; height: ",u+=e(m),u+=";";return u+=`">
+        <div class="window-titlebar">
+          <div class="window-icon">`,u+=e(s),u+=`</div>
+          <div class="window-title">`,u+=e(r),u+=`</div>
+          <div class="window-controls">
+            <button class="minimize window-control" onclick="minimizeWindow('`,u+=e(a),u+=`')">_</button>
+            <button class="maximize window-control" onclick="toggleMaximizeWindow('`,u+=e(a),u+=`')">□</button>
+            <button class="close window-control" onclick="closeWindow('`,u+=e(a),u+=`')">×</button>
+          </div>
+        </div>
+        <div class="window-content">
+          <slot />
+        </div>
+      </div>`,u}}f(A,{tag:"stacks-window",template:`<div id="window-{{ id }}" class="window" style="@if(style){{ style }}@else left: {{ left }}; top: {{ top }}; width: {{ width }}; height: {{ height }};@endif">
+    <div class="window-titlebar">
+      <div class="window-icon">{{ icon }}</div>
+      <div class="window-title">{{ title }}</div>
+      <div class="window-controls">
+        <button class="minimize window-control" onclick="minimizeWindow('{{ id }}')">_</button>
+        <button class="maximize window-control" onclick="toggleMaximizeWindow('{{ id }}')">□</button>
+        <button class="close window-control" onclick="closeWindow('{{ id }}')">×</button>
+      </div>
+    </div>
+    <div class="window-content">
+      <slot />
+    </div>
+  </div>`,styles:"",shadowMode:!1,progressive:!0,properties:{id:{type:"string",reflect:!0},icon:{type:"string",default:"\uD83D\uDCC4",reflect:!0},title:{type:"string",reflect:!0},left:{type:"string",default:"100px",reflect:!0},top:{type:"string",default:"80px",reflect:!0},width:{type:"string",default:"600px",reflect:!0},height:{type:"string",default:"500px",reflect:!0},style:{type:"string",default:"",reflect:!0}},eventTypes:[],bindings:[]});var V=A;export{b as ContextMenu,I as ContextMenuElement,h as ContextMenuItem,W as ContextMenuItemElement,y as DesktopIcon,B as DesktopIconElement,_ as FeatureButton,H as FeatureButtonElement,w as InputGroup,K as InputGroupElement,k as LoginForm,F as LoginFormElement,x as LoginScreen,U as LoginScreenElement,S as NotificationPopup,J as NotificationPopupElement,E as PackageItem,G as PackageItemElement,C as StartMenu,Z as StartMenuElement,D as StartMenuItem,X as StartMenuItemElement,T as Taskbar,Q as TaskbarElement,A as Window,V as WindowElement};
+
+//# debugId=ACA2F932EBB98A3364756E2164756E21