@jasonshimmy/custom-elements-runtime 0.0.1 → 0.0.2-beta.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/dist/custom-elements-runtime.cjs.js +2 -2
- package/dist/custom-elements-runtime.cjs.js.map +1 -1
- package/dist/custom-elements-runtime.es.js +9 -17
- package/dist/custom-elements-runtime.es.js.map +1 -1
- package/dist/custom-elements-runtime.umd.js +2 -2
- package/dist/custom-elements-runtime.umd.js.map +1 -1
- package/dist/runtime.d.ts +1 -1
- package/dist/template-helpers.d.ts +0 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
|
|
2
1
|
# Custom Elements Runtime
|
|
3
2
|
|
|
4
3
|
> **Ultra-lightweight, type-safe runtime for fast, reactive, and maintainable web components.**
|
|
@@ -10,7 +9,8 @@ Build modern web components with strict TypeScript, zero dependencies, and a fun
|
|
|
10
9
|
- **Reactive State:** Automatic re-renders using ES6 Proxy; direct assignment supported. State changes trigger batched updates for performance.
|
|
11
10
|
- **Attribute-State Sync:** All primitive state keys (string, number, boolean) are automatically observed as attributes and kept in sync. Parent-to-child communication is seamless.
|
|
12
11
|
- **Functional Templates:** Use plain functions, tagged helpers (`html`, `compile`), or async Promises. Templates can be compiled for performance and SSR.
|
|
13
|
-
- **
|
|
12
|
+
- **Static & Dynamic Styling:** Define static styles in the config or use functions for dynamic styles based on state.
|
|
13
|
+
- **Refs:** Direct DOM access via `data-ref` for imperative logic and event handling. No complex selectors required.
|
|
14
14
|
- **Computed Properties:** Define derived, reactive values with `computed` for efficient state management.
|
|
15
15
|
- **Automatic Event Binding:** Declarative, type-safe handlers via `data-on-*` attributes. Only one handler per event type per element is attached; previous handlers are removed on rerender. Handlers are defined directly on the component config.
|
|
16
16
|
- **Controlled Input Sync:** Inputs with `data-model` (including checkboxes, radios, multi-checkbox groups, and modifiers) stay in sync with state. User typing always wins. VDOM patching ensures reliable event handling and focus preservation.
|
|
@@ -26,7 +26,7 @@ Build modern web components with strict TypeScript, zero dependencies, and a fun
|
|
|
26
26
|
- **Strict TypeScript:** Type-safe, developer-friendly, zero dependencies. All APIs and configuration are strictly typed.
|
|
27
27
|
- **Tree-shakable & Modular:** Import only what you use. All exports are modular and optimized for tree-shaking.
|
|
28
28
|
- **Functional API:** No classes, no boilerplate. All configuration is functional and declarative.
|
|
29
|
-
- **Template Helpers:** Use `html`, `compile`, `css`, `classes`,
|
|
29
|
+
- **Template Helpers:** Use `html`, `compile`, `css`, `classes`, and `styles` for efficient, type-safe template authoring.
|
|
30
30
|
- **Build Tools:** Integrate with Vite, Webpack, or Rollup for build-time template compilation and optimization.
|
|
31
31
|
- **VDOM Utilities:** Fine-grained DOM diffing and patching for controlled inputs, event listeners, and efficient updates.
|
|
32
32
|
|
|
@@ -36,7 +36,7 @@ Build modern web components with strict TypeScript, zero dependencies, and a fun
|
|
|
36
36
|
- Only one event handler per event type per element is attached; previous handlers are removed on rerender. Handlers must be defined on the config object.
|
|
37
37
|
- Controlled input sync prioritizes user typing (focused/dirty inputs) over state updates. VDOM patching is regression-tested for reliability.
|
|
38
38
|
- SSR hydration is opt-in via the `hydrate` property. If no region is marked, the entire shadow root is hydrated. SSR excludes refs, event listeners, and lifecycle hooks.
|
|
39
|
-
- All user-generated content is escaped in templates using `html` and `compile` helpers. Static
|
|
39
|
+
- All user-generated content is escaped in templates using `html` and `compile` helpers. Static strings are not escaped.
|
|
40
40
|
- Only features documented here and in [`src/lib/runtime.ts`](src/lib/runtime.ts) are supported. Undocumented features may not work as expected.
|
|
41
41
|
- VDOM patching for controlled inputs (checkboxes, radios, etc.) is regression-tested to ensure event listeners are always attached and state updates are reliable.
|
|
42
42
|
|
|
@@ -36,11 +36,11 @@
|
|
|
36
36
|
<\/script>`.trim()}const Y=e=>e.replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'"),N=e=>e.replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(/</g,"<").replace(/>/g,">"),J=e=>e.replace(/></g,`>
|
|
37
37
|
<`).split(`
|
|
38
38
|
`).map(t=>{const n=(t.match(/^<[^\/]/g)||[]).length-(t.match(/<\//g)||[]).length;return" ".repeat(Math.max(0,n))+t.trim()}).join(`
|
|
39
|
-
`);function D(e){return String(e).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function L(e,t){if(typeof e!="string"||!t)return String(e);for(const n in t){if(typeof t[n]=="string"&&e===t[n])return D(e);if(Array.isArray(t[n])){for(const r of t[n])if(r&&typeof r=="object"){for(const i in r)if(typeof r[i]=="string"&&e===r[i])return D(e)}}}return String(e)}function Q(e,...t){function n(r,i,s){if(Array.isArray(r)){const o=r.map(a=>n(a,i,s));return o.some(a=>a instanceof Promise)?Promise.all(o).then(a=>a.join("")):o.join("")}if(typeof r=="function"){const o=n(r(i,s),i,s);return o instanceof Promise,o}return r==null?"":r instanceof Promise?r:String(r)}return(r,i)=>{let s="",o=!1;const a=[];for(let c=0;c<e.length;c++)if(s+=e[c],c<t.length){let l=t[c];const d=e[c],u=/data-on-[a-z]+="?$/.test(d);l=n(l,r,i),l instanceof Promise?(o=!0,a.push(l)):/=\s*"?$/.test(d)&&typeof l=="string"&&!u?(l=l.replace(/"/g,""").replace(/'/g,"'"),s+=l):!u&&!/=\s*"?$/.test(d)?s+=L(l,r):s+=l}return o?Promise.all(a).then(c=>{let l="",d=0;for(let u=0;u<e.length;u++)if(l+=e[u],u<t.length){let f=t[u];const h=e[u],m=/data-on-[a-z]+="?$/.test(h);f=n(f,r,i),f instanceof Promise?l+=c[d++]:/=\s*"?$/.test(h)&&typeof f=="string"&&!m?(f=f.replace(/"/g,""").replace(/'/g,"'"),l+=f):!m&&!/=\s*"?$/.test(h)?l+=L(f,r):l+=f}return l}):s}}function tt(e,...t){const n="compiled-"+Math.random().toString(36).slice(2);function r(s,o,a){return Array.isArray(s)?s.map(c=>r(c,o,a)).join(""):typeof s=="function"?r(s(o,a),o,a):s==null?"":String(s)}const i=(s,o)=>{let a="";for(let c=0;c<e.length;c++)if(a+=e[c],c<t.length){let l=t[c];const d=e[c],u=/data-on-[a-z]+="?$/.test(d);l=r(l,s,o),/=\s*"?$/.test(d)&&typeof l=="string"&&!u?(l=l.replace(/"/g,""").replace(/'/g,"'"),a+=l):!u&&!/=\s*"?$/.test(d)?a+=L(l,s):a+=l??""}return a};return i.id=n,i}function et(e,...t){let n="";for(let r=0;r<e.length;r++)n+=e[r],r<t.length&&(n+=t[r]??"");return n}function nt(e){return e}function rt(e,t){return{[e]:t}}function st(e){return Object.keys(e).filter(t=>e[t]).join(" ")}function it(e){return Object.entries(e).map(([t,n])=>`${t}: ${n}`).join("; ")}function P(e,t,n){const[r,...i]=n.split("|").map(a=>a.trim());if(!r||r==="__proto__"||r==="constructor"||r==="prototype")return;function s(a,c,l){const d=c.split(".");let u=a;for(let f=0;f<d.length-1;f++)d[f]in u||(u[d[f]]={}),u=u[d[f]];u[d[d.length-1]]=l}const o=a=>{let c;if(e instanceof HTMLInputElement&&e.type==="checkbox"){c=e.value;const l=e.getAttribute("data-true-value"),d=e.getAttribute("data-false-value");let u=Array.isArray(t[r])?t[r]:void 0;if(u){if(e.checked)u.includes(c)||u.push(c);else{const f=u.indexOf(c);f!==-1&&u.splice(f,1)}s(t,r,[...u])}else l!==null||d!==null?e.checked?s(t,r,l):s(t,r,d!==null?d:!1):s(t,r,e.checked)}else e instanceof HTMLInputElement&&e.type==="radio"?(c=e.value,s(t,r,c),((e.form||e.closest("form")||e.getRootNode())instanceof Element?(e.form||e.closest("form")||e.getRootNode()).querySelectorAll(`input[type="radio"][name="${e.name}"][data-model="${n}"]`):[]).forEach(d=>{d.checked=d.value===String(c)})):(c=e.value,e instanceof HTMLInputElement&&e.type==="number"&&(c=Number(c)),i.includes("trim")&&typeof c=="string"&&(c=c.trim()),i.includes("number")&&(c=Number(c)),s(t,r,c));if("_vnode"in e&&typeof e._vnode=="object"&&e._vnode?.props&&(e._vnode.props.value=c),a.type==="input"&&(e._isDirty=!0),a.type==="keydown"&&a.key==="Enter"&&(e._isDirty=!1,e instanceof HTMLElement&&e.isConnected)){let l=e.parentElement;for(;l&&!(l instanceof HTMLElement&&l.shadowRoot);)l=l.parentElement;l&&typeof l=="object"&&l!==null&&"render"in l&&typeof l.render=="function"&&l.render()}a.type==="blur"&&(e._isDirty=!1)};e.addEventListener("input",o),e.addEventListener("change",o),e.addEventListener("keydown",o),e.addEventListener("blur",o)}const x=(()=>{try{if(typeof process<"u"&&process.env)return process.env.NODE_ENV==="development"}catch{}return typeof window<"u"?window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1":!1})();function ot(e,t={}){const{development:n=x,cache:r=!0,optimize:i=!0}=t,s=W(e);if(r&&k.has(s)){if(n){const o=_.get(s)||{compilationTime:0,renderTime:0,updateTime:0,cacheHits:0,cacheMisses:0};o.cacheHits++,_.set(s,o)}return k.get(s)}if(n){const o=_.get(s)||{compilationTime:0,renderTime:0,updateTime:0,cacheHits:0,cacheMisses:0};o.cacheMisses++,_.set(s,o)}try{const o=ct(e,{development:n,optimize:i});return r&&k.set(s,o),o}catch(o){return n&&(console.error("[Template Compiler] Error compiling template:",o),console.error("[Template Compiler] Template:",e)),{statics:[e],dynamics:[],fragment:null,id:s,hasDynamics:!1,render:()=>e}}}function at(e,t){if(typeof document>"u")return[0];try{let n=function(a,c=[]){if(a.nodeType===Node.TEXT_NODE){if(a.textContent?.includes(t))return c}else if(a.nodeType===Node.ELEMENT_NODE){let l=0;for(let d=0;d<a.childNodes.length;d++){const u=a.childNodes[d],f=n(u,[...c,l]);if(f)return f;l++}}return null};const s=new DOMParser().parseFromString(`<div>${e}</div>`,"text/html").body.firstElementChild;return n(s)||[0]}catch(n){return x&&console.warn("[Template Compiler] Error finding DOM path for placeholder:",t,n),[0]}}function ct(e,t){return new lt(e,t).compile()}class lt{template;options;dynamics=[];statics=[];constructor(t,n){this.template=t,this.options=n}compile(){this.parseTemplate();const t=this.createStaticFragment(),n=W(this.template),r=(i,s)=>{let o="";for(let a=0;a<this.statics.length;a++)if(o+=this.statics[a],a<this.dynamics.length){let c=this.dynamics[a].getValue(i,s);if(c instanceof Promise)return Promise.all(this.dynamics.map(l=>{const d=l.getValue(i,s);return d instanceof Promise?d:Promise.resolve(d)})).then(l=>{let d="";for(let u=0;u<this.statics.length;u++)d+=this.statics[u],u<l.length&&(d+=l[u]);return d});o+=c}return o};return{statics:this.statics,dynamics:this.dynamics,fragment:t,id:n,hasDynamics:this.dynamics.length>0,render:r}}parseTemplate(){const t=/\{\{([^}]+)\}\}/g;let n=0,r;for(;(r=t.exec(this.template))!==null;){const s=this.template.slice(n,r.index);this.statics.push(s);let o=s.match(/([a-zA-Z0-9_-]+)\s*=\s*"?$/),a=o?o[1]:void 0,c;if(s.endsWith('style="color:'))a="style",c="color";else if(a==="style"){const d=s.match(/style\s*=\s*"?([^:;]+):\s*$/);d&&(c=d[1].trim())}const l=r[1].trim();this.analyzeDynamicExpression(l,this.dynamics.length,a,c),n=r.index+r[0].length}const i=this.template.slice(n);this.statics.push(i)}analyzeDynamicExpression(t,n,r,i){let s="text",o;r?r==="class"?(s="class",o="class"):r==="style"?(s="style",o=i||"style"):r==="value"?(s="property",o="value"):(s="attribute",o=r):t.includes("class.")?(s="class",o=t.split(".")[1]):t.includes("style.")?(s="style",o=t.split(".")[1]):t.includes("@")?(s="event",o=t.split("@")[1]):t==="class"?(s="class",o="class"):t==="style"?(s="style",o="style"):t==="value"?(s="property",o="value"):t==="title"&&(s="attribute",o="title");const a=`__DYNAMIC_${n}__`,c=this.statics.join(a);let l=at(c,a);this.statics.length===2&&s!=="text"?l=[0]:this.statics.length===2&&l.length===0&&(l=[0]),this.dynamics.push({path:l,type:s,target:o,getValue:this.createValueGetter(t)})}createValueGetter(t){return(n,r)=>{try{let i;if(t&&typeof t=="function")i=t(n);else if(typeof t=="string"&&t.startsWith("state.")){const s=t.slice(6);i=n[s]}else typeof t=="string"&&/^[a-zA-Z0-9_$]+$/.test(t)?i=n[t]:(typeof t=="string"&&t.includes("("),i="");return i}catch(i){return this.options.development&&console.warn(`[Template Compiler] Error evaluating expression: ${t}`,i),""}}}createStaticFragment(){if(typeof document>"u")return null;try{const t=this.statics.join("");if(!t.trim())return null;const r=new DOMParser().parseFromString(t,"text/html"),i=document.createDocumentFragment();for(;r.body.firstChild;)i.appendChild(r.body.firstChild);return i}catch(t){return this.options.development&&console.warn("[Template Compiler] Could not create static fragment:",t),null}}}function M(e,t){try{if(t.length===1&&t[0]===0&&e instanceof Element)return e;let n=e;for(let r=0;r<t.length;r++){const i=t[r];if(!n.childNodes||n.childNodes.length<=i)return null;n=n.childNodes[i]}return n}catch{return null}}function R(e,t,n){let r;return e.fragment&&!e.hasDynamics?r=e.fragment.cloneNode(!0):r=dt(e,t,n),r}function z(e,t,n,r,i){if(e.hasDynamics)for(const s of e.dynamics)try{const o=s.getValue(n,r);if(i!==void 0&&s.getValue(i,r)===o)continue;q(t,s,o)}catch(o){console.warn("[Template Compiler] Error applying update:",o)}}function dt(e,t,n){let r="";for(let a=0;a<e.statics.length;a++)if(r+=e.statics[a],a<e.dynamics.length){const c=e.dynamics[a];if(c.type==="text"||c.type==="attribute"){const l=c.getValue(t,n);r+=String(l??"")}else(c.type==="property"||c.type==="class"||c.type==="style")&&(r+="")}if(typeof document>"u")return new DocumentFragment;const s=new DOMParser().parseFromString(r,"text/html"),o=document.createDocumentFragment();for(;s.body.firstChild;)o.appendChild(s.body.firstChild);for(const a of e.dynamics){const c=a.getValue(t,n),l=M(o,a.path);q(l,a,c)}return o}function q(e,t,n){try{if(t.type==="text"){const i=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);let s=!1,o;for(;o=i.nextNode();){const c=o.textContent||"";if(c.includes("Count: ")){const l=c.replace(/Count: \d+/,`Count: ${n}`);o.textContent=l,s=!0}}if(s)return;const a=M(e,t.path);a&&a.nodeType===Node.TEXT_NODE&&(a.textContent=n==null?"":String(n));return}const r=M(e,t.path);if(!r)return;switch(t.type){case"attribute":if(r.nodeType===Node.ELEMENT_NODE&&t.target){const i=r;n==null||n===""?i.removeAttribute(t.target):i.setAttribute(t.target,String(n))}break;case"property":r.nodeType===Node.ELEMENT_NODE&&t.target&&(r[t.target]=n??"",r.setAttribute(t.target,n==null?"":String(n)));break;case"class":if(r.nodeType===Node.ELEMENT_NODE&&t.target){const i=r;i.className=n==null?"":String(n),i.setAttribute("class",n==null?"":String(n))}break;case"style":if(r.nodeType===Node.ELEMENT_NODE&&t.target){const i=r;i.style[t.target]=n==null?"":String(n),i.setAttribute("style",n==null?`${t.target}:`:`${t.target}:${n}`)}break;default:throw new Error(`Unknown update type: ${t.type}`)}}catch(r){(typeof globalThis<"u"?globalThis.isDevelopment:x)&&console.warn("[Template Compiler] Error applying update:",t,r)}}const k=new Map,_=new Map;function W(e){let t=0;for(let n=0;n<e.length;n++){const r=e.charCodeAt(n);t=(t<<5)-t+r,t=t&t}return`tpl_${Math.abs(t).toString(36)}`}function H(e,t,n,r,i){return r&&i?`${t}.${e}[${n}]:${r}:${i}`:r?`${t}.${e}[${n}]:${r}`:`${t}.${e}[${n}]`}function j(e,t,n){if(!(!e||!(e instanceof Element))&&e.contains(n)&&n.parentNode===e)try{e.replaceChild(t,n)}catch(r){console.error("[VDOM] safeReplaceChild: error replacing child",r,{parent:e,newChild:t,oldChild:n,parentHTML:e.outerHTML,newChildHTML:t.outerHTML,oldChildHTML:n.outerHTML})}}function y(e){if(e.type==="#whitespace")return null;if(e.type==="#text"){const n=document.createTextNode(e.props.nodeValue??"");return e.dom=n,n}const t=document.createElement(e.type);for(const[n,r]of Object.entries(e.props))n==="value"&&t instanceof HTMLInputElement?t.type==="radio"?t.setAttribute("value",r):(t.type,t.value=r,t.setAttribute("value",r)):t.setAttribute(n,r);e.dom=t;for(const n of e.children){const r=y(n);r&&t.appendChild(r)}return t}function F(e){const t=document.createElement("template");t.innerHTML=e.trim();const n=Array.from(t.content.childNodes);return n.length===1?T(n[0]):{type:"#fragment",key:void 0,props:{},children:n.map((i,s)=>T(i,"#fragment",s)),dom:void 0}}function T(e,t="",n=0){if(!e)return{type:"#unknown",key:void 0,props:{},children:[],dom:void 0};if(e.nodeType===Node.TEXT_NODE)return!e.nodeValue||/^\s*$/.test(e.nodeValue)?{type:"#whitespace",key:void 0,props:{},children:[],dom:void 0}:{type:"#text",key:H("#text",t,n),props:{nodeValue:e.nodeValue},children:[],dom:e};if(e.nodeType===Node.ELEMENT_NODE){const r=e,i={};Array.from(r.attributes).forEach(l=>{i[l.name]=l.value});const s=r.tagName.toLowerCase();let o;if((s==="input"||s==="select"||s==="textarea")&&r.hasAttribute("data-model")){const l=r.getAttribute("data-model"),d=r.getAttribute("type")??"";o=`${s}:${l}:${d}`,i["data-uid"]=o,r.setAttribute("data-uid",o);let u=r.getAttribute("value"),f=r.getAttribute("checked");u&&(i.value=u),f&&(i.checked=f)}else s==="input"||s==="textarea"||s==="select"||r.hasAttribute("contenteditable")?(o=`${s}:${t}:${n}`,i["data-uid"]=o,r.setAttribute("data-uid",o)):(o=H(s,t,n),s==="li"&&(i["data-uid"]=o,r.setAttribute("data-uid",o)));const a=Array.from(r.childNodes).map((l,d)=>T(l,o,d));return{type:s,key:o,props:i,children:a,dom:r}}return{type:"#unknown",key:void 0,props:{},children:[],dom:void 0}}function S(e,t,n){if(!t||!n)return;function r(c){return!!c&&c.type!=="#whitespace"&&!(c.type==="#text"&&(!c.props?.nodeValue||/^\s*$/.test(c.props.nodeValue)))}const i=Array.isArray(t.children)?t.children.filter(r):[],s=Array.isArray(n.children)?n.children.filter(r):[],o=n.type==="input"||n.type==="select"||n.type==="textarea";if(t.type!==n.type||t.key!==n.key){const c=y(n);if(c instanceof Node&&t.dom instanceof Node&&e.contains(t.dom)){if(j(e,c,t.dom),o&&n.props&&e.firstChild instanceof HTMLInputElement){const l=e.firstChild;l.type==="radio"||l.type,l.value=n.props.value,l.setAttribute("value",n.props.value),"checked"in n.props&&(l.checked=n.props.checked===!0||n.props.checked==="true")}}else if(c instanceof Node)if(c){if(e.appendChild(c),n.dom=c,o&&n.props&&e.firstChild instanceof HTMLInputElement){const l=e.firstChild;l.type==="radio"?l.setAttribute("value",n.props.value):(l.type,l.value=n.props.value,l.setAttribute("value",n.props.value)),"checked"in n.props&&(l.checked=n.props.checked===!0||n.props.checked==="true")}}else n.dom=void 0;else n.dom=void 0;return}if(o&&t.dom instanceof HTMLElement&&n.props){for(const[c,l]of Object.entries(n.props))if(c==="value"&&e.firstChild instanceof HTMLInputElement)e.firstChild.value=l;else if(c==="checked"&&e.firstChild instanceof HTMLInputElement)e.firstChild.checked=l===!0||l==="true";else if(c in t.dom)try{t.dom[c]=l}catch{}else t.dom.setAttribute(c,l);for(let c=n.children.length;c<i.length;c++)i[c]&&i[c].dom&&t.dom&&t.dom.contains(i[c].dom)&&t.dom.removeChild(i[c].dom);return}const a=t.dom;if(a&&a instanceof Element&&n.props){const c=a.tagName.toLowerCase()==="input"?a.getAttribute("type"):void 0,l=a.tagName.includes("-");for(const[d,u]of Object.entries(n.props))if(!(c==="radio"&&d==="value")){if(c==="checkbox"&&d==="value"){a.setAttribute("value",u);continue}a.setAttribute(d,u)}if(l)for(const[d,u]of Object.entries(n.props))a.setAttribute(d,u);for(const d of Array.from(a.attributes).map(u=>u.name))if(!(d in n.props)){if(c==="radio"&&d==="value"||c==="checkbox"&&d==="value")continue;a.removeAttribute(d)}}if(n.type==="#text"){if(a&&a.nodeType===Node.TEXT_NODE)a.nodeValue!==n.props.nodeValue&&(a.nodeValue=n.props.nodeValue),n.dom=a;else{const c=document.createTextNode(n.props.nodeValue??"");a&&e.contains(a)&&a.parentNode===e?j(e,c,a):e.appendChild(c),n.dom=c}return}if(a instanceof Element){const c=new Map;i.forEach(f=>f.key&&c.set(f.key,f));const l=new Set(s.map(f=>f.key));let d=[];for(let f=0;f<s.length;f++){const h=s[f],m=h.key?c.get(h.key):i[f];let p;const w=h.type==="input"||h.type==="select"||h.type==="textarea";if(m&&m.dom&&(!w||m.type===h.type&&m.key===h.key))S(a,m,h),p=m.dom;else{const v=y(h);if(p=v instanceof Node?v:void 0,p){if((p instanceof Element||p instanceof Node)&&p.contains(a))throw console.error("[VDOM] Attempted to insert a parent into its own child:",{parentTag:a.tagName,childTag:p.tagName,parentUid:a.getAttribute?.("data-uid"),childUid:p.getAttribute?.("data-uid"),parent:a,child:p}),new Error("VDOM patch error: Attempted to insert a parent into its own child");a.insertBefore(p,a.childNodes[f]||null)}}h.dom=p,p&&d.push(p)}for(i.forEach(f=>{!l.has(f.key)&&f.dom&&a.contains(f.dom)&&a.removeChild(f.dom)});a.childNodes.length>s.length;)a.removeChild(a.lastChild);for(let f=0;f<d.length;f++)if(a.childNodes[f]!==d[f]){if((d[f]instanceof Element||d[f]instanceof Node)&&d[f].contains(a))throw new Error("VDOM patch error: Attempted to insert a parent into its own child");a.insertBefore(d[f],a.childNodes[f]||null)}n.dom=a;const u=new Set(s.map(f=>f.key));Array.from(a.childNodes).forEach((f,h)=>{const m=f.getAttribute?.("data-uid");(m&&!u.has(m)||h>=s.length)&&a.removeChild(f)})}}function $(e,t){const n=[],r=t?Object.keys(t):[],i={...e};let s=null;function o(d){return n.push(d),()=>{const u=n.indexOf(d);u!==-1&&n.splice(u,1)}}function a(d){Object.assign(s,d),n.forEach(u=>u(s))}const c=new WeakMap;function l(d){if(c.has(d))return c.get(d);const u=new Proxy(d,{get(f,h,m){if(h==="subscribe")return o;if(h==="set")return a;if(t&&r.includes(h))return t[h](s);const p=Reflect.get(f,h,m);return typeof p=="object"&&p!==null?l(p):p},set(f,h,m,p){if(t&&r.includes(h))return!1;const w=f[h],v=Reflect.set(f,h,m,p);return w!==m&&n.forEach(U=>U(s)),v},deleteProperty(f,h){if(t&&r.includes(h))return!1;const m=Reflect.deleteProperty(f,h);return n.forEach(p=>p(s)),m}});return c.set(d,u),u}return s=l(i),s}const b=[];function ut(e){b.push(e)}function E(e,t=new WeakSet){if(e===null||typeof e!="object"||t.has(e))return e;if(t.add(e),Array.isArray(e))return e.map(i=>E(i,t));Object.getPrototypeOf(e)!==Object.prototype&&Object.getPrototypeOf(e)!==null&&Object.setPrototypeOf(e,null);const n=["__proto__","constructor","prototype"],r=Object.create(null);for(const i of Object.keys(e))n.includes(i)||(r[i]=E(e[i],t));return r}function C(e){return!!e&&typeof e.then=="function"}let K;typeof HTMLElement<"u"&&(K=class extends HTMLElement{syncStateToAttributes(){if(!this.stateObj||!this.config?.reflect||!Array.isArray(this.config.reflect))return;const e=["__proto__","constructor","prototype"];this.config.reflect.forEach(t=>{if(e.includes(t)){this.removeAttribute(t);return}const n=this.stateObj[t];["string","number","boolean"].includes(typeof n)?n==null?this.removeAttribute(t):this.setAttribute(t,String(n)):this.removeAttribute(t)})}setTemplate(e){const t=this.config;typeof e=="function"?t.template=e:t.template=()=>e,this.render()}_hasError=!1;_mountedCalled=!1;_unmountedCalled=!1;_autoWiredHandlers={};removeEventListener(e,t,n){super.removeEventListener(e,t,n),this._autoWiredHandlers[e]&&(this._autoWiredHandlers[e]=this._autoWiredHandlers[e].filter(r=>r===t?(super.removeEventListener(e,r,n),!1):!0),this._autoWiredHandlers[e].length===0&&delete this._autoWiredHandlers[e])}static get observedAttributes(){const e=this.stateObj||{};return Object.keys(e).filter(t=>["string","number","boolean"].includes(typeof e[t]))}attributeChangedCallback(e,t,n){if(!(e==="__proto__"||e==="constructor"||e==="prototype")&&this.stateObj&&e in this.stateObj){const r=typeof this.config?.state?.[e];let i=n;if(n===null)i=void 0;else if(r==="number")if(i===void 0||i==="")i=this.config?.state?.[e];else{const s=Number(i);i=isNaN(s)?this.config?.state?.[e]:s}else r==="boolean"&&(i=i==="true");i=E(i),this.stateObj[e]!==i&&(this.config?.debug&&console.log("[runtime] state update:",{name:e,value:i}),this.stateObj[e]=i,this.render())}}forceSyncControlledInputs(){this.shadowRoot&&(this.shadowRoot.querySelectorAll("input[data-model]").forEach(e=>{const t=e.getAttribute("data-model");if(!t||!this.stateObj||typeof this.stateObj[t]>"u")return;const n=e,r=String(this.stateObj[t]),i=document.activeElement===n;n._hasDirtyListener||(n.addEventListener("input",()=>{n._isDirty=!0}),n.addEventListener("blur",()=>{n._isDirty=!1}),n._hasDirtyListener=!0);const s=!!n._isDirty;i||s||n.type!=="radio"&&n.type!=="checkbox"&&n.value!==r&&(n.value=r)}),this.rebindEventListeners())}syncControlledInputsAndEvents(){this.shadowRoot&&(this.shadowRoot.querySelectorAll('input[type="radio"][data-model]').forEach(e=>{const t=e.getAttribute("data-model");if(!t||!this.stateObj||typeof this.stateObj[t]>"u")return;const n=e,r=String(this.stateObj[t]);n.checked=n.value===r}),this.shadowRoot.querySelectorAll("input[data-model]").forEach(e=>{const t=e.getAttribute("data-model");if(!t||!this.stateObj||typeof this.stateObj[t]>"u")return;const n=e,r=String(this.stateObj[t]);if(n.type==="checkbox"){const i=this.stateObj[t];if(Array.isArray(i))n.checked=i.includes(n.value);else{const s=n.getAttribute("data-true-value"),o=n.getAttribute("data-false-value");s!==null||o!==null?String(i)===s?n.checked=!0:String(i)===o?n.checked=!1:i===!0?n.checked=!0:n.checked=!1:n.checked=i===!0||i==="true"||i===1}}else n.type==="radio"||(n.value=r)}),this.shadowRoot.querySelectorAll("textarea[data-model]").forEach(e=>{const t=e.getAttribute("data-model");!t||!this.stateObj||typeof this.stateObj[t]>"u"||(e.value=String(this.stateObj[t]))}),this.shadowRoot.querySelectorAll("select[data-model]").forEach(e=>{const t=e.getAttribute("data-model");!t||!this.stateObj||typeof this.stateObj[t]>"u"||(e.value=String(this.stateObj[t]))}))}attachListItemModelListeners(){this.shadowRoot&&this.shadowRoot.querySelectorAll("input[data-bind]").forEach(e=>{const t=e.getAttribute("data-bind");if(!t)return;e._listItemModelListener&&(e.removeEventListener("input",e._listItemModelListener),e.removeEventListener("change",e._listItemModelListener),delete e._listItemModelListener);const n=t.match(/^([a-zA-Z0-9_]+)\[(\d+)\]\.([a-zA-Z0-9_]+)$/);if(n){const[,i,s,o]=n,a=parseInt(s,10),c=this.stateObj[i];e instanceof HTMLInputElement&&e.type==="checkbox"&&(e.checked=!!(Array.isArray(c)&&c[a]&&c[a][o]));const l=d=>{!Array.isArray(c)||!c[a]||(e instanceof HTMLInputElement&&e.type==="checkbox"?c[a][o]=e.checked:c[a][o]=e.value)};e.addEventListener("input",l),e.addEventListener("change",l),e._listItemModelListener=l;return}const r=t.match(/^([a-zA-Z0-9_]+)\.([a-zA-Z0-9_]+)((?:\|[a-zA-Z0-9_]+)*)$/);if(r){const[,i,s,o]=r,a=this.stateObj[i],c=o?o.split("|").map(d=>d.trim()).filter(Boolean):[];e instanceof HTMLInputElement&&e.type==="checkbox"?e.checked=!!(a&&a[s]):e instanceof HTMLInputElement&&(e.value=a?String(a[s]??""):"");const l=d=>{if(!a)return;let u;e instanceof HTMLInputElement&&e.type==="checkbox"?u=e.checked:(u=e.value,c.includes("number")&&(u=Number(u)),c.includes("trim")&&typeof u=="string"&&(u=u.trim())),a[s]=u};e.addEventListener("input",l),e.addEventListener("change",l),e._listItemModelListener=l}})}attachControlledInputListeners(){const e=this.shadowRoot;e&&(e.querySelectorAll("[data-model]").forEach(t=>{const n=t.getAttribute("data-model");n&&(t._dataModelBound||(P(t,this.stateObj,n),t._dataModelBound=!0))}),e.querySelectorAll("[data-model]").forEach(t=>{const[n]=t.getAttribute("data-model")?.split("|").map(r=>r.trim())??[];if(!(!n||!(n in this.stateObj)))if(t instanceof HTMLInputElement)if(t.type==="checkbox"){const r=this.stateObj[n],i=t.getAttribute("data-true-value"),s=t.getAttribute("data-false-value");Array.isArray(r)?t.checked=r.includes(t.value):i!==null||s!==null?String(r)===i?t.checked=!0:String(r)===s?t.checked=!1:r===!0?t.checked=!0:t.checked=!1:t.checked=r===!0||r==="true"||r===1}else t.type==="radio"?t.checked=t.value===String(this.stateObj[n]):t.value=String(this.stateObj[n]??"");else(t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement)&&(t.value=String(this.stateObj[n]??""))}))}config;stateObj;api;_globalUnsubscribes=[];unsubscribes=[];lastCompiledTemplate=null;lastState=null;rafId=null;constructor(){super()}initializeConfig(){if(this.config)return;const e=this.tagName.toLowerCase(),n=(window.__componentRegistry||{})[e];if(!n||typeof n!="object")throw new Error("Invalid component config: must be an object");if(!n.state||typeof n.state!="object")throw new Error("Invalid component config: state must be an object");this.config=n;const r=n.computed?$(n.state,n.computed):$(n.state);if(this.stateObj=r,typeof this.stateObj.subscribe=="function"&&this.unsubscribes.push(this.stateObj.subscribe(()=>{this.scheduleRender()})),this.api={state:this.stateObj,emit:(s,o)=>this.dispatchEvent(new CustomEvent(s,{detail:o,bubbles:!0})),onGlobal:(s,o)=>{const a=A.on(s,o);return this._globalUnsubscribes.push(a),a},offGlobal:(s,o)=>A.off(s,o),emitGlobal:(s,o)=>A.emit(s,o)},Object.keys(this.config).forEach(s=>{if(s.startsWith("on")&&s.length>2&&typeof this.config[s]=="function"){const o=s.charAt(2).toLowerCase()+s.slice(3),a=c=>{const l=c.detail??c;this.config[s](l,this.api.state,this.api)};this.addEventListener(o,a),this._autoWiredHandlers[o]||(this._autoWiredHandlers[o]=[]),this._autoWiredHandlers[o].push(a)}}),this.attachShadow({mode:"open"}),n.style){const s=document.createElement("style");s.textContent=typeof n.style=="function"?n.style(this.stateObj):n.style,this.shadowRoot.appendChild(s)}if(typeof this.config.hydrate=="function"){const s=this.shadowRoot?.querySelectorAll("[data-hydrate]");try{s&&s.length>0?s.forEach(o=>{try{this.config.hydrate(o,this.stateObj,this.api)}catch(a){typeof this.config.onError=="function"&&this.config.onError(a instanceof Error?a:new Error(String(a)),this.api.state,this.api),this._handleRenderError(a)}}):this.config.hydrate(this.shadowRoot,this.stateObj,this.api)}catch(o){typeof this.config.onError=="function"&&this.config.onError(o instanceof Error?o:new Error(String(o)),this.api.state,this.api),this._handleRenderError(o)}}if(this.hasAttribute("data-hydrated")?this.processRefs():this.render(),!this._mountedCalled&&typeof this.config.onMounted=="function")try{const s=this.config.onMounted(this.api.state,this.api);C(s)?s.catch(o=>{typeof this.config.onError=="function"&&this.config.onError(o,this.api.state,this.api),this._handleRenderError(o)}).finally(()=>{this._mountedCalled=!0}):this._mountedCalled=!0}catch(s){typeof this.config.onError=="function"&&this.config.onError(s,this.api.state,this.api),this._handleRenderError(s),this._mountedCalled=!0}}connectedCallback(){if(this.initializeConfig(),this.stateObj){for(const e of this.getAttributeNames())if(e in this.stateObj){const t=typeof this.config?.state?.[e];let n=this.getAttribute(e);t==="number"?n=Number(n):t==="boolean"&&(n=n==="true"),this.stateObj[e]=n===null?void 0:n}}if(!this._mountedCalled&&typeof this.config.onMounted=="function")try{const e=this.config.onMounted(this.api.state,this.api);C(e)?e.catch(t=>{typeof this.config.onError=="function"&&this.config.onError(t,this.api.state,this.api),this._handleRenderError(t)}).finally(()=>{this._mountedCalled=!0}):this._mountedCalled=!0}catch(e){typeof this.config.onError=="function"&&this.config.onError(e,this.api.state,this.api),this._handleRenderError(e),this._mountedCalled=!0}typeof this.render=="function"&&this.render()}disconnectedCallback(){if(Object.entries(this._autoWiredHandlers).forEach(([e,t])=>{t.forEach(n=>{super.removeEventListener(e,n)})}),this._autoWiredHandlers={},this.unsubscribes.forEach(e=>e()),this.unsubscribes=[],this._globalUnsubscribes.forEach(e=>e()),this._globalUnsubscribes=[],!this._unmountedCalled&&typeof this.config.onUnmounted=="function")try{const e=this.config.onUnmounted(this.api.state,this.api);C(e)?e.catch(t=>{typeof this.config.onError=="function"&&this.config.onError(t,this.api.state,this.api),this._handleRenderError(t)}).finally(()=>{this._unmountedCalled=!0}):this._unmountedCalled=!0}catch(e){typeof this.config.onError=="function"&&this.config.onError(e,this.api.state,this.api),this._handleRenderError(e),this._unmountedCalled=!0}this._mountedCalled=!1,this._unmountedCalled=!1}render(){this._hasError=!1,this.syncControlledInputsAndEvents(),setTimeout(()=>this.attachControlledInputListeners(),0);try{b.forEach(t=>{try{t.onRender?.(this.stateObj,this.api)}catch(n){this._handleRenderError(n)}}),this.config.computed&&Object.values(this.config.computed).forEach(t=>{try{t(this.stateObj)}catch(n){this._handleRenderError(n)}});const e=this.config.template(this.stateObj,this.api);e instanceof Promise?e.then(t=>{this._hasError||(this._renderTemplateResult(t),this.syncStateToAttributes(),setTimeout(()=>this.attachListItemModelListeners(),0))}).catch(t=>{this._handleRenderError(t)}):this._hasError||(this._renderTemplateResult(e),this.syncStateToAttributes(),setTimeout(()=>this.attachListItemModelListeners(),0))}catch(e){this._handleRenderError(e),this.renderError(e instanceof Error?e:new Error(String(e)))}}_prevVNode=null;rebindEventListeners(){if(!this.shadowRoot)return;["data-on-input","data-on-change","data-on-blur","data-on-click"].forEach(t=>{this.shadowRoot.querySelectorAll(`[${t}]`).forEach(n=>{const r=t.replace("data-on-",""),i=n.getAttribute(t);if(!i||typeof this.config[i]!="function")return;n._boundHandlers&&n._boundHandlers[r]&&n.removeEventListener(r,n._boundHandlers[r]);const s=this.config[i],o=a=>s.call(this,a);n.addEventListener(r,o),n._boundHandlers||(n._boundHandlers={}),n._boundHandlers[r]=o})}),Array.from(this.shadowRoot.children).forEach(t=>{t instanceof HTMLElement&&typeof t.rebindEventListeners=="function"&&t.rebindEventListeners()})}_renderTemplateResult(e){if(!this._hasError)try{let t=function(n){const r=new WeakSet;function i(s){if(s===null||typeof s!="object"||r.has(s))return s;if(r.add(s),Array.isArray(s))return s.map(i);const o={};for(const a in s)Object.prototype.hasOwnProperty.call(s,a)&&(o[a]=i(s[a]));return o}return i(n)};if(typeof e=="string"){let n=function(c){return c.replace(/<([a-zA-Z0-9]+)([^>]*)>/g,(l,d,u)=>{const f=u.replace(/\s+on[a-zA-Z]+\s*=\s*(['"][^'"]*['"]|[^\s>]*)/gi,"");return`<${d}${f}>`})},r=function(c){c.children.forEach(r)};const i=n(e),s=F(i);r(s);const o=this.shadowRoot;if(!o)return;let a=o.querySelector("style");if(a||(a=document.createElement("style"),o.appendChild(a)),this.config.style?a.textContent=typeof this.config.style=="function"?this.config.style(this.stateObj):this.config.style:a.textContent="",s.type==="#fragment"){const c=Array.from(o.childNodes).find(l=>l.nodeType===1&&l!==a);if(c){Array.from(c.childNodes).forEach(u=>{u.nodeType===1&&u.nodeName==="STYLE"||c.removeChild(u)});const l={type:"#fragment",dom:c,children:s.children,props:{},key:void 0},d=this._prevVNode&&this._prevVNode.type==="#fragment"?{...this._prevVNode,dom:c}:l;S(c,d,l)}else s.children.forEach(l=>{const d=y(l);d&&o.appendChild(d),l.dom=d??void 0})}else{let c=Array.from(this.shadowRoot.childNodes).find(l=>l!==a&&l.nodeType===1);if(c)if(this._prevVNode&&(this._prevVNode.type!==s.type||this._prevVNode.key!==s.key)){const l=y(s);l&&(this.shadowRoot.contains(c)&&this.shadowRoot.replaceChild(l,c),c=l)}else S(c,this._prevVNode,s);else c=y(s),c&&this.shadowRoot.appendChild(c);s.dom=c}this._prevVNode=s,this.forceSyncControlledInputs(),this.lastCompiledTemplate=null}else{const n=!this.shadowRoot.firstElementChild,r=this.lastCompiledTemplate?.id===e.id;if(n){const i=R(e,this.stateObj,this.api);this.shadowRoot.appendChild(i)}else if(r&&this.shadowRoot.firstElementChild){const i=this.lastState;z(e,this.shadowRoot.firstElementChild,this.stateObj,this.api,i||void 0)}else{const i=R(e,this.stateObj,this.api);let s=this.shadowRoot.querySelector("style");s||(s=document.createElement("style"),this.shadowRoot.insertBefore(s,this.shadowRoot.firstChild)),this.config.style?s.textContent=typeof this.config.style=="function"?this.config.style(this.stateObj):this.config.style:s.textContent="";let o=this.shadowRoot.querySelector("[data-root]");for(o||(o=document.createElement("div"),o.setAttribute("data-root",""),this.shadowRoot.appendChild(o));o.firstChild;)o.removeChild(o.firstChild);o.appendChild(i)}this.lastCompiledTemplate=e}this.lastState=t(this.stateObj),this.updateStyle(),this.processRefs(),this.bindEvents(),this.syncControlledInputsAndEvents()}catch(t){this._handleRenderError(t)}}_handleRenderError(e){if(this._hasError=!0,this.config.debug&&console.error(`[runtime] Render error in <${this.tagName.toLowerCase()}>:`,e),b.forEach(t=>t.onError?.(e instanceof Error?e:new Error(String(e)),this.stateObj,this.api)),"onError"in this.config&&typeof this.config.onError=="function")try{this.config.onError(e instanceof Error?e:new Error(String(e)),this.api.state,this.api)}catch(t){this.config.debug&&console.error("[runtime] Error in onError handler:",t)}this.renderError(e instanceof Error?e:new Error(String(e)))}scheduleRender(){this.rafId!==void 0&&this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(()=>{this.render(),this.rafId=null})}updateStyle(){const e=this.shadowRoot.querySelector("style");if(!e||!this.config.style)return;const t=typeof this.config.style=="function"?this.config.style(this.api.state):this.config.style;e.textContent=t}processRefs(){if(!this.config.refs)return;const e=new WeakMap;Object.entries(this.config.refs).forEach(([t,n])=>{const r=this.shadowRoot.querySelector(`[data-ref="${t}"]`);if(r){e.has(r)||e.set(r,new Set);const i=e.get(r),s=r.addEventListener;r.addEventListener=function(o,a,c){const l=`${o}`;i.has(l)||(i.add(l),s.call(r,o,a,c))},r.setAttribute("data-refs-processed","true");try{n(r,this.api.state,this.api)}catch(o){this._handleRenderError(o)}}})}bindEvents(){if(!this.shadowRoot)return;const e=document.createTreeWalker(this.shadowRoot,NodeFilter.SHOW_ELEMENT);let t=e.nextNode();for(;t;){const n=t;Array.from(n.attributes).forEach(r=>{if(r.name.startsWith("data-on-")){const i=r.name.slice(8),s=r.value,o=this.config[s];if(typeof o=="function"){n._boundHandlers&&n._boundHandlers[i]&&n.removeEventListener(i,n._boundHandlers[i]);const a=c=>{o.call(this.config,c,this.api.state,this.api),this.syncControlledInputsAndEvents()};n.addEventListener(i,a),n._boundHandlers||(n._boundHandlers={}),n._boundHandlers[i]=a}else this.config.debug&&console.warn(`[runtime] Handler '${s}' not found on config for event '${i}'`,n)}}),t=e.nextNode()}}renderError(e){const t=this.config.style?typeof this.config.style=="function"?this.config.style(this.api.state):this.config.style:"";this.shadowRoot.innerHTML=`
|
|
39
|
+
`);function D(e){return String(e).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'")}function L(e,t){if(typeof e!="string"||!t)return String(e);for(const n in t){if(typeof t[n]=="string"&&e===t[n])return D(e);if(Array.isArray(t[n])){for(const r of t[n])if(r&&typeof r=="object"){for(const i in r)if(typeof r[i]=="string"&&e===r[i])return D(e)}}}return String(e)}function Q(e,...t){function n(r,i,s){if(Array.isArray(r)){const o=r.map(a=>n(a,i,s));return o.some(a=>a instanceof Promise)?Promise.all(o).then(a=>a.join("")):o.join("")}if(typeof r=="function"){const o=n(r(i,s),i,s);return o instanceof Promise,o}return r==null?"":r instanceof Promise?r:String(r)}return(r,i)=>{let s="",o=!1;const a=[];for(let c=0;c<e.length;c++)if(s+=e[c],c<t.length){let l=t[c];const d=e[c],u=/data-on-[a-z]+="?$/.test(d);l=n(l,r,i),l instanceof Promise?(o=!0,a.push(l)):/=\s*"?$/.test(d)&&typeof l=="string"&&!u?(l=l.replace(/"/g,""").replace(/'/g,"'"),s+=l):!u&&!/=\s*"?$/.test(d)?s+=L(l,r):s+=l}return o?Promise.all(a).then(c=>{let l="",d=0;for(let u=0;u<e.length;u++)if(l+=e[u],u<t.length){let f=t[u];const h=e[u],m=/data-on-[a-z]+="?$/.test(h);f=n(f,r,i),f instanceof Promise?l+=c[d++]:/=\s*"?$/.test(h)&&typeof f=="string"&&!m?(f=f.replace(/"/g,""").replace(/'/g,"'"),l+=f):!m&&!/=\s*"?$/.test(h)?l+=L(f,r):l+=f}return l}):s}}function tt(e,...t){const n="compiled-"+Math.random().toString(36).slice(2);function r(s,o,a){return Array.isArray(s)?s.map(c=>r(c,o,a)).join(""):typeof s=="function"?r(s(o,a),o,a):s==null?"":String(s)}const i=(s,o)=>{let a="";for(let c=0;c<e.length;c++)if(a+=e[c],c<t.length){let l=t[c];const d=e[c],u=/data-on-[a-z]+="?$/.test(d);l=r(l,s,o),/=\s*"?$/.test(d)&&typeof l=="string"&&!u?(l=l.replace(/"/g,""").replace(/'/g,"'"),a+=l):!u&&!/=\s*"?$/.test(d)?a+=L(l,s):a+=l??""}return a};return i.id=n,i}function et(e,...t){let n="";for(let r=0;r<e.length;r++)n+=e[r],r<t.length&&(n+=t[r]??"");return n}function nt(e){return Object.keys(e).filter(t=>e[t]).join(" ")}function rt(e){return Object.entries(e).map(([t,n])=>`${t}: ${n}`).join("; ")}function P(e,t,n){const[r,...i]=n.split("|").map(a=>a.trim());if(!r||r==="__proto__"||r==="constructor"||r==="prototype")return;function s(a,c,l){const d=c.split(".");let u=a;for(let f=0;f<d.length-1;f++)d[f]in u||(u[d[f]]={}),u=u[d[f]];u[d[d.length-1]]=l}const o=a=>{let c;if(e instanceof HTMLInputElement&&e.type==="checkbox"){c=e.value;const l=e.getAttribute("data-true-value"),d=e.getAttribute("data-false-value");let u=Array.isArray(t[r])?t[r]:void 0;if(u){if(e.checked)u.includes(c)||u.push(c);else{const f=u.indexOf(c);f!==-1&&u.splice(f,1)}s(t,r,[...u])}else l!==null||d!==null?e.checked?s(t,r,l):s(t,r,d!==null?d:!1):s(t,r,e.checked)}else e instanceof HTMLInputElement&&e.type==="radio"?(c=e.value,s(t,r,c),((e.form||e.closest("form")||e.getRootNode())instanceof Element?(e.form||e.closest("form")||e.getRootNode()).querySelectorAll(`input[type="radio"][name="${e.name}"][data-model="${n}"]`):[]).forEach(d=>{d.checked=d.value===String(c)})):(c=e.value,e instanceof HTMLInputElement&&e.type==="number"&&(c=Number(c)),i.includes("trim")&&typeof c=="string"&&(c=c.trim()),i.includes("number")&&(c=Number(c)),s(t,r,c));if("_vnode"in e&&typeof e._vnode=="object"&&e._vnode?.props&&(e._vnode.props.value=c),a.type==="input"&&(e._isDirty=!0),a.type==="keydown"&&a.key==="Enter"&&(e._isDirty=!1,e instanceof HTMLElement&&e.isConnected)){let l=e.parentElement;for(;l&&!(l instanceof HTMLElement&&l.shadowRoot);)l=l.parentElement;l&&typeof l=="object"&&l!==null&&"render"in l&&typeof l.render=="function"&&l.render()}a.type==="blur"&&(e._isDirty=!1)};e.addEventListener("input",o),e.addEventListener("change",o),e.addEventListener("keydown",o),e.addEventListener("blur",o)}const x=(()=>{try{if(typeof process<"u"&&process.env)return process.env.NODE_ENV==="development"}catch{}return typeof window<"u"?window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1":!1})();function st(e,t={}){const{development:n=x,cache:r=!0,optimize:i=!0}=t,s=W(e);if(r&&k.has(s)){if(n){const o=_.get(s)||{compilationTime:0,renderTime:0,updateTime:0,cacheHits:0,cacheMisses:0};o.cacheHits++,_.set(s,o)}return k.get(s)}if(n){const o=_.get(s)||{compilationTime:0,renderTime:0,updateTime:0,cacheHits:0,cacheMisses:0};o.cacheMisses++,_.set(s,o)}try{const o=ot(e,{development:n,optimize:i});return r&&k.set(s,o),o}catch(o){return n&&(console.error("[Template Compiler] Error compiling template:",o),console.error("[Template Compiler] Template:",e)),{statics:[e],dynamics:[],fragment:null,id:s,hasDynamics:!1,render:()=>e}}}function it(e,t){if(typeof document>"u")return[0];try{let n=function(a,c=[]){if(a.nodeType===Node.TEXT_NODE){if(a.textContent?.includes(t))return c}else if(a.nodeType===Node.ELEMENT_NODE){let l=0;for(let d=0;d<a.childNodes.length;d++){const u=a.childNodes[d],f=n(u,[...c,l]);if(f)return f;l++}}return null};const s=new DOMParser().parseFromString(`<div>${e}</div>`,"text/html").body.firstElementChild;return n(s)||[0]}catch(n){return x&&console.warn("[Template Compiler] Error finding DOM path for placeholder:",t,n),[0]}}function ot(e,t){return new at(e,t).compile()}class at{template;options;dynamics=[];statics=[];constructor(t,n){this.template=t,this.options=n}compile(){this.parseTemplate();const t=this.createStaticFragment(),n=W(this.template),r=(i,s)=>{let o="";for(let a=0;a<this.statics.length;a++)if(o+=this.statics[a],a<this.dynamics.length){let c=this.dynamics[a].getValue(i,s);if(c instanceof Promise)return Promise.all(this.dynamics.map(l=>{const d=l.getValue(i,s);return d instanceof Promise?d:Promise.resolve(d)})).then(l=>{let d="";for(let u=0;u<this.statics.length;u++)d+=this.statics[u],u<l.length&&(d+=l[u]);return d});o+=c}return o};return{statics:this.statics,dynamics:this.dynamics,fragment:t,id:n,hasDynamics:this.dynamics.length>0,render:r}}parseTemplate(){const t=/\{\{([^}]+)\}\}/g;let n=0,r;for(;(r=t.exec(this.template))!==null;){const s=this.template.slice(n,r.index);this.statics.push(s);let o=s.match(/([a-zA-Z0-9_-]+)\s*=\s*"?$/),a=o?o[1]:void 0,c;if(s.endsWith('style="color:'))a="style",c="color";else if(a==="style"){const d=s.match(/style\s*=\s*"?([^:;]+):\s*$/);d&&(c=d[1].trim())}const l=r[1].trim();this.analyzeDynamicExpression(l,this.dynamics.length,a,c),n=r.index+r[0].length}const i=this.template.slice(n);this.statics.push(i)}analyzeDynamicExpression(t,n,r,i){let s="text",o;r?r==="class"?(s="class",o="class"):r==="style"?(s="style",o=i||"style"):r==="value"?(s="property",o="value"):(s="attribute",o=r):t.includes("class.")?(s="class",o=t.split(".")[1]):t.includes("style.")?(s="style",o=t.split(".")[1]):t.includes("@")?(s="event",o=t.split("@")[1]):t==="class"?(s="class",o="class"):t==="style"?(s="style",o="style"):t==="value"?(s="property",o="value"):t==="title"&&(s="attribute",o="title");const a=`__DYNAMIC_${n}__`,c=this.statics.join(a);let l=it(c,a);this.statics.length===2&&s!=="text"?l=[0]:this.statics.length===2&&l.length===0&&(l=[0]),this.dynamics.push({path:l,type:s,target:o,getValue:this.createValueGetter(t)})}createValueGetter(t){return(n,r)=>{try{let i;if(t&&typeof t=="function")i=t(n);else if(typeof t=="string"&&t.startsWith("state.")){const s=t.slice(6);i=n[s]}else typeof t=="string"&&/^[a-zA-Z0-9_$]+$/.test(t)?i=n[t]:(typeof t=="string"&&t.includes("("),i="");return i}catch(i){return this.options.development&&console.warn(`[Template Compiler] Error evaluating expression: ${t}`,i),""}}}createStaticFragment(){if(typeof document>"u")return null;try{const t=this.statics.join("");if(!t.trim())return null;const r=new DOMParser().parseFromString(t,"text/html"),i=document.createDocumentFragment();for(;r.body.firstChild;)i.appendChild(r.body.firstChild);return i}catch(t){return this.options.development&&console.warn("[Template Compiler] Could not create static fragment:",t),null}}}function M(e,t){try{if(t.length===1&&t[0]===0&&e instanceof Element)return e;let n=e;for(let r=0;r<t.length;r++){const i=t[r];if(!n.childNodes||n.childNodes.length<=i)return null;n=n.childNodes[i]}return n}catch{return null}}function R(e,t,n){let r;return e.fragment&&!e.hasDynamics?r=e.fragment.cloneNode(!0):r=ct(e,t,n),r}function z(e,t,n,r,i){if(e.hasDynamics)for(const s of e.dynamics)try{const o=s.getValue(n,r);if(i!==void 0&&s.getValue(i,r)===o)continue;q(t,s,o)}catch(o){console.warn("[Template Compiler] Error applying update:",o)}}function ct(e,t,n){let r="";for(let a=0;a<e.statics.length;a++)if(r+=e.statics[a],a<e.dynamics.length){const c=e.dynamics[a];if(c.type==="text"||c.type==="attribute"){const l=c.getValue(t,n);r+=String(l??"")}else(c.type==="property"||c.type==="class"||c.type==="style")&&(r+="")}if(typeof document>"u")return new DocumentFragment;const s=new DOMParser().parseFromString(r,"text/html"),o=document.createDocumentFragment();for(;s.body.firstChild;)o.appendChild(s.body.firstChild);for(const a of e.dynamics){const c=a.getValue(t,n),l=M(o,a.path);q(l,a,c)}return o}function q(e,t,n){try{if(t.type==="text"){const i=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);let s=!1,o;for(;o=i.nextNode();){const c=o.textContent||"";if(c.includes("Count: ")){const l=c.replace(/Count: \d+/,`Count: ${n}`);o.textContent=l,s=!0}}if(s)return;const a=M(e,t.path);a&&a.nodeType===Node.TEXT_NODE&&(a.textContent=n==null?"":String(n));return}const r=M(e,t.path);if(!r)return;switch(t.type){case"attribute":if(r.nodeType===Node.ELEMENT_NODE&&t.target){const i=r;n==null||n===""?i.removeAttribute(t.target):i.setAttribute(t.target,String(n))}break;case"property":r.nodeType===Node.ELEMENT_NODE&&t.target&&(r[t.target]=n??"",r.setAttribute(t.target,n==null?"":String(n)));break;case"class":if(r.nodeType===Node.ELEMENT_NODE&&t.target){const i=r;i.className=n==null?"":String(n),i.setAttribute("class",n==null?"":String(n))}break;case"style":if(r.nodeType===Node.ELEMENT_NODE&&t.target){const i=r;i.style[t.target]=n==null?"":String(n),i.setAttribute("style",n==null?`${t.target}:`:`${t.target}:${n}`)}break;default:throw new Error(`Unknown update type: ${t.type}`)}}catch(r){(typeof globalThis<"u"?globalThis.isDevelopment:x)&&console.warn("[Template Compiler] Error applying update:",t,r)}}const k=new Map,_=new Map;function W(e){let t=0;for(let n=0;n<e.length;n++){const r=e.charCodeAt(n);t=(t<<5)-t+r,t=t&t}return`tpl_${Math.abs(t).toString(36)}`}function H(e,t,n,r,i){return r&&i?`${t}.${e}[${n}]:${r}:${i}`:r?`${t}.${e}[${n}]:${r}`:`${t}.${e}[${n}]`}function j(e,t,n){if(!(!e||!(e instanceof Element))&&e.contains(n)&&n.parentNode===e)try{e.replaceChild(t,n)}catch(r){console.error("[VDOM] safeReplaceChild: error replacing child",r,{parent:e,newChild:t,oldChild:n,parentHTML:e.outerHTML,newChildHTML:t.outerHTML,oldChildHTML:n.outerHTML})}}function y(e){if(e.type==="#whitespace")return null;if(e.type==="#text"){const n=document.createTextNode(e.props.nodeValue??"");return e.dom=n,n}const t=document.createElement(e.type);for(const[n,r]of Object.entries(e.props))n==="value"&&t instanceof HTMLInputElement?t.type==="radio"?t.setAttribute("value",r):(t.type,t.value=r,t.setAttribute("value",r)):t.setAttribute(n,r);e.dom=t;for(const n of e.children){const r=y(n);r&&t.appendChild(r)}return t}function F(e){const t=document.createElement("template");t.innerHTML=e.trim();const n=Array.from(t.content.childNodes);return n.length===1?T(n[0]):{type:"#fragment",key:void 0,props:{},children:n.map((i,s)=>T(i,"#fragment",s)),dom:void 0}}function T(e,t="",n=0){if(!e)return{type:"#unknown",key:void 0,props:{},children:[],dom:void 0};if(e.nodeType===Node.TEXT_NODE)return!e.nodeValue||/^\s*$/.test(e.nodeValue)?{type:"#whitespace",key:void 0,props:{},children:[],dom:void 0}:{type:"#text",key:H("#text",t,n),props:{nodeValue:e.nodeValue},children:[],dom:e};if(e.nodeType===Node.ELEMENT_NODE){const r=e,i={};Array.from(r.attributes).forEach(l=>{i[l.name]=l.value});const s=r.tagName.toLowerCase();let o;if((s==="input"||s==="select"||s==="textarea")&&r.hasAttribute("data-model")){const l=r.getAttribute("data-model"),d=r.getAttribute("type")??"";o=`${s}:${l}:${d}`,i["data-uid"]=o,r.setAttribute("data-uid",o);let u=r.getAttribute("value"),f=r.getAttribute("checked");u&&(i.value=u),f&&(i.checked=f)}else s==="input"||s==="textarea"||s==="select"||r.hasAttribute("contenteditable")?(o=`${s}:${t}:${n}`,i["data-uid"]=o,r.setAttribute("data-uid",o)):(o=H(s,t,n),s==="li"&&(i["data-uid"]=o,r.setAttribute("data-uid",o)));const a=Array.from(r.childNodes).map((l,d)=>T(l,o,d));return{type:s,key:o,props:i,children:a,dom:r}}return{type:"#unknown",key:void 0,props:{},children:[],dom:void 0}}function S(e,t,n){if(!t||!n)return;function r(c){return!!c&&c.type!=="#whitespace"&&!(c.type==="#text"&&(!c.props?.nodeValue||/^\s*$/.test(c.props.nodeValue)))}const i=Array.isArray(t.children)?t.children.filter(r):[],s=Array.isArray(n.children)?n.children.filter(r):[],o=n.type==="input"||n.type==="select"||n.type==="textarea";if(t.type!==n.type||t.key!==n.key){const c=y(n);if(c instanceof Node&&t.dom instanceof Node&&e.contains(t.dom)){if(j(e,c,t.dom),o&&n.props&&e.firstChild instanceof HTMLInputElement){const l=e.firstChild;l.type==="radio"||l.type,l.value=n.props.value,l.setAttribute("value",n.props.value),"checked"in n.props&&(l.checked=n.props.checked===!0||n.props.checked==="true")}}else if(c instanceof Node)if(c){if(e.appendChild(c),n.dom=c,o&&n.props&&e.firstChild instanceof HTMLInputElement){const l=e.firstChild;l.type==="radio"?l.setAttribute("value",n.props.value):(l.type,l.value=n.props.value,l.setAttribute("value",n.props.value)),"checked"in n.props&&(l.checked=n.props.checked===!0||n.props.checked==="true")}}else n.dom=void 0;else n.dom=void 0;return}if(o&&t.dom instanceof HTMLElement&&n.props){for(const[c,l]of Object.entries(n.props))if(c==="value"&&e.firstChild instanceof HTMLInputElement)e.firstChild.value=l;else if(c==="checked"&&e.firstChild instanceof HTMLInputElement)e.firstChild.checked=l===!0||l==="true";else if(c in t.dom)try{t.dom[c]=l}catch{}else t.dom.setAttribute(c,l);for(let c=n.children.length;c<i.length;c++)i[c]&&i[c].dom&&t.dom&&t.dom.contains(i[c].dom)&&t.dom.removeChild(i[c].dom);return}const a=t.dom;if(a&&a instanceof Element&&n.props){const c=a.tagName.toLowerCase()==="input"?a.getAttribute("type"):void 0,l=a.tagName.includes("-");for(const[d,u]of Object.entries(n.props))if(!(c==="radio"&&d==="value")){if(c==="checkbox"&&d==="value"){a.setAttribute("value",u);continue}a.setAttribute(d,u)}if(l)for(const[d,u]of Object.entries(n.props))a.setAttribute(d,u);for(const d of Array.from(a.attributes).map(u=>u.name))if(!(d in n.props)){if(c==="radio"&&d==="value"||c==="checkbox"&&d==="value")continue;a.removeAttribute(d)}}if(n.type==="#text"){if(a&&a.nodeType===Node.TEXT_NODE)a.nodeValue!==n.props.nodeValue&&(a.nodeValue=n.props.nodeValue),n.dom=a;else{const c=document.createTextNode(n.props.nodeValue??"");a&&e.contains(a)&&a.parentNode===e?j(e,c,a):e.appendChild(c),n.dom=c}return}if(a instanceof Element){const c=new Map;i.forEach(f=>f.key&&c.set(f.key,f));const l=new Set(s.map(f=>f.key));let d=[];for(let f=0;f<s.length;f++){const h=s[f],m=h.key?c.get(h.key):i[f];let p;const w=h.type==="input"||h.type==="select"||h.type==="textarea";if(m&&m.dom&&(!w||m.type===h.type&&m.key===h.key))S(a,m,h),p=m.dom;else{const v=y(h);if(p=v instanceof Node?v:void 0,p){if((p instanceof Element||p instanceof Node)&&p.contains(a))throw console.error("[VDOM] Attempted to insert a parent into its own child:",{parentTag:a.tagName,childTag:p.tagName,parentUid:a.getAttribute?.("data-uid"),childUid:p.getAttribute?.("data-uid"),parent:a,child:p}),new Error("VDOM patch error: Attempted to insert a parent into its own child");a.insertBefore(p,a.childNodes[f]||null)}}h.dom=p,p&&d.push(p)}for(i.forEach(f=>{!l.has(f.key)&&f.dom&&a.contains(f.dom)&&a.removeChild(f.dom)});a.childNodes.length>s.length;)a.removeChild(a.lastChild);for(let f=0;f<d.length;f++)if(a.childNodes[f]!==d[f]){if((d[f]instanceof Element||d[f]instanceof Node)&&d[f].contains(a))throw new Error("VDOM patch error: Attempted to insert a parent into its own child");a.insertBefore(d[f],a.childNodes[f]||null)}n.dom=a;const u=new Set(s.map(f=>f.key));Array.from(a.childNodes).forEach((f,h)=>{const m=f.getAttribute?.("data-uid");(m&&!u.has(m)||h>=s.length)&&a.removeChild(f)})}}function $(e,t){const n=[],r=t?Object.keys(t):[],i={...e};let s=null;function o(d){return n.push(d),()=>{const u=n.indexOf(d);u!==-1&&n.splice(u,1)}}function a(d){Object.assign(s,d),n.forEach(u=>u(s))}const c=new WeakMap;function l(d){if(c.has(d))return c.get(d);const u=new Proxy(d,{get(f,h,m){if(h==="subscribe")return o;if(h==="set")return a;if(t&&r.includes(h))return t[h](s);const p=Reflect.get(f,h,m);return typeof p=="object"&&p!==null?l(p):p},set(f,h,m,p){if(t&&r.includes(h))return!1;const w=f[h],v=Reflect.set(f,h,m,p);return w!==m&&n.forEach(U=>U(s)),v},deleteProperty(f,h){if(t&&r.includes(h))return!1;const m=Reflect.deleteProperty(f,h);return n.forEach(p=>p(s)),m}});return c.set(d,u),u}return s=l(i),s}const b=[];function lt(e){b.push(e)}function E(e,t=new WeakSet){if(e===null||typeof e!="object"||t.has(e))return e;if(t.add(e),Array.isArray(e))return e.map(i=>E(i,t));Object.getPrototypeOf(e)!==Object.prototype&&Object.getPrototypeOf(e)!==null&&Object.setPrototypeOf(e,null);const n=["__proto__","constructor","prototype"],r=Object.create(null);for(const i of Object.keys(e))n.includes(i)||(r[i]=E(e[i],t));return r}function C(e){return!!e&&typeof e.then=="function"}let K;typeof HTMLElement<"u"&&(K=class extends HTMLElement{syncStateToAttributes(){if(!this.stateObj||!this.config?.reflect||!Array.isArray(this.config.reflect))return;const e=["__proto__","constructor","prototype"];this.config.reflect.forEach(t=>{if(e.includes(t)){this.removeAttribute(t);return}const n=this.stateObj[t];["string","number","boolean"].includes(typeof n)?n==null?this.removeAttribute(t):this.setAttribute(t,String(n)):this.removeAttribute(t)})}setTemplate(e){const t=this.config;typeof e=="function"?t.template=e:t.template=()=>e,this.render()}_hasError=!1;_mountedCalled=!1;_unmountedCalled=!1;_autoWiredHandlers={};removeEventListener(e,t,n){super.removeEventListener(e,t,n),this._autoWiredHandlers[e]&&(this._autoWiredHandlers[e]=this._autoWiredHandlers[e].filter(r=>r===t?(super.removeEventListener(e,r,n),!1):!0),this._autoWiredHandlers[e].length===0&&delete this._autoWiredHandlers[e])}static get observedAttributes(){const e=this.stateObj||{};return Object.keys(e).filter(t=>["string","number","boolean"].includes(typeof e[t]))}attributeChangedCallback(e,t,n){if(!(e==="__proto__"||e==="constructor"||e==="prototype")&&this.stateObj&&e in this.stateObj){const r=typeof this.config?.state?.[e];let i=n;if(n===null)i=void 0;else if(r==="number")if(i===void 0||i==="")i=this.config?.state?.[e];else{const s=Number(i);i=isNaN(s)?this.config?.state?.[e]:s}else r==="boolean"&&(i=i==="true");i=E(i),this.stateObj[e]!==i&&(this.config?.debug&&console.log("[runtime] state update:",{name:e,value:i}),this.stateObj[e]=i,this.render())}}forceSyncControlledInputs(){this.shadowRoot&&(this.shadowRoot.querySelectorAll("input[data-model]").forEach(e=>{const t=e.getAttribute("data-model");if(!t||!this.stateObj||typeof this.stateObj[t]>"u")return;const n=e,r=String(this.stateObj[t]),i=document.activeElement===n;n._hasDirtyListener||(n.addEventListener("input",()=>{n._isDirty=!0}),n.addEventListener("blur",()=>{n._isDirty=!1}),n._hasDirtyListener=!0);const s=!!n._isDirty;i||s||n.type!=="radio"&&n.type!=="checkbox"&&n.value!==r&&(n.value=r)}),this.rebindEventListeners())}syncControlledInputsAndEvents(){this.shadowRoot&&(this.shadowRoot.querySelectorAll('input[type="radio"][data-model]').forEach(e=>{const t=e.getAttribute("data-model");if(!t||!this.stateObj||typeof this.stateObj[t]>"u")return;const n=e,r=String(this.stateObj[t]);n.checked=n.value===r}),this.shadowRoot.querySelectorAll("input[data-model]").forEach(e=>{const t=e.getAttribute("data-model");if(!t||!this.stateObj||typeof this.stateObj[t]>"u")return;const n=e,r=String(this.stateObj[t]);if(n.type==="checkbox"){const i=this.stateObj[t];if(Array.isArray(i))n.checked=i.includes(n.value);else{const s=n.getAttribute("data-true-value"),o=n.getAttribute("data-false-value");s!==null||o!==null?String(i)===s?n.checked=!0:String(i)===o?n.checked=!1:i===!0?n.checked=!0:n.checked=!1:n.checked=i===!0||i==="true"||i===1}}else n.type==="radio"||(n.value=r)}),this.shadowRoot.querySelectorAll("textarea[data-model]").forEach(e=>{const t=e.getAttribute("data-model");!t||!this.stateObj||typeof this.stateObj[t]>"u"||(e.value=String(this.stateObj[t]))}),this.shadowRoot.querySelectorAll("select[data-model]").forEach(e=>{const t=e.getAttribute("data-model");!t||!this.stateObj||typeof this.stateObj[t]>"u"||(e.value=String(this.stateObj[t]))}))}attachListItemModelListeners(){this.shadowRoot&&this.shadowRoot.querySelectorAll("input[data-bind]").forEach(e=>{const t=e.getAttribute("data-bind");if(!t)return;e._listItemModelListener&&(e.removeEventListener("input",e._listItemModelListener),e.removeEventListener("change",e._listItemModelListener),delete e._listItemModelListener);const n=t.match(/^([a-zA-Z0-9_]+)\[(\d+)\]\.([a-zA-Z0-9_]+)$/);if(n){const[,i,s,o]=n,a=parseInt(s,10),c=this.stateObj[i];e instanceof HTMLInputElement&&e.type==="checkbox"&&(e.checked=!!(Array.isArray(c)&&c[a]&&c[a][o]));const l=d=>{!Array.isArray(c)||!c[a]||(e instanceof HTMLInputElement&&e.type==="checkbox"?c[a][o]=e.checked:c[a][o]=e.value)};e.addEventListener("input",l),e.addEventListener("change",l),e._listItemModelListener=l;return}const r=t.match(/^([a-zA-Z0-9_]+)\.([a-zA-Z0-9_]+)((?:\|[a-zA-Z0-9_]+)*)$/);if(r){const[,i,s,o]=r,a=this.stateObj[i],c=o?o.split("|").map(d=>d.trim()).filter(Boolean):[];e instanceof HTMLInputElement&&e.type==="checkbox"?e.checked=!!(a&&a[s]):e instanceof HTMLInputElement&&(e.value=a?String(a[s]??""):"");const l=d=>{if(!a)return;let u;e instanceof HTMLInputElement&&e.type==="checkbox"?u=e.checked:(u=e.value,c.includes("number")&&(u=Number(u)),c.includes("trim")&&typeof u=="string"&&(u=u.trim())),a[s]=u};e.addEventListener("input",l),e.addEventListener("change",l),e._listItemModelListener=l}})}attachControlledInputListeners(){const e=this.shadowRoot;e&&(e.querySelectorAll("[data-model]").forEach(t=>{const n=t.getAttribute("data-model");n&&(t._dataModelBound||(P(t,this.stateObj,n),t._dataModelBound=!0))}),e.querySelectorAll("[data-model]").forEach(t=>{const[n]=t.getAttribute("data-model")?.split("|").map(r=>r.trim())??[];if(!(!n||!(n in this.stateObj)))if(t instanceof HTMLInputElement)if(t.type==="checkbox"){const r=this.stateObj[n],i=t.getAttribute("data-true-value"),s=t.getAttribute("data-false-value");Array.isArray(r)?t.checked=r.includes(t.value):i!==null||s!==null?String(r)===i?t.checked=!0:String(r)===s?t.checked=!1:r===!0?t.checked=!0:t.checked=!1:t.checked=r===!0||r==="true"||r===1}else t.type==="radio"?t.checked=t.value===String(this.stateObj[n]):t.value=String(this.stateObj[n]??"");else(t instanceof HTMLTextAreaElement||t instanceof HTMLSelectElement)&&(t.value=String(this.stateObj[n]??""))}))}config;stateObj;api;_globalUnsubscribes=[];unsubscribes=[];lastCompiledTemplate=null;lastState=null;rafId=null;constructor(){super()}initializeConfig(){if(this.config)return;const e=this.tagName.toLowerCase(),n=(window.__componentRegistry||{})[e];if(!n||typeof n!="object")throw new Error("Invalid component config: must be an object");if(!n.state||typeof n.state!="object")throw new Error("Invalid component config: state must be an object");this.config=n;const r=n.computed?$(n.state,n.computed):$(n.state);if(this.stateObj=r,typeof this.stateObj.subscribe=="function"&&this.unsubscribes.push(this.stateObj.subscribe(()=>{this.scheduleRender()})),this.api={state:this.stateObj,emit:(s,o)=>this.dispatchEvent(new CustomEvent(s,{detail:o,bubbles:!0})),onGlobal:(s,o)=>{const a=A.on(s,o);return this._globalUnsubscribes.push(a),a},offGlobal:(s,o)=>A.off(s,o),emitGlobal:(s,o)=>A.emit(s,o)},Object.keys(this.config).forEach(s=>{if(s.startsWith("on")&&s.length>2&&typeof this.config[s]=="function"){const o=s.charAt(2).toLowerCase()+s.slice(3),a=c=>{const l=c.detail??c;this.config[s](l,this.api.state,this.api)};this.addEventListener(o,a),this._autoWiredHandlers[o]||(this._autoWiredHandlers[o]=[]),this._autoWiredHandlers[o].push(a)}}),this.attachShadow({mode:"open"}),n.style){const s=document.createElement("style");s.textContent=typeof n.style=="function"?n.style(this.stateObj):n.style,this.shadowRoot.appendChild(s)}if(typeof this.config.hydrate=="function"){const s=this.shadowRoot?.querySelectorAll("[data-hydrate]");try{s&&s.length>0?s.forEach(o=>{try{this.config.hydrate(o,this.stateObj,this.api)}catch(a){typeof this.config.onError=="function"&&this.config.onError(a instanceof Error?a:new Error(String(a)),this.api.state,this.api),this._handleRenderError(a)}}):this.config.hydrate(this.shadowRoot,this.stateObj,this.api)}catch(o){typeof this.config.onError=="function"&&this.config.onError(o instanceof Error?o:new Error(String(o)),this.api.state,this.api),this._handleRenderError(o)}}if(this.hasAttribute("data-hydrated")?this.processRefs():this.render(),!this._mountedCalled&&typeof this.config.onMounted=="function")try{const s=this.config.onMounted(this.api.state,this.api);C(s)?s.catch(o=>{typeof this.config.onError=="function"&&this.config.onError(o,this.api.state,this.api),this._handleRenderError(o)}).finally(()=>{this._mountedCalled=!0}):this._mountedCalled=!0}catch(s){typeof this.config.onError=="function"&&this.config.onError(s,this.api.state,this.api),this._handleRenderError(s),this._mountedCalled=!0}}connectedCallback(){if(this.initializeConfig(),this.stateObj){for(const e of this.getAttributeNames())if(e in this.stateObj){const t=typeof this.config?.state?.[e];let n=this.getAttribute(e);t==="number"?n=Number(n):t==="boolean"&&(n=n==="true"),this.stateObj[e]=n===null?void 0:n}}if(!this._mountedCalled&&typeof this.config.onMounted=="function")try{const e=this.config.onMounted(this.api.state,this.api);C(e)?e.catch(t=>{typeof this.config.onError=="function"&&this.config.onError(t,this.api.state,this.api),this._handleRenderError(t)}).finally(()=>{this._mountedCalled=!0}):this._mountedCalled=!0}catch(e){typeof this.config.onError=="function"&&this.config.onError(e,this.api.state,this.api),this._handleRenderError(e),this._mountedCalled=!0}typeof this.render=="function"&&this.render()}disconnectedCallback(){if(Object.entries(this._autoWiredHandlers).forEach(([e,t])=>{t.forEach(n=>{super.removeEventListener(e,n)})}),this._autoWiredHandlers={},this.unsubscribes.forEach(e=>e()),this.unsubscribes=[],this._globalUnsubscribes.forEach(e=>e()),this._globalUnsubscribes=[],!this._unmountedCalled&&typeof this.config.onUnmounted=="function")try{const e=this.config.onUnmounted(this.api.state,this.api);C(e)?e.catch(t=>{typeof this.config.onError=="function"&&this.config.onError(t,this.api.state,this.api),this._handleRenderError(t)}).finally(()=>{this._unmountedCalled=!0}):this._unmountedCalled=!0}catch(e){typeof this.config.onError=="function"&&this.config.onError(e,this.api.state,this.api),this._handleRenderError(e),this._unmountedCalled=!0}this._mountedCalled=!1,this._unmountedCalled=!1}render(){this._hasError=!1,this.syncControlledInputsAndEvents(),setTimeout(()=>this.attachControlledInputListeners(),0);try{b.forEach(t=>{try{t.onRender?.(this.stateObj,this.api)}catch(n){this._handleRenderError(n)}}),this.config.computed&&Object.values(this.config.computed).forEach(t=>{try{t(this.stateObj)}catch(n){this._handleRenderError(n)}});const e=this.config.template(this.stateObj,this.api);e instanceof Promise?e.then(t=>{this._hasError||(this._renderTemplateResult(t),this.syncStateToAttributes(),setTimeout(()=>this.attachListItemModelListeners(),0))}).catch(t=>{this._handleRenderError(t)}):this._hasError||(this._renderTemplateResult(e),this.syncStateToAttributes(),setTimeout(()=>this.attachListItemModelListeners(),0))}catch(e){this._handleRenderError(e),this.renderError(e instanceof Error?e:new Error(String(e)))}}_prevVNode=null;rebindEventListeners(){if(!this.shadowRoot)return;["data-on-input","data-on-change","data-on-blur","data-on-click"].forEach(t=>{this.shadowRoot.querySelectorAll(`[${t}]`).forEach(n=>{const r=t.replace("data-on-",""),i=n.getAttribute(t);if(!i||typeof this.config[i]!="function")return;n._boundHandlers&&n._boundHandlers[r]&&n.removeEventListener(r,n._boundHandlers[r]);const s=this.config[i],o=a=>s.call(this,a);n.addEventListener(r,o),n._boundHandlers||(n._boundHandlers={}),n._boundHandlers[r]=o})}),Array.from(this.shadowRoot.children).forEach(t=>{t instanceof HTMLElement&&typeof t.rebindEventListeners=="function"&&t.rebindEventListeners()})}_renderTemplateResult(e){if(!this._hasError)try{let t=function(n){const r=new WeakSet;function i(s){if(s===null||typeof s!="object"||r.has(s))return s;if(r.add(s),Array.isArray(s))return s.map(i);const o={};for(const a in s)Object.prototype.hasOwnProperty.call(s,a)&&(o[a]=i(s[a]));return o}return i(n)};if(typeof e=="string"){let n=function(c){return c.replace(/<([a-zA-Z0-9]+)([^>]*)>/g,(l,d,u)=>{const f=u.replace(/\s+on[a-zA-Z]+\s*=\s*(['"][^'"]*['"]|[^\s>]*)/gi,"");return`<${d}${f}>`})},r=function(c){c.children.forEach(r)};const i=n(e),s=F(i);r(s);const o=this.shadowRoot;if(!o)return;let a=o.querySelector("style");if(a||(a=document.createElement("style"),o.appendChild(a)),this.config.style?a.textContent=typeof this.config.style=="function"?this.config.style(this.stateObj):this.config.style:a.textContent="",s.type==="#fragment"){const c=Array.from(o.childNodes).find(l=>l.nodeType===1&&l!==a);if(c){Array.from(c.childNodes).forEach(u=>{u.nodeType===1&&u.nodeName==="STYLE"||c.removeChild(u)});const l={type:"#fragment",dom:c,children:s.children,props:{},key:void 0},d=this._prevVNode&&this._prevVNode.type==="#fragment"?{...this._prevVNode,dom:c}:l;S(c,d,l)}else s.children.forEach(l=>{const d=y(l);d&&o.appendChild(d),l.dom=d??void 0})}else{let c=Array.from(this.shadowRoot.childNodes).find(l=>l!==a&&l.nodeType===1);if(c)if(this._prevVNode&&(this._prevVNode.type!==s.type||this._prevVNode.key!==s.key)){const l=y(s);l&&(this.shadowRoot.contains(c)&&this.shadowRoot.replaceChild(l,c),c=l)}else S(c,this._prevVNode,s);else c=y(s),c&&this.shadowRoot.appendChild(c);s.dom=c}this._prevVNode=s,this.forceSyncControlledInputs(),this.lastCompiledTemplate=null}else{const n=!this.shadowRoot.firstElementChild,r=this.lastCompiledTemplate?.id===e.id;if(n){const i=R(e,this.stateObj,this.api);this.shadowRoot.appendChild(i)}else if(r&&this.shadowRoot.firstElementChild){const i=this.lastState;z(e,this.shadowRoot.firstElementChild,this.stateObj,this.api,i||void 0)}else{const i=R(e,this.stateObj,this.api);let s=this.shadowRoot.querySelector("style");s||(s=document.createElement("style"),this.shadowRoot.insertBefore(s,this.shadowRoot.firstChild)),this.config.style?s.textContent=typeof this.config.style=="function"?this.config.style(this.stateObj):this.config.style:s.textContent="";let o=this.shadowRoot.querySelector("[data-root]");for(o||(o=document.createElement("div"),o.setAttribute("data-root",""),this.shadowRoot.appendChild(o));o.firstChild;)o.removeChild(o.firstChild);o.appendChild(i)}this.lastCompiledTemplate=e}this.lastState=t(this.stateObj),this.updateStyle(),this.processRefs(),this.bindEvents(),this.syncControlledInputsAndEvents()}catch(t){this._handleRenderError(t)}}_handleRenderError(e){if(this._hasError=!0,this.config.debug&&console.error(`[runtime] Render error in <${this.tagName.toLowerCase()}>:`,e),b.forEach(t=>t.onError?.(e instanceof Error?e:new Error(String(e)),this.stateObj,this.api)),"onError"in this.config&&typeof this.config.onError=="function")try{this.config.onError(e instanceof Error?e:new Error(String(e)),this.api.state,this.api)}catch(t){this.config.debug&&console.error("[runtime] Error in onError handler:",t)}this.renderError(e instanceof Error?e:new Error(String(e)))}scheduleRender(){this.rafId!==void 0&&this.rafId!==null&&cancelAnimationFrame(this.rafId),this.rafId=requestAnimationFrame(()=>{this.render(),this.rafId=null})}updateStyle(){const e=this.shadowRoot.querySelector("style");if(!e||!this.config.style)return;const t=typeof this.config.style=="function"?this.config.style(this.api.state):this.config.style;e.textContent=t}processRefs(){if(!this.config.refs)return;const e=new WeakMap;Object.entries(this.config.refs).forEach(([t,n])=>{const r=this.shadowRoot.querySelector(`[data-ref="${t}"]`);if(r){e.has(r)||e.set(r,new Set);const i=e.get(r),s=r.addEventListener;r.addEventListener=function(o,a,c){const l=`${o}`;i.has(l)||(i.add(l),s.call(r,o,a,c))},r.setAttribute("data-refs-processed","true");try{n(r,this.api.state,this.api)}catch(o){this._handleRenderError(o)}}})}bindEvents(){if(!this.shadowRoot)return;const e=document.createTreeWalker(this.shadowRoot,NodeFilter.SHOW_ELEMENT);let t=e.nextNode();for(;t;){const n=t;Array.from(n.attributes).forEach(r=>{if(r.name.startsWith("data-on-")){const i=r.name.slice(8),s=r.value,o=this.config[s];if(typeof o=="function"){n._boundHandlers&&n._boundHandlers[i]&&n.removeEventListener(i,n._boundHandlers[i]);const a=c=>{o.call(this.config,c,this.api.state,this.api),this.syncControlledInputsAndEvents()};n.addEventListener(i,a),n._boundHandlers||(n._boundHandlers={}),n._boundHandlers[i]=a}else this.config.debug&&console.warn(`[runtime] Handler '${s}' not found on config for event '${i}'`,n)}}),t=e.nextNode()}}renderError(e){const t=this.config.style?typeof this.config.style=="function"?this.config.style(this.api.state):this.config.style:"";this.shadowRoot.innerHTML=`
|
|
40
40
|
<style>${t}</style>
|
|
41
41
|
<div style="color: red; border: 1px solid red; padding: 1rem; border-radius: 4px;">
|
|
42
42
|
<h3>Error Boundary</h3>
|
|
43
43
|
<div>Error: ${e.message}</div>
|
|
44
44
|
</div>
|
|
45
|
-
`}});function
|
|
45
|
+
`}});function dt(e,t){if(t=E(t),t.debug&&console.log(`[runtime] Debugging component: ${e}`,t),!e||!t.template||!t.state){t&&typeof t.onError=="function"&&t.onError(new Error("Component requires tag, template, and state"),t.state,{state:t.state,emit:()=>{},onGlobal:()=>()=>{},offGlobal:()=>{},emitGlobal:()=>{}}),t&&t.debug&&console.error("[runtime] Malformed config:",{tag:e,config:t});return}b.forEach(l=>{try{l.onInit?.(t)}catch(d){t&&typeof t.onError=="function"&&t.onError(d instanceof Error?d:new Error(String(d)),t.state,{state:t.state,emit:()=>{},onGlobal:()=>()=>{},offGlobal:()=>{},emitGlobal:()=>{}}),t&&t.debug&&console.error("[runtime] Plugin onInit error:",d)}});const r=typeof window<"u"&&window.VITE_DEV_HMR,i=typeof{url:typeof document>"u"?require("url").pathToFileURL(__filename).href:O&&O.tagName.toUpperCase()==="SCRIPT"&&O.src||new URL("custom-elements-runtime.cjs.js",document.baseURI).href}<"u"&&void 0;if((r||i)&&customElements.get(e))try{document.querySelectorAll(e).forEach(l=>l.remove()),window.customElements._definitions&&delete window.customElements._definitions[e]}catch{}if(customElements.get(e)){t.debug&&console.warn(`[runtime] Component "${e}" already registered`);return}const s=$(t.state,t.computed);t.state=s,t._subscribe=s.subscribe;const o=Object.keys(t.state).filter(l=>["string","number","boolean"].includes(typeof t.state[l]));class a extends K{static get observedAttributes(){return o}constructor(){super()}}const c=a;typeof customElements<"u"&&!customElements.get(e)&&(window.__componentRegistry=window.__componentRegistry||{},window.__componentRegistry[e]=t,customElements.define(e,c))}exports.Store=G;exports.classes=nt;exports.compile=tt;exports.compileTemplate=st;exports.component=dt;exports.createVNodeFromElement=T;exports.css=et;exports.deepSanitizeObject=E;exports.eventBus=A;exports.generateHydrationScript=X;exports.getVNodeKey=H;exports.html=Q;exports.isPromise=C;exports.mountVNode=y;exports.parseVNodeFromHTML=F;exports.patchVNode=S;exports.renderCompiledTemplate=R;exports.renderComponentsToString=V;exports.renderToString=I;exports.runtimePlugins=b;exports.safeReplaceChild=j;exports.styles=rt;exports.updateCompiledTemplate=z;exports.useDataModel=P;exports.useRuntimePlugin=lt;
|
|
46
46
|
//# sourceMappingURL=custom-elements-runtime.cjs.js.map
|