@weasel-js/labkit 1.2.0 → 1.3.0

package/src/trial/DefaultStatusBar.tsx

@@ -1,19 +0,0 @@
-import { StatusBar } from '../primitives/StatusBar';
-import { formatZoom } from '../ui/format';
-import type { TrialStatusBarContext } from './slotTypes';
-
-/** Props for `<DefaultStatusBar>`. */
-export interface DefaultStatusBarProps {
-  ctx: TrialStatusBarContext;
-}
-
-/** The status bar a trial renders when no `statusBar` slot is supplied:
- *  the instrument's name, and the zoom when the trial's view has one. */
-export function DefaultStatusBar({ ctx }: DefaultStatusBarProps) {
-  return (
-    <StatusBar>
-      <StatusBar.Section>{ctx.instrumentName}</StatusBar.Section>
-      {ctx.zoom === null ? null : <StatusBar.Section>{formatZoom(ctx.zoom)}</StatusBar.Section>}
-    </StatusBar>
-  );
-}

package/src/trial/DefaultToolbar.tsx

@@ -1,92 +0,0 @@
-import { Toolbar } from '../primitives/Toolbar';
-import { formatZoom } from '../ui/format';
-import type { TrialToolbarContext } from './slotTypes';
-
-/** Props for `<DefaultToolbar>`. */
-export interface DefaultToolbarProps {
-  ctx: TrialToolbarContext;
-}
-
-/** The toolbar a trial renders when no `toolbar` slot is supplied. Only
- *  shows the controls the instrument's declared capabilities support. */
-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">{formatZoom(ctx.zoom)}</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 trial">
-        Clone
-      </Toolbar.Button>
-      <Toolbar.Button onClick={ctx.reset} title="Reset trial">
-        Reset
-      </Toolbar.Button>
-      <Toolbar.Button
-        onClick={ctx.close}
-        disabled={ctx.isLastTrial}
-        title={ctx.isLastTrial ? 'Cannot close the last trial' : 'Close trial'}
-      >
-        Close
-      </Toolbar.Button>
-    </Toolbar>
-  );
-}

package/src/trial/slotTypes.ts

@@ -1,54 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ConfigField } from '../controls/types';
-import type { SavedSnapshot } from '../state/types';
-
-/** What a trial hands its toolbar: which instrument is running, the undo
- *  state and commands, the zoom controls, and the snapshot commands. */
-export interface TrialToolbarContext {
-  trialId: string;
-  instrumentName: string;
-  hasUndo: boolean;
-  canUndo: boolean;
-  canRedo: boolean;
-  undo: () => void;
-  redo: () => void;
-  zoom: number;
-  setZoom: (z: number) => void;
-  zoomIn: () => void;
-  zoomOut: () => void;
-  resetZoom: () => void;
-  hasCanvas: boolean;
-  savedSnapshots: SavedSnapshot[];
-  saveSnapshot: (name?: string) => void;
-  loadSnapshot: (snapshotId: string) => void;
-  clone: () => void;
-  reset: () => void;
-  close: () => void;
-  isLastTrial: boolean;
-}
-
-/** What a trial hands its sidebar: the instrument's config schema, its
- *  current values, and the setter. */
-export interface TrialSidebarContext {
-  trialId: string;
-  instrumentName: string;
-  configFields: ConfigField[];
-  config: unknown;
-  setConfig: (key: string, value: unknown) => void;
-}
-
-/** What a trial hands its status bar. */
-export interface TrialStatusBarContext {
-  trialId: string;
-  instrumentName: string;
-  /** Null when the trial holds a view that is not the 2D one. */
-  zoom: number | null;
-}
-
-/** Replaces a trial's toolbar. Receives everything the default one uses,
- *  so a custom toolbar need not reach into the store. */
-export type ToolbarSlot = (ctx: TrialToolbarContext) => ReactNode;
-/** Replaces a trial's sidebar. */
-export type SidebarSlot = (ctx: TrialSidebarContext) => ReactNode;
-/** Replaces a trial's status bar. */
-export type StatusBarSlot = (ctx: TrialStatusBarContext) => ReactNode;

package/src/ui/format.test.ts

@@ -1,33 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { formatZoom } from './format';
-
-describe('formatZoom', () => {
-  it('shows a percentage up to and including 2x', () => {
-    expect(formatZoom(0.5)).toBe('50%');
-    expect(formatZoom(1)).toBe('100%');
-    expect(formatZoom(1.5)).toBe('150%');
-    expect(formatZoom(2)).toBe('200%');
-  });
-
-  it('switches to a multiplier above 2x', () => {
-    expect(formatZoom(2.5)).toBe('2.5x');
-    expect(formatZoom(4)).toBe('4x');
-    expect(formatZoom(16)).toBe('16x');
-  });
-
-  it('rounds the multiplier to one decimal and drops a trailing zero', () => {
-    expect(formatZoom(3.04)).toBe('3x');
-    expect(formatZoom(3.06)).toBe('3.1x');
-  });
-
-  it('drops the decimal and groups thousands past 100x', () => {
-    expect(formatZoom(100)).toBe('100x');
-    expect(formatZoom(1009.74)).toBe('1,010x');
-    expect(formatZoom(99.9)).toBe('99.9x');
-  });
-
-  it('passes non-finite zoom through rather than printing NaN%', () => {
-    expect(formatZoom(Number.NaN)).toBe('NaN');
-    expect(formatZoom(Number.POSITIVE_INFINITY)).toBe('Infinity');
-  });
-});

package/src/ui/format.ts

@@ -1,30 +0,0 @@
-// Display formatting helpers shared across the UI.
-//
-// House style: render negative numbers with the typographic MINUS SIGN
-// (U+2212, "−") instead of ASCII hyphen-minus ("-"). Editing surfaces should
-// accept either glyph on input via `parseSignedNumber`.
-
-const MINUS = '−';
-
-/** Format a finite number for display, swapping the leading "-" to U+2212. */
-export function formatNumber(n: number, fractionDigits?: number): string {
-  if (!Number.isFinite(n)) return String(n);
-  const s = fractionDigits == null ? String(n) : n.toFixed(fractionDigits);
-  return s.startsWith('-') ? MINUS + s.slice(1) : s;
-}
-
-/** Parse a string that may use U+2212 or ASCII hyphen-minus for the negative sign. */
-export function parseSignedNumber(s: string): number {
-  return Number(s.replace(MINUS, '-'));
-}
-
-/** Zoom for display. Below 2x a percentage reads naturally; past it the
- *  numbers get long and a multiplier is what people say out loud, so 250%
- *  shows as `2.5x`. Past 100x a tenth is noise, so the decimal is dropped
- *  and thousands are grouped: `1009.74` reads as `1,010x`. */
-export function formatZoom(zoom: number): string {
-  if (!Number.isFinite(zoom)) return String(zoom);
-  if (zoom <= 2) return `${formatNumber(Math.round(zoom * 100))}%`;
-  if (zoom >= 100) return `${Math.round(zoom).toLocaleString('en-US')}x`;
-  return `${formatNumber(Math.round(zoom * 10) / 10)}x`;
-}

package/src/ui/layers/LayerStack.less

@@ -1,143 +0,0 @@
-.lk-layer-stack {
-  display: grid;
-  gap: 8px;
-}
-
-.lk-layer-stack__head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.lk-layer-stack__title {
-  margin: 0;
-  font-family: var(--wzl-font-display);
-  font-weight: var(--wzl-font-weight-light);
-  font-size: 1rem;
-  color: var(--wzl-fg);
-}
-
-.lk-layer-stack__palette {
-  display: flex;
-  gap: 4px;
-}
-
-.lk-layer-stack__add {
-  background: transparent;
-  border: 1px dashed var(--wzl-border);
-  border-radius: var(--wzl-radius-sm);
-  padding: 2px 8px;
-  font-size: 0.78rem;
-  color: var(--wzl-fg-subtle);
-  cursor: pointer;
-}
-
-.lk-layer-stack__add:hover {
-  background: var(--wzl-surface-raised);
-  color: var(--wzl-fg);
-}
-
-.lk-layer-stack__list {
-  display: grid;
-  gap: 6px;
-}
-
-.lk-layer-stack__drop-hint {
-  height: 2px;
-  background: var(--wzl-accent);
-  border-radius: 1px;
-}
-
-.lk-layer-stack__empty {
-  color: var(--wzl-fg-subtle);
-  font-size: 0.85rem;
-  padding: 8px;
-  text-align: center;
-}
-
-.lk-layer-card {
-  background: var(--wzl-surface-raised);
-  border: 1px solid var(--wzl-border);
-  border-radius: var(--wzl-radius-md);
-  overflow: hidden;
-}
-
-.lk-layer-card.has-accent {
-  // Re-bind --wzl-accent inside the card so descendant controls (slider tracks
-  // and thumbs, readouts, etc.) tint to the per-card accent instead of the
-  // global theme accent. Mirrors EffectCard's behavior.
-  --wzl-accent: var(--lk-layer-card-accent);
-  border-left: 3px solid var(--lk-layer-card-accent);
-}
-
-.lk-layer-card.is-dragging {
-  opacity: 0.5;
-}
-
-.lk-layer-card__head {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 8px;
-}
-
-// Prefixed with `.lk-root` to outrank the .lk-root button rule in base.less,
-// which would otherwise paint a chrome border + elevated bg on these buttons.
-.lk-root .lk-layer-card__handle {
-  background: transparent;
-  border: 0;
-  color: var(--wzl-fg-subtle);
-  padding: 2px 4px;
-  cursor: grab;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 22px;
-  height: 22px;
-  border-radius: var(--wzl-radius-sm);
-  font-weight: 600;
-  font-size: 0.85rem;
-}
-
-.lk-layer-card.has-accent .lk-layer-card__handle {
-  background: var(--lk-layer-card-accent);
-  color: white;
-}
-
-.lk-layer-card__handle:active {
-  cursor: grabbing;
-}
-
-.lk-layer-card__kind,
-.lk-layer-card__primary {
-  flex: 1;
-  font-size: 0.9rem;
-}
-
-.lk-layer-card__primary {
-  background: transparent;
-  border: 0;
-  color: var(--wzl-fg);
-  font: inherit;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-}
-
-.lk-root .lk-layer-card__remove {
-  background: transparent;
-  border: 0;
-  color: var(--wzl-fg-subtle);
-  font-size: 1rem;
-  cursor: pointer;
-  padding: 2px 6px;
-}
-
-.lk-layer-card__remove:hover {
-  color: var(--wzl-fg);
-}
-
-.lk-layer-card__body {
-  padding: 8px;
-  border-top: 1px solid var(--wzl-border);
-}

package/src/ui/layers/LayerStack.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
-import { LayerStack, type LayerStackItem } from './LayerStack';
-
-const meta: Meta<typeof LayerStack> = {
-  title: 'labkit/UI/Layers/LayerStack',
-  component: LayerStack,
-};
-export default meta;
-
-const seed: LayerStackItem[] = [
-  { id: 1, kind: 'fill', primaryValue: 'dome', primaryOptions: ['aqua', 'bevel', 'dome'] },
-  { id: 2, kind: 'tail', accent: '#f55', badge: '1' },
-  { id: 3, kind: 'shadow' },
-];
-
-export const Basic: StoryObj<typeof LayerStack> = {
-  render: () => {
-    const [items, setItems] = useState(seed);
-    let next = 4;
-    return (
-      <div style={{ width: 320 }}>
-        <LayerStack
-          title="Layers"
-          items={items}
-          paletteKinds={['fill', 'tail', 'shadow']}
-          onAdd={(kind) => setItems([...items, { id: next++, kind }])}
-          onRemove={(id) => setItems(items.filter((i) => i.id !== id))}
-          onReorder={(ids) => {
-            const byId = new Map(items.map((i) => [i.id, i]));
-            const reordered = ids.flatMap((id) => {
-              const found = byId.get(id);
-              return found ? [found] : [];
-            });
-            setItems(reordered);
-          }}
-          onPrimaryChange={(id, value) =>
-            setItems(items.map((i) => (i.id === id ? { ...i, primaryValue: value } : i)))
-          }
-          renderBody={(item) => <div style={{ color: '#888' }}>body for {item.kind}</div>}
-        />
-      </div>
-    );
-  },
-};

package/src/ui/layers/LayerStack.test.tsx

@@ -1,170 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
-
-// useReorderDragList pulls its own React copy from weasel/node_modules, which
-// breaks hooks in jsdom. Stub it out with a no-op implementation.
-vi.mock('../../passthrough/weasel-ui', () => ({
-  dlog: () => {},
-  useReorderDragList: () => ({
-    rowProps: (_id: string, _i: number) => ({ onPointerDown: () => {} }),
-    containerProps: {
-      ref: () => {},
-      onPointerMove: () => {},
-      onPointerUp: () => {},
-      onPointerCancel: () => {},
-    },
-    state: { draggedIds: null, targetIndex: null },
-  }),
-}));
-
-import { LayerStack, type LayerStackItem } from './LayerStack';
-
-const items: LayerStackItem[] = [
-  { id: 1, kind: 'fill', primaryValue: 'aqua', primaryOptions: ['aqua', 'bevel', 'dome'] },
-  { id: 2, kind: 'tail', accent: '#f44', badge: '1' },
-  { id: 3, kind: 'shadow' },
-];
-
-describe('LayerStack', () => {
-  it('renders header + add buttons + each item', () => {
-    render(
-      <LayerStack
-        title="Fill"
-        items={items}
-        paletteKinds={['fill', 'tail', 'shadow']}
-        onAdd={() => {}}
-        onRemove={() => {}}
-        onReorder={() => {}}
-        onPrimaryChange={() => {}}
-        renderBody={(item) => <div>body-{item.id}</div>}
-      />,
-    );
-    expect(screen.getByText('Fill')).toBeInTheDocument();
-    for (const k of ['fill', 'tail', 'shadow']) {
-      expect(screen.getByRole('button', { name: new RegExp(`add ${k}`, 'i') })).toBeInTheDocument();
-    }
-    expect(screen.getAllByTestId(/lk-layer-card-/)).toHaveLength(3);
-  });
-
-  it('clicking a palette button calls onAdd with that kind', () => {
-    const onAdd = vi.fn();
-    render(
-      <LayerStack
-        title="Fill"
-        items={items}
-        paletteKinds={['fill', 'tail']}
-        onAdd={onAdd}
-        onRemove={() => {}}
-        onReorder={() => {}}
-        onPrimaryChange={() => {}}
-        renderBody={() => null}
-      />,
-    );
-    fireEvent.click(screen.getByRole('button', { name: /add tail/i }));
-    expect(onAdd).toHaveBeenCalledWith('tail');
-  });
-
-  it('clicking the remove button calls onRemove with that id', () => {
-    const onRemove = vi.fn();
-    render(
-      <LayerStack
-        title="Fill"
-        items={items}
-        paletteKinds={[]}
-        onAdd={() => {}}
-        onRemove={onRemove}
-        onReorder={() => {}}
-        onPrimaryChange={() => {}}
-        renderBody={() => null}
-      />,
-    );
-    const removes = screen.getAllByRole('button', { name: /remove layer/i });
-    fireEvent.click(removes[1]);
-    expect(onRemove).toHaveBeenCalledWith(2);
-  });
-
-  it('shows empty state when items is empty', () => {
-    render(
-      <LayerStack
-        title="Empty"
-        items={[]}
-        paletteKinds={['fill']}
-        onAdd={() => {}}
-        onRemove={() => {}}
-        onReorder={() => {}}
-        onPrimaryChange={() => {}}
-        renderBody={() => null}
-      />,
-    );
-    expect(screen.getByText(/no layers/i)).toBeInTheDocument();
-  });
-
-  it('changing the primary select calls onPrimaryChange', () => {
-    const onPrimaryChange = vi.fn();
-    render(
-      <LayerStack
-        title="Fill"
-        items={items}
-        paletteKinds={[]}
-        onAdd={() => {}}
-        onRemove={() => {}}
-        onReorder={() => {}}
-        onPrimaryChange={onPrimaryChange}
-        renderBody={() => null}
-      />,
-    );
-    const sel = screen.getByLabelText(/primary select for layer 1/i) as HTMLSelectElement;
-    fireEvent.change(sel, { target: { value: 'bevel' } });
-    expect(onPrimaryChange).toHaveBeenCalledWith(1, 'bevel');
-  });
-
-  it('newly added items render expanded by default', () => {
-    const initial: LayerStackItem[] = [{ id: 1, kind: 'fill' }];
-    const { rerender } = render(
-      <LayerStack
-        title="Fill"
-        items={initial}
-        paletteKinds={[]}
-        onAdd={() => {}}
-        onRemove={() => {}}
-        onReorder={() => {}}
-        onPrimaryChange={() => {}}
-        renderBody={(item) => <div data-testid={`body-${item.id}`}>b{item.id}</div>}
-      />,
-    );
-    expect(screen.getByTestId('body-1')).toBeInTheDocument();
-    rerender(
-      <LayerStack
-        title="Fill"
-        items={[...initial, { id: 2, kind: 'tail' }]}
-        paletteKinds={[]}
-        onAdd={() => {}}
-        onRemove={() => {}}
-        onReorder={() => {}}
-        onPrimaryChange={() => {}}
-        renderBody={(item) => <div data-testid={`body-${item.id}`}>b{item.id}</div>}
-      />,
-    );
-    expect(screen.getByTestId('body-2')).toBeInTheDocument();
-  });
-
-  it('items with defaultExpanded: false render collapsed', () => {
-    render(
-      <LayerStack
-        title="Fill"
-        items={[{ id: 1, kind: 'fill', defaultExpanded: false }]}
-        paletteKinds={[]}
-        onAdd={() => {}}
-        onRemove={() => {}}
-        onReorder={() => {}}
-        onPrimaryChange={() => {}}
-        renderBody={(item) => <div data-testid={`body-${item.id}`}>b{item.id}</div>}
-      />,
-    );
-    expect(screen.queryByTestId('body-1')).not.toBeInTheDocument();
-  });
-
-  // TODO: reorder off-by-one fix (Bug 1) is covered by manual integration
-  // testing in speech-balloons once LayerStack is consumed there (B3).
-  // useReorderDragList is mocked in unit tests, making onReorder untestable here.
-});