lego-dom 1.3.3 → 1.4.0

package/CHANGELOG.md

@@ -2,6 +2,67 @@
 
 All notable changes to this project will be documented in this file.
 
+## [1.4.0] - 2026-01-16
+
+### Breaking Changes
+
+- **`$ancestors()` now returns element instead of state:** For consistency with `$element`, `$ancestors()` now returns the ancestor element. Access state via `.state` property.
+  ```javascript
+  // Before (v1.3.x)
+  const userId = this.$ancestors('user-profile').userId;
+  
+  // After (v1.4.0)
+  const userId = this.$ancestors('user-profile').state.userId;
+  ```
+  **Migration:** Add `.state` after all `$ancestors()` calls that access component state.
+
+## [1.3.5] - 2026-01-16
+
+### Features
+
+- **Lego Studio:** Added zero-config component development environment. Enable with `Lego.init(document.body, { studio: true })` and navigate to `/_/studio` to browse, preview, and inspect components in real-time.
+  - Component browser with search/filter
+  - Live component preview in isolation
+  - Real-time state inspector with JSON editor
+  - URL deep linking for sharing components
+  - Published as separate package: `@legodom/studio@0.0.2`
+
+- **Advanced API:** Exposed `Lego.snap()` and `Lego.unsnap()` for manual component initialization and cleanup. Useful for building dev tools, testing, and dynamic component creation in Shadow DOMs.
+  ```javascript
+  const el = document.createElement('my-component');
+  mount.appendChild(el);
+  Lego.snap(el);  // Manually initialize
+  
+  // Later...
+  Lego.unsnap(el);  // Clean up
+  ```
+
+- **Component State Property:** Added `element.state` getter/setter to all component instances for cleaner state access.
+  ```javascript
+  // Before (internal API)
+  const state = element._studs;
+  
+  // After (public API)
+  const state = element.state;
+  element.state = { count: 5 };  // Merges into existing state
+  ```
+
+### Documentation
+
+- **Advanced API Guide:** Added comprehensive documentation for `Lego.snap()` and `Lego.unsnap()` at `/docs/api/advanced.md`
+- **Lego Studio Guide:** Added full Studio documentation at `/docs/guide/studio.md` with quick start, examples, and troubleshooting
+
+### Improvements
+
+- **Studio CDN Loading:** Studio is loaded on-demand from unpkg CDN when `studio: true` is set, keeping core LegoDOM lightweight
+- **State Reactivity:** The `element.state` setter uses `Object.assign()` to merge new values while preserving the reactive Proxy
+
+## [1.3.4] - 2026-01-16
+
+### Improvements
+
+- **Minified Build:** Added a build script (`npm run build`) that uses `esbuild` to generate a `main.min.js` file, reducing file size by ~55% for optimal CDN performance.
+
 ## [1.3.3] - 2026-01-16
 
 ### Fixes

package/main.js

@@ -193,11 +193,11 @@ const Lego = (() => {
     return current ?? '';
   };
 
-  const findAncestorState = (el, tagName) => {
+  const findAncestor = (el, tagName) => {
     let parent = el.parentElement || el.getRootNode().host;
     while (parent) {
       if (parent.tagName && parent.tagName.toLowerCase() === tagName.toLowerCase()) {
-        return parent._studs;
+        return parent;
       }
       parent = parent.parentElement || (parent.getRootNode && parent.getRootNode().host);
     }
@@ -231,7 +231,7 @@ const Lego = (() => {
       }
 
       const helpers = {
-        $ancestors: (tag) => findAncestorState(context.self, tag),
+        $ancestors: (tag) => findAncestor(context.self, tag),
         $registry: (tag) => sharedStates.get(tag.toLowerCase()),
         $element: context.self,
         $route: Lego.globals.$route,
@@ -568,6 +568,13 @@ const Lego = (() => {
         get $go() { return Lego.globals.$go }
       }, el);
 
+      Object.defineProperty(el, 'state', {
+        get() { return this._studs },
+        set(v) { Object.assign(this._studs, v) },
+        configurable: true,
+        enumerable: false
+      });
+
       shadow.appendChild(tpl);
 
       const style = shadow.querySelector('style');
@@ -649,6 +656,8 @@ const Lego = (() => {
   };
 
   const publicAPI = {
+    snap,
+    unsnap,
     init: async (root = document.body, options = {}) => {
       if (!root || typeof root.nodeType !== 'number') root = document.body;
       styleConfig = options.styles || {};
@@ -706,6 +715,17 @@ const Lego = (() => {
       bind(root, root);
       render(root);
 
+      if (options.studio) {
+        if (!registry['lego-studio']) {
+          const script = document.createElement('script');
+          script.src = 'https://unpkg.com/@legodom/studio@0.0.2/dist/lego-studio.js';
+          script.onerror = () => console.warn('[Lego] Failed to load Studio from CDN');
+          document.head.appendChild(script);
+        }
+        Lego.route('/_/studio', 'lego-studio');
+        Lego.route('/_/studio/:component', 'lego-studio');
+      }
+
       if (routes.length > 0) {
         // Smart History: Restore surgical targets on Back button
         window.addEventListener('popstate', (event) => {
@@ -826,6 +846,7 @@ const Lego = (() => {
     },
     // For specific test validation
     getActiveComponentsCount: () => activeComponents.size,
+    getLegos: () => Object.keys(registry),
     config, // Expose config for customization
     route: (path, tagName, middleware = null) => {
       const paramNames = [];

package/main.min.js

@@ -0,0 +1,7 @@
+const Lego=(()=>{const w={},M=new WeakMap,k=new WeakMap,O=new WeakMap,$=new Set,P=new Map,B=new Map,H=new Map,q=new Map;let G={};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)]},j=(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 F(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;return{add:o=>{!o||c||(s.add(o),!e&&(e=!0,requestAnimationFrame(()=>{c=!0;const t=Array.from(s);s.clear(),e=!1,t.forEach(a=>C(a)),setTimeout(()=>{t.forEach(a=>{const r=a._studs;if(r&&typeof r.updated=="function")try{r.updated.call(r)}catch(n){console.error("[Lego] Error in updated hook:",n)}}),c=!1},0)})))}}})(),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},I=e=>{try{return new Function(`return (${e})`)()}catch(s){return console.error("[Lego] Failed to parse b-data:",e,s),{}}},N=e=>(k.has(e)||k.set(e,{snapped:!1,bindings:null,bound:!1,rendering:!1,anchor:null,hasGlobalDependency:!1}),k.get(e)),D=(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._studs;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)=>j(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}},z=(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)}},x=(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 y=h(c.listName,{state:o,global:Lego.globals,self:s})[c.index];m=Object.assign(Object.create(o),{[c.name]:y})}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 y=h(c.listName,{state:o,global:Lego.globals,self:s})[c.index];if(!y)return;const E=i.split(".").slice(1);g=E.pop(),f=E.reduce((T,A)=>T[A],y)}else{const b=i.split(".");g=b.pop(),f=b.reduce((y,E)=>y[E],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)},C=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=D(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"&&z(t.node,D(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})||[];O.has(t.node)||O.set(t.node,new Map);const r=O.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),x(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 b=h(t.listName,{state:s,global:Lego.globals,self:e});z(g,D(m.split(".").slice(1).join("."),b[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&&$.forEach(t=>{N(t).hasGlobalDependency&&C(t)})}catch(o){p.onError(o,"render",e)}finally{p.metrics&&p.metrics.onRenderEnd&&p.metrics.onRenderEnd(e),c.rendering=!1}}},v=e=>{if(!e||e.nodeType!==Node.ELEMENT_NODE)return;const s=N(e),c=e.tagName.toLowerCase(),o=w[c];if(o&&!s.snapped){s.snapped=!0;const a=o.content.cloneNode(!0),r=e.attachShadow({mode:"open"}),n=(o.getAttribute("b-styles")||"").split(/\s+/).filter(Boolean);if(n.length>0){const f=n.flatMap(g=>q.get(g)||[]);f.length>0&&(r.adoptedStyleSheets=[...f])}const l=P.get(c)||{},d=I(o.getAttribute("b-data")||"{}"),i=I(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),r.appendChild(a);const u=r.querySelector("style");if(u&&(u.textContent=u.textContent.replace(/\bself\b/g,":host")),x(r,e),$.add(e),C(e),[...r.children].forEach(v),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&&x(e,t),[...e.children].forEach(v)},W=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(W),$.delete(e),[...e.children].forEach(W)},F=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)}}))},U={init:async(e=document.body,s={})=>{(!e||typeof e.nodeType!="number")&&(e=document.body),G=s.styles||{},p.loader=s.loader;const c=Object.entries(G).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}}));q.set(t,r.filter(n=>n!==null))});await Promise.all(c),document.querySelectorAll("template[b-id]").forEach(t=>{w[t.getAttribute("b-id")]=t}),new MutationObserver(t=>t.forEach(a=>{a.addedNodes.forEach(r=>{if(r.nodeType===Node.ELEMENT_NODE){v(r);const n=r.tagName.toLowerCase();if(n.includes("-")&&!w[n]&&p.loader&&!$.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=>U.defineSFC(i,n+".lego")).catch(i=>console.error(`[Lego] Failed to load ${n}:`,i))}}}}),a.removedNodes.forEach(r=>r.nodeType===Node.ELEMENT_NODE&&W(r))})).observe(e,{childList:!0,subtree:!0}),e._studs=Lego.globals,v(e),x(e,e),C(e),R.length>0&&(window.addEventListener("popstate",t=>{const a=t.state?.legoTargets||null;F(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)}}),F())},globals:S({$route:{url:window.location.pathname,route:"",params:{},query:{},method:"GET",body:null},$go:(e,...s)=>j(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,b=`</${u}>`,y=m+g.length,E=r.indexOf(b,y);if(E===-1){console.warn(`[Lego] Unclosed <${u}> tag in ${s}`);break}const T=r.slice(y,E);if(u==="template"){c=T.trim();const A=f.match(/b-styles=["']([^"']+)["']/);A&&(t=A[1])}else if(u==="script"){const A=T.trim(),X=A.match(/export\s+default\s+({[\s\S]*})/);o=X?X[1]:A}else u==="style"&&(a=T.trim());r=r.slice(E+b.length)}const l=K(s),d=new Function(`return ${o}`)();a&&(c=`<style>${a}</style>`+c),w[l]=document.createElement("template"),w[l].innerHTML=c,w[l].setAttribute("b-styles",t),P.set(l,d),document.querySelectorAll(l).forEach(i=>!N(i).snapped&&v(i))},define:(e,s,c={},o="")=>{const t=document.createElement("template");t.setAttribute("b-id",e),t.setAttribute("b-styles",o),t.innerHTML=s,w[e]=t,P.set(e,c);try{B.set(e.toLowerCase(),S({...c},document.body))}catch(a){p.onError(a,"define",e)}document.querySelectorAll(e).forEach(v)},getActiveComponentsCount:()=>$.size,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 U})();typeof window<"u"&&(window.Lego=Lego);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lego-dom",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "license": "MIT",
   "description": "A feature-rich web components + SFC frontend framework",
   "main": "main.js",
@@ -22,11 +22,13 @@
   "author": "Tersoo Ortserga",
   "scripts": {
     "test": "vitest run",
+    "build": "esbuild main.js --minify --outfile=main.min.js",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
     "docs:preview": "vitepress preview docs"
   },
   "devDependencies": {
+    "esbuild": "^0.27.2",
     "jsdom": "^22.0.0",
     "vitepress": "^1.6.4",
     "vitest": "^1.0.0"

package/vite-plugin.js

@@ -153,20 +153,6 @@ export default '${parsed.componentName}';
       }
     },
 
-    transform(code, id) {
-      if (id.endsWith('.lego') && !id.includes('?')) {
-        const parsed = parseLego(code, path.basename(id));
-        const validation = validateLego(parsed);
-
-        if (!validation.valid) {
-          throw new Error(`Invalid .lego file:\n${validation.errors.join('\n')}`);
-        }
 
-        return {
-          code: generateDefineCall(parsed),
-          map: null
-        };
-      }
-    }
   };
 }

package/.github/workflows/deploy-docs.yml

@@ -1,56 +0,0 @@
-name: Deploy Documentation
-
-on:
-  push:
-    branches: [main]
-  workflow_dispatch:
-
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-concurrency:
-  group: pages
-  cancel-in-progress: false
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: npm
-
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Build with VitePress
-        run: npm run docs:build
-
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: docs/.vitepress/dist
-
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    needs: build
-    runs-on: ubuntu-latest
-    name: Deploy
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4

package/.legodom

@@ -1,87 +0,0 @@
-# LegoDOM Framework Definition (.legodom)
-
-This file defines the valid syntax, API, and behavior of the LegoDOM framework. Use this context to write valid `.lego` components and understand the runtime behavior.
-
-## 1. Component Structure (.lego)
-A `.lego` file is a Single File Component (SFC) composed of three sections:
-
-```html
-<template b-styles="optional-style-id">
-  <!-- HTML template with directives -->
-</template>
-
-<script>
-  export default {
-    // Reactive State
-    count: 0,
-    
-    // Lifecycle Hooks
-    mounted() { console.log('Mounted'); },
-    updated() { console.log('State updated'); },
-    unmounted() { console.log('Destroyed'); },
-
-    // Methods
-    increment() { this.count++ }
-  }
-</script>
-
-<style>
-  /* Scoped CSS. 'self' is replaced with ':host' automatically */
-  self { display: block; }
-  h1 { color: blue; }
-</style>
-```
-
-## 2. Template Directives
-
-| Directive | Syntax | Description |
-|-----------|--------|-------------|
-| **b-if** | `b-if="expr"` | Conditionally renders element if `expr` is truthy. Replaced by comment anchor if false. |
-| **b-show**| `b-show="expr"` | Toggles `display: none` based on `expr`. |
-| **b-for** | `b-for="item in list"` | Renders element for each item in `list`. `item` is available in scope. |
-| **b-text**| `b-text="path"` | Sets `textContent` to value at `path` (e.g. `user.name`). |
-| **b-html**| `b-html="expr"` | Sets `innerHTML` to result of `expr`. **Unsafe**. |
-| **b-sync**| `b-sync="path"` | Two-way binding for inputs. Updates `state.path` on input/change. |
-| **Event** | `@event="expr"` | Native event listener. `event` is available in scope. E.g. `@click="save()"`. |
-| **Interpolation** | `[[ expr ]]` | Text interpolation. Delimiters are `[[` and `]]` by default. |
-
-Note: `b-data` can be used on `<template>` or the custom element tag to inject initial state from JSON string.
-
-## 3. Script Context & Helpers
-The `script` exports a default object which becomes the reactive state (`this`).
-Inside methods and template expressions, the following helpers are available:
-
-### Scope
-- **this**: The reactive state of the component.
-- **event**: The native DOM event (only in `@event` handlers).
-
-### Helpers
-- **$element**: The component's host DOM element.
-- **$emit(name, detail)**: Dispatches a CustomEvent `name` with `detail` (bubbles: true, composed: true).
-- **$go(path, ...targets)**: Router navigation helper. Returns object with method calls.
-  - `this.$go('/url', '#target').get()`
-  - `this.$go('/api', '#response').post({data})`
-- **$ancestors(tagName)**: Finds the state of the nearest ancestor component with `tagName`.
-- **$registry(tagName)**: Access shared state of logical-only components defined via `Lego.define`.
-- **$route**: Global route state object.
-
-## 4. Router & Targets
-LegoDOM uses a "Target-Oriented" router. Navigation updates specific DOM elements (targets) rather than full page reloads.
-
-- **Definition**: `Lego.route('/path/:id', 'tag-name', middleware)`
-- **Targets**:
-  - `string`: CSS selector (e.g., `#main`, `user-card`).
-  - `function`: `(allComponents) => elements`
-- **Usage**:
-  - HTML: `<a href="/path" b-target="#main">Link</a>` creates a surgical navigation link.
-  - JS: `this.$go('/path', '#main').get()`
-
-## 5. Lifecycle Hooks
-- **mounted()**: Called when the component is attached to DOM, shadow root created, and initial render complete.
-- **updated()**: Called after reactive state changes have been batched and applied to the DOM.
-- **unmounted()**: Called when component is removed from the DOM.
-
-## 6. Global Configuration
-- `Lego.init(root, { styles: { ... }, loader: callback })`: Initializes the app.
-- `Lego.globals`: Global reactive state shared across all components.
-```

package/docs/.vitepress/config.js

@@ -1,162 +0,0 @@
-import { defineConfig } from 'vitepress';
-
-export default defineConfig({
-  title: 'Lego',
-  description: 'A feature-rich web components + SFC frontend framework',
-  base: '/legodom/',
-
-  themeConfig: {
-    logo: '/logo.svg',
-
-    nav: [
-      { text: 'Guide', link: '/guide/' },
-      { text: 'Tutorial', link: '/tutorial/' },
-      { text: 'Contributing', link: '/contributing/' },
-      { text: 'API', link: '/api/' },
-      { text: 'Examples', link: '/examples/' },
-      { text: 'Router', link: '/router/' },
-      {
-        text: 'v1.3.3',
-        items: [
-          { text: 'Changelog', link: 'https://github.com/rayattack/LegoDOM/releases' }
-
-        ]
-      }
-    ],
-
-    sidebar: {
-      '/contributing/': [
-        {
-          text: 'Contributing',
-          items: [
-            { text: 'Topic 1 - Welcome', link: '/contributing/01-welcome' },
-            { text: 'Topic 2 - The Registry', link: '/contributing/02-registry' },
-            { text: 'Topic 3 - Batching', link: '/contributing/03-batcher' },
-            { text: 'Topic 4 - Reactivity', link: '/contributing/04-reactivity' },
-            { text: 'Topic 5 - Caching', link: '/contributing/05-caching' },
-            { text: 'Topic 6 - LegoDOM Init', link: '/contributing/06-init' },
-            { text: 'Topic 7 - Observer', link: '/contributing/07-observer' },
-            { text: 'Topic 8 - Snap', link: '/contributing/08-snap' },
-            { text: 'Topic 9 - Diffing', link: '/contributing/09-diffing' },
-            { text: 'Topic 10 - State', 'link': '/contributing/10-studs' },
-            { text: 'Topic 11 - Scanner', 'link': '/contributing/11-scanner' },
-            { text: 'Topic 12 - Render', 'link': '/contributing/12-render' },
-            { text: 'Topic 13 - Directives', 'link': '/contributing/13-directives' },
-            { text: 'Topic 14 - Events', 'link': '/contributing/14-events' },
-            { text: 'Topic 15 - Router', 'link': '/contributing/15-router' },
-            { text: 'Topic 16 - State', 'link': '/contributing/16-state' },
-            { text: 'Topic 17 - LegoDOM', 'link': '/contributing/17-legodom' },
-          ]
-        }
-      ],
-      '/tutorial/': [
-        {
-          text: 'Tutorial: Your First App',
-          items: [
-            { text: 'Overview', link: '/tutorial/' },
-            { text: '1. Project Setup', link: '/tutorial/01-project-setup' },
-            { text: '2. Your First Component', link: '/tutorial/02-your-first-component' },
-            { text: '3. Adding Routes', link: '/tutorial/03-adding-routes' },
-            { text: '4. Multi-Page App', link: '/tutorial/04-multi-page-app' },
-            { text: '5. State & Globals', link: '/tutorial/05-state-and-globals' }
-          ]
-        }
-      ],
-      '/guide/': [
-        {
-          text: 'Introduction',
-          items: [
-            { text: 'What is LegoDOM?', link: '/guide/' },
-            { text: 'Getting Started', link: '/guide/getting-started' },
-            { text: 'Quick Start', link: '/guide/quick-start' },
-            { text: 'Contributing', link: '/guide/contributing' }
-          ]
-        },
-        {
-          text: 'Core Concepts',
-          items: [
-            { text: 'Components', link: '/guide/components' },
-            { text: 'Templating', link: '/guide/templating' },
-            { text: 'Reactivity', link: '/guide/reactivity' },
-            { text: 'Directives', link: '/guide/directives' }
-          ]
-        },
-        {
-          text: 'Advanced',
-          items: [
-            { text: 'Single File Components', link: '/guide/sfc' },
-            { text: 'Routing', link: '/guide/routing' },
-            { text: 'CDN Usage', link: '/guide/cdn-usage' },
-            { text: 'Lifecycle Hooks', link: '/guide/lifecycle' },
-            { text: 'Large Apps', link: '/guide/directory-structure' },
-            { text: 'FAQ', link: '/guide/faq' }
-          ]
-        }
-      ],
-      '/api/': [
-        {
-          text: 'API Reference',
-          items: [
-            { text: 'Overview', link: '/api/' },
-            { text: 'Lego.define()', link: '/api/define' },
-            { text: 'Lego.route()', link: '/api/route' },
-            { text: 'Lego.globals', link: '/api/globals' },
-            { text: 'Lego.config', link: '/api/config' },
-            { text: 'Directives', link: '/api/directives' },
-            { text: 'Lifecycle Hooks', link: '/api/lifecycle' },
-            { text: 'Vite Plugin', link: '/api/vite-plugin' }
-          ]
-        }
-      ],
-      '/router/': [
-        {
-          text: 'LegoDOM Router',
-          items: [
-            { text: 'About', link: '/router/' },
-            { text: 'Basic Routing', link: '/router/basic-routing' },
-            { text: 'Surgical Swaps', link: '/router/surgical-swaps' },
-            { text: 'Cold Entry', link: '/router/cold-entry' },
-            { text: 'History', link: '/router/history' }
-          ]
-        }
-      ],
-      '/examples/': [
-        {
-          text: 'Examples',
-          items: [
-            { text: 'Overview', link: '/examples/' },
-            { text: 'Todo App', link: '/examples/todo-app' },
-            { text: 'Routing Demo', link: '/examples/routing' },
-            { text: 'SFC Showcase', link: '/examples/sfc-showcase' },
-            { text: 'Form Validation', link: '/examples/form' }
-          ]
-        }
-      ]
-    },
-
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/rayattack/LegoDOM' }
-    ],
-
-    footer: {
-      message: 'Released under the MIT License.',
-      copyright: 'Copyright © 2024-present'
-    },
-
-    search: {
-      provider: 'local'
-    },
-
-    editLink: {
-      pattern: 'https://github.com/rayattack/LegoDOM/edit/main/docs/:path',
-      text: 'Edit this page on GitHub'
-    }
-  },
-
-  markdown: {
-    theme: {
-      light: 'github-light',
-      dark: 'github-dark'
-    }
-  }
-});

package/docs/api/config.md

@@ -1,95 +0,0 @@
-# Global Configuration
-
-`Lego.config` allows you to customize framework behavior, including error handling and metrics.
-
-## Properties
-
-### `syntax`
-
-*   **Type**: `'mustache' | 'brackets'`
-*   **Default**: `'brackets'`
-
-Configures the template delimiter style.
-
-*   `'brackets'`: Uses <code v-pre>[[ variable ]]</code> (Default)
-*   `'mustache'`: Uses <code v-pre>{{ variable }}</code> (Legacy/Vue-style)
-
-```javascript
-// Switch back to mustache syntax if preferred
-Lego.config.syntax = 'mustache';
-```
-
-### `loader`
-
-*   **Type**: `(tagName: string) => string | Promise<string> | null`
-*   **Default**: `undefined`
-
-Use this hook to implement **Server-Side Component Delivery**.
-
-**Option 1: Simple Mode (Return URL)**
-We fetch it for you.
-```javascript
-loader: (tag) => `/components/${tag}.lego`
-```
-
-**Option 2: Power Mode (Return Promise)**
-You control the fetch. Useful for **Authentication** (Cookies, JWT) or Custom Headers.
-
-```javascript
-Lego.init(document.body, {
-  loader: async (tagName) => {
-    // Custom Authenticated Fetch
-    const res = await fetch(`/components/${tagName}.lego`, {
-      credentials: 'include', // Send Cookies
-      headers: { 'Authorization': getToken() }
-    });
-    return await res.text(); // Return SFC content directly
-  }
-});
-```
-**Mechanism:**
-1. Browser sees unknown `<admin-widget>`.
-2. `Lego` calls `config.loader('admin-widget')`.
-3. If URL returned, it fetches the file.
-4. The server returns raw SFC content (`<template>...`).
-5. `Lego.defineSFC()` parses and upgrades the element instantly.
-
-### `onError`
-
-*   **Type**: `(error: Error, type: string, context: HTMLElement) => void`
-*   **Default**: `undefined`
-
-Global error handler hook. Called when an error occurs during:
-*   `render`: Template rendering (expression evaluation)
-*   `event-handler`: `@event` callbacks
-*   `define`: Component definition
-*   `sync-update`: `b-sync` updates
-
-```javascript
-Lego.config.onError = (err, type, context) => {
-  console.error(`Error in ${type}:`, err);
-  // Send to Sentry/Datadog
-  captureException(err, { tags: { type } });
-};
-```
-
-### `metrics`
-
-*   **Type**: `Object`
-
-Performance monitoring hooks, primarily used by plugins.
-
-*   `onRenderStart(el)`: Called before a component renders.
-*   `onRenderEnd(el)`: Called after a component finishes rendering.
-
-```javascript
-// Example monitoring implementation
-Lego.config.metrics = {
-  onRenderStart(el) {
-    console.time(el.tagName);
-  },
-  onRenderEnd(el) {
-    console.timeEnd(el.tagName);
-  }
-};
-```