@hypen-space/web 0.4.2 → 0.4.5

package/dist/canvas/accessibility.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Accessibility Layer
+ *
+ * Maintain shadow DOM for screen readers
+ */
+import type { VirtualNode } from "./types.js";
+/**
+ * Accessibility Manager
+ */
+export declare class AccessibilityLayer {
+    private shadowRoot;
+    private nodeMap;
+    private enabled;
+    constructor(container: HTMLElement | null, enabled?: boolean);
+    /**
+     * Sync shadow DOM with virtual tree
+     */
+    syncTree(root: VirtualNode): void;
+    /**
+     * Create shadow DOM element for virtual node
+     */
+    private createShadowNode;
+    /**
+     * Get text content from node tree
+     */
+    private getNodeText;
+    /**
+     * Focus node in shadow DOM
+     */
+    focusNode(nodeId: string): void;
+    /**
+     * Update single node
+     */
+    updateNode(node: VirtualNode): void;
+    /**
+     * Get shadow element by node ID
+     */
+    getElement(nodeId: string): HTMLElement | undefined;
+    /**
+     * Enable or disable accessibility layer
+     */
+    setEnabled(enabled: boolean): void;
+    /**
+     * Cleanup
+     */
+    destroy(): void;
+}

package/dist/canvas/events.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Event System
+ *
+ * Hit testing and event handling for canvas nodes
+ */
+import type { VirtualNode } from "./types.js";
+interface IEngine {
+    dispatchAction(name: string, payload?: any): void;
+}
+/**
+ * Canvas Event Manager
+ */
+export declare class CanvasEventManager {
+    private canvas;
+    private engine;
+    private rootNode;
+    private hoveredNode;
+    private focusedNode;
+    private mouseDownNode;
+    constructor(canvas: HTMLCanvasElement, engine: IEngine);
+    /**
+     * Set the root node for hit testing
+     */
+    setRootNode(node: VirtualNode | null): void;
+    /**
+     * Setup canvas event listeners
+     */
+    private setupEventListeners;
+    /**
+     * Get canvas coordinates from mouse event
+     */
+    private getCanvasCoordinates;
+    /**
+     * Find node at canvas coordinates
+     */
+    private hitTest;
+    /**
+     * Recursively test node and children
+     */
+    private hitTestNode;
+    /**
+     * Handle mouse move
+     */
+    private onMouseMove;
+    /**
+     * Handle mouse down
+     */
+    private onMouseDown;
+    /**
+     * Handle mouse up
+     */
+    private onMouseUp;
+    /**
+     * Handle click
+     */
+    private onClick;
+    /**
+     * Handle double click
+     */
+    private onDoubleClick;
+    /**
+     * Handle keyboard events
+     */
+    private onKeyDown;
+    private onKeyUp;
+    /**
+     * Set focused node
+     */
+    private setFocus;
+    /**
+     * Update cursor based on node
+     */
+    private updateCursor;
+    /**
+     * Dispatch event to engine
+     */
+    private dispatchNodeEvent;
+    /**
+     * Request redraw from renderer
+     */
+    private requestRedraw;
+    /**
+     * Cleanup
+     */
+    destroy(): void;
+}
+export {};

package/dist/canvas/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Canvas Renderer for Hypen
+ *
+ * Browser-only module for rendering Hypen UI to Canvas
+ */
+export { CanvasRenderer } from "./renderer.js";
+export { registerPainter } from "./paint.js";
+export { CanvasEventManager } from "./events.js";
+export { InputOverlay } from "./input.js";
+export { AccessibilityLayer } from "./accessibility.js";
+export type { VirtualNode, Layout, Rectangle, Point, FontStyle, TextStyle, TextMetrics, CanvasRendererOptions, PainterFunction, LayoutFunction, } from "./types.js";

package/dist/canvas/index.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) {
@@ -287,7 +287,12 @@ function computeLayout(ctx, node, availableWidth, availableHeight, x = 0, y = 0)
   let width = parseSize(props.width);
   let height = parseSize(props.height);
   const type = node.type.toLowerCase();
-  if (type === "spacer") {
+  if (type === "app") {
+    if (width === null)
+      width = availableAfterMargin.width;
+    if (height === null)
+      height = availableAfterMargin.height;
+  } else if (type === "spacer") {
     if (width === null)
       width = availableAfterMargin.width;
     if (height === null)
@@ -410,10 +415,10 @@ function layoutChildren(ctx, parent) {
     return;
   }
   const flexDirection = props.flexDirection || (parent.type === "column" ? "column" : "row");
-  const justifyContent = props.justifyContent || "flex-start";
-  const alignItems = props.alignItems || "flex-start";
-  const gap = parseFloat(props.gap) || 0;
   const isColumn = flexDirection === "column";
+  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 availableWidth = layout.contentWidth;
   const availableHeight = layout.contentHeight;
   const childInfo = [];
@@ -526,8 +531,8 @@ function layoutChildren(ctx, parent) {
 function layoutStackChildren(ctx, parent) {
   const layout = parent.layout;
   const props = parent.props;
-  const alignItems = props.alignItems || "flex-start";
-  const justifyContent = props.justifyContent || "flex-start";
+  const horizontalAlignment = props.horizontalAlignment || "flex-start";
+  const verticalAlignment = props.verticalAlignment || "flex-start";
   const availableWidth = layout.contentWidth;
   const availableHeight = layout.contentHeight;
   for (const child of parent.children) {
@@ -535,14 +540,14 @@ function layoutStackChildren(ctx, parent) {
     const childLayout = child.layout;
     let x = 0;
     let y = 0;
-    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;
     }
-    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;
     }
     childLayout.x = layout.x + layout.contentX + x;
@@ -629,6 +634,7 @@ function paintNode(ctx, node) {
     case "link":
       paintLink(ctx, node);
       break;
+    case "app":
     case "container":
     case "box":
       paintContainer(ctx, node);
@@ -1607,13 +1613,17 @@ class InputOverlay {
   overlay = null;
   focusedNode = null;
   onChangeCallback = null;
+  bindPath = null;
+  engine = null;
   constructor(container) {
     this.container = container || {};
   }
-  showInput(node, canvasBounds, onChange) {
+  showInput(node, canvasBounds, onChange, engine) {
     if (typeof document === "undefined")
       return;
     this.hideInput();
+    this.bindPath = node.props.bind || null;
+    this.engine = engine || null;
     const bounds = getAbsoluteBounds(node);
     if (!bounds)
       return;
@@ -1637,6 +1647,8 @@ class InputOverlay {
     }
     this.focusedNode = null;
     this.onChangeCallback = null;
+    this.bindPath = null;
+    this.engine = null;
   }
   updatePosition(node, canvasBounds) {
     if (!this.overlay || node !== this.focusedNode)
@@ -1698,6 +1710,12 @@ class InputOverlay {
       return;
     const value = this.overlay.value;
     this.onChangeCallback(value);
+    if (this.bindPath && this.engine) {
+      this.engine.dispatchAction("__hypen_bind", {
+        path: this.bindPath,
+        value
+      });
+    }
   }
   onBlur() {
     this.hideInput();
@@ -1867,7 +1885,7 @@ class AccessibilityLayer {
 }
 
 // src/canvas/renderer.ts
-import { frameworkLoggers as frameworkLoggers2 } from "@hypen-space/core";
+import { frameworkLoggers as frameworkLoggers2 } from "@hypen-space/core/logger";
 var log2 = frameworkLoggers2.canvas;
 var DEFAULT_OPTIONS = {
   devicePixelRatio: typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1,
@@ -2125,4 +2143,4 @@ export {
   AccessibilityLayer
 };
 
-//# debugId=5566A76F8B6DBF0364756E2164756E21
+//# debugId=06AE7056BD2C8A3364756E2164756E21