@weasel-js/labkit 0.1.0

package/src/state/types.ts

@@ -0,0 +1,53 @@
+export interface UndoStack {
+  past: unknown[];
+  future: unknown[];
+}
+
+export interface WorkspaceRecord<TS = unknown, TC = unknown> {
+  id: string;
+  instrumentName: string;
+  config: TC;
+  state: TS;
+  view: { zoom: number; pan: { x: number; y: number } };
+  undoStack: UndoStack;
+}
+
+export interface SavedSnapshot {
+  id: string;
+  name: string;
+  workspaceId: string;
+  instrumentName: string;
+  config: unknown;
+  state: unknown;
+  savedAt: number;
+}
+
+export interface LabStoreState {
+  workspaces: WorkspaceRecord[];
+  savedSnapshots: SavedSnapshot[];
+  theme: 'light' | 'interstellar' | 'auto';
+}
+
+export interface StorageAdapter {
+  read(key: string): string | null;
+  write(key: string, value: string): void;
+  delete?(key: string): void;
+}
+
+export interface ExperimentStateHandle<TS, TC> {
+  state: TS;
+  setState: (next: TS | ((prev: TS) => TS)) => void;
+  config: TC;
+  setConfig: (key: keyof TC, value: TC[keyof TC]) => void;
+}
+
+export interface CreateLabStoreOptions {
+  storageKey: string;
+  storage: StorageAdapter;
+  initialTheme?: 'light' | 'interstellar' | 'auto';
+}
+
+export type InstrumentSerializers = Record<
+  string,
+  { serialize?: (state: unknown) => unknown; deserialize?: (data: unknown) => unknown } | undefined
+>;

package/src/state/useExperimentState.test.tsx

@@ -0,0 +1,102 @@
+import { act, renderHook } from '@testing-library/react';
+import type { ReactNode } from 'react';
+import { describe, expect, it } from 'vitest';
+import { createMemoryAdapter } from './adapters';
+import { LabStoreProvider, WorkspaceIdProvider } from './context';
+import { createLabStore } from './store';
+import { useExperimentState } from './useExperimentState';
+
+type TestState = { count: number };
+type TestConfig = { step: number };
+
+function makeWrapper(workspaceId: string) {
+  const store = createLabStore({ storageKey: 'test', storage: createMemoryAdapter() });
+  store.getState().addWorkspace({
+    id: workspaceId,
+    instrumentName: 'Counter',
+    config: { step: 1 } satisfies TestConfig,
+    state: { count: 0 } satisfies TestState,
+    view: { zoom: 1, pan: { x: 0, y: 0 } },
+  });
+
+  return {
+    store,
+    wrapper: ({ children }: { children: ReactNode }) => (
+      <LabStoreProvider store={store}>
+        <WorkspaceIdProvider workspaceId={workspaceId}>{children}</WorkspaceIdProvider>
+      </LabStoreProvider>
+    ),
+  };
+}
+
+describe('useExperimentState', () => {
+  it('returns the initial state and config', () => {
+    const { wrapper } = makeWrapper('w1');
+    const { result } = renderHook(() => useExperimentState<TestState, TestConfig>(), { wrapper });
+    expect(result.current.state.count).toBe(0);
+    expect(result.current.config.step).toBe(1);
+  });
+
+  it('setState (plain value) updates the store', () => {
+    const { wrapper } = makeWrapper('w1');
+    const { result } = renderHook(() => useExperimentState<TestState, TestConfig>(), { wrapper });
+    act(() => result.current.setState({ count: 42 }));
+    expect(result.current.state.count).toBe(42);
+  });
+
+  it('setState (updater) updates the store', () => {
+    const { wrapper } = makeWrapper('w1');
+    const { result } = renderHook(() => useExperimentState<TestState, TestConfig>(), { wrapper });
+    act(() => result.current.setState((prev) => ({ count: prev.count + 10 })));
+    expect(result.current.state.count).toBe(10);
+  });
+
+  it('setConfig updates a config key', () => {
+    const { wrapper } = makeWrapper('w1');
+    const { result } = renderHook(() => useExperimentState<TestState, TestConfig>(), { wrapper });
+    act(() => result.current.setConfig('step', 5));
+    expect(result.current.config.step).toBe(5);
+  });
+
+  it('sibling workspace does not re-render on unrelated workspace changes', () => {
+    const store = createLabStore({ storageKey: 'test', storage: createMemoryAdapter() });
+    store.getState().addWorkspace({
+      id: 'w1',
+      instrumentName: 'T',
+      config: {},
+      state: { n: 0 },
+      view: { zoom: 1, pan: { x: 0, y: 0 } },
+    });
+    store.getState().addWorkspace({
+      id: 'w2',
+      instrumentName: 'T',
+      config: {},
+      state: { n: 0 },
+      view: { zoom: 1, pan: { x: 0, y: 0 } },
+    });
+
+    let w2RenderCount = 0;
+
+    const wrapper = ({ children }: { children: ReactNode }) => (
+      <LabStoreProvider store={store}>
+        <WorkspaceIdProvider workspaceId="w2">{children}</WorkspaceIdProvider>
+      </LabStoreProvider>
+    );
+
+    renderHook(
+      () => {
+        w2RenderCount++;
+        return useExperimentState();
+      },
+      { wrapper },
+    );
+
+    const countBefore = w2RenderCount;
+    act(() => store.getState().updateWorkspaceState('w1', { n: 99 }));
+    expect(w2RenderCount).toBe(countBefore);
+  });
+
+  it('throws when used outside LabStoreProvider', () => {
+    expect(() => renderHook(() => useExperimentState())).toThrow('[labkit]');
+  });
+});

package/src/state/useExperimentState.ts

@@ -0,0 +1,28 @@
+import { useContext } from 'react';
+import { useStore } from 'zustand/react';
+import { LabStoreContext, WorkspaceIdContext } from './context';
+import type { ExperimentStateHandle } from './types';
+
+export function useExperimentState<TS = unknown, TC = unknown>(): ExperimentStateHandle<TS, TC> {
+  const ctx = useContext(LabStoreContext);
+  if (!ctx) throw new Error('[labkit] useExperimentState must be used inside <LabStoreProvider>');
+
+  const workspaceId = useContext(WorkspaceIdContext);
+  if (!workspaceId)
+    throw new Error('[labkit] useExperimentState must be used inside <WorkspaceIdProvider>');
+
+  const record = useStore(ctx.store, (s) => s.workspaces.find((w) => w.id === workspaceId));
+
+  if (!record) throw new Error(`[labkit] No workspace found with id "${workspaceId}"`);
+
+  const updateWorkspaceState = useStore(ctx.store, (s) => s.updateWorkspaceState);
+  const updateWorkspaceConfig = useStore(ctx.store, (s) => s.updateWorkspaceConfig);
+
+  return {
+    state: record.state as TS,
+    config: record.config as TC,
+    setState: (next) =>
+      updateWorkspaceState(workspaceId, next as Parameters<typeof updateWorkspaceState>[1]),
+    setConfig: (key, value) => updateWorkspaceConfig(workspaceId, key as never, value as never),
+  };
+}

package/src/styles.less

@@ -0,0 +1,20 @@
+// Imports compile-time only. Component .less files are added in later steps.
+@import './theme/base.less';
+@import './lab/WorkspaceGrid.less';
+@import './lab/LabShell.less';
+@import './primitives/Toolbar.less';
+@import './primitives/Sidebar.less';
+@import './primitives/StatusBar.less';
+@import './primitives/FpsMeter.less';
+@import './primitives/ScaleIndicator.less';
+@import './lab/Lab.less';
+@import './workspace/Workspace.less';
+@import './controls/ControlPanel.less';
+@import './canvas/CanvasStack.less';
+@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/test-setup.ts

@@ -0,0 +1,17 @@
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+// vitest 4's jsdom env no longer hoists Storage APIs to globalThis (its
+// `KEYS` list omits localStorage/sessionStorage). The real Storage objects
+// live on the jsdom instance vitest stashes at `globalThis.jsdom` — pull
+// them onto the global so production code can use `localStorage.foo`.
+const jsdomWin = (globalThis as { jsdom?: { window: Window } }).jsdom?.window;
+if (jsdomWin && typeof globalThis.localStorage === 'undefined') {
+  Object.defineProperty(globalThis, 'localStorage', { value: jsdomWin.localStorage });
+  Object.defineProperty(globalThis, 'sessionStorage', { value: jsdomWin.sessionStorage });
+}
+
+afterEach(() => {
+  cleanup();
+});

package/src/theme/Interstellar.stories.less

@@ -0,0 +1,92 @@
+// Storybook-only docs styles for the Interstellar theme page. Not bundled
+// into the library — imported by Interstellar.stories.tsx for vite/storybook.
+
+.lk-theme-doc {
+  font-family: var(--lk-font);
+  color: var(--lk-text);
+}
+
+.lk-theme-doc__grid {
+  display: grid;
+  gap: 32px;
+  max-width: 1100px;
+}
+
+.lk-theme-doc__heading {
+  font: 300 0.72rem/1 var(--lk-font-display);
+  color: var(--lk-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin: 0 0 12px;
+}
+
+.lk-theme-doc__swatch-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 12px;
+}
+
+.lk-theme-doc__swatch {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: var(--lk-bg-elevated);
+  border: 1px solid var(--lk-border);
+  border-radius: var(--lk-radius-lg);
+  padding: 10px 12px;
+  backdrop-filter: blur(var(--lk-glass-blur, 0));
+  -webkit-backdrop-filter: blur(var(--lk-glass-blur, 0));
+}
+
+.lk-theme-doc__swatch-fill {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--lk-radius-sm);
+  border: 1px solid var(--lk-border);
+  flex-shrink: 0;
+}
+
+.lk-theme-doc__swatch-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.lk-theme-doc__swatch-name {
+  font: 300 0.95rem/1 var(--lk-font-display);
+  color: var(--lk-text);
+}
+
+.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);
+  word-break: break-all;
+}
+
+.lk-theme-doc__swatch-value {
+  color: var(--lk-text);
+}
+
+.lk-theme-doc__nebula {
+  width: 100%;
+  height: 200px;
+  border-radius: var(--lk-radius-lg);
+  border: 1px solid var(--lk-border);
+}
+
+.lk-theme-doc__note {
+  font: 400 0.85rem/1.5 var(--lk-font);
+  color: var(--lk-text-muted);
+  margin-top: 12px;
+  max-width: 640px;
+}
+
+.lk-theme-doc__type-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: flex-start;
+}

package/src/theme/Interstellar.stories.tsx

@@ -0,0 +1,243 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useEffect, useState } from 'react';
+import {
+  CheckboxRow,
+  ColorRow,
+  PropertyList,
+  PropertyPanel,
+  SliderRow,
+  TextRow,
+} from '../ui/properties/PropertyPanel';
+import './Interstellar.stories.less';
+
+const meta: Meta = {
+  title: 'labkit/Themes/Interstellar',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'The interstellar theme: deep-space cosmic gradient + starscape backdrop, glass surfaces, Oswald display type, purple accent. ' +
+          'Tokens live in `src/theme/tokens.less` (defaults) and `src/theme/interstellar.less` (explicit `.lk-theme-interstellar` overrides).',
+      },
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj;
+
+// ── Helpers ──────────────────────────────────────────────────────────
+
+interface Swatch {
+  name: string;
+  cssVar: string;
+}
+
+const SURFACE_TOKENS: Swatch[] = [
+  { name: 'bg', cssVar: '--lk-bg' },
+  { name: 'bg-elevated', cssVar: '--lk-bg-elevated' },
+  { name: 'bg-canvas', cssVar: '--lk-bg-canvas' },
+  { name: 'border', cssVar: '--lk-border' },
+  { name: 'divider', cssVar: '--lk-divider' },
+];
+
+const TEXT_TOKENS: Swatch[] = [
+  { name: 'text', cssVar: '--lk-text' },
+  { name: 'text-muted', cssVar: '--lk-text-muted' },
+  { name: 'text-disabled', cssVar: '--lk-text-disabled' },
+];
+
+const ACCENT_TOKENS: Swatch[] = [
+  { name: 'accent', cssVar: '--lk-accent' },
+  { name: 'accent-hover', cssVar: '--lk-accent-hover' },
+  { name: 'focus-ring', cssVar: '--lk-focus-ring' },
+];
+
+const PALETTE_TOKENS: Swatch[] = [
+  { name: 'green', cssVar: '--lk-swatch-green' },
+  { name: 'pink', cssVar: '--lk-swatch-pink' },
+  { name: 'cyan', cssVar: '--lk-swatch-cyan' },
+  { name: 'gold', cssVar: '--lk-swatch-gold' },
+  { name: 'amber', cssVar: '--lk-swatch-amber' },
+  { name: 'violet', cssVar: '--lk-swatch-violet' },
+  { name: 'mint', cssVar: '--lk-swatch-mint' },
+  { name: 'sky', cssVar: '--lk-swatch-sky' },
+  { name: 'orange', cssVar: '--lk-swatch-orange' },
+  { name: 'magenta', cssVar: '--lk-swatch-magenta' },
+];
+
+/**
+ * Resolves a CSS custom property's computed value off `document.documentElement`
+ * so swatch cards can display the actual color alongside the var name.
+ * Returns null until the first effect runs.
+ */
+function useResolvedVars(vars: readonly string[]): Record<string, string> {
+  const key = vars.join('|');
+  const [resolved, setResolved] = useState<Record<string, string>>({});
+  useEffect(() => {
+    const root = document.querySelector('.lk-theme-interstellar') ?? document.documentElement;
+    const cs = window.getComputedStyle(root);
+    const out: Record<string, string> = {};
+    for (const v of key.split('|')) out[v] = cs.getPropertyValue(v).trim();
+    setResolved(out);
+  }, [key]);
+  return resolved;
+}
+
+function SwatchGrid({ tokens, title }: { tokens: readonly Swatch[]; title: string }) {
+  const resolved = useResolvedVars(tokens.map((t) => t.cssVar));
+  return (
+    <div>
+      <h3 className="lk-theme-doc__heading">{title}</h3>
+      <div className="lk-theme-doc__swatch-grid">
+        {tokens.map((t) => (
+          <div key={t.cssVar} className="lk-theme-doc__swatch">
+            <div className="lk-theme-doc__swatch-fill" style={{ background: `var(${t.cssVar})` }} />
+            <div className="lk-theme-doc__swatch-meta">
+              <div className="lk-theme-doc__swatch-name">{t.name}</div>
+              <code className="lk-theme-doc__swatch-var">{t.cssVar}</code>
+              <code className="lk-theme-doc__swatch-value">{resolved[t.cssVar] ?? '…'}</code>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function NebulaPreview() {
+  return (
+    <div>
+      <h3 className="lk-theme-doc__heading">Cosmic backdrop (`--lk-space-nebula`)</h3>
+      <div className="lk-theme-doc__nebula" style={{ background: 'var(--lk-space-nebula)' }} />
+      <p className="lk-theme-doc__note">
+        Default: four radial gradients (purple, pink, blue, then a dark void base). Override per-Lab
+        by passing <code>nebula={'{[colors]}'}</code> to the <code>&lt;Lab&gt;</code> component.
+      </p>
+    </div>
+  );
+}
+
+function TypographySample() {
+  return (
+    <div>
+      <h3 className="lk-theme-doc__heading">Typography</h3>
+      <div className="lk-theme-doc__type-stack">
+        <h1 style={{ font: '300 2.6rem/1 var(--lk-font-display)', color: 'var(--lk-text)' }}>
+          Heading display 300
+        </h1>
+        <h2 style={{ font: '300 1.4rem/1.2 var(--lk-font-display)', color: 'var(--lk-text)' }}>
+          Heading 300
+        </h2>
+        <div
+          style={{
+            font: '300 0.78rem/1 var(--lk-font-display)',
+            color: 'var(--lk-text-muted)',
+            textTransform: 'uppercase',
+            letterSpacing: '0.05em',
+          }}
+        >
+          Label uppercase 300
+        </div>
+        <p style={{ font: '400 0.9rem/1.5 var(--lk-font)', color: 'var(--lk-text)' }}>
+          Body 400. Free-form prose at the default font size and line height.
+        </p>
+        <code
+          style={{
+            font: '400 0.85rem/1 var(--lk-font-mono)',
+            color: 'var(--lk-text)',
+            background: 'rgba(0,0,0,0.35)',
+            padding: '4px 8px',
+            borderRadius: 3,
+          }}
+        >
+          monospace ui-monospace
+        </code>
+      </div>
+    </div>
+  );
+}
+
+function LivePanelPreview() {
+  return (
+    <div>
+      <h3 className="lk-theme-doc__heading">Live panel</h3>
+      <PropertyPanel title="Sample">
+        <PropertyList>
+          <SliderRow
+            label="Opacity"
+            value={0.65}
+            min={0}
+            max={1}
+            step={0.01}
+            onChange={() => {}}
+            format={(v) => v.toFixed(2)}
+          />
+          <ColorRow label="Fill" value="#b08adb" onChange={() => {}} />
+          <ColorRow label="Stroke" value="#1a1428" onChange={() => {}} />
+          <TextRow label="Name" value="Untitled" onChange={() => {}} />
+          <CheckboxRow label="Visible" value={true} onChange={() => {}} />
+        </PropertyList>
+      </PropertyPanel>
+    </div>
+  );
+}
+
+// ── Stories ──────────────────────────────────────────────────────────
+
+export const Overview: Story = {
+  render: () => (
+    <div
+      className="lk-theme-interstellar lk-theme-doc"
+      style={{
+        background: 'var(--lk-space-nebula)',
+        padding: 32,
+        minHeight: '100vh',
+      }}
+    >
+      <h1 style={{ font: '300 2.6rem/1 var(--lk-font-display)', color: 'var(--lk-text)' }}>
+        Interstellar
+      </h1>
+      <p
+        style={{
+          font: '300 1.05rem/1.4 var(--lk-font-display)',
+          color: 'var(--lk-text-muted)',
+          maxWidth: 640,
+          margin: '12px 0 32px',
+        }}
+      >
+        Deep-space gradient backdrop, dark glass surfaces, Oswald display type, purple accent.
+        Default theme for labs running in lab mode.
+      </p>
+      <div className="lk-theme-doc__grid">
+        <SwatchGrid title="Surface" tokens={SURFACE_TOKENS} />
+        <SwatchGrid title="Text" tokens={TEXT_TOKENS} />
+        <SwatchGrid title="Accent / interactive" tokens={ACCENT_TOKENS} />
+        <SwatchGrid title="Palette" tokens={PALETTE_TOKENS} />
+        <NebulaPreview />
+        <TypographySample />
+        <LivePanelPreview />
+      </div>
+    </div>
+  ),
+};
+
+export const Palette: Story = {
+  render: () => (
+    <div
+      className="lk-theme-interstellar lk-theme-doc"
+      style={{
+        background: 'var(--lk-space-nebula)',
+        padding: 32,
+        minHeight: '100vh',
+      }}
+    >
+      <div className="lk-theme-doc__grid">
+        <SwatchGrid title="Surface" tokens={SURFACE_TOKENS} />
+        <SwatchGrid title="Text" tokens={TEXT_TOKENS} />
+        <SwatchGrid title="Accent / interactive" tokens={ACCENT_TOKENS} />
+        <SwatchGrid title="Palette" tokens={PALETTE_TOKENS} />
+      </div>
+    </div>
+  ),
+};

package/src/theme/base.less

@@ -0,0 +1,122 @@
+@import './tokens.less';
+
+// Self-hosted Oswald (variable font, weights 100–900) for the headline typeface.
+@font-face {
+  font-family: 'Oswald';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  // URL is resolved relative to the COMPILED stylesheet at dist/styles.css,
+  // so this points to dist/fonts/. Source-tree usage (less compilation
+  // happens before the file is moved) doesn't need to resolve the URL.
+  src: url('./fonts/oswald-latin-variable.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
+    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
+    U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+// Resets and global element defaults.
+.lk-root {
+  font-family: var(--lk-font);
+  font-size: var(--lk-font-size);
+  font-weight: var(--lk-font-weight-light, 300);
+  color: var(--lk-text);
+  background: var(--lk-bg);
+  line-height: 1.4;
+
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  button {
+    font: inherit;
+    color: inherit;
+    background: var(--lk-bg-elevated);
+    border: 1px solid var(--lk-border);
+    border-radius: var(--lk-radius);
+    height: var(--lk-control-height);
+    padding: 0 var(--lk-spacing-md);
+    cursor: pointer;
+    backdrop-filter: blur(var(--lk-glass-blur, 0));
+    -webkit-backdrop-filter: blur(var(--lk-glass-blur, 0));
+
+    &:hover {
+      border-color: var(--lk-accent);
+      color: var(--lk-accent);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--lk-focus-ring);
+      outline-offset: 1px;
+    }
+
+    &:disabled {
+      color: var(--lk-text-disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  input[type="range"] {
+    accent-color: var(--lk-accent);
+  }
+}
+
+// Cosmic background applied to the Lab root. The starscape sits as a fixed
+// pseudo-element so panning the workspace doesn't shift the field of stars.
+.lk-lab {
+  position: relative;
+  isolation: isolate;
+  background: var(--lk-space-nebula, var(--lk-bg));
+  background-attachment: fixed;
+}
+
+.lk-lab::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  background-image:
+    radial-gradient(1.2px 1.2px at 4% 18%, #fff, transparent 60%),
+    radial-gradient(1px 1px at 9% 64%, #fff, transparent 60%),
+    radial-gradient(1.5px 1.5px at 14% 36%, #fff, transparent 60%),
+    radial-gradient(1px 1px at 19% 82%, #cce, transparent 60%),
+    radial-gradient(0.8px 0.8px at 23% 28%, #fff, transparent 60%),
+    radial-gradient(1.4px 1.4px at 28% 55%, #fff, transparent 60%),
+    radial-gradient(1px 1px at 33% 12%, #ffe, transparent 60%),
+    radial-gradient(1.2px 1.2px at 37% 70%, #fff, transparent 60%),
+    radial-gradient(0.7px 0.7px at 42% 40%, #fff, transparent 60%),
+    radial-gradient(1.5px 1.5px at 47% 88%, #fff, transparent 60%),
+    radial-gradient(1px 1px at 52% 22%, #cef, transparent 60%),
+    radial-gradient(1.3px 1.3px at 57% 60%, #fff, transparent 60%),
+    radial-gradient(0.9px 0.9px at 62% 35%, #fff, transparent 60%),
+    radial-gradient(1.1px 1.1px at 66% 75%, #fff, transparent 60%),
+    radial-gradient(1.4px 1.4px at 71% 14%, #fff, transparent 60%),
+    radial-gradient(1px 1px at 76% 50%, #fff, transparent 60%),
+    radial-gradient(0.8px 0.8px at 81% 80%, #ffe, transparent 60%),
+    radial-gradient(1.3px 1.3px at 85% 25%, #fff, transparent 60%),
+    radial-gradient(1px 1px at 89% 62%, #cce, transparent 60%),
+    radial-gradient(1.5px 1.5px at 93% 38%, #fff, transparent 60%),
+    radial-gradient(0.9px 0.9px at 97% 78%, #fff, transparent 60%);
+  background-repeat: no-repeat;
+}
+
+// Light theme opts out of the cosmic backdrop & starscape.
+.lk-theme-light.lk-lab {
+  background: var(--lk-bg);
+  background-attachment: scroll;
+}
+
+.lk-theme-light.lk-lab::before {
+  display: none;
+}
+
+// Headline / display text uses Oswald light at tighter line-height.
+.lk-lab h1,
+.lk-lab h2,
+.lk-lab h3 {
+  font-family: var(--lk-font-display);
+  font-weight: var(--lk-font-weight-light, 300);
+  letter-spacing: 0.01em;
+  line-height: 1.2;
+}