@hypen-space/core 0.2.1 → 0.2.3

package/README.md

@@ -1,6 +1,28 @@
 # @hypen-space/core
 
-Platform-agnostic reactive UI runtime for the Hypen declarative UI language.
+The reactive runtime for Hypen - a declarative UI language that separates what your UI looks like from how it behaves.
+
+## What is Hypen?
+
+Hypen lets you write UI templates in a clean, declarative syntax:
+
+```hypen
+Column {
+  Text("Hello, ${state.user.name}!")
+  Button(onClick: @actions.logout) {
+    Text("Sign Out")
+  }
+}
+```
+
+The `@hypen-space/core` package provides the engine that:
+
+1. **Parses** your Hypen templates
+2. **Tracks** reactive state bindings (like `${state.user.name}`)
+3. **Generates patches** when state changes (instead of re-rendering everything)
+4. **Dispatches actions** triggered from the UI (like `@actions.logout`)
+
+You provide a renderer that applies those patches to your platform (DOM, Canvas, Native, etc).
 
 ## Installation
 
@@ -10,12 +32,54 @@ npm install @hypen-space/core
 bun add @hypen-space/core
 ```
 
+## Core Concepts
+
+### Templates
+
+Hypen templates describe your UI structure. Components can have:
+
+- **Arguments**: `Text("Hello")` or `Button(disabled: true)`
+- **Children**: Nested inside `{ }` braces
+- **Applicators**: Chained styling like `.padding(16).color(blue)`
+
+### State Bindings
+
+Use `${state.path}` to bind template values to your module's state:
+
+```hypen
+Text("Count: ${state.count}")
+Text("User: ${state.user.name}")
+```
+
+When state changes, only the affected parts of the UI update.
+
+### Actions
+
+Use `@actions.name` to dispatch events from the UI to your module:
+
+```hypen
+Button(onClick: @actions.increment) { Text("+") }
+Button(onClick: @actions.submitForm) { Text("Submit") }
+```
+
+### Patches
+
+The engine doesn't manipulate the UI directly. Instead, it emits **patches** - minimal instructions describing what changed:
+
+```typescript
+{ type: "Create", id: "1", elementType: "Text", props: { text: "Hello" } }
+{ type: "SetProp", id: "1", name: "text", value: "Hello, World" }
+{ type: "Remove", id: "1" }
+```
+
+Your renderer applies these patches to the actual platform.
+
 ## Quick Start
 
 ```typescript
 import { Engine, app } from "@hypen-space/core";
 
-// 1. Define a stateful module
+// 1. Define your module's state and actions
 const counter = app
   .defineState({ count: 0 })
   .onAction("increment", ({ state }) => state.count++)
@@ -26,14 +90,14 @@ const counter = app
 const engine = new Engine();
 await engine.init();
 
-// 3. Set up render callback (you provide the renderer)
+// 3. Connect your renderer
 engine.setRenderCallback((patches) => {
-  // Apply patches to your platform (DOM, Canvas, Native, etc.)
   myRenderer.applyPatches(patches);
 });
 
-// 4. Register module and render
+// 4. Register the module and render
 engine.setModule("counter", counter.actions, counter.stateKeys, counter.initialState);
+
 engine.renderSource(`
   Column {
     Text("Count: \${state.count}")
@@ -45,75 +109,9 @@ engine.renderSource(`
 `);
 ```
 
-## Component Discovery
-
-Auto-discover `.hypen` components from the filesystem:
-
-```typescript
-import { discoverComponents, loadDiscoveredComponents, watchComponents } from "@hypen-space/core";
-
-// Discover components in a directory
-const components = await discoverComponents("./src/components", {
-  patterns: ["folder", "sibling", "index"], // Naming conventions
-  recursive: false,
-  debug: true,
-});
-
-// Load discovered components with their modules
-const loaded = await loadDiscoveredComponents(components);
-
-// Watch for changes (hot reload)
-const watcher = watchComponents("./src/components", {
-  onAdd: (c) => console.log("Added:", c.name),
-  onUpdate: (c) => console.log("Updated:", c.name),
-  onRemove: (name) => console.log("Removed:", name),
-  onChange: (all) => console.log("All components:", all.length),
-});
-
-// Stop watching
-watcher.stop();
-```
-
-### Supported Patterns
-
-```
-# Folder-based (recommended)
-Counter/
-├── component.hypen
-└── component.ts
+## Modules
 
-# Sibling files
-Counter.hypen
-Counter.ts
-
-# Index-based
-Counter/
-├── index.hypen
-└── index.ts
-```
-
-## Component Loader
-
-Register and manage components:
-
-```typescript
-import { componentLoader, ComponentLoader } from "@hypen-space/core";
-
-// Use the global loader
-componentLoader.register("Counter", counterModule, counterTemplate);
-componentLoader.get("Counter");        // Get component
-componentLoader.has("Counter");        // Check if exists
-componentLoader.getNames();            // List all names
-
-// Or create your own
-const loader = new ComponentLoader();
-await loader.loadFromDirectory("Counter", "./src/components/Counter");
-await loader.loadFromComponentsDir("./src/components"); // Auto-load all
-```
-
-## Module System
-
-Create stateful modules with the fluent `app` builder:
+Modules manage state and handle actions. Use the `app` builder to define them:
 
 ```typescript
 import { app } from "@hypen-space/core";
@@ -126,13 +124,13 @@ interface UserState {
 const userModule = app
   .defineState<UserState>({ user: null, loading: false })
 
-  // Lifecycle hooks
+  // Called when module is created
   .onCreated(async ({ state, next }) => {
     state.loading = true;
-    next(); // Sync state to engine
+    next(); // Sync state changes to engine
   })
 
-  // Action handlers
+  // Handle actions dispatched from UI
   .onAction("loadUser", async ({ state, action, next }) => {
     const userId = action.payload?.id;
     state.user = await fetchUser(userId);
@@ -145,16 +143,19 @@ const userModule = app
     next();
   })
 
+  // Called when module is destroyed
   .onDestroyed(({ state }) => {
-    console.log("Module cleanup");
+    console.log("Cleanup");
   })
 
   .build();
 ```
 
-## State Management
+The `next()` callback synchronizes state changes with the engine after async operations.
+
+## State
 
-Observable state with automatic change tracking:
+State is automatically tracked via Proxy. Mutations trigger UI updates:
 
 ```typescript
 import { createObservableState, batchStateUpdates, getStateSnapshot } from "@hypen-space/core";
@@ -169,19 +170,50 @@ const state = createObservableState({ count: 0, items: [] }, {
 state.count = 5;
 state.items.push("item");
 
-// Batch multiple updates
+// Batch multiple updates into one render cycle
 batchStateUpdates(state, () => {
   state.count = 10;
   state.items = ["a", "b", "c"];
 });
 
-// Get immutable snapshot
+// Get an immutable snapshot
 const snapshot = getStateSnapshot(state);
 ```
 
+## Custom Renderers
+
+Extend `BaseRenderer` to render to any platform:
+
+```typescript
+import { BaseRenderer } from "@hypen-space/core";
+
+class MyRenderer extends BaseRenderer {
+  protected onCreate(id: string, type: string, props: Record<string, any>) {
+    // Create an element
+  }
+  protected onSetProp(id: string, name: string, value: any) {
+    // Update a property
+  }
+  protected onSetText(id: string, text: string) {
+    // Set text content
+  }
+  protected onInsert(parentId: string, id: string, beforeId?: string) {
+    // Insert into parent
+  }
+  protected onMove(parentId: string, id: string, beforeId?: string) {
+    // Reorder element
+  }
+  protected onRemove(id: string) {
+    // Remove element
+  }
+}
+```
+
+See `@hypen-space/web` for a DOM renderer implementation.
+
 ## Routing
 
-Built-in hash-based or pathname-based routing:
+Built-in hash or pathname routing:
 
 ```typescript
 import { HypenRouter } from "@hypen-space/core";
@@ -191,46 +223,90 @@ const router = new HypenRouter();
 router.navigate("/products/123");
 
 router.subscribe((state) => {
-  console.log("Route:", state.currentPath);
-  console.log("Params:", state.params);
+  console.log("Path:", state.currentPath);
+  console.log("Params:", state.params);   // { id: "123" }
   console.log("Query:", state.query);
 });
 ```
 
-## Built-in Components
+Use built-in components in templates:
 
-Framework-provided components for routing:
+```hypen
+Router {
+  Route(path: "/") { HomePage }
+  Route(path: "/products/:id") { ProductPage }
+}
+Link(to: "/products/42") { Text("View Product") }
+```
+
+## Component Discovery
+
+For larger apps, organize components as files and auto-discover them:
 
 ```typescript
-import { Router, Route, Link } from "@hypen-space/core";
-
-// Use in templates:
-// Router {
-//   Route(path: "/") { HomePage }
-//   Route(path: "/products") { ProductList }
-// }
-// Link(to: "/products") { Text("View Products") }
+import { discoverComponents, loadDiscoveredComponents } from "@hypen-space/core";
+
+const components = await discoverComponents("./src/components");
+const loaded = await loadDiscoveredComponents(components);
 ```
 
-## Remote UI (WebSocket)
+Supported file patterns:
+
+```
+Counter/
+├── component.hypen    # Template
+└── component.ts       # Module
 
-Connect to a remote Hypen server:
+Counter.hypen          # Or sibling files
+Counter.ts
+
+Counter/
+├── index.hypen        # Or index-based
+└── index.ts
+```
+
+Watch for changes (hot reload):
+
+```typescript
+import { watchComponents } from "@hypen-space/core";
+
+const watcher = watchComponents("./src/components", {
+  onUpdate: (c) => console.log("Updated:", c.name),
+});
+```
+
+## Component Loader
+
+Register components programmatically:
+
+```typescript
+import { componentLoader, ComponentLoader } from "@hypen-space/core";
+
+// Global loader
+componentLoader.register("Counter", counterModule, counterTemplate);
+componentLoader.get("Counter");
+componentLoader.has("Counter");
+
+// Or create your own
+const loader = new ComponentLoader();
+await loader.loadFromComponentsDir("./src/components");
+```
+
+## Remote UI
+
+Connect to a Hypen server for server-driven UI:
 
 ```typescript
 import { RemoteEngine } from "@hypen-space/core";
 
 const remote = new RemoteEngine("ws://localhost:3000", {
   autoReconnect: true,
-  reconnectInterval: 3000,
-  maxReconnectAttempts: 10,
 });
 
 remote
   .onPatches((patches) => renderer.applyPatches(patches))
   .onStateUpdate((state) => console.log("Server state:", state))
-  .onConnect(() => console.log("Connected"))
-  .onDisconnect(() => console.log("Disconnected"))
-  .onError((error) => console.error("Error:", error));
+  .onConnect(() => console.log("Connected"));
 
 await remote.connect();
 remote.dispatchAction("loadData", { page: 1 });
@@ -238,86 +314,55 @@ remote.dispatchAction("loadData", { page: 1 });
 
 ## Global Context
 
-Cross-module communication:
+Share state and events across modules:
 
 ```typescript
 import { HypenGlobalContext } from "@hypen-space/core";
 
 const context = new HypenGlobalContext();
 
-context.registerModule("auth", authModuleInstance);
-context.registerModule("cart", cartModuleInstance);
+context.registerModule("auth", authModule);
+context.registerModule("cart", cartModule);
 
-const auth = context.getModule("auth");
-const cartState = context.getModule("cart").getState();
+// Cross-module access
+const user = context.getModule("auth").getState().user;
 
-// Event system
-context.on("userLoggedIn", (user) => console.log("Logged in:", user));
+// Event bus
+context.on("userLoggedIn", (user) => { /* ... */ });
 context.emit("userLoggedIn", { id: "1", name: "Ian" });
 ```
 
-## Custom Renderer
-
-Implement the `Renderer` interface for any platform:
+## Browser vs Node.js
 
 ```typescript
-import { BaseRenderer, type Patch } from "@hypen-space/core";
+// Node.js / Bundler - WASM loads automatically
+import { Engine } from "@hypen-space/core";
+const engine = new Engine();
+await engine.init();
 
-class MyRenderer extends BaseRenderer {
-  protected onCreate(id: string, type: string, props: Record<string, any>) {
-    // Create element
-  }
-  protected onSetProp(id: string, name: string, value: any) {
-    // Set property
-  }
-  protected onSetText(id: string, text: string) {
-    // Set text
-  }
-  protected onInsert(parentId: string, id: string, beforeId?: string) {
-    // Insert into parent
-  }
-  protected onMove(parentId: string, id: string, beforeId?: string) {
-    // Move element
-  }
-  protected onRemove(id: string) {
-    // Remove element
-  }
-}
+// Browser - specify WASM path
+import { BrowserEngine } from "@hypen-space/core";
+const engine = new BrowserEngine();
+await engine.init({ wasmPath: "/hypen_engine_bg.wasm" });
 ```
 
-## Exports
+## Package Exports
 
 | Export | Description |
 |--------|-------------|
-| `@hypen-space/core` | Main entry - Engine, app, state, router, discovery, loader |
-| `@hypen-space/core/engine` | Low-level WASM engine API |
-| `@hypen-space/core/engine/browser` | Browser-optimized engine (explicit WASM init) |
-| `@hypen-space/core/app` | Module builder and HypenModuleInstance |
+| `@hypen-space/core` | Main entry point |
+| `@hypen-space/core/engine` | Low-level WASM engine |
+| `@hypen-space/core/engine/browser` | Browser-optimized engine |
+| `@hypen-space/core/app` | Module builder |
 | `@hypen-space/core/state` | Observable state utilities |
-| `@hypen-space/core/renderer` | Abstract renderer interface |
+| `@hypen-space/core/renderer` | Abstract renderer |
 | `@hypen-space/core/router` | Routing system |
-| `@hypen-space/core/events` | Typed event emitter |
 | `@hypen-space/core/context` | Global context |
 | `@hypen-space/core/remote` | Remote UI protocol |
-| `@hypen-space/core/remote/client` | WebSocket client |
 | `@hypen-space/core/loader` | Component loader |
 | `@hypen-space/core/discovery` | Component discovery |
 | `@hypen-space/core/components` | Built-in Router, Route, Link |
 
-## Browser vs Node.js
-
-```typescript
-// Node.js / Bundler (auto WASM init)
-import { Engine } from "@hypen-space/core";
-const engine = new Engine();
-await engine.init();
-
-// Browser (explicit WASM path)
-import { BrowserEngine } from "@hypen-space/core";
-const engine = new BrowserEngine();
-await engine.init({ wasmPath: "/hypen_engine_bg.wasm" });
-```
-
 ## Requirements
 
 - Node.js >= 18.0.0

package/dist/src/app.js

@@ -95,6 +95,7 @@ class HypenModuleInstance {
           console.log(`[ModuleInstance] Action handler completed: ${actionName}`);
         } catch (error) {
           console.error(`[ModuleInstance] Action handler error for ${actionName}:`, error);
+          throw error;
         }
       });
     }
@@ -157,4 +158,4 @@ export {
 
 export { HypenAppBuilder, HypenApp, app, HypenModuleInstance };
 
-//# debugId=220ACA4FDA4DC86164756E2164756E21
+//# debugId=CC570FF56ABF0FB064756E2164756E21

package/dist/src/app.js.map

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["../src/app.ts"],
   "sourcesContent": [
-    "/**\n * Hypen App Builder API\n * Implements the stateful module system from RFC-0001\n */\n\nimport type { Action } from \"./engine.js\";\n\n// Interface for engine compatibility (works with both engine.js and engine.browser.js)\nexport interface IEngine {\n  setModule(name: string, actions: string[], stateKeys: string[], initialState: unknown): void;\n  onAction(actionName: string, handler: (action: Action) => void | Promise<void>): void;\n  notifyStateChange(paths: string[], changedValues: Record<string, unknown>): void;\n}\n\nimport { createObservableState, type StateChange, getStateSnapshot } from \"./state.js\";\nimport type { HypenRouter } from \"./router.js\";\nimport type { HypenGlobalContext, ModuleReference } from \"./context.js\";\n\nexport type RouterContext = {\n  root: HypenRouter;\n  current?: HypenRouter;\n  parent?: HypenRouter;\n};\n\nexport type ActionContext = {\n  name: string;\n  payload?: unknown;\n  sender?: string;\n};\n\nexport type ActionNext = {\n  router: HypenRouter; // Direct access to router instance (from nearest parent)\n};\n\nexport type GlobalContext = {\n  getModule: <T = unknown>(id: string) => ModuleReference<T>;\n  hasModule: (id: string) => boolean;\n  getModuleIds: () => string[];\n  getGlobalState: () => Record<string, unknown>;\n  emit: (event: string, payload?: unknown) => void;\n  on: (event: string, handler: (payload?: unknown) => void) => () => void;\n  __router?: unknown; // Internal: router instance for built-in Router component\n};\n\nexport type LifecycleHandler<T> = (\n  state: T,\n  context?: GlobalContext\n) => void | Promise<void>;\n\n/**\n * Action handler context - all parameters available explicitly\n */\nexport interface ActionHandlerContext<T> {\n  action: ActionContext;\n  state: T;\n  next: ActionNext;\n  context: GlobalContext;\n}\n\n/**\n * Action handler - receives all context in a single object\n */\nexport type ActionHandler<T> = (ctx: ActionHandlerContext<T>) => void | Promise<void>;\n\nexport interface HypenModuleDefinition<T = unknown> {\n  name?: string;\n  actions: string[];\n  stateKeys: string[];\n  persist?: boolean;\n  version?: number;\n  initialState: T;\n  handlers: {\n    onCreated?: LifecycleHandler<T>;\n    onAction: Map<string, ActionHandler<T>>;\n    onDestroyed?: LifecycleHandler<T>;\n  };\n}\n\n/**\n * Alias for HypenModuleDefinition for backward compatibility\n */\nexport type HypenModule<T = unknown> = HypenModuleDefinition<T>;\n\n/**\n * Builder for creating Hypen app modules\n */\nexport class HypenAppBuilder<T> {\n  private initialState: T;\n  private options: { persist?: boolean; version?: number; name?: string };\n  private createdHandler?: LifecycleHandler<T>;\n  private actionHandlers: Map<string, ActionHandler<T>> = new Map();\n  private destroyedHandler?: LifecycleHandler<T>;\n\n  constructor(\n    initialState: T,\n    options?: { persist?: boolean; version?: number; name?: string }\n  ) {\n    this.initialState = initialState;\n    this.options = options || {};\n  }\n\n  /**\n   * Register a handler for module creation\n   */\n  onCreated(fn: LifecycleHandler<T>): this {\n    this.createdHandler = fn;\n    return this;\n  }\n\n  /**\n   * Register a handler for a specific action\n   */\n  onAction(name: string, fn: ActionHandler<T>): this {\n    this.actionHandlers.set(name, fn);\n    return this;\n  }\n\n  /**\n   * Register a handler for module destruction\n   */\n  onDestroyed(fn: LifecycleHandler<T>): this {\n    this.destroyedHandler = fn;\n    return this;\n  }\n\n  /**\n   * Build the module definition\n   */\n  build(): HypenModuleDefinition<T> {\n    // Safe way to get keys from initialState\n    const stateKeys = this.initialState !== null && typeof this.initialState === 'object'\n      ? Object.keys(this.initialState)\n      : [];\n\n    return {\n      name: this.options.name,\n      actions: Array.from(this.actionHandlers.keys()),\n      stateKeys,\n      persist: this.options.persist,\n      version: this.options.version,\n      initialState: this.initialState,\n      handlers: {\n        onCreated: this.createdHandler,\n        onAction: this.actionHandlers,\n        onDestroyed: this.destroyedHandler,\n      },\n    };\n  }\n}\n\n/**\n * Hypen App API\n */\nexport class HypenApp {\n  /**\n   * Define the initial state for a module\n   */\n  defineState<T>(\n    initial: T,\n    options?: { persist?: boolean; version?: number; name?: string }\n  ): HypenAppBuilder<T> {\n    return new HypenAppBuilder(initial, options);\n  }\n}\n\n/**\n * The main app instance for creating modules\n */\nexport const app = new HypenApp();\n\n/**\n * Module Instance - manages a running module with typed state\n */\nexport class HypenModuleInstance<T extends object = any> {\n  private engine: IEngine;\n  private definition: HypenModuleDefinition<T>;\n  private state: T;\n  private isDestroyed = false;\n  private routerContext?: RouterContext;\n  private globalContext?: HypenGlobalContext;\n  private stateChangeCallbacks: Array<() => void> = [];\n\n  constructor(\n    engine: IEngine,\n    definition: HypenModuleDefinition<T>,\n    routerContext?: RouterContext,\n    globalContext?: HypenGlobalContext\n  ) {\n    this.engine = engine;\n    this.definition = definition;\n    this.routerContext = routerContext;\n    this.globalContext = globalContext;\n\n    // Create observable state that sends only changed paths and values to engine\n    this.state = createObservableState<T>(definition.initialState as T & object, {\n      onChange: (change: StateChange) => {\n        // Send only the changed paths and their new values (not the whole state)\n        this.engine.notifyStateChange(change.paths, change.newValues);\n        // Notify all registered callbacks\n        this.stateChangeCallbacks.forEach(cb => cb());\n      },\n    });\n\n    // Register with engine (initial state registration)\n    this.engine.setModule(\n      definition.name || \"AnonymousModule\",\n      definition.actions,\n      definition.stateKeys,\n      getStateSnapshot(this.state)\n    );\n\n    // Register action handlers with flexible parameter support\n    for (const [actionName, handler] of definition.handlers.onAction) {\n      console.log(`[ModuleInstance] Registering action handler: ${actionName} for module ${definition.name}`);\n      this.engine.onAction(actionName, async (action: Action) => {\n        console.log(`[ModuleInstance] Action handler fired: ${actionName}`, action);\n\n        const actionCtx: ActionContext = {\n          name: action.name,\n          payload: action.payload,\n          sender: action.sender,\n        };\n\n        const next: ActionNext = {\n          router: this.routerContext?.root || (null as any),\n        };\n\n        const context: GlobalContext | undefined = this.globalContext\n          ? this.createGlobalContextAPI()\n          : undefined;\n\n        try {\n          await handler({\n            action: actionCtx,\n            state: this.state,\n            next,\n            context: context!,\n          });\n          console.log(`[ModuleInstance] Action handler completed: ${actionName}`);\n        } catch (error) {\n          console.error(`[ModuleInstance] Action handler error for ${actionName}:`, error);\n        }\n      });\n    }\n\n    // Call onCreated\n    this.callCreatedHandler();\n  }\n\n  /**\n   * Create the global context API for this module\n   */\n  private createGlobalContextAPI(): GlobalContext {\n    if (!this.globalContext) {\n      throw new Error(\"Global context not available\");\n    }\n\n    const ctx = this.globalContext;\n    const api: GlobalContext = {\n      getModule: (id: string) => ctx.getModule(id),\n      hasModule: (id: string) => ctx.hasModule(id),\n      getModuleIds: () => ctx.getModuleIds(),\n      getGlobalState: () => ctx.getGlobalState(),\n      emit: (event: string, payload?: any) => ctx.emit(event, payload),\n      on: (event: string, handler: (payload?: any) => void) =>\n        ctx.on(event, handler),\n    };\n\n    // Expose router and hypen engine for built-in components (if available)\n    if ((ctx as any).__router) {\n      api.__router = (ctx as any).__router;\n    }\n    if ((ctx as any).__hypenEngine) {\n      (api as any).__hypenEngine = (ctx as any).__hypenEngine;\n    }\n\n    return api;\n  }\n\n  /**\n   * Call the onCreated handler\n   */\n  private async callCreatedHandler(): Promise<void> {\n    if (this.definition.handlers.onCreated) {\n      const context = this.globalContext ? this.createGlobalContextAPI() : undefined;\n      await this.definition.handlers.onCreated(this.state, context);\n    }\n  }\n\n  /**\n   * Register a callback to be notified when state changes\n   */\n  onStateChange(callback: () => void): void {\n    this.stateChangeCallbacks.push(callback);\n  }\n\n  /**\n   * Destroy the module instance\n   */\n  async destroy(): Promise<void> {\n    if (this.isDestroyed) return;\n\n    if (this.definition.handlers.onDestroyed) {\n      await this.definition.handlers.onDestroyed(this.state);\n    }\n\n    this.isDestroyed = true;\n  }\n\n  /**\n   * Get the current state (returns a snapshot)\n   */\n  getState(): T {\n    return getStateSnapshot(this.state);\n  }\n\n  /**\n   * Get the live observable state\n   */\n  getLiveState(): T {\n    return this.state;\n  }\n\n  /**\n   * Update state directly (merges with existing state)\n   */\n  updateState(patch: Partial<T>): void {\n    Object.assign(this.state, patch);\n  }\n}\n"
+    "/**\n * Hypen App Builder API\n * Implements the stateful module system from RFC-0001\n */\n\nimport type { Action } from \"./engine.js\";\n\n// Interface for engine compatibility (works with both engine.js and engine.browser.js)\nexport interface IEngine {\n  setModule(name: string, actions: string[], stateKeys: string[], initialState: unknown): void;\n  onAction(actionName: string, handler: (action: Action) => void | Promise<void>): void;\n  notifyStateChange(paths: string[], changedValues: Record<string, unknown>): void;\n}\n\nimport { createObservableState, type StateChange, getStateSnapshot } from \"./state.js\";\nimport type { HypenRouter } from \"./router.js\";\nimport type { HypenGlobalContext, ModuleReference } from \"./context.js\";\n\nexport type RouterContext = {\n  root: HypenRouter;\n  current?: HypenRouter;\n  parent?: HypenRouter;\n};\n\nexport type ActionContext = {\n  name: string;\n  payload?: unknown;\n  sender?: string;\n};\n\nexport type ActionNext = {\n  router: HypenRouter; // Direct access to router instance (from nearest parent)\n};\n\nexport type GlobalContext = {\n  getModule: <T = unknown>(id: string) => ModuleReference<T>;\n  hasModule: (id: string) => boolean;\n  getModuleIds: () => string[];\n  getGlobalState: () => Record<string, unknown>;\n  emit: (event: string, payload?: unknown) => void;\n  on: (event: string, handler: (payload?: unknown) => void) => () => void;\n  __router?: unknown; // Internal: router instance for built-in Router component\n};\n\nexport type LifecycleHandler<T> = (\n  state: T,\n  context?: GlobalContext\n) => void | Promise<void>;\n\n/**\n * Action handler context - all parameters available explicitly\n */\nexport interface ActionHandlerContext<T> {\n  action: ActionContext;\n  state: T;\n  next: ActionNext;\n  context: GlobalContext;\n}\n\n/**\n * Action handler - receives all context in a single object\n */\nexport type ActionHandler<T> = (ctx: ActionHandlerContext<T>) => void | Promise<void>;\n\nexport interface HypenModuleDefinition<T = unknown> {\n  name?: string;\n  actions: string[];\n  stateKeys: string[];\n  persist?: boolean;\n  version?: number;\n  initialState: T;\n  handlers: {\n    onCreated?: LifecycleHandler<T>;\n    onAction: Map<string, ActionHandler<T>>;\n    onDestroyed?: LifecycleHandler<T>;\n  };\n}\n\n/**\n * Alias for HypenModuleDefinition for backward compatibility\n */\nexport type HypenModule<T = unknown> = HypenModuleDefinition<T>;\n\n/**\n * Builder for creating Hypen app modules\n */\nexport class HypenAppBuilder<T> {\n  private initialState: T;\n  private options: { persist?: boolean; version?: number; name?: string };\n  private createdHandler?: LifecycleHandler<T>;\n  private actionHandlers: Map<string, ActionHandler<T>> = new Map();\n  private destroyedHandler?: LifecycleHandler<T>;\n\n  constructor(\n    initialState: T,\n    options?: { persist?: boolean; version?: number; name?: string }\n  ) {\n    this.initialState = initialState;\n    this.options = options || {};\n  }\n\n  /**\n   * Register a handler for module creation\n   */\n  onCreated(fn: LifecycleHandler<T>): this {\n    this.createdHandler = fn;\n    return this;\n  }\n\n  /**\n   * Register a handler for a specific action\n   */\n  onAction(name: string, fn: ActionHandler<T>): this {\n    this.actionHandlers.set(name, fn);\n    return this;\n  }\n\n  /**\n   * Register a handler for module destruction\n   */\n  onDestroyed(fn: LifecycleHandler<T>): this {\n    this.destroyedHandler = fn;\n    return this;\n  }\n\n  /**\n   * Build the module definition\n   */\n  build(): HypenModuleDefinition<T> {\n    // Safe way to get keys from initialState\n    const stateKeys = this.initialState !== null && typeof this.initialState === 'object'\n      ? Object.keys(this.initialState)\n      : [];\n\n    return {\n      name: this.options.name,\n      actions: Array.from(this.actionHandlers.keys()),\n      stateKeys,\n      persist: this.options.persist,\n      version: this.options.version,\n      initialState: this.initialState,\n      handlers: {\n        onCreated: this.createdHandler,\n        onAction: this.actionHandlers,\n        onDestroyed: this.destroyedHandler,\n      },\n    };\n  }\n}\n\n/**\n * Hypen App API\n */\nexport class HypenApp {\n  /**\n   * Define the initial state for a module\n   */\n  defineState<T>(\n    initial: T,\n    options?: { persist?: boolean; version?: number; name?: string }\n  ): HypenAppBuilder<T> {\n    return new HypenAppBuilder(initial, options);\n  }\n}\n\n/**\n * The main app instance for creating modules\n */\nexport const app = new HypenApp();\n\n/**\n * Module Instance - manages a running module with typed state\n */\nexport class HypenModuleInstance<T extends object = any> {\n  private engine: IEngine;\n  private definition: HypenModuleDefinition<T>;\n  private state: T;\n  private isDestroyed = false;\n  private routerContext?: RouterContext;\n  private globalContext?: HypenGlobalContext;\n  private stateChangeCallbacks: Array<() => void> = [];\n\n  constructor(\n    engine: IEngine,\n    definition: HypenModuleDefinition<T>,\n    routerContext?: RouterContext,\n    globalContext?: HypenGlobalContext\n  ) {\n    this.engine = engine;\n    this.definition = definition;\n    this.routerContext = routerContext;\n    this.globalContext = globalContext;\n\n    // Create observable state that sends only changed paths and values to engine\n    this.state = createObservableState<T>(definition.initialState as T & object, {\n      onChange: (change: StateChange) => {\n        // Send only the changed paths and their new values (not the whole state)\n        this.engine.notifyStateChange(change.paths, change.newValues);\n        // Notify all registered callbacks\n        this.stateChangeCallbacks.forEach(cb => cb());\n      },\n    });\n\n    // Register with engine (initial state registration)\n    this.engine.setModule(\n      definition.name || \"AnonymousModule\",\n      definition.actions,\n      definition.stateKeys,\n      getStateSnapshot(this.state)\n    );\n\n    // Register action handlers with flexible parameter support\n    for (const [actionName, handler] of definition.handlers.onAction) {\n      console.log(`[ModuleInstance] Registering action handler: ${actionName} for module ${definition.name}`);\n      this.engine.onAction(actionName, async (action: Action) => {\n        console.log(`[ModuleInstance] Action handler fired: ${actionName}`, action);\n\n        const actionCtx: ActionContext = {\n          name: action.name,\n          payload: action.payload,\n          sender: action.sender,\n        };\n\n        const next: ActionNext = {\n          router: this.routerContext?.root || (null as any),\n        };\n\n        const context: GlobalContext | undefined = this.globalContext\n          ? this.createGlobalContextAPI()\n          : undefined;\n\n        try {\n          await handler({\n            action: actionCtx,\n            state: this.state,\n            next,\n            context: context!,\n          });\n          console.log(`[ModuleInstance] Action handler completed: ${actionName}`);\n        } catch (error) {\n          console.error(`[ModuleInstance] Action handler error for ${actionName}:`, error);\n          throw error; // Re-throw to allow callers to handle the error\n        }\n      });\n    }\n\n    // Call onCreated\n    this.callCreatedHandler();\n  }\n\n  /**\n   * Create the global context API for this module\n   */\n  private createGlobalContextAPI(): GlobalContext {\n    if (!this.globalContext) {\n      throw new Error(\"Global context not available\");\n    }\n\n    const ctx = this.globalContext;\n    const api: GlobalContext = {\n      getModule: (id: string) => ctx.getModule(id),\n      hasModule: (id: string) => ctx.hasModule(id),\n      getModuleIds: () => ctx.getModuleIds(),\n      getGlobalState: () => ctx.getGlobalState(),\n      emit: (event: string, payload?: any) => ctx.emit(event, payload),\n      on: (event: string, handler: (payload?: any) => void) =>\n        ctx.on(event, handler),\n    };\n\n    // Expose router and hypen engine for built-in components (if available)\n    if ((ctx as any).__router) {\n      api.__router = (ctx as any).__router;\n    }\n    if ((ctx as any).__hypenEngine) {\n      (api as any).__hypenEngine = (ctx as any).__hypenEngine;\n    }\n\n    return api;\n  }\n\n  /**\n   * Call the onCreated handler\n   */\n  private async callCreatedHandler(): Promise<void> {\n    if (this.definition.handlers.onCreated) {\n      const context = this.globalContext ? this.createGlobalContextAPI() : undefined;\n      await this.definition.handlers.onCreated(this.state, context);\n    }\n  }\n\n  /**\n   * Register a callback to be notified when state changes\n   */\n  onStateChange(callback: () => void): void {\n    this.stateChangeCallbacks.push(callback);\n  }\n\n  /**\n   * Destroy the module instance\n   */\n  async destroy(): Promise<void> {\n    if (this.isDestroyed) return;\n\n    if (this.definition.handlers.onDestroyed) {\n      await this.definition.handlers.onDestroyed(this.state);\n    }\n\n    this.isDestroyed = true;\n  }\n\n  /**\n   * Get the current state (returns a snapshot)\n   */\n  getState(): T {\n    return getStateSnapshot(this.state);\n  }\n\n  /**\n   * Get the live observable state\n   */\n  getLiveState(): T {\n    return this.state;\n  }\n\n  /**\n   * Update state directly (merges with existing state)\n   */\n  updateState(patch: Partial<T>): void {\n    Object.assign(this.state, patch);\n  }\n}\n"
   ],
-  "mappings": "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",
-  "debugId": "220ACA4FDA4DC86164756E2164756E21",
+  "mappings": "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",
+  "debugId": "CC570FF56ABF0FB064756E2164756E21",
   "names": []
 }

package/dist/src/engine.browser.js

@@ -33,7 +33,7 @@ class Engine {
       return;
     const wasmPath = options.wasmPath ?? "/hypen_engine_bg.wasm";
     try {
-      const wasmModule = await import("../wasm/hypen_engine.js");
+      const wasmModule = await import("../wasm-browser/hypen_engine.js");
       wasmInit = wasmModule.default;
       WasmEngineClass = wasmModule.WasmEngine;
       await wasmInit(wasmPath);
@@ -127,4 +127,4 @@ export {
 
 export { Engine };
 
-//# debugId=FB3794C86EF3E0CF64756E2164756E21
+//# debugId=ABF5E4E7E0C79CD064756E2164756E21

package/dist/src/engine.browser.js.map

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["../src/engine.browser.ts"],
   "sourcesContent": [
-    "/**\n * Browser-compatible wrapper around the WASM engine\n * Uses web target for browser environments\n */\n\n// Dynamic import path - will be configured at build time\n// For browser, the WASM needs to be served and initialized explicitly\nlet wasmInit: ((path?: string) => Promise<void>) | null = null;\nlet WasmEngineClass: any = null;\n\nexport type Patch = {\n  type: \"create\" | \"setProp\" | \"setText\" | \"insert\" | \"move\" | \"remove\" | \"attachEvent\" | \"detachEvent\";\n  id?: string;\n  element_type?: string;\n  props?: Record<string, any> | Map<string, any>;\n  name?: string;\n  value?: any;\n  text?: string;\n  parent_id?: string;\n  before_id?: string;\n  event_name?: string;\n};\n\nexport type Action = {\n  name: string;\n  payload?: any;\n  sender?: string;\n};\n\nexport type RenderCallback = (patches: Patch[]) => void;\nexport type ActionHandler = (action: Action) => void | Promise<void>;\n\nexport type ResolvedComponent = {\n  source: string;\n  path: string;\n};\n\nexport type ComponentResolver = (\n  componentName: string,\n  contextPath: string | null\n) => ResolvedComponent | null;\n\nexport interface EngineInitOptions {\n  /** Path to the WASM file (default: \"/hypen_engine_bg.wasm\") */\n  wasmPath?: string;\n}\n\n/**\n * Recursively convert Maps and nested structures to plain objects\n */\nfunction mapToObject(value: any): any {\n  if (value instanceof Map) {\n    const obj: Record<string, any> = {};\n    for (const [key, val] of value.entries()) {\n      obj[key] = mapToObject(val);\n    }\n    return obj;\n  } else if (Array.isArray(value)) {\n    return value.map(mapToObject);\n  } else if (value && typeof value === 'object' && value.constructor === Object) {\n    const obj: Record<string, any> = {};\n    for (const [key, val] of Object.entries(value)) {\n      obj[key] = mapToObject(val);\n    }\n    return obj;\n  }\n  return value;\n}\n\n/**\n * Engine wraps the WASM engine and provides a TypeScript-friendly API\n * Browser version with explicit WASM initialization\n */\nexport class Engine {\n  private wasmEngine: any = null;\n  private initialized = false;\n\n  /**\n   * Initialize the WASM module\n   * @param options - Initialization options including wasmPath\n   */\n  async init(options: EngineInitOptions = {}): Promise<void> {\n    if (this.initialized) return;\n\n    const wasmPath = options.wasmPath ?? \"/hypen_engine_bg.wasm\";\n\n    // Dynamically import the WASM module\n    // This allows the path to be configured at runtime\n    try {\n      const wasmModule: any = await import(\"../wasm/hypen_engine.js\");\n      wasmInit = wasmModule.default;\n      WasmEngineClass = wasmModule.WasmEngine;\n\n      // Initialize WASM with explicit path\n      await wasmInit!(wasmPath);\n\n      this.wasmEngine = new WasmEngineClass();\n      this.initialized = true;\n    } catch (error) {\n      console.error(\"[Hypen] Failed to initialize WASM engine:\", error);\n      throw error;\n    }\n  }\n\n  /**\n   * Ensure the engine is initialized before operations\n   */\n  private ensureInitialized(): any {\n    if (!this.wasmEngine) {\n      throw new Error(\"Engine not initialized. Call init() first.\");\n    }\n    return this.wasmEngine;\n  }\n\n  /**\n   * Set the render callback that receives patches\n   */\n  setRenderCallback(callback: RenderCallback): void {\n    const engine = this.ensureInitialized();\n    engine.setRenderCallback((patches: Patch[]) => {\n      callback(patches);\n    });\n  }\n\n  /**\n   * Set the component resolver for dynamic component composition\n   */\n  setComponentResolver(resolver: ComponentResolver): void {\n    const engine = this.ensureInitialized();\n    engine.setComponentResolver((componentName: string, contextPath: string | null) => {\n      const result = resolver(componentName, contextPath);\n      return result;\n    });\n  }\n\n  /**\n   * Parse and render Hypen DSL source code\n   */\n  renderSource(source: string): void {\n    const engine = this.ensureInitialized();\n    engine.renderSource(source);\n  }\n\n  /**\n   * Render a lazy component (for lazy route loading)\n   */\n  renderLazyComponent(source: string): void {\n    const engine = this.ensureInitialized();\n    engine.renderLazyComponent(source);\n  }\n\n  /**\n   * Render a component into a specific parent node (subtree rendering)\n   */\n  renderInto(source: string, parentNodeId: string, state: Record<string, any>): void {\n    const engine = this.ensureInitialized();\n    const safeState = JSON.parse(JSON.stringify(state));\n    engine.renderInto(source, parentNodeId, safeState);\n  }\n\n  /**\n   * Notify the engine of state changes\n   */\n  notifyStateChange(paths: string[], currentState: Record<string, any>): void {\n    const engine = this.ensureInitialized();\n\n    const plainObject = JSON.parse(JSON.stringify(currentState));\n    engine.updateState(plainObject);\n\n    if (paths.length > 0) {\n      console.debug(\"[Hypen] State changed:\", paths);\n    }\n  }\n\n  /**\n   * Update state (triggers re-render of affected nodes)\n   * @deprecated Use notifyStateChange instead\n   */\n  updateState(statePatch: Record<string, any>): void {\n    const engine = this.ensureInitialized();\n    const plainObject = JSON.parse(JSON.stringify(statePatch));\n    engine.updateState(plainObject);\n  }\n\n  /**\n   * Dispatch an action\n   */\n  dispatchAction(name: string, payload?: any): void {\n    const engine = this.ensureInitialized();\n    console.log(`[Engine] Action dispatched: ${name}`);\n    engine.dispatchAction(name, payload ?? null);\n  }\n\n  /**\n   * Register an action handler\n   */\n  onAction(actionName: string, handler: ActionHandler): void {\n    const engine = this.ensureInitialized();\n    engine.onAction(actionName, (action: Action) => {\n      const normalizedAction: Action = {\n        ...action,\n        payload: action.payload ? mapToObject(action.payload) : action.payload,\n      };\n      Promise.resolve(handler(normalizedAction)).catch(console.error);\n    });\n  }\n\n  /**\n   * Initialize a module\n   */\n  setModule(\n    name: string,\n    actions: string[],\n    stateKeys: string[],\n    initialState: Record<string, any>\n  ): void {\n    const engine = this.ensureInitialized();\n    engine.setModule(name, actions, stateKeys, initialState);\n  }\n\n  /**\n   * Get the current revision number\n   */\n  getRevision(): bigint {\n    const engine = this.ensureInitialized();\n    return engine.getRevision();\n  }\n\n  /**\n   * Clear the engine tree\n   */\n  clearTree(): void {\n    const engine = this.ensureInitialized();\n    engine.clearTree();\n  }\n\n  /**\n   * Debug method to inspect parsed components\n   */\n  debugParseComponent(source: string): string {\n    const engine = this.ensureInitialized();\n    return engine.debugParseComponent(source);\n  }\n}\n"
+    "/**\n * Browser-compatible wrapper around the WASM engine\n * Uses web target for browser environments\n */\n\n// Dynamic import path - will be configured at build time\n// For browser, the WASM needs to be served and initialized explicitly\nlet wasmInit: ((path?: string) => Promise<void>) | null = null;\nlet WasmEngineClass: any = null;\n\nexport type Patch = {\n  type: \"create\" | \"setProp\" | \"setText\" | \"insert\" | \"move\" | \"remove\" | \"attachEvent\" | \"detachEvent\";\n  id?: string;\n  element_type?: string;\n  props?: Record<string, any> | Map<string, any>;\n  name?: string;\n  value?: any;\n  text?: string;\n  parent_id?: string;\n  before_id?: string;\n  event_name?: string;\n};\n\nexport type Action = {\n  name: string;\n  payload?: any;\n  sender?: string;\n};\n\nexport type RenderCallback = (patches: Patch[]) => void;\nexport type ActionHandler = (action: Action) => void | Promise<void>;\n\nexport type ResolvedComponent = {\n  source: string;\n  path: string;\n};\n\nexport type ComponentResolver = (\n  componentName: string,\n  contextPath: string | null\n) => ResolvedComponent | null;\n\nexport interface EngineInitOptions {\n  /** Path to the WASM file (default: \"/hypen_engine_bg.wasm\") */\n  wasmPath?: string;\n}\n\n/**\n * Recursively convert Maps and nested structures to plain objects\n */\nfunction mapToObject(value: any): any {\n  if (value instanceof Map) {\n    const obj: Record<string, any> = {};\n    for (const [key, val] of value.entries()) {\n      obj[key] = mapToObject(val);\n    }\n    return obj;\n  } else if (Array.isArray(value)) {\n    return value.map(mapToObject);\n  } else if (value && typeof value === 'object' && value.constructor === Object) {\n    const obj: Record<string, any> = {};\n    for (const [key, val] of Object.entries(value)) {\n      obj[key] = mapToObject(val);\n    }\n    return obj;\n  }\n  return value;\n}\n\n/**\n * Engine wraps the WASM engine and provides a TypeScript-friendly API\n * Browser version with explicit WASM initialization\n */\nexport class Engine {\n  private wasmEngine: any = null;\n  private initialized = false;\n\n  /**\n   * Initialize the WASM module\n   * @param options - Initialization options including wasmPath\n   */\n  async init(options: EngineInitOptions = {}): Promise<void> {\n    if (this.initialized) return;\n\n    const wasmPath = options.wasmPath ?? \"/hypen_engine_bg.wasm\";\n\n    // Dynamically import the WASM module\n    // This allows the path to be configured at runtime\n    try {\n      const wasmModule: any = await import(\"../wasm-browser/hypen_engine.js\");\n      wasmInit = wasmModule.default;\n      WasmEngineClass = wasmModule.WasmEngine;\n\n      // Initialize WASM with explicit path\n      await wasmInit!(wasmPath);\n\n      this.wasmEngine = new WasmEngineClass();\n      this.initialized = true;\n    } catch (error) {\n      console.error(\"[Hypen] Failed to initialize WASM engine:\", error);\n      throw error;\n    }\n  }\n\n  /**\n   * Ensure the engine is initialized before operations\n   */\n  private ensureInitialized(): any {\n    if (!this.wasmEngine) {\n      throw new Error(\"Engine not initialized. Call init() first.\");\n    }\n    return this.wasmEngine;\n  }\n\n  /**\n   * Set the render callback that receives patches\n   */\n  setRenderCallback(callback: RenderCallback): void {\n    const engine = this.ensureInitialized();\n    engine.setRenderCallback((patches: Patch[]) => {\n      callback(patches);\n    });\n  }\n\n  /**\n   * Set the component resolver for dynamic component composition\n   */\n  setComponentResolver(resolver: ComponentResolver): void {\n    const engine = this.ensureInitialized();\n    engine.setComponentResolver((componentName: string, contextPath: string | null) => {\n      const result = resolver(componentName, contextPath);\n      return result;\n    });\n  }\n\n  /**\n   * Parse and render Hypen DSL source code\n   */\n  renderSource(source: string): void {\n    const engine = this.ensureInitialized();\n    engine.renderSource(source);\n  }\n\n  /**\n   * Render a lazy component (for lazy route loading)\n   */\n  renderLazyComponent(source: string): void {\n    const engine = this.ensureInitialized();\n    engine.renderLazyComponent(source);\n  }\n\n  /**\n   * Render a component into a specific parent node (subtree rendering)\n   */\n  renderInto(source: string, parentNodeId: string, state: Record<string, any>): void {\n    const engine = this.ensureInitialized();\n    const safeState = JSON.parse(JSON.stringify(state));\n    engine.renderInto(source, parentNodeId, safeState);\n  }\n\n  /**\n   * Notify the engine of state changes\n   */\n  notifyStateChange(paths: string[], currentState: Record<string, any>): void {\n    const engine = this.ensureInitialized();\n\n    const plainObject = JSON.parse(JSON.stringify(currentState));\n    engine.updateState(plainObject);\n\n    if (paths.length > 0) {\n      console.debug(\"[Hypen] State changed:\", paths);\n    }\n  }\n\n  /**\n   * Update state (triggers re-render of affected nodes)\n   * @deprecated Use notifyStateChange instead\n   */\n  updateState(statePatch: Record<string, any>): void {\n    const engine = this.ensureInitialized();\n    const plainObject = JSON.parse(JSON.stringify(statePatch));\n    engine.updateState(plainObject);\n  }\n\n  /**\n   * Dispatch an action\n   */\n  dispatchAction(name: string, payload?: any): void {\n    const engine = this.ensureInitialized();\n    console.log(`[Engine] Action dispatched: ${name}`);\n    engine.dispatchAction(name, payload ?? null);\n  }\n\n  /**\n   * Register an action handler\n   */\n  onAction(actionName: string, handler: ActionHandler): void {\n    const engine = this.ensureInitialized();\n    engine.onAction(actionName, (action: Action) => {\n      const normalizedAction: Action = {\n        ...action,\n        payload: action.payload ? mapToObject(action.payload) : action.payload,\n      };\n      Promise.resolve(handler(normalizedAction)).catch(console.error);\n    });\n  }\n\n  /**\n   * Initialize a module\n   */\n  setModule(\n    name: string,\n    actions: string[],\n    stateKeys: string[],\n    initialState: Record<string, any>\n  ): void {\n    const engine = this.ensureInitialized();\n    engine.setModule(name, actions, stateKeys, initialState);\n  }\n\n  /**\n   * Get the current revision number\n   */\n  getRevision(): bigint {\n    const engine = this.ensureInitialized();\n    return engine.getRevision();\n  }\n\n  /**\n   * Clear the engine tree\n   */\n  clearTree(): void {\n    const engine = this.ensureInitialized();\n    engine.clearTree();\n  }\n\n  /**\n   * Debug method to inspect parsed components\n   */\n  debugParseComponent(source: string): string {\n    const engine = this.ensureInitialized();\n    return engine.debugParseComponent(source);\n  }\n}\n"
   ],
   "mappings": "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",
-  "debugId": "FB3794C86EF3E0CF64756E2164756E21",
+  "debugId": "ABF5E4E7E0C79CD064756E2164756E21",
   "names": []
 }

package/dist/src/engine.js

@@ -1,7 +1,7 @@
 import"../chunk-5va59f7m.js";
 
 // src/engine.ts
-import { WasmEngine } from "../wasm/hypen_engine.js";
+import { WasmEngine } from "../wasm-node/hypen_engine.js";
 
 class Engine {
   wasmEngine = null;
@@ -49,7 +49,8 @@ class Engine {
     if (paths.length === 0) {
       return;
     }
-    engine.updateStateSparse(paths, values);
+    const plainValues = JSON.parse(JSON.stringify(values));
+    engine.updateStateSparse(paths, plainValues);
     console.debug("[Hypen] State changed (sparse):", paths);
   }
   notifyStateChangeFull(paths, currentState) {
@@ -98,4 +99,4 @@ export {
 
 export { Engine };
 
-//# debugId=9CDE98592668DEA364756E2164756E21
+//# debugId=D2189D9A62B205BE64756E2164756E21