Custom cursor images (+ DPR-aware) #10

Why

A contextual cursor exists but only from CSS keywords. We want custom cursor images for specific states (e.g. crosshair-with-plus on click-on-start-dot), crisp on any screen (a single raster PNG looks blurry on retina, so use DPR variants).

Proposed solution

• Default images (infra only; host registers its own).
• Demo "+element" cursor on link-start / start-dot hover (currently crosshair), crisp on retina — once assets exist.
• Optional variant B: rasterize SVG into a canvas at current devicePixelRatio, return a data-URL of the right pixel size; recompute via matchMedia('(resolution: …)') on DPR/screen change — only if image-set turns out blurry for fractional DPR.
• Unit test for assembling the CSS string (image-set / hotspot / fallback).

Where in code:

• packages/state/src/editor.ts — computeCursor / refreshCursor, override registry, DPR recompute.
• packages/state/src/handle.ts — resize-cursor roles (optional).
• apps/diagram / react-ui — registering default images + assets.

Kind: feature

Alternatives / Notes

• Status (2026-06-16): infra done — Editor.setCursorOverride(role, spec | null) + types CursorRole / CursorSpec (editor.ts, exported from @oh-just-another/state); computeCursor routes every outcome through resolveCursor(role, keyword) (role override beats keyword); DPR via CSS image-set(url 1x, url@2x 2x) (agreed 2026-06-16); CursorSpec accepts url / url2x / hotspot / fallback, or a raw CSS string; tests in tests/cursor.test.ts. Roles: default, pan-ready, pan-active, move, draw, text, link-start, link-handle, annotation, resize-{nwse,nesw,ns,ew}.
• Fallback keyword is mandatory: browser caps cursor size (Chrome ~128px) and the hotspot must land within the frame. A bare <svg> as a cursor is unstable, so rasterizing SVG is more reliable for variant B.
• Done criterion: custom cursor shows on the right state, crisp at DPR 1/2/2.5, keyword fallback works; manual check on retina and non-retina. No scene changes (cursor is host view-state); CSS host.style.cursor, not canvas — neither backend affected.