@weasel-js/labkit 1.4.0-pre.0 → 1.4.0

package/dist/{chunk-ROQDRXKW.js → chunk-7VW3S44V.js}

@@ -1,9 +1,9 @@
-import { createContext, createElement, forwardRef, useMemo, useRef, useCallback, useState, useImperativeHandle, useSyncExternalStore, useEffect, useLayoutEffect, useContext, useId, useReducer } from 'react';
+import { createContext, createElement, forwardRef, useMemo, useRef, useCallback, useState, useEffect, useImperativeHandle, useSyncExternalStore, useLayoutEffect, useContext, useId, useReducer } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import earcut from 'earcut';
 import polygonClipping from 'polygon-clipping';
 
-// ../core/dist/chunk-H6E6KPTU.js
+// ../core/dist/chunk-UTIFY2UU.js
 
 // ../gestures/dist/index.js
 var GESTURE_DESCRIPTORS = [
@@ -287,7 +287,7 @@ function matchSpec(e, spec, isMac, phaseCtx) {
 }
 var EMPTY_ENGAGED = /* @__PURE__ */ new Set();
 
-// ../core/dist/chunk-H6E6KPTU.js
+// ../core/dist/chunk-UTIFY2UU.js
 var DepRegistryContext = createContext(null);
 function DepRegistryProvider({ children }) {
   const sourcesRef = useRef(/* @__PURE__ */ new Map());
@@ -3841,6 +3841,403 @@ function eligibleContribution(reg, entry) {
   return eligibleForMode(reg.current(), entry.eligibility?.capabilities ?? []);
 }
 
+// ../cursor/dist/index.js
+var CURSOR_INK = "#141418";
+var CURSOR_HALO = "#ffffff";
+var CURSOR_HALO_WIDTH = 2.6;
+var CURSOR_ANGLE_STEPS = 16;
+var CURSOR_MAX_CSS_PX = 128;
+function halo(p, k) {
+  switch (p.role) {
+    case "ink":
+    case "accent":
+      return { d: p.d, fill: CURSOR_HALO, stroke: { color: CURSOR_HALO, width: CURSOR_HALO_WIDTH * k } };
+    case "stroke":
+      return { d: p.d, stroke: { color: CURSOR_HALO, width: (p.width + CURSOR_HALO_WIDTH) * k } };
+    // A detail IS halo-coloured and sits on top of the ink; it has no halo.
+    case "detail":
+      return null;
+  }
+}
+function ink(p, k) {
+  switch (p.role) {
+    case "ink":
+      return { d: p.d, fill: CURSOR_INK };
+    case "stroke":
+      return { d: p.d, stroke: { color: CURSOR_INK, width: p.width * k } };
+    case "detail":
+      return { d: p.d, stroke: { color: CURSOR_HALO, width: p.width * k } };
+    case "accent":
+      return { d: p.d, fill: p.fill };
+  }
+}
+function cursorPaintOps(glyph, opts = {}) {
+  const k = opts.lineWidthScale ?? 1;
+  const out = [];
+  for (const p of glyph.paths) {
+    const h = halo(p, k);
+    if (h) out.push(h);
+  }
+  for (const p of glyph.paths) out.push(ink(p, k));
+  return out;
+}
+function cursorPaintMatrix(glyph, placement) {
+  const s = placement.size / glyph.box;
+  const theta = placement.angle ?? 0;
+  const a = s * Math.cos(theta);
+  const b = s * Math.sin(theta);
+  const [hx, hy] = glyph.hotspot;
+  return [a, b, -b, a, placement.at.x - (a * hx - b * hy), placement.at.y - (b * hx + a * hy)];
+}
+function cursorWorldSize(glyph, worldRadius, scale2) {
+  const r = glyph.radius ?? glyph.box / 2;
+  return worldRadius * scale2 * glyph.box / r;
+}
+function chromeLineWidthScale(glyph, size) {
+  return glyph.box / size;
+}
+function quantizeCursorAngle(angle) {
+  const i = Math.round(angle / (Math.PI * 2) * CURSOR_ANGLE_STEPS);
+  return (i % CURSOR_ANGLE_STEPS + CURSOR_ANGLE_STEPS) % CURSOR_ANGLE_STEPS;
+}
+function renderOp(op) {
+  const fill = op.fill === void 0 ? "none" : op.fill;
+  const stroke = op.stroke ? ` stroke="${op.stroke.color}" stroke-width="${op.stroke.width}" stroke-linecap="round" stroke-linejoin="round"` : "";
+  return `<path d="${op.d}" fill="${fill}"${stroke}/>`;
+}
+function bakeCursor(glyph, opts = {}) {
+  const size = opts.size ?? 24;
+  if (size > CURSOR_MAX_CSS_PX) {
+    throw new RangeError(
+      `cursor size ${size} exceeds the ${CURSOR_MAX_CSS_PX}px cap: the browser would drop the image and silently fall back. Use the painted tier.`
+    );
+  }
+  const paths = cursorPaintOps(glyph).map(renderOp).join("");
+  const c = glyph.box / 2;
+  const step = quantizeCursorAngle(opts.angle ?? 0);
+  const theta = step / CURSOR_ANGLE_STEPS * Math.PI * 2;
+  const body = step === 0 ? paths : `<g transform="rotate(${step * 360 / CURSOR_ANGLE_STEPS} ${c} ${c})">${paths}</g>`;
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${glyph.box} ${glyph.box}">${body}</svg>`;
+  const dx = glyph.hotspot[0] - c;
+  const dy = glyph.hotspot[1] - c;
+  const cos = Math.cos(theta);
+  const sin = Math.sin(theta);
+  const hx = Math.round((c + cos * dx - sin * dy) / glyph.box * size);
+  const hy = Math.round((c + sin * dx + cos * dy) / glyph.box * size);
+  const uri = `data:image/svg+xml,${encodeURIComponent(svg)}`;
+  return `url("${uri}") ${hx} ${hy}, ${opts.fallback ?? "default"}`;
+}
+var GLYPHS = {
+  "pencil": {
+    "box": 24,
+    "hotspot": [
+      5,
+      19
+    ],
+    "paths": [
+      {
+        "role": "ink",
+        "d": "M 5 19 L 7.5 16.5 L 16 8 L 19 11 L 10.5 19.5 L 8 19 Z"
+      },
+      {
+        "role": "detail",
+        "d": "M 14 6 L 19 11",
+        "width": 1.2
+      }
+    ]
+  },
+  "pen": {
+    "box": 24,
+    "hotspot": [
+      5,
+      19
+    ],
+    "paths": [
+      {
+        "role": "ink",
+        "d": "M 5 19 L 8.5 9.5 L 13 5 L 18 10 L 13.5 14.5 Z"
+      },
+      {
+        "role": "detail",
+        "d": "M 8.4 13.9 L 12.2 10.1",
+        "width": 0.9
+      }
+    ]
+  },
+  "eyedropper": {
+    "box": 24,
+    "hotspot": [
+      5,
+      19
+    ],
+    "paths": [
+      {
+        "role": "ink",
+        "d": "M 5 19 L 6.8 14.8 L 14.4 7.2 L 16.8 9.6 L 9.2 17.2 Z"
+      },
+      {
+        "role": "ink",
+        "d": "M 18.2 2.6 A 3.2 3.2 0 1 0 18.2 9 A 3.2 3.2 0 1 0 18.2 2.6 Z"
+      }
+    ]
+  },
+  "brush": {
+    "box": 24,
+    "hotspot": [
+      12,
+      12
+    ],
+    "radius": 9.9,
+    "paths": [
+      {
+        "role": "stroke",
+        "d": "M 12 2.1 A 9.9 9.9 0 1 0 12 21.9 A 9.9 9.9 0 1 0 12 2.1 Z",
+        "width": 1.6
+      }
+    ]
+  },
+  "crosshairRect": {
+    "box": 24,
+    "hotspot": [
+      9,
+      9
+    ],
+    "paths": [
+      {
+        "role": "stroke",
+        "d": "M 1.6 9 L 6.4 9",
+        "width": 1.6
+      },
+      {
+        "role": "stroke",
+        "d": "M 11.6 9 L 16.4 9",
+        "width": 1.6
+      },
+      {
+        "role": "stroke",
+        "d": "M 9 1.6 L 9 6.4",
+        "width": 1.6
+      },
+      {
+        "role": "stroke",
+        "d": "M 9 11.6 L 9 16.4",
+        "width": 1.6
+      },
+      {
+        "role": "ink",
+        "d": "M 14.2 14.2 L 21 14.2 L 21 21 L 14.2 21 Z"
+      }
+    ]
+  },
+  "crosshairEllipse": {
+    "box": 24,
+    "hotspot": [
+      9,
+      9
+    ],
+    "paths": [
+      {
+        "role": "stroke",
+        "d": "M 1.6 9 L 6.4 9",
+        "width": 1.6
+      },
+      {
+        "role": "stroke",
+        "d": "M 11.6 9 L 16.4 9",
+        "width": 1.6
+      },
+      {
+        "role": "stroke",
+        "d": "M 9 1.6 L 9 6.4",
+        "width": 1.6
+      },
+      {
+        "role": "stroke",
+        "d": "M 9 11.6 L 9 16.4",
+        "width": 1.6
+      },
+      {
+        "role": "ink",
+        "d": "M 17.6 13.9 A 3.7 3.7 0 1 0 17.6 21.3 A 3.7 3.7 0 1 0 17.6 13.9 Z"
+      }
+    ]
+  },
+  "crosshairLine": {
+    "box": 24,
+    "hotspot": [
+      9,
+      9
+    ],
+    "paths": [
+      {
+        "role": "stroke",
+        "d": "M 1.6 9 L 6.4 9",
+        "width": 1.6
+      },
+      {
+        "role": "stroke",
+        "d": "M 11.6 9 L 16.4 9",
+        "width": 1.6
+      },
+      {
+        "role": "stroke",
+        "d": "M 9 1.6 L 9 6.4",
+        "width": 1.6
+      },
+      {
+        "role": "stroke",
+        "d": "M 9 11.6 L 9 16.4",
+        "width": 1.6
+      },
+      {
+        "role": "stroke",
+        "d": "M 14.2 21 L 21 14.2",
+        "width": 2.2
+      }
+    ]
+  },
+  "crosshairStar": {
+    "box": 24,
+    "hotspot": [
+      9,
+      9
+    ],
+    "paths": [
+      {
+        "role": "stroke",
+        "d": "M 1.6 9 L 6.4 9",
+        "width": 1.6
+      },
+      {
+        "role": "stroke",
+        "d": "M 11.6 9 L 16.4 9",
+        "width": 1.6
+      },
+      {
+        "role": "stroke",
+        "d": "M 9 1.6 L 9 6.4",
+        "width": 1.6
+      },
+      {
+        "role": "stroke",
+        "d": "M 9 11.6 L 9 16.4",
+        "width": 1.6
+      },
+      {
+        "role": "ink",
+        "d": "M 17.6 13.4 L 18.72 16.06 L 21.59 16.3 L 19.41 18.19 L 20.07 21 L 17.6 19.5 L 15.13 21 L 15.79 18.19 L 13.61 16.3 L 16.48 16.06 Z"
+      }
+    ]
+  },
+  "crosshairPolygon": {
+    "box": 24,
+    "hotspot": [
+      9,
+      9
+    ],
+    "paths": [
+      {
+        "role": "stroke",
+        "d": "M 1.6 9 L 6.4 9",
+        "width": 1.6
+      },
+      {
+        "role": "stroke",
+        "d": "M 11.6 9 L 16.4 9",
+        "width": 1.6
+      },
+      {
+        "role": "stroke",
+        "d": "M 9 1.6 L 9 6.4",
+        "width": 1.6
+      },
+      {
+        "role": "stroke",
+        "d": "M 9 11.6 L 9 16.4",
+        "width": 1.6
+      },
+      {
+        "role": "ink",
+        "d": "M 17.6 13.5 L 21.5 16.33 L 20.01 20.92 L 15.19 20.92 L 13.7 16.33 Z"
+      }
+    ]
+  },
+  "resize": {
+    "box": 24,
+    "hotspot": [
+      12,
+      12
+    ],
+    "paths": [
+      {
+        "role": "ink",
+        "d": "M 2.5 12 L 7 8.8 L 7 10.7 L 17 10.7 L 17 8.8 L 21.5 12 L 17 15.2 L 17 13.3 L 7 13.3 L 7 15.2 Z"
+      }
+    ]
+  },
+  "rotate": {
+    "box": 24,
+    "hotspot": [
+      12,
+      12
+    ],
+    "paths": [
+      {
+        "role": "stroke",
+        "d": "M 5.8 9.74 A 6.6 6.6 0 0 1 18.2 9.74",
+        "width": 2.8
+      },
+      {
+        "role": "ink",
+        "d": "M 4.22 14.07 L 2.98 8.72 L 8.62 10.77 Z"
+      },
+      {
+        "role": "ink",
+        "d": "M 19.78 14.07 L 15.38 10.77 L 21.02 8.72 Z"
+      }
+    ]
+  }
+};
+var cache2 = /* @__PURE__ */ new Map();
+function cursorFor(name, opts = {}) {
+  const size = opts.size ?? 24;
+  const fallback = opts.fallback ?? "default";
+  const step = quantizeCursorAngle(opts.angle ?? 0);
+  const key = `${name}|${size}|${step}|${fallback}`;
+  const hit = cache2.get(key);
+  if (hit !== void 0) return hit;
+  const glyph = GLYPHS[name];
+  if (glyph === void 0) {
+    throw new Error(`unknown cursor glyph: ${String(name)}`);
+  }
+  const css = bakeCursor(glyph, { size, fallback, angle: opts.angle ?? 0 });
+  cache2.set(key, css);
+  return css;
+}
+function resolveCursorTier(spec) {
+  if (typeof spec === "string") return { kind: "css", css: spec };
+  const { glyph, size, worldRadius, angle = 0, fallback } = spec;
+  if (worldRadius !== void 0) {
+    return { kind: "painted", glyph, angle, worldRadius };
+  }
+  if (size !== void 0 && size > CURSOR_MAX_CSS_PX) {
+    return { kind: "painted", glyph, angle, size };
+  }
+  return {
+    kind: "css",
+    css: cursorFor(glyph, {
+      ...size !== void 0 ? { size } : {},
+      ...fallback !== void 0 ? { fallback } : {},
+      angle
+    })
+  };
+}
+function resolveCursor(spec) {
+  if (spec === void 0) return void 0;
+  const r = resolveCursorTier(spec);
+  return r.kind === "css" ? r.css : "none";
+}
+
 // ../history/dist/index.js
 var RESUMERS = /* @__PURE__ */ new WeakMap();
 function _resumeJournalInternal(j) {
@@ -4263,7 +4660,7 @@ function serialToEntry(se, custom, logger) {
   };
 }
 
-// ../core/dist/chunk-IMFXEINV.js
+// ../core/dist/chunk-HYJL7OOJ.js
 function worldToScreen(worldX, worldY, view) {
   return [view.panX + worldX * view.zoom.x, view.panY + worldY * view.zoom.y];
 }
@@ -5821,12 +6218,12 @@ function pointInContour(coords, start, end, x, y) {
   }
   return inside;
 }
-var cache2 = /* @__PURE__ */ new WeakMap();
+var cache3 = /* @__PURE__ */ new WeakMap();
 function getMesh(path) {
-  const cached2 = cache2.get(path);
+  const cached2 = cache3.get(path);
   if (cached2 !== void 0) return cached2;
   const mesh = tessellate(path);
-  cache2.set(path, mesh);
+  cache3.set(path, mesh);
   return mesh;
 }
 function extractPolylines(path, opts = {}) {
@@ -6846,7 +7243,7 @@ function outlineMesh(key, d) {
 }
 var OUTLINE_STROKE_MESH_CACHE_LIMIT = 2048;
 var WIDTH_QUANTUM = 1 / 1024;
-var cache3 = /* @__PURE__ */ new Map();
+var cache32 = /* @__PURE__ */ new Map();
 function quantizeEmWidth(emWidth) {
   return Math.round(emWidth / WIDTH_QUANTUM) * WIDTH_QUANTUM;
 }
@@ -6861,15 +7258,15 @@ function outlineStrokeMesh(glyphKey, d, emWidth, stroke) {
     stroke.align ?? "center",
     (stroke.dash ?? []).join(",")
   ].join("|");
-  const cached2 = cache3.get(key);
+  const cached2 = cache32.get(key);
   if (cached2 !== void 0) return cached2.indices.length === 0 ? null : cached2;
-  if (cache3.size >= OUTLINE_STROKE_MESH_CACHE_LIMIT) cache3 = /* @__PURE__ */ new Map();
+  if (cache32.size >= OUTLINE_STROKE_MESH_CACHE_LIMIT) cache32 = /* @__PURE__ */ new Map();
   const mesh = tessellateStroke(
     pathFromD(d),
     { ...stroke, width: emWidth },
     { flattenTolerance: OUTLINE_FLATTEN_TOLERANCE }
   );
-  cache3.set(key, mesh);
+  cache32.set(key, mesh);
   return mesh.indices.length === 0 ? null : mesh;
 }
 function poly(pts, size, close = true) {
@@ -9768,8 +10165,8 @@ function runLayoutPass(scratch, moveCtx) {
       for (const [cid, pose] of srcLayout.childPoses(srcContainer, srcChildren)) {
         const cur = composeWorldPose(poseAdapter, cid, pc.compose);
         const next = pose;
-        const same = cur.x === next.x && cur.y === next.y && cur.width === next.width && cur.height === next.height;
-        if (same) continue;
+        const same2 = cur.x === next.x && cur.y === next.y && cur.width === next.width && cur.height === next.height;
+        if (same2) continue;
         sourceReflow.set(cid, pose);
         const parent = scene.get(asNodeId(cid))?.parent ?? null;
         scratch.previews.set(asNodeId(cid), rebaseLocalPose(poseAdapter, pose, parent, pc.compose, pc.decompose));
@@ -11123,6 +11520,11 @@ var cloneAction = {
   id: "clone",
   label: "Clone",
   defaultBinding: { kind: "drag" },
+  // The platform's duplicate cursor, and the whole reason this field is
+  // modifier-aware: the select tool binds clone behind `mods: { alt: true }`,
+  // so the pump predicts it — and shows this — only while Alt is down.
+  cursor: "copy",
+  activeCursor: "copy",
   eligible: { capability: ["edits-page", "creates-selection"] },
   requires: ["selection", "scene", "applyOps"],
   invoker: {
@@ -15513,7 +15915,7 @@ function createDispatcher(opts) {
   }
   function inFlightCursor() {
     for (const action of inFlightActions.values()) {
-      const cursor = action.activeCursor ?? action.cursor;
+      const cursor = resolveCursor(action.activeCursor ?? action.cursor);
       if (cursor) return cursor;
     }
     return null;
@@ -15735,7 +16137,7 @@ function computeMultiTouchGeometry(positions) {
   return { centroid, spread };
 }
 function useGestureDispatcher(opts) {
-  const { canvasRef, actions, toolsById, enabled = true, keyboard = true, affordanceAt, classifyTarget, dispatcher: dispatcherOpt, clientToWorld: clientToWorld2, requestRedraw, getRuleCtx, onDoubleClick, views } = opts;
+  const { canvasRef, actions, toolsById, enabled = true, keyboard = true, affordanceAt, classifyTarget, dispatcher: dispatcherOpt, clientToWorld: clientToWorld2, requestRedraw, paintedCursor, getRuleCtx, onDoubleClick, views } = opts;
   const onDoubleClickRef = useRef(onDoubleClick);
   onDoubleClickRef.current = onDoubleClick;
   const activeTool = useActiveToolContext();
@@ -15784,6 +16186,8 @@ function useGestureDispatcher(opts) {
   ];
   const requestRedrawRef = useRef(requestRedraw);
   requestRedrawRef.current = requestRedraw;
+  const paintedCursorRef = useRef(paintedCursor);
+  paintedCursorRef.current = paintedCursor;
   const lastClickRef = useRef(null);
   const prevActiveRef = useRef(activeTool.active);
   useEffect(() => {
@@ -16123,20 +16527,39 @@ function useGestureDispatcher(opts) {
     let lastHover = null;
     let cursorOverridden = false;
     const clearHoverCursor = () => {
+      paintedCursorRef.current?.()?.setOverride(null);
       if (cursorOverridden && canvas) {
         canvas.style.cursor = "";
         cursorOverridden = false;
       }
     };
-    const applyHoverCursor = (cursor) => {
-      if (cursor && canvas) {
-        canvas.style.cursor = cursor;
-        cursorOverridden = true;
-      } else {
+    const applyHoverCursor = (spec) => {
+      const tier = spec === null ? null : resolveCursorTier(spec);
+      if (!tier || !canvas) {
+        clearHoverCursor();
+        return;
+      }
+      const painted = tier.kind === "painted" ? tier : null;
+      paintedCursorRef.current?.()?.setOverride(painted);
+      const cursor = tier.kind === "css" ? tier.css : "none";
+      if (!cursor) {
         clearHoverCursor();
+        return;
       }
+      canvas.style.cursor = cursor;
+      cursorOverridden = true;
     };
+    function pushPaintedPointer() {
+      const painted = paintedCursorRef.current?.();
+      if (!painted?.active() || !canvas || !lastHover) return;
+      const r = canvas.getBoundingClientRect();
+      painted.setPointer(lastHover.clientX - r.left, lastHover.clientY - r.top);
+    }
     function refreshHoverCursor() {
+      resolveHoverCursor();
+      pushPaintedPointer();
+    }
+    function resolveHoverCursor() {
       if (!canvas || !lastHover) return;
       if (activePointers.size > 0 || dispatcherNow().inFlight().size > 0) {
         applyHoverCursor(dispatcherNow().inFlightCursor());
@@ -16188,6 +16611,7 @@ function useGestureDispatcher(opts) {
     };
     const onHoverPointerLeave = () => {
       lastHover = null;
+      paintedCursorRef.current?.()?.clearPointer();
       clearHoverCursor();
     };
     const onPointerUp = (e) => {
@@ -17697,7 +18121,7 @@ function validateId(id, kind) {
 }
 function defineTool(def) {
   validateId(def.id, "tool");
-  const resolveCursor = (ctx) => {
+  const resolveCursor3 = (ctx) => {
     if (def.cursor == null) return "";
     return typeof def.cursor === "function" ? def.cursor(ctx) : def.cursor;
   };
@@ -17715,7 +18139,7 @@ function defineTool(def) {
     onActivate: def.onActivate,
     onDeactivate: def.onDeactivate,
     initScratch: def.initScratch ?? (() => null),
-    cursor: resolveCursor,
+    cursor: resolveCursor3,
     bindings: def.bindings,
     overlay: def.overlay,
     overlayPosition: def.overlayPosition
@@ -18715,10 +19139,10 @@ function findShapeInk(node, pose, ctx) {
 function shapeCoversPoint(node, pose, x, y, opts = {}) {
   const sil = findShapeSilhouette(node, pose, { derivedPath: opts.derivedPath });
   if (sil === null) return true;
-  const ink = findShapeInk(node, pose, { scale: opts.scale }) ?? DEFAULT_INK;
+  const ink2 = findShapeInk(node, pose, { scale: opts.scale }) ?? DEFAULT_INK;
   const inside = pathContainsPoint(sil, x, y);
-  if (ink.filled && inside) return true;
-  const reach = (inside ? ink.inset : ink.outset) + (opts.tolerance ?? 0);
+  if (ink2.filled && inside) return true;
+  const reach = (inside ? ink2.inset : ink2.outset) + (opts.tolerance ?? 0);
   return reach > 0 && strokeHitTest(sil, x, y, reach);
 }
 var TEXT_PAINTER = {
@@ -19617,6 +20041,9 @@ function transformOf(state, targetId) {
     identity: false
   };
 }
+function angleOf(xf) {
+  return xf.identity ? 0 : Math.atan2(xf.sin, xf.cos);
+}
 function localToWorld(xf, lx, ly) {
   if (xf.identity) return { x: lx, y: ly };
   const dx = lx - xf.cx;
@@ -19916,11 +20343,7 @@ var DEFAULT_PAINT = {
   insetPx: 10
 };
 function createRotationAffordance(opts = {}) {
-  const {
-    bandPx = 24,
-    paint = DEFAULT_PAINT,
-    cursor = "grab"
-  } = opts;
+  const { bandPx = 24, paint = DEFAULT_PAINT, cursor } = opts;
   const annulusPaint = (() => {
     if (!paint) return null;
     if ("paint" in paint) {
@@ -19958,7 +20381,14 @@ function createRotationAffordance(opts = {}) {
         },
         ...annulusPaint ? { paint: annulusPaint } : {},
         hitKind: "rotate-handle",
-        cursor,
+        // Turned with the target, so the arc follows the selection it rotates.
+        // Resolved per region rather than defaulted in the option list because
+        // the angle is only known once a target is picked.
+        cursor: cursor ?? {
+          glyph: "rotate",
+          angle: angleOf(transformOf(state, target.id)),
+          fallback: "grab"
+        },
         bind: () => ({
           initialScratch: {
             targetId: target.id,
@@ -20368,7 +20798,7 @@ function usePenTool(options) {
       hookName: "usePenTool",
       // Reads the tool's own ref rather than a scratch handed in by a
       // dispatcher — the pen owns this state and nothing else needs it.
-      cursor: () => scratchRef.current?.closeHintActive ? "pointer" : "crosshair",
+      cursor: () => scratchRef.current?.closeHintActive ? "pointer" : cursorFor("pen", { fallback: "crosshair" }),
       presentation: {
         label: "Pen",
         icon: createElement(PenIcon),
@@ -20437,7 +20867,7 @@ function useRectTool() {
       id: "rect",
       capabilities: ["creates-shapes"],
       hookName: "useRectTool",
-      cursor: "crosshair",
+      cursor: cursorFor("crosshairRect", { fallback: "crosshair" }),
       presentation: {
         label: "Rectangle",
         icon: createElement(RectIcon),
@@ -20463,7 +20893,7 @@ function useEllipseTool() {
       id: "ellipse",
       capabilities: ["creates-shapes"],
       hookName: "useEllipseTool",
-      cursor: "crosshair",
+      cursor: cursorFor("crosshairEllipse", { fallback: "crosshair" }),
       presentation: {
         label: "Ellipse",
         group: "shape",
@@ -20486,7 +20916,7 @@ function useLineTool() {
       id: "line",
       capabilities: ["creates-shapes"],
       hookName: "useLineTool",
-      cursor: "crosshair",
+      cursor: cursorFor("crosshairLine", { fallback: "crosshair" }),
       presentation: {
         label: "Line",
         group: "shape",
@@ -20597,7 +21027,7 @@ function usePolygonTool(options = {}) {
       id: "polygon",
       capabilities: ["creates-shapes"],
       hookName: "usePolygonTool",
-      cursor: "crosshair",
+      cursor: cursorFor("crosshairPolygon", { fallback: "crosshair" }),
       // Registered by <ToolActionsMounter>, inside the ActionsProvider —
       // see `ToolDef.actions` for why the hook can't register it itself.
       actions: [adjustSidesAction],
@@ -20697,7 +21127,7 @@ function useStarTool(options = {}) {
       id: "star",
       capabilities: ["creates-shapes"],
       hookName: "useStarTool",
-      cursor: "crosshair",
+      cursor: cursorFor("crosshairStar", { fallback: "crosshair" }),
       // Registered by <ToolActionsMounter>, inside the ActionsProvider —
       // see `ToolDef.actions` for why the hook can't register it itself.
       actions: [adjustPointsAction],
@@ -20753,7 +21183,7 @@ function usePencilTool() {
       id: "pencil",
       capabilities: ["creates-paths"],
       hookName: "usePencilTool",
-      cursor: "crosshair",
+      cursor: cursorFor("pencil", { fallback: "crosshair" }),
       presentation: {
         label: "Pencil",
         group: "draw",
@@ -21734,6 +22164,111 @@ function buildSceneTree(adapter, drawOne, view, forLayer, derivedPathOf) {
   }
   return out;
 }
+function same(a, b) {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.glyph === b.glyph && a.angle === b.angle && a.size === b.size && a.worldRadius === b.worldRadius;
+}
+function createPaintedCursorState() {
+  let base = null;
+  let override = null;
+  let at = null;
+  const subs = /* @__PURE__ */ new Set();
+  const notify2 = () => {
+    for (const fn of subs) fn();
+  };
+  return {
+    setBase(cursor) {
+      if (same(base, cursor)) return;
+      base = cursor;
+      notify2();
+    },
+    setOverride(cursor) {
+      if (same(override, cursor)) return;
+      override = cursor;
+      notify2();
+    },
+    setPointer(x, y) {
+      if (at && at.x === x && at.y === y) return;
+      at = { x, y };
+      if (override ?? base) notify2();
+    },
+    clearPointer() {
+      if (at === null) return;
+      at = null;
+      notify2();
+    },
+    active() {
+      return (override ?? base) !== null;
+    },
+    current() {
+      const cursor = override ?? base;
+      if (!cursor || !at) return null;
+      return { cursor, at };
+    },
+    subscribe(fn) {
+      subs.add(fn);
+      return () => {
+        subs.delete(fn);
+      };
+    }
+  };
+}
+var PAINTED_CURSOR_LAYER_ID = "painted-cursor";
+var pathCache = /* @__PURE__ */ new Map();
+function pathFor(d) {
+  let p = pathCache.get(d);
+  if (p === void 0) {
+    p = pathFromD(d);
+    pathCache.set(d, p);
+  }
+  return p;
+}
+function commandFor2(op) {
+  return {
+    kind: "path",
+    path: pathFor(op.d),
+    ...op.fill !== void 0 ? { fill: { color: op.fill } } : {},
+    ...op.stroke !== void 0 ? {
+      stroke: {
+        paint: { color: op.stroke.color },
+        width: op.stroke.width,
+        cap: "round",
+        join: "round"
+      }
+    } : {}
+  };
+}
+function createPaintedCursorLayer(state) {
+  return {
+    id: PAINTED_CURSOR_LAYER_ID,
+    label: "Painted cursor",
+    space: "screen",
+    draw: (_data, view) => {
+      const frame = state.current();
+      if (!frame) return [];
+      const { cursor, at } = frame;
+      const glyph = GLYPHS[cursor.glyph];
+      if (!glyph) return [];
+      const scale2 = (view.scale.x + view.scale.y) / 2;
+      const worldSized = cursor.worldRadius !== void 0;
+      const size = worldSized ? cursorWorldSize(glyph, cursor.worldRadius, scale2) : cursor.size ?? 24;
+      if (!(size > 0) || !Number.isFinite(size)) return [];
+      const ops = cursorPaintOps(
+        glyph,
+        worldSized ? { lineWidthScale: chromeLineWidthScale(glyph, size) } : {}
+      );
+      const [a, b, c, d, e, f] = cursorPaintMatrix(glyph, {
+        size,
+        angle: cursor.angle,
+        at
+      });
+      const transform = new Float32Array([a, b, 0, c, d, 0, e, f, 1]);
+      const children = ops.map(commandFor2);
+      return [{ kind: "group", transform, children }];
+    }
+  };
+}
 function mat3ToRenderMatrix(m) {
   return new Float32Array([m[0], m[1], 0, m[2], m[3], 0, m[4], m[5], 1]);
 }
@@ -22103,11 +22638,11 @@ function resolveToolsCursor(tools, ctxBase) {
   const id = tools.hotkeyEngaged ?? tools.active;
   const tool = tools.registry[id];
   if (!tool?.cursor) return void 0;
-  if (typeof tool.cursor === "string") return tool.cursor;
+  if (typeof tool.cursor !== "function") return resolveCursorTier(tool.cursor);
   if (!ctxBase) return void 0;
   try {
     const base = ctxBase();
-    return tool.cursor({ ...base, scratch: null });
+    return resolveCursorTier(tool.cursor({ ...base, scratch: null }));
   } catch {
     return void 0;
   }
@@ -22272,6 +22807,14 @@ function CanvasInner(props, ref) {
       viewSubsRef.current.delete(fn);
     };
   }, []);
+  const paintedCursor = useMemo(() => createPaintedCursorState(), []);
+  const paintedCursorLayer = useMemo(
+    () => createPaintedCursorLayer(paintedCursor),
+    [paintedCursor]
+  );
+  useEffect(() => paintedCursor.subscribe(() => {
+    requestRedraw();
+  }), [paintedCursor, requestRedraw]);
   useImperativeHandle(ref, () => ({
     // Named rather than read off `canvasRef` so the handle rebuilds when a
     // detached surface's input element arrives, which is a render later.
@@ -22284,7 +22827,8 @@ function CanvasInner(props, ref) {
     getView,
     setView,
     subscribeView,
-    getPaintedVersion
+    getPaintedVersion,
+    paintedCursor
   }), [
     canvasRef,
     ownCanvasRef,
@@ -22298,7 +22842,8 @@ function CanvasInner(props, ref) {
     getView,
     setView,
     subscribeView,
-    getPaintedVersion
+    getPaintedVersion,
+    paintedCursor
   ]);
   const glRendererRef = useRef(null);
   const layerCacheRef = useRef(/* @__PURE__ */ new Map());
@@ -22562,8 +23107,16 @@ function CanvasInner(props, ref) {
   const layersWithDebug = useMemo(() => {
     const withViews = viewRegistry ? [...layers, ...viewRegistry.list().map((r) => r.layer)] : layers;
     const base = debugSink && resolvedDebugConfig ? [...withViews, createDebugOverlayLayer({ sink: debugSink, config: resolvedDebugConfig })] : withViews;
-    return [...base, ...extrasRef.current];
-  }, [layers, debugSink, resolvedDebugConfig, extrasVersion, viewRegistry, viewRegistryVersion]);
+    return [...base, ...extrasRef.current, paintedCursorLayer];
+  }, [
+    layers,
+    debugSink,
+    resolvedDebugConfig,
+    extrasVersion,
+    viewRegistry,
+    viewRegistryVersion,
+    paintedCursorLayer
+  ]);
   const shaderIdKey = shaders?.map((h) => h.id).join("|") ?? "";
   const paintInputsRef = useRef({
     layers: layersWithDebug,
@@ -22685,8 +23238,14 @@ function CanvasInner(props, ref) {
     if (!renderer) return;
     registerShadersOnRenderer(renderer, shaders);
   }, [shaderIdKey]);
-  const toolsCursor = tools ? resolveToolsCursor(tools, toolsCtxBase) : void 0;
+  const toolsCursorTier = tools ? resolveToolsCursor(tools, toolsCtxBase) : void 0;
+  const toolsCursor = toolsCursorTier === void 0 ? void 0 : toolsCursorTier.kind === "css" ? toolsCursorTier.css : "none";
   const effectiveStyle = toolsCursor ? { ...style, cursor: toolsCursor } : style;
+  const toolsPainted = toolsCursorTier?.kind === "painted" ? toolsCursorTier : null;
+  const toolsPaintedKey = toolsPainted ? `${toolsPainted.glyph}|${toolsPainted.angle}|${toolsPainted.size}|${toolsPainted.worldRadius}` : "";
+  useEffect(() => {
+    paintedCursor.setBase(toolsPainted);
+  }, [paintedCursor, toolsPaintedKey]);
   const layersForMoveRef = useRef(layersWithDebug);
   layersForMoveRef.current = layersWithDebug;
   useEffect(() => {
@@ -24006,10 +24565,16 @@ function createCornerResizeAffordance(opts = {}) {
           hitKind: c.kind,
           // Diagonal by fixed-corner parity: a matched-axis anchor (min-min /
           // max-max fixed) means the dragged corner sits on the ↘ diagonal;
-          // mixed axes sit on the ↗ diagonal. Not rotation-aware — a rotated
-          // target keeps the unrotated hint, the same policy as every
-          // mainstream editor short of Figma.
-          cursor: c.anchor.x === c.anchor.y ? "nwse-resize" : "nesw-resize",
+          // mixed axes sit on the ↗ diagonal. The glyph is horizontal at angle
+          // 0, so the diagonal is a half-quarter-turn either way, plus the
+          // target's own rotation. The keyword is the fallback rather than the
+          // answer: CSS has four of them, which cannot express a target
+          // rotated to anything but a multiple of 45°.
+          cursor: {
+            glyph: "resize",
+            angle: (c.anchor.x === c.anchor.y ? Math.PI / 4 : -Math.PI / 4) + angleOf(xf),
+            fallback: c.anchor.x === c.anchor.y ? "nwse-resize" : "nesw-resize"
+          },
           bind: () => ({
             initialScratch: {
               anchor: c.anchor,
@@ -27946,6 +28511,10 @@ function GestureDispatcherMounter({
   const requestRedraw = useCallback(() => {
     canvasApiRef?.current?.requestRedraw?.();
   }, [canvasApiRef]);
+  const paintedCursor = useCallback(
+    () => canvasApiRef?.current?.paintedCursor,
+    [canvasApiRef]
+  );
   const views = useMemo(() => {
     if (!viewRegistry) return void 0;
     return {
@@ -27964,6 +28533,7 @@ function GestureDispatcherMounter({
     dispatcher,
     clientToWorld: clientToWorld2,
     requestRedraw,
+    paintedCursor,
     getRuleCtx,
     onDoubleClick,
     ...views ? { views } : {}
@@ -28816,5 +29386,5 @@ function oklchToOklab(L, C, h) {
 }
 
 export { ArrowIcon, EllipseIcon, FALLBACK_FIT_VIEW, LineIcon, MinimapCanvas, PATH_C, PATH_L, PATH_M, PATH_Q, PATH_Z, PathBuilder, PencilIcon, RectIcon, SCRIPT_METRICS, SceneCanvas, SceneViewCanvas, SelectIcon, TextIcon, UnknownIcon, WeaselProvider, asNodeId, boundsOfPath, buildSceneViewCommands, computeFitView, computeIndicatorCommand, createScene, eligibleContribution, ellipsePath, evaluateEnabled, getMarker, getPaintKind, isBuiltinToolPref, linePath, markerDrawCommands, oklabToSrgbU8, oklchToOklab, rectPath, renderSceneToCanvas, renderSceneToPixels, resolveStrokeWidth, rgbaToHex, sceneFromJSON, textCommand, tileGeometry, useActionsRegistry, useActiveToolContext, useOptionalDepRegistry, useVisibleRaf };
-//# sourceMappingURL=chunk-ROQDRXKW.js.map
-//# sourceMappingURL=chunk-ROQDRXKW.js.map
+//# sourceMappingURL=chunk-7VW3S44V.js.map
+//# sourceMappingURL=chunk-7VW3S44V.js.map