lego-dom 1.5.1 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Changelog
 
+# Changelog
+
+## [2.0.2] - 2026-01-19
+
+### Features
+
+- **Scoped Props (`b-logic`):** `b-logic` attributes now inherit the parent block's scope! You can pass state naturally to children without global variables.
+  ```html
+  <!-- 'user' is resolved from the parent block's state -->
+  <user-avatar b-logic="{ user: user }"></user-avatar>
+  ```
+
+- **`$parent` Helper:** Added `this.$parent` (and template access) to easily find the nearest ancestor Block. It intelligently skips non-block elements (divs, spans) and handles Shadow DOM boundaries.
+  ```javascript
+  const parentBlock = this.$parent;
+  ```
+
+## [2.0.1] - 2026-01-19
+
+### The "Blocks" Update Refactor 🧱
+
+Welcome to **LegoDOM v2**! This release represents a massive architectural shift to align the codebase and mental model with the "Lego" metaphor. We have moved away from Vue-centric terminology ("SFC", "Component", "Data") to Lego-centric terminology ("Lego File", "Block", "Logic").
+
+### Breaking Changes 🚨
+
+- **Terminological Refactor (Runtime & Docs):**
+  - **Components → Blocks:** The fundamental unit of UI is now a "Block".
+  - **SFC → Lego File:** Protocol-agnostic Single File Blocks.
+
+- **API Renames:**
+  - `Lego.define()` is now **`Lego.block()`**. (Legacy alias maintained)
+  - `Lego.defineSFC()` is now **`Lego.defineLegoFile()`**.
+  - Internal: `deriveComponentName` is now `deriveBlockName`.
+
+- **Attribute Renames:**
+  - `b-data` is now **`b-logic`**. (Legacy alias maintained)
+  - `b-styles` is now **`b-stylesheets`**.
+
+### Features
+
+- **Public State API:**
+  - `element.state` is now the official public API for accessing the reactive proxy.
+  - `element._studs` is considered internal/private.
+
+- **Lego Studio Audit:**
+  - `lego-studio` has been refactored to use "Block" terminology throughout the UI and codebase.
+
 ## [1.5.1] - 2026-01-19
 
 ### Breaking Changes 🚨

package/main.js

@@ -1,9 +1,9 @@
 const Lego = (() => {
   const registry = {}, proxyCache = new WeakMap(), privateData = new WeakMap();
   const forPools = new WeakMap();
-  const activeComponents = new Set();
+  const activeBlocks = new Set();
 
-  const sfcLogic = new Map();
+  const legoFileLogic = new Map();
   const sharedStates = new Map();
   const expressionCache = new Map(); // Cache for compiled expressions
 
@@ -39,7 +39,7 @@ const Lego = (() => {
     }[m]));
   };
 
-  const deriveComponentName = (filename) => {
+  const deriveBlockName = (filename) => {
     const basename = filename.split('/').pop().replace(/\.lego$/, '');
     // 1. Convert snake_case to kebab-case
     // 2. Convert PascalCase/camelCase to kebab-case
@@ -49,7 +49,7 @@ const Lego = (() => {
       .toLowerCase();
 
     if (!name.includes('-')) {
-      throw new Error(`[Lego] Invalid component definition: "${filename}". Component names must contain a hyphen (e.g. user-card.lego or UserCard.lego).`);
+      throw new Error(`[Lego] Invalid block definition: "${filename}". Block names must contain a hyphen (e.g. user-card.lego or UserCard.lego).`);
     }
     return name;
   };
@@ -68,7 +68,7 @@ const Lego = (() => {
       const el = document.getElementById(query.slice(1));
       return el ? [el] : [];
     }
-    // Scoped search first (within the calling component), then global fallback
+    // Scoped search first (within the calling block), then global fallback
     const scoped = contextEl?.querySelectorAll(query) || [];
     return scoped.length > 0 ? [...scoped] : [...document.querySelectorAll(query)];
   };
@@ -176,11 +176,10 @@ const Lego = (() => {
     return p;
   };
 
-  const parseJSObject = (raw) => {
+  const parseJSObject = (raw, scope = {}) => {
     try {
-      return (new Function(`return (${raw})`))();
+      return (new Function('scope', 'global', `with(global) { with(scope) { return (${raw}); } }`))(scope, Lego.globals);
     } catch (e) {
-      console.error(`[Lego] Failed to parse b-data:`, raw, e);
       return {};
     }
   };
@@ -204,10 +203,13 @@ const Lego = (() => {
   };
 
   const findAncestor = (el, tagName) => {
-    let parent = el.parentElement || el.getRootNode().host;
+    if (!el) return undefined;
+    let parent = el.parentElement || (el.getRootNode ? el.getRootNode().host : null);
     while (parent) {
-      if (parent.tagName && parent.tagName.toLowerCase() === tagName.toLowerCase()) {
-        return parent;
+      const pName = parent.tagName ? parent.tagName.toLowerCase() : '';
+      if (pName) {
+        if (tagName === '*' && registry[pName]) return parent;
+        if (pName === tagName.toLowerCase()) return parent;
       }
       parent = parent.parentElement || (parent.getRootNode && parent.getRootNode().host);
     }
@@ -274,8 +276,8 @@ const Lego = (() => {
     }
   };
 
-  const bind = (container, componentRoot, loopCtx = null) => {
-    const state = componentRoot._studs;
+  const bind = (container, blockRoot, loopCtx = null) => {
+    const state = blockRoot._studs;
 
     const bindNode = (child) => {
       const childData = getPrivateData(child);
@@ -291,7 +293,7 @@ const Lego = (() => {
               try {
                 let evalScope = state;
                 if (loopCtx) {
-                  const list = safeEval(loopCtx.listName, { state, global: Lego.globals, self: componentRoot });
+                  const list = safeEval(loopCtx.listName, { state, global: Lego.globals, self: blockRoot });
                   const item = list[loopCtx.index];
                   evalScope = Object.assign(Object.create(state), { [loopCtx.name]: item });
                 }
@@ -309,7 +311,7 @@ const Lego = (() => {
             try {
               let target, last;
               if (loopCtx && prop.startsWith(loopCtx.name + '.')) {
-                const list = safeEval(loopCtx.listName, { state, global: Lego.globals, self: componentRoot });
+                const list = safeEval(loopCtx.listName, { state, global: Lego.globals, self: blockRoot });
                 const item = list[loopCtx.index];
                 if (!item) return;
                 const subPath = prop.split('.').slice(1);
@@ -357,7 +359,7 @@ const Lego = (() => {
         let curr = n.parentNode;
         while (curr && curr !== container) {
           if (curr.hasAttribute && curr.hasAttribute('b-for')) return true;
-          // Only stop at Shadow Roots or explicit boundaries, NOT component tags in Light DOM
+          // Only stop at Shadow Roots or explicit boundaries, NOT block tags in Light DOM
           // The parent MUST be able to bind data to the slots of its children.
           curr = curr.parentNode;
         }
@@ -462,7 +464,7 @@ const Lego = (() => {
     if (config.metrics && config.metrics.onRenderStart) config.metrics.onRenderStart(el);
 
     try {
-      // Use shadowRoot if it's a component, otherwise render the element itself (light DOM)
+      // Use shadowRoot if it's a block, otherwise render the element itself (light DOM)
       const target = el.shadowRoot || el;
       if (!data.bindings) data.bindings = scanForBindings(target);
 
@@ -525,9 +527,9 @@ const Lego = (() => {
         }
       });
 
-      // Global Broadcast: Only notify components that depend on globals
+      // Global Broadcast: Only notify blocks that depend on globals
       if (state === Lego.globals) {
-        activeComponents.forEach(comp => {
+        activeBlocks.forEach(comp => {
           if (getPrivateData(comp).hasGlobalDependency) render(comp);
         });
       }
@@ -558,12 +560,16 @@ const Lego = (() => {
         }
       }
 
-      // TIER 1: Logic from Lego.define (SFC)
+      // TIER 1: Logic from Lego.block (Lego File)
       // TIER 2: Logic from the <template b-data="..."> attribute
       // TIER 3: Logic from the <my-comp b-data="..."> tag
-      const scriptLogic = sfcLogic.get(name) || {};
-      const templateLogic = parseJSObject(templateNode.getAttribute('b-data') || '{}');
-      const instanceLogic = parseJSObject(el.getAttribute('b-data') || '{}');
+      // SCOPED PROPS: Use parent block state as scope for instance logic evaluation
+      const parentBlock = findAncestor(el, '*') || findAncestor(el.getRootNode().host, '*');
+      const parentScope = parentBlock && parentBlock.state ? parentBlock.state : {};
+
+      const scriptLogic = legoFileLogic.get(name) || {};
+      const templateLogic = parseJSObject(templateNode.getAttribute('b-logic') || templateNode.getAttribute('b-data') || '{}');
+      const instanceLogic = parseJSObject(el.getAttribute('b-logic') || el.getAttribute('b-data') || '{}', parentScope);
 
       el._studs = reactive({
         ...scriptLogic,
@@ -571,6 +577,7 @@ const Lego = (() => {
         ...instanceLogic,
         $vars: {},
         $element: el,
+        get $parent() { return findAncestor(el, '*') },
         $emit: (name, detail) => {
           el.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
         },
@@ -593,7 +600,7 @@ const Lego = (() => {
       }
 
       bind(shadow, el);
-      activeComponents.add(el);
+      activeBlocks.add(el);
       render(el);
 
       [...shadow.children].forEach(snap);
@@ -619,7 +626,7 @@ const Lego = (() => {
       [...el.shadowRoot.children].forEach(unsnap);
     }
 
-    activeComponents.delete(el);
+    activeBlocks.delete(el);
     [...el.children].forEach(unsnap);
   };
 
@@ -701,7 +708,7 @@ const Lego = (() => {
             snap(n);
             // Auto-Discovery: Check if tag is unknown and loader is configured
             const tagName = n.tagName.toLowerCase();
-            if (tagName.includes('-') && !registry[tagName] && config.loader && !activeComponents.has(n)) {
+            if (tagName.includes('-') && !registry[tagName] && config.loader && !activeBlocks.has(n)) {
               const result = config.loader(tagName);
               if (result) {
                 // Handle Promise (user does custom fetch) vs String (we fetch)
@@ -710,7 +717,7 @@ const Lego = (() => {
                   : result;
 
                 Promise.resolve(promise)
-                  .then(sfc => publicAPI.defineSFC(sfc, tagName + '.lego'))
+                  .then(legoFile => publicAPI.defineLegoFile(legoFile, tagName + '.lego'))
                   .catch(e => console.error(`[Lego] Failed to load ${tagName}:`, e));
               }
             }
@@ -774,7 +781,7 @@ const Lego = (() => {
       },
       $go: (path, ...targets) => _go(path, ...targets)(document.body)
     }, document.body),
-    defineSFC: (content, filename = 'component.lego') => {
+    defineLegoFile: (content, filename = 'block.lego') => {
       let template = '';
       let script = '{}';
       let stylesAttr = '';
@@ -820,7 +827,7 @@ const Lego = (() => {
         remaining = remaining.slice(contentEnd + closeTag.length);
       }
 
-      const name = deriveComponentName(filename);
+      const name = deriveBlockName(filename);
       // We must eval the script to get the object. 
       // Safe-ish because it's coming from the "Server" (trusted source in this architecture)
       const logicObj = new Function(`return ${script}`)();
@@ -832,18 +839,18 @@ const Lego = (() => {
       registry[name] = document.createElement('template');
       registry[name].innerHTML = template;
       registry[name].setAttribute('b-stylesheets', stylesAttr);
-      sfcLogic.set(name, logicObj);
+      legoFileLogic.set(name, logicObj);
 
       // Upgrade existing elements
       document.querySelectorAll(name).forEach(el => !getPrivateData(el).snapped && snap(el));
     },
-    define: (tagName, templateHTML, logic = {}, styles = "") => {
+    block: (tagName, templateHTML, logic = {}, styles = "") => {
       const t = document.createElement('template');
       t.setAttribute('b-id', tagName);
       t.setAttribute('b-stylesheets', styles);
       t.innerHTML = templateHTML;
       registry[tagName] = t;
-      sfcLogic.set(tagName, logic);
+      legoFileLogic.set(tagName, logic);
 
       // Initialize shared state with try-catch safety
       try {
@@ -854,8 +861,11 @@ const Lego = (() => {
 
       document.querySelectorAll(tagName).forEach(snap);
     },
+    // Alias for backward compatibility
+    get define() { return this.block },
+
     // For specific test validation
-    getActiveComponentsCount: () => activeComponents.size,
+    getActiveBlocksCount: () => activeBlocks.size,
     getLegos: () => Object.keys(registry),
     config, // Expose config for customization
     route: (path, tagName, middleware = null) => {

package/main.min.js

@@ -1,7 +1,13 @@
-const Lego=(()=>{const b={},M=new WeakMap,O=new WeakMap,P=new WeakMap,v=new Set,D=new Map,B=new Map,H=new Map,j=new Map;let q={};const p={onError:(e,s,c)=>{console.error(`[Lego Error] [${s}]`,e,c)},metrics:{},syntax:"brackets"},$=()=>p.syntax==="brackets"?["[[","]]"]:["{{","}}"],L=()=>{const[e,s]=$(),c=e.replace(/[.*+?^${}()|[\]\\]/g,"\\$&"),o=s.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");return new RegExp(`${c}(.*?)${o}`,"g")},R=[],ee=e=>typeof e!="string"?e:e.replace(/[&<>"']/g,s=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"})[s]),K=e=>{const c=e.split("/").pop().replace(/\.lego$/,"").replace(/_/g,"-").replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();if(!c.includes("-"))throw new Error(`[Lego] Invalid component definition: "${e}". Component names must contain a hyphen (e.g. user-card.lego or UserCard.lego).`);return c},V=(e,s)=>{if(typeof e=="function"){const o=Array.from(document.querySelectorAll("*")).filter(t=>t.tagName.includes("-"));return[].concat(e(o))}if(e.startsWith("#")){const o=document.getElementById(e.slice(1));return o?[o]:[]}const c=s?.querySelectorAll(e)||[];return c.length>0?[...c]:[...document.querySelectorAll(e)]},G=(e,...s)=>c=>{const o=async(t,a=null,r=!0,n={})=>{if(r){const d={legoTargets:s.filter(i=>typeof i=="string"),method:t,body:a};history.pushState(d,"",e)}await W(s.length?s:null,c)};return{get:(t=!0,a={})=>o("GET",null,t,a),post:(t,a=!0,r={})=>o("POST",t,a,r),put:(t,a=!0,r={})=>o("PUT",t,a,r),patch:(t,a=!0,r={})=>o("PATCH",t,a,r),delete:(t=!0,a={})=>o("DELETE",null,t,a)}},J=(()=>{let e=!1;const s=new Set;let c=!1,o=null;const t=new Set,a=()=>{o&&clearTimeout(o),o=setTimeout(()=>{t.forEach(r=>{const n=r._studs;if(n&&typeof n.updated=="function")try{n.updated.call(n)}catch(l){console.error("[Lego] Error in updated hook:",l)}}),t.clear(),o=null},50)};return{add:r=>{!r||c||(s.add(r),!e&&(e=!0,requestAnimationFrame(()=>{c=!0;const n=Array.from(s);s.clear(),e=!1,n.forEach(l=>x(l)),n.forEach(l=>t.add(l)),a(),c=!1})))}}})(),S=(e,s,c=J)=>{if(e===null||typeof e!="object"||e instanceof Node)return e;if(M.has(e))return M.get(e);const o={get:(a,r)=>{const n=Reflect.get(a,r);return n!==null&&typeof n=="object"&&!(n instanceof Node)?S(n,s,c):n},set:(a,r,n)=>{const l=a[r],d=Reflect.set(a,r,n);return l!==n&&c.add(s),d},deleteProperty:(a,r)=>{const n=Reflect.deleteProperty(a,r);return c.add(s),n}},t=new Proxy(e,o);return M.set(e,t),t},U=e=>{try{return new Function(`return (${e})`)()}catch(s){return console.error("[Lego] Failed to parse b-data:",e,s),{}}},N=e=>(O.has(e)||O.set(e,{snapped:!1,bindings:null,bound:!1,rendering:!1,anchor:null,hasGlobalDependency:!1}),O.get(e)),F=(e,s)=>{if(!e)return"";const c=e.trim().split(".");let o=s;for(const t of c){if(o==null)return"";o=o[t]}return o??""},Z=(e,s)=>{let c=e.parentElement||e.getRootNode().host;for(;c;){if(c.tagName&&c.tagName.toLowerCase()===s.toLowerCase())return c;c=c.parentElement||c.getRootNode&&c.getRootNode().host}},h=(e,s,c=!1)=>{if(/\b(function|eval|import|class|module|deploy|constructor|__proto__)\b/.test(e)){console.warn(`[Lego] Security Warning: Blocked dangerous expression "${e}"`);return}try{const o=s.state||{};let t=H.get(e);t||(t=new Function("global","self","event","helpers",`
+const Lego = (() => {
+  const b = {}, M = new WeakMap, O = new WeakMap, P = new WeakMap, v = new Set, D = new Map, B = new Map, H = new Map, j = new Map; let q = {}; const p = { onError: (e, s, c) => { console.error(`[Lego Error] [${s}]`, e, c) }, metrics: {}, syntax: "brackets" }, $ = () => p.syntax === "brackets" ? ["[[", "]]"] : ["{{", "}}"], L = () => { const [e, s] = $(), c = e.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), o = s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); return new RegExp(`${c}(.*?)${o}`, "g") }, R = [], ee = e => typeof e != "string" ? e : e.replace(/[&<>"']/g, s => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[s]), K = e => { const c = e.split("/").pop().replace(/\.lego$/, "").replace(/_/g, "-").replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(); if (!c.includes("-")) throw new Error(`[Lego] Invalid component definition: "${e}". Component names must contain a hyphen (e.g. user-card.lego or UserCard.lego).`); return c }, V = (e, s) => { if (typeof e == "function") { const o = Array.from(document.querySelectorAll("*")).filter(t => t.tagName.includes("-")); return [].concat(e(o)) } if (e.startsWith("#")) { const o = document.getElementById(e.slice(1)); return o ? [o] : [] } const c = s?.querySelectorAll(e) || []; return c.length > 0 ? [...c] : [...document.querySelectorAll(e)] }, G = (e, ...s) => c => { const o = async (t, a = null, r = !0, n = {}) => { if (r) { const d = { legoTargets: s.filter(i => typeof i == "string"), method: t, body: a }; history.pushState(d, "", e) } await W(s.length ? s : null, c) }; return { get: (t = !0, a = {}) => o("GET", null, t, a), post: (t, a = !0, r = {}) => o("POST", t, a, r), put: (t, a = !0, r = {}) => o("PUT", t, a, r), patch: (t, a = !0, r = {}) => o("PATCH", t, a, r), delete: (t = !0, a = {}) => o("DELETE", null, t, a) } }, J = (() => { let e = !1; const s = new Set; let c = !1, o = null; const t = new Set, a = () => { o && clearTimeout(o), o = setTimeout(() => { t.forEach(r => { const n = r._studs; if (n && typeof n.updated == "function") try { n.updated.call(n) } catch (l) { console.error("[Lego] Error in updated hook:", l) } }), t.clear(), o = null }, 50) }; return { add: r => { !r || c || (s.add(r), !e && (e = !0, requestAnimationFrame(() => { c = !0; const n = Array.from(s); s.clear(), e = !1, n.forEach(l => x(l)), n.forEach(l => t.add(l)), a(), c = !1 }))) } } })(), S = (e, s, c = J) => { if (e === null || typeof e != "object" || e instanceof Node) return e; if (M.has(e)) return M.get(e); const o = { get: (a, r) => { const n = Reflect.get(a, r); return n !== null && typeof n == "object" && !(n instanceof Node) ? S(n, s, c) : n }, set: (a, r, n) => { const l = a[r], d = Reflect.set(a, r, n); return l !== n && c.add(s), d }, deleteProperty: (a, r) => { const n = Reflect.deleteProperty(a, r); return c.add(s), n } }, t = new Proxy(e, o); return M.set(e, t), t }, U = e => { try { return new Function(`return (${e})`)() } catch (s) { return console.error("[Lego] Failed to parse b-data:", e, s), {} } }, N = e => (O.has(e) || O.set(e, { snapped: !1, bindings: null, bound: !1, rendering: !1, anchor: null, hasGlobalDependency: !1 }), O.get(e)), F = (e, s) => { if (!e) return ""; const c = e.trim().split("."); let o = s; for (const t of c) { if (o == null) return ""; o = o[t] } return o ?? "" }, Z = (e, s) => { let c = e.parentElement || e.getRootNode().host; for (; c;) { if (c.tagName && c.tagName.toLowerCase() === s.toLowerCase()) return c; c = c.parentElement || c.getRootNode && c.getRootNode().host } }, h = (e, s, c = !1) => {
+    if (/\b(function|eval|import|class|module|deploy|constructor|__proto__)\b/.test(e)) { console.warn(`[Lego] Security Warning: Blocked dangerous expression "${e}"`); return } try {
+      const o = s.state || {}; let t = H.get(e); t || (t = new Function("global", "self", "event", "helpers", `
           with(helpers) {
             with(this) { 
               return ${e}
             }
           }
-        `),H.set(e,t));const a={$ancestors:n=>Z(s.self,n),$registry:n=>B.get(n.toLowerCase()),$element:s.self,$route:Lego.globals.$route,$go:(n,...l)=>G(n,...l)(s.self),$emit:(n,l)=>{s.self.dispatchEvent(new CustomEvent(n,{detail:l,bubbles:!0,composed:!0}))}},r=t.call(o,s.global,s.self,s.event,a);return typeof r=="function"?r.call(o,s.event):r}catch(o){if(c)throw o;p.onError(o,"render-error",s.self);return}},I=(e,s)=>{if(e.type==="checkbox")e.checked!==!!s&&(e.checked=!!s);else{const c=s==null?"":String(s);e.value!==c&&(e.value=c)}},C=(e,s,c=null)=>{const o=s._studs,t=n=>{const l=N(n);if(!l.bound){if(n.hasAttributes()){const d=n.attributes;for(let i=0;i<d.length;i++){const u=d[i];if(u.name.startsWith("@")){const f=u.name.slice(1);n.addEventListener(f,g=>{try{let m=o;if(c){const E=h(c.listName,{state:o,global:Lego.globals,self:s})[c.index];m=Object.assign(Object.create(o),{[c.name]:E})}h(u.value,{state:m,global:Lego.globals,self:n,event:g},!0)}catch(m){p.onError(m,"event-handler",n)}})}}if(n.hasAttribute("b-sync")){const i=n.getAttribute("b-sync"),u=()=>{try{let f,g;if(c&&i.startsWith(c.name+".")){const E=h(c.listName,{state:o,global:Lego.globals,self:s})[c.index];if(!E)return;const w=i.split(".").slice(1);g=w.pop(),f=w.reduce((T,_)=>T[_],E)}else{const y=i.split(".");g=y.pop(),f=y.reduce((E,w)=>E[w],o)}const m=n.type==="checkbox"?n.checked:n.value;f&&f[g]!==m&&(f[g]=m)}catch(f){p.onError(f,"sync-update",n)}};n.addEventListener("input",u),n.addEventListener("change",u)}if(n.hasAttribute("b-var")){const i=n.getAttribute("b-var");o.$vars&&(o.$vars[i]=n)}}l.bound=!0}};e instanceof Element&&t(e);const a=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT);let r;for(;r=a.nextNode();)t(r)},Y=e=>{const s=[],c=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_TEXT);let o;for(;o=c.nextNode();){if((r=>{let n=r.parentNode;for(;n&&n!==e;){if(n.hasAttribute&&n.hasAttribute("b-for"))return!0;n=n.parentNode}return!1})(o))continue;const a=r=>{if(/\bglobal\b/.test(r)){const n=e.host||e;N(n).hasGlobalDependency=!0}};if(o.nodeType===Node.ELEMENT_NODE){if(o.hasAttribute("b-if")){const n=o.getAttribute("b-if");a(n);const l=document.createComment(`b-if: ${n}`),d=N(o);d.anchor=l,s.push({type:"b-if",node:o,anchor:l,expr:n})}if(o.hasAttribute("b-show")){const n=o.getAttribute("b-show");a(n),s.push({type:"b-show",node:o,expr:n})}if(o.hasAttribute("b-for")){const n=o.getAttribute("b-for").match(/^\s*(\w+)\s+in\s+([\s\S]+?)\s*$/);n&&(a(n[2]),s.push({type:"b-for",node:o,itemName:n[1],listName:n[2].trim(),template:o.cloneNode(!0)}),o.innerHTML="")}if(o.hasAttribute("b-text")&&s.push({type:"b-text",node:o,path:o.getAttribute("b-text")}),o.hasAttribute("b-html")){const n=o.getAttribute("b-html");a(n),s.push({type:"b-html",node:o,expr:n})}o.hasAttribute("b-sync")&&s.push({type:"b-sync",node:o});const[r]=$();[...o.attributes].forEach(n=>{n.value.includes(r)&&(a(n.value),s.push({type:"attr",node:o,attrName:n.name,template:n.value}))})}else if(o.nodeType===Node.TEXT_NODE){const[r]=$();o.textContent.includes(r)&&(a(o.textContent),s.push({type:"text",node:o,template:o.textContent}))}}return s},Q=(e,s)=>{const c=a=>{if(a.nodeType===Node.TEXT_NODE){a._tpl===void 0&&(a._tpl=a.textContent);const r=a._tpl.replace(L(),(n,l)=>h(l.trim(),{state:s,global:Lego.globals,self:a})??"");a.textContent!==r&&(a.textContent=r)}else if(a.nodeType===Node.ELEMENT_NODE){const[r]=$();[...a.attributes].forEach(n=>{if(n._tpl===void 0&&(n._tpl=n.value),n._tpl.includes(r)){const l=n._tpl.replace(L(),(d,i)=>h(i.trim(),{state:s,global:Lego.globals,self:a})??"");n.value!==l&&(n.value=l,n.name==="class"&&(a.className=l))}})}};c(e);const o=document.createTreeWalker(e,NodeFilter.SHOW_ELEMENT|NodeFilter.SHOW_TEXT);let t;for(;t=o.nextNode();)c(t)},x=e=>{const s=e._studs;if(!s)return;const c=N(e);if(!c.rendering){c.rendering=!0,p.metrics&&p.metrics.onRenderStart&&p.metrics.onRenderStart(e);try{const o=e.shadowRoot||e;c.bindings||(c.bindings=Y(o)),c.bindings.forEach(t=>{if(t.type==="b-if"){const a=!!h(t.expr,{state:s,global:Lego.globals,self:t.node}),r=!!t.node.parentNode;a&&!r?t.anchor.parentNode&&t.anchor.parentNode.replaceChild(t.node,t.anchor):!a&&r&&t.node.parentNode.replaceChild(t.anchor,t.node)}if(t.type==="b-show"&&(t.node.style.display=h(t.expr,{state:s,global:Lego.globals,self:t.node})?"":"none"),t.type==="b-text"&&(t.node.textContent=F(t.path,s)),t.type==="b-html"&&(t.node.innerHTML=h(t.expr,{state:s,global:Lego.globals,self:t.node})||""),t.type==="b-sync"&&I(t.node,F(t.node.getAttribute("b-sync"),s)),t.type==="text"){const a=t.template.replace(L(),(r,n)=>h(n.trim(),{state:s,global:Lego.globals,self:t.node})??"");t.node.textContent!==a&&(t.node.textContent=a)}if(t.type==="attr"){const a=t.template.replace(L(),(r,n)=>h(n.trim(),{state:s,global:Lego.globals,self:t.node})??"");t.node.getAttribute(t.attrName)!==a&&(t.node.setAttribute(t.attrName,a),t.attrName==="class"&&(t.node.className=a))}if(t.type==="b-for"){const a=h(t.listName,{state:s,global:Lego.globals,self:e})||[];P.has(t.node)||P.set(t.node,new Map);const r=P.get(t.node),n=new Set;a.forEach((l,d)=>{const i=l&&typeof l=="object"?l.__id||(l.__id=Math.random()):`${d}-${l}`;n.add(i);let u=r.get(i);u||(u=t.template.cloneNode(!0),u.removeAttribute("b-for"),r.set(i,u),C(u,e,{name:t.itemName,listName:t.listName,index:d}));const f=Object.assign(Object.create(s),{[t.itemName]:l});Q(u,f),u.querySelectorAll("[b-sync]").forEach(g=>{const m=g.getAttribute("b-sync");if(m.startsWith(t.itemName+".")){const y=h(t.listName,{state:s,global:Lego.globals,self:e});I(g,F(m.split(".").slice(1).join("."),y[d]))}}),t.node.children[d]!==u&&t.node.insertBefore(u,t.node.children[d]||null)});for(const[l,d]of r.entries())n.has(l)||(d.remove(),r.delete(l))}}),s===Lego.globals&&v.forEach(t=>{N(t).hasGlobalDependency&&x(t)})}catch(o){p.onError(o,"render",e)}finally{p.metrics&&p.metrics.onRenderEnd&&p.metrics.onRenderEnd(e),c.rendering=!1}}},A=e=>{if(!e||e.nodeType!==Node.ELEMENT_NODE)return;const s=N(e),c=e.tagName.toLowerCase(),o=b[c];if(o&&!s.snapped){s.snapped=!0;const a=o.content.cloneNode(!0),r=e.attachShadow({mode:"open"}),n=(o.getAttribute("b-stylesheets")||"").split(/\s+/).filter(Boolean);if(n.length>0){const f=n.flatMap(g=>j.get(g)||[]);f.length>0&&(r.adoptedStyleSheets=[...f])}const l=D.get(c)||{},d=U(o.getAttribute("b-data")||"{}"),i=U(e.getAttribute("b-data")||"{}");e._studs=S({...l,...d,...i,$vars:{},$element:e,$emit:(f,g)=>{e.dispatchEvent(new CustomEvent(f,{detail:g,bubbles:!0,composed:!0}))},get $route(){return Lego.globals.$route},get $go(){return Lego.globals.$go}},e),Object.defineProperty(e,"state",{get(){return this._studs},set(f){Object.assign(this._studs,f)},configurable:!0,enumerable:!1}),r.appendChild(a);const u=r.querySelector("style");if(u&&(u.textContent=u.textContent.replace(/\bself\b/g,":host")),C(r,e),v.add(e),x(e),[...r.children].forEach(A),typeof e._studs.mounted=="function")try{e._studs.mounted.call(e._studs)}catch(f){p.onError(f,"mounted",e)}}let t=e.parentElement;for(;t&&!t._studs;)t=t.parentElement;t&&t._studs&&C(e,t),[...e.children].forEach(A)},k=e=>{if(e._studs&&typeof e._studs.unmounted=="function")try{e._studs.unmounted.call(e._studs)}catch(s){console.error("[Lego] Error in unmounted:",s)}e.shadowRoot&&[...e.shadowRoot.children].forEach(k),v.delete(e),[...e.children].forEach(k)},W=async(e=null,s=null)=>{const c=window.location.pathname,o=window.location.search,t=R.find(d=>d.regex.test(c));if(!t)return;let a=[];if(e)a=e.flatMap(d=>V(d,s));else{const d=document.querySelector("lego-router");d&&(a=[d])}if(a.length===0)return;const r=c.match(t.regex).slice(1),n=Object.fromEntries(t.paramNames.map((d,i)=>[d,r[i]])),l=Object.fromEntries(new URLSearchParams(o));t.middleware&&!await t.middleware(n,Lego.globals)||(Lego.globals.$route.url=c+o,Lego.globals.$route.route=t.path,Lego.globals.$route.params=n,Lego.globals.$route.query=l,Lego.globals.$route.method=history.state?.method||"GET",Lego.globals.$route.body=history.state?.body||null,a.forEach(d=>{if(d){const i=document.createElement(t.tagName);d.replaceChildren(i)}}))},z={snap:A,unsnap:k,init:async(e=document.body,s={})=>{(!e||typeof e.nodeType!="number")&&(e=document.body),q=s.styles||{},p.loader=s.loader;const c=Object.entries(q).map(async([t,a])=>{const r=await Promise.all(a.map(async n=>{try{const d=await(await fetch(n)).text(),i=new CSSStyleSheet;return await i.replace(d),i}catch(l){return console.error(`[Lego] Failed to load stylesheet: ${n}`,l),null}}));j.set(t,r.filter(n=>n!==null))});if(await Promise.all(c),document.querySelectorAll("template[b-id]").forEach(t=>{b[t.getAttribute("b-id")]=t}),new MutationObserver(t=>t.forEach(a=>{a.addedNodes.forEach(r=>{if(r.nodeType===Node.ELEMENT_NODE){A(r);const n=r.tagName.toLowerCase();if(n.includes("-")&&!b[n]&&p.loader&&!v.has(r)){const l=p.loader(n);if(l){const d=typeof l=="string"?fetch(l).then(i=>i.text()):l;Promise.resolve(d).then(i=>z.defineSFC(i,n+".lego")).catch(i=>console.error(`[Lego] Failed to load ${n}:`,i))}}}}),a.removedNodes.forEach(r=>r.nodeType===Node.ELEMENT_NODE&&k(r))})).observe(e,{childList:!0,subtree:!0}),e._studs=Lego.globals,A(e),C(e,e),x(e),s.studio){if(!b["lego-studio"]){const t=document.createElement("script");t.src="https://unpkg.com/@legodom/studio@0.0.2/dist/lego-studio.js",t.onerror=()=>console.warn("[Lego] Failed to load Studio from CDN"),document.head.appendChild(t)}Lego.route("/_/studio","lego-studio"),Lego.route("/_/studio/:component","lego-studio")}R.length>0&&(window.addEventListener("popstate",t=>{const a=t.state?.legoTargets||null;W(a)}),document.addEventListener("submit",t=>{t.preventDefault()}),document.addEventListener("click",t=>{const r=t.composedPath().find(n=>n.tagName==="A"&&(n.hasAttribute("b-target")||n.hasAttribute("b-link")));if(r){t.preventDefault();const n=r.getAttribute("href"),l=r.getAttribute("b-target"),d=l?l.split(/\s+/).filter(Boolean):[],i=r.getAttribute("b-link")!=="false";Lego.globals.$go(n,...d).get(i)}}),W())},globals:S({$route:{url:window.location.pathname,route:"",params:{},query:{},method:"GET",body:null},$go:(e,...s)=>G(e,...s)(document.body)},document.body),defineSFC:(e,s="component.lego")=>{let c="",o="{}",t="",a="",r=e;const n=/<(template|script|style)\b((?:\s+(?:[^>"']|"[^"]*"|'[^']*')*)*)>/i;for(;r;){const i=r.match(n);if(!i)break;const u=i[1].toLowerCase(),f=i[2],g=i[0],m=i.index,y=`</${u}>`,E=m+g.length,w=r.indexOf(y,E);if(w===-1){console.warn(`[Lego] Unclosed <${u}> tag in ${s}`);break}const T=r.slice(E,w);if(u==="template"){c=T.trim();const _=f.match(/b-stylesheets=["']([^"']+)["']/);_&&(t=_[1])}else if(u==="script"){const _=T.trim(),X=_.match(/export\s+default\s+({[\s\S]*})/);o=X?X[1]:_}else u==="style"&&(a=T.trim());r=r.slice(w+y.length)}const l=K(s),d=new Function(`return ${o}`)();a&&(c=`<style>${a}</style>`+c),b[l]=document.createElement("template"),b[l].innerHTML=c,b[l].setAttribute("b-stylesheets",t),D.set(l,d),document.querySelectorAll(l).forEach(i=>!N(i).snapped&&A(i))},define:(e,s,c={},o="")=>{const t=document.createElement("template");t.setAttribute("b-id",e),t.setAttribute("b-stylesheets",o),t.innerHTML=s,b[e]=t,D.set(e,c);try{B.set(e.toLowerCase(),S({...c},document.body))}catch(a){p.onError(a,"define",e)}document.querySelectorAll(e).forEach(A)},getActiveComponentsCount:()=>v.size,getLegos:()=>Object.keys(b),config:p,route:(e,s,c=null)=>{const o=[],t=e.replace(/:([^\/]+)/g,(a,r)=>(o.push(r),"([^/]+)"));R.push({path:e,regex:new RegExp(`^${t}$`),tagName:s,paramNames:o,middleware:c})}};return z})();typeof window<"u"&&(window.Lego=Lego);
+        `), H.set(e, t)); const a = { $ancestors: n => Z(s.self, n), $registry: n => B.get(n.toLowerCase()), $element: s.self, $route: Lego.globals.$route, $go: (n, ...l) => G(n, ...l)(s.self), $emit: (n, l) => { s.self.dispatchEvent(new CustomEvent(n, { detail: l, bubbles: !0, composed: !0 })) } }, r = t.call(o, s.global, s.self, s.event, a); return typeof r == "function" ? r.call(o, s.event) : r
+    } catch (o) { if (c) throw o; p.onError(o, "render-error", s.self); return }
+  }, I = (e, s) => { if (e.type === "checkbox") e.checked !== !!s && (e.checked = !!s); else { const c = s == null ? "" : String(s); e.value !== c && (e.value = c) } }, C = (e, s, c = null) => { const o = s._studs, t = n => { const l = N(n); if (!l.bound) { if (n.hasAttributes()) { const d = n.attributes; for (let i = 0; i < d.length; i++) { const u = d[i]; if (u.name.startsWith("@")) { const f = u.name.slice(1); n.addEventListener(f, g => { try { let m = o; if (c) { const E = h(c.listName, { state: o, global: Lego.globals, self: s })[c.index]; m = Object.assign(Object.create(o), { [c.name]: E }) } h(u.value, { state: m, global: Lego.globals, self: n, event: g }, !0) } catch (m) { p.onError(m, "event-handler", n) } }) } } if (n.hasAttribute("b-sync")) { const i = n.getAttribute("b-sync"), u = () => { try { let f, g; if (c && i.startsWith(c.name + ".")) { const E = h(c.listName, { state: o, global: Lego.globals, self: s })[c.index]; if (!E) return; const w = i.split(".").slice(1); g = w.pop(), f = w.reduce((T, _) => T[_], E) } else { const y = i.split("."); g = y.pop(), f = y.reduce((E, w) => E[w], o) } const m = n.type === "checkbox" ? n.checked : n.value; f && f[g] !== m && (f[g] = m) } catch (f) { p.onError(f, "sync-update", n) } }; n.addEventListener("input", u), n.addEventListener("change", u) } if (n.hasAttribute("b-var")) { const i = n.getAttribute("b-var"); o.$vars && (o.$vars[i] = n) } } l.bound = !0 } }; e instanceof Element && t(e); const a = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT); let r; for (; r = a.nextNode();)t(r) }, Y = e => { const s = [], c = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT); let o; for (; o = c.nextNode();) { if ((r => { let n = r.parentNode; for (; n && n !== e;) { if (n.hasAttribute && n.hasAttribute("b-for")) return !0; n = n.parentNode } return !1 })(o)) continue; const a = r => { if (/\bglobal\b/.test(r)) { const n = e.host || e; N(n).hasGlobalDependency = !0 } }; if (o.nodeType === Node.ELEMENT_NODE) { if (o.hasAttribute("b-if")) { const n = o.getAttribute("b-if"); a(n); const l = document.createComment(`b-if: ${n}`), d = N(o); d.anchor = l, s.push({ type: "b-if", node: o, anchor: l, expr: n }) } if (o.hasAttribute("b-show")) { const n = o.getAttribute("b-show"); a(n), s.push({ type: "b-show", node: o, expr: n }) } if (o.hasAttribute("b-for")) { const n = o.getAttribute("b-for").match(/^\s*(\w+)\s+in\s+([\s\S]+?)\s*$/); n && (a(n[2]), s.push({ type: "b-for", node: o, itemName: n[1], listName: n[2].trim(), template: o.cloneNode(!0) }), o.innerHTML = "") } if (o.hasAttribute("b-text") && s.push({ type: "b-text", node: o, path: o.getAttribute("b-text") }), o.hasAttribute("b-html")) { const n = o.getAttribute("b-html"); a(n), s.push({ type: "b-html", node: o, expr: n }) } o.hasAttribute("b-sync") && s.push({ type: "b-sync", node: o }); const [r] = $();[...o.attributes].forEach(n => { n.value.includes(r) && (a(n.value), s.push({ type: "attr", node: o, attrName: n.name, template: n.value })) }) } else if (o.nodeType === Node.TEXT_NODE) { const [r] = $(); o.textContent.includes(r) && (a(o.textContent), s.push({ type: "text", node: o, template: o.textContent })) } } return s }, Q = (e, s) => { const c = a => { if (a.nodeType === Node.TEXT_NODE) { a._tpl === void 0 && (a._tpl = a.textContent); const r = a._tpl.replace(L(), (n, l) => h(l.trim(), { state: s, global: Lego.globals, self: a }) ?? ""); a.textContent !== r && (a.textContent = r) } else if (a.nodeType === Node.ELEMENT_NODE) { const [r] = $();[...a.attributes].forEach(n => { if (n._tpl === void 0 && (n._tpl = n.value), n._tpl.includes(r)) { const l = n._tpl.replace(L(), (d, i) => h(i.trim(), { state: s, global: Lego.globals, self: a }) ?? ""); n.value !== l && (n.value = l, n.name === "class" && (a.className = l)) } }) } }; c(e); const o = document.createTreeWalker(e, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT); let t; for (; t = o.nextNode();)c(t) }, x = e => { const s = e._studs; if (!s) return; const c = N(e); if (!c.rendering) { c.rendering = !0, p.metrics && p.metrics.onRenderStart && p.metrics.onRenderStart(e); try { const o = e.shadowRoot || e; c.bindings || (c.bindings = Y(o)), c.bindings.forEach(t => { if (t.type === "b-if") { const a = !!h(t.expr, { state: s, global: Lego.globals, self: t.node }), r = !!t.node.parentNode; a && !r ? t.anchor.parentNode && t.anchor.parentNode.replaceChild(t.node, t.anchor) : !a && r && t.node.parentNode.replaceChild(t.anchor, t.node) } if (t.type === "b-show" && (t.node.style.display = h(t.expr, { state: s, global: Lego.globals, self: t.node }) ? "" : "none"), t.type === "b-text" && (t.node.textContent = F(t.path, s)), t.type === "b-html" && (t.node.innerHTML = h(t.expr, { state: s, global: Lego.globals, self: t.node }) || ""), t.type === "b-sync" && I(t.node, F(t.node.getAttribute("b-sync"), s)), t.type === "text") { const a = t.template.replace(L(), (r, n) => h(n.trim(), { state: s, global: Lego.globals, self: t.node }) ?? ""); t.node.textContent !== a && (t.node.textContent = a) } if (t.type === "attr") { const a = t.template.replace(L(), (r, n) => h(n.trim(), { state: s, global: Lego.globals, self: t.node }) ?? ""); t.node.getAttribute(t.attrName) !== a && (t.node.setAttribute(t.attrName, a), t.attrName === "class" && (t.node.className = a)) } if (t.type === "b-for") { const a = h(t.listName, { state: s, global: Lego.globals, self: e }) || []; P.has(t.node) || P.set(t.node, new Map); const r = P.get(t.node), n = new Set; a.forEach((l, d) => { const i = l && typeof l == "object" ? l.__id || (l.__id = Math.random()) : `${d}-${l}`; n.add(i); let u = r.get(i); u || (u = t.template.cloneNode(!0), u.removeAttribute("b-for"), r.set(i, u), C(u, e, { name: t.itemName, listName: t.listName, index: d })); const f = Object.assign(Object.create(s), { [t.itemName]: l }); Q(u, f), u.querySelectorAll("[b-sync]").forEach(g => { const m = g.getAttribute("b-sync"); if (m.startsWith(t.itemName + ".")) { const y = h(t.listName, { state: s, global: Lego.globals, self: e }); I(g, F(m.split(".").slice(1).join("."), y[d])) } }), t.node.children[d] !== u && t.node.insertBefore(u, t.node.children[d] || null) }); for (const [l, d] of r.entries()) n.has(l) || (d.remove(), r.delete(l)) } }), s === Lego.globals && v.forEach(t => { N(t).hasGlobalDependency && x(t) }) } catch (o) { p.onError(o, "render", e) } finally { p.metrics && p.metrics.onRenderEnd && p.metrics.onRenderEnd(e), c.rendering = !1 } } }, A = e => { if (!e || e.nodeType !== Node.ELEMENT_NODE) return; const s = N(e), c = e.tagName.toLowerCase(), o = b[c]; if (o && !s.snapped) { s.snapped = !0; const a = o.content.cloneNode(!0), r = e.attachShadow({ mode: "open" }), n = (o.getAttribute("b-stylesheets") || "").split(/\s+/).filter(Boolean); if (n.length > 0) { const f = n.flatMap(g => j.get(g) || []); f.length > 0 && (r.adoptedStyleSheets = [...f]) } const l = D.get(c) || {}, d = U(o.getAttribute("b-data") || "{}"), i = U(e.getAttribute("b-data") || "{}"); e._studs = S({ ...l, ...d, ...i, $vars: {}, $element: e, $emit: (f, g) => { e.dispatchEvent(new CustomEvent(f, { detail: g, bubbles: !0, composed: !0 })) }, get $route() { return Lego.globals.$route }, get $go() { return Lego.globals.$go } }, e), Object.defineProperty(e, "state", { get() { return this._studs }, set(f) { Object.assign(this._studs, f) }, configurable: !0, enumerable: !1 }), r.appendChild(a); const u = r.querySelector("style"); if (u && (u.textContent = u.textContent.replace(/\bself\b/g, ":host")), C(r, e), v.add(e), x(e), [...r.children].forEach(A), typeof e._studs.mounted == "function") try { e._studs.mounted.call(e._studs) } catch (f) { p.onError(f, "mounted", e) } } let t = e.parentElement; for (; t && !t._studs;)t = t.parentElement; t && t._studs && C(e, t), [...e.children].forEach(A) }, k = e => { if (e._studs && typeof e._studs.unmounted == "function") try { e._studs.unmounted.call(e._studs) } catch (s) { console.error("[Lego] Error in unmounted:", s) } e.shadowRoot && [...e.shadowRoot.children].forEach(k), v.delete(e), [...e.children].forEach(k) }, W = async (e = null, s = null) => { const c = window.location.pathname, o = window.location.search, t = R.find(d => d.regex.test(c)); if (!t) return; let a = []; if (e) a = e.flatMap(d => V(d, s)); else { const d = document.querySelector("lego-router"); d && (a = [d]) } if (a.length === 0) return; const r = c.match(t.regex).slice(1), n = Object.fromEntries(t.paramNames.map((d, i) => [d, r[i]])), l = Object.fromEntries(new URLSearchParams(o)); t.middleware && !await t.middleware(n, Lego.globals) || (Lego.globals.$route.url = c + o, Lego.globals.$route.route = t.path, Lego.globals.$route.params = n, Lego.globals.$route.query = l, Lego.globals.$route.method = history.state?.method || "GET", Lego.globals.$route.body = history.state?.body || null, a.forEach(d => { if (d) { const i = document.createElement(t.tagName); d.replaceChildren(i) } })) }, z = { snap: A, unsnap: k, init: async (e = document.body, s = {}) => { (!e || typeof e.nodeType != "number") && (e = document.body), q = s.styles || {}, p.loader = s.loader; const c = Object.entries(q).map(async ([t, a]) => { const r = await Promise.all(a.map(async n => { try { const d = await (await fetch(n)).text(), i = new CSSStyleSheet; return await i.replace(d), i } catch (l) { return console.error(`[Lego] Failed to load stylesheet: ${n}`, l), null } })); j.set(t, r.filter(n => n !== null)) }); if (await Promise.all(c), document.querySelectorAll("template[b-id]").forEach(t => { b[t.getAttribute("b-id")] = t }), new MutationObserver(t => t.forEach(a => { a.addedNodes.forEach(r => { if (r.nodeType === Node.ELEMENT_NODE) { A(r); const n = r.tagName.toLowerCase(); if (n.includes("-") && !b[n] && p.loader && !v.has(r)) { const l = p.loader(n); if (l) { const d = typeof l == "string" ? fetch(l).then(i => i.text()) : l; Promise.resolve(d).then(i => z.defineLegoFile(i, n + ".lego")).catch(i => console.error(`[Lego] Failed to load ${n}:`, i)) } } } }), a.removedNodes.forEach(r => r.nodeType === Node.ELEMENT_NODE && k(r)) })).observe(e, { childList: !0, subtree: !0 }), e._studs = Lego.globals, A(e), C(e, e), x(e), s.studio) { if (!b["lego-studio"]) { const t = document.createElement("script"); t.src = "https://unpkg.com/@legodom/studio@0.0.2/dist/lego-studio.js", t.onerror = () => console.warn("[Lego] Failed to load Studio from CDN"), document.head.appendChild(t) } Lego.route("/_/studio", "lego-studio"), Lego.route("/_/studio/:component", "lego-studio") } R.length > 0 && (window.addEventListener("popstate", t => { const a = t.state?.legoTargets || null; W(a) }), document.addEventListener("submit", t => { t.preventDefault() }), document.addEventListener("click", t => { const r = t.composedPath().find(n => n.tagName === "A" && (n.hasAttribute("b-target") || n.hasAttribute("b-link"))); if (r) { t.preventDefault(); const n = r.getAttribute("href"), l = r.getAttribute("b-target"), d = l ? l.split(/\s+/).filter(Boolean) : [], i = r.getAttribute("b-link") !== "false"; Lego.globals.$go(n, ...d).get(i) } }), W()) }, globals: S({ $route: { url: window.location.pathname, route: "", params: {}, query: {}, method: "GET", body: null }, $go: (e, ...s) => G(e, ...s)(document.body) }, document.body), defineSFC: (e, s = "component.lego") => { let c = "", o = "{}", t = "", a = "", r = e; const n = /<(template|script|style)\b((?:\s+(?:[^>"']|"[^"]*"|'[^']*')*)*)>/i; for (; r;) { const i = r.match(n); if (!i) break; const u = i[1].toLowerCase(), f = i[2], g = i[0], m = i.index, y = `</${u}>`, E = m + g.length, w = r.indexOf(y, E); if (w === -1) { console.warn(`[Lego] Unclosed <${u}> tag in ${s}`); break } const T = r.slice(E, w); if (u === "template") { c = T.trim(); const _ = f.match(/b-stylesheets=["']([^"']+)["']/); _ && (t = _[1]) } else if (u === "script") { const _ = T.trim(), X = _.match(/export\s+default\s+({[\s\S]*})/); o = X ? X[1] : _ } else u === "style" && (a = T.trim()); r = r.slice(w + y.length) } const l = K(s), d = new Function(`return ${o}`)(); a && (c = `<style>${a}</style>` + c), b[l] = document.createElement("template"), b[l].innerHTML = c, b[l].setAttribute("b-stylesheets", t), D.set(l, d), document.querySelectorAll(l).forEach(i => !N(i).snapped && A(i)) }, define: (e, s, c = {}, o = "") => { const t = document.createElement("template"); t.setAttribute("b-id", e), t.setAttribute("b-stylesheets", o), t.innerHTML = s, b[e] = t, D.set(e, c); try { B.set(e.toLowerCase(), S({ ...c }, document.body)) } catch (a) { p.onError(a, "define", e) } document.querySelectorAll(e).forEach(A) }, getActiveBlocksCount: () => v.size, getLegos: () => Object.keys(b), config: p, route: (e, s, c = null) => { const o = [], t = e.replace(/:([^\/]+)/g, (a, r) => (o.push(r), "([^/]+)")); R.push({ path: e, regex: new RegExp(`^${t}$`), tagName: s, paramNames: o, middleware: c }) } }; return z
+})(); typeof window < "u" && (window.Lego = Lego);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lego-dom",
-  "version": "1.5.1",
+  "version": "2.0.2",
   "license": "MIT",
   "description": "A feature-rich web components + SFC frontend framework",
   "main": "main.js",

package/parse-lego.js

@@ -1,5 +1,5 @@
 /**
- * Parser for .lego Single File Components
+ * Parser for .lego Single File Blocks (SFC)
  * Extracts template, script, and style sections from .lego files
  */
 
@@ -7,15 +7,15 @@
  * Parse a .lego file content into structured sections
  * @param {string} content - Raw .lego file content
  * @param {string} filename - Filename for error reporting
- * @returns {{template: string, script: string, style: string, stylesAttr: string, componentName: string}}
+ * @returns {{template: string, script: string, style: string, stylesAttr: string, blockName: string}}
  */
-export function parseLego(content, filename = 'component.lego') {
+export function parseLego(content, filename = 'block.lego') {
   const result = {
     template: '',
     script: '',
     style: '',
     stylesAttr: '',
-    componentName: deriveComponentName(filename)
+    blockName: deriveBlockName(filename)
   };
 
   let remaining = content;
@@ -75,23 +75,23 @@ export function parseLego(content, filename = 'component.lego') {
 }
 
 /**
- * Derive component name from filename
- * e.g., "sample-component.lego" -> "sample-component"
+ * Derive block name from filename
+ * e.g., "sample-block.lego" -> "sample-block"
  * @param {string} filename
  * @returns {string}
  */
-export function deriveComponentName(filename) {
+export function deriveBlockName(filename) {
   const basename = filename.split('/').pop();
   return basename.replace(/\.lego$/, '');
 }
 
 /**
- * Generate Lego.define() code from parsed .lego file
+ * Generate Lego.block() code from parsed .lego file
  * @param {object} parsed - Parsed .lego file object
  * @returns {string} - JavaScript code string
  */
-export function generateDefineCall(parsed) {
-  const { componentName, template, script, style, stylesAttr } = parsed;
+export function generateBlockCall(parsed) {
+  const { blockName, template, script, style, stylesAttr } = parsed;
 
   // Build template HTML
   let templateHTML = '';
@@ -115,8 +115,8 @@ export function generateDefineCall(parsed) {
     }
   }
 
-  // Generate the Lego.define call
-  return `Lego.define('${componentName}', \`${escapeTemplate(templateHTML)}\`, ${logicCode}, '${stylesAttr}');`;
+  // Generate the Lego.block call
+  return `Lego.block('${blockName}', \`${escapeTemplate(templateHTML)}\`, ${logicCode}, '${stylesAttr}');`;
 }
 
 /**
@@ -137,15 +137,15 @@ export function validateLego(parsed) {
   const errors = [];
 
   if (!parsed.template && !parsed.script && !parsed.style) {
-    errors.push('Component must have at least one section: <template>, <script>, or <style>');
+    errors.push('Block must have at least one section: <template>, <script>, or <style>');
   }
 
-  if (!parsed.componentName) {
-    errors.push('Unable to derive component name from filename');
+  if (!parsed.blockName) {
+    errors.push('Unable to derive block name from filename');
   }
 
-  if (parsed.componentName && !/^[a-z][a-z0-9]*(-[a-z0-9]+)+$/.test(parsed.componentName)) {
-    errors.push(`Component name "${parsed.componentName}" must be kebab-case with at least one hyphen (e.g., "my-component")`);
+  if (parsed.blockName && !/^[a-z][a-z0-9]*(-[a-z0-9]+)+$/.test(parsed.blockName)) {
+    errors.push(`Block name "${parsed.blockName}" must be kebab-case with at least one hyphen (e.g., "my-block")`);
   }
 
   return {

package/vite-plugin.js

@@ -1,25 +1,25 @@
 /**
- * Vite plugin for Lego Single File Components
+ * Vite plugin for Lego Single File Blocks
  * Auto-discovers and transforms .lego files
  */
 
-import { parseLego, generateDefineCall, validateLego } from './parse-lego.js';
+import { parseLego, generateBlockCall, validateLego } from './parse-lego.js';
 import path from 'path';
 import fg from 'fast-glob';
 
-const VIRTUAL_MODULE_ID = 'virtual:lego-components';
+const VIRTUAL_MODULE_ID = 'virtual:lego-blocks';
 const RESOLVED_VIRTUAL_MODULE_ID = '\0' + VIRTUAL_MODULE_ID;
 
 /**
  * Vite plugin for Lego SFC support
  * @param {object} options - Plugin options
- * @param {string} options.componentsDir - Directory to search for .lego files
+ * @param {string} options.blocksDir - Directory to search for .lego files
  * @param {string[]} options.include - Glob patterns to include
  * @returns {import('vite').Plugin}
  */
 export default function legoPlugin(options = {}) {
   const {
-    componentsDir = './src/components',
+    blocksDir = './src/blocks',
     include = ['**/*.lego'],
     importPath = 'lego-dom'
   } = options;
@@ -30,7 +30,7 @@ export default function legoPlugin(options = {}) {
 
   const getSearchPath = () => {
     const root = config?.root || process.cwd();
-    return path.resolve(root, componentsDir);
+    return path.resolve(root, blocksDir);
   };
 
   const scanFiles = async () => {
@@ -75,13 +75,13 @@ export default function legoPlugin(options = {}) {
       server.watcher.add(searchPath);
       server.watcher.on('add', (file) => {
         if (file.endsWith('.lego')) {
-          console.log(`[vite-plugin-lego] New component detected: ${path.basename(file)}`);
+          console.log(`[vite-plugin-lego] New block detected: ${path.basename(file)}`);
           scanFiles().then(invalidateVirtualModule);
         }
       });
       server.watcher.on('unlink', (file) => {
         if (file.endsWith('.lego')) {
-          console.log(`[vite-plugin-lego] Component removed: ${path.basename(file)}`);
+          console.log(`[vite-plugin-lego] Block removed: ${path.basename(file)}`);
           scanFiles().then(invalidateVirtualModule);
         }
       });
@@ -90,7 +90,7 @@ export default function legoPlugin(options = {}) {
     async buildStart() {
       await scanFiles();
       if (legoFiles.length > 0) {
-        console.log(`[vite-plugin-lego] Discovered ${legoFiles.length} component(s):`);
+        console.log(`[vite-plugin-lego] Discovered ${legoFiles.length} block(s):`);
         legoFiles.forEach(file => {
           const name = path.basename(file);
           console.log(`  - ${name}`);
@@ -105,13 +105,13 @@ export default function legoPlugin(options = {}) {
     },
 
     async load(id) {
-      // Handle virtual module that imports all .lego components
+      // Handle virtual module that imports all .lego blocks
       if (id === RESOLVED_VIRTUAL_MODULE_ID) {
         const imports = legoFiles.map((file, index) =>
-          `import component${index} from '${file}?lego-component';`
+          `import block${index} from '${file}?lego-block';`
         ).join('\n');
 
-        const exports = `export default function registerComponents() {\n  // Components are auto-registered when imported\n}`;
+        const exports = `export default function registerBlocks() {\n  // Blocks are auto-registered when imported\n}`;
 
         return `${imports}\n\n${exports}`;
       }
@@ -130,14 +130,14 @@ export default function legoPlugin(options = {}) {
           throw new Error(`Invalid .lego file "${filename}":\n${validation.errors.join('\n')}`);
         }
 
-        const defineCall = generateDefineCall(parsed);
+        const blockCall = generateBlockCall(parsed);
 
         return `
 import { Lego } from '${importPath}';
 
-${defineCall}
+${blockCall}
 
-export default '${parsed.componentName}';
+export default '${parsed.blockName}';
 `;
       }
     },
@@ -145,7 +145,7 @@ export default '${parsed.componentName}';
     handleHotUpdate({ file, server }) {
       if (file.endsWith('.lego')) {
         console.log(`[vite-plugin-lego] Hot reload: ${path.basename(file)}`);
-        // Trigger full reload for component content changes
+        // Trigger full reload for block content changes
         server.ws.send({
           type: 'full-reload',
           path: '*'

package/parse-lego.test.js

@@ -1,107 +0,0 @@
-import { describe, it, expect } from 'vitest';
-import { parseLego, generateDefineCall, validateLego, deriveComponentName } from './parse-lego.js';
-
-describe('Lego SFC Parser', () => {
-  describe('deriveComponentName', () => {
-    it('should derive component name from filename', () => {
-      expect(deriveComponentName('sample-component.lego')).toBe('sample-component');
-      expect(deriveComponentName('path/to/my-button.lego')).toBe('my-button');
-    });
-  });
-
-  describe('parseLego', () => {
-    it('should parse all three sections', () => {
-      const content = `
-<template>
-  <h1>{{ title }}</h1>
-</template>
-
-<script>
-export default {
-  title: 'Hello'
-}
-</script>
-
-<style>
-  self { color: red; }
-</style>
-      `;
-
-      const result = parseLego(content, 'test-component.lego');
-      expect(result.componentName).toBe('test-component');
-      expect(result.template).toContain('<h1>{{ title }}</h1>');
-      expect(result.script).toContain('export default');
-      expect(result.style).toContain('self { color: red; }');
-    });
-
-    it('should handle components with only template', () => {
-      const content = '<template><p>Hello</p></template>';
-      const result = parseLego(content, 'simple.lego');
-      expect(result.template).toBe('<p>Hello</p>');
-      expect(result.script).toBe('');
-      expect(result.style).toBe('');
-    });
-
-    it('should handle components with only script', () => {
-      const content = '<script>export default { count: 0 }</script>';
-      const result = parseLego(content, 'logic.lego');
-      expect(result.script).toContain('count: 0');
-      expect(result.template).toBe('');
-    });
-  });
-
-  describe('validateLego', () => {
-    it('should validate correct component name', () => {
-      const parsed = {
-        componentName: 'my-component',
-        template: '<div>Test</div>',
-        script: '',
-        style: ''
-      };
-      const result = validateLego(parsed);
-      expect(result.valid).toBe(true);
-      expect(result.errors).toHaveLength(0);
-    });
-
-    it('should reject invalid component names', () => {
-      const parsed = {
-        componentName: 'MyComponent',  // Not kebab-case
-        template: '<div>Test</div>',
-        script: '',
-        style: ''
-      };
-      const result = validateLego(parsed);
-      expect(result.valid).toBe(false);
-      expect(result.errors.length).toBeGreaterThan(0);
-    });
-
-    it('should require at least one section', () => {
-      const parsed = {
-        componentName: 'empty-component',
-        template: '',
-        script: '',
-        style: ''
-      };
-      const result = validateLego(parsed);
-      expect(result.valid).toBe(false);
-    });
-  });
-
-  describe('generateDefineCall', () => {
-    it('should generate valid Lego.define call', () => {
-      const parsed = {
-        componentName: 'test-comp',
-        template: '<button>Click</button>',
-        script: 'export default { count: 0 }',
-        style: 'self { color: blue; }'
-      };
-
-      const result = generateDefineCall(parsed);
-      expect(result).toContain('Lego.define');
-      expect(result).toContain('test-comp');
-      expect(result).toContain('<button>Click</button>');
-      expect(result).toContain('{ count: 0 }');
-      expect(result).toContain('self { color: blue; }');
-    });
-  });
-});