@weasel-js/labkit 1.0.0 → 1.0.1

package/dist/passthrough/weasel-canvas.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Ref } from 'react';
-import { N as Node, V as View, D as DrawCommand, S as Scene, B as Bounds, a as ViewportDims, P as PathDrawCommand } from '../_dts/DrawCommand-BwRCZYuo.js';
+import { N as Node, V as View, D as DrawCommand, S as Scene, B as Bounds, a as ViewportDims, P as PathDrawCommand } from '../_dts/DrawCommand-CitWPxMY.js';
 
 /**
  * `renderSceneToCanvas` — substrate for detached, read-only scene views
@@ -55,6 +55,10 @@ interface RenderSceneToCanvasArgs<TData, TLayer extends string, TPose> {
      *  minimap's visible-window indicator. Wrapped in the same view transform
      *  as scene commands. */
     extraCommands?: DrawCommand[];
+    /** Optional per-id alpha multiplier, mirroring `<SceneCanvas>`'s scene-slot
+     *  `alphaFor`. Pass the same function the main canvas uses to keep a
+     *  scoping-dim treatment consistent across both. Defaults to `() => 1`. */
+    alphaFor?: (id: string) => number;
     /** Optional device-pixel ratio. Defaults to `window.devicePixelRatio || 1`
      *  when available, otherwise 1. Tests typically pin this to 1 or 2. */
     dpr?: number;
@@ -62,16 +66,27 @@ interface RenderSceneToCanvasArgs<TData, TLayer extends string, TPose> {
 /**
  * Build the DrawCommand list that `renderSceneToCanvas` would dispatch.
  *
- * Pure — no GL, no DOM, no side effects. Iterates `scene.renderOrder()`,
- * calls `drawOne` per node, appends any `extraCommands`, and wraps the
- * combined list in a single `{ kind: 'group', transform: viewToMat3(view) }`
- * so the output is in screen space.
+ * Pure — no GL, no DOM, no side effects. Walks the scene through
+ * `buildSceneTree` — the same walk `<SceneCanvas>`'s `buildSceneLayer` uses —
+ * appends any `extraCommands`, and wraps the result in a single
+ * `{ kind: 'group', transform: viewToMat3(view) }` so the output is in screen
+ * space. Sharing the walk is what keeps hidden layers unpainted and container
+ * clips applied here; a hand-rolled `renderOrder()` loop silently dropped both.
+ *
+ * Each node's commands additionally go through `wrapNodeOutput` — pose
+ * rotation, then the `alphaFor` multiplier — exactly as `buildSceneLayer`
+ * does, so a `drawOne` shared between the two paints the same thing in both.
+ * A `drawOne` that rotates its own output will therefore rotate twice here;
+ * emit unrotated geometry and let the pose drive it.
+ *
+ * Output shape follows `buildSceneTree`: one group per **visible** layer, in
+ * scene-layer order, each holding one group per node on that layer.
  *
  * Exported for tests and for callers that want to render into something
  * other than a real `<canvas>` (e.g. an offscreen renderer or a
  * snapshot fixture).
  */
-declare function buildSceneViewCommands<TData, TLayer extends string, TPose>(scene: Scene<TData, TLayer, TPose>, view: View, drawOne: SceneViewDrawOne<TData, TLayer, TPose>, extraCommands?: ReadonlyArray<DrawCommand>): DrawCommand[];
+declare function buildSceneViewCommands<TData, TLayer extends string, TPose>(scene: Scene<TData, TLayer, TPose>, view: View, drawOne: SceneViewDrawOne<TData, TLayer, TPose>, extraCommands?: ReadonlyArray<DrawCommand>, alphaFor?: (id: string) => number): DrawCommand[];
 /**
  * Render one frame of `scene` at `view` into `canvas`. See module docstring
  * for the design context.
@@ -110,6 +125,10 @@ interface SceneViewCanvasProps<TData, TLayer extends string, TPose> {
      *  indicator; available to other consumers that want to overlay a
      *  world-space annotation. */
     extraCommands?: ReadonlyArray<DrawCommand>;
+    /** Optional per-id alpha multiplier, mirroring `<SceneCanvas>`'s scene-slot
+     *  `alphaFor`. Pass the same function the main canvas uses to keep a
+     *  scoping-dim treatment consistent across both. Defaults to `() => 1`. */
+    alphaFor?: (id: string) => number;
     /** Optional CSS class for sizing / positioning the `<canvas>`. The kit
      *  does not emit inline styles for layout — use a class. */
     className?: string;
@@ -236,6 +255,10 @@ interface MinimapCanvasProps<TData, TLayer extends string, TPose> {
     /** Pose → AABB. Defaults to identity (`pose as Bounds`), matching
      *  `sceneAdapter` / `useSelectTool`. */
     poseBounds?: (pose: TPose) => Bounds;
+    /** Optional per-id alpha multiplier, mirroring `<SceneCanvas>`'s scene-slot
+     *  `alphaFor`. Pass the same function the main canvas uses so a
+     *  scoping-dim treatment shows up in the minimap too. */
+    alphaFor?: (id: string) => number;
     /** Visual tuning of the indicator stroke. */
     indicatorStyle?: IndicatorStyle;
     /** CSS class for sizing / positioning the canvas. */

package/dist/passthrough/weasel-canvas.js

@@ -1,3 +1,3 @@
-export { FALLBACK_FIT_VIEW, MinimapCanvas, SceneViewCanvas, buildSceneViewCommands, computeFitView2 as computeFitView, computeIndicatorCommand, renderSceneToCanvas } from '../chunk-XVBXYKFJ.js';
+export { FALLBACK_FIT_VIEW, MinimapCanvas, SceneViewCanvas, buildSceneViewCommands, computeFitView2 as computeFitView, computeIndicatorCommand, renderSceneToCanvas } from '../chunk-ISEK5LXT.js';
 //# sourceMappingURL=weasel-canvas.js.map
 //# sourceMappingURL=weasel-canvas.js.map

package/dist/passthrough/weasel-ui.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, CSSProperties, ButtonHTMLAttributes, ReactElement, MutableRefObject, PointerEvent as PointerEvent$1, KeyboardEvent, RefCallback } from 'react';
-import { V as View, D as DrawCommand, O as Op, b as NodeId, c as Path, S as Scene, H as History, B as Bounds } from '../_dts/DrawCommand-BwRCZYuo.js';
+import { ReactNode, CSSProperties, ButtonHTMLAttributes, ReactElement, MutableRefObject, PointerEvent as PointerEvent$1, KeyboardEvent, RefCallback, RefObject } from 'react';
+import { V as View, D as DrawCommand, O as Op, b as NodeId, c as Path, S as Scene, H as History, B as Bounds } from '../_dts/DrawCommand-CitWPxMY.js';
 import { TextFieldProps, ValidationResult, CheckboxProps as CheckboxProps$1, SwitchProps as SwitchProps$1, TabProps as TabProps$1, TabListProps as TabListProps$1, TabPanelProps as TabPanelProps$1, TabsProps as TabsProps$1, RadioProps as RadioProps$1, RadioGroupProps as RadioGroupProps$1, NumberFieldProps as NumberFieldProps$1, SelectProps as SelectProps$1, ListBoxItemProps, ComboBoxProps as ComboBoxProps$1, SliderProps as SliderProps$1, ModalOverlayProps, DialogProps as DialogProps$1 } from 'react-aria-components';
 
 /**
@@ -1854,17 +1854,28 @@ type ModSpec = Partial<{
     mod: boolean | 'optional';
     shift: boolean | 'optional';
 }>;
+/** The predicate form of {@link TargetSpec}. `hit` is the raw target
+ *  (affordance for drag, `e.target` otherwise); `bodyTarget` is the optional
+ *  body-class string ('empty' | 'selected-body' | 'unselected-body') when
+ *  `classifyTarget` is wired. Predicates that only need one of the two can
+ *  ignore the other. */
+interface TargetPredicate {
+    (hit: unknown, bodyTarget?: string): boolean;
+    /** `false` declares that the predicate reads `bodyTarget` only. An
+     *  exclusive affordance claim bars bindings whose target doesn't consult
+     *  the hit; a body predicate that declares nothing looks like it does. */
+    readsAffordance?: boolean;
+}
 /** Target selector for click and drag gesture specs. String forms are sugar
  *  for the kit-owned object-kind registry (TODO.md Tier 1 follow-up); until
  *  that ships, consumers can pass `{ kindOf: predicate }` to classify hits
- *  themselves. */
+ *  themselves.
+ *
+ *  Adding a form here is a compile error in `parseTargetSpec` until
+ *  `TargetSpecForm` grows a matching variant — which is in turn a compile
+ *  error at every site that switches on one. */
 type TargetSpec = 'empty' | 'selected-body' | 'unselected-body' | `kind:${string}` | `kind:${string}:selected` | `affordance:${string}` | {
-    /** Predicate. `hit` is the raw target (affordance for drag,
-     *  `e.target` otherwise); `bodyTarget` is the optional body-class
-     *  string ('empty' | 'selected-body' | 'unselected-body') when
-     *  `classifyTarget` is wired. Predicates that only need one of the
-     *  two can ignore the other. */
-    kindOf: (hit: unknown, bodyTarget?: string) => boolean;
+    kindOf: TargetPredicate;
 };
 /** Phase qualifier on a gesture spec. Restricts when the spec matches based
  *  on per-tool gesture-lifecycle state.
@@ -4428,6 +4439,57 @@ interface ReorderDragHandlers {
 }
 declare function useReorderDragList(opts: UseReorderDragListOptions): ReorderDragHandlers;
 
+/** The only thing the hook needs to know about a bar's items: which are
+ *  skipped by arrow navigation. */
+type RovingItem = {
+    disabled?: boolean;
+};
+type UseRovingTabIndexOptions = {
+    /** In the same order as the elements carrying `itemClassName`. */
+    items: readonly RovingItem[];
+    /** Class on the focusable element of each item, inside the container the
+     *  returned `rootRef` is attached to. Their DOM order must match `items`. */
+    itemClassName: string;
+    /** Index that carries `tabIndex=0`. Defaults to the first enabled item; a
+     *  radiogroup-style bar passes its selected index so Tab lands on the
+     *  current value. */
+    tabStopIndex?: number;
+    /** Called with the new index as arrow/Home/End focus moves, before focus
+     *  moves. This is where a selection-follows-focus bar commits the value. */
+    onNavigate?: (index: number) => void;
+    /** Space/Enter on the item at `index`. When omitted the keypress is left
+     *  alone, which on a native `<button>` produces an ordinary click. */
+    onActivate?: (index: number) => void;
+};
+type RovingTabIndex<T extends HTMLElement = HTMLDivElement> = {
+    /** Attach to the container element that holds the items. */
+    rootRef: RefObject<T | null>;
+    /** `tabIndex` value for the item at `index`. */
+    tabIndexFor: (index: number) => 0 | -1;
+    /** `onKeyDown` for the item at `index`. */
+    onKeyDown: (index: number) => (e: KeyboardEvent<HTMLElement>) => void;
+};
+/**
+ * Roving tabindex for a bar of items: one item is in the tab order, and the
+ * arrow keys move focus among the rest, skipping disabled ones and wrapping
+ * at both ends. Home and End go to the first and last enabled item. Both axes
+ * navigate, so the same bar works laid out either way.
+ *
+ * Backs `ActionsBar`, `OptionsBar`, and `ToggleBar`.
+ *
+ * **When a bar should not use this.** Only when the bar owns its items. A
+ * container of arbitrary compound controls — a number field, a select, a
+ * color field — must leave the arrow keys alone, because those controls edit
+ * their own value with them; taking the arrows over would break the control
+ * to navigate between controls. `ToolOptionsBar` is that case and keeps plain
+ * DOM tab order. A bar whose items are all simple buttons is the case this
+ * hook is for.
+ *
+ * With every item disabled there is no tab stop and the bar drops out of the
+ * tab order entirely.
+ */
+declare function useRovingTabIndex<T extends HTMLElement = HTMLDivElement>(options: UseRovingTabIndexOptions): RovingTabIndex<T>;
+
 /**
  * Display-formatter for numbers. Use this anywhere a number is shown to
  * a user. The whole point: negative values get prefixed with the real
@@ -4441,5 +4503,5 @@ declare function useReorderDragList(opts: UseReorderDragListOptions): ReorderDra
 declare const MINUS_SIGN = "\u2212";
 declare function formatNumber(value: number, options?: Intl.NumberFormatOptions): string;
 
-export { ActionBar, ActionsBar, Badge, Button, Checkbox, ComboBox, ComboBoxItem, CurveEditor, DataGrid, Dialog, EDGE_PROFILES, Field, Input, KeyCap, KeySequence, MINUS_SIGN, NumberField, OptionsBar, Plot2D, PointPlotter, Powerline, Radio, RadioGroup, RangeSlider, Select, SelectItem, Sidebar, SidebarPanel, Slider, Switch, Tab, TabList, TabPanel, Tabs, ToggleBar, ToolButton, ToolGroup, ToolPalette, chromaAt, detectPlatform, dlog, fieldClasses, formatNumber, formatShortcut, formatShortcutParts, inferKeycapKind, isDebugEnabled, keyGlyph, keySpecFromKey, keySpecsFromMods, oklchToHex, paintGradientTrack, useReorderDragList };
-export type { ActionBarProps, ActionsBarItem, ActionsBarProps, ActionsBarSize, ActionsBarVariant, AddPointMode, AnchorRenderProps, AxesSettings, BadgeProps, BadgeShape, BadgeSize, BadgeTone, BadgeVariant, BoundsCtx, BuiltInEdgeName, ButtonProps, ButtonSize, ButtonVariant, CheckboxProps, ChromaCurve, ChromaCurvePoint, ComboBoxItemProps, ComboBoxOption, ComboBoxProps, ControlPoint, CurveDomain, CurveEditorProps, DataGridColumn, DataGridProps, DialogProps, EdgeCap, EdgeProfile, EndpointMode, FieldOrientation, FieldProps, FillSettings, GradientTrackOpts, GridSettings, InputProps, InterpolationMode, KeyCapProps, KeyCapVariant, KeySequenceProps, KeySpec$1 as KeySpec, KeycapKind, LayerListItem, LogicalMod, LogicalModSpec, NumberFieldProps, OptionsBarItem, OptionsBarProps, OptionsBarSize, OptionsBarVariant, Platform, Plot2DCoords, Plot2DHandle, Plot2DProps, PointPlotterProps, PowerlineProps, PowerlineSegment, RadioGroupProps, RadioProps, RangeSliderProps, ReorderDragHandlers, ReorderDragState, SelectItemProps, SelectOption, SelectProps, SidebarPanelProps, SidebarProps, SliderProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabsProps, Thumb, ThumbRenderCtx, ThumbShape, ToggleBarItem, ToggleBarProps, ToggleBarSize, ToggleBarVariant, ToolButtonProps, ToolGroupProps, ToolPaletteProps, TrackCtx, UseReorderDragListOptions };
+export { ActionBar, ActionsBar, Badge, Button, Checkbox, ComboBox, ComboBoxItem, CurveEditor, DataGrid, Dialog, EDGE_PROFILES, Field, Input, KeyCap, KeySequence, MINUS_SIGN, NumberField, OptionsBar, Plot2D, PointPlotter, Powerline, Radio, RadioGroup, RangeSlider, Select, SelectItem, Sidebar, SidebarPanel, Slider, Switch, Tab, TabList, TabPanel, Tabs, ToggleBar, ToolButton, ToolGroup, ToolPalette, chromaAt, detectPlatform, dlog, fieldClasses, formatNumber, formatShortcut, formatShortcutParts, inferKeycapKind, isDebugEnabled, keyGlyph, keySpecFromKey, keySpecsFromMods, oklchToHex, paintGradientTrack, useReorderDragList, useRovingTabIndex };
+export type { ActionBarProps, ActionsBarItem, ActionsBarProps, ActionsBarSize, ActionsBarVariant, AddPointMode, AnchorRenderProps, AxesSettings, BadgeProps, BadgeShape, BadgeSize, BadgeTone, BadgeVariant, BoundsCtx, BuiltInEdgeName, ButtonProps, ButtonSize, ButtonVariant, CheckboxProps, ChromaCurve, ChromaCurvePoint, ComboBoxItemProps, ComboBoxOption, ComboBoxProps, ControlPoint, CurveDomain, CurveEditorProps, DataGridColumn, DataGridProps, DialogProps, EdgeCap, EdgeProfile, EndpointMode, FieldOrientation, FieldProps, FillSettings, GradientTrackOpts, GridSettings, InputProps, InterpolationMode, KeyCapProps, KeyCapVariant, KeySequenceProps, KeySpec$1 as KeySpec, KeycapKind, LayerListItem, LogicalMod, LogicalModSpec, NumberFieldProps, OptionsBarItem, OptionsBarProps, OptionsBarSize, OptionsBarVariant, Platform, Plot2DCoords, Plot2DHandle, Plot2DProps, PointPlotterProps, PowerlineProps, PowerlineSegment, RadioGroupProps, RadioProps, RangeSliderProps, ReorderDragHandlers, ReorderDragState, RovingItem, RovingTabIndex, SelectItemProps, SelectOption, SelectProps, SidebarPanelProps, SidebarProps, SliderProps, SwitchProps, TabListProps, TabPanelProps, TabProps, TabsProps, Thumb, ThumbRenderCtx, ThumbShape, ToggleBarItem, ToggleBarProps, ToggleBarSize, ToggleBarVariant, ToolButtonProps, ToolGroupProps, ToolPaletteProps, TrackCtx, UseReorderDragListOptions, UseRovingTabIndexOptions };

package/dist/passthrough/weasel-ui.js

@@ -1,4 +1,4 @@
-export { m as ActionBar, s5 as ActionsBar, Ft as Badge, a as Button, o3 as Checkbox, p4 as ComboBox, m2 as ComboBoxItem, F as CurveEditor, l as DataGrid, c2 as Dialog, qe as EDGE_PROFILES, n as Field, u2 as Input, s2 as KeyCap, c as KeySequence, a2 as MINUS_SIGN, f3 as NumberField, s4 as OptionsBar, _ as Plot2D, n4 as PointPlotter, r as Powerline, u3 as Radio, l2 as RadioGroup, l3 as RangeSlider, p3 as Select, h as SelectItem, n2 as Sidebar, o4 as SidebarPanel, f2 as Slider, a3 as Switch, c3 as Tab, s6 as TabList, l4 as TabPanel, o6 as Tabs, s3 as ToggleBar, o5 as ToolButton, n3 as ToolGroup, _2 as ToolPalette, Re as chromaAt, u as detectPlatform, p as dlog, r2 as fieldClasses, o2 as formatNumber, d2 as formatShortcut, u4 as formatShortcutParts, o as inferKeycapKind, f as isDebugEnabled, e as keyGlyph, p2 as keySpecFromKey, d as keySpecsFromMods, Le as oklchToHex, p5 as paintGradientTrack, s as useReorderDragList } from '../chunk-FP5LYDVX.js';
-import '../chunk-XVBXYKFJ.js';
+export { m as ActionBar, r3 as ActionsBar, Ft as Badge, a as Button, o3 as Checkbox, p4 as ComboBox, m2 as ComboBoxItem, F as CurveEditor, l as DataGrid, c2 as Dialog, qe as EDGE_PROFILES, n as Field, u2 as Input, s2 as KeyCap, c as KeySequence, a2 as MINUS_SIGN, f3 as NumberField, r2 as OptionsBar, _ as Plot2D, n4 as PointPlotter, r4 as Powerline, u3 as Radio, l2 as RadioGroup, l3 as RangeSlider, p3 as Select, h as SelectItem, n2 as Sidebar, o4 as SidebarPanel, f2 as Slider, a4 as Switch, c3 as Tab, s3 as TabList, l4 as TabPanel, o6 as Tabs, r as ToggleBar, o5 as ToolButton, n3 as ToolGroup, _2 as ToolPalette, ze as chromaAt, u as detectPlatform, p as dlog, r5 as fieldClasses, o2 as formatNumber, d2 as formatShortcut, u4 as formatShortcutParts, o as inferKeycapKind, f as isDebugEnabled, e as keyGlyph, p2 as keySpecFromKey, d as keySpecsFromMods, Re as oklchToHex, p5 as paintGradientTrack, s as useReorderDragList, a3 as useRovingTabIndex } from '../chunk-NRD3TDNQ.js';
+import '../chunk-ISEK5LXT.js';
 //# sourceMappingURL=weasel-ui.js.map
 //# sourceMappingURL=weasel-ui.js.map

package/dist/ui/layers/index.js

@@ -1,5 +1,5 @@
-export { LayerStack } from '../../chunk-HNXVLKBG.js';
-import '../../chunk-FP5LYDVX.js';
-import '../../chunk-XVBXYKFJ.js';
+export { LayerStack } from '../../chunk-EXBV7A6X.js';
+import '../../chunk-NRD3TDNQ.js';
+import '../../chunk-ISEK5LXT.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasel-js/labkit",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "React widgets for building self-contained interactive lab pages",
   "license": "MIT",
   "author": "orochi235",

package/src/lab/Lab.tsx

@@ -1,13 +1,12 @@
+import { ThemeProvider } from '@weasel-js/theme/react';
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef } from 'react';
 import { useStore } from 'zustand/react';
-import { ThemeProvider } from '@weasel-js/theme/react';
 import type { Instrument } from '../instrument/types';
 import { noneAdapter } from '../state/adapters';
 import { LabStoreContext } from '../state/context';
 import { createLabStore, type LabStore } from '../state/store';
 import type { LabMode, StorageAdapter, WorkspaceRecord } from '../state/types';
 import { interstellarTheme } from '../theme/interstellar';
-import { useResolvedMode } from './useSystemMode';
 import { Workspace } from '../workspace/Workspace';
 import {
   addWorkspace as addWorkspaceOp,
@@ -17,6 +16,7 @@ import {
 } from '../workspace/workspaceOps';
 import { LabContext, type LabContextValue } from './LabContext';
 import { LabShell } from './LabShell';
+import { useResolvedMode } from './useSystemMode';
 import { WorkspaceGrid } from './WorkspaceGrid';
 
 export interface LabProps {

package/src/lab/LabShell.tsx

@@ -1,5 +1,5 @@
-import type { ReactNode } from 'react';
 import { ThemeProvider, useThemeOptional } from '@weasel-js/theme/react';
+import type { ReactNode } from 'react';
 import type { LabMode } from '../state/types';
 import { interstellarTheme } from '../theme/interstellar';
 import { useResolvedMode } from './useSystemMode';

package/src/passthrough/weasel-ui.ts

@@ -109,6 +109,8 @@ export {
   type RangeSliderProps,
   type ReorderDragHandlers,
   type ReorderDragState,
+  type RovingItem,
+  type RovingTabIndex,
   Select,
   SelectItem,
   type SelectItemProps,
@@ -146,5 +148,7 @@ export {
   type ToolPaletteProps,
   type TrackCtx,
   type UseReorderDragListOptions,
+  type UseRovingTabIndexOptions,
   useReorderDragList,
+  useRovingTabIndex,
 } from '@weasel-js/ui';

package/src/theme/Interstellar.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useTheme } from '@weasel-js/theme/react';
 import type { TokenName } from '@weasel-js/theme';
+import { useTheme } from '@weasel-js/theme/react';
 import {
   CheckboxRow,
   ColorRow,

package/src/theme/interstellar.test.ts

@@ -1,5 +1,5 @@
-import { describe, expect, it } from 'vitest';
 import { resolveTheme } from '@weasel-js/theme';
+import { describe, expect, it } from 'vitest';
 import { interstellarTheme } from './interstellar';
 
 describe('interstellarTheme', () => {

package/src/ui/properties/PropertyPanel.stories.tsx

@@ -24,7 +24,6 @@ interface DemoArgs {
 
 const meta: Meta<DemoArgs> = {
   title: 'labkit/UI/Properties/PropertyPanel',
-  component: PropertyPanel,
   argTypes: {
     title: { control: 'text' },
     pack: {