@hypen-space/web 0.4.0 → 0.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypen-space/web",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Hypen web renderers - DOM and Canvas rendering for browsers",
   "type": "module",
   "main": "./dist/index.js",
@@ -55,7 +55,7 @@
     "clean": "rm -rf dist"
   },
   "dependencies": {
-    "@hypen-space/core": "^0.4.0"
+    "@hypen-space/core": "^0.4.2"
   },
   "devDependencies": {
     "@types/bun": "latest",

package/src/canvas/QUICKSTART.md

@@ -118,7 +118,7 @@ Column {
 // Horizontal layout
 Row {
   gap: 5
-  justifyContent: center
+  horizontalAlignment: center
   
   Text("Left")
   Text("Right")

package/src/canvas/README.md

@@ -89,8 +89,8 @@ Implements a flexbox-like layout system:
 
 **Supported Properties:**
 - `flexDirection`: "row" | "column"
-- `justifyContent`: "flex-start" | "center" | "flex-end" | "space-between" | "space-around"
-- `alignItems`: "flex-start" | "center" | "flex-end" | "stretch"
+- `verticalAlignment`: "start" | "center" | "end" | "space-between" | "space-around" (main axis for Column, cross axis for Row)
+- `horizontalAlignment`: "start" | "center" | "end" | "space-between" | "space-around" (cross axis for Column, main axis for Row)
 - `gap`: spacing between children
 - `padding`, `margin`: box spacing
 - `width`, `height`, `minWidth`, `maxWidth`, etc.

package/src/canvas/layout.ts

@@ -53,7 +53,11 @@ export function computeLayout(
   // Default sizing for specific component types
   const type = node.type.toLowerCase();
 
-  if (type === "spacer") {
+  if (type === "app") {
+    // App fills the full available space by default
+    if (width === null) width = availableAfterMargin.width;
+    if (height === null) height = availableAfterMargin.height;
+  } else if (type === "spacer") {
     // Spacer fills available space by default
     if (width === null) width = availableAfterMargin.width;
     if (height === null) height = availableAfterMargin.height;
@@ -169,11 +173,17 @@ function layoutChildren(ctx: CanvasRenderingContext2D, parent: VirtualNode): voi
   }
 
   const flexDirection = props.flexDirection || (parent.type === "column" ? "column" : "row");
-  const justifyContent = props.justifyContent || "flex-start";
-  const alignItems = props.alignItems || "flex-start";
+  const isColumn = flexDirection === "column";
+
+  // Resolve verticalAlignment/horizontalAlignment to main/cross axis based on direction
+  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 isColumn = flexDirection === "column";
   const availableWidth = layout.contentWidth;
   const availableHeight = layout.contentHeight;
 
@@ -345,8 +355,9 @@ function layoutStackChildren(ctx: CanvasRenderingContext2D, parent: VirtualNode)
   const layout = parent.layout!;
   const props = parent.props;
 
-  const alignItems = props.alignItems || "flex-start";
-  const justifyContent = props.justifyContent || "flex-start";
+  // Stack uses horizontalAlignment/verticalAlignment directly
+  const horizontalAlignment = props.horizontalAlignment || "flex-start";
+  const verticalAlignment = props.verticalAlignment || "flex-start";
 
   const availableWidth = layout.contentWidth;
   const availableHeight = layout.contentHeight;
@@ -370,16 +381,16 @@ function layoutStackChildren(ctx: CanvasRenderingContext2D, parent: VirtualNode)
     let y = 0;
 
     // Horizontal alignment
-    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;
     }
 
     // Vertical alignment
-    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;
     }
 

package/src/canvas/paint.ts

@@ -105,6 +105,7 @@ export function paintNode(ctx: CanvasRenderingContext2D, node: VirtualNode): voi
     case "link":
       paintLink(ctx, node);
       break;
+    case "app":
     case "container":
     case "box":
       paintContainer(ctx, node);

package/src/canvas/renderer.ts

@@ -6,7 +6,7 @@
 
 import type { Renderer } from "@hypen-space/core/renderer";
 import type { Patch } from "@hypen-space/core/types";
-import { frameworkLoggers } from "@hypen-space/core";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 
 const log = frameworkLoggers.canvas;
 

package/src/canvas/text.ts

@@ -6,7 +6,7 @@
 
 import type { FontStyle, TextMetrics, TextStyle } from "./types.js";
 import { createFontString } from "./utils.js";
-import { frameworkLoggers } from "@hypen-space/core";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 
 const log = frameworkLoggers.canvas;
 

package/src/dom/applicators/advanced-layout.ts

@@ -19,14 +19,6 @@ export const advancedLayoutHandlers: Record<string, ApplicatorHandler> = {
     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);
   },

package/src/dom/applicators/events.ts

@@ -12,7 +12,7 @@ import {
   disposableTimeout,
   type Disposable,
 } from "@hypen-space/core/disposable";
-import { frameworkLoggers } from "@hypen-space/core";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 import {
   type IEngine,
   getEngine,
@@ -483,6 +483,7 @@ export const eventHandlers: Record<string, ApplicatorHandler> = {
 
   // Long click/press
   onLongClick: createLongClickHandler(500),
+  onLongPress: createLongClickHandler(500), // Alias for mobile-style naming
 
   // Focus events
   onFocus: createEventHandler("focus", { extractPayload: focusPayload }),

package/src/dom/components/app.ts

@@ -0,0 +1,20 @@
+/**
+ * App Component - Root application container
+ *
+ * Full-screen vertical flex container. This is the default root component
+ * created by `hypen init` and referenced in docs/examples.
+ */
+
+import type { ComponentHandler } from "./index.js";
+
+export const appHandler: ComponentHandler = {
+  create(): HTMLElement {
+    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;
+  },
+};

package/src/dom/components/hypenapp.ts

@@ -15,7 +15,7 @@
 import type { ComponentHandler } from "./index.js";
 import { RemoteEngine } from "@hypen-space/core/remote/client";
 import type { Patch } from "@hypen-space/core/types";
-import { frameworkLoggers } from "@hypen-space/core";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 
 const log = frameworkLoggers.remote;
 
@@ -311,8 +311,6 @@ function applyProp(el: HTMLElement, name: string, value: any): void {
     border: "border",
     gap: "gap",
     flex: "flex",
-    alignItems: "alignItems",
-    justifyContent: "justifyContent",
     opacity: "opacity",
     overflow: "overflow",
   };

package/src/dom/components/index.ts

@@ -27,6 +27,7 @@ export class ComponentRegistry {
    * Get handler for a component type
    */
   get(type: string): ComponentHandler | undefined {
+    if (!type) return undefined;
     return this.handlers.get(type.toLowerCase());
   }
 
@@ -34,6 +35,7 @@ export class ComponentRegistry {
    * Create element for a component type
    */
   createElement(type: string, props: Record<string, any> = {}): HTMLElement | null {
+    if (!type) return null;
     const handler = this.get(type);
     if (!handler) return null;
 
@@ -80,7 +82,9 @@ export class ComponentRegistry {
     const { routerHandler } = require("./router.js");
     const { routeHandler } = require("./route.js");
     const { hypenAppHandler } = require("./hypenapp.js");
+    const { appHandler } = require("./app.js");
 
+    this.register("app", appHandler);
     this.register("column", columnHandler);
     this.register("row", rowHandler);
     this.register("text", textHandler);

package/src/dom/components/route.ts

@@ -4,7 +4,7 @@
  */
 
 import type { ComponentHandler } from "./index.js";
-import { frameworkLoggers } from "@hypen-space/core";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 
 const log = frameworkLoggers.router;
 

package/src/dom/debug.ts

@@ -4,7 +4,7 @@
  * Provides heatmap overlays to visualize re-renders
  */
 
-import { frameworkLoggers } from "@hypen-space/core";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 
 const log = frameworkLoggers.debug;
 

package/src/dom/events.ts

@@ -4,7 +4,7 @@
  * Handles DOM event binding and action dispatching
  */
 
-import { frameworkLoggers } from "@hypen-space/core";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 
 const log = frameworkLoggers.events;
 

package/src/dom/renderer.ts

@@ -8,7 +8,7 @@ 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";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 
 const log = frameworkLoggers.renderer;
 import { ComponentRegistry } from "./components/index.js";
@@ -123,26 +123,38 @@ export class DOMRenderer {
 
   /**
    * Apply a single patch
+   *
+   * Handles both camelCase (direct WASM) and snake_case (WebSocket JSON) field names.
    */
   private applyPatch(patch: Patch): void {
+    // Normalize: accept both camelCase and snake_case field names.
+    // WASM serde outputs camelCase, but patches forwarded via JSON over WebSocket
+    // may arrive with snake_case depending on the serialization path.
+    const p = patch as any;
+    const id: string | undefined = patch.id ?? p.id;
+    const elementType: string | undefined = patch.elementType ?? p.element_type;
+    const parentId: string | undefined = patch.parentId ?? p.parent_id;
+    const beforeId: string | undefined = patch.beforeId ?? p.before_id;
+    const eventName: string | undefined = 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;
     }
   }

package/src/hypen.ts

@@ -11,7 +11,7 @@ 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 { frameworkLoggers, setDebugMode } from "@hypen-space/core/logger";
 import { DOMRenderer } from "./dom/renderer.js";
 import type { DebugConfig } from "./dom/debug.js";