@weasel-js/labkit 1.4.4 → 1.5.1

package/dist/{chunk-64ZCN3DA.js → chunk-IHUVQ3TX.js}

@@ -1,8 +1,12 @@
-import { Toolbar, ZoomControl, ScaleIndicator, FpsMeter, useRovingTabIndex, StatusBar } from './chunk-SMHP6XZ4.js';
-import { ControlPanel } from './chunk-U3IYHIAE.js';
-import { p, u, c, n, f, r2, h, b, g3, u2, A, j, U, M, x, N, g, _, v, P, y, n6, o3 } from './chunk-W3ECWC2K.js';
-import { createContext, useContext, useState, useId, useRef, useSyncExternalStore, useCallback } from 'react';
+import { Toolbar, ZoomControl, ScaleIndicator, FpsMeter, StatusBar, useRovingTabIndex } from './chunk-UN4U4P63.js';
+import { usePersistedState } from './chunk-RWNDDKOH.js';
+import { ControlPanel } from './chunk-EH7UEQV7.js';
+import { useLabContext } from './chunk-Z76KEZAX.js';
+import { LabStoreContext } from './chunk-2YILQ7Y5.js';
+import { b, g3, u2, A, j, G, M, x, N, l7, _, v, P, y, n7, o4 } from './chunk-T3EC2DXD.js';
+import { createContext, useContext, useState, useId, useMemo, useRef, useSyncExternalStore, useCallback } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useStore } from 'zustand/react';
 
 var AnnotationsContext = createContext(null);
 function useMarkVersion(api) {
@@ -121,18 +125,18 @@ function ExportMenu() {
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "lk-export__row", children: [
             /* @__PURE__ */ jsx("span", { children: "Format" }),
-            /* @__PURE__ */ jsx("span", { className: "lk-export__choices", role: "radiogroup", "aria-label": "Format", children: FORMATS.map((f2) => /* @__PURE__ */ jsxs("label", { children: [
+            /* @__PURE__ */ jsx("span", { className: "lk-export__choices", role: "radiogroup", "aria-label": "Format", children: FORMATS.map((f) => /* @__PURE__ */ jsxs("label", { children: [
               /* @__PURE__ */ jsx(
                 "input",
                 {
                   type: "radio",
                   name: "lk-export-format",
-                  checked: format === f2.id,
-                  onChange: () => setFormat(f2.id)
+                  checked: format === f.id,
+                  onChange: () => setFormat(f.id)
                 }
               ),
-              f2.label
-            ] }, f2.id)) })
+              f.label
+            ] }, f.id)) })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "lk-export__row", children: [
             /* @__PURE__ */ jsx("span", { children: "Scale" }),
@@ -215,32 +219,6 @@ function MarkList({ meaning, config }) {
     ] }, a.id);
   }) });
 }
-
-// src/annotations/toolMap.ts
-var TOOLS = {
-  select: { weaselTool: "select" },
-  stroke: { weaselTool: "pencil", kind: "stroke" },
-  line: { weaselTool: "line", kind: "line" },
-  arrow: { weaselTool: "line", kind: "arrow" },
-  rect: { weaselTool: "rect", kind: "rect" },
-  ellipse: { weaselTool: "ellipse", kind: "ellipse" },
-  text: { weaselTool: "text", kind: "text" }
-};
-var ANNOTATION_TOOLS = [
-  { id: "select", label: "Select", icon: p, group: "annotate" },
-  { id: "stroke", label: "Freehand", icon: u, group: "annotate" },
-  { id: "line", label: "Line", icon: c, group: "annotate" },
-  { id: "arrow", label: "Arrow", icon: n, group: "annotate" },
-  { id: "rect", label: "Rectangle", icon: f, group: "annotate" },
-  { id: "ellipse", label: "Ellipse", icon: r2, group: "annotate" },
-  { id: "text", label: "Text", icon: h, group: "annotate" }
-];
-function annotationToolInfo(id) {
-  return id === null ? void 0 : TOOLS[id];
-}
-var ANNOTATION_WEASEL_TOOLS = [
-  ...new Set(Object.values(TOOLS).map((t) => t.weaselTool))
-];
 var ZOOM_STEP = 1.25;
 function groupFolds(collapsedSections, id) {
   const prefix = `${id}/`;
@@ -279,11 +257,7 @@ function builtinContributions(instrument, ctx, controls) {
       }
     });
   }
-  const tools = [
-    ...instrument.annotations ? ANNOTATION_TOOLS : [],
-    ...instrument.tools?.tools ?? []
-  ];
-  for (const t of tools) {
+  for (const t of instrument.tools?.tools ?? []) {
     out.push({
       id: t.id,
       region: "palette",
@@ -297,14 +271,14 @@ function builtinContributions(instrument, ctx, controls) {
       region: "toolbar",
       group: "view",
       item: {
-        icon: U,
+        icon: G,
         label: "Loupe",
         pressed: ctx.loupeOn,
         onActivate: ctx.toggleLoupe
       }
     });
   }
-  if (instrument.canvas != null && zoom !== null) {
+  if ((instrument.canvas != null || instrument.stage != null) && zoom !== null) {
     out.push({
       id: "zoom-out",
       region: "viewport",
@@ -335,21 +309,23 @@ function builtinContributions(instrument, ctx, controls) {
       id: "zoom-control",
       region: "viewport",
       group: "zoom",
-      render: (c2) => /* @__PURE__ */ jsx(ZoomControl, { zoom: c2.zoom ?? 1, onZoomChange: c2.setZoom })
+      render: (c) => /* @__PURE__ */ jsx(ZoomControl, { zoom: c.zoom ?? 1, onZoomChange: c.setZoom })
     });
     out.push({
       id: "scale",
       region: "status",
       group: "view",
-      render: () => /* @__PURE__ */ jsx(ScaleIndicator, {})
-    });
-    out.push({
-      id: "fps",
-      region: "status",
-      group: "view",
-      end: true,
-      render: () => /* @__PURE__ */ jsx(FpsMeter, {})
+      render: (c) => /* @__PURE__ */ jsx(ScaleIndicator, { zoom: c.zoom ?? 1 })
     });
+    if (instrument.canvas != null) {
+      out.push({
+        id: "fps",
+        region: "status",
+        group: "view",
+        end: true,
+        render: () => /* @__PURE__ */ jsx(FpsMeter, {})
+      });
+    }
   }
   if (instrument.annotations != null) {
     out.push({
@@ -379,6 +355,7 @@ function builtinContributions(instrument, ctx, controls) {
           {
             schema: ctx.configSchema,
             config: ctx.config,
+            auto: ctx.auto,
             setConfig: (key, value) => ctx.setConfig(String(key), value),
             renderers: controls,
             collapsed: groupFolds(ctx.collapsedSections, "settings"),
@@ -394,17 +371,13 @@ function builtinContributions(instrument, ctx, controls) {
       region: "toolbar",
       group: "trial",
       end: true,
-      render: (c2) => /* @__PURE__ */ jsx(
-        g,
+      render: (c) => /* @__PURE__ */ jsx(
+        l7,
         {
-          className: "lk-toolbar__load-select",
           "aria-label": "Load snapshot",
-          placeholder: "Load\u2026",
-          selectedKey: null,
-          options: c2.savedSnapshots.map((sn) => ({ value: sn.id, label: sn.name })),
-          onSelectionChange: (id) => {
-            if (id != null) c2.loadSnapshot(String(id));
-          }
+          label: "Load\u2026",
+          items: c.savedSnapshots.map((sn) => ({ value: sn.id, label: sn.name })),
+          onAction: (id) => c.loadSnapshot(id)
         }
       )
     });
@@ -447,6 +420,12 @@ function builtinContributions(instrument, ctx, controls) {
   return out;
 }
 
+// src/tools/labTool.ts
+function resolveLabTool(slot, instruments) {
+  if (slot !== null) return slot;
+  return instruments.some((i) => i.annotations != null) ? "pointer" : null;
+}
+
 // src/chrome/merge.ts
 function mergeContributions(...bundles) {
   const out = [];
@@ -465,7 +444,7 @@ function mergeContributions(...bundles) {
   return out;
 }
 function suppressContributions(bundle, ids) {
-  const present = new Set(bundle.map((c2) => c2.id));
+  const present = new Set(bundle.map((c) => c.id));
   for (const id of ids) {
     if (!present.has(id)) {
       throw new Error(
@@ -474,39 +453,7 @@ function suppressContributions(bundle, ids) {
     }
   }
   const drop = new Set(ids);
-  return bundle.filter((c2) => !drop.has(c2.id));
-}
-function PaletteRegion({ contributions, ctx }) {
-  const { ref, onKeyDown } = useRovingTabIndex("vertical");
-  if (contributions.length === 0) return null;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: "lk-palette-region",
-      role: "toolbar",
-      "aria-label": "Tools",
-      "aria-orientation": "vertical",
-      onKeyDown,
-      children: /* @__PURE__ */ jsx(n6, { orientation: "vertical", children: contributions.map((c2) => {
-        if (c2.render) return /* @__PURE__ */ jsx("span", { children: c2.render(ctx) }, c2.id);
-        if (c2.region !== "palette" || !c2.item) return null;
-        const { icon: Icon, label, shortcut, disabled } = c2.item;
-        return /* @__PURE__ */ jsx(
-          o3,
-          {
-            icon: /* @__PURE__ */ jsx(Icon, { size: 16 }),
-            label,
-            shortcut,
-            active: ctx.activeToolId === c2.id,
-            disabled,
-            onClick: () => ctx.setActiveTool(c2.id)
-          },
-          c2.id
-        );
-      }) })
-    }
-  );
+  return bundle.filter((c) => !drop.has(c.id));
 }
 function Section({
   title,
@@ -542,83 +489,75 @@ function Section({
     collapsed ? null : /* @__PURE__ */ jsx("div", { className: "lk-sidebar-section__body", children })
   ] });
 }
-function SidebarRegion({ contributions, ctx }) {
+function SidebarRegion({
+  contributions,
+  ctx,
+  region = "sidebar"
+}) {
   if (contributions.length === 0) return null;
-  return /* @__PURE__ */ jsx(Fragment, { children: contributions.map((c2) => {
-    if (c2.render) return /* @__PURE__ */ jsx("div", { children: c2.render(ctx) }, c2.id);
-    if (c2.region !== "sidebar" || !c2.item) return null;
-    if (ctx.undockedPanels.includes(c2.id)) return null;
-    const item = c2.item;
+  return /* @__PURE__ */ jsx(Fragment, { children: contributions.map((c) => {
+    if (c.render) return /* @__PURE__ */ jsx("div", { children: c.render(ctx) }, c.id);
+    if (c.region !== region || !c.item) return null;
+    if (ctx.undockedPanels?.includes(c.id)) return null;
+    const item = c.item;
     return /* @__PURE__ */ jsx(
       Section,
       {
         title: item.title,
-        collapsed: ctx.collapsedSections[c2.id] ?? item.defaultCollapsed ?? false,
-        onCollapsedChange: (next) => ctx.setSectionCollapsed(c2.id, next),
-        onUndock: item.undockable === false ? void 0 : () => ctx.undockPanel(c2.id, item.undockAs ?? "tile"),
+        collapsed: ctx.collapsedSections[c.id] ?? item.defaultCollapsed ?? false,
+        onCollapsedChange: (next) => ctx.setSectionCollapsed(c.id, next),
+        onUndock: ctx.undockPanel && item.undockable !== false ? () => ctx.undockPanel?.(c.id, item.undockAs ?? "tile") : void 0,
         children: item.body
       },
-      c2.id
+      c.id
     );
   }) });
 }
-function StatusRegion({ contributions, ctx }) {
+function StatusRegion({
+  contributions,
+  ctx,
+  region = "status"
+}) {
   if (contributions.length === 0) return null;
-  return /* @__PURE__ */ jsx(StatusBar, { children: contributions.map((c2) => {
-    if (c2.render)
-      return /* @__PURE__ */ jsx(StatusBar.Section, { end: c2.end, children: c2.render(ctx) }, c2.id);
-    if (c2.region !== "status" || !c2.item) return null;
-    return /* @__PURE__ */ jsx(StatusBar.Section, { end: c2.end, children: /* @__PURE__ */ jsx("span", { title: c2.item.title, children: c2.item.text }) }, c2.id);
+  return /* @__PURE__ */ jsx(StatusBar, { children: contributions.map((c) => {
+    if (c.render)
+      return /* @__PURE__ */ jsx(StatusBar.Section, { end: c.end, children: c.render(ctx) }, c.id);
+    if (c.region !== region || !c.item) return null;
+    const item = c.item;
+    return /* @__PURE__ */ jsx(StatusBar.Section, { end: c.end, children: /* @__PURE__ */ jsx("span", { title: item.title, children: item.text }) }, c.id);
   }) });
 }
-function renderEntry(c2, ctx) {
-  if (c2.render) return /* @__PURE__ */ jsx("span", { children: c2.render(ctx) }, c2.id);
-  if (c2.region !== "titlebar" || !c2.item) return null;
-  const { icon: Icon, label, shortcut, disabled, danger, onActivate } = c2.item;
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      className: `lk-titlebar-button${danger ? " lk-titlebar-button--danger" : ""}`,
-      disabled,
-      "aria-label": label,
-      title: shortcut ? `${label} (${shortcut})` : label,
-      onClick: () => onActivate(ctx),
-      onPointerDown: (e) => e.stopPropagation(),
-      onMouseDown: (e) => e.stopPropagation(),
-      children: /* @__PURE__ */ jsx(Icon, { size: 14 })
-    },
-    c2.id
-  );
-}
-function TitleBarRegion({ contributions, ctx, placement = "actions" }) {
-  const wanted = placement === "actions";
-  const mine = contributions.filter((c2) => (c2.end ?? false) === wanted);
-  if (mine.length === 0) return null;
-  return /* @__PURE__ */ jsx("span", { className: wanted ? "lk-trial__titlebar-actions" : "lk-trial__titlebar-lead", children: mine.map((c2) => renderEntry(c2, ctx)) });
-}
 function groupsOf(contributions) {
   const groups = [];
   const byKey = /* @__PURE__ */ new Map();
-  for (const c2 of contributions) {
-    if (c2.group == null) {
-      groups.push({ key: c2.id, end: c2.end ?? false, entries: [c2] });
+  for (const c of contributions) {
+    if (c.group == null) {
+      groups.push({ key: c.id, end: c.end ?? false, entries: [c] });
       continue;
     }
-    let g3 = byKey.get(c2.group);
-    if (!g3) {
-      g3 = { key: c2.group, end: c2.end ?? false, entries: [] };
-      byKey.set(c2.group, g3);
-      groups.push(g3);
+    let g2 = byKey.get(c.group);
+    if (!g2) {
+      g2 = { key: c.group, end: c.end ?? false, entries: [] };
+      byKey.set(c.group, g2);
+      groups.push(g2);
     }
-    g3.entries.push(c2);
+    g2.entries.push(c);
   }
   return groups;
 }
-function renderEntry2(c2, ctx) {
-  if (c2.render) return /* @__PURE__ */ jsx("span", { children: c2.render(ctx) }, c2.id);
-  if (c2.region !== "toolbar" || !c2.item) return null;
-  const { icon: Icon, label, shortcut, disabled, danger, showLabel, pressed, onActivate } = c2.item;
+function renderEntry(c, ctx, region) {
+  if (c.render) return /* @__PURE__ */ jsx("span", { children: c.render(ctx) }, c.id);
+  if (c.region !== region || !c.item) return null;
+  const {
+    icon: Icon,
+    label,
+    shortcut,
+    disabled,
+    danger,
+    showLabel,
+    pressed,
+    onActivate
+  } = c.item;
   return /* @__PURE__ */ jsxs(
     Toolbar.Button,
     {
@@ -634,13 +573,164 @@ function renderEntry2(c2, ctx) {
         showLabel ? /* @__PURE__ */ jsx("span", { children: label }) : null
       ]
     },
-    c2.id
+    c.id
   );
 }
-function ToolbarRegion({ contributions, ctx }) {
+function ToolbarRegion({
+  contributions,
+  ctx,
+  region = "toolbar",
+  label = "Trial actions"
+}) {
   if (contributions.length === 0) return null;
   const groups = groupsOf(contributions);
-  return /* @__PURE__ */ jsx(Toolbar, { "aria-label": "Trial actions", children: groups.map((g3) => /* @__PURE__ */ jsx(Toolbar.Group, { end: g3.end, "aria-label": g3.key, children: g3.entries.map((c2) => renderEntry2(c2, ctx)) }, g3.key)) });
+  return /* @__PURE__ */ jsx(Toolbar, { "aria-label": label, children: groups.map((g2) => /* @__PURE__ */ jsx(Toolbar.Group, { end: g2.end, "aria-label": g2.key, children: g2.entries.map((c) => renderEntry(c, ctx, region)) }, g2.key)) });
+}
+function useLabChromeContext() {
+  const lab = useLabContext();
+  const storeCtx = useContext(LabStoreContext);
+  if (!storeCtx) throw new Error("[labkit] lab chrome requires <LabStoreProvider>");
+  const slot = useStore(storeCtx.store, (s) => s.activeToolId);
+  const storeInstruments = useStore(storeCtx.store, (s) => s.instruments);
+  const activeToolId = resolveLabTool(slot, storeInstruments ?? lab.instruments);
+  const setLabTool = useStore(storeCtx.store, (s) => s.setLabTool);
+  return useMemo(
+    () => ({ ...lab, activeToolId, setActiveTool: setLabTool }),
+    [lab, activeToolId, setLabTool]
+  );
+}
+function contributionsIn(contributions, region) {
+  return contributions.filter((c) => c.region === region);
+}
+function toolContributions(tools) {
+  return tools.map((t) => ({
+    id: t.id,
+    region: "palette",
+    ...t.group === void 0 ? {} : { group: t.group },
+    item: {
+      icon: t.icon,
+      label: t.label,
+      ...t.shortcut === void 0 ? {} : { shortcut: t.shortcut }
+    }
+  }));
+}
+function labContributions(tools, chrome) {
+  return mergeContributions(toolContributions(tools ?? []), [...chrome ?? []]);
+}
+function LabHeaderRegion({ contributions }) {
+  const ctx = useLabChromeContext();
+  return /* @__PURE__ */ jsx(
+    ToolbarRegion,
+    {
+      region: "header",
+      label: "Lab actions",
+      contributions: contributionsIn(contributions, "header"),
+      ctx
+    }
+  );
+}
+function LabSections({ contributions, region }) {
+  const lab = useLabChromeContext();
+  const [collapsedSections, setFolds] = usePersistedState(
+    `lk-lab-${region}-folds`,
+    {},
+    { scope: "lab" }
+  );
+  const ctx = useMemo(
+    () => ({
+      ...lab,
+      collapsedSections,
+      setSectionCollapsed: (key, collapsed) => setFolds((f) => ({ ...f, [key]: collapsed }))
+    }),
+    [lab, collapsedSections, setFolds]
+  );
+  return /* @__PURE__ */ jsx(
+    SidebarRegion,
+    {
+      contributions: contributionsIn(contributions, region),
+      ctx,
+      region
+    }
+  );
+}
+function LabSidebarRegion({ contributions }) {
+  return /* @__PURE__ */ jsx(LabSections, { contributions, region: "sidebar" });
+}
+function LabAsideRegion({ contributions }) {
+  return /* @__PURE__ */ jsx(LabSections, { contributions, region: "aside" });
+}
+function LabFooterRegion({ contributions }) {
+  const ctx = useLabChromeContext();
+  return /* @__PURE__ */ jsx(
+    StatusRegion,
+    {
+      region: "footer",
+      contributions: contributionsIn(contributions, "footer"),
+      ctx
+    }
+  );
+}
+function PaletteRegion({
+  contributions,
+  ctx,
+  region = "palette"
+}) {
+  const { ref, onKeyDown } = useRovingTabIndex("vertical");
+  if (contributions.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: "lk-palette-region",
+      role: "toolbar",
+      "aria-label": "Tools",
+      "aria-orientation": "vertical",
+      onKeyDown,
+      children: /* @__PURE__ */ jsx(n7, { orientation: "vertical", children: contributions.map((c) => {
+        if (c.render) return /* @__PURE__ */ jsx("span", { children: c.render(ctx) }, c.id);
+        if (c.region !== region || !c.item) return null;
+        const { icon: Icon, label, shortcut, disabled } = c.item;
+        return /* @__PURE__ */ jsx(
+          o4,
+          {
+            icon: /* @__PURE__ */ jsx(Icon, { size: 16 }),
+            label,
+            shortcut,
+            active: ctx.activeToolId === c.id,
+            disabled,
+            onClick: () => ctx.setActiveTool(c.id)
+          },
+          c.id
+        );
+      }) })
+    }
+  );
+}
+function renderEntry2(c, ctx) {
+  if (c.render) return /* @__PURE__ */ jsx("span", { children: c.render(ctx) }, c.id);
+  if (c.region !== "titlebar" || !c.item) return null;
+  const { icon: Icon, label, shortcut, disabled, danger, onActivate } = c.item;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: `lk-titlebar-button${danger ? " lk-titlebar-button--danger" : ""}`,
+      disabled,
+      "aria-label": label,
+      title: shortcut ? `${label} (${shortcut})` : label,
+      onClick: () => onActivate(ctx),
+      onPointerDown: (e) => e.stopPropagation(),
+      onMouseDown: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsx(Icon, { size: 14 })
+    },
+    c.id
+  );
+}
+function TitleBarRegion({ contributions, ctx, placement = "actions" }) {
+  const wanted = placement === "actions";
+  const mine = contributions.filter((c) => (c.end ?? false) === wanted);
+  if (mine.length === 0) return null;
+  return /* @__PURE__ */ jsx("span", { className: wanted ? "lk-trial__titlebar-actions" : "lk-trial__titlebar-lead", children: mine.map((c) => renderEntry2(c, ctx)) });
 }
 function ViewportRegion({ contributions, ctx }) {
   const { ref, onKeyDown } = useRovingTabIndex();
@@ -653,10 +743,10 @@ function ViewportRegion({ contributions, ctx }) {
       role: "toolbar",
       "aria-label": "View",
       onKeyDown,
-      children: contributions.map((c2) => {
-        if (c2.render) return /* @__PURE__ */ jsx("span", { children: c2.render(ctx) }, c2.id);
-        if (c2.region !== "viewport" || !c2.item) return null;
-        const { icon: Icon, label, disabled, onActivate } = c2.item;
+      children: contributions.map((c) => {
+        if (c.render) return /* @__PURE__ */ jsx("span", { children: c.render(ctx) }, c.id);
+        if (c.region !== "viewport" || !c.item) return null;
+        const { icon: Icon, label, disabled, onActivate } = c.item;
         return /* @__PURE__ */ jsx(
           "button",
           {
@@ -668,13 +758,13 @@ function ViewportRegion({ contributions, ctx }) {
             onClick: () => onActivate(ctx),
             children: /* @__PURE__ */ jsx(Icon, { size: 16 })
           },
-          c2.id
+          c.id
         );
       })
     }
   );
 }
 
-export { ANNOTATION_TOOLS, ANNOTATION_WEASEL_TOOLS, AnnotationsContext, ExportMenu, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, annotationToolInfo, builtinContributions, mergeContributions, suppressContributions, useAnnotations, useAnnotationsOptional };
-//# sourceMappingURL=chunk-64ZCN3DA.js.map
-//# sourceMappingURL=chunk-64ZCN3DA.js.map
+export { AnnotationsContext, ExportMenu, LabAsideRegion, LabFooterRegion, LabHeaderRegion, LabSidebarRegion, MarkList, PaletteRegion, SidebarRegion, StatusRegion, TitleBarRegion, ToolbarRegion, ViewportRegion, builtinContributions, contributionsIn, labContributions, mergeContributions, resolveLabTool, suppressContributions, toolContributions, useAnnotations, useAnnotationsOptional, useLabChromeContext };
+//# sourceMappingURL=chunk-IHUVQ3TX.js.map
+//# sourceMappingURL=chunk-IHUVQ3TX.js.map