@hypen-space/web 0.2.0 → 0.2.1

package/dist/src/dom/renderer.js

@@ -1,7 +1,3 @@
-import {
-  canvasApplicators,
-  canvasHandler
-} from "./canvas/index.js";
 import {
   ComponentRegistry
 } from "./components/index.js";
@@ -9,6 +5,11 @@ import"./components/list.js";
 import"./components/textarea.js";
 import"./components/grid.js";
 import"./components/link.js";
+import {
+  canvasApplicators,
+  canvasHandler
+} from "./canvas/index.js";
+import"./components/container.js";
 import"./components/avatar.js";
 import"./components/switch.js";
 import"./components/badge.js";
@@ -16,6 +17,7 @@ import"./components/route.js";
 import"./components/center.js";
 import"./components/divider.js";
 import"./components/spacer.js";
+import"./components/text.js";
 import"./components/input.js";
 import"./components/stack.js";
 import"./components/progressbar.js";
@@ -23,7 +25,7 @@ import"./components/button.js";
 import"./components/heading.js";
 import"./components/slider.js";
 import"./components/card.js";
-import"./components/container.js";
+import"./components/image.js";
 import"./components/video.js";
 import"./components/spinner.js";
 import"./components/row.js";
@@ -31,17 +33,17 @@ import"./components/select.js";
 import"./components/router.js";
 import"./components/audio.js";
 import"./components/paragraph.js";
-import"./components/text.js";
 import {
   ApplicatorRegistry
 } from "./applicators/index.js";
+import"./applicators/layout.js";
 import"./applicators/events.js";
 import"./applicators/color.js";
 import"./applicators/typography.js";
 import"./applicators/effects.js";
 import"./components/checkbox.js";
 import"./components/column.js";
-import"./components/image.js";
+import"./applicators/transform.js";
 import"./applicators/margin.js";
 import"./applicators/advanced-layout.js";
 import"./applicators/display.js";
@@ -49,14 +51,12 @@ import"./applicators/size.js";
 import"./applicators/font.js";
 import"./applicators/background.js";
 import"./applicators/transition.js";
-import"./applicators/layout.js";
 import {
   RerenderTracker,
   defaultDebugConfig
 } from "./debug.js";
 import"./applicators/padding.js";
 import"./applicators/border.js";
-import"./applicators/transform.js";
 import"../../chunk-2s02mkzs.js";
 
 // src/dom/renderer.ts
@@ -274,4 +274,4 @@ export {
 
 export { DOMRenderer };
 
-//# debugId=0B5D2325D2CA974964756E2164756E21
+//# debugId=873A4414F9F26CBC64756E2164756E21

package/dist/src/dom/renderer.js.map

@@ -5,6 +5,6 @@
     "/**\n * DOM Renderer\n *\n * Renders Hypen patches to the DOM\n */\n\nimport type { Patch } from \"@hypen/core\";\nimport type { HypenModuleInstance, RouterContext } from \"@hypen/core\";\nimport type { HypenRouter } from \"@hypen/core\";\nimport type { HypenGlobalContext } from \"@hypen/core\";\nimport { ComponentRegistry } from \"./components/index.js\";\nimport { ApplicatorRegistry } from \"./applicators/index.js\";\nimport { canvasHandler, canvasApplicators } from \"./canvas/index.js\";\nimport { RerenderTracker, type DebugConfig, defaultDebugConfig } from \"./debug.js\";\n\n// Interface for the engine that renderer needs\ninterface IEngine {\n  dispatchAction(name: string, payload?: any): void;\n}\n\nexport class DOMRenderer {\n  private container: HTMLElement;\n  private nodes: Map<string, HTMLElement> = new Map();\n  private rootId: string | null = null;\n  private components: ComponentRegistry;\n  private applicators: ApplicatorRegistry;\n  private engine: IEngine;\n  private currentState: Record<string, any> = {};\n  private routerContext: RouterContext | null = null;\n  private globalContext: HypenGlobalContext | null = null;\n  private componentInstances = new Map<string, HypenModuleInstance>();\n  private debugTracker: RerenderTracker;\n\n  constructor(container: HTMLElement, engine: IEngine, debugConfig?: Partial<DebugConfig>) {\n    this.container = container;\n    this.engine = engine;\n    this.components = new ComponentRegistry();\n    this.applicators = new ApplicatorRegistry();\n    this.debugTracker = new RerenderTracker({ ...defaultDebugConfig, ...debugConfig });\n\n    // Register canvas component and applicators\n    this.components.register(\"canvas\", canvasHandler);\n    for (const [name, handler] of Object.entries(canvasApplicators)) {\n      this.applicators.register(name, handler);\n    }\n  }\n\n  /**\n   * Set router and global context for component composition\n   */\n  setContext(routerContext: RouterContext, globalContext: HypenGlobalContext): void {\n    this.routerContext = routerContext;\n    this.globalContext = globalContext;\n  }\n\n  /**\n   * Apply a batch of patches to the DOM\n   */\n  applyPatches(patches: Patch[]): void {\n    for (const patch of patches) {\n      this.applyPatch(patch);\n    }\n  }\n\n  /**\n   * Update state and interpolate text content\n   */\n  updateState(state: Record<string, any>): void {\n    console.log(`[Renderer] Updating state:`, state);\n    this.currentState = state;\n    this.interpolateAllText();\n  }\n\n  /**\n   * Merge component state into current state and re-interpolate\n   */\n  private mergeComponentState(componentState: Record<string, any>): void {\n    this.currentState = { ...this.currentState, ...componentState };\n    console.log(`[Renderer] Merged state:`, this.currentState);\n    this.interpolateAllText();\n  }\n\n  /**\n   * Interpolate state values in all text elements\n   */\n  private interpolateAllText(): void {\n    for (const [id, element] of this.nodes.entries()) {\n      if (element.dataset.hypenType === \"text\" && element.dataset.textTemplate) {\n        const template = element.dataset.textTemplate;\n        const interpolated = this.interpolateText(template, this.currentState);\n\n        // Track re-render if text actually changed\n        const currentText = element.textContent;\n        if (currentText !== interpolated) {\n          this.debugTracker.trackRerender(id, element, \"interpolate\");\n        }\n\n        element.textContent = interpolated;\n      }\n    }\n  }\n\n  /**\n   * Interpolate state values in text template\n   */\n  private interpolateText(template: string, state: Record<string, any>): string {\n    return template.replace(/\\$\\{([^}]+)\\}/g, (match, path) => {\n      try {\n        const value = path.split('.').reduce((obj: any, key: string) => {\n          if (key === 'state') return state;\n          return obj?.[key];\n        }, state);\n        return value !== undefined ? String(value) : match;\n      } catch {\n        return match;\n      }\n    });\n  }\n\n  /**\n   * Apply a single patch\n   */\n  private applyPatch(patch: Patch): void {\n    switch (patch.type) {\n      case \"create\":\n        this.onCreate(patch.id!, (patch as any).element_type!, patch.props || {});\n        break;\n      case \"setProp\":\n        this.onSetProp(patch.id!, patch.name!, patch.value);\n        break;\n      case \"setText\":\n        this.onSetText(patch.id!, patch.text!);\n        break;\n      case \"insert\":\n        this.onInsert((patch as any).parent_id!, patch.id!, (patch as any).before_id);\n        break;\n      case \"move\":\n        this.onMove((patch as any).parent_id!, patch.id!, (patch as any).before_id);\n        break;\n      case \"remove\":\n        this.onRemove(patch.id!);\n        break;\n    }\n  }\n\n  /**\n   * Create a new element\n   */\n  private onCreate(id: string, elementType: string, props: Record<string, any> | Map<string, any>): void {\n    const propsObj = props instanceof Map ? Object.fromEntries(props) : props;\n\n    const element = this.components.createElement(elementType, propsObj);\n\n    if (!element) {\n      const fallback = document.createElement(\"div\");\n      fallback.dataset.hypenType = elementType;\n      fallback.textContent = `Unknown component: ${elementType}`;\n      this.nodes.set(id, fallback);\n      return;\n    }\n\n    element.dataset.hypenType = elementType.toLowerCase();\n    element.dataset.hypenId = id;\n    (element as any).__hypenEngine = this.engine;\n\n    this.applicators.applyAll(element, propsObj);\n    this.nodes.set(id, element);\n    this.debugTracker.trackRerender(id, element, `create:${elementType}`);\n\n    if (!this.rootId) {\n      this.rootId = id;\n      if (!this.container.contains(element)) {\n        this.container.appendChild(element);\n      }\n    }\n  }\n\n  /**\n   * Set a property on an element\n   */\n  private onSetProp(id: string, name: string, value: any): void {\n    const element = this.nodes.get(id);\n    if (!element) return;\n\n    this.debugTracker.trackRerender(id, element, `setProp:${name}`);\n\n    if (name === \"0\" || name === \"text\") {\n      const elementType = element.dataset.hypenType;\n\n      if (elementType === \"input\") {\n        const inputEl = element as HTMLInputElement;\n        inputEl.value = String(value);\n        console.log(`[Renderer] Updated input value: \"${value}\"`);\n        return;\n      }\n\n      element.textContent = String(value);\n      if (element.dataset.textTemplate !== undefined) {\n        element.dataset.textTemplate = String(value);\n      }\n      console.log(`[Renderer] Updated text content: \"${value}\"`);\n      return;\n    }\n\n    this.applicators.apply(element, name, value);\n  }\n\n  /**\n   * Set text content\n   */\n  private onSetText(id: string, text: string): void {\n    const element = this.nodes.get(id);\n    if (!element) return;\n\n    this.debugTracker.trackRerender(id, element, \"setText\");\n    element.textContent = text;\n  }\n\n  /**\n   * Insert an element into the tree\n   */\n  private onInsert(parentId: string, id: string, beforeId?: string): void {\n    const parent = parentId === \"root\" ? this.container : this.nodes.get(parentId);\n    const child = this.nodes.get(id);\n\n    console.log(`[Renderer] Inserting ${id} into ${parentId}`, {\n      parent: parent ? `${parent.tagName}#${parent.id || 'no-id'}` : 'null',\n      child: child ? `${child.tagName}#${child.id || 'no-id'}` : 'null',\n      childText: child?.textContent?.substring(0, 20)\n    });\n\n    if (!parent || !child) return;\n\n    if (parentId === \"root\") {\n      this.rootId = id;\n    }\n\n    if (beforeId) {\n      const before = this.nodes.get(beforeId);\n      if (before && before.parentNode === parent) {\n        parent.insertBefore(child, before);\n      } else if (!parent.contains(child)) {\n        parent.appendChild(child);\n      }\n    } else {\n      if (!parent.contains(child)) {\n        parent.appendChild(child);\n      }\n    }\n  }\n\n  /**\n   * Move an element within the tree\n   */\n  private onMove(parentId: string, id: string, beforeId?: string): void {\n    this.onInsert(parentId, id, beforeId);\n  }\n\n  /**\n   * Remove an element from the tree\n   */\n  private onRemove(id: string): void {\n    const element = this.nodes.get(id);\n    if (!element) return;\n\n    if (element.parentNode) {\n      element.parentNode.removeChild(element);\n    }\n\n    this.nodes.delete(id);\n\n    if (this.rootId === id) {\n      this.rootId = null;\n    }\n  }\n\n  /**\n   * Get an element by ID\n   */\n  getNode(id: string): HTMLElement | undefined {\n    return this.nodes.get(id);\n  }\n\n  /**\n   * Clear all nodes\n   */\n  clear(): void {\n    this.container.innerHTML = \"\";\n    this.nodes.clear();\n    this.rootId = null;\n  }\n\n  /**\n   * Get the component registry (for registering custom components)\n   */\n  getComponentRegistry(): ComponentRegistry {\n    return this.components;\n  }\n\n  /**\n   * Get the applicator registry (for registering custom applicators)\n   */\n  getApplicatorRegistry(): ApplicatorRegistry {\n    return this.applicators;\n  }\n\n  /**\n   * Enable or configure debug mode\n   */\n  setDebugConfig(config: Partial<DebugConfig>): void {\n    this.debugTracker.setConfig(config);\n  }\n\n  /**\n   * Reset debug tracking for all elements\n   */\n  resetDebugTracking(): void {\n    this.debugTracker.resetAll();\n  }\n\n  /**\n   * Get debug statistics\n   */\n  getDebugStats(): { totalRerenders: number; elementCount: number; avgRerenders: number } {\n    return this.debugTracker.getStats();\n  }\n}\n"
   ],
   "mappings": "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",
-  "debugId": "0B5D2325D2CA974964756E2164756E21",
+  "debugId": "873A4414F9F26CBC64756E2164756E21",
   "names": []
 }

package/dist/src/hypen.js

@@ -0,0 +1,396 @@
+import {
+  DOMRenderer
+} from "./dom/renderer.js";
+import"./dom/components/index.js";
+import"./dom/components/list.js";
+import"./dom/components/textarea.js";
+import"./dom/components/grid.js";
+import"./dom/components/link.js";
+import"./dom/canvas/index.js";
+import"./dom/components/container.js";
+import"./dom/components/avatar.js";
+import"./dom/components/switch.js";
+import"./dom/components/badge.js";
+import"./dom/components/route.js";
+import"./dom/components/center.js";
+import"./dom/components/divider.js";
+import"./dom/components/spacer.js";
+import"./dom/components/text.js";
+import"./dom/components/input.js";
+import"./dom/components/stack.js";
+import"./dom/components/progressbar.js";
+import"./dom/components/button.js";
+import"./dom/components/heading.js";
+import"./dom/components/slider.js";
+import"./dom/components/card.js";
+import"./dom/components/image.js";
+import"./dom/components/video.js";
+import"./dom/components/spinner.js";
+import"./dom/components/row.js";
+import"./dom/components/select.js";
+import"./dom/components/router.js";
+import"./dom/components/audio.js";
+import"./dom/components/paragraph.js";
+import"./dom/applicators/index.js";
+import"./dom/applicators/layout.js";
+import"./dom/applicators/events.js";
+import"./dom/applicators/color.js";
+import"./dom/applicators/typography.js";
+import"./dom/applicators/effects.js";
+import"./dom/components/checkbox.js";
+import"./dom/components/column.js";
+import"./dom/applicators/transform.js";
+import"./dom/applicators/margin.js";
+import"./dom/applicators/advanced-layout.js";
+import"./dom/applicators/display.js";
+import"./dom/applicators/size.js";
+import"./dom/applicators/font.js";
+import"./dom/applicators/background.js";
+import"./dom/applicators/transition.js";
+import"./dom/debug.js";
+import"./dom/applicators/padding.js";
+import"./dom/applicators/border.js";
+import"../chunk-2s02mkzs.js";
+
+// src/hypen.ts
+import {
+  BrowserEngine as Engine,
+  HypenModuleInstance,
+  HypenRouter,
+  HypenGlobalContext,
+  componentLoader,
+  Router,
+  Route,
+  Link
+} from "@hypen-space/core";
+class Hypen {
+  engine = null;
+  renderer = null;
+  moduleInstance = null;
+  container = null;
+  config;
+  router;
+  globalContext;
+  moduleInstances = new Map;
+  constructor(config = {}) {
+    this.config = {
+      componentsDir: "./src/components",
+      debug: false,
+      ...config
+    };
+    this.router = new HypenRouter;
+    this.globalContext = new HypenGlobalContext;
+    componentLoader.register("Router", Router, "");
+    componentLoader.register("Route", Route, "");
+    componentLoader.register("Link", Link, "");
+    this.globalContext.__router = this.router;
+    this.globalContext.__hypenEngine = this;
+  }
+  async init() {
+    if (this.config.debug) {
+      console.log("[Hypen] Initializing...");
+    }
+    this.engine = new Engine;
+    await this.engine.init(this.config.wasmPath ? { wasmPath: this.config.wasmPath } : undefined);
+    if (this.config.debug) {
+      console.log("[Hypen] Engine initialized");
+    }
+  }
+  async loadComponents(componentsDir) {
+    const dir = componentsDir || this.config.componentsDir;
+    if (this.config.debug) {
+      console.log(`[Hypen] Loading components from ${dir}...`);
+    }
+    await componentLoader.loadFromComponentsDir(dir);
+    if (this.config.debug) {
+      console.log(`[Hypen] Loaded ${componentLoader.getNames().length} components`);
+    }
+  }
+  async render(componentName, containerSelector) {
+    if (!this.engine) {
+      throw new Error("[Hypen] Engine not initialized. Call init() first.");
+    }
+    if (typeof containerSelector === "string") {
+      const element = document.querySelector(containerSelector);
+      if (!element) {
+        throw new Error(`[Hypen] Container not found: ${containerSelector}`);
+      }
+      this.container = element;
+    } else {
+      this.container = containerSelector;
+    }
+    const component = componentLoader.get(componentName);
+    if (!component) {
+      throw new Error(`[Hypen] Component "${componentName}" not found. Available: ${componentLoader.getNames().join(", ")}`);
+    }
+    if (this.config.debug) {
+      console.log(`[Hypen] Rendering ${componentName} to`, this.container);
+    }
+    this.renderer = new DOMRenderer(this.container, this.engine, {
+      enabled: this.config.debugHeatmap || false,
+      showHeatmap: this.config.debugHeatmap || false,
+      heatmapIncrement: this.config.heatmapIncrement || 5,
+      fadeOutDuration: this.config.heatmapFadeOut || 2000,
+      maxOpacity: 0.8
+    });
+    this.engine.setRenderCallback((patches) => {
+      if (this.config.debug) {
+        console.log(`[Hypen] Applying ${patches.length} patches`);
+      }
+      this.renderer.applyPatches(patches);
+    });
+    const routerContext = {
+      root: this.router,
+      current: this.router
+    };
+    this.renderer.setContext(routerContext, this.globalContext);
+    const moduleId = this.extractModuleId(componentName, component.template);
+    this.moduleInstance = new HypenModuleInstance(this.engine, component.module, routerContext, this.globalContext);
+    this.globalContext.registerModule(moduleId, this.moduleInstance);
+    this.moduleInstances.set(moduleId, this.moduleInstance);
+    this.moduleInstance.onStateChange(() => {
+      const mergedState = this.getMergedState();
+      if (this.config.debug) {
+        console.log(`[Hypen] State changed, merged state:`, mergedState);
+      }
+      this.renderer.updateState(mergedState);
+    });
+    this.setupComponentResolver();
+    this.createNestedModuleInstances();
+    this.engine.renderSource(component.template);
+    this.renderer.updateState(this.getMergedState());
+    if (this.config.debug) {
+      console.log(`[Hypen] ${componentName} rendered successfully`);
+    }
+  }
+  async unmount() {
+    if (this.config.debug) {
+      console.log("[Hypen] Unmounting...");
+    }
+    if (this.moduleInstance) {
+      await this.moduleInstance.destroy();
+      this.moduleInstance = null;
+    }
+    if (this.container) {
+      this.container.innerHTML = "";
+      this.container = null;
+    }
+    this.renderer = null;
+    if (this.config.debug) {
+      console.log("[Hypen] Unmounted");
+    }
+  }
+  getModuleInstance() {
+    return this.moduleInstance;
+  }
+  getState() {
+    return this.moduleInstance?.getState() ?? null;
+  }
+  getRouter() {
+    return this.router;
+  }
+  getGlobalContext() {
+    return this.globalContext;
+  }
+  setDebugHeatmap(enabled) {
+    if (this.renderer) {
+      this.renderer.setDebugConfig({ enabled, showHeatmap: enabled });
+      if (this.config.debug) {
+        console.log(`[Hypen] Debug heatmap ${enabled ? "enabled" : "disabled"}`);
+      }
+    }
+  }
+  resetDebugTracking() {
+    if (this.renderer) {
+      this.renderer.resetDebugTracking();
+      if (this.config.debug) {
+        console.log(`[Hypen] Debug tracking reset`);
+      }
+    }
+  }
+  getDebugStats() {
+    return this.renderer?.getDebugStats() || null;
+  }
+  async renderLazyRoute(routePath, componentName, routeElement) {
+    if (!this.engine || !this.renderer) {
+      throw new Error("Engine not initialized");
+    }
+    const component = componentLoader.get(componentName);
+    if (!component) {
+      throw new Error(`Component ${componentName} not found`);
+    }
+    const template = component.template;
+    if (!template) {
+      throw new Error(`Component ${componentName} has no template`);
+    }
+    if (component.module && !this.moduleInstances.has(componentName)) {
+      const moduleId = this.extractModuleId(componentName, template);
+      const routerContext = {
+        root: this.router,
+        current: this.router
+      };
+      const moduleInstance = new HypenModuleInstance(this.engine, component.module, routerContext, this.globalContext);
+      this.globalContext.registerModule(moduleId, moduleInstance);
+      this.moduleInstances.set(componentName, moduleInstance);
+      moduleInstance.onStateChange(() => {
+        const mergedState2 = this.getMergedState();
+        if (this.config.debug) {
+          console.log(`[Hypen] Lazy component ${componentName} state changed:`, mergedState2);
+        }
+        this.renderer.updateState(mergedState2);
+      });
+    }
+    await new Promise((resolve) => setTimeout(resolve, 50));
+    const routeNodeId = routeElement.dataset.hypenId;
+    if (!routeNodeId) {
+      throw new Error(`Route element is missing data-hypen-id attribute`);
+    }
+    const mergedState = this.getMergedState();
+    this.engine.renderInto(template, routeNodeId, mergedState);
+    this.renderer.updateState(mergedState);
+  }
+  extractModuleId(componentName, template) {
+    const idMatch = template.match(/\.id\(["']([^"']+)["']\)/);
+    const matchedId = idMatch?.[1];
+    if (matchedId) {
+      return matchedId;
+    }
+    return componentName;
+  }
+  createNestedModuleInstances() {
+    const routerContext = {
+      root: this.router,
+      current: this.router
+    };
+    if (Router && !this.moduleInstances.has("Router")) {
+      const routerInstance = new HypenModuleInstance(this.engine, Router, routerContext, this.globalContext);
+      this.globalContext.registerModule("Router", routerInstance);
+      this.moduleInstances.set("Router", routerInstance);
+      routerInstance.onStateChange(() => {
+        const mergedState = this.getMergedState();
+        if (this.config.debug) {
+          console.log(`[Hypen] Router state changed:`, mergedState);
+        }
+        this.renderer.updateState(mergedState);
+      });
+    }
+    const componentNames = componentLoader.getNames();
+    for (const name of componentNames) {
+      if (this.moduleInstances.has(name)) {
+        continue;
+      }
+      const comp = componentLoader.get(name);
+      if (!comp || !comp.module) {
+        continue;
+      }
+      if (this.config.debug) {
+        console.log(`[Hypen] Creating nested module instance for: ${name}`);
+      }
+      const moduleInstance = new HypenModuleInstance(this.engine, comp.module, routerContext, this.globalContext);
+      this.globalContext.registerModule(name, moduleInstance);
+      this.moduleInstances.set(name, moduleInstance);
+      moduleInstance.onStateChange(() => {
+        const mergedState = this.getMergedState();
+        if (this.config.debug) {
+          console.log(`[Hypen] Nested component ${name} state changed:`, mergedState);
+        }
+        this.renderer.updateState(mergedState);
+      });
+    }
+  }
+  getMergedState() {
+    const merged = {};
+    if (this.moduleInstance) {
+      const mainState = this.moduleInstance.getState();
+      Object.assign(merged, mainState);
+    }
+    for (const [name, instance] of this.moduleInstances.entries()) {
+      const nestedState = instance.getState();
+      Object.assign(merged, nestedState);
+    }
+    return merged;
+  }
+  setupComponentResolver() {
+    if (!this.engine)
+      return;
+    const builtInElements = new Set([
+      "Column",
+      "Row",
+      "Text",
+      "Button",
+      "Image",
+      "Input",
+      "Container",
+      "Box",
+      "Center",
+      "List",
+      "Canvas",
+      "Spacer",
+      "Divider",
+      "ScrollView"
+    ]);
+    this.engine.setComponentResolver((componentName, contextPath) => {
+      if (builtInElements.has(componentName)) {
+        return null;
+      }
+      if (this.config.debug) {
+        console.log(`[Hypen] Resolving component: ${componentName} (context: ${contextPath})`);
+      }
+      const componentDef = componentLoader.get(componentName);
+      if (!componentDef) {
+        if (this.config.debug) {
+          console.log(`[Hypen] Component not found: ${componentName}`);
+        }
+        return null;
+      }
+      const isPassthrough = componentName === "Router";
+      const isLazy = componentName === "Route";
+      const resolved = {
+        source: componentDef.template,
+        path: componentDef.path || componentName,
+        passthrough: isPassthrough,
+        lazy: isLazy
+      };
+      if (this.config.debug) {
+        const flags = [];
+        if (isPassthrough)
+          flags.push("passthrough");
+        if (isLazy)
+          flags.push("lazy");
+        const flagStr = flags.length > 0 ? ` (${flags.join(", ")})` : "";
+        console.log(`[Hypen] Resolved ${componentName} -> ${resolved.path}${flagStr}`);
+      }
+      return resolved;
+    });
+  }
+}
+async function render(componentName, containerSelector, config) {
+  const hypen = new Hypen(config);
+  await hypen.init();
+  await hypen.loadComponents();
+  await hypen.render(componentName, containerSelector);
+  return hypen;
+}
+async function renderWithComponents(components, componentName, containerSelector, config) {
+  const hypen = new Hypen(config);
+  await hypen.init();
+  for (const [name, { module, template }] of Object.entries(components)) {
+    let processedTemplate = template;
+    const moduleMatch = template.match(/^\s*module\s+\w+\s*\{([\s\S]*)\}\s*$/);
+    if (moduleMatch && moduleMatch[1]) {
+      processedTemplate = moduleMatch[1].trim();
+    }
+    componentLoader.register(name, module, processedTemplate);
+  }
+  await hypen.render(componentName, containerSelector);
+  return hypen;
+}
+export {
+  renderWithComponents,
+  render,
+  Hypen
+};
+
+export { Hypen, render, renderWithComponents };
+
+//# debugId=7427343EFC068BA764756E2164756E21

package/dist/src/hypen.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/hypen.ts"],
+  "sourcesContent": [
+    "/**\n * Hypen - High-Level API for Web Applications\n *\n * Simple API for rendering Hypen applications (like ReactDOM.render)\n */\n\nimport {\n  BrowserEngine as Engine,\n  HypenModuleInstance,\n  HypenRouter,\n  HypenGlobalContext,\n  componentLoader,\n  Router,\n  Route,\n  Link,\n  type RouterContext,\n  type HypenModuleDefinition,\n} from \"@hypen-space/core\";\nimport { DOMRenderer } from \"./dom/renderer.js\";\nimport type { DebugConfig } from \"./dom/debug.js\";\n\nexport interface HypenConfig {\n  /** Base directory for components (default: \"./src/components\") */\n  componentsDir?: string;\n  /** Enable debug logging */\n  debug?: boolean;\n  /** Custom WASM path */\n  wasmPath?: string;\n  /** Enable re-render heatmap debugging */\n  debugHeatmap?: boolean;\n  /** Heatmap increment per re-render (default: 5%) */\n  heatmapIncrement?: number;\n  /** Heatmap fade out duration in ms (default: 2000) */\n  heatmapFadeOut?: number;\n}\n\nexport class Hypen {\n  private engine: Engine | null = null;\n  private renderer: DOMRenderer | null = null;\n  private moduleInstance: HypenModuleInstance<any> | null = null;\n  private container: HTMLElement | null = null;\n  private config: HypenConfig;\n  private router: HypenRouter;\n  private globalContext: HypenGlobalContext;\n  private moduleInstances = new Map<string, HypenModuleInstance<any>>();\n\n  constructor(config: HypenConfig = {}) {\n    this.config = {\n      componentsDir: \"./src/components\",\n      debug: false,\n      ...config,\n    };\n\n    // Initialize router and global context\n    this.router = new HypenRouter();\n    this.globalContext = new HypenGlobalContext();\n\n    // Register built-in components\n    componentLoader.register(\"Router\", Router, \"\");\n    componentLoader.register(\"Route\", Route, \"\");\n    componentLoader.register(\"Link\", Link, \"\");\n\n    // Store router and hypen instance in global context for access in components\n    (this.globalContext as any).__router = this.router;\n    (this.globalContext as any).__hypenEngine = this;\n  }\n\n  /**\n   * Initialize the Hypen runtime\n   * Must be called before render()\n   */\n  async init(): Promise<void> {\n    if (this.config.debug) {\n      console.log(\"[Hypen] Initializing...\");\n    }\n\n    // Initialize engine\n    this.engine = new Engine();\n    await this.engine.init(\n      this.config.wasmPath ? { wasmPath: this.config.wasmPath } : undefined\n    );\n\n    if (this.config.debug) {\n      console.log(\"[Hypen] Engine initialized\");\n    }\n  }\n\n  /**\n   * Load all components from the components directory\n   */\n  async loadComponents(componentsDir?: string): Promise<void> {\n    const dir = componentsDir || this.config.componentsDir!;\n\n    if (this.config.debug) {\n      console.log(`[Hypen] Loading components from ${dir}...`);\n    }\n\n    await componentLoader.loadFromComponentsDir(dir);\n\n    if (this.config.debug) {\n      console.log(\n        `[Hypen] Loaded ${componentLoader.getNames().length} components`\n      );\n    }\n  }\n\n  /**\n   * Render a component to a DOM container\n   *\n   * @param componentName - Name of the component to render (e.g., \"HomePage\")\n   * @param containerSelector - CSS selector or HTMLElement for the mount point\n   */\n  async render(\n    componentName: string,\n    containerSelector: string | HTMLElement\n  ): Promise<void> {\n    if (!this.engine) {\n      throw new Error(\"[Hypen] Engine not initialized. Call init() first.\");\n    }\n\n    // Get the container element\n    if (typeof containerSelector === \"string\") {\n      const element = document.querySelector(containerSelector);\n      if (!element) {\n        throw new Error(`[Hypen] Container not found: ${containerSelector}`);\n      }\n      this.container = element as HTMLElement;\n    } else {\n      this.container = containerSelector;\n    }\n\n    // Get the component definition\n    const component = componentLoader.get(componentName);\n    if (!component) {\n      throw new Error(\n        `[Hypen] Component \"${componentName}\" not found. Available: ${componentLoader.getNames().join(\", \")}`\n      );\n    }\n\n    if (this.config.debug) {\n      console.log(`[Hypen] Rendering ${componentName} to`, this.container);\n    }\n\n    // Create renderer with debug config\n    this.renderer = new DOMRenderer(this.container, this.engine, {\n      enabled: this.config.debugHeatmap || false,\n      showHeatmap: this.config.debugHeatmap || false,\n      heatmapIncrement: this.config.heatmapIncrement || 5,\n      fadeOutDuration: this.config.heatmapFadeOut || 2000,\n      maxOpacity: 0.8,\n    });\n\n    // Set render callback\n    this.engine.setRenderCallback((patches) => {\n      if (this.config.debug) {\n        console.log(`[Hypen] Applying ${patches.length} patches`);\n      }\n      this.renderer!.applyPatches(patches);\n    });\n\n    // Create router context\n    const routerContext: RouterContext = {\n      root: this.router,\n      current: this.router,\n    };\n\n    // Set context on renderer for component composition\n    this.renderer.setContext(routerContext, this.globalContext);\n\n    // Extract module ID from component name or .id() applicator\n    const moduleId = this.extractModuleId(componentName, component.template);\n\n    // Create module instance with router and global context\n    this.moduleInstance = new HypenModuleInstance(\n      this.engine,\n      component.module,\n      routerContext,\n      this.globalContext\n    );\n\n    // Register module in global context\n    this.globalContext.registerModule(moduleId, this.moduleInstance);\n    this.moduleInstances.set(moduleId, this.moduleInstance);\n\n    // Connect module state changes to renderer\n    this.moduleInstance.onStateChange(() => {\n      const mergedState = this.getMergedState();\n      if (this.config.debug) {\n        console.log(`[Hypen] State changed, merged state:`, mergedState);\n      }\n      this.renderer!.updateState(mergedState);\n    });\n\n    // Set up component resolver for dynamic component composition\n    this.setupComponentResolver();\n\n    // Create module instances for ALL components that have state\n    this.createNestedModuleInstances();\n\n    // Render the UI template\n    this.engine.renderSource(component.template);\n\n    // Update renderer with initial state\n    this.renderer!.updateState(this.getMergedState());\n\n    if (this.config.debug) {\n      console.log(`[Hypen] ${componentName} rendered successfully`);\n    }\n  }\n\n  /**\n   * Unmount and cleanup\n   */\n  async unmount(): Promise<void> {\n    if (this.config.debug) {\n      console.log(\"[Hypen] Unmounting...\");\n    }\n\n    if (this.moduleInstance) {\n      await this.moduleInstance.destroy();\n      this.moduleInstance = null;\n    }\n\n    if (this.container) {\n      this.container.innerHTML = \"\";\n      this.container = null;\n    }\n\n    this.renderer = null;\n\n    if (this.config.debug) {\n      console.log(\"[Hypen] Unmounted\");\n    }\n  }\n\n  /**\n   * Get the current module instance\n   */\n  getModuleInstance(): HypenModuleInstance<any> | null {\n    return this.moduleInstance;\n  }\n\n  /**\n   * Get the current state\n   */\n  getState(): any {\n    return this.moduleInstance?.getState() ?? null;\n  }\n\n  /**\n   * Get the router instance\n   */\n  getRouter(): HypenRouter {\n    return this.router;\n  }\n\n  /**\n   * Get the global context\n   */\n  getGlobalContext(): HypenGlobalContext {\n    return this.globalContext;\n  }\n\n  /**\n   * Enable or disable debug heatmap mode\n   */\n  setDebugHeatmap(enabled: boolean): void {\n    if (this.renderer) {\n      this.renderer.setDebugConfig({ enabled, showHeatmap: enabled });\n      if (this.config.debug) {\n        console.log(`[Hypen] Debug heatmap ${enabled ? \"enabled\" : \"disabled\"}`);\n      }\n    }\n  }\n\n  /**\n   * Reset debug tracking for all elements\n   */\n  resetDebugTracking(): void {\n    if (this.renderer) {\n      this.renderer.resetDebugTracking();\n      if (this.config.debug) {\n        console.log(`[Hypen] Debug tracking reset`);\n      }\n    }\n  }\n\n  /**\n   * Get debug statistics\n   */\n  getDebugStats(): {\n    totalRerenders: number;\n    elementCount: number;\n    avgRerenders: number;\n  } | null {\n    return this.renderer?.getDebugStats() || null;\n  }\n\n  /**\n   * Render a lazy route component into a specific route element\n   * This is called by the Router when a route becomes active\n   */\n  async renderLazyRoute(\n    routePath: string,\n    componentName: string,\n    routeElement: HTMLElement\n  ): Promise<void> {\n    if (!this.engine || !this.renderer) {\n      throw new Error(\"Engine not initialized\");\n    }\n\n    // Get the component from the loader\n    const component = componentLoader.get(componentName);\n    if (!component) {\n      throw new Error(`Component ${componentName} not found`);\n    }\n\n    // Get the component template\n    const template = component.template;\n    if (!template) {\n      throw new Error(`Component ${componentName} has no template`);\n    }\n\n    // Create module instance for this component if it has state\n    if (component.module && !this.moduleInstances.has(componentName)) {\n      const moduleId = this.extractModuleId(componentName, template);\n\n      const routerContext: RouterContext = {\n        root: this.router,\n        current: this.router,\n      };\n\n      const moduleInstance = new HypenModuleInstance(\n        this.engine,\n        component.module,\n        routerContext,\n        this.globalContext\n      );\n\n      this.globalContext.registerModule(moduleId, moduleInstance);\n      this.moduleInstances.set(componentName, moduleInstance);\n\n      // Listen to state changes\n      moduleInstance.onStateChange(() => {\n        const mergedState = this.getMergedState();\n        if (this.config.debug) {\n          console.log(\n            `[Hypen] Lazy component ${componentName} state changed:`,\n            mergedState\n          );\n        }\n        this.renderer!.updateState(mergedState);\n      });\n    }\n\n    // Wait a tick for module instance to initialize and fetch data\n    await new Promise((resolve) => setTimeout(resolve, 50));\n\n    // Get the route element's node ID from the renderer\n    const routeNodeId = routeElement.dataset.hypenId;\n    if (!routeNodeId) {\n      throw new Error(`Route element is missing data-hypen-id attribute`);\n    }\n\n    // Get the current merged state\n    const mergedState = this.getMergedState();\n\n    // Render into the Route element\n    this.engine.renderInto(template, routeNodeId, mergedState);\n\n    // Ensure freshly created text nodes are interpolated with current state\n    this.renderer!.updateState(mergedState);\n  }\n\n  /**\n   * Extract module ID from component name or .id() applicator\n   */\n  private extractModuleId(componentName: string, template: string): string {\n    // Look for .id(\"CustomName\") or .id('CustomName') in the template\n    const idMatch = template.match(/\\.id\\([\"']([^\"']+)[\"']\\)/);\n    const matchedId = idMatch?.[1];\n    if (matchedId) {\n      return matchedId;\n    }\n\n    // Default to component name\n    return componentName;\n  }\n\n  /**\n   * Create module instances for all components that have state\n   */\n  private createNestedModuleInstances(): void {\n    const routerContext: RouterContext = {\n      root: this.router,\n      current: this.router,\n    };\n\n    // Create built-in Router module instance\n    if (Router && !this.moduleInstances.has(\"Router\")) {\n      const routerInstance = new HypenModuleInstance(\n        this.engine!,\n        Router,\n        routerContext,\n        this.globalContext\n      );\n      this.globalContext.registerModule(\"Router\", routerInstance);\n      this.moduleInstances.set(\"Router\", routerInstance);\n      routerInstance.onStateChange(() => {\n        const mergedState = this.getMergedState();\n        if (this.config.debug) {\n          console.log(`[Hypen] Router state changed:`, mergedState);\n        }\n        this.renderer!.updateState(mergedState);\n      });\n    }\n\n    // Get all registered components\n    const componentNames = componentLoader.getNames();\n\n    for (const name of componentNames) {\n      // Skip if already created\n      if (this.moduleInstances.has(name)) {\n        continue;\n      }\n\n      const comp = componentLoader.get(name);\n      if (!comp || !comp.module) {\n        continue;\n      }\n\n      // Create module instance\n      if (this.config.debug) {\n        console.log(`[Hypen] Creating nested module instance for: ${name}`);\n      }\n\n      const moduleInstance = new HypenModuleInstance(\n        this.engine!,\n        comp.module,\n        routerContext,\n        this.globalContext\n      );\n\n      this.globalContext.registerModule(name, moduleInstance);\n      this.moduleInstances.set(name, moduleInstance);\n\n      // Connect state changes to renderer\n      moduleInstance.onStateChange(() => {\n        const mergedState = this.getMergedState();\n        if (this.config.debug) {\n          console.log(\n            `[Hypen] Nested component ${name} state changed:`,\n            mergedState\n          );\n        }\n        this.renderer!.updateState(mergedState);\n      });\n    }\n  }\n\n  /**\n   * Get merged state from all module instances\n   */\n  private getMergedState(): Record<string, any> {\n    const merged: Record<string, any> = {};\n\n    // Include main module state\n    if (this.moduleInstance) {\n      const mainState = this.moduleInstance.getState();\n      Object.assign(merged, mainState);\n    }\n\n    // Include all nested component states\n    for (const [name, instance] of this.moduleInstances.entries()) {\n      const nestedState = instance.getState();\n      Object.assign(merged, nestedState);\n    }\n\n    return merged;\n  }\n\n  /**\n   * Set up component resolver for the engine\n   */\n  private setupComponentResolver(): void {\n    if (!this.engine) return;\n\n    // List of built-in DOM elements that should NOT be resolved\n    const builtInElements = new Set([\n      \"Column\",\n      \"Row\",\n      \"Text\",\n      \"Button\",\n      \"Image\",\n      \"Input\",\n      \"Container\",\n      \"Box\",\n      \"Center\",\n      \"List\",\n      \"Canvas\",\n      \"Spacer\",\n      \"Divider\",\n      \"ScrollView\",\n    ]);\n\n    this.engine.setComponentResolver(\n      (componentName: string, contextPath: string | null) => {\n        // Don't try to resolve built-in DOM elements\n        if (builtInElements.has(componentName)) {\n          return null;\n        }\n\n        if (this.config.debug) {\n          console.log(\n            `[Hypen] Resolving component: ${componentName} (context: ${contextPath})`\n          );\n        }\n\n        // Check if component is registered\n        const componentDef = componentLoader.get(componentName);\n        if (!componentDef) {\n          if (this.config.debug) {\n            console.log(`[Hypen] Component not found: ${componentName}`);\n          }\n          return null;\n        }\n\n        // Router is passthrough, Route is lazy\n        const isPassthrough = componentName === \"Router\";\n        const isLazy = componentName === \"Route\";\n\n        const resolved = {\n          source: componentDef.template,\n          path: componentDef.path || componentName,\n          passthrough: isPassthrough,\n          lazy: isLazy,\n        };\n\n        if (this.config.debug) {\n          const flags = [];\n          if (isPassthrough) flags.push(\"passthrough\");\n          if (isLazy) flags.push(\"lazy\");\n          const flagStr = flags.length > 0 ? ` (${flags.join(\", \")})` : \"\";\n          console.log(\n            `[Hypen] Resolved ${componentName} -> ${resolved.path}${flagStr}`\n          );\n        }\n\n        return resolved;\n      }\n    );\n  }\n}\n\n/**\n * Quick render function (like ReactDOM.render)\n *\n * @example\n * ```typescript\n * import { render } from \"@hypen-space/web\";\n *\n * await render(\"HomePage\", \"#app\");\n * ```\n */\nexport async function render(\n  componentName: string,\n  containerSelector: string | HTMLElement,\n  config?: HypenConfig\n): Promise<Hypen> {\n  const hypen = new Hypen(config);\n  await hypen.init();\n  await hypen.loadComponents();\n  await hypen.render(componentName, containerSelector);\n  return hypen;\n}\n\n/**\n * Render with explicit component loading\n *\n * @example\n * ```typescript\n * import { renderWithComponents } from \"@hypen-space/web\";\n * import HomePage from \"./components/HomePage/component\";\n * import homePageTemplate from \"./components/HomePage/component.hypen\";\n *\n * await renderWithComponents(\n *   { HomePage: { module: HomePage, template: homePageTemplate } },\n *   \"HomePage\",\n *   \"#app\"\n * );\n * ```\n */\nexport async function renderWithComponents(\n  components: Record<string, { module: HypenModuleDefinition; template: string }>,\n  componentName: string,\n  containerSelector: string | HTMLElement,\n  config?: HypenConfig\n): Promise<Hypen> {\n  const hypen = new Hypen(config);\n  await hypen.init();\n\n  // Register components manually\n  for (const [name, { module, template }] of Object.entries(components)) {\n    let processedTemplate = template;\n\n    // If template starts with \"module ComponentName {\", extract just the children\n    const moduleMatch = template.match(/^\\s*module\\s+\\w+\\s*\\{([\\s\\S]*)\\}\\s*$/);\n    if (moduleMatch && moduleMatch[1]) {\n      processedTemplate = moduleMatch[1].trim();\n    }\n\n    componentLoader.register(name, module, processedTemplate);\n  }\n\n  await hypen.render(componentName, containerSelector);\n  return hypen;\n}\n"
+  ],
+  "mappings": "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",
+  "debugId": "7427343EFC068BA764756E2164756E21",
+  "names": []
+}