@weasel-js/labkit 1.4.4 → 1.5.1

package/src/lab/LabShell.less

@@ -2,7 +2,11 @@
   display: flex;
   flex-direction: column;
   width: 100%;
+  // Fills a container of definite height. Where the container has none, the
+  // percentage drops out and the shell takes the viewport's height instead.
   height: 100vh;
+  height: 100dvh;
+  max-height: 100%;
   background: var(--wzl-surface);
 }
 
@@ -35,42 +39,100 @@
 .lk-shell-header-actions {
   margin-left: auto;
   display: flex;
-  // A flex container reports its first item's baseline, so this is what
-  // carries the row's baseline up to the header.
-  align-items: baseline;
+  // Every control here runs at the one control height and shares a middle.
+  // The row still hands the header its first item's baseline, which is what
+  // lines the controls' labels up with the title.
+  align-items: center;
   gap: var(--wzl-space-sm);
 }
 
+// A toolbar dropped into the header is a run of header controls, not a strip of
+// its own: it takes the header's control height rather than the compact one
+// trial toolbars use, and none of the strip's box.
+.lk-shell-header-actions .lk-toolbar {
+  --wzl-control-h: inherit;
+  min-height: 0;
+  padding: 0;
+  background: none;
+  border: 0;
+}
+
 .lk-shell-body {
+  display: flex;
+  flex-direction: column;
   flex: 1;
   min-height: 0;
+  min-width: 0;
   overflow: auto;
   padding: var(--lk-workspace-pad);
 }
 
-// `.lk-shell-body` is a block container, so `flex: 1` here resolves to nothing
-// and the workspace's `height: 100%` collapses to zero.
 .lk-lab__body {
   display: flex;
-  height: 100%;
+  flex: 1;
   min-height: 0;
   position: relative;
 
-  > .lk-workspace {
+  > .lk-workspace,
+  > .lk-workspace-host {
+    min-width: 0;
+  }
+}
+
+.lk-lab__panes {
+  flex: 1;
+  min-width: 0;
+}
+
+.lk-lab__sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  background: var(--wzl-surface);
+  border-right: 1px solid var(--wzl-border);
+}
+
+.lk-lab__aside {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+  background: var(--wzl-surface);
+  border-left: 1px solid var(--wzl-border);
+}
+
+.lk-lab__main {
+  display: flex;
+  min-width: 0;
+  height: 100%;
+
+  > .lk-workspace,
+  > .lk-workspace-host {
+    flex: 1;
     min-width: 0;
   }
 }
 
-// The lab's one shared drawing buffer. Over the trials, because a tile's marks
-// annotate the instrument's own DOM; under the viewport chrome, whose z-overlay
-// outranks it; and inert, because every tile takes input from its own box.
+// The lab's two shared drawing buffers, stacked around the trials: marks that
+// annotate an instrument go over its DOM, an opaque renderer goes under it so
+// the pane can still hold a label or a control. Both sit under the viewport
+// chrome, whose z-overlay outranks them, and both are inert — every tile takes
+// input from its own box.
 .lk-lab__surface {
   position: absolute;
   inset: 0;
-  z-index: 1;
   pointer-events: none;
 }
 
+.lk-lab__surface--under {
+  z-index: 0;
+}
+
+.lk-lab__surface--over {
+  z-index: 1;
+}
+
 .lk-shell-footer {
   border-top: 1px solid var(--wzl-border);
   padding: var(--wzl-space-xs) var(--wzl-space-md);
@@ -98,10 +160,6 @@
 // against a shrink-to-fit header row it swallows the slack, which pushed the
 // consumer's own header content down to min-content and wrapped the row to
 // three lines. See the `.lk-root` prefix convention in theme/base.less.
-.lk-root .lk-lab-header__add-select {
-  width: 160px;
-}
-
 // The mode toggle is a preference, not a primary action: it sits quiet until
 // the pointer is on it.
 .lk-lab-header__mode {

package/src/lab/LabShell.stories.tsx

@@ -1,4 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
+import type { Meta, StoryObj } from '@weasel-js/forge';
+import { expect, within } from '@weasel-js/forge/play';
+import { Select, ToggleBar } from '../passthrough/weasel-ui';
+import { Toolbar } from '../primitives/Toolbar';
 import { LabShell } from './LabShell';
 
 const meta: Meta<typeof LabShell> = {
@@ -37,3 +40,49 @@ export const WithFooter: Story = {
     footer: <span>Status: ready</span>,
   },
 };
+
+// jsdom has no layout, so this runs in the browser story projects.
+export const HeaderControlsLineUp: Story = {
+  args: {
+    title: 'My Lab',
+    header: (
+      <>
+        <button type="button">Add</button>
+        <ToggleBar
+          ariaLabel="Mode"
+          items={[
+            { value: 'a', label: 'A' },
+            { value: 'b', label: 'B' },
+          ]}
+          value="a"
+          onChange={() => {}}
+        />
+        <Select
+          aria-label="Font"
+          width="fit"
+          selectedKey="oswald"
+          options={[{ value: 'oswald', label: 'Oswald' }]}
+        />
+        <Toolbar aria-label="Actions">
+          <Toolbar.Group>
+            <Toolbar.Button onClick={() => {}}>Undo</Toolbar.Button>
+          </Toolbar.Group>
+        </Toolbar>
+      </>
+    ),
+    children: <p>Body content.</p>,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const boxes = [
+      canvas.getByRole('button', { name: 'Add' }),
+      canvas.getByRole('radiogroup', { name: 'Mode' }),
+      canvas.getByRole('button', { name: /Font/ }),
+      canvas.getByRole('button', { name: 'Undo' }),
+    ].map((el) => el.getBoundingClientRect());
+    const heights = boxes.map((box) => Math.round(box.height * 2) / 2);
+    const middles = boxes.map((box) => Math.round((box.top + box.height / 2) * 2) / 2);
+    await expect(heights).toEqual(heights.map(() => heights[0]));
+    await expect(middles).toEqual(middles.map(() => middles[0]));
+  },
+};

package/src/lab/LabShell.tsx

@@ -1,10 +1,8 @@
-import { ThemeProvider, useThemeOptional } from '@weasel-js/theme/react';
 import type { ReactNode } from 'react';
 import type { LabMode } from '../state/types';
-import { interstellarTheme } from '../theme/interstellar';
+import { LabRoot } from './LabRoot';
 import type { LabPage } from './LabSwitcher';
 import { LabSwitcher } from './LabSwitcher';
-import { useResolvedMode } from './useSystemMode';
 
 /** Props for `<LabShell>`. */
 export interface LabShellProps {
@@ -27,34 +25,27 @@ export interface LabShellProps {
 /** Page frame for a lab: a titled header, a body, and an optional footer,
  *  themed for the resolved color mode. Presentational only — use `<Lab>` when
  *  the trial runtime is wanted too. */
-export function LabShell({ title, children, header, footer, mode = 'auto',
-                          pages, path }: LabShellProps) {
-  const resolved = useResolvedMode(mode);
-  const outer = useThemeOptional();
-
-  const shell = (
-    // Overlays portal here rather than to the themed wrapper above: `.lk-root`
-    // carries the element defaults a lab's bare markup is styled by.
-    <div className="lk-root lk-shell" data-wzl-portal-host="">
+export function LabShell({
+  title,
+  children,
+  header,
+  footer,
+  mode = 'auto',
+  pages,
+  path,
+}: LabShellProps) {
+  return (
+    <LabRoot mode={mode} className="lk-shell">
       <header className="lk-shell-header">
-        {pages && pages.length > 0
-          ? <LabSwitcher title={title} pages={pages} path={path}
-                         className="lk-shell-title" />
-          : <h1 className="lk-shell-title">{title}</h1>}
+        {pages && pages.length > 0 ? (
+          <LabSwitcher title={title} pages={pages} path={path} className="lk-shell-title" />
+        ) : (
+          <h1 className="lk-shell-title">{title}</h1>
+        )}
         {header && <div className="lk-shell-header-actions">{header}</div>}
       </header>
       <main className="lk-shell-body">{children}</main>
       {footer && <footer className="lk-shell-footer">{footer}</footer>}
-    </div>
-  );
-
-  // Inside <Lab> the theme is already applied on `.lk-lab`; wrapping again
-  // would only add a div.
-  return outer ? (
-    shell
-  ) : (
-    <ThemeProvider theme={interstellarTheme} mode={resolved}>
-      {shell}
-    </ThemeProvider>
+    </LabRoot>
   );
 }

package/src/lab/LabSwitcher.less

@@ -6,7 +6,7 @@
 .lk-switcher-title {
   margin: 0;
   font-size: var(--wzl-font-size-xl);
-  line-height: var(--wzl-line-height-tight, 1.2);
+  line-height: var(--wzl-leading-snug);
 }
 
 .lk-switcher-trigger {
@@ -21,13 +21,17 @@
   border: 0;
   padding: 0;
   cursor: pointer;
+  // A title is a click target now, and a consumer's header is usually a
+  // crowded flex row -- left to wrap, `brick-icons corpus` breaks after the
+  // hyphen and the control becomes three ragged lines with a caret adrift.
+  white-space: nowrap;
 
-  &:hover { color: var(--wzl-text-accent, var(--wzl-text)); }
+  &:hover { color: var(--wzl-accent); }
 
   &:focus-visible {
     outline: 2px solid var(--wzl-focus-ring, currentColor);
     outline-offset: 2px;
-    border-radius: var(--wzl-radius-sm, 2px);
+    border-radius: var(--wzl-radius-sm, 3px);
   }
 }
 
@@ -50,22 +54,25 @@
   position: absolute;
   top: calc(100% + var(--wzl-space-xs));
   left: 0;
-  z-index: var(--wzl-z-popover, 60);
+  z-index: var(--wzl-z-overlay);
   min-width: max(100%, 11rem);
   display: flex;
   flex-direction: column;
   padding: var(--wzl-space-xs);
-  background: var(--wzl-surface-raised);
+  // `--wzl-surface-raised` is translucent by design -- it is for panels that
+  // blur what sits behind them. A menu has to be read, so it takes the opaque
+  // surface, the way `FloatingPanel` does.
+  background: var(--wzl-surface);
   border: 1px solid var(--wzl-border);
-  border-radius: var(--wzl-radius-md, 6px);
-  box-shadow: var(--wzl-shadow-md, 0 6px 20px rgb(0 0 0 / 35%));
+  border-radius: var(--wzl-radius-md, 5px);
+  box-shadow: 0 6px 20px var(--wzl-shadow);
 }
 
 .lk-switcher-item {
   padding: var(--wzl-space-xs) var(--wzl-space-sm);
   border-radius: var(--wzl-radius-sm, 3px);
-  color: var(--wzl-text);
-  font-size: var(--wzl-font-size-md);
+  color: var(--wzl-fg);
+  font-size: var(--wzl-font-size);
   text-decoration: none;
   white-space: nowrap;
 
@@ -80,6 +87,6 @@
 // The open page stays in the list rather than being filtered out: a menu that
 // drops its current entry shifts every other one as you move between pages.
 .lk-switcher-item[aria-current='page'] {
-  color: var(--wzl-text-strong, var(--wzl-text));
-  font-weight: var(--wzl-font-weight-semibold, 600);
+  color: var(--wzl-fg);
+  font-weight: var(--wzl-font-weight-bold);
 }

package/src/lab/LabSwitcher.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
-import { currentPage, LabSwitcher } from './LabSwitcher';
 import { LabShell } from './LabShell';
+import { currentPage, LabSwitcher } from './LabSwitcher';
 
 const PAGES = [
   { href: '/corpus', label: 'Wall' },
@@ -19,8 +19,7 @@ describe('currentPage', () => {
   it('survives a query string, a trailing slash and a leftover extension', () => {
     // A dev server maps `/stats` to `stats.html` and serves both spellings, so
     // an old bookmark must still resolve to the same page.
-    for (const path of ['/stats?kind=base', '/stats/', '/stats.html',
-                        '/lab/stats.html#top']) {
+    for (const path of ['/stats?kind=base', '/stats/', '/stats.html', '/lab/stats.html#top']) {
       expect(currentPage(path, PAGES)).toBe(1);
     }
   });
@@ -34,7 +33,9 @@ describe('<LabSwitcher>', () => {
   it('shows the title and nothing else until it is opened', () => {
     render(<LabSwitcher title="corpus stats" pages={PAGES} path="/stats" />);
     expect(screen.getByRole('button', { name: /corpus stats/ })).toHaveAttribute(
-      'aria-expanded', 'false');
+      'aria-expanded',
+      'false',
+    );
     expect(screen.queryByRole('menu')).toBeNull();
   });
 
@@ -54,8 +55,7 @@ describe('<LabSwitcher>', () => {
     render(<LabSwitcher title="corpus stats" pages={PAGES} path="/stats" />);
     open();
     expect(screen.getByRole('menuitem', { name: 'Wall' }).tagName).toBe('A');
-    expect(screen.getByRole('menuitem', { name: 'Wall' })).toHaveAttribute(
-      'href', '/corpus');
+    expect(screen.getByRole('menuitem', { name: 'Wall' })).toHaveAttribute('href', '/corpus');
   });
 
   it('closes on Escape and on a press outside it', () => {
@@ -63,7 +63,8 @@ describe('<LabSwitcher>', () => {
       <div>
         <LabSwitcher title="corpus stats" pages={PAGES} path="/stats" />
         <button type="button">elsewhere</button>
-      </div>);
+      </div>,
+    );
     open();
     fireEvent.keyDown(document, { key: 'Escape' });
     expect(screen.queryByRole('menu')).toBeNull();
@@ -76,7 +77,7 @@ describe('<LabSwitcher>', () => {
   it('stays a plain heading when there is nowhere to switch to', () => {
     // A disclosure arrow promising a menu of the page you are already on is
     // worse than no control.
-    render(<LabSwitcher title="corpus stats" pages={[PAGES[1]!]} path="/stats" />);
+    render(<LabSwitcher title="corpus stats" pages={PAGES.slice(1, 2)} path="/stats" />);
     expect(screen.getByRole('heading', { name: 'corpus stats' })).toBeInTheDocument();
     expect(screen.queryByRole('button')).toBeNull();
   });
@@ -84,7 +85,11 @@ describe('<LabSwitcher>', () => {
 
 describe('<LabShell> with pages', () => {
   it('turns its title into the switcher', () => {
-    render(<LabShell title="corpus stats" pages={PAGES} path="/stats">body</LabShell>);
+    render(
+      <LabShell title="corpus stats" pages={PAGES} path="/stats">
+        body
+      </LabShell>,
+    );
     expect(screen.getByRole('button', { name: /corpus stats/ })).toBeInTheDocument();
   });
 

package/src/lab/LabSwitcher.tsx

@@ -25,8 +25,10 @@ export interface LabSwitcherProps {
  *  to `stats.html` serves both spellings, and a bookmark from before the URLs
  *  lost their extension still resolves to the same page. */
 export function currentPage(path: string, pages: readonly LabPage[]): number {
-  const here = path.split('?')[0]!.split('#')[0]!
-    .replace(/\/$/, '').replace(/\.html$/, '');
+  const here = path
+    .replace(/[?#].*$/, '')
+    .replace(/\/$/, '')
+    .replace(/\.html$/, '');
   return pages.findIndex((p) => here.endsWith(p.href.replace(/\.html$/, '')));
 }
 
@@ -44,8 +46,10 @@ export function LabSwitcher({ title, pages, path, className }: LabSwitcherProps)
   const [open, setOpen] = useState(false);
   const root = useRef<HTMLDivElement>(null);
   const menuId = useId();
-  const here = currentPage(path ?? (typeof window === 'undefined'
-    ? '' : window.location.pathname), pages);
+  const here = currentPage(
+    path ?? (typeof window === 'undefined' ? '' : window.location.pathname),
+    pages,
+  );
 
   const close = useCallback(() => setOpen(false), []);
 

package/src/lab/Workspace.less

@@ -80,5 +80,5 @@
   width: 260px;
   height: auto;
   max-height: 60%;
-  box-shadow: var(--wzl-shadow-panel, 0 2px 8px rgb(0 0 0 / 0.3));
+  box-shadow: 0 2px 8px var(--wzl-shadow);
 }

package/src/lab/Workspace.stories.tsx

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

package/src/lab/Workspace.surface.test.tsx

@@ -10,6 +10,7 @@ function fakeHandle(): SurfaceHandle {
     invalidateAll: vi.fn(),
     invalidateRects: vi.fn(),
     registerTile: vi.fn(),
+    registerClear: vi.fn(() => () => {}),
     registerPainter: vi.fn(() => () => {}),
     containerRef: vi.fn(),
     getContainer: vi.fn(() => null),

package/src/lab/fitCheck.test.ts

@@ -0,0 +1,57 @@
+import { describe, expect, it } from 'vitest';
+import { describeElement, findOvershoot } from './fitCheck';
+
+const bound = { top: 0, left: 0, bottom: 600, right: 800 };
+const box = (bottom: number, right: number) => ({ top: 0, left: 0, bottom, right });
+
+describe('findOvershoot', () => {
+  it('returns null when everything is inside the bound', () => {
+    expect(findOvershoot(bound, [{ item: 'a', edges: box(600, 800) }])).toBeNull();
+  });
+
+  it('ignores sub-pixel overshoot within the tolerance', () => {
+    expect(findOvershoot(bound, [{ item: 'a', edges: box(600.8, 800) }])).toBeNull();
+  });
+
+  it('names the item reaching furthest past the bound', () => {
+    const hit = findOvershoot(bound, [
+      { item: 'header', edges: box(640, 800) },
+      { item: 'tile', edges: box(900, 800) },
+      { item: 'footer', edges: box(700, 800) },
+    ]);
+    expect(hit).toEqual({ item: 'tile', by: 300, axis: 'y' });
+  });
+
+  it('compares both axes and reports the worse one', () => {
+    const hit = findOvershoot(bound, [
+      { item: 'tall', edges: box(650, 800) },
+      { item: 'wide', edges: box(600, 1000) },
+    ]);
+    expect(hit).toEqual({ item: 'wide', by: 200, axis: 'x' });
+  });
+
+  it('keeps the first item on a tie, which is the outermost in document order', () => {
+    const hit = findOvershoot(bound, [
+      { item: 'shell', edges: box(616, 800) },
+      { item: 'footer', edges: box(616, 800) },
+    ]);
+    expect(hit?.item).toBe('shell');
+  });
+});
+
+describe('describeElement', () => {
+  it('writes the tag and every class', () => {
+    const el = document.createElement('DIV');
+    el.className = 'lk-shell-body extra';
+    expect(describeElement(el)).toBe('div.lk-shell-body.extra');
+  });
+
+  it('places a classless element by its nearest classed ancestor', () => {
+    const outer = document.createElement('div');
+    outer.className = 'lk-trial';
+    const mid = document.createElement('div');
+    const leaf = document.createElement('canvas');
+    outer.appendChild(mid).appendChild(leaf);
+    expect(describeElement(leaf)).toBe('canvas in div.lk-trial');
+  });
+});

package/src/lab/fitCheck.ts

@@ -0,0 +1,125 @@
+import { useEffect } from 'react';
+
+/** An element's edges, in the same coordinate space as the bound it is tested against. */
+export interface Edges {
+  top: number;
+  left: number;
+  bottom: number;
+  right: number;
+}
+
+export interface Overshoot<T> {
+  item: T;
+  /** How far past the bound the item reaches, in px, on whichever axis is worse. */
+  by: number;
+  axis: 'x' | 'y';
+}
+
+/** The item reaching furthest past the bottom or right of `bound`. On a tie the
+ *  first item wins, so given document order it names the outermost box. */
+export function findOvershoot<T>(
+  bound: Edges,
+  items: Iterable<{ item: T; edges: Edges }>,
+  tolerance = 1,
+): Overshoot<T> | null {
+  let worst: Overshoot<T> | null = null;
+  for (const { item, edges } of items) {
+    const y = edges.bottom - bound.bottom;
+    const x = edges.right - bound.right;
+    const by = Math.max(x, y);
+    if (by <= tolerance) continue;
+    if (!worst || by > worst.by) worst = { item, by, axis: y >= x ? 'y' : 'x' };
+  }
+  return worst;
+}
+
+function tagAndClasses(el: Element): string {
+  return el.tagName.toLowerCase() + [...el.classList].map((c) => `.${c}`).join('');
+}
+
+/** `div.lk-shell-body` — the tag and classes, which is what a reader greps for.
+ *  A classless element is placed by its nearest classed ancestor. */
+export function describeElement(el: Element): string {
+  if (el.classList.length > 0) return tagAndClasses(el);
+  let up = el.parentElement;
+  while (up && up.classList.length === 0) up = up.parentElement;
+  return up ? `${tagAndClasses(el)} in ${tagAndClasses(up)}` : tagAndClasses(el);
+}
+
+function edgesOf(el: Element): Edges {
+  const r = el.getBoundingClientRect();
+  return { top: r.top, left: r.left, bottom: r.bottom, right: r.right };
+}
+
+function* candidates(root: Element): Iterable<{ item: Element; edges: Edges }> {
+  yield { item: root, edges: edgesOf(root) };
+  for (const el of root.querySelectorAll('*')) yield { item: el, edges: edgesOf(el) };
+}
+
+function overflows(el: Element): boolean {
+  return el.scrollHeight > el.clientHeight + 1 || el.scrollWidth > el.clientWidth + 1;
+}
+
+/** Why a mounted lab scrolls, or null when it fits. The document only counts
+ *  when the lab is what reaches past the viewport, so a lab embedded in a long
+ *  page does not report the page's own scroll. */
+export function explainLabScroll(lab: Element, shellBody: Element): string | null {
+  if (overflows(shellBody)) {
+    const r = shellBody.getBoundingClientRect();
+    const bound = {
+      top: r.top,
+      left: r.left,
+      bottom: r.top + shellBody.clientHeight,
+      right: r.left + shellBody.clientWidth,
+    };
+    const hit = findOvershoot(bound, candidates(shellBody));
+    return hit
+      ? `.lk-shell-body scrolls: ${describeElement(hit.item)} reaches ${Math.round(hit.by)}px past it (${hit.axis})`
+      : '.lk-shell-body scrolls';
+  }
+
+  const doc = document.scrollingElement ?? document.documentElement;
+  if (!overflows(doc)) return null;
+  const r = lab.getBoundingClientRect();
+  const bound = {
+    top: r.top,
+    left: r.left,
+    bottom: r.top + Math.min(r.height, doc.clientHeight),
+    right: r.left + Math.min(r.width, doc.clientWidth),
+  };
+  const hit = findOvershoot(bound, candidates(lab));
+  return hit
+    ? `the page scrolls: ${describeElement(hit.item)} reaches ${Math.round(hit.by)}px past the lab's box (${hit.axis})`
+    : null;
+}
+
+const SETTLE_MS = 300;
+
+/** Dev only: warns once, naming the culprit, when a mounted lab scrolls. */
+export function useLabFitWarning(labBody: Element | null): void {
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'production') return;
+    if (!labBody || typeof ResizeObserver === 'undefined') return;
+    const lab = labBody.closest('.lk-lab');
+    const shellBody = labBody.closest('.lk-shell-body');
+    if (!lab || !shellBody) return;
+
+    // A shrinking window overflows for a frame or two before the workspace
+    // re-lays out, so only overflow that outlasts the resize is reported.
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    const observer = new ResizeObserver(() => {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        const why = explainLabScroll(lab, shellBody);
+        if (!why) return;
+        observer.disconnect();
+        console.warn(`[labkit] <Lab> should fit its container without scrolling, but ${why}.`);
+      }, SETTLE_MS);
+    });
+    for (const el of [document.documentElement, lab, shellBody, labBody]) observer.observe(el);
+    return () => {
+      clearTimeout(timer);
+      observer.disconnect();
+    };
+  }, [labBody]);
+}

package/src/lab/index.ts

@@ -4,6 +4,8 @@ export type { LabContextValue } from './LabContext';
 export { LabContext, useLabContext } from './LabContext';
 export type { LabPaletteProps } from './LabPalette';
 export { LabPalette } from './LabPalette';
+export type { LabRootProps } from './LabRoot';
+export { LabRoot } from './LabRoot';
 export type { LabShellProps } from './LabShell';
 export { LabShell } from './LabShell';
 export type { LabPage, LabSwitcherProps } from './LabSwitcher';

package/src/layers/LayerList.stories.tsx

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