@hypen-space/web 0.4.980 → 0.5.3

package/src/canvas/events.ts

@@ -4,10 +4,10 @@
  * Hit testing and event handling for canvas nodes
  */
 
-import type { VirtualNode, Point } from "./types.js";
+import type { VirtualNode, Point, Rectangle } from "./types.js";
 import { isPointInRoundedRect } from "./utils.js";
-import { getScrollAwareBounds } from "./scroll.js";
-import { resolveEventAction } from "./props.js";
+import { dispatchNodeEvent } from "./dispatch.js";
+import type { FocusManager } from "./focus.js";
 
 // Interface for the engine that CanvasEventManager needs
 interface IEngine {
@@ -16,17 +16,26 @@ interface IEngine {
 
 /**
  * Canvas Event Manager
+ *
+ * Pointer-side interaction: hit testing, hover/pressed state, cursor, and
+ * click dispatch. Focus is NOT owned here — the pointer path funnels into
+ * the {@link FocusManager}, which treats real DOM focus on the
+ * accessibility-mirror (canvas fallback content) as the single source of
+ * truth. Keyboard events likewise arrive via the mirror (a canvas without
+ * tabindex never receives them), so this class attaches no key listeners.
  */
 export class CanvasEventManager {
   private canvas: HTMLCanvasElement;
   private engine: IEngine;
   private rootNode: VirtualNode | null = null;
   private hoveredNode: VirtualNode | null = null;
-  private focusedNode: VirtualNode | null = null;
   private mouseDownNode: VirtualNode | null = null;
-  private focusChangeHandler:
-    | ((next: VirtualNode | null, prev: VirtualNode | null) => void)
-    | null = null;
+  private focusManager: FocusManager | null = null;
+  private editablePointerHandler: ((node: VirtualNode, point: Point) => void) | null = null;
+
+  // Reused for the per-node rounded-rect test so hit testing allocates
+  // nothing per visited node.
+  private scratchBounds: Rectangle = { x: 0, y: 0, width: 0, height: 0 };
 
   // Bound handler references for cleanup
   private boundOnMouseMove!: (e: MouseEvent) => void;
@@ -35,8 +44,6 @@ export class CanvasEventManager {
   private boundOnClick!: (e: MouseEvent) => void;
   private boundOnDoubleClick!: (e: MouseEvent) => void;
   private boundOnContextMenu!: (e: MouseEvent) => void;
-  private boundOnKeyDown!: (e: KeyboardEvent) => void;
-  private boundOnKeyUp!: (e: KeyboardEvent) => void;
 
   constructor(canvas: HTMLCanvasElement, engine: IEngine) {
     this.canvas = canvas;
@@ -52,16 +59,22 @@ export class CanvasEventManager {
   }
 
   /**
-   * Subscribe to focus changes. Used by the renderer to mount the
-   * `InputOverlay` HTML element when an Input/Textarea gains focus and
-   * unmount it when focus moves away. Without this hookup the canvas
-   * Input painted as a pretty pill but a click on it did nothing — the
-   * overlay was constructed but never invoked.
+   * Wire the focus manager the pointer path reports into. Clicking a
+   * focusable node focuses its mirror element; clicking anything else
+   * clears mirror focus.
+   */
+  setFocusManager(fm: FocusManager | null): void {
+    this.focusManager = fm;
+  }
+
+  /**
+   * Called with (node, point) when a mousedown lands on a focusable node —
+   * the renderer maps the point to a caret position for editable nodes.
    */
-  setFocusChangeHandler(
-    fn: ((next: VirtualNode | null, prev: VirtualNode | null) => void) | null,
+  setEditablePointerHandler(
+    fn: ((node: VirtualNode, point: Point) => void) | null,
   ): void {
-    this.focusChangeHandler = fn;
+    this.editablePointerHandler = fn;
   }
 
   /**
@@ -74,8 +87,6 @@ export class CanvasEventManager {
     this.boundOnClick = this.onClick.bind(this);
     this.boundOnDoubleClick = this.onDoubleClick.bind(this);
     this.boundOnContextMenu = this.onContextMenu.bind(this);
-    this.boundOnKeyDown = this.onKeyDown.bind(this);
-    this.boundOnKeyUp = this.onKeyUp.bind(this);
 
     this.canvas.addEventListener("mousemove", this.boundOnMouseMove);
     this.canvas.addEventListener("mousedown", this.boundOnMouseDown);
@@ -83,8 +94,6 @@ export class CanvasEventManager {
     this.canvas.addEventListener("click", this.boundOnClick);
     this.canvas.addEventListener("dblclick", this.boundOnDoubleClick);
     this.canvas.addEventListener("contextmenu", this.boundOnContextMenu);
-    this.canvas.addEventListener("keydown", this.boundOnKeyDown);
-    this.canvas.addEventListener("keyup", this.boundOnKeyUp);
   }
 
   /**
@@ -118,32 +127,64 @@ export class CanvasEventManager {
    * checked first because they paint on top (see `paint.ts` overlay
    * ordering) — without this, a click on the Story's close-button overlay
    * lands on the underlying Image instead.
+   *
+   * `scrollX`/`scrollY` accumulate the ancestors' scroll offsets down the
+   * recursion (the translation paint applies) so no per-node ancestor walk
+   * is needed. Subtrees behind a clipping container are pruned when the
+   * point falls outside the container — nothing inside can be visible there.
    */
-  private hitTestNode(node: VirtualNode, point: Point): VirtualNode | null {
+  private hitTestNode(
+    node: VirtualNode,
+    point: Point,
+    scrollX: number = 0,
+    scrollY: number = 0,
+  ): VirtualNode | null {
     if (!node.visible || !node.layout) return null;
 
-    const bounds = getScrollAwareBounds(node);
-    if (!bounds) return null;
+    const layout = node.layout;
+    const x = layout.x - scrollX;
+    const y = layout.y - scrollY;
+    const inBounds =
+      point.x >= x && point.x <= x + layout.width &&
+      point.y >= y && point.y <= y + layout.height;
+
+    if (!inBounds) {
+      const overflow = node.props.overflow;
+      if (overflow === "hidden" || overflow === "scroll" || overflow === "auto") {
+        return null;
+      }
+    }
+
+    const childScrollX = scrollX + (node.scrollState?.scrollX ?? 0);
+    const childScrollY = scrollY + (node.scrollState?.scrollY ?? 0);
 
     // Front-to-back order: absolute overlays (newest in paint stack)
     // first, then flow children in reverse paint order.
     for (let i = node.children.length - 1; i >= 0; i--) {
       const child = node.children[i];
       if (child.props.position !== "absolute") continue;
-      const hit = this.hitTestNode(child, point);
+      const hit = this.hitTestNode(child, point, childScrollX, childScrollY);
       if (hit) return hit;
     }
     for (let i = node.children.length - 1; i >= 0; i--) {
       const child = node.children[i];
       if (child.props.position === "absolute") continue;
-      const hit = this.hitTestNode(child, point);
+      const hit = this.hitTestNode(child, point, childScrollX, childScrollY);
       if (hit) return hit;
     }
 
     // Test this node
-    const radius = node.layout.border.radius;
-    if (isPointInRoundedRect(point, bounds, radius)) {
-      return node;
+    if (inBounds) {
+      const radius = layout.border.radius;
+      if (radius <= 0) return node;
+      const bounds = this.scratchBounds;
+      bounds.x = x;
+      bounds.y = y;
+      bounds.width = layout.width;
+      bounds.height = layout.height;
+      if (isPointInRoundedRect(point, bounds, radius)) {
+        return node;
+      }
     }
 
     return null;
@@ -202,6 +243,13 @@ export class CanvasEventManager {
    * Handle mouse down
    */
   private onMouseDown(e: MouseEvent): void {
+    // Suppress the browser's default mousedown focus action. The canvas
+    // itself isn't focusable, so the default would move focus to <body>
+    // AFTER this handler — undoing the mirror/proxy focus we set below and
+    // instantly ending any edit session. (Synthetic events have no default
+    // action, so this only bites with real pointers.)
+    e.preventDefault?.();
+
     const point = this.getCanvasCoordinates(e);
     // Same lift-to-clickable as hover so a click on a Button's Icon child
     // dispatches against the Button (where `onClick` actually lives).
@@ -210,6 +258,13 @@ export class CanvasEventManager {
 
     this.mouseDownNode = node;
 
+    // Track pressed (`:active`) state so paint-time `:active` variants resolve.
+    // Repaint so the active style appears immediately on press.
+    if (node) {
+      node.pressed = true;
+      this.requestRedraw();
+    }
+
     if (node && node.clickable) {
       this.dispatchNodeEvent(node, "mousedown", {
         button: e.button,
@@ -218,11 +273,16 @@ export class CanvasEventManager {
       });
     }
 
-    // Update focus
+    // Focus routes through the mirror: focusing the node's fallback-content
+    // element makes document.activeElement the truth, and the FocusManager's
+    // focusin/focusout handlers update node state + repaint.
     if (node && node.focusable) {
-      this.setFocus(node);
+      this.focusManager?.requestFocus(node);
+      // After focus (which starts an edit session for Input/Textarea), let
+      // the renderer place the caret at the clicked character.
+      this.editablePointerHandler?.(node, point);
     } else {
-      this.setFocus(null);
+      this.focusManager?.requestFocus(null);
     }
   }
 
@@ -234,6 +294,13 @@ export class CanvasEventManager {
     const hit = this.hitTest(point);
     const node = this.findClickableAncestor(hit) ?? hit;
 
+    // Clear the pressed (`:active`) flag from the node that was pressed —
+    // release ends `:active` even if the pointer drifted off the node first.
+    if (this.mouseDownNode && this.mouseDownNode.pressed) {
+      this.mouseDownNode.pressed = false;
+      this.requestRedraw();
+    }
+
     if (node && node.clickable) {
       this.dispatchNodeEvent(node, "mouseup", {
         button: e.button,
@@ -304,62 +371,6 @@ export class CanvasEventManager {
     }
   }
 
-  /**
-   * Handle keyboard events
-   */
-  private onKeyDown(e: KeyboardEvent): void {
-    if (this.focusedNode) {
-      this.dispatchNodeEvent(this.focusedNode, "keydown", {
-        key: e.key,
-        code: e.code,
-        ctrlKey: e.ctrlKey,
-        shiftKey: e.shiftKey,
-        altKey: e.altKey,
-      });
-    }
-  }
-
-  private onKeyUp(e: KeyboardEvent): void {
-    if (this.focusedNode) {
-      this.dispatchNodeEvent(this.focusedNode, "keyup", {
-        key: e.key,
-        code: e.code,
-        ctrlKey: e.ctrlKey,
-        shiftKey: e.shiftKey,
-        altKey: e.altKey,
-      });
-    }
-  }
-
-  /**
-   * Set focused node
-   */
-  private setFocus(node: VirtualNode | null): void {
-    if (node === this.focusedNode) return;
-
-    const prev = this.focusedNode;
-    if (prev) {
-      prev.focused = false;
-      this.dispatchNodeEvent(prev, "blur", {});
-    }
-
-    this.focusedNode = node;
-
-    if (node) {
-      node.focused = true;
-      this.dispatchNodeEvent(node, "focus", {});
-    }
-
-    if (this.focusChangeHandler) this.focusChangeHandler(node, prev);
-
-    this.requestRedraw();
-  }
-
-  /** Public for the renderer's overlay-blur path. */
-  clearFocus(): void {
-    this.setFocus(null);
-  }
-
   /**
    * Update cursor based on node
    */
@@ -380,32 +391,11 @@ export class CanvasEventManager {
   }
 
   /**
-   * Dispatch event to engine
+   * Dispatch event to engine (shared resolver — same payload shape as the
+   * mirror's keyboard/AT path).
    */
   private dispatchNodeEvent(node: VirtualNode, eventType: string, data: any): void {
-    // Engine emits event applicators in camelCase (`onClick`, `onChange`). The
-    // older flat form `onclick` is still accepted. After prop normalisation the
-    // value is either a string (action name) or an object carrying an action
-    // name at `"0"` plus an auxiliary payload (e.g. `{ "0": "@router.push",
-    // to: "/notifications" }` for `@router.push(to: "/notifications")`).
-    const camel = `on${eventType.charAt(0).toUpperCase()}${eventType.slice(1)}`;
-    let spec: unknown = node.props[camel] ?? node.props[`on${eventType}`] ?? node.props[eventType];
-
-    // Actionable components fall back to the bare `action` prop on click.
-    if (spec == null && eventType === "click") {
-      spec = node.props.action;
-    }
-
-    const resolved = resolveEventAction(spec);
-    if (!resolved) return;
-
-    this.engine.dispatchAction(resolved.actionName, {
-      type: eventType,
-      nodeId: node.id,
-      timestamp: Date.now(),
-      ...resolved.payload,
-      ...data,
-    });
+    dispatchNodeEvent(this.engine, node, eventType, data);
   }
 
   /**
@@ -427,12 +417,11 @@ export class CanvasEventManager {
     this.canvas.removeEventListener("click", this.boundOnClick);
     this.canvas.removeEventListener("dblclick", this.boundOnDoubleClick);
     this.canvas.removeEventListener("contextmenu", this.boundOnContextMenu);
-    this.canvas.removeEventListener("keydown", this.boundOnKeyDown);
-    this.canvas.removeEventListener("keyup", this.boundOnKeyUp);
+    if (this.mouseDownNode) this.mouseDownNode.pressed = false;
     this.rootNode = null;
     this.hoveredNode = null;
-    this.focusedNode = null;
     this.mouseDownNode = null;
+    this.focusManager = null;
   }
 }
 

package/src/canvas/focus.ts

@@ -0,0 +1,216 @@
+/**
+ * Focus Manager
+ *
+ * Real DOM focus on accessibility-mirror elements (canvas fallback content)
+ * is the single source of truth for canvas focus. Tab/Shift+Tab traverse
+ * the mirror natively; `focusin`/`focusout` translate DOM focus into
+ * `node.focused` + repaint; the pointer path (canvas hit-test) funnels into
+ * the same place by focusing the node's mirror element.
+ *
+ * Loop-free by construction: DOM focus events only ever *read* into node
+ * state — nothing in the sync path calls `.focus()` back.
+ *
+ * The mirror also carries keyboard/AT interaction back to the engine:
+ * Enter/Space on a mirror `<button>` produces a native `click` (dispatched
+ * to the node's action), and keydown/keyup on the focused element dispatch
+ * the node's `onKeyDown`/`onKeyUp` applicators — which the old
+ * canvas-attached listeners never could (a canvas without tabindex never
+ * receives key events).
+ */
+
+import type { VirtualNode } from "./types.js";
+import type { AccessibilityLayer } from "./accessibility.js";
+import { dispatchNodeEvent, type DispatchEngine } from "./dispatch.js";
+
+export interface FocusManagerHooks {
+  getNode(id: string): VirtualNode | undefined;
+  /** Fired after node.focused flags are updated. Renderer repaints and
+   *  (for editable nodes) starts/stops the text-edit controller. */
+  onFocusChange(next: VirtualNode | null, prev: VirtualNode | null): void;
+  /**
+   * Elements outside the mirror that still count as "the node is focused" —
+   * the text editor's hidden IME proxy. Focus moving there must not clear
+   * canvas focus.
+   */
+  isAuxFocusTarget?(element: unknown): boolean;
+}
+
+export class FocusManager {
+  private mirror: AccessibilityLayer;
+  private engine: DispatchEngine;
+  private hooks: FocusManagerHooks;
+  private focusedNode: VirtualNode | null = null;
+
+  private boundFocusIn = (e: Event) => this.onFocusIn(e as FocusEvent);
+  private boundFocusOut = (e: Event) => this.onFocusOut(e as FocusEvent);
+  private boundClick = (e: Event) => this.onMirrorClick(e);
+  private boundKeyDown = (e: Event) => this.onMirrorKey("keydown", e as KeyboardEvent);
+  private boundKeyUp = (e: Event) => this.onMirrorKey("keyup", e as KeyboardEvent);
+
+  constructor(mirror: AccessibilityLayer, engine: DispatchEngine, hooks: FocusManagerHooks) {
+    this.mirror = mirror;
+    this.engine = engine;
+    this.hooks = hooks;
+
+    const root = mirror.getRoot();
+    if (root && typeof root.addEventListener === "function") {
+      root.addEventListener("focusin", this.boundFocusIn);
+      root.addEventListener("focusout", this.boundFocusOut);
+      root.addEventListener("click", this.boundClick);
+      root.addEventListener("keydown", this.boundKeyDown);
+      root.addEventListener("keyup", this.boundKeyUp);
+    }
+  }
+
+  // -------------------------------------------------------------------------
+  // DOM → node state (the only direction focus state flows)
+  // -------------------------------------------------------------------------
+
+  /** Climb from an event target to the mirror element's virtual node. */
+  private resolveNode(target: EventTarget | null): VirtualNode | null {
+    let el = target as (HTMLElement & { parentNode?: any }) | null;
+    const root = this.mirror.getRoot();
+    while (el && el !== root) {
+      const id = el.getAttribute?.("data-hypen-id");
+      if (id) {
+        return this.hooks.getNode(id) ?? null;
+      }
+      el = el.parentNode ?? null;
+    }
+    return null;
+  }
+
+  private onFocusIn(e: FocusEvent): void {
+    this.syncFocus(this.resolveNode(e.target));
+  }
+
+  private onFocusOut(e: FocusEvent): void {
+    // If focus moves to another mirror element, its focusin handles the
+    // transition; a handoff to the editor's IME proxy keeps the node
+    // focused; only a departure from both clears focus.
+    const next = e.relatedTarget as HTMLElement | null;
+    if (next && this.hooks.isAuxFocusTarget?.(next)) return;
+    const root = this.mirror.getRoot();
+    if (!next || !root || !(root.contains?.(next) ?? false)) {
+      this.syncFocus(null);
+    }
+  }
+
+  /** Update node.focused flags from the new DOM focus target. Idempotent. */
+  private syncFocus(node: VirtualNode | null): void {
+    if (node === this.focusedNode) return;
+
+    const prev = this.focusedNode;
+    if (prev) {
+      prev.focused = false;
+      dispatchNodeEvent(this.engine, prev, "blur", {});
+    }
+
+    this.focusedNode = node;
+    if (node) {
+      node.focused = true;
+      dispatchNodeEvent(this.engine, node, "focus", {});
+    }
+
+    this.hooks.onFocusChange(node, prev);
+  }
+
+  // -------------------------------------------------------------------------
+  // Pointer path — canvas hit-test funnels into DOM focus
+  // -------------------------------------------------------------------------
+
+  /**
+   * Focus a node from the canvas pointer path. Focuses the mirror element
+   * (so `document.activeElement` agrees) and syncs node state directly —
+   * in real browsers the element's focusin already did that synchronously
+   * and the second sync is a no-op; in environments without focus events
+   * the direct sync keeps behavior identical.
+   */
+  requestFocus(node: VirtualNode | null): void {
+    if (!node) {
+      this.clearFocus();
+      return;
+    }
+
+    const el = this.mirror.getElement(node.id);
+    (el as any)?.focus?.({ preventScroll: true });
+    this.syncFocus(node);
+  }
+
+  /** Pointer landed on nothing focusable: blur any mirror focus and clear. */
+  clearFocus(): void {
+    if (typeof document !== "undefined") {
+      const active = document.activeElement as HTMLElement | null;
+      const root = this.mirror.getRoot();
+      if (
+        active &&
+        ((root && (root.contains?.(active) ?? false)) ||
+          this.hooks.isAuxFocusTarget?.(active))
+      ) {
+        active.blur?.();
+      }
+    }
+    this.syncFocus(null);
+  }
+
+  /**
+   * Clear focus if the focused node is `node` or one of its descendants —
+   * called before a subtree is removed/detached (the mirror element may
+   * leave the DOM without a browser blur when focus sits on the IME proxy).
+   */
+  clearIfWithin(node: VirtualNode): void {
+    let current: VirtualNode | null = this.focusedNode;
+    while (current) {
+      if (current === node) {
+        this.syncFocus(null);
+        return;
+      }
+      current = current.parent;
+    }
+  }
+
+  getFocusedNode(): VirtualNode | null {
+    return this.focusedNode;
+  }
+
+  // -------------------------------------------------------------------------
+  // Mirror interaction → engine actions
+  // -------------------------------------------------------------------------
+
+  /**
+   * Native click on a mirror element — keyboard activation (Enter/Space on
+   * a real `<button>`) or an AT-initiated action. Pointer clicks never land
+   * here (fallback content has no rendered boxes), so this can't double-fire
+   * with the canvas hit-test click path.
+   */
+  private onMirrorClick(e: Event): void {
+    const node = this.resolveNode(e.target);
+    if (!node) return;
+    if (!node.clickable) return;
+    dispatchNodeEvent(this.engine, node, "click", {});
+  }
+
+  private onMirrorKey(type: "keydown" | "keyup", e: KeyboardEvent): void {
+    const node = this.resolveNode(e.target);
+    if (!node) return;
+    dispatchNodeEvent(this.engine, node, type, {
+      key: e.key,
+      code: e.code,
+      ctrlKey: e.ctrlKey,
+      shiftKey: e.shiftKey,
+      altKey: e.altKey,
+    });
+  }
+
+  destroy(): void {
+    const root = this.mirror.getRoot();
+    if (root && typeof root.removeEventListener === "function") {
+      root.removeEventListener("focusin", this.boundFocusIn);
+      root.removeEventListener("focusout", this.boundFocusOut);
+      root.removeEventListener("click", this.boundClick);
+      root.removeEventListener("keydown", this.boundKeyDown);
+      root.removeEventListener("keyup", this.boundKeyUp);
+    }
+    this.focusedNode = null;
+  }
+}

package/src/canvas/index.ts

@@ -5,22 +5,21 @@
  */
 
 export { CanvasRenderer } from "./renderer.js";
-export {
-  createCanvasClient as createHypenClient,
-  createCanvasClient,
-  type CanvasClient as HypenClient,
-  type CanvasClient,
-  type CanvasClientOptions as HypenClientOptions,
-  type CanvasClientOptions,
-} from "../client.js";
 export { registerPainter } from "./paint.js";
 export { CanvasEventManager } from "./events.js";
-export { InputOverlay } from "./input.js";
 export { AccessibilityLayer } from "./accessibility.js";
+export { FocusManager } from "./focus.js";
+export { TextEditController } from "./editing.js";
 export { initTaffyLayout } from "./layout.js";
 export { ScrollManager } from "./scroll.js";
 export { DirtyRectTracker } from "./dirty.js";
 export { SelectionManager } from "./selection.js";
+export {
+  pointToOffset,
+  offsetToCaretRect,
+  rangeToRects,
+  type TextGeometry,
+} from "./text-geometry.js";
 
 export type {
   VirtualNode,