@hypen-space/web 0.3.9 → 0.3.11

package/package.json

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

package/src/canvas/renderer.ts

@@ -5,6 +5,9 @@
  */
 
 import type { Renderer, Patch } from "@hypen-space/core";
+import { frameworkLoggers } from "@hypen-space/core";
+
+const log = frameworkLoggers.canvas;
 
 // Interface for the engine that canvas renderer needs
 interface IEngine {
@@ -130,7 +133,7 @@ export class CanvasRenderer implements Renderer {
   private applyPatch(patch: Patch): void {
     switch (patch.type) {
       case "create":
-        this.onCreate(patch.id!, (patch as any).element_type!, patch.props || {});
+        this.onCreate(patch.id!, patch.elementType!, patch.props || {});
         break;
 
       case "setProp":
@@ -142,11 +145,11 @@ export class CanvasRenderer implements Renderer {
         break;
 
       case "insert":
-        this.onInsert((patch as any).parent_id!, patch.id!, (patch as any).before_id);
+        this.onInsert(patch.parentId!, patch.id!, patch.beforeId);
         break;
 
       case "move":
-        this.onMove((patch as any).parent_id!, patch.id!, (patch as any).before_id);
+        this.onMove(patch.parentId!, patch.id!, patch.beforeId);
         break;
 
       case "remove":
@@ -352,7 +355,7 @@ export class CanvasRenderer implements Renderer {
       const elapsed = performance.now() - startTime;
       this.frameCount++;
       if (performance.now() - this.lastFrameTime > 1000) {
-        console.log(`Canvas FPS: ${this.frameCount}, Last frame: ${elapsed.toFixed(2)}ms`);
+        log.debug(`Canvas FPS: ${this.frameCount}, Last frame: ${elapsed.toFixed(2)}ms`);
         this.frameCount = 0;
         this.lastFrameTime = performance.now();
       }

package/src/canvas/text.ts

@@ -6,6 +6,9 @@
 
 import type { FontStyle, TextMetrics, TextStyle } from "./types.js";
 import { createFontString } from "./utils.js";
+import { frameworkLoggers } from "@hypen-space/core";
+
+const log = frameworkLoggers.canvas;
 
 /**
  * Text metrics cache
@@ -166,7 +169,7 @@ export async function loadFont(fontFamily: string, fontWeight: string | number =
   try {
     await document.fonts.load(font);
   } catch (error) {
-    console.warn(`Failed to load font: ${font}`, error);
+    log.warn(`Failed to load font: ${font}`, error);
   }
 }
 

package/src/dom/applicators/events.ts

@@ -12,6 +12,7 @@ import {
   disposableTimeout,
   type Disposable,
 } from "@hypen-space/core/disposable";
+import { frameworkLoggers } from "@hypen-space/core";
 import {
   type IEngine,
   getEngine,
@@ -22,6 +23,8 @@ import {
   setKeyTarget,
 } from "../element-data.js";
 
+const log = frameworkLoggers.events;
+
 // ============================================================================
 // Types
 // ============================================================================
@@ -198,10 +201,7 @@ function createEventHandler(
     const { actionName, payload: customPayload } = extractActionDetails(value);
 
     if (!actionName) {
-      console.warn(
-        `[EventApplicator] ${eventType} requires an action reference starting with @, got:`,
-        value
-      );
+      log.warn(`${eventType} requires an action reference starting with @, got:`, value);
       return;
     }
 
@@ -278,10 +278,7 @@ function createKeyHandler(defaultKey: string = "Enter"): ApplicatorHandler {
     const { actionName, payload: customPayload } = extractActionDetails(value);
 
     if (!actionName) {
-      console.warn(
-        `[EventApplicator] onKey requires an action reference starting with @, got:`,
-        value
-      );
+      log.warn(`onKey requires an action reference starting with @, got:`, value);
       return;
     }
 
@@ -343,10 +340,7 @@ function createLongClickHandler(thresholdMs: number = 500): ApplicatorHandler {
     const { actionName, payload: customPayload } = extractActionDetails(value);
 
     if (!actionName) {
-      console.warn(
-        `[EventApplicator] onLongClick requires an action reference starting with @, got:`,
-        value
-      );
+      log.warn(`onLongClick requires an action reference starting with @, got:`, value);
       return;
     }
 

package/src/dom/applicators/layout.ts

@@ -104,11 +104,15 @@ export const layoutHandlers: Record<string, ApplicatorHandler> = {
   // Use .weight(1) to make element take remaining space in Row/Column
   weight: (el, value) => {
     el.style.flex = String(value);
+    // Mark element as having flex for CSS parent detection
+    el.dataset.hypenFlex = "true";
   },
 
   // flex: CSS flex shorthand (kept for CSS compatibility)
   flex: (el, value) => {
     el.style.flex = String(value);
+    // Mark element as having flex for CSS parent detection
+    el.dataset.hypenFlex = "true";
   },
 
   flexGrow: (el, value) => {

package/src/dom/applicators/size.ts

@@ -136,12 +136,13 @@ export const sizeHandlers: Record<string, ApplicatorHandler> = {
   },
 
   // Fill max width - stretch to fill parent width
+  // Note: This only stretches within parent's current width.
+  // For full-width behavior, parent Columns also need fillMaxWidth(true).
   fillMaxWidth: (el, value) => {
     if (value === false) return;
     const fraction = typeof value === "number" ? value : 1;
     if (fraction === 1) {
-      // For 100% width: use align-self stretch in Column (cross-axis)
-      // and width 100% as fallback for Row and other contexts
+      // Use align-self stretch to fill cross-axis in flex containers
       el.style.alignSelf = "stretch";
       el.style.width = "100%";
       el.style.minWidth = "0"; // Prevent flex item from overflowing
@@ -168,5 +169,9 @@ export const sizeHandlers: Record<string, ApplicatorHandler> = {
     const fraction = typeof value === "number" ? value : 1;
     el.style.width = `${fraction * 100}%`;
     el.style.height = `${fraction * 100}%`;
+    // Use align-self stretch to fill cross-axis in flex containers
+    // This is needed because parent might have alignItems: flex-start (wrap behavior)
+    el.style.alignSelf = "stretch";
+    el.style.minWidth = "0"; // Prevent flex item from overflowing
   },
 };

package/src/dom/components/center.ts

@@ -1,5 +1,9 @@
 /**
  * Center Component - Centers content
+ *
+ * Center expands to fill available space by default (matching iOS/Android behavior).
+ * This is because a Center that wraps to content can't meaningfully center anything.
+ * The expansion is constrained by parent's layout rules.
  */
 
 import type { ComponentHandler } from "./index.js";
@@ -10,6 +14,11 @@ export const centerHandler: ComponentHandler = {
     el.style.display = "flex";
     el.style.alignItems = "center";
     el.style.justifyContent = "center";
+    // Center expands to fill available space by default
+    // This matches iOS which has .frame(maxWidth: .infinity, maxHeight: .infinity)
+    el.style.width = "100%";
+    el.style.height = "100%";
+    el.style.alignSelf = "stretch"; // Needed for flex containers with alignItems: flex-start
     el.dataset.hypenType = "center";
     return el;
   },

package/src/dom/components/column.ts

@@ -2,7 +2,6 @@
  * Column Component - Vertical Stack
  *
  * Children wrap to content by default (matching Android/iOS behavior).
- * Column stretches to fill parent's width so children with fillMaxWidth work.
  * Use .fillMaxWidth() on children or .horizontalAlignment("stretch") to stretch.
  */
 
@@ -15,9 +14,6 @@ export const columnHandler: ComponentHandler = {
     el.style.flexDirection = "column";
     // Wrap children to content by default (match iOS/Android behavior)
     el.style.alignItems = "flex-start";
-    // Stretch to fill parent's width so children with fillMaxWidth can reference it
-    // This matches iOS/Android where Column expands to accommodate children that want to stretch
-    el.style.alignSelf = "stretch";
     el.dataset.hypenType = "column";
     return el;
   },

package/src/dom/components/grid.ts

@@ -1,11 +1,33 @@
 /**
  * Grid Component - CSS Grid Layout
+ *
+ * Grid items stretch to fill their cells by default (matching Android/iOS behavior).
  */
 
 import type { ComponentHandler } from "./index.js";
 
+// Inject global styles for grid children
+let gridStylesInjected = false;
+function ensureGridStyles(): void {
+  if (gridStylesInjected) return;
+  gridStylesInjected = true;
+
+  const style = document.createElement("style");
+  style.id = "hypen-grid-styles";
+  style.textContent = `
+    /* Grid children stretch to fill cells by default (matches Android behavior) */
+    [data-hypen-type="grid"] > * {
+      justify-self: stretch;
+      align-self: stretch;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
 export const gridHandler: ComponentHandler = {
   create(): HTMLElement {
+    ensureGridStyles();
+
     const el = document.createElement("div");
     el.style.display = "grid";
     el.dataset.hypenType = "grid";

package/src/dom/components/hypenapp.ts

@@ -15,6 +15,9 @@
 import type { ComponentHandler } from "./index.js";
 import { RemoteEngine } from "@hypen-space/core/remote/client";
 import type { Patch } from "@hypen-space/core/remote";
+import { frameworkLoggers } from "@hypen-space/core";
+
+const log = frameworkLoggers.remote;
 
 // Store active HypenApp instances for cleanup
 const activeInstances = new WeakMap<
@@ -38,7 +41,7 @@ export const hypenAppHandler: ComponentHandler = {
     const url = props["0"] || props.url;
 
     if (!url || typeof url !== "string") {
-      console.error("[HypenApp] URL is required");
+      log.error("HypenApp: URL is required");
       element.innerHTML = '<div style="color: red;">HypenApp: URL required</div>';
       return;
     }
@@ -80,20 +83,20 @@ export const hypenAppHandler: ComponentHandler = {
       .then(() => {
         // Clear loading state - patches will populate content
         element.innerHTML = "";
-        console.log(`[HypenApp] Connected to ${url}`);
+        log.debug(`HypenApp connected to ${url}`);
       })
       .catch((error) => {
         element.innerHTML = `<div style="color: red;">HypenApp: Connection failed - ${error.message}</div>`;
-        console.error("[HypenApp] Connection failed:", error);
+        log.error("HypenApp connection failed:", error);
       });
 
     // Handle disconnection
     engine.onDisconnect(() => {
-      console.log("[HypenApp] Disconnected");
+      log.debug("HypenApp disconnected");
     });
 
     engine.onError((error) => {
-      console.error("[HypenApp] Error:", error);
+      log.error("HypenApp error:", error);
     });
 
     // Cleanup on element removal
@@ -104,7 +107,7 @@ export const hypenAppHandler: ComponentHandler = {
             engine.disconnect();
             activeInstances.delete(element);
             observer.disconnect();
-            console.log("[HypenApp] Cleaned up");
+            log.debug("HypenApp cleaned up");
             return;
           }
         }
@@ -131,7 +134,7 @@ function applyPatches(
   for (const patch of patches) {
     switch (patch.type) {
       case "create": {
-        const el = createElement((patch as any).element_type, patch.props || {});
+        const el = createElement(patch.elementType!, patch.props || {});
         el.dataset.hypenId = patch.id!;
         (el as any).__hypenEngine = engine;
         nodes.set(patch.id!, el);
@@ -155,10 +158,10 @@ function applyPatches(
       }
 
       case "insert": {
-        const parentId = (patch as any).parent_id;
+        const parentId = patch.parentId;
         const parent = parentId === "root" ? container : nodes.get(parentId);
         const child = nodes.get(patch.id!);
-        const beforeId = (patch as any).before_id;
+        const beforeId = patch.beforeId;
 
         if (parent && child) {
           if (parentId === "root") {
@@ -180,10 +183,10 @@ function applyPatches(
       }
 
       case "move": {
-        const parentId = (patch as any).parent_id;
+        const parentId = patch.parentId;
         const parent = parentId === "root" ? container : nodes.get(parentId);
         const child = nodes.get(patch.id!);
-        const beforeId = (patch as any).before_id;
+        const beforeId = patch.beforeId;
 
         if (parent && child) {
           if (beforeId) {

package/src/dom/components/route.ts

@@ -4,6 +4,9 @@
  */
 
 import type { ComponentHandler } from "./index.js";
+import { frameworkLoggers } from "@hypen-space/core";
+
+const log = frameworkLoggers.router;
 
 export const routeHandler: ComponentHandler = {
   create(): HTMLElement {
@@ -31,7 +34,7 @@ export const routeHandler: ComponentHandler = {
       el.dataset.routeComponent = String(componentName);
     }
     
-    console.log(`🛣️ Route created: path="${path}", lazy=${isLazy}, component="${el.dataset.routeComponent || 'none'}"`);
+    log.debug(`Route created: path="${path}", lazy=${isLazy}, component="${el.dataset.routeComponent || 'none'}"`);
   },
 };
 

package/src/dom/components/row.ts

@@ -6,8 +6,28 @@
 
 import type { ComponentHandler } from "./index.js";
 
+// Inject global styles for Row with flex/weighted children
+let rowStylesInjected = false;
+function ensureRowStyles(): void {
+  if (rowStylesInjected) return;
+  rowStylesInjected = true;
+
+  const style = document.createElement("style");
+  style.id = "hypen-row-styles";
+  style.textContent = `
+    /* Row expands to fill width when it has children with flex/weight */
+    /* This matches iOS/Android behavior where weighted children cause parent to expand */
+    [data-hypen-type="row"]:has(> [data-hypen-flex]) {
+      width: 100%;
+    }
+  `;
+  document.head.appendChild(style);
+}
+
 export const rowHandler: ComponentHandler = {
   create(): HTMLElement {
+    ensureRowStyles();
+
     const el = document.createElement("div");
     el.style.display = "flex";
     el.style.flexDirection = "row";

package/src/dom/debug.ts

@@ -4,6 +4,10 @@
  * Provides heatmap overlays to visualize re-renders
  */
 
+import { frameworkLoggers } from "@hypen-space/core";
+
+const log = frameworkLoggers.debug;
+
 export interface DebugConfig {
   /** Enable debug mode */
   enabled: boolean;
@@ -57,7 +61,7 @@ export class RerenderTracker {
       return;
     }
 
-    console.log(`🔥 [Debug] Tracking re-render: ${id} - ${patchType}`);
+    log.debug(`Tracking re-render: ${id} - ${patchType}`);
 
     // Increment render count
     const currentCount = this.renderCounts.get(id) || 0;
@@ -78,7 +82,7 @@ export class RerenderTracker {
       this.config.maxOpacity
     );
 
-    console.log(`🔥 [Debug] Updating heatmap for ${id}, count: ${renderCount}, opacity: ${opacity}`);
+    log.debug(`Updating heatmap for ${id}, count: ${renderCount}, opacity: ${opacity}`);
 
     // For inline elements or text, use a simpler approach: background color + outline
     const isInline = window.getComputedStyle(element).display.includes('inline');

package/src/dom/events.ts

@@ -4,6 +4,10 @@
  * Handles DOM event binding and action dispatching
  */
 
+import { frameworkLoggers } from "@hypen-space/core";
+
+const log = frameworkLoggers.events;
+
 // Interface for the engine that EventManager needs
 interface IEngine {
   dispatchAction(name: string, payload?: any): void;
@@ -29,13 +33,13 @@ export class EventManager {
   attach(elementId: string, element: HTMLElement, eventName: string, actionName: string): void {
     // Convert onClick to click for DOM events
     const domEventName = eventName === "onClick" ? "click" : eventName;
-    console.log(`[EventManager] Attaching ${eventName} (DOM: ${domEventName}) to element ${elementId}, action: ${actionName}`);
+    log.debug(`Attaching ${eventName} (DOM: ${domEventName}) to element ${elementId}, action: ${actionName}`);
 
     // Create event listener that dispatches action
     const listener = (event: Event) => {
-      console.log(`🔥 [EventManager] Event fired: ${eventName} on ${elementId}, dispatching action: ${actionName}`);
-      console.log(`🔥 [EventManager] Event object:`, event);
-      console.log(`🔥 [EventManager] Element:`, element);
+      log.debug(`Event fired: ${eventName} on ${elementId}, dispatching action: ${actionName}`);
+      log.debug(`Event object:`, event);
+      log.debug(`Element:`, element);
 
       // Prevent default for certain events
       if (eventName === "submit" || (eventName === "click" && element.tagName === "A")) {
@@ -44,15 +48,15 @@ export class EventManager {
 
       // Extract event data
       const payload = this.extractEventData(event, element);
-      console.log(`🔥 [EventManager] Event payload:`, payload);
+      log.debug(`Event payload:`, payload);
 
       // Dispatch action to engine
-      console.log(`🔥 [EventManager] Calling engine.dispatchAction(${actionName})`);
+      log.debug(`Calling engine.dispatchAction(${actionName})`);
       try {
         this.engine.dispatchAction(actionName, payload);
-        console.log(`🔥 [EventManager] ✅ dispatchAction succeeded`);
+        log.debug(`dispatchAction succeeded`);
       } catch (error) {
-        console.error(`🔥 [EventManager] ❌ dispatchAction failed:`, error);
+        log.error(`dispatchAction failed:`, error);
       }
     };
 
@@ -66,18 +70,18 @@ export class EventManager {
 
     // Attach to DOM
     element.addEventListener(domEventName, listener);
-    console.log(`[EventManager] Listener attached to DOM for ${domEventName}`);
-    console.log(`[EventManager] Element details:`, {
+    log.debug(`Listener attached to DOM for ${domEventName}`);
+    log.debug(`Element details:`, {
       tagName: element.tagName,
       id: element.id,
       dataset: element.dataset,
       textContent: element.textContent?.substring(0, 50)
     });
-    
+
     // Test: Add a simple click listener to verify DOM events work
     if (domEventName === "click") {
       element.addEventListener("click", (e) => {
-        console.log(`🧪 [TEST] Raw DOM click detected on ${element.tagName}`, e);
+        log.debug(`Raw DOM click detected on ${element.tagName}`, e);
       });
     }
   }

package/src/dom/renderer.ts

@@ -8,6 +8,9 @@ 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 { frameworkLoggers } from "@hypen-space/core";
+
+const log = frameworkLoggers.renderer;
 import { ComponentRegistry } from "./components/index.js";
 import { ApplicatorRegistry } from "./applicators/index.js";
 import { canvasHandler, canvasApplicators } from "./canvas/index.js";
@@ -67,7 +70,7 @@ export class DOMRenderer {
    * Update state and interpolate text content
    */
   updateState(state: Record<string, any>): void {
-    console.log(`[Renderer] Updating state:`, state);
+    log.debug("Updating state:", state);
     this.currentState = state;
     this.interpolateAllText();
   }
@@ -77,7 +80,7 @@ export class DOMRenderer {
    */
   private mergeComponentState(componentState: Record<string, any>): void {
     this.currentState = { ...this.currentState, ...componentState };
-    console.log(`[Renderer] Merged state:`, this.currentState);
+    log.debug("Merged state:", this.currentState);
     this.interpolateAllText();
   }
 
@@ -124,7 +127,7 @@ export class DOMRenderer {
   private applyPatch(patch: Patch): void {
     switch (patch.type) {
       case "create":
-        this.onCreate(patch.id!, (patch as any).element_type!, patch.props || {});
+        this.onCreate(patch.id!, patch.elementType!, patch.props || {});
         break;
       case "setProp":
         this.onSetProp(patch.id!, patch.name!, patch.value);
@@ -133,10 +136,10 @@ export class DOMRenderer {
         this.onSetText(patch.id!, patch.text!);
         break;
       case "insert":
-        this.onInsert((patch as any).parent_id!, patch.id!, (patch as any).before_id);
+        this.onInsert(patch.parentId!, patch.id!, patch.beforeId);
         break;
       case "move":
-        this.onMove((patch as any).parent_id!, patch.id!, (patch as any).before_id);
+        this.onMove(patch.parentId!, patch.id!, patch.beforeId);
         break;
       case "remove":
         this.onRemove(patch.id!);
@@ -160,7 +163,7 @@ export class DOMRenderer {
       fallback.dataset.hypenType = elementType.toLowerCase();
       fallback.style.display = "contents"; // Make container transparent in layout
       element = fallback;
-      console.log(`[Renderer] Unknown component "${elementType}" - using transparent container`);
+      log.debug(`Unknown component "${elementType}" - using transparent container`);
     }
 
     element.dataset.hypenType = elementType.toLowerCase();
@@ -194,7 +197,7 @@ export class DOMRenderer {
       if (elementType === "input") {
         const inputEl = element as HTMLInputElement;
         inputEl.value = String(value);
-        console.log(`[Renderer] Updated input value: "${value}"`);
+        log.debug(`Updated input value: "${value}"`);
         return;
       }
 
@@ -217,7 +220,7 @@ export class DOMRenderer {
         // If current template isn't a template, keep it in sync.
         element.dataset.textTemplate = nextText;
       }
-      console.log(`[Renderer] Updated text content: "${value}"`);
+      log.debug(`Updated text content: "${value}"`);
       return;
     }
 
@@ -242,7 +245,7 @@ export class DOMRenderer {
     const parent = parentId === "root" ? this.container : this.nodes.get(parentId);
     const child = this.nodes.get(id);
 
-    console.log(`[Renderer] Inserting ${id} into ${parentId}`, {
+    log.debug(`Inserting ${id} into ${parentId}`, {
       parent: parent ? `${parent.tagName}#${parent.id || 'no-id'}` : 'null',
       child: child ? `${child.tagName}#${child.id || 'no-id'}` : 'null',
       childText: child?.textContent?.substring(0, 20)