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

package/dist/{chunk-QCICIHEO.js → chunk-ROQDRXKW.js}

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import earcut from 'earcut';
 import polygonClipping from 'polygon-clipping';
 
-// ../core/dist/chunk-3ZV53ZW2.js
+// ../core/dist/chunk-H6E6KPTU.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-3ZV53ZW2.js
+// ../core/dist/chunk-H6E6KPTU.js
 var DepRegistryContext = createContext(null);
 function DepRegistryProvider({ children }) {
   const sourcesRef = useRef(/* @__PURE__ */ new Map());
@@ -428,6 +428,12 @@ function validateActionDefaultBinding(action) {
     }
   }
 }
+function warnSharedScope() {
+  if (!IS_DEV) return;
+  console.warn(
+    "weasel: a second dispatcher claimed this <ActionsProvider>, so only the newest <SceneCanvas> under it will respond to input. Give each canvas its own scope with <WeaselProvider isolate>."
+  );
+}
 var ActionsContext = createContext(null);
 function ActionsProvider({ children }) {
   const actionsRef = useRef(/* @__PURE__ */ new Map());
@@ -438,6 +444,7 @@ function ActionsProvider({ children }) {
   const depReg = useOptionalDepRegistry();
   const depRegRef = useRef(depReg);
   depRegRef.current = depReg;
+  const warnedRef = useRef(false);
   const wiredDepRegRef = useRef(null);
   const dispatcherRef = useRef(null);
   const registry4 = useMemo(() => {
@@ -510,10 +517,20 @@ function ActionsProvider({ children }) {
         };
       },
       setDispatcher: (d) => {
+        if (d && dispatcherRef.current && dispatcherRef.current !== d && !warnedRef.current) {
+          warnedRef.current = true;
+          warnSharedScope();
+        }
         dispatcherRef.current = d;
+        return () => {
+          if (dispatcherRef.current === d) dispatcherRef.current = null;
+        };
       },
       setDepRegistry: (r) => {
         wiredDepRegRef.current = r;
+        return () => {
+          if (wiredDepRegRef.current === r) wiredDepRegRef.current = null;
+        };
       },
       begin: (id, params) => {
         const disp = dispatcherRef.current;
@@ -535,7 +552,7 @@ function ActionsProvider({ children }) {
   }, []);
   return /* @__PURE__ */ jsx(ActionsContext.Provider, { value: registry4, children });
 }
-(() => {
+var IS_DEV = (() => {
   try {
     return Boolean(import.meta.env?.DEV);
   } catch {
@@ -879,8 +896,19 @@ function transformCoords(coords, m) {
   }
   return out;
 }
+function clampAxis(start, size, low, extent, padding) {
+  const min = low + padding;
+  return Math.max(min, Math.min(start, min + extent - padding * 2 - size));
+}
+function clampRectWithin(rect, boundary, padding = 0) {
+  return {
+    ...rect,
+    x: clampAxis(rect.x, rect.width, boundary.x, boundary.width, padding),
+    y: clampAxis(rect.y, rect.height, boundary.y, boundary.height, padding)
+  };
+}
 
-// ../core/dist/chunk-F74NVEHT.js
+// ../core/dist/chunk-SBFC6J3C.js
 function resolveUnit(v, unitSystem) {
   if (typeof v === "number") return v;
   if (!unitSystem) {
@@ -1315,6 +1343,17 @@ var PathBuilder = class _PathBuilder {
 function rectPath(x, y, width, height) {
   return { kind: "rect", x, y, width, height };
 }
+function polylineFromPoints(points) {
+  const b = new PathBuilder();
+  const first = points[0];
+  if (!first) return rectPath(0, 0, 0, 0);
+  b.moveTo(first.x, first.y);
+  for (let i = 1; i < points.length; i++) {
+    const p = points[i];
+    if (p) b.lineTo(p.x, p.y);
+  }
+  return b.build();
+}
 function polygonFromPoints(points, opts = {}) {
   if (points.length === 0) {
     return {
@@ -1690,7 +1729,7 @@ function createDeleteOp(args) {
 }
 registerOpFactory("delete", (args) => createDeleteOp(args));
 
-// ../core/dist/chunk-AQS4JGRA.js
+// ../core/dist/chunk-Y5KS66G7.js
 function createTransformOp(args) {
   const { id, from, to, label, coalesceKey = `transform:${id}` } = args;
   return {
@@ -1814,7 +1853,7 @@ function snap(strategy, opts = {}) {
   };
 }
 
-// ../core/dist/chunk-3FB44DBC.js
+// ../core/dist/chunk-BLJNRMKB.js
 function lockAspectWithModifier(opts = {}) {
   const { key = "shift" } = opts;
   return {
@@ -4224,7 +4263,7 @@ function serialToEntry(se, custom, logger) {
   };
 }
 
-// ../core/dist/chunk-N3T7D6AS.js
+// ../core/dist/chunk-IMFXEINV.js
 function worldToScreen(worldX, worldY, view) {
   return [view.panX + worldX * view.zoom.x, view.panY + worldY * view.zoom.y];
 }
@@ -5551,6 +5590,9 @@ function flattenPolygon(p, tolerance) {
   let coordIdx = 0;
   let prevX = 0;
   let prevY = 0;
+  let startX = 0;
+  let startY = 0;
+  let startAnchor = -1;
   let prevAnchor = -1;
   let anchorCounter = 0;
   for (let cmdIdx = 0; cmdIdx < commands.length; cmdIdx++) {
@@ -5560,6 +5602,9 @@ function flattenPolygon(p, tolerance) {
         contourStarts.push(out.length / 2);
         prevX = coords[coordIdx];
         prevY = coords[coordIdx + 1];
+        startX = prevX;
+        startY = prevY;
+        startAnchor = anchorCounter;
         out.push(prevX, prevY);
         anchorA.push(anchorCounter);
         anchorB.push(anchorCounter);
@@ -5629,6 +5674,9 @@ function flattenPolygon(p, tolerance) {
         break;
       }
       case PATH_Z: {
+        prevX = startX;
+        prevY = startY;
+        prevAnchor = startAnchor;
         break;
       }
       default:
@@ -8444,6 +8492,7 @@ var WeaselRenderer = class {
   heightCss;
   dpr;
   canvas = null;
+  target = null;
   imageMinification;
   flattenTolerance;
   bakeBudget;
@@ -8461,6 +8510,12 @@ var WeaselRenderer = class {
     const gl = opts.gl ?? opts.canvas.getContext("webgl2", { stencil: true });
     if (!gl) throw new Error("WeaselRenderer: WebGL2 not available");
     this.gl = gl;
+    const attrs = typeof this.gl.getContextAttributes === "function" ? this.gl.getContextAttributes() : null;
+    if (attrs && attrs.stencil === false) {
+      throw new Error(
+        "WeaselRenderer: the supplied WebGL2 context has no stencil buffer. Create it with { stencil: true } \u2014 clips and even-odd fills need one."
+      );
+    }
     this.widthCss = opts.width;
     this.heightCss = opts.height;
     this.dpr = opts.dpr;
@@ -8479,12 +8534,8 @@ var WeaselRenderer = class {
       this.canvas.addEventListener("webglcontextlost", this.boundOnLost);
       this.canvas.addEventListener("webglcontextrestored", this.boundOnRestored);
     }
-    this.gl.enable(this.gl.BLEND);
-    this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA);
-    this.gl.disable(this.gl.DEPTH_TEST);
-    this.gl.disable(this.gl.CULL_FACE);
-    this.gl.clearColor(0, 0, 0, 0);
-    this.applyViewport();
+    this.applyGlState();
+    this.applyTarget();
     this.pathFill = new ShaderProgram(this.gl, VERT_SRC, FRAG_SRC);
     this.pathFill.lookupUniforms(PATH_FILL_UNIFORMS);
     this.pathFill.lookupAttributes(PATH_FILL_ATTRIBUTES);
@@ -8574,8 +8625,42 @@ var WeaselRenderer = class {
     }
     return this.programRegistry.get(id) ?? null;
   }
-  applyViewport() {
-    this.gl.viewport(0, 0, this.widthCss * this.dpr, this.heightCss * this.dpr);
+  /** The GL state every frame assumes. Applied per `render()` rather than once
+   *  at construction because a co-tenant sharing this context moves all of it
+   *  between our frames. */
+  applyGlState() {
+    const gl = this.gl;
+    gl.enable(gl.BLEND);
+    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
+    gl.disable(gl.DEPTH_TEST);
+    gl.disable(gl.CULL_FACE);
+    gl.clearColor(0, 0, 0, 0);
+  }
+  /** Viewport and scissor for this frame. Re-applied inside `render()` because
+   *  a co-tenant on the same context moves both between our frames. */
+  applyTarget() {
+    const gl = this.gl;
+    const w = Math.round(this.widthCss * this.dpr);
+    const h = Math.round(this.heightCss * this.dpr);
+    if (!this.target) {
+      gl.disable(gl.SCISSOR_TEST);
+      gl.viewport(0, 0, w, h);
+      return;
+    }
+    const x = Math.round(this.target.origin.x * this.dpr);
+    const y = gl.drawingBufferHeight - Math.round(this.target.origin.y * this.dpr) - h;
+    gl.viewport(x, y, w, h);
+    gl.scissor(x, y, w, h);
+    gl.enable(gl.SCISSOR_TEST);
+  }
+  /** Confine this renderer to a rect of its drawing buffer, or pass null to
+   *  give it the whole buffer back. Takes effect from the next `render()`. */
+  setTarget(target) {
+    this.target = target;
+    this.applyTarget();
+  }
+  getTarget() {
+    return this.target;
   }
   isContextLost() {
     return this.contextLost;
@@ -8586,12 +8671,8 @@ var WeaselRenderer = class {
   }
   onContextRestored() {
     this.contextLost = false;
-    this.gl.enable(this.gl.BLEND);
-    this.gl.blendFunc(this.gl.ONE, this.gl.ONE_MINUS_SRC_ALPHA);
-    this.gl.disable(this.gl.DEPTH_TEST);
-    this.gl.disable(this.gl.CULL_FACE);
-    this.gl.clearColor(0, 0, 0, 0);
-    this.applyViewport();
+    this.applyGlState();
+    this.applyTarget();
     this.pathFill = new ShaderProgram(this.gl, VERT_SRC, FRAG_SRC);
     this.pathFill.lookupUniforms(PATH_FILL_UNIFORMS);
     this.pathFill.lookupAttributes(PATH_FILL_ATTRIBUTES);
@@ -8698,8 +8779,12 @@ var WeaselRenderer = class {
     this.meshCache.drainPendingDeletes();
     resetBakeBudget(this.bakeBudget);
     this.groupState.reset();
-    gl.stencilMask(255);
-    gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
+    this.applyGlState();
+    this.applyTarget();
+    if (this.target?.clear !== false) {
+      gl.stencilMask(255);
+      gl.clear(gl.COLOR_BUFFER_BIT | gl.STENCIL_BUFFER_BIT);
+    }
     const ctx = {
       gl,
       pathFill: this.pathFill,
@@ -8742,7 +8827,7 @@ var WeaselRenderer = class {
         this.canvas.style.height = `${dims.height}px`;
       }
     }
-    this.applyViewport();
+    this.applyTarget();
   }
   /** @internal */
   _gl() {
@@ -9382,10 +9467,10 @@ function targetSizesPx(targetScale = 1) {
     rotationDistance: BASE_PX.rotationDistance * targetScale
   };
 }
-var SYSTEM_MAX_SCALE = 10;
-var SYSTEM_MIN_SCALE = 0.1;
+var DEFAULT_MIN_ZOOM = 0.1;
+var DEFAULT_MAX_ZOOM = 8;
 function fitViewToBounds(bounds, viewportDims, currentView, opts = {}) {
-  const { padding = 16, maxScale = SYSTEM_MAX_SCALE, minScale = SYSTEM_MIN_SCALE } = opts;
+  const { padding = 16, maxScale = DEFAULT_MAX_ZOOM, minScale = DEFAULT_MIN_ZOOM } = opts;
   if (bounds.width <= 0 || bounds.height <= 0) {
     console.warn("[weasel] fitViewToBounds: bounds has zero or negative area; returning currentView unchanged.", bounds);
     return currentView;
@@ -9429,15 +9514,19 @@ function fitViewToBounds(bounds, viewportDims, currentView, opts = {}) {
     scale: { x: scaleX, y: scaleY }
   };
 }
+function clampScale(scale2, min, max) {
+  const magnitude = Math.min(max, Math.max(min, Math.abs(scale2)));
+  return scale2 < 0 ? -magnitude : magnitude;
+}
 function zoomAt(view, anchor, factor, opts) {
   const fx = typeof factor === "number" ? factor : factor.x;
   const fy = typeof factor === "number" ? factor : factor.y;
-  const minX = typeof opts?.min === "number" ? opts.min : opts?.min?.x ?? 0.1;
-  const minY = typeof opts?.min === "number" ? opts.min : opts?.min?.y ?? 0.1;
-  const maxX = typeof opts?.max === "number" ? opts.max : opts?.max?.x ?? 8;
-  const maxY = typeof opts?.max === "number" ? opts.max : opts?.max?.y ?? 8;
-  const nextX = Math.min(maxX, Math.max(minX, view.scale.x * fx));
-  const nextY = Math.min(maxY, Math.max(minY, view.scale.y * fy));
+  const minX = typeof opts?.min === "number" ? opts.min : opts?.min?.x ?? DEFAULT_MIN_ZOOM;
+  const minY = typeof opts?.min === "number" ? opts.min : opts?.min?.y ?? DEFAULT_MIN_ZOOM;
+  const maxX = typeof opts?.max === "number" ? opts.max : opts?.max?.x ?? DEFAULT_MAX_ZOOM;
+  const maxY = typeof opts?.max === "number" ? opts.max : opts?.max?.y ?? DEFAULT_MAX_ZOOM;
+  const nextX = clampScale(view.scale.x * fx, minX, maxX);
+  const nextY = clampScale(view.scale.y * fy, minY, maxY);
   const worldX = anchor.x / view.scale.x + view.x;
   const worldY = anchor.y / view.scale.y + view.y;
   return {
@@ -9447,22 +9536,24 @@ function zoomAt(view, anchor, factor, opts) {
   };
 }
 function clampView(view, bounds, canvas) {
-  const visW = canvas.width / view.scale.x;
-  const visH = canvas.height / view.scale.y;
+  const visW = Math.abs(canvas.width / view.scale.x);
+  const visH = Math.abs(canvas.height / view.scale.y);
+  const flipX = view.scale.x < 0;
+  const flipY = view.scale.y < 0;
   let x;
   if (visW >= bounds.width) {
-    x = bounds.x + (bounds.width - visW) / 2;
+    x = bounds.x + (bounds.width - visW) / 2 + (flipX ? visW : 0);
   } else {
-    const minX = bounds.x;
-    const maxX = bounds.x + bounds.width - visW;
+    const minX = flipX ? bounds.x + visW : bounds.x;
+    const maxX = flipX ? bounds.x + bounds.width : bounds.x + bounds.width - visW;
     x = view.x < minX ? minX : view.x > maxX ? maxX : view.x;
   }
   let y;
   if (visH >= bounds.height) {
-    y = bounds.y + (bounds.height - visH) / 2;
+    y = bounds.y + (bounds.height - visH) / 2 + (flipY ? visH : 0);
   } else {
-    const minY = bounds.y;
-    const maxY = bounds.y + bounds.height - visH;
+    const minY = flipY ? bounds.y + visH : bounds.y;
+    const maxY = flipY ? bounds.y + bounds.height : bounds.y + bounds.height - visH;
     y = view.y < minY ? minY : view.y > maxY ? maxY : view.y;
   }
   return x === view.x && y === view.y ? view : { x, y, scale: view.scale };
@@ -11165,7 +11256,7 @@ function keyAnchor(view) {
 }
 var WHEEL_STEP = 1.1;
 function makeViewportZoomAction(opts = {}) {
-  const clamp2 = { min: opts.min ?? 0.1, max: opts.max ?? 8 };
+  const clamp2 = { min: opts.min ?? DEFAULT_MIN_ZOOM, max: opts.max ?? DEFAULT_MAX_ZOOM };
   const wheelSpec = opts.wheel === "plain" ? { kind: "wheel" } : { kind: "wheel", mods: { mod: true } };
   const rawAnimate = opts.animate === true ? {} : opts.animate || null;
   const { resetMs, ...animateRest } = rawAnimate ?? {};
@@ -11814,7 +11905,7 @@ var lassoSelectAction = {
   enabled: () => true
 };
 function makePinchZoomAction(opts = {}) {
-  const clamp2 = { min: opts.min ?? 0.1, max: opts.max ?? 8 };
+  const clamp2 = { min: opts.min ?? DEFAULT_MIN_ZOOM, max: opts.max ?? DEFAULT_MAX_ZOOM };
   return {
     id: "viewport.pinchZoom",
     label: "Pinch Zoom",
@@ -16349,154 +16440,6 @@ function useGestureDispatcher(opts) {
     };
   }, [enabled, keyboard, canvasRef]);
 }
-function useVelocityTracker() {
-  const samplesRef = useRef([]);
-  return useMemo(() => ({
-    record(dx, dy, t) {
-      samplesRef.current.push({ dx, dy, t });
-      const cutoff = t - 100;
-      samplesRef.current = samplesRef.current.filter((s) => s.t >= cutoff);
-    },
-    getVelocity() {
-      const s = samplesRef.current;
-      if (s.length < 2) return { vx: 0, vy: 0 };
-      const dt = s[s.length - 1].t - s[0].t;
-      if (dt === 0) return { vx: 0, vy: 0 };
-      const totalDx = s.slice(1).reduce((acc, p) => acc + p.dx, 0);
-      const totalDy = s.slice(1).reduce((acc, p) => acc + p.dy, 0);
-      return { vx: totalDx / dt, vy: totalDy / dt };
-    },
-    reset() {
-      samplesRef.current = [];
-    }
-  }), []);
-}
-var SPRING_DAMPING = 0.5;
-function useDecayLoop() {
-  const stateRef = useRef(null);
-  const frameLoop = useVisibleRaf(
-    (now) => {
-      tick(now);
-    },
-    {
-      // Coasting does not continue while suspended: dropping `lastTime` makes
-      // the resuming frame seed a fresh interval instead of applying an hour of
-      // friction at once, which would end the decay before it was seen.
-      onResume: useCallback(() => {
-        if (stateRef.current) stateRef.current.lastTime = null;
-      }, [])
-    }
-  );
-  const cancel = useCallback(() => {
-    frameLoop.cancel();
-    stateRef.current = null;
-  }, [frameLoop]);
-  const tick = useCallback((now) => {
-    const s = stateRef.current;
-    if (!s) return;
-    if (s.lastTime === null) {
-      s.lastTime = now;
-      frameLoop.request();
-      return;
-    }
-    const dt = Math.min(now - s.lastTime, 64);
-    s.lastTime = now;
-    const f = Math.pow(s.friction, dt / 16.67);
-    s.vx *= f;
-    s.vy *= f;
-    const speed = Math.sqrt(s.vx * s.vx + s.vy * s.vy);
-    if (speed < s.minSpeed) {
-      stateRef.current = null;
-      frameLoop.cancel();
-      s.onEnd?.();
-      return;
-    }
-    let dx = s.vx * dt;
-    let dy = s.vy * dt;
-    if (s.viewBounds && s.boundary) {
-      const { minX, maxX, minY, maxY } = s.viewBounds;
-      const newX = s.posX + dx;
-      const newY = s.posY + dy;
-      if (s.boundary === "stop") {
-        if (minX !== void 0 && newX < minX) {
-          dx = minX - s.posX;
-          s.vx = 0;
-        } else if (maxX !== void 0 && newX > maxX) {
-          dx = maxX - s.posX;
-          s.vx = 0;
-        }
-        if (minY !== void 0 && newY < minY) {
-          dy = minY - s.posY;
-          s.vy = 0;
-        } else if (maxY !== void 0 && newY > maxY) {
-          dy = maxY - s.posY;
-          s.vy = 0;
-        }
-      } else if (s.boundary === "spring") {
-        if (minX !== void 0 && newX < minX) {
-          dx = minX - s.posX;
-          s.vx = Math.abs(s.vx) * SPRING_DAMPING;
-        } else if (maxX !== void 0 && newX > maxX) {
-          dx = maxX - s.posX;
-          s.vx = -Math.abs(s.vx) * SPRING_DAMPING;
-        }
-        if (minY !== void 0 && newY < minY) {
-          dy = minY - s.posY;
-          s.vy = Math.abs(s.vy) * SPRING_DAMPING;
-        } else if (maxY !== void 0 && newY > maxY) {
-          dy = maxY - s.posY;
-          s.vy = -Math.abs(s.vy) * SPRING_DAMPING;
-        }
-      } else {
-        if (minX !== void 0 && newX < minX) {
-          dx = minX - s.posX;
-          s.vx = Math.abs(s.vx);
-        } else if (maxX !== void 0 && newX > maxX) {
-          dx = maxX - s.posX;
-          s.vx = -Math.abs(s.vx);
-        }
-        if (minY !== void 0 && newY < minY) {
-          dy = minY - s.posY;
-          s.vy = Math.abs(s.vy);
-        } else if (maxY !== void 0 && newY > maxY) {
-          dy = maxY - s.posY;
-          s.vy = -Math.abs(s.vy);
-        }
-      }
-      s.posX += dx;
-      s.posY += dy;
-    }
-    s.onTick(dx, dy);
-    frameLoop.request();
-  }, [frameLoop]);
-  const start = useCallback((config) => {
-    cancel();
-    const { velocity, friction = 0.92, minSpeed = 0.01, viewBounds, boundary, initialPosition, onTick, onEnd } = config;
-    const speed = Math.sqrt(velocity.vx ** 2 + velocity.vy ** 2);
-    if (speed < minSpeed) {
-      onEnd?.();
-      return;
-    }
-    stateRef.current = {
-      vx: velocity.vx,
-      vy: velocity.vy,
-      friction,
-      minSpeed,
-      lastTime: null,
-      posX: initialPosition?.x ?? 0,
-      posY: initialPosition?.y ?? 0,
-      viewBounds,
-      boundary,
-      onTick,
-      onEnd
-    };
-    frameLoop.request();
-  }, [cancel, frameLoop]);
-  useEffect(() => () => {
-    cancel();
-  }, [cancel]);
-  return { start, cancel };
-}
 function dist(a, b) {
   return Math.hypot(b.x - a.x, b.y - a.y);
 }
@@ -16575,15 +16518,180 @@ function interpolateView(from, to) {
     return { x: a.x, y: b.x, scale: { x: a.s, y: b.s } };
   };
 }
+var linear = (t) => t;
+var easeInQuad = (t) => t * t;
 var easeOutQuad = (t) => 1 - (1 - t) * (1 - t);
+var easeInOutQuad = (t) => t < 0.5 ? 2 * t * t : 1 - 2 * (1 - t) * (1 - t);
+var easeInCubic = (t) => t * t * t;
 var easeOutCubic = (t) => 1 - Math.pow(1 - t, 3);
+var easeInOutCubic = (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;
+var easeInQuart = (t) => t * t * t * t;
+var easeOutQuart = (t) => 1 - Math.pow(1 - t, 4);
+var easeInOutQuart = (t) => t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2;
+var easeInQuint = (t) => t * t * t * t * t;
+var easeOutQuint = (t) => 1 - Math.pow(1 - t, 5);
+var easeInOutQuint = (t) => t < 0.5 ? 16 * t * t * t * t * t : 1 - Math.pow(-2 * t + 2, 5) / 2;
+var easeInSine = (t) => 1 - Math.cos(t * Math.PI / 2);
+var easeOutSine = (t) => Math.sin(t * Math.PI / 2);
+var easeInOutSine = (t) => -(Math.cos(Math.PI * t) - 1) / 2;
+var easeInExpo = (t) => t === 0 ? 0 : Math.pow(2, 10 * t - 10);
+var easeOutExpo = (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t);
+var easeInOutExpo = (t) => {
+  if (t === 0) return 0;
+  if (t === 1) return 1;
+  return t < 0.5 ? Math.pow(2, 20 * t - 10) / 2 : (2 - Math.pow(2, -20 * t + 10)) / 2;
+};
+var easeInCirc = (t) => 1 - Math.sqrt(1 - t * t);
+var easeOutCirc = (t) => Math.sqrt(1 - Math.pow(t - 1, 2));
+var easeInOutCirc = (t) => t < 0.5 ? (1 - Math.sqrt(1 - Math.pow(2 * t, 2))) / 2 : (Math.sqrt(1 - Math.pow(-2 * t + 2, 2)) + 1) / 2;
+var C1 = 1.70158;
+var C2 = C1 * 1.525;
+var C3 = C1 + 1;
+var C4 = 2 * Math.PI / 3;
+var C5 = 2 * Math.PI / 4.5;
+var easeInBack = (t) => C3 * t * t * t - C1 * t * t;
+var easeOutBack = (t) => 1 + C3 * Math.pow(t - 1, 3) + C1 * Math.pow(t - 1, 2);
+var easeInOutBack = (t) => t < 0.5 ? Math.pow(2 * t, 2) * ((C2 + 1) * 2 * t - C2) / 2 : (Math.pow(2 * t - 2, 2) * ((C2 + 1) * (2 * t - 2) + C2) + 2) / 2;
+var easeInElastic = (t) => {
+  if (t === 0) return 0;
+  if (t === 1) return 1;
+  return -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 10.75) * C4);
+};
+var easeOutElastic = (t) => {
+  if (t === 0) return 0;
+  if (t === 1) return 1;
+  return Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * C4) + 1;
+};
+var easeInOutElastic = (t) => {
+  if (t === 0) return 0;
+  if (t === 1) return 1;
+  return t < 0.5 ? -(Math.pow(2, 20 * t - 10) * Math.sin((20 * t - 11.125) * C5)) / 2 : Math.pow(2, -20 * t + 10) * Math.sin((20 * t - 11.125) * C5) / 2 + 1;
+};
+var easeOutBounce = (t) => {
+  const n1 = 7.5625;
+  const d1 = 2.75;
+  if (t < 1 / d1) return n1 * t * t;
+  if (t < 2 / d1) {
+    t -= 1.5 / d1;
+    return n1 * t * t + 0.75;
+  }
+  if (t < 2.5 / d1) {
+    t -= 2.25 / d1;
+    return n1 * t * t + 0.9375;
+  }
+  t -= 2.625 / d1;
+  return n1 * t * t + 0.984375;
+};
+var easeInBounce = (t) => 1 - easeOutBounce(1 - t);
+var easeInOutBounce = (t) => t < 0.5 ? (1 - easeOutBounce(1 - 2 * t)) / 2 : (1 + easeOutBounce(2 * t - 1)) / 2;
 var easeOut = easeOutQuad;
+var EASINGS = {
+  linear,
+  easeInQuad,
+  easeOutQuad,
+  easeInOutQuad,
+  easeInCubic,
+  easeOutCubic,
+  easeInOutCubic,
+  easeInQuart,
+  easeOutQuart,
+  easeInOutQuart,
+  easeInQuint,
+  easeOutQuint,
+  easeInOutQuint,
+  easeInSine,
+  easeOutSine,
+  easeInOutSine,
+  easeInExpo,
+  easeOutExpo,
+  easeInOutExpo,
+  easeInCirc,
+  easeOutCirc,
+  easeInOutCirc,
+  easeInBack,
+  easeOutBack,
+  easeInOutBack,
+  easeInElastic,
+  easeOutElastic,
+  easeInOutElastic,
+  easeInBounce,
+  easeOutBounce,
+  easeInOutBounce
+};
 var SPRING_PRESETS = {
   gentle: { stiffness: 120, damping: 14, mass: 1 },
   wobbly: { stiffness: 180, damping: 12, mass: 1 },
   stiff: { stiffness: 210, damping: 20, mass: 1 },
   slow: { stiffness: 80, damping: 20, mass: 1 }
 };
+var NEWTON_ITERATIONS = 8;
+var NEWTON_MIN_SLOPE = 1e-3;
+var SUBDIVISION_EPSILON = 1e-7;
+var SUBDIVISION_MAX = 12;
+function bezierAt(t, a1, a2) {
+  const c = 3 * a1;
+  const b = 3 * (a2 - a1) - c;
+  const a = 1 - c - b;
+  return ((a * t + b) * t + c) * t;
+}
+function bezierSlope(t, a1, a2) {
+  const c = 3 * a1;
+  const b = 3 * (a2 - a1) - c;
+  const a = 1 - c - b;
+  return (3 * a * t + 2 * b) * t + c;
+}
+function solveForX(x, x1, x2) {
+  let t = x;
+  for (let i = 0; i < NEWTON_ITERATIONS; i++) {
+    const slope = bezierSlope(t, x1, x2);
+    if (slope < NEWTON_MIN_SLOPE) break;
+    t -= (bezierAt(t, x1, x2) - x) / slope;
+  }
+  let lo = 0;
+  let hi = 1;
+  t = Math.min(1, Math.max(0, t));
+  for (let i = 0; i < SUBDIVISION_MAX; i++) {
+    const err = bezierAt(t, x1, x2) - x;
+    if (Math.abs(err) < SUBDIVISION_EPSILON) return t;
+    if (err > 0) hi = t;
+    else lo = t;
+    t = (lo + hi) / 2;
+  }
+  return t;
+}
+function cubicBezierEasing(x1, y1, x2, y2) {
+  const cx1 = Math.min(1, Math.max(0, x1));
+  const cx2 = Math.min(1, Math.max(0, x2));
+  return (t) => {
+    if (t <= 0) return 0;
+    if (t >= 1) return 1;
+    return bezierAt(solveForX(t, cx1, cx2), y1, y2);
+  };
+}
+var bezierCache = /* @__PURE__ */ new Map();
+function isBezier(spec) {
+  return typeof spec === "object" && spec !== null && "bezier" in spec;
+}
+function resolveEasing(spec) {
+  if (spec === void 0) return EASINGS.linear;
+  if (typeof spec === "function") return spec;
+  if (typeof spec === "string") {
+    const fn = EASINGS[spec];
+    if (!fn) throw new Error(`resolveEasing: unknown easing name "${spec}"`);
+    return fn;
+  }
+  if (isBezier(spec)) {
+    const [x1, y1, x2, y2] = spec.bezier;
+    const key = `${x1},${y1},${x2},${y2}`;
+    let fn = bezierCache.get(key);
+    if (!fn) {
+      fn = cubicBezierEasing(x1, y1, x2, y2);
+      bezierCache.set(key, fn);
+    }
+    return fn;
+  }
+  throw new Error("resolveEasing: unrecognized easing spec");
+}
 function createLoop(createSupervisor, factory, opts = {}) {
   const max = opts.count ?? Infinity;
   let iteration = 0;
@@ -16623,6 +16731,7 @@ function createLoop(createSupervisor, factory, opts = {}) {
       supervisor.setTimeScale(s);
       current?.setTimeScale(s);
     },
+    timeScale: () => supervisor.timeScale(),
     isPaused: () => supervisor.isPaused()
   };
 }
@@ -16782,6 +16891,9 @@ var CompositeHandle = class {
     this.timeScale_ = s;
     for (const c of this.children) c.setTimeScale(s);
   }
+  timeScale() {
+    return this.timeScale_;
+  }
   isPaused() {
     return this.paused_;
   }
@@ -16889,7 +17001,7 @@ function sampleTrack(track, t, segmentCache) {
   const b = keys[i + 1];
   const span = b.t - a.t;
   const raw = span <= 0 ? 1 : (t - a.t) / span;
-  const u = b.easing ? b.easing(raw) : raw;
+  const u = b.easing ? resolveEasing(b.easing)(raw) : raw;
   if (track.interpolator) {
     let fn = segmentCache?.get(i + 1);
     if (!fn) {
@@ -16968,7 +17080,10 @@ function createTimeline(register, id, opts) {
     for (const track of tracks) {
       if (track.kind === "event") {
         const end = firstAfter(track.events, to);
-        for (let i = firstAfter(track.events, from); i < end; i += 1) track.events[i].fire();
+        for (let i = firstAfter(track.events, from); i < end; i += 1) {
+          const ev = track.events[i];
+          ev.fire(to - ev.t);
+        }
       } else if (track.kind === "timeline") {
         fireEvents(track.timeline.tracks, from - track.at, to - track.at);
       }
@@ -17048,6 +17163,7 @@ function createTimeline(register, id, opts) {
       wantScale = s;
       base.setTimeScale(s);
     },
+    timeScale: () => live ? base.timeScale() : wantScale,
     isPaused: () => live ? base.isPaused() : wantPaused,
     seek(t) {
       offset = t - lastVirtual;
@@ -17058,6 +17174,10 @@ function createTimeline(register, id, opts) {
     time: () => playhead,
     duration: () => duration,
     tracks: () => opts.tracks,
+    setLoop(loop) {
+      loopsLeft = loop === true ? Infinity : loop === false ? 0 : loop;
+    },
+    loop: () => loopsLeft === Infinity ? true : loopsLeft === 0 ? false : loopsLeft,
     edit(fn) {
       fn();
       caches = /* @__PURE__ */ new WeakMap();
@@ -17272,6 +17392,7 @@ function useAnimator(opts = {}) {
           const a = animations.current.get(anim.id);
           if (a) a.timeScale = s;
         },
+        timeScale: () => animations.current.get(anim.id)?.timeScale ?? 1,
         isPaused: () => animations.current.get(anim.id)?.paused ?? false
       };
     };
@@ -17293,6 +17414,7 @@ function useAnimator(opts = {}) {
         pause: base.pause,
         resume: base.resume,
         setTimeScale: base.setTimeScale,
+        timeScale: base.timeScale,
         isPaused: base.isPaused,
         setOnCancel: (cb) => {
           onCancelCb = cb;
@@ -17303,7 +17425,7 @@ function useAnimator(opts = {}) {
     const tween = (o) => {
       const id = nextId.current++;
       const start = 0;
-      const easing = o.easing ?? easeOut;
+      const easing = resolveEasing(o.easing ?? easeOut);
       const factoryFn = o.interpolator ? o.interpolator(o.from, o.to) : null;
       const perTickInterp = factoryFn ? null : o.interpolate ?? ((a, b, t) => {
         if (typeof a === "number" && typeof b === "number") {
@@ -17458,6 +17580,7 @@ function useAnimator(opts = {}) {
       setTimeScale: (s) => {
         globalTimeScale.current = s;
       },
+      timeScale: () => globalTimeScale.current,
       pauseKey: (key) => {
         for (const a of animations.current.values()) if (a.cancelKey === key) a.paused = true;
       },
@@ -18055,6 +18178,21 @@ function LineIcon({ className, size = 20 }) {
     }
   );
 }
+function ArrowIcon({ className, size = 20 }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      ...ICON_SVG_BASE,
+      className,
+      width: size,
+      height: size,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M3.5 16.5 12.9 7.1", strokeLinecap: "round" }),
+        /* @__PURE__ */ jsx("path", { d: "M16.5 3.5 11.06 5.98 14.03 8.95Z", fill: "currentColor", strokeLinejoin: "round" })
+      ]
+    }
+  );
+}
 function PolygonIcon({ className, size = 20 }) {
   return /* @__PURE__ */ jsx(
     "svg",
@@ -18632,6 +18770,14 @@ var TEXT_PAINTER = {
     );
     if (boxes.length === 0) return null;
     return rectsToPath(boxes);
+  },
+  // `filled` is unconditional: a text node's `data.fill: null` still resolves
+  // to the default in `ResolvedRun`, so there is no outline-only text to
+  // report. The reach is the point — a heavily outlined glyph was unpickable
+  // across the width of its own outline.
+  ink: (node, _pose, ctx) => {
+    const d = node.data;
+    return { filled: true, ...inkReach(resolveNodeStroke(d.stroke), ctx?.scale) };
   }
 };
 function rectsToPath(rects) {
@@ -18897,10 +19043,10 @@ var RECT_FALLBACK_PAINTER = {
 };
 function registerBuiltInShapePainters() {
   registerNodeShape(TEXT_PAINTER);
+  registerNodeShape(DERIVED_PAINTER);
   registerNodeShape(PATH_PAINTER);
   registerNodeShape(SHAPE_PAINTER);
   registerNodeShape(IMAGE_PAINTER);
-  registerNodeShape(DERIVED_PAINTER);
   registerNodeShape(RECT_FALLBACK_PAINTER);
 }
 registerBuiltInShapePainters();
@@ -19909,11 +20055,7 @@ function useRotateTool(adapter, options) {
     [overlay]
   );
 }
-function useHandTool(opts = {}) {
-  const inertia = opts.inertia === false ? false : opts.inertia;
-  const axis = opts.axis ?? "both";
-  const tracker = useVelocityTracker();
-  const decay = useDecayLoop();
+function useHandTool(_opts = {}) {
   return useMemo(
     () => Object.assign(defineViewportTool({
       id: "hand",
@@ -19933,8 +20075,7 @@ function useHandTool(opts = {}) {
       // phase entry.
       bindings: [{ spec: { kind: "drag" }, actionId: "viewport.dragPan" }]
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [inertia, axis, tracker, decay]
+    []
   );
 }
 var PRESENTATION = {
@@ -19963,7 +20104,7 @@ function usePinchZoomTool(canvasRef, getView, setView, opts = {}) {
   getViewRef.current = getView;
   const setViewRef = useRef(setView);
   setViewRef.current = setView;
-  const { min = 0.1, max = 8, enabled = true } = opts;
+  const { min = DEFAULT_MIN_ZOOM, max = DEFAULT_MAX_ZOOM, enabled = true } = opts;
   const resolveTargetRef = useRef(opts.resolveTarget);
   resolveTargetRef.current = opts.resolveTarget;
   usePinchGesture(canvasRef, (clientAnchor, scaleFactor) => {
@@ -21616,14 +21757,89 @@ function wrapNodeOutput(cmds, pose, alpha) {
   }
   return rotated;
 }
-function CursorCoordsHud({ canvasRef, viewRef, offset }) {
+function insetAlong(start, extent, size, align, by) {
+  if (align === "start") return start + by;
+  if (align === "end") return start + extent - size - by;
+  return start + (extent - size) / 2 + by;
+}
+function hostAnchorRect(input) {
+  const { host, panel, viewport, align, offset, padding = 0 } = input;
+  const desired = {
+    x: insetAlong(host.x, host.width, panel.width, align.x, offset.x),
+    y: insetAlong(host.y, host.height, panel.height, align.y, offset.y),
+    width: panel.width,
+    height: panel.height
+  };
+  return clampRectWithin(desired, { x: 0, y: 0, width: viewport.width, height: viewport.height }, padding);
+}
+function hostAnchorCss(rect, align, viewport) {
+  return {
+    ...align.y === "end" ? { bottom: viewport.height - rect.y - rect.height } : { top: rect.y },
+    ...align.x === "end" ? { right: viewport.width - rect.x - rect.width } : { left: rect.x }
+  };
+}
+function useHostAnchor(resolveHost, options) {
+  const [panel, setPanel] = useState(null);
+  const [style, setStyle] = useState(null);
+  const ref = useCallback((el) => setPanel(el), []);
+  const resolve = useRef(resolveHost);
+  resolve.current = resolveHost;
+  const { align, offset, padding = 0 } = options;
+  const { x: alignX, y: alignY } = align;
+  const { x: offsetX, y: offsetY } = offset;
+  const recompute = useCallback(() => {
+    const hostEl = resolve.current();
+    if (!hostEl) {
+      setStyle(null);
+      return;
+    }
+    const h = hostEl.getBoundingClientRect();
+    const p = panel?.getBoundingClientRect();
+    const viewport = { width: window.innerWidth, height: window.innerHeight };
+    const align2 = { x: alignX, y: alignY };
+    const rect = hostAnchorRect({
+      host: { x: h.left, y: h.top, width: h.width, height: h.height },
+      panel: { width: p?.width ?? 0, height: p?.height ?? 0 },
+      viewport,
+      align: align2,
+      offset: { x: offsetX, y: offsetY },
+      padding
+    });
+    setStyle(hostAnchorCss(rect, align2, viewport));
+  }, [panel, alignX, alignY, offsetX, offsetY, padding]);
+  const raf = useVisibleRaf(recompute);
+  useEffect(() => {
+    recompute();
+    const schedule = () => raf.request();
+    window.addEventListener("scroll", schedule, true);
+    window.addEventListener("resize", schedule);
+    const observer = typeof ResizeObserver !== "undefined" ? new ResizeObserver(schedule) : null;
+    if (panel) observer?.observe(panel);
+    const hostEl = resolve.current();
+    if (hostEl) observer?.observe(hostEl);
+    return () => {
+      window.removeEventListener("scroll", schedule, true);
+      window.removeEventListener("resize", schedule);
+      raf.cancel();
+      observer?.disconnect();
+    };
+  }, [recompute, raf, panel]);
+  return { ref, style };
+}
+function CursorCoordsHud({ canvasRef, anchorRef, viewRef, offset }) {
   const [state, setState] = useState({
     client: { x: 0, y: 0 },
     world: null,
-    inCanvas: false,
-    anchor: null
+    inCanvas: false
   });
   const [fps, setFps] = useState(0);
+  const { ref, style: anchorStyle } = useHostAnchor(
+    () => anchorRef?.current ?? canvasRef.current?.parentElement ?? canvasRef.current,
+    {
+      align: { x: "end", y: "start" },
+      offset: { x: offset?.right ?? 8, y: offset?.top ?? 8 }
+    }
+  );
   const framesRef = useRef(0);
   const lastFlushRef = useRef(0);
   const fpsLoop = useVisibleRaf(
@@ -21653,49 +21869,33 @@ function CursorCoordsHud({ canvasRef, viewRef, offset }) {
     return () => fpsLoop.cancel();
   }, [fpsLoop]);
   useEffect(() => {
-    const readAnchor = () => {
-      const canvas = canvasRef.current;
-      if (!canvas) return null;
-      const host = canvas.parentElement ?? canvas;
-      const rect = host.getBoundingClientRect();
-      return { top: rect.top, right: window.innerWidth - rect.right };
-    };
     const onMove = (e) => {
       const canvas = canvasRef.current;
       const view = viewRef.current;
       const client = { x: e.clientX, y: e.clientY };
-      const anchor = readAnchor();
       if (!canvas || !view) {
-        setState({ client, world: null, inCanvas: false, anchor });
+        setState({ client, world: null, inCanvas: false });
         return;
       }
       const rect = canvas.getBoundingClientRect();
       const inCanvas = e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
       const [wx, wy] = clientToWorld(e.clientX, e.clientY, rect, view);
       const world = { x: wx, y: wy };
-      setState({ client, world, inCanvas, anchor });
+      setState({ client, world, inCanvas });
     };
-    const onLayout = () => setState((s) => ({ ...s, anchor: readAnchor() }));
     document.addEventListener("pointermove", onMove);
-    window.addEventListener("scroll", onLayout, true);
-    window.addEventListener("resize", onLayout);
-    setState((s) => ({ ...s, anchor: readAnchor() }));
     return () => {
       document.removeEventListener("pointermove", onMove);
-      window.removeEventListener("scroll", onLayout, true);
-      window.removeEventListener("resize", onLayout);
     };
   }, [canvasRef, viewRef]);
-  if (!state.anchor) return null;
-  const top = state.anchor.top + (offset?.top ?? 8);
-  const right = state.anchor.right + (offset?.right ?? 8);
+  if (!anchorStyle) return null;
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref,
       style: {
         position: "fixed",
-        top,
-        right,
+        ...anchorStyle,
         zIndex: 1e4,
         background: "rgba(0,0,0,0.7)",
         color: "#e8e8e8",
@@ -21718,33 +21918,31 @@ function CursorCoordsHud({ canvasRef, viewRef, offset }) {
   );
 }
 var PickHud_default = {};
-function PickHud({ canvasRef, viewRef, pickEvery, pickBest, offset }) {
+function PickHud({ canvasRef, anchorRef, viewRef, pickEvery, pickBest, offset }) {
   const [state, setState] = useState({
     ids: [],
     best: null,
-    inCanvas: false,
-    anchor: null
+    inCanvas: false
   });
+  const { ref, style } = useHostAnchor(
+    () => anchorRef?.current ?? canvasRef.current?.parentElement ?? canvasRef.current,
+    {
+      align: { x: "end", y: "start" },
+      offset: { x: offset?.right ?? 8, y: offset?.top ?? 76 }
+    }
+  );
   useEffect(() => {
-    const readAnchor = () => {
-      const canvas = canvasRef.current;
-      if (!canvas) return null;
-      const host = canvas.parentElement ?? canvas;
-      const rect = host.getBoundingClientRect();
-      return { top: rect.top, right: window.innerWidth - rect.right };
-    };
     const onMove = (e) => {
       const canvas = canvasRef.current;
       const view = viewRef.current;
-      const anchor = readAnchor();
       if (!canvas || !view) {
-        setState({ ids: [], best: null, inCanvas: false, anchor });
+        setState({ ids: [], best: null, inCanvas: false });
         return;
       }
       const rect = canvas.getBoundingClientRect();
       const inCanvas = e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top && e.clientY <= rect.bottom;
       if (!inCanvas) {
-        setState({ ids: [], best: null, inCanvas: false, anchor });
+        setState({ ids: [], best: null, inCanvas: false });
         return;
       }
       const worldX = (e.clientX - rect.left) / view.scale.x + view.x;
@@ -21763,24 +21961,15 @@ function PickHud({ canvasRef, viewRef, pickEvery, pickBest, offset }) {
           best = null;
         }
       }
-      setState({ ids, best, inCanvas: true, anchor });
+      setState({ ids, best, inCanvas: true });
     };
-    const onLayout = () => setState((s) => ({ ...s, anchor: readAnchor() }));
     document.addEventListener("pointermove", onMove);
-    window.addEventListener("scroll", onLayout, true);
-    window.addEventListener("resize", onLayout);
-    setState((s) => ({ ...s, anchor: readAnchor() }));
     return () => {
       document.removeEventListener("pointermove", onMove);
-      window.removeEventListener("scroll", onLayout, true);
-      window.removeEventListener("resize", onLayout);
     };
   }, [canvasRef, viewRef, pickEvery, pickBest]);
-  if (!state.anchor) return null;
-  const top = state.anchor.top + (offset?.top ?? 76);
-  const right = state.anchor.right + (offset?.right ?? 8);
-  const style = { top, right };
-  return /* @__PURE__ */ jsxs("div", { className: PickHud_default.hud, style, children: [
+  if (!style) return null;
+  return /* @__PURE__ */ jsxs("div", { ref, className: PickHud_default.hud, style, children: [
     /* @__PURE__ */ jsxs("div", { className: PickHud_default.header, children: [
       "pickEvery (",
       state.ids.length,
@@ -21797,34 +21986,20 @@ function PickHud({ canvasRef, viewRef, pickEvery, pickBest, offset }) {
   ] });
 }
 var ModalityHud_default = {};
-function ModalityHud({ canvasRef, modeId, offset }) {
+function ModalityHud({ canvasRef, anchorRef, modeId, offset }) {
   const toolCtx = useOptionalActiveToolContext();
-  const [state, setState] = useState({ anchor: null });
-  useEffect(() => {
-    const readAnchor = () => {
-      const canvas = canvasRef.current;
-      if (!canvas) return null;
-      const host = canvas.parentElement ?? canvas;
-      const rect = host.getBoundingClientRect();
-      return { top: rect.top, right: window.innerWidth - rect.right };
-    };
-    const onLayout = () => setState({ anchor: readAnchor() });
-    onLayout();
-    window.addEventListener("scroll", onLayout, true);
-    window.addEventListener("resize", onLayout);
-    return () => {
-      window.removeEventListener("scroll", onLayout, true);
-      window.removeEventListener("resize", onLayout);
-    };
-  }, [canvasRef]);
-  if (!state.anchor) return null;
-  const top = state.anchor.top + (offset?.top ?? 220);
-  const right = state.anchor.right + (offset?.right ?? 8);
-  const style = { top, right };
+  const { ref, style } = useHostAnchor(
+    () => anchorRef?.current ?? canvasRef.current?.parentElement ?? canvasRef.current,
+    {
+      align: { x: "end", y: "start" },
+      offset: { x: offset?.right ?? 8, y: offset?.top ?? 220 }
+    }
+  );
+  if (!style) return null;
   const active = toolCtx?.active ?? null;
   const hotkeys = toolCtx?.hotkeyStack ?? [];
   const hotkeyTop = hotkeys.length > 0 ? hotkeys[hotkeys.length - 1] : null;
-  return /* @__PURE__ */ jsxs("div", { className: ModalityHud_default.hud, style, children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: ModalityHud_default.hud, style, children: [
     /* @__PURE__ */ jsxs("div", { className: ModalityHud_default.row, children: [
       /* @__PURE__ */ jsx("span", { className: ModalityHud_default.label, children: "mode" }),
       /* @__PURE__ */ jsx("span", { className: modeId ? ModalityHud_default.value : ModalityHud_default.valueMuted, children: modeId ?? "\u2014" })
@@ -21955,6 +22130,8 @@ function CanvasInner(props, ref) {
     boundsOf: boundsOf2,
     pickEvery,
     clientToWorld: clientToWorld2,
+    paintInto,
+    inputElement,
     geometry = AUTO_POSE_DESCRIPTOR,
     className,
     style,
@@ -22000,6 +22177,15 @@ function CanvasInner(props, ref) {
   debugSinkRefForCtx.current = debugSink;
   const adapter = adapterProp;
   const canvasRef = useRef(null);
+  const ownCanvasRef = useRef(null);
+  const detached = !!paintInto;
+  if (detached) {
+    canvasRef.current = inputElement ?? null;
+  }
+  const paintTargetRef = useRef(null);
+  paintTargetRef.current = detached ? paintInto.canvas ?? null : null;
+  const paintRectRef = useRef(null);
+  paintRectRef.current = detached ? { x: paintInto.x, y: paintInto.y } : null;
   const helpersForLayersRef = useRef(null);
   const dimsRef = useRef({ width, height });
   dimsRef.current = { width, height };
@@ -22087,7 +22273,10 @@ function CanvasInner(props, ref) {
     };
   }, []);
   useImperativeHandle(ref, () => ({
-    element: canvasRef.current,
+    // Named rather than read off `canvasRef` so the handle rebuilds when a
+    // detached surface's input element arrives, which is a render later.
+    element: detached ? inputElement ?? null : canvasRef.current,
+    surface: detached ? paintInto?.canvas ?? null : ownCanvasRef.current,
     requestRedraw,
     subscribeFrame,
     registerLayer,
@@ -22098,6 +22287,10 @@ function CanvasInner(props, ref) {
     getPaintedVersion
   }), [
     canvasRef,
+    ownCanvasRef,
+    detached,
+    inputElement,
+    paintInto?.canvas,
     requestRedraw,
     subscribeFrame,
     registerLayer,
@@ -22393,8 +22586,9 @@ function CanvasInner(props, ref) {
     shaders
   };
   const paint = useCallback(() => {
-    const c = canvasRef.current;
+    const c = paintTargetRef.current ?? ownCanvasRef.current;
     if (!c) return false;
+    const rect = paintRectRef.current;
     const {
       layers: paintLayers,
       width: w,
@@ -22423,7 +22617,9 @@ function CanvasInner(props, ref) {
       try {
         renderer = new WeaselRenderer({
           gl,
-          canvas: c,
+          // A shared buffer is the caller's to size. Handing the renderer the
+          // element would have every co-tenant resize it to its own pane.
+          ...rect ? {} : { canvas: c },
           width: w,
           height: h,
           dpr
@@ -22442,6 +22638,7 @@ function CanvasInner(props, ref) {
         lastResizeRef.current = { w, h, dpr };
       }
     }
+    renderer.setTarget(rect ? { origin: { x: rect.x, y: rect.y } } : null);
     const view = viewRef.current;
     const commands = drawLayers(
       paintLayers,
@@ -22490,31 +22687,69 @@ function CanvasInner(props, ref) {
   }, [shaderIdKey]);
   const toolsCursor = tools ? resolveToolsCursor(tools, toolsCtxBase) : void 0;
   const effectiveStyle = toolsCursor ? { ...style, cursor: toolsCursor } : style;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "canvas",
+  const layersForMoveRef = useRef(layersWithDebug);
+  layersForMoveRef.current = layersWithDebug;
+  useEffect(() => {
+    if (!detached || !inputElement) return;
+    const el = inputElement;
+    const onDown = () => {
+      if (autoFocusOnPointerDown) el.focus();
+      pointerDownRef.current = true;
+    };
+    const onMove = (e) => {
+      if (pointerDownRef.current) return;
+      const view = viewRef.current;
+      const [worldX, worldY] = toWorld(
+        el,
+        e.clientX,
+        e.clientY,
+        view,
+        clientToWorldRef.current
+      );
+      const dims = dimsRef.current;
+      for (const layer of layersForMoveRef.current) {
+        layer.onUncapturedMove?.(worldX, worldY, e, view, dims);
+      }
+    };
+    const onUp = () => {
+      pointerDownRef.current = false;
+    };
+    const onLeave = () => {
+      pointerDownRef.current = false;
+      for (const layer of layersForMoveRef.current) layer.onUncapturedLeave?.();
+    };
+    const onMenu = (e) => e.preventDefault();
+    el.addEventListener("pointerdown", onDown);
+    el.addEventListener("pointermove", onMove);
+    el.addEventListener("pointerup", onUp);
+    el.addEventListener("pointerleave", onLeave);
+    el.addEventListener("contextmenu", onMenu);
+    return () => {
+      el.removeEventListener("pointerdown", onDown);
+      el.removeEventListener("pointermove", onMove);
+      el.removeEventListener("pointerup", onUp);
+      el.removeEventListener("pointerleave", onLeave);
+      el.removeEventListener("contextmenu", onMenu);
+    };
+  }, [detached, inputElement, autoFocusOnPointerDown]);
+  useEffect(() => {
+    if (!detached || !inputElement) return;
+    inputElement.style.cursor = toolsCursor ?? "";
+  }, [detached, inputElement, toolsCursor]);
+  const huds = /* @__PURE__ */ jsxs(Fragment, { children: [
+    cursorCoordsHud && /* @__PURE__ */ jsx(
+      CursorCoordsHud,
       {
-        ref: canvasRef,
-        width,
-        height,
-        tabIndex,
-        className,
-        style: effectiveStyle,
-        onFocus,
-        onBlur,
-        onPointerDown: handlePointerDown,
-        onPointerMove: handlePointerMove,
-        onPointerUp: handlePointerUp,
-        onPointerCancel: handlePointerCancel,
-        onPointerLeave: handlePointerLeave,
-        onContextMenu: (e) => e.preventDefault()
+        canvasRef,
+        ...detached ? { anchorRef: canvasRef } : {},
+        viewRef
       }
     ),
-    cursorCoordsHud && /* @__PURE__ */ jsx(CursorCoordsHud, { canvasRef, viewRef }),
     pickHud && /* @__PURE__ */ jsx(
       PickHud,
       {
         canvasRef,
+        ...detached ? { anchorRef: canvasRef } : {},
         viewRef,
         pickEvery: stablePickEveryForHud,
         pickBest: stablePickBestForHud
@@ -22524,10 +22759,37 @@ function CanvasInner(props, ref) {
       ModalityHud,
       {
         canvasRef,
+        ...detached ? { anchorRef: canvasRef } : {},
         modeId: typeof modalityHud === "object" ? modalityHud.modeId : void 0
       }
     )
   ] });
+  if (detached) return inputElement ? huds : null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: (el) => {
+          ownCanvasRef.current = el;
+          canvasRef.current = el;
+        },
+        width,
+        height,
+        tabIndex,
+        className,
+        style: effectiveStyle,
+        onFocus,
+        onBlur,
+        onPointerDown: handlePointerDown,
+        onPointerMove: handlePointerMove,
+        onPointerUp: handlePointerUp,
+        onPointerCancel: handlePointerCancel,
+        onPointerLeave: handlePointerLeave,
+        onContextMenu: (e) => e.preventDefault()
+      }
+    ),
+    huds
+  ] });
 }
 var Canvas = forwardRef(CanvasInner);
 function composeAlphaFor(scene, alphaFor) {
@@ -23656,6 +23918,32 @@ function sceneFromJSON(json, options) {
   });
 }
 var SelectionContext = createContext(null);
+function SelectionContextProvider({ children }) {
+  const [state, setState] = useState({ selection: [], kinds: void 0 });
+  const lastSerializedRef = useRef("");
+  const publishSelection = useCallback((ids, kinds) => {
+    const next = JSON.stringify([ids, kinds]);
+    if (next === lastSerializedRef.current) return;
+    lastSerializedRef.current = next;
+    setState({ selection: ids, kinds });
+  }, []);
+  const value = useMemo(
+    () => ({
+      selection: state.selection,
+      ...state.kinds !== void 0 ? { kinds: state.kinds } : {},
+      publishSelection
+    }),
+    [state, publishSelection]
+  );
+  return /* @__PURE__ */ jsx(SelectionContext.Provider, { value, children });
+}
+function SelectionContextProviderIfRoot({
+  children
+}) {
+  const parent = useContext(SelectionContext);
+  if (parent !== null) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx(SelectionContextProvider, { children });
+}
 function usePublishSelection(ids, kinds) {
   const ctx = useContext(SelectionContext);
   const idsRef = useRef(ids);
@@ -25113,7 +25401,7 @@ function useDispatcherOverlayLayer(args) {
                 break;
               case "pencil": {
                 if (geom.samples.length < 2) break;
-                pathCmd = polygonFromPoints(projectPoints(geom.samples));
+                pathCmd = polylineFromPoints(projectPoints(geom.samples));
                 break;
               }
             }
@@ -25125,7 +25413,7 @@ function useDispatcherOverlayLayer(args) {
               stroke: { paint: { color: cfg.stroke }, width: cfg.lineWidth, dash: cfg.dash }
             };
             out.push(cmd);
-            if (ov.anchorPoint) {
+            if (ov.anchorPoint && ov.shape !== "pencil") {
               const anchorScreen = projectPoint(ov.anchorPoint.x, ov.anchorPoint.y);
               out.push({
                 kind: "path",
@@ -26994,7 +27282,7 @@ function SceneCanvasInner(props, ref) {
     boundary: inertiaObj.boundary,
     bounds: inertiaObj.bounds
   } : void 0;
-  const handTool = useHandTool(handToolInertia ? { inertia: handToolInertia } : {});
+  const handTool = useHandTool(handToolInertia ? {} : {});
   const viewportAmbient = [];
   const baseRequestedTools = defaultTools ?? (toolBundle ? BUNDLE_TOOLS[toolBundle] : null) ?? (viewportRegistered ? ["select", "rotate", "hand"] : ["select", "rotate"]);
   const KNOWN_BUILTIN_IDS = /* @__PURE__ */ new Set([
@@ -27719,14 +28007,12 @@ function StandardActionsRegistrar({
   }, [registry22, actionsRegistryRef]);
   useEffect(() => {
     if (!registry22) return;
-    registry22.setDispatcher(dispatcher);
-    return () => registry22.setDispatcher(null);
+    return registry22.setDispatcher(dispatcher);
   }, [registry22, dispatcher]);
   const wiredDepRegistry = useDepRegistry();
   useEffect(() => {
     if (!registry22) return;
-    registry22.setDepRegistry(wiredDepRegistry);
-    return () => registry22.setDepRegistry(null);
+    return registry22.setDepRegistry(wiredDepRegistry);
   }, [registry22, wiredDepRegistry]);
   useEffect(() => {
     if (!registry22) return;
@@ -27787,7 +28073,7 @@ var SceneCanvasInnerForwardRef = forwardRef(SceneCanvasInner);
 function SceneCanvasWrapper(props, ref) {
   return /* @__PURE__ */ jsx(ActiveToolContextProviderIfRoot, { children: /* @__PURE__ */ jsx(ViewRegistryProvider, { children: /* @__PURE__ */ jsx(SceneCanvasInnerForwardRef, { ...props, ref }) }) });
 }
-forwardRef(SceneCanvasWrapper);
+var SceneCanvas = forwardRef(SceneCanvasWrapper);
 var RAD_TO_DEG = 180 / Math.PI;
 var rotationDegreesUnit = {
   toDisplay: (rad) => Math.round(rad * RAD_TO_DEG * 10) / 10,
@@ -27919,9 +28205,9 @@ function shapeSchema(opts = {}) {
                     fontWeight: { kind: "number", name: "Weight", description: "Font weight, 100\u2013900.", default: 400, min: 100, max: 900, step: 100, pair: "Size / weight" },
                     fontStyle: { kind: "enum", name: "Style", description: "Upright or italic.", default: "normal", options: [{ value: "normal", label: "Normal" }, { value: "italic", label: "Italic" }] },
                     letterSpacing: { kind: "number", name: "Tracking", description: "Extra advance per glyph, world units.", default: 0, step: 0.1 },
-                    underline: { kind: "boolean", name: "Underline", description: "Underline the text.", default: false },
-                    strikethrough: { kind: "boolean", name: "Strikethrough", description: "Strike through the text.", default: false },
-                    overline: { kind: "boolean", name: "Overline", description: "Rule the text above its ascent.", default: false }
+                    underline: { kind: "boolean", name: "Underline", description: "Underline the text.", default: false, control: "toggle", short: "U", pair: "Decoration" },
+                    strikethrough: { kind: "boolean", name: "Strikethrough", description: "Strike through the text.", default: false, control: "toggle", short: "S", pair: "Decoration" },
+                    overline: { kind: "boolean", name: "Overline", description: "Rule the text above its ascent.", default: false, control: "toggle", short: "O", pair: "Decoration" }
                   }
                 },
                 paragraph: {
@@ -28274,6 +28560,125 @@ function MinimapCanvasInner(props) {
   );
 }
 var MinimapCanvas = MinimapCanvasInner;
+function planPixelRender(args) {
+  const { sourceRect, scale: scale2 } = args;
+  for (const [label, v] of [
+    ["sourceRect.width", sourceRect.width],
+    ["sourceRect.height", sourceRect.height],
+    ["scale.x", scale2.x],
+    ["scale.y", scale2.y]
+  ]) {
+    if (!Number.isFinite(v) || v <= 0) {
+      throw new Error(`renderSceneToPixels: ${label} must be a positive finite number, got ${v}`);
+    }
+  }
+  for (const [label, v] of [
+    ["sourceRect.x", sourceRect.x],
+    ["sourceRect.y", sourceRect.y]
+  ]) {
+    if (!Number.isFinite(v)) {
+      throw new Error(`renderSceneToPixels: ${label} must be a finite number, got ${v}`);
+    }
+  }
+  const width = Math.max(1, Math.round(sourceRect.width * scale2.x));
+  const height = Math.max(1, Math.round(sourceRect.height * scale2.y));
+  const view = { x: sourceRect.x, y: sourceRect.y, scale: { x: scale2.x, y: scale2.y } };
+  const resolveImage = args.resolveImage;
+  const drawOne = args.drawOne ?? ((node, pose, view2, ctx) => defaultDrawOne(node, pose, view2, { ...ctx, resolveImage }));
+  const commands = [];
+  if (args.background !== void 0) {
+    commands.push({
+      kind: "path",
+      path: { kind: "rect", x: 0, y: 0, width, height },
+      fill: { fill: "solid", color: args.background }
+    });
+  }
+  commands.push(...buildSceneViewCommands(args.scene, view, drawOne, void 0, args.alphaFor));
+  return { width, height, view, commands };
+}
+function defaultCreateCanvas(width, height) {
+  if (typeof OffscreenCanvas !== "undefined") {
+    return new OffscreenCanvas(width, height);
+  }
+  if (typeof document !== "undefined") {
+    const c = document.createElement("canvas");
+    c.width = width;
+    c.height = height;
+    return c;
+  }
+  throw new Error("renderSceneToPixels: no canvas source in this environment \u2014 supply `gl` or `createCanvas`");
+}
+function flipRows(raw, width, height) {
+  const rowBytes = width * 4;
+  const out = new Uint8ClampedArray(raw.length);
+  for (let y = 0; y < height; y++) {
+    out.set(raw.subarray((height - 1 - y) * rowBytes, (height - y) * rowBytes), y * rowBytes);
+  }
+  return out;
+}
+function unpremultiply(data) {
+  for (let i = 0; i < data.length; i += 4) {
+    const a = data[i + 3];
+    if (a === 0 || a === 255) continue;
+    const inv = 255 / a;
+    data[i] = data[i] * inv;
+    data[i + 1] = data[i + 1] * inv;
+    data[i + 2] = data[i + 2] * inv;
+  }
+}
+function renderSceneToPixels(args) {
+  if (args.gl && args.createCanvas) {
+    throw new Error("renderSceneToPixels: `gl` and `createCanvas` are mutually exclusive");
+  }
+  const plan = planPixelRender(args);
+  const { width, height } = plan;
+  let gl = args.gl;
+  if (!gl) {
+    const canvas = (args.createCanvas ?? defaultCreateCanvas)(width, height);
+    canvas.width = width;
+    canvas.height = height;
+    gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true, stencil: true }) ?? void 0;
+  }
+  if (!gl || typeof gl.enable !== "function") {
+    throw new Error("renderSceneToPixels: WebGL2 is unavailable \u2014 supply `gl` or a WebGL2-capable `createCanvas`");
+  }
+  if (typeof gl.isContextLost === "function" && gl.isContextLost()) {
+    throw new Error("renderSceneToPixels: the supplied WebGL2 context is lost");
+  }
+  const flattenTolerancePx = args.flattenTolerancePx ?? 0.25;
+  const renderer = new WeaselRenderer({
+    gl,
+    width,
+    height,
+    dpr: 1,
+    imageMinification: "mipmap",
+    flattenTolerance: flattenTolerancePx / Math.max(args.scale.x, args.scale.y),
+    // Dynamic canvas-SDF glyphs must all bake inline — this path is
+    // synchronous with no notify-and-redraw, and print must be complete.
+    bakeBudget: Infinity
+  });
+  try {
+    renderer.render(plan.commands, viewToMat3(plan.view));
+    if (typeof gl.isContextLost === "function" && gl.isContextLost()) {
+      throw new Error("renderSceneToPixels: WebGL2 context was lost during render");
+    }
+    const raw = new Uint8Array(width * height * 4);
+    gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, raw);
+    const data = flipRows(raw, width, height);
+    unpremultiply(data);
+    return { width, height, data };
+  } finally {
+    renderer.dispose();
+  }
+}
+function WeaselProvider({ children, isolate = false }) {
+  const Deps = isolate ? DepRegistryProvider : DepRegistryProviderIfRoot;
+  const Actions = isolate ? ActionsProvider : ActionsProviderIfRoot;
+  const ActiveTool = isolate ? ActiveToolContextProvider : ActiveToolContextProviderIfRoot;
+  const Selection = isolate ? SelectionContextProvider : SelectionContextProviderIfRoot;
+  const Pointer = isolate ? PointerContextProvider : PointerProviderIfRoot;
+  return /* @__PURE__ */ jsx(Deps, { children: /* @__PURE__ */ jsx(Actions, { children: /* @__PURE__ */ jsx(ActiveTool, { children: /* @__PURE__ */ jsx(Selection, { children: /* @__PURE__ */ jsx(Pointer, { children }) }) }) }) });
+}
 function createSetTextOp(args) {
   const { id, from, to, label, coalesceKey = `setText:${id}` } = args;
   return {
@@ -28410,6 +28815,6 @@ function oklchToOklab(L, C, h) {
   return [L, C * Math.cos(h), C * Math.sin(h)];
 }
 
-export { FALLBACK_FIT_VIEW, MinimapCanvas, SceneViewCanvas, UnknownIcon, buildSceneViewCommands, computeFitView, computeIndicatorCommand, eligibleContribution, evaluateEnabled, isBuiltinToolPref, oklabToSrgbU8, oklchToOklab, renderSceneToCanvas, rgbaToHex, useActionsRegistry, useOptionalDepRegistry, useVisibleRaf };
-//# sourceMappingURL=chunk-QCICIHEO.js.map
-//# sourceMappingURL=chunk-QCICIHEO.js.map
+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