@weasel-js/labkit 1.1.0 → 1.3.0-pre.0

package/src/trial/Trial.tsx

@@ -2,20 +2,17 @@ import { type ReactNode, useContext, useMemo, useRef, useState } from 'react';
 import { useStore } from 'zustand/react';
 import { CanvasStack } from '../canvas/CanvasStack';
 import type { CanvasLayerDescriptor } from '../canvas/useLayerScheduler';
+import type { TrialContribution } from '../chrome/types';
 import { DragOverlay, useDragDrop } from '../dragdrop/DragDropRuntime';
 import { Palette } from '../dragdrop/Palette';
-import type {
-  Instrument,
-  LayerDescriptor,
-  PaletteItem,
-  RenderContext,
-  ViewTransform,
-} from '../instrument/types';
+import type { Instrument, LayerDescriptor, PaletteItem, RenderContext } from '../instrument/types';
+import { useJob } from '../job/useJob';
 import { useLabContext } from '../lab/LabContext';
 import { LayerList } from '../layers/LayerList';
 import { LabStoreContext } from '../state/context';
 import type { LabStore } from '../state/store';
 import type { TrialRecord } from '../state/types';
+import { as2DView, DEFAULT_VIEW } from '../state/view';
 import { createEventBus, type EventBus } from '../undo/eventBus';
 import { pushSnapshot, redo as undoRedo, undo as undoUndo } from '../undo/undoStack';
 import type { UndoBindings } from './TrialChrome';
@@ -24,11 +21,16 @@ import { TrialChrome } from './TrialChrome';
 /** Props for `<Trial>`. */
 export interface TrialProps {
   id: string;
+  /** Contributions the lab adds to this trial's chrome, merged after the
+   *  instrument's own. */
+  chrome?: readonly TrialContribution[];
+  /** Built-in contribution ids to drop. Throws on an id that is not there. */
+  suppress?: readonly string[];
 }
 
 /** Renders one trial from the lab store: looks up its record and
  *  instrument, and mounts the instrument inside the trial chrome. */
-export function Trial({ id }: TrialProps) {
+export function Trial({ id, chrome, suppress }: TrialProps) {
   const lab = useLabContext();
   const storeCtx = useContext(LabStoreContext);
   if (!storeCtx) throw new Error('[labkit] <Trial> requires <LabStoreProvider>');
@@ -48,6 +50,8 @@ export function Trial({ id }: TrialProps) {
       instrument={instrument}
       store={storeCtx.store}
       isLast={lab.trials.length <= 1}
+      chrome={chrome}
+      suppress={suppress}
     />
   );
 }
@@ -57,14 +61,19 @@ interface TrialRuntimeProps {
   instrument: Instrument;
   store: LabStore;
   isLast: boolean;
+  chrome?: readonly TrialContribution[];
+  suppress?: readonly string[];
 }
 
-function TrialRuntime({ record, instrument, store, isLast }: TrialRuntimeProps) {
+function TrialRuntime({ record, instrument, store, isLast, chrome, suppress }: TrialRuntimeProps) {
   const canvasContainerRef = useRef<HTMLDivElement | null>(null);
   const updateTrialState = useStore(store, (s) => s.updateTrialState);
   const updateTrialConfig = useStore(store, (s) => s.updateTrialConfig);
   const updateTrialView = useStore(store, (s) => s.updateTrialView);
   const updateTrialUndoStack = useStore(store, (s) => s.updateTrialUndoStack);
+  const labToolId = useStore(store, (s) => s.activeToolId);
+  const setLabTool = useStore(store, (s) => s.setLabTool);
+  const setTrialTool = useStore(store, (s) => s.setTrialTool);
 
   const busRef = useRef<EventBus | null>(null);
   if (busRef.current === null) busRef.current = createEventBus();
@@ -85,7 +94,32 @@ function TrialRuntime({ record, instrument, store, isLast }: TrialRuntimeProps)
     updateTrialUndoStack(record.id, (prev) => pushSnapshot(prev, snap, maxDepth));
   };
 
-  const setView = (v: ViewTransform): void => updateTrialView(record.id, v);
+  const setView = (v: unknown): void => updateTrialView(record.id, v);
+
+  // A trial gets its own slot when its instrument declares tools; otherwise it
+  // reads the lab's. Which slot a change writes follows from the same thing.
+  const declaresTools = instrument.tools != null;
+  const resolvedToolId = declaresTools
+    ? (record.activeToolId ?? instrument.tools?.initial ?? instrument.tools?.tools[0]?.id ?? null)
+    : labToolId;
+  const setActiveTool = (id: string): void => {
+    if (declaresTools) setTrialTool(record.id, id);
+    else setLabTool(id);
+  };
+
+  // `CanvasStack` and the zoom controls are 2D; a trial holding another view shape
+  // gets the default here and simply never renders them.
+  const view2d = as2DView(record.view);
+
+  const jobCap = instrument.job;
+  // Hooks cannot be conditional, so a trial without the capability still calls
+  // this — with a runner that yields nothing and is never started.
+  const job = useJob({
+    capability: jobCap ?? { run: async function* () {}, onItem: (_i, st) => st },
+    config: record.config,
+    state: record.state,
+    setState: (next) => updateTrialState(record.id, next as never),
+  });
 
   const renderCtx: RenderContext<unknown, unknown> = {
     state: record.state,
@@ -105,13 +139,20 @@ function TrialRuntime({ record, instrument, store, isLast }: TrialRuntimeProps)
     },
     trial: {
       id: record.id,
-      zoom: record.view.zoom,
-      setZoom: (z) => updateTrialView(record.id, { ...record.view, zoom: z }),
+      view: record.view,
+      setView,
+      zoom: view2d?.zoom ?? 1,
+      setZoom: (z) => {
+        if (!view2d) return;
+        updateTrialView(record.id, { ...view2d, zoom: z });
+      },
+      activeToolId: resolvedToolId,
     },
     emit: (event) => {
       snapshotIfNeeded(event);
       bus.emit(event);
     },
+    job: jobCap ? job : undefined,
   };
 
   const undoBindings: UndoBindings | undefined = undoCap
@@ -154,13 +195,13 @@ function TrialRuntime({ record, instrument, store, isLast }: TrialRuntimeProps)
 
   const layerDescriptors: LayerDescriptor[] = useMemo(() => {
     if (!instrument.layers) return [];
-    return instrument.layers.ids.map((lid) => ({ id: lid, label: lid }));
+    return instrument.layers.ids.map((l) => (typeof l === 'string' ? { id: l, label: l } : l));
   }, [instrument.layers]);
 
   const dragDropResult = useDragDrop({
     capability: instrument.dragDrop ?? { palette: [], onDrop: (_p, _i, s) => s },
     canvasContainerRef,
-    view: record.view,
+    view: view2d ?? DEFAULT_VIEW,
     state: record.state,
     config: record.config,
     setState: (next) => {
@@ -207,12 +248,14 @@ function TrialRuntime({ record, instrument, store, isLast }: TrialRuntimeProps)
   let body: ReactNode;
   if (instrument.canvas) {
     body = (
-      <div
-        ref={canvasContainerRef}
-        className="lk-trial__canvas-host"
-        style={{ width: '100%', height: '100%', position: 'relative' }}
-      >
-        <CanvasStack layers={layersWithFeedback} view={record.view} onViewChange={setView}>
+      <div ref={canvasContainerRef} className="lk-trial__canvas-host">
+        <CanvasStack
+          layers={layersWithFeedback}
+          view={view2d ?? DEFAULT_VIEW}
+          onViewChange={setView}
+          minZoom={instrument.canvas.minZoom}
+          maxZoom={instrument.canvas.maxZoom}
+        >
           {instrument.render(renderCtx)}
         </CanvasStack>
         <DragOverlay drag={dragDropResult.drag} />
@@ -222,40 +265,64 @@ function TrialRuntime({ record, instrument, store, isLast }: TrialRuntimeProps)
     body = instrument.render(renderCtx);
   }
 
-  const paletteNode =
-    paletteItems.length > 0 ? (
-      <Palette items={paletteItems} onDragStart={dragDropResult.startDrag} />
-    ) : null;
+  const startDrag = dragDropResult.startDrag;
+  const paletteNode = useMemo(
+    () =>
+      paletteItems.length > 0 ? <Palette items={paletteItems} onDragStart={startDrag} /> : null,
+    [paletteItems, startDrag],
+  );
+
+  const layerListNode = useMemo(
+    () =>
+      instrument.layers && layerDescriptors.length > 0 ? (
+        <LayerList
+          layers={layerDescriptors}
+          visibility={layerVisibility}
+          onReorder={(next) => {
+            setLayerOrder(next.map((l) => l.id));
+            bus.emit('layers.reorder');
+          }}
+          onToggle={(lid, visible) => {
+            setLayerVisibility((prev) => ({ ...prev, [lid]: visible }));
+            bus.emit('layers.toggle');
+          }}
+        />
+      ) : null,
+    [instrument.layers, layerDescriptors, layerVisibility, bus],
+  );
 
-  const layerListNode =
-    instrument.layers && layerDescriptors.length > 0 ? (
-      <LayerList
-        layers={layerDescriptors}
-        visibility={layerVisibility}
-        onReorder={(next) => {
-          setLayerOrder(next.map((l) => l.id));
-          bus.emit('layers.reorder');
-        }}
-        onToggle={(lid, visible) => {
-          setLayerVisibility((prev) => ({ ...prev, [lid]: visible }));
-          bus.emit('layers.toggle');
-        }}
-      />
-    ) : null;
+  const extraChrome = useMemo<TrialContribution[]>(() => {
+    const out: TrialContribution[] = [];
+    if (paletteNode) {
+      out.push({
+        id: 'dragdrop-palette',
+        region: 'sidebar',
+        item: { title: 'Parts', body: paletteNode },
+      });
+    }
+    if (layerListNode) {
+      out.push({
+        id: 'layer-list',
+        region: 'sidebar',
+        item: { title: 'Layers', body: layerListNode },
+      });
+    }
+    return out;
+  }, [paletteNode, layerListNode]);
 
   return (
     <TrialChrome
+      job={jobCap ? job : undefined}
       trialId={record.id}
       record={record}
       instrument={instrument}
       isLastTrial={isLast}
       undoBindings={undoBindings}
-      sidebarExtras={
-        <>
-          {paletteNode}
-          {layerListNode}
-        </>
-      }
+      trialChrome={extraChrome}
+      chrome={chrome}
+      suppress={suppress}
+      activeToolId={resolvedToolId}
+      setActiveTool={setActiveTool}
     >
       {body}
     </TrialChrome>

package/src/trial/TrialChrome.tsx

@@ -1,20 +1,23 @@
 import { type KeyboardEvent, type ReactNode, useContext, useMemo } from 'react';
 import { useStore } from 'zustand/react';
+import { builtinContributions } from '../chrome/builtins';
+import { mergeContributions, suppressContributions } from '../chrome/merge';
+import { PaletteRegion } from '../chrome/regions/PaletteRegion';
+import { SidebarRegion } from '../chrome/regions/SidebarRegion';
+import { StatusRegion } from '../chrome/regions/StatusRegion';
+import { TitleBarRegion } from '../chrome/regions/TitleBarRegion';
+import { ToolbarRegion } from '../chrome/regions/ToolbarRegion';
+import { ViewportRegion } from '../chrome/regions/ViewportRegion';
+import type { TrialChromeContext, TrialContribution, TrialRegion } from '../chrome/types';
+import { useConfigSchema } from '../config/useConfigSchema';
 import type { Instrument } from '../instrument/types';
+import type { JobHandle } from '../job/types';
 import { useLabContext } from '../lab/LabContext';
+import { JobProgress } from '../primitives/JobProgress';
 import { LabStoreContext } from '../state/context';
 import type { TrialRecord } from '../state/types';
-import { DefaultSidebar } from './DefaultSidebar';
-import { DefaultStatusBar } from './DefaultStatusBar';
-import { DefaultToolbar } from './DefaultToolbar';
-import type {
-  SidebarSlot,
-  StatusBarSlot,
-  ToolbarSlot,
-  TrialSidebarContext,
-  TrialStatusBarContext,
-  TrialToolbarContext,
-} from './slotTypes';
+import { as2DView } from '../state/view';
+import { TrialTitleBar } from './TrialTitleBar';
 
 export interface UndoBindings {
   canUndo: boolean;
@@ -29,27 +32,40 @@ export interface TrialChromeProps {
   record: TrialRecord;
   instrument: Instrument;
   isLastTrial: boolean;
-  toolbar?: ToolbarSlot;
-  sidebar?: SidebarSlot;
-  statusBar?: StatusBarSlot;
   undoBindings?: UndoBindings;
-  sidebarExtras?: ReactNode;
+  /** Supplied when the instrument declares a `job`. */
+  job?: JobHandle;
+  /** Contributions the trial runtime itself adds — the drag palette and the
+   *  layer list, which depend on runtime state the instrument cannot reach. */
+  trialChrome?: readonly TrialContribution[];
+  /** Contributions from the lab, merged last. */
+  chrome?: readonly TrialContribution[];
+  /** Built-in contribution ids to drop. Throws on an id that is not there. */
+  suppress?: readonly string[];
+  /** The trial's resolved tool slot, and the setter that writes whichever
+   *  slot it resolved to. `Trial` owns the resolution. */
+  activeToolId?: string | null;
+  setActiveTool?: (id: string) => void;
   children: ReactNode;
 }
 
-/** 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. */
+const NO_OP = (): void => {};
+
+/** The frame around a running instrument. Builds one chrome context, assembles
+ *  the contributions the instrument, the runtime and the lab declare, and hands
+ *  each region its slice. */
 export function TrialChrome({
   trialId,
   record,
   instrument,
   isLastTrial,
-  toolbar,
-  sidebar,
-  statusBar,
   undoBindings,
-  sidebarExtras,
+  job,
+  trialChrome,
+  chrome,
+  suppress,
+  activeToolId = null,
+  setActiveTool = NO_OP,
   children,
 }: TrialChromeProps) {
   const lab = useLabContext();
@@ -59,39 +75,29 @@ export function TrialChrome({
   const updateTrialConfig = useStore(storeCtx.store, (s) => s.updateTrialConfig);
   const updateTrialState = useStore(storeCtx.store, (s) => s.updateTrialState);
 
-  const toolbarCtx = useMemo<TrialToolbarContext>(() => {
+  // The trial view is opaque to labkit, so the zoom chrome asks for the 2D shape
+  // and goes inert when the trial holds something else — an orbit, say.
+  const view2d = as2DView(record.view);
+
+  const configSchema = useConfigSchema(instrument);
+
+  const ctx = useMemo<TrialChromeContext>(() => {
     const setZoom = (z: number): void => {
-      updateTrialView(trialId, { ...record.view, zoom: z });
+      if (!view2d) return;
+      updateTrialView(trialId, { ...view2d, zoom: z });
     };
     return {
       trialId,
       instrumentName: record.instrumentName,
-      hasUndo: instrument.undo != null,
+      isLastTrial,
+      zoom: view2d ? view2d.zoom : null,
+      setZoom,
       canUndo: undoBindings?.canUndo ?? false,
       canRedo: undoBindings?.canRedo ?? false,
-      undo: undoBindings?.undo ?? (() => {}),
-      redo: undoBindings?.redo ?? (() => {}),
-      zoom: record.view.zoom,
-      setZoom,
-      zoomIn: () => setZoom(record.view.zoom * 1.25),
-      zoomOut: () => setZoom(record.view.zoom * 0.8),
-      resetZoom: () => setZoom(1),
-      hasCanvas: instrument.canvas != null,
-      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,
-    };
-  }, [trialId, record, instrument, lab, isLastTrial, updateTrialView, undoBindings]);
-
-  const sidebarCtx = useMemo<TrialSidebarContext>(
-    () => ({
-      trialId,
-      instrumentName: record.instrumentName,
-      configFields: instrument.configSchema?.() ?? [],
+      undo: undoBindings?.undo ?? NO_OP,
+      redo: undoBindings?.redo ?? NO_OP,
+      configSchema,
+      configFields: instrument.config ? [] : (instrument.configSchema?.() ?? []),
       config: record.config,
       setConfig: (key, value) => {
         const prevConfig = record.config as Record<string, unknown>;
@@ -107,26 +113,58 @@ export function TrialChrome({
           updateTrialState(trialId, nextState as never);
         }
       },
-    }),
-    [trialId, record, instrument, updateTrialConfig, updateTrialState],
+      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),
+      activeToolId,
+      setActiveTool,
+    };
+  }, [
+    trialId,
+    record,
+    instrument,
+    lab,
+    isLastTrial,
+    updateTrialView,
+    updateTrialConfig,
+    updateTrialState,
+    undoBindings,
+    view2d,
+    activeToolId,
+    setActiveTool,
+    configSchema,
+  ]);
+
+  const contributions = useMemo(
+    () =>
+      suppressContributions(
+        mergeContributions(
+          builtinContributions(instrument, ctx, lab.controls),
+          [...(instrument.chrome ?? [])],
+          [...(trialChrome ?? [])],
+          [...(chrome ?? [])],
+        ),
+        suppress ?? [],
+      ),
+    [instrument, ctx, trialChrome, chrome, suppress, lab.controls],
   );
 
-  const statusCtx: TrialStatusBarContext = {
-    trialId,
-    instrumentName: record.instrumentName,
-    zoom: record.view.zoom,
-  };
+  const inRegion = (region: TrialRegion): TrialContribution[] =>
+    contributions.filter((c) => c.region === region);
 
-  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {
+  const handleKeyDown = (e: KeyboardEvent<HTMLElement>): void => {
     const mod = e.metaKey || e.ctrlKey;
     if (!mod) return;
     if (e.key === 'z' || e.key === 'Z') {
       e.preventDefault();
-      if (e.shiftKey) toolbarCtx.redo();
-      else toolbarCtx.undo();
+      if (e.shiftKey) ctx.redo();
+      else ctx.undo();
     } else if (e.key === 's' || e.key === 'S') {
       e.preventDefault();
-      toolbarCtx.saveSnapshot();
+      ctx.saveSnapshot();
     }
   };
 
@@ -134,20 +172,28 @@ export function TrialChrome({
     <section
       className="lk-trial"
       aria-label={`Trial ${record.instrumentName}`}
+      tabIndex={-1}
       onKeyDown={handleKeyDown}
     >
+      <TrialTitleBar title={record.instrumentName}>
+        <TitleBarRegion contributions={inRegion('titlebar')} ctx={ctx} />
+      </TrialTitleBar>
       <div className="lk-trial__toolbar">
-        {toolbar ? toolbar(toolbarCtx) : <DefaultToolbar ctx={toolbarCtx} />}
+        <ToolbarRegion contributions={inRegion('toolbar')} ctx={ctx} />
       </div>
       <div className="lk-trial__body">
+        <PaletteRegion contributions={inRegion('palette')} ctx={ctx} />
         <div className="lk-trial__sidebar">
-          {sidebar ? sidebar(sidebarCtx) : <DefaultSidebar ctx={sidebarCtx} />}
-          {sidebarExtras}
+          <SidebarRegion contributions={inRegion('sidebar')} ctx={ctx} />
+        </div>
+        <div className={`lk-trial__content${instrument.canvas ? ' lk-trial__content--flush' : ''}`}>
+          {children}
+          <ViewportRegion contributions={inRegion('viewport')} ctx={ctx} />
         </div>
-        <div className="lk-trial__content">{children}</div>
       </div>
       <div className="lk-trial__status">
-        {statusBar ? statusBar(statusCtx) : <DefaultStatusBar ctx={statusCtx} />}
+        {job ? <JobProgress job={job} /> : null}
+        <StatusRegion contributions={inRegion('status')} ctx={ctx} />
       </div>
     </section>
   );

package/src/trial/TrialDragContext.ts

@@ -0,0 +1,10 @@
+import { createContext, useContext } from 'react';
+import type { NodeId } from 'windease';
+
+/** Supplied by `<Workspace>` when trials are reorderable, so a trial's title
+ *  bar can be the drag surface. Null when reordering is off. */
+export const TrialDragContext = createContext<{ nodeId: NodeId } | null>(null);
+
+export function useTrialDrag(): { nodeId: NodeId } | null {
+  return useContext(TrialDragContext);
+}

package/src/trial/TrialTitleBar.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from 'react';
+import type { NodeId } from 'windease';
+import { useDragHandle } from 'windease/react';
+import { useTrialDrag } from './TrialDragContext';
+
+/** Props for `<TrialTitleBar>`. */
+export interface TrialTitleBarProps {
+  title: string;
+  children?: ReactNode;
+}
+
+// `useDragHandle` needs a node id and windease's DragProvider, so the draggable
+// form is a separate component rather than a conditional hook.
+function Draggable({ nodeId, title, children }: TrialTitleBarProps & { nodeId: NodeId }) {
+  const handlers = useDragHandle(nodeId);
+  return (
+    <div className="lk-trial__titlebar lk-trial__titlebar--draggable" {...handlers}>
+      <span className="lk-trial__title">{title}</span>
+      {children}
+    </div>
+  );
+}
+
+/** A trial's title bar. When the workspace allows reordering the whole bar is
+ *  the drag surface — there is no separate grip, because a window's title bar
+ *  is already the thing you expect to drag. */
+export function TrialTitleBar({ title, children }: TrialTitleBarProps) {
+  const drag = useTrialDrag();
+  if (drag)
+    return (
+      <Draggable nodeId={drag.nodeId} title={title}>
+        {children}
+      </Draggable>
+    );
+  return (
+    <div className="lk-trial__titlebar">
+      <span className="lk-trial__title">{title}</span>
+      {children}
+    </div>
+  );
+}

package/src/trial/index.ts

@@ -1,20 +1,6 @@
-export type { DefaultSidebarProps } from './DefaultSidebar';
-export { DefaultSidebar } from './DefaultSidebar';
-export type { DefaultStatusBarProps } from './DefaultStatusBar';
-export { DefaultStatusBar } from './DefaultStatusBar';
-export type { DefaultToolbarProps } from './DefaultToolbar';
-export { DefaultToolbar } from './DefaultToolbar';
-export type {
-  SidebarSlot,
-  StatusBarSlot,
-  ToolbarSlot,
-  TrialSidebarContext,
-  TrialStatusBarContext,
-  TrialToolbarContext,
-} from './slotTypes';
 export type { TrialProps } from './Trial';
 export { Trial } from './Trial';
-export type { TrialChromeProps } from './TrialChrome';
+export type { TrialChromeProps, UndoBindings } from './TrialChrome';
 export { TrialChrome } from './TrialChrome';
 export {
   addTrial,

package/src/trial/trialChrome.borders.test.ts

@@ -0,0 +1,38 @@
+import { readFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { describe, expect, it } from 'vitest';
+
+const less = readFileSync(join(dirname(fileURLToPath(import.meta.url)), 'Trial.less'), 'utf8');
+
+/** The body of one rule, by selector. Resolves Less's `&__suffix` nesting and
+ *  matches braces, so a nested block cannot end the slice early. */
+function rule(selector: string): string {
+  const nested = selector.replace(/^\.[a-z-]+?(__|--)/, '&$1');
+  const start = [selector, nested].map((s) => less.indexOf(`${s} {`)).find((i) => i !== -1);
+  if (start === undefined) throw new Error(`no rule for ${selector}`);
+  const open = less.indexOf('{', start);
+  let depth = 0;
+  for (let i = open; i < less.length; i += 1) {
+    if (less[i] === '{') depth += 1;
+    else if (less[i] === '}') {
+      depth -= 1;
+      if (depth === 0) return less.slice(open + 1, i);
+    }
+  }
+  throw new Error(`unterminated rule for ${selector}`);
+}
+
+describe('trial chrome seams', () => {
+  // A `not.toMatch` passes on an empty string, so pin that `rule()` found the
+  // rule it was asked for.
+  it('isolates the rule it is asked for', () => {
+    expect(rule('.lk-trial__toolbar')).toMatch(/flex-shrink/);
+    expect(rule('.lk-trial__status')).toMatch(/flex-shrink/);
+  });
+
+  it('lets the component draw its own border, not the wrapper', () => {
+    expect(rule('.lk-trial__toolbar')).not.toMatch(/border-bottom:\s*[^;]*solid/);
+    expect(rule('.lk-trial__status')).not.toMatch(/border-top:\s*[^;]*solid/);
+  });
+});