@hypen-space/web 0.4.82 → 0.4.83

package/src/canvas/PARITY.md

@@ -0,0 +1,254 @@
+# Canvas Renderer — DOM Parity Gaps
+
+Tracked list of gaps between `CanvasRenderer` and `DOMRenderer` when driven by
+the real WASM engine (the social example is the reference workload).
+
+The renderer currently handles the basic cases its unit tests cover (simple
+column/row flex, flat prop names), but has not been exercised end-to-end
+against engine output. Recent fixes landed the obvious bridging layer —
+applicator-namespaced props, rem/em length parsing, `scrollable`↔`overflow`,
+`aspectRatio` — and an additional batch (Stack overlay, image intrinsic
+aspect, per-axis scroll, hit-test scroll offset, intrinsic-size flex-shrink)
+landed alongside the `tests/canvas-parity.test.ts` fixture suite. The
+remaining items below still block full parity.
+
+## Known gaps
+
+### Text
+
+- **Line wrapping inside flex rows.** Text that wraps across lines in the
+  DOM currently either overflows horizontally or reports the wrong measured
+  height back to Taffy. Columns below it then collapse because subsequent
+  children layout against stale content height.
+- **Measurement before first layout pass.** Text nodes report width based on
+  `ctx.measureText` at the moment the Taffy tree is built; when the Taffy
+  WASM layer initialises async, early frames get the JS-flexbox fallback and
+  measurements can disagree between the two paths.
+
+### Layout
+
+- **`Stack` absolute positioning.** Fixed — Stack now uses Taffy Grid with a
+  single 1×1 cell and every child placed at `gridColumn: 1 / 2; gridRow: 1
+  / 2`, mirroring the DOM `grid-template-areas: "stack"` strategy.
+  `horizontalAlignment` / `verticalAlignment` map to `justifyItems` /
+  `alignItems` so the badge can pin to any corner.
+- **`Image` natural-size fallback.** Fixed — when an Image declares only one
+  of `width`/`height` and its intrinsic size is known (loaded image, or
+  seeded via `setImageNaturalSize` for tests), the other dimension is
+  derived from `naturalWidth / naturalHeight` and pinned explicitly so the
+  flex parent's default `align-items: stretch` can't override it.
+- **Per-axis scroll.** Fixed — `getScrollAxes(node)` returns `{ x, y }` and
+  the wheel/drag/clamp paths in `ScrollManager` honour each axis
+  independently. A horizontal strip with `scrollable: "horizontal"` no
+  longer accumulates Y scroll range from tall children, and the layout
+  builder additionally drops `flex-shrink` to 0 on direct children of a
+  main-axis-scrollable parent so items overflow instead of collapsing.
+- **Scrolled hit-testing / event routing.** Fixed — `getScrollAwareBounds`
+  no longer double-walks the parent chain to add `contentX/Y` (the layout
+  pass already writes absolute coordinates), and only subtracts each
+  scrollable ancestor's scroll offset. `getAbsoluteBounds` simplified to
+  match.
+
+### Painters
+
+- **Button transparent background.** Fixed — explicit backgrounds now win
+  over the default-blue hover swap. Mentioned here as the canary for
+  per-component painters that still assume flat-prop defaults; audit the
+  rest of `paint.ts` against engine output.
+- **Icon sizing inside buttons.** Fixed — intrinsic-sized components (icon,
+  avatar, badge, switch, checkbox, radio, spinner) now default to
+  `flex-shrink: 0`. They keep their default size in tight cross-axis
+  containers instead of collapsing to 0×0.
+- **Border-radius clamping.** Fixed — Tailwind's `rounded-full` lands as
+  `border-radius: 9999px`. Without clamping, `drawRoundedRect`'s arcs
+  wrapped outside the box and a 20×20 blue badge painted as a 470×250
+  rectangle, swamping the Stories row. `drawRoundedRect` and
+  `isPointInRoundedRect` now clamp `radius` to `min(width, height) / 2`.
+
+### Hosting
+
+- **Taffy WASM 404 in the social example.** Fixed in
+  `examples/social/typescript/web_canvas/serve.ts` — the bundled canvas
+  references `taffy_wasm_bg.wasm` at the page origin, so the dev server
+  needs to serve it. Without this route the renderer silently falls back
+  to the JS flexbox path, which drops most of the parity work above.
+
+### Engine prop shape
+
+- **Element type case sensitivity.** Fixed — engine emits types
+  capitalised (`"Text"`, `"Button"`, `"Input"`, …). The Taffy `buildTree`
+  text-leaf check used `node.type === "text"` and missed; every Text
+  became an empty container with size 0×0 and downstream siblings landed
+  on top of each other (the visible symptom: "1,431 likes" overlapped the
+  caption row). The renderer's `clickable`/`focusable` flags had the same
+  bug — Buttons weren't flagged clickable, so cursor barely fired.
+  All per-type checks now lowercase the type before comparing.
+
+### Painters
+
+- **Image circular clipping.** Fixed — `paintImage` clips to the rounded
+  box before drawing, so `rounded-full` avatars actually paint as circles
+  (story rings + post-header avatars). Also added `objectFit: cover`
+  semantics — the source is centered and cropped instead of stretched.
+
+### Scrolling
+
+- **Root inflated by overflowing children.** Fixed — when the root has no
+  explicit width/height, `computeLayoutTaffy` now pins it to the canvas
+  dimensions. Previously a horizontally-scrollable Stories row with 5+
+  w-24 items inflated the entire feed to 607px on a 470px canvas and
+  pushed the BottomNav off-screen.
+- **Scroll containers contribute their min-content to parent layout.**
+  Fixed — scrollable nodes set `style.overflow = Scroll` on the relevant
+  axis. Children still flow at intrinsic positions (so
+  `ScrollManager.updateScrollBounds` sees the correct scrollHeight) but
+  the container itself stops bubbling its min-content sideways.
+
+### Events
+
+- **Cursor flash on hover over Buttons.** Fixed — the hit test returns
+  the deepest visible node, which for a Button-with-Icon is the Icon
+  (not clickable). `events.ts` now lifts the hit to the nearest
+  clickable ancestor for hover/cursor and click/mousedown/mouseup
+  dispatch, so the cursor stays a pointer over the whole Button surface.
+- **Clicks silently dropped after `mouseup`.** Fixed — `onMouseUp`
+  cleared `mouseDownNode = null`, but the browser fires `click` AFTER
+  `mouseup`, and `onClick`'s press+release sameness check then always
+  failed (`null !== <Button>`). The clear is now done in `onClick`.
+
+### Text rendering
+
+- **`View all X comments` wraps to 2 lines.** Fixed — pretext returns a
+  fractional pixel width (e.g. `141.71875` for "View all 87 comments"),
+  Taffy gives the Button exactly that, but at paint time `renderText`
+  re-measures with a maxWidth of the integer-rounded box width and
+  pretext wraps because `141.71 > 141`. The Taffy measure callback now
+  returns `Math.ceil(metrics.width)` so the box reserves the next whole
+  pixel up.
+
+### Components
+
+- **`List` rendered as a row.** Fixed — `List` is the DSL's vertical-
+  iteration container (DOM uses `flex-direction: column`). The canvas
+  buildTaffyStyle now treats `type === "list"` as Column unless the
+  `direction` prop says `"horizontal"`. Notifications stack vertically
+  again.
+- **`Grid(...).gridColumns(N)` rendered as 1 column.** Fixed — the
+  canvas was reading `gridTemplateColumns`/`columns` only, but the
+  engine emits the applicator name (`gridColumns`) on props. Also,
+  `parseGridTemplate(N)` now expands a bare number to N equal `1fr`
+  tracks (matching `dom/applicators/advanced-layout.ts`).
+- **Grid items with `width: "100%"` collapsed track sizing.** Fixed —
+  on a Grid child, `width: "100%"` creates a circular dependency with
+  `1fr` track sizing (the cell wants to be `1fr` of the grid; the item
+  wants to be `100%` of the cell). Children of a Grid container now
+  ignore `width: "100%"` / `height: "100%"` (use `auto`) so Taffy's
+  default grid stretch fills the cell.
+- **Grid items with `aspect-ratio: 1` swallowed siblings.** Fixed —
+  default `min-width: auto` (= min-content) on grid items collapsed
+  tracks. Grid children now default to `min-width: 0; min-height: 0`,
+  the standard CSS workaround.
+
+### Flex defaults
+
+- **`flex: 1` shorthand left basis at `auto`.** Fixed — `flex: 1` in
+  CSS expands to `flex: 1 1 0%`, but the canvas was only reading the
+  grow value. Without the `0%` basis, an overflowing flex item started
+  at its intrinsic content size and Taffy redistributed from there,
+  squeezing the BottomNav off-screen on long routes (the home feed
+  with N posts; the search grid with 100s of items).
+
+### Z-order
+
+- **Absolute-positioned overlays painted under in-flow siblings.**
+  Fixed — Story declares its close-button header BEFORE the full-screen
+  Image; CSS `z-index` puts the header on top, but Canvas paints in
+  tree order, so the Image covered the header (and the Hover/click
+  for the close button hit the Image instead). `paintNode` now paints
+  flow children first, then absolute children on top; `events.ts`
+  hit-tests absolutes first (front-to-back). Story's ✕ navigates
+  back to `/` again.
+
+### Form controls
+
+- **Input / Textarea collapse to padding-only height.** Fixed —
+  `Input`, `Textarea`, and `Select` paint via the `InputOverlay` HTML
+  element, so the canvas layout doesn't see their text content as
+  children. The default fall-through gave them `size.auto`, and Taffy
+  (border-box by default) collapsed the box to padding only — the
+  social Search bar rendered as a 4-tall pill instead of the ~36 the
+  DOM produces, with the `Search` placeholder peeking out of a sliver
+  that looked nothing like the iOS / Android equivalent. Each control
+  now sets `size.height = lineHeight × rows + padding + border` so the
+  outer box matches the DOM, with Textarea defaulting to `rows: 3`.
+
+### Grid auto rows
+
+- **Aspect-ratio image grid collapses to gap-tall rows.** Fixed —
+  Taffy's grid auto-row sizing queries each leaf's max-content height
+  before column widths are resolved. For an Image leaf with no fixed
+  height, max-content = 0, so a `Grid.gridColumns(3)` of `aspect-square`
+  images sized the implicit rows to gap-only and items overlapped by
+  ~150px each (the Search route's explore grid was a single squashed
+  band of every image). `computeLayout` now runs a second Taffy pass
+  when `annotateCollapsedAspectGrids` finds a Grid where the next-row
+  child sits closer than `firstChild.width / aspectRatio` — the second
+  pass reads a private `__autoRowsPx` hint set on the grid (column
+  width / aspectRatio) and pins implicit rows to that height. Two-pass
+  cost is bounded: only fires when an aspect-ratio overflow is observed,
+  not on every layout.
+
+### HiDPI
+
+- **Hit tests offset by `dpr` on Mac retina screens.** Fixed —
+  `events.ts` `getCanvasCoordinates` (and the same helpers in `scroll.ts`
+  / `selection.ts` / `input.ts`) used to multiply client coords by
+  `canvas.width / rect.width`, which equals `devicePixelRatio` because
+  the renderer scales the ctx by dpr at setup. Layout (and therefore
+  the hit-test bounds) live in CSS pixels — multiplying again landed
+  every click at 2× the bounds. Visible symptoms on a Mac (dpr=2):
+  the cursor turned to a pointer ABOVE the actual story avatar instead
+  of on it, and bottom-nav clicks/hovers fell off the bottom of the
+  canvas entirely (y=850 logical → y=1700 canvas-pixel, past the 900
+  canvas height). Drag-scroll deltas and Input/Textarea overlay
+  positioning had the same family of bug. All four now use logical
+  CSS pixels directly.
+
+### Action wire format
+
+- **`@router.push` dispatched verbatim.** Fixed — DOM strips the `@`
+  prefix and the `actions.` namespace before sending to the engine,
+  but the canvas was sending `@router.push` literal. The engine
+  silently dropped it, so every nav click was a no-op. `props.ts`
+  `resolveEventAction` now mirrors `dom/applicators/events.ts`
+  `extractActionDetails`.
+
+### Engine prop shape (continued)
+
+- **Click was always `null !== <Button>`.** Fixed — `onMouseUp`
+  cleared `this.mouseDownNode = null`, but the browser fires `click`
+  AFTER `mouseup`. The `node === mouseDownNode` press+release check
+  in `onClick` always saw `null`. The clear is now done at the end
+  of `onClick` instead.
+
+## Not yet assessed
+
+- Input / Textarea focus + caret positioning against the InputOverlay DOM
+  inputs.
+- Select / Switch / Slider under engine-driven props.
+- Router attach/detach patches (subtree caching) — the canvas renderer
+  implements `detach` / `attach` but hasn't been tested against the
+  ManagedRouter persist-cache path.
+
+## How to make progress
+
+The shape of each of these is the same: write a small fixture in
+`tests/canvas-*.test.ts` that reproduces the engine-output shape (use the
+patches captured in `ws://localhost:3000` as the input), assert the expected
+layout / paint output, then fix the canvas code until the test passes. The
+screenshot-driven loop we've been in is too expensive; the real investment
+is in fixture tests that pin behaviour.
+
+The social example under `examples/social/typescript/web_canvas/` is the
+end-to-end integration check, not a regression target — carry a visible
+"partial" banner until parity is reached.

package/src/canvas/events.ts

@@ -7,6 +7,7 @@
 import type { VirtualNode, Point } from "./types.js";
 import { isPointInRoundedRect } from "./utils.js";
 import { getScrollAwareBounds } from "./scroll.js";
+import { resolveEventAction } from "./props.js";
 
 // Interface for the engine that CanvasEventManager needs
 interface IEngine {
@@ -23,6 +24,9 @@ export class CanvasEventManager {
   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;
 
   // Bound handler references for cleanup
   private boundOnMouseMove!: (e: MouseEvent) => void;
@@ -47,6 +51,19 @@ export class CanvasEventManager {
     this.rootNode = node;
   }
 
+  /**
+   * 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.
+   */
+  setFocusChangeHandler(
+    fn: ((next: VirtualNode | null, prev: VirtualNode | null) => void) | null,
+  ): void {
+    this.focusChangeHandler = fn;
+  }
+
   /**
    * Setup canvas event listeners
    */
@@ -71,16 +88,20 @@ export class CanvasEventManager {
   }
 
   /**
-   * Get canvas coordinates from mouse event
+   * Get canvas coordinates from mouse event.
+   *
+   * Returns LOGICAL pixels (CSS pixels), matching the layout coordinate
+   * space. Layout is computed in logical units because the renderer calls
+   * `ctx.scale(dpr, dpr)` once at setup; do NOT multiply by `canvas.width /
+   * rect.width` here — that would land hit tests in canvas-pixel space (2x
+   * on a HiDPI Mac), with the practical effect that the cursor changes to a
+   * pointer above the actual element instead of on it.
    */
   private getCanvasCoordinates(e: MouseEvent): Point {
     const rect = this.canvas.getBoundingClientRect();
-    const scaleX = this.canvas.width / rect.width;
-    const scaleY = this.canvas.height / rect.height;
-
     return {
-      x: (e.clientX - rect.left) * scaleX,
-      y: (e.clientY - rect.top) * scaleY,
+      x: e.clientX - rect.left,
+      y: e.clientY - rect.top,
     };
   }
 
@@ -93,7 +114,10 @@ export class CanvasEventManager {
   }
 
   /**
-   * Recursively test node and children
+   * Recursively test node and children. Absolute-positioned siblings are
+   * 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.
    */
   private hitTestNode(node: VirtualNode, point: Point): VirtualNode | null {
     if (!node.visible || !node.layout) return null;
@@ -101,9 +125,17 @@ export class CanvasEventManager {
     const bounds = getScrollAwareBounds(node);
     if (!bounds) return null;
 
-    // Test children first (front to back)
+    // 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);
+      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);
       if (hit) return hit;
     }
@@ -117,12 +149,31 @@ export class CanvasEventManager {
     return null;
   }
 
+  /**
+   * Walk up from a node to find the nearest clickable ancestor (or the node
+   * itself if it's clickable). Returns null if none. Used so that hovering
+   * a non-clickable child of a Button (e.g. the Icon inside a transparent
+   * nav button) still resolves to the Button for cursor + click purposes.
+   */
+  private findClickableAncestor(node: VirtualNode | null): VirtualNode | null {
+    let current = node;
+    while (current) {
+      if (current.clickable) return current;
+      current = current.parent;
+    }
+    return null;
+  }
+
   /**
    * Handle mouse move
    */
   private onMouseMove(e: MouseEvent): void {
     const point = this.getCanvasCoordinates(e);
-    const node = this.hitTest(point);
+    const hit = this.hitTest(point);
+    // Resolve to the clickable ancestor so the cursor stays a pointer over
+    // the whole Button surface (not flashing back to default whenever the
+    // mouse passes over the Button's non-clickable Icon child).
+    const node = this.findClickableAncestor(hit) ?? hit;
 
     // Update hover state
     if (node !== this.hoveredNode) {
@@ -152,7 +203,10 @@ export class CanvasEventManager {
    */
   private onMouseDown(e: MouseEvent): void {
     const point = this.getCanvasCoordinates(e);
-    const node = this.hitTest(point);
+    // Same lift-to-clickable as hover so a click on a Button's Icon child
+    // dispatches against the Button (where `onClick` actually lives).
+    const hit = this.hitTest(point);
+    const node = this.findClickableAncestor(hit) ?? hit;
 
     this.mouseDownNode = node;
 
@@ -177,7 +231,8 @@ export class CanvasEventManager {
    */
   private onMouseUp(e: MouseEvent): void {
     const point = this.getCanvasCoordinates(e);
-    const node = this.hitTest(point);
+    const hit = this.hitTest(point);
+    const node = this.findClickableAncestor(hit) ?? hit;
 
     if (node && node.clickable) {
       this.dispatchNodeEvent(node, "mouseup", {
@@ -187,7 +242,11 @@ export class CanvasEventManager {
       });
     }
 
-    this.mouseDownNode = null;
+    // NOTE: do NOT clear `this.mouseDownNode` here — the browser fires
+    // `click` after `mouseup`, and onClick uses mouseDownNode to verify
+    // press+release happened on the same target. Clearing here meant the
+    // click handler always saw `null` and silently dropped every click.
+    // The click handler clears mouseDownNode itself.
   }
 
   /**
@@ -195,7 +254,8 @@ export class CanvasEventManager {
    */
   private onClick(e: MouseEvent): void {
     const point = this.getCanvasCoordinates(e);
-    const node = this.hitTest(point);
+    const hit = this.hitTest(point);
+    const node = this.findClickableAncestor(hit) ?? hit;
 
     if (node && node.clickable && node === this.mouseDownNode) {
       this.dispatchNodeEvent(node, "click", {
@@ -204,6 +264,7 @@ export class CanvasEventManager {
         clientY: e.clientY,
       });
     }
+    this.mouseDownNode = null;
   }
 
   /**
@@ -276,9 +337,10 @@ export class CanvasEventManager {
   private setFocus(node: VirtualNode | null): void {
     if (node === this.focusedNode) return;
 
-    if (this.focusedNode) {
-      this.focusedNode.focused = false;
-      this.dispatchNodeEvent(this.focusedNode, "blur", {});
+    const prev = this.focusedNode;
+    if (prev) {
+      prev.focused = false;
+      this.dispatchNodeEvent(prev, "blur", {});
     }
 
     this.focusedNode = node;
@@ -288,9 +350,16 @@ export class CanvasEventManager {
       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
    */
@@ -300,7 +369,13 @@ export class CanvasEventManager {
       return;
     }
 
-    const cursor = node.props.cursor || (node.clickable ? "pointer" : "default");
+    let cursor: string | undefined = node.props.cursor;
+    if (!cursor) {
+      const t = node.type.toLowerCase();
+      if (t === "input" || t === "textarea") cursor = "text";
+      else if (node.clickable) cursor = "pointer";
+      else cursor = "default";
+    }
     this.canvas.style.cursor = cursor;
   }
 
@@ -308,23 +383,29 @@ export class CanvasEventManager {
    * Dispatch event to engine
    */
   private dispatchNodeEvent(node: VirtualNode, eventType: string, data: any): void {
-    // Check if node has action handler for this event
-    let actionName = node.props[`on${eventType}`] || node.props[eventType];
-
-    // Actionable components: fall back to "action" prop for click events
-    if (!actionName && eventType === "click" && node.props.action) {
-      actionName = node.props.action;
+    // 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;
     }
 
-    if (actionName && typeof actionName === "string") {
-      // Dispatch to engine
-      this.engine.dispatchAction(actionName, {
-        type: eventType,
-        nodeId: node.id,
-        timestamp: Date.now(),
-        ...data,
-      });
-    }
+    const resolved = resolveEventAction(spec);
+    if (!resolved) return;
+
+    this.engine.dispatchAction(resolved.actionName, {
+      type: eventType,
+      nodeId: node.id,
+      timestamp: Date.now(),
+      ...resolved.payload,
+      ...data,
+    });
   }
 
   /**

package/src/canvas/input.ts

@@ -5,7 +5,7 @@
  */
 
 import type { VirtualNode, Rectangle } from "./types.js";
-import { getAbsoluteBounds } from "./utils.js";
+import { getAbsoluteBounds, cssLengthToPx } from "./utils.js";
 
 /** Minimal engine interface for dispatching bind actions */
 interface BindEngine {
@@ -28,7 +28,12 @@ export class InputOverlay {
   }
 
   /**
-   * Show input overlay for a node
+   * 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,
@@ -48,7 +53,7 @@ export class InputOverlay {
     const bounds = getAbsoluteBounds(node);
     if (!bounds) return;
 
-    const isMultiline = node.type === "textarea";
+    const isMultiline = node.type.toLowerCase() === "textarea";
     this.overlay = isMultiline
       ? document.createElement("textarea")
       : document.createElement("input");
@@ -66,8 +71,10 @@ export class InputOverlay {
     this.overlay.addEventListener("blur", this.onBlur.bind(this));
     this.overlay.addEventListener("keydown", this.onKeyDown.bind(this) as EventListener);
 
-    // Add to DOM and focus
-    this.container.appendChild(this.overlay);
+    // 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;
@@ -114,24 +121,35 @@ export class InputOverlay {
     // Position
     this.positionOverlay(bounds, canvasBounds);
 
-    // Font and text styling
-    const fontSize = parseFloat(props.fontSize) || 16;
+    // 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: fontWeight,
+      fontWeight: String(fontWeight),
       fontFamily: fontFamily,
       color: color,
       border: "none",
-      outline: "2px solid #007bff",
+      outline: "none",
       backgroundColor: props.backgroundColor || "#ffffff",
-      padding: `${props.padding || 8}px`,
-      borderRadius: `${props.borderRadius || 4}px`,
+      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
@@ -146,27 +164,28 @@ export class InputOverlay {
   }
 
   /**
-   * Position overlay over canvas node
+   * 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;
 
-    // Calculate scale factor between canvas and display
-    const canvas = this.container.querySelector("canvas") as HTMLCanvasElement;
-    const scaleX = canvasBounds.width / canvas.width;
-    const scaleY = canvasBounds.height / canvas.height;
-
-    const left = bounds.x * scaleX;
-    const top = bounds.y * scaleY;
-    const width = bounds.width * scaleX;
-    const height = bounds.height * scaleY;
+    const sx = typeof window !== "undefined" ? window.scrollX : 0;
+    const sy = typeof window !== "undefined" ? window.scrollY : 0;
 
     Object.assign(this.overlay.style, {
       position: "absolute",
-      left: `${left}px`,
-      top: `${top}px`,
-      width: `${width}px`,
-      height: `${height}px`,
+      left: `${canvasBounds.left + sx + bounds.x}px`,
+      top: `${canvasBounds.top + sy + bounds.y}px`,
+      width: `${bounds.width}px`,
+      height: `${bounds.height}px`,
     });
   }