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

package/src/ui/layers/LayerStack.less

@@ -14,7 +14,7 @@
   margin: 0;
   font-family: var(--wzl-font-display);
   font-weight: var(--wzl-font-weight-light);
-  font-size: 1rem;
+  font-size: var(--wzl-font-size-lg);
   color: var(--wzl-fg);
 }
 
@@ -28,7 +28,7 @@
   border: 1px dashed var(--wzl-border);
   border-radius: var(--wzl-radius-sm);
   padding: 2px 8px;
-  font-size: 0.78rem;
+  font-size: var(--wzl-font-size-sm);
   color: var(--wzl-fg-subtle);
   cursor: pointer;
 }
@@ -46,12 +46,12 @@
 .lk-layer-stack__drop-hint {
   height: 2px;
   background: var(--wzl-accent);
-  border-radius: 1px;
+  border-radius: var(--wzl-radius-sm);
 }
 
 .lk-layer-stack__empty {
   color: var(--wzl-fg-subtle);
-  font-size: 0.85rem;
+  font-size: var(--wzl-font-size);
   padding: 8px;
   text-align: center;
 }
@@ -96,8 +96,8 @@
   min-width: 22px;
   height: 22px;
   border-radius: var(--wzl-radius-sm);
-  font-weight: 600;
-  font-size: 0.85rem;
+  font-weight: var(--wzl-font-weight-bold);
+  font-size: var(--wzl-font-size);
 }
 
 .lk-layer-card.has-accent .lk-layer-card__handle {
@@ -112,7 +112,7 @@
 .lk-layer-card__kind,
 .lk-layer-card__primary {
   flex: 1;
-  font-size: 0.9rem;
+  font-size: var(--wzl-font-size);
 }
 
 .lk-layer-card__primary {
@@ -121,14 +121,14 @@
   color: var(--wzl-fg);
   font: inherit;
   text-transform: uppercase;
-  letter-spacing: 0.06em;
+  letter-spacing: var(--wzl-tracking-wide);
 }
 
 .lk-root .lk-layer-card__remove {
   background: transparent;
   border: 0;
   color: var(--wzl-fg-subtle);
-  font-size: 1rem;
+  font-size: var(--wzl-font-size-lg);
   cursor: pointer;
   padding: 2px 6px;
 }

package/src/ui/layers/LayerStack.tsx

@@ -1,5 +1,6 @@
 import { type CSSProperties, type ReactNode, type RefCallback, useEffect, useState } from 'react';
 import { dlog, useReorderDragList } from '../../passthrough/weasel-ui';
+import { DragHandleGlyph } from '../../primitives/DragHandleGlyph';
 
 /** One card in a layer stack: its identity, the label shown when collapsed,
  *  and the optional select hoisted into its header. */
@@ -205,16 +206,3 @@ export function LayerStack({
     </div>
   );
 }
-
-function DragHandleGlyph() {
-  return (
-    <svg width="12" height="16" viewBox="0 0 8 16" fill="currentColor" aria-hidden="true">
-      <circle cx="2" cy="3" r="1.1" />
-      <circle cx="6" cy="3" r="1.1" />
-      <circle cx="2" cy="8" r="1.1" />
-      <circle cx="6" cy="8" r="1.1" />
-      <circle cx="2" cy="13" r="1.1" />
-      <circle cx="6" cy="13" r="1.1" />
-    </svg>
-  );
-}

package/src/ui/properties/CurveField.less

@@ -19,7 +19,7 @@
   display: flex;
   justify-content: space-between;
   font-variant-numeric: tabular-nums;
-  font-size: 0.85rem;
+  font-size: var(--wzl-font-size);
   color: var(--wzl-fg-subtle);
 }
 
@@ -39,7 +39,7 @@
   border-radius: var(--wzl-radius-sm);
   color: var(--wzl-fg);
   padding: 4px 10px;
-  font-size: 0.78rem;
+  font-size: var(--wzl-font-size-sm);
   cursor: pointer;
 }
 

package/src/ui/properties/CurveField.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { assert, describe, expect, it, vi } from 'vitest';
 
 // CurveEditor uses weasel's own bundled React and fails in jsdom.
 // Mock it out — these tests only assert on readouts and the flip button.
@@ -81,13 +81,13 @@ describe('CurveField', () => {
       />,
     );
     const overlay = container.querySelector('.lk-curve-field__marks');
-    expect(overlay).not.toBeNull();
-    const rect = overlay!.querySelector('rect');
-    expect(rect).not.toBeNull();
+    assert(overlay);
+    const rect = overlay.querySelector('rect');
+    assert(rect);
     // x = 0.2 * 200 = 40; width = (0.4 - 0.2) * 200 = 40.
-    expect(rect!.getAttribute('x')).toBe('40');
-    expect(rect!.getAttribute('width')).toBe('40');
-    expect(rect!.getAttribute('fill')).toBe('#ffcc00');
+    expect(rect.getAttribute('x')).toBe('40');
+    expect(rect.getAttribute('width')).toBe('40');
+    expect(rect.getAttribute('fill')).toBe('#ffcc00');
   });
 
   it('renders a line mark as a positioned line', () => {
@@ -104,10 +104,10 @@ describe('CurveField', () => {
       />,
     );
     const line = container.querySelector('.lk-curve-field__marks line');
-    expect(line).not.toBeNull();
-    expect(line!.getAttribute('x1')).toBe('140');
-    expect(line!.getAttribute('x2')).toBe('140');
-    expect(line!.getAttribute('stroke')).toBe('#ffcc00');
+    assert(line);
+    expect(line.getAttribute('x1')).toBe('140');
+    expect(line.getAttribute('x2')).toBe('140');
+    expect(line.getAttribute('stroke')).toBe('#ffcc00');
   });
 
   it('omits the marks overlay when marks is undefined', () => {

package/src/ui/properties/PropertyGroup.less

@@ -13,8 +13,8 @@
   margin: 0 0 8px;
   font-family: var(--wzl-font-display);
   font-weight: var(--wzl-font-weight-light);
-  font-size: 0.78rem;
-  letter-spacing: 0.08em;
+  font-size: var(--wzl-font-size-sm);
+  letter-spacing: var(--wzl-tracking-wider);
   text-transform: uppercase;
   color: var(--wzl-fg-subtle);
 }

package/src/ui/properties/PropertyPanel.less

@@ -15,8 +15,8 @@
 .lk-property-panel__title {
   font-family: var(--wzl-font-display);
   font-weight: var(--wzl-font-weight-light);
-  font-size: 1.05rem;
-  line-height: 1.2;
+  font-size: var(--wzl-font-size-lg);
+  line-height: var(--wzl-leading-snug);
   letter-spacing: 0.01em;
   color: var(--wzl-fg);
   margin: 0 0 12px;
@@ -85,8 +85,8 @@
 .lk-property-row__label {
   font-family: var(--wzl-font-display);
   font-weight: var(--wzl-font-weight-light);
-  font-size: 0.78rem;
-  line-height: 1.2;
+  font-size: var(--wzl-font-size-sm);
+  line-height: var(--wzl-leading-snug);
   color: var(--wzl-fg-muted);
   text-transform: uppercase;
   letter-spacing: 0.05em;
@@ -108,14 +108,13 @@
 .lk-property-row__readout-input {
   font: inherit;
   font-weight: var(--wzl-font-weight-medium);
-  // Force line-height 1 (the label parent inherits 1.2, which would make
-  // the input box ~3px taller than the SB reference). Matches SB
-  // styles.css:385 `font: 500 0.78rem/1`.
-  line-height: 1;
+  // Force leading-tight — the label parent inherits 1.2, which would make the
+  // input box ~3px taller than the speech-balloons reference.
+  line-height: var(--wzl-leading-tight);
   color: var(--wzl-accent);
   background: transparent;
   border: 1px solid transparent;
-  border-radius: 3px;
+  border-radius: var(--wzl-radius-sm);
   padding: 1px 0;
   margin: 0;
   width: calc(5em - 24px);
@@ -126,10 +125,10 @@
   -moz-appearance: textfield;
 }
 .lk-property-row__readout-input:hover {
-  background: rgba(255, 255, 255, 0.06);
+  background: color-mix(in srgb, currentColor 8%, transparent);
 }
 .lk-property-row__readout-input:focus {
-  background: rgba(0, 0, 0, 0.4);
+  background: var(--wzl-surface-sunken);
   border-color: var(--wzl-accent);
 }
 .lk-property-row__readout-input::-webkit-inner-spin-button,
@@ -148,8 +147,8 @@
 // Word-style units (e.g. "px") read as a small dim suffix next to the digits.
 .lk-property-row__readout-unit {
   color: var(--wzl-fg-muted);
-  font-size: 0.78em;
-  line-height: 1;
+  font-size: var(--wzl-font-size-2xs);
+  line-height: var(--wzl-leading-tight);
   pointer-events: none;
 }
 // Symbol units (e.g. `<sup>°</sup>`) lean on the browser's native super
@@ -157,7 +156,7 @@
 // would re-collapse the glyph onto the baseline.
 .lk-property-row__readout-group sup {
   color: var(--wzl-fg-muted);
-  font-size: 0.7em;
+  font-size: var(--wzl-font-size-2xs);
   pointer-events: none;
 }
 
@@ -174,12 +173,12 @@
 }
 .lk-property-row input[type='range']::-webkit-slider-runnable-track {
   height: 4px;
-  border-radius: 2px;
+  border-radius: var(--wzl-radius-sm);
   background: color-mix(in srgb, var(--wzl-accent) 18%, transparent);
 }
 .lk-property-row input[type='range']::-moz-range-track {
   height: 4px;
-  border-radius: 2px;
+  border-radius: var(--wzl-radius-sm);
   background: color-mix(in srgb, var(--wzl-accent) 18%, transparent);
 }
 .lk-property-row input[type='range']::-webkit-slider-thumb {
@@ -225,12 +224,15 @@
 
 .lk-property-row input[type='text']:not(.lk-property-row__readout-input),
 .lk-property-row input[type='number'] {
-  background: rgba(0, 0, 0, 0.35);
+  background: var(--wzl-surface-sunken);
   color: var(--wzl-fg);
   border: 1px solid var(--wzl-border);
   border-radius: var(--wzl-radius-sm);
   padding: 6px 8px;
-  font: 400 0.85rem/1 var(--wzl-font-ui);
+  font-family: var(--wzl-font-ui);
+  font-weight: var(--wzl-font-weight-medium);
+  font-size: var(--wzl-font-size);
+  line-height: var(--wzl-leading-tight);
 }
 
 .lk-property-row input[type='text']:not(.lk-property-row__readout-input):focus,
@@ -248,7 +250,10 @@
   border: 0;
   border-radius: 0;
   padding: 2px 0;
-  font: 400 0.85rem/1 var(--wzl-font-ui);
+  font-family: var(--wzl-font-ui);
+  font-weight: var(--wzl-font-weight-medium);
+  font-size: var(--wzl-font-size);
+  line-height: var(--wzl-leading-tight);
   cursor: pointer;
 }
 .lk-property-row select:focus {
@@ -344,7 +349,7 @@
 .lk-property-row--checkbox .lk-property-row__label {
   text-transform: none;
   letter-spacing: normal;
-  font-size: 0.85rem;
+  font-size: var(--wzl-font-size);
   color: var(--wzl-fg);
   // Place the label after the checkbox visually.
   order: 1;
@@ -374,7 +379,10 @@
   color: var(--wzl-fg-muted);
   border: 0;
   border-radius: 0;
-  font: 400 0.78rem/1 var(--wzl-font-ui);
+  font-family: var(--wzl-font-ui);
+  font-weight: var(--wzl-font-weight-medium);
+  font-size: var(--wzl-font-size-sm);
+  line-height: var(--wzl-leading-tight);
   cursor: pointer;
   backdrop-filter: none;
   -webkit-backdrop-filter: none;
@@ -391,12 +399,12 @@
 
 .lk-property-row__toggle-button--selected {
   background: var(--wzl-accent);
-  color: #0a0a14;
+  color: var(--wzl-fg-on-accent);
   font-weight: var(--wzl-font-weight-medium);
 }
 
 .lk-property-row__toggle-button--selected:hover {
-  color: #0a0a14;
+  color: var(--wzl-fg-on-accent);
 }
 
 // ── Subpanel ────────────────────────────────────────────────────────
@@ -420,12 +428,12 @@
 }
 .lk-subpanel__title {
   font-family: var(--wzl-font-display);
-  font-weight: 400;
-  font-size: 0.72rem;
-  line-height: 1;
+  font-weight: var(--wzl-font-weight-medium);
+  font-size: var(--wzl-font-size-sm);
+  line-height: var(--wzl-leading-tight);
   color: var(--wzl-fg);
   text-transform: uppercase;
-  letter-spacing: 0.08em;
+  letter-spacing: var(--wzl-tracking-wider);
   margin: 0;
   padding: 6px 0 4px;
   display: flex;
@@ -508,24 +516,27 @@
   min-width: 14px;
   padding: 0 2px;
   color: var(--lk-panel-accent, var(--wzl-fg-muted));
-  font-size: 14px;
-  font-weight: 700;
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: var(--wzl-font-size);
+  font-weight: var(--wzl-font-weight-bold);
+  font-family: var(--wzl-font-mono);
   line-height: 1;
 }
 
 .lk-effect-card__title {
   font-family: var(--wzl-font-display);
-  font-weight: 500;
-  font-size: 0.9rem;
-  line-height: 1;
+  font-weight: var(--wzl-font-weight-medium);
+  font-size: var(--wzl-font-size);
+  line-height: var(--wzl-leading-tight);
   color: var(--wzl-fg);
   text-transform: uppercase;
   letter-spacing: 0.04em;
 }
 
 .lk-effect-card__primary {
-  font: 400 0.75rem/1 var(--wzl-font-ui);
+  font-family: var(--wzl-font-ui);
+  font-weight: var(--wzl-font-weight-medium);
+  font-size: var(--wzl-font-size-sm);
+  line-height: var(--wzl-leading-tight);
   color: var(--wzl-fg);
   background: rgba(0, 0, 0, 0.3);
   border: 1px solid var(--wzl-border);
@@ -547,19 +558,19 @@
   background: transparent;
   color: var(--wzl-fg-muted);
   border: 1px solid transparent;
-  border-radius: 4px;
+  border-radius: var(--wzl-radius-sm);
   width: 22px;
   height: 22px;
-  font-size: 0.85rem;
+  font-size: var(--wzl-font-size);
   cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 .lk-effect-card__remove:hover {
-  color: #ffb3a8;
-  border-color: rgba(240, 68, 56, 0.4);
-  background: rgba(240, 68, 56, 0.08);
+  color: var(--wzl-danger-fg, var(--wzl-danger));
+  border-color: color-mix(in srgb, var(--wzl-danger) 40%, transparent);
+  background: color-mix(in srgb, var(--wzl-danger) 8%, transparent);
 }
 
 .lk-effect-card__body {
@@ -578,12 +589,15 @@
 .lk-effect-card-list__drop-hint {
   height: 0;
   border-top: 2px solid var(--wzl-accent);
-  border-radius: 2px;
+  border-radius: var(--wzl-radius-sm);
   margin: 2px 0;
   box-shadow: 0 0 6px color-mix(in srgb, var(--wzl-accent) 60%, transparent);
 }
 .lk-effect-card-list__empty {
-  font: var(--wzl-font-weight-light) 0.78rem/1.4 var(--wzl-font-display);
+  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);
   color: var(--wzl-fg-muted);
   text-align: center;
   padding: 16px 12px;

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

@@ -299,7 +299,8 @@ export const RightSidebarTails: Story = {
           const next = prev.filter((t) => t.id !== sourceId);
           const idx = next.findIndex((t) => t.id === targetId);
           const insertAt = position === 'before' ? idx : idx + 1;
-          const src = prev.find((t) => t.id === sourceId)!;
+          const src = prev.find((t) => t.id === sourceId);
+          if (!src) return prev;
           next.splice(insertAt, 0, src);
           return next;
         });
@@ -348,7 +349,8 @@ export const LayerStack: Story = {
           const next = prev.filter((t) => t.id !== sourceId);
           const idx = next.findIndex((t) => t.id === targetId);
           const insertAt = position === 'before' ? idx : idx + 1;
-          const src = prev.find((t) => t.id === sourceId)!;
+          const src = prev.find((t) => t.id === sourceId);
+          if (!src) return prev;
           next.splice(insertAt, 0, src);
           return next;
         });

package/src/ui/properties/storyLayouts.tsx

@@ -7,10 +7,10 @@ import type { ReactNode } from 'react';
  */
 export function SideBySide({ block, inline }: { block: ReactNode; inline: ReactNode }) {
   const labelStyle = {
-    font: '300 0.72rem/1 Oswald, system-ui',
+    font: 'var(--wzl-font-weight-normal) var(--wzl-font-size-sm)/var(--wzl-leading-tight) var(--wzl-font-ui)',
     color: 'var(--wzl-fg-muted)',
     textTransform: 'uppercase' as const,
-    letterSpacing: '0.08em',
+    letterSpacing: 'var(--wzl-tracking-wider)',
     margin: '0 0 8px',
   };
   return (

package/dist/_dts/index-iAP6XbH3.d.ts

@@ -1,132 +0,0 @@
-import { ReactNode } from 'react';
-import { C as ConfigField } from './types-x92Kfeme.js';
-
-/** What an instrument's `render` is handed: its state and config, the setters
- *  for both, the trial it is mounted in, and a way to emit named events. */
-interface RenderContext<TS = unknown, TC = unknown> {
-    state: TS;
-    config: TC;
-    setState: (next: TS | ((prev: TS) => TS)) => void;
-    setConfig: (key: keyof TC, value: unknown) => void;
-    trial: {
-        id: string;
-        zoom: number;
-        setZoom: (z: number) => void;
-    };
-    emit: (event: string) => void;
-}
-/** One 2D canvas layer of an instrument, drawn in declaration order.
- *
- *  `draw` is called with the camera already applied, so it works in world
- *  coordinates. `zoom` is passed for the things that must not scale with it —
- *  set `ctx.lineWidth = 1 / zoom` to keep a hairline hairline. */
-interface CanvasLayer<TS = unknown, TC = unknown> {
-    id: string;
-    draw: (ctx: CanvasRenderingContext2D, args: {
-        state: TS;
-        config: TC;
-        zoom: number;
-    }) => void;
-}
-/** Declares that an instrument draws to a canvas: its layers, and where the
- *  view starts. */
-interface CanvasCapability<TS = unknown, TC = unknown> {
-    layers: CanvasLayer<TS, TC>[];
-    initialView?: {
-        zoom: number;
-        pan: {
-            x: number;
-            y: number;
-        };
-    };
-}
-/** Declares which of an instrument's layers the trial should offer
- *  show/hide controls for. */
-interface LayerCapability {
-    ids: string[];
-}
-/** Declares that an instrument accepts items dragged from a palette: what the
- *  palette offers, what a drop does to the state, and — optionally — live
- *  feedback during the drag and the ability to drag existing items back out. */
-interface DragDropCapability<TS = unknown, TC = unknown> {
-    palette: PaletteItem[] | ((state: TS, config: TC) => PaletteItem[]);
-    onDrop: (worldPos: Point, item: PaletteItem, state: TS, config: TC) => TS;
-    onDragOver?: (worldPos: Point, item: PaletteItem, state: TS, config: TC) => DragFeedback | null;
-    pickUp?: (hit: HitResult, state: TS, config: TC) => {
-        item: PaletteItem;
-        state: TS;
-    } | null;
-}
-/** Declares that an instrument's state is undoable: which emitted events
- *  snapshot it, and how many snapshots to keep. */
-interface UndoCapability {
-    snapshotOn?: string[];
-    maxDepth?: number;
-}
-/** The name of an event an instrument emits through `RenderContext.emit`. */
-type SystemEvent = string;
-/** A point in world coordinates. */
-type Point = {
-    x: number;
-    y: number;
-};
-/** What a hit-test found, and where. */
-type HitResult = {
-    hit: boolean;
-    layerId?: string;
-    pointId?: string;
-};
-/** A trial's camera. */
-type ViewTransform = {
-    zoom: number;
-    pan: Point;
-};
-/** A layer as the layer list shows it. `alwaysOn` layers cannot be hidden. */
-type LayerDescriptor = {
-    id: string;
-    label: string;
-    alwaysOn?: boolean;
-};
-/** One draggable entry in an instrument's palette. */
-type PaletteItem = {
-    id: string;
-    label: string;
-    data?: unknown;
-};
-/** Whether a drop would be accepted at the current position, and why not if
- *  it would not. */
-type DragFeedback = {
-    ok: boolean;
-    reason?: string;
-};
-/**
- * An instrument: one self-contained interactive experiment a lab can host.
- *
- * It owns two pieces of data — `config`, the settings the control panel edits,
- * and `state`, what the experiment is currently doing — and renders from both.
- * The optional capability fields declare what else it wants from the runtime:
- * a canvas, a layer list, palette drag-and-drop, undo. Declaring a capability
- * is what makes the trial provide the corresponding chrome.
- */
-interface Instrument<TS = unknown, TC = unknown> {
-    name: string;
-    defaultConfig: () => TC;
-    initialState: (config: TC) => TS;
-    configSchema?: () => ConfigField[];
-    /** The instrument's DOM. With `canvas`, this renders as an overlay above the
-     *  layers rather than instead of them; return `null` for canvas only. */
-    render: (ctx: RenderContext<TS, TC>) => ReactNode;
-    onConfigChange?: (config: TC, prev: TC, state: TS) => TS;
-    serialize?: (state: TS) => unknown;
-    deserialize?: (data: unknown, config: TC) => TS;
-    canvas?: CanvasCapability<TS, TC>;
-    layers?: LayerCapability;
-    dragDrop?: DragDropCapability<TS, TC>;
-    undo?: UndoCapability;
-}
-/** Instruments as a lab receives them. `any` rather than `unknown` because
- *  parameter contravariance keeps a `defineInstrument<TS, TC>` result out of
- *  an `Instrument<unknown, unknown>[]`; it is contained to this alias. */
-type InstrumentList = readonly Instrument<any, any>[];
-
-export type { CanvasCapability as C, DragDropCapability as D, HitResult as H, Instrument as I, LayerCapability as L, PaletteItem as P, RenderContext as R, SystemEvent as S, UndoCapability as U, ViewTransform as V, InstrumentList as a, CanvasLayer as b, DragFeedback as c, LayerDescriptor as d, Point as e };

package/dist/_dts/types-x92Kfeme.d.ts

@@ -1,62 +0,0 @@
-/** Which control a config field is edited with. */
-type ConfigFieldType = 'slider' | 'checkbox' | 'select' | 'number' | 'text' | 'color';
-/** What every config field carries: the config key it writes, the label shown
- *  beside it, and which control renders it. */
-interface ConfigFieldBase {
-    key: string;
-    label: string;
-    type: ConfigFieldType;
-}
-/** A bounded number edited by dragging. */
-interface SliderField extends ConfigFieldBase {
-    type: 'slider';
-    default: number;
-    min: number;
-    max: number;
-    step?: number;
-}
-/** A boolean. */
-interface CheckboxField extends ConfigFieldBase {
-    type: 'checkbox';
-    default: boolean;
-}
-/** One choice in a select field. */
-interface SelectOption {
-    value: string;
-    label: string;
-}
-/** A fixed set of labeled choices. */
-interface SelectField extends ConfigFieldBase {
-    type: 'select';
-    default: string;
-    options: SelectOption[];
-}
-/** A number typed directly, optionally bounded. Use a slider field instead
- *  when the range matters more than the exact value. */
-interface NumberField extends ConfigFieldBase {
-    type: 'number';
-    default: number;
-    min?: number;
-    max?: number;
-    step?: number;
-}
-/** A free-text string. Writes are debounced so typing does not re-run the
- *  instrument on every keystroke. */
-interface TextField extends ConfigFieldBase {
-    type: 'text';
-    default: string;
-    placeholder?: string;
-    maxLength?: number;
-    /** Milliseconds to debounce live setConfig calls. Default 150 ms. Set to 0 to disable. */
-    debounceMs?: number;
-}
-/** A color, as a CSS color string. */
-interface ColorField extends ConfigFieldBase {
-    type: 'color';
-    default: string;
-}
-/** One field of an instrument's config schema. The schema is what the control
- *  panel renders, and what `validateConfigSchema` checks. */
-type ConfigField = SliderField | CheckboxField | SelectField | NumberField | TextField | ColorField;
-
-export type { ConfigField as C, NumberField as N, SelectField as S, TextField as T, CheckboxField as a, ColorField as b, ConfigFieldBase as c, ConfigFieldType as d, SelectOption as e, SliderField as f };