@hypen-space/web 0.4.1 → 0.4.3

package/dist/canvas/text.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Text Rendering System
+ *
+ * Text measurement, wrapping, and rendering
+ */
+import type { FontStyle, TextMetrics, TextStyle } from "./types.js";
+/**
+ * Measure text dimensions
+ */
+export declare function measureText(ctx: CanvasRenderingContext2D, text: string, fontStyle: FontStyle, maxWidth?: number): TextMetrics;
+/**
+ * Render text with style
+ */
+export declare function renderText(ctx: CanvasRenderingContext2D, text: string, x: number, y: number, width: number, height: number, style: TextStyle): void;
+/**
+ * Clear text metrics cache
+ */
+export declare function clearTextCache(): void;
+/**
+ * Preload font to ensure it's available
+ */
+export declare function loadFont(fontFamily: string, fontWeight?: string | number): Promise<void>;

package/dist/canvas/text.js

@@ -151,7 +151,7 @@ function getAbsoluteBounds(node) {
 }
 
 // src/canvas/text.ts
-import { frameworkLoggers } from "@hypen-space/core";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 var log = frameworkLoggers.canvas;
 var textMetricsCache = new Map;
 function getCacheKey(text, fontStyle, maxWidth) {
@@ -262,4 +262,4 @@ export {
   clearTextCache
 };
 
-//# debugId=3230AB00A2D208E764756E2164756E21
+//# debugId=C3D9BC7EE728E43964756E2164756E21

package/dist/canvas/text.js.map

@@ -3,9 +3,9 @@
   "sources": ["../src/canvas/utils.ts", "../src/canvas/text.ts"],
   "sourcesContent": [
     "/**\n * Canvas Renderer Utilities\n *\n * Common utility functions\n */\n\nimport type { BoxSpacing, Rectangle, Point, VirtualNode } from \"./types.js\";\n\n/**\n * Parse spacing value (margin, padding)\n * Supports: number, \"10\", \"10 20\", \"10 20 30 40\"\n */\nexport function parseSpacing(value: any): BoxSpacing {\n  if (typeof value === \"number\") {\n    return { top: value, right: value, bottom: value, left: value };\n  }\n\n  if (typeof value === \"string\") {\n    const parts = value.split(/\\s+/).map((v) => parseFloat(v) || 0);\n    if (parts.length === 1) {\n      return { top: parts[0], right: parts[0], bottom: parts[0], left: parts[0] };\n    }\n    if (parts.length === 2) {\n      return { top: parts[0], right: parts[1], bottom: parts[0], left: parts[1] };\n    }\n    if (parts.length === 4) {\n      return { top: parts[0], right: parts[1], bottom: parts[2], left: parts[3] };\n    }\n  }\n\n  if (typeof value === \"object\" && value !== null) {\n    return {\n      top: parseFloat(value.top) || 0,\n      right: parseFloat(value.right) || 0,\n      bottom: parseFloat(value.bottom) || 0,\n      left: parseFloat(value.left) || 0,\n    };\n  }\n\n  return { top: 0, right: 0, bottom: 0, left: 0 };\n}\n\n/**\n * Parse size value (width, height)\n * Returns pixel value or null for \"auto\"\n */\nexport function parseSize(value: any): number | null {\n  if (typeof value === \"number\") return value;\n  if (typeof value === \"string\") {\n    if (value === \"auto\") return null;\n    const num = parseFloat(value);\n    return isNaN(num) ? null : num;\n  }\n  return null;\n}\n\n/**\n * Check if point is inside rectangle\n */\nexport function isPointInRect(point: Point, rect: Rectangle): boolean {\n  return (\n    point.x >= rect.x &&\n    point.x <= rect.x + rect.width &&\n    point.y >= rect.y &&\n    point.y <= rect.y + rect.height\n  );\n}\n\n/**\n * Check if point is inside rounded rectangle\n */\nexport function isPointInRoundedRect(\n  point: Point,\n  rect: Rectangle,\n  radius: number\n): boolean {\n  const { x, y, width, height } = rect;\n\n  // Quick reject if outside bounding box\n  if (!isPointInRect(point, rect)) return false;\n\n  // No radius means simple rectangle\n  if (radius <= 0) return true;\n\n  const px = point.x;\n  const py = point.y;\n\n  // Check corners\n  // Top-left\n  if (px < x + radius && py < y + radius) {\n    return Math.pow(px - (x + radius), 2) + Math.pow(py - (y + radius), 2) <= Math.pow(radius, 2);\n  }\n\n  // Top-right\n  if (px > x + width - radius && py < y + radius) {\n    return (\n      Math.pow(px - (x + width - radius), 2) + Math.pow(py - (y + radius), 2) <=\n      Math.pow(radius, 2)\n    );\n  }\n\n  // Bottom-left\n  if (px < x + radius && py > y + height - radius) {\n    return (\n      Math.pow(px - (x + radius), 2) + Math.pow(py - (y + height - radius), 2) <=\n      Math.pow(radius, 2)\n    );\n  }\n\n  // Bottom-right\n  if (px > x + width - radius && py > y + height - radius) {\n    return (\n      Math.pow(px - (x + width - radius), 2) + Math.pow(py - (y + height - radius), 2) <=\n      Math.pow(radius, 2)\n    );\n  }\n\n  // Inside rectangle\n  return true;\n}\n\n/**\n * Merge rectangles into bounding box\n */\nexport function mergeRects(rects: Rectangle[]): Rectangle | null {\n  if (rects.length === 0) return null;\n  if (rects.length === 1) return rects[0];\n\n  let minX = Infinity;\n  let minY = Infinity;\n  let maxX = -Infinity;\n  let maxY = -Infinity;\n\n  for (const rect of rects) {\n    minX = Math.min(minX, rect.x);\n    minY = Math.min(minY, rect.y);\n    maxX = Math.max(maxX, rect.x + rect.width);\n    maxY = Math.max(maxY, rect.y + rect.height);\n  }\n\n  return {\n    x: minX,\n    y: minY,\n    width: maxX - minX,\n    height: maxY - minY,\n  };\n}\n\n/**\n * Create a canvas font string from font style\n */\nexport function createFontString(\n  fontSize: number,\n  fontWeight: string | number,\n  fontFamily: string\n): string {\n  return `${fontWeight} ${fontSize}px ${fontFamily}`;\n}\n\n/**\n * Walk tree depth-first\n */\nexport function walkTree(node: VirtualNode, callback: (node: VirtualNode) => void): void {\n  callback(node);\n  for (const child of node.children) {\n    walkTree(child, callback);\n  }\n}\n\n/**\n * Find node by ID in tree\n */\nexport function findNodeById(root: VirtualNode, id: string): VirtualNode | null {\n  if (root.id === id) return root;\n\n  for (const child of root.children) {\n    const found = findNodeById(child, id);\n    if (found) return found;\n  }\n\n  return null;\n}\n\n/**\n * Get absolute bounds of node (including transformations)\n */\nexport function getAbsoluteBounds(node: VirtualNode): Rectangle | null {\n  if (!node.layout) return null;\n\n  let x = node.layout.x;\n  let y = node.layout.y;\n\n  // Walk up tree to accumulate offsets\n  let current = node.parent;\n  while (current && current.layout) {\n    x += current.layout.contentX;\n    y += current.layout.contentY;\n    current = current.parent;\n  }\n\n  return {\n    x,\n    y,\n    width: node.layout.width,\n    height: node.layout.height,\n  };\n}\n\n\n\n\n\n\n\n\n\n\n\n",
-    "/**\n * Text Rendering System\n *\n * Text measurement, wrapping, and rendering\n */\n\nimport type { FontStyle, TextMetrics, TextStyle } from \"./types.js\";\nimport { createFontString } from \"./utils.js\";\nimport { frameworkLoggers } from \"@hypen-space/core\";\n\nconst log = frameworkLoggers.canvas;\n\n/**\n * Text metrics cache\n */\nconst textMetricsCache = new Map<string, TextMetrics>();\n\n/**\n * Get cache key for text metrics\n */\nfunction getCacheKey(text: string, fontStyle: FontStyle, maxWidth?: number): string {\n  return `${text}|${fontStyle.fontSize}|${fontStyle.fontWeight}|${fontStyle.fontFamily}|${maxWidth || \"auto\"}`;\n}\n\n/**\n * Measure text dimensions\n */\nexport function measureText(\n  ctx: CanvasRenderingContext2D,\n  text: string,\n  fontStyle: FontStyle,\n  maxWidth?: number\n): TextMetrics {\n  const cacheKey = getCacheKey(text, fontStyle, maxWidth);\n  const cached = textMetricsCache.get(cacheKey);\n  if (cached) return cached;\n\n  const font = createFontString(fontStyle.fontSize, fontStyle.fontWeight, fontStyle.fontFamily);\n  ctx.save();\n  ctx.font = font;\n\n  const lineHeight = fontStyle.lineHeight || fontStyle.fontSize * 1.2;\n\n  // No wrapping needed\n  if (!maxWidth) {\n    const metrics = ctx.measureText(text);\n    const result: TextMetrics = {\n      width: metrics.width,\n      height: lineHeight,\n      lines: [text],\n      lineHeight,\n    };\n    ctx.restore();\n    textMetricsCache.set(cacheKey, result);\n    return result;\n  }\n\n  // Wrap text\n  const lines = wrapText(ctx, text, maxWidth);\n  const width = Math.max(...lines.map((line) => ctx.measureText(line).width));\n  const height = lines.length * lineHeight;\n\n  const result: TextMetrics = {\n    width,\n    height,\n    lines,\n    lineHeight,\n  };\n\n  ctx.restore();\n  textMetricsCache.set(cacheKey, result);\n  return result;\n}\n\n/**\n * Wrap text to fit within maxWidth\n */\nfunction wrapText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string[] {\n  const lines: string[] = [];\n  const paragraphs = text.split(\"\\n\");\n\n  for (const paragraph of paragraphs) {\n    const words = paragraph.split(\" \");\n    let currentLine = \"\";\n\n    for (const word of words) {\n      const testLine = currentLine ? `${currentLine} ${word}` : word;\n      const metrics = ctx.measureText(testLine);\n\n      if (metrics.width > maxWidth && currentLine) {\n        lines.push(currentLine);\n        currentLine = word;\n      } else {\n        currentLine = testLine;\n      }\n    }\n\n    if (currentLine) {\n      lines.push(currentLine);\n    }\n  }\n\n  return lines.length > 0 ? lines : [\"\"];\n}\n\n/**\n * Render text with style\n */\nexport function renderText(\n  ctx: CanvasRenderingContext2D,\n  text: string,\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n  style: TextStyle\n): void {\n  const font = createFontString(style.fontSize, style.fontWeight, style.fontFamily);\n  ctx.save();\n  ctx.font = font;\n  ctx.fillStyle = style.color;\n  ctx.textBaseline = \"top\";\n\n  const metrics = measureText(ctx, text, style, width);\n\n  // Calculate starting Y based on vertical alignment\n  let startY = y;\n  if (style.verticalAlign === \"middle\") {\n    startY = y + (height - metrics.height) / 2;\n  } else if (style.verticalAlign === \"bottom\") {\n    startY = y + height - metrics.height;\n  }\n\n  // Render each line\n  for (let i = 0; i < metrics.lines.length; i++) {\n    const line = metrics.lines[i];\n    const lineY = startY + i * metrics.lineHeight;\n\n    // Calculate X based on text alignment\n    let lineX = x;\n    if (style.textAlign === \"center\") {\n      const lineWidth = ctx.measureText(line).width;\n      lineX = x + (width - lineWidth) / 2;\n    } else if (style.textAlign === \"right\") {\n      const lineWidth = ctx.measureText(line).width;\n      lineX = x + width - lineWidth;\n    }\n\n    ctx.fillText(line, lineX, lineY);\n  }\n\n  ctx.restore();\n}\n\n/**\n * Clear text metrics cache\n */\nexport function clearTextCache(): void {\n  textMetricsCache.clear();\n}\n\n/**\n * Preload font to ensure it's available\n */\nexport async function loadFont(fontFamily: string, fontWeight: string | number = \"normal\"): Promise<void> {\n  if (!(\"fonts\" in document)) return;\n\n  const font = `${fontWeight} 16px ${fontFamily}`;\n  try {\n    await document.fonts.load(font);\n  } catch (error) {\n    log.warn(`Failed to load font: ${font}`, error);\n  }\n}\n\n\n\n\n\n\n\n\n\n\n\n"
+    "/**\n * Text Rendering System\n *\n * Text measurement, wrapping, and rendering\n */\n\nimport type { FontStyle, TextMetrics, TextStyle } from \"./types.js\";\nimport { createFontString } from \"./utils.js\";\nimport { frameworkLoggers } from \"@hypen-space/core/logger\";\n\nconst log = frameworkLoggers.canvas;\n\n/**\n * Text metrics cache\n */\nconst textMetricsCache = new Map<string, TextMetrics>();\n\n/**\n * Get cache key for text metrics\n */\nfunction getCacheKey(text: string, fontStyle: FontStyle, maxWidth?: number): string {\n  return `${text}|${fontStyle.fontSize}|${fontStyle.fontWeight}|${fontStyle.fontFamily}|${maxWidth || \"auto\"}`;\n}\n\n/**\n * Measure text dimensions\n */\nexport function measureText(\n  ctx: CanvasRenderingContext2D,\n  text: string,\n  fontStyle: FontStyle,\n  maxWidth?: number\n): TextMetrics {\n  const cacheKey = getCacheKey(text, fontStyle, maxWidth);\n  const cached = textMetricsCache.get(cacheKey);\n  if (cached) return cached;\n\n  const font = createFontString(fontStyle.fontSize, fontStyle.fontWeight, fontStyle.fontFamily);\n  ctx.save();\n  ctx.font = font;\n\n  const lineHeight = fontStyle.lineHeight || fontStyle.fontSize * 1.2;\n\n  // No wrapping needed\n  if (!maxWidth) {\n    const metrics = ctx.measureText(text);\n    const result: TextMetrics = {\n      width: metrics.width,\n      height: lineHeight,\n      lines: [text],\n      lineHeight,\n    };\n    ctx.restore();\n    textMetricsCache.set(cacheKey, result);\n    return result;\n  }\n\n  // Wrap text\n  const lines = wrapText(ctx, text, maxWidth);\n  const width = Math.max(...lines.map((line) => ctx.measureText(line).width));\n  const height = lines.length * lineHeight;\n\n  const result: TextMetrics = {\n    width,\n    height,\n    lines,\n    lineHeight,\n  };\n\n  ctx.restore();\n  textMetricsCache.set(cacheKey, result);\n  return result;\n}\n\n/**\n * Wrap text to fit within maxWidth\n */\nfunction wrapText(ctx: CanvasRenderingContext2D, text: string, maxWidth: number): string[] {\n  const lines: string[] = [];\n  const paragraphs = text.split(\"\\n\");\n\n  for (const paragraph of paragraphs) {\n    const words = paragraph.split(\" \");\n    let currentLine = \"\";\n\n    for (const word of words) {\n      const testLine = currentLine ? `${currentLine} ${word}` : word;\n      const metrics = ctx.measureText(testLine);\n\n      if (metrics.width > maxWidth && currentLine) {\n        lines.push(currentLine);\n        currentLine = word;\n      } else {\n        currentLine = testLine;\n      }\n    }\n\n    if (currentLine) {\n      lines.push(currentLine);\n    }\n  }\n\n  return lines.length > 0 ? lines : [\"\"];\n}\n\n/**\n * Render text with style\n */\nexport function renderText(\n  ctx: CanvasRenderingContext2D,\n  text: string,\n  x: number,\n  y: number,\n  width: number,\n  height: number,\n  style: TextStyle\n): void {\n  const font = createFontString(style.fontSize, style.fontWeight, style.fontFamily);\n  ctx.save();\n  ctx.font = font;\n  ctx.fillStyle = style.color;\n  ctx.textBaseline = \"top\";\n\n  const metrics = measureText(ctx, text, style, width);\n\n  // Calculate starting Y based on vertical alignment\n  let startY = y;\n  if (style.verticalAlign === \"middle\") {\n    startY = y + (height - metrics.height) / 2;\n  } else if (style.verticalAlign === \"bottom\") {\n    startY = y + height - metrics.height;\n  }\n\n  // Render each line\n  for (let i = 0; i < metrics.lines.length; i++) {\n    const line = metrics.lines[i];\n    const lineY = startY + i * metrics.lineHeight;\n\n    // Calculate X based on text alignment\n    let lineX = x;\n    if (style.textAlign === \"center\") {\n      const lineWidth = ctx.measureText(line).width;\n      lineX = x + (width - lineWidth) / 2;\n    } else if (style.textAlign === \"right\") {\n      const lineWidth = ctx.measureText(line).width;\n      lineX = x + width - lineWidth;\n    }\n\n    ctx.fillText(line, lineX, lineY);\n  }\n\n  ctx.restore();\n}\n\n/**\n * Clear text metrics cache\n */\nexport function clearTextCache(): void {\n  textMetricsCache.clear();\n}\n\n/**\n * Preload font to ensure it's available\n */\nexport async function loadFont(fontFamily: string, fontWeight: string | number = \"normal\"): Promise<void> {\n  if (!(\"fonts\" in document)) return;\n\n  const font = `${fontWeight} 16px ${fontFamily}`;\n  try {\n    await document.fonts.load(font);\n  } catch (error) {\n    log.warn(`Failed to load font: ${font}`, error);\n  }\n}\n\n\n\n\n\n\n\n\n\n\n\n"
   ],
   "mappings": "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",
-  "debugId": "3230AB00A2D208E764756E2164756E21",
+  "debugId": "C3D9BC7EE728E43964756E2164756E21",
   "names": []
 }

package/dist/canvas/types.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Canvas Renderer Types
+ *
+ * Shared type definitions for the canvas renderer
+ */
+export interface VirtualNode {
+    id: string;
+    type: string;
+    props: Record<string, any>;
+    children: VirtualNode[];
+    parent: VirtualNode | null;
+    layout?: Layout;
+    visible: boolean;
+    opacity: number;
+    clickable: boolean;
+    hoverable: boolean;
+    focusable: boolean;
+    focused: boolean;
+    hovered: boolean;
+}
+export interface Layout {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+    margin: BoxSpacing;
+    padding: BoxSpacing;
+    border: BorderStyle;
+    contentX: number;
+    contentY: number;
+    contentWidth: number;
+    contentHeight: number;
+}
+export interface BoxSpacing {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+}
+export interface BorderStyle {
+    width: number;
+    color: string;
+    radius: number;
+}
+export interface Rectangle {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface FontStyle {
+    fontFamily: string;
+    fontSize: number;
+    fontWeight: string | number;
+    lineHeight?: number;
+}
+export interface TextStyle extends FontStyle {
+    color: string;
+    textAlign: "left" | "center" | "right";
+    verticalAlign: "top" | "middle" | "bottom";
+}
+export interface TextMetrics {
+    width: number;
+    height: number;
+    lines: string[];
+    lineHeight: number;
+}
+export interface CanvasRendererOptions {
+    devicePixelRatio?: number;
+    backgroundColor?: string;
+    enableAccessibility?: boolean;
+    enableHitTesting?: boolean;
+    enableInputOverlay?: boolean;
+    enableDirtyRects?: boolean;
+    enableLayerCaching?: boolean;
+    maxLayerCacheSize?: number;
+    showLayoutBounds?: boolean;
+    showDirtyRects?: boolean;
+    logPerformance?: boolean;
+}
+export interface PainterFunction {
+    (ctx: CanvasRenderingContext2D, node: VirtualNode): void;
+}
+export interface LayoutFunction {
+    (node: VirtualNode, availableWidth: number, availableHeight: number): {
+        width: number;
+        height: number;
+    };
+}
+export interface DirtyRect extends Rectangle {
+    frameId: number;
+}

package/dist/canvas/utils.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Canvas Renderer Utilities
+ *
+ * Common utility functions
+ */
+import type { BoxSpacing, Rectangle, Point, VirtualNode } from "./types.js";
+/**
+ * Parse spacing value (margin, padding)
+ * Supports: number, "10", "10 20", "10 20 30 40"
+ */
+export declare function parseSpacing(value: any): BoxSpacing;
+/**
+ * Parse size value (width, height)
+ * Returns pixel value or null for "auto"
+ */
+export declare function parseSize(value: any): number | null;
+/**
+ * Check if point is inside rectangle
+ */
+export declare function isPointInRect(point: Point, rect: Rectangle): boolean;
+/**
+ * Check if point is inside rounded rectangle
+ */
+export declare function isPointInRoundedRect(point: Point, rect: Rectangle, radius: number): boolean;
+/**
+ * Merge rectangles into bounding box
+ */
+export declare function mergeRects(rects: Rectangle[]): Rectangle | null;
+/**
+ * Create a canvas font string from font style
+ */
+export declare function createFontString(fontSize: number, fontWeight: string | number, fontFamily: string): string;
+/**
+ * Walk tree depth-first
+ */
+export declare function walkTree(node: VirtualNode, callback: (node: VirtualNode) => void): void;
+/**
+ * Find node by ID in tree
+ */
+export declare function findNodeById(root: VirtualNode, id: string): VirtualNode | null;
+/**
+ * Get absolute bounds of node (including transformations)
+ */
+export declare function getAbsoluteBounds(node: VirtualNode): Rectangle | null;

package/dist/client.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @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/dist/client.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,6 +2347,7 @@ 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 }),
@@ -2584,12 +2609,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 +3146,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 +3309,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 {
@@ -3363,24 +3382,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;
     }
   }
@@ -3517,7 +3542,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 as frameworkLoggers6, setDebugMode } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers6, setDebugMode } from "@hypen-space/core/logger";
 var log6 = frameworkLoggers6.hypen;
 
 class Hypen {
@@ -3816,4 +3841,4 @@ export {
   Hypen
 };
 
-//# debugId=2F6AEA497E33207F64756E2164756E21
+//# debugId=12790505428577C564756E2164756E21