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

package/dist/surface/index.js

@@ -1,4 +1,4 @@
-export { SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceOptional, useSurfaceTile, useTiledSurface } from '../chunk-HFDVGF4X.js';
-import '../chunk-Z6HJ5FEM.js';
+export { SurfaceContext, composeRects, rectsEqual, toDeviceRect, useSurface, useSurfaceOptional, useSurfaceTile, useTiledSurface } from '../chunk-LGKRIUSW.js';
+import '../chunk-QCICIHEO.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/ui/layers/index.d.ts

@@ -14,7 +14,9 @@ interface LayerStackItem {
      *  can switch mode/shape without expanding. */
     primaryValue?: string;
     primaryOptions?: string[];
-    /** Accent CSS color used as the left border / index-badge fill. */
+    /** Accent CSS color used as the left border / index-badge fill. Sets
+     *  --wzl-layer-stack-accent on the card, which re-binds --wzl-accent
+     *  for everything inside it. */
     accent?: string;
     /** Optional badge text rendered before the primary control
      *  (e.g. tail index "1", "2", "3"). When omitted a drag handle
@@ -38,10 +40,14 @@ interface LayerStackProps {
     /** Hide the title + palette row (used when an outer wrap renders its
      *  own head — see speech-balloons Tails panel). */
     hideHead?: boolean;
+    /** Appended to the root element's class list. The module's own class names
+     *  are hashed, so this is the supported way to reach the stack from a
+     *  consumer stylesheet. */
+    className?: string;
 }
 /** A drag-reorderable stack of expandable cards, with a palette in the header
  *  for adding more. The body of each card is the caller's to render. */
-declare function LayerStack({ title, items, paletteKinds, onAdd, onRemove, onReorder, onPrimaryChange, renderBody, hideHead, }: LayerStackProps): react_jsx_runtime.JSX.Element;
+declare function LayerStack({ className, title, items, paletteKinds, onAdd, onRemove, onReorder, onPrimaryChange, renderBody, hideHead, }: LayerStackProps): react_jsx_runtime.JSX.Element;
 
 export { LayerStack };
 export type { LayerStackItem, LayerStackProps };

package/dist/ui/layers/index.js

@@ -1,6 +1,4 @@
-export { LayerStack } from '../../chunk-O2BULFHX.js';
-import '../../chunk-TLGRYALP.js';
-import '../../chunk-Z6HJ5FEM.js';
-import '../../chunk-PQJ5B2U2.js';
+export { c3 as LayerStack } from '../../chunk-RGT4EJIB.js';
+import '../../chunk-QCICIHEO.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/undo/index.d.ts

@@ -1,6 +1,6 @@
-export { U as UndoCapability } from '../_dts/index-DgcNdEdh.js';
+export { U as UndoCapability } from '../_dts/types-BttTIent.js';
 import 'react';
-import '../_dts/types-AHlQxBNN.js';
+import '../_dts/types-DCGEcMO_.js';
 import '../_dts/PrefsForm-BYa6cWnO.js';
 import '../_dts/types-1Sdxy_Pv.js';
 import '../_dts/types-DJ79Tg5J.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasel-js/labkit",
-  "version": "1.3.0-pre.0",
+  "version": "1.3.0",
   "description": "React widgets for building self-contained interactive lab pages",
   "license": "MIT",
   "author": "orochi235",
@@ -109,9 +109,9 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
-    "@weasel-js/core": "1.3.0-pre.0",
-    "@weasel-js/theme": "1.3.0-pre.0",
-    "@weasel-js/ui": "1.3.0-pre.0",
+    "@weasel-js/core": "1.3.0",
+    "@weasel-js/theme": "1.3.0",
+    "@weasel-js/ui": "1.3.0",
     "earcut": "2.2.4",
     "polygon-clipping": "^0.15.7",
     "react-aria-components": "^1.5.0",
@@ -122,7 +122,7 @@
     "@biomejs/biome": "^2.4.12",
     "@rollup/plugin-alias": "^6.0.0",
     "@testing-library/jest-dom": "^6.6.0",
-    "@weasel-js/modes": "1.3.0-pre.0",
+    "@weasel-js/modes": "1.3.0",
     "less": "^4.2.0",
     "rollup-plugin-dts": "^6.4.1",
     "tsx": "^4.19.0",

package/src/config/builder.test.ts

@@ -20,7 +20,13 @@ describe('builder', () => {
   it('keeps the subclass across a chain, so kind-specific methods survive', () => {
     const n = f.number(20).label('A').range(5, 80).describe('help').step(5);
     expect(n.kind).toBe('number');
-    expect(n.annotations).toMatchObject({ name: 'A', description: 'help', min: 5, max: 80, step: 5 });
+    expect(n.annotations).toMatchObject({
+      name: 'A',
+      description: 'help',
+      min: 5,
+      max: 80,
+      step: 5,
+    });
   });
 
   it('keeps a custom node kind across a chain', () => {

package/src/config/builder.ts

@@ -29,11 +29,7 @@ abstract class BaseNode<T> implements ConfigNode<T> {
   /** Clone into the same subclass. Subclasses with extra constructor
    *  arguments override this. */
   protected with(annotations: Annotations, options: NodeOptions): this {
-    const Ctor = this.constructor as new (
-      d: T,
-      a: Annotations,
-      o: NodeOptions,
-    ) => this;
+    const Ctor = this.constructor as new (d: T, a: Annotations, o: NodeOptions) => this;
     return new Ctor(this.default, annotations, options);
   }
 

package/src/config/resolve.test.ts

@@ -54,8 +54,7 @@ describe('resolveConfigSchema', () => {
   });
 
   it('a consumer rule claims an f.value kind before the built-in', () => {
-    const colorByName: ConfigRule = (ctx) =>
-      ctx.key.endsWith('Color') ? { kind: 'color' } : null;
+    const colorByName: ConfigRule = (ctx) => (ctx.key.endsWith('Color') ? { kind: 'color' } : null);
     const r = resolveConfigSchema(f.schema({ tintColor: f.value('#fff') }), [colorByName]);
     expect(leafAt(r, 'tintColor').kind).toBe('color');
   });

package/src/controls/ControlPanel.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PropertyRow } from '@weasel-js/ui';
 import { useState } from 'react';
 import { f } from '../config/builder';
 import { resolveConfigSchema } from '../config/resolve';
 import type { ConfigRule, ControlRenderer } from '../config/types';
-import { PropertyRow } from '../ui/properties/PropertyPanel';
 import { ControlPanel } from './ControlPanel';
 import type { ConfigField } from './types';
 
@@ -141,9 +141,48 @@ export const CustomControl: Story = {
   ),
 };
 
+const described = f.schema({
+  frequency: f
+    .number(2)
+    .range(0.1, 10)
+    .step(0.1)
+    .describe('Cycles per second the oscillator runs at.'),
+  amplitude: f.number(0.5).range(0, 1).step(0.05),
+  showGrid: f.boolean(true).describe('Draw the alignment grid behind the plot.'),
+  wave: f
+    .enum('sine', [
+      { value: 'sine', label: 'Sine' },
+      { value: 'square', label: 'Square' },
+    ])
+    .describe('Waveform the generator emits.'),
+  title: f.string('My experiment'),
+  tint: f.color('#3a86ff').describe('Plot line color.'),
+});
+
+/** A leaf with a `describe(...)` gets an \u24d8 beside its label whose tooltip
+ *  carries the text; leaves without one stay bare. */
+export const Described: Story = {
+  render: () => {
+    const schema = resolveConfigSchema(described, []);
+    const [config, setConfig] = useState<Record<string, unknown>>(described.defaults());
+    return (
+      <ControlPanel
+        schema={schema}
+        config={config}
+        setConfig={(key, value) => setConfig((prev) => ({ ...prev, [key as string]: value }))}
+      />
+    );
+  },
+};
+
 const conditional = f.schema({
   showGrid: f.boolean(true),
-  cellSize: f.number(20).range(5, 80).step(5).label('Grid spacing').showIf((c) => c.showGrid === true),
+  cellSize: f
+    .number(20)
+    .range(5, 80)
+    .step(5)
+    .label('Grid spacing')
+    .showIf((c) => c.showGrid === true),
 });
 
 /** `showIf` hides the row while the value stays in config. Toggle the

package/src/controls/ControlPanel.test.tsx

@@ -1,10 +1,10 @@
 import { fireEvent, render, screen } from '@testing-library/react';
-import { afterEach, describe, expect, it, vi } from 'vitest';
 import { TOOL_PREF_KINDS, type ToolPrefKind } from '@weasel-js/core';
 import type { PrefLeaf } from '@weasel-js/ui';
-import type { ResolvedConfig } from '../config/types';
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { f } from '../config/builder';
 import { resolveConfigSchema } from '../config/resolve';
+import type { ResolvedConfig } from '../config/types';
 import { ControlPanel } from './ControlPanel';
 import type { ConfigField } from './types';
 
@@ -188,6 +188,21 @@ describe('<ControlPanel> schema', () => {
     render(<ControlPanel schema={schema} config={{}} setConfig={vi.fn()} />);
     expect(screen.getByLabelText('Tint')).toHaveValue('#123456');
   });
+
+  it('hangs a described leaf\u2019s description off a help affordance, and leaves an undescribed leaf bare', () => {
+    const schema = resolveConfigSchema(
+      f.schema({
+        showGrid: f.boolean(true).describe('Draw the alignment grid.'),
+        snap: f.boolean(true),
+      }),
+      [],
+    );
+    render(
+      <ControlPanel schema={schema} config={{ showGrid: true, snap: true }} setConfig={vi.fn()} />,
+    );
+    expect(screen.getByRole('button', { name: 'About Show grid' })).toBeInTheDocument();
+    expect(screen.getAllByRole('button', { name: /^About / })).toHaveLength(1);
+  });
 });
 
 describe('<ControlPanel> renderers', () => {
@@ -205,7 +220,7 @@ describe('<ControlPanel> renderers', () => {
     expect(screen.queryByText('by-kind')).not.toBeInTheDocument();
   });
 
-  it('a lab renderer for the path beats the node\'s own .render', () => {
+  it("a lab renderer for the path beats the node's own .render", () => {
     const schema = resolveConfigSchema(
       f.schema({ tint: f.color('#ffffff').render(() => <span>by-node</span>) }),
       [],
@@ -252,7 +267,7 @@ describe('<ControlPanel> renderers', () => {
 
   it('a renderer returning null collapses the row', () => {
     const schema = resolveConfigSchema(f.schema({ tint: f.color('#ffffff') }), []);
-    const { container } = render(
+    render(
       <ControlPanel
         schema={schema}
         config={{ tint: '#ffffff' }}
@@ -260,7 +275,7 @@ describe('<ControlPanel> renderers', () => {
         renderers={{ color: () => null }}
       />,
     );
-    expect(container.querySelector('.lk-property-row')).toBeNull();
+    expect(screen.queryByText('Tint')).toBeNull();
   });
 });
 
@@ -274,7 +289,11 @@ describe('<ControlPanel> visibility and sections', () => {
       [],
     );
     const { rerender } = render(
-      <ControlPanel schema={schema} config={{ showGrid: true, cellSize: 20 }} setConfig={vi.fn()} />,
+      <ControlPanel
+        schema={schema}
+        config={{ showGrid: true, cellSize: 20 }}
+        setConfig={vi.fn()}
+      />,
     );
     expect(screen.getByLabelText('Cell size')).toBeInTheDocument();
     rerender(
@@ -302,11 +321,11 @@ describe('<ControlPanel> visibility and sections', () => {
       f.schema({ showGrid: f.boolean(true), seed: f.number(0).section('Advanced') }),
       [],
     );
-    const { container } = render(
+    render(
       <ControlPanel schema={schema} config={{ showGrid: true, seed: 0 }} setConfig={vi.fn()} />,
     );
     expect(screen.getByText('Advanced')).toBeInTheDocument();
-    const group = container.querySelector('.lk-property-group');
+    const group = screen.getByRole('heading', { name: 'Advanced' }).parentElement;
     expect(group).not.toBeNull();
     expect(group?.textContent).toContain('Seed');
     expect(group?.textContent).not.toContain('Show grid');
@@ -335,7 +354,10 @@ describe('<ControlPanel> built-in kind coverage', () => {
         schema={schemaWith(
           { kind: 'paint', name: 'Fill', description: '', default: null },
           {
-            kind: 'object', name: 'Stroke', description: '', default: {},
+            kind: 'object',
+            name: 'Stroke',
+            description: '',
+            default: {},
             children: { width: { kind: 'number', name: 'Width', description: '', default: 1 } },
           },
         )}

package/src/controls/ControlPanel.tsx

@@ -1,21 +1,21 @@
 import { isBuiltinToolPref } from '@weasel-js/core';
-import type { PrefLeaf } from '@weasel-js/ui';
-import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
-import { fromConfigFields } from '../config/fromConfigField';
-import type { ControlRenderer, ResolvedConfig } from '../config/types';
-import { isLeafVisible } from '../config/visible';
-import { PropertyGroup } from '../ui/properties/PropertyGroup';
 import {
   CheckboxRow,
   ColorRow,
   NumberRow,
+  type PrefLeaf,
+  PropertyGroup,
   PropertyList,
   PropertyRow,
   SelectRow,
+  SliderRow,
   TextRow,
   ToggleRow,
-  SliderRow,
-} from '../ui/properties/PropertyPanel';
+} from '@weasel-js/ui';
+import { type ReactNode, useEffect, useMemo, useRef, useState } from 'react';
+import { fromConfigFields } from '../config/fromConfigField';
+import type { ControlRenderer, ResolvedConfig } from '../config/types';
+import { isLeafVisible } from '../config/visible';
 import type { ConfigField } from './types';
 
 export interface ControlPanelProps<TC extends Record<string, unknown>> {
@@ -48,10 +48,7 @@ export function ControlPanel<TC extends Record<string, unknown>>({
   showHidden = false,
   className,
 }: ControlPanelProps<TC>) {
-  const resolved = useMemo(
-    () => schema ?? fromConfigFields(fields ?? []),
-    [schema, fields],
-  );
+  const resolved = useMemo(() => schema ?? fromConfigFields(fields ?? []), [schema, fields]);
 
   const paths = Object.keys(resolved.group.children);
   const sectioned = new Set(resolved.sections.flatMap((s) => s.paths));
@@ -114,14 +111,15 @@ function ControlRow<TC extends Record<string, unknown>>({
 
   // Most specific wins, and within a tier the lab's entry beats the
   // instrument's: controls[path] -> node .render -> controls[kind] -> built-in.
-  const custom =
-    renderers?.[path] ?? resolved.renderers[path] ?? renderers?.[leaf.kind];
+  const custom = renderers?.[path] ?? resolved.renderers[path] ?? renderers?.[leaf.kind];
   if (custom) return custom({ path, pref: leaf, value, setValue: write });
 
   const label = leaf.name;
+  const description = leaf.description;
   const read = <T,>(): T => value as T;
 
-  if (!isBuiltinToolPref(leaf)) return <UnwiredRow label={label} kind={leaf.kind} />;
+  if (!isBuiltinToolPref(leaf))
+    return <UnwiredRow label={label} kind={leaf.kind} description={description} />;
 
   switch (leaf.kind) {
     case 'number': {
@@ -137,6 +135,7 @@ function ControlRow<TC extends Record<string, unknown>>({
             max={max}
             step={step}
             onChange={write}
+            description={description}
           />
         );
       }
@@ -153,28 +152,52 @@ function ControlRow<TC extends Record<string, unknown>>({
           max={max}
           step={step}
           onChange={(n) => write(Math.min(hi, Math.max(lo, n)))}
+          description={description}
         />
       );
     }
     case 'boolean':
-      return <CheckboxRow label={label} value={read<boolean>()} onChange={write} />;
+      return (
+        <CheckboxRow
+          label={label}
+          value={read<boolean>()}
+          onChange={write}
+          description={description}
+        />
+      );
     case 'enum': {
       const options = extra<readonly { value: string; label: string }[]>(leaf, 'options') ?? [];
       const Row = extra<string>(leaf, 'control') === 'radio' ? ToggleRow : SelectRow;
       return (
-        <Row label={label} value={read<string>()} options={options} onChange={write} />
+        <Row
+          label={label}
+          value={read<string>()}
+          options={options}
+          onChange={write}
+          description={description}
+        />
       );
     }
     case 'string':
-      return <DebouncedTextRow leaf={leaf} label={label} value={read<string>()} write={write} />;
+      return (
+        <DebouncedTextRow
+          leaf={leaf}
+          label={label}
+          value={read<string>()}
+          write={write}
+          description={description}
+        />
+      );
     case 'color':
-      return <ColorRow label={label} value={read<string>()} onChange={write} />;
+      return (
+        <ColorRow label={label} value={read<string>()} onChange={write} description={description} />
+      );
     case 'paint':
     case 'object':
       // Declined: a hex swatch would write a solid over a gradient, and a flat
       // row would write one field into a half-built object. Override with
       // `render` to edit either.
-      return <UnwiredRow label={label} kind={leaf.kind} />;
+      return <UnwiredRow label={label} kind={leaf.kind} description={description} />;
     default: {
       // Not reachable while every built-in kind has an arm — and a new kind
       // that lacks one is a compile error here, never a blank row.
@@ -188,9 +211,17 @@ function ControlRow<TC extends Record<string, unknown>>({
 
 /** A leaf this panel has no control for is named rather than dropped: a silent
  *  gap reads as "this control does not exist". */
-function UnwiredRow({ label, kind }: { label: string; kind: string }) {
+function UnwiredRow({
+  label,
+  kind,
+  description,
+}: {
+  label: string;
+  kind: string;
+  description?: string;
+}) {
   return (
-    <PropertyRow label={label}>
+    <PropertyRow label={label} description={description}>
       <span className="lk-control-panel__unknown">no control for “{kind}”</span>
     </PropertyRow>
   );
@@ -204,11 +235,13 @@ function DebouncedTextRow({
   label,
   value,
   write,
+  description,
 }: {
   leaf: PrefLeaf;
   label: string;
   value: string;
   write: (value: unknown) => void;
+  description?: string;
 }) {
   const debounceMs = extra<number>(leaf, 'debounceMs') ?? 150;
   const [local, setLocal] = useState(value);
@@ -232,6 +265,7 @@ function DebouncedTextRow({
   return (
     <TextRow
       label={label}
+      description={description}
       value={local}
       placeholder={extra<string>(leaf, 'placeholder')}
       maxLength={extra<number>(leaf, 'maxLength')}

package/src/dragdrop/index.ts

@@ -1 +1,12 @@
 export type { DragDropCapability, DragFeedback, PaletteItem } from '../instrument/types';
+export type {
+  DragOverlayProps,
+  DragState,
+  UseDragDropArgs,
+  UseDragDropResult,
+} from './DragDropRuntime';
+export { DragOverlay, useDragDrop } from './DragDropRuntime';
+export type { DragGhostProps } from './DragGhost';
+export { DragGhost } from './DragGhost';
+export type { PaletteProps } from './Palette';
+export { Palette } from './Palette';

package/src/index.ts

@@ -1,3 +1,52 @@
+// The property-panel family and LayerStack live in `@weasel-js/ui` now; labkit
+// re-exports them so existing `@weasel-js/labkit` imports keep resolving. Named,
+// not `export *` — a star re-export of an external package emits no binding in
+// the bundle.
+export type {
+  CheckboxRowProps,
+  ColorRowProps,
+  CurveFieldProps,
+  CurveMark,
+  EffectCardListItem,
+  EffectCardListProps,
+  EffectCardProps,
+  LayerStackItem,
+  LayerStackProps,
+  NumberRowProps,
+  PropertyGroupProps,
+  PropertyListPack,
+  PropertyListProps,
+  PropertyOption,
+  PropertyPanelProps,
+  PropertyRowLayout,
+  PropertyRowProps,
+  PropertyRowVariant,
+  PropertySpanProps,
+  SelectRowProps,
+  SliderRowProps,
+  SubpanelProps,
+  TextRowProps,
+  ToggleRowProps,
+} from '@weasel-js/ui';
+export {
+  CheckboxRow,
+  ColorRow,
+  CurveField,
+  EffectCard,
+  EffectCardList,
+  LayerStack,
+  NumberRow,
+  PropertyGroup,
+  PropertyList,
+  PropertyPanel,
+  PropertyRow,
+  PropertySpan,
+  SelectRow,
+  SliderRow,
+  Subpanel,
+  TextRow,
+  ToggleRow,
+} from '@weasel-js/ui';
 export type { CanvasLayerDescriptor, CanvasStackContextValue, CanvasStackProps } from './canvas';
 export { CanvasStack, CanvasStackContext, screenToWorld, worldToScreen } from './canvas';
 export type { OrbitHandlers, OrbitView, UseOrbitOptions, Vec3 } from './canvas/useOrbit';
@@ -105,7 +154,5 @@ export * from './surface';
 export { interstellarTheme } from './theme/interstellar';
 export type { ToolCapability, TrialTool } from './tools/types';
 export * from './trial';
-export * from './ui/layers';
-export * from './ui/properties';
 export type { EventBus, EventListener } from './undo';
 export { clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './undo';

package/src/lab/index.ts

@@ -6,5 +6,5 @@ export type { LabPaletteProps } from './LabPalette';
 export { LabPalette } from './LabPalette';
 export type { LabShellProps } from './LabShell';
 export { LabShell } from './LabShell';
-export type { WorkspaceProps } from './Workspace';
+export type { TrialLayout, WorkspaceProps } from './Workspace';
 export { Workspace } from './Workspace';

package/src/layers/AGENTS.md

@@ -46,7 +46,7 @@ This is intended for legend/HUD layers that should never be toggled off. Visibil
 
 ## Drag handle customization
 
-The drag handle is a button with class `lk-layer-list__handle` holding `<DragHandleGlyph>`, the same grip `LayerStack` uses. Its padding is transparent and cancelled by an equal negative margin, so the grab target is larger than the drawn dots without widening the row. Row pitch — height plus row gap — is measured from the DOM when a drag starts, so restyling the row does not skew drag distance. It used to be a hardcoded `28`, which had already drifted from the rendered height by the time it was found.
+The drag handle is a button with class `lk-layer-list__handle` holding `<DragHandleGlyph>` (from `@weasel-js/ui`), the same grip `LayerStack` uses. Its padding is transparent and cancelled by an equal negative margin, so the grab target is larger than the drawn dots without widening the row. Row pitch — height plus row gap — is measured from the DOM when a drag starts, so restyling the row does not skew drag distance. It used to be a hardcoded `28`, which had already drifted from the rendered height by the time it was found.
 
 Pointer capture is acquired on `pointerdown` and released on `pointerup`, so dragging works across the document without requiring window-level listeners.
 

package/src/layers/LayerList.tsx

@@ -1,6 +1,6 @@
 import { type PointerEvent, useRef, useState } from 'react';
 import type { LayerDescriptor } from '../instrument/types';
-import { DragHandleGlyph } from '../primitives/DragHandleGlyph';
+import { DragHandleGlyph } from '../passthrough/weasel-ui';
 
 /** Props for `<LayerList>`. */
 export interface LayerListProps {

package/src/passthrough/weasel-ui.ts

@@ -24,6 +24,7 @@ export {
   type BadgeVariant,
   type BoundsCtx,
   type BuiltInEdgeName,
+  type BuiltinPref,
   Button,
   type ButtonProps,
   type ButtonSize,
@@ -47,6 +48,8 @@ export {
   type DataGridProps,
   Dialog,
   type DialogProps,
+  DragHandleGlyph,
+  type DragHandleGlyphProps,
   detectPlatform,
   dlog,
   EDGE_PROFILES,
@@ -68,6 +71,7 @@ export {
   type InterpolationMode,
   inferKeycapKind,
   isDebugEnabled,
+  isPrefLeaf,
   KeyCap,
   type KeyCapProps,
   type KeyCapVariant,
@@ -79,6 +83,9 @@ export {
   keySpecFromKey,
   keySpecsFromMods,
   type LayerListItem,
+  LayerStack,
+  type LayerStackItem,
+  type LayerStackProps,
   type LogicalMod,
   type LogicalModSpec,
   MINUS_SIGN,
@@ -100,22 +107,6 @@ export {
   Powerline,
   type PowerlineProps,
   type PowerlineSegment,
-  paintGradientTrack,
-  Radio,
-  RadioGroup,
-  type RadioGroupProps,
-  type RadioProps,
-  RangeSlider,
-  type RangeSliderProps,
-  type ReorderDragHandlers,
-  type ReorderDragState,
-  type RovingItem,
-  type RovingTabIndex,
-  Select,
-  SelectItem,
-  type SelectItemProps,
-  type BuiltinPref,
-  isPrefLeaf,
   type PrefBoolean,
   type PrefBooleanControl,
   type PrefColor,
@@ -135,8 +126,21 @@ export {
   type PrefRenderer,
   type PrefString,
   type PrefStringControl,
+  paintGradientTrack,
   prefValueAtPath,
-  visiblePrefSubtree,
+  Radio,
+  RadioGroup,
+  type RadioGroupProps,
+  type RadioProps,
+  RangeSlider,
+  type RangeSliderProps,
+  type ReorderDragHandlers,
+  type ReorderDragState,
+  type RovingItem,
+  type RovingTabIndex,
+  Select,
+  SelectItem,
+  type SelectItemProps,
   type SelectOption,
   type SelectProps,
   Sidebar,
@@ -174,4 +178,5 @@ export {
   type UseRovingTabIndexOptions,
   useReorderDragList,
   useRovingTabIndex,
+  visiblePrefSubtree,
 } from '@weasel-js/ui';

package/src/styles.less

@@ -20,7 +20,3 @@
 @import './layers/LayerList.less';
 @import './dragdrop/Palette.less';
 @import './dragdrop/DragGhost.less';
-@import './ui/properties/PropertyPanel.less';
-@import './ui/properties/PropertyGroup.less';
-@import './ui/properties/CurveField.less';
-@import './ui/layers/LayerStack.less';

package/src/theme/Interstellar.stories.tsx

@@ -8,7 +8,7 @@ import {
   PropertyPanel,
   SliderRow,
   TextRow,
-} from '../ui/properties/PropertyPanel';
+} from '@weasel-js/ui';
 import './Interstellar.stories.less';
 
 const meta: Meta = {