@hypen-space/web 0.4.2 → 0.4.5

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @hypen-space/web - Hypen Web Renderers
+ *
+ * Browser-only package providing DOM and Canvas rendering for Hypen applications.
+ * This entry point is WASM-free — it only contains renderers and the remote UI
+ * embed component.
+ *
+ * For client-side rendering (with WASM engine), use "@hypen-space/web/client":
+ *
+ * ```typescript
+ * import { render } from "@hypen-space/web/client";
+ * await render("Counter", "#app");
+ * ```
+ *
+ * For remote UI (no WASM needed in the browser):
+ *
+ * ```typescript
+ * import { DOMRenderer } from "@hypen-space/web";
+ * ```
+ */
+export { DOMRenderer } from "./dom/renderer.js";
+export { ComponentRegistry } from "./dom/components/index.js";
+export { ApplicatorRegistry } from "./dom/applicators/index.js";
+export { EventManager } from "./dom/events.js";
+export { RerenderTracker, type DebugConfig, defaultDebugConfig } from "./dom/debug.js";
+export { hypenAppHandler, disconnectHypenApp } from "./dom/components/hypenapp.js";
+export { CanvasRenderer } from "./canvas/renderer.js";
+export { canvasHandler, canvasApplicators } from "./dom/canvas/index.js";

package/dist/index.js

@@ -1011,7 +1011,7 @@ var exports_route = {};
 __export(exports_route, {
   routeHandler: () => routeHandler
 });
-import { frameworkLoggers } from "@hypen-space/core";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 var log, routeHandler;
 var init_route = __esm(() => {
   log = frameworkLoggers.router;
@@ -1046,7 +1046,7 @@ __export(exports_hypenapp, {
   disconnectHypenApp: () => disconnectHypenApp
 });
 import { RemoteEngine } from "@hypen-space/core/remote/client";
-import { frameworkLoggers as frameworkLoggers2 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers2 } from "@hypen-space/core/logger";
 function applyPatches(container, nodes, patches, engine, onRoot) {
   for (const patch of patches) {
     switch (patch.type) {
@@ -1202,8 +1202,6 @@ function applyProp(el, name, value) {
     border: "border",
     gap: "gap",
     flex: "flex",
-    alignItems: "alignItems",
-    justifyContent: "justifyContent",
     opacity: "opacity",
     overflow: "overflow"
   };
@@ -1301,6 +1299,26 @@ var init_hypenapp = __esm(() => {
   };
 });
 
+// src/dom/components/app.ts
+var exports_app = {};
+__export(exports_app, {
+  appHandler: () => appHandler
+});
+var appHandler;
+var init_app = __esm(() => {
+  appHandler = {
+    create() {
+      const el = document.createElement("div");
+      el.style.display = "flex";
+      el.style.flexDirection = "column";
+      el.style.minHeight = "100vh";
+      el.style.width = "100%";
+      el.dataset.hypenType = "app";
+      return el;
+    }
+  };
+});
+
 // src/dom/components/index.ts
 class ComponentRegistry {
   handlers = new Map;
@@ -1311,9 +1329,13 @@ class ComponentRegistry {
     this.handlers.set(type.toLowerCase(), handler);
   }
   get(type) {
+    if (!type)
+      return;
     return this.handlers.get(type.toLowerCase());
   }
   createElement(type, props = {}) {
+    if (!type)
+      return null;
     const handler = this.get(type);
     if (!handler)
       return null;
@@ -1355,6 +1377,8 @@ class ComponentRegistry {
     const { routerHandler: routerHandler2 } = (init_router(), __toCommonJS(exports_router));
     const { routeHandler: routeHandler2 } = (init_route(), __toCommonJS(exports_route));
     const { hypenAppHandler: hypenAppHandler2 } = (init_hypenapp(), __toCommonJS(exports_hypenapp));
+    const { appHandler: appHandler2 } = (init_app(), __toCommonJS(exports_app));
+    this.register("app", appHandler2);
     this.register("column", columnHandler2);
     this.register("row", rowHandler2);
     this.register("text", textHandler2);
@@ -2038,7 +2062,7 @@ import {
   disposableListener,
   disposableTimeout
 } from "@hypen-space/core/disposable";
-import { frameworkLoggers as frameworkLoggers3 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers3 } from "@hypen-space/core/logger";
 var log3 = frameworkLoggers3.events;
 function toPlainObject(value) {
   if (value instanceof Map) {
@@ -2323,10 +2347,62 @@ var eventHandlers = {
     extractPayload: scrollPayload
   }),
   onLongClick: createLongClickHandler(500),
+  onLongPress: createLongClickHandler(500),
   onFocus: createEventHandler("focus", { extractPayload: focusPayload }),
   onBlur: createEventHandler("blur", { extractPayload: focusPayload }),
   onMouseEnter: createEventHandler("mouseenter", { extractPayload: mousePayload }),
-  onMouseLeave: createEventHandler("mouseleave", { extractPayload: mousePayload })
+  onMouseLeave: createEventHandler("mouseleave", { extractPayload: mousePayload }),
+  bind: (element, value) => {
+    const bindPath = typeof value === "string" ? value : null;
+    if (!bindPath)
+      return;
+    const disposables = getElementDisposables2(element);
+    const eventKey = `bind:${bindPath}`;
+    if (getRegisteredEvents(element).has(eventKey))
+      return;
+    registerEvent(element, eventKey);
+    const hypenType = element.dataset?.hypenType;
+    if (hypenType === "checkbox" || hypenType === "switch") {
+      const input = element.querySelector('input[type="checkbox"]');
+      if (!input)
+        return;
+      const listener = () => {
+        const engine = getEngine(element);
+        if (engine) {
+          engine.dispatchAction("__hypen_bind", {
+            path: bindPath,
+            value: input.checked
+          });
+        }
+      };
+      disposables.add(disposableListener(input, "change", listener, { passive: true }));
+    } else if (element instanceof HTMLSelectElement) {
+      const listener = () => {
+        const engine = getEngine(element);
+        if (engine) {
+          engine.dispatchAction("__hypen_bind", {
+            path: bindPath,
+            value: element.value
+          });
+        }
+      };
+      disposables.add(disposableListener(element, "change", listener, { passive: true }));
+    } else if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement) {
+      const listener = () => {
+        const engine = getEngine(element);
+        if (engine) {
+          engine.dispatchAction("__hypen_bind", {
+            path: bindPath,
+            value: element.value
+          });
+        }
+      };
+      disposables.add(disposableListener(element, "input", listener, { passive: true }));
+    } else {
+      return;
+    }
+    disposables.addCallback(() => unregisterEvent(element, eventKey));
+  }
 };
 
 // src/dom/applicators/typography.ts
@@ -2584,12 +2660,6 @@ var advancedLayoutHandlers = {
   flexBasis: (el, value) => {
     el.style.flexBasis = typeof value === "number" ? `${value}px` : String(value);
   },
-  justifyContent: (el, value) => {
-    el.style.justifyContent = mapAlignmentValue(String(value));
-  },
-  alignItems: (el, value) => {
-    el.style.alignItems = mapAlignmentValue(String(value));
-  },
   alignContent: (el, value) => {
     el.style.alignContent = String(value);
   },
@@ -3127,7 +3197,7 @@ var canvasApplicators = {
 };
 
 // src/dom/debug.ts
-import { frameworkLoggers as frameworkLoggers4 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers4 } from "@hypen-space/core/logger";
 var log4 = frameworkLoggers4.debug;
 var defaultDebugConfig = {
   enabled: false,
@@ -3290,7 +3360,7 @@ class RerenderTracker {
 }
 
 // src/dom/renderer.ts
-import { frameworkLoggers as frameworkLoggers5 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers5 } from "@hypen-space/core/logger";
 var log5 = frameworkLoggers5.renderer;
 
 class DOMRenderer {
@@ -3301,7 +3371,7 @@ class DOMRenderer {
   applicators;
   engine;
   currentState = {};
-  routerContext = null;
+  router = null;
   globalContext = null;
   componentInstances = new Map;
   debugTracker;
@@ -3316,8 +3386,8 @@ class DOMRenderer {
       this.applicators.register(name, handler);
     }
   }
-  setContext(routerContext, globalContext) {
-    this.routerContext = routerContext;
+  setContext(router, globalContext) {
+    this.router = router;
     this.globalContext = globalContext;
   }
   applyPatches(patches) {
@@ -3363,24 +3433,30 @@ class DOMRenderer {
     });
   }
   applyPatch(patch) {
+    const p = patch;
+    const id = patch.id ?? p.id;
+    const elementType = patch.elementType ?? p.element_type;
+    const parentId = patch.parentId ?? p.parent_id;
+    const beforeId = patch.beforeId ?? p.before_id;
+    const eventName = patch.eventName ?? p.event_name;
     switch (patch.type) {
       case "create":
-        this.onCreate(patch.id, patch.elementType, patch.props || {});
+        this.onCreate(id, elementType ?? "container", patch.props || {});
         break;
       case "setProp":
-        this.onSetProp(patch.id, patch.name, patch.value);
+        this.onSetProp(id, patch.name, patch.value);
         break;
       case "setText":
-        this.onSetText(patch.id, patch.text);
+        this.onSetText(id, patch.text);
         break;
       case "insert":
-        this.onInsert(patch.parentId, patch.id, patch.beforeId);
+        this.onInsert(parentId, id, beforeId);
         break;
       case "move":
-        this.onMove(patch.parentId, patch.id, patch.beforeId);
+        this.onMove(parentId, id, beforeId);
         break;
       case "remove":
-        this.onRemove(patch.id);
+        this.onRemove(id);
         break;
     }
   }
@@ -3511,7 +3587,7 @@ class DOMRenderer {
 }
 
 // src/dom/events.ts
-import { frameworkLoggers as frameworkLoggers6 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers6 } from "@hypen-space/core/logger";
 var log6 = frameworkLoggers6.events;
 
 class EventManager {
@@ -3741,7 +3817,7 @@ function getAbsoluteBounds(node) {
 }
 
 // src/canvas/text.ts
-import { frameworkLoggers as frameworkLoggers7 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers7 } from "@hypen-space/core/logger";
 var log7 = frameworkLoggers7.canvas;
 var textMetricsCache = new Map;
 function getCacheKey(text, fontStyle, maxWidth) {
@@ -3877,7 +3953,12 @@ function computeLayout(ctx, node, availableWidth, availableHeight, x = 0, y = 0)
   let width = parseSize(props.width);
   let height = parseSize(props.height);
   const type = node.type.toLowerCase();
-  if (type === "spacer") {
+  if (type === "app") {
+    if (width === null)
+      width = availableAfterMargin.width;
+    if (height === null)
+      height = availableAfterMargin.height;
+  } else if (type === "spacer") {
     if (width === null)
       width = availableAfterMargin.width;
     if (height === null)
@@ -4000,10 +4081,10 @@ function layoutChildren(ctx, parent) {
     return;
   }
   const flexDirection = props.flexDirection || (parent.type === "column" ? "column" : "row");
-  const justifyContent = props.justifyContent || "flex-start";
-  const alignItems = props.alignItems || "flex-start";
-  const gap = parseFloat(props.gap) || 0;
   const isColumn = flexDirection === "column";
+  const justifyContent = isColumn ? props.verticalAlignment || "flex-start" : props.horizontalAlignment || "flex-start";
+  const alignItems = isColumn ? props.horizontalAlignment || "flex-start" : props.verticalAlignment || "flex-start";
+  const gap = parseFloat(props.gap) || 0;
   const availableWidth = layout.contentWidth;
   const availableHeight = layout.contentHeight;
   const childInfo = [];
@@ -4116,8 +4197,8 @@ function layoutChildren(ctx, parent) {
 function layoutStackChildren(ctx, parent) {
   const layout = parent.layout;
   const props = parent.props;
-  const alignItems = props.alignItems || "flex-start";
-  const justifyContent = props.justifyContent || "flex-start";
+  const horizontalAlignment = props.horizontalAlignment || "flex-start";
+  const verticalAlignment = props.verticalAlignment || "flex-start";
   const availableWidth = layout.contentWidth;
   const availableHeight = layout.contentHeight;
   for (const child of parent.children) {
@@ -4125,14 +4206,14 @@ function layoutStackChildren(ctx, parent) {
     const childLayout = child.layout;
     let x = 0;
     let y = 0;
-    if (alignItems === "center") {
+    if (horizontalAlignment === "center") {
       x = (availableWidth - childLayout.width) / 2;
-    } else if (alignItems === "flex-end") {
+    } else if (horizontalAlignment === "flex-end") {
       x = availableWidth - childLayout.width;
     }
-    if (justifyContent === "center") {
+    if (verticalAlignment === "center") {
       y = (availableHeight - childLayout.height) / 2;
-    } else if (justifyContent === "flex-end") {
+    } else if (verticalAlignment === "flex-end") {
       y = availableHeight - childLayout.height;
     }
     childLayout.x = layout.x + layout.contentX + x;
@@ -4219,6 +4300,7 @@ function paintNode(ctx, node) {
     case "link":
       paintLink(ctx, node);
       break;
+    case "app":
     case "container":
     case "box":
       paintContainer(ctx, node);
@@ -5197,13 +5279,17 @@ class InputOverlay {
   overlay = null;
   focusedNode = null;
   onChangeCallback = null;
+  bindPath = null;
+  engine = null;
   constructor(container) {
     this.container = container || {};
   }
-  showInput(node, canvasBounds, onChange) {
+  showInput(node, canvasBounds, onChange, engine) {
     if (typeof document === "undefined")
       return;
     this.hideInput();
+    this.bindPath = node.props.bind || null;
+    this.engine = engine || null;
     const bounds = getAbsoluteBounds(node);
     if (!bounds)
       return;
@@ -5227,6 +5313,8 @@ class InputOverlay {
     }
     this.focusedNode = null;
     this.onChangeCallback = null;
+    this.bindPath = null;
+    this.engine = null;
   }
   updatePosition(node, canvasBounds) {
     if (!this.overlay || node !== this.focusedNode)
@@ -5288,6 +5376,12 @@ class InputOverlay {
       return;
     const value = this.overlay.value;
     this.onChangeCallback(value);
+    if (this.bindPath && this.engine) {
+      this.engine.dispatchAction("__hypen_bind", {
+        path: this.bindPath,
+        value
+      });
+    }
   }
   onBlur() {
     this.hideInput();
@@ -5457,7 +5551,7 @@ class AccessibilityLayer {
 }
 
 // src/canvas/renderer.ts
-import { frameworkLoggers as frameworkLoggers8 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers8 } from "@hypen-space/core/logger";
 var log8 = frameworkLoggers8.canvas;
 var DEFAULT_OPTIONS = {
   devicePixelRatio: typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1,
@@ -5724,4 +5818,4 @@ export {
   ApplicatorRegistry
 };
 
-//# debugId=12C217F7874690EA64756E2164756E21
+//# debugId=6270567F68CE276A64756E2164756E21