@weasel-js/labkit 0.8.0 → 1.0.0

package/dist/index.js

@@ -1,10 +1,10 @@
-export { LayerStack } from './chunk-OHGEOTCV.js';
-import { p, F } from './chunk-FBZCQXI2.js';
-import './chunk-6V7ROR7G.js';
+export { LayerStack } from './chunk-HNXVLKBG.js';
+import { p, F } from './chunk-FP5LYDVX.js';
+import './chunk-XVBXYKFJ.js';
 import { Sidebar, StatusBar, Toolbar } from './chunk-HXZHVU4G.js';
 export { FpsMeter, ScaleIndicator, Sidebar, StatusBar, Toolbar } from './chunk-HXZHVU4G.js';
-import { LabStoreContext, createLabStore, noneAdapter } from './chunk-SSMHPMDV.js';
-export { LabStoreContext, LabStoreProvider, WorkspaceIdContext, WorkspaceIdProvider, createMemoryAdapter, localStorageAdapter, noneAdapter, sessionStorageAdapter, urlHashAdapter, useExperimentState, useLabStore, useWorkspaceId } from './chunk-SSMHPMDV.js';
+import { LabStoreContext, createLabStore, noneAdapter } from './chunk-53XSBIUK.js';
+export { LabStoreContext, LabStoreProvider, WorkspaceIdContext, WorkspaceIdProvider, createMemoryAdapter, localStorageAdapter, noneAdapter, sessionStorageAdapter, urlHashAdapter, useExperimentState, useLabStore, useWorkspaceId } from './chunk-53XSBIUK.js';
 import { ControlPanel } from './chunk-VLAHRJOC.js';
 export { ControlPanel } from './chunk-VLAHRJOC.js';
 import { CanvasStack, screenToWorld } from './chunk-54IQ2DX7.js';
@@ -14,10 +14,10 @@ import { LayerList } from './chunk-2QNYYL3V.js';
 export { LayerList } from './chunk-2QNYYL3V.js';
 import { createEventBus, redo, undo, pushSnapshot } from './chunk-7BKDG73Z.js';
 export { clearUndo, createEventBus, emptyStack, pushSnapshot, redo, undo } from './chunk-7BKDG73Z.js';
-import { createContext, useContext, useMemo, useRef, useState, Children, useEffect, useCallback } from 'react';
+import { createContext, useContext, useMemo, useRef, useState, Children, useEffect, useCallback, useLayoutEffect } from 'react';
 import { useStore } from 'zustand/react';
-import { createPortal } from 'react-dom';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createPortal } from 'react-dom';
 
 // src/instrument/capabilityDetector.ts
 function detectCapabilities(instrument) {
@@ -95,6 +95,744 @@ function gridDims(count) {
   const rows = Math.ceil(count / cols);
   return { cols, rows };
 }
+
+// ../theme/dist/chunk-RATE4LL3.js
+var THEME_SOURCES = {
+  "weasel": {
+    "primitives": {
+      "gray-50": {
+        "type": "color",
+        "value": "#f5f5f6"
+      },
+      "gray-100": {
+        "type": "color",
+        "value": "#e6e7e9"
+      },
+      "gray-200": {
+        "type": "color",
+        "value": "#c9cbcf"
+      },
+      "gray-300": {
+        "type": "color",
+        "value": "#9ea1a8"
+      },
+      "gray-400": {
+        "type": "color",
+        "value": "#6f737b"
+      },
+      "gray-500": {
+        "type": "color",
+        "value": "#4d5058"
+      },
+      "gray-600": {
+        "type": "color",
+        "value": "#383b42"
+      },
+      "gray-700": {
+        "type": "color",
+        "value": "#25272c"
+      },
+      "gray-800": {
+        "type": "color",
+        "value": "#181a1e"
+      },
+      "gray-900": {
+        "type": "color",
+        "value": "#0e0f12"
+      },
+      "accent-soft": {
+        "type": "color",
+        "value": "#1d1454"
+      },
+      "accent-base": {
+        "type": "color",
+        "value": "#2e1f7a",
+        "description": "Midnight blue-violet. Deep and saturated; anchors primary actions on light and dark surfaces alike."
+      },
+      "accent-strong": {
+        "type": "color",
+        "value": "#5841b8"
+      },
+      "danger-base": {
+        "type": "color",
+        "value": "#d94a3f"
+      },
+      "warning-base": {
+        "type": "color",
+        "value": "#d99a3f"
+      },
+      "success-base": {
+        "type": "color",
+        "value": "#2ec27e"
+      },
+      "fg-on-accent": {
+        "type": "color",
+        "value": "{color.gray-50}"
+      },
+      "line-subtle": {
+        "type": "color",
+        "value": "{color.fg}",
+        "alpha": 0.1,
+        "description": "Barely-there separators (table rows)."
+      },
+      "line": {
+        "type": "color",
+        "value": "{color.fg}",
+        "alpha": 0.2,
+        "description": "Primary gridlines on sunken surfaces."
+      },
+      "line-strong": {
+        "type": "color",
+        "value": "{color.fg}",
+        "alpha": 0.4,
+        "description": "Axes and emphasized dividers."
+      },
+      "curve-color": {
+        "type": "color",
+        "value": "{color.accent-strong}",
+        "description": "Drawn data curves. Routes through the bright accent because accent-base is too dim on sunken surfaces."
+      },
+      "accent": {
+        "type": "color",
+        "value": "{color.accent-base}"
+      },
+      "accent-hover": {
+        "type": "color",
+        "value": "{color.accent-strong}"
+      },
+      "danger": {
+        "type": "color",
+        "value": "{color.danger-base}"
+      },
+      "warning": {
+        "type": "color",
+        "value": "{color.warning-base}"
+      },
+      "success": {
+        "type": "color",
+        "value": "{color.success-base}"
+      },
+      "focus-ring": {
+        "type": "color",
+        "value": "{color.accent-strong}"
+      },
+      "glass-tint": {
+        "type": "color",
+        "value": "{color.accent}",
+        "description": "Frosted-glass tint. Components compose it as color-mix(in srgb, var(--wzl-glass-tint) 78%, transparent) with backdrop-filter: blur(3px)."
+      },
+      "surface-hover": {
+        "type": "color",
+        "value": "{color.fg}",
+        "alpha": 0.1,
+        "description": "Hover wash over a raised surface. Same formula as line-subtle, different job \u2014 do not collapse them."
+      },
+      "surface-pressed": {
+        "type": "color",
+        "value": "{color.fg}",
+        "alpha": 0.18,
+        "description": "Pressed wash over a raised surface."
+      },
+      "swatch-green": {
+        "type": "color",
+        "value": "#2fdd18",
+        "description": "First of ten categorical spot colors for plotting, status and data viz. Ordered \u2014 take them in sequence. Mode-invariant on purpose: a series keeps its color when the mode flips."
+      },
+      "swatch-pink": {
+        "type": "color",
+        "value": "#ff5885"
+      },
+      "swatch-cyan": {
+        "type": "color",
+        "value": "#00dfff"
+      },
+      "swatch-gold": {
+        "type": "color",
+        "value": "#dcb700"
+      },
+      "swatch-amber": {
+        "type": "color",
+        "value": "#ff8c00"
+      },
+      "swatch-violet": {
+        "type": "color",
+        "value": "#a497ff"
+      },
+      "swatch-mint": {
+        "type": "color",
+        "value": "#00e7af"
+      },
+      "swatch-sky": {
+        "type": "color",
+        "value": "#00b8ff"
+      },
+      "swatch-orange": {
+        "type": "color",
+        "value": "#ff6b00"
+      },
+      "swatch-magenta": {
+        "type": "color",
+        "value": "#ff6eff"
+      },
+      "radius-sm": {
+        "type": "dimension",
+        "value": "3px"
+      },
+      "radius-md": {
+        "type": "dimension",
+        "value": "5px"
+      },
+      "border-w": {
+        "type": "dimension",
+        "value": "1px"
+      },
+      "line-width": {
+        "type": "dimension",
+        "value": "2px",
+        "description": "Structural lines \u2014 gridlines, dividers, axes."
+      },
+      "curve-width": {
+        "type": "dimension",
+        "value": "3px",
+        "description": "Drawn data curves. Heavier than structural lines so data reads as primary content."
+      },
+      "tb-height": {
+        "type": "dimension",
+        "value": "28px",
+        "description": "Height of a horizontal toolbar strip (ActionsBar, OptionsBar, ToggleBar, ToolOptionsBar)."
+      },
+      "radius-lg": {
+        "type": "dimension",
+        "value": "14px"
+      },
+      "control-h": {
+        "type": "dimension",
+        "value": "28px",
+        "description": "Height of an interactive control \u2014 button, input, select. Distinct from tb-height, which sizes the strip a row of them sits in."
+      },
+      "glass-blur": {
+        "type": "dimension",
+        "value": "3px",
+        "description": "Backdrop blur radius for frosted surfaces. Pairs with glass-tint."
+      },
+      "font-size": {
+        "type": "dimension",
+        "value": "13px"
+      },
+      "font-size-sm": {
+        "type": "dimension",
+        "value": "11px"
+      },
+      "space-xs": {
+        "type": "dimension",
+        "value": "4px"
+      },
+      "space-sm": {
+        "type": "dimension",
+        "value": "8px"
+      },
+      "space-md": {
+        "type": "dimension",
+        "value": "12px"
+      },
+      "space-lg": {
+        "type": "dimension",
+        "value": "16px"
+      },
+      "z-toolbar": {
+        "type": "number",
+        "value": 10
+      },
+      "z-overlay": {
+        "type": "number",
+        "value": 20
+      },
+      "z-modal": {
+        "type": "number",
+        "value": 30
+      },
+      "backdrop": {
+        "type": "gradient",
+        "value": "none",
+        "description": "Layered backdrop fill for a page or lab root. `none` here; a theme with a signature background sets it."
+      },
+      "motion-fast": {
+        "type": "duration",
+        "value": "120ms",
+        "description": "Micro-interactions \u2014 hover, focus, pressed."
+      },
+      "motion-medium": {
+        "type": "duration",
+        "value": "240ms",
+        "description": "Entrances and exits \u2014 toasts, popovers, panels."
+      },
+      "ease-in-cubic": {
+        "type": "cubicBezier",
+        "value": [
+          0.32,
+          0,
+          0.67,
+          0
+        ]
+      },
+      "ease-out-cubic": {
+        "type": "cubicBezier",
+        "value": [
+          0.33,
+          1,
+          0.68,
+          1
+        ]
+      },
+      "ease-in-out-cubic": {
+        "type": "cubicBezier",
+        "value": [
+          0.65,
+          0,
+          0.35,
+          1
+        ]
+      },
+      "ease-out-back": {
+        "type": "cubicBezier",
+        "value": [
+          0.34,
+          1.56,
+          0.64,
+          1
+        ]
+      },
+      "font-ui": {
+        "type": "fontFamily",
+        "value": [
+          "Oswald",
+          "Helvetica Neue Condensed",
+          "Arial Narrow",
+          "system-ui",
+          "sans-serif"
+        ],
+        "description": "Condensed UI/display face. The heavier cuts get blocky at any size, so the weight tokens stay in the 200-400 range."
+      },
+      "font-display": {
+        "type": "fontFamily",
+        "value": [
+          "Oswald",
+          "Helvetica Neue Condensed",
+          "Arial Narrow",
+          "system-ui",
+          "sans-serif"
+        ]
+      },
+      "font-body": {
+        "type": "fontFamily",
+        "value": [
+          "Inter",
+          "system-ui",
+          "-apple-system",
+          "Segoe UI",
+          "sans-serif"
+        ]
+      },
+      "font-mono": {
+        "type": "fontFamily",
+        "value": [
+          "ui-monospace",
+          "SFMono-Regular",
+          "Menlo",
+          "Consolas",
+          "monospace"
+        ]
+      },
+      "font-weight-light": {
+        "type": "fontWeight",
+        "value": 200
+      },
+      "font-weight-normal": {
+        "type": "fontWeight",
+        "value": 300
+      },
+      "font-weight-medium": {
+        "type": "fontWeight",
+        "value": 350
+      },
+      "font-weight-bold": {
+        "type": "fontWeight",
+        "value": 400
+      }
+    },
+    "modes": {
+      "dark": {
+        "surface": {
+          "type": "color",
+          "value": "{color.gray-800}"
+        },
+        "surface-raised": {
+          "type": "color",
+          "value": "{color.gray-700}"
+        },
+        "surface-sunken": {
+          "type": "color",
+          "value": "{color.gray-900}"
+        },
+        "fg": {
+          "type": "color",
+          "value": "{color.gray-100}"
+        },
+        "fg-muted": {
+          "type": "color",
+          "value": "{color.gray-300}"
+        },
+        "fg-subtle": {
+          "type": "color",
+          "value": "{color.gray-400}"
+        },
+        "border": {
+          "type": "color",
+          "value": "{color.gray-700}"
+        },
+        "border-strong": {
+          "type": "color",
+          "value": "{color.gray-600}"
+        },
+        "accent-fg": {
+          "type": "color",
+          "value": "{color.accent-strong}",
+          "description": "Accent for foreground use \u2014 text, icons, selected labels drawn on a surface. accent is a fill; the midnight base is too dim to read as text on dark surfaces."
+        },
+        "fg-inverse": {
+          "type": "color",
+          "value": "{color.gray-900}",
+          "description": "Text drawn on a filled foreground-colored element (e.g. a slider thumb). Flips with the mode, so it is a semantic, not an alias to a primitive."
+        }
+      },
+      "light": {
+        "surface": {
+          "type": "color",
+          "value": "{color.gray-50}"
+        },
+        "surface-raised": {
+          "type": "color",
+          "value": "{color.gray-100}"
+        },
+        "surface-sunken": {
+          "type": "color",
+          "value": "{color.gray-200}"
+        },
+        "fg": {
+          "type": "color",
+          "value": "{color.gray-900}"
+        },
+        "fg-muted": {
+          "type": "color",
+          "value": "{color.gray-600}"
+        },
+        "fg-subtle": {
+          "type": "color",
+          "value": "{color.gray-500}"
+        },
+        "border": {
+          "type": "color",
+          "value": "{color.gray-200}"
+        },
+        "border-strong": {
+          "type": "color",
+          "value": "{color.gray-300}"
+        },
+        "accent-fg": {
+          "type": "color",
+          "value": "{color.accent-base}",
+          "description": "Flips to the deep base in light mode, where it is the legible one."
+        },
+        "fg-inverse": {
+          "type": "color",
+          "value": "{color.gray-50}",
+          "description": "Flips with the mode \u2014 see the dark layer."
+        }
+      }
+    }
+  }
+};
+var weaselTheme = {
+  name: "weasel",
+  extends: null,
+  defaultMode: "dark",
+  tokens: THEME_SOURCES.weasel.primitives,
+  modes: THEME_SOURCES.weasel.modes
+};
+function hexToRgba(hex, alpha) {
+  const m = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(hex.trim());
+  if (!m) throw new Error(`Expected a hex color, got "${hex}"`);
+  const body = m[1];
+  const full = body.length === 3 ? body.replace(/./g, (c) => c + c) : body;
+  const r = Number.parseInt(full.slice(0, 2), 16);
+  const g = Number.parseInt(full.slice(2, 4), 16);
+  const b = Number.parseInt(full.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+var REF = /^\{([^}]+)\}$/;
+function refTarget(value) {
+  if (typeof value !== "string") return null;
+  const m = REF.exec(value.trim());
+  if (!m) return null;
+  const path = m[1];
+  const dot = path.indexOf(".");
+  return dot === -1 ? path : path.slice(dot + 1);
+}
+function fontStack(value) {
+  return value.map((f) => typeof f === "string" && /\s/.test(f) ? `'${f}'` : String(f)).join(", ");
+}
+function serialize(type, value) {
+  if (Array.isArray(value)) {
+    if (type === "cubicBezier") return `cubic-bezier(${value.join(", ")})`;
+    if (type === "fontFamily") return fontStack(value);
+    return value.join(", ");
+  }
+  return String(value);
+}
+function resolveTokens(tokens) {
+  const out = {};
+  const inProgress = /* @__PURE__ */ new Set();
+  const resolveOne = (name) => {
+    const cached = out[name];
+    if (cached !== void 0) return cached;
+    const token = tokens[name];
+    if (!token) throw new Error(`Unknown token "${name}"`);
+    if (inProgress.has(name)) {
+      throw new Error(`Reference cycle at token "${name}" (${[...inProgress].join(" \u2192 ")})`);
+    }
+    inProgress.add(name);
+    const target = refTarget(token.value);
+    let value;
+    if (target === null) {
+      value = serialize(token.type, token.value);
+    } else if (!tokens[target]) {
+      throw new Error(`Token "${name}" references "${target}", which is not defined`);
+    } else {
+      value = resolveOne(target);
+    }
+    if (token.alpha !== void 0) value = hexToRgba(value, token.alpha);
+    inProgress.delete(name);
+    out[name] = value;
+    return value;
+  };
+  for (const name of Object.keys(tokens)) resolveOne(name);
+  return out;
+}
+function chain(theme) {
+  const out = [];
+  for (let t = theme; t; t = t.extends) out.unshift(t);
+  return out;
+}
+function resolveTheme(theme, mode) {
+  const themes = chain(theme);
+  const effectiveMode = themes.some((t) => mode in t.modes) ? mode : theme.defaultMode;
+  let merged = {};
+  for (const t of themes) {
+    merged = { ...merged, ...t.tokens, ...t.modes[effectiveMode] ?? {} };
+  }
+  const resolved = resolveTokens(merged);
+  const out = {};
+  for (const [name, value] of Object.entries(resolved)) out[`--wzl-${name}`] = value;
+  return out;
+}
+var STYLE_ID = "wzl-themes";
+var emitted = /* @__PURE__ */ new Set();
+var sheet = null;
+var styleEl = null;
+function canAdopt() {
+  return typeof CSSStyleSheet !== "undefined" && "replaceSync" in CSSStyleSheet.prototype && Array.isArray(document.adoptedStyleSheets);
+}
+function appendRule(css) {
+  if (canAdopt()) {
+    if (!sheet) {
+      sheet = new CSSStyleSheet();
+      document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+    }
+    sheet.insertRule(css, sheet.cssRules.length);
+    return;
+  }
+  if (!styleEl) {
+    styleEl = document.createElement("style");
+    styleEl.id = STYLE_ID;
+    document.head.appendChild(styleEl);
+  }
+  styleEl.textContent += `${css}
+`;
+}
+function applyTheme(el, theme, mode) {
+  if (typeof document === "undefined") return;
+  const key = `${theme.name}::${mode}`;
+  if (!emitted.has(key)) {
+    const resolved = resolveTheme(theme, mode);
+    const body = Object.entries(resolved).map(([name, value]) => `${name}: ${value};`).join(" ");
+    appendRule(`[data-wzl-theme='${theme.name}'][data-wzl-mode='${mode}'] { ${body} }`);
+    emitted.add(key);
+  }
+  el.setAttribute("data-wzl-theme", theme.name);
+  el.setAttribute("data-wzl-mode", mode);
+}
+var ThemeContext = createContext(null);
+function ThemeProvider({
+  theme = weaselTheme,
+  mode,
+  className,
+  style,
+  children
+}) {
+  const ref = useRef(null);
+  const effectiveMode = mode ?? theme.defaultMode;
+  const value = useMemo(
+    () => ({ theme, mode: effectiveMode, resolved: resolveTheme(theme, effectiveMode) }),
+    [theme, effectiveMode]
+  );
+  useLayoutEffect(() => {
+    if (ref.current) applyTheme(ref.current, theme, effectiveMode);
+  }, [theme, effectiveMode]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className,
+      style,
+      "data-wzl-theme": theme.name,
+      "data-wzl-mode": effectiveMode,
+      children
+    }
+  ) });
+}
+function useThemeOptional() {
+  return useContext(ThemeContext);
+}
+
+// ../theme/dist/index.js
+var ALPHA_EXT = "com.weasel.alpha";
+var isToken = (v) => typeof v === "object" && v !== null && "$value" in v;
+function flattenTokens(doc) {
+  const out = {};
+  for (const [groupName, group] of Object.entries(doc)) {
+    if (groupName.startsWith("$")) continue;
+    if (typeof group !== "object" || group === null) continue;
+    const g = group;
+    const groupType = g.$type;
+    for (const [leaf, node] of Object.entries(g)) {
+      if (leaf.startsWith("$")) continue;
+      if (!isToken(node)) continue;
+      const type = node.$type ?? groupType;
+      if (!type) {
+        throw new Error(`Token "${leaf}" has no $type and its group "${groupName}" declares none`);
+      }
+      if (leaf in out) {
+        throw new Error(`Duplicate token name "${leaf}" \u2014 leaf keys must be unique across type groups`);
+      }
+      const alphaRaw = node.$extensions?.[ALPHA_EXT];
+      const token = {
+        type,
+        value: node.$value,
+        alpha: typeof alphaRaw === "number" ? alphaRaw : void 0,
+        description: node.$description
+      };
+      out[leaf] = token;
+    }
+  }
+  return out;
+}
+function loadDTCG(doc) {
+  if (typeof doc.name !== "string" || doc.name === "") {
+    throw new Error('DTCG document needs a string "name"');
+  }
+  const modes = {};
+  for (const [mode, body] of Object.entries(doc.modes ?? {})) {
+    modes[mode] = flattenTokens(body);
+  }
+  const base = doc.extends === void 0 ? weaselTheme : doc.extends;
+  return {
+    name: doc.name,
+    extends: base,
+    defaultMode: typeof doc.defaultMode === "string" ? doc.defaultMode : base?.defaultMode ?? "dark",
+    tokens: flattenTokens(doc.primitives ?? {}),
+    modes
+  };
+}
+
+// src/theme/interstellar.tokens.json
+var interstellar_tokens_default = {
+  name: "interstellar",
+  defaultMode: "dark",
+  primitives: {
+    dimension: {
+      $type: "dimension",
+      "radius-md": { $value: "6px" },
+      "glass-blur": { $value: "12px" }
+    },
+    fontWeight: {
+      $type: "fontWeight",
+      "font-weight-light": { $value: 300 },
+      "font-weight-medium": { $value: 500 },
+      "font-weight-bold": { $value: 700 }
+    }
+  },
+  modes: {
+    dark: {
+      color: {
+        $type: "color",
+        surface: { $value: "#0a0a14" },
+        "surface-raised": { $value: "rgba(20, 20, 36, 0.55)" },
+        "surface-sunken": { $value: "#02020a" },
+        border: { $value: "rgba(255, 255, 255, 0.14)" },
+        "line-subtle": { $value: "rgba(255, 255, 255, 0.08)" },
+        fg: { $value: "#e8e8f0" },
+        "fg-muted": { $value: "#a8a8c0" },
+        "fg-subtle": { $value: "#5a5a78" },
+        accent: { $value: "#b08adb" },
+        "accent-hover": { $value: "#c6a3ee" },
+        "focus-ring": { $value: "rgba(176, 138, 219, 0.45)" }
+      },
+      gradient: {
+        $type: "gradient",
+        backdrop: {
+          $value: "radial-gradient(ellipse 60% 80% at 18% 30%, rgba(150, 80, 200, 0.22), transparent 70%), radial-gradient(ellipse 55% 90% at 78% 70%, rgba(220, 100, 140, 0.18), transparent 65%), radial-gradient(ellipse 50% 70% at 50% 50%, rgba(60, 110, 200, 0.18), transparent 75%), radial-gradient(ellipse at center, #0a0a18 0%, #02020a 100%)"
+        }
+      }
+    },
+    light: {
+      color: {
+        $type: "color",
+        surface: { $value: "#fafaf7" },
+        "surface-raised": { $value: "#ffffff" },
+        "surface-sunken": { $value: "#f0ebe2" },
+        border: { $value: "#c9bba5" },
+        "line-subtle": { $value: "rgba(0, 0, 0, 0.08)" },
+        fg: { $value: "#2a2018" },
+        "fg-muted": { $value: "#6b5c4a" },
+        "fg-subtle": { $value: "#a89b85" },
+        accent: { $value: "#a86f3c" },
+        "accent-hover": { $value: "#c2854f" },
+        "focus-ring": { $value: "rgba(168, 111, 60, 0.35)" }
+      }
+    }
+  }
+};
+
+// src/theme/interstellar.ts
+var interstellarTheme = loadDTCG(interstellar_tokens_default);
+function query() {
+  if (typeof window === "undefined" || !window.matchMedia) return null;
+  return window.matchMedia("(prefers-color-scheme: light)");
+}
+function useResolvedMode(mode) {
+  const [system, setSystem] = useState(
+    () => query()?.matches ? "light" : "dark"
+  );
+  useEffect(() => {
+    if (mode !== "auto") return;
+    const mq = query();
+    if (!mq) return;
+    const onChange = (e) => setSystem(e.matches ? "light" : "dark");
+    mq.addEventListener("change", onChange);
+    return () => mq.removeEventListener("change", onChange);
+  }, [mode]);
+  return mode === "auto" ? system : mode;
+}
 function DragGhost({ item, screenPos }) {
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
@@ -670,9 +1408,10 @@ function resetWorkspace(workspaces, id, instruments) {
   };
   return [...workspaces.slice(0, idx), reset, ...workspaces.slice(idx + 1)];
 }
-function LabShell({ title, children, header, footer, theme = "auto" }) {
-  const themeClass = theme === "light" ? " lk-theme-light" : theme === "interstellar" ? " lk-theme-interstellar" : "";
-  return /* @__PURE__ */ jsxs("div", { className: `lk-root lk-shell${themeClass}`, children: [
+function LabShell({ title, children, header, footer, mode = "auto" }) {
+  const resolved = useResolvedMode(mode);
+  const outer = useThemeOptional();
+  const shell = /* @__PURE__ */ jsxs("div", { className: "lk-root lk-shell", children: [
     /* @__PURE__ */ jsxs("header", { className: "lk-shell-header", children: [
       /* @__PURE__ */ jsx("h1", { className: "lk-shell-title", children: title }),
       header && /* @__PURE__ */ jsx("div", { className: "lk-shell-header-actions", children: header })
@@ -680,6 +1419,7 @@ function LabShell({ title, children, header, footer, theme = "auto" }) {
     /* @__PURE__ */ jsx("main", { className: "lk-shell-body", children }),
     footer && /* @__PURE__ */ jsx("footer", { className: "lk-shell-footer", children: footer })
   ] });
+  return outer ? shell : /* @__PURE__ */ jsx(ThemeProvider, { theme: interstellarTheme, mode: resolved, children: shell });
 }
 function WorkspaceGrid({ children }) {
   const count = Children.count(children);
@@ -690,8 +1430,8 @@ function WorkspaceGrid({ children }) {
   };
   return /* @__PURE__ */ jsx("div", { className: "lk-workspace-grid", style, children });
 }
-function buildStore(instruments, defaultInstrument, storage, storageKey, initialTheme) {
-  const store = createLabStore({ storageKey, storage, initialTheme });
+function buildStore(instruments, defaultInstrument, storage, storageKey, initialMode) {
+  const store = createLabStore({ storageKey, storage, initialMode });
   if (store.getState().workspaces.length === 0) {
     const seeded = addWorkspace([], instruments, defaultInstrument);
     const record = seeded[0];
@@ -722,7 +1462,7 @@ function Lab({
   defaultInstrument,
   storage,
   storageKey,
-  theme,
+  mode,
   nebula,
   title,
   children
@@ -737,24 +1477,25 @@ 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(() => {
     const replaceWorkspaces = (next) => {
       const currentById = new Map(store.getState().workspaces.map((w) => [w.id, w]));
       const merged = next.map((w) => currentById.get(w.id) ?? w);
       store.setState({ workspaces: merged });
-      store.getState().setTheme(store.getState().theme);
+      store.getState().setMode(store.getState().mode);
     };
     return {
       instruments,
@@ -792,15 +1533,23 @@ 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]);
-  const themeClass = themeValue === "light" ? "lk-theme-light" : themeValue === "interstellar" ? "lk-theme-interstellar" : "";
-  const nebulaStyle = themeValue === "interstellar" && nebula && nebula.length > 0 ? { ["--lk-space-nebula"]: buildNebula(nebula) } : void 0;
-  return /* @__PURE__ */ jsx(LabStoreContext.Provider, { value: { store }, children: /* @__PURE__ */ jsx(LabContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: `lk-lab ${themeClass}`.trim(), style: nebulaStyle, children: /* @__PURE__ */ jsx(LabShell, { title: title ?? "Labkit", theme: themeValue, header: children, children: /* @__PURE__ */ jsx(WorkspaceGrid, { children: workspaces.map((w) => /* @__PURE__ */ jsx(Workspace, { id: w.id }, w.id)) }) }) }) }) });
+  }, [instruments, workspaces, savedSnapshots, modeValue, store]);
+  const backdropStyle = resolvedMode === "dark" && nebula && nebula.length > 0 ? { ["--wzl-backdrop"]: buildNebula(nebula) } : void 0;
+  return /* @__PURE__ */ jsx(LabStoreContext.Provider, { value: { store }, children: /* @__PURE__ */ jsx(LabContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    ThemeProvider,
+    {
+      theme: interstellarTheme,
+      mode: resolvedMode,
+      className: "lk-lab",
+      style: backdropStyle,
+      children: /* @__PURE__ */ jsx(LabShell, { title: title ?? "Labkit", mode: modeValue, header: children, children: /* @__PURE__ */ jsx(WorkspaceGrid, { children: workspaces.map((w) => /* @__PURE__ */ jsx(Workspace, { id: w.id }, w.id)) }) })
+    }
+  ) }) });
 }
 function CurveField({
   values,
@@ -1420,6 +2169,6 @@ function ToggleRow({
   }) }) });
 }
 
-export { CheckboxRow, ColorRow, CurveField, DefaultSidebar, DefaultStatusBar, DefaultToolbar, EffectCard, EffectCardList, Lab, LabContext, LabShell, NumberRow, PropertyGroup, PropertyList, PropertyPanel, PropertyRow, SelectRow, SliderRow, Subpanel, TextRow, ToggleRow, Workspace, WorkspaceChrome, WorkspaceGrid, addWorkspace, cloneWorkspace, closeWorkspace, defineInstrument, detectCapabilities, gridDims, resetWorkspace, useLabContext, validateConfigSchema };
+export { CheckboxRow, ColorRow, CurveField, DefaultSidebar, DefaultStatusBar, DefaultToolbar, EffectCard, EffectCardList, Lab, LabContext, LabShell, NumberRow, PropertyGroup, PropertyList, PropertyPanel, PropertyRow, SelectRow, SliderRow, Subpanel, TextRow, ToggleRow, Workspace, WorkspaceChrome, WorkspaceGrid, addWorkspace, cloneWorkspace, closeWorkspace, defineInstrument, detectCapabilities, gridDims, interstellarTheme, resetWorkspace, useLabContext, validateConfigSchema };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map