@hypen-space/web 0.3.12 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypen-space/web",
-  "version": "0.3.12",
+  "version": "0.4.0",
   "description": "Hypen web renderers - DOM and Canvas rendering for browsers",
   "type": "module",
   "main": "./dist/index.js",
@@ -29,6 +29,13 @@
       "import": "./dist/canvas/index.js",
       "default": "./dist/canvas/index.js"
     },
+    "./client": {
+      "types": "./dist/client.d.ts",
+      "browser": "./dist/client.js",
+      "bun": "./src/client.ts",
+      "import": "./dist/client.js",
+      "default": "./dist/client.js"
+    },
     "./hypen": {
       "types": "./dist/hypen.d.ts",
       "browser": "./dist/hypen.js",
@@ -48,7 +55,7 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@hypen-space/core": "^0.3.10"
+    "@hypen-space/core": "^0.4.0"
   },
   "devDependencies": {
     "@types/bun": "latest",

package/src/canvas/renderer.ts

@@ -4,7 +4,8 @@
  * Main renderer class that orchestrates layout, painting, and events
  */
 
-import type { Renderer, Patch } from "@hypen-space/core";
+import type { Renderer } from "@hypen-space/core/renderer";
+import type { Patch } from "@hypen-space/core/types";
 import { frameworkLoggers } from "@hypen-space/core";
 
 const log = frameworkLoggers.canvas;

package/src/client.ts

@@ -0,0 +1,20 @@
+/**
+ * @hypen-space/web/client - Client-side rendering with WASM engine
+ *
+ * This entry point includes the Hypen orchestrator which connects the
+ * BrowserEngine (WASM) with the DOM renderer. Use this when you want
+ * to run the engine client-side in the browser.
+ *
+ * For remote UI (server-side engine, no WASM in browser), use the
+ * default import from "@hypen-space/web" instead.
+ *
+ * @example
+ * ```typescript
+ * import { render } from "@hypen-space/web/client";
+ *
+ * await render("Counter", "#app");
+ * ```
+ */
+
+export { Hypen, render, renderWithComponents } from "./hypen.js";
+export type { HypenConfig } from "./hypen.js";

package/src/dom/components/hypenapp.ts

@@ -14,7 +14,7 @@
 
 import type { ComponentHandler } from "./index.js";
 import { RemoteEngine } from "@hypen-space/core/remote/client";
-import type { Patch } from "@hypen-space/core/remote";
+import type { Patch } from "@hypen-space/core/types";
 import { frameworkLoggers } from "@hypen-space/core";
 
 const log = frameworkLoggers.remote;
@@ -158,7 +158,7 @@ function applyPatches(
       }
 
       case "insert": {
-        const parentId = patch.parentId;
+        const parentId = patch.parentId!;
         const parent = parentId === "root" ? container : nodes.get(parentId);
         const child = nodes.get(patch.id!);
         const beforeId = patch.beforeId;
@@ -183,7 +183,7 @@ function applyPatches(
       }
 
       case "move": {
-        const parentId = patch.parentId;
+        const parentId = patch.parentId!;
         const parent = parentId === "root" ? container : nodes.get(parentId);
         const child = nodes.get(patch.id!);
         const beforeId = patch.beforeId;

package/src/dom/renderer.ts

@@ -4,10 +4,10 @@
  * Renders Hypen patches to the DOM
  */
 
-import type { Patch } from "@hypen-space/core";
-import type { HypenModuleInstance, RouterContext } from "@hypen-space/core";
-import type { HypenRouter } from "@hypen-space/core";
-import type { HypenGlobalContext } from "@hypen-space/core";
+import type { Patch } from "@hypen-space/core/types";
+import type { HypenModuleInstance, RouterContext } from "@hypen-space/core/app";
+import type { HypenRouter } from "@hypen-space/core/router";
+import type { HypenGlobalContext } from "@hypen-space/core/context";
 import { frameworkLoggers } from "@hypen-space/core";
 
 const log = frameworkLoggers.renderer;

package/src/hypen.ts

@@ -4,20 +4,14 @@
  * Simple API for rendering Hypen applications (like ReactDOM.render)
  */
 
-import {
-  BrowserEngine as Engine,
-  HypenModuleInstance,
-  HypenRouter,
-  HypenGlobalContext,
-  componentLoader,
-  Router,
-  Route,
-  Link,
-  frameworkLoggers,
-  setDebugMode,
-  type RouterContext,
-  type HypenModuleDefinition,
-} from "@hypen-space/core";
+import { Engine } from "@hypen-space/core/engine/browser";
+import { HypenModuleInstance } from "@hypen-space/core/app";
+import type { RouterContext, HypenModuleDefinition } from "@hypen-space/core/app";
+import { HypenRouter } from "@hypen-space/core/router";
+import { HypenGlobalContext } from "@hypen-space/core/context";
+import { componentLoader } from "@hypen-space/core/loader";
+import { Router, Route, Link } from "@hypen-space/core/components";
+import { frameworkLoggers, setDebugMode } from "@hypen-space/core";
 import { DOMRenderer } from "./dom/renderer.js";
 import type { DebugConfig } from "./dom/debug.js";
 
@@ -519,7 +513,7 @@ export class Hypen {
  *
  * @example
  * ```typescript
- * import { render } from "@hypen-space/web";
+ * import { render } from "@hypen-space/web/client";
  *
  * await render("HomePage", "#app");
  * ```
@@ -541,7 +535,7 @@ export async function render(
  *
  * @example
  * ```typescript
- * import { renderWithComponents } from "@hypen-space/web";
+ * import { renderWithComponents } from "@hypen-space/web/client";
  * import HomePage from "./components/HomePage/component";
  * import homePageTemplate from "./components/HomePage/component.hypen";
  *

package/src/index.ts

@@ -1,30 +1,21 @@
 /**
- * @hypen/web - Hypen Web Renderers
+ * @hypen-space/web - Hypen Web Renderers
  *
  * Browser-only package providing DOM and Canvas rendering for Hypen applications.
- * Requires @hypen-space/core for the engine and state management.
+ * This entry point is WASM-free — it only contains renderers and the remote UI
+ * embed component.
  *
- * ## Quick Start
+ * For client-side rendering (with WASM engine), use "@hypen-space/web/client":
  *
  * ```typescript
- * import { Engine, app } from "@hypen-space/core";
- * import { DOMRenderer } from "@hypen/web";
- *
- * // Initialize engine
- * const engine = new Engine();
- * await engine.init({ wasmPath: "/hypen_engine_bg.wasm" });
- *
- * // Create renderer
- * const container = document.getElementById("app")!;
- * const renderer = new DOMRenderer(container, engine);
+ * import { render } from "@hypen-space/web/client";
+ * await render("Counter", "#app");
+ * ```
  *
- * // Set up patch callback
- * engine.setRenderCallback((patches) => {
- *   renderer.applyPatches(patches);
- * });
+ * For remote UI (no WASM needed in the browser):
  *
- * // Render your app
- * engine.renderSource(`Column { Text("Hello Hypen!") }`);
+ * ```typescript
+ * import { DOMRenderer } from "@hypen-space/web";
  * ```
  */
 
@@ -47,20 +38,3 @@ export { hypenAppHandler, disconnectHypenApp } from "./dom/components/hypenapp.j
 
 export { CanvasRenderer } from "./canvas/renderer.js";
 export { canvasHandler, canvasApplicators } from "./dom/canvas/index.js";
-
-// ============================================================================
-// HIGH-LEVEL API
-// ============================================================================
-
-export { Hypen, render, renderWithComponents } from "./hypen.js";
-export type { HypenConfig } from "./hypen.js";
-
-// Re-export core types that web users commonly need
-export type {
-  Patch,
-  Action,
-  Renderer,
-  RouterContext,
-  HypenModuleInstance,
-  HypenGlobalContext,
-} from "@hypen-space/core";