@hypen-space/web 0.3.12 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypen-space/web",
-  "version": "0.3.12",
+  "version": "0.4.1",
   "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.1"
   },
   "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

@@ -4,8 +4,9 @@
  * Main renderer class that orchestrates layout, painting, and events
  */
 
-import type { Renderer, Patch } from "@hypen-space/core";
-import { frameworkLoggers } 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/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/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/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

@@ -14,8 +14,8 @@
 
 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";
+import type { Patch } from "@hypen-space/core/types";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 
 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;
@@ -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

@@ -80,7 +80,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

@@ -4,11 +4,11 @@
  * 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 { frameworkLoggers } 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/logger";
 
 const log = frameworkLoggers.renderer;
 import { ComponentRegistry } from "./components/index.js";

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/logger";
 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";