@weasel-js/labkit 1.7.1 → 1.7.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasel-js/labkit",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "description": "React widgets for building self-contained interactive lab pages",
   "license": "MIT",
   "author": "orochi235",
@@ -115,18 +115,18 @@
     "dev:3d": "LABKIT_EXAMPLE=3d-lab vite"
   },
   "peerDependencies": {
-    "@weasel-js/core": "1.7.1",
-    "@weasel-js/theme": "1.7.1",
+    "@weasel-js/core": "1.7.2",
+    "@weasel-js/theme": "1.7.2",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@weasel-js/geom": "1.7.1",
-    "@weasel-js/kernel3d": "1.7.1",
-    "@weasel-js/loupe": "1.7.1",
-    "@weasel-js/quantity": "1.7.1",
-    "@weasel-js/svg": "1.7.1",
-    "@weasel-js/ui": "1.7.1",
+    "@weasel-js/geom": "1.7.2",
+    "@weasel-js/kernel3d": "1.7.2",
+    "@weasel-js/loupe": "1.7.2",
+    "@weasel-js/quantity": "1.7.2",
+    "@weasel-js/svg": "1.7.2",
+    "@weasel-js/ui": "1.7.2",
     "earcut": "3.2.3",
     "polygon-clipping": "^0.15.7",
     "react-aria-components": "^1.5.0",
@@ -136,8 +136,8 @@
   "devDependencies": {
     "@biomejs/biome": "^2.4.12",
     "@testing-library/jest-dom": "^7.0.1",
-    "@weasel-js/guides": "1.7.1",
-    "@weasel-js/modes": "1.7.1",
+    "@weasel-js/guides": "1.7.2",
+    "@weasel-js/modes": "1.7.2",
     "less": "^4.2.0",
     "rollup-plugin-dts": "^6.4.1",
     "tsx": "^4.19.0",

package/src/annotations/capture.browser.test.ts

@@ -3,12 +3,13 @@
  * default family registered lazily the way an app registers it: a text mark
  * captured before anything has drawn text still carries its glyphs.
  */
-import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+
 import { registerFont } from '@weasel-js/font';
 import { _resetFontRegistryForTests } from '@weasel-js/font/test-seams';
-import { createAnnotationStore } from './store';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import metricsUrl from '../../../../assets/fonts/inter/inter.json?url';
 import atlasUrl from '../../../../assets/fonts/inter/inter.png?url';
+import { createAnnotationStore } from './store';
 
 /** Pixels where the mark's red ink landed on the transparent export. */
 async function inkPixels(blob: Blob): Promise<number> {
@@ -32,7 +33,12 @@ describe('a raster capture of a text mark', () => {
     const store = createAnnotationStore({
       targets: () => [{ id: 'bare', content: { w: 120, h: 40 } }],
     });
-    store.add({ target: 'bare', kind: 'text', title: 'Hello', frac: { x: 0.1, y: 0.2, w: 0.5, h: 0.5 } });
+    store.add({
+      target: 'bare',
+      kind: 'text',
+      title: 'Hello',
+      frac: { x: 0.1, y: 0.2, w: 0.5, h: 0.5 },
+    });
 
     const result = await store.capture('bare', { format: 'png', scale: 2 });
 

package/src/canvas/Stage.test.tsx

@@ -1,4 +1,5 @@
-import { act, fireEvent, render, screen, within } from '@testing-library/react';
+import { act, fireEvent, screen, within } from '@testing-library/react';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { useState } from 'react';
 import { beforeAll, describe, expect, it, vi } from 'vitest';
 import { defineInstrument } from '../instrument/defineInstrument';
@@ -47,8 +48,8 @@ describe('fitStage', () => {
 });
 
 describe('<Stage>', () => {
-  it('draws its content through the camera', () => {
-    const { container } = render(
+  it('draws its content through the camera', async () => {
+    const { container } = await renderSettled(
       <Stage
         size={{ width: 300, height: 100 }}
         view={{ zoom: 2, pan: { x: 10, y: 20 } }}
@@ -66,7 +67,7 @@ describe('<Stage>', () => {
     expect(el.style.getPropertyValue('--lk-stage-h')).toBe('100px');
   });
 
-  it('zooms on the wheel', () => {
+  it('zooms on the wheel', async () => {
     function Host() {
       const [view, setView] = useState<ViewTransform>({ zoom: 1, pan: { x: 0, y: 0 } });
       return (
@@ -75,14 +76,14 @@ describe('<Stage>', () => {
         </Stage>
       );
     }
-    const { container } = render(<Host />);
+    const { container } = await renderSettled(<Host />);
     const host = container.querySelector('.lk-stage');
     if (!host) throw new Error('no stage');
     fireEvent.wheel(host, { deltaY: -200, clientX: 0, clientY: 0 });
     expect(zoomOf(content(container))).toBeGreaterThan(1);
   });
 
-  it('zooms on a wheel handed to its camera from outside the stage', () => {
+  it('zooms on a wheel handed to its camera from outside the stage', async () => {
     // What an annotation target's input box does: it is portalled out of the
     // stage, so its wheel never bubbles here.
     const slot: CameraWheelSlot = { current: null };
@@ -96,19 +97,19 @@ describe('<Stage>', () => {
         </CameraWheelContext.Provider>
       );
     }
-    const { container } = render(<Host />);
-    act(() => {
+    const { container } = await renderSettled(<Host />);
+    await act(async () => {
       slot.current?.(new WheelEvent('wheel', { deltaY: -200, cancelable: true }));
     });
     expect(zoomOf(content(container))).toBeGreaterThan(1);
   });
 
-  it('listens for the wheel actively, so it can keep the page from scrolling', () => {
+  it('listens for the wheel actively, so it can keep the page from scrolling', async () => {
     // A proxy: jsdom does not enforce passive listeners, so a preventDefault in
     // a passive one succeeds here and fails in a browser. React registers its
     // wheel listeners passive; asserting the registration is what can fail.
     const add = vi.spyOn(HTMLElement.prototype, 'addEventListener');
-    const { container } = render(
+    const { container } = await renderSettled(
       <Stage
         size={{ width: 100, height: 100 }}
         view={{ zoom: 1, pan: { x: 0, y: 0 } }}
@@ -127,7 +128,7 @@ describe('<Stage>', () => {
     add.mockRestore();
   });
 
-  it('tells the surface its tiles moved when the camera does', () => {
+  it('tells the surface its tiles moved when the camera does', async () => {
     // A transform moves a tile without resizing anything, which is the one
     // kind of move a ResizeObserver never reports.
     const invalidateRects = vi.fn();
@@ -139,7 +140,7 @@ describe('<Stage>', () => {
         </Stage>
       </SurfaceContext.Provider>
     );
-    const { rerender } = render(at({ zoom: 1, pan: { x: 0, y: 0 } }));
+    const { rerender } = await renderSettled(at({ zoom: 1, pan: { x: 0, y: 0 } }));
     invalidateRects.mockClear();
     rerender(at({ zoom: 1.5, pan: { x: 0, y: 0 } }));
     expect(invalidateRects).toHaveBeenCalled();
@@ -162,25 +163,29 @@ const plain = defineInstrument<Record<string, never>, Record<string, never>>({
 });
 
 describe('an instrument that declares a stage', () => {
-  it('renders its DOM on the stage', () => {
-    const { container } = render(<Lab instruments={[staged]} defaultInstrument="Staged" />);
+  it('renders its DOM on the stage', async () => {
+    const { container } = await renderSettled(
+      <Lab instruments={[staged]} defaultInstrument="Staged" />,
+    );
     expect(content(container)).toContainElement(screen.getByTestId('art'));
   });
 
-  it('gets the zoom controls, and they move the stage', () => {
-    const { container } = render(<Lab instruments={[staged]} defaultInstrument="Staged" />);
+  it('gets the zoom controls, and they move the stage', async () => {
+    const { container } = await renderSettled(
+      <Lab instruments={[staged]} defaultInstrument="Staged" />,
+    );
     const trialView = within(screen.getByRole('toolbar', { name: 'View' }));
-    act(() => {
+    await act(async () => {
       fireEvent.click(trialView.getByRole('button', { name: 'Zoom in' }));
     });
     expect(zoomOf(content(container))).toBeCloseTo(1.25);
-    act(() => {
+    await act(async () => {
       fireEvent.click(trialView.getByRole('button', { name: 'Actual size' }));
     });
     expect(zoomOf(content(container))).toBe(1);
   });
 
-  it('zooms about the middle of the view, not the stage origin', () => {
+  it('zooms about the middle of the view, not the stage origin', async () => {
     const rect = vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue({
       x: 0,
       y: 0,
@@ -193,9 +198,11 @@ describe('an instrument that declares a stage', () => {
       toJSON: () => ({}),
     });
     try {
-      const { container } = render(<Lab instruments={[staged]} defaultInstrument="Staged" />);
+      const { container } = await renderSettled(
+        <Lab instruments={[staged]} defaultInstrument="Staged" />,
+      );
       const trialView = within(screen.getByRole('toolbar', { name: 'View' }));
-      act(() => {
+      await act(async () => {
         fireEvent.click(trialView.getByRole('button', { name: 'Zoom in' }));
       });
       const el = content(container);
@@ -208,12 +215,12 @@ describe('an instrument that declares a stage', () => {
     }
   });
 
-  it('is what earns them: DOM content without one gets none', () => {
-    render(<Lab instruments={[plain]} defaultInstrument="Plain" />);
+  it('is what earns them: DOM content without one gets none', async () => {
+    await renderSettled(<Lab instruments={[plain]} defaultInstrument="Plain" />);
     expect(screen.queryByRole('toolbar', { name: 'View' })).toBeNull();
   });
 
-  it('draws its overlay on the stage, outside the camera', () => {
+  it('draws its overlay on the stage, outside the camera', async () => {
     const overlaid = defineInstrument<{ n: number }, Record<string, never>>({
       name: 'Overlaid',
       defaultConfig: () => ({}),
@@ -224,7 +231,9 @@ describe('an instrument that declares a stage', () => {
         overlay: ({ state }) => <div data-testid="legend">{state.n}</div>,
       },
     });
-    const { container } = render(<Lab instruments={[overlaid]} defaultInstrument="Overlaid" />);
+    const { container } = await renderSettled(
+      <Lab instruments={[overlaid]} defaultInstrument="Overlaid" />,
+    );
     const legend = screen.getByTestId('legend');
     expect(legend).toHaveTextContent('7');
     expect(container.querySelector('.lk-stage')).toContainElement(legend);

package/src/chrome/labRegions.test.tsx

@@ -1,4 +1,5 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+import { renderSettled } from '@weasel-js/react/testing/renderSettled';
 import { describe, expect, it, vi } from 'vitest';
 import type { Instrument } from '../instrument/types';
 import { Lab } from '../lab/Lab';
@@ -19,19 +20,19 @@ function silenceRenderError(): void {
 }
 
 describe('lab-level chrome', () => {
-  it('renders a header contribution beside the lab header', () => {
+  it('renders a header contribution beside the lab header', async () => {
     const contribution: LabContribution = {
       id: 'publish',
       region: 'header',
       item: { icon: Glyph, label: 'Publish', onActivate: () => {} },
     };
-    render(
+    await renderSettled(
       <Lab title="T" instruments={[bare]} defaultInstrument="Bare" labChrome={[contribution]} />,
     );
     expect(screen.getByRole('button', { name: 'Publish' })).toBeInTheDocument();
   });
 
-  it('hands a header contribution the lab, not a trial', () => {
+  it('hands a header contribution the lab, not a trial', async () => {
     const contribution: LabContribution = {
       id: 'another',
       region: 'header',
@@ -41,21 +42,23 @@ describe('lab-level chrome', () => {
         onActivate: (ctx) => ctx.addTrial('Bare'),
       },
     };
-    render(
+    await renderSettled(
       <Lab title="T" instruments={[bare]} defaultInstrument="Bare" labChrome={[contribution]} />,
     );
     expect(screen.getAllByLabelText(/^Trial /)).toHaveLength(1);
-    fireEvent.click(screen.getByRole('button', { name: 'Another' }));
+    await act(async () => {
+      fireEvent.click(screen.getByRole('button', { name: 'Another' }));
+    });
     expect(screen.getAllByLabelText(/^Trial /)).toHaveLength(2);
   });
 
-  it('renders a palette contribution in the lab rail and selects it', () => {
+  it('renders a palette contribution in the lab rail and selects it', async () => {
     const contribution: LabContribution = {
       id: 'measure',
       region: 'palette',
       item: { icon: Glyph, label: 'Measure' },
     };
-    render(
+    await renderSettled(
       <Lab title="T" instruments={[bare]} defaultInstrument="Bare" labChrome={[contribution]} />,
     );
     const button = screen.getByRole('button', { name: 'Measure' });
@@ -63,7 +66,7 @@ describe('lab-level chrome', () => {
     expect(screen.getByRole('button', { name: 'Measure' })).toHaveAttribute('aria-current', 'true');
   });
 
-  it('gives a palette contribution the whole lab context, not a tool slot alone', () => {
+  it('gives a palette contribution the whole lab context, not a tool slot alone', async () => {
     // The shape the `as unknown as TrialChromeContext` cast used to fake: a
     // contribution reading anything past the tool slot got `undefined`.
     const seen: LabChromeContext[] = [];
@@ -75,7 +78,7 @@ describe('lab-level chrome', () => {
         return <span>{`${ctx.trials.length} trial(s), mode ${ctx.mode}`}</span>;
       },
     };
-    render(
+    await renderSettled(
       <Lab title="T" instruments={[bare]} defaultInstrument="Bare" labChrome={[contribution]} />,
     );
     expect(screen.getByText('1 trial(s), mode auto')).toBeInTheDocument();
@@ -83,19 +86,19 @@ describe('lab-level chrome', () => {
     expect(typeof seen[0]?.saveSnapshot).toBe('function');
   });
 
-  it('renders a footer contribution', () => {
+  it('renders a footer contribution', async () => {
     const contribution: LabContribution = {
       id: 'count',
       region: 'footer',
       item: { text: 'idle' },
     };
-    render(
+    await renderSettled(
       <Lab title="T" instruments={[bare]} defaultInstrument="Bare" labChrome={[contribution]} />,
     );
     expect(screen.getByText('idle')).toBeInTheDocument();
   });
 
-  it('throws when two lab contributions share an id', () => {
+  it('throws when two lab contributions share an id', async () => {
     silenceRenderError();
     const clash: LabContribution[] = [
       { id: 'same', region: 'header', item: { icon: Glyph, label: 'One', onActivate: () => {} } },
@@ -106,7 +109,7 @@ describe('lab-level chrome', () => {
     ).toThrow(/duplicate contribution id "same"/);
   });
 
-  it('keeps the lab tool slot and lab palette contributions in one namespace', () => {
+  it('keeps the lab tool slot and lab palette contributions in one namespace', async () => {
     silenceRenderError();
     const clash: LabContribution = {
       id: 'pick',
@@ -134,8 +137,8 @@ describe('lab sidebar region', () => {
     item: { title: 'Stories', body: <p>story list</p> },
   };
 
-  it('renders a section beside the workspace', () => {
-    const { container } = render(
+  it('renders a section beside the workspace', async () => {
+    const { container } = await renderSettled(
       <Lab title="T" instruments={[bare]} defaultInstrument="Bare" labChrome={[tree]} />,
     );
     expect(screen.getByText('story list')).toBeInTheDocument();
@@ -143,18 +146,22 @@ describe('lab sidebar region', () => {
     expect(screen.getByRole('separator', { name: /lab sidebar/i })).toBeInTheDocument();
   });
 
-  it('folds a section', () => {
-    render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" labChrome={[tree]} />);
+  it('folds a section', async () => {
+    await renderSettled(
+      <Lab title="T" instruments={[bare]} defaultInstrument="Bare" labChrome={[tree]} />,
+    );
     fireEvent.click(screen.getByRole('button', { name: 'Stories' }));
     expect(screen.queryByText('story list')).toBeNull();
   });
 
-  it('offers no tear-out at lab level', () => {
-    render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" labChrome={[tree]} />);
+  it('offers no tear-out at lab level', async () => {
+    await renderSettled(
+      <Lab title="T" instruments={[bare]} defaultInstrument="Bare" labChrome={[tree]} />,
+    );
     expect(screen.queryByRole('button', { name: 'Undock Stories' })).toBeNull();
   });
 
-  it('hands a render contribution the lab context', () => {
+  it('hands a render contribution the lab context', async () => {
     const seen: LabChromeContext[] = [];
     const probe: LabContribution = {
       id: 'probe',
@@ -164,13 +171,17 @@ describe('lab sidebar region', () => {
         return <p>probe</p>;
       },
     };
-    render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" labChrome={[probe]} />);
+    await renderSettled(
+      <Lab title="T" instruments={[bare]} defaultInstrument="Bare" labChrome={[probe]} />,
+    );
     expect(screen.getByText('probe')).toBeInTheDocument();
     expect(seen[0]?.trials).toHaveLength(1);
   });
 
-  it('adds no strip to a lab without sidebar chrome', () => {
-    const { container } = render(<Lab title="T" instruments={[bare]} defaultInstrument="Bare" />);
+  it('adds no strip to a lab without sidebar chrome', async () => {
+    const { container } = await renderSettled(
+      <Lab title="T" instruments={[bare]} defaultInstrument="Bare" />,
+    );
     expect(container.querySelector('.lk-lab__panes')).toBeNull();
   });
 });
@@ -182,7 +193,7 @@ describe('lab chrome without <Lab>', () => {
     undo: () => void;
   }
 
-  it('renders a contribution typed against a consumer context and hands it back', () => {
+  it('renders a contribution typed against a consumer context and hands it back', async () => {
     const undo = vi.fn();
     const ctx: RailCtx = { undo };
     const rail: readonly LabContribution<RailCtx>[] = [
@@ -192,7 +203,7 @@ describe('lab chrome without <Lab>', () => {
         item: { icon: Glyph, label: 'Undo', showLabel: true, onActivate: (c) => c.undo() },
       },
     ];
-    render(
+    await renderSettled(
       <LabShell
         title="Palette lab"
         header={

package/src/chrome/regions/PaletteRegion.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import type { RegionContribution, ToolSlotContext } from '../types';
 import { PaletteRegion } from './PaletteRegion';
@@ -65,7 +65,7 @@ describe('PaletteRegion', () => {
     const brush = screen.getByRole('button', { name: 'brush' });
     const eraser = screen.getByRole('button', { name: 'eraser' });
 
-    brush.focus();
+    act(() => brush.focus());
     fireEvent.keyDown(brush, { key: 'ArrowDown' });
     expect(document.activeElement).toBe(eraser);
     expect(eraser).toHaveAttribute('tabindex', '0');

package/src/controls/ControlMatrix.less

@@ -0,0 +1,245 @@
+// A settings-by-scopes grid. Built to sit beside a ControlPanel in a ~360px
+// sidebar: the label column takes what seven value columns leave, and every cell
+// is a fixed-height button so the rows rule up evenly.
+.lk-control-matrix {
+  min-width: 0;
+}
+
+.lk-control-matrix__table {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  font-family: var(--wzl-font-ui);
+  font-size: var(--wzl-font-size-xs);
+  color: var(--wzl-fg);
+}
+
+.lk-control-matrix__corner {
+  width: var(--lk-control-matrix-label-width, 30%);
+}
+
+.lk-control-matrix__head,
+.lk-control-matrix__label {
+  font-family: var(--wzl-font-display);
+  font-weight: var(--wzl-font-weight-light);
+  font-size: var(--wzl-font-size-sm);
+  line-height: var(--wzl-leading-snug);
+  color: var(--wzl-fg-muted);
+  text-transform: var(--wzl-params-label-case, uppercase);
+  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wide));
+}
+
+.lk-control-matrix__head {
+  padding: 0 0 var(--wzl-space-2);
+  text-align: center;
+  font-size: var(--wzl-font-size-2xs);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// The fallback scope every other column inherits from.
+.lk-control-matrix__head.is-first {
+  color: var(--wzl-fg);
+  font-weight: var(--wzl-font-weight-medium);
+}
+
+.lk-control-matrix__head-text {
+  text-decoration: none;
+  cursor: default;
+}
+
+.lk-control-matrix__head-button {
+  width: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: var(--wzl-radius-sm);
+  background: none;
+  color: inherit;
+  font: inherit;
+  letter-spacing: var(--wzl-params-label-tracking, var(--wzl-tracking-wide));
+  text-transform: var(--wzl-params-label-case, uppercase);
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.lk-control-matrix__head-button:hover {
+  color: var(--wzl-fg);
+  background: var(--wzl-surface-hover);
+}
+
+.lk-control-matrix__label {
+  padding: 0 var(--wzl-space-2) 0 0;
+  text-align: start;
+  white-space: nowrap;
+}
+
+// The text truncates; the help glyph after it never does.
+.lk-control-matrix__label-text {
+  display: inline-block;
+  max-width: calc(100% - 1.4em);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}
+
+.lk-control-matrix__cell {
+  padding: 1px;
+  height: var(--wzl-control-h-sm);
+  text-align: center;
+  vertical-align: middle;
+}
+
+.lk-control-matrix__cell.is-missing {
+  color: var(--wzl-fg-subtle);
+}
+
+// Inherited: the value in effect, but not chosen here.
+.lk-control-matrix__cell.is-inherited > * {
+  opacity: 0.4;
+}
+
+// Every cell control fills its cell, so the cell is the click target.
+.lk-control-matrix__value,
+.lk-control-matrix__switch {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: var(--wzl-control-h-sm);
+  padding: 0 var(--wzl-space-1);
+  border: 1px solid transparent;
+  border-radius: var(--wzl-radius-sm);
+  background: none;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.lk-control-matrix__value {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  line-height: calc(var(--wzl-control-h-sm) - 2px);
+}
+
+.lk-control-matrix__value.is-number {
+  .numeric();
+  text-align: end;
+  // A column of numbers is read down, so it keeps every digit: a glow of
+  // 0.35 cut to `0…` says nothing.
+  text-overflow: clip;
+}
+
+.lk-control-matrix__value:hover,
+.lk-control-matrix__switch:hover {
+  border-color: var(--wzl-border);
+  background: var(--wzl-surface-hover);
+}
+
+.lk-control-matrix__value:focus-visible,
+.lk-control-matrix__switch:focus-visible,
+.lk-control-matrix__swatch:focus-visible,
+.lk-control-matrix__head-button:focus-visible {
+  outline: 2px solid var(--wzl-focus-ring);
+  outline-offset: -1px;
+}
+
+// A small switch, drawn with the same parts as weasel-ui's.
+.lk-control-matrix__track {
+  position: relative;
+  flex: 0 0 auto;
+  width: 20px;
+  height: 12px;
+  background: var(--wzl-surface-sunken);
+  border: 1px solid var(--wzl-border-strong);
+  border-radius: var(--wzl-radius-pill);
+  transition: background-color var(--wzl-motion-fast), border-color var(--wzl-motion-fast);
+}
+
+.lk-control-matrix__thumb {
+  position: absolute;
+  top: 1px;
+  left: 1px;
+  width: 8px;
+  height: 8px;
+  background: var(--wzl-fg);
+  border-radius: 50%;
+  transition: transform var(--wzl-motion-fast);
+}
+
+.lk-control-matrix__switch[aria-checked='true'] .lk-control-matrix__track {
+  background: var(--wzl-accent-strong);
+  border-color: var(--wzl-accent-strong);
+}
+
+.lk-control-matrix__switch[aria-checked='true'] .lk-control-matrix__thumb {
+  transform: translateX(8px);
+  background: var(--wzl-fg-on-accent);
+}
+
+.lk-control-matrix__swatch {
+  display: block;
+  width: 100%;
+  height: var(--wzl-control-h-xs);
+  padding: 0;
+  border: 1px solid var(--wzl-border);
+  border-radius: var(--wzl-radius-sm);
+  background: none;
+  cursor: pointer;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.lk-control-matrix__swatch::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.lk-control-matrix__swatch::-webkit-color-swatch {
+  border: 0;
+  border-radius: var(--wzl-radius-sm);
+}
+
+.lk-control-matrix__swatch::-moz-color-swatch {
+  border: 0;
+  border-radius: var(--wzl-radius-sm);
+}
+
+.lk-control-matrix__chip {
+  display: inline-block;
+  width: 22px;
+  height: var(--wzl-control-h-xs);
+  border: 1px solid var(--wzl-border);
+  border-radius: var(--wzl-radius-sm);
+  background: var(--lk-chip);
+  vertical-align: middle;
+}
+
+.lk-control-matrix__chip.is-unset {
+  border-style: dashed;
+  background: none;
+}
+
+.lk-control-matrix__popover {
+  outline: none;
+}
+
+.lk-control-matrix__editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--wzl-space-3);
+  inline-size: 240px;
+  padding: var(--wzl-space-4);
+  background: var(--wzl-surface-raised);
+  border: 1px solid var(--wzl-border);
+  border-radius: var(--wzl-radius-md);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
+  outline: none;
+}
+
+.lk-control-matrix__editor-actions {
+  display: flex;
+  justify-content: flex-end;
+}