@weasel-js/labkit 0.7.2 → 1.0.0

package/dist/ui/layers/index.js

@@ -1,5 +1,5 @@
-export { LayerStack } from '../../chunk-ERZQAU4N.js';
-import '../../chunk-BG6NLMOL.js';
-import '../../chunk-5XDFILHZ.js';
+export { LayerStack } from '../../chunk-HNXVLKBG.js';
+import '../../chunk-FP5LYDVX.js';
+import '../../chunk-XVBXYKFJ.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weasel-js/labkit",
-  "version": "0.7.2",
+  "version": "1.0.0",
   "description": "React widgets for building self-contained interactive lab pages",
   "license": "MIT",
   "author": "orochi235",
@@ -67,9 +67,7 @@
       "types": "./dist/ui/layers/index.d.ts",
       "import": "./dist/ui/layers/index.js"
     },
-    "./styles.css": "./dist/styles.css",
-    "./theme-light.css": "./dist/theme-light.css",
-    "./theme-interstellar.css": "./dist/theme-interstellar.css"
+    "./styles.css": "./dist/styles.css"
   },
   "scripts": {
     "dev": "vite",
@@ -78,8 +76,8 @@
     "build": "tsup && npm run build:dts && npm run build:css && npm run build:fonts",
     "build:dts": "tsx scripts/build-dts.mts",
     "prepublishOnly": "npm run build",
-    "build:css": "lessc src/styles.less dist/styles.css && lessc src/theme/light.less dist/theme-light.css && lessc src/theme/interstellar.less dist/theme-interstellar.css",
-    "build:fonts": "mkdir -p dist/fonts && cp src/fonts/*.woff2 dist/fonts/",
+    "build:css": "lessc src/styles.less dist/styles.css",
+    "build:fonts": "mkdir -p dist/fonts && cp ../theme/fonts/*.woff2 dist/fonts/",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:smoke:consumer": "node scripts/smoke-consumer-bundle.mjs",
@@ -95,6 +93,7 @@
     "react-dom": "^19.0.0"
   },
   "dependencies": {
+    "@weasel-js/theme": "*",
     "earcut": "2.2.4",
     "polygon-clipping": "^0.15.7",
     "react-aria-components": "^1.5.0",

package/src/canvas/CanvasStack.less

@@ -1,7 +1,7 @@
 .lk-canvas-stack {
   position: relative;
   overflow: hidden;
-  background: var(--lk-color-canvas-bg, #f6f6f6);
+  background: var(--wzl-surface-sunken);
   touch-action: none;
 }
 

package/src/controls/ControlPanel.less

@@ -1,32 +1,32 @@
 .lk-control-panel {
   display: flex;
   flex-direction: column;
-  gap: var(--lk-spacing-sm, 8px);
-  padding: var(--lk-spacing-sm, 8px);
+  gap: var(--wzl-space-sm);
+  padding: var(--wzl-space-sm);
 }
 
 .lk-control-row {
   display: flex;
   flex-direction: column;
-  gap: var(--lk-spacing-xs, 4px);
+  gap: var(--wzl-space-xs);
 }
 
 .lk-control-row--inline {
   flex-direction: row;
   align-items: center;
-  gap: var(--lk-spacing-sm, 8px);
+  gap: var(--wzl-space-sm);
 }
 
 .lk-control-label {
-  font-size: var(--lk-font-size-sm, 12px);
-  color: var(--lk-color-text, #222);
+  font-size: var(--wzl-font-size-sm);
+  color: var(--wzl-fg);
 }
 
 .lk-control-input {
   width: 100%;
-  background: var(--lk-color-surface, #fff);
-  color: var(--lk-color-text, #222);
-  border: 1px solid var(--lk-color-border, #ccc);
+  background: var(--wzl-surface-raised);
+  color: var(--wzl-fg);
+  border: 1px solid var(--wzl-border);
   border-radius: 4px;
   padding: 2px 6px;
 }
@@ -47,9 +47,9 @@
 }
 
 .lk-control-slider-value {
-  font-size: var(--lk-font-size-sm, 12px);
+  font-size: var(--wzl-font-size-sm);
   font-variant-numeric: tabular-nums;
-  color: var(--lk-color-text-muted, #666);
+  color: var(--wzl-fg-muted);
   min-width: 3ch;
   text-align: right;
 }
@@ -57,5 +57,5 @@
 .lk-control-slider-row {
   display: flex;
   align-items: center;
-  gap: var(--lk-spacing-sm, 8px);
+  gap: var(--wzl-space-sm);
 }

package/src/dragdrop/DragGhost.less

@@ -3,8 +3,8 @@
   pointer-events: none;
   z-index: 9999;
   padding: 4px 8px;
-  background: var(--lk-color-surface, #fff);
-  border: 1px solid var(--lk-color-border, #999);
+  background: var(--wzl-surface-raised);
+  border: 1px solid var(--wzl-border);
   border-radius: 4px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
   font: inherit;

package/src/dragdrop/Palette.less

@@ -1,8 +1,8 @@
 .lk-palette {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: var(--lk-spacing-sm, 8px);
-  padding: var(--lk-spacing-sm, 8px);
+  gap: var(--wzl-space-sm);
+  padding: var(--wzl-space-sm);
 }
 
 .lk-palette__item {
@@ -10,9 +10,9 @@
   align-items: center;
   justify-content: center;
   min-height: 48px;
-  padding: var(--lk-spacing-sm, 8px);
-  background: var(--lk-color-surface, #fff);
-  border: 1px solid var(--lk-color-border, #d0d0d0);
+  padding: var(--wzl-space-sm);
+  background: var(--wzl-surface-raised);
+  border: 1px solid var(--wzl-border);
   border-radius: 4px;
   cursor: grab;
   font: inherit;
@@ -21,7 +21,7 @@
   touch-action: none;
 
   &:hover {
-    background: var(--lk-color-surface-hover, #f4f4f4);
+    background: var(--wzl-surface-hover);
   }
 
   &:active {

package/src/index.ts

@@ -56,6 +56,7 @@ export {
 export type {
   CreateLabStoreOptions,
   ExperimentStateHandle,
+  LabMode,
   LabStoreState,
   SavedSnapshot,
   StorageAdapter,
@@ -63,6 +64,7 @@ export type {
   WorkspaceRecord,
 } from './state/types';
 export { useExperimentState } from './state/useExperimentState';
+export { interstellarTheme } from './theme/interstellar';
 export * from './ui/layers';
 export * from './ui/properties';
 export type { EventBus, EventListener } from './undo';

package/src/lab/Lab.test.tsx

@@ -89,27 +89,32 @@ describe('<Lab>', () => {
     expect(reset?.state).toEqual({ value: 0 });
   });
 
-  it('theme="light" applies lk-theme-light class', () => {
-    const { container } = mountLab({ theme: 'light' });
-    expect(container.querySelector('.lk-lab')?.className).toMatch(/lk-theme-light/);
+  it('mode="light" stamps light on the lab root', () => {
+    const { container } = mountLab({ mode: 'light' });
+    expect(container.querySelector('.lk-lab')?.getAttribute('data-wzl-mode')).toBe('light');
   });
 
-  it('theme="interstellar" applies lk-theme-interstellar class', () => {
-    const { container } = mountLab({ theme: 'interstellar' });
-    expect(container.querySelector('.lk-lab')?.className).toMatch(/lk-theme-interstellar/);
+  it('mode="dark" stamps dark on the lab root', () => {
+    const { container } = mountLab({ mode: 'dark' });
+    expect(container.querySelector('.lk-lab')?.getAttribute('data-wzl-mode')).toBe('dark');
   });
 
-  it('theme="auto" applies neither class', () => {
-    const { container } = mountLab({ theme: 'auto' });
-    const cls = container.querySelector('.lk-lab')?.className ?? '';
-    expect(cls).not.toMatch(/lk-theme-light/);
-    expect(cls).not.toMatch(/lk-theme-interstellar/);
+  it('mode="auto" resolves to a concrete mode', () => {
+    const { container } = mountLab({ mode: 'auto' });
+    expect(container.querySelector('.lk-lab')?.getAttribute('data-wzl-mode')).toMatch(
+      /^(light|dark)$/,
+    );
+  });
+
+  it('applies the interstellar theme in every mode', () => {
+    const { container } = mountLab({ mode: 'light' });
+    expect(container.querySelector('.lk-lab')?.getAttribute('data-wzl-theme')).toBe('interstellar');
   });
 
-  it('setTheme updates class at runtime', () => {
-    const { container } = mountLab({ theme: 'auto' });
-    act(() => labRef?.setTheme('light'));
-    expect(container.querySelector('.lk-lab')?.className).toMatch(/lk-theme-light/);
+  it('setMode updates the stamped mode at runtime', () => {
+    const { container } = mountLab({ mode: 'auto' });
+    act(() => labRef?.setMode('light'));
+    expect(container.querySelector('.lk-lab')?.getAttribute('data-wzl-mode')).toBe('light');
   });
 
   it('throws when instruments is empty', () => {

package/src/lab/Lab.tsx

@@ -1,10 +1,13 @@
 import { type CSSProperties, type ReactNode, useEffect, useMemo, useRef } from 'react';
 import { useStore } from 'zustand/react';
+import { ThemeProvider } from '@weasel-js/theme/react';
 import type { Instrument } from '../instrument/types';
 import { noneAdapter } from '../state/adapters';
 import { LabStoreContext } from '../state/context';
 import { createLabStore, type LabStore } from '../state/store';
-import type { StorageAdapter, WorkspaceRecord } from '../state/types';
+import type { LabMode, StorageAdapter, WorkspaceRecord } from '../state/types';
+import { interstellarTheme } from '../theme/interstellar';
+import { useResolvedMode } from './useSystemMode';
 import { Workspace } from '../workspace/Workspace';
 import {
   addWorkspace as addWorkspaceOp,
@@ -21,12 +24,12 @@ export interface LabProps {
   defaultInstrument: string;
   storage?: StorageAdapter | null;
   storageKey?: string;
-  theme?: 'auto' | 'light' | 'interstellar';
+  mode?: LabMode;
   /**
    * Optional list of CSS colors used to compose the interstellar theme's
    * cosmic backdrop. Each color becomes one radial-gradient blob on the
    * dark void base. Order maps to a fixed spread of positions; extras wrap
-   * around. Ignored unless `theme="interstellar"` is active.
+   * around. Ignored unless the resolved mode is dark.
    */
   nebula?: readonly string[];
   title?: string;
@@ -38,9 +41,9 @@ function buildStore(
   defaultInstrument: string,
   storage: StorageAdapter,
   storageKey: string,
-  initialTheme: 'auto' | 'light' | 'interstellar',
+  initialMode: LabMode,
 ): LabStore {
-  const store = createLabStore({ storageKey, storage, initialTheme });
+  const store = createLabStore({ storageKey, storage, initialMode });
   if (store.getState().workspaces.length === 0) {
     const seeded = addWorkspaceOp([], instruments, defaultInstrument);
     const record = seeded[0];
@@ -78,7 +81,7 @@ export function Lab({
   defaultInstrument,
   storage,
   storageKey,
-  theme,
+  mode,
   nebula,
   title,
   children,
@@ -94,20 +97,21 @@ export function Lab({
       defaultInstrument,
       storage ?? noneAdapter,
       storageKey ?? 'labkit',
-      theme ?? 'auto',
+      mode ?? 'auto',
     );
   }
   const store = storeRef.current;
 
   const workspaces = useStore(store, (s) => s.workspaces);
   const savedSnapshots = useStore(store, (s) => s.savedSnapshots);
-  const themeValue = useStore(store, (s) => s.theme);
+  const modeValue = useStore(store, (s) => s.mode);
+  const resolvedMode = useResolvedMode(modeValue);
 
   useEffect(() => {
-    if (theme && theme !== store.getState().theme) {
-      store.getState().setTheme(theme);
+    if (mode && mode !== store.getState().mode) {
+      store.getState().setMode(mode);
     }
-  }, [theme, store]);
+  }, [mode, store]);
 
   const contextValue = useMemo<LabContextValue>(() => {
     const replaceWorkspaces = (next: WorkspaceRecord[]): void => {
@@ -115,7 +119,7 @@ export function Lab({
       const merged = next.map((w) => currentById.get(w.id) ?? w);
       store.setState({ workspaces: merged });
       // Trigger persistence flush via a tracked action.
-      store.getState().setTheme(store.getState().theme);
+      store.getState().setMode(store.getState().mode);
     };
 
     return {
@@ -156,40 +160,37 @@ export function Lab({
       deleteSnapshot: (snapshotId) => {
         store.getState().deleteSnapshot(snapshotId);
       },
-      theme: themeValue,
-      setTheme: (t) => {
-        store.getState().setTheme(t);
+      mode: modeValue,
+      setMode: (m) => {
+        store.getState().setMode(m);
       },
     };
-  }, [instruments, workspaces, savedSnapshots, themeValue, store]);
+  }, [instruments, workspaces, savedSnapshots, modeValue, store]);
 
-  const themeClass =
-    themeValue === 'light'
-      ? 'lk-theme-light'
-      : themeValue === 'interstellar'
-        ? 'lk-theme-interstellar'
-        : '';
-
-  // Only apply the nebula override when interstellar is active and at
-  // least one color is provided. Setting a CSS custom property is the
-  // sanctioned use of inline style.
-  const nebulaStyle =
-    themeValue === 'interstellar' && nebula && nebula.length > 0
-      ? ({ ['--lk-space-nebula' as string]: buildNebula(nebula) } as CSSProperties)
+  // Only override the backdrop in dark, where there is one to override.
+  // Setting a CSS custom property is the sanctioned use of inline style.
+  const backdropStyle =
+    resolvedMode === 'dark' && nebula && nebula.length > 0
+      ? ({ ['--wzl-backdrop' as string]: buildNebula(nebula) } as CSSProperties)
       : undefined;
 
   return (
     <LabStoreContext.Provider value={{ store }}>
       <LabContext.Provider value={contextValue}>
-        <div className={`lk-lab ${themeClass}`.trim()} style={nebulaStyle}>
-          <LabShell title={title ?? 'Labkit'} theme={themeValue} header={children}>
+        <ThemeProvider
+          theme={interstellarTheme}
+          mode={resolvedMode}
+          className="lk-lab"
+          style={backdropStyle}
+        >
+          <LabShell title={title ?? 'Labkit'} mode={modeValue} header={children}>
             <WorkspaceGrid>
               {workspaces.map((w) => (
                 <Workspace key={w.id} id={w.id} />
               ))}
             </WorkspaceGrid>
           </LabShell>
-        </div>
+        </ThemeProvider>
       </LabContext.Provider>
     </LabStoreContext.Provider>
   );

package/src/lab/LabContext.ts

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react';
 import type { Instrument } from '../instrument/types';
-import type { SavedSnapshot, WorkspaceRecord } from '../state/types';
+import type { LabMode, SavedSnapshot, WorkspaceRecord } from '../state/types';
 
 export interface LabContextValue {
   instruments: Instrument[];
@@ -13,8 +13,8 @@ export interface LabContextValue {
   saveSnapshot: (workspaceId: string, name?: string) => void;
   loadSnapshot: (workspaceId: string, snapshotId: string) => void;
   deleteSnapshot: (snapshotId: string) => void;
-  theme: 'auto' | 'light' | 'interstellar';
-  setTheme: (t: 'auto' | 'light' | 'interstellar') => void;
+  mode: LabMode;
+  setMode: (m: LabMode) => void;
 }
 
 export const LabContext = createContext<LabContextValue | null>(null);

package/src/lab/LabShell.less

@@ -3,43 +3,43 @@
   flex-direction: column;
   width: 100%;
   height: 100vh;
-  background: var(--lk-bg);
+  background: var(--wzl-surface);
 }
 
 .lk-shell-header {
   display: flex;
   align-items: center;
-  gap: var(--lk-spacing-md);
-  padding: var(--lk-spacing-sm) var(--lk-spacing-md);
-  background: var(--lk-bg-elevated);
-  border-bottom: 1px solid var(--lk-border);
-  z-index: var(--lk-z-toolbar);
+  gap: var(--wzl-space-md);
+  padding: var(--wzl-space-sm) var(--wzl-space-md);
+  background: var(--wzl-surface-raised);
+  border-bottom: 1px solid var(--wzl-border);
+  z-index: var(--wzl-z-toolbar);
 }
 
 .lk-shell-title {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
-  color: var(--lk-text);
+  color: var(--wzl-fg);
 }
 
 .lk-shell-header-actions {
   margin-left: auto;
   display: flex;
-  gap: var(--lk-spacing-sm);
+  gap: var(--wzl-space-sm);
 }
 
 .lk-shell-body {
   flex: 1;
   min-height: 0;
   overflow: auto;
-  padding: var(--lk-spacing-md);
+  padding: var(--wzl-space-md);
 }
 
 .lk-shell-footer {
-  border-top: 1px solid var(--lk-border);
-  padding: var(--lk-spacing-xs) var(--lk-spacing-md);
-  background: var(--lk-bg-elevated);
-  color: var(--lk-text-muted);
-  font-size: var(--lk-font-size-sm);
+  border-top: 1px solid var(--wzl-border);
+  padding: var(--wzl-space-xs) var(--wzl-space-md);
+  background: var(--wzl-surface-raised);
+  color: var(--wzl-fg-muted);
+  font-size: var(--wzl-font-size-sm);
 }

package/src/lab/LabShell.test.tsx

@@ -22,38 +22,25 @@ describe('LabShell', () => {
     expect(screen.getByRole('button', { name: 'action' })).toBeInTheDocument();
   });
 
-  test('applies lk-theme-light class when theme="light"', () => {
+  test('stamps the requested mode under the interstellar theme', () => {
     const { container } = render(
-      <LabShell title="t" theme="light">
+      <LabShell title="t" mode="light">
         x
       </LabShell>,
     );
     const root = container.firstChild as HTMLElement;
-    expect(root.classList.contains('lk-theme-light')).toBe(true);
-    expect(root.classList.contains('lk-theme-interstellar')).toBe(false);
+    expect(root.getAttribute('data-wzl-theme')).toBe('interstellar');
+    expect(root.getAttribute('data-wzl-mode')).toBe('light');
   });
 
-  test('applies lk-theme-interstellar class when theme="interstellar"', () => {
-    const { container } = render(
-      <LabShell title="t" theme="interstellar">
-        x
-      </LabShell>,
-    );
-    const root = container.firstChild as HTMLElement;
-    expect(root.classList.contains('lk-theme-interstellar')).toBe(true);
-    expect(root.classList.contains('lk-theme-light')).toBe(false);
-  });
-
-  test('applies neither theme class when theme="auto" (default)', () => {
+  test('resolves mode="auto" to a concrete mode', () => {
     const { container } = render(<LabShell title="t">x</LabShell>);
     const root = container.firstChild as HTMLElement;
-    expect(root.classList.contains('lk-theme-light')).toBe(false);
-    expect(root.classList.contains('lk-theme-interstellar')).toBe(false);
+    expect(root.getAttribute('data-wzl-mode')).toMatch(/^(light|dark)$/);
   });
 
   test('always applies lk-root class', () => {
     const { container } = render(<LabShell title="t">x</LabShell>);
-    const root = container.firstChild as HTMLElement;
-    expect(root.classList.contains('lk-root')).toBe(true);
+    expect(container.querySelector('.lk-root')).not.toBeNull();
   });
 });

package/src/lab/LabShell.tsx

@@ -1,6 +1,8 @@
 import type { ReactNode } from 'react';
-
-export type LabTheme = 'auto' | 'light' | 'interstellar';
+import { ThemeProvider, useThemeOptional } from '@weasel-js/theme/react';
+import type { LabMode } from '../state/types';
+import { interstellarTheme } from '../theme/interstellar';
+import { useResolvedMode } from './useSystemMode';
 
 export interface LabShellProps {
   title: string;
@@ -9,19 +11,16 @@ export interface LabShellProps {
   header?: ReactNode;
   /** Optional content rendered into the footer. */
   footer?: ReactNode;
-  /** Theme override. "auto" (default) follows prefers-color-scheme. */
-  theme?: LabTheme;
+  /** Color mode. "auto" (default) follows prefers-color-scheme. */
+  mode?: LabMode;
 }
 
-export function LabShell({ title, children, header, footer, theme = 'auto' }: LabShellProps) {
-  const themeClass =
-    theme === 'light'
-      ? ' lk-theme-light'
-      : theme === 'interstellar'
-        ? ' lk-theme-interstellar'
-        : '';
-  return (
-    <div className={`lk-root lk-shell${themeClass}`}>
+export function LabShell({ title, children, header, footer, mode = 'auto' }: LabShellProps) {
+  const resolved = useResolvedMode(mode);
+  const outer = useThemeOptional();
+
+  const shell = (
+    <div className="lk-root lk-shell">
       <header className="lk-shell-header">
         <h1 className="lk-shell-title">{title}</h1>
         {header && <div className="lk-shell-header-actions">{header}</div>}
@@ -30,4 +29,14 @@ export function LabShell({ title, children, header, footer, theme = 'auto' }: La
       {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>
+  );
 }

package/src/lab/WorkspaceGrid.less

@@ -2,7 +2,7 @@
   display: grid;
   grid-template-columns: repeat(var(--lk-grid-cols, 1), 1fr);
   grid-template-rows: repeat(var(--lk-grid-rows, 1), 1fr);
-  gap: var(--lk-spacing-md);
+  gap: var(--wzl-space-md);
   width: 100%;
   height: 100%;
 }

package/src/lab/WorkspaceGrid.stories.tsx

@@ -12,10 +12,10 @@ type Story = StoryObj<typeof WorkspaceGrid>;
 const Tile = ({ children }: { children: React.ReactNode }) => (
   <div
     style={{
-      background: 'var(--lk-bg-elevated)',
-      border: '1px solid var(--lk-border)',
-      borderRadius: 'var(--lk-radius)',
-      padding: 'var(--lk-spacing-md)',
+      background: 'var(--wzl-surface-raised)',
+      border: '1px solid var(--wzl-border)',
+      borderRadius: 'var(--wzl-radius-md)',
+      padding: 'var(--wzl-space-md)',
       minHeight: 120,
       display: 'grid',
       placeItems: 'center',

package/src/lab/index.ts

@@ -4,7 +4,7 @@ export type { LabProps } from './Lab';
 export { Lab } from './Lab';
 export type { LabContextValue } from './LabContext';
 export { LabContext, useLabContext } from './LabContext';
-export type { LabShellProps, LabTheme } from './LabShell';
+export type { LabShellProps } from './LabShell';
 export { LabShell } from './LabShell';
 export type { WorkspaceGridProps } from './WorkspaceGrid';
 export { WorkspaceGrid } from './WorkspaceGrid';

package/src/lab/useSystemMode.ts

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import type { LabMode } from '../state/types';
+
+function query(): MediaQueryList | null {
+  if (typeof window === 'undefined' || !window.matchMedia) return null;
+  return window.matchMedia('(prefers-color-scheme: light)');
+}
+
+/**
+ * Resolve a `LabMode` to the mode the theme resolver understands.
+ *
+ * `auto` is not a mode — it means "read the OS", live. An explicit choice
+ * opts out of the subscription entirely.
+ */
+export function useResolvedMode(mode: LabMode): 'light' | 'dark' {
+  const [system, setSystem] = useState<'light' | 'dark'>(() =>
+    query()?.matches ? 'light' : 'dark',
+  );
+
+  useEffect(() => {
+    if (mode !== 'auto') return;
+    const mq = query();
+    if (!mq) return;
+    const onChange = (e: MediaQueryListEvent) => setSystem(e.matches ? 'light' : 'dark');
+    mq.addEventListener('change', onChange);
+    return () => mq.removeEventListener('change', onChange);
+  }, [mode]);
+
+  return mode === 'auto' ? system : mode;
+}