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

package/dist/{chunk-3XXPU73K.js → chunk-5TCEVMPI.js}

@@ -1,5 +1,5 @@
-import { screenToWorld } from './chunk-T66HU3HX.js';
-import { useVisibleRaf } from './chunk-QCICIHEO.js';
+import { resolveFrame, screenToWorld } from './chunk-2AYGEN57.js';
+import { useVisibleRaf } from './chunk-ROQDRXKW.js';
 import { useState, useEffect, useRef, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { jsx } from 'react/jsx-runtime';
@@ -24,7 +24,8 @@ function useDragDrop({
   state,
   config,
   setState,
-  emit
+  emit,
+  worldSpec
 }) {
   const [drag, setDrag] = useState(null);
   const dragRef = useRef(null);
@@ -44,9 +45,10 @@ function useDragDrop({
       const el = canvasContainerRef.current;
       if (!el) return null;
       const r = el.getBoundingClientRect();
-      return screenToWorld({ x: screenPos.x - r.left, y: screenPos.y - r.top }, view);
+      const frame = resolveFrame(worldSpec, { width: r.width, height: r.height });
+      return screenToWorld({ x: screenPos.x - r.left, y: screenPos.y - r.top }, view, frame);
     },
-    [canvasContainerRef, view]
+    [canvasContainerRef, view, worldSpec]
   );
   const frameLoop = useVisibleRaf(() => {
     const screenPos = pendingPos.current;
@@ -134,5 +136,5 @@ function Palette({ items, onDragStart, className }) {
 }
 
 export { DragGhost, DragOverlay, Palette, useDragDrop };
-//# sourceMappingURL=chunk-3XXPU73K.js.map
-//# sourceMappingURL=chunk-3XXPU73K.js.map
+//# sourceMappingURL=chunk-5TCEVMPI.js.map
+//# sourceMappingURL=chunk-5TCEVMPI.js.map

package/dist/chunk-5TCEVMPI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/dragdrop/DragGhost.tsx","../src/dragdrop/DragDropRuntime.tsx","../src/dragdrop/Palette.tsx"],"names":["useState","useEffect","jsx"],"mappings":"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","file":"chunk-5TCEVMPI.js","sourcesContent":["import { type ReactPortal, useEffect, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport type { PaletteItem, Point } from '../instrument/types';\n\nexport interface DragGhostProps {\n  item: PaletteItem;\n  screenPos: Point;\n}\n\nexport function DragGhost({ item, screenPos }: DragGhostProps): ReactPortal | null {\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => setMounted(true), []);\n  if (!mounted || typeof document === 'undefined') return null;\n  const style = {\n    left: `${screenPos.x + 12}px`,\n    top: `${screenPos.y + 12}px`,\n  };\n  return createPortal(\n    <div className=\"lk-drag-ghost\" style={style}>\n      <span className=\"lk-drag-ghost__label\">{item.label}</span>\n    </div>,\n    document.body,\n  );\n}\n","import { useVisibleRaf } from '@weasel-js/core';\nimport { type RefObject, useCallback, useEffect, useRef, useState } from 'react';\nimport { screenToWorld } from '../canvas/canvasCoords';\nimport { resolveFrame, type WorldSpec } from '../canvas/worldSpec';\nimport type {\n  DragDropCapability,\n  DragFeedback,\n  PaletteItem,\n  Point,\n  ViewTransform,\n} from '../instrument/types';\nimport { DragGhost } from './DragGhost';\n\nexport interface DragState {\n  item: PaletteItem;\n  screenPos: Point;\n  feedback: DragFeedback | null;\n}\n\nexport interface UseDragDropArgs<TS, TC> {\n  capability: DragDropCapability<TS, TC>;\n  canvasContainerRef: RefObject<HTMLElement | null>;\n  view: ViewTransform;\n  /** The instrument's coordinate system, resolved against the container each\n   *  time a screen point is converted — the container is what knows its size. */\n  worldSpec?: WorldSpec;\n  state: TS;\n  config: TC;\n  setState: (next: TS | ((prev: TS) => TS)) => void;\n  emit: (event: string) => void;\n}\n\nexport interface UseDragDropResult {\n  drag: DragState | null;\n  startDrag: (item: PaletteItem, originScreenPos: Point) => void;\n}\n\nexport function useDragDrop<TS, TC>({\n  capability,\n  canvasContainerRef,\n  view,\n  state,\n  config,\n  setState,\n  emit,\n  worldSpec,\n}: UseDragDropArgs<TS, TC>): UseDragDropResult {\n  const [drag, setDrag] = useState<DragState | null>(null);\n  const dragRef = useRef<DragState | null>(null);\n  dragRef.current = drag;\n  /** The move the next frame will resolve. Doubles as the throttle's flag:\n   *  non-null means a frame is already queued. */\n  const pendingPos = useRef<Point | null>(null);\n\n  const isOverCanvas = useCallback(\n    (screenPos: Point): boolean => {\n      const el = canvasContainerRef.current;\n      if (!el) return false;\n      const r = el.getBoundingClientRect();\n      return (\n        screenPos.x >= r.left &&\n        screenPos.x <= r.right &&\n        screenPos.y >= r.top &&\n        screenPos.y <= r.bottom\n      );\n    },\n    [canvasContainerRef],\n  );\n\n  const screenToWorldFromContainer = useCallback(\n    (screenPos: Point): Point | null => {\n      const el = canvasContainerRef.current;\n      if (!el) return null;\n      const r = el.getBoundingClientRect();\n      const frame = resolveFrame(worldSpec, { width: r.width, height: r.height });\n      return screenToWorld({ x: screenPos.x - r.left, y: screenPos.y - r.top }, view, frame);\n    },\n    [canvasContainerRef, view, worldSpec],\n  );\n\n  const frameLoop = useVisibleRaf(() => {\n    const screenPos = pendingPos.current;\n    pendingPos.current = null;\n    const active = dragRef.current;\n    if (!active || !screenPos) return;\n    let feedback: DragFeedback | null = null;\n    if (capability.onDragOver && isOverCanvas(screenPos)) {\n      const world = screenToWorldFromContainer(screenPos);\n      if (world) feedback = capability.onDragOver(world, active.item, state, config);\n    }\n    setDrag({ ...active, screenPos, feedback });\n  });\n\n  useEffect(() => {\n    if (!drag) return;\n    const handleMove = (e: PointerEvent) => {\n      const screenPos = { x: e.clientX, y: e.clientY };\n      const current = dragRef.current;\n      if (!current) return;\n      if (pendingPos.current !== null) {\n        // A frame is already queued: keep the ghost under the cursor and let\n        // that frame probe the drop target from the newest position.\n        pendingPos.current = screenPos;\n        dragRef.current = { ...current, screenPos };\n        setDrag(dragRef.current);\n        return;\n      }\n      pendingPos.current = screenPos;\n      frameLoop.request();\n    };\n    const handleUp = (e: PointerEvent) => {\n      const screenPos = { x: e.clientX, y: e.clientY };\n      const active = dragRef.current;\n      if (!active) return;\n      pendingPos.current = null;\n      frameLoop.cancel();\n      if (isOverCanvas(screenPos)) {\n        const world = screenToWorldFromContainer(screenPos);\n        if (world) {\n          const nextState = capability.onDrop(world, active.item, state, config);\n          setState(nextState);\n          emit('canvas.itemAdded');\n        }\n      }\n      setDrag(null);\n    };\n    window.addEventListener('pointermove', handleMove);\n    window.addEventListener('pointerup', handleUp);\n    return () => {\n      window.removeEventListener('pointermove', handleMove);\n      window.removeEventListener('pointerup', handleUp);\n    };\n  }, [\n    drag,\n    capability,\n    state,\n    config,\n    setState,\n    emit,\n    frameLoop,\n    isOverCanvas,\n    screenToWorldFromContainer,\n  ]);\n\n  const startDrag = useCallback((item: PaletteItem, originScreenPos: Point) => {\n    setDrag({ item, screenPos: originScreenPos, feedback: null });\n  }, []);\n\n  return { drag, startDrag };\n}\n\nexport interface DragOverlayProps {\n  drag: DragState | null;\n}\n\nexport function DragOverlay({ drag }: DragOverlayProps) {\n  if (!drag) return null;\n  return <DragGhost item={drag.item} screenPos={drag.screenPos} />;\n}\n","import type { PaletteItem, Point } from '../instrument/types';\n\nexport interface PaletteProps {\n  items: PaletteItem[];\n  onDragStart: (item: PaletteItem, originScreenPos: Point) => void;\n  className?: string;\n}\n\nexport function Palette({ items, onDragStart, className }: PaletteProps) {\n  return (\n    <div className={className ? `lk-palette ${className}` : 'lk-palette'}>\n      {items.map((item) => (\n        <button\n          type=\"button\"\n          key={item.id}\n          className=\"lk-palette__item\"\n          onPointerDown={(e) => {\n            e.preventDefault();\n            onDragStart(item, { x: e.clientX, y: e.clientY });\n          }}\n        >\n          <span className=\"lk-palette__label\">{item.label}</span>\n        </button>\n      ))}\n    </div>\n  );\n}\n"]}

package/dist/{chunk-JDROYQM3.js → chunk-6JMU56CU.js}

@@ -1,9 +1,131 @@
-import { CanvasStackContext } from './chunk-CPUJ3QXL.js';
-import { _, f } from './chunk-RGT4EJIB.js';
-import { useVisibleRaf } from './chunk-QCICIHEO.js';
-import { useState, useRef, useEffect, useContext, useCallback } from 'react';
+import { _2, f } from './chunk-HEORBLVT.js';
+import { CanvasStackContext } from './chunk-CQLQPQ4P.js';
+import { useVisibleRaf } from './chunk-ROQDRXKW.js';
+import { useRef, useCallback, useEffect, useState, useContext } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+function nextIndex(current, key, count, orientation = "horizontal") {
+  if (count === 0) return null;
+  const forward = orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+  const back = orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+  if (key === forward) return (current + 1) % count;
+  if (key === back) return (current - 1 + count) % count;
+  if (key === "Home") return 0;
+  if (key === "End") return count - 1;
+  return null;
+}
+function useRovingTabIndex(orientation = "horizontal") {
+  const ref = useRef(null);
+  const stop = useRef(0);
+  const items = useCallback(
+    () => ref.current ? Array.from(
+      ref.current.querySelectorAll('button:not([disabled]), [role="button"]')
+    ) : [],
+    []
+  );
+  const setTabStop = useCallback(
+    (index) => {
+      const found = items();
+      const at = Math.min(Math.max(index, 0), Math.max(found.length - 1, 0));
+      stop.current = at;
+      for (const [i, el] of found.entries()) el.tabIndex = i === at ? 0 : -1;
+    },
+    [items]
+  );
+  useEffect(() => {
+    const resync = () => {
+      const focused = items().indexOf(document.activeElement);
+      setTabStop(focused === -1 ? stop.current : focused);
+    };
+    resync();
+    if (!ref.current) return;
+    const mo = new MutationObserver(resync);
+    mo.observe(ref.current, { childList: true, subtree: true, attributeFilter: ["disabled"] });
+    return () => mo.disconnect();
+  }, [items, setTabStop]);
+  const onKeyDown = useCallback(
+    (e) => {
+      const found = items();
+      const current = found.indexOf(document.activeElement);
+      const next = nextIndex(current === -1 ? 0 : current, e.key, found.length, orientation);
+      if (next === null) return;
+      e.preventDefault();
+      found[next]?.focus();
+      setTabStop(next);
+    },
+    [items, setTabStop, orientation]
+  );
+  return { ref, onKeyDown };
+}
+function Toolbar({ children, "aria-label": ariaLabel }) {
+  const { ref, onKeyDown } = useRovingTabIndex();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: "lk-toolbar",
+      role: "toolbar",
+      "aria-label": ariaLabel,
+      onKeyDown,
+      children
+    }
+  );
+}
+function Title({ children }) {
+  return /* @__PURE__ */ jsx("span", { className: "lk-toolbar-title", children });
+}
+function Group({ children, end, "aria-label": ariaLabel }) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: a group inside role="toolbar" is the APG pattern; the rule is local and cannot see the parent. <fieldset> means form controls, needs a <legend> to be named, and its UA min-width breaks flex children.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `lk-toolbar-group${end ? " lk-toolbar-group--end" : ""}`,
+        role: "group",
+        "aria-label": ariaLabel,
+        children
+      }
+    )
+  );
+}
+function Button({
+  children,
+  onClick,
+  disabled,
+  title,
+  "aria-label": ariaLabel,
+  variant = "default",
+  iconOnly,
+  pressed
+}) {
+  const cls = [
+    "lk-toolbar-button",
+    variant === "danger" && "lk-toolbar-button--danger",
+    iconOnly && "lk-toolbar-button--icon",
+    pressed && "lk-toolbar-button--pressed"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: cls,
+      onClick,
+      disabled,
+      title,
+      "aria-label": ariaLabel ?? title,
+      "aria-pressed": pressed,
+      children
+    }
+  );
+}
+function Spacer() {
+  return /* @__PURE__ */ jsx("span", { className: "lk-toolbar-spacer", "aria-hidden": "true" });
+}
+Toolbar.Title = Title;
+Toolbar.Group = Group;
+Toolbar.Button = Button;
+Toolbar.Spacer = Spacer;
+
 // src/primitives/fpsAverage.ts
 function rollingAverage(samples) {
   if (samples.length === 0) return 0;
@@ -98,7 +220,7 @@ function ZoomControl({
   };
   return /* @__PURE__ */ jsxs("div", { className: `lk-zoom${className ? ` ${className}` : ""}`, children: [
     /* @__PURE__ */ jsx(
-      _,
+      _2,
       {
         className: "lk-zoom__slider",
         ariaLabel: "Zoom",
@@ -137,130 +259,7 @@ function Section({ children, end }) {
   return /* @__PURE__ */ jsx("span", { className: `lk-status-bar-section${end ? " lk-status-bar-section--end" : ""}`, children });
 }
 StatusBar.Section = Section;
-function nextIndex(current, key, count) {
-  if (count === 0) return null;
-  switch (key) {
-    case "ArrowRight":
-      return (current + 1) % count;
-    case "ArrowLeft":
-      return (current - 1 + count) % count;
-    case "Home":
-      return 0;
-    case "End":
-      return count - 1;
-    default:
-      return null;
-  }
-}
-function useRovingTabIndex() {
-  const ref = useRef(null);
-  const stop = useRef(0);
-  const items = useCallback(
-    () => ref.current ? Array.from(
-      ref.current.querySelectorAll('button:not([disabled]), [role="button"]')
-    ) : [],
-    []
-  );
-  const setTabStop = useCallback(
-    (index) => {
-      const found = items();
-      const at = Math.min(Math.max(index, 0), Math.max(found.length - 1, 0));
-      stop.current = at;
-      for (const [i, el] of found.entries()) el.tabIndex = i === at ? 0 : -1;
-    },
-    [items]
-  );
-  useEffect(() => {
-    const resync = () => {
-      const focused = items().indexOf(document.activeElement);
-      setTabStop(focused === -1 ? stop.current : focused);
-    };
-    resync();
-    if (!ref.current) return;
-    const mo = new MutationObserver(resync);
-    mo.observe(ref.current, { childList: true, subtree: true, attributeFilter: ["disabled"] });
-    return () => mo.disconnect();
-  }, [items, setTabStop]);
-  const onKeyDown = useCallback(
-    (e) => {
-      const found = items();
-      const current = found.indexOf(document.activeElement);
-      const next = nextIndex(current === -1 ? 0 : current, e.key, found.length);
-      if (next === null) return;
-      e.preventDefault();
-      found[next]?.focus();
-      setTabStop(next);
-    },
-    [items, setTabStop]
-  );
-  return { ref, onKeyDown };
-}
-function Toolbar({ children, "aria-label": ariaLabel }) {
-  const { ref, onKeyDown } = useRovingTabIndex();
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: "lk-toolbar",
-      role: "toolbar",
-      "aria-label": ariaLabel,
-      onKeyDown,
-      children
-    }
-  );
-}
-function Title({ children }) {
-  return /* @__PURE__ */ jsx("span", { className: "lk-toolbar-title", children });
-}
-function Group({ children, end, "aria-label": ariaLabel }) {
-  return (
-    // biome-ignore lint/a11y/useSemanticElements: a group inside role="toolbar" is the APG pattern; the rule is local and cannot see the parent. <fieldset> means form controls, needs a <legend> to be named, and its UA min-width breaks flex children.
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `lk-toolbar-group${end ? " lk-toolbar-group--end" : ""}`,
-        role: "group",
-        "aria-label": ariaLabel,
-        children
-      }
-    )
-  );
-}
-function Button({
-  children,
-  onClick,
-  disabled,
-  title,
-  "aria-label": ariaLabel,
-  variant = "default",
-  iconOnly
-}) {
-  const cls = [
-    "lk-toolbar-button",
-    variant === "danger" && "lk-toolbar-button--danger",
-    iconOnly && "lk-toolbar-button--icon"
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      className: cls,
-      onClick,
-      disabled,
-      title,
-      "aria-label": ariaLabel ?? title,
-      children
-    }
-  );
-}
-function Spacer() {
-  return /* @__PURE__ */ jsx("span", { className: "lk-toolbar-spacer", "aria-hidden": "true" });
-}
-Toolbar.Title = Title;
-Toolbar.Group = Group;
-Toolbar.Button = Button;
-Toolbar.Spacer = Spacer;
 
-export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl };
-//# sourceMappingURL=chunk-JDROYQM3.js.map
-//# sourceMappingURL=chunk-JDROYQM3.js.map
+export { FpsMeter, ScaleIndicator, StatusBar, Toolbar, ZoomControl, useRovingTabIndex };
+//# sourceMappingURL=chunk-6JMU56CU.js.map
+//# sourceMappingURL=chunk-6JMU56CU.js.map

package/dist/chunk-6JMU56CU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/primitives/useRovingTabIndex.ts","../src/primitives/Toolbar.tsx","../src/primitives/fpsAverage.ts","../src/primitives/FpsMeter.tsx","../src/primitives/ScaleIndicator.tsx","../src/primitives/ZoomControl.tsx","../src/primitives/StatusBar.tsx"],"names":["useRef","useEffect","jsx","jsxs","_"],"mappings":"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","file":"chunk-6JMU56CU.js","sourcesContent":["import { type KeyboardEvent, useCallback, useEffect, useRef } from 'react';\n\n/** Which axis a toolbar's arrow keys walk. Matches `aria-orientation`. */\nexport type RovingOrientation = 'horizontal' | 'vertical';\n\n/** Where a key takes focus within `count` items, or null if it does not move it.\n *\n *  Only the arrows on the toolbar's own axis move focus — APG leaves the\n *  cross-axis arrows to the page, so a vertical strip does not swallow\n *  ArrowLeft. `Home` / `End` work on both. */\nexport function nextIndex(\n  current: number,\n  key: string,\n  count: number,\n  orientation: RovingOrientation = 'horizontal',\n): number | null {\n  if (count === 0) return null;\n  const forward = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';\n  const back = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';\n  if (key === forward) return (current + 1) % count;\n  if (key === back) return (current - 1 + count) % count;\n  if (key === 'Home') return 0;\n  if (key === 'End') return count - 1;\n  return null;\n}\n\n/**\n * The APG roving-tabindex contract: exactly one item in the tab order, arrows\n * moving focus within. `tabIndex` is written onto the DOM nodes rather than\n * threaded through props, because the items are arbitrary children — the\n * container never sees them as a list it could index.\n */\nexport function useRovingTabIndex<T extends HTMLElement>(\n  orientation: RovingOrientation = 'horizontal',\n) {\n  const ref = useRef<T | null>(null);\n  const stop = useRef(0);\n\n  const items = useCallback(\n    (): HTMLElement[] =>\n      ref.current\n        ? Array.from(\n            ref.current.querySelectorAll<HTMLElement>('button:not([disabled]), [role=\"button\"]'),\n          )\n        : [],\n    [],\n  );\n\n  const setTabStop = useCallback(\n    (index: number) => {\n      const found = items();\n      const at = Math.min(Math.max(index, 0), Math.max(found.length - 1, 0));\n      stop.current = at;\n      for (const [i, el] of found.entries()) el.tabIndex = i === at ? 0 : -1;\n    },\n    [items],\n  );\n\n  // Re-establish the tab stop whenever the item set changes — a trial's toolbar\n  // contributions are dynamic, and `disabled` moves a button in and out of the\n  // set without touching the child list. The focused item keeps the stop.\n  useEffect(() => {\n    const resync = () => {\n      const focused = items().indexOf(document.activeElement as HTMLElement);\n      setTabStop(focused === -1 ? stop.current : focused);\n    };\n    resync();\n    if (!ref.current) return;\n    const mo = new MutationObserver(resync);\n    mo.observe(ref.current, { childList: true, subtree: true, attributeFilter: ['disabled'] });\n    return () => mo.disconnect();\n  }, [items, setTabStop]);\n\n  const onKeyDown = useCallback(\n    (e: KeyboardEvent<T>) => {\n      const found = items();\n      const current = found.indexOf(document.activeElement as HTMLElement);\n      const next = nextIndex(current === -1 ? 0 : current, e.key, found.length, orientation);\n      if (next === null) return;\n      e.preventDefault();\n      found[next]?.focus();\n      setTabStop(next);\n    },\n    [items, setTabStop, orientation],\n  );\n\n  return { ref, onKeyDown };\n}\n","import type { MouseEventHandler, ReactNode } from 'react';\nimport { useRovingTabIndex } from './useRovingTabIndex';\n\n/** Props for `<Toolbar>`. */\nexport interface ToolbarProps {\n  children: ReactNode;\n  /** Names the toolbar for assistive tech. Required by the APG pattern when a\n   *  view holds more than one. */\n  'aria-label'?: string;\n}\n\n/** A horizontal bar of controls. Fill it with `<Toolbar.Title>`,\n *  `<Toolbar.Group>`, `<Toolbar.Button>` and `<Toolbar.Spacer>`. */\nexport function Toolbar({ children, 'aria-label': ariaLabel }: ToolbarProps) {\n  const { ref, onKeyDown } = useRovingTabIndex<HTMLDivElement>();\n  return (\n    <div\n      ref={ref}\n      className=\"lk-toolbar\"\n      role=\"toolbar\"\n      aria-label={ariaLabel}\n      onKeyDown={onKeyDown}\n    >\n      {children}\n    </div>\n  );\n}\n\ninterface TitleProps {\n  children: ReactNode;\n}\nfunction Title({ children }: TitleProps) {\n  return <span className=\"lk-toolbar-title\">{children}</span>;\n}\n\n/** Props for `<Toolbar.Group>`. */\nexport interface ToolbarGroupProps {\n  children: ReactNode;\n  /** Pushes this group, and everything after it, to the far end. */\n  end?: boolean;\n  'aria-label'?: string;\n}\n\n/** Related controls, kept tight and ruled off from their neighbors. Group\n *  rather than separate with repeated `<Toolbar.Spacer>`: consecutive spacers\n *  share the free space, so every gap collapses to the same slack and the bar\n *  reads as one undifferentiated run. */\nfunction Group({ children, end, 'aria-label': ariaLabel }: ToolbarGroupProps) {\n  return (\n    // biome-ignore lint/a11y/useSemanticElements: a group inside role=\"toolbar\" is the APG pattern; the rule is local and cannot see the parent. <fieldset> means form controls, needs a <legend> to be named, and its UA min-width breaks flex children.\n    <div\n      className={`lk-toolbar-group${end ? ' lk-toolbar-group--end' : ''}`}\n      role=\"group\"\n      aria-label={ariaLabel}\n    >\n      {children}\n    </div>\n  );\n}\n\n/** Props for `<Toolbar.Button>`. */\nexport interface ToolbarButtonProps {\n  children: ReactNode;\n  onClick: MouseEventHandler<HTMLButtonElement>;\n  disabled?: boolean;\n  title?: string;\n  /** Required when `children` is an icon with no text of its own. */\n  'aria-label'?: string;\n  /** `danger` reddens on hover — for actions that discard work. */\n  variant?: 'default' | 'danger';\n  /** Square, for a button whose whole content is one glyph. */\n  iconOnly?: boolean;\n  /** Makes this a toggle: `aria-pressed`, and held down while true. */\n  pressed?: boolean;\n}\n\nfunction Button({\n  children,\n  onClick,\n  disabled,\n  title,\n  'aria-label': ariaLabel,\n  variant = 'default',\n  iconOnly,\n  pressed,\n}: ToolbarButtonProps) {\n  const cls = [\n    'lk-toolbar-button',\n    variant === 'danger' && 'lk-toolbar-button--danger',\n    iconOnly && 'lk-toolbar-button--icon',\n    pressed && 'lk-toolbar-button--pressed',\n  ]\n    .filter(Boolean)\n    .join(' ');\n  return (\n    <button\n      type=\"button\"\n      className={cls}\n      onClick={onClick}\n      disabled={disabled}\n      title={title}\n      aria-label={ariaLabel ?? title}\n      aria-pressed={pressed}\n    >\n      {children}\n    </button>\n  );\n}\n\nfunction Spacer() {\n  return <span className=\"lk-toolbar-spacer\" aria-hidden=\"true\" />;\n}\n\n/** A label within a toolbar. */\nToolbar.Title = Title;\n/** A ruled-off run of related controls. */\nToolbar.Group = Group;\n/** A button within a toolbar. */\nToolbar.Button = Button;\n/** Flexible space that pushes what follows to the far end of the toolbar. */\nToolbar.Spacer = Spacer;\n","export function rollingAverage(samples: readonly number[]): number {\n  if (samples.length === 0) return 0;\n  const sum = samples.reduce((acc, n) => acc + n, 0);\n  return Math.round(sum / samples.length);\n}\n","import { useVisibleRaf } from '@weasel-js/core';\nimport { useEffect, useRef, useState } from 'react';\nimport { rollingAverage } from './fpsAverage';\n\nconst SAMPLE_WINDOW = 30;\n\n/** A live frame-rate readout, averaged over the last 30 frames. */\nexport function FpsMeter() {\n  const [fps, setFps] = useState(0);\n  const samplesRef = useRef<number[]>([]);\n  const lastTimeRef = useRef<number | null>(null);\n  const rootRef = useRef<HTMLDivElement | null>(null);\n\n  const loop = useVisibleRaf(\n    (time) => {\n      const last = lastTimeRef.current;\n      if (last !== null) {\n        const delta = time - last;\n        if (delta > 0) {\n          const samples = samplesRef.current;\n          samples.push(1000 / delta);\n          if (samples.length > SAMPLE_WINDOW) samples.shift();\n          setFps(rollingAverage(samples));\n        }\n      }\n      lastTimeRef.current = time;\n      loop.request();\n    },\n    {\n      target: rootRef,\n      // The gap spent suspended is not a frame that took an hour to draw.\n      onResume: () => {\n        lastTimeRef.current = null;\n      },\n    },\n  );\n\n  useEffect(() => {\n    loop.request();\n    return () => loop.cancel();\n  }, [loop]);\n\n  return (\n    <div className=\"lk-fps-meter\" ref={rootRef}>\n      <span className=\"lk-fps-meter-value\">FPS {fps}</span>\n    </div>\n  );\n}\n","import { useContext } from 'react';\nimport { CanvasStackContext } from '../canvas/CanvasStackContext';\n\n/** Props for `<ScaleIndicator>`. */\nexport interface ScaleIndicatorProps {\n  /** Current view zoom factor. If omitted, reads from CanvasStackContext. Defaults to 1. */\n  zoom?: number;\n  /** World pixels per unit at zoom=1. Default: 1. */\n  pixelsPerUnit?: number;\n  /** Unit label. Default: 'px'. */\n  unit?: string;\n  /** Target bar width in display pixels. Default: 100. */\n  targetWidth?: number;\n}\n\n// Rounds n to a \"nice\" number — 1, 2, 5, 10, 20, 50, ...\nfunction niceNumber(n: number): number {\n  if (n <= 0) return 1;\n  const exp = Math.floor(Math.log10(n));\n  const fraction = n / 10 ** exp;\n  let nice: number;\n  if (fraction < 1.5) nice = 1;\n  else if (fraction < 3.5) nice = 2;\n  else if (fraction < 7.5) nice = 5;\n  else nice = 10;\n  return nice * 10 ** exp;\n}\n\n/** A scale bar: a labeled rule showing how far a round number of world units\n *  is at the current zoom. Reads the zoom from the surrounding canvas stack\n *  unless one is passed. */\nexport function ScaleIndicator({\n  zoom,\n  pixelsPerUnit = 1,\n  unit = 'px',\n  targetWidth = 100,\n}: ScaleIndicatorProps) {\n  const ctxValue = useContext(CanvasStackContext);\n  const effectiveZoom = zoom ?? ctxValue?.view.zoom ?? 1;\n  const effectivePxPerUnit = pixelsPerUnit * effectiveZoom;\n  const targetUnits = targetWidth / effectivePxPerUnit;\n  const niceUnits = niceNumber(targetUnits);\n  const barWidth = niceUnits * effectivePxPerUnit;\n  return (\n    <div className=\"lk-scale-indicator\" role=\"img\" aria-label={`Scale: ${niceUnits} ${unit}`}>\n      <div className=\"lk-scale-indicator-bar\" style={{ width: `${barWidth}px` }} />\n      <span className=\"lk-scale-indicator-label\">\n        {niceUnits} {unit}\n      </span>\n    </div>\n  );\n}\n","import { NumberField, Slider } from '../passthrough/weasel-ui';\n\n/** Props for `<ZoomControl>`. */\nexport interface ZoomControlProps {\n  /** Current zoom as a scale factor: 1 is actual size. */\n  zoom: number;\n  /** Fired continuously while the slider drags. */\n  onZoomChange: (zoom: number) => void;\n  /** Fired when a drag settles or the field is committed. Defaults to\n   *  `onZoomChange`. */\n  onZoomCommit?: (zoom: number) => void;\n  /** Smallest selectable zoom. Defaults to 0.1 (10%). */\n  min?: number;\n  /** Largest selectable zoom. Defaults to 8 (800%). */\n  max?: number;\n  className?: string;\n}\n\n// Zoom is perceptually geometric — halving is as big a step as doubling — so\n// the slider runs on log2 and 100% lands mid-track for a symmetric range.\nconst toTrack = (zoom: number): number => Math.log2(zoom);\nconst fromTrack = (v: number): number => 2 ** v;\n\nconst clamp = (v: number, lo: number, hi: number): number => Math.max(lo, Math.min(hi, v));\n\n/** Zoom as a log-scaled slider with an editable percentage beside it. Pair it\n *  with zoom-in / zoom-out buttons in a `<Toolbar.Group>`; this component owns\n *  only the continuous part. */\nexport function ZoomControl({\n  zoom,\n  onZoomChange,\n  onZoomCommit,\n  min = 0.1,\n  max = 8,\n  className,\n}: ZoomControlProps) {\n  const commit = onZoomCommit ?? onZoomChange;\n  const emit = (track: number, done: boolean): void => {\n    const next = clamp(fromTrack(track), min, max);\n    (done ? commit : onZoomChange)(next);\n  };\n\n  return (\n    <div className={`lk-zoom${className ? ` ${className}` : ''}`}>\n      <Slider\n        className=\"lk-zoom__slider\"\n        ariaLabel=\"Zoom\"\n        min={toTrack(min)}\n        max={toTrack(max)}\n        // Detents at the octaves plus actual size, so 25/50/100/200/400% are\n        // reachable by drag rather than only by typing.\n        stops={[-2, -1, 0, 1, 2]}\n        thumbs={[{ value: clamp(toTrack(zoom), toTrack(min), toTrack(max)) }]}\n        onInput={(next) => emit(next[0].value, false)}\n        onChange={(next) => emit(next[0].value, true)}\n        readoutPlacement=\"none\"\n      />\n      {/* `style: 'percent'` formats a fraction, so the field carries the scale\n          factor itself and renders 0.5 as \"50%\". */}\n      <NumberField\n        className=\"lk-zoom__field\"\n        aria-label=\"Zoom\"\n        value={zoom}\n        minValue={min}\n        maxValue={max}\n        step={0.01}\n        hideSteppers\n        formatOptions={{ style: 'percent', maximumFractionDigits: 0 }}\n        onChange={(next) => {\n          if (!Number.isFinite(next)) return;\n          commit(clamp(next, min, max));\n        }}\n      />\n    </div>\n  );\n}\n","import type { ReactNode } from 'react';\n\n/** Props for `<StatusBar>`. */\nexport interface StatusBarProps {\n  children: ReactNode;\n}\n\n/** A footer strip for readouts. Fill it with `<StatusBar.Section>`. */\nexport function StatusBar({ children }: StatusBarProps) {\n  return <div className=\"lk-status-bar\">{children}</div>;\n}\n\n/** Props for `<StatusBar.Section>`. */\nexport interface StatusBarSectionProps {\n  children: ReactNode;\n  /** Pushes this section, and everything after it, to the far end. */\n  end?: boolean;\n}\nfunction Section({ children, end }: StatusBarSectionProps) {\n  return (\n    <span className={`lk-status-bar-section${end ? ' lk-status-bar-section--end' : ''}`}>\n      {children}\n    </span>\n  );\n}\n\n/** One readout within a status bar. */\nStatusBar.Section = Section;\n"]}

package/dist/{chunk-CPUJ3QXL.js → chunk-CQLQPQ4P.js}

@@ -4,5 +4,5 @@ import { createContext } from 'react';
 var CanvasStackContext = createContext(null);
 
 export { CanvasStackContext };
-//# sourceMappingURL=chunk-CPUJ3QXL.js.map
-//# sourceMappingURL=chunk-CPUJ3QXL.js.map
+//# sourceMappingURL=chunk-CQLQPQ4P.js.map
+//# sourceMappingURL=chunk-CQLQPQ4P.js.map

package/dist/chunk-CQLQPQ4P.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/canvas/CanvasStackContext.ts"],"names":[],"mappings":";;;AA6BO,IAAM,kBAAA,GAAqB,cAA8C,IAAI","file":"chunk-CQLQPQ4P.js","sourcesContent":["import { createContext, type RefObject } from 'react';\nimport type { ViewTransform } from '../instrument/types';\nimport type { CanvasLayerDescriptor } from './useLayerScheduler';\nimport type { WorldFrame } from './worldSpec';\n\n/** The stack's own drawing surface, for an overlay that has to re-draw it at\n *  another camera or read back what it presented — a loupe. */\nexport interface CanvasStackSurface {\n  /** The element the layers are stacked in, and the one pan/zoom listens on. */\n  element: RefObject<HTMLElement | null>;\n  /** Its measured CSS size, and the ratio the backing stores are scaled by. */\n  size: { width: number; height: number; dpr: number };\n  /** The presented `<canvas>` per layer id. */\n  canvases: RefObject<Map<string, HTMLCanvasElement>>;\n  /** The layers as the stack is drawing them, bottom first. */\n  layers: readonly CanvasLayerDescriptor[];\n}\n\n/** What a canvas stack publishes to its children: the view, and the resolved\n *  coordinate system it is read in, so DOM overlays can place themselves in the\n *  same coordinates the layers draw in. */\nexport interface CanvasStackContextValue {\n  view: ViewTransform;\n  frame: WorldFrame;\n  /** Absent from a context assembled by hand, which has no stack behind it. */\n  surface?: CanvasStackSurface;\n}\n\n/** Context carrying the surrounding canvas stack's view and world frame. */\nexport const CanvasStackContext = createContext<CanvasStackContextValue | null>(null);\n"]}

package/dist/chunk-CTRKTLYZ.js

@@ -0,0 +1,33 @@
+import { DEFAULT_FRAME } from './chunk-2AYGEN57.js';
+
+// src/canvas/camera.ts
+function usableZoom(zoom) {
+  return Number.isFinite(zoom) && zoom > 0 ? zoom : 1;
+}
+function zoomAt(view, factor, at, { frame = DEFAULT_FRAME, min, max } = {}) {
+  const anchorX = at.x - frame.originPx.x;
+  const anchorY = at.y - frame.originPx.y;
+  const current = usableZoom(view.zoom);
+  const zoom = Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min ?? 0, current * factor));
+  const ratio = zoom / current;
+  return {
+    zoom,
+    pan: {
+      x: anchorX - (anchorX - view.pan.x) * ratio,
+      y: anchorY - (anchorY - view.pan.y) * ratio
+    }
+  };
+}
+function centerOn(world, zoom, size, frame = DEFAULT_FRAME) {
+  return {
+    zoom,
+    pan: {
+      x: size.width / 2 - frame.originPx.x - world.x * zoom,
+      y: size.height / 2 - frame.originPx.y - world.y * zoom * frame.yDir
+    }
+  };
+}
+
+export { centerOn, zoomAt };
+//# sourceMappingURL=chunk-CTRKTLYZ.js.map
+//# sourceMappingURL=chunk-CTRKTLYZ.js.map

package/dist/chunk-CTRKTLYZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/canvas/camera.ts"],"names":[],"mappings":";;;AAYA,SAAS,WAAW,IAAA,EAAsB;AACxC,EAAA,OAAO,OAAO,QAAA,CAAS,IAAI,CAAA,IAAK,IAAA,GAAO,IAAI,IAAA,GAAO,CAAA;AACpD;AAUO,SAAS,MAAA,CACd,IAAA,EACA,MAAA,EACA,EAAA,EACA,EAAE,KAAA,GAAQ,aAAA,EAAe,GAAA,EAAK,GAAA,EAAI,GAAmB,EAAC,EACvC;AAGf,EAAA,MAAM,OAAA,GAAU,EAAA,CAAG,CAAA,GAAI,KAAA,CAAM,QAAA,CAAS,CAAA;AACtC,EAAA,MAAM,OAAA,GAAU,EAAA,CAAG,CAAA,GAAI,KAAA,CAAM,QAAA,CAAS,CAAA;AACtC,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,IAAA,CAAK,IAAI,CAAA;AACpC,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,GAAA,CAAI,GAAA,IAAO,MAAA,CAAO,iBAAA,EAAmB,IAAA,CAAK,GAAA,CAAI,GAAA,IAAO,CAAA,EAAG,OAAA,GAAU,MAAM,CAAC,CAAA;AAC3F,EAAA,MAAM,QAAQ,IAAA,GAAO,OAAA;AACrB,EAAA,OAAO;AAAA,IACL,IAAA;AAAA,IACA,GAAA,EAAK;AAAA,MACH,CAAA,EAAG,OAAA,GAAA,CAAW,OAAA,GAAU,IAAA,CAAK,IAAI,CAAA,IAAK,KAAA;AAAA,MACtC,CAAA,EAAG,OAAA,GAAA,CAAW,OAAA,GAAU,IAAA,CAAK,IAAI,CAAA,IAAK;AAAA;AACxC,GACF;AACF;AAIO,SAAS,QAAA,CACd,KAAA,EACA,IAAA,EACA,IAAA,EACA,QAAoB,aAAA,EACL;AACf,EAAA,OAAO;AAAA,IACL,IAAA;AAAA,IACA,GAAA,EAAK;AAAA,MACH,CAAA,EAAG,KAAK,KAAA,GAAQ,CAAA,GAAI,MAAM,QAAA,CAAS,CAAA,GAAI,MAAM,CAAA,GAAI,IAAA;AAAA,MACjD,CAAA,EAAG,IAAA,CAAK,MAAA,GAAS,CAAA,GAAI,KAAA,CAAM,SAAS,CAAA,GAAI,KAAA,CAAM,CAAA,GAAI,IAAA,GAAO,KAAA,CAAM;AAAA;AACjE,GACF;AACF","file":"chunk-CTRKTLYZ.js","sourcesContent":["import type { Point, ViewTransform } from '../instrument/types';\nimport { DEFAULT_FRAME, type ViewportSize, type WorldFrame } from './worldSpec';\n\n/** Bounds and coordinate system a {@link zoomAt} works in. */\nexport interface ZoomAtOptions {\n  /** The instrument's coordinate system, resolved against the viewport.\n   *  Omitted, `at` is measured from the element's top-left. */\n  frame?: WorldFrame;\n  min?: number;\n  max?: number;\n}\n\nfunction usableZoom(zoom: number): number {\n  return Number.isFinite(zoom) && zoom > 0 ? zoom : 1;\n}\n\n/**\n * Zoom a view by `factor` about a fixed point, so whatever world coordinate\n * `at` was over stays under it.\n *\n * `at` is in the element's own pixels — a cursor position, or the centre of a\n * lens. The clamp is applied before the pan is solved, so a zoom that hits a\n * bound still anchors on the zoom it actually reached.\n */\nexport function zoomAt(\n  view: ViewTransform,\n  factor: number,\n  at: Point,\n  { frame = DEFAULT_FRAME, min, max }: ZoomAtOptions = {},\n): ViewTransform {\n  // `pan` is measured from the frame's origin, so anchoring at the raw point\n  // drifts by `(1 - ratio) * originPx` per step on any frame that moves it.\n  const anchorX = at.x - frame.originPx.x;\n  const anchorY = at.y - frame.originPx.y;\n  const current = usableZoom(view.zoom);\n  const zoom = Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min ?? 0, current * factor));\n  const ratio = zoom / current;\n  return {\n    zoom,\n    pan: {\n      x: anchorX - (anchorX - view.pan.x) * ratio,\n      y: anchorY - (anchorY - view.pan.y) * ratio,\n    },\n  };\n}\n\n/** The view that puts a world point at the centre of a `size` viewport, at\n *  `zoom`. What a lens showing a region around one point renders through. */\nexport function centerOn(\n  world: Point,\n  zoom: number,\n  size: ViewportSize,\n  frame: WorldFrame = DEFAULT_FRAME,\n): ViewTransform {\n  return {\n    zoom,\n    pan: {\n      x: size.width / 2 - frame.originPx.x - world.x * zoom,\n      y: size.height / 2 - frame.originPx.y - world.y * zoom * frame.yDir,\n    },\n  };\n}\n"]}