@weasel-js/labkit 1.5.1 → 1.6.0

package/src/lab/LabHeader.tsx

@@ -1,22 +1,7 @@
-import { AddIcon, ModeAutoIcon, ModeDarkIcon, ModeLightIcon } from '@weasel-js/ui';
-import { MenuButton, ToggleBar } from '../passthrough/weasel-ui';
-import type { LabMode } from '../state/types';
+import { AddIcon } from '@weasel-js/ui';
+import { ColorModeControl, MenuButton } from '../passthrough/weasel-ui';
 import { useLabContext } from './LabContext';
 
-// The glyph is the segment's content and the word is its accessible name, so
-// the bar stays a three-way radiogroup announcing Auto / Light / Dark.
-const MODES = [
-  { value: 'auto' as LabMode, label: 'Auto', glyph: <ModeAutoIcon size={14} /> },
-  { value: 'light' as LabMode, label: 'Light', glyph: <ModeLightIcon size={14} /> },
-  { value: 'dark' as LabMode, label: 'Dark', glyph: <ModeDarkIcon size={14} /> },
-];
-
-const MODE_ITEMS = MODES.map(({ value, label, glyph }) => ({
-  value,
-  label: glyph,
-  ariaLabel: label,
-}));
-
 /** The controls `<Lab>` puts in its header: add a trial, and choose the color
  *  mode. Both drive `LabContext`, which carried them with no UI at all — so
  *  every consumer rebuilt these two. Rendered before a consumer's own header
@@ -45,15 +30,11 @@ export function LabHeader({ addTrial = true }: { addTrial?: boolean }) {
         />
       )}
 
-      <ToggleBar
+      <ColorModeControl
         className="lk-lab-header__mode"
-        ariaLabel="Color mode"
         variant="flat"
-        items={MODE_ITEMS}
         value={lab.mode}
-        onChange={(next) => {
-          if (next) lab.setMode(next);
-        }}
+        onChange={lab.setMode}
       />
     </>
   );

package/src/lab/LabRoot.tsx

@@ -1,8 +1,7 @@
-import { ThemeProvider, useThemeOptional } from '@weasel-js/theme/react';
+import { ThemeProvider, useResolvedColorMode, useThemeOptional } from '@weasel-js/theme/react';
 import type { ReactNode } from 'react';
 import type { LabMode } from '../state/types';
 import { interstellarTheme } from '../theme/interstellar';
-import { useResolvedMode } from './useSystemMode';
 
 /** Props for `<LabRoot>`. */
 export interface LabRootProps {
@@ -24,7 +23,7 @@ export interface LabRootProps {
  *  Pair it with `import '@weasel-js/labkit/styles.css'`, which is what defines
  *  the rules this element scopes. */
 export function LabRoot({ children, mode = 'auto', className }: LabRootProps) {
-  const resolved = useResolvedMode(mode);
+  const resolved = useResolvedColorMode(mode);
   const outer = useThemeOptional();
 
   // Overlays portal here rather than to the themed wrapper above: `.lk-root`

package/src/lab/LabShell.less

@@ -64,7 +64,6 @@
   min-height: 0;
   min-width: 0;
   overflow: auto;
-  padding: var(--lk-workspace-pad);
 }
 
 .lk-lab__body {

package/src/lab/LabShell.stories.tsx

@@ -86,3 +86,18 @@ export const HeaderControlsLineUp: Story = {
     await expect(middles).toEqual(middles.map(() => middles[0]));
   },
 };
+
+// One document serving its pages from the hash: the open route is the one the
+// switcher marks, and each entry is a link to its fragment.
+export const HashRoutedPages: Story = {
+  args: {
+    title: 'Registry',
+    pages: [
+      { href: '/app/', label: 'App' },
+      { href: '#/dev/tools', label: 'Tools' },
+      { href: '#/dev/registry', label: 'Registry' },
+    ],
+    path: '/app/#/dev/registry?entry=rect',
+    children: <p>Open the title to see the current route marked.</p>,
+  },
+};

package/src/lab/LabShell.test.tsx

@@ -47,6 +47,24 @@ describe('LabShell', () => {
     expect(container.querySelector('.lk-root')?.hasAttribute('data-wzl-portal-host')).toBe(true);
   });
 
+  test('holds the document title while mounted when asked to', () => {
+    document.title = 'before';
+    const { unmount } = render(
+      <LabShell title="t" documentTitle="Page title">
+        x
+      </LabShell>,
+    );
+    expect(document.title).toBe('Page title');
+    unmount();
+    expect(document.title).toBe('before');
+  });
+
+  test('leaves the document title alone by default', () => {
+    document.title = 'before';
+    render(<LabShell title="t">x</LabShell>);
+    expect(document.title).toBe('before');
+  });
+
   test('always applies lk-root class', () => {
     const { container } = render(<LabShell title="t">x</LabShell>);
     expect(container.querySelector('.lk-root')).not.toBeNull();

package/src/lab/LabShell.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import { type ReactNode, useEffect } from 'react';
 import type { LabMode } from '../state/types';
 import { LabRoot } from './LabRoot';
 import type { LabPage } from './LabSwitcher';
@@ -20,6 +20,9 @@ export interface LabShellProps {
   /** The path the switcher reads to mark the open page. Defaults to the
    *  current location. */
   path?: string;
+  /** Set as `document.title` while the shell is mounted, and the previous
+   *  title restored after. Omitted, the document's title is left alone. */
+  documentTitle?: string;
 }
 
 /** Page frame for a lab: a titled header, a body, and an optional footer,
@@ -33,7 +36,17 @@ export function LabShell({
   mode = 'auto',
   pages,
   path,
+  documentTitle,
 }: LabShellProps) {
+  useEffect(() => {
+    if (documentTitle === undefined) return;
+    const previous = document.title;
+    document.title = documentTitle;
+    return () => {
+      document.title = previous;
+    };
+  }, [documentTitle]);
+
   return (
     <LabRoot mode={mode} className="lk-shell">
       <header className="lk-shell-header">

package/src/lab/LabSwitcher.less

@@ -26,7 +26,7 @@
   // hyphen and the control becomes three ragged lines with a caret adrift.
   white-space: nowrap;
 
-  &:hover { color: var(--wzl-accent); }
+  &:hover { color: var(--wzl-accent-fg); }
 
   &:focus-visible {
     outline: 2px solid var(--wzl-focus-ring, currentColor);

package/src/lab/LabSwitcher.test.tsx

@@ -9,6 +9,8 @@ const PAGES = [
   { href: '/ingest', label: 'Ingestion' },
 ];
 
+const open2 = (name: string) =>
+  fireEvent.click(screen.getByRole('button', { name: new RegExp(name) }));
 const open = () => fireEvent.click(screen.getByRole('button', { name: /corpus stats/ }));
 
 describe('currentPage', () => {
@@ -27,6 +29,45 @@ describe('currentPage', () => {
   it('reports -1 for a page that is not one of them', () => {
     expect(currentPage('/bench', PAGES)).toBe(-1);
   });
+
+  // One document serving its pages from the hash: every href shares a path, so
+  // only the fragment can tell them apart.
+  const ROUTES = [
+    { href: '/app/', label: 'App' },
+    { href: '#/dev/tools', label: 'Tools' },
+    { href: '#/dev/registry', label: 'Registry' },
+  ];
+
+  it('tells hash routes on one document apart', () => {
+    expect(currentPage('/app/#/dev/registry', ROUTES)).toBe(2);
+    expect(currentPage('/app/#/dev/tools', ROUTES)).toBe(1);
+  });
+
+  it('matches a hash route through its own query and sub-routes', () => {
+    expect(currentPage('/app/#/dev/tools?bundle=minimal', ROUTES)).toBe(1);
+    expect(currentPage('/app/#/dev/tools/', ROUTES)).toBe(1);
+    expect(currentPage('/app/#/dev/registry/tool/rect', ROUTES)).toBe(2);
+    expect(currentPage('/app/#/dev/toolsets', ROUTES)).toBe(0);
+  });
+
+  it('falls back to the page without a hash when no route matches', () => {
+    expect(currentPage('/app/', ROUTES)).toBe(0);
+    expect(currentPage('/app/#/elsewhere', ROUTES)).toBe(0);
+  });
+
+  it('reads the hash off the current location by default', () => {
+    window.history.replaceState(null, '', '/app/#/dev/registry');
+    try {
+      render(<LabSwitcher title="Registry" pages={ROUTES} />);
+      open2('Registry');
+      expect(screen.getByRole('menuitem', { name: 'Registry' })).toHaveAttribute(
+        'aria-current',
+        'page',
+      );
+    } finally {
+      window.history.replaceState(null, '', '/');
+    }
+  });
 });
 
 describe('<LabSwitcher>', () => {

package/src/lab/LabSwitcher.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useId, useRef, useState } from 'react';
 
 /** One page in a project's set of labs. */
 export interface LabPage {
-  /** The page's own URL, and how the switcher knows which page is open. */
+  /** The page's own URL, and how the switcher knows which page is open. A
+   *  hash route (`#/dev/tools`) names a page on the current document. */
   href: string;
   label: string;
 }
@@ -18,18 +19,39 @@ export interface LabSwitcherProps {
   className?: string;
 }
 
+/** A URL split into the document it names and the hash route on it, each
+ *  without its query, trailing slash or `.html`. */
+function locate(url: string): { doc: string; route: string } {
+  const hash = url.indexOf('#');
+  const trim = (part: string) => part.replace(/\?.*$/, '').replace(/\/$/, '');
+  return {
+    doc: trim(hash < 0 ? url : url.slice(0, hash)).replace(/\.html$/, ''),
+    route: hash < 0 ? '' : trim(url.slice(hash + 1)),
+  };
+}
+
 /** Which of `pages` a path is on, or -1.
  *
  *  Matched on the end of the path so a query string, a trailing slash or a
  *  leftover `.html` cannot lose it: a project whose dev server maps `/stats`
  *  to `stats.html` serves both spellings, and a bookmark from before the URLs
- *  lost their extension still resolves to the same page. */
+ *  lost their extension still resolves to the same page.
+ *
+ *  A page whose `href` carries a hash is a route on a single document and wins
+ *  when the path's hash is that route or one under it. A page without one
+ *  ignores the hash, so an in-page anchor does not lose it. */
 export function currentPage(path: string, pages: readonly LabPage[]): number {
-  const here = path
-    .replace(/[?#].*$/, '')
-    .replace(/\/$/, '')
-    .replace(/\.html$/, '');
-  return pages.findIndex((p) => here.endsWith(p.href.replace(/\.html$/, '')));
+  const here = locate(path);
+  const onDoc = (doc: string) => here.doc.endsWith(doc);
+  const routed = pages.findIndex((p) => {
+    if (!p.href.includes('#')) return false;
+    const page = locate(p.href);
+    return (
+      onDoc(page.doc) && (here.route === page.route || here.route.startsWith(`${page.route}/`))
+    );
+  });
+  if (routed >= 0) return routed;
+  return pages.findIndex((p) => !p.href.includes('#') && onDoc(locate(p.href).doc));
 }
 
 /** A project's lab title, doubling as the way to reach its other labs.
@@ -47,7 +69,7 @@ export function LabSwitcher({ title, pages, path, className }: LabSwitcherProps)
   const root = useRef<HTMLDivElement>(null);
   const menuId = useId();
   const here = currentPage(
-    path ?? (typeof window === 'undefined' ? '' : window.location.pathname),
+    path ?? (typeof window === 'undefined' ? '' : window.location.pathname + window.location.hash),
     pages,
   );
 

package/src/lab/index.ts

@@ -1,5 +1,6 @@
 export type { LabProps } from './Lab';
 export { Lab } from './Lab';
+export { LabBoundary, type LabBoundaryProps } from './LabBoundary';
 export type { LabContextValue } from './LabContext';
 export { LabContext, useLabContext } from './LabContext';
 export type { LabPaletteProps } from './LabPalette';

package/src/layers/AGENTS.md

@@ -1,33 +1,11 @@
 # Layers — Agent Guide
 
-The `src/layers/` directory implements the `<LayerList>` UI used by the `layers` instrument capability.
+`src/layers/` re-exports `<LayerList>` from `@weasel-js/ui`, along with the
+`layers` capability types. The component itself — rows, cards, nesting,
+selection, visibility, reorder — is documented at its source in
+`packages/ui/src/components/LayerList/`.
 
-## Files
-
-| File | Role |
-|---|---|
-| `LayerList.tsx` | Layer toggle/reorder list, flat or nested (sidebar widget) |
-| `LayerList.less` | Row styling, drag handle, pinned-row variant, subtree indent |
-| `LayerList.stories.tsx` | Flat and nested renderings |
-
-## Props
-
-```ts
-interface LayerListProps {
-  layers: LayerTreeNode[];                      // LayerDescriptor + { children?, defaultCollapsed? }
-  visibility: Record<string, boolean>;          // missing key → visible
-  onReorder: (newOrder: LayerTreeNode[]) => void;
-  onToggle: (id: string, visible: boolean) => void;
-  collapsedIds?: readonly string[];             // supplying it makes collapse controlled
-  onCollapsedChange?: (ids: string[]) => void;
-  className?: string;
-}
-```
-
-`LayerDescriptor` lives in `src/instrument/types.ts`; `LayerTreeNode` extends it
-in `LayerList.tsx`, so a plain `LayerDescriptor[]` is still a valid `layers`.
-
-## How it integrates
+## How the capability uses it
 
 The instrument declares layer ids:
 
@@ -35,53 +13,19 @@ The instrument declares layer ids:
 layers: { ids: ['grid', 'plants'] }
 ```
 
-`Trial.tsx` converts each id into a `LayerDescriptor` (with `label === id` by default) and tracks `visibility` and a derived `layerOrder` in local state. The order produced by `onReorder` is then applied to `instrument.canvas.layers` before they're passed to `<CanvasStack>`.
-
-There is no transitive coupling between `layers.ids` and `canvas.layers[].id` — the trial assumes the ids match. If you declare a layer in `canvas` that isn't in `layers.ids`, it stays in default order and is always visible.
-
-## `alwaysOn` semantics
-
-Setting `alwaysOn: true` on a `LayerDescriptor` does two things:
-
-1. The row renders with a 🔒 badge instead of a drag handle and visibility checkbox.
-2. The row is excluded from reorder operations — pinned rows always sort to the bottom of the rendered list.
-
-This is intended for legend/HUD layers that should never be toggled off. Visibility for pinned rows is **not** read from the `visibility` prop; they always render.
-
-## Nesting
-
-A node with `children` renders an expandable subtree. The expand control is
-`<Disclosure>` from `@weasel-js/ui` — the same twisty every other collapsible
-surface uses.
-
-Reordering is scoped to siblings: a drag moves a row within its own parent's
-child list and never reparents it. `onReorder` still receives the whole tree,
-with only that sibling group's order changed.
-
-The twisty column appears only when some node in the tree has children — a flat
-list renders exactly the rows it always did. Within a tree, childless rows get
-`.lk-layer-list__twisty-gap` so labels stay aligned down a level.
-
-Collapse is uncontrolled by default, seeded once from each node's
-`defaultCollapsed`. Pass `collapsedIds` to own it; `onCollapsedChange` fires
-either way.
-
-## Drag handle customization
-
-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.
-
-## Empty state
-
-If `layers.length === 0`, renders `.lk-layer-list__empty` with the text "No layers". Trial already guards this case (`layerDescriptors.length > 0`) so the empty state is rare in practice.
+`Trial.tsx` turns each id into a `LayerDescriptor` (`label === id` unless the
+entry is a descriptor), keeps `visibility` and `layerOrder` in local state, and
+builds the list's items from them in the order the canvas draws. The order a
+drag produces is applied to `instrument.canvas.layers` before they reach
+`<CanvasStack>`, and each toggle and reorder emits `layers.toggle` /
+`layers.reorder` on the bus.
 
-## When to fork
+`layers.ids` and `canvas.layers[].id` are assumed to match. A canvas layer not
+in `layers.ids` keeps its default order and is always visible.
 
-Fork this component if you need:
-- Multi-select reorder (current implementation is single-row)
-- Right-click context menu
-- Reparenting by drag (nesting renders, but a drag stays within one parent)
-- Solo/mute UI common in DAW-style apps
+## `alwaysOn`
 
-It is self-contained: `LayerDescriptor` from instrument types and `Disclosure`/`DragHandleGlyph` from `@weasel-js/ui`.
+A descriptor with `alwaysOn: true` becomes a `locked` item, pinned below the
+rest: it shows a lock in place of the grip and has no visibility checkbox,
+cannot be dragged, and no drag can cross it. It always renders, whatever
+`visibility` says. Intended for legend and HUD layers.

package/src/layers/index.ts

@@ -1,3 +1,5 @@
+// LayerList lives in `@weasel-js/ui`. Named, not `export *` — a star re-export
+// of an external package emits no binding in the bundle.
+export type { LayerListItem, LayerListProps, LayerMove } from '@weasel-js/ui';
+export { LayerList, moveLayers } from '@weasel-js/ui';
 export type { LayerCapability, LayerDescriptor } from '../instrument/types';
-export type { LayerListProps, LayerTreeNode } from './LayerList';
-export { LayerList } from './LayerList';

package/src/passthrough/weasel-ui.ts

@@ -8,11 +8,6 @@
 export {
   ActionBar,
   type ActionBarProps,
-  ActionsBar,
-  type ActionsBarItem,
-  type ActionsBarProps,
-  type ActionsBarSize,
-  type ActionsBarVariant,
   type AddPointMode,
   type AnchorRenderProps,
   type AsyncOption,
@@ -22,12 +17,17 @@ export {
   type BadgeProps,
   type BadgeShape,
   type BadgeSize,
-  type BadgeTone,
+  type BadgeStatus,
   type BadgeVariant,
   type BoundsCtx,
   type BuiltInEdgeName,
   type BuiltinPref,
   Button,
+  ButtonBar,
+  type ButtonBarItem,
+  type ButtonBarProps,
+  type ButtonBarSize,
+  type ButtonBarVariant,
   type ButtonProps,
   type ButtonSize,
   type ButtonVariant,
@@ -38,6 +38,8 @@ export {
   type CheckboxProps,
   type ChromaCurve,
   type ChromaCurvePoint,
+  ColorModeControl,
+  type ColorModeControlProps,
   ComboBox,
   type ComboBoxCommit,
   type ComboBoxFilter,
@@ -56,10 +58,13 @@ export {
   Dialog,
   type DialogProps,
   Disclosure,
-  type DisclosureDirection,
+  DisclosureMark,
+  type DisclosureMarkProps,
   type DisclosureProps,
   DisclosureRow,
   type DisclosureRowProps,
+  DragGhost,
+  type DragGhostProps,
   DragHandleGlyph,
   type DragHandleGlyphProps,
   detectPlatform,
@@ -98,16 +103,20 @@ export {
   keyGlyph,
   keySpecFromKey,
   keySpecsFromMods,
+  keySpecsFromShortcut,
+  LayerList,
   type LayerListItem,
-  LayerStack,
-  type LayerStackItem,
-  type LayerStackProps,
+  type LayerListProps,
+  type LayerMove,
+  ListEditor,
+  type ListEditorProps,
   type LogicalMod,
   type LogicalModSpec,
   MenuButton,
   type MenuButtonItem,
   type MenuButtonProps,
   MINUS_SIGN,
+  moveLayers,
   NumberField,
   type NumberFieldProps,
   OptionsBar,
@@ -145,6 +154,11 @@ export {
   type PrefRenderer,
   type PrefString,
   type PrefStringControl,
+  PrefsDialog,
+  type PrefsDialogProps,
+  PrefsForm,
+  type PrefsFormProps,
+  type PrefsLayout,
   paintGradientTrack,
   prefValueAtPath,
   Radio,
@@ -155,6 +169,7 @@ export {
   type RangeSliderProps,
   type ReorderDragHandlers,
   type ReorderDragState,
+  type ReorderGhost,
   type RovingItem,
   type RovingTabIndex,
   Select,

package/src/primitives/FpsMeter.less

@@ -1,6 +1,7 @@
 .lk-fps-meter {
   display: inline-flex;
   align-items: center;
+  white-space: nowrap;
   gap: var(--wzl-space-xs);
   font-family: var(--wzl-font-mono);
   font-size: var(--wzl-font-size-sm);
@@ -9,6 +10,10 @@
 
 .lk-fps-meter-value {
   color: var(--wzl-fg);
-  min-width: 2.5ch;
+  /* Sized for the widest rate it can hold rather than the one it holds now:
+     a 240Hz display reads three digits, and a readout that grows into them
+     pushes whatever shares its row. */
+  min-width: 3ch;
+  font-variant-numeric: tabular-nums;
   text-align: right;
 }

package/src/primitives/FpsMeter.test.tsx

@@ -9,9 +9,17 @@ describe('FpsMeter', () => {
 
   test('renders an FPS label', () => {
     render(<FpsMeter />);
-    expect(screen.getByText(/fps/i)).toBeInTheDocument();
+    expect(screen.getByText('FPS')).toBeInTheDocument();
   });
 
+  /* The label and the rate are separate elements so the rate can hold a fixed
+     width; a text query spanning both would go back to matching one box. */
+  const rate = (): HTMLElement => {
+    const el = document.querySelector('.lk-fps-meter-value');
+    if (!el) throw new Error('no rate readout');
+    return el as HTMLElement;
+  };
+
   test('uses lk-fps-meter class', () => {
     const { container } = render(<FpsMeter />);
     expect((container.firstChild as HTMLElement).className).toBe('lk-fps-meter');
@@ -31,7 +39,7 @@ describe('FpsMeter', () => {
       raf?.(16.67);
       raf?.(33.34);
     });
-    expect(screen.getByText(/FPS\s+\d+/)).toBeInTheDocument();
+    expect(rate().textContent).toMatch(/^\d+$/);
 
     vi.unstubAllGlobals();
   });
@@ -59,7 +67,7 @@ describe('FpsMeter', () => {
       run(16.67);
       run(33.34);
     });
-    const before = screen.getByText(/FPS\s+\d+/).textContent;
+    const before = rate().textContent;
 
     // An hour hidden. The frame that lands on resume is not a 60-minute frame,
     // and must not enter the rolling average as one.
@@ -74,7 +82,7 @@ describe('FpsMeter', () => {
       run(3_600_016.67);
     });
 
-    expect(screen.getByText(/FPS\s+\d+/).textContent).toBe(before);
+    expect(rate().textContent).toBe(before);
 
     setHidden(false);
     vi.unstubAllGlobals();

package/src/primitives/FpsMeter.tsx

@@ -42,7 +42,12 @@ export function FpsMeter() {
 
   return (
     <div className="lk-fps-meter" ref={rootRef}>
-      <span className="lk-fps-meter-value">FPS {fps}</span>
+      <span className="lk-fps-meter-label">FPS</span>
+      {/* The number is its own cell because it is the only part that changes:
+          in one box with the label, every digit it gains or loses resizes the
+          readout, and the status bar it sits in wraps to a second line and
+          back — which in a small trial resizes the window. */}
+      <span className="lk-fps-meter-value">{fps}</span>
     </div>
   );
 }

package/src/primitives/JobProgress.stories.tsx

@@ -13,7 +13,7 @@ const base: JobHandle = {
 };
 
 const meta: Meta<typeof JobProgress> = {
-  title: 'labkit/primitives/JobProgress',
+  title: 'labkit/Primitives/JobProgress',
   component: JobProgress,
 };
 export default meta;

package/src/primitives/StatusBar.less

@@ -1,6 +1,10 @@
 .lk-status-bar {
   display: flex;
   align-items: center;
+  /* One line, always. A bar that grows a second line takes it from the canvas
+     above it, and a readout that changes width would do that on and off as it
+     ticks. Too narrow for its contents clips them instead. */
+  overflow: hidden;
   gap: var(--wzl-space-md);
   padding: var(--wzl-space-xs) var(--wzl-space-sm);
   background: var(--wzl-surface-raised);
@@ -13,6 +17,8 @@
 .lk-status-bar-section {
   display: inline-flex;
   align-items: center;
+  white-space: nowrap;
+  min-width: 0;
   gap: var(--wzl-space-xs);
   padding: 0 var(--wzl-space-xs);
   border-right: 1px solid var(--wzl-line-subtle);

package/src/primitives/index.ts

@@ -7,8 +7,6 @@ export type { LegendEntry, LegendMark, LegendProps } from './Legend';
 export { Legend } from './Legend';
 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';