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

package/dist/index.js

@@ -1,34 +1,1401 @@
-import { useSurfaceOptional } from './chunk-HFDVGF4X.js';
-export { SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceOptional, useSurfaceTile, useTiledSurface } from './chunk-HFDVGF4X.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';
-export { LayerStack } from './chunk-O2BULFHX.js';
-import { suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, SidebarRegion, ViewportRegion, StatusRegion } from './chunk-PO6L3NSH.js';
-export { PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, builtinContributions, mergeContributions, suppressContributions } from './chunk-PO6L3NSH.js';
-import { JobProgress } from './chunk-RVNN4CHQ.js';
-export { FloatingPanel, JobProgress, Legend, Sidebar } from './chunk-RVNN4CHQ.js';
-export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-O7NVSCLN.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-ZZAYVX4X.js';
-export { CheckboxRow, ColorRow, ControlPanel, NumberRow, PropertyGroup, PropertyList, PropertyPanel, PropertyRow, SelectRow, SliderRow, TextRow, ToggleRow, fromConfigFields, isLeafVisible } from './chunk-ZZAYVX4X.js';
-import { p, F, vt, p2, r } from './chunk-TLGRYALP.js';
-import { CanvasStack, screenToWorld } from './chunk-NS54R52R.js';
-export { CanvasStack, screenToWorld, worldToScreen } from './chunk-NS54R52R.js';
-export { CanvasStackContext } from './chunk-CPUJ3QXL.js';
-import { useVisibleRaf } from './chunk-Z6HJ5FEM.js';
-import { LayerList } from './chunk-V7PRSIRQ.js';
-export { LayerList } from './chunk-V7PRSIRQ.js';
-import './chunk-PQJ5B2U2.js';
-import { createEventBus, redo, undo, pushSnapshot } 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 { useStore } from 'zustand/react';
+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 { 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;
@@ -287,9 +1654,9 @@ function applyRules(seed, ctx, rules) {
   for (const rule of rules) {
     const patch = rule({ ...ctx, leaf: acc });
     if (patch === null) continue;
-    for (const [k, v] of Object.entries(patch)) {
-      if (v !== void 0 && acc[k] === void 0) {
-        acc[k] = v;
+    for (const [k2, v] of Object.entries(patch)) {
+      if (v !== void 0 && acc[k2] === void 0) {
+        acc[k2] = v;
       }
     }
   }
@@ -299,7 +1666,7 @@ function applyRules(seed, ctx, rules) {
 // src/config/resolve.ts
 function defined(annotations) {
   const out = {};
-  for (const [k, v] of Object.entries(annotations)) if (v !== void 0) out[k] = v;
+  for (const [k2, v] of Object.entries(annotations)) if (v !== void 0) out[k2] = v;
   return out;
 }
 function resolveConfigSchema(schema, rules = []) {
@@ -950,21 +2317,21 @@ var weaselTheme = {
   modes: THEME_SOURCES.weasel.modes
 };
 function hexToRgba(hex, alpha) {
-  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
-  if (!m) throw new Error(`Expected a hex color, got "${hex}"`);
-  const body = m[1];
-  const full = body.length === 3 ? body.replace(/./g, (c) => c + c) : body;
+  const m2 = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m2) throw new Error(`Expected a hex color, got "${hex}"`);
+  const body = m2[1];
+  const full = body.length === 3 ? body.replace(/./g, (c2) => c2 + c2) : body;
   const r2 = Number.parseInt(full.slice(0, 2), 16);
-  const g = Number.parseInt(full.slice(2, 4), 16);
-  const b = Number.parseInt(full.slice(4, 6), 16);
-  return `rgba(${r2}, ${g}, ${b}, ${alpha})`;
+  const g2 = Number.parseInt(full.slice(2, 4), 16);
+  const b2 = Number.parseInt(full.slice(4, 6), 16);
+  return `rgba(${r2}, ${g2}, ${b2}, ${alpha})`;
 }
 var REF = /^\{([^}]+)\}$/;
 function refTarget(value) {
   if (typeof value !== "string") return null;
-  const m = REF.exec(value.trim());
-  if (!m) return null;
-  const path = m[1];
+  const m2 = REF.exec(value.trim());
+  if (!m2) return null;
+  const path = m2[1];
   const dot = path.indexOf(".");
   return dot === -1 ? path : path.slice(dot + 1);
 }
@@ -1103,9 +2470,9 @@ function flattenTokens(doc) {
   for (const [groupName, group] of Object.entries(doc)) {
     if (groupName.startsWith("$")) continue;
     if (typeof group !== "object" || group === null) continue;
-    const g = group;
-    const groupType = g.$type;
-    for (const [leaf, node] of Object.entries(g)) {
+    const g2 = group;
+    const groupType = g2.$type;
+    for (const [leaf, node] of Object.entries(g2)) {
       if (leaf.startsWith("$")) continue;
       if (!isToken(node)) continue;
       const type = node.$type ?? groupType;
@@ -1210,134 +2577,6 @@ var interstellar_tokens_default = {
 
 // src/theme/interstellar.ts
 var interstellarTheme = loadDTCG(interstellar_tokens_default);
-function DragGhost({ item, screenPos }) {
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
-  if (!mounted || typeof document === "undefined") return null;
-  const style = {
-    left: `${screenPos.x + 12}px`,
-    top: `${screenPos.y + 12}px`
-  };
-  return createPortal(
-    /* @__PURE__ */ jsx("div", { className: "lk-drag-ghost", style, children: /* @__PURE__ */ jsx("span", { className: "lk-drag-ghost__label", children: item.label }) }),
-    document.body
-  );
-}
-function useDragDrop({
-  capability,
-  canvasContainerRef,
-  view,
-  state,
-  config,
-  setState,
-  emit
-}) {
-  const [drag, setDrag] = useState(null);
-  const dragRef = useRef(null);
-  dragRef.current = drag;
-  const pendingPos = useRef(null);
-  const isOverCanvas = useCallback(
-    (screenPos) => {
-      const el = canvasContainerRef.current;
-      if (!el) return false;
-      const r2 = el.getBoundingClientRect();
-      return screenPos.x >= r2.left && screenPos.x <= r2.right && screenPos.y >= r2.top && screenPos.y <= r2.bottom;
-    },
-    [canvasContainerRef]
-  );
-  const screenToWorldFromContainer = useCallback(
-    (screenPos) => {
-      const el = canvasContainerRef.current;
-      if (!el) return null;
-      const r2 = el.getBoundingClientRect();
-      return screenToWorld({ x: screenPos.x - r2.left, y: screenPos.y - r2.top }, view);
-    },
-    [canvasContainerRef, view]
-  );
-  const frameLoop = useVisibleRaf(() => {
-    const screenPos = pendingPos.current;
-    pendingPos.current = null;
-    const active = dragRef.current;
-    if (!active || !screenPos) return;
-    let feedback = null;
-    if (capability.onDragOver && isOverCanvas(screenPos)) {
-      const world = screenToWorldFromContainer(screenPos);
-      if (world) feedback = capability.onDragOver(world, active.item, state, config);
-    }
-    setDrag({ ...active, screenPos, feedback });
-  });
-  useEffect(() => {
-    if (!drag) return;
-    const handleMove = (e) => {
-      const screenPos = { x: e.clientX, y: e.clientY };
-      const current = dragRef.current;
-      if (!current) return;
-      if (pendingPos.current !== null) {
-        pendingPos.current = screenPos;
-        dragRef.current = { ...current, screenPos };
-        setDrag(dragRef.current);
-        return;
-      }
-      pendingPos.current = screenPos;
-      frameLoop.request();
-    };
-    const handleUp = (e) => {
-      const screenPos = { x: e.clientX, y: e.clientY };
-      const active = dragRef.current;
-      if (!active) return;
-      pendingPos.current = null;
-      frameLoop.cancel();
-      if (isOverCanvas(screenPos)) {
-        const world = screenToWorldFromContainer(screenPos);
-        if (world) {
-          const nextState = capability.onDrop(world, active.item, state, config);
-          setState(nextState);
-          emit("canvas.itemAdded");
-        }
-      }
-      setDrag(null);
-    };
-    window.addEventListener("pointermove", handleMove);
-    window.addEventListener("pointerup", handleUp);
-    return () => {
-      window.removeEventListener("pointermove", handleMove);
-      window.removeEventListener("pointerup", handleUp);
-    };
-  }, [
-    drag,
-    capability,
-    state,
-    config,
-    setState,
-    emit,
-    frameLoop,
-    isOverCanvas,
-    screenToWorldFromContainer
-  ]);
-  const startDrag = useCallback((item, originScreenPos) => {
-    setDrag({ item, screenPos: originScreenPos, feedback: null });
-  }, []);
-  return { drag, startDrag };
-}
-function DragOverlay({ drag }) {
-  if (!drag) return null;
-  return /* @__PURE__ */ jsx(DragGhost, { item: drag.item, screenPos: drag.screenPos });
-}
-function Palette({ items, onDragStart, className }) {
-  return /* @__PURE__ */ jsx("div", { className: className ? `lk-palette ${className}` : "lk-palette", children: items.map((item) => /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      className: "lk-palette__item",
-      onPointerDown: (e) => {
-        e.preventDefault();
-        onDragStart(item, { x: e.clientX, y: e.clientY });
-      },
-      children: /* @__PURE__ */ jsx("span", { className: "lk-palette__label", children: item.label })
-    },
-    item.id
-  )) });
-}
 
 // src/state/view.ts
 var DEFAULT_VIEW = { zoom: 1, pan: { x: 0, y: 0 } };
@@ -1369,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({
@@ -1378,6 +2680,7 @@ function TrialChrome({
   isLastTrial,
   undoBindings,
   job,
+  loupe,
   trialChrome,
   chrome,
   suppress,
@@ -1391,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(() => {
@@ -1408,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,
@@ -1425,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),
@@ -1444,10 +2759,14 @@ function TrialChrome({
     updateTrialConfig,
     updateTrialState,
     undoBindings,
+    loupe,
     view2d,
     activeToolId,
     setActiveTool,
-    configSchema
+    configSchema,
+    undockedIds,
+    undockPanelAction,
+    dockPanelAction
   ]);
   const contributions = useMemo(
     () => suppressContributions(
@@ -1461,7 +2780,7 @@ function TrialChrome({
     ),
     [instrument, ctx, trialChrome, chrome, suppress, lab.controls]
   );
-  const inRegion = (region) => contributions.filter((c) => c.region === region);
+  const inRegion = (region) => contributions.filter((c2) => c2.region === region);
   const handleKeyDown = (e) => {
     const mod = e.metaKey || e.ctrlKey;
     if (!mod) return;
@@ -1486,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 })
@@ -1504,7 +2833,7 @@ function Trial({ id, chrome, suppress }) {
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error("[labkit] <Trial> requires <LabStoreProvider>");
-  const record = useStore(storeCtx.store, (s) => s.trials.find((w) => w.id === id));
+  const record = useStore(storeCtx.store, (s) => s.trials.find((w2) => w2.id === id));
   if (!record) {
     return /* @__PURE__ */ jsxs("div", { className: "lk-trial lk-trial--unknown", children: [
       "Trial not found: ",
@@ -1532,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);
@@ -1544,19 +2875,85 @@ 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;
   const snapshotIfNeeded = (event) => {
     if (!undoCap || !undoEvents.has(event)) return;
-    const current = store.getState().trials.find((w) => w.id === record.id);
+    const current = store.getState().trials.find((w2) => w2.id === record.id);
     if (!current) return;
     const snap = structuredClone(current.state);
     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);
@@ -1595,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);
@@ -1603,32 +3001,45 @@ 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;
-    const ordered = layerOrder ? [...baseLayers].sort((a, b) => layerOrder.indexOf(a.id) - layerOrder.indexOf(b.id)) : baseLayers;
+    const ordered = layerOrder ? [...baseLayers].sort((a, b2) => layerOrder.indexOf(a.id) - layerOrder.indexOf(b2.id)) : baseLayers;
     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 });
       }
     }));
@@ -1641,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) => {
@@ -1654,8 +3066,8 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
   });
   const paletteItems = useMemo(() => {
     if (!instrument.dragDrop) return [];
-    const p3 = instrument.dragDrop.palette;
-    return typeof p3 === "function" ? p3(record.state, record.config) : p3;
+    const p2 = instrument.dragDrop.palette;
+    return typeof p2 === "function" ? p2(record.state, record.config) : p2;
   }, [instrument.dragDrop, record.state, record.config]);
   const layersWithFeedback = useMemo(() => {
     if (!dragDropResult.drag?.feedback) return canvasLayers;
@@ -1681,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);
   }
@@ -1741,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,
@@ -1755,9 +3200,12 @@ function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }) {
       suppress,
       activeToolId: resolvedToolId,
       setActiveTool,
-      children: body
+      children: [
+        body,
+        annotationOverlays
+      ]
     }
-  );
+  ) }) });
 }
 
 // src/trial/trialOps.ts
@@ -1770,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);
@@ -1787,7 +3237,7 @@ function addTrial(trials, instruments, instrumentName) {
   return [...trials, record];
 }
 function cloneTrial(trials, id) {
-  const sourceIdx = trials.findIndex((w) => w.id === id);
+  const sourceIdx = trials.findIndex((w2) => w2.id === id);
   const source = trials[sourceIdx];
   if (!source) return trials;
   const clone = {
@@ -1802,11 +3252,11 @@ function cloneTrial(trials, id) {
 }
 function closeTrial(trials, id) {
   if (trials.length <= 1) return trials;
-  const next = trials.filter((w) => w.id !== id);
+  const next = trials.filter((w2) => w2.id !== id);
   return next.length === trials.length ? trials : next;
 }
 function resetTrial(trials, id, instruments) {
-  const idx = trials.findIndex((w) => w.id === id);
+  const idx = trials.findIndex((w2) => w2.id === id);
   const current = trials[idx];
   if (!current) return trials;
   const instrument = findInstrument(instruments, current.instrumentName);
@@ -1821,10 +3271,10 @@ function resetTrial(trials, id, instruments) {
   return [...trials.slice(0, idx), reset, ...trials.slice(idx + 1)];
 }
 function reorderTrials(trials, ids) {
-  const byId = new Map(trials.map((w) => [w.id, w]));
-  const named = ids.map((id) => byId.get(id)).filter((w) => w !== void 0);
-  const seen = new Set(named.map((w) => w.id));
-  const rest = trials.filter((w) => !seen.has(w.id));
+  const byId = new Map(trials.map((w2) => [w2.id, w2]));
+  const named = ids.map((id) => byId.get(id)).filter((w2) => w2 !== void 0);
+  const seen = new Set(named.map((w2) => w2.id));
+  const rest = trials.filter((w2) => !seen.has(w2.id));
   return [...named, ...rest];
 }
 var MODES = [
@@ -1843,7 +3293,7 @@ function LabHeader() {
         className: "lk-lab-header__add",
         onClick: () => lab.addTrial(only.name),
         children: [
-          /* @__PURE__ */ jsx(vt, { size: 16 }),
+          /* @__PURE__ */ jsx(C, { size: 16 }),
           /* @__PURE__ */ jsx("span", { children: "Add trial" })
         ]
       }
@@ -1851,7 +3301,7 @@ function LabHeader() {
       // Held at null so the control stays an "add one" action rather than
       // reading as the current instrument.
       /* @__PURE__ */ jsx(
-        p2,
+        p,
         {
           className: "lk-lab-header__add-select",
           "aria-label": "Add trial",
@@ -1865,7 +3315,7 @@ function LabHeader() {
       )
     ),
     /* @__PURE__ */ jsx(
-      r,
+      r2,
       {
         className: "lk-lab-header__mode",
         ariaLabel: "Color mode",
@@ -1927,19 +3377,26 @@ 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 p3 = store.getNode(id)?.membership?.placement;
-  if (!p3) return null;
+  const p2 = store.getNode(id)?.membership?.placement;
+  if (!p2) return null;
   const out = {};
-  if (p3.size) out.size = p3.size;
-  if (p3.span) out.span = p3.span;
+  if (p2.size) out.size = p2.size;
+  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,
@@ -1950,8 +3407,20 @@ function Workspace({
   viewport
 }) {
   const items = Children.toArray(children);
-  const idKey = ids ? ids.join(",") : `#${items.length}`;
-  const nodeIds = useMemo(() => items.map((_, 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);
@@ -1966,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;
@@ -1981,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);
@@ -2010,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;
@@ -2020,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,
     {
@@ -2032,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 });
@@ -2054,9 +3548,9 @@ var NEBULA_SLOTS = [
   { cx: "85%", cy: "18%", sx: "55%", sy: "80%", stop: "70%" }
 ];
 function buildNebula(colors) {
-  const blobs = colors.map((c, i) => {
-    const p3 = NEBULA_SLOTS[i % NEBULA_SLOTS.length];
-    return `radial-gradient(ellipse ${p3.sx} ${p3.sy} at ${p3.cx} ${p3.cy}, color-mix(in srgb, ${c} 22%, transparent), transparent ${p3.stop})`;
+  const blobs = colors.map((c2, i) => {
+    const p2 = NEBULA_SLOTS[i % NEBULA_SLOTS.length];
+    return `radial-gradient(ellipse ${p2.sx} ${p2.sy} at ${p2.cx} ${p2.cy}, color-mix(in srgb, ${c2} 22%, transparent), transparent ${p2.stop})`;
   });
   blobs.push("radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)");
   return blobs.join(", ");
@@ -2095,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) {
@@ -2103,8 +3631,8 @@ function Lab({
   }, [mode, store]);
   const contextValue = useMemo(() => {
     const replaceTrials = (next) => {
-      const currentById = new Map(store.getState().trials.map((w) => [w.id, w]));
-      const merged = next.map((w) => currentById.get(w.id) ?? w);
+      const currentById = new Map(store.getState().trials.map((w2) => [w2.id, w2]));
+      const merged = next.map((w2) => currentById.get(w2.id) ?? w2);
       store.setState({ trials: merged });
       store.getState().setMode(store.getState().mode);
     };
@@ -2128,11 +3656,11 @@ function Lab({
       },
       resetTrial: (id) => {
         const next = resetTrial(store.getState().trials, id, instruments);
-        const record = next.find((w) => w.id === id);
+        const record = next.find((w2) => w2.id === id);
         if (!record) return;
         store.setState((s) => ({
           trials: s.trials.map(
-            (w) => w.id === id ? { ...w, config: record.config, state: record.state, view: record.view } : w
+            (w2) => w2.id === id ? { ...w2, config: record.config, state: record.state, view: record.view } : w2
           )
         }));
         store.getState().updateTrialView(id, record.view);
@@ -2149,8 +3677,8 @@ function Lab({
         store.getState().deleteSnapshot(snapshotId);
       },
       mode: modeValue,
-      setMode: (m) => {
-        store.getState().setMode(m);
+      setMode: (m2) => {
+        store.getState().setMode(m2);
       },
       configRules,
       controls
@@ -2174,372 +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((w) => w.id),
-                resizable: true,
-                reorderable: true,
-                onReorder: (ids) => contextValue.reorderTrials(ids),
-                layout,
-                onLayoutChange: (next) => store.getState().setLayout(next),
-                children: trials.map((w) => /* @__PURE__ */ jsx(Trial, { id: w.id, chrome, suppress }, w.id))
-              }
-            )
-          ] })
-        }
-      )
-    }
-  ) }) });
-}
-function CurveField({
-  values,
-  min,
-  max,
-  step,
-  width,
-  height = 110,
-  defaults,
-  onChange,
-  marks
-}) {
-  const points = useMemo(() => {
-    const out = [];
-    for (let i = 0; i + 1 < values.length; i += 2) out.push({ x: values[i], y: values[i + 1] });
-    return out;
-  }, [values]);
-  const handleChange = useCallback(
-    (next) => {
-      const flat = new Array(next.length * 2);
-      for (let i = 0; i < next.length; i++) {
-        const ySnap = Math.round(next[i].y / step) * step;
-        const y = Math.max(min, Math.min(max, ySnap));
-        flat[i * 2] = next[i].x;
-        flat[i * 2 + 1] = y;
-      }
-      p("curve-field", "handleChange", {
-        nLen: next.length,
-        flatLen: flat.length,
-        sample: flat.slice(0, 4)
-      });
-      onChange(flat);
-    },
-    [onChange, min, max, step]
-  );
-  const handleFlip = useCallback(() => {
-    const flipped = [];
-    for (let i = 0; i + 1 < values.length; i += 2) {
-      flipped.push({ x: 1 - values[i], y: values[i + 1] });
-    }
-    flipped.sort((a, b) => a.x - b.x);
-    const out = [];
-    for (const p3 of flipped) out.push(p3.x, p3.y);
-    onChange(out);
-  }, [values, onChange]);
-  const handleFlipVertical = useCallback(() => {
-    const mid = (min + max) / 2;
-    const flipped = new Array(values.length);
-    for (let i = 0; i + 1 < values.length; i += 2) {
-      flipped[i] = values[i];
-      flipped[i + 1] = 2 * mid - values[i + 1];
-    }
-    onChange(flipped);
-  }, [values, min, max, onChange]);
-  return /* @__PURE__ */ jsxs("div", { className: "lk-curve-field", children: [
-    /* @__PURE__ */ jsxs("div", { className: "lk-curve-field__plot", children: [
-      /* @__PURE__ */ jsx(
-        F,
-        {
-          value: points,
-          onInput: handleChange,
-          domain: "1d",
-          constrain: "function",
-          xRange: [0, 1],
-          yRange: [min, max],
-          width,
-          height,
-          endpoints: "pinned-x",
-          addPointMode: "click-curve",
-          minPoints: 2,
-          grid: {},
-          history: false
-        }
-      ),
-      marks && marks.length > 0 && /* @__PURE__ */ jsx(
-        "svg",
-        {
-          className: "lk-curve-field__marks",
-          width,
-          height,
-          viewBox: `0 0 ${width} ${height}`,
-          "aria-hidden": "true",
-          children: marks.map((m) => {
-            const color = m.color ?? "#ffcc00";
-            if (m.kind === "band") {
-              const x0 = Math.max(0, Math.min(1, m.x[0])) * width;
-              const x1 = Math.max(0, Math.min(1, m.x[1])) * width;
-              const left = Math.min(x0, x1);
-              const w = Math.abs(x1 - x0);
-              return /* @__PURE__ */ jsxs("g", { children: [
-                /* @__PURE__ */ jsx("rect", { x: left, y: 0, width: w, height, fill: color, fillOpacity: 0.4 }),
-                /* @__PURE__ */ jsx(
-                  "line",
-                  {
-                    x1: left,
-                    y1: 0,
-                    x2: left,
-                    y2: height,
-                    stroke: color,
-                    strokeOpacity: 0.85,
-                    strokeWidth: 1
-                  }
+          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(
-                  "line",
+                  Workspace,
                   {
-                    x1: left + w,
-                    y1: 0,
-                    x2: left + w,
-                    y2: height,
-                    stroke: color,
-                    strokeOpacity: 0.85,
-                    strokeWidth: 1
+                    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))
                   }
                 )
-              ] }, `band-${m.x[0]}-${m.x[1]}-${color}`);
+              ]
             }
-            const x = Math.max(0, Math.min(1, m.x)) * width;
-            return /* @__PURE__ */ jsx(
-              "line",
-              {
-                x1: x,
-                y1: 0,
-                x2: x,
-                y2: height,
-                stroke: color,
-                strokeWidth: 1
-              },
-              `mark-${m.x}-${color}`
-            );
-          })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs("div", { className: "lk-curve-field__actions", children: [
-      /* @__PURE__ */ jsx("button", { type: "button", className: "lk-curve-field__action", onClick: handleFlip, children: "Flip horizontally" }),
-      /* @__PURE__ */ jsx("button", { type: "button", className: "lk-curve-field__action", onClick: handleFlipVertical, children: "Flip vertically" }),
-      defaults && /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          className: "lk-curve-field__action",
-          onClick: () => onChange([...defaults]),
-          children: "Reset"
+          ) }) }) })
         }
       )
-    ] })
-  ] });
-}
-function Subpanel({ title, children, className }) {
-  const cls = className ? `lk-subpanel ${className}` : "lk-subpanel";
-  return /* @__PURE__ */ jsxs("div", { className: cls, children: [
-    /* @__PURE__ */ jsxs("h4", { className: "lk-subpanel__title", children: [
-      /* @__PURE__ */ jsx("span", { children: title }),
-      /* @__PURE__ */ jsx("hr", {})
-    ] }),
-    children
-  ] });
-}
-function EffectCard({
-  title,
-  primary,
-  accent,
-  index,
-  expanded = true,
-  onToggleExpanded,
-  onRemove,
-  draggable,
-  onPressHandle,
-  onReleaseHandle,
-  onDragStart,
-  onDragEnd,
-  onDragOver,
-  onDragLeave,
-  onDrop,
-  dragging,
-  children,
-  className
-}) {
-  const stateClass = `${expanded ? "is-expanded" : "is-collapsed"}${dragging ? " is-dragging" : ""}${accent ? " has-accent" : ""}`;
-  const cls = `lk-effect-card ${stateClass}${className ? ` ${className}` : ""}`;
-  const style = accent ? { "--lk-panel-accent": accent } : void 0;
-  const headProps = onToggleExpanded ? {
-    role: "button",
-    tabIndex: 0,
-    onClick: onToggleExpanded,
-    onKeyDown: (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        onToggleExpanded();
-      }
     }
-  } : {};
-  return (
-    // biome-ignore lint/a11y/noStaticElementInteractions: native HTML5 drag-and-drop container — drag events are not click/keyboard interactions and have no semantic element; the in-card handle and header carry the a11y affordances.
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: cls,
-        style,
-        draggable,
-        onDragStart,
-        onDragEnd,
-        onDragOver,
-        onDragLeave,
-        onDrop,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "lk-effect-card__head", ...headProps, children: [
-            index != null ? /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "lk-effect-card__index-badge lk-effect-card__handle",
-                title: "Drag to reorder \xB7 click to toggle",
-                "aria-label": `Item ${index + 1} \u2014 drag to reorder, click to toggle`,
-                onMouseDown: onPressHandle,
-                onMouseUp: onReleaseHandle,
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onToggleExpanded?.();
-                },
-                children: index + 1
-              }
-            ) : /* @__PURE__ */ jsx(
-              "span",
-              {
-                className: "lk-effect-card__handle",
-                "aria-hidden": "true",
-                title: "Drag to reorder",
-                onMouseDown: onPressHandle,
-                onMouseUp: onReleaseHandle,
-                children: /* @__PURE__ */ jsx(DragHandleIcon, {})
-              }
-            ),
-            /* @__PURE__ */ jsx("span", { className: "lk-effect-card__title", children: title }),
-            primary != null && /* @__PURE__ */ jsx("span", { className: "lk-effect-card__primary", children: primary }),
-            onRemove && /* @__PURE__ */ jsx(
-              "button",
-              {
-                type: "button",
-                className: "lk-effect-card__remove",
-                onClick: (e) => {
-                  e.stopPropagation();
-                  onRemove();
-                },
-                title: "Remove",
-                "aria-label": "Remove",
-                children: "\u2715"
-              }
-            )
-          ] }),
-          expanded && /* @__PURE__ */ jsx("div", { className: "lk-effect-card__body", children })
-        ]
-      }
-    )
-  );
-}
-function DragHandleIcon() {
-  return /* @__PURE__ */ jsxs("svg", { width: "10", height: "14", viewBox: "0 0 10 14", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "3", r: "1.3", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "3", r: "1.3", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "7", r: "1.3", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "7", r: "1.3", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("circle", { cx: "3", cy: "11", r: "1.3", fill: "currentColor" }),
-    /* @__PURE__ */ jsx("circle", { cx: "7", cy: "11", r: "1.3", fill: "currentColor" })
-  ] });
-}
-function EffectCardList({
-  items,
-  renderItem,
-  onReorder,
-  empty,
-  defaultExpandedIds
-}) {
-  const [expanded, setExpanded] = useState(() => new Set(defaultExpandedIds ?? []));
-  const [draggingId, setDraggingId] = useState(null);
-  const [pressedId, setPressedId] = useState(null);
-  const [dropHint, setDropHint] = useState(
-    null
-  );
-  if (items.length === 0) {
-    return /* @__PURE__ */ jsx(Fragment, { children: empty ?? /* @__PURE__ */ jsx("div", { className: "lk-effect-card-list__empty", children: "No items." }) });
-  }
-  return /* @__PURE__ */ jsx("div", { className: "lk-effect-card-list", children: items.map((item) => {
-    const isExpanded = expanded.has(item.id);
-    const isDragging = draggingId === item.id;
-    const isPressed = pressedId === item.id;
-    const showHintBefore = dropHint && dropHint.id === item.id && dropHint.position === "before";
-    const showHintAfter = dropHint && dropHint.id === item.id && dropHint.position === "after";
-    const toggleExpanded = () => setExpanded((prev) => {
-      const next = new Set(prev);
-      if (next.has(item.id)) next.delete(item.id);
-      else next.add(item.id);
-      return next;
-    });
-    return /* @__PURE__ */ jsxs("div", { className: "lk-effect-card-list__wrap", children: [
-      showHintBefore && /* @__PURE__ */ jsx("div", { className: "lk-effect-card-list__drop-hint" }),
-      renderItem(item, {
-        isExpanded,
-        isDragging,
-        toggleExpanded,
-        cardProps: {
-          expanded: isExpanded,
-          dragging: isDragging,
-          draggable: isPressed,
-          onToggleExpanded: toggleExpanded,
-          onPressHandle: () => setPressedId(item.id),
-          onReleaseHandle: () => setPressedId(null),
-          onDragStart: (e) => {
-            e.dataTransfer.effectAllowed = "move";
-            e.dataTransfer.setData("text/plain", String(item.id));
-            setDraggingId(item.id);
-          },
-          onDragEnd: () => {
-            setDraggingId(null);
-            setPressedId(null);
-            setDropHint(null);
-          },
-          onDragOver: (e) => {
-            if (draggingId === null || draggingId === item.id) return;
-            e.preventDefault();
-            e.dataTransfer.dropEffect = "move";
-            const rect = e.currentTarget.getBoundingClientRect();
-            const position = e.clientY < rect.top + rect.height / 2 ? "before" : "after";
-            setDropHint({ id: item.id, position });
-          },
-          onDragLeave: () => {
-            setDropHint((h) => h && h.id === item.id ? null : h);
-          },
-          onDrop: (e) => {
-            e.preventDefault();
-            if (draggingId === null || draggingId === item.id) {
-              setDropHint(null);
-              return;
-            }
-            const rect = e.currentTarget.getBoundingClientRect();
-            const position = e.clientY < rect.top + rect.height / 2 ? "before" : "after";
-            onReorder(draggingId, item.id, position);
-            setDropHint(null);
-          }
-        }
-      }),
-      showHintAfter && /* @__PURE__ */ jsx("div", { className: "lk-effect-card-list__drop-hint" })
-    ] }, String(item.id));
-  }) });
+  ) }) });
 }
 
-export { CurveField, DEFAULT_VIEW, EffectCard, EffectCardList, Lab, LabContext, LabPalette, LabShell, PITCH_LIMIT, Subpanel, 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