@hypen-space/web 0.4.980 → 0.5.3

package/dist/canvas/input.js

@@ -1,207 +0,0 @@
-/**
- * Input Overlay System
- *
- * Handle text input using DOM overlay elements
- */
-import { getAbsoluteBounds, cssLengthToPx } from "./utils.js";
-/**
- * Input Overlay Manager
- */
-export class InputOverlay {
-    container;
-    overlay = null;
-    focusedNode = null;
-    onChangeCallback = null;
-    bindPath = null;
-    engine = null;
-    constructor(container) {
-        this.container = container || {};
-    }
-    /**
-     * Show input overlay for a node.
-     *
-     * Type comparison is case-insensitive — the engine emits `"Input"` /
-     * `"Textarea"`, but the overlay branch was looking for lowercase
-     * `"textarea"` and always created an `<input>` (so multi-line typing
-     * couldn't enter newlines and the visible caret was the wrong height).
-     */
-    showInput(node, canvasBounds, onChange, engine) {
-        // Skip if document is not available (non-browser environment)
-        if (typeof document === "undefined")
-            return;
-        this.hideInput();
-        // Store bind path and engine for two-way binding
-        this.bindPath = node.props.bind || null;
-        this.engine = engine || null;
-        const bounds = getAbsoluteBounds(node);
-        if (!bounds)
-            return;
-        const isMultiline = node.type.toLowerCase() === "textarea";
-        this.overlay = isMultiline
-            ? document.createElement("textarea")
-            : document.createElement("input");
-        // Style overlay
-        this.styleOverlay(node, bounds, canvasBounds);
-        // Set initial value
-        const value = node.props.value || "";
-        this.overlay.value = value;
-        // Setup event handlers
-        this.onChangeCallback = onChange;
-        this.overlay.addEventListener("input", this.onInput.bind(this));
-        this.overlay.addEventListener("blur", this.onBlur.bind(this));
-        this.overlay.addEventListener("keydown", this.onKeyDown.bind(this));
-        // Mount on document.body so absolute positioning is relative to the
-        // viewport (`canvasBounds.left/top` are page coords too) — no
-        // dependency on the canvas's wrapper having `position: relative`.
-        document.body.appendChild(this.overlay);
-        this.overlay.focus();
-        this.focusedNode = node;
-    }
-    /**
-     * Hide input overlay
-     */
-    hideInput() {
-        if (this.overlay) {
-            this.overlay.remove();
-            this.overlay = null;
-        }
-        this.focusedNode = null;
-        this.onChangeCallback = null;
-        this.bindPath = null;
-        this.engine = null;
-    }
-    /**
-     * Update overlay position
-     */
-    updatePosition(node, canvasBounds) {
-        if (!this.overlay || node !== this.focusedNode)
-            return;
-        const bounds = getAbsoluteBounds(node);
-        if (!bounds)
-            return;
-        this.positionOverlay(bounds, canvasBounds);
-    }
-    /**
-     * Style overlay to match canvas node
-     */
-    styleOverlay(node, bounds, canvasBounds) {
-        if (!this.overlay)
-            return;
-        const props = node.props;
-        // Position
-        this.positionOverlay(bounds, canvasBounds);
-        // Font and text styling — go through `cssLengthToPx` so values that
-        // arrive in `rem` ("0.875rem" for `text-sm`) round to real pixels
-        // instead of `parseFloat`'s bare 0.875 (which made the caret disappear).
-        const fontSize = cssLengthToPx(props.fontSize) ?? 16;
-        const fontWeight = props.fontWeight || "normal";
-        const fontFamily = props.fontFamily || "system-ui, sans-serif";
-        const color = props.color || "#000000";
-        const padTop = cssLengthToPx(props.paddingTop ?? props.padding) ?? 0;
-        const padRight = cssLengthToPx(props.paddingRight ?? props.padding) ?? 0;
-        const padBottom = cssLengthToPx(props.paddingBottom ?? props.padding) ?? 0;
-        const padLeft = cssLengthToPx(props.paddingLeft ?? props.padding) ?? 0;
-        const borderRadius = cssLengthToPx(props.borderRadius) ?? 4;
-        Object.assign(this.overlay.style, {
-            fontSize: `${fontSize}px`,
-            fontWeight: String(fontWeight),
-            fontFamily: fontFamily,
-            color: color,
-            border: "none",
-            outline: "none",
-            backgroundColor: props.backgroundColor || "#ffffff",
-            padding: `${padTop}px ${padRight}px ${padBottom}px ${padLeft}px`,
-            borderRadius: `${borderRadius}px`,
-            boxSizing: "border-box",
-            resize: "none",
-            // Keep the overlay above the canvas; the Bun-served stage has no
-            // stacking context of its own so a plain z-index works.
-            zIndex: "1000",
-        });
-        // Placeholder
-        if (props.placeholder) {
-            this.overlay.placeholder = props.placeholder;
-        }
-        // Input type
-        if (this.overlay instanceof HTMLInputElement && props.type) {
-            this.overlay.type = props.type;
-        }
-    }
-    /**
-     * Position overlay over canvas node.
-     *
-     * `bounds` is in canvas-local CSS pixels (the layout coordinate space
-     * the renderer paints into after `ctx.scale(dpr, dpr)`). The overlay is
-     * mounted on `document.body`, so we add `canvasBounds.left/top`
-     * (page coords from `getBoundingClientRect`) to land at the right
-     * absolute position regardless of where the canvas sits on the page.
-     * Adding `window.scrollX/Y` keeps the overlay pinned to the canvas
-     * even when the page scrolls between focus and reposition.
-     */
-    positionOverlay(bounds, canvasBounds) {
-        if (!this.overlay)
-            return;
-        const sx = typeof window !== "undefined" ? window.scrollX : 0;
-        const sy = typeof window !== "undefined" ? window.scrollY : 0;
-        Object.assign(this.overlay.style, {
-            position: "absolute",
-            left: `${canvasBounds.left + sx + bounds.x}px`,
-            top: `${canvasBounds.top + sy + bounds.y}px`,
-            width: `${bounds.width}px`,
-            height: `${bounds.height}px`,
-        });
-    }
-    /**
-     * Handle input event
-     */
-    onInput(e) {
-        if (!this.overlay || !this.onChangeCallback)
-            return;
-        const value = this.overlay.value;
-        this.onChangeCallback(value);
-        // Dispatch __hypen_bind for two-way binding
-        if (this.bindPath && this.engine) {
-            this.engine.dispatchAction("__hypen_bind", {
-                path: this.bindPath,
-                value,
-            });
-        }
-    }
-    /**
-     * Handle blur event
-     */
-    onBlur() {
-        // Hide overlay when focus is lost
-        this.hideInput();
-    }
-    /**
-     * Handle keyboard events
-     */
-    onKeyDown(e) {
-        if (!this.overlay)
-            return;
-        // Enter key submits (unless multiline)
-        if (e.key === "Enter" && this.overlay instanceof HTMLInputElement) {
-            e.preventDefault();
-            this.overlay.blur();
-        }
-        // Escape cancels
-        if (e.key === "Escape") {
-            e.preventDefault();
-            this.overlay.blur();
-        }
-    }
-    /**
-     * Check if input is currently shown
-     */
-    isShown() {
-        return this.overlay !== null;
-    }
-    /**
-     * Get current focused node
-     */
-    getFocusedNode() {
-        return this.focusedNode;
-    }
-}
-//# sourceMappingURL=input.js.map

package/dist/canvas/input.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"input.js","sourceRoot":"","sources":["../../src/canvas/input.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAO9D;;GAEG;AACH,MAAM,OAAO,YAAY;IACf,SAAS,CAAc;IACvB,OAAO,GAAkD,IAAI,CAAC;IAC9D,WAAW,GAAuB,IAAI,CAAC;IACvC,gBAAgB,GAAqC,IAAI,CAAC;IAC1D,QAAQ,GAAkB,IAAI,CAAC;IAC/B,MAAM,GAAsB,IAAI,CAAC;IAEzC,YAAY,SAA6B;QACvC,IAAI,CAAC,SAAS,GAAG,SAAS,IAAK,EAAkB,CAAC;IACpD,CAAC;IAED;;;;;;;OAOG;IACH,SAAS,CACP,IAAiB,EACjB,YAAqB,EACrB,QAAiC,EACjC,MAA0B;QAE1B,8DAA8D;QAC9D,IAAI,OAAO,QAAQ,KAAK,WAAW;YAAE,OAAO;QAE5C,IAAI,CAAC,SAAS,EAAE,CAAC;QAEjB,iDAAiD;QACjD,IAAI,CAAC,QAAQ,GAAI,IAAI,CAAC,KAAK,CAAC,IAAe,IAAI,IAAI,CAAC;QACpD,IAAI,CAAC,MAAM,GAAG,MAAM,IAAI,IAAI,CAAC;QAE7B,MAAM,MAAM,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,UAAU,CAAC;QAC3D,IAAI,CAAC,OAAO,GAAG,WAAW;YACxB,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC;YACpC,CAAC,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAEpC,gBAAgB;QAChB,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC;QAE9C,oBAAoB;QACpB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,EAAE,CAAC;QACrC,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,KAAK,CAAC;QAE3B,uBAAuB;QACvB,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC;QACjC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAChE,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC9D,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAC,CAAC;QAErF,oEAAoE;QACpE,8DAA8D;QAC9D,kEAAkE;QAClE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACxC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;QAErB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAED;;OAEG;IACH,SAAS;QACP,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACjB,IAAI,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC;YACtB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC;QACD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;QACxB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;IACrB,CAAC;IAED;;OAEG;IACH,cAAc,CAAC,IAAiB,EAAE,YAAqB;QACrD,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,KAAK,IAAI,CAAC,WAAW;YAAE,OAAO;QAEvD,MAAM,MAAM,GAAG,iBAAiB,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IAC7C,CAAC;IAED;;OAEG;IACK,YAAY,CAClB,IAAiB,EACjB,MAAiB,EACjB,YAAqB;QAErB,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAE1B,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;QAEzB,WAAW;QACX,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;QAE3C,oEAAoE;QACpE,kEAAkE;QAClE,yEAAyE;QACzE,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,EAAE,CAAC;QACrD,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,IAAI,QAAQ,CAAC;QAChD,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,IAAI,uBAAuB,CAAC;QAC/D,MAAM,KAAK,GAAG,KAAK,CAAC,KAAK,IAAI,SAAS,CAAC;QAEvC,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,CAAC,UAAU,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACrE,MAAM,QAAQ,GAAG,aAAa,CAAC,KAAK,CAAC,YAAY,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACzE,MAAM,SAAS,GAAG,aAAa,CAAC,KAAK,CAAC,aAAa,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QAC3E,MAAM,OAAO,GAAG,aAAa,CAAC,KAAK,CAAC,WAAW,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACvE,MAAM,YAAY,GAAG,aAAa,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QAE5D,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;YAChC,QAAQ,EAAE,GAAG,QAAQ,IAAI;YACzB,UAAU,EAAE,MAAM,CAAC,UAAU,CAAC;YAC9B,UAAU,EAAE,UAAU;YACtB,KAAK,EAAE,KAAK;YACZ,MAAM,EAAE,MAAM;YACd,OAAO,EAAE,MAAM;YACf,eAAe,EAAE,KAAK,CAAC,eAAe,IAAI,SAAS;YACnD,OAAO,EAAE,GAAG,MAAM,MAAM,QAAQ,MAAM,SAAS,MAAM,OAAO,IAAI;YAChE,YAAY,EAAE,GAAG,YAAY,IAAI;YACjC,SAAS,EAAE,YAAY;YACvB,MAAM,EAAE,MAAM;YACd,iEAAiE;YACjE,wDAAwD;YACxD,MAAM,EAAE,MAAM;SACf,CAAC,CAAC;QAEH,cAAc;QACd,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;YACtB,IAAI,CAAC,OAAO,CAAC,WAAW,GAAG,KAAK,CAAC,WAAW,CAAC;QAC/C,CAAC;QAED,aAAa;QACb,IAAI,IAAI,CAAC,OAAO,YAAY,gBAAgB,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;YAC3D,IAAI,CAAC,OAAO,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC;QACjC,CAAC;IACH,CAAC;IAED;;;;;;;;;;OAUG;IACK,eAAe,CAAC,MAAiB,EAAE,YAAqB;QAC9D,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAE1B,MAAM,EAAE,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9D,MAAM,EAAE,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;QAE9D,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;YAChC,QAAQ,EAAE,UAAU;YACpB,IAAI,EAAE,GAAG,YAAY,CAAC,IAAI,GAAG,EAAE,GAAG,MAAM,CAAC,CAAC,IAAI;YAC9C,GAAG,EAAE,GAAG,YAAY,CAAC,GAAG,GAAG,EAAE,GAAG,MAAM,CAAC,CAAC,IAAI;YAC5C,KAAK,EAAE,GAAG,MAAM,CAAC,KAAK,IAAI;YAC1B,MAAM,EAAE,GAAG,MAAM,CAAC,MAAM,IAAI;SAC7B,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,OAAO,CAAC,CAAQ;QACtB,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,CAAC,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAEpD,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,KAAK,CAAC;QACjC,IAAI,CAAC,gBAAgB,CAAC,KAAK,CAAC,CAAC;QAE7B,4CAA4C;QAC5C,IAAI,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YACjC,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC,cAAc,EAAE;gBACzC,IAAI,EAAE,IAAI,CAAC,QAAQ;gBACnB,KAAK;aACN,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED;;OAEG;IACK,MAAM;QACZ,kCAAkC;QAClC,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED;;OAEG;IACK,SAAS,CAAC,CAAgB;QAChC,IAAI,CAAC,IAAI,CAAC,OAAO;YAAE,OAAO;QAE1B,uCAAuC;QACvC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,IAAI,CAAC,OAAO,YAAY,gBAAgB,EAAE,CAAC;YAClE,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC;QAED,iBAAiB;QACjB,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;YACvB,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAED;;OAEG;IACH,OAAO;QACL,OAAO,IAAI,CAAC,OAAO,KAAK,IAAI,CAAC;IAC/B,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;CACF"}

package/dist/client.d.ts

@@ -1,36 +0,0 @@
-/**
- * createHypenClient — single-call wiring for renderer + engine.
- *
- * Replaces the boilerplate:
- *   const renderer = new DOMRenderer(container, engine);
- *   engine.onPatches((patches) => renderer.applyPatches(patches));
- *
- * Works with either a local Engine (`setRenderCallback`) or RemoteEngine
- * (`onPatches`) — they expose different APIs but the same intent.
- */
-import type { Patch } from "@hypen-space/core/types";
-import { DOMRenderer } from "./dom/renderer.js";
-import type { DebugConfig } from "./dom/debug.js";
-import { CanvasRenderer } from "./canvas/renderer.js";
-import type { CanvasRendererOptions } from "./canvas/types.js";
-interface PatchSourceLike {
-    dispatchAction(name: string, payload?: unknown): void;
-    onPatches?(callback: (patches: Patch[]) => void): unknown;
-    setRenderCallback?(callback: (patches: Patch[]) => void): void;
-}
-export interface DomClientOptions {
-    debug?: Partial<DebugConfig>;
-}
-export interface DomClient {
-    renderer: DOMRenderer;
-    destroy(): void;
-}
-export declare function createDomClient(container: HTMLElement, engine: PatchSourceLike, options?: DomClientOptions): DomClient;
-export interface CanvasClientOptions extends Partial<CanvasRendererOptions> {
-}
-export interface CanvasClient {
-    renderer: CanvasRenderer;
-    destroy(): void;
-}
-export declare function createCanvasClient(canvas: HTMLCanvasElement, engine: PatchSourceLike, options?: CanvasClientOptions): CanvasClient;
-export {};

package/dist/client.js

@@ -1,47 +0,0 @@
-/**
- * createHypenClient — single-call wiring for renderer + engine.
- *
- * Replaces the boilerplate:
- *   const renderer = new DOMRenderer(container, engine);
- *   engine.onPatches((patches) => renderer.applyPatches(patches));
- *
- * Works with either a local Engine (`setRenderCallback`) or RemoteEngine
- * (`onPatches`) — they expose different APIs but the same intent.
- */
-import { DOMRenderer } from "./dom/renderer.js";
-import { CanvasRenderer } from "./canvas/renderer.js";
-function attachPatchListener(engine, callback) {
-    if (typeof engine.onPatches === "function") {
-        engine.onPatches(callback);
-        return;
-    }
-    if (typeof engine.setRenderCallback === "function") {
-        engine.setRenderCallback(callback);
-        return;
-    }
-    throw new Error("createHypenClient: engine has neither onPatches() nor setRenderCallback() — cannot subscribe to patches.");
-}
-export function createDomClient(container, engine, options) {
-    const renderer = new DOMRenderer(container, engine, options?.debug);
-    attachPatchListener(engine, (patches) => renderer.applyPatches(patches));
-    return {
-        renderer,
-        destroy() {
-            // DOMRenderer has no destroy yet; clearing the container is the
-            // closest approximation. Patch subscriptions live on the engine —
-            // the caller controls engine lifetime, so we don't tear them down.
-            container.innerHTML = "";
-        },
-    };
-}
-export function createCanvasClient(canvas, engine, options) {
-    const renderer = new CanvasRenderer(canvas, engine, options);
-    attachPatchListener(engine, (patches) => renderer.applyPatches(patches));
-    return {
-        renderer,
-        destroy() {
-            renderer.destroy();
-        },
-    };
-}
-//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"client.js","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAStD,SAAS,mBAAmB,CAC1B,MAAuB,EACvB,QAAoC;IAEpC,IAAI,OAAO,MAAM,CAAC,SAAS,KAAK,UAAU,EAAE,CAAC;QAC3C,MAAM,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QAC3B,OAAO;IACT,CAAC;IACD,IAAI,OAAO,MAAM,CAAC,iBAAiB,KAAK,UAAU,EAAE,CAAC;QACnD,MAAM,CAAC,iBAAiB,CAAC,QAAQ,CAAC,CAAC;QACnC,OAAO;IACT,CAAC;IACD,MAAM,IAAI,KAAK,CACb,0GAA0G,CAC3G,CAAC;AACJ,CAAC;AAWD,MAAM,UAAU,eAAe,CAC7B,SAAsB,EACtB,MAAuB,EACvB,OAA0B;IAE1B,MAAM,QAAQ,GAAG,IAAI,WAAW,CAAC,SAAS,EAAE,MAAa,EAAE,OAAO,EAAE,KAAK,CAAC,CAAC;IAC3E,mBAAmB,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;IACzE,OAAO;QACL,QAAQ;QACR,OAAO;YACL,gEAAgE;YAChE,kEAAkE;YAClE,mEAAmE;YACnE,SAAS,CAAC,SAAS,GAAG,EAAE,CAAC;QAC3B,CAAC;KACF,CAAC;AACJ,CAAC;AASD,MAAM,UAAU,kBAAkB,CAChC,MAAyB,EACzB,MAAuB,EACvB,OAA6B;IAE7B,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,MAAM,EAAE,MAAa,EAAE,OAAO,CAAC,CAAC;IACpE,mBAAmB,CAAC,MAAM,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC;IACzE,OAAO;QACL,QAAQ;QACR,OAAO;YACL,QAAQ,CAAC,OAAO,EAAE,CAAC;QACrB,CAAC;KACF,CAAC;AACJ,CAAC"}

package/src/canvas/input.ts

@@ -1,251 +0,0 @@
-/**
- * Input Overlay System
- *
- * Handle text input using DOM overlay elements
- */
-
-import type { VirtualNode, Rectangle } from "./types.js";
-import { getAbsoluteBounds, cssLengthToPx } from "./utils.js";
-
-/** Minimal engine interface for dispatching bind actions */
-interface BindEngine {
-  dispatchAction(name: string, payload?: unknown): void;
-}
-
-/**
- * Input Overlay Manager
- */
-export class InputOverlay {
-  private container: HTMLElement;
-  private overlay: HTMLInputElement | HTMLTextAreaElement | null = null;
-  private focusedNode: VirtualNode | null = null;
-  private onChangeCallback: ((value: string) => void) | null = null;
-  private bindPath: string | null = null;
-  private engine: BindEngine | null = null;
-
-  constructor(container: HTMLElement | null) {
-    this.container = container || ({} as HTMLElement);
-  }
-
-  /**
-   * Show input overlay for a node.
-   *
-   * Type comparison is case-insensitive — the engine emits `"Input"` /
-   * `"Textarea"`, but the overlay branch was looking for lowercase
-   * `"textarea"` and always created an `<input>` (so multi-line typing
-   * couldn't enter newlines and the visible caret was the wrong height).
-   */
-  showInput(
-    node: VirtualNode,
-    canvasBounds: DOMRect,
-    onChange: (value: string) => void,
-    engine?: BindEngine | null
-  ): void {
-    // Skip if document is not available (non-browser environment)
-    if (typeof document === "undefined") return;
-
-    this.hideInput();
-
-    // Store bind path and engine for two-way binding
-    this.bindPath = (node.props.bind as string) || null;
-    this.engine = engine || null;
-
-    const bounds = getAbsoluteBounds(node);
-    if (!bounds) return;
-
-    const isMultiline = node.type.toLowerCase() === "textarea";
-    this.overlay = isMultiline
-      ? document.createElement("textarea")
-      : document.createElement("input");
-
-    // Style overlay
-    this.styleOverlay(node, bounds, canvasBounds);
-
-    // Set initial value
-    const value = node.props.value || "";
-    this.overlay.value = value;
-
-    // Setup event handlers
-    this.onChangeCallback = onChange;
-    this.overlay.addEventListener("input", this.onInput.bind(this));
-    this.overlay.addEventListener("blur", this.onBlur.bind(this));
-    this.overlay.addEventListener("keydown", this.onKeyDown.bind(this) as EventListener);
-
-    // Mount on document.body so absolute positioning is relative to the
-    // viewport (`canvasBounds.left/top` are page coords too) — no
-    // dependency on the canvas's wrapper having `position: relative`.
-    document.body.appendChild(this.overlay);
-    this.overlay.focus();
-
-    this.focusedNode = node;
-  }
-
-  /**
-   * Hide input overlay
-   */
-  hideInput(): void {
-    if (this.overlay) {
-      this.overlay.remove();
-      this.overlay = null;
-    }
-    this.focusedNode = null;
-    this.onChangeCallback = null;
-    this.bindPath = null;
-    this.engine = null;
-  }
-
-  /**
-   * Update overlay position
-   */
-  updatePosition(node: VirtualNode, canvasBounds: DOMRect): void {
-    if (!this.overlay || node !== this.focusedNode) return;
-
-    const bounds = getAbsoluteBounds(node);
-    if (!bounds) return;
-
-    this.positionOverlay(bounds, canvasBounds);
-  }
-
-  /**
-   * Style overlay to match canvas node
-   */
-  private styleOverlay(
-    node: VirtualNode,
-    bounds: Rectangle,
-    canvasBounds: DOMRect
-  ): void {
-    if (!this.overlay) return;
-
-    const props = node.props;
-
-    // Position
-    this.positionOverlay(bounds, canvasBounds);
-
-    // Font and text styling — go through `cssLengthToPx` so values that
-    // arrive in `rem` ("0.875rem" for `text-sm`) round to real pixels
-    // instead of `parseFloat`'s bare 0.875 (which made the caret disappear).
-    const fontSize = cssLengthToPx(props.fontSize) ?? 16;
-    const fontWeight = props.fontWeight || "normal";
-    const fontFamily = props.fontFamily || "system-ui, sans-serif";
-    const color = props.color || "#000000";
-
-    const padTop = cssLengthToPx(props.paddingTop ?? props.padding) ?? 0;
-    const padRight = cssLengthToPx(props.paddingRight ?? props.padding) ?? 0;
-    const padBottom = cssLengthToPx(props.paddingBottom ?? props.padding) ?? 0;
-    const padLeft = cssLengthToPx(props.paddingLeft ?? props.padding) ?? 0;
-    const borderRadius = cssLengthToPx(props.borderRadius) ?? 4;
-
-    Object.assign(this.overlay.style, {
-      fontSize: `${fontSize}px`,
-      fontWeight: String(fontWeight),
-      fontFamily: fontFamily,
-      color: color,
-      border: "none",
-      outline: "none",
-      backgroundColor: props.backgroundColor || "#ffffff",
-      padding: `${padTop}px ${padRight}px ${padBottom}px ${padLeft}px`,
-      borderRadius: `${borderRadius}px`,
-      boxSizing: "border-box",
-      resize: "none",
-      // Keep the overlay above the canvas; the Bun-served stage has no
-      // stacking context of its own so a plain z-index works.
-      zIndex: "1000",
-    });
-
-    // Placeholder
-    if (props.placeholder) {
-      this.overlay.placeholder = props.placeholder;
-    }
-
-    // Input type
-    if (this.overlay instanceof HTMLInputElement && props.type) {
-      this.overlay.type = props.type;
-    }
-  }
-
-  /**
-   * Position overlay over canvas node.
-   *
-   * `bounds` is in canvas-local CSS pixels (the layout coordinate space
-   * the renderer paints into after `ctx.scale(dpr, dpr)`). The overlay is
-   * mounted on `document.body`, so we add `canvasBounds.left/top`
-   * (page coords from `getBoundingClientRect`) to land at the right
-   * absolute position regardless of where the canvas sits on the page.
-   * Adding `window.scrollX/Y` keeps the overlay pinned to the canvas
-   * even when the page scrolls between focus and reposition.
-   */
-  private positionOverlay(bounds: Rectangle, canvasBounds: DOMRect): void {
-    if (!this.overlay) return;
-
-    const sx = typeof window !== "undefined" ? window.scrollX : 0;
-    const sy = typeof window !== "undefined" ? window.scrollY : 0;
-
-    Object.assign(this.overlay.style, {
-      position: "absolute",
-      left: `${canvasBounds.left + sx + bounds.x}px`,
-      top: `${canvasBounds.top + sy + bounds.y}px`,
-      width: `${bounds.width}px`,
-      height: `${bounds.height}px`,
-    });
-  }
-
-  /**
-   * Handle input event
-   */
-  private onInput(e: Event): void {
-    if (!this.overlay || !this.onChangeCallback) return;
-
-    const value = this.overlay.value;
-    this.onChangeCallback(value);
-
-    // Dispatch __hypen_bind for two-way binding
-    if (this.bindPath && this.engine) {
-      this.engine.dispatchAction("__hypen_bind", {
-        path: this.bindPath,
-        value,
-      });
-    }
-  }
-
-  /**
-   * Handle blur event
-   */
-  private onBlur(): void {
-    // Hide overlay when focus is lost
-    this.hideInput();
-  }
-
-  /**
-   * Handle keyboard events
-   */
-  private onKeyDown(e: KeyboardEvent): void {
-    if (!this.overlay) return;
-
-    // Enter key submits (unless multiline)
-    if (e.key === "Enter" && this.overlay instanceof HTMLInputElement) {
-      e.preventDefault();
-      this.overlay.blur();
-    }
-
-    // Escape cancels
-    if (e.key === "Escape") {
-      e.preventDefault();
-      this.overlay.blur();
-    }
-  }
-
-  /**
-   * Check if input is currently shown
-   */
-  isShown(): boolean {
-    return this.overlay !== null;
-  }
-
-  /**
-   * Get current focused node
-   */
-  getFocusedNode(): VirtualNode | null {
-    return this.focusedNode;
-  }
-}
-

package/src/client.ts

@@ -1,88 +0,0 @@
-/**
- * createHypenClient — single-call wiring for renderer + engine.
- *
- * Replaces the boilerplate:
- *   const renderer = new DOMRenderer(container, engine);
- *   engine.onPatches((patches) => renderer.applyPatches(patches));
- *
- * Works with either a local Engine (`setRenderCallback`) or RemoteEngine
- * (`onPatches`) — they expose different APIs but the same intent.
- */
-
-import type { Patch } from "@hypen-space/core/types";
-import { DOMRenderer } from "./dom/renderer.js";
-import type { DebugConfig } from "./dom/debug.js";
-import { CanvasRenderer } from "./canvas/renderer.js";
-import type { CanvasRendererOptions } from "./canvas/types.js";
-
-interface PatchSourceLike {
-  dispatchAction(name: string, payload?: unknown): void;
-  onPatches?(callback: (patches: Patch[]) => void): unknown;
-  setRenderCallback?(callback: (patches: Patch[]) => void): void;
-}
-
-function attachPatchListener(
-  engine: PatchSourceLike,
-  callback: (patches: Patch[]) => void,
-): void {
-  if (typeof engine.onPatches === "function") {
-    engine.onPatches(callback);
-    return;
-  }
-  if (typeof engine.setRenderCallback === "function") {
-    engine.setRenderCallback(callback);
-    return;
-  }
-  throw new Error(
-    "createHypenClient: engine has neither onPatches() nor setRenderCallback() — cannot subscribe to patches.",
-  );
-}
-
-export interface DomClientOptions {
-  debug?: Partial<DebugConfig>;
-}
-
-export interface DomClient {
-  renderer: DOMRenderer;
-  destroy(): void;
-}
-
-export function createDomClient(
-  container: HTMLElement,
-  engine: PatchSourceLike,
-  options?: DomClientOptions,
-): DomClient {
-  const renderer = new DOMRenderer(container, engine as any, options?.debug);
-  attachPatchListener(engine, (patches) => renderer.applyPatches(patches));
-  return {
-    renderer,
-    destroy() {
-      // DOMRenderer has no destroy yet; clearing the container is the
-      // closest approximation. Patch subscriptions live on the engine —
-      // the caller controls engine lifetime, so we don't tear them down.
-      container.innerHTML = "";
-    },
-  };
-}
-
-export interface CanvasClientOptions extends Partial<CanvasRendererOptions> {}
-
-export interface CanvasClient {
-  renderer: CanvasRenderer;
-  destroy(): void;
-}
-
-export function createCanvasClient(
-  canvas: HTMLCanvasElement,
-  engine: PatchSourceLike,
-  options?: CanvasClientOptions,
-): CanvasClient {
-  const renderer = new CanvasRenderer(canvas, engine as any, options);
-  attachPatchListener(engine, (patches) => renderer.applyPatches(patches));
-  return {
-    renderer,
-    destroy() {
-      renderer.destroy();
-    },
-  };
-}