@weasel-js/labkit 1.5.2 → 1.6.0

package/src/controls/inDialog.tsx

@@ -0,0 +1,46 @@
+import { DialogRow } from '@weasel-js/ui';
+import type { ReactNode } from 'react';
+import type { ControlRenderer } from '../config/types';
+
+/** Options for {@link inDialog}. */
+export interface InDialogOptions {
+  /** What the row's button shows of the value. Defaults to a list joined with
+   *  commas, or the value itself. */
+  summary?: (value: unknown) => ReactNode;
+  /** The dialog's heading. Defaults to the row's label. */
+  title?: ReactNode;
+}
+
+/** The one-line summary a dialog row shows when it is given none. */
+export function summarizeValue(value: unknown): string {
+  if (Array.isArray(value)) return value.length === 0 ? 'None' : value.join(', ');
+  if (value === undefined || value === null || value === '') return 'None';
+  return typeof value === 'object' ? JSON.stringify(value) : String(value);
+}
+
+/**
+ * Moves a control into a modal: the row becomes a button showing a summary of
+ * the value, and the button opens a dialog whose body is `body`, handed the
+ * same context a row renderer gets. For a leaf whose editor will never fit a
+ * sidebar row.
+ */
+export function inDialog(body: ControlRenderer, opts: InDialogOptions = {}): ControlRenderer {
+  const summary = opts.summary ?? summarizeValue;
+  return (ctx) => {
+    const { pref, value, auto, setAuto } = ctx;
+    const manual = (pref as { manual?: boolean }).manual === true;
+    return (
+      <DialogRow
+        label={pref.name}
+        description={pref.description}
+        summary={summary(value)}
+        title={opts.title}
+        readout={auto ? 'auto' : undefined}
+        auto={auto}
+        onAutoChange={manual ? undefined : setAuto}
+      >
+        {() => body(ctx)}
+      </DialogRow>
+    );
+  };
+}

package/src/controls/index.ts

@@ -1,4 +1,5 @@
 export { ControlPanel } from './ControlPanel';
+export { type InDialogOptions, inDialog, summarizeValue } from './inDialog';
 export type {
   CheckboxField,
   ColorField,

package/src/index.ts

@@ -1,4 +1,4 @@
-// The property-panel family, LayerStack, Input, Select, TokenPanel, ToggleBar and Button live in
+// The property-panel family, LayerList, Input, Select, TokenPanel, ToggleBar and Button live in
 // `@weasel-js/ui`; labkit re-exports them so chrome built on labkit needs no
 // direct ui dependency. Named, not `export *` — a star re-export of an external
 // package emits no binding in the bundle.
@@ -8,19 +8,13 @@ export type {
   ButtonProps,
   ButtonSize,
   ButtonVariant,
-  CheckboxRowProps,
-  ColorRowProps,
   CurveFieldProps,
   CurveMark,
-  EffectCardListItem,
-  EffectCardListProps,
-  EffectCardProps,
   IconProps,
   InputProps,
   JogProps,
-  LayerStackItem,
-  LayerStackProps,
-  NumberRowProps,
+  PropertyControlProps,
+  PropertyFieldProps,
   PropertyGroupProps,
   PropertyListPack,
   PropertyListProps,
@@ -31,15 +25,11 @@ export type {
   PropertyRowVariant,
   PropertySpanProps,
   SelectProps,
-  SelectRowProps,
-  SliderRowProps,
   SubpanelProps,
-  TextRowProps,
   ToggleBarItem,
   ToggleBarProps,
   ToggleBarSize,
   ToggleBarVariant,
-  ToggleRowProps,
   TokenCategory,
   TokenEntry,
   TokenPanelProps,
@@ -48,39 +38,31 @@ export type {
 } from '@weasel-js/ui';
 export {
   Button,
-  CheckboxRow,
   CloseIcon,
   CollapseIcon,
-  ColorRow,
   CurveField,
-  EffectCard,
-  EffectCardList,
   ExpandIcon,
   Icon,
   Input,
   inferTokenType,
   Jog,
-  LayerStack,
-  NumberRow,
   PauseIcon,
   PlayIcon,
+  PropertyControl,
+  PropertyField,
   PropertyGroup,
   PropertyList,
   PropertyPanel,
   PropertyRow,
   PropertySpan,
-  refitScale,
   ResetIcon,
+  refitScale,
   Select,
-  SelectRow,
-  SliderRow,
   StepBackIcon,
   StepForwardIcon,
   StopIcon,
   Subpanel,
-  TextRow,
   ToggleBar,
-  ToggleRow,
   TokenPanel,
 } from '@weasel-js/ui';
 export type {
@@ -185,11 +167,13 @@ export {
   f,
   GroupNode,
   isConfigBranch,
+  ListNode,
   NumberNode,
   StringNode,
   ValueNode,
 } from './config/builder';
 export { fromConfigFields } from './config/fromConfigField';
+export { type SectionTree, sectionTree } from './config/sectionTree';
 export {
   fillConfigDefaults,
   hasConfigPath,
@@ -227,6 +211,7 @@ export { useConfigSchema } from './config/useConfigSchema';
 export { useResolvedConfig } from './config/useResolvedConfig';
 export { isLeafVisible } from './config/visible';
 export { ControlPanel } from './controls/ControlPanel';
+export { type InDialogOptions, inDialog, summarizeValue } from './controls/inDialog';
 export type {
   CheckboxField,
   ColorField,
@@ -262,8 +247,8 @@ export type { ValidationResult } from './instrument/validateConfigSchema';
 export { validateConfigSchema } from './instrument/validateConfigSchema';
 export * from './job';
 export * from './lab';
-export type { LayerListProps, LayerTreeNode } from './layers';
-export { LayerList } from './layers';
+export type { LayerListItem, LayerListProps, LayerMove } from './layers';
+export { LayerList, moveLayers } from './layers';
 export * from './loupe';
 export * from './primitives';
 export { SPECIMEN_SECTIONS, Specimen } from './specimen/Specimen';

package/src/instrument/types.ts

@@ -70,7 +70,7 @@ export interface CanvasCapability<TS = unknown, TC = unknown> {
 /** Declares that an instrument's DOM is content of a fixed size, which the
  *  trial pans and zooms the way it does a canvas's layers. Not combined with
  *  `canvas`: there the DOM is an unzoomed overlay, and `canvas` wins. */
-export interface StageCapability {
+export interface StageCapability<TS = unknown, TC = unknown> {
   /** The content's own size in CSS pixels, at zoom 1. */
   size: ViewportSize;
   /** Where the view starts. Omitted, the content opens centered and shrunk to
@@ -78,6 +78,9 @@ export interface StageCapability {
   initialView?: ViewTransform | ((viewport: ViewportSize) => ViewTransform);
   minZoom?: number;
   maxZoom?: number;
+  /** Drawn over the content in viewport pixels, outside the camera — a legend,
+   *  a floating panel, anything that must not zoom with the picture. */
+  overlay?: (ctx: RenderContext<TS, TC>) => ReactNode;
 }
 
 /** Declares which of an instrument's layers the trial should offer
@@ -159,7 +162,7 @@ export interface Instrument<TS = unknown, TC = unknown, TItem = unknown> {
   serialize?: (state: TS) => unknown;
   deserialize?: (data: unknown, config: TC) => TS;
   canvas?: CanvasCapability<TS, TC>;
-  stage?: StageCapability;
+  stage?: StageCapability<TS, TC>;
   layers?: LayerCapability;
   dragDrop?: DragDropCapability<TS, TC>;
   undo?: UndoCapability;

package/src/lab/Lab.nebula.test.tsx

@@ -0,0 +1,31 @@
+import { render } from '@testing-library/react';
+import { resolveTheme } from '@weasel-js/theme';
+import { describe, expect, it } from 'vitest';
+import type { Instrument } from '../instrument/types';
+import { interstellarTheme } from '../theme/interstellar';
+import { Lab } from './Lab';
+
+const bare: Instrument = {
+  name: 'Bare',
+  defaultConfig: () => ({}),
+  initialState: () => ({}),
+  render: () => null,
+};
+
+const backdrop = (container: HTMLElement) =>
+  [...container.querySelectorAll<HTMLElement>('[style]')]
+    .map((el) => el.style.getPropertyValue('--wzl-backdrop'))
+    .find(Boolean) ?? '';
+
+describe('<Lab nebula>', () => {
+  it('draws one blob per literal color', () => {
+    const { container } = render(<Lab instruments={[bare]} defaultInstrument="Bare" mode="dark" nebula={['#ff0000', '#00ff00']} />);
+    expect(backdrop(container).match(/radial-gradient/g)).toHaveLength(3);
+  });
+
+  it('resolves a theme ramp against the lab’s theme', () => {
+    const { container } = render(<Lab instruments={[bare]} defaultInstrument="Bare" mode="dark" nebula={{ ramp: 'swatch' }} />);
+    const sky = resolveTheme(interstellarTheme, { mode: 'dark' })['--wzl-swatch-sky'];
+    expect(backdrop(container)).toContain(sky);
+  });
+});

package/src/lab/Lab.tsx

@@ -1,4 +1,5 @@
-import { ThemeProvider } from '@weasel-js/theme/react';
+import { type ColorList, colorAt, colorCount, resolveTheme, type Theme } from '@weasel-js/theme';
+import { ThemeProvider, useResolvedColorMode } from '@weasel-js/theme/react';
 import {
   type CSSProperties,
   type ReactNode,
@@ -54,7 +55,6 @@ import { LabPalette } from './LabPalette';
 import { LabShell } from './LabShell';
 import type { LabPage } from './LabSwitcher';
 import { createPanelHostRegistry, PanelHostContext } from './panelHost';
-import { useResolvedMode } from './useSystemMode';
 import { type PanelDescriptor, type TrialLayout, Workspace } from './Workspace';
 
 interface LabBaseProps {
@@ -68,15 +68,20 @@ interface LabBaseProps {
    *  window is the whole app, rather than a panel beside one, reads better at
    *  `'roomy'`. The trials' own contents are unaffected. */
   density?: LabDensity;
+  /** The theme the lab's chrome resolves against, applied at `mode` and
+   *  `density`. Default `interstellarTheme`; extend it rather than replace it to
+   *  keep the lab's look while changing a few tokens. */
+  theme?: Theme;
   /** Rendered while a stored lab loads. Default: the lab's empty shell. */
   fallback?: ReactNode;
   /**
-   * Optional list of CSS colors used to compose the interstellar theme's
-   * cosmic backdrop. Each color becomes one radial-gradient blob on the
-   * dark void base. Order maps to a fixed spread of positions; extras wrap
-   * around. Ignored unless the resolved mode is dark.
+   * Colors composing the interstellar theme's cosmic backdrop. Each becomes
+   * one radial-gradient blob on the dark void base, in a fixed spread of
+   * positions; extras wrap around. A theme ramp resolves against the lab's
+   * theme; a function list gives as many blobs as there are positions.
+   * Ignored unless the resolved mode is dark.
    */
-  nebula?: readonly string[];
+  nebula?: ColorList;
   title?: string;
   /** The project's other labs. Given two or more, the title becomes the way to
    *  reach them — the same switcher `<LabShell>` renders, so a lab reached from
@@ -180,13 +185,14 @@ function LabFallback({
   title,
   mode,
   density,
+  theme = interstellarTheme,
   pages,
   path,
-}: Pick<LabBaseProps, 'title' | 'mode' | 'density' | 'pages' | 'path'>) {
-  const resolvedMode = useResolvedMode(mode ?? 'auto');
+}: Pick<LabBaseProps, 'title' | 'mode' | 'density' | 'theme' | 'pages' | 'path'>) {
+  const resolvedMode = useResolvedColorMode(mode ?? 'auto');
   return (
     <ThemeProvider
-      theme={interstellarTheme}
+      theme={theme}
       selection={{ mode: resolvedMode, density: density ?? 'comfortable' }}
       className="lk-lab"
     >
@@ -214,7 +220,15 @@ const NEBULA_SLOTS = [
   { cx: '85%', cy: '18%', sx: '55%', sy: '80%', stop: '70%' },
 ] as const;
 
-function buildNebula(colors: readonly string[]): string {
+function buildNebula(
+  list: ColorList,
+  theme: Theme,
+  mode: 'light' | 'dark',
+  density: string,
+): string {
+  const ctx = { theme, resolved: resolveTheme(theme, { mode, density }) };
+  const n = colorCount(list, ctx) ?? NEBULA_SLOTS.length;
+  const colors = Array.from({ length: n }, (_, i) => colorAt(list, i, ctx));
   const blobs = colors.map((c, i) => {
     const p = NEBULA_SLOTS[i % NEBULA_SLOTS.length];
     return `radial-gradient(ellipse ${p.sx} ${p.sy} at ${p.cx} ${p.cy}, color-mix(in srgb, ${c} 22%, transparent), transparent ${p.stop})`;
@@ -302,6 +316,7 @@ export function Lab(props: LabProps) {
         title={props.title}
         mode={props.mode}
         density={props.density}
+        {...(props.theme ? { theme: props.theme } : {})}
         pages={props.pages}
         path={props.path}
       />
@@ -314,6 +329,7 @@ function LabRuntime({
   instruments,
   mode,
   density,
+  theme = interstellarTheme,
   nebula,
   title,
   pages,
@@ -455,7 +471,7 @@ function LabRuntime({
       })),
     [undockedPanels],
   );
-  const resolvedMode = useResolvedMode(modeValue);
+  const resolvedMode = useResolvedColorMode(modeValue);
 
   // Tools and lab contributions share one id namespace, so they merge once
   // here — before any region renders — and a collision throws rather than one
@@ -564,8 +580,15 @@ function LabRuntime({
   // Only override the backdrop in dark, where there is one to override.
   // Setting a CSS custom property is the sanctioned use of inline style.
   const backdropStyle =
-    resolvedMode === 'dark' && nebula && nebula.length > 0
-      ? ({ ['--wzl-backdrop' as string]: buildNebula(nebula) } as CSSProperties)
+    resolvedMode === 'dark' && nebula && colorCount(nebula) !== 0
+      ? ({
+          ['--wzl-backdrop' as string]: buildNebula(
+            nebula,
+            theme,
+            resolvedMode,
+            density ?? 'comfortable',
+          ),
+        } as CSSProperties)
       : undefined;
 
   const workspace = (
@@ -590,7 +613,7 @@ function LabRuntime({
         <AnnotationPreloadContext.Provider value={opened.marks}>
           <LabContext.Provider value={contextValue}>
             <ThemeProvider
-              theme={interstellarTheme}
+              theme={theme}
               selection={{ mode: resolvedMode, density: density ?? 'comfortable' }}
               className="lk-lab"
               style={backdropStyle}

package/src/lab/LabBoundary.test.tsx

@@ -0,0 +1,66 @@
+import { render } from '@testing-library/react';
+import { ThemeProvider, useThemeOptional } from '@weasel-js/theme/react';
+import { useContext } from 'react';
+import { describe, expect, it } from 'vitest';
+import { LabStoreContext, TrialIdContext } from '../state/context';
+import { PersistenceContext } from '../state/Persistence';
+import { interstellarTheme } from '../theme/interstellar';
+import { LabBoundary } from './LabBoundary';
+import { LabContext, type LabContextValue } from './LabContext';
+import { LabRoot } from './LabRoot';
+
+function Probe() {
+  const lab = useContext(LabContext);
+  const store = useContext(LabStoreContext);
+  const trial = useContext(TrialIdContext);
+  const records = useContext(PersistenceContext);
+  const theme = useThemeOptional();
+  return (
+    <output>
+      {JSON.stringify({
+        lab: lab !== null,
+        store: store !== null,
+        trial,
+        records: records !== null,
+        theme: theme !== null,
+      })}
+    </output>
+  );
+}
+
+const fakeLab = { trials: [], instruments: [] } as unknown as LabContextValue;
+
+describe('LabBoundary', () => {
+  it('hides the enclosing lab, trial, records and theme from its children', () => {
+    const { container } = render(
+      <ThemeProvider theme={interstellarTheme} selection={{ mode: 'dark' }}>
+        <LabContext.Provider value={fakeLab}>
+          <TrialIdContext.Provider value="t1">
+            <Probe />
+            <LabBoundary>
+              <Probe />
+            </LabBoundary>
+          </TrialIdContext.Provider>
+        </LabContext.Provider>
+      </ThemeProvider>,
+    );
+    const [outside, inside] = Array.from(container.querySelectorAll('output')).map((el) =>
+      JSON.parse(el.textContent ?? ''),
+    );
+    expect(outside).toEqual({ lab: true, store: false, trial: 't1', records: false, theme: true });
+    expect(inside).toEqual({ lab: false, store: false, trial: null, records: false, theme: false });
+  });
+
+  it('lets a LabRoot under it apply its own theme instead of deferring to the one above', () => {
+    const { container } = render(
+      <ThemeProvider theme={interstellarTheme} selection={{ mode: 'dark' }}>
+        <LabBoundary>
+          <LabRoot mode="light">x</LabRoot>
+        </LabBoundary>
+      </ThemeProvider>,
+    );
+    const themed = container.querySelectorAll('[data-wzl-theme]');
+    expect(themed).toHaveLength(2);
+    expect(themed[1]?.getAttribute('data-wzl-mode')).toBe('light');
+  });
+});

package/src/lab/LabBoundary.tsx

@@ -0,0 +1,56 @@
+import { ThemeContext } from '@weasel-js/theme/react';
+import type { ReactNode } from 'react';
+import { AnnotationsContext } from '../annotations/AnnotationsContext';
+import { AnnotationPreloadContext } from '../annotations/preload';
+import { CameraWheelContext } from '../canvas/CameraWheelContext';
+import { CanvasStackContext } from '../canvas/CanvasStackContext';
+import { LabStoreContext, TrialIdContext } from '../state/context';
+import { PersistenceContext } from '../state/Persistence';
+import { SurfaceCanvasContext, SurfaceContext } from '../surface/SurfaceContext';
+import { TrialDragContext } from '../trial/TrialDragContext';
+import { LabContext } from './LabContext';
+import { PanelHostContext } from './panelHost';
+
+/** Props for `<LabBoundary>`. */
+export interface LabBoundaryProps {
+  children: ReactNode;
+}
+
+/**
+ * Renders its children as though no lab, trial or theme were above them: every context a `<Lab>` or a
+ * `<Trial>` publishes reads as absent below it, so a labkit piece mounted inside a trial behaves the way it
+ * does on a bare page. A `<LabRoot>` under it applies its own theme instead of deferring to the lab's, and a
+ * `usePersistedState` under it keeps local state instead of writing into the enclosing lab's records.
+ *
+ * For a host that shows arbitrary content inside a trial, such as a component workshop; a lab's own chrome
+ * never needs it.
+ */
+export function LabBoundary({ children }: LabBoundaryProps) {
+  return (
+    <LabStoreContext.Provider value={null}>
+      <PersistenceContext.Provider value={null}>
+        <AnnotationPreloadContext.Provider value={null}>
+          <LabContext.Provider value={null}>
+            <PanelHostContext.Provider value={null}>
+              <SurfaceContext.Provider value={null}>
+                <SurfaceCanvasContext.Provider value={{ over: null, under: null }}>
+                  <TrialIdContext.Provider value={null}>
+                    <AnnotationsContext.Provider value={null}>
+                      <CameraWheelContext.Provider value={null}>
+                        <CanvasStackContext.Provider value={null}>
+                          <TrialDragContext.Provider value={null}>
+                            <ThemeContext.Provider value={null}>{children}</ThemeContext.Provider>
+                          </TrialDragContext.Provider>
+                        </CanvasStackContext.Provider>
+                      </CameraWheelContext.Provider>
+                    </AnnotationsContext.Provider>
+                  </TrialIdContext.Provider>
+                </SurfaceCanvasContext.Provider>
+              </SurfaceContext.Provider>
+            </PanelHostContext.Provider>
+          </LabContext.Provider>
+        </AnnotationPreloadContext.Provider>
+      </PersistenceContext.Provider>
+    </LabStoreContext.Provider>
+  );
+}

package/src/lab/LabHeader.tsx

@@ -1,22 +1,7 @@
-import { AddIcon, ModeAutoIcon, ModeDarkIcon, ModeLightIcon } from '@weasel-js/ui';
-import { MenuButton, ToggleBar } from '../passthrough/weasel-ui';
-import type { LabMode } from '../state/types';
+import { AddIcon } from '@weasel-js/ui';
+import { ColorModeControl, MenuButton } from '../passthrough/weasel-ui';
 import { useLabContext } from './LabContext';
 
-// The glyph is the segment's content and the word is its accessible name, so
-// the bar stays a three-way radiogroup announcing Auto / Light / Dark.
-const MODES = [
-  { value: 'auto' as LabMode, label: 'Auto', glyph: <ModeAutoIcon size={14} /> },
-  { value: 'light' as LabMode, label: 'Light', glyph: <ModeLightIcon size={14} /> },
-  { value: 'dark' as LabMode, label: 'Dark', glyph: <ModeDarkIcon size={14} /> },
-];
-
-const MODE_ITEMS = MODES.map(({ value, label, glyph }) => ({
-  value,
-  label: glyph,
-  ariaLabel: label,
-}));
-
 /** The controls `<Lab>` puts in its header: add a trial, and choose the color
  *  mode. Both drive `LabContext`, which carried them with no UI at all — so
  *  every consumer rebuilt these two. Rendered before a consumer's own header
@@ -45,15 +30,11 @@ export function LabHeader({ addTrial = true }: { addTrial?: boolean }) {
         />
       )}
 
-      <ToggleBar
+      <ColorModeControl
         className="lk-lab-header__mode"
-        ariaLabel="Color mode"
         variant="flat"
-        items={MODE_ITEMS}
         value={lab.mode}
-        onChange={(next) => {
-          if (next) lab.setMode(next);
-        }}
+        onChange={lab.setMode}
       />
     </>
   );

package/src/lab/LabRoot.tsx

@@ -1,8 +1,7 @@
-import { ThemeProvider, useThemeOptional } from '@weasel-js/theme/react';
+import { ThemeProvider, useResolvedColorMode, 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';
 
 /** Props for `<LabRoot>`. */
 export interface LabRootProps {
@@ -24,7 +23,7 @@ export interface LabRootProps {
  *  Pair it with `import '@weasel-js/labkit/styles.css'`, which is what defines
  *  the rules this element scopes. */
 export function LabRoot({ children, mode = 'auto', className }: LabRootProps) {
-  const resolved = useResolvedMode(mode);
+  const resolved = useResolvedColorMode(mode);
   const outer = useThemeOptional();
 
   // Overlays portal here rather than to the themed wrapper above: `.lk-root`

package/src/lab/LabShell.less

@@ -64,7 +64,6 @@
   min-height: 0;
   min-width: 0;
   overflow: auto;
-  padding: var(--lk-workspace-pad);
 }
 
 .lk-lab__body {

package/src/lab/LabShell.stories.tsx

@@ -86,3 +86,18 @@ export const HeaderControlsLineUp: Story = {
     await expect(middles).toEqual(middles.map(() => middles[0]));
   },
 };
+
+// One document serving its pages from the hash: the open route is the one the
+// switcher marks, and each entry is a link to its fragment.
+export const HashRoutedPages: Story = {
+  args: {
+    title: 'Registry',
+    pages: [
+      { href: '/app/', label: 'App' },
+      { href: '#/dev/tools', label: 'Tools' },
+      { href: '#/dev/registry', label: 'Registry' },
+    ],
+    path: '/app/#/dev/registry?entry=rect',
+    children: <p>Open the title to see the current route marked.</p>,
+  },
+};

package/src/lab/LabShell.test.tsx

@@ -47,6 +47,24 @@ describe('LabShell', () => {
     expect(container.querySelector('.lk-root')?.hasAttribute('data-wzl-portal-host')).toBe(true);
   });
 
+  test('holds the document title while mounted when asked to', () => {
+    document.title = 'before';
+    const { unmount } = render(
+      <LabShell title="t" documentTitle="Page title">
+        x
+      </LabShell>,
+    );
+    expect(document.title).toBe('Page title');
+    unmount();
+    expect(document.title).toBe('before');
+  });
+
+  test('leaves the document title alone by default', () => {
+    document.title = 'before';
+    render(<LabShell title="t">x</LabShell>);
+    expect(document.title).toBe('before');
+  });
+
   test('always applies lk-root class', () => {
     const { container } = render(<LabShell title="t">x</LabShell>);
     expect(container.querySelector('.lk-root')).not.toBeNull();

package/src/lab/LabShell.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode, useEffect } from 'react';
 import type { LabMode } from '../state/types';
 import { LabRoot } from './LabRoot';
 import type { LabPage } from './LabSwitcher';
@@ -20,6 +20,9 @@ export interface LabShellProps {
   /** The path the switcher reads to mark the open page. Defaults to the
    *  current location. */
   path?: string;
+  /** Set as `document.title` while the shell is mounted, and the previous
+   *  title restored after. Omitted, the document's title is left alone. */
+  documentTitle?: string;
 }
 
 /** Page frame for a lab: a titled header, a body, and an optional footer,
@@ -33,7 +36,17 @@ export function LabShell({
   mode = 'auto',
   pages,
   path,
+  documentTitle,
 }: LabShellProps) {
+  useEffect(() => {
+    if (documentTitle === undefined) return;
+    const previous = document.title;
+    document.title = documentTitle;
+    return () => {
+      document.title = previous;
+    };
+  }, [documentTitle]);
+
   return (
     <LabRoot mode={mode} className="lk-shell">
       <header className="lk-shell-header">

package/src/lab/LabSwitcher.less

@@ -26,7 +26,7 @@
   // hyphen and the control becomes three ragged lines with a caret adrift.
   white-space: nowrap;
 
-  &:hover { color: var(--wzl-accent); }
+  &:hover { color: var(--wzl-accent-fg); }
 
   &:focus-visible {
     outline: 2px solid var(--wzl-focus-ring, currentColor);