@hypen-space/web 0.4.980 → 0.5.3

package/src/canvas/renderer.ts

@@ -21,10 +21,13 @@ import type {
   LayoutFunction,
 } from "./types.js";
 import { computeLayout, initTaffyLayout } from "./layout.js";
-import { paintNode, registerPainter } from "./paint.js";
+import { clearTextCache } from "./text.js";
+import { paintNode, registerPainter, clearCharAdvanceCache } from "./paint.js";
 import { CanvasEventManager } from "./events.js";
-import { InputOverlay } from "./input.js";
 import { AccessibilityLayer } from "./accessibility.js";
+import { FocusManager } from "./focus.js";
+import { TextEditController, isEditableNode } from "./editing.js";
+import { setTextEditor } from "./paint.js";
 import { findNodeById } from "./utils.js";
 import { ScrollManager } from "./scroll.js";
 import { SelectionManager } from "./selection.js";
@@ -35,13 +38,13 @@ import {
   refreshApplicator,
   parseApplicatorBase,
 } from "./props.js";
+import { applyVariants, invalidateVariantCache, deriveNodeComputed } from "./variants.js";
 
 const DEFAULT_OPTIONS: CanvasRendererOptions = {
   devicePixelRatio: typeof window !== "undefined" ? window.devicePixelRatio || 1 : 1,
   backgroundColor: "#ffffff",
   enableAccessibility: true,
   enableHitTesting: true,
-  enableInputOverlay: true,
   enableDirtyRects: false,
   enableLayerCaching: false,
   maxLayerCacheSize: 10,
@@ -65,21 +68,34 @@ export class CanvasRenderer implements Renderer {
   private eventManager: CanvasEventManager;
   private scrollManager: ScrollManager;
   private selectionManager: SelectionManager;
-  private inputOverlay: InputOverlay;
   private accessibilityLayer: AccessibilityLayer;
+  private focusManager: FocusManager;
+  private textEditor: TextEditController;
   
   private dirtyTracker: DirtyRectTracker;
 
   private rafId: number | null = null;
   private needsRedraw = false;
 
-  private resizeObserver: ResizeObserver | null = null;
-  private dprMediaQuery: MediaQueryList | null = null;
-  private dprChangeHandler: (() => void) | null = null;
+  // Whether the next frame must re-run layout. Patches, resize, font loads,
+  // and image decodes set it; pure paint frames (scroll, hover, caret blink,
+  // scrollbar fade) leave it clear so the frame skips the Taffy solve.
+  private layoutDirty = true;
 
   private frameCount = 0;
   private lastFrameTime = 0;
 
+  private boundFontsLoaded = () => {
+    // Metrics measured against the fallback font are stale now — both the
+    // wrapped-text metrics and the per-glyph advances used by the manual
+    // letter-spacing path (keyed by CSS font string, which does not change
+    // when the real font replaces the fallback).
+    clearTextCache();
+    clearCharAdvanceCache();
+    this.layoutDirty = true;
+    this.scheduleRedraw();
+  };
+
   constructor(canvas: HTMLCanvasElement, engine: IEngine, options?: Partial<CanvasRendererOptions>) {
     this.canvas = canvas;
     this.engine = engine;
@@ -105,66 +121,84 @@ export class CanvasRenderer implements Renderer {
     this.scrollManager = new ScrollManager(canvas, () => this.scheduleRedraw());
     this.selectionManager = new SelectionManager(canvas, () => this.scheduleRedraw());
     setSelectionManager(this.selectionManager);
-    this.inputOverlay = new InputOverlay(
-      (canvas as any).parentElement || (typeof document !== "undefined" ? document.body : null)
-    );
+    // The mirror is a transparent positioned overlay above the canvas: its
+    // elements are exposed to AT with REAL geometry (screen-reader browse
+    // modes are geometry-driven) and join the native tab order, while the
+    // canvas paints all pixels and keeps all pointer events.
     this.accessibilityLayer = new AccessibilityLayer(
-      (canvas as any).parentElement || (typeof document !== "undefined" ? document.body : null),
+      canvas as unknown as HTMLElement,
       this.options.enableAccessibility || false
     );
 
-    // Bridge focus changes from the hit-tester to the HTML input overlay.
-    // Without this, `Input`/`Textarea` painted on the canvas but clicking
-    // one did nothing — the overlay never got mounted.
-    this.eventManager.setFocusChangeHandler((next) => {
-      const t = next ? next.type.toLowerCase() : null;
-      if (next && (t === "input" || t === "textarea")) {
-        const rect = this.canvas.getBoundingClientRect();
-        this.inputOverlay.showInput(
-          next,
-          rect,
-          (value) => {
-            // Local mirror so the next paint sees the typed text even
-            // before the engine echoes it back via SetProp.
-            next.props.value = value;
-            this.scheduleRedraw();
-          },
-          this.engine,
-        );
-      } else {
-        this.inputOverlay.hideInput();
-      }
+    // Text editing happens IN the focused mirror element (the browser owns
+    // value/caret/selection/IME there); the controller reads that state and
+    // the canvas paints text, selection, and caret natively.
+    this.textEditor = new TextEditController(canvas, engine, {
+      scheduleRedraw: () => this.scheduleRedraw(),
+      markDirty: (node) => {
+        if (this.options.enableDirtyRects) {
+          this.dirtyTracker.markNodeDirty(node);
+        }
+      },
+      // Proxy blurred to somewhere outside the canvas: node.focused follows.
+      onEditBlur: () => this.focusManager.clearFocus(),
+    });
+    setTextEditor(this.textEditor);
+
+    // DOM focus on mirror elements (canvas fallback content) is the single
+    // source of truth for focus: Tab/Shift+Tab traverse the mirror natively,
+    // and the pointer path (hit-test in CanvasEventManager) funnels into the
+    // same place by focusing the node's mirror element.
+    this.focusManager = new FocusManager(this.accessibilityLayer, engine, {
+      getNode: (id) => this.nodes.get(id),
+      isAuxFocusTarget: (el) => this.textEditor.isProxyElement(el),
+      onFocusChange: (next) => {
+        if (next && isEditableNode(next)) {
+          const el = this.accessibilityLayer.getElement(next.id);
+          if (el) {
+            this.textEditor.beginEditing(
+              next,
+              el as HTMLInputElement | HTMLTextAreaElement,
+            );
+          }
+        } else {
+          this.textEditor.endEditing();
+        }
+        // Repaint so focus styling (input border, button ring) updates.
+        this.scheduleRedraw();
+      },
+    });
+    this.eventManager.setFocusManager(this.focusManager);
+    this.eventManager.setEditablePointerHandler((node, point) => {
+      this.textEditor.placeCaretFromPoint(node, point);
     });
 
-    // Listen for redraw requests from event manager
-    this.canvas.addEventListener("hypen:redraw", () => this.scheduleRedraw());
-
-    // Eagerly initialise Taffy WASM for layout (non-blocking — fallback used until ready)
-    initTaffyLayout();
+    // Listen for redraw requests from event manager (paint-only) and image
+    // loads (which carry `detail.layout` — a decoded intrinsic size can
+    // change the layout, see `getImageNaturalAspect`).
+    this.canvas.addEventListener("hypen:redraw", (e: Event) => {
+      if ((e as CustomEvent).detail?.layout) {
+        this.layoutDirty = true;
+      }
+      this.scheduleRedraw();
+    });
 
-    // Observe size changes — without this, the canvas backing store stays
-    // pinned at construction-time dimensions while CSS stretches the
-    // display box, and content gets bitmap-stretched / hit-testing drifts.
-    if (typeof ResizeObserver !== "undefined") {
-      this.resizeObserver = new ResizeObserver(() => {
-        this.setupHiDPI();
-        this.scheduleRedraw();
-      });
-      this.resizeObserver.observe(this.canvas);
+    // A late-loading web font changes every measurement made against the
+    // fallback font — re-run layout once the real metrics are available.
+    if (typeof document !== "undefined") {
+      (document as any).fonts?.addEventListener?.("loadingdone", this.boundFontsLoaded);
     }
 
-    // Track DPR changes (e.g. dragging window across monitors with
-    // different scaling). matchMedia fires once per crossing.
-    if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
-      const dpr = window.devicePixelRatio || 1;
-      this.dprMediaQuery = window.matchMedia(`(resolution: ${dpr}dppx)`);
-      this.dprChangeHandler = () => {
-        this.options.devicePixelRatio = window.devicePixelRatio || 1;
-        this.setupHiDPI();
+    // Eagerly initialise Taffy WASM for layout (non-blocking — fallback used
+    // until ready). Repaint once it arrives: the fallback's first frame is
+    // approximate, and without this redraw its layout would stick until the
+    // next state change.
+    initTaffyLayout().then((ready) => {
+      if (ready) {
+        this.layoutDirty = true;
         this.scheduleRedraw();
-      };
-      this.dprMediaQuery.addEventListener("change", this.dprChangeHandler);
-    }
+      }
+    });
 
     // Don't schedule initial render - wait for patches
   }
@@ -176,18 +210,15 @@ export class CanvasRenderer implements Renderer {
     const dpr = this.options.devicePixelRatio || 1;
     const rect = this.canvas.getBoundingClientRect();
 
-    // Skip when the host is collapsed — a 0-pixel backing store throws
-    // in some 2D contexts and the next non-zero resize will reinitialise.
-    if (rect.width === 0 || rect.height === 0) return;
-
     this.canvas.width = rect.width * dpr;
     this.canvas.height = rect.height * dpr;
 
-    // Reset transform first — `scale()` is cumulative across calls, so on
-    // a resize the second call would compound (dpr²) and shrink content.
-    this.ctx.setTransform(1, 0, 0, 1, 0, 0);
     this.ctx.scale(dpr, dpr);
 
+    // Update canvas display size
+    this.canvas.style.width = `${rect.width}px`;
+    this.canvas.style.height = `${rect.height}px`;
+
     // Sync dirty tracker with new canvas size
     if (this.dirtyTracker) {
       this.dirtyTracker.setCanvasSize(rect.width, rect.height);
@@ -203,6 +234,7 @@ export class CanvasRenderer implements Renderer {
     this.canvas.width = width;
     this.canvas.height = height;
     this.setupHiDPI();
+    this.layoutDirty = true;
     this.scheduleRedraw();
   }
 
@@ -221,10 +253,12 @@ export class CanvasRenderer implements Renderer {
       this.dirtyTracker.markFullDirty();
     }
 
-    // Update accessibility layer
-    if (this.rootNode) {
-      this.accessibilityLayer.syncTree(this.rootNode);
-    }
+    // The accessibility mirror is synced incrementally by the per-patch
+    // handlers above — no per-batch rebuild, so mirror element identity
+    // (and with it AT focus/virtual-cursor position) survives updates.
+
+    // Any patch can affect layout (props, tree shape, text).
+    this.layoutDirty = true;
 
     // Schedule redraw
     this.scheduleRedraw();
@@ -236,7 +270,7 @@ export class CanvasRenderer implements Renderer {
   private applyPatch(patch: Patch): void {
     switch (patch.type) {
       case "create":
-        this.onCreate(patch.id!, patch.elementType!, patch.props || {});
+        this.onCreate(patch.id!, patch.elementType!, patch.props || {}, patch.semantics);
         break;
 
       case "setProp":
@@ -270,13 +304,38 @@ export class CanvasRenderer implements Renderer {
       case "attach":
         this.onInsert(patch.parentId!, patch.id!, patch.beforeId);
         break;
+
+      case "setSemantics":
+        this.onSetSemantics(patch.id!, patch.semantics);
+        break;
     }
   }
 
+  /**
+   * Reactive accessibility update: swap in the node's complete re-resolved
+   * semantics block and re-apply it to the shadow element. This is the only
+   * channel that keeps the canvas shadow tree's accessible name/state live —
+   * painted text is invisible to AT, so prop deltas alone can't do it.
+   */
+  private onSetSemantics(
+    id: string,
+    semantics?: import("@hypen-space/core/types").Semantics,
+  ): void {
+    const node = this.nodes.get(id);
+    if (!node) return;
+    node.semantics = semantics;
+    this.accessibilityLayer.updateNode(node);
+  }
+
   /**
    * Create new virtual node
    */
-  private onCreate(id: string, elementType: string, props: Record<string, any>): void {
+  private onCreate(
+    id: string,
+    elementType: string,
+    props: Record<string, any>,
+    semantics?: import("@hypen-space/core/types").Semantics,
+  ): void {
     // Engine may send a Map (from WASM) or a plain object. Copy either way so
     // we own the prop bag and can mutate it during applicator normalisation.
     const rawProps: Record<string, any> =
@@ -293,6 +352,7 @@ export class CanvasRenderer implements Renderer {
       id,
       type: elementType,
       props: rawProps,
+      semantics,
       children: [],
       parent: null,
       visible: true,
@@ -309,6 +369,9 @@ export class CanvasRenderer implements Renderer {
     };
 
     this.nodes.set(id, node);
+
+    // Mirror the create (element stays detached until its insert patch).
+    this.accessibilityLayer.createNode(node);
   }
 
   /**
@@ -325,6 +388,10 @@ export class CanvasRenderer implements Renderer {
 
     node.props[name] = value;
 
+    // A new key may introduce a variant marker (e.g. `padding@md.0`) — drop the
+    // cached variant-base set so the next frame rescans.
+    invalidateVariantCache(node);
+
     // If this is an applicator-namespaced key (e.g. `flex.0`, `onClick.to`),
     // rebuild the derived flat/aggregate entry under the base name so layout,
     // paint, and event dispatch see the updated value.
@@ -358,6 +425,12 @@ export class CanvasRenderer implements Renderer {
 
     // Update accessibility
     this.accessibilityLayer.updateNode(node);
+
+    // Engine value echo for an actively edited input: same value → no-op
+    // (the caret must not move); a rewritten value re-seeds the element.
+    if (name === "value") {
+      this.textEditor.onEngineValueEcho(node);
+    }
   }
 
   /**
@@ -373,6 +446,8 @@ export class CanvasRenderer implements Renderer {
 
     delete node.props[name];
 
+    invalidateVariantCache(node);
+
     const base = parseApplicatorBase(name);
     if (base !== null) {
       refreshApplicator(node.props, base);
@@ -429,6 +504,10 @@ export class CanvasRenderer implements Renderer {
     const child = this.nodes.get(id);
     if (!child) return;
 
+    // Mirror the insert/attach/move — insertNode resolves root addressing
+    // and unknown-beforeId fallback with the same rules as the code below.
+    this.accessibilityLayer.insertNode(parentId, id, beforeId);
+
     // Check if this is setting the root node (parent_id === id === "root" or similar)
     if (parentId === "root" && id === "root") {
       this.rootNode = child;
@@ -512,6 +591,15 @@ export class CanvasRenderer implements Renderer {
     const node = this.nodes.get(id);
     if (!node) return;
 
+    // An edit session inside the detached subtree ends (flushing any
+    // pending composition value) before the subtree leaves the tree, and
+    // focus state follows.
+    this.textEditor.endIfWithin(node);
+    this.focusManager.clearIfWithin(node);
+
+    // Mirror keeps the element (and subtree ids) alive for re-attach.
+    this.accessibilityLayer.detachNode(id);
+
     // Mark dirty so the next paint doesn't leave stale pixels behind.
     if (this.options.enableDirtyRects) {
       this.dirtyTracker.markNodeDirty(node);
@@ -543,6 +631,13 @@ export class CanvasRenderer implements Renderer {
     const node = this.nodes.get(id);
     if (!node) return;
 
+    // End any edit session inside the removed subtree; focus state follows.
+    this.textEditor.endIfWithin(node);
+    this.focusManager.clearIfWithin(node);
+
+    // Drop the mirror element and its subtree's id mappings.
+    this.accessibilityLayer.removeNode(node);
+
     // Mark dirty before removal
     if (this.options.enableDirtyRects) {
       this.dirtyTracker.markNodeDirty(node);
@@ -599,6 +694,16 @@ export class CanvasRenderer implements Renderer {
       this.renderFull(dpr);
     }
 
+    // Layout may have moved the edited input — keep the IME proxy (and with
+    // it the IME candidate window) pinned to the painted caret.
+    if (this.textEditor.isActive()) {
+      this.textEditor.syncProxyPosition();
+    }
+
+    // Keep the semantics overlay's element boxes on the painted bounds so
+    // screen-reader browse modes (geometry-driven) track layout changes.
+    this.accessibilityLayer.syncPositions(this.rootNode);
+
     // Performance logging
     if (this.options.logPerformance) {
       const elapsed = performance.now() - startTime;
@@ -611,6 +716,51 @@ export class CanvasRenderer implements Renderer {
     }
   }
 
+  /**
+   * Re-derive cached computed fields that may have been overridden by variant
+   * resolution. `node.opacity` is read straight off `node.props.opacity` in
+   * paint, but it is cached on the node at create/setProp time — after a
+   * variant pass changes `props.opacity` (e.g. `opacity:disabled`), the cache
+   * must be refreshed or the paint would use the stale value.
+   */
+  private refreshComputedProps(node: VirtualNode): void {
+    deriveNodeComputed(node);
+    for (const child of node.children) {
+      this.refreshComputedProps(child);
+    }
+  }
+
+  /**
+   * Resolve variants and re-run layout when (and only when) something that
+   * affects layout changed since the last frame. Variants are resolved every
+   * frame — hover/focus/pressed winners must reach paint — but the Taffy
+   * solve, computed-prop refresh, and scroll-bounds pass only run when a
+   * patch/resize/font/image marked the layout dirty or a variant winner
+   * actually changed (variants can rewrite spacing/size props).
+   */
+  private runLayoutIfNeeded(dpr: number): void {
+    if (!this.rootNode) return;
+
+    // Resolve responsive + state variants against the current content width
+    // BEFORE layout so spacing/size winners feed the layout engine and
+    // colour/opacity winners feed paint.
+    const contentWidth = this.canvas.width / dpr;
+    const variantsChanged = applyVariants(this.rootNode, contentWidth);
+    if (!variantsChanged && !this.layoutDirty) return;
+
+    this.refreshComputedProps(this.rootNode);
+
+    computeLayout(
+      this.ctx,
+      this.rootNode,
+      contentWidth,
+      this.canvas.height / dpr
+    );
+
+    ScrollManager.updateScrollBounds(this.rootNode);
+    this.layoutDirty = false;
+  }
+
   /**
    * Full canvas repaint (default behavior when dirty rects disabled)
    */
@@ -626,14 +776,7 @@ export class CanvasRenderer implements Renderer {
 
     // Layout and paint
     if (this.rootNode) {
-      computeLayout(
-        this.ctx,
-        this.rootNode,
-        this.canvas.width / dpr,
-        this.canvas.height / dpr
-      );
-
-      ScrollManager.updateScrollBounds(this.rootNode);
+      this.runLayoutIfNeeded(dpr);
 
       paintNode(this.ctx, this.rootNode);
 
@@ -647,16 +790,7 @@ export class CanvasRenderer implements Renderer {
    * Optimized render that only repaints dirty regions
    */
   private renderWithDirtyRects(dpr: number): void {
-    // Always run layout so nodes have up-to-date bounds
-    if (this.rootNode) {
-      computeLayout(
-        this.ctx,
-        this.rootNode,
-        this.canvas.width / dpr,
-        this.canvas.height / dpr
-      );
-      ScrollManager.updateScrollBounds(this.rootNode);
-    }
+    this.runLayoutIfNeeded(dpr);
 
     const dirtyRegion = this.dirtyTracker.getDirtyRegion();
     this.dirtyTracker.clear();
@@ -682,9 +816,11 @@ export class CanvasRenderer implements Renderer {
       this.ctx.fillRect(dirtyRegion.x, dirtyRegion.y, dirtyRegion.width, dirtyRegion.height);
     }
 
-    // Repaint the full tree — clip path ensures only dirty pixels are touched
+    // Repaint the tree — the clip path bounds rasterized pixels and the
+    // dirty region is threaded through paintNode so subtrees that cannot
+    // reach it are pruned from the traversal entirely.
     if (this.rootNode) {
-      paintNode(this.ctx, this.rootNode);
+      paintNode(this.ctx, this.rootNode, dirtyRegion);
 
       if (this.options.showLayoutBounds) {
         this.drawLayoutBounds(this.rootNode);
@@ -733,11 +869,13 @@ export class CanvasRenderer implements Renderer {
    * Clear renderer
    */
   clear(): void {
+    this.textEditor.endEditing();
     this.rootNode = null;
     this.nodes.clear();
     this.eventManager.setRootNode(null);
     this.scrollManager.setRootNode(null);
     this.selectionManager.setRootNode(null);
+    this.accessibilityLayer.rebuild(null);
     this.dirtyTracker.clear();
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
   }
@@ -754,7 +892,12 @@ export class CanvasRenderer implements Renderer {
    */
   setOptions(options: Partial<CanvasRendererOptions>): void {
     this.options = { ...this.options, ...options };
-    this.accessibilityLayer.setEnabled(this.options.enableAccessibility || false);
+    // Re-enabling rebuilds the mirror from the current tree — incremental
+    // sync has no history to replay for the disabled period.
+    this.accessibilityLayer.setEnabled(
+      this.options.enableAccessibility || false,
+      this.rootNode,
+    );
   }
 
   /**
@@ -764,19 +907,16 @@ export class CanvasRenderer implements Renderer {
     if (this.rafId !== null) {
       cancelAnimationFrame(this.rafId);
     }
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
-    if (this.dprMediaQuery && this.dprChangeHandler) {
-      this.dprMediaQuery.removeEventListener("change", this.dprChangeHandler);
-      this.dprMediaQuery = null;
-      this.dprChangeHandler = null;
+    if (typeof document !== "undefined") {
+      (document as any).fonts?.removeEventListener?.("loadingdone", this.boundFontsLoaded);
     }
     this.eventManager.destroy();
     this.scrollManager.destroy();
     this.selectionManager.destroy();
     setSelectionManager(null);
+    this.textEditor.destroy();
+    setTextEditor(null);
+    this.focusManager.destroy();
     this.accessibilityLayer.destroy();
   }
 }