@weasel-js/labkit 0.8.0 → 1.0.1

package/src/layers/LayerList.less

@@ -2,30 +2,30 @@
   display: flex;
   flex-direction: column;
   gap: 2px;
-  padding: var(--lk-spacing-sm, 8px);
+  padding: var(--wzl-space-sm);
 }
 
 .lk-layer-list__empty {
-  color: var(--lk-color-text-muted, #888);
-  font-size: var(--lk-font-size-sm, 12px);
+  color: var(--wzl-fg-muted);
+  font-size: var(--wzl-font-size-sm);
   font-style: italic;
 }
 
 .lk-layer-list__row {
   display: flex;
   align-items: center;
-  gap: var(--lk-spacing-sm, 8px);
+  gap: var(--wzl-space-sm);
   padding: 4px 6px;
   border-radius: 3px;
   user-select: none;
 }
 
 .lk-layer-list__row:hover {
-  background: var(--lk-color-hover, rgba(0, 0, 0, 0.04));
+  background: var(--wzl-surface-hover);
 }
 
 .lk-layer-list__row--dragging {
-  background: var(--lk-color-active, rgba(0, 0, 0, 0.08));
+  background: var(--wzl-surface-pressed);
   opacity: 0.7;
 }
 
@@ -35,7 +35,7 @@
 
 .lk-layer-list__handle {
   cursor: grab;
-  color: var(--lk-color-text-muted, #888);
+  color: var(--wzl-fg-muted);
   font-family: monospace;
 }
 
@@ -44,10 +44,10 @@
 }
 
 .lk-layer-list__lock {
-  color: var(--lk-color-text-muted, #888);
+  color: var(--wzl-fg-muted);
 }
 
 .lk-layer-list__label {
   flex: 1;
-  font-size: var(--lk-font-size-sm, 12px);
+  font-size: var(--wzl-font-size-sm);
 }

package/src/passthrough/weasel-ui.ts

@@ -109,6 +109,8 @@ export {
   type RangeSliderProps,
   type ReorderDragHandlers,
   type ReorderDragState,
+  type RovingItem,
+  type RovingTabIndex,
   Select,
   SelectItem,
   type SelectItemProps,
@@ -146,5 +148,7 @@ export {
   type ToolPaletteProps,
   type TrackCtx,
   type UseReorderDragListOptions,
+  type UseRovingTabIndexOptions,
   useReorderDragList,
+  useRovingTabIndex,
 } from '@weasel-js/ui';

package/src/primitives/FpsMeter.less

@@ -1,14 +1,14 @@
 .lk-fps-meter {
   display: inline-flex;
   align-items: center;
-  gap: var(--lk-spacing-xs);
-  font-family: var(--lk-font-mono);
-  font-size: var(--lk-font-size-sm);
-  color: var(--lk-text-muted);
+  gap: var(--wzl-space-xs);
+  font-family: var(--wzl-font-mono);
+  font-size: var(--wzl-font-size-sm);
+  color: var(--wzl-fg-muted);
 }
 
 .lk-fps-meter-value {
-  color: var(--lk-text);
+  color: var(--wzl-fg);
   min-width: 2.5ch;
   text-align: right;
 }

package/src/primitives/ScaleIndicator.less

@@ -1,22 +1,22 @@
 .lk-scale-indicator {
   display: inline-flex;
   align-items: center;
-  gap: var(--lk-spacing-xs);
-  font-family: var(--lk-font-mono);
-  font-size: var(--lk-font-size-sm);
-  color: var(--lk-text-muted);
+  gap: var(--wzl-space-xs);
+  font-family: var(--wzl-font-mono);
+  font-size: var(--wzl-font-size-sm);
+  color: var(--wzl-fg-muted);
 }
 
 .lk-scale-indicator-bar {
   height: 6px;
-  border: 1px solid var(--lk-text-muted);
+  border: 1px solid var(--wzl-fg-muted);
   border-top: none;
   background: linear-gradient(
     to right,
-    var(--lk-text-muted) 1px,
+    var(--wzl-fg-muted) 1px,
     transparent 1px,
     transparent calc(100% - 1px),
-    var(--lk-text-muted) calc(100% - 1px)
+    var(--wzl-fg-muted) calc(100% - 1px)
   );
 }
 

package/src/primitives/Sidebar.less

@@ -2,8 +2,8 @@
   display: flex;
   flex-direction: column;
   width: 280px;
-  background: var(--lk-bg-elevated);
-  border-left: 1px solid var(--lk-border);
+  background: var(--wzl-surface-raised);
+  border-left: 1px solid var(--wzl-border);
   transition: width 150ms ease;
 
   &--collapsed {
@@ -14,16 +14,16 @@
 .lk-sidebar-header {
   display: flex;
   align-items: center;
-  padding: var(--lk-spacing-xs) var(--lk-spacing-sm);
-  border-bottom: 1px solid var(--lk-divider);
-  min-height: var(--lk-control-height);
+  padding: var(--wzl-space-xs) var(--wzl-space-sm);
+  border-bottom: 1px solid var(--wzl-line-subtle);
+  min-height: var(--wzl-control-h);
 }
 
 .lk-sidebar-title {
   flex: 1;
   font-weight: 600;
-  color: var(--lk-text);
-  font-size: var(--lk-font-size);
+  color: var(--wzl-fg);
+  font-size: var(--wzl-font-size);
 
   .lk-sidebar--collapsed & {
     display: none;
@@ -36,20 +36,20 @@
   padding: 0;
   background: transparent;
   border: 1px solid transparent;
-  border-radius: var(--lk-radius-sm);
-  color: var(--lk-text-muted);
+  border-radius: var(--wzl-radius-sm);
+  color: var(--wzl-fg-muted);
   cursor: pointer;
 
   &:hover {
-    background: var(--lk-bg);
-    color: var(--lk-text);
+    background: var(--wzl-surface);
+    color: var(--wzl-fg);
   }
 }
 
 .lk-sidebar-body {
   flex: 1;
   overflow: auto;
-  padding: var(--lk-spacing-sm);
+  padding: var(--wzl-space-sm);
 
   .lk-sidebar--collapsed & {
     display: none;

package/src/primitives/StatusBar.less

@@ -1,21 +1,21 @@
 .lk-status-bar {
   display: flex;
   align-items: center;
-  gap: var(--lk-spacing-md);
-  padding: var(--lk-spacing-xs) var(--lk-spacing-sm);
-  background: var(--lk-bg-elevated);
-  border-top: 1px solid var(--lk-border);
-  font-size: var(--lk-font-size-sm);
-  color: var(--lk-text-muted);
-  font-family: var(--lk-font-mono);
+  gap: var(--wzl-space-md);
+  padding: var(--wzl-space-xs) var(--wzl-space-sm);
+  background: var(--wzl-surface-raised);
+  border-top: 1px solid var(--wzl-border);
+  font-size: var(--wzl-font-size-sm);
+  color: var(--wzl-fg-muted);
+  font-family: var(--wzl-font-mono);
 }
 
 .lk-status-bar-section {
   display: inline-flex;
   align-items: center;
-  gap: var(--lk-spacing-xs);
-  padding: 0 var(--lk-spacing-xs);
-  border-right: 1px solid var(--lk-divider);
+  gap: var(--wzl-space-xs);
+  padding: 0 var(--wzl-space-xs);
+  border-right: 1px solid var(--wzl-line-subtle);
 
   &:last-child { border-right: none; }
 }

package/src/primitives/Toolbar.less

@@ -1,17 +1,17 @@
 .lk-toolbar {
   display: flex;
   align-items: center;
-  gap: var(--lk-spacing-sm);
-  padding: var(--lk-spacing-xs) var(--lk-spacing-sm);
-  background: var(--lk-bg-elevated);
-  border-bottom: 1px solid var(--lk-border);
-  min-height: calc(var(--lk-control-height) + 2 * var(--lk-spacing-xs));
+  gap: var(--wzl-space-sm);
+  padding: var(--wzl-space-xs) var(--wzl-space-sm);
+  background: var(--wzl-surface-raised);
+  border-bottom: 1px solid var(--wzl-border);
+  min-height: calc(var(--wzl-control-h) + 2 * var(--wzl-space-xs));
 }
 
 .lk-toolbar-title {
   font-weight: 600;
-  color: var(--lk-text);
-  margin-right: var(--lk-spacing-sm);
+  color: var(--wzl-fg);
+  margin-right: var(--wzl-space-sm);
 }
 
 .lk-toolbar-spacer {
@@ -19,25 +19,25 @@
 }
 
 .lk-toolbar-button {
-  height: var(--lk-control-height);
-  padding: 0 var(--lk-spacing-sm);
-  font-size: var(--lk-font-size);
-  color: var(--lk-text);
+  height: var(--wzl-control-h);
+  padding: 0 var(--wzl-space-sm);
+  font-size: var(--wzl-font-size);
+  color: var(--wzl-fg);
   background: transparent;
   border: 1px solid transparent;
-  border-radius: var(--lk-radius);
+  border-radius: var(--wzl-radius-md);
   cursor: pointer;
 
   &:hover:not(:disabled) {
-    background: var(--lk-bg);
-    border-color: var(--lk-border);
+    background: var(--wzl-surface);
+    border-color: var(--wzl-border);
   }
   &:focus-visible {
-    outline: 2px solid var(--lk-focus-ring);
+    outline: 2px solid var(--wzl-focus-ring);
     outline-offset: 1px;
   }
   &:disabled {
-    color: var(--lk-text-disabled);
+    color: var(--wzl-fg-subtle);
     cursor: not-allowed;
   }
 }

package/src/state/store.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, it, vi } from 'vitest';
 import { createMemoryAdapter } from './adapters';
+import { labStorageKey } from './helpers';
 import { createLabStore } from './store';
 
 function makeStore(overrides?: Partial<Parameters<typeof createLabStore>[0]>) {
@@ -17,14 +18,14 @@ describe('createLabStore — initial state', () => {
     expect(s.getState().savedSnapshots).toEqual([]);
   });
 
-  it('uses initialTheme when provided', () => {
-    const s = makeStore({ initialTheme: 'light' });
-    expect(s.getState().theme).toBe('light');
+  it('uses initialMode when provided', () => {
+    const s = makeStore({ initialMode: 'light' });
+    expect(s.getState().mode).toBe('light');
   });
 
-  it('defaults theme to auto', () => {
+  it('defaults mode to auto', () => {
     const s = makeStore();
-    expect(s.getState().theme).toBe('auto');
+    expect(s.getState().mode).toBe('auto');
   });
 });
 
@@ -104,11 +105,18 @@ describe('updateWorkspaceConfig', () => {
   });
 });
 
-describe('setTheme', () => {
-  it('updates theme', () => {
+describe('setMode', () => {
+  it('updates mode', () => {
     const s = makeStore();
-    s.getState().setTheme('interstellar');
-    expect(s.getState().theme).toBe('interstellar');
+    s.getState().setMode('dark');
+    expect(s.getState().mode).toBe('dark');
+  });
+
+  it('hydrates a stored interstellar preference as dark', () => {
+    const storage = createMemoryAdapter();
+    storage.write(labStorageKey('test', 'theme'), 'interstellar');
+    const s = createLabStore({ storageKey: 'test', storage });
+    expect(s.getState().mode).toBe('dark');
   });
 });
 

package/src/state/store.ts

@@ -8,6 +8,7 @@ import {
 import type {
   CreateLabStoreOptions,
   InstrumentSerializers,
+  LabMode,
   LabStoreState,
   SavedSnapshot,
   WorkspaceRecord,
@@ -30,7 +31,7 @@ export interface LabStoreActions {
   loadSnapshot: (snapshotId: string, workspaceId: string) => void;
   deleteSnapshot: (snapshotId: string) => void;
   listSnapshots: (workspaceId?: string) => SavedSnapshot[];
-  setTheme: (theme: 'light' | 'interstellar' | 'auto') => void;
+  setMode: (mode: LabMode) => void;
 }
 
 export type LabStore = StoreApi<LabStoreState & LabStoreActions> & {
@@ -58,18 +59,20 @@ export function createLabStore(options: CreateLabStoreOptions): LabStore {
     }
   }
 
-  const themeRaw = options.storage.read(labStorageKey(options.storageKey, 'theme'));
-  let hydratedTheme: 'light' | 'interstellar' | 'auto';
-  if (themeRaw === 'light' || themeRaw === 'interstellar' || themeRaw === 'auto') {
-    hydratedTheme = themeRaw;
+  const modeRaw = options.storage.read(labStorageKey(options.storageKey, 'theme'));
+  // `interstellar` was the dark mode's name back when it was a theme.
+  const stored = modeRaw === 'interstellar' ? 'dark' : modeRaw;
+  let hydratedMode: LabMode;
+  if (stored === 'light' || stored === 'dark' || stored === 'auto') {
+    hydratedMode = stored;
   } else {
-    hydratedTheme = options.initialTheme ?? 'auto';
+    hydratedMode = options.initialMode ?? 'auto';
   }
 
   const store = createStore<LabStoreState & LabStoreActions>()((set, get) => ({
     workspaces: hydratedWorkspaces,
     savedSnapshots: hydratedSnapshots,
-    theme: hydratedTheme,
+    mode: hydratedMode,
 
     addWorkspace: (record) => {
       set((s) => ({
@@ -194,8 +197,8 @@ export function createLabStore(options: CreateLabStoreOptions): LabStore {
       return [...filtered].sort((a, b) => b.savedAt - a.savedAt);
     },
 
-    setTheme: (theme) => {
-      set({ theme });
+    setMode: (mode) => {
+      set({ mode });
       scheduleFlush();
     },
   }));
@@ -212,7 +215,7 @@ export function createLabStore(options: CreateLabStoreOptions): LabStore {
         labStorageKey(options.storageKey, 'saves'),
         JSON.stringify(s.savedSnapshots),
       );
-      options.storage.write(labStorageKey(options.storageKey, 'theme'), s.theme);
+      options.storage.write(labStorageKey(options.storageKey, 'theme'), s.mode);
       flushTimer = null;
     }, 300);
   }

package/src/state/types.ts

@@ -22,10 +22,13 @@ export interface SavedSnapshot {
   savedAt: number;
 }
 
+/** `auto` follows the OS; the other two are an explicit choice. */
+export type LabMode = 'auto' | 'light' | 'dark';
+
 export interface LabStoreState {
   workspaces: WorkspaceRecord[];
   savedSnapshots: SavedSnapshot[];
-  theme: 'light' | 'interstellar' | 'auto';
+  mode: LabMode;
 }
 
 export interface StorageAdapter {
@@ -44,7 +47,7 @@ export interface ExperimentStateHandle<TS, TC> {
 export interface CreateLabStoreOptions {
   storageKey: string;
   storage: StorageAdapter;
-  initialTheme?: 'light' | 'interstellar' | 'auto';
+  initialMode?: LabMode;
 }
 
 export type InstrumentSerializers = Record<

package/src/theme/Interstellar.stories.less

@@ -2,8 +2,8 @@
 // into the library — imported by Interstellar.stories.tsx for vite/storybook.
 
 .lk-theme-doc {
-  font-family: var(--lk-font);
-  color: var(--lk-text);
+  font-family: var(--wzl-font-ui);
+  color: var(--wzl-fg);
 }
 
 .lk-theme-doc__grid {
@@ -13,8 +13,8 @@
 }
 
 .lk-theme-doc__heading {
-  font: 300 0.72rem/1 var(--lk-font-display);
-  color: var(--lk-text-muted);
+  font: 300 0.72rem/1 var(--wzl-font-display);
+  color: var(--wzl-fg-muted);
   text-transform: uppercase;
   letter-spacing: 0.08em;
   margin: 0 0 12px;
@@ -30,19 +30,19 @@
   display: flex;
   align-items: center;
   gap: 12px;
-  background: var(--lk-bg-elevated);
-  border: 1px solid var(--lk-border);
-  border-radius: var(--lk-radius-lg);
+  background: var(--wzl-surface-raised);
+  border: 1px solid var(--wzl-border);
+  border-radius: var(--wzl-radius-lg);
   padding: 10px 12px;
-  backdrop-filter: blur(var(--lk-glass-blur, 0));
-  -webkit-backdrop-filter: blur(var(--lk-glass-blur, 0));
+  backdrop-filter: blur(var(--wzl-glass-blur));
+  -webkit-backdrop-filter: blur(var(--wzl-glass-blur));
 }
 
 .lk-theme-doc__swatch-fill {
   width: 48px;
   height: 48px;
-  border-radius: var(--lk-radius-sm);
-  border: 1px solid var(--lk-border);
+  border-radius: var(--wzl-radius-sm);
+  border: 1px solid var(--wzl-border);
   flex-shrink: 0;
 }
 
@@ -55,31 +55,31 @@
 }
 
 .lk-theme-doc__swatch-name {
-  font: 300 0.95rem/1 var(--lk-font-display);
-  color: var(--lk-text);
+  font: 300 0.95rem/1 var(--wzl-font-display);
+  color: var(--wzl-fg);
 }
 
 .lk-theme-doc__swatch-var,
 .lk-theme-doc__swatch-value {
-  font: 400 0.7rem/1.2 var(--lk-font-mono);
-  color: var(--lk-text-muted);
+  font: 400 0.7rem/1.2 var(--wzl-font-mono);
+  color: var(--wzl-fg-muted);
   word-break: break-all;
 }
 
 .lk-theme-doc__swatch-value {
-  color: var(--lk-text);
+  color: var(--wzl-fg);
 }
 
 .lk-theme-doc__nebula {
   width: 100%;
   height: 200px;
-  border-radius: var(--lk-radius-lg);
-  border: 1px solid var(--lk-border);
+  border-radius: var(--wzl-radius-lg);
+  border: 1px solid var(--wzl-border);
 }
 
 .lk-theme-doc__note {
-  font: 400 0.85rem/1.5 var(--lk-font);
-  color: var(--lk-text-muted);
+  font: 400 0.85rem/1.5 var(--wzl-font-ui);
+  color: var(--wzl-fg-muted);
   margin-top: 12px;
   max-width: 640px;
 }