@hypen-space/web 0.4.2 → 0.4.5

package/dist/dom/canvas/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Canvas Component with Applicators
+ *
+ * Special handling for canvas rendering
+ */
+import type { ComponentHandler } from "../components/index.js";
+import type { ApplicatorHandler } from "../applicators/index.js";
+export declare const canvasHandler: ComponentHandler;
+/**
+ * Canvas applicators - special drawing commands
+ */
+export declare const canvasApplicators: Record<string, ApplicatorHandler>;

package/dist/dom/components/app.d.ts

@@ -0,0 +1,8 @@
+/**
+ * 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 declare const appHandler: ComponentHandler;

package/dist/dom/components/app.js

@@ -0,0 +1,55 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __moduleCache = /* @__PURE__ */ new WeakMap;
+var __toCommonJS = (from) => {
+  var entry = __moduleCache.get(from), desc;
+  if (entry)
+    return entry;
+  entry = __defProp({}, "__esModule", { value: true });
+  if (from && typeof from === "object" || typeof from === "function")
+    __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    }));
+  __moduleCache.set(from, entry);
+  return entry;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, {
+      get: all[name],
+      enumerable: true,
+      configurable: true,
+      set: (newValue) => all[name] = () => newValue
+    });
+};
+var __esm = (fn, res) => () => (fn && (res = fn(fn = 0)), res);
+
+// 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;
+    }
+  };
+});
+init_app();
+
+export {
+  appHandler
+};
+
+//# debugId=431193B137CDB06A64756E2164756E21

package/dist/dom/components/app.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/dom/components/app.ts"],
+  "sourcesContent": [
+    "/**\n * App Component - Root application container\n *\n * Full-screen vertical flex container. This is the default root component\n * created by `hypen init` and referenced in docs/examples.\n */\n\nimport type { ComponentHandler } from \"./index.js\";\n\nexport const appHandler: ComponentHandler = {\n  create(): HTMLElement {\n    const el = document.createElement(\"div\");\n    el.style.display = \"flex\";\n    el.style.flexDirection = \"column\";\n    el.style.minHeight = \"100vh\";\n    el.style.width = \"100%\";\n    el.dataset.hypenType = \"app\";\n    return el;\n  },\n};\n"
+  ],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IASa;AAAA;AAAA,eAA+B;AAAA,IAC1C,MAAM,GAAgB;AAAA,MACpB,MAAM,KAAK,SAAS,cAAc,KAAK;AAAA,MACvC,GAAG,MAAM,UAAU;AAAA,MACnB,GAAG,MAAM,gBAAgB;AAAA,MACzB,GAAG,MAAM,YAAY;AAAA,MACrB,GAAG,MAAM,QAAQ;AAAA,MACjB,GAAG,QAAQ,YAAY;AAAA,MACvB,OAAO;AAAA;AAAA,EAEX;AAAA;",
+  "debugId": "431193B137CDB06A64756E2164756E21",
+  "names": []
+}

package/dist/dom/components/audio.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Audio Component
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const audioHandler: ComponentHandler;

package/dist/dom/components/avatar.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Avatar Component
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const avatarHandler: ComponentHandler;

package/dist/dom/components/badge.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Badge Component
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const badgeHandler: ComponentHandler;

package/dist/dom/components/button.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Button Component
+ *
+ * Renders as a flex container. Children align to start by default (matching iOS).
+ * Use .horizontalAlignment("center") to center content.
+ * Reset default HTML button styles for cross-platform consistency.
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const buttonHandler: ComponentHandler;

package/dist/dom/components/card.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Card Component - Container with default styling
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const cardHandler: ComponentHandler;

package/dist/dom/components/center.d.ts

@@ -0,0 +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";
+export declare const centerHandler: ComponentHandler;

package/dist/dom/components/checkbox.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Checkbox Component
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const checkboxHandler: ComponentHandler;

package/dist/dom/components/column.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Column Component - Vertical Stack
+ *
+ * Children wrap to content by default (matching Android/iOS behavior).
+ * Use .fillMaxWidth() on children or .horizontalAlignment("stretch") to stretch.
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const columnHandler: ComponentHandler;

package/dist/dom/components/container.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Container/Box Component
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const containerHandler: ComponentHandler;

package/dist/dom/components/divider.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Divider Component - Visual separator
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const dividerHandler: ComponentHandler;

package/dist/dom/components/grid.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Grid Component - CSS Grid Layout
+ *
+ * Grid items stretch to fill their cells by default (matching Android/iOS behavior).
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const gridHandler: ComponentHandler;

package/dist/dom/components/heading.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Heading Component - Semantic headings (h1-h6)
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const headingHandler: ComponentHandler;

package/dist/dom/components/hypenapp.d.ts

@@ -0,0 +1,19 @@
+/**
+ * HypenApp Component
+ *
+ * Embeds a remote Hypen app via WebSocket
+ *
+ * Usage in Hypen DSL:
+ * ```hypen
+ * HypenApp("ws://localhost:3000")
+ *
+ * // Or with named prop:
+ * HypenApp(url: "ws://localhost:3000")
+ * ```
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const hypenAppHandler: ComponentHandler;
+/**
+ * Disconnect a HypenApp instance
+ */
+export declare function disconnectHypenApp(element: HTMLElement): void;

package/dist/dom/components/hypenapp.js

@@ -34,7 +34,7 @@ __export(exports_hypenapp, {
   disconnectHypenApp: () => disconnectHypenApp
 });
 import { RemoteEngine } from "@hypen-space/core/remote/client";
-import { frameworkLoggers } from "@hypen-space/core";
+import { frameworkLoggers } from "@hypen-space/core/logger";
 function applyPatches(container, nodes, patches, engine, onRoot) {
   for (const patch of patches) {
     switch (patch.type) {
@@ -190,8 +190,6 @@ function applyProp(el, name, value) {
     border: "border",
     gap: "gap",
     flex: "flex",
-    alignItems: "alignItems",
-    justifyContent: "justifyContent",
     opacity: "opacity",
     overflow: "overflow"
   };
@@ -295,4 +293,4 @@ export {
   disconnectHypenApp
 };
 
-//# debugId=7ED34EBF06ECAF2F64756E2164756E21
+//# debugId=6CC26A230E0A0AED64756E2164756E21

package/dist/dom/components/hypenapp.js.map

@@ -2,9 +2,9 @@
   "version": 3,
   "sources": ["../src/dom/components/hypenapp.ts"],
   "sourcesContent": [
-    "/**\n * HypenApp Component\n *\n * Embeds a remote Hypen app via WebSocket\n *\n * Usage in Hypen DSL:\n * ```hypen\n * HypenApp(\"ws://localhost:3000\")\n *\n * // Or with named prop:\n * HypenApp(url: \"ws://localhost:3000\")\n * ```\n */\n\nimport type { ComponentHandler } from \"./index.js\";\nimport { RemoteEngine } from \"@hypen-space/core/remote/client\";\nimport type { Patch } from \"@hypen-space/core/types\";\nimport { frameworkLoggers } from \"@hypen-space/core\";\n\nconst log = frameworkLoggers.remote;\n\n// Store active HypenApp instances for cleanup\nconst activeInstances = new WeakMap<\n  HTMLElement,\n  {\n    engine: RemoteEngine;\n    nodes: Map<string, HTMLElement>;\n  }\n>();\n\nexport const hypenAppHandler: ComponentHandler = {\n  create(): HTMLElement {\n    const el = document.createElement(\"div\");\n    el.dataset.hypenType = \"hypenapp\";\n    el.style.display = \"contents\"; // Don't affect layout\n    return el;\n  },\n\n  applyProps(element: HTMLElement, props: Record<string, any>): void {\n    // Get URL from props (can be positional \"0\" or named \"url\")\n    const url = props[\"0\"] || props.url;\n\n    if (!url || typeof url !== \"string\") {\n      log.error(\"HypenApp: URL is required\");\n      element.innerHTML = '<div style=\"color: red;\">HypenApp: URL required</div>';\n      return;\n    }\n\n    // Check if already connected\n    const existing = activeInstances.get(element);\n    if (existing) {\n      // Already connected, don't reconnect\n      return;\n    }\n\n    // Create the remote engine\n    const engine = new RemoteEngine(url, {\n      autoReconnect: props.autoReconnect ?? true,\n      reconnectInterval: props.reconnectInterval ?? 3000,\n      maxReconnectAttempts: props.maxReconnectAttempts ?? 10,\n    });\n\n    // Map to track created nodes\n    const nodes = new Map<string, HTMLElement>();\n    let rootId: string | null = null;\n\n    // Store instance for cleanup\n    activeInstances.set(element, { engine, nodes });\n\n    // Set up patch handling\n    engine.onPatches((patches) => {\n      applyPatches(element, nodes, patches, engine, (id) => {\n        if (!rootId) rootId = id;\n      });\n    });\n\n    // Show loading state\n    element.innerHTML = '<div class=\"hypen-app-loading\">Connecting...</div>';\n\n    // Connect\n    engine\n      .connect()\n      .then(() => {\n        // Clear loading state - patches will populate content\n        element.innerHTML = \"\";\n        log.debug(`HypenApp connected to ${url}`);\n      })\n      .catch((error) => {\n        element.innerHTML = `<div style=\"color: red;\">HypenApp: Connection failed - ${error.message}</div>`;\n        log.error(\"HypenApp connection failed:\", error);\n      });\n\n    // Handle disconnection\n    engine.onDisconnect(() => {\n      log.debug(\"HypenApp disconnected\");\n    });\n\n    engine.onError((error) => {\n      log.error(\"HypenApp error:\", error);\n    });\n\n    // Cleanup on element removal\n    const observer = new MutationObserver((mutations) => {\n      for (const mutation of mutations) {\n        for (const removedNode of mutation.removedNodes) {\n          if (removedNode === element || (removedNode as Element).contains?.(element)) {\n            engine.disconnect();\n            activeInstances.delete(element);\n            observer.disconnect();\n            log.debug(\"HypenApp cleaned up\");\n            return;\n          }\n        }\n      }\n    });\n\n    // Observe parent for removal\n    if (element.parentNode) {\n      observer.observe(element.parentNode, { childList: true, subtree: true });\n    }\n  },\n};\n\n/**\n * Minimal patch application for HypenApp container\n */\nfunction applyPatches(\n  container: HTMLElement,\n  nodes: Map<string, HTMLElement>,\n  patches: Patch[],\n  engine: RemoteEngine,\n  onRoot: (id: string) => void\n): void {\n  for (const patch of patches) {\n    switch (patch.type) {\n      case \"create\": {\n        const el = createElement(patch.elementType!, patch.props || {});\n        el.dataset.hypenId = patch.id!;\n        (el as any).__hypenEngine = engine;\n        nodes.set(patch.id!, el);\n        break;\n      }\n\n      case \"setProp\": {\n        const el = nodes.get(patch.id!);\n        if (el) {\n          applyProp(el, patch.name!, patch.value);\n        }\n        break;\n      }\n\n      case \"setText\": {\n        const el = nodes.get(patch.id!);\n        if (el) {\n          el.textContent = patch.text!;\n        }\n        break;\n      }\n\n      case \"insert\": {\n        const parentId = patch.parentId!;\n        const parent = parentId === \"root\" ? container : nodes.get(parentId);\n        const child = nodes.get(patch.id!);\n        const beforeId = patch.beforeId;\n\n        if (parent && child) {\n          if (parentId === \"root\") {\n            onRoot(patch.id!);\n          }\n\n          if (beforeId) {\n            const before = nodes.get(beforeId);\n            if (before && before.parentNode === parent) {\n              parent.insertBefore(child, before);\n            } else if (!parent.contains(child)) {\n              parent.appendChild(child);\n            }\n          } else if (!parent.contains(child)) {\n            parent.appendChild(child);\n          }\n        }\n        break;\n      }\n\n      case \"move\": {\n        const parentId = patch.parentId!;\n        const parent = parentId === \"root\" ? container : nodes.get(parentId);\n        const child = nodes.get(patch.id!);\n        const beforeId = patch.beforeId;\n\n        if (parent && child) {\n          if (beforeId) {\n            const before = nodes.get(beforeId);\n            if (before && before.parentNode === parent) {\n              parent.insertBefore(child, before);\n            }\n          } else {\n            parent.appendChild(child);\n          }\n        }\n        break;\n      }\n\n      case \"remove\": {\n        const el = nodes.get(patch.id!);\n        if (el && el.parentNode) {\n          el.parentNode.removeChild(el);\n        }\n        nodes.delete(patch.id!);\n        break;\n      }\n    }\n  }\n}\n\n/**\n * Create element by type\n */\nfunction createElement(type: string, props: Record<string, any>): HTMLElement {\n  const normalizedType = type.toLowerCase();\n\n  // Map Hypen types to HTML elements\n  const tagMap: Record<string, string> = {\n    column: \"div\",\n    row: \"div\",\n    text: \"span\",\n    button: \"button\",\n    input: \"input\",\n    image: \"img\",\n    container: \"div\",\n    box: \"div\",\n    center: \"div\",\n    list: \"div\",\n    spacer: \"div\",\n    stack: \"div\",\n    divider: \"hr\",\n    grid: \"div\",\n    card: \"div\",\n    heading: \"h2\",\n    link: \"a\",\n    textarea: \"textarea\",\n    checkbox: \"input\",\n    select: \"select\",\n    slider: \"input\",\n    switch: \"input\",\n    spinner: \"div\",\n    badge: \"span\",\n    avatar: \"img\",\n    progressbar: \"div\",\n    video: \"video\",\n    audio: \"audio\",\n  };\n\n  const tag = tagMap[normalizedType] || \"div\";\n  const el = document.createElement(tag);\n  el.dataset.hypenType = normalizedType;\n\n  // Apply basic styles\n  if (normalizedType === \"column\") {\n    el.style.display = \"flex\";\n    el.style.flexDirection = \"column\";\n  } else if (normalizedType === \"row\") {\n    el.style.display = \"flex\";\n    el.style.flexDirection = \"row\";\n  } else if (normalizedType === \"center\") {\n    el.style.display = \"flex\";\n    el.style.alignItems = \"center\";\n    el.style.justifyContent = \"center\";\n  } else if (normalizedType === \"text\") {\n    // Text content from props\n    if (props[\"0\"]) {\n      el.textContent = String(props[\"0\"]);\n    }\n  } else if (normalizedType === \"button\") {\n    el.style.cursor = \"pointer\";\n  } else if (normalizedType === \"checkbox\" || normalizedType === \"switch\") {\n    (el as HTMLInputElement).type = \"checkbox\";\n  } else if (normalizedType === \"slider\") {\n    (el as HTMLInputElement).type = \"range\";\n  }\n\n  return el;\n}\n\n/**\n * Apply a prop to an element\n */\nfunction applyProp(el: HTMLElement, name: string, value: any): void {\n  // Text content\n  if (name === \"0\" || name === \"text\") {\n    el.textContent = String(value);\n    return;\n  }\n\n  // Style props\n  const styleProps: Record<string, string> = {\n    padding: \"padding\",\n    margin: \"margin\",\n    backgroundColor: \"backgroundColor\",\n    background: \"background\",\n    color: \"color\",\n    fontSize: \"fontSize\",\n    fontWeight: \"fontWeight\",\n    width: \"width\",\n    height: \"height\",\n    minWidth: \"minWidth\",\n    minHeight: \"minHeight\",\n    maxWidth: \"maxWidth\",\n    maxHeight: \"maxHeight\",\n    borderRadius: \"borderRadius\",\n    border: \"border\",\n    gap: \"gap\",\n    flex: \"flex\",\n    alignItems: \"alignItems\",\n    justifyContent: \"justifyContent\",\n    opacity: \"opacity\",\n    overflow: \"overflow\",\n  };\n\n  if (styleProps[name]) {\n    const cssValue = typeof value === \"number\" ? `${value}px` : String(value);\n    (el.style as any)[styleProps[name]] = cssValue;\n    return;\n  }\n\n  // Event handlers\n  if (name === \"onClick\" || name === \"onclick\") {\n    el.onclick = () => {\n      const engine = (el as any).__hypenEngine as RemoteEngine;\n      if (engine && typeof value === \"string\" && value.startsWith(\"@actions.\")) {\n        const action = value.replace(\"@actions.\", \"\");\n        engine.dispatchAction(action);\n      }\n    };\n    return;\n  }\n\n  // Other attributes\n  el.setAttribute(name, String(value));\n}\n\n/**\n * Disconnect a HypenApp instance\n */\nexport function disconnectHypenApp(element: HTMLElement): void {\n  const instance = activeInstances.get(element);\n  if (instance) {\n    instance.engine.disconnect();\n    activeInstances.delete(element);\n  }\n}\n"
+    "/**\n * HypenApp Component\n *\n * Embeds a remote Hypen app via WebSocket\n *\n * Usage in Hypen DSL:\n * ```hypen\n * HypenApp(\"ws://localhost:3000\")\n *\n * // Or with named prop:\n * HypenApp(url: \"ws://localhost:3000\")\n * ```\n */\n\nimport type { ComponentHandler } from \"./index.js\";\nimport { RemoteEngine } from \"@hypen-space/core/remote/client\";\nimport type { Patch } from \"@hypen-space/core/types\";\nimport { frameworkLoggers } from \"@hypen-space/core/logger\";\n\nconst log = frameworkLoggers.remote;\n\n// Store active HypenApp instances for cleanup\nconst activeInstances = new WeakMap<\n  HTMLElement,\n  {\n    engine: RemoteEngine;\n    nodes: Map<string, HTMLElement>;\n  }\n>();\n\nexport const hypenAppHandler: ComponentHandler = {\n  create(): HTMLElement {\n    const el = document.createElement(\"div\");\n    el.dataset.hypenType = \"hypenapp\";\n    el.style.display = \"contents\"; // Don't affect layout\n    return el;\n  },\n\n  applyProps(element: HTMLElement, props: Record<string, any>): void {\n    // Get URL from props (can be positional \"0\" or named \"url\")\n    const url = props[\"0\"] || props.url;\n\n    if (!url || typeof url !== \"string\") {\n      log.error(\"HypenApp: URL is required\");\n      element.innerHTML = '<div style=\"color: red;\">HypenApp: URL required</div>';\n      return;\n    }\n\n    // Check if already connected\n    const existing = activeInstances.get(element);\n    if (existing) {\n      // Already connected, don't reconnect\n      return;\n    }\n\n    // Create the remote engine\n    const engine = new RemoteEngine(url, {\n      autoReconnect: props.autoReconnect ?? true,\n      reconnectInterval: props.reconnectInterval ?? 3000,\n      maxReconnectAttempts: props.maxReconnectAttempts ?? 10,\n    });\n\n    // Map to track created nodes\n    const nodes = new Map<string, HTMLElement>();\n    let rootId: string | null = null;\n\n    // Store instance for cleanup\n    activeInstances.set(element, { engine, nodes });\n\n    // Set up patch handling\n    engine.onPatches((patches) => {\n      applyPatches(element, nodes, patches, engine, (id) => {\n        if (!rootId) rootId = id;\n      });\n    });\n\n    // Show loading state\n    element.innerHTML = '<div class=\"hypen-app-loading\">Connecting...</div>';\n\n    // Connect\n    engine\n      .connect()\n      .then(() => {\n        // Clear loading state - patches will populate content\n        element.innerHTML = \"\";\n        log.debug(`HypenApp connected to ${url}`);\n      })\n      .catch((error) => {\n        element.innerHTML = `<div style=\"color: red;\">HypenApp: Connection failed - ${error.message}</div>`;\n        log.error(\"HypenApp connection failed:\", error);\n      });\n\n    // Handle disconnection\n    engine.onDisconnect(() => {\n      log.debug(\"HypenApp disconnected\");\n    });\n\n    engine.onError((error) => {\n      log.error(\"HypenApp error:\", error);\n    });\n\n    // Cleanup on element removal\n    const observer = new MutationObserver((mutations) => {\n      for (const mutation of mutations) {\n        for (const removedNode of mutation.removedNodes) {\n          if (removedNode === element || (removedNode as Element).contains?.(element)) {\n            engine.disconnect();\n            activeInstances.delete(element);\n            observer.disconnect();\n            log.debug(\"HypenApp cleaned up\");\n            return;\n          }\n        }\n      }\n    });\n\n    // Observe parent for removal\n    if (element.parentNode) {\n      observer.observe(element.parentNode, { childList: true, subtree: true });\n    }\n  },\n};\n\n/**\n * Minimal patch application for HypenApp container\n */\nfunction applyPatches(\n  container: HTMLElement,\n  nodes: Map<string, HTMLElement>,\n  patches: Patch[],\n  engine: RemoteEngine,\n  onRoot: (id: string) => void\n): void {\n  for (const patch of patches) {\n    switch (patch.type) {\n      case \"create\": {\n        const el = createElement(patch.elementType!, patch.props || {});\n        el.dataset.hypenId = patch.id!;\n        (el as any).__hypenEngine = engine;\n        nodes.set(patch.id!, el);\n        break;\n      }\n\n      case \"setProp\": {\n        const el = nodes.get(patch.id!);\n        if (el) {\n          applyProp(el, patch.name!, patch.value);\n        }\n        break;\n      }\n\n      case \"setText\": {\n        const el = nodes.get(patch.id!);\n        if (el) {\n          el.textContent = patch.text!;\n        }\n        break;\n      }\n\n      case \"insert\": {\n        const parentId = patch.parentId!;\n        const parent = parentId === \"root\" ? container : nodes.get(parentId);\n        const child = nodes.get(patch.id!);\n        const beforeId = patch.beforeId;\n\n        if (parent && child) {\n          if (parentId === \"root\") {\n            onRoot(patch.id!);\n          }\n\n          if (beforeId) {\n            const before = nodes.get(beforeId);\n            if (before && before.parentNode === parent) {\n              parent.insertBefore(child, before);\n            } else if (!parent.contains(child)) {\n              parent.appendChild(child);\n            }\n          } else if (!parent.contains(child)) {\n            parent.appendChild(child);\n          }\n        }\n        break;\n      }\n\n      case \"move\": {\n        const parentId = patch.parentId!;\n        const parent = parentId === \"root\" ? container : nodes.get(parentId);\n        const child = nodes.get(patch.id!);\n        const beforeId = patch.beforeId;\n\n        if (parent && child) {\n          if (beforeId) {\n            const before = nodes.get(beforeId);\n            if (before && before.parentNode === parent) {\n              parent.insertBefore(child, before);\n            }\n          } else {\n            parent.appendChild(child);\n          }\n        }\n        break;\n      }\n\n      case \"remove\": {\n        const el = nodes.get(patch.id!);\n        if (el && el.parentNode) {\n          el.parentNode.removeChild(el);\n        }\n        nodes.delete(patch.id!);\n        break;\n      }\n    }\n  }\n}\n\n/**\n * Create element by type\n */\nfunction createElement(type: string, props: Record<string, any>): HTMLElement {\n  const normalizedType = type.toLowerCase();\n\n  // Map Hypen types to HTML elements\n  const tagMap: Record<string, string> = {\n    column: \"div\",\n    row: \"div\",\n    text: \"span\",\n    button: \"button\",\n    input: \"input\",\n    image: \"img\",\n    container: \"div\",\n    box: \"div\",\n    center: \"div\",\n    list: \"div\",\n    spacer: \"div\",\n    stack: \"div\",\n    divider: \"hr\",\n    grid: \"div\",\n    card: \"div\",\n    heading: \"h2\",\n    link: \"a\",\n    textarea: \"textarea\",\n    checkbox: \"input\",\n    select: \"select\",\n    slider: \"input\",\n    switch: \"input\",\n    spinner: \"div\",\n    badge: \"span\",\n    avatar: \"img\",\n    progressbar: \"div\",\n    video: \"video\",\n    audio: \"audio\",\n  };\n\n  const tag = tagMap[normalizedType] || \"div\";\n  const el = document.createElement(tag);\n  el.dataset.hypenType = normalizedType;\n\n  // Apply basic styles\n  if (normalizedType === \"column\") {\n    el.style.display = \"flex\";\n    el.style.flexDirection = \"column\";\n  } else if (normalizedType === \"row\") {\n    el.style.display = \"flex\";\n    el.style.flexDirection = \"row\";\n  } else if (normalizedType === \"center\") {\n    el.style.display = \"flex\";\n    el.style.alignItems = \"center\";\n    el.style.justifyContent = \"center\";\n  } else if (normalizedType === \"text\") {\n    // Text content from props\n    if (props[\"0\"]) {\n      el.textContent = String(props[\"0\"]);\n    }\n  } else if (normalizedType === \"button\") {\n    el.style.cursor = \"pointer\";\n  } else if (normalizedType === \"checkbox\" || normalizedType === \"switch\") {\n    (el as HTMLInputElement).type = \"checkbox\";\n  } else if (normalizedType === \"slider\") {\n    (el as HTMLInputElement).type = \"range\";\n  }\n\n  return el;\n}\n\n/**\n * Apply a prop to an element\n */\nfunction applyProp(el: HTMLElement, name: string, value: any): void {\n  // Text content\n  if (name === \"0\" || name === \"text\") {\n    el.textContent = String(value);\n    return;\n  }\n\n  // Style props\n  const styleProps: Record<string, string> = {\n    padding: \"padding\",\n    margin: \"margin\",\n    backgroundColor: \"backgroundColor\",\n    background: \"background\",\n    color: \"color\",\n    fontSize: \"fontSize\",\n    fontWeight: \"fontWeight\",\n    width: \"width\",\n    height: \"height\",\n    minWidth: \"minWidth\",\n    minHeight: \"minHeight\",\n    maxWidth: \"maxWidth\",\n    maxHeight: \"maxHeight\",\n    borderRadius: \"borderRadius\",\n    border: \"border\",\n    gap: \"gap\",\n    flex: \"flex\",\n    opacity: \"opacity\",\n    overflow: \"overflow\",\n  };\n\n  if (styleProps[name]) {\n    const cssValue = typeof value === \"number\" ? `${value}px` : String(value);\n    (el.style as any)[styleProps[name]] = cssValue;\n    return;\n  }\n\n  // Event handlers\n  if (name === \"onClick\" || name === \"onclick\") {\n    el.onclick = () => {\n      const engine = (el as any).__hypenEngine as RemoteEngine;\n      if (engine && typeof value === \"string\" && value.startsWith(\"@actions.\")) {\n        const action = value.replace(\"@actions.\", \"\");\n        engine.dispatchAction(action);\n      }\n    };\n    return;\n  }\n\n  // Other attributes\n  el.setAttribute(name, String(value));\n}\n\n/**\n * Disconnect a HypenApp instance\n */\nexport function disconnectHypenApp(element: HTMLElement): void {\n  const instance = activeInstances.get(element);\n  if (instance) {\n    instance.engine.disconnect();\n    activeInstances.delete(element);\n  }\n}\n"
   ],
-  "mappings": "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",
-  "debugId": "7ED34EBF06ECAF2F64756E2164756E21",
+  "mappings": "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",
+  "debugId": "6CC26A230E0A0AED64756E2164756E21",
   "names": []
 }

package/dist/dom/components/image.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Image Component
+ */
+import type { ComponentHandler } from "./index.js";
+export declare const imageHandler: ComponentHandler;

package/dist/dom/components/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Component Registry
+ *
+ * Manages mappings from Hypen component types to DOM elements
+ */
+export interface ComponentHandler {
+    create(): HTMLElement;
+    applyProps?(element: HTMLElement, props: Record<string, any>): void;
+}
+export declare class ComponentRegistry {
+    private handlers;
+    constructor();
+    /**
+     * Register a component handler
+     */
+    register(type: string, handler: ComponentHandler): void;
+    /**
+     * Get handler for a component type
+     */
+    get(type: string): ComponentHandler | undefined;
+    /**
+     * Create element for a component type
+     */
+    createElement(type: string, props?: Record<string, any>): HTMLElement | null;
+    /**
+     * Register all default Hypen components
+     */
+    private registerDefaults;
+}

package/dist/dom/components/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);
@@ -1393,4 +1417,4 @@ export {
   ComponentRegistry
 };
 
-//# debugId=E20FF45ABB595CA864756E2164756E21
+//# debugId=9BBDD047A932849064756E2164756E21