@weasel-js/labkit 0.1.0

package/src/undo/undoStack.test.ts

@@ -0,0 +1,70 @@
+import { describe, expect, it } from 'vitest';
+import { clearUndo, emptyStack, pushSnapshot, redo, undo } from './undoStack';
+
+describe('UndoStack', () => {
+  it('emptyStack has empty past and future', () => {
+    expect(emptyStack()).toEqual({ past: [], future: [] });
+  });
+
+  it('pushSnapshot adds to past and clears future', () => {
+    const s = { past: [1], future: [9] };
+    const next = pushSnapshot(s, 2, 10);
+    expect(next.past).toEqual([1, 2]);
+    expect(next.future).toEqual([]);
+  });
+
+  it('pushSnapshot evicts past[0] at maxDepth (FIFO)', () => {
+    let s = emptyStack();
+    s = pushSnapshot(s, 'a', 3);
+    s = pushSnapshot(s, 'b', 3);
+    s = pushSnapshot(s, 'c', 3);
+    s = pushSnapshot(s, 'd', 3);
+    expect(s.past).toEqual(['b', 'c', 'd']);
+  });
+
+  it('undo restores last past snapshot and pushes current to future', () => {
+    // Caller pushes pre-mutation snapshots: push 'pre-a' before applying 'a',
+    // push 'pre-b' before applying 'b'. Current state at undo time is 'b'.
+    let s = emptyStack();
+    s = pushSnapshot(s, 'pre-a', 5);
+    s = pushSnapshot(s, 'pre-b', 5);
+    const r = undo(s, 'b');
+    expect(r).not.toBeNull();
+    expect(r?.snapshot).toBe('pre-b');
+    expect(r?.stack.past).toEqual(['pre-a']);
+    expect(r?.stack.future).toEqual(['b']);
+  });
+
+  it('undo on empty stack returns null', () => {
+    expect(undo(emptyStack(), 'anything')).toBeNull();
+  });
+
+  it('redo restores last future snapshot and pushes current to past', () => {
+    let s = emptyStack();
+    s = pushSnapshot(s, 'pre-a', 5);
+    const u = undo(s, 'a');
+    if (!u) throw new Error('expected undo');
+    // After undo we are at 'pre-a'; redo should advance back to 'a'.
+    const r = redo(u.stack, u.snapshot);
+    expect(r?.snapshot).toBe('a');
+    expect(r?.stack.past).toEqual(['pre-a']);
+    expect(r?.stack.future).toEqual([]);
+  });
+
+  it('redo on empty future returns null', () => {
+    expect(redo(emptyStack(), 'anything')).toBeNull();
+  });
+
+  it('push after undo invalidates redo', () => {
+    let s = emptyStack();
+    s = pushSnapshot(s, 'pre-a', 5);
+    const u = undo(s, 'a');
+    if (!u) throw new Error();
+    s = pushSnapshot(u.stack, 'pre-b', 5);
+    expect(redo(s, 'b')).toBeNull();
+  });
+
+  it('clearUndo zeros both arrays', () => {
+    expect(clearUndo({ past: [1, 2], future: [3] })).toEqual({ past: [], future: [] });
+  });
+});

package/src/undo/undoStack.ts

@@ -0,0 +1,38 @@
+export interface UndoStack {
+  past: unknown[];
+  future: unknown[];
+}
+
+export function emptyStack(): UndoStack {
+  return { past: [], future: [] };
+}
+
+export function pushSnapshot(stack: UndoStack, snapshot: unknown, maxDepth: number): UndoStack {
+  const past = stack.past.length >= maxDepth ? stack.past.slice(1) : stack.past.slice();
+  past.push(snapshot);
+  return { past, future: [] };
+}
+
+export function undo(
+  stack: UndoStack,
+  current: unknown,
+): { stack: UndoStack; snapshot: unknown } | null {
+  if (stack.past.length === 0) return null;
+  const past = stack.past.slice();
+  const snapshot = past.pop();
+  return { stack: { past, future: [...stack.future, current] }, snapshot };
+}
+
+export function redo(
+  stack: UndoStack,
+  current: unknown,
+): { stack: UndoStack; snapshot: unknown } | null {
+  if (stack.future.length === 0) return null;
+  const future = stack.future.slice();
+  const snapshot = future.pop();
+  return { stack: { past: [...stack.past, current], future }, snapshot };
+}
+
+export function clearUndo(_stack: UndoStack): UndoStack {
+  return emptyStack();
+}

package/src/workspace/DefaultSidebar.tsx

@@ -0,0 +1,26 @@
+import { ControlPanel } from '../controls/ControlPanel';
+import { Sidebar } from '../primitives/Sidebar';
+import type { WorkspaceSidebarContext } from './slotTypes';
+
+export interface DefaultSidebarProps {
+  ctx: WorkspaceSidebarContext;
+}
+
+export function DefaultSidebar({ ctx }: DefaultSidebarProps) {
+  if (ctx.configFields.length === 0) {
+    return (
+      <Sidebar title={ctx.instrumentName}>
+        <div className="lk-sidebar__placeholder">{ctx.instrumentName} has no config fields.</div>
+      </Sidebar>
+    );
+  }
+  return (
+    <Sidebar title={ctx.instrumentName}>
+      <ControlPanel
+        fields={ctx.configFields}
+        config={ctx.config as Record<string, unknown>}
+        setConfig={(key, value) => ctx.setConfig(key as string, value)}
+      />
+    </Sidebar>
+  );
+}

package/src/workspace/DefaultStatusBar.tsx

@@ -0,0 +1,15 @@
+import { StatusBar } from '../primitives/StatusBar';
+import type { WorkspaceStatusBarContext } from './slotTypes';
+
+export interface DefaultStatusBarProps {
+  ctx: WorkspaceStatusBarContext;
+}
+
+export function DefaultStatusBar({ ctx }: DefaultStatusBarProps) {
+  return (
+    <StatusBar>
+      <StatusBar.Section>{ctx.instrumentName}</StatusBar.Section>
+      <StatusBar.Section>{Math.round(ctx.zoom * 100)}%</StatusBar.Section>
+    </StatusBar>
+  );
+}

package/src/workspace/DefaultToolbar.tsx

@@ -0,0 +1,88 @@
+import { Toolbar } from '../primitives/Toolbar';
+import type { WorkspaceToolbarContext } from './slotTypes';
+
+export interface DefaultToolbarProps {
+  ctx: WorkspaceToolbarContext;
+}
+
+export function DefaultToolbar({ ctx }: DefaultToolbarProps) {
+  return (
+    <Toolbar>
+      {ctx.hasUndo && (
+        <>
+          <Toolbar.Button onClick={ctx.undo} disabled={!ctx.canUndo} title="Undo (Cmd/Ctrl+Z)">
+            Undo
+          </Toolbar.Button>
+          <Toolbar.Button
+            onClick={ctx.redo}
+            disabled={!ctx.canRedo}
+            title="Redo (Cmd/Ctrl+Shift+Z)"
+          >
+            Redo
+          </Toolbar.Button>
+          <Toolbar.Spacer />
+        </>
+      )}
+
+      {ctx.hasCanvas && (
+        <>
+          <Toolbar.Button onClick={ctx.zoomOut} title="Zoom out">
+            −
+          </Toolbar.Button>
+          <span className="lk-toolbar__zoom-label">{Math.round(ctx.zoom * 100)}%</span>
+          <Toolbar.Button onClick={ctx.zoomIn} title="Zoom in">
+            +
+          </Toolbar.Button>
+          <Toolbar.Button onClick={ctx.resetZoom} title="Reset zoom">
+            1:1
+          </Toolbar.Button>
+          <Toolbar.Spacer />
+        </>
+      )}
+
+      <Toolbar.Button onClick={() => ctx.saveSnapshot()} title="Save snapshot (Cmd/Ctrl+S)">
+        Save
+      </Toolbar.Button>
+
+      {ctx.savedSnapshots.length > 0 && (
+        <select
+          className="lk-toolbar__load-select"
+          aria-label="Load snapshot"
+          defaultValue=""
+          onChange={(e) => {
+            const id = e.target.value;
+            if (id) {
+              ctx.loadSnapshot(id);
+              e.target.value = '';
+            }
+          }}
+        >
+          <option value="" disabled>
+            Load…
+          </option>
+          {ctx.savedSnapshots.map((sn) => (
+            <option key={sn.id} value={sn.id}>
+              {sn.name}
+            </option>
+          ))}
+        </select>
+      )}
+
+      <Toolbar.Spacer />
+
+      <Toolbar.Button onClick={ctx.clone} title="Clone workspace">
+        Clone
+      </Toolbar.Button>
+      <Toolbar.Button onClick={ctx.reset} title="Reset workspace">
+        Reset
+      </Toolbar.Button>
+      <Toolbar.Button
+        onClick={ctx.close}
+        disabled={ctx.isLastWorkspace}
+        title={ctx.isLastWorkspace ? 'Cannot close the last workspace' : 'Close workspace'}
+      >
+        Close
+      </Toolbar.Button>
+    </Toolbar>
+  );
+}

package/src/workspace/Workspace.less

@@ -0,0 +1,58 @@
+.lk-workspace {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--lk-bg);
+  border: 1px solid var(--lk-border);
+  border-radius: var(--lk-radius);
+  overflow: hidden;
+
+  &__body {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &__sidebar {
+    flex-shrink: 0;
+  }
+
+  &__content {
+    flex: 1;
+    overflow: auto;
+  }
+
+  &__toolbar {
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--lk-divider);
+  }
+
+  &__status {
+    flex-shrink: 0;
+    border-top: 1px solid var(--lk-divider);
+  }
+
+  &--unknown {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--lk-text-muted);
+    font-size: var(--lk-font-size-sm);
+  }
+}
+
+.lk-toolbar__zoom-label {
+  font-size: var(--lk-font-size-sm);
+  color: var(--lk-text-muted);
+  padding: 0 var(--lk-space-2);
+}
+
+.lk-toolbar__load-select {
+  font-size: var(--lk-font-size-sm);
+}
+
+.lk-sidebar__placeholder {
+  padding: var(--lk-space-2);
+  color: var(--lk-text-muted);
+  font-size: var(--lk-font-size-sm);
+}

package/src/workspace/Workspace.stories.tsx

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Instrument } from '../instrument/types';
+import { LabContext, type LabContextValue } from '../lab/LabContext';
+import { noneAdapter } from '../state/adapters';
+import { LabStoreContext } from '../state/context';
+import { createLabStore } from '../state/store';
+import type { WorkspaceRecord } from '../state/types';
+import { WorkspaceChrome } from './WorkspaceChrome';
+
+const noop = () => {};
+
+const stub: Instrument = {
+  name: 'Stub',
+  defaultConfig: () => ({}),
+  initialState: () => ({}),
+  render: () => <div className="lk-stub-display">stub experiment area</div>,
+};
+
+const record: WorkspaceRecord = {
+  id: 'ws-demo',
+  instrumentName: 'Stub',
+  config: {},
+  state: {},
+  view: { zoom: 1, pan: { x: 0, y: 0 } },
+  undoStack: { past: [], future: [] },
+};
+
+function Harness() {
+  const store = createLabStore({ storageKey: 'sb', storage: noneAdapter });
+  const lab: LabContextValue = {
+    instruments: [stub],
+    workspaces: [record],
+    addWorkspace: noop,
+    cloneWorkspace: noop,
+    closeWorkspace: noop,
+    resetWorkspace: noop,
+    savedSnapshots: [],
+    saveSnapshot: noop,
+    loadSnapshot: noop,
+    deleteSnapshot: noop,
+    theme: 'auto',
+    setTheme: noop,
+  };
+  return (
+    <LabStoreContext.Provider value={{ store }}>
+      <LabContext.Provider value={lab}>
+        <div style={{ height: '500px' }}>
+          <WorkspaceChrome
+            workspaceId="ws-demo"
+            record={record}
+            instrument={stub}
+            isLastWorkspace={true}
+          >
+            {stub.render({
+              state: {},
+              config: {},
+              setState: () => {},
+              setConfig: () => {},
+              workspace: { id: 'ws-demo', zoom: 1, setZoom: () => {} },
+              emit: () => {},
+            })}
+          </WorkspaceChrome>
+        </div>
+      </LabContext.Provider>
+    </LabStoreContext.Provider>
+  );
+}
+
+const meta: Meta<typeof Harness> = {
+  title: 'labkit/Workspace/Workspace',
+  component: Harness,
+  parameters: { layout: 'fullscreen' },
+};
+export default meta;
+
+type Story = StoryObj<typeof Harness>;
+
+export const Default: Story = {};

package/src/workspace/Workspace.test.tsx

@@ -0,0 +1,186 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import type { Instrument } from '../instrument/types';
+import { Lab } from '../lab/Lab';
+import { LabContext, type LabContextValue } from '../lab/LabContext';
+import { LabStoreContext } from '../state/context';
+import { createLabStore } from '../state/store';
+import type { WorkspaceRecord } from '../state/types';
+import { DefaultToolbar } from './DefaultToolbar';
+import type { WorkspaceToolbarContext } from './slotTypes';
+import { WorkspaceChrome } from './WorkspaceChrome';
+
+function makeCtx(overrides: Partial<WorkspaceToolbarContext> = {}): WorkspaceToolbarContext {
+  return {
+    workspaceId: 'ws-1',
+    instrumentName: 'Stub',
+    hasUndo: false,
+    canUndo: false,
+    canRedo: false,
+    undo: vi.fn(),
+    redo: vi.fn(),
+    zoom: 1,
+    setZoom: vi.fn(),
+    zoomIn: vi.fn(),
+    zoomOut: vi.fn(),
+    resetZoom: vi.fn(),
+    hasCanvas: false,
+    savedSnapshots: [],
+    saveSnapshot: vi.fn(),
+    loadSnapshot: vi.fn(),
+    clone: vi.fn(),
+    reset: vi.fn(),
+    close: vi.fn(),
+    isLastWorkspace: false,
+    ...overrides,
+  };
+}
+
+describe('<DefaultToolbar>', () => {
+  it('renders close button', () => {
+    render(<DefaultToolbar ctx={makeCtx()} />);
+    expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
+  });
+
+  it('disables close when isLastWorkspace is true', () => {
+    render(<DefaultToolbar ctx={makeCtx({ isLastWorkspace: true })} />);
+    expect(screen.getByRole('button', { name: /close/i })).toBeDisabled();
+  });
+
+  it('omits undo/redo buttons when hasUndo is false', () => {
+    render(<DefaultToolbar ctx={makeCtx({ hasUndo: false })} />);
+    expect(screen.queryByRole('button', { name: /undo/i })).toBeNull();
+    expect(screen.queryByRole('button', { name: /redo/i })).toBeNull();
+  });
+
+  it('shows undo/redo buttons when hasUndo is true', () => {
+    render(<DefaultToolbar ctx={makeCtx({ hasUndo: true, canUndo: true, canRedo: false })} />);
+    expect(screen.getByRole('button', { name: /undo/i })).not.toBeDisabled();
+    expect(screen.getByRole('button', { name: /redo/i })).toBeDisabled();
+  });
+
+  it('omits zoom buttons when hasCanvas is false', () => {
+    render(<DefaultToolbar ctx={makeCtx({ hasCanvas: false })} />);
+    expect(screen.queryByTitle('Zoom in')).toBeNull();
+    expect(screen.queryByTitle('Zoom out')).toBeNull();
+  });
+
+  it('shows zoom controls when hasCanvas is true', () => {
+    render(<DefaultToolbar ctx={makeCtx({ hasCanvas: true, zoom: 1.5 })} />);
+    expect(screen.getByTitle('Zoom in')).toBeInTheDocument();
+    expect(screen.getByTitle('Zoom out')).toBeInTheDocument();
+    expect(screen.getByText('150%')).toBeInTheDocument();
+  });
+
+  it('shows load select when snapshots exist', () => {
+    const ctx = makeCtx({
+      savedSnapshots: [
+        {
+          id: 's1',
+          name: 'First',
+          workspaceId: 'ws-1',
+          instrumentName: 'Stub',
+          config: {},
+          state: {},
+          savedAt: 1,
+        },
+      ],
+    });
+    render(<DefaultToolbar ctx={ctx} />);
+    expect(screen.getByRole('combobox', { name: /load snapshot/i })).toBeInTheDocument();
+  });
+});
+
+const stubInstrument: Instrument = {
+  name: 'Stub',
+  defaultConfig: () => ({}),
+  initialState: () => ({}),
+  render: () => null,
+};
+
+const stubRecord: WorkspaceRecord = {
+  id: 'ws-1',
+  instrumentName: 'Stub',
+  config: {},
+  state: {},
+  view: { zoom: 1, pan: { x: 0, y: 0 } },
+  undoStack: { past: [], future: [] },
+};
+
+type ChromeProps = Parameters<typeof WorkspaceChrome>[0];
+
+function ChromeHarness({
+  children,
+  labOverrides,
+  ...props
+}: { children?: ReactNode; labOverrides?: Partial<LabContextValue> } & Partial<ChromeProps>) {
+  const store = createLabStore({
+    storageKey: 'test',
+    storage: { read: () => null, write: () => {} },
+  });
+  const labCtx: LabContextValue = {
+    instruments: [stubInstrument],
+    workspaces: [stubRecord],
+    addWorkspace: vi.fn(),
+    cloneWorkspace: vi.fn(),
+    closeWorkspace: vi.fn(),
+    resetWorkspace: vi.fn(),
+    savedSnapshots: [],
+    saveSnapshot: vi.fn(),
+    loadSnapshot: vi.fn(),
+    deleteSnapshot: vi.fn(),
+    theme: 'auto',
+    setTheme: vi.fn(),
+    ...labOverrides,
+  };
+  return (
+    <LabStoreContext.Provider value={{ store }}>
+      <LabContext.Provider value={labCtx}>
+        <WorkspaceChrome
+          workspaceId="ws-1"
+          record={stubRecord}
+          instrument={stubInstrument}
+          isLastWorkspace={false}
+          {...props}
+        >
+          {children ?? <div data-testid="content">content</div>}
+        </WorkspaceChrome>
+      </LabContext.Provider>
+    </LabStoreContext.Provider>
+  );
+}
+
+describe('<WorkspaceChrome>', () => {
+  it('renders children in the content area', () => {
+    render(<ChromeHarness />);
+    expect(screen.getByTestId('content')).toBeInTheDocument();
+  });
+
+  it('renders default toolbar when no toolbar prop is given', () => {
+    render(<ChromeHarness />);
+    expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
+  });
+
+  it('renders custom toolbar when toolbar prop is provided', () => {
+    render(<ChromeHarness toolbar={() => <div data-testid="custom-toolbar">custom</div>} />);
+    expect(screen.getByTestId('custom-toolbar')).toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /close/i })).toBeNull();
+  });
+
+  it('Cmd+S triggers saveSnapshot', () => {
+    const saveSnapshot = vi.fn();
+    render(<ChromeHarness labOverrides={{ saveSnapshot }} />);
+    const region = screen.getByRole('region', { name: /workspace/i });
+    fireEvent.keyDown(region, { key: 's', metaKey: true });
+    expect(saveSnapshot).toHaveBeenCalledWith('ws-1', undefined);
+  });
+});
+
+describe('<Lab> + WorkspaceChrome integration', () => {
+  it('Lab provides context for nested WorkspaceChrome', () => {
+    render(<Lab instruments={[stubInstrument]} defaultInstrument="Stub" />);
+    // Lab seeds a workspace; no chrome rendered without children — sanity check Lab mounts.
+    expect(document.querySelector('.lk-lab')).toBeTruthy();
+  });
+});