@weasel-js/labkit 1.4.4 → 1.5.1

package/src/primitives/FloatingPanel.test.tsx

@@ -1,5 +1,8 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createMemoryAdapter } from '../state/adapters';
+import { labPrefix } from '../state/labRecords';
+import { Persistence } from '../state/Persistence';
 import { FloatingPanel } from './FloatingPanel';
 
 // The shared stub reports one size for every element, which makes the panel and
@@ -219,34 +222,62 @@ describe('FloatingPanel dragging', () => {
 });
 
 describe('FloatingPanel persistence', () => {
-  it('writes its placement under the given key once dragged', () => {
-    const { panel } = renderPanel(<FloatingPanel storageKey="k">x</FloatingPanel>);
+  const PLACE = `${labPrefix('fp')}value:lab:legend`;
+
+  function persisted(backing: Map<string, unknown>, ui: React.ReactElement) {
+    return render(
+      <Persistence storageKey="fp" storage={createMemoryAdapter(backing)}>
+        <div>{ui}</div>
+      </Persistence>,
+    );
+  }
+
+  it('writes its placement under its persist name once dragged', async () => {
+    const backing = new Map<string, unknown>();
+    const { container } = persisted(backing, <FloatingPanel persist="legend">x</FloatingPanel>);
+    await waitFor(() => expect(container.querySelector('.lk-floating-panel')).not.toBeNull());
+    const panel = container.querySelector('.lk-floating-panel') as HTMLElement;
     fireEvent.pointerDown(panel, { clientX: 100, clientY: 100 });
     fireEvent.pointerMove(panel, { clientX: 140, clientY: 160 });
     fireEvent.pointerUp(panel);
-    const stored = JSON.parse(localStorage.getItem('k') ?? 'null');
-    expect(stored).toMatchObject({ x: expect.any(Number), y: expect.any(Number) });
-    expect(stored).toHaveProperty('anchor');
+    await waitFor(() =>
+      expect(backing.get(PLACE)).toMatchObject({ x: expect.any(Number), y: expect.any(Number) }),
+    );
+    expect(backing.get(PLACE)).toHaveProperty('anchor');
   });
 
-  it('restores what it stored on a later mount', () => {
-    localStorage.setItem('k', JSON.stringify({ x: 140, y: 90, anchor: null }));
-    const { panel } = renderPanel(<FloatingPanel storageKey="k">x</FloatingPanel>);
-    expect(panel.style.left).toBe('140px');
+  it('restores what it stored on a later mount', async () => {
+    const backing = new Map<string, unknown>([[PLACE, { x: 140, y: 90, anchor: null }]]);
+    const { container } = persisted(backing, <FloatingPanel persist="legend">x</FloatingPanel>);
+    // Placed only once both boxes are measured, which can land a render later.
+    await waitFor(() =>
+      expect(
+        (container.querySelector('.lk-floating-panel') as HTMLElement | null)?.style.left,
+      ).toBe('140px'),
+    );
+    const panel = container.querySelector('.lk-floating-panel') as HTMLElement;
     expect(panel.style.top).toBe('90px');
   });
 
-  it('writes nothing when no key is given', () => {
-    const { panel } = renderPanel(<FloatingPanel>x</FloatingPanel>);
+  it('writes nothing without a persist name', async () => {
+    const backing = new Map<string, unknown>();
+    const { container, unmount } = persisted(backing, <FloatingPanel>x</FloatingPanel>);
+    await waitFor(() => expect(container.querySelector('.lk-floating-panel')).not.toBeNull());
+    const panel = container.querySelector('.lk-floating-panel') as HTMLElement;
     fireEvent.pointerDown(panel, { clientX: 100, clientY: 100 });
     fireEvent.pointerMove(panel, { clientX: 140, clientY: 160 });
     fireEvent.pointerUp(panel);
-    expect(localStorage.length).toBe(0);
+    unmount();
+    await new Promise((r) => setTimeout(r, 20));
+    expect(backing.size).toBe(0);
   });
 
-  it('survives a corrupt stored value rather than throwing', () => {
-    localStorage.setItem('k', '{{{');
-    expect(() => renderPanel(<FloatingPanel storageKey="k">x</FloatingPanel>)).not.toThrow();
+  it('forgets its placement with no provider above it', () => {
+    const { panel } = renderPanel(<FloatingPanel persist="legend">x</FloatingPanel>);
+    fireEvent.pointerDown(panel, { clientX: 100, clientY: 100 });
+    fireEvent.pointerMove(panel, { clientX: 140, clientY: 160 });
+    fireEvent.pointerUp(panel);
+    expect(localStorage.length).toBe(0);
   });
 });
 

package/src/primitives/FloatingPanel.tsx

@@ -9,6 +9,7 @@ import {
   type FloatingPlacement,
   floatingStrategy,
 } from 'windease';
+import { usePersistedState } from '../state/usePersistedState';
 
 /** The strategy holds a map keyed by item id; a panel is always a lone item. */
 const ITEM_ID = 'panel';
@@ -22,8 +23,10 @@ export interface FloatingPanelProps {
   snapCorners?: readonly Corner[];
   /** Pixels in from a corner when snapped. Default 12. */
   inset?: number;
-  /** localStorage key to remember its position under. Omit to forget on reload. */
-  storageKey?: string;
+  /** Name to remember its position under, through `usePersistedState` — so it
+   *  is remembered only inside a lab or a `<Persistence>`. Omit to forget on
+   *  reload. */
+  persist?: string;
   className?: string;
 }
 
@@ -47,16 +50,6 @@ function isInteractive(target: EventTarget | null): boolean {
   return target.closest('input, button, a, select, textarea, [data-no-drag]') !== null;
 }
 
-function readStored(key: string | undefined): FloatingPlacement | null {
-  if (!key) return null;
-  try {
-    const raw = localStorage.getItem(key);
-    return raw ? (JSON.parse(raw) as FloatingPlacement) : null;
-  } catch {
-    return null;
-  }
-}
-
 /**
  * A draggable box that floats over its offset parent and snaps to its corners.
  *
@@ -70,7 +63,7 @@ export function FloatingPanel({
   anchor = DEFAULT_ANCHOR,
   snapCorners,
   inset = DEFAULT_INSET,
-  storageKey,
+  persist,
   className,
 }: FloatingPanelProps) {
   const ref = useRef<HTMLDivElement>(null);
@@ -79,18 +72,11 @@ export function FloatingPanel({
 
   const [container, setContainer] = useState({ w: 0, h: 0 });
   const [size, setSize] = useState({ w: 0, h: 0 });
-  const [place, setPlace] = useState<FloatingPlacement>(
-    () => readStored(storageKey) ?? { x: 0, y: 0, anchor },
-  );
-
-  useEffect(() => {
-    if (!storageKey) return;
-    try {
-      localStorage.setItem(storageKey, JSON.stringify(place));
-    } catch {
-      // A full or disabled store is not worth failing a lab over.
-    }
-  }, [place, storageKey]);
+  const [place, setPlace] = usePersistedState<FloatingPlacement>(persist, () => ({
+    x: 0,
+    y: 0,
+    anchor,
+  }));
 
   const item = useMemo(
     () => ({

package/src/primitives/FpsMeter.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@weasel-js/forge';
 import { FpsMeter } from './FpsMeter';
 
 const meta: Meta<typeof FpsMeter> = {

package/src/primitives/JobProgress.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@weasel-js/forge';
 import type { JobHandle } from '../job/types';
 import { JobProgress } from './JobProgress';
 

package/src/primitives/Legend.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@weasel-js/forge';
 import { Legend } from './Legend';
 
 const meta: Meta<typeof Legend> = {

package/src/primitives/ScaleIndicator.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@weasel-js/forge';
 import { ScaleIndicator } from './ScaleIndicator';
 
 const meta: Meta<typeof ScaleIndicator> = {

package/src/primitives/Sidebar.less

@@ -60,6 +60,13 @@
 
 .lk-sidebar-section {
   border-bottom: var(--wzl-border-w) solid var(--wzl-line-subtle);
+
+  // The last section runs to the bottom of its pane. Stopped at its content,
+  // its rule and the bare pane under it read as a second, empty zone.
+  &:last-child {
+    flex-grow: 1;
+    border-bottom: 0;
+  }
 }
 
 .lk-sidebar-section__bar {

package/src/primitives/Sidebar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@weasel-js/forge';
 import { useState } from 'react';
 import { Sidebar } from './Sidebar';
 

package/src/primitives/Split.less

@@ -0,0 +1,14 @@
+// The strip's own seam. windease positions and sizes it; this is only what it
+// looks like.
+.lk-split [data-affordance-kind='resize-x'] {
+  background: var(--wzl-border);
+}
+
+.lk-split .windease-affordance-hit:hover [data-affordance-kind='resize-x'],
+.lk-split .windease-affordance-hit:focus-visible [data-affordance-kind='resize-x'] {
+  background: var(--wzl-accent);
+}
+
+.lk-split .windease-affordance-hit:focus-visible {
+  outline: none;
+}

package/src/primitives/Split.test.tsx

@@ -0,0 +1,133 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import { Split } from './Split';
+
+const VIEWPORT = { w: 800, h: 600 };
+
+function renderBody(props: Partial<Parameters<typeof Split>[0]> = {}) {
+  return render(
+    <Split viewport={VIEWPORT} sidebar={<p>sidebar body</p>} {...props}>
+      <p>instrument output</p>
+    </Split>,
+  );
+}
+
+describe('Split', () => {
+  it('renders both panes', () => {
+    renderBody();
+    expect(screen.getByText('sidebar body')).toBeInTheDocument();
+    expect(screen.getByText('instrument output')).toBeInTheDocument();
+  });
+
+  it('puts a labeled separator between the sidebar and the content', () => {
+    renderBody({ width: 320 });
+    const seam = screen.getByRole('separator');
+    expect(seam).toHaveAttribute('aria-orientation', 'horizontal');
+    expect(seam).toHaveAttribute('aria-valuenow', '320');
+    expect(seam).toHaveAccessibleName(/sidebar/i);
+  });
+
+  it('reports the width a drag lands on', () => {
+    const onWidthChange = vi.fn();
+    renderBody({ width: 320, onWidthChange });
+    const seam = screen.getByRole('separator');
+    fireEvent.pointerDown(seam, { clientX: 320, clientY: 100 });
+    fireEvent.pointerMove(seam, { clientX: 380, clientY: 100 });
+    fireEvent.pointerUp(seam, { clientX: 380, clientY: 100 });
+    expect(onWidthChange).toHaveBeenLastCalledWith(380);
+  });
+
+  it('resizes from the keyboard', () => {
+    const onWidthChange = vi.fn();
+    renderBody({ width: 320, onWidthChange });
+    const seam = screen.getByRole('separator');
+    fireEvent.keyDown(seam, { key: 'ArrowRight' });
+    expect(onWidthChange).toHaveBeenLastCalledWith(328);
+  });
+
+  it('refuses to drag the sidebar past its stated bounds', () => {
+    const onWidthChange = vi.fn();
+    renderBody({ width: 320, minWidth: 200, maxWidth: 400, onWidthChange });
+    const seam = screen.getByRole('separator');
+    expect(seam).toHaveAttribute('aria-valuemin', '200');
+    expect(seam).toHaveAttribute('aria-valuemax', '400');
+    fireEvent.pointerDown(seam, { clientX: 320, clientY: 100 });
+    fireEvent.pointerMove(seam, { clientX: 900, clientY: 100 });
+    expect(onWidthChange).toHaveBeenLastCalledWith(400);
+  });
+
+  it('leaves the content pane a floor the seam cannot cross', () => {
+    const onWidthChange = vi.fn();
+    renderBody({ width: 320, maxWidth: 10_000, contentMinWidth: 300, onWidthChange });
+    const seam = screen.getByRole('separator');
+    fireEvent.pointerDown(seam, { clientX: 320, clientY: 100 });
+    fireEvent.pointerMove(seam, { clientX: 5_000, clientY: 100 });
+    expect(onWidthChange).toHaveBeenLastCalledWith(VIEWPORT.w - 300);
+  });
+
+  it('puts the caller’s class names on its boxes', () => {
+    const { container } = render(
+      <Split
+        viewport={VIEWPORT}
+        className="lk-x__panes"
+        sidebarClassName="lk-x__side"
+        contentClassName="lk-x__main"
+        label="Stories"
+        sidebar={<p>side</p>}
+      >
+        <p>main</p>
+      </Split>,
+    );
+    expect(container.querySelector('.lk-x__panes.lk-split')).not.toBeNull();
+    expect(container.querySelector('.lk-x__side')?.textContent).toBe('side');
+    expect(container.querySelector('.lk-x__main')?.textContent).toBe('main');
+  });
+
+  it('puts the sidebar after the content on the end side, where dragging the seam left widens it', () => {
+    const onWidthChange = vi.fn();
+    const { container } = render(
+      <Split
+        viewport={VIEWPORT}
+        side="end"
+        width={320}
+        sidebarClassName="lk-x__side"
+        contentClassName="lk-x__main"
+        sidebar={<p>side</p>}
+        onWidthChange={onWidthChange}
+      >
+        <p>main</p>
+      </Split>,
+    );
+    const side = container.querySelector('.lk-x__side') as HTMLElement;
+    const main = container.querySelector('.lk-x__main') as HTMLElement;
+    expect(main.compareDocumentPosition(side) & Node.DOCUMENT_POSITION_FOLLOWING).toBeTruthy();
+    const seam = screen.getByRole('separator');
+    fireEvent.pointerDown(seam, { clientX: 480, clientY: 100 });
+    fireEvent.pointerMove(seam, { clientX: 420, clientY: 100 });
+    fireEvent.pointerUp(seam, { clientX: 420, clientY: 100 });
+    expect(onWidthChange).toHaveBeenLastCalledWith(380);
+  });
+
+  it('names its seam after the sidebar label', () => {
+    render(
+      <Split viewport={VIEWPORT} label="Stories" sidebar={<p>side</p>}>
+        <p>main</p>
+      </Split>,
+    );
+    expect(screen.getByRole('separator')).toHaveAccessibleName(/stories/i);
+  });
+
+  it('renames its seam when the label changes', () => {
+    const { rerender } = render(
+      <Split viewport={VIEWPORT} label="Stories" sidebar={<p>side</p>}>
+        <p>main</p>
+      </Split>,
+    );
+    rerender(
+      <Split viewport={VIEWPORT} label="Outline" sidebar={<p>side</p>}>
+        <p>main</p>
+      </Split>,
+    );
+    expect(screen.getByRole('separator')).toHaveAccessibleName(/outline/i);
+  });
+});

package/src/primitives/Split.tsx

@@ -0,0 +1,175 @@
+import { type ReactNode, useEffect, useMemo, useRef } from 'react';
+import { asNodeId, createNode, Store, stripStrategy } from 'windease';
+import { type ChromeMap, Container, Provider, StrategyRegistryProvider } from 'windease/react';
+
+const ZONE_ID = asNodeId('lk-split');
+const SIDEBAR_ID = asNodeId('lk-split-sidebar');
+const CONTENT_ID = asNodeId('lk-split-content');
+const STRATEGIES = { strip: stripStrategy as never };
+
+/** Props for `<Split>`. */
+export interface SplitProps {
+  /** The sidebar pane's contents. */
+  sidebar: ReactNode;
+  /** The edge the sidebar sits on. Read once, when the strip mounts. Default `'start'`. */
+  side?: 'start' | 'end';
+  /** The content pane's contents. */
+  children: ReactNode;
+  /** Names the sidebar pane, and through it the seam. Default `'Sidebar'`. */
+  label?: string;
+  /** Extra classes on the strip, which always has `lk-split`. */
+  className?: string;
+  /** The class on the sidebar pane. */
+  sidebarClassName?: string;
+  /** The class on the content pane. */
+  contentClassName?: string;
+  /** The sidebar's current extent in pixels. Omit to leave it unpersisted: the
+   *  seam still works, its result just does not outlive the mount. */
+  width?: number;
+  /** Where the sidebar starts before anyone drags it. */
+  defaultWidth?: number;
+  minWidth?: number;
+  maxWidth?: number;
+  /** How little the content pane may be squeezed to. Reported as the seam's
+   *  reachable maximum, so the drag stops there rather than clamping silently. */
+  contentMinWidth?: number;
+  /** Fires through the drag, not on release: the pane is already there. */
+  onWidthChange?: (width: number) => void;
+  /**
+   * Fixed extent. Omit in an app — the strip measures its own box. Supply it
+   * where nothing measures, notably jsdom, or both panes lay out at zero.
+   */
+  viewport?: { w: number; h: number };
+}
+
+/**
+ * A sidebar and a content pane as a two-pane strip with a draggable seam.
+ *
+ * The seam is `stripStrategy`'s own resize affordance, so it arrives as a
+ * `role="separator"` carrying the reachable range, operable by pointer and by
+ * arrows / Home / End, and clamped against the content pane's floor rather
+ * than against the sidebar's alone.
+ */
+export function Split({
+  sidebar,
+  children,
+  side = 'start',
+  label = 'Sidebar',
+  className,
+  sidebarClassName,
+  contentClassName,
+  width,
+  defaultWidth = 320,
+  minWidth = 140,
+  maxWidth = 720,
+  contentMinWidth = 160,
+  onWidthChange,
+  viewport,
+}: SplitProps) {
+  // The cross-axis half of every size hint below is inert: a horizontal strip
+  // stretches its panes to the container's height and never reads `h`.
+  const storeRef = useRef<Store | null>(null);
+  if (storeRef.current === null) {
+    const store = new Store();
+    store.registerNode(
+      createNode({
+        kind: 'zone',
+        id: ZONE_ID,
+        // A strip's seam resizes the pane before it, which on the end side is the
+        // content; 'neighbor' has the seam size the sidebar after it too.
+        container: {
+          strategyId: 'strip',
+          config: {
+            axis: 'x',
+            resizable: true,
+            ...(side === 'end' ? { resizeMode: 'neighbor' } : {}),
+          },
+        },
+      }),
+    );
+    const sidebarNode = createNode({
+      kind: 'sidebar',
+      id: SIDEBAR_ID,
+      parentId: ZONE_ID,
+      meta: { title: label },
+      placement: { size: { w: width ?? defaultWidth } },
+      hints: { minSize: { w: minWidth, h: 0 }, maxSize: { w: maxWidth, h: 0 } },
+    });
+    const contentNode = createNode({
+      kind: 'content',
+      id: CONTENT_ID,
+      parentId: ZONE_ID,
+      meta: { title: 'Content' },
+      hints: { minSize: { w: contentMinWidth, h: 0 } },
+    });
+    // A strip lays its children out in registration order.
+    for (const node of side === 'end' ? [contentNode, sidebarNode] : [sidebarNode, contentNode]) {
+      store.registerNode(node);
+    }
+    store.showNode(SIDEBAR_ID);
+    store.showNode(CONTENT_ID);
+    storeRef.current = store;
+  }
+  const store = storeRef.current;
+
+  // What the store last held, so the placement event can tell a drag from the
+  // echo of our own write and a controlled `width` does not fight the seam.
+  const widthRef = useRef(width ?? defaultWidth);
+
+  useEffect(() => {
+    store.setHints(SIDEBAR_ID, {
+      minSize: { w: minWidth, h: 0 },
+      maxSize: { w: maxWidth, h: 0 },
+    });
+    store.setHints(CONTENT_ID, { minSize: { w: contentMinWidth, h: 0 } });
+  }, [store, minWidth, maxWidth, contentMinWidth]);
+
+  useEffect(() => {
+    store.setMeta(SIDEBAR_ID, { title: label });
+  }, [store, label]);
+
+  useEffect(() => {
+    if (width === undefined || width === widthRef.current) return;
+    widthRef.current = width;
+    store.patchPlacement(SIDEBAR_ID, { size: { w: width } });
+  }, [store, width]);
+
+  const onWidthChangeRef = useRef(onWidthChange);
+  onWidthChangeRef.current = onWidthChange;
+  useEffect(
+    () =>
+      store.events.on('node.placementChanged', () => {
+        // A neighbor drag pins the content's width too; unpinned, it goes on filling the strip.
+        if ((store.getPlacement(CONTENT_ID)?.size as { w?: number } | undefined)?.w !== undefined) {
+          store.patchPlacement(CONTENT_ID, { size: {} });
+        }
+        const next = (store.getPlacement(SIDEBAR_ID)?.size as { w?: number } | undefined)?.w;
+        if (typeof next !== 'number' || next === widthRef.current) return;
+        widthRef.current = next;
+        onWidthChangeRef.current?.(next);
+      }),
+    [store],
+  );
+
+  const chrome = useMemo<ChromeMap>(
+    () => ({
+      sidebar: () => <div className={sidebarClassName}>{sidebar}</div>,
+      content: () => <div className={contentClassName}>{children}</div>,
+    }),
+    [sidebar, children, sidebarClassName, contentClassName],
+  );
+
+  return (
+    <Provider store={store}>
+      <StrategyRegistryProvider strategies={STRATEGIES}>
+        <Container
+          parentId={ZONE_ID}
+          chrome={chrome}
+          className={className ? `lk-split windease-zone ${className}` : 'lk-split windease-zone'}
+          affordances
+          viewport={viewport}
+        />
+      </StrategyRegistryProvider>
+    </Provider>
+  );
+}

package/src/primitives/StatusBar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@weasel-js/forge';
 import { StatusBar } from './StatusBar';
 
 const meta: Meta<typeof StatusBar> = {

package/src/primitives/Toolbar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@weasel-js/forge';
 import { Toolbar } from './Toolbar';
 
 const meta: Meta<typeof Toolbar> = {

package/src/primitives/ZoomControl.tsx

@@ -1,3 +1,4 @@
+import { normalizeZoom } from '@weasel-js/core';
 import { NumberField, Slider } from '../passthrough/weasel-ui';
 
 /** Props for `<ZoomControl>`. */
@@ -30,10 +31,12 @@ export function ZoomControl({
   zoom,
   onZoomChange,
   onZoomCommit,
-  min = 0.1,
-  max = 8,
+  min: minProp = 0.1,
+  max: maxProp = 8,
   className,
 }: ZoomControlProps) {
+  const min = normalizeZoom(minProp);
+  const max = normalizeZoom(maxProp);
   const commit = onZoomCommit ?? onZoomChange;
   const emit = (track: number, done: boolean): void => {
     const next = clamp(fromTrack(track), min, max);

package/src/primitives/index.ts

@@ -9,6 +9,8 @@ export type { ScaleIndicatorProps } from './ScaleIndicator';
 export { ScaleIndicator } from './ScaleIndicator';
 export type { SidebarProps } from './Sidebar';
 export { Sidebar } from './Sidebar';
+export type { SplitProps } from './Split';
+export { Split } from './Split';
 export type { StatusBarProps, StatusBarSectionProps } from './StatusBar';
 export { StatusBar } from './StatusBar';
 export type { ToolbarButtonProps, ToolbarGroupProps, ToolbarProps } from './Toolbar';

package/src/specimen/Specimen.less

@@ -0,0 +1,95 @@
+.lk-specimen {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wzl-space-lg);
+  padding: var(--wzl-space-lg);
+  background: var(--wzl-surface);
+  color: var(--wzl-fg);
+  font-family: var(--wzl-font-ui);
+  font-size: var(--wzl-font-size);
+}
+
+.lk-specimen__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wzl-space-sm);
+}
+
+.lk-specimen__heading {
+  margin: 0;
+  padding-block-end: var(--wzl-space-xs);
+  border-bottom: var(--wzl-border-w) solid var(--wzl-line-subtle);
+  color: var(--wzl-fg-muted);
+  font-family: var(--wzl-font-display);
+  font-size: var(--wzl-font-size-sm);
+  font-weight: var(--wzl-font-weight-normal);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.lk-specimen__grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: var(--wzl-space-md);
+  align-items: start;
+}
+
+.lk-specimen__cell {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wzl-space-xs);
+  min-width: 0;
+}
+
+.lk-specimen__label {
+  color: var(--wzl-fg-subtle);
+  font-family: var(--wzl-font-mono);
+  font-size: var(--wzl-font-size-xs);
+}
+
+.lk-specimen__row {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--wzl-space-sm);
+}
+
+.lk-specimen__cell--wide {
+  grid-column: 1 / -1;
+}
+
+.lk-specimen__box {
+  position: relative;
+  display: flex;
+  height: 160px;
+  overflow: hidden;
+  border: var(--wzl-border-w) solid var(--wzl-line-subtle);
+  border-radius: var(--wzl-radius-sm);
+}
+
+.lk-specimen__box-main {
+  flex: 1;
+  min-width: 0;
+  padding: var(--wzl-space-sm);
+}
+
+.lk-specimen__pad {
+  padding: var(--wzl-space-xs) var(--wzl-space-sm);
+}
+
+.lk-specimen__pane {
+  flex: none;
+  width: var(--lk-specimen-pane-w);
+  padding: var(--wzl-space-sm);
+}
+
+.lk-specimen__timeline {
+  height: 180px;
+}
+
+.lk-specimen__floating-host {
+  position: relative;
+  height: 160px;
+  border: var(--wzl-border-w) solid var(--wzl-line-subtle);
+  border-radius: var(--wzl-radius-sm);
+}