@hypen-space/web 0.2.4 → 0.2.6

package/dist/src/dom/renderer.js

@@ -187,9 +187,17 @@ class DOMRenderer {
         console.log(`[Renderer] Updated input value: "${value}"`);
         return;
       }
-      element.textContent = String(value);
-      if (element.dataset.textTemplate !== undefined) {
-        element.dataset.textTemplate = String(value);
+      const nextText = String(value);
+      element.textContent = nextText;
+      const currentTemplate = element.dataset.textTemplate;
+      const nextLooksLikeTemplate = nextText.includes("${");
+      const currentLooksLikeTemplate = typeof currentTemplate === "string" && currentTemplate.includes("${");
+      if (nextLooksLikeTemplate) {
+        element.dataset.textTemplate = nextText;
+      } else if (currentTemplate === undefined) {
+        element.dataset.textTemplate = nextText;
+      } else if (!currentLooksLikeTemplate) {
+        element.dataset.textTemplate = nextText;
       }
       console.log(`[Renderer] Updated text content: "${value}"`);
       return;
@@ -274,4 +282,4 @@ export {
 
 export { DOMRenderer };
 
-//# debugId=873A4414F9F26CBC64756E2164756E21
+//# debugId=4035E3738262CFE264756E2164756E21

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

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["../src/dom/renderer.ts"],
   "sourcesContent": [
-    "/**\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"
+    "/**\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      const nextText = String(value);\n      element.textContent = nextText;\n\n      // Preserve the original template when it contains state interpolation.\n      // Engine patches may send interpolated strings; if we overwrite the template,\n      // future state updates won't be able to re-interpolate.\n      const currentTemplate = element.dataset.textTemplate;\n      const nextLooksLikeTemplate = nextText.includes(\"${\");\n      const currentLooksLikeTemplate = typeof currentTemplate === \"string\" && currentTemplate.includes(\"${\");\n\n      if (nextLooksLikeTemplate) {\n        element.dataset.textTemplate = nextText;\n      } else if (currentTemplate === undefined) {\n        // No template stored yet; treat this as the template.\n        element.dataset.textTemplate = nextText;\n      } else if (!currentLooksLikeTemplate) {\n        // If current template isn't a template, keep it in sync.\n        element.dataset.textTemplate = nextText;\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": "873A4414F9F26CBC64756E2164756E21",
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoBO,MAAM,YAAY;AAAA,EACf;AAAA,EACA,QAAkC,IAAI;AAAA,EACtC,SAAwB;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAoC,CAAC;AAAA,EACrC,gBAAsC;AAAA,EACtC,gBAA2C;AAAA,EAC3C,qBAAqB,IAAI;AAAA,EACzB;AAAA,EAER,WAAW,CAAC,WAAwB,QAAiB,aAAoC;AAAA,IACvF,KAAK,YAAY;AAAA,IACjB,KAAK,SAAS;AAAA,IACd,KAAK,aAAa,IAAI;AAAA,IACtB,KAAK,cAAc,IAAI;AAAA,IACvB,KAAK,eAAe,IAAI,gBAAgB,KAAK,uBAAuB,YAAY,CAAC;AAAA,IAGjF,KAAK,WAAW,SAAS,UAAU,aAAa;AAAA,IAChD,YAAY,MAAM,YAAY,OAAO,QAAQ,iBAAiB,GAAG;AAAA,MAC/D,KAAK,YAAY,SAAS,MAAM,OAAO;AAAA,IACzC;AAAA;AAAA,EAMF,UAAU,CAAC,eAA8B,eAAyC;AAAA,IAChF,KAAK,gBAAgB;AAAA,IACrB,KAAK,gBAAgB;AAAA;AAAA,EAMvB,YAAY,CAAC,SAAwB;AAAA,IACnC,WAAW,SAAS,SAAS;AAAA,MAC3B,KAAK,WAAW,KAAK;AAAA,IACvB;AAAA;AAAA,EAMF,WAAW,CAAC,OAAkC;AAAA,IAC5C,QAAQ,IAAI,8BAA8B,KAAK;AAAA,IAC/C,KAAK,eAAe;AAAA,IACpB,KAAK,mBAAmB;AAAA;AAAA,EAMlB,mBAAmB,CAAC,gBAA2C;AAAA,IACrE,KAAK,eAAe,KAAK,KAAK,iBAAiB,eAAe;AAAA,IAC9D,QAAQ,IAAI,4BAA4B,KAAK,YAAY;AAAA,IACzD,KAAK,mBAAmB;AAAA;AAAA,EAMlB,kBAAkB,GAAS;AAAA,IACjC,YAAY,IAAI,YAAY,KAAK,MAAM,QAAQ,GAAG;AAAA,MAChD,IAAI,QAAQ,QAAQ,cAAc,UAAU,QAAQ,QAAQ,cAAc;AAAA,QACxE,MAAM,WAAW,QAAQ,QAAQ;AAAA,QACjC,MAAM,eAAe,KAAK,gBAAgB,UAAU,KAAK,YAAY;AAAA,QAGrE,MAAM,cAAc,QAAQ;AAAA,QAC5B,IAAI,gBAAgB,cAAc;AAAA,UAChC,KAAK,aAAa,cAAc,IAAI,SAAS,aAAa;AAAA,QAC5D;AAAA,QAEA,QAAQ,cAAc;AAAA,MACxB;AAAA,IACF;AAAA;AAAA,EAMM,eAAe,CAAC,UAAkB,OAAoC;AAAA,IAC5E,OAAO,SAAS,QAAQ,kBAAkB,CAAC,OAAO,SAAS;AAAA,MACzD,IAAI;AAAA,QACF,MAAM,QAAQ,KAAK,MAAM,GAAG,EAAE,OAAO,CAAC,KAAU,QAAgB;AAAA,UAC9D,IAAI,QAAQ;AAAA,YAAS,OAAO;AAAA,UAC5B,OAAO,MAAM;AAAA,WACZ,KAAK;AAAA,QACR,OAAO,UAAU,YAAY,OAAO,KAAK,IAAI;AAAA,QAC7C,MAAM;AAAA,QACN,OAAO;AAAA;AAAA,KAEV;AAAA;AAAA,EAMK,UAAU,CAAC,OAAoB;AAAA,IACrC,QAAQ,MAAM;AAAA,WACP;AAAA,QACH,KAAK,SAAS,MAAM,IAAM,MAAc,cAAe,MAAM,SAAS,CAAC,CAAC;AAAA,QACxE;AAAA,WACG;AAAA,QACH,KAAK,UAAU,MAAM,IAAK,MAAM,MAAO,MAAM,KAAK;AAAA,QAClD;AAAA,WACG;AAAA,QACH,KAAK,UAAU,MAAM,IAAK,MAAM,IAAK;AAAA,QACrC;AAAA,WACG;AAAA,QACH,KAAK,SAAU,MAAc,WAAY,MAAM,IAAM,MAAc,SAAS;AAAA,QAC5E;AAAA,WACG;AAAA,QACH,KAAK,OAAQ,MAAc,WAAY,MAAM,IAAM,MAAc,SAAS;AAAA,QAC1E;AAAA,WACG;AAAA,QACH,KAAK,SAAS,MAAM,EAAG;AAAA,QACvB;AAAA;AAAA;AAAA,EAOE,QAAQ,CAAC,IAAY,aAAqB,OAAqD;AAAA,IACrG,MAAM,WAAW,iBAAiB,MAAM,OAAO,YAAY,KAAK,IAAI;AAAA,IAEpE,MAAM,UAAU,KAAK,WAAW,cAAc,aAAa,QAAQ;AAAA,IAEnE,IAAI,CAAC,SAAS;AAAA,MACZ,MAAM,WAAW,SAAS,cAAc,KAAK;AAAA,MAC7C,SAAS,QAAQ,YAAY;AAAA,MAC7B,SAAS,cAAc,sBAAsB;AAAA,MAC7C,KAAK,MAAM,IAAI,IAAI,QAAQ;AAAA,MAC3B;AAAA,IACF;AAAA,IAEA,QAAQ,QAAQ,YAAY,YAAY,YAAY;AAAA,IACpD,QAAQ,QAAQ,UAAU;AAAA,IACzB,QAAgB,gBAAgB,KAAK;AAAA,IAEtC,KAAK,YAAY,SAAS,SAAS,QAAQ;AAAA,IAC3C,KAAK,MAAM,IAAI,IAAI,OAAO;AAAA,IAC1B,KAAK,aAAa,cAAc,IAAI,SAAS,UAAU,aAAa;AAAA,IAEpE,IAAI,CAAC,KAAK,QAAQ;AAAA,MAChB,KAAK,SAAS;AAAA,MACd,IAAI,CAAC,KAAK,UAAU,SAAS,OAAO,GAAG;AAAA,QACrC,KAAK,UAAU,YAAY,OAAO;AAAA,MACpC;AAAA,IACF;AAAA;AAAA,EAMM,SAAS,CAAC,IAAY,MAAc,OAAkB;AAAA,IAC5D,MAAM,UAAU,KAAK,MAAM,IAAI,EAAE;AAAA,IACjC,IAAI,CAAC;AAAA,MAAS;AAAA,IAEd,KAAK,aAAa,cAAc,IAAI,SAAS,WAAW,MAAM;AAAA,IAE9D,IAAI,SAAS,OAAO,SAAS,QAAQ;AAAA,MACnC,MAAM,cAAc,QAAQ,QAAQ;AAAA,MAEpC,IAAI,gBAAgB,SAAS;AAAA,QAC3B,MAAM,UAAU;AAAA,QAChB,QAAQ,QAAQ,OAAO,KAAK;AAAA,QAC5B,QAAQ,IAAI,oCAAoC,QAAQ;AAAA,QACxD;AAAA,MACF;AAAA,MAEA,MAAM,WAAW,OAAO,KAAK;AAAA,MAC7B,QAAQ,cAAc;AAAA,MAKtB,MAAM,kBAAkB,QAAQ,QAAQ;AAAA,MACxC,MAAM,wBAAwB,SAAS,SAAS,IAAI;AAAA,MACpD,MAAM,2BAA2B,OAAO,oBAAoB,YAAY,gBAAgB,SAAS,IAAI;AAAA,MAErG,IAAI,uBAAuB;AAAA,QACzB,QAAQ,QAAQ,eAAe;AAAA,MACjC,EAAO,SAAI,oBAAoB,WAAW;AAAA,QAExC,QAAQ,QAAQ,eAAe;AAAA,MACjC,EAAO,SAAI,CAAC,0BAA0B;AAAA,QAEpC,QAAQ,QAAQ,eAAe;AAAA,MACjC;AAAA,MACA,QAAQ,IAAI,qCAAqC,QAAQ;AAAA,MACzD;AAAA,IACF;AAAA,IAEA,KAAK,YAAY,MAAM,SAAS,MAAM,KAAK;AAAA;AAAA,EAMrC,SAAS,CAAC,IAAY,MAAoB;AAAA,IAChD,MAAM,UAAU,KAAK,MAAM,IAAI,EAAE;AAAA,IACjC,IAAI,CAAC;AAAA,MAAS;AAAA,IAEd,KAAK,aAAa,cAAc,IAAI,SAAS,SAAS;AAAA,IACtD,QAAQ,cAAc;AAAA;AAAA,EAMhB,QAAQ,CAAC,UAAkB,IAAY,UAAyB;AAAA,IACtE,MAAM,SAAS,aAAa,SAAS,KAAK,YAAY,KAAK,MAAM,IAAI,QAAQ;AAAA,IAC7E,MAAM,QAAQ,KAAK,MAAM,IAAI,EAAE;AAAA,IAE/B,QAAQ,IAAI,wBAAwB,WAAW,YAAY;AAAA,MACzD,QAAQ,SAAS,GAAG,OAAO,WAAW,OAAO,MAAM,YAAY;AAAA,MAC/D,OAAO,QAAQ,GAAG,MAAM,WAAW,MAAM,MAAM,YAAY;AAAA,MAC3D,WAAW,OAAO,aAAa,UAAU,GAAG,EAAE;AAAA,IAChD,CAAC;AAAA,IAED,IAAI,CAAC,UAAU,CAAC;AAAA,MAAO;AAAA,IAEvB,IAAI,aAAa,QAAQ;AAAA,MACvB,KAAK,SAAS;AAAA,IAChB;AAAA,IAEA,IAAI,UAAU;AAAA,MACZ,MAAM,SAAS,KAAK,MAAM,IAAI,QAAQ;AAAA,MACtC,IAAI,UAAU,OAAO,eAAe,QAAQ;AAAA,QAC1C,OAAO,aAAa,OAAO,MAAM;AAAA,MACnC,EAAO,SAAI,CAAC,OAAO,SAAS,KAAK,GAAG;AAAA,QAClC,OAAO,YAAY,KAAK;AAAA,MAC1B;AAAA,IACF,EAAO;AAAA,MACL,IAAI,CAAC,OAAO,SAAS,KAAK,GAAG;AAAA,QAC3B,OAAO,YAAY,KAAK;AAAA,MAC1B;AAAA;AAAA;AAAA,EAOI,MAAM,CAAC,UAAkB,IAAY,UAAyB;AAAA,IACpE,KAAK,SAAS,UAAU,IAAI,QAAQ;AAAA;AAAA,EAM9B,QAAQ,CAAC,IAAkB;AAAA,IACjC,MAAM,UAAU,KAAK,MAAM,IAAI,EAAE;AAAA,IACjC,IAAI,CAAC;AAAA,MAAS;AAAA,IAEd,IAAI,QAAQ,YAAY;AAAA,MACtB,QAAQ,WAAW,YAAY,OAAO;AAAA,IACxC;AAAA,IAEA,KAAK,MAAM,OAAO,EAAE;AAAA,IAEpB,IAAI,KAAK,WAAW,IAAI;AAAA,MACtB,KAAK,SAAS;AAAA,IAChB;AAAA;AAAA,EAMF,OAAO,CAAC,IAAqC;AAAA,IAC3C,OAAO,KAAK,MAAM,IAAI,EAAE;AAAA;AAAA,EAM1B,KAAK,GAAS;AAAA,IACZ,KAAK,UAAU,YAAY;AAAA,IAC3B,KAAK,MAAM,MAAM;AAAA,IACjB,KAAK,SAAS;AAAA;AAAA,EAMhB,oBAAoB,GAAsB;AAAA,IACxC,OAAO,KAAK;AAAA;AAAA,EAMd,qBAAqB,GAAuB;AAAA,IAC1C,OAAO,KAAK;AAAA;AAAA,EAMd,cAAc,CAAC,QAAoC;AAAA,IACjD,KAAK,aAAa,UAAU,MAAM;AAAA;AAAA,EAMpC,kBAAkB,GAAS;AAAA,IACzB,KAAK,aAAa,SAAS;AAAA;AAAA,EAM7B,aAAa,GAA2E;AAAA,IACtF,OAAO,KAAK,aAAa,SAAS;AAAA;AAEtC;",
+  "debugId": "4035E3738262CFE264756E2164756E21",
   "names": []
 }

package/package.json

@@ -1,40 +1,40 @@
 {
   "name": "@hypen-space/web",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Hypen web renderers - DOM and Canvas rendering for browsers",
   "type": "module",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "browser": "./dist/index.js",
+  "main": "./dist/src/index.js",
+  "module": "./dist/src/index.js",
+  "types": "./dist/src/index.d.ts",
+  "browser": "./dist/src/index.js",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "browser": "./dist/index.js",
+      "types": "./dist/src/index.d.ts",
+      "browser": "./dist/src/index.js",
       "bun": "./src/index.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
+      "import": "./dist/src/index.js",
+      "default": "./dist/src/index.js"
     },
     "./dom": {
-      "types": "./dist/dom/index.d.ts",
-      "browser": "./dist/dom/index.js",
+      "types": "./dist/src/dom/index.d.ts",
+      "browser": "./dist/src/dom/index.js",
       "bun": "./src/dom/index.ts",
-      "import": "./dist/dom/index.js",
-      "default": "./dist/dom/index.js"
+      "import": "./dist/src/dom/index.js",
+      "default": "./dist/src/dom/index.js"
     },
     "./canvas": {
-      "types": "./dist/canvas/index.d.ts",
-      "browser": "./dist/canvas/index.js",
+      "types": "./dist/src/canvas/index.d.ts",
+      "browser": "./dist/src/canvas/index.js",
       "bun": "./src/canvas/index.ts",
-      "import": "./dist/canvas/index.js",
-      "default": "./dist/canvas/index.js"
+      "import": "./dist/src/canvas/index.js",
+      "default": "./dist/src/canvas/index.js"
     },
     "./hypen": {
-      "types": "./dist/hypen.d.ts",
-      "browser": "./dist/hypen.js",
+      "types": "./dist/src/hypen.d.ts",
+      "browser": "./dist/src/hypen.js",
       "bun": "./src/hypen.ts",
-      "import": "./dist/hypen.js",
-      "default": "./dist/hypen.js"
+      "import": "./dist/src/hypen.js",
+      "default": "./dist/src/hypen.js"
     }
   },
   "files": [
@@ -48,7 +48,7 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@hypen-space/core": "workspace:*"
+    "@hypen-space/core": "^0.2.5"
   },
   "devDependencies": {
     "@types/bun": "latest",

package/src/dom/renderer.ts

@@ -194,9 +194,24 @@ export class DOMRenderer {
         return;
       }
 
-      element.textContent = String(value);
-      if (element.dataset.textTemplate !== undefined) {
-        element.dataset.textTemplate = String(value);
+      const nextText = String(value);
+      element.textContent = nextText;
+
+      // Preserve the original template when it contains state interpolation.
+      // Engine patches may send interpolated strings; if we overwrite the template,
+      // future state updates won't be able to re-interpolate.
+      const currentTemplate = element.dataset.textTemplate;
+      const nextLooksLikeTemplate = nextText.includes("${");
+      const currentLooksLikeTemplate = typeof currentTemplate === "string" && currentTemplate.includes("${");
+
+      if (nextLooksLikeTemplate) {
+        element.dataset.textTemplate = nextText;
+      } else if (currentTemplate === undefined) {
+        // No template stored yet; treat this as the template.
+        element.dataset.textTemplate = nextText;
+      } else if (!currentLooksLikeTemplate) {
+        // If current template isn't a template, keep it in sync.
+        element.dataset.textTemplate = nextText;
       }
       console.log(`[Renderer] Updated text content: "${value}"`);
       return;