@weasel-js/labkit 1.5.1 → 1.5.2

package/dist/index.js

@@ -7,28 +7,28 @@ import { useTiledSurface } from './chunk-IJJUK4FU.js';
 export { composeRects, rectsEqual, toDeviceRect, useTiledSurface } from './chunk-IJJUK4FU.js';
 import { useJob } from './chunk-HXXTULDN.js';
 export { useJob } from './chunk-HXXTULDN.js';
-import { suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, ViewportRegion, SidebarRegion, StatusRegion, resolveLabTool, AnnotationsContext, useLabChromeContext, labContributions, LabHeaderRegion, LabFooterRegion, LabAsideRegion, LabSidebarRegion } from './chunk-IHUVQ3TX.js';
-export { AnnotationsContext, ExportMenu, LabAsideRegion, LabFooterRegion, LabHeaderRegion, LabSidebarRegion, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, builtinContributions, contributionsIn, labContributions, mergeContributions, suppressContributions, toolContributions, useAnnotations, useAnnotationsOptional, useLabChromeContext } from './chunk-IHUVQ3TX.js';
-import { Split, JobProgress, Sidebar, Legend, FloatingPanel } from './chunk-EHGVROVV.js';
-export { FloatingPanel, JobProgress, Legend, Sidebar, Split } from './chunk-EHGVROVV.js';
-import { Toolbar, StatusBar, ScaleIndicator, ZoomControl } from './chunk-UN4U4P63.js';
-export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-UN4U4P63.js';
-import { unruledConfigSchema, createLabStore, openLabStore, panelKey } from './chunk-IXTQI7JX.js';
-export { CURRENT_DOCUMENT_VERSION, dockPanel, labDocumentKey, openLabStore, panelKey, quarantineKey, undockPanel, useTrialState } from './chunk-IXTQI7JX.js';
+import { suppressContributions, mergeContributions, builtinContributions, TitleBarRegion, ToolbarRegion, PaletteRegion, ViewportRegion, SidebarRegion, StatusRegion, resolveLabTool, AnnotationsContext, useLabChromeContext, labContributions, LabHeaderRegion, LabFooterRegion, LabAsideRegion, LabSidebarRegion } from './chunk-CKUKF72R.js';
+export { AnnotationsContext, ExportMenu, LabAsideRegion, LabFooterRegion, LabHeaderRegion, LabSidebarRegion, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, builtinContributions, contributionsIn, labContributions, mergeContributions, suppressContributions, toolContributions, useAnnotations, useAnnotationsOptional, useLabChromeContext } from './chunk-CKUKF72R.js';
+import { Split, JobProgress, Sidebar, Legend, FloatingPanel } from './chunk-KJCUERQF.js';
+export { FloatingPanel, JobProgress, Legend, Sidebar, Split } from './chunk-KJCUERQF.js';
+import { Toolbar, StatusBar, ScaleIndicator, ZoomControl } from './chunk-753Y6HE6.js';
+export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl } from './chunk-753Y6HE6.js';
+import { unruledConfigSchema, createLabStore, openLabStore, panelKey } from './chunk-LRI3MBGR.js';
+export { CURRENT_DOCUMENT_VERSION, dockPanel, labDocumentKey, openLabStore, panelKey, quarantineKey, undockPanel, useTrialState } from './chunk-LRI3MBGR.js';
 import { newId, useWarnIgnoredChange, useOpenOnce, PersistenceContext, createRecordCache, noneAdapter, defaultStorage, usePersistedState } from './chunk-RWNDDKOH.js';
 export { Persistence, createIndexedDbAdapter, createMemoryAdapter, indexedDbAdapter, localStorageAdapter, noneAdapter, sessionStorageAdapter, urlHashAdapter, usePersistedState } from './chunk-RWNDDKOH.js';
-export { ControlPanel } from './chunk-EH7UEQV7.js';
-import { useConfigSchema } from './chunk-PJ7WEQBJ.js';
-export { useConfigSchema } from './chunk-PJ7WEQBJ.js';
+export { ControlPanel } from './chunk-FKLT3ITC.js';
+import { useConfigSchema } from './chunk-6BUQ77ZV.js';
+export { useConfigSchema } from './chunk-6BUQ77ZV.js';
 import { useLabContext, LabContext } from './chunk-Z76KEZAX.js';
 export { LabContext, useLabContext } from './chunk-Z76KEZAX.js';
-import { useResolvedConfig } from './chunk-ZDHY47EV.js';
-export { BaseNode, BooleanNode, ColorNode, CustomNode, EnumNode, GroupNode, NumberNode, StringNode, ValueNode, applyRules, builtinRules, f, isConfigBranch, resolveConfigSchema, titleCase, useResolvedConfig } from './chunk-ZDHY47EV.js';
-export { fromConfigFields, isLeafVisible } from './chunk-PHK4W562.js';
-import { hasConfigPath, schemaNodeAtPath, applyConfigWrite, resolveAutoConfig, isAuto, isRecord, autoPathsOf, fillConfigDefaults } from './chunk-7PFH3CNM.js';
-export { auto, autoPathsOf, fillConfigDefaults, hasConfigPath, isAuto, resolveAutoConfig, schemaNodeAtPath, valueAtPath, withValueAtPath } from './chunk-7PFH3CNM.js';
-import { CameraWheelContext, as2DView, DEFAULT_VIEW, CanvasStack, Stage, withZoom, fitStage } from './chunk-CEIUBPPW.js';
-export { CanvasStack, DEFAULT_VIEW, PITCH_LIMIT, Stage, as2DView, clampPitch, fitStage, orbitAfterDrag, orbitAfterWheel, useOrbit, usePanZoom, wrapYaw } from './chunk-CEIUBPPW.js';
+import { useResolvedConfig } from './chunk-A2ACAGW6.js';
+export { BaseNode, BooleanNode, ColorNode, CustomNode, EnumNode, GroupNode, NumberNode, StringNode, ValueNode, applyRules, builtinRules, f, isConfigBranch, resolveConfigSchema, titleCase, useResolvedConfig } from './chunk-A2ACAGW6.js';
+export { fromConfigFields, isLeafVisible } from './chunk-EMXAIRUJ.js';
+import { hasConfigPath, schemaNodeAtPath, applyConfigWrite, resolveAutoConfig, isAuto, isRecord, autoPathsOf, fillConfigDefaults } from './chunk-REOBGYMC.js';
+export { auto, autoPathsOf, fillConfigDefaults, hasConfigPath, isAuto, resolveAutoConfig, schemaNodeAtPath, valueAtPath, withValueAtPath } from './chunk-REOBGYMC.js';
+import { CameraWheelContext, as2DView, DEFAULT_VIEW, CanvasStack, Stage, withZoom, fitStage } from './chunk-TT5C5S6R.js';
+export { CanvasStack, DEFAULT_VIEW, Stage, as2DView, fitStage, usePanZoom } from './chunk-TT5C5S6R.js';
 export { centerOn, zoomAt } from './chunk-H6ZAOWNE.js';
 import { applyCamera } from './chunk-2AYGEN57.js';
 export { DEFAULT_FRAME, applyCamera, resolveFrame, screenToWorld, worldToScreen } from './chunk-2AYGEN57.js';
@@ -37,11 +37,11 @@ export { SurfaceCanvasContext, SurfaceContext, useSurface, useSurfaceCanvas, use
 export { CanvasStackContext } from './chunk-CQLQPQ4P.js';
 import { LabStoreContext, TrialIdProvider } from './chunk-2YILQ7Y5.js';
 export { LabStoreContext, LabStoreProvider, TrialIdContext, TrialIdProvider, useLabStore, useTrialId } from './chunk-2YILQ7Y5.js';
-import { LayerList } from './chunk-MDVTK5U3.js';
-export { LayerList } from './chunk-MDVTK5U3.js';
+import { LayerList } from './chunk-D35PFTS7.js';
+export { LayerList } from './chunk-D35PFTS7.js';
 import './chunk-SBXNQW4G.js';
-import { E, w, T, a2, p, u, c, n, f, r, h, serializeSvg, C, l7, r3, a5, Lt, o2, a4, l3, u3, r7, r8, r6, o5, s5, c6, l6, c3, s3, u2, g2, g, y2, l4, b2, c7, r2, l2, C2, S, O, k, F2, L3, V, H, U, B, R2, J, A2, c4, n5, s4, m2, c2, l, g3, l5, S4, r10, n6, r11, i5, i4, s2, n7, o4, r9, c5, w2, L2, n8, k2, $2 } from './chunk-T3EC2DXD.js';
-export { a5 as Button, R2 as CheckboxRow, y as CloseIcon, $ as CollapseIcon, L3 as ColorRow, S2 as CurveField, G2 as EffectCard, q as EffectCardList, te as ExpandIcon, o as Icon, u2 as Input, l9 as Jog, c4 as LayerStack, V as NumberRow, I as PauseIcon, F as PlayIcon, J as PropertyGroup, k as PropertyList, O as PropertyPanel, j2 as PropertyRow, A3 as PropertySpan, v as ResetIcon, g as Select, H as SelectRow, F2 as SliderRow, R as StepBackIcon, z as StepForwardIcon, L as StopIcon, W as Subpanel, B as TextRow, r3 as ToggleBar, U as ToggleRow, q2 as TokenPanel, I2 as inferTokenType } from './chunk-T3EC2DXD.js';
+import { E, w, T, a2, p, u, c, n, f, r, h, serializeSvg, C, l7, r5, a5, Lt, o2, a3, l3, u3, r7, r8, r6, o5, s5, c7, l6, c3, s3, u2, g, b2, y2, l4, b3, c8, r3, l2, C2, S, D, O, I2, z2, U, W, G2, H, B, X, A2, c4, n5, s4, m2, c2, l, g2, l5, S4, r9, n6, r10, i5, i4, s2, n7, o4, c5, c6, w2, L2, n8, k3, $2 } from './chunk-LASCBWW7.js';
+export { a5 as Button, B as CheckboxRow, y as CloseIcon, $ as CollapseIcon, z2 as ColorRow, S2 as CurveField, q as EffectCard, Y as EffectCardList, te as ExpandIcon, o as Icon, u2 as Input, l9 as Jog, c4 as LayerStack, U as NumberRow, I as PauseIcon, F as PlayIcon, X as PropertyGroup, O as PropertyList, D as PropertyPanel, j2 as PropertyRow, k2 as PropertySpan, v as ResetIcon, b2 as Select, W as SelectRow, I2 as SliderRow, R as StepBackIcon, z as StepForwardIcon, L as StopIcon, K as Subpanel, H as TextRow, r5 as ToggleBar, G2 as ToggleRow, oe as TokenPanel, H2 as inferTokenType, O2 as refitScale } from './chunk-LASCBWW7.js';
 import { textCommand, linePath, markerDrawCommands, ellipsePath, rectPath, createScene, asNodeId as asNodeId$1, WeaselProvider, SceneCanvas, sceneFromJSON, PathBuilder, renderSceneToPixels, useActiveToolContext } from '@weasel-js/core';
 import { createContext, useState, useRef, useEffect, useCallback, useContext, useMemo, useId, Children, useLayoutEffect, useSyncExternalStore } from 'react';
 import { flushSync, createPortal } from 'react-dom';
@@ -70,12 +70,12 @@ function vertices(m2, content) {
   ];
 }
 function polyline(points) {
-  const b2 = new PathBuilder();
+  const b3 = 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();
+  b3.moveTo(first.x, first.y);
+  for (const p2 of points.slice(1)) b3.lineTo(p2.x, p2.y);
+  return b3.build();
 }
 function markCommands(m2, content, style = {}) {
   const color = style.color ?? MARK_COLOR;
@@ -94,13 +94,13 @@ function markCommands(m2, content, style = {}) {
     case "ellipse":
       return [{ kind: "path", path: ellipsePath(m2.pose), stroke }];
     case "line": {
-      const [a4, b2] = vertices(m2, content);
-      return [{ kind: "path", path: linePath(a4, b2), stroke }];
+      const [a4, b3] = vertices(m2, content);
+      return [{ kind: "path", path: linePath(a4, b3), stroke }];
     }
     case "arrow": {
-      const [a4, b2] = vertices(m2, content);
+      const [a4, b3] = vertices(m2, content);
       const marked = { ...stroke, markerEnd: "arrow" };
-      const path = linePath(a4, b2);
+      const path = linePath(a4, b3);
       return [
         { kind: "path", path, stroke: marked },
         ...markerDrawCommands(path, marked, MARK_WIDTH, void 0)
@@ -364,10 +364,10 @@ function fracToWorld(f3, content) {
     height: f3.h * content.h
   };
 }
-function worldToFrac(r10, content) {
+function worldToFrac(r9, content) {
   const sx = content.w === 0 ? 0 : 1 / content.w;
   const sy = content.h === 0 ? 0 : 1 / content.h;
-  return { x: r10.x * sx, y: r10.y * sy, w: r10.width * sx, h: r10.height * sy };
+  return { x: r9.x * sx, y: r9.y * sy, w: r9.width * sx, h: r9.height * sy };
 }
 var DP = 1e4;
 function roundFrac(f3) {
@@ -524,15 +524,15 @@ function createAnnotationStore(opts) {
     return out;
   };
   const all = () => liveTargets().flatMap(marksOn);
-  const matches = (a4, q3) => {
-    if (q3.target !== void 0 && a4.target !== q3.target) return false;
-    if (q3.kind !== void 0 && a4.kind !== q3.kind) return false;
-    if (q3.status !== void 0 && a4.status !== q3.status) return false;
-    if (q3.tags !== void 0) {
+  const matches = (a4, q2) => {
+    if (q2.target !== void 0 && a4.target !== q2.target) return false;
+    if (q2.kind !== void 0 && a4.kind !== q2.kind) return false;
+    if (q2.status !== void 0 && a4.status !== q2.status) return false;
+    if (q2.tags !== void 0) {
       const have = a4.tags ?? [];
-      for (const t of q3.tags) if (!have.includes(t)) return false;
+      for (const t of q2.tags) if (!have.includes(t)) return false;
     }
-    if (q3.where && !q3.where(a4)) return false;
+    if (q2.where && !q2.where(a4)) return false;
     return true;
   };
   const nodeOf = (id) => {
@@ -549,8 +549,8 @@ function createAnnotationStore(opts) {
       const parts = splitId(id);
       return parts ? project(parts.target, parts.node) : void 0;
     },
-    query(q3) {
-      return q3 ? all().filter((a4) => matches(a4, q3)) : all();
+    query(q2) {
+      return q2 ? all().filter((a4) => matches(a4, q2)) : all();
     },
     hitTest(target, pt, tol = 0) {
       return marksOn(target).filter((a4) => fracContains(a4.frac, pt, tol)).reverse();
@@ -722,7 +722,7 @@ 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 = (a4, b2) => a4 !== null && a4.x === b2.x && a4.y === b2.y && a4.w === b2.w && a4.h === b2.h;
+var sameRect = (a4, b3) => a4 !== null && a4.x === b3.x && a4.y === b3.y && a4.w === b3.w && a4.h === b3.h;
 function ToolBridge({ toolId }) {
   const tools = useActiveToolContext();
   const setActive = tools.setActive;
@@ -1250,7 +1250,7 @@ function Portalled({
 }
 function UndockedSections({ trialId, sections, onDock }) {
   if (sections.length === 0) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((c8) => /* @__PURE__ */ jsx(Portalled, { trialId, contribution: c8, onDock }, c8.id)) });
+  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((c9) => /* @__PURE__ */ jsx(Portalled, { trialId, contribution: c9, onDock }, c9.id)) });
 }
 var NO_OP = () => {
 };
@@ -1296,9 +1296,9 @@ function TrialChrome({
   const title = record.title ?? instrument.title ?? instrument.name;
   const collapsedSections = record.collapsedSections ?? NO_SECTIONS;
   const ctx = useMemo(() => {
-    const setZoom = (z2) => {
+    const setZoom = (z3) => {
       if (!view2d) return;
-      updateTrialView(trialId, withZoom(view2d, z2));
+      updateTrialView(trialId, withZoom(view2d, z3));
     };
     return {
       trialId,
@@ -1384,7 +1384,7 @@ function TrialChrome({
     ),
     [instrument, ctx, trialChrome, chrome, suppress, lab.controls]
   );
-  const inRegion = (region) => contributions.filter((c8) => c8.region === region);
+  const inRegion = (region) => contributions.filter((c9) => c9.region === region);
   const handleKeyDown = (e) => {
     const mod = e.metaKey || e.ctrlKey;
     if (!mod) return;
@@ -1430,7 +1430,7 @@ function TrialChrome({
                   UndockedSections,
                   {
                     trialId,
-                    sections: inRegion("sidebar").filter((c8) => undockedIds.includes(c8.id)),
+                    sections: inRegion("sidebar").filter((c9) => undockedIds.includes(c9.id)),
                     onDock: ctx.dockPanel
                   }
                 )
@@ -1654,9 +1654,9 @@ function TrialRuntime({
       view: record.view,
       setView,
       zoom: view2d?.zoom ?? 1,
-      setZoom: (z2) => {
+      setZoom: (z3) => {
         if (!view2d) return;
-        updateTrialView(record.id, withZoom(view2d, z2));
+        updateTrialView(record.id, withZoom(view2d, z3));
       },
       activeToolId: resolvedToolId,
       visibleLayers
@@ -1700,7 +1700,7 @@ function TrialRuntime({
   const canvasLayers = useMemo(() => {
     if (!instrument.canvas) return [];
     const baseLayers = instrument.canvas.layers;
-    const ordered = layerOrder ? [...baseLayers].sort((a4, b2) => layerOrder.indexOf(a4.id) - layerOrder.indexOf(b2.id)) : baseLayers;
+    const ordered = layerOrder ? [...baseLayers].sort((a4, b3) => layerOrder.indexOf(a4.id) - layerOrder.indexOf(b3.id)) : baseLayers;
     return ordered.map((layer) => ({
       id: layer.id,
       visible: layerVisibility[layer.id] !== false,
@@ -1747,12 +1747,12 @@ function TrialRuntime({
         render: (ctx) => {
           const el = canvasContainerRef.current;
           if (!el) return;
-          const r10 = el.getBoundingClientRect();
+          const r9 = el.getBoundingClientRect();
           ctx.save();
           ctx.strokeStyle = fb.ok ? "#3a7" : "#c44";
           ctx.lineWidth = 2;
           ctx.beginPath();
-          ctx.arc(screen.x - r10.left, screen.y - r10.top, 16, 0, Math.PI * 2);
+          ctx.arc(screen.x - r9.left, screen.y - r9.top, 16, 0, Math.PI * 2);
           ctx.stroke();
           ctx.restore();
         }
@@ -2012,7 +2012,7 @@ function findOvershoot(bound, items, tolerance = 1) {
   return worst;
 }
 function tagAndClasses(el) {
-  return el.tagName.toLowerCase() + [...el.classList].map((c8) => `.${c8}`).join("");
+  return el.tagName.toLowerCase() + [...el.classList].map((c9) => `.${c9}`).join("");
 }
 function describeElement(el) {
   if (el.classList.length > 0) return tagAndClasses(el);
@@ -2021,8 +2021,8 @@ function describeElement(el) {
   return up ? `${tagAndClasses(el)} in ${tagAndClasses(up)}` : tagAndClasses(el);
 }
 function edgesOf(el) {
-  const r10 = el.getBoundingClientRect();
-  return { top: r10.top, left: r10.left, bottom: r10.bottom, right: r10.right };
+  const r9 = el.getBoundingClientRect();
+  return { top: r9.top, left: r9.left, bottom: r9.bottom, right: r9.right };
 }
 function* candidates(root) {
   yield { item: root, edges: edgesOf(root) };
@@ -2033,24 +2033,24 @@ function overflows(el) {
 }
 function explainLabScroll(lab, shellBody) {
   if (overflows(shellBody)) {
-    const r11 = shellBody.getBoundingClientRect();
+    const r10 = shellBody.getBoundingClientRect();
     const bound2 = {
-      top: r11.top,
-      left: r11.left,
-      bottom: r11.top + shellBody.clientHeight,
-      right: r11.left + shellBody.clientWidth
+      top: r10.top,
+      left: r10.left,
+      bottom: r10.top + shellBody.clientHeight,
+      right: r10.left + shellBody.clientWidth
     };
     const hit2 = findOvershoot(bound2, candidates(shellBody));
     return hit2 ? `.lk-shell-body scrolls: ${describeElement(hit2.item)} reaches ${Math.round(hit2.by)}px past it (${hit2.axis})` : ".lk-shell-body scrolls";
   }
   const doc = document.scrollingElement ?? document.documentElement;
   if (!overflows(doc)) return null;
-  const r10 = lab.getBoundingClientRect();
+  const r9 = lab.getBoundingClientRect();
   const bound = {
-    top: r10.top,
-    left: r10.left,
-    bottom: r10.top + Math.min(r10.height, doc.clientHeight),
-    right: r10.left + Math.min(r10.width, doc.clientWidth)
+    top: r9.top,
+    left: r9.left,
+    bottom: r9.top + Math.min(r9.height, doc.clientHeight),
+    right: r9.left + Math.min(r9.width, doc.clientWidth)
   };
   const hit = findOvershoot(bound, candidates(lab));
   return hit ? `the page scrolls: ${describeElement(hit.item)} reaches ${Math.round(hit.by)}px past the lab's box (${hit.axis})` : null;
@@ -2115,7 +2115,7 @@ function LabHeader({ addTrial: addTrial2 = true }) {
       }
     ),
     /* @__PURE__ */ jsx(
-      r3,
+      r5,
       {
         className: "lk-lab-header__mode",
         ariaLabel: "Color mode",
@@ -2132,7 +2132,7 @@ function LabHeader({ addTrial: addTrial2 = true }) {
 function LabPalette({ tools, contributions }) {
   const ctx = useLabChromeContext();
   const all = labContributions(tools, contributions);
-  return /* @__PURE__ */ jsx(PaletteRegion, { contributions: all.filter((c8) => c8.region === "palette"), ctx });
+  return /* @__PURE__ */ jsx(PaletteRegion, { contributions: all.filter((c9) => c9.region === "palette"), ctx });
 }
 function query() {
   if (typeof window === "undefined" || !window.matchMedia) return null;
@@ -2431,20 +2431,29 @@ async function openStoredLab({ instruments, defaultInstrument, mode }, storageKe
 function LabFallback({
   title,
   mode,
+  density,
   pages,
   path
 }) {
   const resolvedMode = useResolvedMode(mode ?? "auto");
-  return /* @__PURE__ */ jsx(ThemeProvider, { theme: interstellarTheme, selection: { mode: resolvedMode }, className: "lk-lab", children: /* @__PURE__ */ jsx(
-    LabShell,
+  return /* @__PURE__ */ jsx(
+    ThemeProvider,
     {
-      title: title ?? "Labkit",
-      mode,
-      ...pages ? { pages } : {},
-      ...path !== void 0 ? { path } : {},
-      children: null
+      theme: interstellarTheme,
+      selection: { mode: resolvedMode, density: density ?? "comfortable" },
+      className: "lk-lab",
+      children: /* @__PURE__ */ jsx(
+        LabShell,
+        {
+          title: title ?? "Labkit",
+          mode,
+          ...pages ? { pages } : {},
+          ...path !== void 0 ? { path } : {},
+          children: null
+        }
+      )
     }
-  ) });
+  );
 }
 var NEBULA_SLOTS = [
   { cx: "18%", cy: "30%", sx: "60%", sy: "80%", stop: "70%" },
@@ -2454,9 +2463,9 @@ var NEBULA_SLOTS = [
   { cx: "85%", cy: "18%", sx: "55%", sy: "80%", stop: "70%" }
 ];
 function buildNebula(colors) {
-  const blobs = colors.map((c8, i3) => {
+  const blobs = colors.map((c9, i3) => {
     const p2 = NEBULA_SLOTS[i3 % NEBULA_SLOTS.length];
-    return `radial-gradient(ellipse ${p2.sx} ${p2.sy} at ${p2.cx} ${p2.cy}, color-mix(in srgb, ${c8} 22%, transparent), transparent ${p2.stop})`;
+    return `radial-gradient(ellipse ${p2.sx} ${p2.sy} at ${p2.cx} ${p2.cy}, color-mix(in srgb, ${c9} 22%, transparent), transparent ${p2.stop})`;
   });
   blobs.push("radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)");
   return blobs.join(", ");
@@ -2476,7 +2485,7 @@ function LabPanes({
     void 0,
     { scope: "lab" }
   );
-  const main = contributions.some((c8) => c8.region === "aside") ? /* @__PURE__ */ jsx(
+  const main = contributions.some((c9) => c9.region === "aside") ? /* @__PURE__ */ jsx(
     Split,
     {
       className: "lk-lab__panes",
@@ -2494,7 +2503,7 @@ function LabPanes({
       children
     }
   ) : children;
-  if (!contributions.some((c8) => c8.region === "sidebar")) return main;
+  if (!contributions.some((c9) => c9.region === "sidebar")) return main;
   return /* @__PURE__ */ jsx(
     Split,
     {
@@ -2524,13 +2533,23 @@ function Lab(props) {
   );
   if (!opened) {
     if (props.fallback !== void 0) return props.fallback;
-    return /* @__PURE__ */ jsx(LabFallback, { title: props.title, mode: props.mode, pages: props.pages, path: props.path });
+    return /* @__PURE__ */ jsx(
+      LabFallback,
+      {
+        title: props.title,
+        mode: props.mode,
+        density: props.density,
+        pages: props.pages,
+        path: props.path
+      }
+    );
   }
   return /* @__PURE__ */ jsx(LabRuntime, { ...props, opened });
 }
 function LabRuntime({
   instruments,
   mode,
+  density,
   nebula,
   title,
   pages,
@@ -2569,17 +2588,17 @@ function LabRuntime({
   const bufferRef = useRef({ w: 0, h: 0 });
   const surfaceRef = useRef(null);
   const onFrame = useCallback((frame) => {
-    const canvases = [ownUnderRef.current, ownOverRef.current].filter((c8) => c8 !== null);
+    const canvases = [ownUnderRef.current, ownOverRef.current].filter((c9) => c9 !== null);
     if (canvases.length === 0) return;
     const w3 = Math.round(frame.size.width * frame.dpr);
     const h2 = Math.round(frame.size.height * frame.dpr);
     if (bufferRef.current.w !== w3 || bufferRef.current.h !== h2) {
       bufferRef.current = { w: w3, h: h2 };
-      for (const c8 of canvases) {
-        c8.width = w3;
-        c8.height = h2;
-        c8.style.width = `${frame.size.width}px`;
-        c8.style.height = `${frame.size.height}px`;
+      for (const c9 of canvases) {
+        c9.width = w3;
+        c9.height = h2;
+        c9.style.width = `${frame.size.width}px`;
+        c9.style.height = `${frame.size.height}px`;
       }
       surfaceRef.current?.invalidateAll();
       return;
@@ -2643,8 +2662,8 @@ function LabRuntime({
     () => labContributions([...annotates ? ANNOTATION_TOOLS : [], ...tools ?? []], labChrome),
     [annotates, tools, labChrome]
   );
-  const hasFooterChrome = labChromeAll.some((c8) => c8.region === "footer");
-  const hasPaneChrome = labChromeAll.some((c8) => c8.region === "sidebar" || c8.region === "aside");
+  const hasFooterChrome = labChromeAll.some((c9) => c9.region === "footer");
+  const hasPaneChrome = labChromeAll.some((c9) => c9.region === "sidebar" || c9.region === "aside");
   useEffect(() => {
     if (mode && mode !== store.getState().mode) {
       store.getState().setMode(mode);
@@ -2748,7 +2767,7 @@ function LabRuntime({
     ThemeProvider,
     {
       theme: interstellarTheme,
-      selection: { mode: resolvedMode },
+      selection: { mode: resolvedMode, density: density ?? "comfortable" },
       className: "lk-lab",
       style: backdropStyle,
       children: /* @__PURE__ */ jsx(
@@ -2919,7 +2938,7 @@ function ButtonsAndToggles() {
     /* @__PURE__ */ jsx(Cell, { label: "Checkbox, Switch", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__row", children: [
       /* @__PURE__ */ jsx(o2, { isSelected: snap, onChange: setSnap, children: "Snap to grid" }),
       /* @__PURE__ */ jsx(o2, { isIndeterminate: true, children: "Mixed" }),
-      /* @__PURE__ */ jsx(a4, { isSelected: wifi, onChange: setWifi, children: "Wifi" })
+      /* @__PURE__ */ jsx(a3, { isSelected: wifi, onChange: setWifi, children: "Wifi" })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "RadioGroup", children: /* @__PURE__ */ jsxs(l3, { label: "Snap mode", orientation: "horizontal", defaultValue: "grid", children: [
       /* @__PURE__ */ jsx(u3, { value: "off", children: "Off" }),
@@ -2928,7 +2947,7 @@ function ButtonsAndToggles() {
     ] }) }),
     /* @__PURE__ */ jsxs(Cell, { label: "ToggleBar", children: [
       /* @__PURE__ */ jsx(
-        r3,
+        r5,
         {
           ariaLabel: "Align",
           value: align,
@@ -2941,7 +2960,7 @@ function ButtonsAndToggles() {
         }
       ),
       /* @__PURE__ */ jsx(
-        r3,
+        r5,
         {
           ariaLabel: "Align, flat",
           variant: "flat",
@@ -2997,9 +3016,9 @@ function ButtonsAndToggles() {
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "Tabs", children: /* @__PURE__ */ jsxs(o5, { children: [
       /* @__PURE__ */ jsxs(s5, { "aria-label": "Sections", children: [
-        /* @__PURE__ */ jsx(c6, { id: "props", children: "Props" }),
-        /* @__PURE__ */ jsx(c6, { id: "events", children: "Events" }),
-        /* @__PURE__ */ jsx(c6, { id: "snapshot", children: "Snapshot" })
+        /* @__PURE__ */ jsx(c7, { id: "props", children: "Props" }),
+        /* @__PURE__ */ jsx(c7, { id: "events", children: "Events" }),
+        /* @__PURE__ */ jsx(c7, { id: "snapshot", children: "Snapshot" })
       ] }),
       /* @__PURE__ */ jsx(l6, { id: "props", children: "Props panel." }),
       /* @__PURE__ */ jsx(l6, { id: "events", children: "Events panel." }),
@@ -3042,9 +3061,9 @@ function FieldsAndPickers() {
       /* @__PURE__ */ jsx(u2, { label: "Required", isInvalid: true, errorMessage: "Name is required." })
     ] }),
     /* @__PURE__ */ jsxs(Cell, { label: "NumberField, Select, ComboBox", children: [
-      /* @__PURE__ */ jsx(g2, { label: "Opacity", minValue: 0, maxValue: 100, step: 5, defaultValue: 80 }),
+      /* @__PURE__ */ jsx(g, { label: "Opacity", minValue: 0, maxValue: 100, step: 5, defaultValue: 80 }),
       /* @__PURE__ */ jsx(
-        g,
+        b2,
         {
           label: "Color",
           defaultSelectedKey: "g",
@@ -3080,7 +3099,7 @@ function FieldsAndPickers() {
         }
       ),
       /* @__PURE__ */ jsx(
-        b2,
+        b3,
         {
           ariaLabel: "Pair",
           min: 0,
@@ -3095,18 +3114,18 @@ function FieldsAndPickers() {
     ] }),
     /* @__PURE__ */ jsxs(Cell, { label: "DetentSlider, InlineRange", children: [
       /* @__PURE__ */ jsx(
-        c7,
+        c8,
         {
           items: [0.25, 0.5, 1, 2, 4],
           value: rate,
           onChange: setRate,
-          formatLabel: (r10) => `${r10}\xD7`,
+          formatLabel: (r9) => `${r9}\xD7`,
           labels: "all",
           ariaLabel: "Playback rate"
         }
       ),
       /* @__PURE__ */ jsx(
-        r2,
+        r3,
         {
           "aria-label": "Width",
           min: 0,
@@ -3150,9 +3169,9 @@ function PanelsAndRows() {
   ]);
   const [panelCollapsed, setPanelCollapsed] = useState(false);
   return /* @__PURE__ */ jsxs(Section, { title: "Panels & property rows", children: [
-    /* @__PURE__ */ jsx(Cell, { label: "PropertyPanel", children: /* @__PURE__ */ jsx(O, { title: "Shape", children: /* @__PURE__ */ jsxs(k, { children: [
+    /* @__PURE__ */ jsx(Cell, { label: "PropertyPanel", children: /* @__PURE__ */ jsx(D, { title: "Shape", children: /* @__PURE__ */ jsxs(O, { children: [
       /* @__PURE__ */ jsx(
-        F2,
+        I2,
         {
           label: "Opacity",
           value: opacity,
@@ -3163,7 +3182,7 @@ function PanelsAndRows() {
         }
       ),
       /* @__PURE__ */ jsx(
-        F2,
+        I2,
         {
           label: "Radius",
           value: radius,
@@ -3174,7 +3193,7 @@ function PanelsAndRows() {
         }
       ),
       /* @__PURE__ */ jsx(
-        L3,
+        z2,
         {
           label: "Fill",
           value: fill,
@@ -3183,10 +3202,10 @@ function PanelsAndRows() {
           onAlphaChange: setAlpha
         }
       ),
-      /* @__PURE__ */ jsx(L3, { label: "Stroke", value: stroke, onChange: setStroke }),
-      /* @__PURE__ */ jsx(V, { label: "Count", value: count, min: 0, max: 100, step: 1, onChange: setCount }),
+      /* @__PURE__ */ jsx(z2, { label: "Stroke", value: stroke, onChange: setStroke }),
+      /* @__PURE__ */ jsx(U, { label: "Count", value: count, min: 0, max: 100, step: 1, onChange: setCount }),
       /* @__PURE__ */ jsx(
-        H,
+        W,
         {
           label: "Line cap",
           value: cap,
@@ -3198,7 +3217,7 @@ function PanelsAndRows() {
         }
       ),
       /* @__PURE__ */ jsx(
-        U,
+        G2,
         {
           label: "Align",
           value: side,
@@ -3210,9 +3229,9 @@ function PanelsAndRows() {
           ]
         }
       ),
-      /* @__PURE__ */ jsx(B, { label: "Label", value: label, onChange: setLabel }),
-      /* @__PURE__ */ jsx(R2, { label: "Visible", value: visible, onChange: setVisible }),
-      /* @__PURE__ */ jsx(J, { title: "Bevel", defaultCollapsed: true, children: /* @__PURE__ */ jsx(F2, { label: "Rings", value: 32, min: 4, max: 96, step: 1, onChange: () => {
+      /* @__PURE__ */ jsx(H, { label: "Label", value: label, onChange: setLabel }),
+      /* @__PURE__ */ jsx(B, { label: "Visible", value: visible, onChange: setVisible }),
+      /* @__PURE__ */ jsx(X, { title: "Bevel", defaultCollapsed: true, children: /* @__PURE__ */ jsx(I2, { label: "Rings", value: 32, min: 4, max: 96, step: 1, onChange: () => {
       } }) })
     ] }) }) }),
     /* @__PURE__ */ jsx(Cell, { label: "PrefsForm", children: /* @__PURE__ */ jsx(
@@ -3260,7 +3279,7 @@ function OverlaysAndFeedback() {
       ] }),
       /* @__PURE__ */ jsx("button", { type: "button", ref: calloutAnchor, onClick: () => setCalloutOpen(true), children: "Callout" }),
       /* @__PURE__ */ jsx(
-        g3,
+        g2,
         {
           triggerRef: calloutAnchor,
           isOpen: calloutOpen,
@@ -3291,7 +3310,7 @@ function OverlaysAndFeedback() {
       /* @__PURE__ */ jsx(S4, { queue: toasts, placement: "bottom-right" })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "Powerline", children: /* @__PURE__ */ jsx(
-      r10,
+      r9,
       {
         variant: "solid",
         size: "sm",
@@ -3303,10 +3322,10 @@ function OverlaysAndFeedback() {
       }
     ) }),
     /* @__PURE__ */ jsx(Cell, { label: "StatusBar", children: /* @__PURE__ */ jsxs(n6, { ariaLabel: "Editor status", children: [
-      /* @__PURE__ */ jsx(r11, { children: "tool: select" }),
-      /* @__PURE__ */ jsx(r11, { children: "sel: 3" }),
+      /* @__PURE__ */ jsx(r10, { children: "tool: select" }),
+      /* @__PURE__ */ jsx(r10, { children: "sel: 3" }),
       /* @__PURE__ */ jsx(i5, {}),
-      /* @__PURE__ */ jsx(r11, { muted: true, children: "0.7.0" })
+      /* @__PURE__ */ jsx(r10, { muted: true, children: "0.7.0" })
     ] }) })
   ] });
 }
@@ -3332,8 +3351,8 @@ function ListsAndData() {
           { id: "3", name: "danger", count: 2 }
         ],
         columns: [
-          { id: "name", header: "name", accessor: (r10) => r10.name, sortable: true },
-          { id: "count", header: "count", accessor: (r10) => r10.count, sortable: true }
+          { id: "name", header: "name", accessor: (r9) => r9.name, sortable: true },
+          { id: "count", header: "count", accessor: (r9) => r9.count, sortable: true }
         ],
         defaultSort: { columnId: "name", direction: "asc" }
       }
@@ -3356,14 +3375,14 @@ function ToolChrome() {
       },
       id
     )) }) }),
-    /* @__PURE__ */ jsx(Cell, { label: "ToolOptionsBar", children: /* @__PURE__ */ jsxs(r9, { label: "Text", children: [
+    /* @__PURE__ */ jsx(Cell, { label: "ToolOptionsBar", children: /* @__PURE__ */ jsxs(c5, { label: "Text", children: [
       /* @__PURE__ */ jsx(a5, { size: "sm", variant: "ghost", iconOnly: true, ariaLabel: "Bold", children: "B" }),
       /* @__PURE__ */ jsx(a5, { size: "sm", variant: "ghost", iconOnly: true, ariaLabel: "Italic", children: "I" })
     ] }) }),
     /* @__PURE__ */ jsx(Cell, { label: "ResizeHandle", children: /* @__PURE__ */ jsxs("div", { className: "lk-specimen__box", children: [
       /* @__PURE__ */ jsx("div", { className: "lk-specimen__box-main", children: "content" }),
       /* @__PURE__ */ jsx(
-        c5,
+        c6,
         {
           value: paneWidth,
           min: 100,
@@ -3472,7 +3491,7 @@ function EditorsAndPlots() {
       }
     ) }),
     /* @__PURE__ */ jsx(Cell, { label: "BandEditor", wide: true, children: /* @__PURE__ */ jsx(
-      k2,
+      k3,
       {
         min: 1 / 64,
         max: 1 / 2,
@@ -3482,7 +3501,7 @@ function EditorsAndPlots() {
         onChange: setBands,
         selectedIndex: band,
         onSelect: setBand,
-        renderBand: (b2) => b2.data.name,
+        renderBand: (b3) => b3.data.name,
         ticks: [1 / 24, 1 / 12, 1 / 6].map((at) => ({ at, label: `1/${Math.round(1 / at)}` }))
       }
     ) }),