@weasel-js/labkit 1.0.3 → 1.1.0

package/src/index.ts

@@ -23,6 +23,7 @@ export type {
   DragFeedback,
   HitResult,
   Instrument,
+  InstrumentList,
   LayerCapability,
   LayerDescriptor,
   PaletteItem,
@@ -48,25 +49,28 @@ export {
 export {
   LabStoreContext,
   LabStoreProvider,
+  TrialIdContext,
+  TrialIdProvider,
   useLabStore,
-  useWorkspaceId,
-  WorkspaceIdContext,
-  WorkspaceIdProvider,
+  useTrialId,
 } from './state/context';
+export { CURRENT_DOCUMENT_VERSION, labDocumentKey, quarantineKey } from './state/document';
 export type {
   CreateLabStoreOptions,
-  ExperimentStateHandle,
+  LabDocument,
   LabMode,
   LabStoreState,
   SavedSnapshot,
+  SerializedTrial,
   StorageAdapter,
+  TrialRecord,
+  TrialStateHandle,
   UndoStack,
-  WorkspaceRecord,
 } from './state/types';
-export { useExperimentState } from './state/useExperimentState';
+export { useTrialState } from './state/useTrialState';
 export { interstellarTheme } from './theme/interstellar';
+export * from './trial';
 export * from './ui/layers';
 export * from './ui/properties';
 export type { EventBus, EventListener } from './undo';
 export { clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './undo';
-export * from './workspace';

package/src/instrument/SineWave.smoke.test.tsx

@@ -85,7 +85,7 @@ describe('SineWave instrument smoke test', () => {
       config: SineWaveInstrument.defaultConfig(),
       setState: vi.fn(),
       setConfig: vi.fn(),
-      workspace: { id: 'w', zoom: 1, setZoom: vi.fn() },
+      trial: { id: 'w', zoom: 1, setZoom: vi.fn() },
       emit: vi.fn(),
     };
     const { container } = render(SineWaveInstrument.render(ctx) as ReactElement);

package/src/instrument/capabilityDetector.ts

@@ -1,6 +1,6 @@
 import type { Instrument } from './types';
 
-/** Which optional capabilities an instrument declared — what the workspace
+/** Which optional capabilities an instrument declared — what the trial
  *  consults to decide which chrome to show. */
 export interface CapabilityFlags {
   hasCanvas: boolean;

package/src/instrument/types.ts

@@ -2,13 +2,13 @@ import type { ReactNode } from 'react';
 import type { ConfigField } from '../controls/types';
 
 /** What an instrument's `render` is handed: its state and config, the setters
- *  for both, the workspace it is mounted in, and a way to emit named events. */
+ *  for both, the trial it is mounted in, and a way to emit named events. */
 export interface RenderContext<TS = unknown, TC = unknown> {
   state: TS;
   config: TC;
   setState: (next: TS | ((prev: TS) => TS)) => void;
   setConfig: (key: keyof TC, value: unknown) => void;
-  workspace: {
+  trial: {
     id: string;
     zoom: number;
     setZoom: (z: number) => void;
@@ -16,7 +16,11 @@ export interface RenderContext<TS = unknown, TC = unknown> {
   emit: (event: string) => void;
 }
 
-/** One 2D canvas layer of an instrument, drawn in declaration order. */
+/** One 2D canvas layer of an instrument, drawn in declaration order.
+ *
+ *  `draw` is called with the camera already applied, so it works in world
+ *  coordinates. `zoom` is passed for the things that must not scale with it —
+ *  set `ctx.lineWidth = 1 / zoom` to keep a hairline hairline. */
 export interface CanvasLayer<TS = unknown, TC = unknown> {
   id: string;
   draw: (ctx: CanvasRenderingContext2D, args: { state: TS; config: TC; zoom: number }) => void;
@@ -29,7 +33,7 @@ export interface CanvasCapability<TS = unknown, TC = unknown> {
   initialView?: { zoom: number; pan: { x: number; y: number } };
 }
 
-/** Declares which of an instrument's layers the workspace should offer
+/** Declares which of an instrument's layers the trial should offer
  *  show/hide controls for. */
 export interface LayerCapability {
   ids: string[];
@@ -59,7 +63,7 @@ export type SystemEvent = string;
 export type Point = { x: number; y: number };
 /** What a hit-test found, and where. */
 export type HitResult = { hit: boolean; layerId?: string; pointId?: string };
-/** A workspace's camera. */
+/** A trial's camera. */
 export type ViewTransform = { zoom: number; pan: Point };
 /** A layer as the layer list shows it. `alwaysOn` layers cannot be hidden. */
 export type LayerDescriptor = { id: string; label: string; alwaysOn?: boolean };
@@ -76,13 +80,15 @@ export type DragFeedback = { ok: boolean; reason?: string };
  * and `state`, what the experiment is currently doing — and renders from both.
  * The optional capability fields declare what else it wants from the runtime:
  * a canvas, a layer list, palette drag-and-drop, undo. Declaring a capability
- * is what makes the workspace provide the corresponding chrome.
+ * is what makes the trial provide the corresponding chrome.
  */
 export interface Instrument<TS = unknown, TC = unknown> {
   name: string;
   defaultConfig: () => TC;
   initialState: (config: TC) => TS;
   configSchema?: () => ConfigField[];
+  /** The instrument's DOM. With `canvas`, this renders as an overlay above the
+   *  layers rather than instead of them; return `null` for canvas only. */
   render: (ctx: RenderContext<TS, TC>) => ReactNode;
   onConfigChange?: (config: TC, prev: TC, state: TS) => TS;
   serialize?: (state: TS) => unknown;
@@ -92,3 +98,9 @@ export interface Instrument<TS = unknown, TC = unknown> {
   dragDrop?: DragDropCapability<TS, TC>;
   undo?: UndoCapability;
 }
+
+/** Instruments as a lab receives them. `any` rather than `unknown` because
+ *  parameter contravariance keeps a `defineInstrument<TS, TC>` result out of
+ *  an `Instrument<unknown, unknown>[]`; it is contained to this alias. */
+// biome-ignore lint/suspicious/noExplicitAny: see above
+export type InstrumentList = readonly Instrument<any, any>[];

package/src/lab/Lab.less

@@ -1,3 +1,19 @@
+// `height: 100%` resolves against the containing block, so the lab needs an
+// unbroken chain of sized ancestors — and a host that supplies the height but
+// not the margin reset gets a page 16px taller than the viewport, which reads
+// as a stuck canvas rather than as overflow. Scoped with `:has` so a page that
+// mounts no lab is untouched, and stopping at the lab's own parent so an
+// embedded lab cannot resize its host's layout.
+html:has(.lk-lab),
+body:has(.lk-lab) {
+  margin: 0;
+  height: 100%;
+}
+
+body:has(.lk-lab) > :has(> .lk-lab) {
+  height: 100%;
+}
+
 .lk-lab {
   height: 100%;
 }

package/src/lab/Lab.stories.tsx

@@ -31,21 +31,21 @@ export const Default: Story = {
   },
 };
 
-function AddSecondWorkspace() {
+function AddSecondTrial() {
   const ctx = useLabContext();
   // biome-ignore lint/correctness/useExhaustiveDependencies: run once on mount
   useEffect(() => {
-    if (ctx.workspaces.length < 2) ctx.addWorkspace('Stub');
+    if (ctx.trials.length < 2) ctx.addTrial('Stub');
   }, []);
   return null;
 }
 
-export const TwoWorkspaces: Story = {
+export const TwoTrials: Story = {
   args: {
     instruments: [StubInstrument],
     defaultInstrument: 'Stub',
-    title: 'Two Workspaces',
+    title: 'Two Trials',
     storage: null,
-    children: <AddSecondWorkspace />,
+    children: <AddSecondTrial />,
   },
 };

package/src/lab/Lab.test.tsx

@@ -41,50 +41,50 @@ function mountLab(props: Partial<Parameters<typeof Lab>[0]> = {}) {
 }
 
 describe('<Lab>', () => {
-  it('renders one workspace by default', () => {
+  it('renders one trial by default', () => {
     mountLab();
-    expect(screen.getAllByRole('region', { name: /workspace/i })).toHaveLength(1);
+    expect(screen.getAllByRole('region', { name: /trial/i })).toHaveLength(1);
   });
 
-  it('addWorkspace adds a second workspace', () => {
+  it('addTrial adds a second trial', () => {
     mountLab();
-    act(() => labRef?.addWorkspace('Stub'));
-    expect(screen.getAllByRole('region', { name: /workspace/i })).toHaveLength(2);
+    act(() => labRef?.addTrial('Stub'));
+    expect(screen.getAllByRole('region', { name: /trial/i })).toHaveLength(2);
   });
 
-  it('closeWorkspace removes one when more than one exists', () => {
+  it('closeTrial removes one when more than one exists', () => {
     mountLab();
-    act(() => labRef?.addWorkspace('Stub'));
-    const first = labRef?.workspaces[0];
-    act(() => labRef?.closeWorkspace(first?.id ?? ''));
-    expect(screen.getAllByRole('region', { name: /workspace/i })).toHaveLength(1);
+    act(() => labRef?.addTrial('Stub'));
+    const first = labRef?.trials[0];
+    act(() => labRef?.closeTrial(first?.id ?? ''));
+    expect(screen.getAllByRole('region', { name: /trial/i })).toHaveLength(1);
   });
 
-  it('closeWorkspace is a no-op on the last workspace', () => {
+  it('closeTrial is a no-op on the last trial', () => {
     mountLab();
-    const only = labRef?.workspaces[0];
-    act(() => labRef?.closeWorkspace(only?.id ?? ''));
-    expect(screen.getAllByRole('region', { name: /workspace/i })).toHaveLength(1);
+    const only = labRef?.trials[0];
+    act(() => labRef?.closeTrial(only?.id ?? ''));
+    expect(screen.getAllByRole('region', { name: /trial/i })).toHaveLength(1);
   });
 
-  it('cloneWorkspace inserts immediately after source', () => {
+  it('cloneTrial inserts immediately after source', () => {
     mountLab();
-    act(() => labRef?.addWorkspace('StubB'));
-    const ws0 = labRef?.workspaces[0];
-    const ws1 = labRef?.workspaces[1];
-    act(() => labRef?.cloneWorkspace(ws0?.id ?? ''));
-    const ids = labRef?.workspaces.map((w) => w.id) ?? [];
+    act(() => labRef?.addTrial('StubB'));
+    const ws0 = labRef?.trials[0];
+    const ws1 = labRef?.trials[1];
+    act(() => labRef?.cloneTrial(ws0?.id ?? ''));
+    const ids = labRef?.trials.map((w) => w.id) ?? [];
     expect(ids).toHaveLength(3);
     expect(ids[0]).toBe(ws0?.id);
     expect(ids[2]).toBe(ws1?.id);
   });
 
-  it('resetWorkspace restores defaults', () => {
+  it('resetTrial restores defaults', () => {
     mountLab();
-    const ws = labRef?.workspaces[0];
-    if (!ws) throw new Error('no workspace');
-    act(() => labRef?.resetWorkspace(ws.id));
-    const reset = labRef?.workspaces[0];
+    const ws = labRef?.trials[0];
+    if (!ws) throw new Error('no trial');
+    act(() => labRef?.resetTrial(ws.id));
+    const reset = labRef?.trials[0];
     expect(reset?.config).toEqual({ count: 0 });
     expect(reset?.state).toEqual({ value: 0 });
   });

package/src/lab/Lab.tsx

@@ -1,27 +1,28 @@
 import { ThemeProvider } from '@weasel-js/theme/react';
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef } from 'react';
 import { useStore } from 'zustand/react';
-import type { Instrument } from '../instrument/types';
+import type { InstrumentList } 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 type { LabMode, StorageAdapter, TrialRecord } from '../state/types';
 import { interstellarTheme } from '../theme/interstellar';
-import { Workspace } from '../workspace/Workspace';
+import { Trial } from '../trial/Trial';
 import {
-  addWorkspace as addWorkspaceOp,
-  cloneWorkspace as cloneWorkspaceOp,
-  closeWorkspace as closeWorkspaceOp,
-  resetWorkspace as resetWorkspaceOp,
-} from '../workspace/workspaceOps';
+  addTrial as addTrialOp,
+  cloneTrial as cloneTrialOp,
+  closeTrial as closeTrialOp,
+  reorderTrials as reorderTrialsOp,
+  resetTrial as resetTrialOp,
+} from '../trial/trialOps';
 import { LabContext, type LabContextValue } from './LabContext';
 import { LabShell } from './LabShell';
 import { useResolvedMode } from './useSystemMode';
-import { WorkspaceGrid } from './WorkspaceGrid';
+import { type TrialLayout, Workspace } from './Workspace';
 
 /** Props for `<Lab>`. */
 export interface LabProps {
-  instruments: Instrument[];
+  instruments: InstrumentList;
   defaultInstrument: string;
   storage?: StorageAdapter | null;
   storageKey?: string;
@@ -38,19 +39,19 @@ export interface LabProps {
 }
 
 function buildStore(
-  instruments: Instrument[],
+  instruments: InstrumentList,
   defaultInstrument: string,
   storage: StorageAdapter,
   storageKey: string,
   initialMode: LabMode,
 ): LabStore {
   const store = createLabStore({ storageKey, storage, initialMode });
-  if (store.getState().workspaces.length === 0) {
-    const seeded = addWorkspaceOp([], instruments, defaultInstrument);
+  if (store.getState().trials.length === 0) {
+    const seeded = addTrialOp([], instruments, defaultInstrument);
     const record = seeded[0];
     if (record) {
       const { undoStack: _undoStack, ...rest } = record;
-      store.getState().addWorkspace(rest);
+      store.getState().addTrial(rest);
     }
   }
   return store;
@@ -70,15 +71,15 @@ const NEBULA_SLOTS = [
 
 function buildNebula(colors: readonly string[]): string {
   const blobs = colors.map((c, i) => {
-    const p = NEBULA_SLOTS[i % NEBULA_SLOTS.length]!;
+    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})`;
   });
   blobs.push('radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)');
   return blobs.join(', ');
 }
 
-/** The lab runtime: creates the store, provides it, and renders one workspace
- *  per record in a grid. Each workspace runs one of `instruments`. */
+/** The lab runtime: creates the store, provides it, and renders one trial
+ *  per record in a grid. Each trial runs one of `instruments`. */
 export function Lab({
   instruments,
   defaultInstrument,
@@ -105,9 +106,10 @@ export function Lab({
   }
   const store = storeRef.current;
 
-  const workspaces = useStore(store, (s) => s.workspaces);
+  const trials = useStore(store, (s) => s.trials);
   const savedSnapshots = useStore(store, (s) => s.savedSnapshots);
   const modeValue = useStore(store, (s) => s.mode);
+  const layout = useStore(store, (s) => s.layout);
   const resolvedMode = useResolvedMode(modeValue);
 
   useEffect(() => {
@@ -117,48 +119,51 @@ export function Lab({
   }, [mode, store]);
 
   const contextValue = useMemo<LabContextValue>(() => {
-    const replaceWorkspaces = (next: WorkspaceRecord[]): void => {
-      const currentById = new Map(store.getState().workspaces.map((w) => [w.id, w]));
+    const replaceTrials = (next: TrialRecord[]): void => {
+      const currentById = new Map(store.getState().trials.map((w) => [w.id, w]));
       const merged = next.map((w) => currentById.get(w.id) ?? w);
-      store.setState({ workspaces: merged });
+      store.setState({ trials: merged });
       // Trigger persistence flush via a tracked action.
       store.getState().setMode(store.getState().mode);
     };
 
     return {
       instruments,
-      workspaces,
-      addWorkspace: (instrumentName) => {
-        const next = addWorkspaceOp(store.getState().workspaces, instruments, instrumentName);
-        replaceWorkspaces(next);
+      trials,
+      addTrial: (instrumentName) => {
+        const next = addTrialOp(store.getState().trials, instruments, instrumentName);
+        replaceTrials(next);
       },
-      cloneWorkspace: (id) => {
-        const next = cloneWorkspaceOp(store.getState().workspaces, id);
-        replaceWorkspaces(next);
+      cloneTrial: (id) => {
+        const next = cloneTrialOp(store.getState().trials, id);
+        replaceTrials(next);
       },
-      closeWorkspace: (id) => {
-        const next = closeWorkspaceOp(store.getState().workspaces, id);
-        replaceWorkspaces(next);
+      closeTrial: (id) => {
+        const next = closeTrialOp(store.getState().trials, id);
+        replaceTrials(next);
       },
-      resetWorkspace: (id) => {
-        const next = resetWorkspaceOp(store.getState().workspaces, id, instruments);
+      reorderTrials: (ids) => {
+        replaceTrials(reorderTrialsOp(store.getState().trials, ids));
+      },
+      resetTrial: (id) => {
+        const next = resetTrialOp(store.getState().trials, id, instruments);
         const record = next.find((w) => w.id === id);
         if (!record) return;
         store.setState((s) => ({
-          workspaces: s.workspaces.map((w) =>
+          trials: s.trials.map((w) =>
             w.id === id
               ? { ...w, config: record.config, state: record.state, view: record.view }
               : w,
           ),
         }));
-        store.getState().updateWorkspaceView(id, record.view);
+        store.getState().updateTrialView(id, record.view);
       },
       savedSnapshots,
-      saveSnapshot: (workspaceId, name) => {
-        store.getState().saveSnapshot(workspaceId, name ?? `Save ${new Date().toLocaleString()}`);
+      saveSnapshot: (trialId, name) => {
+        store.getState().saveSnapshot(trialId, name ?? `Save ${new Date().toLocaleString()}`);
       },
-      loadSnapshot: (workspaceId, snapshotId) => {
-        store.getState().loadSnapshot(snapshotId, workspaceId);
+      loadSnapshot: (trialId, snapshotId) => {
+        store.getState().loadSnapshot(snapshotId, trialId);
       },
       deleteSnapshot: (snapshotId) => {
         store.getState().deleteSnapshot(snapshotId);
@@ -168,7 +173,7 @@ export function Lab({
         store.getState().setMode(m);
       },
     };
-  }, [instruments, workspaces, savedSnapshots, modeValue, store]);
+  }, [instruments, trials, savedSnapshots, modeValue, store]);
 
   // Only override the backdrop in dark, where there is one to override.
   // Setting a CSS custom property is the sanctioned use of inline style.
@@ -187,11 +192,18 @@ export function Lab({
           style={backdropStyle}
         >
           <LabShell title={title ?? 'Labkit'} mode={modeValue} header={children}>
-            <WorkspaceGrid>
-              {workspaces.map((w) => (
-                <Workspace key={w.id} id={w.id} />
+            <Workspace
+              ids={trials.map((w) => w.id)}
+              resizable
+              reorderable
+              onReorder={(ids) => contextValue.reorderTrials(ids)}
+              layout={layout as TrialLayout}
+              onLayoutChange={(next) => store.getState().setLayout(next)}
+            >
+              {trials.map((w) => (
+                <Trial key={w.id} id={w.id} />
               ))}
-            </WorkspaceGrid>
+            </Workspace>
           </LabShell>
         </ThemeProvider>
       </LabContext.Provider>

package/src/lab/LabContext.ts

@@ -1,20 +1,21 @@
 import { createContext, useContext } from 'react';
-import type { Instrument } from '../instrument/types';
-import type { LabMode, SavedSnapshot, WorkspaceRecord } from '../state/types';
+import type { InstrumentList } from '../instrument/types';
+import type { LabMode, SavedSnapshot, TrialRecord } from '../state/types';
 
 /** Lab-wide state and commands: the available instruments, the open
- *  workspaces and the operations over them, saved snapshots, and the color
+ *  trials and the operations over them, saved snapshots, and the color
  *  mode. */
 export interface LabContextValue {
-  instruments: Instrument[];
-  workspaces: WorkspaceRecord[];
-  addWorkspace: (instrumentName: string) => void;
-  cloneWorkspace: (id: string) => void;
-  closeWorkspace: (id: string) => void;
-  resetWorkspace: (id: string) => void;
+  instruments: InstrumentList;
+  trials: TrialRecord[];
+  addTrial: (instrumentName: string) => void;
+  cloneTrial: (id: string) => void;
+  closeTrial: (id: string) => void;
+  resetTrial: (id: string) => void;
+  reorderTrials: (ids: readonly string[]) => void;
   savedSnapshots: SavedSnapshot[];
-  saveSnapshot: (workspaceId: string, name?: string) => void;
-  loadSnapshot: (workspaceId: string, snapshotId: string) => void;
+  saveSnapshot: (trialId: string, name?: string) => void;
+  loadSnapshot: (trialId: string, snapshotId: string) => void;
   deleteSnapshot: (snapshotId: string) => void;
   mode: LabMode;
   setMode: (m: LabMode) => void;

package/src/lab/LabShell.tsx

@@ -18,7 +18,7 @@ export interface LabShellProps {
 
 /** Page frame for a lab: a titled header, a body, and an optional footer,
  *  themed for the resolved color mode. Presentational only — use `<Lab>` when
- *  the workspace runtime is wanted too. */
+ *  the trial runtime is wanted too. */
 export function LabShell({ title, children, header, footer, mode = 'auto' }: LabShellProps) {
   const resolved = useResolvedMode(mode);
   const outer = useThemeOptional();

package/src/lab/Workspace.less

@@ -0,0 +1,40 @@
+// Tiles are positioned by windease at strategy-computed rects; `.windease-zone`
+// (from windease/styles.css) supplies the containing block and the 100% box.
+// This class exists for consumers to target.
+.lk-workspace {
+  min-height: 0;
+}
+
+// Only rendered when `reorderable` — a tile is full of controls, so the drag
+// target has to be its own strip rather than the whole pane.
+.lk-trial-tile {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  &__grip {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 14px;
+    cursor: grab;
+    border-radius: var(--wzl-radius-sm) var(--wzl-radius-sm) 0 0;
+    background: var(--wzl-surface-sunken);
+
+    &:active { cursor: grabbing; }
+  }
+
+  &__grip-dots {
+    width: 28px;
+    height: 3px;
+    border-radius: 999px;
+    background: var(--wzl-fg-muted);
+    opacity: 0.5;
+  }
+
+  &__body {
+    flex: 1;
+    min-height: 0;
+  }
+}

package/src/lab/{WorkspaceGrid.stories.tsx → Workspace.stories.tsx}

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { WorkspaceGrid } from './WorkspaceGrid';
+import { Workspace } from './Workspace';
 
-const meta: Meta<typeof WorkspaceGrid> = {
-  title: 'labkit/Lab/WorkspaceGrid',
-  component: WorkspaceGrid,
+const meta: Meta<typeof Workspace> = {
+  title: 'labkit/Lab/Workspace',
+  component: Workspace,
 };
 export default meta;
 
-type Story = StoryObj<typeof WorkspaceGrid>;
+type Story = StoryObj<typeof Workspace>;
 
 const Tile = ({ children }: { children: React.ReactNode }) => (
   <div
@@ -28,9 +28,9 @@ const Tile = ({ children }: { children: React.ReactNode }) => (
 export const OneTile: Story = {
   render: () => (
     <div style={{ height: 400 }}>
-      <WorkspaceGrid>
+      <Workspace>
         <Tile>1</Tile>
-      </WorkspaceGrid>
+      </Workspace>
     </div>
   ),
 };
@@ -38,11 +38,11 @@ export const OneTile: Story = {
 export const ThreeTiles: Story = {
   render: () => (
     <div style={{ height: 400 }}>
-      <WorkspaceGrid>
+      <Workspace>
         <Tile>1</Tile>
         <Tile>2</Tile>
         <Tile>3</Tile>
-      </WorkspaceGrid>
+      </Workspace>
     </div>
   ),
 };
@@ -50,12 +50,28 @@ export const ThreeTiles: Story = {
 export const SevenTiles: Story = {
   render: () => (
     <div style={{ height: 600 }}>
-      <WorkspaceGrid>
+      <Workspace>
         {Array.from({ length: 7 }).map((_, i) => (
           // biome-ignore lint/suspicious/noArrayIndexKey: static demo list
           <Tile key={i}>{i + 1}</Tile>
         ))}
-      </WorkspaceGrid>
+      </Workspace>
+    </div>
+  ),
+};
+
+/** Draggable seams. Drag a tile edge, or Tab to a seam and press an arrow —
+ *  a grid moves extents a whole cell at a time. */
+export const Resizable: Story = {
+  render: () => (
+    <div style={{ height: 500 }}>
+      <Workspace ids={['a', 'b', 'c', 'd', 'e']} resizable>
+        <Tile>1</Tile>
+        <Tile>2</Tile>
+        <Tile>3</Tile>
+        <Tile>4</Tile>
+        <Tile>5</Tile>
+      </Workspace>
     </div>
   ),
 };