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

package/dist/index.js

@@ -1,35 +1,1401 @@
-import { useDragDrop, DragOverlay, Palette } from './chunk-3XXPU73K.js';
-import { useSurfaceOptional } from './chunk-LGKRIUSW.js';
-export { SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceOptional, useSurfaceTile, useTiledSurface } from './chunk-LGKRIUSW.js';
+import { createEventBus, pushSnapshot, redo, undo } from './chunk-RL2LOLNI.js';
+export { clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './chunk-RL2LOLNI.js';
+import { useDragDrop, DragOverlay, Palette } from './chunk-5TCEVMPI.js';
+import { useSurfaceOptional, useSurfaceCanvas, useTiledSurface, SurfaceContext, SurfaceCanvasContext } from './chunk-4EY67BKJ.js';
+export { SurfaceCanvasContext, SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceCanvas, useSurfaceOptional, useSurfaceTile, useTiledSurface } from './chunk-4EY67BKJ.js';
 import { useJob } from './chunk-LN6JDUGB.js';
 export { useJob } from './chunk-LN6JDUGB.js';
-import { suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, SidebarRegion, ViewportRegion, StatusRegion } from './chunk-6X5RBC6G.js';
-export { PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, builtinContributions, mergeContributions, suppressContributions } from './chunk-6X5RBC6G.js';
-import { JobProgress } from './chunk-QRYPXSGP.js';
-export { FloatingPanel, JobProgress, Legend, Sidebar } from './chunk-QRYPXSGP.js';
-export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-JDROYQM3.js';
-import { LabStoreContext, createLabStore, noneAdapter } from './chunk-4TMMVIDM.js';
-export { CURRENT_DOCUMENT_VERSION, LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, createMemoryAdapter, labDocumentKey, localStorageAdapter, noneAdapter, quarantineKey, sessionStorageAdapter, urlHashAdapter, useLabStore, useTrialId, useTrialState } from './chunk-4TMMVIDM.js';
-import { fromConfigFields } from './chunk-WTI26YTM.js';
-export { ControlPanel, fromConfigFields, isLeafVisible } from './chunk-WTI26YTM.js';
-import { CanvasStack } from './chunk-BDJXIBRZ.js';
-export { CanvasStack } from './chunk-BDJXIBRZ.js';
-export { screenToWorld, worldToScreen } from './chunk-T66HU3HX.js';
-export { CanvasStackContext } from './chunk-CPUJ3QXL.js';
-import { LayerList } from './chunk-BMW4TDP5.js';
-export { LayerList } from './chunk-BMW4TDP5.js';
+import { ANNOTATION_WEASEL_TOOLS, annotationToolInfo, suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, SidebarRegion, ViewportRegion, StatusRegion, AnnotationsContext } from './chunk-LITE5YFB.js';
+export { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, AnnotationsContext, ExportMenu, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, annotationToolInfo, builtinContributions, mergeContributions, suppressContributions, useAnnotations, useAnnotationsOptional } from './chunk-LITE5YFB.js';
+import { JobProgress } from './chunk-3P5TTTA7.js';
+export { FloatingPanel, JobProgress, Legend, Sidebar } from './chunk-3P5TTTA7.js';
+export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-6JMU56CU.js';
+import { LabStoreContext, TrialIdProvider, createLabStore, panelKey, noneAdapter } from './chunk-XJ6N32QP.js';
+export { CURRENT_DOCUMENT_VERSION, LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, createMemoryAdapter, dockPanel, labDocumentKey, localStorageAdapter, noneAdapter, panelKey, quarantineKey, sessionStorageAdapter, undockPanel, urlHashAdapter, useLabStore, useTrialId, useTrialState } from './chunk-XJ6N32QP.js';
+import { fromConfigFields } from './chunk-YQJNT4XQ.js';
+export { ControlPanel, fromConfigFields, isLeafVisible } from './chunk-YQJNT4XQ.js';
+import { CanvasStack } from './chunk-3ZELRRBV.js';
+export { CanvasStack } from './chunk-3ZELRRBV.js';
+import { LayerList } from './chunk-JDDIZSLL.js';
+export { LayerList } from './chunk-JDDIZSLL.js';
 import './chunk-SBXNQW4G.js';
-import { Rt, p, r } from './chunk-RGT4EJIB.js';
-export { k as CheckboxRow, O as ColorRow, m2 as CurveField, _2 as EffectCard, y as EffectCardList, c3 as LayerStack, j as NumberRow, b2 as PropertyGroup, S2 as PropertyList, x2 as PropertyPanel, w as PropertyRow, C as PropertySpan, M as SelectRow, E as SliderRow, g as Subpanel, A as TextRow, N as ToggleRow } from './chunk-RGT4EJIB.js';
-import './chunk-QCICIHEO.js';
-import { createEventBus, pushSnapshot, redo, undo } from './chunk-RL2LOLNI.js';
-export { clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './chunk-RL2LOLNI.js';
-import { createContext, useRef, useCallback, useContext, useMemo, useState, Children, useLayoutEffect, useEffect } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { C, p, r2 } from './chunk-HEORBLVT.js';
+export { k2 as CheckboxRow, O2 as ColorRow, m2 as CurveField, _3 as EffectCard, y2 as EffectCardList, c3 as LayerStack, j2 as NumberRow, b3 as PropertyGroup, S2 as PropertyList, x3 as PropertyPanel, w as PropertyRow, C2 as PropertySpan, M as SelectRow, E as SliderRow, g as Subpanel, A2 as TextRow, N as ToggleRow } from './chunk-HEORBLVT.js';
+import { resolveLoupe, TrialLoupe } from './chunk-EQIB2PGC.js';
+export { CanvasLoupe, DomLoupe, LOUPE_DEFAULTS, LoupeBubble, TrialLoupe, drawCanvasLens, lensCamera, lensSourceRect, resolveLoupe, sampleStack, useLoupe } from './chunk-EQIB2PGC.js';
+export { centerOn, zoomAt } from './chunk-CTRKTLYZ.js';
+import { applyCamera } from './chunk-2AYGEN57.js';
+export { DEFAULT_FRAME, applyCamera, resolveFrame, screenToWorld, worldToScreen } from './chunk-2AYGEN57.js';
+export { CanvasStackContext } from './chunk-CQLQPQ4P.js';
+import { textCommand, linePath, markerDrawCommands, ellipsePath, rectPath, createScene, asNodeId as asNodeId$1, WeaselProvider, SceneCanvas, sceneFromJSON, PathBuilder, renderSceneToPixels, useActiveToolContext, resolveStrokeWidth, getMarker, getPaintKind, boundsOfPath, tileGeometry, PATH_M, PATH_L, PATH_C, PATH_Q, PATH_Z, SCRIPT_METRICS } from './chunk-ROQDRXKW.js';
+import { createContext, useState, useRef, useEffect, useCallback, useContext, useMemo, Children, useLayoutEffect, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { useStore } from 'zustand/react';
 import { Provider, StrategyRegistryProvider, DragProvider, Container, useDragHandle } from 'windease/react';
-import { asNodeId, Store, createNode, gridStrategy } from 'windease';
+import { asNodeId, Store, createNode, floatingStrategy, gridStrategy } from 'windease';
+
+// ../svg/dist/index.js
+var IDENTITY_MATRIX = [1, 0, 0, 1, 0, 0];
+function multiply(a, b2) {
+  return [
+    a[0] * b2[0] + a[2] * b2[1],
+    a[1] * b2[0] + a[3] * b2[1],
+    a[0] * b2[2] + a[2] * b2[3],
+    a[1] * b2[2] + a[3] * b2[3],
+    a[0] * b2[4] + a[2] * b2[5] + a[4],
+    a[1] * b2[4] + a[3] * b2[5] + a[5]
+  ];
+}
+function isIdentity(m2, eps = 1e-9) {
+  return Math.abs(m2[0] - 1) < eps && Math.abs(m2[1]) < eps && Math.abs(m2[2]) < eps && Math.abs(m2[3] - 1) < eps && Math.abs(m2[4]) < eps && Math.abs(m2[5]) < eps;
+}
+function formatMatrix(m2) {
+  if (isIdentity(m2)) return null;
+  return `matrix(${m2.map((n) => trimNumber(n)).join(" ")})`;
+}
+function trimNumber(n) {
+  if (!Number.isFinite(n)) return "0";
+  const r2 = Math.round(n * 1e6) / 1e6;
+  if (Number.isInteger(r2)) return String(r2);
+  return String(r2);
+}
+function patternSpecOf(paint) {
+  return "tile" in paint.pattern ? paint.pattern : null;
+}
+function patternXml(id, paint, onWarn) {
+  const spec = patternSpecOf(paint);
+  if (!spec) {
+    onWarn?.("pattern fill carries a TextureHandle, which has no vector form \u2014 omitted from <defs>");
+    return "";
+  }
+  const geometry = tileGeometry(spec);
+  const body = geometry.shapes.map(shapeXml).join("");
+  const origin = paint.origin ?? { x: 0, y: 0 };
+  const attrs = [
+    `id="${id}"`,
+    'patternUnits="userSpaceOnUse"',
+    `width="${trimNumber(geometry.size)}"`,
+    `height="${trimNumber(geometry.size)}"`
+  ];
+  if (origin.x !== 0 || origin.y !== 0) {
+    attrs.push(`x="${trimNumber(origin.x)}"`, `y="${trimNumber(origin.y)}"`);
+  }
+  attrs.push(`data-weasel-tile="${escapeAttr(JSON.stringify(spec))}"`);
+  return `<pattern ${attrs.join(" ")}>${body}</pattern>`;
+}
+function shapeXml(shape) {
+  switch (shape.kind) {
+    case "line":
+      return `<line x1="${trimNumber(shape.x1)}" y1="${trimNumber(shape.y1)}" x2="${trimNumber(shape.x2)}" y2="${trimNumber(shape.y2)}" stroke="${shape.color}" stroke-width="${trimNumber(shape.width)}"/>`;
+    case "circle":
+      return `<circle cx="${trimNumber(shape.cx)}" cy="${trimNumber(shape.cy)}" r="${trimNumber(shape.r)}" fill="${shape.color}"/>`;
+    case "ellipse": {
+      const deg = shape.rotation * 180 / Math.PI;
+      const transform = deg === 0 ? "" : ` transform="rotate(${trimNumber(deg)} ${trimNumber(shape.cx)} ${trimNumber(shape.cy)})"`;
+      return `<ellipse cx="${trimNumber(shape.cx)}" cy="${trimNumber(shape.cy)}" rx="${trimNumber(shape.rx)}" ry="${trimNumber(shape.ry)}" fill="${shape.color}"${transform}/>`;
+    }
+    case "rect":
+      return `<rect x="${trimNumber(shape.x)}" y="${trimNumber(shape.y)}" width="${trimNumber(shape.width)}" height="${trimNumber(shape.height)}" fill="${shape.color}"/>`;
+    default:
+      return "";
+  }
+}
+function escapeAttr(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function serializePathD(path) {
+  if (path.kind === "rect") {
+    const { x: x2, y: y2, width, height } = path;
+    return `M${trimNumber(x2)} ${trimNumber(y2)}h${trimNumber(width)}v${trimNumber(height)}h${trimNumber(-width)}Z`;
+  }
+  const cmds = path.commands;
+  const xs = path.coords;
+  const out = [];
+  let ci = 0;
+  for (let i = 0; i < cmds.length; i++) {
+    const c2 = cmds[i];
+    if (c2 === PATH_M) {
+      out.push(`M${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])}`);
+      ci += 2;
+    } else if (c2 === PATH_L) {
+      out.push(`L${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])}`);
+      ci += 2;
+    } else if (c2 === PATH_C) {
+      out.push(
+        `C${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])} ${trimNumber(xs[ci + 2])} ${trimNumber(xs[ci + 3])} ${trimNumber(xs[ci + 4])} ${trimNumber(xs[ci + 5])}`
+      );
+      ci += 6;
+    } else if (c2 === PATH_Q) {
+      out.push(
+        `Q${trimNumber(xs[ci])} ${trimNumber(xs[ci + 1])} ${trimNumber(xs[ci + 2])} ${trimNumber(xs[ci + 3])}`
+      );
+      ci += 4;
+    } else if (c2 === PATH_Z) {
+      out.push("Z");
+    }
+  }
+  return out.join("");
+}
+var PaintServerRegistry = class {
+  byPaint = /* @__PURE__ */ new Map();
+  order = [];
+  counter = 0;
+  // Marker keys referenced by any stroke, in first-use order. The `<defs>`
+  // id is the marker key itself, not a minted counter id: `parseSvg` reads a
+  // `marker-end="url(#id)"` fragment back as the marker key directly (it
+  // never inspects the `<marker>` element), so a synthetic id would come
+  // back unresolvable and warn on round-trip.
+  markerKeys = [];
+  markerKeySet = /* @__PURE__ */ new Set();
+  register(paint) {
+    const existing = this.byPaint.get(paint);
+    if (existing) return existing;
+    const id = paint.fill === "pattern" ? `pat${this.counter++}` : `grad${this.counter++}`;
+    this.byPaint.set(paint, id);
+    this.order.push(paint);
+    return id;
+  }
+  /** The `<defs>` id for a marker key — the key itself, minting nothing.
+   *  `undefined` when nothing is registered under `key`, so a caller emits no
+   *  attribute at all rather than a `url(#…)` pointing at a def that will
+   *  never be written. */
+  markerId(key) {
+    if (getMarker(key) === void 0) return void 0;
+    if (!this.markerKeySet.has(key)) {
+      this.markerKeySet.add(key);
+      this.markerKeys.push(key);
+    }
+    return key;
+  }
+  /** Emit `<defs>...</defs>` XML for every registered paint server and marker. */
+  toDefsXml(onWarn) {
+    if (this.order.length === 0 && this.markerKeys.length === 0) return "";
+    const parts = ["<defs>"];
+    for (const paint of this.order) {
+      parts.push(paintServerXml(this.byPaint.get(paint), paint, onWarn));
+    }
+    for (const key of this.markerKeys) {
+      const entry = getMarker(key);
+      if (!entry) continue;
+      parts.push(entry.toSvg ? entry.toSvg(key, entry) : defaultMarkerXml(key, entry));
+    }
+    parts.push("</defs>");
+    return parts.join("");
+  }
+};
+function defaultMarkerXml(id, entry) {
+  const path = entry.path({ size: 1, stroke: { paint: { fill: "solid", color: "#000" } } });
+  const d = serializePathD(path);
+  const fill = entry.fill === "none" ? "none" : "context-stroke";
+  const outline = entry.outline ? ` stroke="context-stroke" stroke-width="${entry.outline.width}" stroke-linecap="round" stroke-linejoin="round"` : "";
+  return `<marker id="${id}" markerUnits="strokeWidth" markerWidth="8" markerHeight="8" refX="0" refY="0" orient="auto" overflow="visible"><path d="${d}" fill="${fill}"${outline}/></marker>`;
+}
+function paintServerXml(id, paint, onWarn) {
+  if (paint.fill === "pattern") return patternXml(id, paint, onWarn);
+  const builtin = gradientXml(id, paint);
+  if (builtin) return builtin;
+  const custom = getPaintKind(paint.fill)?.toSvg?.(id, paint);
+  if (custom) return custom;
+  onWarn?.(`${paint.fill} fill has no vector form \u2014 omitted from <defs>`);
+  return "";
+}
+function gradientUnitsAttr(units) {
+  return units === "bounds" ? "objectBoundingBox" : "userSpaceOnUse";
+}
+function gradientXml(id, paint) {
+  if (paint.fill === "linear-gradient") {
+    const stops = paint.stops.map(stopXml).join("");
+    return `<linearGradient id="${id}" gradientUnits="${gradientUnitsAttr(paint.units)}" x1="${trimNumber(paint.from.x)}" y1="${trimNumber(paint.from.y)}" x2="${trimNumber(paint.to.x)}" y2="${trimNumber(paint.to.y)}">${stops}</linearGradient>`;
+  }
+  if (paint.fill === "radial-gradient") {
+    const stops = paint.stops.map(stopXml).join("");
+    return `<radialGradient id="${id}" gradientUnits="${gradientUnitsAttr(paint.units)}" cx="${trimNumber(paint.center.x)}" cy="${trimNumber(paint.center.y)}" r="${trimNumber(paint.radius)}">${stops}</radialGradient>`;
+  }
+  return "";
+}
+function stopXml(s) {
+  const m2 = /^#([0-9a-f]{6})([0-9a-f]{2})$/i.exec(s.color);
+  if (m2) {
+    const alpha = parseInt(m2[2], 16) / 255;
+    return `<stop offset="${trimNumber(s.offset)}" stop-color="#${m2[1].toLowerCase()}" stop-opacity="${trimNumber(alpha)}"/>`;
+  }
+  return `<stop offset="${trimNumber(s.offset)}" stop-color="${s.color}"/>`;
+}
+function serializeSvg(nodes, opts = {}) {
+  const registry = new PaintServerRegistry();
+  registerPaintServers(nodes, registry);
+  const bounds = opts.viewBox ?? computeBounds(nodes);
+  const vb = `${trimNumber(bounds.x)} ${trimNumber(bounds.y)} ${trimNumber(bounds.width)} ${trimNumber(bounds.height)}`;
+  const namespaces = opts.namespaces ?? {};
+  const rootAttrs = [`xmlns="http://www.w3.org/2000/svg"`];
+  for (const [prefix, uri] of Object.entries(namespaces)) {
+    rootAttrs.push(`xmlns:${prefix}="${escapeAttr2(uri)}"`);
+  }
+  rootAttrs.push(`viewBox="${vb}"`);
+  if (opts.width != null) rootAttrs.push(`width="${trimNumber(opts.width)}"`);
+  if (opts.height != null) rootAttrs.push(`height="${trimNumber(opts.height)}"`);
+  if (opts.documentMeta) {
+    for (const prefix of Object.keys(namespaces)) {
+      const bucket = opts.documentMeta[prefix];
+      if (!bucket?.attrs) continue;
+      for (const [name, value] of Object.entries(bucket.attrs)) {
+        rootAttrs.push(`${prefix}:${name}="${escapeAttr2(value)}"`);
+      }
+    }
+  }
+  let docMetaXml = "";
+  if (opts.documentMeta) {
+    for (const prefix of Object.keys(namespaces)) {
+      const bucket = opts.documentMeta[prefix];
+      if (!bucket?.elements) continue;
+      for (const [localName, list] of Object.entries(bucket.elements)) {
+        for (const el of list) docMetaXml += namespacedElementXml(prefix, localName, el);
+      }
+    }
+  }
+  const defsXml = registry.toDefsXml(opts.onWarn);
+  const bodyXml = nodes.map((n) => nodeXml(n, registry, namespaces)).join("");
+  const titleXml = opts.title && opts.title.length > 0 ? `<title>${escapeText(opts.title)}</title>` : "";
+  return `<svg ${rootAttrs.join(" ")}>${titleXml}${defsXml}${docMetaXml}${bodyXml}</svg>`;
+}
+function namespacedElementXml(prefix, localName, el) {
+  const attrs = [];
+  for (const [name, value] of Object.entries(el.attrs)) {
+    attrs.push(`${name}="${escapeAttr2(value)}"`);
+  }
+  const head = attrs.length > 0 ? `<${prefix}:${localName} ${attrs.join(" ")}>` : `<${prefix}:${localName}>`;
+  let body = "";
+  if (el.children) {
+    for (const [childName, list] of Object.entries(el.children)) {
+      for (const child of list) body += namespacedElementXml(prefix, childName, child);
+    }
+  } else if (el.text != null) {
+    body = escapeText(el.text);
+  }
+  return `${head}${body}</${prefix}:${localName}>`;
+}
+function metaAttrsXml(meta, namespaces) {
+  if (!meta) return "";
+  const parts = [];
+  for (const prefix of Object.keys(namespaces)) {
+    const bucket = meta[prefix];
+    if (!bucket?.attrs) continue;
+    for (const [name, value] of Object.entries(bucket.attrs)) {
+      parts.push(`${prefix}:${name}="${escapeAttr2(value)}"`);
+    }
+  }
+  return parts.length > 0 ? ` ${parts.join(" ")}` : "";
+}
+function metaElementsXml(meta, namespaces) {
+  if (!meta) return "";
+  let out = "";
+  for (const prefix of Object.keys(namespaces)) {
+    const bucket = meta[prefix];
+    if (!bucket?.elements) continue;
+    for (const [localName, list] of Object.entries(bucket.elements)) {
+      for (const el of list) out += namespacedElementXml(prefix, localName, el);
+    }
+  }
+  return out;
+}
+function registerPaintServers(nodes, registry) {
+  for (const n of nodes) {
+    if (n.kind === "group") {
+      registerPaintServers(n.children, registry);
+    } else if (n.kind === "path") {
+      if (n.fill.kind === "gradient") registry.register(n.fill.paint);
+      if (n.stroke && n.stroke.paint.kind === "gradient") registry.register(n.stroke.paint.paint);
+      registerMarkers(n.stroke, registry);
+    } else if (n.kind === "text") {
+      registerTextPaint(n.fill, registry);
+      registerTextPaint(n.stroke?.paint, registry);
+      registerMarkers(n.stroke, registry);
+      for (const run of n.runs ?? []) {
+        registerTextPaint(run.fill, registry);
+        registerTextPaint(run.stroke?.paint, registry);
+      }
+    }
+  }
+}
+function registerTextPaint(paint, registry) {
+  if (paint && !("color" in paint)) registry.register(paint);
+}
+function markerKeyOfRef(ref) {
+  if (typeof ref === "string") return ref;
+  if (ref && typeof ref === "object" && "key" in ref) return String(ref.key);
+  return void 0;
+}
+function registerMarkers(stroke, registry) {
+  if (!stroke) return;
+  for (const ref of [stroke.markerStart, stroke.markerMid, stroke.markerEnd]) {
+    const key = markerKeyOfRef(ref);
+    if (key) registry.markerId(key);
+  }
+}
+function nodeXml(node, registry, namespaces) {
+  if (node.kind === "group") return groupXml(node, registry, namespaces);
+  if (node.kind === "text") return textXml(node, registry, namespaces);
+  if (node.kind === "image") return imageXml(node, namespaces);
+  return pathXml(node, registry, namespaces);
+}
+function imageXml(node, namespaces) {
+  const attrs = [
+    `href="${escapeAttr2(node.href)}"`,
+    `x="${trimNumber(node.x)}"`,
+    `y="${trimNumber(node.y)}"`,
+    `width="${trimNumber(node.width)}"`,
+    `height="${trimNumber(node.height)}"`,
+    `preserveAspectRatio="none"`
+  ];
+  if (node.opacity != null && node.opacity !== 1) {
+    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
+  }
+  if (node.rotation != null && node.rotation !== 0) {
+    const cx = node.x + node.width / 2;
+    const cy = node.y + node.height / 2;
+    const deg = node.rotation * 180 / Math.PI;
+    attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
+  }
+  const metaAttrs = metaAttrsXml(node.meta, namespaces);
+  const metaEls = metaElementsXml(node.meta, namespaces);
+  if (metaEls) return `<image ${attrs.join(" ")}${metaAttrs}>${metaEls}</image>`;
+  return `<image ${attrs.join(" ")}${metaAttrs}/>`;
+}
+function groupXml(node, registry, namespaces) {
+  const attrs = [];
+  if (node.transform) {
+    const m2 = formatMatrix(node.transform);
+    if (m2) attrs.push(`transform="${m2}"`);
+  }
+  if (node.opacity != null && node.opacity !== 1) {
+    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
+  }
+  const metaAttrs = metaAttrsXml(node.meta, namespaces);
+  const head = attrs.length > 0 ? `<g ${attrs.join(" ")}${metaAttrs}>` : `<g${metaAttrs}>`;
+  const body = node.children.map((c2) => nodeXml(c2, registry, namespaces)).join("");
+  return `${head}${body}${metaElementsXml(node.meta, namespaces)}</g>`;
+}
+function pathXml(node, registry, namespaces) {
+  const attrs = [`d="${serializePathD(node.path)}"`];
+  const fillAttrs = paintAttrs(node.fill, "fill", registry);
+  for (const a of fillAttrs) attrs.push(a);
+  if (node.path.kind === "polygon" && node.path.fillRule === "evenodd") {
+    attrs.push(`fill-rule="evenodd"`);
+  }
+  if (node.stroke) {
+    const strokeAttrs = strokeAttrsFor(node.stroke, registry);
+    for (const a of strokeAttrs) attrs.push(a);
+  } else {
+    attrs.push('stroke="none"');
+  }
+  if (node.opacity != null && node.opacity !== 1) {
+    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
+  }
+  if (node.rotation != null && node.rotation !== 0) {
+    const b2 = pathBounds(node.path);
+    const cx = b2.minX + (b2.maxX - b2.minX) / 2;
+    const cy = b2.minY + (b2.maxY - b2.minY) / 2;
+    const deg = node.rotation * 180 / Math.PI;
+    attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
+  }
+  const metaAttrs = metaAttrsXml(node.meta, namespaces);
+  const metaEls = metaElementsXml(node.meta, namespaces);
+  if (metaEls) {
+    return `<path ${attrs.join(" ")}${metaAttrs}>${metaEls}</path>`;
+  }
+  return `<path ${attrs.join(" ")}${metaAttrs}/>`;
+}
+function paintAttrs(paint, name, registry, includeOpacity = true) {
+  if (paint.kind === "none") return [`${name}="none"`];
+  if (paint.kind === "solid") {
+    const out = [`${name}="${paint.color}"`];
+    if (includeOpacity && paint.opacity != null && paint.opacity !== 1) {
+      out.push(`${name}-opacity="${trimNumber(paint.opacity)}"`);
+    }
+    return out;
+  }
+  const id = registry.register(paint.paint);
+  return [`${name}="url(#${id})"`];
+}
+function coreStrokeAttrs(stroke, registry) {
+  if (!stroke) return [];
+  const width = resolveStrokeWidth(stroke.width ?? 1, 1);
+  if (!(width > 0)) return [];
+  const attrs = [];
+  if ("color" in stroke.paint) {
+    attrs.push(`stroke="${stroke.paint.color}"`);
+    if (stroke.paint.opacity != null && stroke.paint.opacity !== 1) {
+      attrs.push(`stroke-opacity="${trimNumber(stroke.paint.opacity)}"`);
+    }
+  } else {
+    attrs.push(`stroke="url(#${registry.register(stroke.paint)})"`);
+  }
+  attrs.push(`stroke-width="${trimNumber(width)}"`);
+  if (stroke.cap) attrs.push(`stroke-linecap="${stroke.cap}"`);
+  if (stroke.join) attrs.push(`stroke-linejoin="${stroke.join}"`);
+  if (stroke.dash && stroke.dash.length > 0) {
+    attrs.push(`stroke-dasharray="${stroke.dash.map(trimNumber).join(" ")}"`);
+  }
+  if (stroke.miterLimit != null) attrs.push(`stroke-miterlimit="${trimNumber(stroke.miterLimit)}"`);
+  for (const [field, attr] of [
+    ["markerStart", "marker-start"],
+    ["markerMid", "marker-mid"],
+    ["markerEnd", "marker-end"]
+  ]) {
+    const ref = stroke[field];
+    if (ref === void 0) continue;
+    const key = typeof ref === "string" ? ref : ref.key;
+    const id = registry.markerId(key);
+    if (id === void 0) continue;
+    attrs.push(`${attr}="url(#${id})"`);
+  }
+  return attrs;
+}
+function strokeAttrsFor(stroke, registry) {
+  const attrs = paintAttrs(stroke.paint, "stroke", registry, false);
+  attrs.push(`stroke-width="${trimNumber(stroke.width)}"`);
+  const opacity = stroke.opacity ?? (stroke.paint.kind === "solid" ? stroke.paint.opacity : void 0);
+  if (opacity != null && opacity !== 1) {
+    attrs.push(`stroke-opacity="${trimNumber(opacity)}"`);
+  }
+  if (stroke.cap) {
+    attrs.push(`stroke-linecap="${stroke.cap}"`);
+  }
+  if (stroke.join) {
+    attrs.push(`stroke-linejoin="${stroke.join}"`);
+  }
+  if (stroke.dash && stroke.dash.length > 0) {
+    attrs.push(`stroke-dasharray="${stroke.dash.map(trimNumber).join(" ")}"`);
+  }
+  if (stroke.miterLimit != null) {
+    attrs.push(`stroke-miterlimit="${trimNumber(stroke.miterLimit)}"`);
+  }
+  for (const [field, attr] of [
+    ["markerStart", "marker-start"],
+    ["markerMid", "marker-mid"],
+    ["markerEnd", "marker-end"]
+  ]) {
+    const ref = stroke[field];
+    if (ref === void 0) continue;
+    const id = registry.markerId(ref);
+    if (id === void 0) continue;
+    attrs.push(`${attr}="url(#${id})"`);
+  }
+  return attrs;
+}
+function computeBounds(nodes) {
+  let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+  const visit = (n, ctm) => {
+    if (n.kind === "group") {
+      const childCtm = n.transform ? multiply(ctm, n.transform) : ctm;
+      n.children.forEach((c2) => visit(c2, childCtm));
+      return;
+    }
+    const b2 = n.kind === "text" || n.kind === "image" ? { minX: n.x, minY: n.y, maxX: n.x + n.width, maxY: n.y + n.height } : pathBounds(n.path);
+    const local = n.rotation ? rotateAboutCenter(ctm, b2, n.rotation) : ctm;
+    for (const [x2, y2] of corners(b2)) {
+      const px = local[0] * x2 + local[2] * y2 + local[4];
+      const py = local[1] * x2 + local[3] * y2 + local[5];
+      if (px < minX) minX = px;
+      if (py < minY) minY = py;
+      if (px > maxX) maxX = px;
+      if (py > maxY) maxY = py;
+    }
+  };
+  nodes.forEach((n) => visit(n, IDENTITY_MATRIX));
+  if (!Number.isFinite(minX)) {
+    return { x: 0, y: 0, width: 0, height: 0 };
+  }
+  return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+}
+function corners(b2) {
+  return [[b2.minX, b2.minY], [b2.maxX, b2.minY], [b2.maxX, b2.maxY], [b2.minX, b2.maxY]];
+}
+function rotateAboutCenter(ctm, b2, angle) {
+  const cx = (b2.minX + b2.maxX) / 2;
+  const cy = (b2.minY + b2.maxY) / 2;
+  const c2 = Math.cos(angle);
+  const s = Math.sin(angle);
+  return multiply(ctm, [c2, s, -s, c2, cx - cx * c2 + cy * s, cy - cx * s - cy * c2]);
+}
+function textXml(node, registry, namespaces) {
+  const attrs = [
+    `x="${trimNumber(node.x)}"`,
+    `y="${trimNumber(node.y)}"`,
+    `dominant-baseline="text-before-edge"`,
+    // The runs model stores real line breaks; SVG's default whitespace
+    // handling would collapse them (and any indentation) away on re-import.
+    `xml:space="preserve"`,
+    `data-weasel-width="${trimNumber(node.width)}"`,
+    `data-weasel-height="${trimNumber(node.height)}"`
+  ];
+  const style = node.style;
+  if (style?.fontSize != null) attrs.push(`font-size="${trimNumber(style.fontSize)}"`);
+  if (style?.fontFamily) attrs.push(`font-family="${escapeAttr2(style.fontFamily)}"`);
+  if (style?.fontWeight != null) attrs.push(`font-weight="${String(style.fontWeight)}"`);
+  if (style?.fontStyle && style.fontStyle !== "normal") attrs.push(`font-style="${style.fontStyle}"`);
+  const direction = style?.direction ?? "ltr";
+  if (direction === "rtl") attrs.push('direction="rtl"');
+  if (style?.align != null || direction === "rtl") {
+    const align = style?.align ?? "left";
+    const anchor = align === "center" ? "middle" : align === "start" ? "start" : align === "end" ? "end" : align === "left" === (direction === "ltr") ? "start" : "end";
+    if (anchor !== "start") attrs.push(`text-anchor="${anchor}"`);
+  }
+  if (style?.letterSpacing != null && style.letterSpacing !== 0) {
+    attrs.push(`letter-spacing="${trimNumber(style.letterSpacing)}"`);
+  }
+  const decoration = textDecorationValue(style?.underline, style?.strikethrough, style?.overline);
+  if (decoration) attrs.push(`text-decoration="${decoration}"`);
+  if (node.fill) {
+    if ("color" in node.fill) {
+      attrs.push(`fill="${node.fill.color}"`);
+      if (node.fill.opacity != null && node.fill.opacity !== 1) {
+        attrs.push(`fill-opacity="${trimNumber(node.fill.opacity)}"`);
+      }
+    } else {
+      const id = registry.register(node.fill);
+      attrs.push(`fill="url(#${id})"`);
+    }
+  }
+  for (const a of coreStrokeAttrs(node.stroke, registry)) attrs.push(a);
+  if (node.opacity != null && node.opacity !== 1) {
+    attrs.push(`opacity="${trimNumber(node.opacity)}"`);
+  }
+  if (node.rotation != null && node.rotation !== 0) {
+    const cx = node.x + node.width / 2;
+    const cy = node.y + node.height / 2;
+    const deg = node.rotation * 180 / Math.PI;
+    attrs.push(`transform="rotate(${trimNumber(deg)} ${trimNumber(cx)} ${trimNumber(cy)})"`);
+  }
+  const body = node.runs && node.runs.length > 0 ? node.runs.map((r2) => runXml(r2, registry)).join("") : escapeText(node.text);
+  const metaAttrs = metaAttrsXml(node.meta, namespaces);
+  const metaEls = metaElementsXml(node.meta, namespaces);
+  return `<text ${attrs.join(" ")}${metaAttrs}>${body}${metaEls}</text>`;
+}
+function runXml(run, registry) {
+  const attrs = [];
+  if (run.bold) attrs.push(`font-weight="700"`);
+  if (run.italic) attrs.push(`font-style="italic"`);
+  if (run.fontFamily) attrs.push(`font-family="${escapeAttr2(run.fontFamily)}"`);
+  const presetScale = run.script != null && run.baselineShift != null ? SCRIPT_METRICS[run.script].size : void 0;
+  const scale = run.fontScale ?? presetScale;
+  if (run.fontSize != null) attrs.push(`font-size="${trimNumber(run.fontSize)}"`);
+  else if (scale != null) attrs.push(`font-size="${trimNumber(scale * 100)}%"`);
+  if (run.baselineShift != null) {
+    attrs.push(`baseline-shift="${trimNumber(run.baselineShift * 100)}%"`);
+  } else if (run.script) {
+    attrs.push(`baseline-shift="${run.script}"`);
+  }
+  if (run.letterSpacing != null) {
+    attrs.push(`letter-spacing="${trimNumber(run.letterSpacing)}"`);
+  }
+  const runDecoration = textDecorationValue(run.underline, run.strikethrough, run.overline);
+  if (runDecoration) attrs.push(`text-decoration="${runDecoration}"`);
+  if (run.fill) {
+    if ("color" in run.fill) {
+      attrs.push(`fill="${run.fill.color}"`);
+    } else {
+      const id = registry.register(run.fill);
+      attrs.push(`fill="url(#${id})"`);
+    }
+  }
+  for (const a of coreStrokeAttrs(run.stroke, registry)) attrs.push(a);
+  const head = attrs.length > 0 ? `<tspan ${attrs.join(" ")}>` : "<tspan>";
+  return `${head}${escapeText(run.text)}</tspan>`;
+}
+function textDecorationValue(underline, strikethrough, overline) {
+  const tokens = [];
+  if (underline) tokens.push("underline");
+  if (strikethrough) tokens.push("line-through");
+  if (overline) tokens.push("overline");
+  return tokens.length > 0 ? tokens.join(" ") : null;
+}
+function escapeAttr2(s) {
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;");
+}
+function escapeText(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function pathBounds(path) {
+  if (path.kind === "rect") {
+    return {
+      minX: path.x,
+      minY: path.y,
+      maxX: path.x + path.width,
+      maxY: path.y + path.height
+    };
+  }
+  const b2 = boundsOfPath(path);
+  return { minX: b2.x, minY: b2.y, maxX: b2.x + b2.width, maxY: b2.y + b2.height };
+}
+
+// src/annotations/paint.ts
+var MARK_COLOR = "#e5484d";
+var MARK_WIDTH = 2;
+var TEXT_SIZE = 14;
+var toWorld = (p2, content) => ({
+  x: p2.x * content.w,
+  y: p2.y * content.h
+});
+function vertices(m2, content) {
+  const stored = m2.data.points;
+  if (stored && stored.length >= 2) return stored.map((p2) => toWorld(p2, content));
+  const { x: x2, y: y2, width, height } = m2.pose;
+  return [
+    { x: x2, y: y2 },
+    { x: x2 + width, y: y2 + height }
+  ];
+}
+function polyline(points) {
+  const b2 = new PathBuilder();
+  const first = points[0];
+  if (!first) return rectPath(0, 0, 0, 0);
+  b2.moveTo(first.x, first.y);
+  for (const p2 of points.slice(1)) b2.lineTo(p2.x, p2.y);
+  return b2.build();
+}
+function markCommands(m2, content, style = {}) {
+  const color = style.color ?? MARK_COLOR;
+  const stroke = {
+    paint: { color },
+    width: MARK_WIDTH,
+    cap: "round",
+    join: "round",
+    ...style.stale ? { dash: [6, 4] } : {}
+  };
+  switch (m2.data.kind) {
+    case "rect":
+      return [
+        { kind: "path", path: rectPath(m2.pose.x, m2.pose.y, m2.pose.width, m2.pose.height), stroke }
+      ];
+    case "ellipse":
+      return [{ kind: "path", path: ellipsePath(m2.pose), stroke }];
+    case "line": {
+      const [a, b2] = vertices(m2, content);
+      return [{ kind: "path", path: linePath(a, b2), stroke }];
+    }
+    case "arrow": {
+      const [a, b2] = vertices(m2, content);
+      const marked = { ...stroke, markerEnd: "arrow" };
+      const path = linePath(a, b2);
+      return [
+        { kind: "path", path, stroke: marked },
+        ...markerDrawCommands(path, marked, MARK_WIDTH, void 0)
+      ];
+    }
+    case "stroke":
+      return [{ kind: "path", path: polyline(vertices(m2, content)), stroke }];
+    case "text": {
+      const text = m2.data.title;
+      if (!text) return [];
+      return [
+        textCommand(
+          m2.pose.x,
+          m2.pose.y,
+          text,
+          { fontSize: TEXT_SIZE },
+          void 0,
+          void 0,
+          void 0,
+          {
+            fill: { color }
+          }
+        )
+      ];
+    }
+  }
+}
+
+// src/annotations/staleness.ts
+function seenFrom(config, keys) {
+  const out = {};
+  if (config === null || typeof config !== "object") return out;
+  const src = config;
+  for (const k2 of keys) {
+    if (k2 in src) out[k2] = src[k2];
+  }
+  return out;
+}
+function isStale(seen, config, keys) {
+  if (!seen || keys.length === 0) return false;
+  if (config === null || typeof config !== "object") return false;
+  const src = config;
+  for (const k2 of keys) {
+    if (!(k2 in seen)) continue;
+    if (!Object.is(seen[k2], src[k2])) return true;
+  }
+  return false;
+}
+
+// src/annotations/drawOne.ts
+function createMarkDrawOne(opts) {
+  return (node, pose) => markCommands({ pose, data: node.data }, opts.content, resolveMarkStyle(node.data, opts));
+}
+function resolveMarkStyle(data, opts) {
+  return {
+    color: opts.meaning?.statuses?.find((s) => s.id === data.status)?.color,
+    // Read off the node rather than through the store's `isStale`, which
+    // wants a projected Annotation this path does not have.
+    stale: isStale(data.seen, opts.config, opts.positionDependsOn ?? [])
+  };
+}
+
+// src/annotations/svgNodes.ts
+var NO_PAINT = { kind: "none" };
+function toSvgPaint(paint) {
+  if (!paint) return NO_PAINT;
+  if ("color" in paint && typeof paint.color === "string") {
+    return {
+      kind: "solid",
+      color: paint.color,
+      ...paint.opacity != null ? { opacity: paint.opacity } : {}
+    };
+  }
+  return { kind: "gradient", paint };
+}
+function toSvgStroke(stroke) {
+  return {
+    paint: toSvgPaint(stroke.paint),
+    width: resolveStrokeWidth(stroke.width ?? 1, 1),
+    ...stroke.cap ? { cap: stroke.cap } : {},
+    ...stroke.join ? { join: stroke.join } : {},
+    ...stroke.dash ? { dash: [...stroke.dash] } : {},
+    ...stroke.miterLimit != null ? { miterLimit: stroke.miterLimit } : {}
+  };
+}
+function toSvgNode(cmd, m2) {
+  if (cmd.kind === "path") {
+    return {
+      kind: "path",
+      path: cmd.path,
+      fill: toSvgPaint(cmd.fill),
+      ...cmd.stroke ? { stroke: toSvgStroke(cmd.stroke) } : {}
+    };
+  }
+  if (cmd.kind === "text") {
+    return {
+      kind: "text",
+      x: cmd.x,
+      y: cmd.y,
+      width: m2.pose.width,
+      height: m2.pose.height,
+      text: cmd.runs.map((run) => run.text).join(""),
+      style: cmd.style,
+      ...cmd.runs[0]?.fill ? { fill: cmd.runs[0].fill } : {}
+    };
+  }
+  throw new Error(`[labkit] a mark drew a '${cmd.kind}' command, which has no vector form`);
+}
+function markSvgNodes(m2, content, style = {}) {
+  return markCommands(m2, content, style).map((cmd) => toSvgNode(cmd, m2));
+}
+
+// src/annotations/capture.ts
+var SVG_NS = "http://www.w3.org/2000/svg";
+function capturePlan(base, format) {
+  if (format === "svg") return "svg-document";
+  return base?.kind === "svg" ? "svg-document" : "raster-stack";
+}
+function nestBaseSvg(markup, w2, h) {
+  const doc = new DOMParser().parseFromString(markup, "image/svg+xml");
+  const root = doc.documentElement;
+  if (doc.getElementsByTagName("parsererror").length > 0 || root.localName !== "svg") {
+    throw new Error("[labkit] a target's `base()` returned markup that is not an <svg> document");
+  }
+  root.setAttribute("x", "0");
+  root.setAttribute("y", "0");
+  root.setAttribute("width", String(w2));
+  root.setAttribute("height", String(h));
+  return new XMLSerializer().serializeToString(root);
+}
+function embedRasterBase(base, w2, h, onWarn) {
+  const href = base.kind === "canvas" ? base.canvas.toDataURL() : base.kind === "image" ? base.src : "";
+  if (base.kind === "image" && !href.startsWith("data:")) {
+    onWarn?.(`base image '${href}' is a reference, so this SVG is not self-contained`);
+  }
+  return serializeSvg([{ kind: "image", href, x: 0, y: 0, width: w2, height: h }], {
+    viewBox: { x: 0, y: 0, width: w2, height: h }
+  });
+}
+function markNodesOf(scene, draw) {
+  return [...scene.renderOrder()].flatMap((id) => {
+    const node = scene.get(asNodeId$1(String(id)));
+    if (!node) return [];
+    return markSvgNodes(
+      { pose: node.pose, data: node.data },
+      draw.content,
+      resolveMarkStyle(node.data, draw)
+    );
+  });
+}
+function composeCaptureSvg(args) {
+  const { base, scene, draw, scale, onWarn } = args;
+  const { w: w2, h } = draw.content;
+  const baseXml = base === void 0 ? "" : base.kind === "svg" ? nestBaseSvg(base.markup, w2, h) : embedRasterBase(base, w2, h, onWarn);
+  const marksXml = serializeSvg(markNodesOf(scene, draw), {
+    viewBox: { x: 0, y: 0, width: w2, height: h },
+    onWarn
+  });
+  const outW = Math.max(1, Math.round(w2 * scale));
+  const outH = Math.max(1, Math.round(h * scale));
+  return `<svg xmlns="${SVG_NS}" width="${outW}" height="${outH}" viewBox="0 0 ${w2} ${h}">${baseXml}${marksXml}</svg>`;
+}
+function context2d(width, height) {
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("[labkit] capture needs a 2D canvas context, and this one has none");
+  return ctx;
+}
+function toPngBlob(canvas) {
+  return new Promise((resolve, reject) => {
+    let done;
+    try {
+      done = (blob) => blob ? resolve(blob) : reject(new Error("[labkit] the browser produced no PNG"));
+      canvas.toBlob(done, "image/png");
+    } catch (err) {
+      reject(
+        new Error(
+          "[labkit] the capture canvas is tainted, so it cannot be read back \u2014 a base referencing a cross-origin image does this. Embed it as a data: URI.",
+          { cause: err }
+        )
+      );
+    }
+  });
+}
+function loadImage(src) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error(`[labkit] a capture base failed to load: ${src}`));
+    img.src = src;
+  });
+}
+async function rasterizeSvg(svg, width, height) {
+  const url = URL.createObjectURL(new Blob([svg], { type: "image/svg+xml;charset=utf-8" }));
+  try {
+    const img = await loadImage(url);
+    const ctx = context2d(width, height);
+    ctx.drawImage(img, 0, 0, width, height);
+    return await toPngBlob(ctx.canvas);
+  } finally {
+    URL.revokeObjectURL(url);
+  }
+}
+async function stackRaster(args) {
+  const { base, scene, draw, scale, width, height } = args;
+  const ctx = context2d(width, height);
+  if (base?.kind === "image") ctx.drawImage(await loadImage(base.src), 0, 0, width, height);
+  else if (base?.kind === "canvas") ctx.drawImage(base.canvas, 0, 0, width, height);
+  const raster = renderSceneToPixels({
+    scene,
+    sourceRect: { x: 0, y: 0, width: draw.content.w, height: draw.content.h },
+    scale: { x: scale, y: scale },
+    drawOne: createMarkDrawOne(draw)
+  });
+  const marks = context2d(raster.width, raster.height);
+  marks.putImageData(
+    new ImageData(Uint8ClampedArray.from(raster.data), raster.width, raster.height),
+    0,
+    0
+  );
+  ctx.drawImage(marks.canvas, 0, 0, width, height);
+  return toPngBlob(ctx.canvas);
+}
+async function captureTarget(args, opts = {}) {
+  const format = opts.format ?? "png";
+  const scale = opts.scale ?? 2;
+  const { content } = args.draw;
+  const width = Math.max(1, Math.round(content.w * scale));
+  const height = Math.max(1, Math.round(content.h * scale));
+  const base = await args.base?.();
+  const compose = {
+    base,
+    scene: args.scene,
+    draw: args.draw,
+    scale,
+    onWarn: args.onWarn
+  };
+  if (capturePlan(base, format) === "raster-stack") {
+    return {
+      target: args.target,
+      blob: await stackRaster({ ...compose, width, height }),
+      format,
+      width,
+      height
+    };
+  }
+  const svg = composeCaptureSvg(compose);
+  const blob = format === "svg" ? new Blob([svg], { type: "image/svg+xml;charset=utf-8" }) : await rasterizeSvg(svg, width, height);
+  return { target: args.target, blob, format, width, height };
+}
+
+// src/annotations/frac.ts
+function fracToWorld(f2, content) {
+  return {
+    x: f2.x * content.w,
+    y: f2.y * content.h,
+    width: f2.w * content.w,
+    height: f2.h * content.h
+  };
+}
+function worldToFrac(r2, content) {
+  const sx = content.w === 0 ? 0 : 1 / content.w;
+  const sy = content.h === 0 ? 0 : 1 / content.h;
+  return { x: r2.x * sx, y: r2.y * sy, w: r2.width * sx, h: r2.height * sy };
+}
+var DP = 1e4;
+function roundFrac(f2) {
+  return {
+    x: Math.round(f2.x * DP) / DP,
+    y: Math.round(f2.y * DP) / DP,
+    w: Math.round(f2.w * DP) / DP,
+    h: Math.round(f2.h * DP) / DP
+  };
+}
+function fracContains(box, pt, tol = 0) {
+  return pt.x >= box.x - tol && pt.x <= box.x + box.w + tol && pt.y >= box.y - tol && pt.y <= box.y + box.h + tol;
+}
+function fracIntersects(outer, inner) {
+  return inner.x >= outer.x && inner.y >= outer.y && inner.x + inner.w <= outer.x + outer.w && inner.y + inner.h <= outer.y + outer.h;
+}
+
+// src/annotations/history.ts
+var MarkHistory = class {
+  depth = /* @__PURE__ */ new Map();
+  undoable = [];
+  redoable = [];
+  /** Set while this class is driving, so a redo is not read as a new change. */
+  replaying = null;
+  /** Start following `scene` under `target`. Idempotent per target. */
+  track(target, scene) {
+    if (this.depth.has(target)) return;
+    this.depth.set(target, scene.historyIndex());
+  }
+  /** Call on every notification from `target`'s scene. */
+  observe(target, scene) {
+    const now = scene.historyIndex();
+    const before = this.depth.get(target) ?? 0;
+    this.depth.set(target, now);
+    if (now > before) {
+      if (this.replaying === "redo") {
+        drop(this.redoable, target);
+      } else {
+        this.redoable = [];
+      }
+      this.undoable.push(target);
+    } else if (now < before) {
+      drop(this.undoable, target);
+      this.redoable.push(target);
+    }
+  }
+  /** The target `undo` would act on, skipping any whose scene has nothing
+   *  left — a scene can drop entries this ordering still lists. */
+  next(stack, can, at) {
+    for (let i = stack.length - 1; i >= 0; i--) {
+      const target = stack[i];
+      if (target === void 0) continue;
+      const scene = at(target);
+      if (scene && can(scene)) return target;
+    }
+    return null;
+  }
+  canUndo(at) {
+    return this.next(this.undoable, (s) => s.canUndo(), at) !== null;
+  }
+  canRedo(at) {
+    return this.next(this.redoable, (s) => s.canRedo(), at) !== null;
+  }
+  undo(at) {
+    const target = this.next(this.undoable, (s) => s.canUndo(), at);
+    const scene = target === null ? void 0 : at(target);
+    if (!scene) return false;
+    this.replaying = "undo";
+    try {
+      return scene.undo();
+    } finally {
+      this.replaying = null;
+    }
+  }
+  redo(at) {
+    const target = this.next(this.redoable, (s) => s.canRedo(), at);
+    const scene = target === null ? void 0 : at(target);
+    if (!scene) return false;
+    this.replaying = "redo";
+    try {
+      return scene.redo();
+    } finally {
+      this.replaying = null;
+    }
+  }
+};
+function drop(stack, value) {
+  for (let i = stack.length - 1; i >= 0; i--) {
+    if (stack[i] === value) {
+      stack.splice(i, 1);
+      return;
+    }
+  }
+}
+
+// src/annotations/store.ts
+function createAnnotationScene() {
+  return createScene({ systemLayers: [{ id: "marks" }] });
+}
+var NO_CONTENT = { w: 0, h: 0 };
+function splitId(id) {
+  const at = id.lastIndexOf("/");
+  return at <= 0 ? void 0 : { target: id.slice(0, at), node: id.slice(at + 1) };
+}
+function createAnnotationStore(opts) {
+  const { targets, restore } = opts;
+  const scenes = /* @__PURE__ */ new Map();
+  const subs = /* @__PURE__ */ new Set();
+  const history = new MarkHistory();
+  const notify = () => {
+    for (const fn of subs) fn();
+  };
+  const sceneFor = (target) => {
+    const known = scenes.get(target);
+    if (known) return known;
+    const raw = restore?.[target];
+    const scene = raw ? sceneFromJSON(
+      raw,
+      {}
+    ) : createAnnotationScene();
+    scenes.set(target, scene);
+    history.track(target, scene);
+    scene.subscribe(() => {
+      history.observe(target, scene);
+      notify();
+    });
+    return scene;
+  };
+  const historySceneAt = (target) => scenes.get(target);
+  for (const target of Object.keys(restore ?? {})) sceneFor(target);
+  const targetOf = (id) => targets().find((t) => t.id === id);
+  const contentOf = (id) => targetOf(id)?.content ?? NO_CONTENT;
+  const project = (target, node) => {
+    const found = scenes.get(target)?.get(asNodeId$1(node));
+    if (!found) return void 0;
+    return {
+      ...found.data,
+      target,
+      id: `${target}/${node}`,
+      frac: roundFrac(worldToFrac(found.pose, contentOf(target)))
+    };
+  };
+  const liveTargets = () => {
+    const declared = targets().map((t) => t.id);
+    const rest = [...scenes.keys()].filter((id) => !declared.includes(id));
+    return [...declared, ...rest];
+  };
+  const marksOn = (target) => {
+    const scene = scenes.get(target);
+    if (!scene) return [];
+    const out = [];
+    for (const id of scene.renderOrder()) {
+      const a = project(target, String(id));
+      if (a) out.push(a);
+    }
+    return out;
+  };
+  const all = () => liveTargets().flatMap(marksOn);
+  const matches = (a, q) => {
+    if (q.target !== void 0 && a.target !== q.target) return false;
+    if (q.kind !== void 0 && a.kind !== q.kind) return false;
+    if (q.status !== void 0 && a.status !== q.status) return false;
+    if (q.tags !== void 0) {
+      const have = a.tags ?? [];
+      for (const t of q.tags) if (!have.includes(t)) return false;
+    }
+    if (q.where && !q.where(a)) return false;
+    return true;
+  };
+  const nodeOf = (id) => {
+    const parts = splitId(id);
+    if (!parts) return void 0;
+    const scene = scenes.get(parts.target);
+    const node = scene?.get(asNodeId$1(parts.node));
+    return node && scene ? { ...parts, scene, node } : void 0;
+  };
+  return {
+    sceneFor,
+    targets,
+    get(id) {
+      const parts = splitId(id);
+      return parts ? project(parts.target, parts.node) : void 0;
+    },
+    query(q) {
+      return q ? all().filter((a) => matches(a, q)) : all();
+    },
+    hitTest(target, pt, tol = 0) {
+      return marksOn(target).filter((a) => fracContains(a.frac, pt, tol)).reverse();
+    },
+    within(target, box) {
+      return marksOn(target).filter((a) => fracIntersects(box, a.frac));
+    },
+    isStale(a, config) {
+      const keys = targetOf(a.target)?.positionDependsOn ?? [];
+      return isStale(a.seen, config, keys);
+    },
+    canUndo() {
+      return history.canUndo(historySceneAt);
+    },
+    canRedo() {
+      return history.canRedo(historySceneAt);
+    },
+    undo() {
+      return history.undo(historySceneAt);
+    },
+    redo() {
+      return history.redo(historySceneAt);
+    },
+    subscribe(fn) {
+      subs.add(fn);
+      return () => {
+        subs.delete(fn);
+      };
+    },
+    add(init, config) {
+      const target = targetOf(init.target);
+      const data = {
+        target: init.target,
+        kind: init.kind,
+        ...init.points ? { points: init.points } : {},
+        ...init.title !== void 0 ? { title: init.title } : {},
+        ...init.status !== void 0 ? { status: init.status } : {},
+        ...init.tags !== void 0 ? { tags: init.tags } : {},
+        ...init.meta !== void 0 ? { meta: init.meta } : {},
+        seen: seenFrom(config, target?.positionDependsOn ?? [])
+      };
+      const node = sceneFor(init.target).add({
+        kind: "leaf",
+        layer: "marks",
+        pose: fracToWorld(roundFrac(init.frac), target?.content ?? NO_CONTENT),
+        data
+      });
+      return `${init.target}/${String(node)}`;
+    },
+    update(id, patch) {
+      const found = nodeOf(id);
+      if (!found) return;
+      const { frac, ...meaning } = patch;
+      const nid = asNodeId$1(found.node.id);
+      if (Object.keys(meaning).length > 0) {
+        found.scene.update(nid, { data: { ...found.node.data, ...meaning } });
+      }
+      if (frac) {
+        found.scene.setPose(nid, fracToWorld(roundFrac(frac), contentOf(found.target)));
+      }
+    },
+    setMeta(id, meta) {
+      const found = nodeOf(id);
+      if (!found) return;
+      found.scene.update(asNodeId$1(found.node.id), { data: { ...found.node.data, meta } });
+    },
+    remove(id) {
+      const found = nodeOf(id);
+      if (found) found.scene.remove(asNodeId$1(found.node.id));
+    },
+    async capture(target, captureOpts) {
+      const info = targetOf(target);
+      if (!info) throw new Error(`[labkit] no annotation target called '${target}'`);
+      const result = await captureTarget(
+        {
+          target,
+          scene: sceneFor(target),
+          draw: {
+            content: info.content,
+            positionDependsOn: info.positionDependsOn,
+            config: opts.config?.(),
+            meaning: opts.meaning
+          },
+          base: info.base,
+          onWarn: (message) => console.warn(`[labkit] capture: ${message}`)
+        },
+        captureOpts
+      );
+      opts.onCapture?.(result);
+      return result;
+    },
+    toJSON() {
+      const out = {};
+      for (const [target, scene] of scenes) out[target] = scene.toJSON();
+      return { version: 1, scenes: out };
+    }
+  };
+}
+function annotationsFromJSON(raw, targets, rest = {}) {
+  const doc = raw;
+  if (doc?.version !== 1 || !doc.scenes) return createAnnotationStore({ targets, ...rest });
+  return createAnnotationStore({ targets, restore: doc.scenes, ...rest });
+}
 
+// src/annotations/view.ts
+function toWeaselView(v) {
+  return { x: v.pan.x, y: v.pan.y, scale: { x: v.zoom, y: v.zoom } };
+}
+function fromWeaselView(v) {
+  return { zoom: v.scale.x, pan: { x: v.x, y: v.y } };
+}
+function fitView(content, pane) {
+  const zoom = content.w > 0 && content.h > 0 ? Math.min(pane.w / content.w, pane.h / content.h) : 1;
+  return { zoom: Number.isFinite(zoom) && zoom > 0 ? zoom : 1, pan: { x: 0, y: 0 } };
+}
+var sameRect = (a, b2) => a !== null && a.x === b2.x && a.y === b2.y && a.w === b2.w && a.h === b2.h;
+function ToolBridge({ toolId }) {
+  const tools = useActiveToolContext();
+  const setActive = tools.setActive;
+  useEffect(() => {
+    setActive(toolId);
+  }, [toolId, setActive]);
+  return null;
+}
+function pointsOf(extras, content) {
+  const toFrac = (p2) => ({
+    x: content.w === 0 ? 0 : p2.x / content.w,
+    y: content.h === 0 ? 0 : p2.y / content.h
+  });
+  if (extras.kind === "line") {
+    return [toFrac(extras.a), toFrac(extras.b)];
+  }
+  if (extras.kind === "pencil") {
+    return extras.samples.map(toFrac);
+  }
+  return void 0;
+}
+function AnnotationOverlay({
+  target,
+  scene,
+  config,
+  activeToolId,
+  meaning
+}) {
+  const surface = useSurfaceOptional();
+  const canvas = useSurfaceCanvas();
+  const [rect, setRect] = useState(null);
+  const [input, setInput] = useState(null);
+  const sceneCanvas = useRef(null);
+  const toolRef = useRef(activeToolId);
+  toolRef.current = activeToolId;
+  const configRef = useRef(config);
+  configRef.current = config;
+  const id = target.id;
+  const lastTile = useRef(null);
+  useEffect(() => {
+    const el = target.ref.current ?? null;
+    if (el === lastTile.current) return;
+    lastTile.current = el;
+    surface?.registerTile(id, el);
+  });
+  useEffect(
+    () => () => {
+      lastTile.current = null;
+      surface?.registerTile(id, null);
+    },
+    [surface, id]
+  );
+  useEffect(
+    () => surface?.registerPainter(id, (next) => {
+      setRect((prev) => sameRect(prev, next) ? prev : next);
+      sceneCanvas.current?.requestRedraw();
+    }),
+    [surface, id]
+  );
+  const container = surface?.getContainer() ?? null;
+  if (!container || !rect) return null;
+  const view = toWeaselView(target.view ?? fitView(target.content, { w: rect.w, h: rect.h }));
+  const drawOne = createMarkDrawOne({
+    content: target.content,
+    positionDependsOn: target.positionDependsOn,
+    config,
+    meaning
+  });
+  const factories = {};
+  for (const weaselTool of ANNOTATION_WEASEL_TOOLS) {
+    factories[weaselTool] = (_bounds, extras) => {
+      const info = annotationToolInfo(toolRef.current);
+      const kind = info?.kind;
+      if (!kind) return null;
+      const points = pointsOf(extras, target.content);
+      const data = {
+        target: id,
+        kind,
+        ...points ? { points } : {},
+        seen: seenFrom(configRef.current, target.positionDependsOn ?? [])
+      };
+      return { data };
+    };
+  }
+  const box = {
+    ["--lk-anno-x"]: `${rect.x}px`,
+    ["--lk-anno-y"]: `${rect.y}px`,
+    ["--lk-anno-w"]: `${rect.w}px`,
+    ["--lk-anno-h"]: `${rect.h}px`
+  };
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: setInput,
+          className: "lk-annotate__input",
+          "data-annotation-target": id,
+          role: "application",
+          "aria-label": `Annotations on ${id}`,
+          tabIndex: 0,
+          style: box
+        }
+      ),
+      canvas && input ? (
+        // One scope per pane: a shared <ActionsProvider> lets only the newest
+        // canvas under it respond to input, and the rest go silently dead.
+        /* @__PURE__ */ jsxs(WeaselProvider, { isolate: true, children: [
+          /* @__PURE__ */ jsx(ToolBridge, { toolId: annotationToolInfo(activeToolId)?.weaselTool ?? "select" }),
+          /* @__PURE__ */ jsx(
+            SceneCanvas,
+            {
+              ref: sceneCanvas,
+              scene,
+              width: rect.w,
+              height: rect.h,
+              view,
+              paintInto: { canvas, x: rect.x, y: rect.y },
+              inputElement: input,
+              defaultTools: ANNOTATION_WEASEL_TOOLS,
+              insertNodeFactories: factories,
+              layers: { scene: { drawOne } }
+            }
+          )
+        ] })
+      ) : null
+    ] }),
+    container
+  );
+}
+function AnnotationTargets({
+  capability,
+  state,
+  config,
+  annotations,
+  activeToolId
+}) {
+  const targets = capability.targets(state, config);
+  return /* @__PURE__ */ jsx(Fragment, { children: targets.map((t) => /* @__PURE__ */ jsx(
+    AnnotationOverlay,
+    {
+      target: t,
+      scene: annotations.sceneFor(t.id),
+      meaning: capability.meaning,
+      config,
+      activeToolId
+    },
+    t.id
+  )) });
+}
 var PITCH_LIMIT = Math.PI / 2 - 0.01;
 var YAW_PER_PX = 8e-3;
 var PITCH_PER_PX = 8e-3;
@@ -1242,6 +2608,69 @@ function TrialTitleBar({ title, children }) {
     children
   ] });
 }
+function createPanelHostRegistry() {
+  const hosts = /* @__PURE__ */ new Map();
+  const listeners = /* @__PURE__ */ new Set();
+  const notify = () => {
+    for (const fn of listeners) fn();
+  };
+  return {
+    set: (key, el) => {
+      if (el) hosts.set(key, el);
+      else hosts.delete(key);
+      notify();
+    },
+    get: (key) => hosts.get(key) ?? null,
+    subscribe: (fn) => {
+      listeners.add(fn);
+      return () => listeners.delete(fn);
+    }
+  };
+}
+var PanelHostContext = createContext(null);
+function usePanelHosts() {
+  return useContext(PanelHostContext);
+}
+function Portalled({
+  trialId,
+  contribution,
+  onDock
+}) {
+  const hosts = usePanelHosts();
+  const key = panelKey(trialId, contribution.id);
+  const host = useSyncExternalStore(
+    (fn) => hosts?.subscribe(fn) ?? (() => {
+    }),
+    () => hosts?.get(key) ?? null,
+    () => null
+  );
+  if (!host || !contribution.item) return null;
+  const item = contribution.item;
+  return createPortal(
+    /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { className: "lk-panel-tile__titlebar", children: [
+        /* @__PURE__ */ jsx("span", { className: "lk-panel-tile__title", children: item.title }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "lk-panel-tile__dock",
+            "aria-label": `Dock ${item.title}`,
+            title: `Dock ${item.title}`,
+            onClick: () => onDock(contribution.id),
+            children: "\u21E4"
+          }
+        )
+      ] }),
+      item.body
+    ] }),
+    host
+  );
+}
+function UndockedSections({ trialId, sections, onDock }) {
+  if (sections.length === 0) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((c2) => /* @__PURE__ */ jsx(Portalled, { trialId, contribution: c2, onDock }, c2.id)) });
+}
 var NO_OP = () => {
 };
 function TrialChrome({
@@ -1251,6 +2680,7 @@ function TrialChrome({
   isLastTrial,
   undoBindings,
   job,
+  loupe,
   trialChrome,
   chrome,
   suppress,
@@ -1264,6 +2694,13 @@ function TrialChrome({
   const updateTrialView = useStore(storeCtx.store, (s) => s.updateTrialView);
   const updateTrialConfig = useStore(storeCtx.store, (s) => s.updateTrialConfig);
   const updateTrialState = useStore(storeCtx.store, (s) => s.updateTrialState);
+  const undockPanelAction = useStore(storeCtx.store, (s) => s.undockPanel);
+  const dockPanelAction = useStore(storeCtx.store, (s) => s.dockPanel);
+  const undockedPanels = useStore(storeCtx.store, (s) => s.undockedPanels);
+  const undockedIds = useMemo(
+    () => Object.values(undockedPanels).filter((p2) => p2.trialId === trialId).map((p2) => p2.sectionId),
+    [undockedPanels, trialId]
+  );
   const view2d = as2DView(record.view);
   const configSchema = useConfigSchema(instrument);
   const ctx = useMemo(() => {
@@ -1281,6 +2718,8 @@ function TrialChrome({
       canRedo: undoBindings?.canRedo ?? false,
       undo: undoBindings?.undo ?? NO_OP,
       redo: undoBindings?.redo ?? NO_OP,
+      loupeOn: loupe?.on ?? false,
+      toggleLoupe: loupe?.toggle ?? NO_OP,
       configSchema,
       configFields: instrument.config ? [] : instrument.configSchema?.() ?? [],
       config: record.config,
@@ -1298,6 +2737,9 @@ function TrialChrome({
           updateTrialState(trialId, nextState);
         }
       },
+      undockedPanels: undockedIds,
+      undockPanel: (sectionId, as) => undockPanelAction(trialId, sectionId, as),
+      dockPanel: (sectionId) => dockPanelAction(trialId, sectionId),
       savedSnapshots: lab.savedSnapshots.filter((s) => s.trialId === trialId),
       saveSnapshot: (name) => lab.saveSnapshot(trialId, name),
       loadSnapshot: (snapshotId) => lab.loadSnapshot(trialId, snapshotId),
@@ -1317,10 +2759,14 @@ function TrialChrome({
     updateTrialConfig,
     updateTrialState,
     undoBindings,
+    loupe,
     view2d,
     activeToolId,
     setActiveTool,
-    configSchema
+    configSchema,
+    undockedIds,
+    undockPanelAction,
+    dockPanelAction
   ]);
   const contributions = useMemo(
     () => suppressContributions(
@@ -1359,7 +2805,17 @@ function TrialChrome({
         /* @__PURE__ */ jsx("div", { className: "lk-trial__toolbar", children: /* @__PURE__ */ jsx(ToolbarRegion, { contributions: inRegion("toolbar"), ctx }) }),
         /* @__PURE__ */ jsxs("div", { className: "lk-trial__body", children: [
           /* @__PURE__ */ jsx(PaletteRegion, { contributions: inRegion("palette"), ctx }),
-          /* @__PURE__ */ jsx("div", { className: "lk-trial__sidebar", children: /* @__PURE__ */ jsx(SidebarRegion, { contributions: inRegion("sidebar"), ctx }) }),
+          /* @__PURE__ */ jsxs("div", { className: "lk-trial__sidebar", children: [
+            /* @__PURE__ */ jsx(SidebarRegion, { contributions: inRegion("sidebar"), ctx }),
+            /* @__PURE__ */ jsx(
+              UndockedSections,
+              {
+                trialId,
+                sections: inRegion("sidebar").filter((c2) => undockedIds.includes(c2.id)),
+                onDock: ctx.dockPanel
+              }
+            )
+          ] }),
           /* @__PURE__ */ jsxs("div", { className: `lk-trial__content${instrument.canvas ? " lk-trial__content--flush" : ""}`, children: [
             children,
             /* @__PURE__ */ jsx(ViewportRegion, { contributions: inRegion("viewport"), ctx })
@@ -1405,10 +2861,12 @@ function Trial({ id, chrome, suppress }) {
 }
 function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   const canvasContainerRef = useRef(null);
+  const loupeHostRef = useRef(null);
   const updateTrialState = useStore(store, (s) => s.updateTrialState);
   const updateTrialConfig = useStore(store, (s) => s.updateTrialConfig);
   const updateTrialView = useStore(store, (s) => s.updateTrialView);
   const updateTrialUndoStack = useStore(store, (s) => s.updateTrialUndoStack);
+  const updateTrialAnnotations = useStore(store, (s) => s.updateTrialAnnotations);
   const labToolId = useStore(store, (s) => s.activeToolId);
   const setLabTool = useStore(store, (s) => s.setLabTool);
   const setTrialTool = useStore(store, (s) => s.setTrialTool);
@@ -1417,6 +2875,11 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   const bus = busRef.current;
   const [layerVisibility, setLayerVisibility] = useState({});
   const [layerOrder, setLayerOrder] = useState(null);
+  const [loupeOn, setLoupeOn] = useState(false);
+  const visibleLayers = useMemo(
+    () => (instrument.canvas?.layers ?? []).filter((l) => layerVisibility[l.id] !== false).map((l) => l.id),
+    [instrument.canvas, layerVisibility]
+  );
   const undoCap = instrument.undo;
   const undoEvents = useMemo(() => new Set(undoCap?.snapshotOn ?? ["state.change"]), [undoCap]);
   const maxDepth = undoCap?.maxDepth ?? 50;
@@ -1428,8 +2891,69 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
     updateTrialUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
   };
   const setView = (v) => updateTrialView(record.id, v);
-  const declaresTools = instrument.tools != null;
-  const resolvedToolId = declaresTools ? record.activeToolId ?? instrument.tools?.initial ?? instrument.tools?.tools[0]?.id ?? null : labToolId;
+  const placeView = (size) => {
+    const declared = instrument.canvas?.initialView;
+    if (typeof declared !== "function") return;
+    if (record.view != null) return;
+    setView(declared(size));
+  };
+  const annotationsCap = instrument.annotations;
+  const targetsRef = useRef(() => []);
+  targetsRef.current = () => annotationsCap ? annotationsCap.targets(record.state, record.config) : [];
+  const annotationsRef = useRef(null);
+  const configRef = useRef(record.config);
+  configRef.current = record.config;
+  if (annotationsRef.current === null) {
+    const kept = annotationsCap?.storage ? annotationsCap.storage.load() : record.annotations;
+    annotationsRef.current = annotationsFromJSON(kept, () => targetsRef.current(), {
+      meaning: annotationsCap?.meaning,
+      config: () => configRef.current,
+      onCapture: (result) => annotationsCap?.onCapture?.(result)
+    });
+  }
+  const annotations = annotationsRef.current;
+  const saveCap = annotationsCap?.storage;
+  const saveRef = useRef(() => {
+  });
+  saveRef.current = (doc) => {
+    if (saveCap) saveCap.save(doc);
+    else updateTrialAnnotations(record.id, doc);
+  };
+  const [markMoves, setMarkMoves] = useState({ undo: false, redo: false });
+  useEffect(() => {
+    if (!annotationsCap) return;
+    const read = () => {
+      const next = { undo: annotations.canUndo(), redo: annotations.canRedo() };
+      setMarkMoves((prev) => prev.undo === next.undo && prev.redo === next.redo ? prev : next);
+    };
+    read();
+    return annotations.subscribe(read);
+  }, [annotations, annotationsCap]);
+  useEffect(() => {
+    if (!annotationsCap) return;
+    let timer = null;
+    let dirty = false;
+    const flush = () => {
+      if (!dirty) return;
+      dirty = false;
+      saveRef.current(annotations.toJSON());
+    };
+    const off = annotations.subscribe(() => {
+      dirty = true;
+      if (timer) clearTimeout(timer);
+      timer = setTimeout(() => {
+        timer = null;
+        flush();
+      }, 250);
+    });
+    return () => {
+      off();
+      if (timer) clearTimeout(timer);
+      flush();
+    };
+  }, [annotations, annotationsCap]);
+  const declaresTools = instrument.tools != null || instrument.annotations != null;
+  const resolvedToolId = declaresTools ? record.activeToolId ?? instrument.tools?.initial ?? instrument.tools?.tools[0]?.id ?? (instrument.annotations ? "select" : null) : labToolId;
   const setActiveTool = (id) => {
     if (declaresTools) setTrialTool(record.id, id);
     else setLabTool(id);
@@ -1468,7 +2992,8 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
         if (!view2d) return;
         updateTrialView(record.id, { ...view2d, zoom: z });
       },
-      activeToolId: resolvedToolId
+      activeToolId: resolvedToolId,
+      visibleLayers
     },
     emit: (event) => {
       snapshotIfNeeded(event);
@@ -1476,22 +3001,36 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
     },
     job: jobCap ? job : void 0
   };
-  const undoBindings = undoCap ? {
-    canUndo: record.undoStack.past.length > 0,
-    canRedo: record.undoStack.future.length > 0,
+  const undoState = () => {
+    const result = undo(record.undoStack, structuredClone(record.state));
+    if (!result) return;
+    updateTrialState(record.id, result.snapshot);
+    updateTrialUndoStack(record.id, result.stack);
+  };
+  const redoState = () => {
+    const result = redo(record.undoStack, structuredClone(record.state));
+    if (!result) return;
+    updateTrialState(record.id, result.snapshot);
+    updateTrialUndoStack(record.id, result.stack);
+  };
+  const undoBindings = undoCap || annotationsCap ? {
+    canUndo: markMoves.undo || (undoCap ? record.undoStack.past.length > 0 : false),
+    canRedo: markMoves.redo || (undoCap ? record.undoStack.future.length > 0 : false),
     undo: () => {
-      const result = undo(record.undoStack, structuredClone(record.state));
-      if (!result) return;
-      updateTrialState(record.id, result.snapshot);
-      updateTrialUndoStack(record.id, result.stack);
+      if (annotationsCap && annotations.undo()) return;
+      if (undoCap) undoState();
     },
     redo: () => {
-      const result = redo(record.undoStack, structuredClone(record.state));
-      if (!result) return;
-      updateTrialState(record.id, result.snapshot);
-      updateTrialUndoStack(record.id, result.stack);
+      if (annotationsCap && annotations.redo()) return;
+      if (undoCap) redoState();
     }
   } : void 0;
+  const loupeCap = useMemo(() => {
+    const declared = instrument.loupe;
+    if (declared == null) return null;
+    return resolveLoupe(typeof declared === "function" ? declared(record.config) : declared);
+  }, [instrument.loupe, record.config]);
+  const loupeBindings = loupeCap ? { on: loupeOn, toggle: () => setLoupeOn((v) => !v) } : void 0;
   const canvasLayers = useMemo(() => {
     if (!instrument.canvas) return [];
     const baseLayers = instrument.canvas.layers;
@@ -1499,9 +3038,8 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
     return ordered.map((layer) => ({
       id: layer.id,
       visible: layerVisibility[layer.id] !== false,
-      render: (ctx, view) => {
-        ctx.translate(view.pan.x, view.pan.y);
-        ctx.scale(view.zoom, view.zoom);
+      render: (ctx, view, frame) => {
+        applyCamera(ctx, view, frame);
         layer.draw(ctx, { state: record.state, config: record.config, zoom: view.zoom });
       }
     }));
@@ -1514,6 +3052,7 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
     capability: instrument.dragDrop ?? { palette: [], onDrop: (_p, _i, s) => s },
     canvasContainerRef,
     view: view2d ?? DEFAULT_VIEW,
+    worldSpec: instrument.canvas?.worldSpec,
     state: record.state,
     config: record.config,
     setState: (next) => {
@@ -1554,22 +3093,44 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
       }
     ];
   }, [canvasLayers, dragDropResult.drag]);
+  const lens = loupeCap ? /* @__PURE__ */ jsx(
+    TrialLoupe,
+    {
+      capability: loupeCap,
+      enabled: loupeOn,
+      state: record.state,
+      config: record.config,
+      view: view2d ?? DEFAULT_VIEW,
+      worldSpec: instrument.canvas?.worldSpec,
+      hostRef: loupeHostRef
+    }
+  ) : null;
   let body;
   if (instrument.canvas) {
     body = /* @__PURE__ */ jsxs("div", { ref: canvasContainerRef, className: "lk-trial__canvas-host", children: [
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         CanvasStack,
         {
           layers: layersWithFeedback,
           view: view2d ?? DEFAULT_VIEW,
           onViewChange: setView,
+          worldSpec: instrument.canvas.worldSpec,
+          onResize: placeView,
           minZoom: instrument.canvas.minZoom,
           maxZoom: instrument.canvas.maxZoom,
-          children: instrument.render(renderCtx)
+          children: [
+            instrument.render(renderCtx),
+            lens
+          ]
         }
       ),
       /* @__PURE__ */ jsx(DragOverlay, { drag: dragDropResult.drag })
     ] });
+  } else if (lens) {
+    body = /* @__PURE__ */ jsxs("div", { ref: loupeHostRef, className: "lk-trial__loupe-host", children: [
+      instrument.render(renderCtx),
+      lens
+    ] });
   } else {
     body = instrument.render(renderCtx);
   }
@@ -1614,10 +3175,21 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
     }
     return out;
   }, [paletteNode, layerListNode]);
-  return /* @__PURE__ */ jsx(
+  const annotationOverlays = annotationsCap ? /* @__PURE__ */ jsx(
+    AnnotationTargets,
+    {
+      capability: annotationsCap,
+      state: record.state,
+      config: record.config,
+      annotations,
+      activeToolId: resolvedToolId
+    }
+  ) : null;
+  return /* @__PURE__ */ jsx(TrialIdProvider, { trialId: record.id, children: /* @__PURE__ */ jsx(AnnotationsContext.Provider, { value: annotationsCap ? annotations : null, children: /* @__PURE__ */ jsxs(
     TrialChrome,
     {
       job: jobCap ? job : void 0,
+      loupe: loupeBindings,
       trialId: record.id,
       record,
       instrument,
@@ -1628,9 +3200,12 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
       suppress,
       activeToolId: resolvedToolId,
       setActiveTool,
-      children: body
+      children: [
+        body,
+        annotationOverlays
+      ]
     }
-  );
+  ) }) });
 }
 
 // src/trial/trialOps.ts
@@ -1643,7 +3218,9 @@ function findInstrument(instruments, name) {
   return found;
 }
 function initialView(instrument) {
-  return instrument.canvas?.initialView ? structuredClone(instrument.canvas.initialView) : { ...DEFAULT_VIEW2, pan: { ...DEFAULT_VIEW2.pan } };
+  const declared = instrument.canvas?.initialView;
+  if (typeof declared === "function") return null;
+  return declared ? structuredClone(declared) : { ...DEFAULT_VIEW2, pan: { ...DEFAULT_VIEW2.pan } };
 }
 function addTrial(trials, instruments, instrumentName) {
   const instrument = findInstrument(instruments, instrumentName);
@@ -1716,7 +3293,7 @@ function LabHeader() {
         className: "lk-lab-header__add",
         onClick: () => lab.addTrial(only.name),
         children: [
-          /* @__PURE__ */ jsx(Rt, { size: 16 }),
+          /* @__PURE__ */ jsx(C, { size: 16 }),
           /* @__PURE__ */ jsx("span", { children: "Add trial" })
         ]
       }
@@ -1738,7 +3315,7 @@ function LabHeader() {
       )
     ),
     /* @__PURE__ */ jsx(
-      r,
+      r2,
       {
         className: "lk-lab-header__mode",
         ariaLabel: "Color mode",
@@ -1800,7 +3377,9 @@ function LabShell({ title, children, header, footer, mode = "auto" }) {
   return outer ? shell : /* @__PURE__ */ jsx(ThemeProvider, { theme: interstellarTheme, mode: resolved, children: shell });
 }
 var ZONE_ID = asNodeId("lk-workspace");
-var STRATEGIES = { grid: gridStrategy };
+var STRATEGIES = { grid: gridStrategy, floating: floatingStrategy };
+var FLOAT_ZONE_ID = asNodeId("lk-workspace-floating");
+var PANEL_KIND = "panel";
 var KIND = "trial";
 function extentOf(store, id) {
   const p2 = store.getNode(id)?.membership?.placement;
@@ -1810,9 +3389,14 @@ function extentOf(store, id) {
   if (p2.span) out.span = p2.span;
   return Object.keys(out).length > 0 ? out : null;
 }
+function PanelFrame({ panel, floating = false }) {
+  const hosts = usePanelHosts();
+  return /* @__PURE__ */ jsx("div", { className: floating ? "lk-panel-tile lk-panel-tile--floating" : "lk-panel-tile", children: /* @__PURE__ */ jsx("div", { className: "lk-panel-tile__body", ref: (el) => hosts?.set(panel.key, el) }) });
+}
 function Workspace({
   children,
   ids,
+  panels,
   resizable = false,
   reorderable = false,
   onReorder,
@@ -1823,8 +3407,20 @@ function Workspace({
   viewport
 }) {
   const items = Children.toArray(children);
-  const idKey = ids ? ids.join(",") : `#${items.length}`;
-  const nodeIds = useMemo(() => items.map((_2, i) => asNodeId(ids?.[i] ?? `lk-ws-${i}`)), [idKey]);
+  const tilePanels = useMemo(() => (panels ?? []).filter((p2) => p2.as === "tile"), [panels]);
+  const floatPanels = useMemo(() => (panels ?? []).filter((p2) => p2.as === "floating"), [panels]);
+  const wantedIds = [
+    ...items.map((_2, i) => ids?.[i] ?? `lk-ws-${i}`),
+    ...tilePanels.map((p2) => `lk-panel-${p2.key}`)
+  ];
+  const idKey = wantedIds.join(",");
+  const idKeyRef = useRef(null);
+  const nodeIdsRef = useRef([]);
+  if (idKeyRef.current !== idKey) {
+    idKeyRef.current = idKey;
+    nodeIdsRef.current = wantedIds.map(asNodeId);
+  }
+  const nodeIds = nodeIdsRef.current;
   const layoutRef = useRef(layout);
   layoutRef.current = layout;
   const onLayoutChangeRef = useRef(onLayoutChange);
@@ -1839,6 +3435,13 @@ function Workspace({
         container: { strategyId: "grid", config: { resizable, gap, padding } }
       })
     );
+    store2.registerNode(
+      createNode({
+        kind: "zone",
+        id: FLOAT_ZONE_ID,
+        container: { strategyId: "floating", config: {} }
+      })
+    );
     storeRef.current = store2;
   }
   const store = storeRef.current;
@@ -1854,7 +3457,8 @@ function Workspace({
     }
     for (const id of nodeIds) {
       if (present.has(id)) continue;
-      store.registerNode(createNode({ kind: KIND, id, parentId: ZONE_ID, focus: true }));
+      const kind = String(id).startsWith("lk-panel-") ? PANEL_KIND : KIND;
+      store.registerNode(createNode({ kind, id, parentId: ZONE_ID, focus: true }));
       store.showNode(id);
       const saved = layoutRef.current?.[id];
       if (saved) store.patchPlacement(id, saved);
@@ -1883,7 +3487,15 @@ function Workspace({
   );
   const chrome = useMemo(() => {
     const byId = new Map(nodeIds.map((id, i) => [id, items[i]]));
+    const panelByNode = new Map(
+      tilePanels.map((p2) => [`lk-panel-${p2.key}`, p2])
+    );
     return {
+      [PANEL_KIND]: ({ node }) => {
+        const panel = panelByNode.get(String(node.id));
+        if (!panel) return null;
+        return /* @__PURE__ */ jsx(PanelFrame, { panel });
+      },
       [KIND]: ({ node }) => {
         const content = byId.get(node.id) ?? null;
         if (!reorderable) return content;
@@ -1893,7 +3505,8 @@ function Workspace({
         );
       }
     };
-  }, [nodeIds, items, reorderable]);
+  }, [nodeIds, items, reorderable, tilePanels]);
+  const floatingLayer = floatPanels.length === 0 ? null : /* @__PURE__ */ jsx("div", { className: "lk-workspace__floating", children: floatPanels.map((p2) => /* @__PURE__ */ jsx(PanelFrame, { panel: p2, floating: true }, p2.key)) });
   const grid = /* @__PURE__ */ jsx(
     Container,
     {
@@ -1905,7 +3518,15 @@ function Workspace({
       onChildOrderChange: reorderable ? commitOrder : void 0
     }
   );
-  return /* @__PURE__ */ jsx(Provider, { store, children: /* @__PURE__ */ jsx(StrategyRegistryProvider, { strategies: STRATEGIES, children: reorderable ? /* @__PURE__ */ jsx(DragProvider, { children: grid }) : grid }) });
+  return /* @__PURE__ */ jsx(Provider, { store, children: /* @__PURE__ */ jsx(StrategyRegistryProvider, { strategies: STRATEGIES, children: floatingLayer ? (
+    // The floating layer insets against the workspace, so it needs a
+    // positioned box around both. Without one it insets against the page
+    // and lands over the lab header.
+    /* @__PURE__ */ jsxs("div", { className: "lk-workspace-host", children: [
+      reorderable ? /* @__PURE__ */ jsx(DragProvider, { children: grid }) : grid,
+      floatingLayer
+    ] })
+  ) : reorderable ? /* @__PURE__ */ jsx(DragProvider, { children: grid }) : grid }) });
 }
 function buildStore(instruments, defaultInstrument, storage, storageKey, initialMode) {
   const store = createLabStore({ storageKey, storage, initialMode });
@@ -1968,6 +3589,40 @@ function Lab({
   const savedSnapshots = useStore(store, (s) => s.savedSnapshots);
   const modeValue = useStore(store, (s) => s.mode);
   const layout = useStore(store, (s) => s.layout);
+  const undockedPanels = useStore(store, (s) => s.undockedPanels);
+  const panelHostsRef = useRef(null);
+  if (panelHostsRef.current === null) panelHostsRef.current = createPanelHostRegistry();
+  const outerSurface = useSurfaceOptional();
+  const outerCanvas = useSurfaceCanvas();
+  const [ownCanvas, setOwnCanvas] = useState(null);
+  const ownCanvasRef = useRef(null);
+  const bufferRef = useRef({ w: 0, h: 0 });
+  const surfaceRef = useRef(null);
+  const onFrame = useCallback((frame) => {
+    const c2 = ownCanvasRef.current;
+    if (!c2) return;
+    const w2 = Math.round(frame.size.width * frame.dpr);
+    const h = Math.round(frame.size.height * frame.dpr);
+    if (bufferRef.current.w === w2 && bufferRef.current.h === h) return;
+    bufferRef.current = { w: w2, h };
+    c2.width = w2;
+    c2.height = h;
+    c2.style.width = `${frame.size.width}px`;
+    c2.style.height = `${frame.size.height}px`;
+    surfaceRef.current?.invalidateAll();
+  }, []);
+  const ownSurface = useTiledSurface({ onFrame });
+  surfaceRef.current = ownSurface;
+  const surface = outerSurface ?? ownSurface;
+  const surfaceCanvas = outerSurface ? outerCanvas : ownCanvas;
+  const workspacePanels = useMemo(
+    () => Object.entries(undockedPanels).map(([key, panel]) => ({
+      key,
+      title: panel.sectionId,
+      as: panel.as
+    })),
+    [undockedPanels]
+  );
   const resolvedMode = useResolvedMode(modeValue);
   useEffect(() => {
     if (mode && mode !== store.getState().mode) {
@@ -2047,27 +3702,50 @@ function Lab({
             /* @__PURE__ */ jsx(LabHeader, {}),
             children
           ] }),
-          children: /* @__PURE__ */ jsxs("div", { className: "lk-lab__body", children: [
-            tools ? /* @__PURE__ */ jsx(LabPalette, { tools }) : null,
-            /* @__PURE__ */ jsx(
-              Workspace,
-              {
-                ids: trials.map((w2) => w2.id),
-                resizable: true,
-                reorderable: true,
-                onReorder: (ids) => contextValue.reorderTrials(ids),
-                layout,
-                onLayoutChange: (next) => store.getState().setLayout(next),
-                children: trials.map((w2) => /* @__PURE__ */ jsx(Trial, { id: w2.id, chrome, suppress }, w2.id))
-              }
-            )
-          ] })
+          children: /* @__PURE__ */ jsx(PanelHostContext.Provider, { value: panelHostsRef.current, children: /* @__PURE__ */ jsx(SurfaceContext.Provider, { value: surface, children: /* @__PURE__ */ jsx(SurfaceCanvasContext.Provider, { value: surfaceCanvas, children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: "lk-lab__body",
+              ref: outerSurface ? void 0 : ownSurface.containerRef,
+              children: [
+                outerSurface ? null : (
+                  // Above the trials and inert: the marks a tile paints have
+                  // to sit over the instrument's own DOM, and nothing on this
+                  // buffer takes input — each tile has its own input box.
+                  /* @__PURE__ */ jsx(
+                    "canvas",
+                    {
+                      className: "lk-lab__surface",
+                      ref: (el) => {
+                        ownCanvasRef.current = el;
+                        setOwnCanvas(el);
+                      }
+                    }
+                  )
+                ),
+                tools ? /* @__PURE__ */ jsx(LabPalette, { tools }) : null,
+                /* @__PURE__ */ jsx(
+                  Workspace,
+                  {
+                    panels: workspacePanels,
+                    ids: trials.map((w2) => w2.id),
+                    resizable: true,
+                    reorderable: true,
+                    onReorder: (ids) => contextValue.reorderTrials(ids),
+                    layout,
+                    onLayoutChange: (next) => store.getState().setLayout(next),
+                    children: trials.map((w2) => /* @__PURE__ */ jsx(Trial, { id: w2.id, chrome, suppress }, w2.id))
+                  }
+                )
+              ]
+            }
+          ) }) }) })
         }
       )
     }
   ) }) });
 }
 
-export { DEFAULT_VIEW, Lab, LabContext, LabPalette, LabShell, PITCH_LIMIT, Trial, TrialChrome, Workspace, addTrial, applyRules, as2DView, builtinRules, clampPitch, cloneTrial, closeTrial, defineInstrument, f, interstellarTheme, orbitAfterDrag, orbitAfterWheel, reorderTrials, resetTrial, resolveConfigSchema, titleCase, useConfigSchema, useLabContext, useOrbit, validateConfigSchema, wrapYaw };
+export { AnnotationOverlay, AnnotationTargets, DEFAULT_VIEW, Lab, LabContext, LabPalette, LabShell, PITCH_LIMIT, Trial, TrialChrome, Workspace, addTrial, annotationsFromJSON, applyRules, as2DView, builtinRules, capturePlan, captureTarget, clampPitch, cloneTrial, closeTrial, composeCaptureSvg, createAnnotationScene, createAnnotationStore, createMarkDrawOne, defineInstrument, f, fitView, fracContains, fracIntersects, fracToWorld, fromWeaselView, interstellarTheme, isStale, markCommands, markSvgNodes, orbitAfterDrag, orbitAfterWheel, reorderTrials, resetTrial, resolveConfigSchema, resolveMarkStyle, roundFrac, seenFrom, titleCase, toWeaselView, useConfigSchema, useLabContext, useOrbit, validateConfigSchema, worldToFrac, wrapYaw };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map