@hypen-space/core 0.2.0 → 0.2.1

package/README.md

@@ -0,0 +1,328 @@
+# @hypen-space/core
+
+Platform-agnostic reactive UI runtime for the Hypen declarative UI language.
+
+## Installation
+
+```bash
+npm install @hypen-space/core
+# or
+bun add @hypen-space/core
+```
+
+## Quick Start
+
+```typescript
+import { Engine, app } from "@hypen-space/core";
+
+// 1. Define a stateful module
+const counter = app
+  .defineState({ count: 0 })
+  .onAction("increment", ({ state }) => state.count++)
+  .onAction("decrement", ({ state }) => state.count--)
+  .build();
+
+// 2. Initialize the engine
+const engine = new Engine();
+await engine.init();
+
+// 3. Set up render callback (you provide the renderer)
+engine.setRenderCallback((patches) => {
+  // Apply patches to your platform (DOM, Canvas, Native, etc.)
+  myRenderer.applyPatches(patches);
+});
+
+// 4. Register module and render
+engine.setModule("counter", counter.actions, counter.stateKeys, counter.initialState);
+engine.renderSource(`
+  Column {
+    Text("Count: \${state.count}")
+    Row {
+      Button(onClick: @actions.decrement) { Text("-") }
+      Button(onClick: @actions.increment) { Text("+") }
+    }
+  }
+`);
+```
+
+## 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
+
+# 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:
+
+```typescript
+import { app } from "@hypen-space/core";
+
+interface UserState {
+  user: { id: string; name: string } | null;
+  loading: boolean;
+}
+
+const userModule = app
+  .defineState<UserState>({ user: null, loading: false })
+
+  // Lifecycle hooks
+  .onCreated(async ({ state, next }) => {
+    state.loading = true;
+    next(); // Sync state to engine
+  })
+
+  // Action handlers
+  .onAction("loadUser", async ({ state, action, next }) => {
+    const userId = action.payload?.id;
+    state.user = await fetchUser(userId);
+    state.loading = false;
+    next();
+  })
+
+  .onAction("logout", ({ state, next }) => {
+    state.user = null;
+    next();
+  })
+
+  .onDestroyed(({ state }) => {
+    console.log("Module cleanup");
+  })
+
+  .build();
+```
+
+## State Management
+
+Observable state with automatic change tracking:
+
+```typescript
+import { createObservableState, batchStateUpdates, getStateSnapshot } from "@hypen-space/core";
+
+const state = createObservableState({ count: 0, items: [] }, {
+  onChange: (path, oldVal, newVal) => {
+    console.log(`${path.join(".")} changed: ${oldVal} -> ${newVal}`);
+  }
+});
+
+// Direct mutations are tracked
+state.count = 5;
+state.items.push("item");
+
+// Batch multiple updates
+batchStateUpdates(state, () => {
+  state.count = 10;
+  state.items = ["a", "b", "c"];
+});
+
+// Get immutable snapshot
+const snapshot = getStateSnapshot(state);
+```
+
+## Routing
+
+Built-in hash-based or pathname-based routing:
+
+```typescript
+import { HypenRouter } from "@hypen-space/core";
+
+const router = new HypenRouter();
+
+router.navigate("/products/123");
+
+router.subscribe((state) => {
+  console.log("Route:", state.currentPath);
+  console.log("Params:", state.params);
+  console.log("Query:", state.query);
+});
+```
+
+## Built-in Components
+
+Framework-provided components for routing:
+
+```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") }
+```
+
+## Remote UI (WebSocket)
+
+Connect to a remote Hypen server:
+
+```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));
+
+await remote.connect();
+remote.dispatchAction("loadData", { page: 1 });
+```
+
+## Global Context
+
+Cross-module communication:
+
+```typescript
+import { HypenGlobalContext } from "@hypen-space/core";
+
+const context = new HypenGlobalContext();
+
+context.registerModule("auth", authModuleInstance);
+context.registerModule("cart", cartModuleInstance);
+
+const auth = context.getModule("auth");
+const cartState = context.getModule("cart").getState();
+
+// Event system
+context.on("userLoggedIn", (user) => console.log("Logged in:", user));
+context.emit("userLoggedIn", { id: "1", name: "Ian" });
+```
+
+## Custom Renderer
+
+Implement the `Renderer` interface for any platform:
+
+```typescript
+import { BaseRenderer, type Patch } from "@hypen-space/core";
+
+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
+  }
+}
+```
+
+## 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/state` | Observable state utilities |
+| `@hypen-space/core/renderer` | Abstract renderer interface |
+| `@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
+- TypeScript 5+ (optional)
+
+## License
+
+MIT

package/dist/src/components/builtin.js

@@ -0,0 +1,89 @@
+import {
+  app
+} from "../app.js";
+import"../state.js";
+import"../../chunk-5va59f7m.js";
+
+// src/components/builtin.ts
+var Router = app.defineState({
+  currentPath: "/",
+  matchedRoute: null,
+  routeParams: {}
+}, { name: "__Router" }).onCreated((state, context) => {
+  if (!context) {
+    console.error("[Router] Requires global context");
+    return;
+  }
+  const router = context.__router;
+  if (!router) {
+    console.error("[Router] Router not found in context");
+    return;
+  }
+  const hypenEngine = context.__hypenEngine;
+  const updateRouteVisibility = async (currentPath) => {
+    const routeElements = document.querySelectorAll('[data-hypen-type="route"]');
+    let matchFound = false;
+    for (let index = 0;index < routeElements.length; index++) {
+      const routeEl = routeElements[index];
+      const htmlEl = routeEl;
+      const routePath = htmlEl.dataset.routePath || "/";
+      const isMatch = routePath === currentPath;
+      htmlEl.style.display = isMatch ? "flex" : "none";
+      if (isMatch) {
+        matchFound = true;
+        const componentName = htmlEl.dataset.routeComponent;
+        const isLazy = htmlEl.dataset.routeLazy === "true";
+        const hasContent = htmlEl.children.length > 0;
+        if (componentName && !hasContent && hypenEngine) {
+          try {
+            await hypenEngine.renderLazyRoute(routePath, componentName, htmlEl);
+          } catch (err) {
+            console.error(`[Router] Failed to render route ${routePath}:`, err);
+          }
+        }
+      }
+    }
+    if (!matchFound) {
+      console.warn(`[Router] No route matched path: ${currentPath}. Available routes:`, Array.from(routeElements).map((el) => el.dataset.routePath));
+    }
+  };
+  setTimeout(() => {
+    updateRouteVisibility(state.currentPath);
+  }, 100);
+  router.onNavigate((routeState) => {
+    state.currentPath = routeState.currentPath;
+    state.routeParams = routeState.params;
+    updateRouteVisibility(routeState.currentPath);
+  });
+}).build();
+var Route = app.defineState({}, { name: "__Route" }).build();
+var Link = app.defineState({
+  to: "/",
+  isActive: false
+}, { name: "__Link" }).onAction("navigate", ({ state, context }) => {
+  const router = context?.__router;
+  if (!router) {
+    console.error("[Link] Requires router context");
+    return;
+  }
+  const targetPath = state.to;
+  router.push(targetPath);
+}).onCreated((state, context) => {
+  if (!context)
+    return;
+  const router = context.__router;
+  if (router) {
+    router.onNavigate((routeState) => {
+      state.isActive = routeState.currentPath === state.to;
+    });
+  }
+}).build();
+export {
+  Router,
+  Route,
+  Link
+};
+
+export { Router, Route, Link };
+
+//# debugId=DCABC4D99E5064EE64756E2164756E21

package/dist/src/components/builtin.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/components/builtin.ts"],
+  "sourcesContent": [
+    "/**\n * Built-in Hypen Components\n * Framework-provided components like Router and Route\n */\n\nimport { app } from \"../app.js\";\nimport type { HypenRouter } from \"../router.js\";\n\n/**\n * Router Component\n * Automatically matches routes and renders the appropriate child Route\n *\n * Usage in Hypen DSL:\n * Router {\n *   Route(path: \"/\") { HomePage }\n *   Route(path: \"/products\") { ProductList }\n *   Route(path: \"/users/:id\") { UserProfile }\n * }\n */\nexport const Router = app\n  .defineState(\n    {\n      currentPath: \"/\",\n      matchedRoute: null as any,\n      routeParams: {} as Record<string, string>,\n    },\n    { name: \"__Router\" }\n  )\n  .onCreated((state, context) => {\n    if (!context) {\n      console.error(\"[Router] Requires global context\");\n      return;\n    }\n\n    // Subscribe to router changes\n    const router = (context as any).__router as HypenRouter;\n    if (!router) {\n      console.error(\"[Router] Router not found in context\");\n      return;\n    }\n\n    // Get access to the Hypen engine for lazy rendering\n    const hypenEngine = (context as any).__hypenEngine;\n\n    // Function to render only the matching route\n    const updateRouteVisibility = async (currentPath: string) => {\n      // Find all Route elements in the DOM\n      const routeElements = document.querySelectorAll(\n        '[data-hypen-type=\"route\"]'\n      );\n\n      let matchFound = false;\n\n      for (let index = 0; index < routeElements.length; index++) {\n        const routeEl = routeElements[index];\n        const htmlEl = routeEl as HTMLElement;\n        const routePath = htmlEl.dataset.routePath || \"/\";\n\n        // Simple path matching (exact match for now)\n        const isMatch = routePath === currentPath;\n\n        // Only show the matching route, hide all others\n        htmlEl.style.display = isMatch ? \"flex\" : \"none\";\n\n        if (isMatch) {\n          matchFound = true;\n\n          // Check if this route needs to be rendered\n          const componentName = htmlEl.dataset.routeComponent;\n          const isLazy = htmlEl.dataset.routeLazy === \"true\";\n          const hasContent = htmlEl.children.length > 0;\n\n          // Render if route has no content and has a component name\n          if (componentName && !hasContent && hypenEngine) {\n            try {\n              await hypenEngine.renderLazyRoute(\n                routePath,\n                componentName,\n                htmlEl\n              );\n            } catch (err) {\n              console.error(`[Router] Failed to render route ${routePath}:`, err);\n            }\n          }\n        }\n      }\n\n      if (!matchFound) {\n        console.warn(\n          `[Router] No route matched path: ${currentPath}. Available routes:`,\n          Array.from(routeElements).map(\n            (el: Element) => (el as HTMLElement).dataset.routePath\n          )\n        );\n      }\n    };\n\n    // Initial route visibility (after DOM is ready)\n    setTimeout(() => {\n      updateRouteVisibility(state.currentPath);\n    }, 100);\n\n    router.onNavigate((routeState) => {\n      state.currentPath = routeState.currentPath;\n      state.routeParams = routeState.params;\n\n      // Update route visibility when path changes\n      updateRouteVisibility(routeState.currentPath);\n    });\n  })\n  .build();\n\n/**\n * Route Component\n * Defines a route pattern and its content\n * This is just a marker component - Router processes it\n *\n * Props:\n * - path: string - Route pattern (e.g., \"/\", \"/users/:id\", \"/dashboard/*\")\n *\n * Usage:\n * Route(path: \"/products\") {\n *   ProductList\n * }\n */\nexport const Route = app.defineState({}, { name: \"__Route\" }).build();\n\n/**\n * Navigation Link Component\n * Navigates to a route when clicked\n *\n * Props:\n * - to: string - Target path\n *\n * Usage:\n * Link(to: \"/products\") {\n *   Text(\"View Products\")\n * }\n */\nexport const Link = app\n  .defineState(\n    {\n      to: \"/\",\n      isActive: false,\n    },\n    { name: \"__Link\" }\n  )\n  .onAction(\"navigate\", ({ state, context }) => {\n    const router = (context as any)?.__router as HypenRouter;\n    if (!router) {\n      console.error(\"[Link] Requires router context\");\n      return;\n    }\n\n    const targetPath = state.to;\n    router.push(targetPath);\n  })\n  .onCreated((state, context) => {\n    if (!context) return;\n\n    // Check if current path matches this link's target\n    const router = (context as any).__router as HypenRouter;\n    if (router) {\n      router.onNavigate((routeState) => {\n        state.isActive = routeState.currentPath === state.to;\n      });\n    }\n  })\n  .build();\n"
+  ],
+  "mappings": ";;;;;;;AAmBO,IAAM,SAAS,IACnB,YACC;AAAA,EACE,aAAa;AAAA,EACb,cAAc;AAAA,EACd,aAAa,CAAC;AAChB,GACA,EAAE,MAAM,WAAW,CACrB,EACC,UAAU,CAAC,OAAO,YAAY;AAAA,EAC7B,IAAI,CAAC,SAAS;AAAA,IACZ,QAAQ,MAAM,kCAAkC;AAAA,IAChD;AAAA,EACF;AAAA,EAGA,MAAM,SAAU,QAAgB;AAAA,EAChC,IAAI,CAAC,QAAQ;AAAA,IACX,QAAQ,MAAM,sCAAsC;AAAA,IACpD;AAAA,EACF;AAAA,EAGA,MAAM,cAAe,QAAgB;AAAA,EAGrC,MAAM,wBAAwB,OAAO,gBAAwB;AAAA,IAE3D,MAAM,gBAAgB,SAAS,iBAC7B,2BACF;AAAA,IAEA,IAAI,aAAa;AAAA,IAEjB,SAAS,QAAQ,EAAG,QAAQ,cAAc,QAAQ,SAAS;AAAA,MACzD,MAAM,UAAU,cAAc;AAAA,MAC9B,MAAM,SAAS;AAAA,MACf,MAAM,YAAY,OAAO,QAAQ,aAAa;AAAA,MAG9C,MAAM,UAAU,cAAc;AAAA,MAG9B,OAAO,MAAM,UAAU,UAAU,SAAS;AAAA,MAE1C,IAAI,SAAS;AAAA,QACX,aAAa;AAAA,QAGb,MAAM,gBAAgB,OAAO,QAAQ;AAAA,QACrC,MAAM,SAAS,OAAO,QAAQ,cAAc;AAAA,QAC5C,MAAM,aAAa,OAAO,SAAS,SAAS;AAAA,QAG5C,IAAI,iBAAiB,CAAC,cAAc,aAAa;AAAA,UAC/C,IAAI;AAAA,YACF,MAAM,YAAY,gBAChB,WACA,eACA,MACF;AAAA,YACA,OAAO,KAAK;AAAA,YACZ,QAAQ,MAAM,mCAAmC,cAAc,GAAG;AAAA;AAAA,QAEtE;AAAA,MACF;AAAA,IACF;AAAA,IAEA,IAAI,CAAC,YAAY;AAAA,MACf,QAAQ,KACN,mCAAmC,kCACnC,MAAM,KAAK,aAAa,EAAE,IACxB,CAAC,OAAiB,GAAmB,QAAQ,SAC/C,CACF;AAAA,IACF;AAAA;AAAA,EAIF,WAAW,MAAM;AAAA,IACf,sBAAsB,MAAM,WAAW;AAAA,KACtC,GAAG;AAAA,EAEN,OAAO,WAAW,CAAC,eAAe;AAAA,IAChC,MAAM,cAAc,WAAW;AAAA,IAC/B,MAAM,cAAc,WAAW;AAAA,IAG/B,sBAAsB,WAAW,WAAW;AAAA,GAC7C;AAAA,CACF,EACA,MAAM;AAeF,IAAM,QAAQ,IAAI,YAAY,CAAC,GAAG,EAAE,MAAM,UAAU,CAAC,EAAE,MAAM;AAc7D,IAAM,OAAO,IACjB,YACC;AAAA,EACE,IAAI;AAAA,EACJ,UAAU;AACZ,GACA,EAAE,MAAM,SAAS,CACnB,EACC,SAAS,YAAY,GAAG,OAAO,cAAc;AAAA,EAC5C,MAAM,SAAU,SAAiB;AAAA,EACjC,IAAI,CAAC,QAAQ;AAAA,IACX,QAAQ,MAAM,gCAAgC;AAAA,IAC9C;AAAA,EACF;AAAA,EAEA,MAAM,aAAa,MAAM;AAAA,EACzB,OAAO,KAAK,UAAU;AAAA,CACvB,EACA,UAAU,CAAC,OAAO,YAAY;AAAA,EAC7B,IAAI,CAAC;AAAA,IAAS;AAAA,EAGd,MAAM,SAAU,QAAgB;AAAA,EAChC,IAAI,QAAQ;AAAA,IACV,OAAO,WAAW,CAAC,eAAe;AAAA,MAChC,MAAM,WAAW,WAAW,gBAAgB,MAAM;AAAA,KACnD;AAAA,EACH;AAAA,CACD,EACA,MAAM;",
+  "debugId": "DCABC4D99E5064EE64756E2164756E21",
+  "names": []
+}

package/dist/src/discovery.js

@@ -0,0 +1,234 @@
+import {
+  __require,
+  __toESM
+} from "../chunk-5va59f7m.js";
+
+// src/discovery.ts
+import { existsSync, readdirSync, readFileSync, watch } from "fs";
+import { join, basename, resolve } from "path";
+function removeImports(text) {
+  return text.replace(/import\s+(?:\{[^}]+\}|\w+)\s+from\s+["'][^"']+["']\s*/g, "");
+}
+async function discoverComponents(baseDir, options = {}) {
+  const {
+    patterns = ["folder", "sibling", "index"],
+    recursive = false,
+    debug = false
+  } = options;
+  const log = debug ? (...args) => console.log("[discovery]", ...args) : () => {};
+  const resolvedDir = resolve(baseDir);
+  const components = [];
+  const seen = new Set;
+  log("Scanning directory:", resolvedDir);
+  log("Patterns:", patterns);
+  const addComponent = (name, hypenPath, modulePath) => {
+    if (seen.has(name)) {
+      log(`Skipping duplicate: ${name}`);
+      return;
+    }
+    seen.add(name);
+    const templateRaw = readFileSync(hypenPath, "utf-8");
+    const template = removeImports(templateRaw).trim();
+    components.push({
+      name,
+      hypenPath,
+      modulePath,
+      template,
+      hasModule: modulePath !== null
+    });
+    log(`Found: ${name} (${modulePath ? "with module" : "stateless"})`);
+  };
+  const scanForFolderComponents = (dir) => {
+    if (!existsSync(dir))
+      return;
+    const entries = readdirSync(dir, { withFileTypes: true });
+    for (const entry of entries) {
+      if (!entry.isDirectory())
+        continue;
+      const folderPath = join(dir, entry.name);
+      const componentName = entry.name;
+      if (patterns.includes("folder")) {
+        const hypenPath = join(folderPath, "component.hypen");
+        if (existsSync(hypenPath)) {
+          const modulePath = join(folderPath, "component.ts");
+          addComponent(componentName, hypenPath, existsSync(modulePath) ? modulePath : null);
+          continue;
+        }
+      }
+      if (patterns.includes("index")) {
+        const hypenPath = join(folderPath, "index.hypen");
+        if (existsSync(hypenPath)) {
+          const modulePath = join(folderPath, "index.ts");
+          addComponent(componentName, hypenPath, existsSync(modulePath) ? modulePath : null);
+          continue;
+        }
+      }
+      if (recursive) {
+        scanForFolderComponents(folderPath);
+      }
+    }
+  };
+  const scanForSiblingComponents = (dir) => {
+    if (!existsSync(dir))
+      return;
+    const entries = readdirSync(dir, { withFileTypes: true });
+    for (const entry of entries) {
+      if (entry.isDirectory()) {
+        if (recursive) {
+          scanForSiblingComponents(join(dir, entry.name));
+        }
+        continue;
+      }
+      if (!entry.name.endsWith(".hypen"))
+        continue;
+      const hypenPath = join(dir, entry.name);
+      const baseName = basename(entry.name, ".hypen");
+      if (baseName === "component" || baseName === "index")
+        continue;
+      const modulePath = join(dir, `${baseName}.ts`);
+      addComponent(baseName, hypenPath, existsSync(modulePath) ? modulePath : null);
+    }
+  };
+  if (patterns.includes("folder") || patterns.includes("index")) {
+    scanForFolderComponents(resolvedDir);
+  }
+  if (patterns.includes("sibling")) {
+    scanForSiblingComponents(resolvedDir);
+  }
+  log(`Discovered ${components.length} components`);
+  return components;
+}
+async function loadDiscoveredComponents(components) {
+  const { app } = await import("./app.js");
+  const loaded = new Map;
+  for (const component of components) {
+    let module;
+    if (component.modulePath) {
+      const moduleExport = await import(component.modulePath);
+      module = moduleExport.default;
+    } else {
+      module = app.defineState({}).build();
+    }
+    loaded.set(component.name, {
+      name: component.name,
+      module,
+      template: component.template
+    });
+  }
+  return loaded;
+}
+function watchComponents(baseDir, options = {}) {
+  const resolvedDir = resolve(baseDir);
+  const {
+    onChange,
+    onAdd,
+    onRemove,
+    onUpdate,
+    debug = false,
+    ...discoveryOptions
+  } = options;
+  const log = debug ? (...args) => console.log("[discovery:watch]", ...args) : () => {};
+  let currentComponents = new Map;
+  let debounceTimer = null;
+  const initialScan = async () => {
+    const components = await discoverComponents(resolvedDir, discoveryOptions);
+    currentComponents = new Map(components.map((c) => [c.name, c]));
+    onChange?.(components);
+  };
+  const rescan = async () => {
+    if (debounceTimer) {
+      clearTimeout(debounceTimer);
+    }
+    debounceTimer = setTimeout(async () => {
+      log("Rescanning...");
+      const newComponents = await discoverComponents(resolvedDir, discoveryOptions);
+      const newMap = new Map(newComponents.map((c) => [c.name, c]));
+      for (const [name, component] of newMap) {
+        const existing = currentComponents.get(name);
+        if (!existing) {
+          log("Added:", name);
+          onAdd?.(component);
+        } else if (existing.template !== component.template || existing.modulePath !== component.modulePath) {
+          log("Updated:", name);
+          onUpdate?.(component);
+        }
+      }
+      for (const name of currentComponents.keys()) {
+        if (!newMap.has(name)) {
+          log("Removed:", name);
+          onRemove?.(name);
+        }
+      }
+      currentComponents = newMap;
+      onChange?.(newComponents);
+    }, 100);
+  };
+  const watcher = watch(resolvedDir, { recursive: true }, (event, filename) => {
+    if (!filename)
+      return;
+    if (filename.endsWith(".hypen") || filename.endsWith(".ts")) {
+      log("File changed:", filename);
+      rescan();
+    }
+  });
+  initialScan();
+  return {
+    stop: () => {
+      watcher.close();
+      if (debounceTimer) {
+        clearTimeout(debounceTimer);
+      }
+    }
+  };
+}
+async function generateComponentsCode(baseDir, options = {}) {
+  const components = await discoverComponents(baseDir, options);
+  const resolvedDir = resolve(baseDir);
+  let code = `/**
+ * Auto-generated component imports
+ * Generated by @hypen-space/core discovery
+ */
+
+`;
+  for (const component of components) {
+    const relativePath = component.modulePath ? "./" + component.modulePath.replace(resolvedDir + "/", "").replace(/\.ts$/, ".js") : null;
+    if (relativePath) {
+      code += `import ${component.name}Module from "${relativePath}";
+`;
+    }
+  }
+  code += `
+import { app } from "@hypen-space/core";
+
+`;
+  for (const component of components) {
+    const templateJson = JSON.stringify(component.template);
+    if (component.hasModule) {
+      code += `export const ${component.name} = {
+  module: ${component.name}Module,
+  template: ${templateJson},
+};
+
+`;
+    } else {
+      code += `const ${component.name}Module = app.defineState({}).build();
+export const ${component.name} = {
+  module: ${component.name}Module,
+  template: ${templateJson},
+};
+
+`;
+    }
+  }
+  return code;
+}
+export {
+  watchComponents,
+  loadDiscoveredComponents,
+  generateComponentsCode,
+  discoverComponents
+};
+
+export { discoverComponents, loadDiscoveredComponents, watchComponents, generateComponentsCode };
+
+//# debugId=450977873A4D92DA64756E2164756E21