@zenithbuild/core 0.4.6 → 0.5.0

package/dist/zen-preview.js

@@ -43,7 +43,7 @@ var __export = (target, all) => {
 };
 var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
 
-// ../../node_modules/picocolors/picocolors.js
+// node_modules/picocolors/picocolors.js
 var require_picocolors = __commonJS((exports, module) => {
   var p = process || {};
   var argv = p.argv || [];
@@ -8441,7 +8441,12 @@ function generateExpressionId() {
   return `expr_${expressionIdCounter++}`;
 }
 function stripBlocks(html) {
-  let stripped = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "");
+  let stripped = html.replace(/<script([^>]*)>([\s\S]*?)<\/script>/gi, (match, attrs, content) => {
+    if (attrs.includes("src=")) {
+      return match;
+    }
+    return "";
+  });
   stripped = stripped.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "");
   return stripped;
 }
@@ -8942,6 +8947,8 @@ function parseComponentFile(filePath) {
     slots,
     props,
     styles,
+    script: ir.script?.raw || null,
+    scriptAttributes: ir.script?.attributes || null,
     hasScript: ir.script !== null,
     hasStyles: ir.styles.length > 0
   };
@@ -9133,13 +9140,20 @@ function resolveComponentsInIR(ir, components) {
   usedComponents.clear();
   const resolvedNodes = resolveComponentsInNodes(ir.template.nodes, components);
   const componentStyles = Array.from(usedComponents).map((name) => components.get(name)).filter((meta) => meta !== undefined && meta.styles.length > 0).flatMap((meta) => meta.styles.map((raw) => ({ raw })));
+  const componentScripts = Array.from(usedComponents).map((name) => components.get(name)).filter((meta) => meta !== undefined && meta.script !== null).map((meta) => ({
+    name: meta.name,
+    script: meta.script,
+    props: meta.props,
+    scriptAttributes: meta.scriptAttributes || {}
+  }));
   return {
     ...ir,
     template: {
       ...ir.template,
       nodes: resolvedNodes
     },
-    styles: [...ir.styles, ...componentStyles]
+    styles: [...ir.styles, ...componentStyles],
+    componentScripts: [...ir.componentScripts || [], ...componentScripts]
   };
 }
 function resolveComponentsInNodes(nodes, components, depth = 0) {
@@ -9199,20 +9213,24 @@ function resolveComponent(componentNode, components, depth = 0) {
   }
   const templateNodes = JSON.parse(JSON.stringify(componentMeta.nodes));
   const resolvedTemplate = resolveSlots(templateNodes, resolvedSlots);
-  const forwardedTemplate = forwardAttributesToRoot(resolvedTemplate, componentNode.attributes, componentNode.loopContext);
+  const forwardedTemplate = forwardAttributesToRoot(resolvedTemplate, componentNode.attributes, componentNode.loopContext, componentMeta.hasScript ? componentName : undefined);
   const fullyResolved = resolveComponentsInNodes(forwardedTemplate, components, depth + 1);
   return fullyResolved;
 }
-function forwardAttributesToRoot(nodes, attributes, loopContext) {
-  if (attributes.length === 0) {
-    return nodes;
-  }
+function forwardAttributesToRoot(nodes, attributes, loopContext, componentName) {
   const rootIndex = nodes.findIndex((n) => n.type === "element");
   if (rootIndex === -1) {
     return nodes;
   }
   const root = nodes[rootIndex];
   const mergedAttributes = [...root.attributes];
+  if (componentName) {
+    mergedAttributes.push({
+      name: "data-zen-component",
+      value: componentName,
+      location: { line: 0, column: 0 }
+    });
+  }
   for (const attr of attributes) {
     const existingIndex = mergedAttributes.findIndex((a) => a.name === attr.name);
     const forwardedAttr = {
@@ -9267,6 +9285,7 @@ import process2 from "process";
 // cli/commands/dev.ts
 import path8 from "path";
 import fs8 from "fs";
+import os from "os";
 var {serve } = globalThis.Bun;
 
 // cli/utils/project.ts
@@ -10877,12 +10896,217 @@ function transformStateDeclarations(script) {
   transformed = transformed.replace(/export\s+let\s+props(?:\s*:\s*([^;]+))?\s*;?[ \t]*/g, "");
   transformed = transformed.replace(/(?:type|interface)\s+Props\s*=?\s*\{[^}]*(?:\{[^}]*\}[^}]*)*\}[ \t]*;?/gs, "");
   transformed = transformed.replace(/import\s+{[^}]+}\s+from\s+['"]zenith\/runtime['"]\s*;?[ \t]*/g, "");
+  transformed = transformed.replace(/import\s+\w+\s+from\s+['"][^'"]*\.zen['"];?\s*/g, "");
+  transformed = transformed.replace(/import\s+{[^}]*}\s+from\s+['"][^'"]+\.zen['"];?\s*/g, "");
   transformed = transformed.replace(/import\s*{\s*([^}]+)\s*}\s*from\s*['"]zenith:content['"]\s*;?/g, (_, imports) => `const { ${imports.trim()} } = window.__zenith;`);
   return transformed.trim();
 }
 
+// node_modules/es-module-lexer/dist/lexer.js
+var ImportType;
+(function(A) {
+  A[A.Static = 1] = "Static", A[A.Dynamic = 2] = "Dynamic", A[A.ImportMeta = 3] = "ImportMeta", A[A.StaticSourcePhase = 4] = "StaticSourcePhase", A[A.DynamicSourcePhase = 5] = "DynamicSourcePhase", A[A.StaticDeferPhase = 6] = "StaticDeferPhase", A[A.DynamicDeferPhase = 7] = "DynamicDeferPhase";
+})(ImportType || (ImportType = {}));
+var A = new Uint8Array(new Uint16Array([1]).buffer)[0] === 1;
+function parse2(E, g = "@") {
+  if (!C)
+    return init.then(() => parse2(E));
+  const I = E.length + 1, o = (C.__heap_base.value || C.__heap_base) + 4 * I - C.memory.buffer.byteLength;
+  o > 0 && C.memory.grow(Math.ceil(o / 65536));
+  const D = C.sa(I - 1);
+  if ((A ? B : Q)(E, new Uint16Array(C.memory.buffer, D, I)), !C.parse())
+    throw Object.assign(new Error(`Parse error ${g}:${E.slice(0, C.e()).split(`
+`).length}:${C.e() - E.lastIndexOf(`
+`, C.e() - 1)}`), { idx: C.e() });
+  const w = [], K = [];
+  for (;C.ri(); ) {
+    const A2 = C.is(), Q = C.ie(), B = C.it(), g2 = C.ai(), I2 = C.id(), o2 = C.ss(), D2 = C.se();
+    let K2;
+    C.ip() && (K2 = k(E.slice(I2 === -1 ? A2 - 1 : A2, I2 === -1 ? Q + 1 : Q)));
+    const N = [];
+    for (C.rsa();C.ra(); ) {
+      const A3 = C.aks(), Q2 = C.ake(), B2 = C.avs(), g3 = C.ave();
+      N.push([J(E.slice(A3, Q2)), J(E.slice(B2, g3))]);
+    }
+    w.push({ n: K2, t: B, s: A2, e: Q, ss: o2, se: D2, d: I2, a: g2, at: N.length > 0 ? N : null });
+  }
+  for (;C.re(); ) {
+    const A2 = C.es(), Q = C.ee(), B = C.els(), g2 = C.ele(), I2 = J(E.slice(A2, Q)), o2 = B < 0 ? undefined : J(E.slice(B, g2));
+    K.push({ s: A2, e: Q, ls: B, le: g2, n: I2, ln: o2 });
+  }
+  function k(A2) {
+    try {
+      return (0, eval)(A2);
+    } catch (A3) {}
+  }
+  function J(A2) {
+    if (!A2)
+      return A2;
+    const Q = A2[0];
+    return (Q === '"' || Q === "'") && k(A2) || A2;
+  }
+  return [w, K, !!C.f(), !!C.ms()];
+}
+function Q(A2, Q2) {
+  const B = A2.length;
+  let C = 0;
+  for (;C < B; ) {
+    const B2 = A2.charCodeAt(C);
+    Q2[C++] = (255 & B2) << 8 | B2 >>> 8;
+  }
+}
+function B(A2, Q2) {
+  const B2 = A2.length;
+  let C = 0;
+  for (;C < B2; )
+    Q2[C] = A2.charCodeAt(C++);
+}
+var C;
+var E = () => {
+  return A2 = "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", typeof Buffer != "undefined" ? Buffer.from(A2, "base64") : Uint8Array.from(atob(A2), (A3) => A3.charCodeAt(0));
+  var A2;
+};
+var init = WebAssembly.compile(E()).then(WebAssembly.instantiate).then(({ exports: A2 }) => {
+  C = A2;
+});
+
+// compiler/transform/componentScriptTransformer.ts
+var lexerInitialized = false;
+async function ensureLexerInit() {
+  if (!lexerInitialized) {
+    await init;
+    lexerInitialized = true;
+  }
+}
+var NAMESPACE_BINDINGS = `const { 
+    signal, state, memo, effect, ref, 
+    batch, untrack, onMount, onUnmount 
+} = __inst;`;
+var ZEN_PREFIX_MAPPINGS = {
+  zenSignal: "signal",
+  zenState: "state",
+  zenMemo: "memo",
+  zenEffect: "effect",
+  zenRef: "ref",
+  zenBatch: "batch",
+  zenUntrack: "untrack",
+  zenOnMount: "onMount",
+  zenOnUnmount: "onUnmount"
+};
+async function parseAndExtractImports(scriptContent) {
+  await ensureLexerInit();
+  const imports = [];
+  const [parsedImports] = parse2(scriptContent);
+  const sortedImports = [...parsedImports].sort((a, b) => b.ss - a.ss);
+  let strippedCode = scriptContent;
+  for (const imp of sortedImports) {
+    const source = imp.n || "";
+    const importStatement = scriptContent.slice(imp.ss, imp.se);
+    if (source.endsWith(".zen")) {
+      strippedCode = strippedCode.slice(0, imp.ss) + strippedCode.slice(imp.se);
+      continue;
+    }
+    if (source.startsWith("./") || source.startsWith("../")) {
+      strippedCode = strippedCode.slice(0, imp.ss) + strippedCode.slice(imp.se);
+      continue;
+    }
+    const isTypeOnly = importStatement.startsWith("import type");
+    const isSideEffect = imp.ss === imp.se || !importStatement.includes(" from ");
+    let specifiers = "";
+    if (!isSideEffect) {
+      const fromIndex = importStatement.indexOf(" from ");
+      if (fromIndex !== -1) {
+        const start = isTypeOnly ? "import type ".length : "import ".length;
+        specifiers = importStatement.slice(start, fromIndex).trim();
+      }
+    }
+    imports.push({
+      source,
+      specifiers,
+      typeOnly: isTypeOnly,
+      sideEffect: isSideEffect
+    });
+    strippedCode = strippedCode.slice(0, imp.ss) + strippedCode.slice(imp.se);
+  }
+  strippedCode = strippedCode.replace(/^\s*\n/gm, "");
+  imports.reverse();
+  return { imports, strippedCode };
+}
+async function transformComponentScript(componentName, scriptContent, props) {
+  const { imports, strippedCode } = await parseAndExtractImports(scriptContent);
+  let transformed = strippedCode;
+  for (const [zenName, unprefixedName] of Object.entries(ZEN_PREFIX_MAPPINGS)) {
+    const regex = new RegExp(`(?<!\\w)${zenName}\\s*\\(`, "g");
+    transformed = transformed.replace(regex, `${unprefixedName}(`);
+  }
+  return {
+    script: transformed.trim(),
+    imports
+  };
+}
+function generateComponentFactory(componentName, transformedScript, propNames) {
+  const propsDestructure = propNames.length > 0 ? `const { ${propNames.join(", ")} } = props || {};` : "";
+  return `
+// Component Factory: ${componentName}
+// Instantiation is driven by hydrator, not by bundle load
+__zenith.defineComponent('${componentName}', function(props, rootElement) {
+    const __inst = __zenith.createInstance('${componentName}', rootElement);
+    
+    // Namespace bindings (instance-scoped primitives)
+    ${NAMESPACE_BINDINGS}
+    
+    ${propsDestructure}
+    
+    // Component script (instance-scoped)
+    ${transformedScript}
+    
+    // Execute mount lifecycle (rootElement is already in DOM)
+    __inst.mount();
+    
+    return __inst;
+});
+`;
+}
+function deduplicateImports(imports) {
+  const seen = new Map;
+  for (const imp of imports) {
+    const key = `${imp.source}|${imp.specifiers}|${imp.typeOnly}`;
+    if (!seen.has(key)) {
+      seen.set(key, imp);
+    }
+  }
+  return Array.from(seen.values()).sort((a, b) => a.source.localeCompare(b.source));
+}
+function emitImports(imports) {
+  const deduplicated = deduplicateImports(imports);
+  return deduplicated.map((imp) => {
+    if (imp.sideEffect) {
+      return `import '${imp.source}';`;
+    }
+    const typePrefix = imp.typeOnly ? "type " : "";
+    return `import ${typePrefix}${imp.specifiers} from '${imp.source}';`;
+  }).join(`
+`);
+}
+async function transformAllComponentScripts(componentScripts) {
+  if (!componentScripts || componentScripts.length === 0) {
+    return { code: "", imports: [] };
+  }
+  const allImports = [];
+  const factories = await Promise.all(componentScripts.filter((comp) => comp.script && comp.script.trim().length > 0).map(async (comp) => {
+    const result = await transformComponentScript(comp.name, comp.script, comp.props);
+    allImports.push(...result.imports);
+    return generateComponentFactory(comp.name, result.script, comp.props);
+  }));
+  return {
+    code: factories.join(`
+`),
+    imports: deduplicateImports(allImports)
+  };
+}
+
 // compiler/runtime/transformIR.ts
-function transformIR(ir) {
+async function transformIR(ir) {
   const expressionDependencies = analyzeAllExpressions(ir.template.expressions, ir.filePath, [], ir.script?.attributes["props"] ? ir.script.attributes["props"].split(",") : [], []);
   const expressions = generateExpressionWrappers(ir.template.expressions, expressionDependencies);
   const renderFunction = generateDOMFunction(ir.template.nodes, ir.template.expressions, "renderDynamicPage");
@@ -10897,6 +11121,7 @@ function transformIR(ir) {
   const propDeclarations = extractProps(scriptContent);
   const stateInitCode = generateStateInitialization(stateDeclarations, [...propDeclarations, ...propKeys]);
   const scriptCode = transformStateDeclarations(scriptContent);
+  const componentScriptResult = await transformAllComponentScripts(ir.componentScripts || []);
   const bundle = generateRuntimeBundle({
     expressions,
     expressionRegistry,
@@ -10904,7 +11129,9 @@ function transformIR(ir) {
     navigationRuntime,
     stylesCode,
     scriptCode,
-    stateInitCode
+    stateInitCode,
+    componentScriptCode: componentScriptResult.code,
+    npmImports: componentScriptResult.imports
   });
   return {
     expressions,
@@ -10918,10 +11145,14 @@ function transformIR(ir) {
 }
 function generateRuntimeBundle(parts) {
   const functionRegistrations = extractFunctionRegistrations(parts.scriptCode);
+  const npmImportsHeader = parts.npmImports.length > 0 ? `// NPM Imports (hoisted from component scripts)
+${emitImports(parts.npmImports)}
+
+` : "";
   return `// Zenith Runtime Bundle (Phase 5)
 // Generated at compile time - no .zen parsing in browser
 
-${parts.expressions}
+${npmImportsHeader}${parts.expressions}
 
 ${parts.expressionRegistry}
 
@@ -10940,6 +11171,9 @@ ${functionRegistrations}
 ${parts.stateInitCode ? `// State initialization
 ${parts.stateInitCode}` : ""}
 
+${parts.componentScriptCode ? `// Component factories (instance-scoped)
+${parts.componentScriptCode}` : ""}
+
 // Export hydration functions
 if (typeof window !== 'undefined') {
   window.zenithHydrate = window.__zenith_hydrate || function(state, container) {
@@ -10998,10 +11232,21 @@ if (typeof window !== 'undefined') {
     // Get the router outlet or body
     const container = document.querySelector('#app') || document.body;
     
-    // Hydrate with state
+    // Hydrate with state (expressions, bindings)
     if (window.__zenith_hydrate) {
       window.__zenith_hydrate(state, {}, {}, {}, container);
     }
+    
+    // Hydrate components by discovering data-zen-component markers
+    // This is the ONLY place component instantiation happens - driven by DOM markers
+    if (window.__zenith && window.__zenith.hydrateComponents) {
+      window.__zenith.hydrateComponents(container);
+    }
+    
+    // Trigger page-level mount lifecycle
+    if (window.__zenith && window.__zenith.triggerMount) {
+      window.__zenith.triggerMount();
+    }
   }
   
   // Run on DOM ready
@@ -11178,7 +11423,7 @@ function validateExpressionsOrThrow(expressions, filePath) {
 }
 
 // compiler/finalize/finalizeOutput.ts
-function finalizeOutput(ir, compiled) {
+async function finalizeOutput(ir, compiled) {
   const errors = [];
   try {
     validateExpressionsOrThrow(ir.template.expressions, ir.filePath);
@@ -11207,7 +11452,7 @@ function finalizeOutput(ir, compiled) {
   }
   let runtimeCode;
   try {
-    runtimeCode = transformIR(ir);
+    runtimeCode = await transformIR(ir);
   } catch (error3) {
     errors.push(`Runtime generation failed: ${error3.message}`);
     return {
@@ -11263,8 +11508,8 @@ function verifyNoRawExpressions(html, filePath) {
   }
   return errors;
 }
-function finalizeOutputOrThrow(ir, compiled) {
-  const output = finalizeOutput(ir, compiled);
+async function finalizeOutputOrThrow(ir, compiled) {
+  const output = await finalizeOutput(ir, compiled);
   if (output.hasErrors) {
     const errorMessage = output.errors.join(`
 
@@ -11278,10 +11523,10 @@ ${errorMessage}`);
 
 // compiler/index.ts
 init_invariants();
-function compileZenSource(source, filePath, options) {
+async function compileZenSource(source, filePath, options) {
   const template = parseTemplate(source, filePath);
   const script = parseScript(source);
-  const styleRegex = /\u003cstyle[^\u003e]*\u003e([\s\S]*?)\u003c\/style\u003e/gi;
+  const styleRegex = /<style[^>]*>([\s\S]*?)<\/style>/gi;
   const styles = [];
   let match;
   while ((match = styleRegex.exec(source)) !== null) {
@@ -11303,7 +11548,7 @@ function compileZenSource(source, filePath, options) {
   validateInvariants(ir, filePath);
   const compiled = transformTemplate(ir);
   try {
-    const finalized = finalizeOutputOrThrow(ir, compiled);
+    const finalized = await finalizeOutputOrThrow(ir, compiled);
     return { ir, compiled, finalized };
   } catch (error3) {
     throw new Error(`Failed to finalize output for ${filePath}:\\n${error3.message}`);
@@ -11333,7 +11578,12 @@ function discoverLayouts(layoutsDir) {
         if (match[1])
           styles.push(match[1].trim());
       }
-      let html = source.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "");
+      let html = source.replace(/<script([^>]*)>([\s\S]*?)<\/script>/gi, (match2, attrs, content) => {
+        if (attrs.includes("src=")) {
+          return match2;
+        }
+        return "";
+      });
       html = html.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "").trim();
       layouts.set(name, {
         name,
@@ -11835,6 +12085,144 @@ function generateBundleJS() {
     unmountCallbacks.length = 0;
   }
   
+  // ============================================
+  // Component Instance System
+  // ============================================
+  // Each component instance gets isolated state, effects, and lifecycles
+  // Instances are tied to DOM elements via hydration markers
+  
+  const componentRegistry = {};
+  
+  function createComponentInstance(componentName, rootElement) {
+    const instanceMountCallbacks = [];
+    const instanceUnmountCallbacks = [];
+    const instanceEffects = [];
+    let instanceMounted = false;
+    
+    return {
+      // DOM reference
+      root: rootElement,
+      
+      // Lifecycle hooks (instance-scoped)
+      onMount: function(fn) {
+        if (instanceMounted) {
+          const cleanup = fn();
+          if (typeof cleanup === 'function') {
+            instanceUnmountCallbacks.push(cleanup);
+          }
+        } else {
+          instanceMountCallbacks.push(fn);
+        }
+      },
+      onUnmount: function(fn) {
+        instanceUnmountCallbacks.push(fn);
+      },
+      
+      // Reactivity (uses global primitives but tracks for cleanup)
+      signal: function(initial) {
+        return zenSignal(initial);
+      },
+      state: function(initial) {
+        return zenState(initial);
+      },
+      ref: function(initial) {
+        return zenRef(initial);
+      },
+      effect: function(fn) {
+        const cleanup = zenEffect(fn);
+        instanceEffects.push(cleanup);
+        return cleanup;
+      },
+      memo: function(fn) {
+        return zenMemo(fn);
+      },
+      batch: function(fn) {
+        zenBatch(fn);
+      },
+      untrack: function(fn) {
+        return zenUntrack(fn);
+      },
+      
+      // Lifecycle execution
+      mount: function() {
+        instanceMounted = true;
+        for (let i = 0; i < instanceMountCallbacks.length; i++) {
+          try {
+            const cleanup = instanceMountCallbacks[i]();
+            if (typeof cleanup === 'function') {
+              instanceUnmountCallbacks.push(cleanup);
+            }
+          } catch(e) {
+            console.error('[Zenith] Component mount error:', componentName, e);
+          }
+        }
+        instanceMountCallbacks.length = 0;
+      },
+      unmount: function() {
+        instanceMounted = false;
+        // Cleanup effects
+        for (let i = 0; i < instanceEffects.length; i++) {
+          try { 
+            if (typeof instanceEffects[i] === 'function') instanceEffects[i](); 
+          } catch(e) { 
+            console.error('[Zenith] Effect cleanup error:', e); 
+          }
+        }
+        instanceEffects.length = 0;
+        // Run unmount callbacks
+        for (let i = 0; i < instanceUnmountCallbacks.length; i++) {
+          try { instanceUnmountCallbacks[i](); } catch(e) { console.error('[Zenith] Unmount error:', e); }
+        }
+        instanceUnmountCallbacks.length = 0;
+      }
+    };
+  }
+  
+  function defineComponent(name, factory) {
+    componentRegistry[name] = factory;
+  }
+  
+  function instantiateComponent(name, props, rootElement) {
+    const factory = componentRegistry[name];
+    if (!factory) {
+      console.warn('[Zenith] Component not found:', name);
+      return null;
+    }
+    return factory(props, rootElement);
+  }
+  
+  /**
+   * Hydrate components by discovering data-zen-component markers
+   * This is the ONLY place component instantiation should happen
+   */
+  function hydrateComponents(container) {
+    const componentElements = container.querySelectorAll('[data-zen-component]');
+    
+    for (let i = 0; i < componentElements.length; i++) {
+      const el = componentElements[i];
+      const componentName = el.getAttribute('data-zen-component');
+      
+      // Skip if already hydrated
+      if (el.__zenith_instance) continue;
+      
+      // Parse props from data attribute if present
+      const propsJson = el.getAttribute('data-zen-props') || '{}';
+      let props = {};
+      try {
+        props = JSON.parse(propsJson);
+      } catch(e) {
+        console.warn('[Zenith] Invalid props JSON for', componentName);
+      }
+      
+      // Instantiate component and bind to DOM element
+      const instance = instantiateComponent(componentName, props, el);
+      
+      if (instance) {
+        el.__zenith_instance = instance;
+      }
+    }
+  }
+  
   // ============================================
   // Expression Registry & Hydration
   // ============================================
@@ -12254,8 +12642,13 @@ function generateBundleJS() {
     triggerUnmount: triggerUnmount,
     // Hydration
     hydrate: zenithHydrate,
+    hydrateComponents: hydrateComponents,  // Marker-driven component instantiation
     registerExpression: registerExpression,
-    getExpression: getExpression
+    getExpression: getExpression,
+    // Component instance system
+    createInstance: createComponentInstance,
+    defineComponent: defineComponent,
+    instantiate: instantiateComponent
   };
   
   // Expose with zen* prefix for direct usage
@@ -12347,7 +12740,7 @@ var T = L();
 function Z(u) {
   T = u;
 }
-var C = { exec: () => null };
+var C2 = { exec: () => null };
 function k(u, e = "") {
   let t = typeof u == "string" ? u : u.source, n = { replace: (r, i) => {
     let s = typeof i == "string" ? i : i.source;
@@ -12372,7 +12765,7 @@ var N = /(?:[*+-]|\d{1,9}[.)])/;
 var re = /^(?!bull |blockCode|fences|blockquote|heading|html|table)((?:.|\n(?!\s*?\n|bull |blockCode|fences|blockquote|heading|html|table))+?)\n {0,3}(=+|-+) *(?:\n+|$)/;
 var se = k(re).replace(/bull/g, N).replace(/blockCode/g, /(?: {4}| {0,3}\t)/).replace(/fences/g, / {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g, / {0,3}>/).replace(/heading/g, / {0,3}#{1,6}/).replace(/html/g, / {0,3}<[^\n>]+>\n/).replace(/\|table/g, "").getRegex();
 var Oe = k(re).replace(/bull/g, N).replace(/blockCode/g, /(?: {4}| {0,3}\t)/).replace(/fences/g, / {0,3}(?:`{3,}|~{3,})/).replace(/blockquote/g, / {0,3}>/).replace(/heading/g, / {0,3}#{1,6}/).replace(/html/g, / {0,3}<[^\n>]+>\n/).replace(/table/g, / {0,3}\|?(?:[:\- ]*\|)+[\:\- ]*\n/).getRegex();
-var Q = /^([^\n]+(?:\n(?!hr|heading|lheading|blockquote|fences|list|html|table| +\n)[^\n]+)*)/;
+var Q2 = /^([^\n]+(?:\n(?!hr|heading|lheading|blockquote|fences|list|html|table| +\n)[^\n]+)*)/;
 var we = /^[^\n]+/;
 var F = /(?!\s*\])(?:\\[\s\S]|[^\[\]\\])+/;
 var ye = k(/^ {0,3}\[(label)\]: *(?:\n[ \t]*)?([^<\s][^\s]*|<.*?>)(?:(?: +(?:\n[ \t]*)?| *\n[ \t]*)(title))? *(?:\n+|$)/).replace("label", F).replace("title", /(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/).getRegex();
@@ -12380,12 +12773,12 @@ var Pe = k(/^( {0,3}bull)([ \t][^\n]+?)?(?:\n|$)/).replace(/bull/g, N).getRegex(
 var v = "address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|search|section|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul";
 var j = /<!--(?:-?>|[\s\S]*?(?:-->|$))/;
 var Se = k("^ {0,3}(?:<(script|pre|style|textarea)[\\s>][\\s\\S]*?(?:</\\1>[^\\n]*\\n+|$)|comment[^\\n]*(\\n+|$)|<\\?[\\s\\S]*?(?:\\?>\\n*|$)|<![A-Z][\\s\\S]*?(?:>\\n*|$)|<!\\[CDATA\\[[\\s\\S]*?(?:\\]\\]>\\n*|$)|</?(tag)(?: +|\\n|/?>)[\\s\\S]*?(?:(?:\\n[ \t]*)+\\n|$)|<(?!script|pre|style|textarea)([a-z][\\w-]*)(?:attribute)*? */?>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ \t]*)+\\n|$)|</(?!script|pre|style|textarea)[a-z][\\w-]*\\s*>(?=[ \\t]*(?:\\n|$))[\\s\\S]*?(?:(?:\\n[ \t]*)+\\n|$))", "i").replace("comment", j).replace("tag", v).replace("attribute", / +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/).getRegex();
-var ie = k(Q).replace("hr", I).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("|table", "").replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)]) ").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", v).getRegex();
+var ie = k(Q2).replace("hr", I).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("|table", "").replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)]) ").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", v).getRegex();
 var $e = k(/^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/).replace("paragraph", ie).getRegex();
-var U = { blockquote: $e, code: be, def: ye, fences: Re, heading: Te, hr: I, html: Se, lheading: se, list: Pe, newline: xe, paragraph: ie, table: C, text: we };
+var U = { blockquote: $e, code: be, def: ye, fences: Re, heading: Te, hr: I, html: Se, lheading: se, list: Pe, newline: xe, paragraph: ie, table: C2, text: we };
 var te = k("^ *([^\\n ].*)\\n {0,3}((?:\\| *)?:?-+:? *(?:\\| *:?-+:? *)*(?:\\| *)?)(?:\\n((?:(?! *\\n|hr|heading|blockquote|code|fences|list|html).*(?:\\n|$))*)\\n*|$)").replace("hr", I).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("blockquote", " {0,3}>").replace("code", "(?: {4}| {0,3}\t)[^\\n]").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)]) ").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", v).getRegex();
-var _e = { ...U, lheading: Oe, table: te, paragraph: k(Q).replace("hr", I).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("table", te).replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)]) ").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", v).getRegex() };
-var Le = { ...U, html: k(`^ *(?:comment *(?:\\n|\\s*$)|<(tag)[\\s\\S]+?</\\1> *(?:\\n{2,}|\\s*$)|<tag(?:"[^"]*"|'[^']*'|\\s[^'"/>\\s]*)*?/?> *(?:\\n{2,}|\\s*$))`).replace("comment", j).replace(/tag/g, "(?!(?:a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)\\b)\\w+(?!:|[^\\w\\s@]*@)\\b").getRegex(), def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +(["(][^\n]+[")]))? *(?:\n+|$)/, heading: /^(#{1,6})(.*)(?:\n+|$)/, fences: C, lheading: /^(.+?)\n {0,3}(=+|-+) *(?:\n+|$)/, paragraph: k(Q).replace("hr", I).replace("heading", ` *#{1,6} *[^
+var _e = { ...U, lheading: Oe, table: te, paragraph: k(Q2).replace("hr", I).replace("heading", " {0,3}#{1,6}(?:\\s|$)").replace("|lheading", "").replace("table", te).replace("blockquote", " {0,3}>").replace("fences", " {0,3}(?:`{3,}(?=[^`\\n]*\\n)|~{3,})[^\\n]*\\n").replace("list", " {0,3}(?:[*+-]|1[.)]) ").replace("html", "</?(?:tag)(?: +|\\n|/?>)|<(?:script|pre|style|textarea|!--)").replace("tag", v).getRegex() };
+var Le = { ...U, html: k(`^ *(?:comment *(?:\\n|\\s*$)|<(tag)[\\s\\S]+?</\\1> *(?:\\n{2,}|\\s*$)|<tag(?:"[^"]*"|'[^']*'|\\s[^'"/>\\s]*)*?/?> *(?:\\n{2,}|\\s*$))`).replace("comment", j).replace(/tag/g, "(?!(?:a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)\\b)\\w+(?!:|[^\\w\\s@]*@)\\b").getRegex(), def: /^ *\[([^\]]+)\]: *<?([^\s>]+)>?(?: +(["(][^\n]+[")]))? *(?:\n+|$)/, heading: /^(#{1,6})(.*)(?:\n+|$)/, fences: C2, lheading: /^(.+?)\n {0,3}(=+|-+) *(?:\n+|$)/, paragraph: k(Q2).replace("hr", I).replace("heading", ` *#{1,6} *[^
 ]`).replace("lheading", se).replace("|table", "").replace("blockquote", " {0,3}>").replace("|fences", "").replace("|list", "").replace("|html", "").replace("|tag", "").getRegex() };
 var Me = /^\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/;
 var ze = /^(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/;
@@ -12416,11 +12809,11 @@ var ce = k(/^!?\[(label)\]\[(ref)\]/).replace("label", q).replace("ref", F).getR
 var he = k(/^!?\[(ref)\](?:\[\])?/).replace("ref", F).getRegex();
 var Ue = k("reflink|nolink(?!\\()", "g").replace("reflink", ce).replace("nolink", he).getRegex();
 var ne = /[hH][tT][tT][pP][sS]?|[fF][tT][pP]/;
-var W = { _backpedal: C, anyPunctuation: Ge, autolink: Ne, blockSkip: Be, br: oe, code: ze, del: C, emStrongLDelim: qe, emStrongRDelimAst: De, emStrongRDelimUnd: Ze, escape: Me, link: je, nolink: he, punctuation: Ce, reflink: ce, reflinkSearch: Ue, tag: Fe, text: Ae, url: C };
+var W = { _backpedal: C2, anyPunctuation: Ge, autolink: Ne, blockSkip: Be, br: oe, code: ze, del: C2, emStrongLDelim: qe, emStrongRDelimAst: De, emStrongRDelimUnd: Ze, escape: Me, link: je, nolink: he, punctuation: Ce, reflink: ce, reflinkSearch: Ue, tag: Fe, text: Ae, url: C2 };
 var Ke = { ...W, link: k(/^!?\[(label)\]\((.*?)\)/).replace("label", q).getRegex(), reflink: k(/^!?\[(label)\]\s*\[([^\]]*)\]/).replace("label", q).getRegex() };
 var G = { ...W, emStrongRDelimAst: He, emStrongLDelim: ve, url: k(/^((?:protocol):\/\/|www\.)(?:[a-zA-Z0-9\-]+\.?)+[^\s<]*|^email/).replace("protocol", ne).replace("email", /[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/).getRegex(), _backpedal: /(?:[^?!.,:;*_'"~()&]+|\([^)]*\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_'"~)]+(?!$))+/, del: /^(~~?)(?=[^\s~])((?:\\[\s\S]|[^\\])*?(?:\\[\s\S]|[^\s~\\]))\1(?=[^~]|$)/, text: k(/^([`~]+|[^`~])(?:(?= {2,}\n)|(?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)|[\s\S]*?(?:(?=[\\<!\[`*~_]|\b_|protocol:\/\/|www\.|$)|[^ ](?= {2,}\n)|[^a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-](?=[a-zA-Z0-9.!#$%&'*+\/=?_`{\|}~-]+@)))/).replace("protocol", ne).getRegex() };
 var We = { ...G, br: k(oe).replace("{2,}", "*").getRegex(), text: k(G.text).replace("\\b_", "\\b_| {2,}\\n").replace(/\{2,\}/g, "*").getRegex() };
-var E = { normal: U, gfm: _e, pedantic: Le };
+var E2 = { normal: U, gfm: _e, pedantic: Le };
 var M = { normal: W, gfm: G, breaks: We, pedantic: Ke };
 var Xe = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };
 var ke = (u) => Xe[u];
@@ -12616,12 +13009,12 @@ ${c}` : c;
           let O = this.rules.other.nextBulletRegex(f), V = this.rules.other.hrRegex(f), Y = this.rules.other.fencesBeginRegex(f), ee = this.rules.other.headingBeginRegex(f), fe = this.rules.other.htmlBeginRegex(f);
           for (;e; ) {
             let H = e.split(`
-`, 1)[0], A;
-            if (h = H, this.options.pedantic ? (h = h.replace(this.rules.other.listReplaceNesting, "  "), A = h) : A = h.replace(this.rules.other.tabCharGlobal, "    "), Y.test(h) || ee.test(h) || fe.test(h) || O.test(h) || V.test(h))
+`, 1)[0], A2;
+            if (h = H, this.options.pedantic ? (h = h.replace(this.rules.other.listReplaceNesting, "  "), A2 = h) : A2 = h.replace(this.rules.other.tabCharGlobal, "    "), Y.test(h) || ee.test(h) || fe.test(h) || O.test(h) || V.test(h))
               break;
-            if (A.search(this.rules.other.nonSpaceChar) >= f || !h.trim())
+            if (A2.search(this.rules.other.nonSpaceChar) >= f || !h.trim())
               c += `
-` + A.slice(f);
+` + A2.slice(f);
             else {
               if (R || g.replace(this.rules.other.tabCharGlobal, "    ").search(this.rules.other.nonSpaceChar) >= 4 || Y.test(g) || ee.test(g) || V.test(g))
                 break;
@@ -12629,7 +13022,7 @@ ${c}` : c;
 ` + h;
             }
             !R && !h.trim() && (R = true), p += H + `
-`, e = e.substring(H.length + 1), g = A.slice(f);
+`, e = e.substring(H.length + 1), g = A2.slice(f);
           }
         }
         i.loose || (a ? i.loose = true : this.rules.other.doubleBlankLine.test(p) && (a = true)), i.items.push({ type: "list_item", raw: p, task: !!this.options.gfm && this.rules.other.listIsTask.test(c), loose: false, text: c, tokens: [] }), i.raw += p;
@@ -12850,11 +13243,11 @@ var x = class u {
   tokenizer;
   constructor(e) {
     this.tokens = [], this.tokens.links = Object.create(null), this.options = e || T, this.options.tokenizer = this.options.tokenizer || new y, this.tokenizer = this.options.tokenizer, this.tokenizer.options = this.options, this.tokenizer.lexer = this, this.inlineQueue = [], this.state = { inLink: false, inRawBlock: false, top: true };
-    let t = { other: m, block: E.normal, inline: M.normal };
-    this.options.pedantic ? (t.block = E.pedantic, t.inline = M.pedantic) : this.options.gfm && (t.block = E.gfm, this.options.breaks ? t.inline = M.breaks : t.inline = M.gfm), this.tokenizer.rules = t;
+    let t = { other: m, block: E2.normal, inline: M.normal };
+    this.options.pedantic ? (t.block = E2.pedantic, t.inline = M.pedantic) : this.options.gfm && (t.block = E2.gfm, this.options.breaks ? t.inline = M.breaks : t.inline = M.gfm), this.tokenizer.rules = t;
   }
   static get rules() {
-    return { block: E, inline: M };
+    return { block: E2, inline: M };
   }
   static lex(e, t) {
     return new u(t).lex(e);
@@ -13391,7 +13784,7 @@ var S = class {
     return this.block ? b.parse : b.parseInline;
   }
 };
-var B = class {
+var B2 = class {
   defaults = L();
   options = this.setOptions;
   parse = this.parseMarkdown(true);
@@ -13571,7 +13964,7 @@ Please report this to https://github.com/markedjs/marked.`, e) {
     };
   }
 };
-var _ = new B;
+var _ = new B2;
 function d(u3, e) {
   return _.parse(u3, e);
 }
@@ -13916,6 +14309,36 @@ function resolveGlobalsCss(projectRoot) {
 
 // cli/commands/dev.ts
 var pageCache = new Map;
+async function bundlePageScript(script, projectRoot) {
+  if (!script.includes("import ")) {
+    return script;
+  }
+  const tempDir = os.tmpdir();
+  const tempFile = path8.join(tempDir, `zenith-bundle-${Date.now()}.js`);
+  try {
+    fs8.writeFileSync(tempFile, script, "utf-8");
+    const result = await Bun.build({
+      entrypoints: [tempFile],
+      target: "browser",
+      format: "esm",
+      minify: false,
+      external: []
+    });
+    if (!result.success || !result.outputs[0]) {
+      console.error("[Zenith] Bundle errors:", result.logs);
+      return script;
+    }
+    const bundledCode = await result.outputs[0].text();
+    return bundledCode;
+  } catch (error3) {
+    console.error("[Zenith] Failed to bundle page script:", error3.message);
+    return script;
+  } finally {
+    try {
+      fs8.unlinkSync(tempFile);
+    } catch {}
+  }
+}
 async function dev(options = {}) {
   const project = requireProject();
   const port = options.port || parseInt(process.env.PORT || "3000", 10);
@@ -13979,7 +14402,7 @@ async function dev(options = {}) {
     ".json",
     ".map"
   ]);
-  function compilePageInMemory(pagePath) {
+  async function compilePageInMemory(pagePath) {
     try {
       const layoutsDir = path8.join(pagesDir, "../layouts");
       const componentsDir = path8.join(pagesDir, "../components");
@@ -13989,15 +14412,16 @@ async function dev(options = {}) {
       let layoutToUse = layouts.get("DefaultLayout");
       if (layoutToUse)
         processedSource = processLayout(source, layoutToUse);
-      const result = compileZenSource(processedSource, pagePath, {
+      const result = await compileZenSource(processedSource, pagePath, {
         componentsDir: fs8.existsSync(componentsDir) ? componentsDir : undefined
       });
       if (!result.finalized)
         throw new Error("Compilation failed");
       const routeDef = generateRouteDefinition(pagePath, pagesDir);
+      const bundledScript = await bundlePageScript(result.finalized.js, rootDir);
       return {
         html: result.finalized.html,
-        script: result.finalized.js,
+        script: bundledScript,
         styles: result.finalized.styles,
         route: routeDef.path,
         lastModified: Date.now()
@@ -14049,7 +14473,7 @@ async function dev(options = {}) {
   });
   const server = serve({
     port,
-    fetch(req, server2) {
+    async fetch(req, server2) {
       const startTime = performance.now();
       const url = new URL(req.url);
       const pathname = url.pathname;
@@ -14094,7 +14518,7 @@ async function dev(options = {}) {
         let cached = pageCache.get(pagePath);
         const stat = fs8.statSync(pagePath);
         if (!cached || stat.mtimeMs > cached.lastModified) {
-          cached = compilePageInMemory(pagePath) || undefined;
+          cached = await compilePageInMemory(pagePath) || undefined;
           if (cached)
             pageCache.set(pagePath, cached);
         }
@@ -14157,7 +14581,7 @@ function generateDevHTML(page, contentData = {}) {
   const runtimeTag = `<script src="/runtime.js"></script>`;
   const contentJson = JSON.stringify(contentData).replace(/<\//g, "<\\/");
   const contentTag = `<script>window.__ZENITH_CONTENT__ = ${contentJson};</script>`;
-  const scriptTag = `<script>
+  const scriptTag = `<script type="module">
 ${page.script}
 </script>`;
   const allScripts = `${runtimeTag}
@@ -14286,7 +14710,7 @@ function getBuildOutputType(analysis) {
 }
 
 // compiler/ssg-build.ts
-function compilePage(pagePath, pagesDir, baseDir = process.cwd()) {
+async function compilePage(pagePath, pagesDir, baseDir = process.cwd()) {
   const source = fs9.readFileSync(pagePath, "utf-8");
   const analysis = analyzePageSource(source);
   const layoutsDir = path10.join(baseDir, "layouts");
@@ -14296,7 +14720,7 @@ function compilePage(pagePath, pagesDir, baseDir = process.cwd()) {
   if (layoutToUse) {
     processedSource = processLayout(source, layoutToUse);
   }
-  const result = compileZenSource(processedSource, pagePath);
+  const result = await compileZenSource(processedSource, pagePath);
   if (!result.finalized) {
     throw new Error(`Compilation failed for ${pagePath}: No finalized output`);
   }
@@ -14389,7 +14813,7 @@ ${page.pageScript}
 })();
 `;
 }
-function buildSSG(options) {
+async function buildSSG(options) {
   const { pagesDir, outDir, baseDir = path10.dirname(pagesDir) } = options;
   const contentDir = path10.join(baseDir, "content");
   const contentData = loadContent(contentDir);
@@ -14414,7 +14838,7 @@ function buildSSG(options) {
     const relativePath = path10.relative(pagesDir, pageFile);
     console.log(`   Compiling: ${relativePath}`);
     try {
-      const compiled = compilePage(pageFile, pagesDir, baseDir);
+      const compiled = await compilePage(pageFile, pagesDir, baseDir);
       compiledPages.push(compiled);
       if (compiled.analysis.needsHydration) {
         hasHydratedPages = true;
@@ -14473,7 +14897,7 @@ function buildSSG(options) {
     const custom404Path = path10.join(pagesDir, candidate);
     if (fs9.existsSync(custom404Path)) {
       try {
-        const compiled = compilePage(custom404Path, pagesDir, baseDir);
+        const compiled = await compilePage(custom404Path, pagesDir, baseDir);
         const html = generatePageHTML(compiled, globalStyles, contentData);
         fs9.writeFileSync(path10.join(outDir, "404.html"), html);
         console.log("\uD83D\uDCE6 Generated 404.html (custom)");