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

package/dist/chunk-LITE5YFB.js

@@ -0,0 +1,669 @@
+import { Toolbar, ZoomControl, ScaleIndicator, FpsMeter, useRovingTabIndex, StatusBar } from './chunk-6JMU56CU.js';
+import { ControlPanel } from './chunk-YQJNT4XQ.js';
+import { b, h2, D, O, B, k, x, A, p, _, v, j, y, n4, o3 } from './chunk-HEORBLVT.js';
+import { SelectIcon, PencilIcon, LineIcon, ArrowIcon, RectIcon, EllipseIcon, TextIcon } from './chunk-ROQDRXKW.js';
+import { createContext, useContext, useState, useId, useRef, useSyncExternalStore, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var AnnotationsContext = createContext(null);
+function useMarkVersion(api) {
+  const version = useRef(0);
+  useSyncExternalStore(
+    useCallback(
+      (fn) => api?.subscribe(() => {
+        version.current += 1;
+        fn();
+      }) ?? (() => {
+      }),
+      [api]
+    ),
+    useCallback(() => version.current, []),
+    () => 0
+  );
+}
+function useAnnotations() {
+  const api = useContext(AnnotationsContext);
+  useMarkVersion(api);
+  if (!api) {
+    throw new Error(
+      "[labkit] useAnnotations requires an instrument that declares the `annotations` capability"
+    );
+  }
+  return api;
+}
+function useAnnotationsOptional() {
+  const api = useContext(AnnotationsContext);
+  useMarkVersion(api);
+  return api;
+}
+var SCALES = [1, 2, 4];
+var FORMATS = [
+  { id: "png", label: "PNG" },
+  { id: "svg", label: "SVG" }
+];
+function fileName(result) {
+  return `${result.target.replace(/[^a-z0-9._-]+/gi, "-")}.${result.format}`;
+}
+function download(result) {
+  const url = URL.createObjectURL(result.blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = fileName(result);
+  a.click();
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+}
+async function copy(result) {
+  if (result.format === "svg") {
+    await navigator.clipboard.writeText(await result.blob.text());
+    return;
+  }
+  await navigator.clipboard.write([new ClipboardItem({ "image/png": result.blob })]);
+}
+function ExportMenu() {
+  const marks = useAnnotationsOptional();
+  const [anchor, setAnchor] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [target, setTarget] = useState(null);
+  const [format, setFormat] = useState("png");
+  const [scale, setScale] = useState(2);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const titleId = useId();
+  if (!marks) return null;
+  const targets = marks.targets();
+  const chosen = target ?? targets[0]?.id ?? null;
+  const run = async (then) => {
+    if (!chosen) return;
+    setBusy(true);
+    setError(null);
+    try {
+      await then(await marks.capture(chosen, { format, scale }));
+      setOpen(false);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs("span", { className: "lk-export", ref: setAnchor, children: [
+    /* @__PURE__ */ jsx(
+      Toolbar.Button,
+      {
+        iconOnly: true,
+        pressed: open,
+        "aria-label": "Export",
+        title: "Export",
+        onClick: () => setOpen((was) => !was),
+        children: /* @__PURE__ */ jsx(b, { size: 16 })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      h2,
+      {
+        triggerRef: { current: anchor },
+        isOpen: open,
+        onOpenChange: setOpen,
+        onDismiss: () => setOpen(false),
+        placement: "bottom end",
+        UNSTABLE_portalContainer: anchor?.closest(".lk-root") ?? void 0,
+        "aria-labelledby": titleId,
+        children: /* @__PURE__ */ jsxs("div", { className: "lk-export__panel", children: [
+          /* @__PURE__ */ jsx("span", { className: "lk-export__title", id: titleId, children: "Export" }),
+          /* @__PURE__ */ jsxs("label", { className: "lk-export__row", children: [
+            /* @__PURE__ */ jsx("span", { children: "Target" }),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                "aria-label": "Target",
+                value: chosen ?? "",
+                onChange: (e) => setTarget(e.target.value),
+                children: targets.map((t) => /* @__PURE__ */ jsx("option", { value: t.id, children: t.id }, t.id))
+              }
+            )
+          ] }),
+          /* @__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((f) => /* @__PURE__ */ jsxs("label", { children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "lk-export-format",
+                  checked: format === f.id,
+                  onChange: () => setFormat(f.id)
+                }
+              ),
+              f.label
+            ] }, f.id)) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "lk-export__row", children: [
+            /* @__PURE__ */ jsx("span", { children: "Scale" }),
+            /* @__PURE__ */ jsx("span", { className: "lk-export__choices", role: "radiogroup", "aria-label": "Scale", children: SCALES.map((s) => /* @__PURE__ */ jsxs("label", { children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  type: "radio",
+                  name: "lk-export-scale",
+                  checked: scale === s,
+                  onChange: () => setScale(s)
+                }
+              ),
+              s,
+              "\xD7"
+            ] }, s)) })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "lk-export__actions", children: [
+            /* @__PURE__ */ jsx("button", { type: "button", disabled: busy || !chosen, onClick: () => run(download), children: "Download" }),
+            /* @__PURE__ */ jsx("button", { type: "button", disabled: busy || !chosen, onClick: () => run(copy), children: "Copy" })
+          ] }),
+          error ? /* @__PURE__ */ jsx("p", { className: "lk-export__error", role: "alert", children: error }) : null
+        ] })
+      }
+    )
+  ] });
+}
+function MarkList({ meaning, config }) {
+  const marks = useAnnotations();
+  const all = marks.query();
+  const statuses = meaning?.statuses ?? [];
+  if (all.length === 0) {
+    return /* @__PURE__ */ jsx("div", { className: "lk-mark-list__empty", children: "No marks yet" });
+  }
+  return /* @__PURE__ */ jsx("ul", { className: "lk-mark-list", children: all.map((a) => {
+    const stale = marks.isStale(a, config);
+    return /* @__PURE__ */ jsxs("li", { className: "lk-mark-list__row", children: [
+      /* @__PURE__ */ jsxs("div", { className: "lk-mark-list__head", children: [
+        /* @__PURE__ */ jsx("span", { className: "lk-mark-list__kind", children: a.kind }),
+        /* @__PURE__ */ jsx("span", { className: "lk-mark-list__target", children: a.target }),
+        stale ? /* @__PURE__ */ jsx("span", { className: "lk-mark-list__stale", children: "stale" }) : null,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "lk-mark-list__drop",
+            "aria-label": `Remove ${a.kind} on ${a.target}`,
+            onClick: () => marks.remove(a.id),
+            children: "\xD7"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          className: "lk-mark-list__title",
+          "aria-label": `Title of ${a.kind} on ${a.target}`,
+          value: a.title ?? "",
+          placeholder: "Untitled",
+          onChange: (e) => marks.update(a.id, { title: e.target.value })
+        }
+      ),
+      statuses.length > 0 ? (
+        // A native select: it carries role, name and keyboard operability
+        // for free, and a sidebar row is not the place to rebuild them.
+        /* @__PURE__ */ jsxs(
+          "select",
+          {
+            className: "lk-mark-list__status",
+            "aria-label": `Status of ${a.kind} on ${a.target}`,
+            value: a.status ?? "",
+            onChange: (e) => marks.update(a.id, { status: e.target.value }),
+            children: [
+              /* @__PURE__ */ jsx("option", { value: "", children: "\u2014" }),
+              statuses.map((s) => /* @__PURE__ */ jsx("option", { value: s.id, children: s.label }, s.id))
+            ]
+          }
+        )
+      ) : null
+    ] }, 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: SelectIcon, group: "annotate" },
+  { id: "stroke", label: "Freehand", icon: PencilIcon, group: "annotate" },
+  { id: "line", label: "Line", icon: LineIcon, group: "annotate" },
+  { id: "arrow", label: "Arrow", icon: ArrowIcon, group: "annotate" },
+  { id: "rect", label: "Rectangle", icon: RectIcon, group: "annotate" },
+  { id: "ellipse", label: "Ellipse", icon: EllipseIcon, group: "annotate" },
+  { id: "text", label: "Text", icon: TextIcon, 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 builtinContributions(instrument, ctx, controls) {
+  const out = [];
+  const zoom = ctx.zoom;
+  if (instrument.undo != null || instrument.annotations != null) {
+    out.push({
+      id: "undo",
+      region: "toolbar",
+      group: "history",
+      item: {
+        icon: D,
+        label: "Undo",
+        shortcut: "Mod+Z",
+        disabled: !ctx.canUndo,
+        onActivate: ctx.undo
+      }
+    });
+    out.push({
+      id: "redo",
+      region: "toolbar",
+      group: "history",
+      item: {
+        icon: O,
+        label: "Redo",
+        shortcut: "Mod+Shift+Z",
+        disabled: !ctx.canRedo,
+        onActivate: ctx.redo
+      }
+    });
+  }
+  const tools = [
+    ...instrument.annotations ? ANNOTATION_TOOLS : [],
+    ...instrument.tools?.tools ?? []
+  ];
+  for (const t of tools) {
+    out.push({
+      id: t.id,
+      region: "palette",
+      group: t.group,
+      item: { icon: t.icon, label: t.label, shortcut: t.shortcut }
+    });
+  }
+  if (instrument.loupe != null) {
+    out.push({
+      id: "loupe",
+      region: "toolbar",
+      group: "view",
+      item: {
+        icon: B,
+        label: "Loupe",
+        pressed: ctx.loupeOn,
+        onActivate: ctx.toggleLoupe
+      }
+    });
+  }
+  if (instrument.canvas != null && zoom !== null) {
+    out.push({
+      id: "zoom-out",
+      region: "viewport",
+      group: "zoom",
+      item: {
+        icon: k,
+        label: "Zoom out",
+        onActivate: () => ctx.setZoom(zoom / ZOOM_STEP)
+      }
+    });
+    out.push({
+      id: "zoom-in",
+      region: "viewport",
+      group: "zoom",
+      item: {
+        icon: x,
+        label: "Zoom in",
+        onActivate: () => ctx.setZoom(zoom * ZOOM_STEP)
+      }
+    });
+    out.push({
+      id: "actual-size",
+      region: "viewport",
+      group: "zoom",
+      item: { icon: A, label: "Actual size", onActivate: () => ctx.setZoom(1) }
+    });
+    out.push({
+      id: "zoom-control",
+      region: "viewport",
+      group: "zoom",
+      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, {})
+    });
+  }
+  if (instrument.annotations != null) {
+    out.push({
+      id: "export",
+      region: "toolbar",
+      group: "trial",
+      end: true,
+      render: () => /* @__PURE__ */ jsx(ExportMenu, {})
+    });
+    out.push({
+      id: "marks",
+      region: "sidebar",
+      item: {
+        title: "Marks",
+        body: /* @__PURE__ */ jsx(MarkList, { meaning: instrument.annotations.meaning, config: ctx.config })
+      }
+    });
+  }
+  if (Object.keys(ctx.configSchema.group.children).length > 0) {
+    out.push({
+      id: "settings",
+      region: "sidebar",
+      item: {
+        title: "Settings",
+        body: /* @__PURE__ */ jsx(
+          ControlPanel,
+          {
+            schema: ctx.configSchema,
+            config: ctx.config,
+            setConfig: (key, value) => ctx.setConfig(String(key), value),
+            renderers: controls
+          }
+        )
+      }
+    });
+  }
+  if (ctx.savedSnapshots.length > 0) {
+    out.push({
+      id: "snapshot-load",
+      region: "toolbar",
+      group: "trial",
+      end: true,
+      render: (c) => /* @__PURE__ */ jsx(
+        p,
+        {
+          className: "lk-toolbar__load-select",
+          "aria-label": "Load snapshot",
+          placeholder: "Load\u2026",
+          selectedKey: null,
+          options: c.savedSnapshots.map((sn) => ({ value: sn.id, label: sn.name })),
+          onSelectionChange: (id) => {
+            if (id != null) c.loadSnapshot(String(id));
+          }
+        }
+      )
+    });
+  }
+  out.push({
+    id: "clone",
+    region: "titlebar",
+    end: true,
+    item: { icon: _, label: "Clone trial", onActivate: ctx.clone }
+  });
+  out.push({
+    id: "reset",
+    region: "titlebar",
+    end: true,
+    item: { icon: v, label: "Reset trial", onActivate: ctx.reset }
+  });
+  out.push({
+    id: "snapshot",
+    region: "titlebar",
+    end: true,
+    item: {
+      icon: j,
+      label: "Save snapshot",
+      shortcut: "Mod+S",
+      onActivate: () => ctx.saveSnapshot()
+    }
+  });
+  out.push({
+    id: "close",
+    region: "titlebar",
+    end: true,
+    item: {
+      icon: y,
+      label: ctx.isLastTrial ? "Cannot close the last trial" : "Close trial",
+      danger: true,
+      disabled: ctx.isLastTrial,
+      onActivate: ctx.close
+    }
+  });
+  return out;
+}
+
+// src/chrome/merge.ts
+function mergeContributions(...bundles) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const bundle of bundles) {
+    for (const entry of bundle) {
+      if (seen.has(entry.id)) {
+        throw new Error(
+          `[labkit] mergeContributions: duplicate contribution id "${entry.id}". Two bundles registered the same id; rename one, or suppress the built-in before adding yours.`
+        );
+      }
+      seen.add(entry.id);
+      out.push(entry);
+    }
+  }
+  return out;
+}
+function suppressContributions(bundle, ids) {
+  const present = new Set(bundle.map((c) => c.id));
+  for (const id of ids) {
+    if (!present.has(id)) {
+      throw new Error(
+        `[labkit] cannot suppress "${id}": no contribution with that id. Present ids: ${[...present].join(", ")}`
+      );
+    }
+  }
+  const drop = new Set(ids);
+  return bundle.filter((c) => !drop.has(c.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(n4, { orientation: "vertical", children: contributions.map((c) => {
+        if (c.render) return /* @__PURE__ */ jsx("span", { children: c.render(ctx) }, c.id);
+        if (c.region !== "palette" || !c.item) return null;
+        const { icon: Icon, label, shortcut, disabled } = c.item;
+        return /* @__PURE__ */ jsx(
+          o3,
+          {
+            icon: /* @__PURE__ */ jsx(Icon, { size: 16 }),
+            label,
+            shortcut,
+            active: ctx.activeToolId === c.id,
+            disabled,
+            onClick: () => ctx.setActiveTool(c.id)
+          },
+          c.id
+        );
+      }) })
+    }
+  );
+}
+function Section({
+  title,
+  defaultCollapsed,
+  onUndock,
+  children
+}) {
+  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  return /* @__PURE__ */ jsxs("section", { className: "lk-sidebar-section", children: [
+    /* @__PURE__ */ jsxs("div", { className: "lk-sidebar-section__bar", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "lk-sidebar-section__head",
+          "aria-expanded": !collapsed,
+          onClick: () => setCollapsed((c) => !c),
+          children: title
+        }
+      ),
+      onUndock ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "lk-sidebar-section__undock",
+          "aria-label": `Undock ${title}`,
+          title: `Undock ${title}`,
+          onClick: onUndock,
+          children: "\u29C9"
+        }
+      ) : null
+    ] }),
+    collapsed ? null : /* @__PURE__ */ jsx("div", { className: "lk-sidebar-section__body", children })
+  ] });
+}
+function SidebarRegion({ contributions, ctx }) {
+  if (contributions.length === 0) return null;
+  return /* @__PURE__ */ jsx(Fragment, { children: contributions.map((c) => {
+    if (c.render) return /* @__PURE__ */ jsx("div", { children: c.render(ctx) }, c.id);
+    if (c.region !== "sidebar" || !c.item) return null;
+    if (ctx.undockedPanels.includes(c.id)) return null;
+    const item = c.item;
+    return /* @__PURE__ */ jsx(
+      Section,
+      {
+        title: item.title,
+        defaultCollapsed: item.defaultCollapsed ?? false,
+        onUndock: item.undockable === false ? void 0 : () => ctx.undockPanel(c.id, item.undockAs ?? "tile"),
+        children: item.body
+      },
+      c.id
+    );
+  }) });
+}
+function StatusRegion({ contributions, ctx }) {
+  if (contributions.length === 0) return null;
+  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 !== "status" || !c.item) return null;
+    return /* @__PURE__ */ jsx(StatusBar.Section, { end: c.end, children: /* @__PURE__ */ jsx("span", { title: c.item.title, children: c.item.text }) }, c.id);
+  }) });
+}
+function renderEntry(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 } = 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: c.item.onActivate,
+      onPointerDown: (e) => e.stopPropagation(),
+      onMouseDown: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ jsx(Icon, { size: 14 })
+    },
+    c.id
+  );
+}
+function TitleBarRegion({ contributions, ctx }) {
+  if (contributions.length === 0) return null;
+  return /* @__PURE__ */ jsx("span", { className: "lk-trial__titlebar-actions", children: contributions.map((c) => renderEntry(c, ctx)) });
+}
+function groupsOf(contributions) {
+  const groups = [];
+  const byKey = /* @__PURE__ */ new Map();
+  for (const c of contributions) {
+    if (c.group == null) {
+      groups.push({ key: c.id, end: c.end ?? false, entries: [c] });
+      continue;
+    }
+    let g = byKey.get(c.group);
+    if (!g) {
+      g = { key: c.group, end: c.end ?? false, entries: [] };
+      byKey.set(c.group, g);
+      groups.push(g);
+    }
+    g.entries.push(c);
+  }
+  return groups;
+}
+function renderEntry2(c, ctx) {
+  if (c.render) return /* @__PURE__ */ jsx("span", { children: c.render(ctx) }, c.id);
+  if (c.region !== "toolbar" || !c.item) return null;
+  const { icon: Icon, label, shortcut, disabled, danger, showLabel, pressed } = c.item;
+  return /* @__PURE__ */ jsxs(
+    Toolbar.Button,
+    {
+      iconOnly: !showLabel,
+      variant: danger ? "danger" : "default",
+      disabled,
+      pressed,
+      "aria-label": label,
+      title: shortcut ? `${label} (${shortcut})` : label,
+      onClick: c.item.onActivate,
+      children: [
+        /* @__PURE__ */ jsx(Icon, { size: 16 }),
+        showLabel ? /* @__PURE__ */ jsx("span", { children: label }) : null
+      ]
+    },
+    c.id
+  );
+}
+function ToolbarRegion({ contributions, ctx }) {
+  if (contributions.length === 0) return null;
+  const groups = groupsOf(contributions);
+  return /* @__PURE__ */ jsx(Toolbar, { "aria-label": "Trial actions", children: groups.map((g) => /* @__PURE__ */ jsx(Toolbar.Group, { end: g.end, "aria-label": g.key, children: g.entries.map((c) => renderEntry2(c, ctx)) }, g.key)) });
+}
+function ViewportRegion({ contributions, ctx }) {
+  const { ref, onKeyDown } = useRovingTabIndex();
+  if (contributions.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: "lk-viewport-controls",
+      role: "toolbar",
+      "aria-label": "View",
+      onKeyDown,
+      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 } = c.item;
+        return /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "lk-viewport-controls__button",
+            "aria-label": label,
+            title: label,
+            disabled,
+            onClick: c.item.onActivate,
+            children: /* @__PURE__ */ jsx(Icon, { size: 16 })
+          },
+          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-LITE5YFB.js.map
+//# sourceMappingURL=chunk-LITE5YFB.js.map