@weasel-js/labkit 1.5.2 → 1.6.0

package/src/lab/LabSwitcher.test.tsx

@@ -9,6 +9,8 @@ const PAGES = [
   { href: '/ingest', label: 'Ingestion' },
 ];
 
+const open2 = (name: string) =>
+  fireEvent.click(screen.getByRole('button', { name: new RegExp(name) }));
 const open = () => fireEvent.click(screen.getByRole('button', { name: /corpus stats/ }));
 
 describe('currentPage', () => {
@@ -27,6 +29,45 @@ describe('currentPage', () => {
   it('reports -1 for a page that is not one of them', () => {
     expect(currentPage('/bench', PAGES)).toBe(-1);
   });
+
+  // One document serving its pages from the hash: every href shares a path, so
+  // only the fragment can tell them apart.
+  const ROUTES = [
+    { href: '/app/', label: 'App' },
+    { href: '#/dev/tools', label: 'Tools' },
+    { href: '#/dev/registry', label: 'Registry' },
+  ];
+
+  it('tells hash routes on one document apart', () => {
+    expect(currentPage('/app/#/dev/registry', ROUTES)).toBe(2);
+    expect(currentPage('/app/#/dev/tools', ROUTES)).toBe(1);
+  });
+
+  it('matches a hash route through its own query and sub-routes', () => {
+    expect(currentPage('/app/#/dev/tools?bundle=minimal', ROUTES)).toBe(1);
+    expect(currentPage('/app/#/dev/tools/', ROUTES)).toBe(1);
+    expect(currentPage('/app/#/dev/registry/tool/rect', ROUTES)).toBe(2);
+    expect(currentPage('/app/#/dev/toolsets', ROUTES)).toBe(0);
+  });
+
+  it('falls back to the page without a hash when no route matches', () => {
+    expect(currentPage('/app/', ROUTES)).toBe(0);
+    expect(currentPage('/app/#/elsewhere', ROUTES)).toBe(0);
+  });
+
+  it('reads the hash off the current location by default', () => {
+    window.history.replaceState(null, '', '/app/#/dev/registry');
+    try {
+      render(<LabSwitcher title="Registry" pages={ROUTES} />);
+      open2('Registry');
+      expect(screen.getByRole('menuitem', { name: 'Registry' })).toHaveAttribute(
+        'aria-current',
+        'page',
+      );
+    } finally {
+      window.history.replaceState(null, '', '/');
+    }
+  });
 });
 
 describe('<LabSwitcher>', () => {

package/src/lab/LabSwitcher.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useId, useRef, useState } from 'react';
 
 /** One page in a project's set of labs. */
 export interface LabPage {
-  /** The page's own URL, and how the switcher knows which page is open. */
+  /** The page's own URL, and how the switcher knows which page is open. A
+   *  hash route (`#/dev/tools`) names a page on the current document. */
   href: string;
   label: string;
 }
@@ -18,18 +19,39 @@ export interface LabSwitcherProps {
   className?: string;
 }
 
+/** A URL split into the document it names and the hash route on it, each
+ *  without its query, trailing slash or `.html`. */
+function locate(url: string): { doc: string; route: string } {
+  const hash = url.indexOf('#');
+  const trim = (part: string) => part.replace(/\?.*$/, '').replace(/\/$/, '');
+  return {
+    doc: trim(hash < 0 ? url : url.slice(0, hash)).replace(/\.html$/, ''),
+    route: hash < 0 ? '' : trim(url.slice(hash + 1)),
+  };
+}
+
 /** Which of `pages` a path is on, or -1.
  *
  *  Matched on the end of the path so a query string, a trailing slash or a
  *  leftover `.html` cannot lose it: a project whose dev server maps `/stats`
  *  to `stats.html` serves both spellings, and a bookmark from before the URLs
- *  lost their extension still resolves to the same page. */
+ *  lost their extension still resolves to the same page.
+ *
+ *  A page whose `href` carries a hash is a route on a single document and wins
+ *  when the path's hash is that route or one under it. A page without one
+ *  ignores the hash, so an in-page anchor does not lose it. */
 export function currentPage(path: string, pages: readonly LabPage[]): number {
-  const here = path
-    .replace(/[?#].*$/, '')
-    .replace(/\/$/, '')
-    .replace(/\.html$/, '');
-  return pages.findIndex((p) => here.endsWith(p.href.replace(/\.html$/, '')));
+  const here = locate(path);
+  const onDoc = (doc: string) => here.doc.endsWith(doc);
+  const routed = pages.findIndex((p) => {
+    if (!p.href.includes('#')) return false;
+    const page = locate(p.href);
+    return (
+      onDoc(page.doc) && (here.route === page.route || here.route.startsWith(`${page.route}/`))
+    );
+  });
+  if (routed >= 0) return routed;
+  return pages.findIndex((p) => !p.href.includes('#') && onDoc(locate(p.href).doc));
 }
 
 /** A project's lab title, doubling as the way to reach its other labs.
@@ -47,7 +69,7 @@ export function LabSwitcher({ title, pages, path, className }: LabSwitcherProps)
   const root = useRef<HTMLDivElement>(null);
   const menuId = useId();
   const here = currentPage(
-    path ?? (typeof window === 'undefined' ? '' : window.location.pathname),
+    path ?? (typeof window === 'undefined' ? '' : window.location.pathname + window.location.hash),
     pages,
   );
 

package/src/lab/index.ts

@@ -1,5 +1,6 @@
 export type { LabProps } from './Lab';
 export { Lab } from './Lab';
+export { LabBoundary, type LabBoundaryProps } from './LabBoundary';
 export type { LabContextValue } from './LabContext';
 export { LabContext, useLabContext } from './LabContext';
 export type { LabPaletteProps } from './LabPalette';

package/src/layers/AGENTS.md

@@ -1,33 +1,11 @@
 # Layers — Agent Guide
 
-The `src/layers/` directory implements the `<LayerList>` UI used by the `layers` instrument capability.
+`src/layers/` re-exports `<LayerList>` from `@weasel-js/ui`, along with the
+`layers` capability types. The component itself — rows, cards, nesting,
+selection, visibility, reorder — is documented at its source in
+`packages/ui/src/components/LayerList/`.
 
-## Files
-
-| File | Role |
-|---|---|
-| `LayerList.tsx` | Layer toggle/reorder list, flat or nested (sidebar widget) |
-| `LayerList.less` | Row styling, drag handle, pinned-row variant, subtree indent |
-| `LayerList.stories.tsx` | Flat and nested renderings |
-
-## Props
-
-```ts
-interface LayerListProps {
-  layers: LayerTreeNode[];                      // LayerDescriptor + { children?, defaultCollapsed? }
-  visibility: Record<string, boolean>;          // missing key → visible
-  onReorder: (newOrder: LayerTreeNode[]) => void;
-  onToggle: (id: string, visible: boolean) => void;
-  collapsedIds?: readonly string[];             // supplying it makes collapse controlled
-  onCollapsedChange?: (ids: string[]) => void;
-  className?: string;
-}
-```
-
-`LayerDescriptor` lives in `src/instrument/types.ts`; `LayerTreeNode` extends it
-in `LayerList.tsx`, so a plain `LayerDescriptor[]` is still a valid `layers`.
-
-## How it integrates
+## How the capability uses it
 
 The instrument declares layer ids:
 
@@ -35,53 +13,19 @@ The instrument declares layer ids:
 layers: { ids: ['grid', 'plants'] }
 ```
 
-`Trial.tsx` converts each id into a `LayerDescriptor` (with `label === id` by default) and tracks `visibility` and a derived `layerOrder` in local state. The order produced by `onReorder` is then applied to `instrument.canvas.layers` before they're passed to `<CanvasStack>`.
-
-There is no transitive coupling between `layers.ids` and `canvas.layers[].id` — the trial assumes the ids match. If you declare a layer in `canvas` that isn't in `layers.ids`, it stays in default order and is always visible.
-
-## `alwaysOn` semantics
-
-Setting `alwaysOn: true` on a `LayerDescriptor` does two things:
-
-1. The row renders with a 🔒 badge instead of a drag handle and visibility checkbox.
-2. The row is excluded from reorder operations — pinned rows always sort to the bottom of the rendered list.
-
-This is intended for legend/HUD layers that should never be toggled off. Visibility for pinned rows is **not** read from the `visibility` prop; they always render.
-
-## Nesting
-
-A node with `children` renders an expandable subtree. The expand control is
-`<Disclosure>` from `@weasel-js/ui` — the same twisty every other collapsible
-surface uses.
-
-Reordering is scoped to siblings: a drag moves a row within its own parent's
-child list and never reparents it. `onReorder` still receives the whole tree,
-with only that sibling group's order changed.
-
-The twisty column appears only when some node in the tree has children — a flat
-list renders exactly the rows it always did. Within a tree, childless rows get
-`.lk-layer-list__twisty-gap` so labels stay aligned down a level.
-
-Collapse is uncontrolled by default, seeded once from each node's
-`defaultCollapsed`. Pass `collapsedIds` to own it; `onCollapsedChange` fires
-either way.
-
-## Drag handle customization
-
-The drag handle is a button with class `lk-layer-list__handle` holding `<DragHandleGlyph>` (from `@weasel-js/ui`), the same grip `LayerStack` uses. Its padding is transparent and cancelled by an equal negative margin, so the grab target is larger than the drawn dots without widening the row. Row pitch — height plus row gap — is measured from the DOM when a drag starts, so restyling the row does not skew drag distance. It used to be a hardcoded `28`, which had already drifted from the rendered height by the time it was found.
-
-Pointer capture is acquired on `pointerdown` and released on `pointerup`, so dragging works across the document without requiring window-level listeners.
-
-## Empty state
-
-If `layers.length === 0`, renders `.lk-layer-list__empty` with the text "No layers". Trial already guards this case (`layerDescriptors.length > 0`) so the empty state is rare in practice.
+`Trial.tsx` turns each id into a `LayerDescriptor` (`label === id` unless the
+entry is a descriptor), keeps `visibility` and `layerOrder` in local state, and
+builds the list's items from them in the order the canvas draws. The order a
+drag produces is applied to `instrument.canvas.layers` before they reach
+`<CanvasStack>`, and each toggle and reorder emits `layers.toggle` /
+`layers.reorder` on the bus.
 
-## When to fork
+`layers.ids` and `canvas.layers[].id` are assumed to match. A canvas layer not
+in `layers.ids` keeps its default order and is always visible.
 
-Fork this component if you need:
-- Multi-select reorder (current implementation is single-row)
-- Right-click context menu
-- Reparenting by drag (nesting renders, but a drag stays within one parent)
-- Solo/mute UI common in DAW-style apps
+## `alwaysOn`
 
-It is self-contained: `LayerDescriptor` from instrument types and `Disclosure`/`DragHandleGlyph` from `@weasel-js/ui`.
+A descriptor with `alwaysOn: true` becomes a `locked` item, pinned below the
+rest: it shows a lock in place of the grip and has no visibility checkbox,
+cannot be dragged, and no drag can cross it. It always renders, whatever
+`visibility` says. Intended for legend and HUD layers.

package/src/layers/index.ts

@@ -1,3 +1,5 @@
+// LayerList lives in `@weasel-js/ui`. Named, not `export *` — a star re-export
+// of an external package emits no binding in the bundle.
+export type { LayerListItem, LayerListProps, LayerMove } from '@weasel-js/ui';
+export { LayerList, moveLayers } from '@weasel-js/ui';
 export type { LayerCapability, LayerDescriptor } from '../instrument/types';
-export type { LayerListProps, LayerTreeNode } from './LayerList';
-export { LayerList } from './LayerList';

package/src/passthrough/weasel-ui.ts

@@ -8,11 +8,6 @@
 export {
   ActionBar,
   type ActionBarProps,
-  ActionsBar,
-  type ActionsBarItem,
-  type ActionsBarProps,
-  type ActionsBarSize,
-  type ActionsBarVariant,
   type AddPointMode,
   type AnchorRenderProps,
   type AsyncOption,
@@ -22,12 +17,17 @@ export {
   type BadgeProps,
   type BadgeShape,
   type BadgeSize,
-  type BadgeTone,
+  type BadgeStatus,
   type BadgeVariant,
   type BoundsCtx,
   type BuiltInEdgeName,
   type BuiltinPref,
   Button,
+  ButtonBar,
+  type ButtonBarItem,
+  type ButtonBarProps,
+  type ButtonBarSize,
+  type ButtonBarVariant,
   type ButtonProps,
   type ButtonSize,
   type ButtonVariant,
@@ -38,6 +38,8 @@ export {
   type CheckboxProps,
   type ChromaCurve,
   type ChromaCurvePoint,
+  ColorModeControl,
+  type ColorModeControlProps,
   ComboBox,
   type ComboBoxCommit,
   type ComboBoxFilter,
@@ -56,10 +58,13 @@ export {
   Dialog,
   type DialogProps,
   Disclosure,
-  type DisclosureDirection,
+  DisclosureMark,
+  type DisclosureMarkProps,
   type DisclosureProps,
   DisclosureRow,
   type DisclosureRowProps,
+  DragGhost,
+  type DragGhostProps,
   DragHandleGlyph,
   type DragHandleGlyphProps,
   detectPlatform,
@@ -98,16 +103,20 @@ export {
   keyGlyph,
   keySpecFromKey,
   keySpecsFromMods,
+  keySpecsFromShortcut,
+  LayerList,
   type LayerListItem,
-  LayerStack,
-  type LayerStackItem,
-  type LayerStackProps,
+  type LayerListProps,
+  type LayerMove,
+  ListEditor,
+  type ListEditorProps,
   type LogicalMod,
   type LogicalModSpec,
   MenuButton,
   type MenuButtonItem,
   type MenuButtonProps,
   MINUS_SIGN,
+  moveLayers,
   NumberField,
   type NumberFieldProps,
   OptionsBar,
@@ -145,6 +154,11 @@ export {
   type PrefRenderer,
   type PrefString,
   type PrefStringControl,
+  PrefsDialog,
+  type PrefsDialogProps,
+  PrefsForm,
+  type PrefsFormProps,
+  type PrefsLayout,
   paintGradientTrack,
   prefValueAtPath,
   Radio,
@@ -155,6 +169,7 @@ export {
   type RangeSliderProps,
   type ReorderDragHandlers,
   type ReorderDragState,
+  type ReorderGhost,
   type RovingItem,
   type RovingTabIndex,
   Select,

package/src/primitives/index.ts

@@ -7,8 +7,6 @@ export type { LegendEntry, LegendMark, LegendProps } from './Legend';
 export { Legend } from './Legend';
 export type { ScaleIndicatorProps } from './ScaleIndicator';
 export { ScaleIndicator } from './ScaleIndicator';
-export type { SidebarProps } from './Sidebar';
-export { Sidebar } from './Sidebar';
 export type { SplitProps } from './Split';
 export { Split } from './Split';
 export type { StatusBarProps, StatusBarSectionProps } from './StatusBar';

package/src/specimen/Specimen.tsx

@@ -1,15 +1,13 @@
 import type { FillStyle, GradientFill, Track } from '@weasel-js/core';
 import {
-  ActionsBar,
   Badge,
   type Band,
   BandEditor,
   Button,
+  ButtonBar,
   Callout,
   Checkbox,
-  CheckboxRow,
   ColorField,
-  ColorRow,
   ComboBox,
   type ControlPoint,
   CurveEditor,
@@ -24,11 +22,11 @@ import {
   ItemList,
   KeyCap,
   KeySequence,
-  LayerStack,
-  type LayerStackItem,
+  LayerList,
+  type LayerListItem,
   MenuButton,
+  moveLayers,
   NumberField,
-  NumberRow,
   OptionsBar,
   PaintInput,
   Plot2D,
@@ -36,6 +34,7 @@ import {
   Powerline,
   type PrefGroup,
   PrefsForm,
+  PropertyField,
   PropertyGroup,
   PropertyList,
   PropertyPanel,
@@ -44,10 +43,9 @@ import {
   RangeSlider,
   ResizeHandle,
   Select,
-  SelectRow,
+  Sidebar,
   SidebarPanel,
   Slider,
-  SliderRow,
   StatusBarItem,
   StatusBarSpacer,
   Switch,
@@ -55,18 +53,15 @@ import {
   TabList,
   TabPanel,
   Tabs,
-  TextRow,
   type Thumb,
   Timeline,
   ToastRegion,
   ToggleBar,
-  ToggleRow,
   ToolButton,
   ToolGroup,
   ToolOptionsBar,
   Tooltip,
   TooltipTrigger,
-  Sidebar as UiSidebar,
   StatusBar as UiStatusBar,
 } from '@weasel-js/ui';
 import { type CSSProperties, type ReactNode, useId, useMemo, useRef, useState } from 'react';
@@ -76,7 +71,6 @@ import { FloatingPanel } from '../primitives/FloatingPanel';
 import { JobProgress } from '../primitives/JobProgress';
 import { Legend, type LegendEntry } from '../primitives/Legend';
 import { ScaleIndicator } from '../primitives/ScaleIndicator';
-import { Sidebar } from '../primitives/Sidebar';
 import { Split } from '../primitives/Split';
 import { StatusBar } from '../primitives/StatusBar';
 import { Toolbar } from '../primitives/Toolbar';
@@ -213,19 +207,19 @@ function ButtonsAndToggles() {
       </Cell>
       <Cell label="Badge">
         <div className="lk-specimen__row">
-          <Badge shape="pill" tone="accent" variant="outline" size="sm">
+          <Badge shape="pill" status="accent" variant="outline" size="sm">
             ACCENT
           </Badge>
-          <Badge tone="info" variant="subtle">
+          <Badge status="info" variant="subtle">
             INFO
           </Badge>
-          <Badge tone="warn" variant="solid">
+          <Badge status="warn" variant="solid">
             WARN
           </Badge>
-          <Badge tone="danger" variant="solid">
+          <Badge status="danger" variant="solid">
             DANGER
           </Badge>
-          <Badge tone="muted">MUTED</Badge>
+          <Badge status="muted">MUTED</Badge>
         </div>
       </Cell>
       <Cell label="Checkbox, Switch">
@@ -269,7 +263,7 @@ function ButtonsAndToggles() {
           ]}
         />
       </Cell>
-      <Cell label="OptionsBar, ActionsBar">
+      <Cell label="OptionsBar, ButtonBar">
         <div className="lk-specimen__row">
           <OptionsBar
             ariaLabel="Text style"
@@ -278,7 +272,7 @@ function ButtonsAndToggles() {
               { value: 'i', label: 'I', selected: italic, onChange: setItalic },
             ]}
           />
-          <ActionsBar
+          <ButtonBar
             items={[
               { value: 'undo', label: 'Undo', onAction: () => {} },
               { value: 'redo', label: 'Redo', onAction: () => {} },
@@ -297,7 +291,6 @@ function ButtonsAndToggles() {
             ]}
           />
           <Disclosure open={open} onToggle={() => setOpen((o) => !o)} label="Shapes" />
-          <Disclosure open={false} onToggle={() => {}} label="Down" direction="down" />
         </div>
       </Cell>
       <Cell label="Tabs">
@@ -436,7 +429,7 @@ function PanelsAndRows() {
   const [label, setLabel] = useState('Badge');
   const [visible, setVisible] = useState(true);
   const [prefs, setPrefs] = useState<Record<string, unknown>>({});
-  const [layers, setLayers] = useState<LayerStackItem[]>([
+  const [layers, setLayers] = useState<LayerListItem[]>([
     { id: 'base', label: 'Base coat' },
     { id: 'wash', label: 'Wash' },
   ]);
@@ -446,7 +439,9 @@ function PanelsAndRows() {
       <Cell label="PropertyPanel">
         <PropertyPanel title="Shape">
           <PropertyList>
-            <SliderRow
+            <PropertyField
+              kind="number"
+              control="slider"
               label="Opacity"
               value={opacity}
               min={0}
@@ -454,7 +449,9 @@ function PanelsAndRows() {
               step={0.01}
               onChange={setOpacity}
             />
-            <SliderRow
+            <PropertyField
+              kind="number"
+              control="slider"
               label="Radius"
               value={radius}
               min={0}
@@ -462,16 +459,18 @@ function PanelsAndRows() {
               unit="px"
               onChange={setRadius}
             />
-            <ColorRow
+            <PropertyField
+              kind="color"
               label="Fill"
               value={fill}
               onChange={setFill}
               alpha={alpha}
               onAlphaChange={setAlpha}
             />
-            <ColorRow label="Stroke" value={stroke} onChange={setStroke} />
-            <NumberRow label="Count" value={count} min={0} max={100} step={1} onChange={setCount} />
-            <SelectRow
+            <PropertyField kind="color" label="Stroke" value={stroke} onChange={setStroke} />
+            <PropertyField kind="number" label="Count" value={count} min={0} max={100} step={1} onChange={setCount} />
+            <PropertyField
+              kind="enum"
               label="Line cap"
               value={cap}
               onChange={setCap}
@@ -480,7 +479,9 @@ function PanelsAndRows() {
                 { value: 'round', label: 'Round' },
               ]}
             />
-            <ToggleRow
+            <PropertyField
+              kind="enum"
+              control="toggle"
               label="Align"
               value={side}
               onChange={setSide}
@@ -490,10 +491,10 @@ function PanelsAndRows() {
                 { value: 'right', label: 'R' },
               ]}
             />
-            <TextRow label="Label" value={label} onChange={setLabel} />
-            <CheckboxRow label="Visible" value={visible} onChange={setVisible} />
+            <PropertyField kind="string" label="Label" value={label} onChange={setLabel} />
+            <PropertyField kind="boolean" label="Visible" value={visible} onChange={setVisible} />
             <PropertyGroup title="Bevel" defaultCollapsed>
-              <SliderRow label="Rings" value={32} min={4} max={96} step={1} onChange={() => {}} />
+              <PropertyField kind="number" control="slider" label="Rings" value={32} min={4} max={96} step={1} onChange={() => {}} />
             </PropertyGroup>
           </PropertyList>
         </PropertyPanel>
@@ -505,18 +506,16 @@ function PanelsAndRows() {
           onChange={(path, value) => setPrefs((prev) => setAt(prev, path, value))}
         />
       </Cell>
-      <Cell label="LayerStack">
-        <LayerStack
+      <Cell label="LayerList">
+        <LayerList
           items={layers}
-          onReorder={(ids) =>
-            setLayers(ids.flatMap((id) => layers.filter((item) => item.id === id)))
-          }
+          onReorder={(move) => setLayers(moveLayers(layers, move))}
           renderBody={(item) => <div>settings for {item.label}</div>}
         />
       </Cell>
       <Cell label="Sidebar, SidebarPanel">
         <div className="lk-specimen__box">
-          <UiSidebar side="right" ariaLabel="Specimen sidebar">
+          <Sidebar side="right" ariaLabel="Specimen sidebar">
             <SidebarPanel
               title="Selection"
               collapsed={panelCollapsed}
@@ -525,7 +524,7 @@ function PanelsAndRows() {
             >
               <div className="lk-specimen__pad">2 items selected</div>
             </SidebarPanel>
-          </UiSidebar>
+          </Sidebar>
         </div>
       </Cell>
     </Section>
@@ -554,8 +553,8 @@ function OverlaysAndFeedback() {
             triggerRef={calloutAnchor}
             isOpen={calloutOpen}
             onOpenChange={setCalloutOpen}
-            tone="info"
-            title="Info"
+            stance="notice"
+            title="Notice"
           >
             Neutral guidance.
           </Callout>
@@ -587,9 +586,9 @@ function OverlaysAndFeedback() {
           variant="solid"
           size="sm"
           segments={[
-            { text: 'main', tone: 'accent', endCap: 'chevron' },
-            { text: '✓ 12', tone: 'info', endCap: 'slant' },
-            { text: '~/proj', tone: 'muted' },
+            { text: 'main', status: 'accent', endCap: 'chevron' },
+            { text: '✓ 12', status: 'info', endCap: 'slant' },
+            { text: '~/proj', status: 'muted' },
           ]}
         />
       </Cell>
@@ -799,7 +798,6 @@ function EditorsAndPlots() {
 }
 
 function LabChrome() {
-  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
   const [zoom, setZoom] = useState(1);
   return (
     <Section title="Lab chrome">
@@ -823,18 +821,6 @@ function LabChrome() {
           <StatusBar.Section>Zoom: 100%</StatusBar.Section>
         </StatusBar>
       </Cell>
-      <Cell label="Sidebar">
-        <div className="lk-specimen__box">
-          <div className="lk-specimen__box-main">main</div>
-          <Sidebar
-            title="Controls"
-            collapsed={sidebarCollapsed}
-            onToggle={() => setSidebarCollapsed((v) => !v)}
-          >
-            <p>One slider</p>
-          </Sidebar>
-        </div>
-      </Cell>
       <Cell label="Legend, JobProgress">
         <Legend entries={LEGEND} />
         <JobProgress job={JOB} />

package/src/state/types.ts

@@ -1,3 +1,4 @@
+import type { ColorModePreference } from '@weasel-js/theme';
 import type { Auto } from '../config/auto';
 import type { ConfigPath, ResolvedConfig, ValueAtPath } from '../config/types';
 import type { InstrumentList } from '../instrument/types';
@@ -78,7 +79,7 @@ export interface SavedSnapshot {
 }
 
 /** `auto` follows the OS; the other two are an explicit choice. */
-export type LabMode = 'auto' | 'light' | 'dark';
+export type LabMode = ColorModePreference;
 
 /** How much room the lab's own chrome takes — the theme's density axis, named
  *  the way the theme names it. A lab's instruments are unaffected: this sizes

package/src/styles.less

@@ -1,10 +1,12 @@
 // Imports compile-time only. Component .less files are added in later steps.
+// Left as a CSS @import for the consumer's bundler to resolve; build-css.mjs
+// swaps it for the faces themselves, pointed at dist/fonts/.
+@import (css) '@weasel-js/theme/faces.css';
 @import './theme/base.less';
 @import './lab/Workspace.less';
 @import './lab/LabShell.less';
 @import './lab/LabSwitcher.less';
 @import './primitives/Toolbar.less';
-@import './primitives/Sidebar.less';
 @import './primitives/Split.less';
 @import './primitives/ZoomControl.less';
 @import './primitives/StatusBar.less';
@@ -17,11 +19,11 @@
 @import './trial/Trial.less';
 @import './chrome/regions/ViewportRegion.less';
 @import './chrome/regions/PaletteRegion.less';
+@import './chrome/regions/SidebarRegion.less';
 @import './controls/ControlPanel.less';
 @import './canvas/CanvasStack.less';
 @import './canvas/Stage.less';
 @import './loupe/Loupe.less';
-@import './layers/LayerList.less';
 @import './annotations/Annotations.less';
 @import './dragdrop/Palette.less';
 @import './dragdrop/DragGhost.less';