amateras 0.14.0 → 0.14.1

package/build/core.js

@@ -1 +1 @@
-import{forEach as t,_Object_assign as e,_null as s,map as i,_Array_from as o,_Object_entries as r,isFunction as n,isUndefined as l,isNull as h,toArray as a,_instanceof as d,isString as p,isArray as c}from"@amateras/utils";const u=window,f=document,m=t=>!t||t(),b=t=>!1,g=/* @__PURE__ */Symbol("ProtoType"),P=/* @__PURE__ */Symbol("Statement"),y=/* @__PURE__ */Symbol("Signal");class v{static disposers=/* @__PURE__ */new Set;promises=/* @__PURE__ */new Set;root;static initials=/* @__PURE__ */new Set;constructor(s){t(v.initials,t=>{const s=t(this);s&&e(this,s)}),this.root=s,s.listen("dispose",()=>this.dispose())}dispose(){this.promises.clear(),this.root=s,t(v.disposers,t=>t(this))}static assign(t){this.initials.add(t)}asyncTask(t){return this.promises.add(t),t.finally(()=>this.promises.delete(t)),t}}class M{static proto=s;static[g]="Proto";static[P]=!1;layout;parent=s;global=M.proto?.global??new v(this);sibling=s;firstProto=s;lastProto=s;builded=!1;visible=!0;listeners=s;constructor(t){this.layout=t??s}dispose(){this.dispatch("dispose",[this]),t(this.protos,t=>t.dispose()),this.global=s,this.sibling=s,this.firstProto=s,this.lastProto=s,this.parent=s,this.layout=s}get children(){return i(Array.from(this.protos).filter(t=>t.visible),t=>t.constructor[P]?t.children:t).flat()}get protos(){let t=/* @__PURE__ */new Set,e=this.firstProto;if(e){let s=e;for(;s;)t.add(s),s=s.sibling}return t}append(...e){t(e,t=>{if(t.parent!==this&&t.parent?.removeProtos(t),this.lastProto){if(this.lastProto===t)return;this.firstProto===t&&(this.firstProto=t.sibling),t.sibling=s,this.lastProto.sibling=t,this.lastProto=t}else this.firstProto=t,this.lastProto=t;t.parent=this,t.global=this.global})}replaceProtos(...t){this.clear(),this.processProtos(...t)}insert(t,e=-1){if(0===e)this.firstProto&&(t.sibling=this.firstProto),this.firstProto=t;else{let s=o(this.protos),i=e<0?s.length+e+1:e;s.splice(i,0,t),this.processProtos(...s)}t.parent=this,t.global=this.global}remove(){this.parent?.removeProtos(this)}removeProtos(...e){let s=this.protos;t(e,t=>{t.parent=null,t.sibling=null,s.delete(t)}),this.processProtos(...s)}processProtos(...e){let i=s;e.length?t(e,(t,e)=>{0===e&&(this.firstProto=t),i&&(i.sibling=t),t.sibling=s,i=t,t.parent=this}):this.firstProto=s,this.lastProto=i}build(e=!0,s=!0){return s&&this.clear(!0),$.context(M,this,()=>this.layout?.(this)),this.builded=!0,e&&t(this.protos,t=>{t.build()}),this.dispatch("builded",[this]),this}toString(){return i(o(this.protos).filter(t=>t.visible),t=>`${t}`).join("")}toDOM(t=!0){return t?i(o(this.protos).filter(t=>t.visible),e=>e.toDOM(t)).flat():[]}ondispose(t){this.listen("dispose",t)}removeNode(){t(this.protos,t=>t.removeNode())}clear(e=!1){let s=this.protos;this.removeProtos(...s),e&&t(s,t=>t.dispose())}findAbove(t){let e=this.parent;return e?t(e)?e:e.findAbove(t):s}findBelow(t){for(let e of this.protos){if(t(e))return e;let s=e.findBelow(t);if(s)return s}return s}findBelowAll(t){let e=[];for(let s of this.protos)t(s)&&e.push(s),e.push(...s.findBelowAll(t));return e}mutate(){}get text(){return this.children.map(t=>t.text).join("")}dispatch(e,s,i){let o=this.listeners?.[e],r=!1;if(i?.bubbles){let t=this.parent?.dispatch(e,s,i);r||(r=t??!1)}return t(o,t=>{let e=t(...s)??!1;r||(r=e)}),r}listen(t,e){let s=this.listeners??{};this.listeners=s;let i=s[t]??/* @__PURE__ */new Set;this.listeners[t]=i,i.add(e)}}class w extends M{node=s;constructor(t){super(t)}ondom(t){this.listen("dom",t)}dispose(){super.dispose(),this.node=s}inDOM(){return!!m()&&document.contains(this.node)}removeNode(){this.node?.remove()}}const S=["img","hr","br","input","link","meta"];class _ extends w{tagname;#t={};#e="";__props__;constructor(t,e,s){super(()=>s?.(this)),this.tagname=t,this.__props__=e}dispose(){super.dispose(),this.layout=null}build(t){return this.__props__&&(this.props(this.__props__),this.__props__=s),super.build(t),this}props({...e}){let{class:s,...i}=e;s&&this.addClass(...s.split(" ")),t(r(i),([t,e])=>{t.startsWith("on")&&n(e)&&(this.on(t.replace("on",""),e),delete i[t])}),this.attrProcess(i)}on(t,e,s){let i=i=>{i.addEventListener(t,e,s),this.listen("dispose",()=>this.node?.removeEventListener(t,e))};this.node?i(this.node):this.listen("dom",i)}toString(){return this.parseHTML()}parseHTML(t){let e=this.tagname,s=t?.children??(this.#e||i(this.protos,t=>t.visible?`${t}`:"").join("")),o=t?.attr??i(r(this.#t),([t,e])=>e.length?`${t}="${e}"`:t).join(" "),n=o.length?" "+o:"";return S.includes(e)?`<${e}${n} />`:`<${e}${n}>${s}</${e}>`}toDOM(e=!0){let s=this.node??document.createElement(this.tagname);return this.node=s,this.#e&&this.node.innerHTML!==this.#e?this.node.innerHTML=this.#e:e&&this.DOMProcess(),t(r(this.#t),([t,e])=>s.setAttribute(t,e)),this.dispatch("dom",[this.node]),[s]}DOMProcess(){let e=this.node;if(e){let r=i(o(this.protos).filter(t=>t.visible),t=>t.toDOM()).flat(),n=s;t(r,(t,i)=>{let o=e.childNodes[i];o!==t&&(n=r.includes(o)?e.childNodes[i+1]??s:o??s,e.insertBefore(t,n))})}}attrProcess(e){t(r(e),([t,e])=>{for(let s of $.process.attr){let i=s(t,e,this);if(!l(i))return}this.attr(t,e)})}innerHTML(t){this.#e=t,this.node&&(this.node.innerHTML=t)}attr(t,e){return arguments.length?l(e)?this.#t[t]??s:(h(e)?(delete this.#t[t],this.node?.removeAttribute(t)):(this.#t[t]=e,this.node?.setAttribute(t,e)),this):this.#t}addClass(...t){this.token("add","class",...t),this.node?.classList.add(...t)}removeClass(...t){this.token("delete","class",...t),this.node?.classList.remove(...t)}style(t){let s=()=>this.node&&e(this.node.style,t);s(),this.node||this.ondom(s)}token(e,s,...i){let r=this.#t[s],n=new Set(r?.split(" ")??[]);t(i,t=>n[e](t)),this.#t[s]=o(n).join(" ")}}class T extends w{#s;constructor(t){super(),this.#s=t}get content(){return this.#s}set content(t){this.#s=t,this.node&&(this.node.textContent=t)}toString(){return this.#s}toDOM(){if(this.node)return[this.node];let t=new Text(this.#s);return this.node=t,this.dispatch("dom",[this.node]),[t]}get text(){return this.#s}}class L extends w{constructor(t){super(t),m()&&(this.node=new Text)}toDOM(){return[this.node,...super.toDOM()]}removeNode(){super.removeNode(),t(this.protos,t=>t.removeNode())}}function x(e,...i){const o=M.proto,r=[],h=t=>{e&&o?.append(t),r.push(t)};for(let t of H.process.craft){let e=t(...i);if(!l(e))return h(e),e}const[a,u,f]=i;if(d(a,M))return h(a),a;if(p(a)){let t=n(u)?[,u]:[u,f],e=new _(a,...t);return h(e),e}if(n(a)){let t=u?[u,f]:[f];d(a.prototype,_)&&(t=n(u)?[{},u]:[u,f]);let e=new a(...t);if(d(e,M))return h(e),e}if(c(a)){let e=t=>{for(let s of H.process.text){let e=s(t);if(!l(e))return h(e)}let e=l(t)?s:new T(`${t}`);e&&h(e)},[o,...n]=i;return o.raw?t(o,(t,i)=>{let o=t.length?new T(t):s,r=n[i];o&&h(o),e(r)}):t(o,t=>e(t)),r}}function H(...t){return x(!0,...t)}var D;(D=H||(H={})).process={craft:/* @__PURE__ */new Set,text:/* @__PURE__ */new Set,attr:/* @__PURE__ */new Set},D.craft=(...t)=>x(!1,...t),D.render=(t,e)=>{let s=D(t).build().toDOM();document.querySelector(e)?.replaceChildren(...s)},D.context=(t,e,s)=>{let i=t.proto;t.proto=e,s(),t.proto=i},D.call=t=>t(),D.match=(t,e)=>{var s=/* @__PURE__ */new Map,i=/* @__PURE__ */Symbol("default"),o={case:(t,e)=>(s.set(t,e),o),default:t=>(s.set(i,t),o)};return e(o),s.get(t)?.()??s.get(i)?.()},D.tuple=(...t)=>t,D.async=t=>M.proto?.global.asyncTask(t(M.proto))??t(M.proto),D.stylesheet=m()?new CSSStyleSheet:s,D.styleMap=/* @__PURE__ */new Map,D.style=(e,s)=>{let i=a(s);if(e){let s=D.styleMap.get(e)??/* @__PURE__ */new Set;t(i,t=>s.add(t)),D.styleMap.set(e,s)}D.stylesheet&&t(i,t=>D.stylesheet.insertRule(t))},D.stylesheet&&document.adoptedStyleSheets.push(D.stylesheet),m()&&document.querySelector("style#__ssr__")?.remove(),globalThis.$=H;export{H as $,_ as ElementProto,v as GlobalState,w as NodeProto,M as Proto,L as ProxyProto,T as TextProto,f as _document,u as _window,m as onclient,b as onserver,g as symbol_ProtoType,y as symbol_Signal,P as symbol_Statement};
+import{forEach as t,_Object_assign as e,_null as s,map as i,_Object_entries as o,isFunction as r,isUndefined as n,isNull as l,_Array_from as h,toArray as a,_instanceof as d,isString as p,isArray as c}from"@amateras/utils";const u=window,f=document,m=t=>!t||t(),b=t=>!1,g=/* @__PURE__ */Symbol("ProtoType"),P=/* @__PURE__ */Symbol("Statement"),v=/* @__PURE__ */Symbol("Signal");class y{static disposers=/* @__PURE__ */new Set;promises=/* @__PURE__ */new Set;root;static initials=/* @__PURE__ */new Set;constructor(s){t(y.initials,t=>{const s=t(this);s&&e(this,s)}),this.root=s,s.listen("dispose",()=>this.dispose())}dispose(){this.promises.clear(),this.root=s,t(y.disposers,t=>t(this))}static assign(t){this.initials.add(t)}asyncTask(t){return this.promises.add(t),t.finally(()=>this.promises.delete(t)),t}}class M{static proto=s;static[g]="Proto";static[P]=!1;layout;parent=s;global=M.proto?.global??new y(this);sibling=s;firstProto=s;lastProto=s;builded=!1;visible=!0;virtual=!1;listeners=s;constructor(t){this.layout=t??s}dispose(){this.dispatch("dispose",[this]),t(this.protos,t=>t.dispose()),this.global=s,this.sibling=s,this.firstProto=s,this.lastProto=s,this.parent=s,this.layout=s}get children(){return i(this.protos,t=>t.constructor[P]?t.children:t).flat()}get protos(){let t=[],e=this.firstProto;if(e){let s=e;for(;s;)t.push(s),s=s.sibling}return t}append(...e){t(e,t=>{if(t.parent!==this&&t.parent?.removeProtos(t),this.lastProto){if(this.lastProto===t)return;this.firstProto===t&&(this.firstProto=t.sibling),t.sibling=s,this.lastProto.sibling=t,this.lastProto=t}else this.firstProto=t,this.lastProto=t;t.parent=this,t.global=this.global})}replaceProtos(...t){this.clear(),this.processProtos(...t)}insert(t,e=-1){if(0===e)this.firstProto&&(t.sibling=this.firstProto),this.firstProto=t;else{let s=this.protos,i=e<0?s.length+e+1:e;s.splice(i,0,t),this.processProtos(...s)}t.parent=this,t.global=this.global}remove(){this.parent?.removeProtos(this)}removeProtos(...e){let s=new Set(this.protos);t(e,t=>{t.parent=null,t.sibling=null,s.delete(t)}),this.processProtos(...s)}processProtos(...e){let i=s;e.length?t(e,(t,e)=>{0===e&&(this.firstProto=t),i&&(i.sibling=t),t.sibling=s,i=t,t.parent=this}):this.firstProto=s,this.lastProto=i}build(e=!0,s=!0){return s&&this.clear(!0),$.context(M,this,()=>this.layout?.(this)),this.builded=!0,e&&t(this.protos,t=>{t.build()}),this.dispatch("builded",[this]),this}toString(){return i(this.protos.filter(t=>t.visible),t=>`${t}`).join("")}toDOM(e=!0){let s=[];return t(this.protos,t=>{t.visible?e&&s.push(...t.toDOM()):t.removeNode()}),s}ondispose(t){this.listen("dispose",t)}removeNode(){t(this.protos,t=>t.removeNode())}clear(e=!1){let s=this.protos;this.removeProtos(...s),e&&t(s,t=>t.dispose())}findAbove(t){let e=this.parent;return e?t(e)?e:e.findAbove(t):s}findBelow(t){for(let e of this.protos){if(t(e))return e;let s=e.findBelow(t);if(s)return s}return s}findBelowAll(t){let e=[];for(let s of this.protos)t(s)&&e.push(s),e.push(...s.findBelowAll(t));return e}mutate(){}get text(){return this.children.map(t=>t.text).join("")}dispatch(e,s,i){let o=this.listeners?.[e],r=!1;if(i?.bubbles){let t=this.parent?.dispatch(e,s,i);r||(r=t??!1)}return t(o,t=>{let e=t(...s)??!1;r||(r=e)}),r}listen(t,e){let s=this.listeners??{};this.listeners=s;let i=s[t]??/* @__PURE__ */new Set;this.listeners[t]=i,i.add(e)}}class w extends M{node=s;constructor(t){super(t)}ondom(t){this.listen("dom",t)}dispose(){super.dispose(),this.node=s}inDOM(){return!!m()&&document.contains(this.node)}removeNode(){this.node?.remove()}DOMProcess(){let e=this.node;if(e){let o=this.protos,r=i(o.filter(t=>t.visible),t=>t.toDOM()).flat(),n=s;t(r,(t,i)=>{let o=e.childNodes[i];o!==t&&(n=r.includes(o)?e.childNodes[i+1]??s:o??s,e.insertBefore(t,n))})}}}const S=["img","hr","br","input","link","meta"];class _ extends w{tagname;#t={};static[g]="Element";#e="";__props__;constructor(t,e,s){super(()=>s?.(this)),this.tagname=t,this.__props__=e}dispose(){super.dispose(),this.layout=null}build(t){return this.__props__&&(this.props(this.__props__),this.__props__=s),super.build(t),this}props({...e}){let{class:s,...i}=e;s&&this.addClass(...s.split(" ")),t(o(i),([t,e])=>{t.startsWith("on")&&r(e)&&(this.on(t.replace("on",""),e),delete i[t])}),this.attrProcess(i)}on(t,e,s){let i=i=>{i.addEventListener(t,e,s),this.listen("dispose",()=>this.node?.removeEventListener(t,e))};this.node?i(this.node):this.listen("dom",i)}toString(){return this.parseHTML()}parseHTML(t){let e=this.tagname,s=t?.children??(this.#e||i(this.protos,t=>t.visible?`${t}`:"").join("")),r=t?.attr??i(o(this.#t),([t,e])=>e.length?`${t}="${e}"`:t).join(" "),n=r.length?" "+r:"";return S.includes(e)?`<${e}${n} />`:`<${e}${n}>${s}</${e}>`}toDOM(e=!0){super.toDOM();let s=!!this.node,i=this.node??document.createElement(this.tagname);return this.node=i,e&&(this.#e&&!s?this.node.innerHTML=this.#e:s&&!this.virtual||this.DOMProcess()),s||t(o(this.#t),([t,e])=>i.setAttribute(t,e)),s||this.dispatch("dom",[this.node]),[i]}attrProcess(e){t(o(e),([t,e])=>{for(let s of $.process.attr){let i=s(t,e,this);if(!n(i))return}this.attr(t,e)})}innerHTML(t){this.#e=t,this.node&&(this.node.innerHTML=t)}attr(t,e){return arguments.length?n(e)?this.#t[t]??s:(l(e)?(delete this.#t[t],this.node?.removeAttribute(t)):(this.#t[t]=e,this.node?.setAttribute(t,e)),this):this.#t}addClass(...t){this.token("add","class",...t),this.node?.classList.add(...t)}removeClass(...t){this.token("delete","class",...t),this.node?.classList.remove(...t)}style(t){let s=()=>this.node&&e(this.node.style,t);s(),this.node||this.ondom(s)}token(e,s,...i){let o=this.#t[s],r=new Set(o?.split(" ")??[]);t(i,t=>r[e](t)),this.#t[s]=h(r).join(" ")}}class T extends w{#s;constructor(t){super(),this.#s=t}get content(){return this.#s}set content(t){this.#s=t,this.node&&(this.node.textContent=t)}toString(){return this.#s}toDOM(){if(super.toDOM(),this.node)return[this.node];let t=new Text(this.#s);return this.node=t,this.dispatch("dom",[this.node]),[t]}get text(){return this.#s}}class x extends w{constructor(t){super(t),m()&&(this.node=new Text)}toDOM(){return[this.node,...super.toDOM()]}removeNode(){super.removeNode(),t(this.protos,t=>t.removeNode())}}function L(e,...i){const o=M.proto,l=[],h=t=>{e&&o?.append(t),l.push(t)};for(let t of D.process.craft){let e=t(...i);if(!n(e))return h(e),e}const[a,u,f]=i;if(d(a,M))return h(a),a;if(p(a)){let t=r(u)?[,u]:[u,f],e=new _(a,...t);return h(e),e}if(r(a)){let t=u?[u,f]:[f];d(a.prototype,_)&&(t=r(u)?[{},u]:[u,f]);let e=new a(...t);if(d(e,M))return h(e),e}if(c(a)){let e=t=>{for(let s of D.process.text){let e=s(t);if(!n(e))return h(e)}let e=n(t)?s:new T(`${t}`);e&&h(e)},[o,...r]=i;return o.raw?t(o,(t,i)=>{let o=t.length?new T(t):s,n=r[i];o&&h(o),e(n)}):t(o,t=>e(t)),l}}function D(...t){return L(!0,...t)}var O;(O=D||(D={})).process={craft:/* @__PURE__ */new Set,text:/* @__PURE__ */new Set,attr:/* @__PURE__ */new Set},O.craft=(...t)=>L(!1,...t),O.render=(t,e)=>{let s=O(t).build().toDOM();document.querySelector(e)?.replaceChildren(...s)},O.context=(t,e,s)=>{let i=t.proto;t.proto=e,s(),t.proto=i},O.call=t=>t(),O.match=(t,e)=>{var s=/* @__PURE__ */new Map,i=/* @__PURE__ */Symbol("default"),o={case:(t,e)=>(s.set(t,e),o),default:t=>(s.set(i,t),o)};return e(o),s.get(t)?.()??s.get(i)?.()},O.tuple=(...t)=>t,O.async=t=>M.proto?.global.asyncTask(t(M.proto))??t(M.proto),O.stylesheet=m()?new CSSStyleSheet:s,O.styleMap=/* @__PURE__ */new Map,O.style=(e,s)=>{let i=a(s);if(e){let s=O.styleMap.get(e)??/* @__PURE__ */new Set;t(i,t=>s.add(t)),O.styleMap.set(e,s)}O.stylesheet&&t(i,t=>O.stylesheet.insertRule(t))},O.stylesheet&&document.adoptedStyleSheets.push(O.stylesheet),m()&&document.querySelector("style#__ssr__")?.remove(),globalThis.$=D;export{D as $,_ as ElementProto,y as GlobalState,w as NodeProto,M as Proto,x as ProxyProto,T as TextProto,f as _document,u as _window,m as onclient,b as onserver,g as symbol_ProtoType,v as symbol_Signal,P as symbol_Statement};

package/build/for.js

@@ -1 +1 @@
-import{ProxyProto as t,symbol_Statement as e,Proto as s}from"@amateras/core";import{forEach as i,_Array_from as o,_null as r}from"@amateras/utils";class l extends t{static[e]=!0;#t;list$;#e=/* @__PURE__ */new Map;constructor(t,e){super(),this.list$=t,this.#t=e;let s=()=>{const t=this.exec();i(this.protos,t=>t.builded||t.build()),i(t,t=>t.removeNode());let e=this.node,s=e?.parentNode;if(e&&s){let t=this.toDOM(),l=o(s.childNodes).indexOf(e),a=r;i(t,i=>{if(i!==e){let e=s.childNodes[l];e!==i&&(a=t.includes(e)?s.childNodes[l+1]??r:e??r,s.insertBefore(i,a))}l++})}this.parent?.mutate()};this.list$.subscribe(s),this.listen("dispose",()=>this.list$.unsubscribe(s))}build(){return this.#e=/* @__PURE__ */new Map,this.exec(),this.protos.forEach(t=>t.builded||t.build()),this}exec(){let t=this.protos,e=/* @__PURE__ */new Set;return i(this.list$.value,(i,o)=>{$.context(s,this,()=>{let s=this.#t,r=this.#e.get(i)??new a(()=>s(i,o));this.#e.set(i,r),t.delete(r),e.add(r)})}),this.replaceProtos(...e),t}removeNode(){this.node?.remove(),i(this.protos,t=>t.removeNode())}dispose(){super.dispose(),i(this.#e.values(),t=>t.dispose()),this.#e.clear()}}class a extends s{static[e]=!0}globalThis.For=l,$.process.craft.add((t,e,s)=>{if(t===l)return new l(e,s)});export{l as For,a as ForItem};
+import{ProxyProto as t,symbol_Statement as e,Proto as s}from"@amateras/core";import{forEach as i,_Array_from as o,_null as r}from"@amateras/utils";class a extends t{static[e]=!0;#t;list$;#e=/* @__PURE__ */new Map;constructor(t,e){super(),this.list$=t,this.#t=e;let s=()=>{const t=this.exec();i(this.protos,t=>t.builded||t.build()),i(t,t=>t.removeNode());let e=this.node,s=e?.parentNode;if(e&&s){let t=this.toDOM(),a=o(s.childNodes).indexOf(e),l=r;i(t,i=>{if(i!==e){let e=s.childNodes[a];e!==i&&(l=t.includes(e)?s.childNodes[a+1]??r:e??r,s.insertBefore(i,l))}a++})}this.parent?.mutate(),this.parent?.dispatch("mutate",[],{bubbles:!0})};this.list$.subscribe(s),this.listen("dispose",()=>this.list$.unsubscribe(s))}build(){return this.#e=/* @__PURE__ */new Map,this.exec(),this.protos.forEach(t=>t.builded||t.build()),this}exec(){let t=new Set(this.protos),e=/* @__PURE__ */new Set;return i(this.list$.value,(i,o)=>{$.context(s,this,()=>{let s=this.#t,r=this.#e.get(i)??new l(()=>s(i,o));this.#e.set(i,r),t.delete(r),e.add(r)})}),this.replaceProtos(...e),t}dispose(){super.dispose(),i(this.#e.values(),t=>t.dispose()),this.#e.clear()}mutate(){super.mutate(),this.parent?.mutate()}}class l extends s{static[e]=!0}globalThis.For=a,$.process.craft.add((t,e,s)=>{if(t===a)return new a(e,s)});export{a as For,l as ForItem};

package/build/if.js

@@ -1 +1 @@
-import{Proto as s,symbol_Statement as e,ProxyProto as t}from"@amateras/core";import{_null as i,toArray as r,forEach as a,_instanceof as l,isIncluded as o,isArray as p}from"@amateras/utils";import{Signal as d}from"@amateras/signal";class n extends s{static[e]=!0;exps;constructor(s,e){super(()=>e(...this.exps??[])),this.exps=s?r(s):i}dispose(){super.dispose(),this.exps=i}validate(){return!this.exps||!this.exps.find(s=>!s.value)}}class u extends n{}class h extends n{}class f extends n{}class b extends t{static[e]=!0;statement=i;build(){super.build(!1,!1),this.validate()?.build();let s=()=>{let s=this.validate();s?.builded||s?.build(),this.statement!==s&&(this.statement=s??i,a(this.protos,s=>!s.visible&&s.removeNode()),this.node?.replaceWith(...this.toDOM()),this.parent?.mutate())};return a(this.protos,e=>{a(e.exps,t=>{t?.subscribe(s),e.listen("dispose",()=>{t?.unsubscribe(s)})})}),this}get protos(){return super.protos}dispose(){super.dispose(),this.statement=i}validate(){a(this.protos,s=>s.visible=!1);for(let s of this.protos)if(s.validate())return s.visible=!0,s}}globalThis.If=f,globalThis.Else=u,globalThis.ElseIf=h;let m=null;$.process.craft.add((s,e,t)=>{if(s===f&&(m=new b),l(m,b)){if(o(s,[f,u,h])){{let r=new s(...l(e,d)||p(e)?[e,t]:[i,e]);m.append(r)}return m}m=i}else if(o(s,[u,h]))throw"ElseIf/Else must be after If or ElseIf"});
+import{Proto as t,symbol_Statement as s,ProxyProto as e}from"@amateras/core";import{_null as i,toArray as a,forEach as r,_instanceof as l,isIncluded as o,isArray as p}from"@amateras/utils";import{Signal as u}from"@amateras/signal";class d extends t{static[s]=!0;exps;constructor(t,s){super(()=>s(...this.exps??[])),this.exps=t?a(t):i}dispose(){super.dispose(),this.exps=i}mutate(){super.mutate(),this.parent?.mutate()}validate(){return!this.exps||!this.exps.find(t=>!t.value)}}class n extends d{}class h extends d{}class m extends d{}class b extends e{static[s]=!0;statement=i;virtual=!0;build(){super.build(!1,!1),this.validate()?.build();let t=()=>{let t=this.validate();t?.builded||t?.build(),this.statement!==t&&(this.statement=t??i,r(this.protos,t=>!t.visible&&t.removeNode()),this.node?.replaceWith(...this.toDOM()),this.parent?.mutate(),this.parent?.dispatch("mutate",[],{bubbles:!0}))};return r(this.protos,s=>{r(s.exps,e=>{e?.subscribe(t),s.listen("dispose",()=>{e?.unsubscribe(t)})})}),this}get protos(){return super.protos}dispose(){super.dispose(),this.statement=i}mutate(){super.mutate(),this.parent?.mutate()}validate(){r(this.protos,t=>t.visible=!1);for(let t of this.protos)if(t.validate())return t.visible=!0,t}}globalThis.If=m,globalThis.Else=n,globalThis.ElseIf=h;let f=null;$.process.craft.add((t,s,e)=>{if(t===m&&(f=new b),l(f,b)){if(o(t,[m,n,h])){{let a=new t(...l(s,u)||p(s)?[s,e]:[i,s]);f.append(a)}return f}f=i}else if(o(t,[n,h]))throw"ElseIf/Else must be after If or ElseIf"});

package/build/import-map.js

@@ -1 +1 @@
-const e=`https://unpkg.com/amateras@${"0.14.0"}/build`,t={amateras:`${e}/core.js`},s=[{name:"core",description:"Core module",entry:"core/src/index.ts",mapped:!0,listed:!0},{name:"widget",description:"Component module",entry:"widget/src/index.ts",mapped:!0,listed:!0},{name:"signal",description:"Reactive data module",entry:"signal/src/index.ts",mapped:!0,listed:!0},{name:"store",description:"Access data between widgets",entry:"store/src/index.ts",mapped:!0,listed:!0},{name:"css",description:"CSS-in-JS module",entry:"css/src/index.ts",mapped:!0,listed:!0},{name:"css-variable",description:"CSS variable module",entry:"css/src/ext/variable.ts",mapped:!0,listed:!1},{name:"css-keyframes",description:"CSS keyframes module",entry:"css/src/ext/keyframes.ts",mapped:!0,listed:!1},{name:"css-property",description:"CSS property module",entry:"css/src/ext/property.ts",mapped:!0,listed:!1},{name:"for",description:"For loop control-flow",entry:"for/src/index.ts",mapped:!0,listed:!0},{name:"if",description:"If/Else/ElseIf control-flow",entry:"if/src/index.ts",mapped:!0,listed:!0},{name:"match",description:"Match/Case/Default control-flow",entry:"match/src/index.ts",mapped:!0,listed:!0},{name:"router",description:"Router module",entry:"router/src/index.ts",mapped:!0,listed:!0},{name:"i18n",description:"Translation module",entry:"i18n/src/index.ts",mapped:!0,listed:!0},{name:"idb",description:"IndexedDB module",entry:"idb/src/index.ts",mapped:!0,listed:!0},{name:"markdown",description:"Markdown to HTML module",codeInsert:'import { Markdown } from "amateras/markdown"; new Markdown();',entry:"markdown/src/index.ts",mapped:!0,listed:!0},{name:"prefetch",description:"SSR data prefetch",entry:"prefetch/src/index.ts",mapped:!0,listed:!0},{name:"meta",description:"SSR `meta` tag manager",entry:"meta/src/index.ts",mapped:!0,listed:!0},{name:"ui",description:"UI components",entry:"ui/src/index.ts",mapped:!0,listed:!0},{name:"utils",description:"Utilities module",entry:"utils/src/index.ts",mapped:!0,listed:!0}].map(e=>e.name),r={...t,...Object.fromEntries(s.map(t=>{const s=`amateras/${t}`,r=`${e}/${t}.js`;return[[s,r],[`@${s}`,r]]}).flat())},n=document.querySelector('script[type="importmap"]');if(n){const e=JSON.parse(n.innerHTML);e.imports={...e.imports,...r},n.innerHTML=JSON.stringify(e,null,"\t")}else{const e=document.createElement("script");e.setAttribute("type","importmap"),e.innerHTML=JSON.stringify({imports:r},null,"\t"),document.head.prepend(e)}
+const e=`https://unpkg.com/amateras@${"0.14.1"}/build`,t={amateras:`${e}/core.js`},s=[{name:"core",description:"Core module",entry:"core/src/index.ts",mapped:!0,listed:!0},{name:"widget",description:"Component module",entry:"widget/src/index.ts",mapped:!0,listed:!0},{name:"signal",description:"Reactive data module",entry:"signal/src/index.ts",mapped:!0,listed:!0},{name:"store",description:"Access data between widgets",entry:"store/src/index.ts",mapped:!0,listed:!0},{name:"css",description:"CSS-in-JS module",entry:"css/src/index.ts",mapped:!0,listed:!0},{name:"css-variable",description:"CSS variable module",entry:"css/src/ext/variable.ts",mapped:!0,listed:!1},{name:"css-keyframes",description:"CSS keyframes module",entry:"css/src/ext/keyframes.ts",mapped:!0,listed:!1},{name:"css-property",description:"CSS property module",entry:"css/src/ext/property.ts",mapped:!0,listed:!1},{name:"for",description:"For loop control-flow",entry:"for/src/index.ts",mapped:!0,listed:!0},{name:"if",description:"If/Else/ElseIf control-flow",entry:"if/src/index.ts",mapped:!0,listed:!0},{name:"match",description:"Match/Case/Default control-flow",entry:"match/src/index.ts",mapped:!0,listed:!0},{name:"router",description:"Router module",entry:"router/src/index.ts",mapped:!0,listed:!0},{name:"i18n",description:"Translation module",entry:"i18n/src/index.ts",mapped:!0,listed:!0},{name:"idb",description:"IndexedDB module",entry:"idb/src/index.ts",mapped:!0,listed:!0},{name:"markdown",description:"Markdown to HTML module",codeInsert:'import { Markdown } from "amateras/markdown"; new Markdown();',entry:"markdown/src/index.ts",mapped:!0,listed:!0},{name:"prefetch",description:"SSR data prefetch",entry:"prefetch/src/index.ts",mapped:!0,listed:!0},{name:"meta",description:"SSR `meta` tag manager",entry:"meta/src/index.ts",mapped:!0,listed:!0},{name:"ui",description:"UI components",entry:"ui/src/index.ts",mapped:!0,listed:!0},{name:"utils",description:"Utilities module",entry:"utils/src/index.ts",mapped:!0,listed:!0}].map(e=>e.name),r={...t,...Object.fromEntries(s.map(t=>{const s=`amateras/${t}`,r=`${e}/${t}.js`;return[[s,r],[`@${s}`,r]]}).flat())},n=document.querySelector('script[type="importmap"]');if(n){const e=JSON.parse(n.innerHTML);e.imports={...e.imports,...r},n.innerHTML=JSON.stringify(e,null,"\t")}else{const e=document.createElement("script");e.setAttribute("type","importmap"),e.innerHTML=JSON.stringify({imports:r},null,"\t"),document.head.prepend(e)}

package/build/match.js

@@ -1 +1 @@
-import{Proto as t,symbol_Statement as e,ProxyProto as s}from"@amateras/core";import{isArray as i,_null as a,forEach as d,is as h}from"@amateras/utils";class l extends t{static[e]=!0;condition;constructor(t,e){super(e),this.condition=i(t)?t:[t]}}class r extends t{static[e]=!0;constructor(t){super(t)}}class c extends s{static[e]=!0;exp$;cases=/* @__PURE__ */new Set;matched=a;#t=a;constructor(t,e){super(()=>{e((t,e,s)=>{$(t,e,s)})}),this.exp$=t}dispose(){d(this.cases,t=>t.dispose()),this.#t?.dispose(),this.matched=a,this.#t=a,this.cases.clear()}build(){super.build(!1),this.validate();let t=()=>{let t=this.matched,e=this.validate();t!==e&&(d(this.cases,t=>t!==e&&t.removeNode()),e!==this.#t&&this.#t?.removeNode(),this.node?.replaceWith(...this.toDOM()),this.parent?.mutate())};return d(this.cases,e=>{this.exp$.subscribe(t),e.listen("dispose",()=>this.exp$.unsubscribe(t))}),this}case(t,e){let s=new l(t,e);return this.cases.add(s),s}default(t){let e=new r(t);return this.#t=e,e}validate(){this.clear();for(let t of this.cases)if(t.condition.includes(this.exp$.value))return this.append(t),t.builded||t.build(),this.matched=t;if(this.#t)return this.append(this.#t),this.#t.builded||this.#t.build(),this.matched=this.#t}}globalThis.Match=c,globalThis.Case=l,globalThis.Default=r,$.process.craft.add((e,s,i)=>e===c?new c(s,i):e===l?h(t.proto,c)?.case(s,i):e===r?h(t.proto,c)?.default(s):void 0);
+import{Proto as t,symbol_Statement as e,ProxyProto as s}from"@amateras/core";import{isArray as i,_null as a,forEach as d,is as h}from"@amateras/utils";class l extends t{static[e]=!0;condition;constructor(t,e){super(e),this.condition=i(t)?t:[t]}}class u extends t{static[e]=!0;constructor(t){super(t)}}class r extends s{static[e]=!0;exp$;cases=/* @__PURE__ */new Set;matched=a;#t=a;constructor(t,e){super(()=>{e((t,e,s)=>{$(t,e,s)})}),this.exp$=t}dispose(){d(this.cases,t=>t.dispose()),this.#t?.dispose(),this.matched=a,this.#t=a,this.cases.clear()}build(){super.build(!1),this.validate();let t=()=>{let t=this.matched,e=this.validate();t!==e&&(d(this.cases,t=>t!==e&&t.removeNode()),e!==this.#t&&this.#t?.removeNode(),this.node?.replaceWith(...this.toDOM()),this.parent?.mutate(),this.parent?.dispatch("mutate",[],{bubbles:!0}))};return d(this.cases,e=>{this.exp$.subscribe(t),e.listen("dispose",()=>this.exp$.unsubscribe(t))}),this}mutate(){super.mutate(),this.parent?.mutate()}case(t,e){let s=new l(t,e);return this.cases.add(s),s}default(t){let e=new u(t);return this.#t=e,e}validate(){this.clear();for(let t of this.cases)if(t.condition.includes(this.exp$.value))return this.append(t),t.builded||t.build(),this.matched=t;if(this.#t)return this.append(this.#t),this.#t.builded||this.#t.build(),this.matched=this.#t}}globalThis.Match=r,globalThis.Case=l,globalThis.Default=u,$.process.craft.add((e,s,i)=>e===r?new r(s,i):e===l?h(t.proto,r)?.case(s,i):e===u?h(t.proto,r)?.default(s):void 0);

package/build/ui.js

@@ -1 +1 @@
-var t,e,i,s,o,r,n,a,c,l,h=Object.defineProperty,d=t=>{throw TypeError(t)},u=(t,e,i)=>((t,e,i)=>e in t?h(t,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[e]=i)(t,"symbol"!=typeof e?e+"":e,i),p=(t,e,i)=>e.has(t)||d("Cannot "+i),g=(t,e,i)=>(p(t,e,"read from private field"),i?i.call(t):e.get(t)),b=(t,e,i)=>e.has(t)?d("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),m=(t,e,i,s)=>(p(t,e,"write to private field"),s?s.call(t,i):e.set(t,i),i);import{onclient as v,ElementProto as f,TextProto as x,Proto as k,ProxyProto as w}from"@amateras/core";import{_null as y,is as M,UID as z,forEach as I,_Object_entries as D,isObject as S,_instanceof as C,isUndefined as A,isEqual as O,_Object_assign as W,isNull as L,isString as H,_Array_from as E}from"@amateras/utils";const R=t=>(e,i,s)=>{if(e.slide=i,!v())return;let o=i.toDOM();e.node?.append(...o);let r={duration:t?.duration??500,easing:t?.easing??"ease"},n=$.match(t?.direction,t=>t.case("up",()=>[["0 100%","0 0"],["0 0","0 -100%"]]).case("down",()=>[["0 -100%","0 0"],["0 0","0 100%"]]).case("left",()=>[["100% 0","0 0"],["0 0","-100% 0"]]).case("right",()=>[["-100% 0","0 0"],["0 0","100% 0"]]).default(()=>[["100% 0","0 0"],["0 0","-100% 0"]]));i.node?.animate({translate:n[0]},r);const a=s?.node?.animate({translate:n[1]},r);a&&(a.onfinish=()=>s?.node?.remove())},T=class extends f{constructor(t,e){super("slide",t,e)}};$.style(T,"slide{display:block;height:100%;width:100%;position:absolute}");let B=T;const F=class extends f{constructor({index:i,interval:s,autoplay:o,autopause:r,animation:n,...a},c){super("slideshow",a,c),u(this,"slide",y),u(this,"index"),u(this,"timer",y),u(this,"interval"),u(this,"autoplay"),u(this,"autopause"),u(this,"animation"),b(this,t,0),b(this,e,y),u(this,"playing",!1),this.index=i??0,this.interval=s??5,this.autoplay=o??!1,this.autopause=r??!0,this.animation=n??y,this.listen("dispose",()=>this.pause()),this.listen("dom",()=>{this.autoplay&&this.play()})}build(){return super.build(),this.switch(this.index),this}toString(){return this.parseHTML({children:this.slide?.toString()})}toDOM(t=!0){return super.toDOM(!1),this.node&&!g(this,e)&&(m(this,e,new ResizeObserver(()=>{this.autopause&&(this.inDOM()?this.play():this.pause())})),g(this,e).observe(this.node)),t&&this.slide&&this.node?.append(...this.slide.toDOM()),[this.node]}play(){this.playing||(this.playing=!0,this.timer=setInterval(()=>{var e,i,s,o;(e=this,i=t,{set _(t){m(e,i,t,s)},get _(){return g(e,i,o)}})._++,g(this,t)>=100*this.interval&&(this.next(),m(this,t,0))},10))}pause(){this.playing=!1,this.timer&&clearTimeout(this.timer)}next(){let t=this.children.length,e=this.index+1;e>=t&&(e=0),this.switch(e)}prev(){let t=this.children.length,e=this.index-1;e<=0&&(e=t-1),this.switch(e)}switch(t){this.index=t;let e=this.children.at(t);this.slide!==e&&e&&(this.animation?this.animation(this,e,this.slide):(this.append(e),this.slide=e,this.node?.replaceChildren(...e.toDOM())),e.node?.dispatchEvent(new Event("showslide")))}};t=new WeakMap,e=new WeakMap,$.style(F,"slideshow{display:block;position:relative;overflow:clip}");let _=F;const j=class extends f{value;constructor({value:t,...e},i){super("radio-group",e,i),this.value=t,this.on("input",t=>{this.value=M(t.target,HTMLInputElement)?.value})}};$.style(j,"radio-group{display:block}");let N=j;const U=class extends f{inputId;name;value;constructor({inputId:t,name:e,value:i,...s},o){super("radio-item",s,o),this.inputId=t??`input-${z.persistInProto(this,"radio-item")}`,this.name=e??y,this.value=i}};$.style(U,"radio-item{display:block}");let Y=U;class P extends f{constructor(t,e){super("input",{type:"radio",...t},e)}build(t){let e=this.findAbove(t=>M(t,Y));return e&&(this.attr("id",e.inputId),this.attr("name",e.name)),super.build(t)}}class q extends f{constructor(t,e){super("label",t,e)}build(t){let e=this.findAbove(t=>M(t,Y));return e&&this.attr("for",e.inputId),super.build(t)}}const[G,X,Z,J,K]=["accordion","accordion-item","accordion-trigger","accordion-content","accordion-container"],Q=class extends f{$trigger=y;$container=y;constructor(t,e){super(G,t,e)}open(){this.attr("opened","")}close(){this.attr("opened",null)}switch(){""===this.attr("opened")?this.close():this.open()}};$.style(Q,[`${G},${X},${Z}{display:block}`,`${K}{display:grid;grid-template-rows:0fr}`,`${G}[opened] ${K}{grid-template-rows:1fr}`,`${J}{overflow:hidden}`]);let V=Q;class tt extends f{constructor(t,e){super(K,t,e)}build(t){let e=this.findAbove(t=>M(t,V));return e&&(e.$container=this),super.build(t)}}class et extends f{constructor(t,e){super(J,t,e)}}class it extends f{constructor(t,e){super(Z,t,e)}build(t){let e=this.findAbove(t=>M(t,V));return e&&(e.$trigger=this,this.on("click",()=>e.switch())),super.build(t)}}const st=class extends f{gap;columns;size;observer=null;constructor({gap:t,columns:e,autosize:i,size:s,...o},r){super("waterfall",o,r),this.gap=t??0,this.columns=e??1,this.size=s??0,v()&&(this.observer=new ResizeObserver(()=>{this.inDOM()&&requestAnimationFrame(()=>this.refresh())}))}toDOM(t=!0){return super.toDOM(t),this.node&&this.observer?.observe(this.node),[this.node]}refresh(){if(!this.node)return;const t=[],e=this.node.offsetWidth;let i=this.columns;this.size&&(i=Math.trunc(e/(this.size+this.gap))||1);const s=(e-this.gap*(i-1))/i;for(let o=0;o<i;o++)t.push({items:[],height:0,width:s,left:o*(s+this.gap)});I(this.children,e=>{if(!e.node)return;e.ratio||e.node.offsetHeight&&e.node.offsetWidth&&(e.ratio=e.node.offsetWidth/e.node.offsetHeight);const i=s/e.ratio,o=t.sort((t,e)=>t.height-e.height)[0];e.style({height:`${i}px`,width:`${s}px`,top:`${o.height}px`,left:`${o.left}px`}),o.height+=i+this.gap})}mutate(){this.refresh()}};$.style(st,"waterfall{display:block;position:relative;min-height:100dvh}");let ot=st;const rt=class extends f{ratio=0;constructor(t,e){super("waterfall-item",t,e)}toDOM(t=!0){super.toDOM(t);const e=this.findAbove(t=>M(t,ot));return this.node?.querySelectorAll("img").forEach(t=>e?.observer?.observe(t)),[this.node]}};$.style(rt,"waterfall-item{display:block;position:absolute}");let nt=rt;const at=class extends f{targetId;$container=y;triggers=/* @__PURE__ */new Map;constructor({targetId:t,...e},i){super("tabs",e,i),this.targetId=t??y}switch(t){this.targetId!==t&&(this.targetId=t,this.$container?.renderContent())}};$.style(at,"tabs{display:block;}");let ct=at;class lt extends f{tabId;tabs=y;constructor({tabId:t,...e},i){super("tab-trigger",e,i),this.tabId=t,this.on("click",()=>this.tabs?.switch(this.tabId))}build(t){return super.build(t),this.tabs=this.findAbove(t=>M(t,ct)),this.tabs?.triggers.set(this.tabId,this),this}}$.style(ct,"tab-trigger{cursor:pointer;}");class ht extends f{tabs=null;constructor({...t},e){super("tab-container",t,e)}build(t){return super.build(t),this.tabs=this.findAbove(t=>M(t,ct)),this.tabs&&(this.tabs.$container=this),this}toDOM(t=!0){return super.toDOM(!1),this.renderContent(t),[this.node]}toString(){return this.parseHTML({children:this.renderContent()?.toString()})}mutate(){this.renderContent()}getContent(t){return this.children.find(e=>e.tabId===t)}renderContent(t=!0){const e=this.tabs?.targetId,i=e?this.getContent(e):this.children.at(0);return t&&i&&(this.node?.replaceChildren(...i.toDOM()),this.tabs?.triggers.forEach(t=>{t.attr("active",t.tabId===i.tabId?"":y)})),i}}$.style(ct,"tab-container{display:block;}");class dt extends f{tabId;tabs=null;constructor({tabId:t,...e},i){super("tab-content",e,i),this.tabId=t}build(t){return super.build(t),this.tabs=this.findAbove(t=>M(t,ct)),this}}$.style(ct,"tab-content{display:block;}");const ut=(t,e)=>{let i=[];for(let[s,o]of D(e))S(o)?i.push(ut(s,o)):i.push(`${s.replaceAll(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}: ${o};`);return`${t} { ${i.join(" ")} }`},pt=class t extends f{$select=y;constructor(e,i){super(t.tagname,e,i)}build(t){return super.build(t),this.$select=this.findAbove(t=>C(t,xt)),this.$select&&(this.$select.$content=this),this}};u(pt,"tagname","select-content"),$.style(pt,ut(pt.tagname,{position:"absolute",top:"0",left:"0",maxHeight:"50dvh",overflowY:"auto",display:"block",boxSizing:"border-box",border:"1px solid var(--input)",background:"oklch(from var(--bg) l c h)",padding:"calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)",borderRadius:"var(--radius)",userSelect:"none",scrollbarWidth:"thin",scrollbarColor:"var(--input) transparent"}));let gt=pt;const bt=class t extends f{constructor(e,s){super(t.tagname,{tabindex:0,...e},s),u(this,"$select",y),u(this,"$content",y),b(this,i,y),this.on("click",()=>{this.$select?.close(),this.select()}),this.on("keydown",e=>{let i=i=>{if(e.preventDefault(),!this.$content)return;let s=this.$content?.findBelowAll(e=>C(e,t)),o=s.indexOf(this),r="up"===i?o-1:o+1;(r<0||r>=s.length)&&(r="up"===i?-1:0);let n=s.at(r);n?.node?.focus()};switch(e.key){case"ArrowDown":i("down");break;case"ArrowUp":i("up");break;case" ":e.preventDefault()}}),this.on("keyup",t=>{switch(t.key){case"Escape":t.preventDefault(),this.$select?.close(),this.$select?.$trigger?.node?.focus();break;case" ":case"Enter":t.preventDefault(),this.select(),this.$select?.close(),this.$select?.$trigger?.node?.focus()}})}value(t){if(!arguments.length)return g(this,i);A(t)||$.resolve(t,t=>{m(this,i,t)})}select(){this.$select&&this.$select.value(this.value())}props({value:t,...e}){super.props(e),this.value(t)}build(t){return super.build(t),this.$select=this.findAbove(t=>C(t,xt)),this.$content=this.findAbove(t=>C(t,gt)),this.$select&&this.$select.value()===g(this,i)&&(this.$select.selected=this),this.$select?.itemMap.set(g(this,i),this),this}};i=new WeakMap,u(bt,"tagname","select-item"),$.style(bt,ut(bt.tagname,{display:"block",boxSizing:"border-box",padding:"calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)",borderRadius:"var(--radius)",fontSize:"0.875rem",fontWeight:"500",lineHeight:"1","&:hover, :not(:has(select-item:hover)) &:focus":{background:"oklch(from var(--input) l c h / .1)"},"&:focus":{outline:"none"}}));let mt=bt;const vt=(t,e,i)=>{let s={top:0,left:0,height:0,width:0},o=new ResizeObserver(()=>ft(t,e,s)),r=()=>ft(t,e,s);return o.observe(t),window.addEventListener("resize",r),()=>{o.disconnect(),window.removeEventListener("resize",r)}},ft=(t,{style:e},i)=>{let s=t.getBoundingClientRect(),o={top:s.top+window.scrollY,left:s.left+window.scrollX,width:s.width,height:s.height},{top:r,left:n,width:a,height:c}=o;O(i,o,["top","left","height","width"])||(W(i,{top:r,left:n,width:a,height:c}),e.top=`${c+r}px`,e.left=`${n}px`,e.width=`${a}px`)},$t=class t extends f{constructor(e,i){super(t.tagname,e,i),u(this,"$trigger",y),u(this,"$content",y),u(this,"clickListener",y),b(this,s,y),u(this,"selected",y),u(this,"itemMap",/* @__PURE__ */new Map),u(this,"$value",y),u(this,"disconnect",y),this.listen("i18nupdate",()=>this.$value?.render())}props({value:t,disabled:e,...i}){super.props(i),this.disabled(e),this.value(t)}disabled(t){if(!arguments.length)return""===this.attr("disabled");A(t)||$.resolve(t,t=>{this.attr("disabled",t?"":y)})}value(t){if(!arguments.length)return g(this,s);A(t)||($.resolve(t,t=>{m(this,s,t);let e=this.itemMap.get(t);this.selected=e??y,this.$value?.render(),this.dispatch("selectvalue",[this,t],{bubbles:!0})}),this.node?.dispatchEvent(new Event("select-value")))}open(){this.attr("opened",""),v()&&this.$content&&(this.disconnect=vt(this.$trigger?.node,this.$content.node),document.body.append(...this.$content.toDOM()),this.clickListener=t=>{t.target!==this.$trigger?.node&&(t.target&&this.$content?.node?.contains(t.target)||this.close())},this.selected?.node?.focus()??this.$content?.findBelow(t=>C(t,mt))?.node?.focus(),window.addEventListener("click",this.clickListener))}close(){this.attr("opened",y),v()&&(this.$content?.removeNode(),this.clickListener&&window.removeEventListener("click",this.clickListener),this.disconnect?.(),this.disconnect=y)}toDOM(t=!0){return super.toDOM(!1),t&&this.$trigger&&(this.node?.append(...this.$trigger.toDOM()),this.$content?.toDOM(),this.$value?.render()),[this.node]}toString(){let t=this.$trigger?.toString()??"";return this.parseHTML({children:t})}};s=new WeakMap,u($t,"tagname","select-proto"),$.style($t,ut($t.tagname,{display:"inline-block",width:"10rem",userSelect:"none"}));let xt=$t;const kt=class t extends f{$select=y;constructor(e,i){super(t.tagname,{tabindex:0,...e},i),this.on("click",t=>L(this.$select?.attr("opened"))?this.$select.open():this.$select?.close()),this.on("keydown",t=>{if(" "===t.key)t.preventDefault()}),this.on("keyup",t=>{switch(t.key){case" ":case"Enter":t.preventDefault(),this.$select?.open()}})}build(t){return super.build(t),this.$select=this.findAbove(t=>C(t,xt)),this.$select&&(this.$select.$trigger=this),this}};u(kt,"tagname","select-trigger"),$.style(kt,ut(kt.tagname,{display:"flex",gap:"0.5rem",placeContent:"space-between",placeItems:"center",boxSizing:"border-box",border:"1px solid var(--input)",background:"color-mix(in oklch, var(--input) 30%, transparent)",padding:"calc(var(--spacing) * 2) calc(var(--spacing) * 2.5)",borderRadius:"var(--radius)",fontSize:"0.875rem",fontWeight:"var(--font-weight-medium)",lineHeight:"1","&:hover":{background:"color-mix(in oklch, var(--input) 50%, transparent)"},"&:focus":{outline:"0.1rem solid var(--border)"},"*":{pointerEvents:"none"}}));let wt=kt;class yt extends f{static tagname="select-value";$select=y;$placeholder=y;$text=new x("");constructor(t,e){super(yt.tagname,t,e)}props({placeholder:t,...e}){super.props(e),this.placeholder(t??y)}build(t){return super.build(t),this.$select=this.findAbove(t=>C(t,xt)),this.$select&&(this.$select.$value=this),this}placeholder(t){$.resolve(t,t=>{H(t)?$.context(k,this,()=>this.$placeholder=new x(t)):this.$placeholder=t,this.render()})}render(){let t=y;this.$select?.selected?(t=this.$text,this.$text.content=this.$select.selected.text):this.$placeholder&&(t=this.$placeholder),t&&(t.builded||t.build(),this.replaceProtos(t),this.node?.replaceChildren(...t.toDOM()))}}class Mt extends f{constructor(t,e){super("selector-group",t,e)}}const zt=class t extends f{constructor(e,i){super(t.tagname,e,i)}props({svg:t,...e}){super.props(e),this.svg(t)}svg(t){$.resolve(t,t=>{this.innerHTML(t)})}};u(zt,"tagname","icon"),$.style(zt,ut(zt.tagname,{display:"inline-block",verticalAlign:"middle",height:"1rem",width:"1rem",svg:{display:"block",height:"auto",width:"100%"}}));let It=zt;const Dt=class extends It{constructor(t){super({svg:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>',...t})}};$.style(Dt,ut(`select-proto[opened] ${Dt.tagname}`,{rotate:"180deg"}));let St=Dt;const Ct="@media (hover: hover) and (pointer: fine)",At=class extends f{constructor(t,e){super("button",{ui:"button",...t},e)}};u(At,"tagname","button"),$.style(At,ut('button[ui="button"]',{display:"inline-flex",placeContent:"center",placeItems:"center",padding:"0 calc(var(--spacing) * 2.5)",borderRadius:"var(--radius)",height:"calc(var(--spacing) * 8)",lineHeight:"1rem",transition:"0.2s all ease",fontWeight:"var(--font-weight-medium)",fontFamily:"inherit",outline:"0.1rem solid oklch(from var(--border) l c h / 0)",userSelect:"none",gap:"calc(var(--spacing) * 2.5)",border:"1px solid oklch(from var(--input) l c h / .2)",background:"oklch(from var(--input) l c h / .025)",color:"oklch(from var(--fg) l c h / .9)","&:focus-visible":{outline:"0.1rem solid var(--border)"},"&:not([disabled]):active":{translate:"0 0.125rem"},[Ct]:{"&:not([disabled]):hover":{background:"oklch(from var(--input) l c h / .1)"}},'&[variant="primary"]':{border:"none",color:"oklch(from var(--primary-fg) l c h)",background:"var(--primary-bg)",[Ct]:{"&:not([disabled]):hover":{background:"oklch(from var(--primary-bg) l c h / .8)"}}},'&[variant="secondary"]':{border:"none",color:"oklch(from var(--secondary-fg) l c h)",background:"var(--secondary-bg)",[Ct]:{"&:not([disabled]):hover":{background:"oklch(from var(--secondary-bg) l c h / .8)"}}},'&[variant="destructive"]':{border:"none",color:"oklch(from var(--destructive-fg) l c h)",background:"oklch(from var(--destructive-bg) l c h / .3)",[Ct]:{"&:not([disabled]):hover":{background:"oklch(from var(--destructive-bg) l c h / .5)"}}},'&[variant="ghost"]':{border:"none",color:"oklch(from var(--fg) l c h)",background:"oklch(from var(--input) l c h / 0)",[Ct]:{"&:not([disabled]):hover":{background:"oklch(from var(--input) l c h / .1)"}}},'&[variant="link"]':{border:"none",color:"oklch(from var(--fg) l c h)",background:"oklch(from var(--input) l c h / 0)",[Ct]:{"&:not([disabled]):hover":{textDecoration:"underline",textUnderlineOffset:"0.2rem"}}},'&[size="icon"]':{width:"calc(var(--spacing) * 8)",padding:"0"},'&[size="xs"]':{padding:"calc(var(--spacing) * 2)",fontSize:"var(--text-xs)",lineHeight:"var(--text-xs)",height:"calc(var(--spacing) * 6)"},'&[size="icon-xs"]':{width:"calc(var(--spacing) * 6)",height:"calc(var(--spacing) * 6)",padding:"0",svg:{width:"calc(var(--spacing) * 3)",height:"calc(var(--spacing) * 3)"}},'&[size="sm"]':{height:"calc(var(--spacing) * 7)"},'&[size="icon-sm"]':{width:"calc(var(--spacing) * 7)",height:"calc(var(--spacing) * 7)",padding:"0"},'&[size="lg"]':{height:"calc(var(--spacing) * 9)"},'&[size="icon-lg"]':{width:"calc(var(--spacing) * 9)",height:"calc(var(--spacing) * 9)",padding:"0"},"&[disabled]":{opacity:".5"}}));let Ot=At;const Wt=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(Wt,"tagname","badge"),$.style(Wt,ut(Wt.tagname,{display:"inline-flex",placeContent:"center",placeItems:"center",padding:"0 calc(var(--spacing) * 2)",borderRadius:"calc(var(--radius) * 2.6)",height:"calc(var(--spacing) * 5)",lineHeight:"var(--text-xs)",transition:"0.2s all ease",fontSize:"var(--text-xs)",fontWeight:"var(--font-weight-medium)",fontFamily:"inherit",outline:"0.1rem solid oklch(from var(--border) l c h / 0)",whiteSpace:"nowrap",gap:"var(--spacing)",border:"1px solid oklch(from var(--input) l c h / .2)",background:"oklch(from var(--input) l c h / .025)",color:"oklch(from var(--fg) l c h / .9)","&:focus-visible":{outline:"0.1rem solid var(--border)"},"a:not([disabled]) &:hover":{background:"oklch(from var(--input) l c h / .1)",color:"oklch(from var(--fg) l c h / 1)"},'&[variant="primary"]':{border:"none",color:"oklch(from var(--primary-fg) l c h)",background:"var(--primary-bg)"},'&[variant="secondary"]':{border:"none",color:"oklch(from var(--secondary-fg) l c h)",background:"var(--secondary-bg)","a:not([disabled]) &:hover":{background:"oklch(from var(--secondary-bg) l c h / .8)"}},'&[variant="destructive"]':{border:"none",color:"oklch(from var(--destructive-fg) l c h)",background:"oklch(from var(--destructive-bg) l c h / .3)","a:not([disabled]) &:hover":{background:"oklch(from var(--destructive-bg) l c h / .5)"}},'&[variant="ghost"]':{border:"none",color:"oklch(from var(--fg) l c h)",background:"oklch(from var(--input) l c h / 0)","a:not([disabled]) &:hover":{background:"oklch(from var(--input) l c h / .1)"}},'&[variant="link"]':{border:"none",color:"oklch(from var(--fg) l c h)",background:"oklch(from var(--input) l c h / 0)","a:not([disabled]) &:hover":{textDecoration:"underline",textUnderlineOffset:"0.2rem"}},'&[size="sm"]':{padding:"0 calc(var(--spacing) * 1)",fontSize:"var(--text-xs2)",lineHeight:"var(--text-xs2)",height:"calc(var(--spacing) * 4)"},"a[disabled] &":{opacity:".5"}}));let Lt=Wt;const Ht=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(Ht,"tagname","card"),$.style(Ht,ut(Ht.tagname,{display:"flex",flexDirection:"column",gap:"calc(var(--spacing))",paddingBlock:"calc(var(--spacing) * 4)",background:"var(--secondary-bg)",borderRadius:"calc(var(--radius) * 1.4)"}));let Et=Ht;const Rt=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(Rt,"tagname","card-header"),$.style(Rt,ut(Rt.tagname,{display:"flex",width:"100%",flexDirection:"column",gap:"var(--spacing)",paddingInline:"calc(var(--spacing) * 4)"}));let Tt=Rt;const Bt=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(Bt,"tagname","card-content"),$.style(Bt,ut(Bt.tagname,{display:"block",paddingInline:"calc(var(--spacing) * 4)"}));let Ft=Bt;const _t=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(_t,"tagname","h3"),$.style(_t,ut(`card ${_t.tagname}`,{fontWeight:"var(--font-weight-medium)",lineHeight:"1.375",fontSize:"var(--text-base)",color:"var(--fg)"}));let jt=_t;const Nt=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(Nt,"tagname","p"),$.style(Nt,ut(`card ${Nt.tagname}`,{fontWeight:"var(--font-weight-medium)",lineHeight:"var(--line-height-sm)",fontSize:"var(--text-sm)",color:"var(--muted)"}));let Ut=Nt;const Yt=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(Yt,"tagname","dl"),$.style(Yt,ut(Yt.tagname,{display:"flex",flexDirection:"column"}));let Pt=Yt;const qt=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(qt,"tagname","dc"),$.style(qt,ut(qt.tagname,{paddingBlock:"1rem",borderBottom:"1px solid color-mix(in oklch, var(--input) 50%, transparent)","&:last-child":{borderBottom:"none"}}));let Gt=qt;const Xt=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(Xt,"tagname","dt"),$.style(Xt,ut(Xt.tagname,{fontSize:"var(--text-sm)",fontWeight:"var(--font-weight-medium)"}));let Zt=Xt;const Jt=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(Jt,"tagname","dd"),$.style(Jt,ut(Jt.tagname,{margin:"0",fontSize:"var(--text-sm)",color:"var(--muted)"}));let Kt=Jt;const Qt=class t extends f{clickListener=y;constructor(e,i){super(t.tagname,e,i)}open(t){v()&&(this.build(),this.style({top:`${t.y}px`,left:`${t.x}px`}),this.clickListener=t=>{t.target!==this.node&&(t.target&&this.node?.contains(t.target)||this.close())},setTimeout(()=>window.addEventListener("click",this.clickListener),1),document.body.append(...this.toDOM()))}close(t=!0){this.removeNode(),this.clickListener&&window.removeEventListener("click",this.clickListener),this.clickListener=y,t&&this.dispose()}};u(Qt,"tagname","context-menu"),$.style(Qt,ut(Qt.tagname,{display:"block",position:"fixed",top:"0",left:"0",maxHeight:"50dvh",overflowY:"auto",boxSizing:"border-box",border:"1px solid var(--input)",background:"oklch(from var(--bg) l c h)",padding:"calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)",borderRadius:"var(--radius)",userSelect:"none",scrollbarWidth:"thin",scrollbarColor:"var(--input) transparent"}));let Vt=Qt;const te=class t extends f{$menu=y;constructor(e,i){super(t.tagname,e,i),this.on("click",()=>this.$menu?.close())}build(t){return super.build(t),this.$menu=this.findAbove(t=>C(t,Vt)),this}};u(te,"tagname","context-menu-item"),$.style(te,ut(te.tagname,{display:"block",boxSizing:"border-box",padding:"calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)",borderRadius:"var(--radius)",fontSize:"0.875rem",fontWeight:"500",lineHeight:"1","&:hover, :not(:has(select-item:hover)) &:focus":{background:"oklch(from var(--input) l c h / .1)"},"&:focus":{outline:"none"}}));let ee=te;const ie=class t extends f{constructor(e,i){super(t.tagname,{ui:"input",...e},i)}};u(ie,"tagname","input"),$.style(ie,ut('input[ui="input"]',{borderRadius:"var(--radius)",height:"calc(var(--spacing) * 8)",transition:"0.2s all ease",fontFamily:"inherit",fontSize:"var(--text-sm)",padding:"0 calc(var(--spacing) * 2.5)",border:"1px solid oklch(from var(--input) l c h / .2)",background:"oklch(from var(--input) l c h / .025)",color:"oklch(from var(--fg) l c h / .9)",outline:"0.2rem solid transparent","&:focus-visible":{outlineColor:"var(--border)"}}));let se=ie;const oe=class t extends f{constructor(e,i){super(t.tagname,e,i)}props({for:t,...e}){super.props(e),this.for(t)}build(t){return super.build(t),this.setFor(),this}for(t){if(!arguments.length)return this.attr("for");A(t)||$.resolve(t,t=>{this.attr("for",t),this.setFor()})}setFor(){const t=this.for();this.findBelow(e=>{C(e,f)&&("input"===e.tagname&&e.attr("id",t),"label"===e.tagname&&e.attr("for",t))})}};u(oe,"tagname","field"),$.style(oe,ut(oe.tagname,{display:"flex",flexDirection:"column",gap:"calc(var(--spacing) * 2)",width:"100%",'&[direction="horizontal"]':{flexDirection:"row",placeItems:"center",width:"unset"}}));let re=oe;const ne=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(ne,"tagname","label"),$.style(ne,ut(ne.tagname,{"field &":{display:"block",userSelect:"none",color:"var(--fg)",fontWeight:"var(--font-weight-medium)",fontSize:"var(--text-sm)",lineHeight:"var(--text-sm)",flexShrink:"0"},"field[disabled] &":{pointerEvents:"none"}}));let ae=ne;const ce=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(ce,"tagname","field-description"),$.style(ce,ut(ce.tagname,{"field &":{display:"block",color:"var(--muted)",fontWeight:"var(--font-weight-medium)",fontSize:"var(--text-sm)"},"field[disabled] &":{pointerEvents:"none"}}));let le=ce;const he=class extends f{constructor(t,e){super("input",{type:"checkbox",ui:"switch",...t},e)}};u(he,"tagname","input"),$.style(he,ut('input[ui="switch"]',{appearance:"none",display:"inline-flex",height:"calc(var(--spacing) * 5)",width:"calc(var(--spacing) * 9)",background:"color-mix(in oklab, var(--input) 80%, transparent)",border:"none",placeItems:"center",borderRadius:"calc(var(--spacing) * 5)",transition:"all .3s ease",padding:"0","&::after":{content:'""',display:"block",height:"calc(var(--spacing) * 5)",width:"calc(var(--spacing) * 5)",background:"var(--fg)",borderRadius:"var(--radius-round)",transition:"all .3s ease"},"&:checked":{background:"var(--primary-bg)","&::after":{height:"calc(var(--spacing) * 4.5)",width:"calc(var(--spacing) * 4.5)",translate:"calc(115% - var(--spacing)) 0",background:"var(--bg)"}}}));let de=he;const ue=class extends f{constructor(t,e){super("button",{ui:"toggle",...t},e),this.on("click",t=>this.checked(!this.checked()))}props({checked:t,...e}){super.props(e),this.checked(t)}checked(t){if(!arguments.length)return!L(this.attr("checked"));A(t)||$.resolve(t,t=>{this.attr("checked",t?"":y),this.node?.dispatchEvent(new Event("input"))})}};u(ue,"tagname","button"),$.style(ue,ut('button[ui="toggle"]',{display:"inline-flex",placeContent:"center",placeItems:"center",padding:"0 calc(var(--spacing) * 2.5)",borderRadius:"var(--radius)",height:"calc(var(--spacing) * 8)",lineHeight:"1rem",transition:"0.1s all ease",fontWeight:"var(--font-weight-medium)",fontFamily:"inherit",outline:"0.1rem solid oklch(from var(--border) l c h / 0)",userSelect:"none",gap:"calc(var(--spacing) * 2.5)",flexShrink:"0",border:"1px solid oklch(from var(--input) l c h / .2)",background:"oklch(from var(--input) l c h / .025)",color:"oklch(from var(--fg) l c h / .8)",[Ct]:{"&:not([disabled]):hover":{background:"oklch(from var(--input) l c h / .1)",color:"oklch(from var(--fg) l c h)"}},"&[checked]":{color:"oklch(from var(--primary-fg) l c h)",background:"oklch(from var(--primary-bg) l c h / .8)",[Ct]:{"&:not([disabled]):hover":{background:"oklch(from var(--primary-bg) l c h)",color:"oklch(from var(--primary-fg) l c h)"}}},'&[variant="primary"]':{"&[checked]":{color:"oklch(from var(--primary-fg) l c h)",background:"var(--primary-bg)"}},'&[variant="secondary"]':{"&[checked]":{color:"oklch(from var(--secondary-fg) l c h)",background:"var(--secondary-bg)"}},'&[variant="destructive"]':{"&[checked]":{color:"oklch(from var(--destructive-fg) l c h)",background:"oklch(from var(--destructive-bg) l c h / .3)"}},'&[variant="ghost"]':{border:"none",color:"oklch(from var(--fg) l c h)",background:"oklch(from var(--input) l c h / 0)","&[checked]":{color:"oklch(from var(--secondary-fg) l c h)",background:"var(--secondary-bg)"}},'&[size="icon"]':{width:"calc(var(--spacing) * 8)",padding:"0"},'&[size="xs"]':{padding:"calc(var(--spacing) * 2)",fontSize:"var(--text-xs)",lineHeight:"var(--text-xs)",height:"calc(var(--spacing) * 6)"},'&[size="icon-xs"]':{width:"calc(var(--spacing) * 6)",height:"calc(var(--spacing) * 6)",padding:"0",svg:{width:"calc(var(--spacing) * 3)",height:"calc(var(--spacing) * 3)"}},'&[size="sm"]':{height:"calc(var(--spacing) * 7)"},'&[size="icon-sm"]':{width:"calc(var(--spacing) * 7)",height:"calc(var(--spacing) * 7)",padding:"0"},'&[size="lg"]':{height:"calc(var(--spacing) * 9)"},'&[size="icon-lg"]':{width:"calc(var(--spacing) * 9)",height:"calc(var(--spacing) * 9)",padding:"0"},"&[disabled]":{opacity:".5"}}));let pe=ue;const ge={display:"flex",gap:"calc(var(--spacing) * 1.25)",boxSizing:"border-box",padding:"calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)",borderRadius:"var(--radius)",fontSize:"0.875rem",fontWeight:"500",lineHeight:"1","&:hover, :not(:has(select-item:hover)) &[focus]":{background:"oklch(from var(--input) l c h / .1)"},"&[focus]":{outline:"none"}};class be extends f{$combobox=y;$focusedItem=y;$createItem=y;constructor(t,e){super("combobox-list",t,e)}build(t){return super.build(t),this.$combobox=this.findAbove(t=>C(t,ke)),this.$combobox&&(this.$combobox.$list=this),this}filter(t){if(!this.$combobox)return;const e=[];this.$createItem&&(this.$createItem.visible=!!t&&!this.$combobox.itemMap.has(t)),I(this.$combobox.itemMap,([i,s])=>{s.visible=!1,s.text.toLowerCase().includes(t.toLowerCase())&&(s.visible=!0,e.push(s))}),this.$combobox?.$content?.$empty&&(this.$combobox.$content.$empty.visible=!this.$createItem?.visible&&!e.length),this.$combobox.$content?.toDOM()}switch(t){const e=this.$focusedItem,i=this.children,s=e?i.indexOf(e):"up"===t?0:-1;let o="up"===t?s-1:s+1;(o<0||o>=i.length)&&(o="up"===t?-1:0),this.focus(o)}focus(t){let e=this.children.at(t);this.$focusedItem?.blur(),e?.focus()}focusFirstItem(){this.$createItem?.visible&&this.children[1]?this.focus(1):this.focus(0)}mutate(){}}const me=class extends f{constructor(t,e){super("combobox-item",t,()=>{e?e(this):$([g(this,r)]),$(It,{ui:"combobox-item-check",svg:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>'})}),u(this,"$combobox",y),u(this,"$list",y),b(this,o,y),b(this,r,""),b(this,n,!1),this.on("mousedown",t=>t.preventDefault()),this.on("click",()=>{this.$combobox?.select(g(this,o),!this.selected())})}build(t){return super.build(t),this.$combobox=this.findAbove(t=>C(t,ke)),this.$list=this.findAbove(t=>C(t,be)),this.$combobox?.itemMap.set(g(this,o),this),this}props({value:t,label:e,selected:i,...s}){super.props(s),this.value(t),this.label(e),this.selected(i)}value(t){if(!arguments.length)return g(this,o);A(t)||$.resolve(t,t=>{this.$combobox?.itemMap.delete(g(this,o)),this.$combobox?.itemMap.set(t,this),m(this,o,t)})}label(t){if(!arguments.length)return g(this,r);A(t)||$.resolve(t,t=>{m(this,r,t)})}selected(t){if(!arguments.length)return g(this,n);A(t)||$.resolve(t,t=>{m(this,n,t),this.attr("selected",t?"":null)})}focus(){this.attr("focus",""),this.$list&&(this.$list.$focusedItem=this)}blur(){this.attr("focus",y),this.$list&&(this.$list.$focusedItem=null)}};o=new WeakMap,r=new WeakMap,n=new WeakMap,u(me,"tagname","combobox-item"),$.style(me,ut(me.tagname,{...ge,'icon[ui="combobox-item-check"]':{visibility:"hidden",marginInlineStart:"auto"},'&[selected] icon[ui="combobox-item-check"]':{visibility:"visible"}}));let ve=me;const fe=class extends f{$combobox=y;$list=y;constructor(t,e){super("combobox-create-item",t,e),this.on("mousedown",t=>t.preventDefault()),this.on("click",()=>{})}build(t){return super.build(t),this.$combobox=this.findAbove(t=>C(t,ke)),this.$list=this.findAbove(t=>C(t,be)),this.$list&&(this.$list.$createItem=this),this}focus(){this.attr("focus",""),this.$list&&(this.$list.$focusedItem=this)}blur(){this.attr("focus",y),this.$list&&(this.$list.$focusedItem=null)}};u(fe,"tagname","combobox-create-item"),$.style(fe,ut(fe.tagname,{...ge}));let $e=fe;const xe=class extends f{constructor(t,e){super("combobox",t,e),u(this,"$trigger",y),u(this,"$content",y),u(this,"$list",y),u(this,"$chips",y),u(this,"$input",y),u(this,"itemMap",/* @__PURE__ */new Map),b(this,a,/* @__PURE__ */new Set),u(this,"disconnect",y)}build(t){return super.build(t),I(g(this,a),t=>this.select(t)),this}toDOM(t=!0){return super.toDOM(!1),t&&this.$trigger&&(this.node?.append(...this.$trigger.toDOM()),this.$content?.toDOM()),[this.node]}props({values:t,...e}){super.props(e),this.values(t)}open(){this.attr("opened",""),v()&&this.$content&&(this.disconnect=vt(this.$trigger?.node,this.$content.node),document.body.append(...this.$content.toDOM()),this.$input&&this.$list?.filter(this.$input.node?.value??""))}close(){this.attr("opened",y),v()&&(this.$content?.removeNode(),this.disconnect?.(),this.disconnect=y)}select(t,e=!0){const i=this.itemMap.get(t);i&&(i.selected(e),e?(g(this,a).add(t),this.$chips?.appendChip(t),this.dispatch("combobox_select",[t])):(g(this,a).delete(t),this.$chips?.removeChip(t),this.dispatch("combobox_unselect",[t])),this.dispatch("combobox_input",[t]))}get selected(){return E(this.itemMap.values()).filter(t=>t.selected())}values(t){if(!arguments.length)return E(g(this,a));A(t)||$.resolve(t,t=>{m(this,a,new Set(t))})}};a=new WeakMap,u(xe,"tagname","combobox"),$.style(xe,ut(xe.tagname,{display:"inline-block",width:"10rem",userSelect:"none"}));let ke=xe;const we=class extends f{$combobox=y;constructor(t,e){super("combobox-trigger",t,e)}build(t){return super.build(t),this.$combobox=this.findAbove(t=>C(t,ke)),this.$combobox&&(this.$combobox.$trigger=this),this}};u(we,"tagname","combobox-trigger"),$.style(we,ut(we.tagname,{display:"flex",flexWrap:"wrap",columnGap:"calc(var(--spacing) * 1.25)",placeItems:"center",boxSizing:"border-box",border:"1px solid var(--input)",background:"color-mix(in oklch, var(--input) 30%, transparent)",borderRadius:"var(--radius)",fontSize:"0.875rem",fontWeight:"var(--font-weight-medium)",lineHeight:"1",padding:"0 calc(var(--spacing) * 1.25)","&:hover":{background:"color-mix(in oklch, var(--input) 50%, transparent)"},"&:focus-within":{outline:"0.1rem solid var(--border)"}}));let ye=we;const Me=class extends f{$combobox=y;constructor(t,e){super("input",{ui:"combobox-input",...t},e),this.on("focus",t=>L(this.$combobox?.attr("opened"))&&this.$combobox.open()),this.on("blur",t=>{this.$combobox?.close(),this.$combobox?.$chips?.$focusedChip?.blur()}),this.on("input",t=>{this.$combobox?.$list?.filter(t.currentTarget.value),this.$combobox?.$list?.focusFirstItem()}),this.on("keydown",t=>{switch(t.key){case"ArrowDown":return t.preventDefault(),void this.$combobox?.$list?.switch("down");case"ArrowUp":return t.preventDefault(),void this.$combobox?.$list?.switch("up");case"Backspace":return void(0===t.currentTarget.value.length&&this.$combobox?.$chips?.children.at(-1)?.delete());case"ArrowRight":return void(0===t.currentTarget.value.length&&this.$combobox?.$chips?.switch("right"));case"ArrowLeft":return void(0===t.currentTarget.value.length&&this.$combobox?.$chips?.switch("left"))}}),this.on("keyup",t=>{switch(t.key){case"Escape":return t.preventDefault(),this.$combobox?.close(),void this.$combobox?.$trigger?.node?.focus();case"Delete":{const t=this.$combobox?.$chips?.$focusedChip;return this.$combobox?.$chips?.switch("right"),void t?.delete()}case"Tab":case"Enter":{t.preventDefault();const e=this.$combobox?.$list?.$focusedItem;if(!e)return;return C(e,ve)?this.$combobox?.select(e.value()):this.dispatch("combobox_create",[t.currentTarget.value],{bubbles:!0}),t.currentTarget.value="",void this.$combobox?.$list?.filter("")}}t.currentTarget.value.length&&this.$combobox?.$chips?.$focusedChip?.blur()})}build(t){return super.build(t),this.$combobox=this.findAbove(t=>C(t,ke)),this.$combobox&&(this.$combobox.$input=this),this}};$.style(Me,ut('input[ui="combobox-input"]',{border:"unset",background:"unset",color:"oklch(from var(--fg) l c h / .9)",fontSize:"0.875rem",fontWeight:"var(--font-weight-medium)",fontFamily:"inherit",lineHeight:"1",height:"calc(var(--spacing) * 8)",flex:"1",minWidth:"2rem",padding:"0 calc(var(--spacing) * 1.25)","&:focus":{outline:"unset"}}));let ze=Me;const Ie=class extends f{$combobox=y;$empty=y;constructor(t,e){super("combobox-content",t,e)}build(t){return super.build(t),this.$combobox=this.findAbove(t=>C(t,ke)),this.$combobox&&(this.$combobox.$content=this),this}};u(Ie,"tagname","combobox-content"),$.style(Ie,ut(Ie.tagname,{position:"absolute",top:"0",left:"0",maxHeight:"50dvh",overflowY:"auto",display:"block",boxSizing:"border-box",border:"1px solid var(--input)",background:"oklch(from var(--bg) l c h)",padding:"calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)",borderRadius:"var(--radius)",userSelect:"none",scrollbarWidth:"thin",scrollbarColor:"var(--input) transparent"}));let De=Ie;const Se=class extends f{$content=y;constructor(t,e){super("combobox-empty",t,e)}build(t){return super.build(t),this.$content=this.findAbove(t=>C(t,De)),this.$content&&(this.$content.$empty=this),this}};u(Se,"tagname","combobox-empty"),$.style(Se,ut(Se.tagname,{...ge}));let Ce=Se;class Ae extends w{static tagname="combobox-chips";$combobox=y;chipMap=/* @__PURE__ */new Map;$focusedChip=y;constructor(t){super(t)}build(t){return super.build(t),this.$combobox=this.findAbove(t=>C(t,ke)),this.$combobox&&(this.$combobox.$chips=this),this}appendChip(t){const e=this.$combobox?.itemMap.get(t);if(!e)throw"ComboboxChips.addChip: $item not found";const i=this.chipMap.get(t)??$(We,{value:t,label:e.label()});this.chipMap.set(t,i),this.protos.has(i)||(this.append(i),i.builded||i.build(),this.node?.replaceWith(...this.toDOM()))}removeChip(t){const e=this.chipMap.get(t);if(!e)throw"ComboboxChips.removeChip: $chip not found";e.remove(),e.removeNode()}switch(t){const e=this.$focusedChip,i=this.children,s=e?i.indexOf(e):"left"===t?0:-1;let o="left"===t?s-1:s+1;(o<0||o>=i.length)&&(o="left"===t?-1:0),this.focus(o)}focus(t){let e=this.children.at(t);this.$focusedChip?.blur(),e?.focus()}}const Oe=class extends f{constructor(t,e){super("combobox-chip",t,()=>{e?e(this):($([g(this,l)]),$(Le))}),u(this,"$chips",y),b(this,c),b(this,l,"")}build(t){return super.build(t),this.$chips=this.findAbove(t=>C(t,Ae)),this}props({value:t,label:e,...i}){super.props(i),this.value(t),this.label(e)}value(t){if(!arguments.length)return g(this,c);A(t)||$.resolve(t,t=>{this.$chips?.chipMap.delete(t),this.$chips?.chipMap.set(t,this),m(this,c,t)})}label(t){if(!arguments.length)return g(this,l);A(t)||$.resolve(t,t=>{m(this,l,t)})}delete(){this.$chips?.$combobox?.select(g(this,c),!1)}focus(){this.attr("focus",""),this.$chips&&(this.$chips.$focusedChip=this)}blur(){this.attr("focus",y),this.$chips&&(this.$chips.$focusedChip=y)}};c=new WeakMap,l=new WeakMap,u(Oe,"tagname","combobox-chip"),$.style(Oe,ut(Oe.tagname,{display:"inline-flex",placeItems:"center",fontSize:"var(--text-xs)",padding:"0 calc(var(--spacing) * 1.5)",background:"var(--secondary-bg)",borderRadius:"calc(var(--radius) * .6)",height:"calc(var(--spacing) * 5.25)",marginBlock:"calc(var(--spacing))","&[focus]":{outline:"2px solid var(--input)"},'button[ui="combobox-chip-remove"]':{background:"unset",border:"unset",color:"oklch(from var(--fg) l c h / .9)",paddingInlineStart:"calc(var(--spacing) * 1.5)",icon:{height:"calc(var(--spacing) * 3.25)",width:"calc(var(--spacing) * 3.25)"}}}));let We=Oe;class Le extends f{static tagname="button";$chip=y;constructor(t,e){super("button",{ui:"combobox-chip-remove",...t},()=>{e?e(this):$(It,{svg:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>'})}),this.on("click",()=>{this.$chip?.$chips?.$combobox?.select(this.$chip.value(),!1)})}build(t){return super.build(t),this.$chip=this.findAbove(t=>C(t,We)),this}}export{V as Accordion,tt as AccordionContainer,et as AccordionContent,it as AccordionTrigger,Lt as Badge,Ot as Button,Et as Card,Ft as CardContent,Ut as CardDescription,Tt as CardHeader,jt as CardTitle,ke as Combobox,We as ComboboxChip,Le as ComboboxChipRemoveButton,Ae as ComboboxChips,De as ComboboxContent,$e as ComboboxCreateItem,Ce as ComboboxEmpty,ze as ComboboxInput,ve as ComboboxItem,be as ComboboxList,ye as ComboboxTrigger,Vt as ContextMenu,ee as ContextMenuItem,Gt as DescriptionContent,Kt as DescriptionDetail,Pt as DescriptionList,Zt as DescriptionTerm,re as Field,le as FieldDescription,ae as FieldLabel,It as Icon,se as Input,q as Label,P as Radio,N as RadioGroup,Y as RadioItem,xt as Select,St as SelectArrow,gt as SelectContent,Mt as SelectGroup,mt as SelectItem,wt as SelectTrigger,yt as SelectValue,B as Slide,_ as Slideshow,de as Switch,dt as TabContent,lt as TabTrigger,ct as Tabs,ht as TabsContainer,pe as Toggle,ot as Waterfall,nt as WaterfallItem,R as slideInOut};
+var t,e,i,s,o,r,n,a,c,l,h=Object.defineProperty,d=t=>{throw TypeError(t)},u=(t,e,i)=>((t,e,i)=>e in t?h(t,e,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[e]=i)(t,"symbol"!=typeof e?e+"":e,i),p=(t,e,i)=>e.has(t)||d("Cannot "+i),g=(t,e,i)=>(p(t,e,"read from private field"),i?i.call(t):e.get(t)),b=(t,e,i)=>e.has(t)?d("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,i),m=(t,e,i,s)=>(p(t,e,"write to private field"),s?s.call(t,i):e.set(t,i),i);import{onclient as v,ElementProto as f,TextProto as x,Proto as k,ProxyProto as w}from"@amateras/core";import{_null as y,is as M,UID as I,forEach as z,_Object_entries as D,isObject as C,_instanceof as S,isUndefined as A,isEqual as O,_Object_assign as W,isNull as L,isString as E,_Array_from as H}from"@amateras/utils";const R=t=>(e,i,s)=>{if(e.slide=i,!v())return;let o=i.toDOM();e.node?.append(...o);let r={duration:t?.duration??500,easing:t?.easing??"ease"},n=$.match(t?.direction,t=>t.case("up",()=>[["0 100%","0 0"],["0 0","0 -100%"]]).case("down",()=>[["0 -100%","0 0"],["0 0","0 100%"]]).case("left",()=>[["100% 0","0 0"],["0 0","-100% 0"]]).case("right",()=>[["-100% 0","0 0"],["0 0","100% 0"]]).default(()=>[["100% 0","0 0"],["0 0","-100% 0"]]));i.node?.animate({translate:n[0]},r);const a=s?.node?.animate({translate:n[1]},r);a&&(a.onfinish=()=>s?.node?.remove())},T=class extends f{constructor(t,e){super("slide",t,e)}};$.style(T,"slide{display:block;height:100%;width:100%;position:absolute}");let B=T;const F=class extends f{constructor({index:i,interval:s,autoplay:o,autopause:r,animation:n,...a},c){super("slideshow",a,c),u(this,"slide",y),u(this,"index"),u(this,"timer",y),u(this,"interval"),u(this,"autoplay"),u(this,"autopause"),u(this,"animation"),b(this,t,0),b(this,e,y),u(this,"playing",!1),this.index=i??0,this.interval=s??5,this.autoplay=o??!1,this.autopause=r??!0,this.animation=n??y,this.listen("dispose",()=>this.pause()),this.listen("dom",()=>{this.autoplay&&this.play()})}build(){return super.build(),this.switch(this.index),this}toString(){return this.parseHTML({children:this.slide?.toString()})}toDOM(t=!0){return super.toDOM(!1),this.node&&!g(this,e)&&(m(this,e,new ResizeObserver(()=>{this.autopause&&(this.inDOM()?this.play():this.pause())})),g(this,e).observe(this.node)),t&&this.slide&&this.node?.append(...this.slide.toDOM()),[this.node]}play(){this.playing||(this.playing=!0,this.timer=setInterval(()=>{var e,i,s,o;(e=this,i=t,{set _(t){m(e,i,t,s)},get _(){return g(e,i,o)}})._++,g(this,t)>=100*this.interval&&(this.next(),m(this,t,0))},10))}pause(){this.playing=!1,this.timer&&clearTimeout(this.timer)}next(){let t=this.children.length,e=this.index+1;e>=t&&(e=0),this.switch(e)}prev(){let t=this.children.length,e=this.index-1;e<=0&&(e=t-1),this.switch(e)}switch(t){this.index=t;let e=this.children.at(t);this.slide!==e&&e&&(this.animation?this.animation(this,e,this.slide):(this.append(e),this.slide=e,this.node?.replaceChildren(...e.toDOM())),e.node?.dispatchEvent(new Event("showslide")))}};t=new WeakMap,e=new WeakMap,$.style(F,"slideshow{display:block;position:relative;overflow:clip}");let _=F;const j=class extends f{value;constructor({value:t,...e},i){super("radio-group",e,i),this.value=t,this.on("input",t=>{this.value=M(t.target,HTMLInputElement)?.value})}};$.style(j,"radio-group{display:block}");let N=j;const U=class extends f{inputId;name;value;constructor({inputId:t,name:e,value:i,...s},o){super("radio-item",s,o),this.inputId=t??`input-${I.persistInProto(this,"radio-item")}`,this.name=e??y,this.value=i}};$.style(U,"radio-item{display:block}");let P=U;class Y extends f{constructor(t,e){super("input",{type:"radio",...t},e)}build(t){let e=this.findAbove(t=>M(t,P));return e&&(this.attr("id",e.inputId),this.attr("name",e.name)),super.build(t)}}class q extends f{constructor(t,e){super("label",t,e)}build(t){let e=this.findAbove(t=>M(t,P));return e&&this.attr("for",e.inputId),super.build(t)}}const[G,X,Z,J,K]=["accordion","accordion-item","accordion-trigger","accordion-content","accordion-container"],Q=class extends f{$trigger=y;$container=y;constructor(t,e){super(G,t,e)}open(){this.attr("opened","")}close(){this.attr("opened",null)}switch(){""===this.attr("opened")?this.close():this.open()}};$.style(Q,[`${G},${X},${Z}{display:block}`,`${K}{display:grid;grid-template-rows:0fr}`,`${G}[opened] ${K}{grid-template-rows:1fr}`,`${J}{overflow:hidden}`]);let V=Q;class tt extends f{constructor(t,e){super(K,t,e)}build(t){let e=this.findAbove(t=>M(t,V));return e&&(e.$container=this),super.build(t)}}class et extends f{constructor(t,e){super(J,t,e)}}class it extends f{constructor(t,e){super(Z,t,e)}build(t){let e=this.findAbove(t=>M(t,V));return e&&(e.$trigger=this,this.on("click",()=>e.switch())),super.build(t)}}const st=class extends f{gap;columns;size;observer=null;constructor({gap:t,columns:e,autosize:i,size:s,...o},r){super("waterfall",o,r),this.gap=t??0,this.columns=e??1,this.size=s??0,v()&&(this.observer=new ResizeObserver(()=>{this.inDOM()&&requestAnimationFrame(()=>this.refresh())}))}toDOM(t=!0){return super.toDOM(t),this.node&&this.observer?.observe(this.node),[this.node]}refresh(){if(!this.node)return;const t=[],e=this.node.offsetWidth;let i=this.columns;this.size&&(i=Math.trunc(e/(this.size+this.gap))||1);const s=(e-this.gap*(i-1))/i;for(let o=0;o<i;o++)t.push({items:[],height:0,width:s,left:o*(s+this.gap)});z(this.children,e=>{if(!e.node)return;e.ratio||e.node.offsetHeight&&e.node.offsetWidth&&(e.ratio=e.node.offsetWidth/e.node.offsetHeight);const i=s/e.ratio,o=t.sort((t,e)=>t.height-e.height)[0];e.style({height:`${i}px`,width:`${s}px`,top:`${o.height}px`,left:`${o.left}px`}),o.height+=i+this.gap})}mutate(){this.refresh()}};$.style(st,"waterfall{display:block;position:relative;min-height:100dvh}");let ot=st;const rt=class extends f{ratio=0;constructor(t,e){super("waterfall-item",t,e)}toDOM(t=!0){super.toDOM(t);const e=this.findAbove(t=>M(t,ot));return this.node?.querySelectorAll("img").forEach(t=>e?.observer?.observe(t)),[this.node]}};$.style(rt,"waterfall-item{display:block;position:absolute}");let nt=rt;const at=class extends f{targetId;$container=y;triggers=/* @__PURE__ */new Map;constructor({targetId:t,...e},i){super("tabs",e,i),this.targetId=t??y}switch(t){this.targetId!==t&&(this.targetId=t,this.$container?.renderContent())}};$.style(at,"tabs{display:block;}");let ct=at;class lt extends f{tabId;tabs=y;constructor({tabId:t,...e},i){super("tab-trigger",e,i),this.tabId=t,this.on("click",()=>this.tabs?.switch(this.tabId))}build(t){return super.build(t),this.tabs=this.findAbove(t=>M(t,ct)),this.tabs?.triggers.set(this.tabId,this),this}}$.style(ct,"tab-trigger{cursor:pointer;}");class ht extends f{tabs=null;constructor({...t},e){super("tab-container",t,e)}build(t){return super.build(t),this.tabs=this.findAbove(t=>M(t,ct)),this.tabs&&(this.tabs.$container=this),this}toDOM(t=!0){return super.toDOM(!1),this.renderContent(t),[this.node]}toString(){return this.parseHTML({children:this.renderContent()?.toString()})}mutate(){this.renderContent()}getContent(t){return this.children.find(e=>e.tabId===t)}renderContent(t=!0){const e=this.tabs?.targetId,i=e?this.getContent(e):this.children.at(0);return t&&i&&(this.node?.replaceChildren(...i.toDOM()),this.tabs?.triggers.forEach(t=>{t.attr("active",t.tabId===i.tabId?"":y)})),i}}$.style(ct,"tab-container{display:block;}");class dt extends f{tabId;tabs=null;constructor({tabId:t,...e},i){super("tab-content",e,i),this.tabId=t}build(t){return super.build(t),this.tabs=this.findAbove(t=>M(t,ct)),this}}$.style(ct,"tab-content{display:block;}");const ut=(t,e)=>{let i=[];for(let[s,o]of D(e))C(o)?i.push(ut(s,o)):i.push(`${s.replaceAll(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}: ${o};`);return`${t} { ${i.join(" ")} }`},pt={position:"absolute",top:"0",left:"0",maxHeight:"50dvh",overflowY:"auto",display:"block",boxSizing:"border-box",border:"1px solid var(--input)",background:"oklch(from var(--bg) l c h)",padding:"calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)",borderRadius:"var(--radius)",userSelect:"none",scrollbarWidth:"thin",scrollbarColor:"var(--input) transparent"},gt=class t extends f{$select=y;constructor(e,i){super(t.tagname,e,i)}build(t){return super.build(t),this.$select=this.findAbove(t=>S(t,wt)),this.$select&&(this.$select.$content=this),this}};u(gt,"tagname","select-content"),$.style(gt,ut(gt.tagname,pt));let bt=gt;const mt={display:"flex",gap:"calc(var(--spacing) * 1.25)",boxSizing:"border-box",padding:"calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)",borderRadius:"var(--radius)",fontSize:"0.875rem",fontWeight:"500",lineHeight:"1","&:hover, :not(:has(select-item:hover)) &[focus]":{background:"oklch(from var(--input) l c h / .1)"},"&[focus]":{outline:"none"}},vt=class t extends f{constructor(e,s){super(t.tagname,{tabindex:0,...e},s),u(this,"$select",y),u(this,"$content",y),b(this,i,y),this.on("click",()=>{this.$select?.close(),this.select()}),this.on("keydown",e=>{let i=i=>{if(e.preventDefault(),!this.$content)return;let s=this.$content?.findBelowAll(e=>S(e,t)),o=s.indexOf(this),r="up"===i?o-1:o+1;(r<0||r>=s.length)&&(r="up"===i?-1:0);let n=s.at(r);n?.node?.focus()};switch(e.key){case"ArrowDown":i("down");break;case"ArrowUp":i("up");break;case" ":e.preventDefault()}}),this.on("keyup",t=>{switch(t.key){case"Escape":t.preventDefault(),this.$select?.close(),this.$select?.$trigger?.node?.focus();break;case" ":case"Enter":t.preventDefault(),this.select(),this.$select?.close(),this.$select?.$trigger?.node?.focus()}})}value(t){if(!arguments.length)return g(this,i);A(t)||$.resolve(t,t=>{m(this,i,t)})}select(){this.$select&&this.$select.value(this.value())}props({value:t,...e}){super.props(e),this.value(t)}build(t){return super.build(t),this.$select=this.findAbove(t=>S(t,wt)),this.$content=this.findAbove(t=>S(t,bt)),this.$select&&this.$select.value()===g(this,i)&&(this.$select.selected=this),this.$select?.itemMap.set(g(this,i),this),this}};i=new WeakMap,u(vt,"tagname","select-item"),$.style(vt,ut(vt.tagname,mt));let ft=vt;const $t=(t,e,i)=>{let s={top:0,left:0,height:0,width:0},o=new ResizeObserver(()=>xt(t,e,s)),r=()=>xt(t,e,s);return o.observe(t),window.addEventListener("resize",r),()=>{o.disconnect(),window.removeEventListener("resize",r)}},xt=(t,{style:e},i)=>{let s=t.getBoundingClientRect(),o={top:s.top+window.scrollY,left:s.left+window.scrollX,width:s.width,height:s.height},{top:r,left:n,width:a,height:c}=o;O(i,o,["top","left","height","width"])||(W(i,{top:r,left:n,width:a,height:c}),e.top=`${c+r}px`,e.left=`${n}px`,e.width=`${a}px`)},kt=class t extends f{constructor(e,i){super(t.tagname,e,i),u(this,"$trigger",y),u(this,"$content",y),u(this,"clickListener",y),b(this,s,y),u(this,"selected",y),u(this,"itemMap",/* @__PURE__ */new Map),u(this,"$value",y),u(this,"disconnect",y),this.listen("i18nupdate",()=>this.$value?.render())}props({value:t,disabled:e,...i}){super.props(i),this.disabled(e),this.value(t)}disabled(t){if(!arguments.length)return""===this.attr("disabled");A(t)||$.resolve(t,t=>{this.attr("disabled",t?"":y)})}value(t){if(!arguments.length)return g(this,s);A(t)||($.resolve(t,t=>{m(this,s,t);let e=this.itemMap.get(t);this.selected=e??y,this.$value?.render(),this.dispatch("selectvalue",[this,t],{bubbles:!0})}),this.node?.dispatchEvent(new Event("select-value")))}open(){this.attr("opened",""),v()&&this.$content&&(this.disconnect=$t(this.$trigger?.node,this.$content.node),document.body.append(...this.$content.toDOM()),this.clickListener=t=>{t.target!==this.$trigger?.node&&(t.target&&this.$content?.node?.contains(t.target)||this.close())},this.selected?.node?this.selected.node.focus():this.$content?.findBelow(t=>S(t,ft))?.node?.focus(),window.addEventListener("click",this.clickListener))}close(){this.attr("opened",y),v()&&(this.$content?.removeNode(),this.clickListener&&window.removeEventListener("click",this.clickListener),this.disconnect?.(),this.disconnect=y)}toDOM(t=!0){return super.toDOM(!1),t&&this.$trigger&&(this.node?.append(...this.$trigger.toDOM()),this.$content?.toDOM(),this.$value?.render()),[this.node]}toString(){let t=this.$trigger?.toString()??"";return this.parseHTML({children:t})}};s=new WeakMap,u(kt,"tagname","select-proto"),$.style(kt,ut(kt.tagname,{display:"inline-block",width:"10rem",userSelect:"none"}));let wt=kt;const yt=class t extends f{$select=y;constructor(e,i){super(t.tagname,{tabindex:0,...e},i),this.on("click",t=>L(this.$select?.attr("opened"))?this.$select.open():this.$select?.close()),this.on("keydown",t=>{if(" "===t.key)t.preventDefault()}),this.on("keyup",t=>{switch(t.key){case" ":case"Enter":t.preventDefault(),this.$select?.open()}})}build(t){return super.build(t),this.$select=this.findAbove(t=>S(t,wt)),this.$select&&(this.$select.$trigger=this),this}};u(yt,"tagname","select-trigger"),$.style(yt,ut(yt.tagname,{display:"flex",gap:"0.5rem",placeContent:"space-between",placeItems:"center",boxSizing:"border-box",border:"1px solid var(--input)",background:"color-mix(in oklch, var(--input) 30%, transparent)",padding:"calc(var(--spacing) * 2) calc(var(--spacing) * 2.5)",borderRadius:"var(--radius)",fontSize:"0.875rem",fontWeight:"var(--font-weight-medium)",lineHeight:"1","&:hover":{background:"color-mix(in oklch, var(--input) 50%, transparent)"},"&:focus":{outline:"0.1rem solid var(--border)"},"*":{pointerEvents:"none"}}));let Mt=yt;class It extends f{static tagname="select-value";$select=y;$placeholder=y;$text=new x("");constructor(t,e){super(It.tagname,t,e)}props({placeholder:t,...e}){super.props(e),this.placeholder(t??y)}build(t){return super.build(t),this.$select=this.findAbove(t=>S(t,wt)),this.$select&&(this.$select.$value=this),this}placeholder(t){$.resolve(t,t=>{E(t)?$.context(k,this,()=>this.$placeholder=new x(t)):this.$placeholder=t,this.render()})}render(){let t=y;this.$select?.selected?(t=this.$text,this.$text.content=this.$select.selected.text):this.$placeholder&&(t=this.$placeholder),t&&(t.builded||t.build(),this.replaceProtos(t),this.node?.replaceChildren(...t.toDOM()))}}class zt extends f{constructor(t,e){super("selector-group",t,e)}}const Dt=class t extends f{constructor(e,i){super(t.tagname,e,i)}props({svg:t,...e}){super.props(e),this.svg(t)}svg(t){$.resolve(t,t=>{this.innerHTML(t)})}};u(Dt,"tagname","icon"),$.style(Dt,ut(Dt.tagname,{display:"inline-block",verticalAlign:"middle",height:"1rem",width:"1rem",svg:{display:"block",height:"auto",width:"100%"}}));let Ct=Dt;const St=class extends Ct{constructor(t){super({svg:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down-icon lucide-chevron-down"><path d="m6 9 6 6 6-6"/></svg>',...t})}};$.style(St,ut(`select-proto[opened] ${St.tagname}`,{rotate:"180deg"}));let At=St;const Ot="@media (hover: hover) and (pointer: fine)",Wt=class extends f{constructor(t,e){super("button",{ui:"button",...t},e)}};u(Wt,"tagname","button"),$.style(Wt,ut('button[ui="button"]',{display:"inline-flex",placeContent:"center",placeItems:"center",padding:"0 calc(var(--spacing) * 2.5)",borderRadius:"var(--radius)",height:"calc(var(--spacing) * 8)",lineHeight:"1rem",transition:"0.2s all ease",fontWeight:"var(--font-weight-medium)",fontFamily:"inherit",outline:"0.1rem solid oklch(from var(--border) l c h / 0)",userSelect:"none",gap:"calc(var(--spacing) * 2.5)",border:"1px solid oklch(from var(--input) l c h / .2)",background:"oklch(from var(--input) l c h / .025)",color:"oklch(from var(--fg) l c h / .9)","&:focus-visible":{outline:"0.1rem solid var(--border)"},"&:not([disabled]):active":{translate:"0 0.125rem"},[Ot]:{"&:not([disabled]):hover":{background:"oklch(from var(--input) l c h / .1)"}},'&[variant="primary"]':{border:"none",color:"oklch(from var(--primary-fg) l c h)",background:"var(--primary-bg)",[Ot]:{"&:not([disabled]):hover":{background:"oklch(from var(--primary-bg) l c h / .8)"}}},'&[variant="secondary"]':{border:"none",color:"oklch(from var(--secondary-fg) l c h)",background:"var(--secondary-bg)",[Ot]:{"&:not([disabled]):hover":{background:"oklch(from var(--secondary-bg) l c h / .8)"}}},'&[variant="destructive"]':{border:"none",color:"oklch(from var(--destructive-fg) l c h)",background:"oklch(from var(--destructive-bg) l c h / .3)",[Ot]:{"&:not([disabled]):hover":{background:"oklch(from var(--destructive-bg) l c h / .5)"}}},'&[variant="ghost"]':{border:"none",color:"oklch(from var(--fg) l c h)",background:"oklch(from var(--input) l c h / 0)",[Ot]:{"&:not([disabled]):hover":{background:"oklch(from var(--input) l c h / .1)"}}},'&[variant="link"]':{border:"none",color:"oklch(from var(--fg) l c h)",background:"oklch(from var(--input) l c h / 0)",[Ot]:{"&:not([disabled]):hover":{textDecoration:"underline",textUnderlineOffset:"0.2rem"}}},'&[size="icon"]':{width:"calc(var(--spacing) * 8)",padding:"0"},'&[size="xs"]':{padding:"calc(var(--spacing) * 2)",fontSize:"var(--text-xs)",lineHeight:"var(--text-xs)",height:"calc(var(--spacing) * 6)"},'&[size="icon-xs"]':{width:"calc(var(--spacing) * 6)",height:"calc(var(--spacing) * 6)",padding:"0",svg:{width:"calc(var(--spacing) * 3)",height:"calc(var(--spacing) * 3)"}},'&[size="sm"]':{height:"calc(var(--spacing) * 7)"},'&[size="icon-sm"]':{width:"calc(var(--spacing) * 7)",height:"calc(var(--spacing) * 7)",padding:"0"},'&[size="lg"]':{height:"calc(var(--spacing) * 9)"},'&[size="icon-lg"]':{width:"calc(var(--spacing) * 9)",height:"calc(var(--spacing) * 9)",padding:"0"},"&[disabled]":{opacity:".5"}}));let Lt=Wt;const Et=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(Et,"tagname","badge"),$.style(Et,ut(Et.tagname,{display:"inline-flex",placeContent:"center",placeItems:"center",padding:"0 calc(var(--spacing) * 2)",borderRadius:"calc(var(--radius) * 2.6)",height:"calc(var(--spacing) * 5)",lineHeight:"var(--text-xs)",transition:"0.2s all ease",fontSize:"var(--text-xs)",fontWeight:"var(--font-weight-medium)",fontFamily:"inherit",outline:"0.1rem solid oklch(from var(--border) l c h / 0)",whiteSpace:"nowrap",gap:"var(--spacing)",border:"1px solid oklch(from var(--input) l c h / .2)",background:"oklch(from var(--input) l c h / .025)",color:"oklch(from var(--fg) l c h / .9)","&:focus-visible":{outline:"0.1rem solid var(--border)"},"a:not([disabled]) &:hover":{background:"oklch(from var(--input) l c h / .1)",color:"oklch(from var(--fg) l c h / 1)"},'&[variant="primary"]':{border:"none",color:"oklch(from var(--primary-fg) l c h)",background:"var(--primary-bg)"},'&[variant="secondary"]':{border:"none",color:"oklch(from var(--secondary-fg) l c h)",background:"var(--secondary-bg)","a:not([disabled]) &:hover":{background:"oklch(from var(--secondary-bg) l c h / .8)"}},'&[variant="destructive"]':{border:"none",color:"oklch(from var(--destructive-fg) l c h)",background:"oklch(from var(--destructive-bg) l c h / .3)","a:not([disabled]) &:hover":{background:"oklch(from var(--destructive-bg) l c h / .5)"}},'&[variant="ghost"]':{border:"none",color:"oklch(from var(--fg) l c h)",background:"oklch(from var(--input) l c h / 0)","a:not([disabled]) &:hover":{background:"oklch(from var(--input) l c h / .1)"}},'&[variant="link"]':{border:"none",color:"oklch(from var(--fg) l c h)",background:"oklch(from var(--input) l c h / 0)","a:not([disabled]) &:hover":{textDecoration:"underline",textUnderlineOffset:"0.2rem"}},'&[size="sm"]':{padding:"0 calc(var(--spacing) * 1)",fontSize:"var(--text-xs2)",lineHeight:"var(--text-xs2)",height:"calc(var(--spacing) * 4)"},"a[disabled] &":{opacity:".5"}}));let Ht=Et;const Rt=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(Rt,"tagname","card"),$.style(Rt,ut(Rt.tagname,{display:"flex",flexDirection:"column",gap:"calc(var(--spacing))",paddingBlock:"calc(var(--spacing) * 4)",background:"var(--secondary-bg)",borderRadius:"calc(var(--radius) * 1.4)"}));let Tt=Rt;const Bt=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(Bt,"tagname","card-header"),$.style(Bt,ut(Bt.tagname,{display:"flex",width:"100%",flexDirection:"column",gap:"var(--spacing)",paddingInline:"calc(var(--spacing) * 4)"}));let Ft=Bt;const _t=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(_t,"tagname","card-content"),$.style(_t,ut(_t.tagname,{display:"block",paddingInline:"calc(var(--spacing) * 4)"}));let jt=_t;const Nt=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(Nt,"tagname","h3"),$.style(Nt,ut(`card ${Nt.tagname}`,{fontWeight:"var(--font-weight-medium)",lineHeight:"1.375",fontSize:"var(--text-base)",color:"var(--fg)"}));let Ut=Nt;const Pt=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(Pt,"tagname","p"),$.style(Pt,ut(`card ${Pt.tagname}`,{fontWeight:"var(--font-weight-medium)",lineHeight:"var(--line-height-sm)",fontSize:"var(--text-sm)",color:"var(--muted)"}));let Yt=Pt;const qt=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(qt,"tagname","dl"),$.style(qt,ut(qt.tagname,{display:"flex",flexDirection:"column"}));let Gt=qt;const Xt=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(Xt,"tagname","dc"),$.style(Xt,ut(Xt.tagname,{paddingBlock:"1rem",borderBottom:"1px solid color-mix(in oklch, var(--input) 50%, transparent)","&:last-child":{borderBottom:"none"}}));let Zt=Xt;const Jt=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(Jt,"tagname","dt"),$.style(Jt,ut(Jt.tagname,{fontSize:"var(--text-sm)",fontWeight:"var(--font-weight-medium)"}));let Kt=Jt;const Qt=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(Qt,"tagname","dd"),$.style(Qt,ut(Qt.tagname,{margin:"0",fontSize:"var(--text-sm)",color:"var(--muted)"}));let Vt=Qt;const te=class t extends f{clickListener=y;constructor(e,i){super(t.tagname,e,i)}open(t){v()&&(this.build(),this.style({top:`${t.y}px`,left:`${t.x}px`}),this.clickListener=t=>{t.target!==this.node&&(t.target&&this.node?.contains(t.target)||this.close())},setTimeout(()=>window.addEventListener("click",this.clickListener),1),document.body.append(...this.toDOM()))}close(t=!0){this.removeNode(),this.clickListener&&window.removeEventListener("click",this.clickListener),this.clickListener=y,t&&this.dispose()}};u(te,"tagname","context-menu"),$.style(te,ut(te.tagname,{display:"block",position:"fixed",top:"0",left:"0",maxHeight:"50dvh",overflowY:"auto",boxSizing:"border-box",border:"1px solid var(--input)",background:"oklch(from var(--bg) l c h)",padding:"calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)",borderRadius:"var(--radius)",userSelect:"none",scrollbarWidth:"thin",scrollbarColor:"var(--input) transparent"}));let ee=te;const ie=class t extends f{$menu=y;constructor(e,i){super(t.tagname,e,i),this.on("click",()=>this.$menu?.close())}build(t){return super.build(t),this.$menu=this.findAbove(t=>S(t,ee)),this}};u(ie,"tagname","context-menu-item"),$.style(ie,ut(ie.tagname,{display:"block",boxSizing:"border-box",padding:"calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)",borderRadius:"var(--radius)",fontSize:"0.875rem",fontWeight:"500",lineHeight:"1","&:hover, :not(:has(select-item:hover)) &:focus":{background:"oklch(from var(--input) l c h / .1)"},"&:focus":{outline:"none"}}));let se=ie;const oe={borderRadius:"var(--radius)",height:"calc(var(--spacing) * 8)",transition:"0.2s all ease",fontFamily:"inherit",fontSize:"var(--text-sm)",padding:"0 calc(var(--spacing) * 2.5)",border:"1px solid oklch(from var(--input) l c h / .2)",background:"oklch(from var(--input) l c h / .025)",color:"oklch(from var(--fg) l c h / .9)",outline:"0.2rem solid transparent","&:focus-visible":{outlineColor:"var(--border)"}},re=class t extends f{constructor(e,i){super(t.tagname,{ui:"input",...e},i)}};u(re,"tagname","input"),$.style(re,ut('input[ui="input"]',{...oe}));let ne=re;const ae=class t extends f{constructor(e,i){super(t.tagname,e,i)}props({for:t,...e}){super.props(e),this.for(t)}build(t){return super.build(t),this.setFor(),this}for(t){if(!arguments.length)return this.attr("for");A(t)||$.resolve(t,t=>{this.attr("for",t),this.setFor()})}setFor(){const t=this.for();this.findBelow(e=>{S(e,f)&&("input"===e.tagname&&e.attr("id",t),"label"===e.tagname&&e.attr("for",t))})}};u(ae,"tagname","field"),$.style(ae,ut(ae.tagname,{display:"flex",flexDirection:"column",gap:"calc(var(--spacing) * 2)",width:"100%",'&[direction="horizontal"]':{flexDirection:"row",placeItems:"center",width:"unset"}}));let ce=ae;const le=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(le,"tagname","label"),$.style(le,ut(le.tagname,{"field &":{display:"block",userSelect:"none",color:"var(--fg)",fontWeight:"var(--font-weight-medium)",fontSize:"var(--text-sm)",lineHeight:"var(--text-sm)",flexShrink:"0"},"field[disabled] &":{pointerEvents:"none"}}));let he=le;const de=class t extends f{constructor(e,i){super(t.tagname,e,i)}};u(de,"tagname","field-description"),$.style(de,ut(de.tagname,{"field &":{display:"block",color:"var(--muted)",fontWeight:"var(--font-weight-medium)",fontSize:"var(--text-sm)"},"field[disabled] &":{pointerEvents:"none"}}));let ue=de;const pe=class extends f{constructor(t,e){super("input",{type:"checkbox",ui:"switch",...t},e)}};u(pe,"tagname","input"),$.style(pe,ut('input[ui="switch"]',{appearance:"none",display:"inline-flex",height:"calc(var(--spacing) * 5)",width:"calc(var(--spacing) * 9)",background:"color-mix(in oklab, var(--input) 80%, transparent)",border:"none",placeItems:"center",borderRadius:"calc(var(--spacing) * 5)",transition:"all .3s ease",padding:"0","&::after":{content:'""',display:"block",height:"calc(var(--spacing) * 5)",width:"calc(var(--spacing) * 5)",background:"var(--fg)",borderRadius:"var(--radius-round)",transition:"all .3s ease"},"&:checked":{background:"var(--primary-bg)","&::after":{height:"calc(var(--spacing) * 4.5)",width:"calc(var(--spacing) * 4.5)",translate:"calc(115% - var(--spacing)) 0",background:"var(--bg)"}}}));let ge=pe;const be=class extends f{constructor(t,e){super("button",{ui:"toggle",...t},e),this.on("click",t=>this.checked(!this.checked()))}props({checked:t,...e}){super.props(e),this.checked(t)}checked(t){if(!arguments.length)return!L(this.attr("checked"));A(t)||$.resolve(t,t=>{this.attr("checked",t?"":y),this.node?.dispatchEvent(new Event("input"))})}};u(be,"tagname","button"),$.style(be,ut('button[ui="toggle"]',{display:"inline-flex",placeContent:"center",placeItems:"center",padding:"0 calc(var(--spacing) * 2.5)",borderRadius:"var(--radius)",height:"calc(var(--spacing) * 8)",lineHeight:"1rem",transition:"0.1s all ease",fontWeight:"var(--font-weight-medium)",fontFamily:"inherit",outline:"0.1rem solid oklch(from var(--border) l c h / 0)",userSelect:"none",gap:"calc(var(--spacing) * 2.5)",flexShrink:"0",border:"1px solid oklch(from var(--input) l c h / .2)",background:"oklch(from var(--input) l c h / .025)",color:"oklch(from var(--fg) l c h / .8)",[Ot]:{"&:not([disabled]):hover":{background:"oklch(from var(--input) l c h / .1)",color:"oklch(from var(--fg) l c h)"}},"&[checked]":{color:"oklch(from var(--primary-fg) l c h)",background:"oklch(from var(--primary-bg) l c h / .8)",[Ot]:{"&:not([disabled]):hover":{background:"oklch(from var(--primary-bg) l c h)",color:"oklch(from var(--primary-fg) l c h)"}}},'&[variant="primary"]':{"&[checked]":{color:"oklch(from var(--primary-fg) l c h)",background:"var(--primary-bg)"}},'&[variant="secondary"]':{"&[checked]":{color:"oklch(from var(--secondary-fg) l c h)",background:"var(--secondary-bg)"}},'&[variant="destructive"]':{"&[checked]":{color:"oklch(from var(--destructive-fg) l c h)",background:"oklch(from var(--destructive-bg) l c h / .3)"}},'&[variant="ghost"]':{border:"none",color:"oklch(from var(--fg) l c h)",background:"oklch(from var(--input) l c h / 0)","&[checked]":{color:"oklch(from var(--secondary-fg) l c h)",background:"var(--secondary-bg)"}},'&[size="icon"]':{width:"calc(var(--spacing) * 8)",padding:"0"},'&[size="xs"]':{padding:"calc(var(--spacing) * 2)",fontSize:"var(--text-xs)",lineHeight:"var(--text-xs)",height:"calc(var(--spacing) * 6)"},'&[size="icon-xs"]':{width:"calc(var(--spacing) * 6)",height:"calc(var(--spacing) * 6)",padding:"0",svg:{width:"calc(var(--spacing) * 3)",height:"calc(var(--spacing) * 3)"}},'&[size="sm"]':{height:"calc(var(--spacing) * 7)"},'&[size="icon-sm"]':{width:"calc(var(--spacing) * 7)",height:"calc(var(--spacing) * 7)",padding:"0"},'&[size="lg"]':{height:"calc(var(--spacing) * 9)"},'&[size="icon-lg"]':{width:"calc(var(--spacing) * 9)",height:"calc(var(--spacing) * 9)",padding:"0"},"&[disabled]":{opacity:".5"}}));let me=be;class ve extends f{$combobox=y;$focusedItem=y;$createItem=y;virtual=!0;constructor(t,e){super("combobox-list",t,e)}build(t){return super.build(t),this.$combobox=this.findAbove(t=>S(t,ye)),this.$combobox&&(this.$combobox.$list=this),this}filter(t){if(!this.$combobox)return;const e=[];this.$createItem&&(this.$createItem.visible=!!t.trim()&&!this.$combobox.itemMap.has(t.trim())),z(this.$combobox.itemMap,([i,s])=>{s.visible=!1,s.text.toLowerCase().includes(t.toLowerCase())&&(s.visible=!0,e.push(s))}),this.$combobox?.$content?.$empty&&(this.$combobox.$content.$empty.visible=!this.$createItem?.visible&&!e.length),this.$combobox.$content?.toDOM()}switch(t){const e=this.$focusedItem,i=this.children,s=e?i.indexOf(e):"up"===t?0:-1;let o="up"===t?s-1:s+1;(o<0||o>=i.length)&&(o="up"===t?-1:0),this.focus(o)}focus(t){let e=this.children.at(t);this.$focusedItem?.blur(),e?.focus()}focusFirstItem(){this.$createItem?.visible&&this.children[1]?this.focus(1):this.focus(0)}}const fe=class extends f{constructor(t,e){super("combobox-item",t,()=>{e?e(this):$([g(this,r)]),$(Ct,{ui:"combobox-item-check",svg:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check-icon lucide-check"><path d="M20 6 9 17l-5-5"/></svg>'})}),u(this,"$combobox",y),u(this,"$list",y),b(this,o,y),b(this,r,""),b(this,n,!1),this.on("mousedown",t=>t.preventDefault()),this.on("click",()=>{this.$combobox?.select(g(this,o),!this.selected())})}build(t){return super.build(t),this.$combobox=this.findAbove(t=>S(t,ye)),this.$list=this.findAbove(t=>S(t,ve)),this.$combobox?.itemMap.set(g(this,o),this),this}props({value:t,label:e,selected:i,...s}){super.props(s),this.value(t),this.label(e),this.selected(i)}value(t){if(!arguments.length)return g(this,o);A(t)||$.resolve(t,t=>{this.$combobox?.itemMap.delete(g(this,o)),this.$combobox?.itemMap.set(t,this),m(this,o,t)})}label(t){if(!arguments.length)return g(this,r);A(t)||$.resolve(t,t=>{m(this,r,t)})}selected(t){if(!arguments.length)return g(this,n);A(t)||$.resolve(t,t=>{m(this,n,t),this.attr("selected",t?"":null)})}focus(){this.attr("focus",""),this.$list&&(this.$list.$focusedItem=this)}blur(){this.attr("focus",y),this.$list&&(this.$list.$focusedItem=null)}};o=new WeakMap,r=new WeakMap,n=new WeakMap,u(fe,"tagname","combobox-item"),$.style(fe,ut(fe.tagname,{...mt,'icon[ui="combobox-item-check"]':{visibility:"hidden",marginInlineStart:"auto"},'&[selected] icon[ui="combobox-item-check"]':{visibility:"visible"}}));let $e=fe;const xe=class extends f{$combobox=y;$list=y;constructor(t,e){super("combobox-create-item",t,e),this.on("mousedown",t=>t.preventDefault())}build(t){return super.build(t),this.$combobox=this.findAbove(t=>S(t,ye)),this.$list=this.findAbove(t=>S(t,ve)),this.$list&&(this.$list.$createItem=this),this}focus(){this.attr("focus",""),this.$list&&(this.$list.$focusedItem=this)}blur(){this.attr("focus",y),this.$list&&(this.$list.$focusedItem=null)}};u(xe,"tagname","combobox-create-item"),$.style(xe,ut(xe.tagname,mt));let ke=xe;const we=class extends f{constructor(t,e){super("combobox",t,e),u(this,"$trigger",y),u(this,"$content",y),u(this,"$list",y),u(this,"$chips",y),u(this,"$input",y),u(this,"itemMap",/* @__PURE__ */new Map),b(this,a,/* @__PURE__ */new Set),u(this,"disconnect",y)}build(t){return super.build(t),z(g(this,a),t=>this.select(t)),this}toDOM(t=!0){return super.toDOM(!1),t&&this.$trigger&&(this.node?.append(...this.$trigger.toDOM()),this.$content?.toDOM()),[this.node]}props({values:t,...e}){super.props(e),this.values(t)}open(){this.attr("opened",""),v()&&this.$content&&(this.disconnect=$t(this.$trigger?.node,this.$content.node),document.body.append(...this.$content.toDOM()),this.$input&&this.$list?.filter(this.$input.node?.value??""))}close(){this.attr("opened",y),v()&&(this.$content?.removeNode(),this.disconnect?.(),this.disconnect=y)}select(t,e=!0){const i=this.itemMap.get(t);i&&(i.selected(e),e?(g(this,a).add(t),this.$chips?.appendChip(t),this.dispatch("combobox_select",[t])):(g(this,a).delete(t),this.$chips?.removeChip(t),this.dispatch("combobox_unselect",[t])),this.dispatch("combobox_input",[t]))}get selected(){return H(this.itemMap.values()).filter(t=>t.selected())}values(t){if(!arguments.length)return H(g(this,a));A(t)||$.resolve(t,t=>{m(this,a,new Set(t))})}};a=new WeakMap,u(we,"tagname","combobox"),$.style(we,ut(we.tagname,{display:"inline-block",width:"10rem",userSelect:"none"}));let ye=we;const Me=class extends f{$combobox=y;constructor(t,e){super("combobox-trigger",t,e)}build(t){return super.build(t),this.$combobox=this.findAbove(t=>S(t,ye)),this.$combobox&&(this.$combobox.$trigger=this),this}};u(Me,"tagname","combobox-trigger"),$.style(Me,ut(Me.tagname,{display:"flex",flexWrap:"wrap",columnGap:"calc(var(--spacing) * 1.25)",placeItems:"center",boxSizing:"border-box",border:"1px solid var(--input)",background:"color-mix(in oklch, var(--input) 30%, transparent)",borderRadius:"var(--radius)",fontSize:"0.875rem",fontWeight:"var(--font-weight-medium)",lineHeight:"1",padding:"0 calc(var(--spacing) * 1.25)","&:hover":{background:"color-mix(in oklch, var(--input) 50%, transparent)"},"&:focus-within":{outline:"0.1rem solid var(--border)"}}));let Ie=Me;const ze=class extends f{$combobox=y;constructor(t,e){super("input",{ui:"combobox-input",...t},e),this.on("focus",t=>L(this.$combobox?.attr("opened"))&&this.$combobox.open()),this.on("blur",t=>{this.$combobox?.close(),this.$combobox?.$chips?.$focusedChip?.blur()}),this.on("input",t=>{this.$combobox?.$list?.filter(t.currentTarget.value),this.$combobox?.$list?.focusFirstItem()}),this.on("keydown",t=>{switch(t.key){case"ArrowDown":return t.preventDefault(),void this.$combobox?.$list?.switch("down");case"ArrowUp":return t.preventDefault(),void this.$combobox?.$list?.switch("up");case"Backspace":return void(0===t.currentTarget.value.length&&this.$combobox?.$chips?.visibleChildren.at(-1)?.delete());case"ArrowRight":return void(0===t.currentTarget.value.length&&this.$combobox?.$chips?.switch("right"));case"ArrowLeft":return void(0===t.currentTarget.value.length&&this.$combobox?.$chips?.switch("left"))}}),this.on("keyup",t=>{switch(t.key){case"Escape":return t.preventDefault(),this.$combobox?.close(),void this.$combobox?.$trigger?.node?.focus();case"Delete":{const t=this.$combobox?.$chips?.$focusedChip;return this.$combobox?.$chips?.switch("right"),void t?.delete()}case"Tab":case"Enter":{t.preventDefault();const e=this.$combobox?.$list?.$focusedItem;if(!e)return;return S(e,$e)?this.$combobox?.select(e.value()):this.dispatch("combobox_create",[t.currentTarget.value],{bubbles:!0}),t.currentTarget.value="",void this.$combobox?.$list?.filter("")}}t.currentTarget.value.length&&this.$combobox?.$chips?.$focusedChip?.blur()})}build(t){return super.build(t),this.$combobox=this.findAbove(t=>S(t,ye)),this.$combobox&&(this.$combobox.$input=this),this}};$.style(ze,ut('input[ui="combobox-input"]',{border:"unset",background:"unset",color:"oklch(from var(--fg) l c h / .9)",fontSize:"0.875rem",fontWeight:"var(--font-weight-medium)",fontFamily:"inherit",lineHeight:"1",height:"calc(var(--spacing) * 8)",flex:"1",minWidth:"2rem",padding:"0 calc(var(--spacing) * 1.25)","&:focus":{outline:"unset"}}));let De=ze;const Ce=class extends f{$combobox=y;$empty=y;constructor(t,e){super("combobox-content",t,e)}build(t){return super.build(t),this.$combobox=this.findAbove(t=>S(t,ye)),this.$combobox&&(this.$combobox.$content=this),this}};u(Ce,"tagname","combobox-content"),$.style(Ce,ut(Ce.tagname,pt));let Se=Ce;const Ae=class extends f{$content=y;constructor(t,e){super("combobox-empty",t,e)}build(t){return super.build(t),this.$content=this.findAbove(t=>S(t,Se)),this.$content&&(this.$content.$empty=this),this}};u(Ae,"tagname","combobox-empty"),$.style(Ae,ut(Ae.tagname,{...mt}));let Oe=Ae;class We extends w{static tagname="combobox-chips";$combobox=y;chipMap=/* @__PURE__ */new Map;$focusedChip=y;constructor(t){super(t)}build(t){return super.build(t),this.$combobox=this.findAbove(t=>S(t,ye)),this.$combobox&&(this.$combobox.$chips=this),this}appendChip(t){const e=this.$combobox?.itemMap.get(t);if(!e)throw"ComboboxChips.addChip: $item not found";const i=this.chipMap.get(t)??$(Ee,{value:t,label:e.label()});this.chipMap.set(t,i),this.protos.includes(i)||(this.append(i),i.builded||i.build(),this.node?.replaceWith(...this.toDOM()))}removeChip(t){const e=this.chipMap.get(t);if(!e)throw"ComboboxChips.removeChip: $chip not found";e.remove(),e.removeNode()}switch(t){const e=this.$focusedChip,i=this.children,s=e?i.indexOf(e):"left"===t?0:-1;let o="left"===t?s-1:s+1;(o<0||o>=i.length)&&(o="left"===t?-1:0),this.focus(o)}focus(t){let e=this.children.at(t);this.$focusedChip?.blur(),e?.focus()}}const Le=class extends f{constructor(t,e){super("combobox-chip",t,()=>{e?e(this):($([g(this,l)]),$(He))}),u(this,"$chips",y),b(this,c),b(this,l,"")}build(t){return super.build(t),this.$chips=this.findAbove(t=>S(t,We)),this}props({value:t,label:e,...i}){super.props(i),this.value(t),this.label(e)}value(t){if(!arguments.length)return g(this,c);A(t)||$.resolve(t,t=>{this.$chips?.chipMap.delete(t),this.$chips?.chipMap.set(t,this),m(this,c,t)})}label(t){if(!arguments.length)return g(this,l);A(t)||$.resolve(t,t=>{m(this,l,t)})}delete(){this.$chips?.$combobox?.select(g(this,c),!1)}focus(){this.attr("focus",""),this.$chips&&(this.$chips.$focusedChip=this)}blur(){this.attr("focus",y),this.$chips&&(this.$chips.$focusedChip=y)}};c=new WeakMap,l=new WeakMap,u(Le,"tagname","combobox-chip"),$.style(Le,ut(Le.tagname,{display:"inline-flex",placeItems:"center",fontSize:"var(--text-xs)",padding:"0 calc(var(--spacing) * 1.5)",background:"var(--secondary-bg)",borderRadius:"calc(var(--radius) * .6)",height:"calc(var(--spacing) * 5.25)",marginBlock:"calc(var(--spacing))","&[focus]":{outline:"2px solid var(--input)"},'button[ui="combobox-chip-remove"]':{background:"unset",border:"unset",color:"oklch(from var(--fg) l c h / .9)",paddingInlineStart:"calc(var(--spacing) * 1.5)",icon:{height:"calc(var(--spacing) * 3.25)",width:"calc(var(--spacing) * 3.25)"}}}));let Ee=Le;class He extends f{static tagname="button";$chip=y;constructor(t,e){super("button",{ui:"combobox-chip-remove",...t},()=>{e?e(this):$(Ct,{svg:'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>'})}),this.on("click",()=>{this.$chip?.$chips?.$combobox?.select(this.$chip.value(),!1)})}build(t){return super.build(t),this.$chip=this.findAbove(t=>S(t,Ee)),this}}export{V as Accordion,tt as AccordionContainer,et as AccordionContent,it as AccordionTrigger,Ht as Badge,Lt as Button,Tt as Card,jt as CardContent,Yt as CardDescription,Ft as CardHeader,Ut as CardTitle,ye as Combobox,Ee as ComboboxChip,He as ComboboxChipRemoveButton,We as ComboboxChips,Se as ComboboxContent,ke as ComboboxCreateItem,Oe as ComboboxEmpty,De as ComboboxInput,$e as ComboboxItem,ve as ComboboxList,Ie as ComboboxTrigger,ee as ContextMenu,se as ContextMenuItem,Zt as DescriptionContent,Vt as DescriptionDetail,Gt as DescriptionList,Kt as DescriptionTerm,ce as Field,ue as FieldDescription,he as FieldLabel,Ct as Icon,ne as Input,q as Label,Y as Radio,N as RadioGroup,P as RadioItem,wt as Select,At as SelectArrow,bt as SelectContent,zt as SelectGroup,ft as SelectItem,Mt as SelectTrigger,It as SelectValue,B as Slide,_ as Slideshow,ge as Switch,dt as TabContent,lt as TabTrigger,ct as Tabs,ht as TabsContainer,me as Toggle,ot as Waterfall,nt as WaterfallItem,R as slideInOut};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "amateras",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "Amateras is a JavaScript library for building user interface.",
   "module": "index.ts",
   "type": "module",

package/packages/core/src/index.ts

@@ -1,8 +1,8 @@
 import { onclient, onserver } from '#env';
 import { _instanceof, _null, forEach, isArray, isFunction, isString, isUndefined, toArray } from '@amateras/utils';
 import './global';
-import { ElementProto } from './structure/ElementProto';
-import { Proto } from './structure/Proto';
+import { ElementProto, type ElementProtoConstructor } from './structure/ElementProto';
+import { Proto, type ProtoConstructor } from './structure/Proto';
 import { TextProto } from './structure/TextProto';
 import type { ProxyProto } from '#structure/ProxyProto';
 import type { NodeProto } from '#structure/NodeProto';
@@ -108,9 +108,14 @@ export namespace $ {
     export type AttrMiddleware = (name: string, value: any, proto: ElementProto) => any;
 
     export interface Overload<I extends any[] = any> {
+        protoConstructor: [
+            input: [ProtoConstructor],
+            output: I[0] extends Constructor<infer P> ? P extends Proto ? P : never : never,
+            args: I[0] extends Constructor<infer P> ? P extends Proto ? ConstructorParameters<I[0]> : never : never
+        ]
         proto: [
             input: [Proto],
-            output: I[0] extends Constructor<infer P> ? P : I[0],
+            output: I[0],
             args: []
         ]
         template: [
@@ -124,7 +129,7 @@ export namespace $ {
             args: []
         ]
         elementConstructor: [
-            input: [Constructor],
+            input: [ElementProtoConstructor],
             output: I[0] extends Constructor<infer E>
                 ?   E extends ElementProto<any>
                     ?   InstanceType<I[0]> 
@@ -174,7 +179,8 @@ export namespace $ {
     export interface ProtoEventMap<P extends Proto> {
         dispose: [];
         builded: [];
-        dom: [node: P extends NodeProto ? Exclude<P['node'], null> : Node]
+        dom: [node: P extends NodeProto ? Exclude<P['node'], null> : Node];
+        mutate: [];
     }
 
     export const process = {

package/packages/core/src/lib/hmr.ts

@@ -127,7 +127,7 @@ function diff(parentElement: HTMLElement, newProto: Proto, oldProto?: Proto, pre
 
     const oldProtoList = _Array_from(oldProto.protos);
     const newProtoList = _Array_from(newProto.protos);
-    let length = Math.max(oldProto.protos.size, newProto.protos.size);
+    let length = Math.max(oldProto.protos.length, newProto.protos.length);
     let prevNode: Node | undefined = is(oldProto, ProxyProto)?.node ?? _undefined;
     for (let i = 0; i < length; i++) {
         const oldChildProto = oldProtoList[i];

package/packages/core/src/structure/ElementProto.ts

@@ -1,14 +1,19 @@
 import { _Array_from, _null, _Object_assign, _Object_entries, forEach, isFunction, isNull, isUndefined, map } from "@amateras/utils";
 import { NodeProto } from "./NodeProto";
+import { symbol_ProtoType } from "#lib/symbols";
 
 const SELF_CLOSING_TAGNAMES = ['img', 'hr', 'br', 'input', 'link', 'meta'];
+export interface ElementProtoConstructor extends Constructor<ElementProto> {
+    [symbol_ProtoType]: 'Element'
+}
 
 export class ElementProto<H extends HTMLElement = HTMLElement> extends NodeProto<H> {
     tagname: string;
     #attr: Record<string, string> = {};
+    static override readonly [symbol_ProtoType] = 'Element' as any;
     declare layout: $.Layout | null;
     #innerHTML = '';
-    private __props__: $.Props | null
+    private __props__: $.Props | null;
     constructor(tagname: string, props: $.Props<any, any> | null, layout?: $.Layout | null) {
         super(() => layout?.(this));
         this.tagname = tagname;
@@ -67,29 +72,17 @@ export class ElementProto<H extends HTMLElement = HTMLElement> extends NodeProto
     }
 
     override toDOM(children = true): H[] {
+        super.toDOM();
+        let initialized = !!this.node;
         let element = this.node ?? document.createElement(this.tagname) as H;
         this.node = element;
-        if (this.#innerHTML && this.node.innerHTML !== this.#innerHTML) this.node.innerHTML = this.#innerHTML;
-        else if (children) this.DOMProcess();
-        forEach(_Object_entries(this.#attr), ([key, value]) => element.setAttribute(key, value));
-        this.dispatch('dom', [this.node])
-        return [element];
-    }
-
-    private DOMProcess() {
-        let thisNode = this.node;
-        if (thisNode) {
-            let nodes = map(_Array_from(this.protos).filter(proto => proto.visible), proto => proto.toDOM()).flat();
-            let nextNode: Node | null = _null;
-            forEach(nodes, (node, i) => {
-                let currentNode = thisNode.childNodes[i];
-                if (currentNode !== node) {
-                    if (!nodes.includes(currentNode as any)) nextNode = currentNode ?? _null;
-                    else nextNode = thisNode.childNodes[i + 1] ?? _null;
-                    thisNode.insertBefore(node, nextNode);
-                }
-            })
+        if (children) {
+            if (this.#innerHTML && !initialized) this.node.innerHTML = this.#innerHTML;
+            else if (!initialized || this.virtual) this.DOMProcess();
         }
+        if (!initialized) forEach(_Object_entries(this.#attr), ([key, value]) => element.setAttribute(key, value));
+        if (!initialized) this.dispatch('dom', [this.node])
+        return [element];
     }
 
     private attrProcess(attrObj: $.Props) {

package/packages/core/src/structure/NodeProto.ts

@@ -1,4 +1,4 @@
-import { _null } from "@amateras/utils";
+import { _null, forEach, map } from "@amateras/utils";
 import { Proto } from "./Proto";
 import { onclient } from "#env";
 
@@ -26,4 +26,21 @@ export class NodeProto<N extends Node & ChildNode = Node & ChildNode> extends Pr
     override removeNode(): void {
         this.node?.remove();
     }
+
+    protected DOMProcess() {
+        let thisNode = this.node;
+        if (thisNode) {
+            let protos = this.protos;
+            let nodes = map(protos.filter(proto => proto.visible), proto => proto.toDOM()).flat();
+            let nextNode: Node | null = _null;
+            forEach(nodes, (node, i) => {
+                let currentNode = thisNode.childNodes[i];
+                if (currentNode !== node) {
+                    if (!nodes.includes(currentNode as any)) nextNode = currentNode ?? _null;
+                    else nextNode = thisNode.childNodes[i + 1] ?? _null;
+                    thisNode.insertBefore(node, nextNode);
+                }
+            })
+        }
+    }
 }

package/packages/core/src/structure/Proto.ts

@@ -1,12 +1,15 @@
 import { symbol_ProtoType, symbol_Statement } from "#lib/symbols";
-import { _Array_from, _null, forEach, map } from "@amateras/utils";
+import { _null, forEach, map } from "@amateras/utils";
 import { GlobalState } from "./GlobalState";
 
 export type ProtoLayout = (...args: any[]) => void;
+export interface ProtoConstructor extends Constructor<Proto> {
+    [symbol_ProtoType]: 'Proto'
+}
 
 export abstract class Proto {
     static proto: Proto | null = _null; 
-    static [symbol_ProtoType] = 'Proto';
+    static readonly [symbol_ProtoType] = 'Proto';
     static [symbol_Statement] = false;
     layout: $.Layout | null;
     readonly parent: Proto | null = _null;
@@ -16,12 +19,14 @@ export abstract class Proto {
     lastProto: Proto | null = _null;
     builded = false;
     visible = true;
+    virtual = false;
     listeners: { [key: string]: Set<(...args: any[]) => void> } | null = _null;
     /**
      * @virtual This property is phantom types, declare the return type of {@link Proto.children}
      * @deprecated
      */
     declare __child__: Proto;
+    declare __protos__: Proto;
     constructor(layout?: $.Layout) {
         this.layout = layout ?? _null;
     }
@@ -38,7 +43,7 @@ export abstract class Proto {
     }
 
     get children(): this['__child__'][] {
-        return map(Array.from(this.protos).filter(proto => proto.visible), proto => {
+        return map(this.protos, proto => {
             //@ts-ignore
             if (proto.constructor[symbol_Statement]) 
                 return proto.children
@@ -46,13 +51,13 @@ export abstract class Proto {
         }).flat()
     }
 
-    get protos(): Set<Proto> {
-        let protos = new Set<Proto>();
+    get protos(): this['__protos__'][] {
+        let protos: Proto[] = [];
         let firstChild = this.firstProto;
         if (firstChild) {
             let currentProto: null | Proto = firstChild;
             while (currentProto) {
-                protos.add(currentProto);
+                protos.push(currentProto);
                 currentProto = currentProto.sibling;
             }
         }
@@ -93,7 +98,7 @@ export abstract class Proto {
             this.firstProto = proto;
         }
         else {
-            let protoArr = _Array_from(this.protos);
+            let protoArr = this.protos;
             let index = position < 0 ? protoArr.length + position + 1 : position;
             protoArr.splice(index, 0, proto);
             this.processProtos(...protoArr);
@@ -107,7 +112,7 @@ export abstract class Proto {
     }
 
     removeProtos(...protos: Proto[]) {
-        let protoSet = this.protos;
+        let protoSet = new Set(this.protos);
         forEach(protos, proto => {
             (proto as Mutable<Proto>).parent = null;
             proto.sibling = null;
@@ -143,11 +148,16 @@ export abstract class Proto {
     }
 
     toString(): string {
-        return map(_Array_from(this.protos).filter(proto => proto.visible), proto => `${proto}`).join('')
+        return map(this.protos.filter(proto => proto.visible), proto => `${proto}`).join('')
     }
 
     toDOM(children = true): Node[] {
-        return children ? map(_Array_from(this.protos).filter(proto => proto.visible), proto => proto.toDOM(children)).flat() : [];
+        let nodes: Node[] = []
+        forEach(this.protos, proto => {
+            if (!proto.visible) proto.removeNode();
+            else if (children) nodes.push(...proto.toDOM())
+        });
+        return nodes;
     }
 
     /**

package/packages/core/src/structure/TextProto.ts

@@ -21,6 +21,7 @@ export class TextProto extends NodeProto<Text> {
     }
 
     override toDOM(): Text[] {
+        super.toDOM();
         if (this.node) return [this.node];
         let node = new Text(this.#content);
         this.node = node;

package/packages/for/src/structure/For.ts

@@ -41,6 +41,7 @@ export class For<T = any> extends ProxyProto {
                 })
             }
             this.parent?.mutate()
+            this.parent?.dispatch('mutate', [], {bubbles: true});
         }
 
         this.list$.subscribe(update);
@@ -55,7 +56,7 @@ export class For<T = any> extends ProxyProto {
     }
 
     private exec() {
-        let deleted = this.protos;
+        let deleted = new Set(this.protos);
         let added = new Set<ForItem>();
         forEach(this.list$.value, (item, i) => {
             $.context(Proto, this, () => {
@@ -70,18 +71,18 @@ export class For<T = any> extends ProxyProto {
         return deleted;
     }
 
-    override removeNode(): void {
-        this.node?.remove();
-        forEach(this.protos, proto => proto.removeNode())
-    }
-
     override dispose(): void {
         super.dispose();
         forEach(this.#itemProtoMap.values(), $item => $item.dispose())
         this.#itemProtoMap.clear();
     }
+
+    override mutate(): void {
+        super.mutate();
+        this.parent?.mutate();
+    }
 }
 
 export class ForItem extends Proto {
-    static override [symbol_Statement] = true
+    static override [symbol_Statement] = true;
 }

package/packages/if/src/structure/Condition.ts

@@ -7,6 +7,7 @@ export class Condition extends ProxyProto {
     static override [symbol_Statement] = true;
     declare layout: null;
     statement: ConditionStatement | null = _null;
+    override virtual = true;
 
     override build() {
         // run base build method with empty protos
@@ -22,6 +23,7 @@ export class Condition extends ProxyProto {
             forEach(this.protos, proto => !proto.visible && proto.removeNode());
             this.node?.replaceWith(...this.toDOM());
             this.parent?.mutate();
+            this.parent?.dispatch('mutate', [], {bubbles: true});
         }
         // build statements proto and subscribe expression signal
         forEach(this.protos, proto => {
@@ -35,8 +37,8 @@ export class Condition extends ProxyProto {
         return this;
     }
 
-    override get protos(): Set<ConditionStatement> {
-        return super.protos as Set<ConditionStatement>
+    override get protos(): ConditionStatement[] {
+        return super.protos as ConditionStatement[]
     }
 
     override dispose(): void {
@@ -44,6 +46,11 @@ export class Condition extends ProxyProto {
         this.statement = _null;
     }
 
+    override mutate(): void {
+        super.mutate();
+        this.parent?.mutate();
+    }
+
     validate() {
         forEach(this.protos, proto => proto.visible = false);
         for (let proto of this.protos) {

package/packages/if/src/structure/ConditionStatement.ts

@@ -18,6 +18,11 @@ export abstract class ConditionStatement extends Proto {
         this.exps = _null;
     }
 
+    override mutate(): void {
+        super.mutate();
+        this.parent?.mutate();
+    }
+
     validate() {
         if (!this.exps) return true;
         return !this.exps.find(exp$ => !exp$.value)

package/packages/match/src/structure/Match.ts

@@ -47,6 +47,7 @@ export class Match<T = any> extends ProxyProto {
             if (matchProto !== this.#default) this.#default?.removeNode();
             this.node?.replaceWith(...this.toDOM());
             this.parent?.mutate();
+            this.parent?.dispatch('mutate', [], {bubbles: true});
         }
         // build cases proto and subscribe expression signal
         forEach(this.cases, proto => {
@@ -56,6 +57,11 @@ export class Match<T = any> extends ProxyProto {
         return this;
     }
 
+    override mutate(): void {
+        super.mutate();
+        this.parent?.mutate();
+    }
+
     case(condition: T, layout: CaseLayout) {
         let caseProto = new Case(condition, layout);
         this.cases.add(caseProto);

package/packages/router/src/structure/RouterConstructor.ts

@@ -2,14 +2,13 @@ import { symbol_ProtoType } from "@amateras/core";
 import { Router } from "./Router";
 
 export type RouterHandle = ($$: Router) => void;
-
-export interface RouterConstructor {
-    new(): Router;
+export interface RouterConstructor extends Constructor<Router> {
+    [symbol_ProtoType]: 'Router';
 }
 
 export const RouterConstructor = (handle: RouterHandle) => {
     return class extends Router {
-        static override [symbol_ProtoType] = 'Router';
+        static override [symbol_ProtoType] = 'Router' as any;
         constructor() {
             super();
             handle(this);

package/packages/ui/src/structure/Combobox/Combobox.ts

@@ -4,7 +4,8 @@ import { ElementProto, onclient, Proto } from "@amateras/core";
 import { _null, _Array_from, _instanceof, isNull, isUndefined, forEach } from "@amateras/utils";
 import type { ComboboxChips } from "./ComboboxChips";
 import { type ComboboxList, ComboboxItem } from "./ComboboxList";
-import { item_css } from "#lib/combobox_style";
+import { item_css } from "../../style/combobox_style";
+import { content_css } from "../../style/content_style";
 
 export interface ComboboxProps {
     values?: OrSignal<any[]>;
@@ -167,7 +168,7 @@ export class ComboboxInput extends ElementProto<HTMLInputElement> {
                     return;
                 }
                 case 'Backspace': {
-                    if (e.currentTarget.value.length === 0) this.$combobox?.$chips?.children.at(-1)?.delete();
+                    if (e.currentTarget.value.length === 0) this.$combobox?.$chips?.visibleChildren.at(-1)?.delete();
                     return;
                 }
                 case 'ArrowRight': {
@@ -252,23 +253,7 @@ export class ComboboxContent extends ElementProto {
     }
 
     static {
-        $.style(this, toCSS(this.tagname, {
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            maxHeight: '50dvh',
-            overflowY: 'auto',
-            display: 'block',
-            boxSizing: 'border-box',
-            border: '1px solid var(--input)',
-            background: 'oklch(from var(--bg) l c h)',
-            padding: 'calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)',
-            borderRadius: 'var(--radius)',
-            userSelect: 'none',
-
-            scrollbarWidth: 'thin',
-            scrollbarColor: 'var(--input) transparent',
-        }))
+        $.style(this, toCSS(this.tagname, content_css))
     }
     
     override build(cascading?: boolean): this {

package/packages/ui/src/structure/Combobox/ComboboxChips.ts

@@ -29,7 +29,7 @@ export class ComboboxChips extends ProxyProto {
         if (!$item) throw 'ComboboxChips.addChip: $item not found';
         const $chip = this.chipMap.get(value) ?? $(ComboboxChip, {value, label: $item.label()});
         this.chipMap.set(value, $chip);
-        if (this.protos.has($chip)) return;
+        if (this.protos.includes($chip)) return;
         this.append($chip);
         if (!$chip.builded) $chip.build();
         this.node?.replaceWith(...this.toDOM());

package/packages/ui/src/structure/Combobox/ComboboxList.ts

@@ -4,7 +4,7 @@ import { ElementProto } from "@amateras/core";
 import { _null, _instanceof, forEach, isUndefined } from "@amateras/utils";
 import { check_svg } from "../../icon/check.svg";
 import { Combobox } from "./Combobox";
-import { item_css } from "#lib/combobox_style";
+import { item_css } from "../../style/combobox_style";
 
 
 export class ComboboxList extends ElementProto {
@@ -12,6 +12,7 @@ export class ComboboxList extends ElementProto {
     $focusedItem: ComboboxItem | ComboboxCreateItem | null = _null;
     $createItem: ComboboxCreateItem | null = _null;
     declare __child__: ComboboxItem | ComboboxCreateItem;
+    override virtual = true;
     constructor(props: $.Props, layout?: $.Layout<ComboboxList>) {
         super('combobox-list', props, layout);
     }
@@ -26,7 +27,7 @@ export class ComboboxList extends ElementProto {
     filter(input: string) {
         if (!this.$combobox) return;
         const items: ComboboxItem[] = [];
-        if (this.$createItem) this.$createItem.visible = !!input && !this.$combobox.itemMap.has(input);
+        if (this.$createItem) this.$createItem.visible = !!input.trim() && !this.$combobox.itemMap.has(input.trim());
         forEach(this.$combobox.itemMap, ([_, $item]) => {
             $item.visible = false;
             if ($item.text.toLowerCase().includes(input.toLowerCase())) {
@@ -57,16 +58,6 @@ export class ComboboxList extends ElementProto {
         if (this.$createItem?.visible && this.children[1]) this.focus(1);
         else this.focus(0)
     }
-
-    override mutate(): void {
-        // super.mutate();
-        // const items = this.findBelowAll<ComboboxItem>(proto => _instanceof(proto, ComboboxItem));
-        // console.debug(items)
-        // this.$combobox?.itemMap.clear();
-        // forEach(items, $item => {
-        //     this.$combobox?.itemMap.set($item.value(), $item);
-        // })
-    }
 }
 
 export interface ComboboxItemProps {
@@ -176,17 +167,11 @@ export class ComboboxCreateItem extends ElementProto {
     $list: ComboboxList | null = _null;
     constructor(props: $.Props, layout?: $.Layout<ComboboxCreateItem>) {
         super('combobox-create-item', props, layout);
-
         this.on('mousedown', e => e.preventDefault())
-
-        this.on('click', () => {
-        })
     }
 
     static {
-        $.style(this, toCSS(this.tagname, {
-            ...item_css
-        }))
+        $.style(this, toCSS(this.tagname, item_css))
     }
     
     override build(cascading?: boolean): this {

package/packages/ui/src/structure/Input.ts

@@ -1,3 +1,4 @@
+import { input_css } from "../style/input_style";
 import { toCSS } from "#lib/toCSS";
 import { ElementProto } from "@amateras/core";
 
@@ -9,21 +10,7 @@ export class Input extends ElementProto<HTMLInputElement> {
 
     static {
         $.style(this, toCSS('input[ui="input"]', {
-            borderRadius: 'var(--radius)',
-            height: 'calc(var(--spacing) * 8)',
-            transition: '0.2s all ease',
-            fontFamily: 'inherit',
-            fontSize: 'var(--text-sm)',
-            padding: `0 calc(var(--spacing) * 2.5)`,
-            
-            border: '1px solid oklch(from var(--input) l c h / .2)',
-            background: 'oklch(from var(--input) l c h / .025)',
-            color: 'oklch(from var(--fg) l c h / .9)',
-            outline: '0.2rem solid transparent',
-
-            '&:focus-visible': {
-                outlineColor: 'var(--border)'
-            },
+            ...input_css
         }))
     }
 }

package/packages/ui/src/structure/Select/Select.ts

@@ -76,7 +76,8 @@ export class Select extends ElementProto {
                 if (e.target && this.$content?.node?.contains(e.target as Node)) return;
                 this.close();
             }
-            this.selected?.node?.focus() ?? this.$content?.findBelow<SelectItem>(proto => _instanceof(proto, SelectItem))?.node?.focus();
+            if (this.selected?.node) this.selected.node.focus();
+            else this.$content?.findBelow<SelectItem>(proto => _instanceof(proto, SelectItem))?.node?.focus();
             window.addEventListener('click', this.clickListener)
         }
     }

package/packages/ui/src/structure/Select/SelectContent.ts

@@ -2,6 +2,7 @@ import { ElementProto } from "@amateras/core";
 import { _null, _instanceof } from "@amateras/utils";
 import { Select } from "./Select";
 import { toCSS } from "#lib/toCSS";
+import { content_css } from "../../style/content_style";
 
 export class SelectContent extends ElementProto {
     static tagname = 'select-content'
@@ -11,23 +12,7 @@ export class SelectContent extends ElementProto {
     }
 
     static {
-        $.style(this, toCSS(this.tagname, {
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            maxHeight: '50dvh',
-            overflowY: 'auto',
-            display: 'block',
-            boxSizing: 'border-box',
-            border: '1px solid var(--input)',
-            background: 'oklch(from var(--bg) l c h)',
-            padding: 'calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)',
-            borderRadius: 'var(--radius)',
-            userSelect: 'none',
-
-            scrollbarWidth: 'thin',
-            scrollbarColor: 'var(--input) transparent',
-        }))
+        $.style(this, toCSS(this.tagname, content_css))
     }
 
     override build(cascading?: boolean): this {

package/packages/ui/src/structure/Select/SelectItem.ts

@@ -3,6 +3,7 @@ import { _null, isUndefined, _instanceof } from "@amateras/utils";
 import { Select } from "./Select";
 import { toCSS } from "#lib/toCSS";
 import { SelectContent } from "./SelectContent";
+import { item_css } from "../../style/combobox_style";
 
 export interface SelectItemProps {
     value: OrSignal<any>
@@ -67,22 +68,7 @@ export class SelectItem extends ElementProto {
     }
 
     static {
-        $.style(this, toCSS(this.tagname, {
-            display: 'block',
-            boxSizing: 'border-box',
-            padding: 'calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)',
-            borderRadius: 'var(--radius)',
-            fontSize: '0.875rem',
-            fontWeight: '500',
-            lineHeight: '1',
-
-            '&:hover, :not(:has(select-item:hover)) &:focus': {
-                background: 'oklch(from var(--input) l c h / .1)'
-            },
-            '&:focus': {
-                outline: 'none'
-            }
-        }))
+        $.style(this, toCSS(this.tagname, item_css))
     }
 
     value(): any;

package/packages/ui/src/{lib → style}/combobox_style.ts

@@ -1,4 +1,4 @@
-import type { CSSMap } from "./toCSS";
+import type { CSSMap } from "../lib/toCSS";
 
 export const item_css = {
     display: 'flex',

package/packages/ui/src/style/content_style.ts

@@ -0,0 +1,19 @@
+import type { CSSMap } from "#lib/toCSS";
+
+export const content_css: CSSMap = {
+    position: 'absolute',
+    top: '0',
+    left: '0',
+    maxHeight: '50dvh',
+    overflowY: 'auto',
+    display: 'block',
+    boxSizing: 'border-box',
+    border: '1px solid var(--input)',
+    background: 'oklch(from var(--bg) l c h)',
+    padding: 'calc(var(--spacing) * 2) calc(var(--spacing) * 1.25)',
+    borderRadius: 'var(--radius)',
+    userSelect: 'none',
+
+    scrollbarWidth: 'thin',
+    scrollbarColor: 'var(--input) transparent',
+}

package/packages/ui/src/style/input_style.ts

@@ -0,0 +1,19 @@
+import type { CSSMap } from "../lib/toCSS";
+
+export const input_css: CSSMap = {
+    borderRadius: 'var(--radius)',
+    height: 'calc(var(--spacing) * 8)',
+    transition: '0.2s all ease',
+    fontFamily: 'inherit',
+    fontSize: 'var(--text-sm)',
+    padding: `0 calc(var(--spacing) * 2.5)`,
+    
+    border: '1px solid oklch(from var(--input) l c h / .2)',
+    background: 'oklch(from var(--input) l c h / .025)',
+    color: 'oklch(from var(--fg) l c h / .9)',
+    outline: '0.2rem solid transparent',
+
+    '&:focus-visible': {
+        outlineColor: 'var(--border)'
+    },
+}

package/packages/widget/src/structure/Widget.ts

@@ -3,7 +3,7 @@ import type { WidgetBuilder } from "..";
 
 export const WidgetConstructor = (builder: WidgetBuilder) => {
     return class extends Proto {
-        static override [symbol_ProtoType] = 'Widget';
+        static override readonly [symbol_ProtoType] = 'Widget' as any;
         static override name = 'Widget';
         constructor(props: $.Props, layout?: $.Layout) {
             super(() => builder(props, (proto) => layout?.(proto)));
@@ -11,7 +11,7 @@ export const WidgetConstructor = (builder: WidgetBuilder) => {
     } as unknown as WidgetConstructor
 }
 
-export interface WidgetConstructor<Props = {}, Parent extends Proto = any> extends Constructor<Proto> {
+export interface WidgetConstructor<Props = {}, Parent extends Proto = any> {
     [symbol_ProtoType]: 'Widget';
     new (builder: WidgetBuilder): Widget<Props, Parent>;
 }