@weasel-js/labkit 1.0.3 → 1.1.0

package/src/{workspace/WorkspaceChrome.tsx → trial/TrialChrome.tsx}

@@ -3,7 +3,7 @@ import { useStore } from 'zustand/react';
 import type { Instrument } from '../instrument/types';
 import { useLabContext } from '../lab/LabContext';
 import { LabStoreContext } from '../state/context';
-import type { WorkspaceRecord } from '../state/types';
+import type { TrialRecord } from '../state/types';
 import { DefaultSidebar } from './DefaultSidebar';
 import { DefaultStatusBar } from './DefaultStatusBar';
 import { DefaultToolbar } from './DefaultToolbar';
@@ -11,9 +11,9 @@ import type {
   SidebarSlot,
   StatusBarSlot,
   ToolbarSlot,
-  WorkspaceSidebarContext,
-  WorkspaceStatusBarContext,
-  WorkspaceToolbarContext,
+  TrialSidebarContext,
+  TrialStatusBarContext,
+  TrialToolbarContext,
 } from './slotTypes';
 
 export interface UndoBindings {
@@ -23,12 +23,12 @@ export interface UndoBindings {
   redo: () => void;
 }
 
-/** Props for `<WorkspaceChrome>`. */
-export interface WorkspaceChromeProps {
-  workspaceId: string;
-  record: WorkspaceRecord;
+/** Props for `<TrialChrome>`. */
+export interface TrialChromeProps {
+  trialId: string;
+  record: TrialRecord;
   instrument: Instrument;
-  isLastWorkspace: boolean;
+  isLastTrial: boolean;
   toolbar?: ToolbarSlot;
   sidebar?: SidebarSlot;
   statusBar?: StatusBarSlot;
@@ -40,31 +40,31 @@ export interface WorkspaceChromeProps {
 /** The frame around a running instrument — toolbar, sidebar, status bar —
  *  each replaceable by a slot. Assembles the slot contexts and wires the undo
  *  keyboard shortcuts. */
-export function WorkspaceChrome({
-  workspaceId,
+export function TrialChrome({
+  trialId,
   record,
   instrument,
-  isLastWorkspace,
+  isLastTrial,
   toolbar,
   sidebar,
   statusBar,
   undoBindings,
   sidebarExtras,
   children,
-}: WorkspaceChromeProps) {
+}: TrialChromeProps) {
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
-  if (!storeCtx) throw new Error('[labkit] WorkspaceChrome requires <LabStoreProvider>');
-  const updateWorkspaceView = useStore(storeCtx.store, (s) => s.updateWorkspaceView);
-  const updateWorkspaceConfig = useStore(storeCtx.store, (s) => s.updateWorkspaceConfig);
-  const updateWorkspaceState = useStore(storeCtx.store, (s) => s.updateWorkspaceState);
+  if (!storeCtx) throw new Error('[labkit] TrialChrome requires <LabStoreProvider>');
+  const updateTrialView = useStore(storeCtx.store, (s) => s.updateTrialView);
+  const updateTrialConfig = useStore(storeCtx.store, (s) => s.updateTrialConfig);
+  const updateTrialState = useStore(storeCtx.store, (s) => s.updateTrialState);
 
-  const toolbarCtx = useMemo<WorkspaceToolbarContext>(() => {
+  const toolbarCtx = useMemo<TrialToolbarContext>(() => {
     const setZoom = (z: number): void => {
-      updateWorkspaceView(workspaceId, { ...record.view, zoom: z });
+      updateTrialView(trialId, { ...record.view, zoom: z });
     };
     return {
-      workspaceId,
+      trialId,
       instrumentName: record.instrumentName,
       hasUndo: instrument.undo != null,
       canUndo: undoBindings?.canUndo ?? false,
@@ -77,19 +77,19 @@ export function WorkspaceChrome({
       zoomOut: () => setZoom(record.view.zoom * 0.8),
       resetZoom: () => setZoom(1),
       hasCanvas: instrument.canvas != null,
-      savedSnapshots: lab.savedSnapshots.filter((s) => s.workspaceId === workspaceId),
-      saveSnapshot: (name) => lab.saveSnapshot(workspaceId, name),
-      loadSnapshot: (snapshotId) => lab.loadSnapshot(workspaceId, snapshotId),
-      clone: () => lab.cloneWorkspace(workspaceId),
-      reset: () => lab.resetWorkspace(workspaceId),
-      close: () => lab.closeWorkspace(workspaceId),
-      isLastWorkspace,
+      savedSnapshots: lab.savedSnapshots.filter((s) => s.trialId === trialId),
+      saveSnapshot: (name) => lab.saveSnapshot(trialId, name),
+      loadSnapshot: (snapshotId) => lab.loadSnapshot(trialId, snapshotId),
+      clone: () => lab.cloneTrial(trialId),
+      reset: () => lab.resetTrial(trialId),
+      close: () => lab.closeTrial(trialId),
+      isLastTrial,
     };
-  }, [workspaceId, record, instrument, lab, isLastWorkspace, updateWorkspaceView, undoBindings]);
+  }, [trialId, record, instrument, lab, isLastTrial, updateTrialView, undoBindings]);
 
-  const sidebarCtx = useMemo<WorkspaceSidebarContext>(
+  const sidebarCtx = useMemo<TrialSidebarContext>(
     () => ({
-      workspaceId,
+      trialId,
       instrumentName: record.instrumentName,
       configFields: instrument.configSchema?.() ?? [],
       config: record.config,
@@ -100,19 +100,19 @@ export function WorkspaceChrome({
             `[labkit] setConfig: unknown key "${key}" for instrument "${record.instrumentName}"`,
           );
         }
-        updateWorkspaceConfig(workspaceId, key as never, value as never);
+        updateTrialConfig(trialId, key as never, value as never);
         if (instrument.onConfigChange) {
           const nextConfig = { ...prevConfig, [key]: value };
           const nextState = instrument.onConfigChange(nextConfig, prevConfig, record.state);
-          updateWorkspaceState(workspaceId, nextState as never);
+          updateTrialState(trialId, nextState as never);
         }
       },
     }),
-    [workspaceId, record, instrument, updateWorkspaceConfig, updateWorkspaceState],
+    [trialId, record, instrument, updateTrialConfig, updateTrialState],
   );
 
-  const statusCtx: WorkspaceStatusBarContext = {
-    workspaceId,
+  const statusCtx: TrialStatusBarContext = {
+    trialId,
     instrumentName: record.instrumentName,
     zoom: record.view.zoom,
   };
@@ -132,21 +132,21 @@ export function WorkspaceChrome({
 
   return (
     <section
-      className="lk-workspace"
-      aria-label={`Workspace ${record.instrumentName}`}
+      className="lk-trial"
+      aria-label={`Trial ${record.instrumentName}`}
       onKeyDown={handleKeyDown}
     >
-      <div className="lk-workspace__toolbar">
+      <div className="lk-trial__toolbar">
         {toolbar ? toolbar(toolbarCtx) : <DefaultToolbar ctx={toolbarCtx} />}
       </div>
-      <div className="lk-workspace__body">
-        <div className="lk-workspace__sidebar">
+      <div className="lk-trial__body">
+        <div className="lk-trial__sidebar">
           {sidebar ? sidebar(sidebarCtx) : <DefaultSidebar ctx={sidebarCtx} />}
           {sidebarExtras}
         </div>
-        <div className="lk-workspace__content">{children}</div>
+        <div className="lk-trial__content">{children}</div>
       </div>
-      <div className="lk-workspace__status">
+      <div className="lk-trial__status">
         {statusBar ? statusBar(statusCtx) : <DefaultStatusBar ctx={statusCtx} />}
       </div>
     </section>

package/src/{workspace → trial}/index.ts

@@ -8,17 +8,18 @@ export type {
   SidebarSlot,
   StatusBarSlot,
   ToolbarSlot,
-  WorkspaceSidebarContext,
-  WorkspaceStatusBarContext,
-  WorkspaceToolbarContext,
+  TrialSidebarContext,
+  TrialStatusBarContext,
+  TrialToolbarContext,
 } from './slotTypes';
-export type { WorkspaceProps } from './Workspace';
-export { Workspace } from './Workspace';
-export type { WorkspaceChromeProps } from './WorkspaceChrome';
-export { WorkspaceChrome } from './WorkspaceChrome';
+export type { TrialProps } from './Trial';
+export { Trial } from './Trial';
+export type { TrialChromeProps } from './TrialChrome';
+export { TrialChrome } from './TrialChrome';
 export {
-  addWorkspace,
-  cloneWorkspace,
-  closeWorkspace,
-  resetWorkspace,
-} from './workspaceOps';
+  addTrial,
+  cloneTrial,
+  closeTrial,
+  reorderTrials,
+  resetTrial,
+} from './trialOps';

package/src/{workspace → trial}/slotTypes.ts

@@ -2,10 +2,10 @@ import type { ReactNode } from 'react';
 import type { ConfigField } from '../controls/types';
 import type { SavedSnapshot } from '../state/types';
 
-/** What a workspace hands its toolbar: which instrument is running, the undo
+/** What a trial hands its toolbar: which instrument is running, the undo
  *  state and commands, the zoom controls, and the snapshot commands. */
-export interface WorkspaceToolbarContext {
-  workspaceId: string;
+export interface TrialToolbarContext {
+  trialId: string;
   instrumentName: string;
   hasUndo: boolean;
   canUndo: boolean;
@@ -24,30 +24,30 @@ export interface WorkspaceToolbarContext {
   clone: () => void;
   reset: () => void;
   close: () => void;
-  isLastWorkspace: boolean;
+  isLastTrial: boolean;
 }
 
-/** What a workspace hands its sidebar: the instrument's config schema, its
+/** What a trial hands its sidebar: the instrument's config schema, its
  *  current values, and the setter. */
-export interface WorkspaceSidebarContext {
-  workspaceId: string;
+export interface TrialSidebarContext {
+  trialId: string;
   instrumentName: string;
   configFields: ConfigField[];
   config: unknown;
   setConfig: (key: string, value: unknown) => void;
 }
 
-/** What a workspace hands its status bar. */
-export interface WorkspaceStatusBarContext {
-  workspaceId: string;
+/** What a trial hands its status bar. */
+export interface TrialStatusBarContext {
+  trialId: string;
   instrumentName: string;
   zoom: number;
 }
 
-/** Replaces a workspace's toolbar. Receives everything the default one uses,
+/** 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: WorkspaceToolbarContext) => ReactNode;
-/** Replaces a workspace's sidebar. */
-export type SidebarSlot = (ctx: WorkspaceSidebarContext) => ReactNode;
-/** Replaces a workspace's status bar. */
-export type StatusBarSlot = (ctx: WorkspaceStatusBarContext) => ReactNode;
+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/{workspace/workspaceOps.test.ts → trial/trialOps.test.ts}

@@ -1,7 +1,7 @@
 import { describe, expect, it } from 'vitest';
 import type { Instrument } from '../instrument/types';
-import type { WorkspaceRecord } from '../state/types';
-import { addWorkspace, cloneWorkspace, closeWorkspace, resetWorkspace } from './workspaceOps';
+import type { TrialRecord } from '../state/types';
+import { addTrial, cloneTrial, closeTrial, reorderTrials, resetTrial } from './trialOps';
 
 interface CounterState {
   count: number;
@@ -34,9 +34,9 @@ function head<T>(arr: T[]): T {
   return first;
 }
 
-describe('addWorkspace', () => {
+describe('addTrial', () => {
   it('appends a new record using defaultConfig and initialState', () => {
-    const out = addWorkspace([], instruments, 'Counter');
+    const out = addTrial([], instruments, 'Counter');
     expect(out).toHaveLength(1);
     expect(out[0]?.instrumentName).toBe('Counter');
     expect(out[0]?.config).toEqual({ step: 1 });
@@ -44,38 +44,38 @@ describe('addWorkspace', () => {
   });
 
   it('assigns a unique id', () => {
-    const a = addWorkspace([], instruments, 'Counter');
-    const b = addWorkspace(a, instruments, 'Counter');
+    const a = addTrial([], instruments, 'Counter');
+    const b = addTrial(a, instruments, 'Counter');
     expect(b).toHaveLength(2);
     expect(b[0]?.id).not.toBe(b[1]?.id);
   });
 
   it('uses canvas.initialView when present', () => {
-    const out = addWorkspace([], instruments, 'CounterCanvas');
+    const out = addTrial([], instruments, 'CounterCanvas');
     expect(out[0]?.view).toEqual({ zoom: 2, pan: { x: 5, y: 7 } });
   });
 
   it('defaults view when canvas absent', () => {
-    const out = addWorkspace([], instruments, 'Counter');
+    const out = addTrial([], instruments, 'Counter');
     expect(out[0]?.view).toEqual({ zoom: 1, pan: { x: 0, y: 0 } });
   });
 
   it('throws when instrumentName is unknown', () => {
-    expect(() => addWorkspace([], instruments, 'Missing')).toThrow();
+    expect(() => addTrial([], instruments, 'Missing')).toThrow();
   });
 
   it('does not mutate input array', () => {
-    const arr: WorkspaceRecord[] = [];
-    addWorkspace(arr, instruments, 'Counter');
+    const arr: TrialRecord[] = [];
+    addTrial(arr, instruments, 'Counter');
     expect(arr).toHaveLength(0);
   });
 });
 
-describe('cloneWorkspace', () => {
+describe('cloneTrial', () => {
   it('inserts clone immediately after source with new id', () => {
-    const a = addWorkspace([], instruments, 'Counter');
+    const a = addTrial([], instruments, 'Counter');
     const sourceId = head(a).id;
-    const cloned = cloneWorkspace(a, sourceId);
+    const cloned = cloneTrial(a, sourceId);
     expect(cloned).toHaveLength(2);
     expect(cloned[0]?.id).toBe(sourceId);
     expect(cloned[1]?.id).not.toBe(sourceId);
@@ -83,60 +83,87 @@ describe('cloneWorkspace', () => {
   });
 
   it('deep-copies config/state/view', () => {
-    const a = addWorkspace([], instruments, 'Counter');
-    const cloned = cloneWorkspace(a, head(a).id);
+    const a = addTrial([], instruments, 'Counter');
+    const cloned = cloneTrial(a, head(a).id);
     expect(cloned[1]?.config).not.toBe(cloned[0]?.config);
     expect(cloned[1]?.state).not.toBe(cloned[0]?.state);
     expect(cloned[1]?.view).not.toBe(cloned[0]?.view);
   });
 
   it('does not mutate input', () => {
-    const a = addWorkspace([], instruments, 'Counter');
+    const a = addTrial([], instruments, 'Counter');
     const before = a.length;
-    cloneWorkspace(a, head(a).id);
+    cloneTrial(a, head(a).id);
     expect(a).toHaveLength(before);
   });
 });
 
-describe('closeWorkspace', () => {
-  it('removes the workspace with the given id', () => {
-    let arr = addWorkspace([], instruments, 'Counter');
-    arr = addWorkspace(arr, instruments, 'Counter');
-    const closed = closeWorkspace(arr, head(arr).id);
+describe('closeTrial', () => {
+  it('removes the trial with the given id', () => {
+    let arr = addTrial([], instruments, 'Counter');
+    arr = addTrial(arr, instruments, 'Counter');
+    const closed = closeTrial(arr, head(arr).id);
     expect(closed).toHaveLength(1);
     expect(closed[0]?.id).toBe(arr[1]?.id);
   });
 
-  it('is a no-op when only one workspace remains', () => {
-    const arr = addWorkspace([], instruments, 'Counter');
-    const closed = closeWorkspace(arr, head(arr).id);
+  it('is a no-op when only one trial remains', () => {
+    const arr = addTrial([], instruments, 'Counter');
+    const closed = closeTrial(arr, head(arr).id);
     expect(closed).toEqual(arr);
   });
 });
 
-describe('resetWorkspace', () => {
+describe('resetTrial', () => {
   it('resets config and state to defaults; preserves instrumentName', () => {
-    const arr = addWorkspace([], instruments, 'Counter');
+    const arr = addTrial([], instruments, 'Counter');
     const id = head(arr).id;
     head(arr).config = { step: 99 } as CounterConfig;
     head(arr).state = { count: 42 } as CounterState;
-    const reset = resetWorkspace(arr, id, instruments);
+    const reset = resetTrial(arr, id, instruments);
     expect(reset[0]?.config).toEqual({ step: 1 });
     expect(reset[0]?.state).toEqual({ count: 0 });
     expect(reset[0]?.instrumentName).toBe('Counter');
   });
 
   it('resets view to canvas.initialView when present', () => {
-    const arr = addWorkspace([], instruments, 'CounterCanvas');
+    const arr = addTrial([], instruments, 'CounterCanvas');
     head(arr).view = { zoom: 9, pan: { x: 9, y: 9 } };
-    const reset = resetWorkspace(arr, head(arr).id, instruments);
+    const reset = resetTrial(arr, head(arr).id, instruments);
     expect(reset[0]?.view).toEqual({ zoom: 2, pan: { x: 5, y: 7 } });
   });
 
   it('does not mutate input', () => {
-    const arr = addWorkspace([], instruments, 'Counter');
+    const arr = addTrial([], instruments, 'Counter');
     head(arr).config = { step: 99 } as CounterConfig;
-    resetWorkspace(arr, head(arr).id, instruments);
+    resetTrial(arr, head(arr).id, instruments);
     expect((arr[0]?.config as CounterConfig).step).toBe(99);
   });
 });
+
+describe('reorderTrials', () => {
+  const ws = (id: string) =>
+    ({
+      id,
+      instrumentName: 'T',
+      config: {},
+      state: {},
+      view: { zoom: 1, pan: { x: 0, y: 0 } },
+      undoStack: { past: [], future: [] },
+    }) as never;
+
+  it('reorders to match the given ids', () => {
+    const next = reorderTrials([ws('a'), ws('b'), ws('c')], ['c', 'a', 'b']);
+    expect(next.map((w) => w.id)).toEqual(['c', 'a', 'b']);
+  });
+
+  it('drops ids that no longer exist rather than resurrecting them', () => {
+    const next = reorderTrials([ws('a'), ws('b')], ['gone', 'b', 'a']);
+    expect(next.map((w) => w.id)).toEqual(['b', 'a']);
+  });
+
+  it('keeps unmentioned trials, after the named ones', () => {
+    const next = reorderTrials([ws('a'), ws('b'), ws('c')], ['c']);
+    expect(next.map((w) => w.id)).toEqual(['c', 'a', 'b']);
+  });
+});

package/src/trial/trialOps.ts

@@ -0,0 +1,99 @@
+import type { Instrument, InstrumentList } from '../instrument/types';
+import type { TrialRecord } from '../state/types';
+
+const DEFAULT_VIEW = { zoom: 1, pan: { x: 0, y: 0 } } as const;
+
+function findInstrument(instruments: InstrumentList, name: string): Instrument {
+  const found = instruments.find((i) => i.name === name);
+  if (!found) {
+    throw new Error(`[labkit] Unknown instrument: "${name}"`);
+  }
+  return found;
+}
+
+function initialView(instrument: Instrument): TrialRecord['view'] {
+  return instrument.canvas?.initialView
+    ? structuredClone(instrument.canvas.initialView)
+    : { ...DEFAULT_VIEW, pan: { ...DEFAULT_VIEW.pan } };
+}
+
+/** Append a new trial running `instrumentName`, at that instrument's
+ *  default config and initial state. */
+export function addTrial(
+  trials: TrialRecord[],
+  instruments: InstrumentList,
+  instrumentName: string,
+): TrialRecord[] {
+  const instrument = findInstrument(instruments, instrumentName);
+  const config = instrument.defaultConfig();
+  const state = instrument.initialState(config);
+  const record: TrialRecord = {
+    id: crypto.randomUUID(),
+    instrumentName,
+    config,
+    state,
+    view: initialView(instrument),
+    undoStack: { past: [], future: [] },
+  };
+  return [...trials, record];
+}
+
+/** Insert a deep copy of a trial directly after it. The copy starts with
+ *  an empty undo history — the original's is not shared. */
+export function cloneTrial(trials: TrialRecord[], id: string): TrialRecord[] {
+  const sourceIdx = trials.findIndex((w) => w.id === id);
+  const source = trials[sourceIdx];
+  if (!source) return trials;
+  const clone: TrialRecord = {
+    ...source,
+    id: crypto.randomUUID(),
+    config: structuredClone(source.config),
+    state: structuredClone(source.state),
+    view: structuredClone(source.view),
+    undoStack: { past: [], future: [] },
+  };
+  return [...trials.slice(0, sourceIdx + 1), clone, ...trials.slice(sourceIdx + 1)];
+}
+
+/** Remove a trial, unless it is the last one — a lab always has at least
+ *  one. */
+export function closeTrial(trials: TrialRecord[], id: string): TrialRecord[] {
+  if (trials.length <= 1) return trials;
+  const next = trials.filter((w) => w.id !== id);
+  return next.length === trials.length ? trials : next;
+}
+
+/** Return a trial to its instrument's defaults, keeping its id and its
+ *  place in the list. */
+export function resetTrial(
+  trials: TrialRecord[],
+  id: string,
+  instruments: InstrumentList,
+): TrialRecord[] {
+  const idx = trials.findIndex((w) => w.id === id);
+  const current = trials[idx];
+  if (!current) return trials;
+  const instrument = findInstrument(instruments, current.instrumentName);
+  const config = instrument.defaultConfig();
+  const state = instrument.initialState(config);
+  const reset: TrialRecord = {
+    ...current,
+    config,
+    state,
+    view: initialView(instrument),
+  };
+  return [...trials.slice(0, idx), reset, ...trials.slice(idx + 1)];
+}
+
+/**
+ * Reorder to match `ids`. Ids the list doesn't mention keep their relative
+ * order at the end, and ids it names that no longer exist are dropped — a
+ * reorder that raced a close should not resurrect the closed trial.
+ */
+export function reorderTrials(trials: TrialRecord[], ids: readonly string[]): TrialRecord[] {
+  const byId = new Map(trials.map((w) => [w.id, w]));
+  const named = ids.map((id) => byId.get(id)).filter((w): w is TrialRecord => w !== undefined);
+  const seen = new Set(named.map((w) => w.id));
+  const rest = trials.filter((w) => !seen.has(w.id));
+  return [...named, ...rest];
+}

package/src/ui/format.test.ts

@@ -0,0 +1,33 @@
+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

@@ -17,3 +17,14 @@ export function formatNumber(n: number, fractionDigits?: number): string {
 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/properties/CurveField.tsx

@@ -45,7 +45,7 @@ export function CurveField({
 }: CurveFieldProps) {
   const points: ControlPoint[] = useMemo(() => {
     const out: ControlPoint[] = [];
-    for (let i = 0; i + 1 < values.length; i += 2) out.push({ x: values[i]!, y: values[i + 1]! });
+    for (let i = 0; i + 1 < values.length; i += 2) out.push({ x: values[i], y: values[i + 1] });
     return out;
   }, [values]);
 
@@ -53,9 +53,9 @@ export function CurveField({
     (next: ControlPoint[]) => {
       const flat: number[] = new Array(next.length * 2);
       for (let i = 0; i < next.length; i++) {
-        const ySnap = Math.round(next[i]!.y / step) * step;
+        const ySnap = Math.round(next[i].y / step) * step;
         const y = Math.max(min, Math.min(max, ySnap));
-        flat[i * 2] = next[i]!.x;
+        flat[i * 2] = next[i].x;
         flat[i * 2 + 1] = y;
       }
       dlog('curve-field', 'handleChange', {
@@ -71,7 +71,7 @@ export function CurveField({
   const handleFlip = useCallback(() => {
     const flipped: Array<{ x: number; y: number }> = [];
     for (let i = 0; i + 1 < values.length; i += 2) {
-      flipped.push({ x: 1 - values[i]!, y: values[i + 1]! });
+      flipped.push({ x: 1 - values[i], y: values[i + 1] });
     }
     flipped.sort((a, b) => a.x - b.x);
     const out: number[] = [];
@@ -83,8 +83,8 @@ export function CurveField({
     const mid = (min + max) / 2;
     const flipped: number[] = new Array(values.length);
     for (let i = 0; i + 1 < values.length; i += 2) {
-      flipped[i] = values[i]!;
-      flipped[i + 1] = 2 * mid - values[i + 1]!;
+      flipped[i] = values[i];
+      flipped[i + 1] = 2 * mid - values[i + 1];
     }
     onChange(flipped);
   }, [values, min, max, onChange]);

package/src/ui/properties/SpeechBalloonPanels.stories.tsx

@@ -290,9 +290,9 @@ export const RightSidebarTails: Story = {
   render: () => {
     function TailsList() {
       const [tails, setTails] = useState<TailItem[]>([
-        { id: 1, shape: 'classic', accent: TAIL_PALETTE[0]! },
-        { id: 2, shape: 'bubbles', accent: TAIL_PALETTE[1]! },
-        { id: 3, shape: 'wavy', accent: TAIL_PALETTE[2]! },
+        { id: 1, shape: 'classic', accent: TAIL_PALETTE[0] },
+        { id: 2, shape: 'bubbles', accent: TAIL_PALETTE[1] },
+        { id: 3, shape: 'wavy', accent: TAIL_PALETTE[2] },
       ]);
       const reorder = (sourceId: number, targetId: number, position: 'before' | 'after') => {
         setTails((prev) => {