@stnd/lab 0.2.0 → 1.0.0

package/Lab.svelte

@@ -0,0 +1,1809 @@
+<script>
+  /**
+   * @stnd/lab — The Design Lab
+   *
+   * Svelte 5 island: full-height side panel for live-editing
+   * the seed-first color system, typography, and scale tokens.
+   * Inspired by https://rsms.me/inter/lab/
+   *
+   * Integration: <Lab client:load /> inside a transition:persist zone.
+   * Keyboard: ⇧⌘S toggle · ⇧⌘D debug · Esc close
+   */
+  import { onMount } from "svelte";
+  import { fly, slide } from "@stnd/ui/transitions.js";
+  import bezier from "bezier-easing";
+  import { modules as loadedModules } from "virtual:stnd/modules-metadata";
+  import { confirm } from "@stnd/ui/dialog.js";
+  import Combobox from "../ui/Combobox.svelte";
+
+  // Sidebar transition parameters (defaults)
+  let sidebarDuration = $state(2000); // milliseconds
+  let customEasing = $state(bezier(0.22, 1, 0.36, 1));
+
+  // =========================================================================
+  // MODULE METADATA — dynamic theme & font discovery
+  // =========================================================================
+  const THEMES = [
+    { value: "", label: "None" },
+    { value: "default", label: "Default" },
+    ...loadedModules
+      .filter((m) => m.meta?.type === "theme")
+      .map((m) => ({ value: m.meta.themeId, label: m.meta.label }))
+      .sort((a, b) => a.label.localeCompare(b.label)),
+  ];
+
+  const FONTS = loadedModules
+    .filter((m) => m.meta?.type === "font")
+    .map((m) => m.meta.label)
+    .sort((a, b) => a.localeCompare(b));
+
+  // =========================================================================
+  // STATE
+  // =========================================================================
+  let view = $state("dormant"); // dormant | open
+  let closeTimer;
+  let isScrolling = $state(false);
+  let pinned = $state(false);
+  let scrollTimer;
+  let sidebarEl = $state();
+
+  // Font dropdown state: tracks which font field is showing the picker
+  let fontDropdown = $state(null); // null | "--font-text" | "--font-header" | ...
+  let fontSearch = $state("");
+  let fontHighlight = $state(-1);
+
+  let filteredFonts = $derived(
+    fontSearch.trim() === ""
+      ? FONTS
+      : FONTS.filter((f) => f.toLowerCase().includes(fontSearch.toLowerCase())),
+  );
+
+  function openFontDropdown(token) {
+    fontDropdown = token;
+    fontSearch = "";
+    fontHighlight = -1;
+  }
+
+  function closeFontDropdown() {
+    fontDropdown = null;
+    fontSearch = "";
+    fontHighlight = -1;
+  }
+
+  function selectFont(token, name) {
+    const val =
+      name.includes(" ") && !name.startsWith('"') ? `"${name}"` : name;
+    writeVar(token, val);
+    loadGoogleFont(name);
+    if (token === "--font-text") fontText = val;
+    else if (token === "--font-header") fontHeader = val;
+    else if (token === "--font-interface") fontInterface = val;
+    else if (token === "--font-monospace") fontMono = val;
+    closeFontDropdown();
+  }
+
+  function onFontKeydown(token, e) {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      fontHighlight = Math.min(fontHighlight + 1, filteredFonts.length - 1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      fontHighlight = Math.max(fontHighlight - 1, -1);
+    } else if (e.key === "Enter" && fontHighlight >= 0) {
+      e.preventDefault();
+      selectFont(token, filteredFonts[fontHighlight]);
+    } else if (e.key === "Escape") {
+      closeFontDropdown();
+    }
+  }
+
+  function openLab() {
+    clearTimeout(closeTimer);
+    view = "open";
+  }
+
+  function requestCloseLab() {
+    if (pinned) return;
+    // Keep open if user is interacting with inputs inside
+    if (
+      sidebarEl &&
+      typeof document !== "undefined" &&
+      sidebarEl.contains(document.activeElement)
+    ) {
+      return;
+    }
+
+    clearTimeout(closeTimer);
+    closeTimer = setTimeout(() => {
+      view = "dormant";
+    }, 100); // Increased delay for smoother transitions
+  }
+
+  function cancelCloseLab() {
+    clearTimeout(closeTimer);
+  }
+
+  let modified = $state(new Set());
+  let version = $state("");
+  let viewportW = $state(0);
+
+  // Collapsible sections
+  let sectionsOpen = $state({
+    theme: false,
+    colors: false,
+    typography: false,
+    scale: false,
+    spacing: false,
+    debug: false,
+    links: false,
+  });
+
+  // Color scheme detection
+  let systemScheme = $state(
+    typeof window !== "undefined" &&
+      window.matchMedia?.("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light",
+  );
+  let userScheme = $state("auto");
+  let scheme = $derived(userScheme === "auto" ? systemScheme : userScheme);
+
+  $effect(() => {
+    if (typeof sessionStorage !== "undefined") {
+      sessionStorage.setItem("stnd-scheme", userScheme);
+      sessionStorage.setItem("stnd-pinned", String(pinned));
+      sessionStorage.setItem("stnd-sections", JSON.stringify(sectionsOpen));
+    }
+    if (typeof document !== "undefined") {
+      if (userScheme === "auto") {
+        document.documentElement.removeAttribute("data-lab-scheme");
+      } else {
+        document.documentElement.setAttribute("data-lab-scheme", userScheme);
+      }
+    }
+  });
+  let bgToken = $derived(
+    scheme === "dark" ? "--color-dark-background" : "--color-light-background",
+  );
+  let fgToken = $derived(
+    scheme === "dark" ? "--color-dark-foreground" : "--color-light-foreground",
+  );
+
+  // Quick panel seeds (scheme-aware)
+  let seedBg = $state("");
+  let seedFg = $state("");
+  let seedBgHex = $state("#ffffff");
+  let seedFgHex = $state("#262626");
+  let fontText = $state("");
+  let fontHeader = $state("");
+  let fontInterface = $state("");
+  let fontMono = $state("");
+  let fontSize = $state(1);
+  let lineHeight = $state(1.414);
+  let rhythmGap = $state(1);
+  let ratio = $state(1.414);
+  let gapBody = $state(1);
+  let radius = $state(0);
+  let debug = $state(false);
+  let eink = $state(false);
+  let ink = $state(false);
+  let texture = $state(false);
+  let stnd1 = $state(false);
+  let stnd2 = $state(false);
+  let stnd3 = $state(false);
+  let theme = $state("");
+
+  // Google Fonts tracking
+  const fontsLoaded = new Set();
+
+  // Stored defaults for reset
+  let defaults = {};
+
+  // =========================================================================
+  // HELPERS
+  // =========================================================================
+
+  /** Read a CSS custom property, resolving one level of var() */
+  function readVar(token) {
+    const raw = getComputedStyle(document.documentElement)
+      .getPropertyValue(token)
+      .trim();
+    if (!raw) return "";
+    const m = raw.match(/^var\(--([\w-]+)\)$/);
+    return m
+      ? getComputedStyle(document.documentElement)
+          .getPropertyValue(`--${m[1]}`)
+          .trim()
+      : raw;
+  }
+
+  /** Write an inline override and mark as modified */
+  function writeVar(token, value) {
+    document.documentElement.style.setProperty(token, value);
+    modified = new Set([...modified, token]);
+
+    // Persist to session
+    try {
+      const overrides = JSON.parse(
+        sessionStorage.getItem("stnd-overrides") || "{}",
+      );
+      overrides[token] = value;
+      sessionStorage.setItem("stnd-overrides", JSON.stringify(overrides));
+    } catch {
+      /* noop */
+    }
+  }
+
+  /** Convert any CSS color to #hex for <input type="color"> */
+  function toHex(css) {
+    if (!css) return "#000000";
+    if (/^#[0-9a-f]{6}$/i.test(css.trim())) return css.trim();
+    if (css.trim().toLowerCase() === "white") return "#ffffff";
+    if (css.trim().toLowerCase() === "black") return "#000000";
+
+    // Use a temp element to resolve any CSS color format
+    try {
+      const el = document.createElement("div");
+      el.style.color = css;
+      document.body.appendChild(el);
+      const resolved = getComputedStyle(el).color;
+      el.remove();
+      const m = resolved.match(/(\d+)/g);
+      if (m && m.length >= 3) {
+        return (
+          "#" +
+          m
+            .slice(0, 3)
+            .map((n) => parseInt(n).toString(16).padStart(2, "0"))
+            .join("")
+        );
+      }
+    } catch {
+      /* noop */
+    }
+    return "#000000";
+  }
+
+  /** Resolve a CSS length (var, calc, unit) to pixels */
+  function resolvePx(value) {
+    if (typeof document === "undefined" || !value) return 0;
+    try {
+      const el = document.createElement("div");
+      el.style.position = "absolute";
+      el.style.visibility = "hidden";
+      el.style.width = value;
+      document.body.appendChild(el);
+      const px = parseFloat(getComputedStyle(el).width);
+      el.remove();
+      return isNaN(px) ? 0 : px;
+    } catch {
+      return 0;
+    }
+  }
+
+  /** Read all token values from the current DOM cascade */
+  function syncFromDOM() {
+    // Detect current scheme
+    systemScheme = window.matchMedia?.("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+
+    // Read the active scheme's seeds
+    seedBg = readVar(bgToken);
+    seedFg = readVar(fgToken);
+    seedBgHex = toHex(seedBg);
+    seedFgHex = toHex(seedFg);
+    fontText = readVar("--font-text");
+    fontHeader = readVar("--font-header");
+    fontInterface = readVar("--font-interface");
+    fontMono = readVar("--font-monospace");
+    fontSize = parseFloat(readVar("--font-size")) || 1;
+    lineHeight = parseFloat(readVar("--line-height")) || 1.414;
+    ratio = parseFloat(readVar("--optical-ratio")) || 1.414;
+
+    const rawGap = readVar("--gap-body");
+    const pxSpace = resolvePx("var(--space)");
+
+    // Calculate body gap multiplier
+    const pxGap = resolvePx(rawGap);
+    gapBody = pxSpace ? pxGap / pxSpace : 1;
+
+    // Calculate rhythm gap multiplier
+    const pxRhythm = resolvePx("var(--rhythm-gap-new-line)");
+    rhythmGap = pxSpace ? pxRhythm / pxSpace : 0.5;
+
+    // Calculate radius multiplier
+    const rawRadius = readVar("--radius");
+    const pxRadius = resolvePx(rawRadius);
+    radius = pxSpace ? pxRadius / pxSpace : 0;
+
+    debug = document.documentElement.classList.contains("stnd-debug");
+    eink = document.documentElement.classList.contains("standard-eink");
+    theme = document.documentElement.getAttribute("data-theme") || "";
+    viewportW = window.innerWidth;
+  }
+
+  /** Store current computed values as defaults for reset */
+  function storeDefaults() {
+    const tokens = [
+      "--color-light-background",
+      "--color-light-foreground",
+      "--color-dark-background",
+      "--color-dark-foreground",
+      "--font-text",
+      "--font-header",
+      "--font-interface",
+      "--font-monospace",
+      "--font-size",
+      "--line-height",
+      "--optical-ratio",
+      "--gap-body",
+      "--rhythm-gap-new-line",
+      "--radius",
+    ];
+    for (const t of tokens) {
+      defaults[t] = readVar(t);
+    }
+  }
+
+  /** Load a Google Font by family name */
+  function loadGoogleFont(family) {
+    const clean = family.trim();
+    const system = [
+      "system-ui",
+      "sans-serif",
+      "serif",
+      "monospace",
+      "cursive",
+      "ui-monospace",
+      "ui-sans-serif",
+      "ui-serif",
+      "ui-rounded",
+      "Georgia",
+      "Times New Roman",
+      "Arial",
+    ];
+    if (!clean || system.includes(clean) || fontsLoaded.has(clean)) return;
+    fontsLoaded.add(clean);
+    const encoded = encodeURIComponent(clean);
+    try {
+      const link = document.createElement("link");
+      link.rel = "stylesheet";
+      link.href = `https://fonts.googleapis.com/css2?family=${encoded}:wght@100..900&display=swap`;
+      document.head.appendChild(link);
+    } catch {
+      /* noop */
+    }
+  }
+
+  /** Copy current overrides as CSS to clipboard */
+  function copyCSS() {
+    const tokens = [
+      "--color-light-background",
+      "--color-light-foreground",
+      "--color-dark-background",
+      "--color-dark-foreground",
+      "--font-text",
+      "--font-header",
+      "--font-interface",
+      "--font-monospace",
+      "--font-size",
+      "--line-height",
+      "--optical-ratio",
+      "--gap-body",
+      "--rhythm-gap-new-line",
+      "--radius",
+    ];
+    const css = tokens
+      .filter((t) => modified.has(t))
+      .map(
+        (t) =>
+          `  ${t}: ${document.documentElement.style.getPropertyValue(t).trim()};`,
+      )
+      .join("\n");
+    if (css) {
+      navigator.clipboard?.writeText(`:root {\n${css}\n}`);
+      window.toast?.("CSS copied", "success");
+    } else {
+      window.toast?.("No overrides to copy", "info");
+    }
+  }
+
+  function getBreakpoint(w) {
+    if (w < 640) return "Mobile";
+    if (w < 768) return "Small";
+    if (w < 1024) return "Medium";
+    if (w < 1280) return "Large";
+    return "X-Large";
+  }
+
+  /** Toggle debug overlay panels */
+  function syncDebugOverlays(on) {
+    document.querySelectorAll("[data-debug-overlay]").forEach((el) => {
+      el.style.display = on ? "" : "none";
+    });
+
+    const overlay = document.getElementById("stnd-debug-overlay");
+    if (overlay) {
+      overlay.style.display = on ? "" : "none";
+    } else if (on) {
+      const div = document.createElement("div");
+      div.id = "stnd-debug-overlay";
+      div.setAttribute("data-debug-overlay", "");
+      document.body.appendChild(div);
+    }
+  }
+
+  // =========================================================================
+  // LIFECYCLE
+  // =========================================================================
+  onMount(() => {
+    version = document.documentElement.dataset.standardVersion || "";
+    viewportW = window.innerWidth;
+
+    // Attempt to read CSS transition variables so the Svelte fly transition
+    // matches the CSS page margin transition. Use the single trusted token
+    // `--transition` first and fall back to `--transition-slow` if not present.
+    try {
+      const cs = getComputedStyle(document.documentElement);
+
+      // Prefer --transition; fall back to --transition-slow if missing.
+      let transRaw = (cs.getPropertyValue("--transition") || "").trim();
+      if (!transRaw) {
+        transRaw = (cs.getPropertyValue("--transition-slow") || "").trim();
+      }
+
+      if (transRaw) {
+        // Extract duration (e.g. "1s cubic-bezier(...)" or "200ms ease")
+        const durMatch = transRaw.match(/([\d.]+)(ms|s)/);
+        if (durMatch) {
+          sidebarDuration =
+            durMatch[2] === "ms"
+              ? parseFloat(durMatch[1])
+              : parseFloat(durMatch[1]) * 1000;
+        }
+
+        // Extract easing curve from the same variable (cubic-bezier)
+        const easeMatch = transRaw.match(/cubic-bezier\(([^)]+)\)/);
+        if (easeMatch && easeMatch[1]) {
+          const nums = easeMatch[1].split(",").map((n) => parseFloat(n.trim()));
+          if (nums.length === 4 && nums.every((v) => !Number.isNaN(v))) {
+            customEasing = bezier(nums[0], nums[1], nums[2], nums[3]);
+          }
+        }
+      }
+    } catch (err) {
+      // If anything goes wrong (SSR, missing vars, parsing), fall back to defaults.
+    }
+
+    // Listen for system color scheme changes
+    const mql = window.matchMedia("(prefers-color-scheme: dark)");
+    const onSchemeChange = (e) => {
+      systemScheme = e.matches ? "dark" : "light";
+      requestAnimationFrame(syncFromDOM);
+    };
+    mql.addEventListener("change", onSchemeChange);
+
+    const restoreLabState = () => {
+      if (typeof document === "undefined") return;
+
+      const savedScheme = sessionStorage.getItem("stnd-scheme");
+      if (savedScheme && ["auto", "light", "dark"].includes(savedScheme)) {
+        userScheme = savedScheme;
+      }
+      if (userScheme !== "auto") {
+        document.documentElement.setAttribute("data-lab-scheme", userScheme);
+      }
+
+      // Re-apply Lab theme (last word)
+      const savedTheme = sessionStorage.getItem("stnd-theme");
+      if (savedTheme !== null) {
+        if (savedTheme) {
+          document.documentElement.setAttribute("data-theme", savedTheme);
+        } else {
+          document.documentElement.removeAttribute("data-theme");
+        }
+      }
+
+      const savedPinned = sessionStorage.getItem("stnd-pinned");
+      if (savedPinned === "true") pinned = true;
+
+      const savedDebug = sessionStorage.getItem("stnd-debug-mode");
+      if (savedDebug === "true") {
+        document.documentElement.classList.add("stnd-debug");
+        debug = true;
+      } else {
+        document.documentElement.classList.remove("stnd-debug");
+        debug = false;
+      }
+
+      // Restore debug class toggles (.ink, .texture, .stnd-1/2/3)
+      const classes = [
+        { k: "stnd-class-ink", c: "ink", s: (v) => (ink = v) },
+        { k: "stnd-class-texture", c: "texture", s: (v) => (texture = v) },
+        { k: "stnd-class-stnd-1", c: "stnd-1", s: (v) => (stnd1 = v) },
+        { k: "stnd-class-stnd-2", c: "stnd-2", s: (v) => (stnd2 = v) },
+        { k: "stnd-class-stnd-3", c: "stnd-3", s: (v) => (stnd3 = v) },
+      ];
+
+      classes.forEach(({ k, c, s }) => {
+        const val = sessionStorage.getItem(k) === "true";
+        document.documentElement.classList.toggle(c, val);
+        s(val);
+      });
+
+      const savedPanel = sessionStorage.getItem("stnd-panel-state");
+      if (savedPanel === "open") view = "open";
+
+      // Restore sections
+      try {
+        const savedSections = JSON.parse(
+          sessionStorage.getItem("stnd-sections") || "{}",
+        );
+        if (Object.keys(savedSections).length > 0) {
+          sectionsOpen = { ...sectionsOpen, ...savedSections };
+        }
+      } catch {
+        /* noop */
+      }
+
+      // Restore overrides
+      try {
+        const savedOverrides = JSON.parse(
+          sessionStorage.getItem("stnd-overrides") || "{}",
+        );
+        if (Object.keys(savedOverrides).length > 0) {
+          for (const [token, value] of Object.entries(savedOverrides)) {
+            document.documentElement.style.setProperty(token, value);
+          }
+          modified = new Set([...Object.keys(savedOverrides)]);
+        } else {
+          modified = new Set();
+        }
+      } catch {
+        /* noop */
+      }
+
+      // Read current values from cascade
+      syncFromDOM();
+      storeDefaults();
+      syncDebugOverlays(
+        document.documentElement.classList.contains("stnd-debug"),
+      );
+    };
+
+    restoreLabState();
+    document.addEventListener("astro:after-swap", restoreLabState);
+
+    // Global API for dev toolbar compatibility
+    window.StandardLab = {
+      get state() {
+        return view;
+      },
+      open() {
+        view = "open";
+      },
+      close() {
+        view = "dormant";
+      },
+      toggle() {
+        view = view === "dormant" ? "open" : "dormant";
+      },
+      refresh: syncFromDOM,
+    };
+
+    // Keyboard shortcuts
+    function onKey(e) {
+      const mod = navigator.platform.includes("Mac") ? e.metaKey : e.ctrlKey;
+
+      // Toggle lab with Cmd/Ctrl+S (override default save shortcut)
+      if (mod && !e.shiftKey && e.key.toLowerCase() === "s") {
+        e.preventDefault();
+        view = view === "dormant" ? "open" : "dormant";
+      }
+
+      if (e.shiftKey && mod && e.key.toLowerCase() === "s") {
+        e.preventDefault();
+        view = view === "dormant" ? "open" : "dormant";
+      }
+      if (mod && !e.shiftKey && e.key.toLowerCase() === "d") {
+        e.preventDefault();
+        view = view === "dormant" ? "open" : "dormant";
+      }
+      if (e.shiftKey && mod && e.key.toLowerCase() === "d") {
+        e.preventDefault();
+        debug = !debug;
+        document.documentElement.classList.toggle("stnd-debug", debug);
+        sessionStorage.setItem("stnd-debug-mode", String(debug));
+        syncDebugOverlays(debug);
+        window.toast?.(`Debug ${debug ? "on" : "off"}`, "info");
+      }
+      if (e.key === "Escape" && view !== "dormant") {
+        view = "dormant";
+      }
+    }
+
+    function onResize() {
+      viewportW = window.innerWidth;
+    }
+
+    function onScroll() {
+      isScrolling = true;
+      clearTimeout(scrollTimer);
+      scrollTimer = setTimeout(() => {
+        isScrolling = false;
+      }, 500);
+    }
+
+    function onGlobalClick(e) {
+      if (view !== "open" || pinned) return;
+      if (sidebarEl && sidebarEl.contains(e.target)) return;
+      if (
+        e.target.closest(".lab-handler") ||
+        e.target.closest(".lab-handler-top")
+      )
+        return;
+      view = "dormant";
+    }
+
+    document.addEventListener("keydown", onKey);
+    document.addEventListener("click", onGlobalClick);
+    window.addEventListener("resize", onResize);
+    window.addEventListener("scroll", onScroll, { passive: true });
+
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.removeEventListener("click", onGlobalClick);
+      document.removeEventListener("astro:after-swap", restoreLabState);
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll);
+      mql.removeEventListener("change", onSchemeChange);
+      delete window.StandardLab;
+    };
+  });
+
+  // =========================================================================
+  // EFFECTS
+  // =========================================================================
+
+  // Persist panel state + dispatch event for dev toolbar
+  // Shrink the page when the sidebar is open (like DevTools)
+  $effect(() => {
+    if (typeof document === "undefined") return;
+    const el = document.documentElement;
+    if (view === "open") {
+      el.classList.add("lab-open");
+    } else {
+      el.classList.remove("lab-open");
+    }
+  });
+
+  $effect(() => {
+    if (typeof window === "undefined") return;
+    if (view === "dormant") {
+      sessionStorage.removeItem("stnd-panel-state");
+    } else {
+      sessionStorage.setItem("stnd-panel-state", view);
+    }
+    try {
+      window.dispatchEvent(
+        new CustomEvent("standardlab:state", { detail: { state: view } }),
+      );
+    } catch {
+      /* SSR guard */
+    }
+  });
+
+  // =========================================================================
+  // HANDLERS — Theme
+  // =========================================================================
+  function onThemeChange(e) {
+    const t = e.target.value;
+    theme = t;
+
+    // Clear ALL inline token overrides so the new theme's cascade wins
+    const tokensToClear = [
+      "--color-light-background",
+      "--color-light-foreground",
+      "--color-dark-background",
+      "--color-dark-foreground",
+      "--font-text",
+      "--font-header",
+      "--font-interface",
+      "--font-monospace",
+      "--font-size",
+      "--line-height",
+      "--optical-ratio",
+      "--gap-body",
+      "--rhythm-gap-new-line",
+      "--radius",
+    ];
+    for (const tok of tokensToClear) {
+      document.documentElement.style.removeProperty(tok);
+    }
+    modified = new Set();
+
+    if (t) {
+      document.documentElement.setAttribute("data-theme", t);
+    } else {
+      document.documentElement.removeAttribute("data-theme");
+    }
+    sessionStorage.setItem("stnd-theme", t);
+
+    // Re-read all values after cascade settles
+    requestAnimationFrame(() => {
+      syncFromDOM();
+      storeDefaults();
+    });
+    window.toast?.(`Theme: ${t || "None"}`, "info");
+  }
+
+  // =========================================================================
+  // HANDLERS — Seed Colors
+  // =========================================================================
+  function onColorSwatch(role, e) {
+    const hex = e.target.value;
+    const token = role === "bg" ? bgToken : fgToken;
+    if (role === "bg") {
+      seedBg = hex;
+      seedBgHex = hex;
+    } else {
+      seedFg = hex;
+      seedFgHex = hex;
+    }
+    writeVar(token, hex);
+  }
+
+  function onColorText(role, e) {
+    const val = e.target.value;
+    const token = role === "bg" ? bgToken : fgToken;
+    if (role === "bg") {
+      seedBg = val;
+      seedBgHex = toHex(val);
+    } else {
+      seedFg = val;
+      seedFgHex = toHex(val);
+    }
+    writeVar(token, val);
+  }
+
+  // =========================================================================
+  // HANDLERS — Fonts
+  // =========================================================================
+  function onFontInput(token, e) {
+    const raw = e.target.value;
+    // Wrap multi-word font names in quotes for valid CSS font-family
+    const val = raw.includes(" ") && !raw.startsWith('"') ? `"${raw}"` : raw;
+    writeVar(token, val);
+    loadGoogleFont(raw);
+    // Re-read the specific font state
+    if (token === "--font-text") fontText = val;
+    else if (token === "--font-header") fontHeader = val;
+    else if (token === "--font-interface") fontInterface = val;
+    else if (token === "--font-monospace") fontMono = val;
+    // Update search to match typed value for filtering
+    fontSearch = raw;
+  }
+
+  // =========================================================================
+  // HANDLERS — Scale
+  // =========================================================================
+  function onFontSizeInput(e) {
+    fontSize = parseFloat(e.target.value);
+    writeVar("--font-size", `${fontSize}rem`);
+  }
+
+  function onLineHeightInput(e) {
+    lineHeight = parseFloat(e.target.value);
+    writeVar("--line-height", String(lineHeight));
+  }
+
+  function onRatioInput(e) {
+    ratio = parseFloat(e.target.value);
+    writeVar("--optical-ratio", String(ratio));
+  }
+
+  function onGapInput(e) {
+    gapBody = parseFloat(e.target.value);
+    writeVar("--gap-body", `calc(var(--space) * ${gapBody})`);
+  }
+
+  function onRhythmGapInput(e) {
+    rhythmGap = parseFloat(e.target.value);
+    writeVar("--rhythm-gap-new-line", `calc(var(--space) * ${rhythmGap})`);
+  }
+
+  function onRadiusInput(e) {
+    radius = parseFloat(e.target.value);
+    writeVar("--radius", `calc(var(--space) * ${radius})`);
+  }
+
+  // =========================================================================
+  // HANDLERS — Debug
+  // =========================================================================
+  function onDebugToggle(e) {
+    debug = e.target.checked;
+    document.documentElement.classList.toggle("stnd-debug", debug);
+    sessionStorage.setItem("stnd-debug-mode", String(debug));
+    syncDebugOverlays(debug);
+    window.toast?.(`Debug ${debug ? "on" : "off"}`, "info");
+  }
+
+  function onEinkToggle(e) {
+    eink = e.target.checked;
+    document.documentElement.classList.toggle("standard-eink", eink);
+    // E-ink state is often auto-detected or managed by client/eink.js
+    // but here we allow manual override. We don't persist it to session
+    // to avoid conflict with auto-detection on reload, or we could if desired.
+    // For now, let's treat it as a temporary override in the Lab.
+    window.toast?.(`E-Ink Mode ${eink ? "on" : "off"}`, "info");
+  }
+
+  /** Toggle a global debug class and persist to sessionStorage */
+  function onClassToggle(className, storageKey, e) {
+    const checked = e.target.checked;
+    // Update corresponding local state
+    if (className === "ink") ink = checked;
+    else if (className === "texture") texture = checked;
+    else if (className === "stnd-1") stnd1 = checked;
+    else if (className === "stnd-2") stnd2 = checked;
+    else if (className === "stnd-3") stnd3 = checked;
+
+    document.documentElement.classList.toggle(className, checked);
+    try {
+      sessionStorage.setItem(storageKey, String(checked));
+    } catch {
+      /* noop */
+    }
+    window.toast?.(`${className} ${checked ? "on" : "off"}`, "info");
+  }
+
+  // =========================================================================
+  // HANDLERS — Reset
+  // =========================================================================
+  async function resetAll() {
+    console.log("[Lab] Resetting all preferences...");
+    document.documentElement.removeAttribute("style");
+    document.documentElement.removeAttribute("data-theme");
+    document.documentElement.classList.remove("stnd-debug");
+    sessionStorage.removeItem("stnd-theme");
+    sessionStorage.removeItem("stnd-debug-mode");
+    sessionStorage.removeItem("stnd-panel-state");
+    sessionStorage.removeItem("stnd-overrides");
+    sessionStorage.removeItem("stnd-sections");
+    // Clear theme preferences from storage
+    localStorage.removeItem("stnd-theme-global"); // theme-utils persistence
+    console.log(
+      "[Lab] localStorage after clear:",
+      localStorage.getItem("stnd-theme-global"),
+    );
+    document.cookie =
+      "std_prefs=; path=/; expires=Thu, 01 Jan 1970 00:00:00 UTC;";
+    document.documentElement.removeAttribute("data-color-mode");
+    userScheme = "auto";
+    // Reset server-side colorMode preference so page reloads don't re-apply it
+    try {
+      const { actions } = await import("astro:actions");
+      await actions.updatePreferences({ colorMode: "auto" });
+    } catch {}
+    modified = new Set();
+    theme = "";
+    debug = false;
+    syncDebugOverlays(false);
+    requestAnimationFrame(() => {
+      syncFromDOM();
+      storeDefaults();
+    });
+    window.toast?.info("All tokens reset");
+    console.log("[Lab] Reset complete");
+  }
+
+  function toggleSection(key) {
+    sectionsOpen = { ...sectionsOpen, [key]: !sectionsOpen[key] };
+  }
+
+  // =========================================================================
+  // DERIVED
+  // =========================================================================
+  let modCount = $derived(modified.size);
+</script>
+
+<!-- ======================================================================
+     TRIGGER / HANDLER
+     ====================================================================== -->
+<div
+  class="lab-handler-top m-0"
+  role="button"
+  tabindex="0"
+  aria-label="Open Design Lab"
+  onmouseenter={openLab}
+  onmouseleave={requestCloseLab}
+  onclick={() => (view = view === "dormant" ? "open" : "dormant")}
+  onkeydown={(e) => e.key === "Enter" && (view = "open")}
+>
+  <div class="lab-dot"></div>
+</div>
+
+<div
+  class="lab-handler m-0"
+  class:scrolling={isScrolling}
+  class:modified={modCount > 0}
+  onmouseenter={openLab}
+  onmouseleave={requestCloseLab}
+  role="button"
+  tabindex="0"
+  aria-label="Open Design Lab"
+  onclick={() => (view = view === "dormant" ? "open" : "dormant")}
+  onkeydown={(e) => e.key === "Enter" && (view = "open")}
+>
+  <div class="lab-handler-bar"></div>
+</div>
+
+<!-- ======================================================================
+     SIDE PANEL
+     ====================================================================== -->
+{#if view === "open"}
+  <div
+    bind:this={sidebarEl}
+    transition:fly={{
+      x: 320,
+      duration: sidebarDuration,
+      easing: customEasing,
+      opacity: false,
+    }}
+    class="lab-sidebar no-rhythm mt-0"
+    role="dialog"
+    tabindex="-1"
+    aria-label="Design Lab"
+    onmouseenter={cancelCloseLab}
+    onmouseleave={requestCloseLab}
+  >
+    <!-- ═══════════ HEADER ═══════════ -->
+    <header class="lab-header">
+      <div class="lab-header-title">
+        <h2>stnd</h2>
+        {#if version}<span class="lab-version">v{version}</span>{/if}
+      </div>
+      <div class="lab-header-meta">
+        <span class="badge ghost small text-subtle" title="Viewport Width">
+          {viewportW}px
+        </span>
+        <span class="badge ghost small text-subtle"
+          >{getBreakpoint(viewportW)}</span
+        >
+        <button
+          class="smaller ghost"
+          onclick={() => {
+            const modes = ["auto", "light", "dark"];
+            userScheme = modes[(modes.indexOf(userScheme) + 1) % modes.length];
+          }}
+          title="Toggle Theme (Auto / Light / Dark)"
+        >
+          {userScheme === "auto" ? "auto" : scheme}
+        </button>
+
+        <button
+          class="smaller icon ghost"
+          onclick={() => (pinned = !pinned)}
+          aria-label={pinned ? "Unpin Lab" : "Pin Lab"}
+          title={pinned ? "Unpin Lab" : "Pin Lab"}
+        >
+          {pinned ? "●" : "○"}
+        </button>
+        <button
+          class="smaller icon ghost"
+          onclick={() => (view = "dormant")}
+          aria-label="Close Lab"
+        >
+          ✕
+        </button>
+      </div>
+    </header>
+
+    <!-- ═══════════ SCROLLABLE BODY ═══════════ -->
+    <div class="lab-body">
+      <!-- ─── THEME ─── -->
+      <section class="lab-section">
+        <button class="lab-section-head" onclick={() => toggleSection("theme")}>
+          <span class="lab-section-arrow" class:open={sectionsOpen.theme}
+            >▶</span
+          >
+          <span class="lab-section-title">Theme</span>
+        </button>
+        {#if sectionsOpen.theme}
+          <div class="lab-section-body" transition:slide>
+            <div class="lab-field">
+              <label class="lab-field-label" for="lab-preset">Preset</label>
+              <select
+                id="lab-preset"
+                class="lab-select"
+                value={theme}
+                onchange={onThemeChange}
+              >
+                {#each THEMES as t (t.value)}
+                  <option value={t.value} selected={t.value === theme}
+                    >{t.label}</option
+                  >
+                {/each}
+              </select>
+            </div>
+          </div>
+        {/if}
+      </section>
+
+      <!-- ─── COLORS ─── -->
+      <section class="lab-section">
+        <button
+          class="lab-section-head"
+          onclick={() => toggleSection("colors")}
+        >
+          <span class="lab-section-arrow" class:open={sectionsOpen.colors}
+            >▶</span
+          >
+          <span class="lab-section-title">Colors</span>
+        </button>
+        {#if sectionsOpen.colors}
+          <div class="lab-section-body" transition:slide>
+            <div class="lab-field">
+              <label class="lab-field-label" for="lab-bg-text">Background</label
+              >
+              <div class="lab-color-row">
+                <input
+                  type="color"
+                  class="lab-swatch"
+                  value={seedBgHex}
+                  title="{scheme} background seed"
+                  oninput={(e) => onColorSwatch("bg", e)}
+                />
+                <input
+                  id="lab-bg-text"
+                  type="text"
+                  class="lab-text-input"
+                  value={seedBg}
+                  spellcheck="false"
+                  placeholder="e.g. #fafafa"
+                  oninput={(e) => onColorText("bg", e)}
+                />
+              </div>
+            </div>
+            <div class="lab-field">
+              <label class="lab-field-label" for="lab-fg-text">Foreground</label
+              >
+              <div class="lab-color-row">
+                <input
+                  type="color"
+                  class="lab-swatch"
+                  value={seedFgHex}
+                  title="{scheme} foreground seed"
+                  oninput={(e) => onColorSwatch("fg", e)}
+                />
+                <input
+                  id="lab-fg-text"
+                  type="text"
+                  class="lab-text-input"
+                  value={seedFg}
+                  spellcheck="false"
+                  placeholder="e.g. #1a1a1a"
+                  oninput={(e) => onColorText("fg", e)}
+                />
+              </div>
+            </div>
+          </div>
+        {/if}
+      </section>
+
+      <!-- ─── TYPOGRAPHY ─── -->
+      <section class="lab-section">
+        <button
+          class="lab-section-head"
+          onclick={() => toggleSection("typography")}
+        >
+          <span class="lab-section-arrow" class:open={sectionsOpen.typography}
+            >▶</span
+          >
+          <span class="lab-section-title">Typography</span>
+        </button>
+        {#if sectionsOpen.typography}
+          <div class="lab-section-body" transition:slide>
+            {#snippet fontField(inputId, labelText, token, currentValue)}
+              <div class="lab-field lab-font-field">
+                <label class="lab-field-label" for={inputId}>{labelText}</label>
+
+                <Combobox
+                  options={FONTS.map((f) => ({ label: f, value: f }))}
+                  value={(currentValue || "")
+                    .split(",")[0]
+                    .trim()
+                    .replace(/^"|"$/g, "")}
+                  placeholder="Font family or Google Font"
+                  searchPlaceholder="Search fonts..."
+                  emptyText="No fonts found."
+                  allowCustom={true}
+                  preview={true}
+                  previewDebounce={120}
+                  loadFont={(name) => loadGoogleFont(name)}
+                  class="lab-font-combobox"
+                  aria-controls={inputId}
+                  on:preview={(e) => loadGoogleFont(e.detail?.value)}
+                  on:change={(e) => {
+                    // Combobox dispatches change with detail.value (base font name)
+                    selectFont(token, e.detail?.value);
+                  }}
+                />
+              </div>
+            {/snippet}
+
+            {@render fontField(
+              "lab-font-body",
+              "Body",
+              "--font-text",
+              fontText,
+            )}
+            {@render fontField(
+              "lab-font-head",
+              "Headings",
+              "--font-header",
+              fontHeader,
+            )}
+            {@render fontField(
+              "lab-font-ui",
+              "Interface",
+              "--font-interface",
+              fontInterface,
+            )}
+            {@render fontField(
+              "lab-font-mono",
+              "Monospace",
+              "--font-monospace",
+              fontMono,
+            )}
+          </div>
+        {/if}
+      </section>
+
+      <!-- ─── SCALE ─── -->
+      <section class="lab-section">
+        <button class="lab-section-head" onclick={() => toggleSection("scale")}>
+          <span class="lab-section-arrow" class:open={sectionsOpen.scale}
+            >▶</span
+          >
+          <span class="lab-section-title">Scale</span>
+        </button>
+        {#if sectionsOpen.scale}
+          <div class="lab-section-body" transition:slide>
+            <div class="lab-field">
+              <label class="lab-field-label" for="lab-font-size"
+                >Font Size</label
+              >
+              <div class="lab-slider-wrapper">
+                <input
+                  id="lab-font-size"
+                  type="range"
+                  class="lab-rangess"
+                  value={fontSize}
+                  min="0.75"
+                  max="1.5"
+                  step="0.05"
+                  oninput={onFontSizeInput}
+                />
+                <span class="lab-readout">{fontSize.toFixed(2)}rem</span>
+              </div>
+            </div>
+            <div class="lab-field">
+              <label class="lab-field-label" for="lab-line-height"
+                >Line Height</label
+              >
+              <div class="lab-slider-wrapper">
+                <input
+                  id="lab-line-height"
+                  type="range"
+                  class="lab-range"
+                  value={lineHeight}
+                  min="1"
+                  max="2"
+                  step="0.05"
+                  oninput={onLineHeightInput}
+                />
+                <span class="lab-readout">{lineHeight.toFixed(2)}</span>
+              </div>
+            </div>
+            <div class="lab-field">
+              <label class="lab-field-label" for="lab-ratio"
+                >Optical Ratio</label
+              >
+              <div class="lab-slider-wrapper">
+                <input
+                  id="lab-ratio"
+                  type="range"
+                  class="lab-range"
+                  value={ratio}
+                  min="1"
+                  max="2"
+                  step="0.01"
+                  oninput={onRatioInput}
+                />
+                <span class="lab-readout">{ratio.toFixed(2)}</span>
+              </div>
+            </div>
+          </div>
+        {/if}
+      </section>
+
+      <!-- ─── SPACING ─── -->
+      <section class="lab-section">
+        <button
+          class="lab-section-head"
+          onclick={() => toggleSection("spacing")}
+        >
+          <span class="lab-section-arrow" class:open={sectionsOpen.spacing}
+            >▶</span
+          >
+          <span class="lab-section-title">Spacing</span>
+        </button>
+        {#if sectionsOpen.spacing}
+          <div class="lab-section-body" transition:slide>
+            <div class="lab-field">
+              <label class="lab-field-label" for="lab-gap-body">Body Gap</label>
+              <div class="lab-slider-wrapper">
+                <input
+                  id="lab-gap-body"
+                  type="range"
+                  class="lab-range"
+                  value={gapBody}
+                  min="0"
+                  max="4"
+                  step="0.25"
+                  oninput={onGapInput}
+                />
+                <span class="lab-readout">{gapBody.toFixed(2)}x</span>
+              </div>
+            </div>
+            <div class="lab-field">
+              <label class="lab-field-label" for="lab-rhythm-gap"
+                >Rhythm Gap</label
+              >
+              <div class="lab-slider-wrapper">
+                <input
+                  id="lab-rhythm-gap"
+                  type="range"
+                  class="lab-range"
+                  value={rhythmGap}
+                  min="0"
+                  max="4"
+                  step="0.25"
+                  oninput={onRhythmGapInput}
+                />
+                <span class="lab-readout">{rhythmGap.toFixed(2)}x</span>
+              </div>
+            </div>
+            <div class="lab-field">
+              <label class="lab-field-label" for="lab-radius">Radius</label>
+              <div class="lab-slider-wrapper">
+                <input
+                  id="lab-radius"
+                  type="range"
+                  class="lab-range"
+                  value={radius}
+                  min="0"
+                  max="4"
+                  step="0.25"
+                  oninput={onRadiusInput}
+                />
+                <span class="lab-readout">{radius.toFixed(2)}x</span>
+              </div>
+            </div>
+          </div>
+        {/if}
+      </section>
+
+      <!-- ─── DEBUG ─── -->
+      <section class="lab-section">
+        <button class="lab-section-head" onclick={() => toggleSection("debug")}>
+          <span class="lab-section-arrow" class:open={sectionsOpen.debug}
+            >▶</span
+          >
+          <span class="lab-section-title">Debug</span>
+        </button>
+        {#if sectionsOpen.debug}
+          <div class="lab-section-body" transition:slide>
+            <label class="lab-toggle" for="lab-debug-overlays">
+              <input
+                id="lab-debug-overlays"
+                type="checkbox"
+                checked={debug}
+                onchange={onDebugToggle}
+              />
+              <span>Debug Overlays</span>
+              <kbd>⇧⌘D</kbd>
+            </label>
+            <div class="lab-field mt-half">
+              <button
+                class="lab-btn lab-btn-secondary w-full"
+                onclick={() => {
+                  document.cookie = "std_prefs=; Max-Age=0; path=/";
+                  sessionStorage.removeItem("stnd-theme");
+                  sessionStorage.removeItem("stnd-scheme");
+                  sessionStorage.removeItem("stnd-overrides");
+                  localStorage.removeItem("stnd-theme-global");
+                  theme = "";
+                  userScheme = "auto";
+                  modified = new Set();
+                  document.documentElement.removeAttribute("data-theme");
+                  document.documentElement.removeAttribute("data-lab-scheme");
+                  document.documentElement.removeAttribute("style");
+                  requestAnimationFrame(syncFromDOM);
+                  window.toast?.("Preferences cleared", "info");
+                }}
+              >
+                Clear Preferences
+              </button>
+            </div>
+          </div>
+        {/if}
+      </section>
+
+      <!-- ─── LINKS ─── -->
+      <section class="lab-section">
+        <button class="lab-section-head" onclick={() => toggleSection("links")}>
+          <span class="lab-section-arrow" class:open={sectionsOpen.links}
+            >▶</span
+          >
+          <span class="lab-section-title">Links</span>
+        </button>
+        {#if sectionsOpen.links}
+          <div class="lab-section-body" transition:slide>
+            <div class="lab-links">
+              <a
+                href="https://stnd.build/playground"
+                target="_blank"
+                rel="noopener"
+                class="lab-link"
+              >
+                ↗ Playground
+              </a>
+              <a
+                href="https://stnd.build"
+                target="_blank"
+                rel="noopener"
+                class="lab-link"
+              >
+                ↗ Manual
+              </a>
+              <a
+                href="https://stnd.build/icons"
+                target="_blank"
+                rel="noopener"
+                class="lab-link"
+              >
+                ↗ Icons
+              </a>
+            </div>
+          </div>
+        {/if}
+      </section>
+    </div>
+
+    <!-- ═══════════ FOOTER ═══════════ -->
+    <footer class="lab-footer">
+      <button class="lab-btn lab-btn-secondary" onclick={resetAll}>
+        Reset{modCount > 0 ? ` (${modCount})` : ""}
+      </button>
+      <button class="lab-btn lab-btn-primary" onclick={copyCSS}>
+        Copy CSS
+      </button>
+    </footer>
+  </div>
+{/if}
+
+<!-- ======================================================================
+     STYLES — Fully scoped, isolated from design tokens
+     ====================================================================== -->
+<style>
+  /* ═══════════ PAGE SHRINK (like DevTools) ═══════════ */
+  :global(html.lab-open) {
+    margin-right: var(--lab-sidebar-w, 320px);
+    transition: margin-right var(--transition);
+  }
+  :global(html:not(.lab-open)) {
+    transition: margin-right var(--transition);
+  }
+
+  /* ═══════════ DESIGN CONSTANTS ═══════════ */
+  :root {
+    --lab-font-size: 12px;
+    --lab-sidebar-w: 320px;
+  }
+
+  /* ═══════════ HANDLER TRIGGER ═══════════ */
+  .lab-handler-top {
+    position: fixed;
+    z-index: 200;
+    top: 0;
+    right: 0;
+    padding: var(--space-2);
+    cursor: pointer;
+    opacity: 0.1;
+    transition: opacity var(--transition);
+    display: none;
+  }
+  .lab-handler-top:hover {
+    opacity: 1;
+  }
+  .lab-dot {
+    width: var(--space-d4);
+    height: var(--space-d4);
+    background: var(--color-foreground);
+    border-radius: 50%;
+  }
+
+  .lab-handler {
+    position: fixed;
+    z-index: 200;
+    top: 20%;
+    right: 0;
+    padding: var(--space); /* Bigger hit area */
+    padding-right: 20px;
+    cursor: normal;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    transition: all var(--transition);
+  }
+  .lab-handler.scrolling .lab-handler-bar {
+    background: oklch(from var(--color-foreground) l c h / 0.3);
+  }
+  .lab-handler-bar {
+    width: var(--space-d4);
+    height: var(--space-2);
+    background: oklch(from var(--color-foreground) l c h / 0);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-inset) var(--shadow-ring);
+    transition: all var(--transition);
+    cursor: normal;
+    backdrop-filter: var(--filter-glass);
+  }
+  .lab-handler.modified .lab-handler-bar {
+    background: oklch(from var(--color-accent) l c h / 0.1);
+  }
+
+  /* ═══════════ SIDEBAR ═══════════ */
+  .lab-sidebar {
+    position: fixed;
+    z-index: 9992;
+    top: 0;
+    right: 0;
+    width: var(--lab-sidebar-w);
+    height: 100dvh;
+
+    color: var(--color-foreground);
+    font: var(--lab-font-size) / 1.5 var(--font-monospace);
+    border-left: var(--border);
+    display: flex;
+    flex-direction: column;
+    box-shadow: var(--shadow-ring), var(--shadow-glow);
+    background: var(--color-surface);
+    backdrop-filter: var(--filter-blur);
+    /* Ensure the sidebar stays fully opaque and never animates opacity */
+    opacity: 1 !important;
+    /* Explicitly disable opacity animation while preserving other transitions */
+    transition:
+      transform var(--transition),
+      box-shadow var(--transition),
+      background var(--transition),
+      opacity 0s;
+
+    h2 {
+      margin: 0 !important;
+    }
+  }
+
+  /* Reset children to Lab font */
+  .lab-sidebar * {
+    font-family: var(--font-monospace) !important;
+    box-sizing: border-box;
+    /* Disable opacity transitions on child elements to prevent fading when opening the lab.
+       Other property transitions for children remain allowed outside of opacity. */
+    transition: opacity 0s !important;
+  }
+
+  /* ═══════════ HEADER ═══════════ */
+  .lab-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0;
+    padding: var(--space-d6) var(--space-d2);
+    border-bottom: var(--border);
+    flex-shrink: 0;
+
+    background: var(--color-surface-low);
+  }
+  .lab-header-title {
+    display: flex;
+    align-items: center;
+    gap: 0px;
+    flex: 1;
+    min-width: 0;
+  }
+  .lab-header h2 {
+    font-size: var(--size-sm) !important;
+    line-height: 1 !important;
+  }
+  .lab-version {
+    font-size: var(--size-xs) !important;
+    color: var(--text-muted);
+  }
+  .lab-header-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--trim);
+  }
+
+  /* ═══════════ SCROLLABLE BODY ═══════════ */
+  .lab-body {
+    flex: 1;
+    overflow-y: auto;
+    overflow-x: hidden;
+    gap: 0;
+  }
+  .lab-body::-webkit-scrollbar {
+    width: 4px;
+  }
+  .lab-body::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  .lab-body::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--color-foreground) 15%, transparent);
+    border-radius: 2px;
+  }
+
+  /* ═══════════ SECTIONS ═══════════ */
+  .lab-section {
+    box-shadow: var(--shadow-ring);
+  }
+  .lab-section-head {
+    all: unset;
+    display: flex;
+    align-items: center;
+    gap: 0;
+    width: 100%;
+    padding: var(--space-d6) 0;
+    cursor: pointer;
+    user-select: none;
+    background: var(--color-surface);
+    box-shadow: var(--shadow-raised);
+  }
+  .lab-section-head:hover {
+    background: var(--color-surface);
+  }
+
+  .lab-section-arrow {
+    font-size: var(--size-2xs) !important;
+    color: var(--text-subtle);
+    transition: transform var(--transition);
+    flex-shrink: 0;
+    width: var(--space);
+    display: inline-flex;
+    justify-content: center;
+  }
+  .lab-section-arrow.open {
+    transform: rotate(90deg);
+  }
+
+  .lab-section-title {
+    font-size: var(--size-2xs) !important;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--text-muted);
+  }
+
+  .lab-section-body {
+    padding: var(--space-d2) var(--space);
+    background: var(--color-surface);
+    box-shadow: var(--shadow);
+  }
+
+  /* ═══════════ FIELDS ═══════════ */
+  .lab-field {
+    margin-bottom: var(--space-half);
+    display: grid;
+    min-height: var(--space);
+    grid-template-columns: 80px 1fr;
+    gap: 0;
+    align-items: center;
+  }
+  .lab-field:last-child {
+    margin-bottom: 0;
+  }
+
+  .lab-field-label {
+    display: block;
+    font-size: var(--size-3xs) !important;
+    color: var(--color-muted);
+    text-transform: uppercase;
+    line-height: 1;
+  }
+
+  /* ═══════════ TEXT INPUT ═══════════ */
+  .lab-text-input {
+    width: 100%;
+    font-size: var(--size-2xs) !important;
+    line-height: 1 !important;
+    transition: all var(--transition);
+    margin: 0 !important;
+  }
+
+  /* ═══════════ COLOR ROW ═══════════ */
+  .lab-color-row {
+    display: flex;
+    align-items: center;
+    gap: var(--trim);
+  }
+  .lab-swatch {
+    width: var(--space);
+    height: var(--space);
+    border: var(--border);
+    border-radius: var(--radius);
+    cursor: pointer;
+    padding: 0px;
+    background: var(--color-surface);
+    flex-shrink: 0;
+  }
+  .lab-swatch::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+  .lab-swatch::-webkit-color-swatch {
+    border: none;
+    border-radius: var(--radius);
+  }
+  .lab-color-row .lab-text-input {
+    flex: 1;
+    min-width: 0;
+  }
+
+  /* ═══════════ SELECT ═══════════ */
+  .lab-select {
+    font-size: var(--size-2xs) !important;
+  }
+  .lab-select:focus {
+    border-color: var(--color-accent);
+  }
+
+  /* ═══════════ SLIDERS ═══════════ */
+  /* ═══════════ FONT DROPDOWN ═══════════ */
+  .lab-font-field {
+    position: relative;
+  }
+
+  .lab-slider-wrapper {
+    display: flex;
+    align-items: center;
+    gap: var(--space-half);
+    width: 100%;
+  }
+
+  /* ═══════════ LINKS ═══════════ */
+  .lab-links {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-d4);
+  }
+
+  .lab-link {
+    font-size: var(--size-2xs) !important;
+    color: var(--color-accent);
+    text-decoration: none;
+    padding: var(--space-d4) 0;
+    transition: opacity var(--transition-fast);
+
+    &:hover {
+      opacity: 0.7;
+    }
+  }
+
+  /* ═══════════ FOOTER ═══════════ */
+  .lab-footer {
+    display: flex;
+    justify-content: space-evenly;
+    gap: var(--space-half);
+    padding: var(--space-half) var(--space);
+    box-shadow: var(--shadow-raised);
+    flex-shrink: 0;
+    background: var(--color-surface-low);
+  }
+
+  /* ═══════════ RESPONSIVE ═══════════ */
+  @media (max-width: 480px) {
+    .lab-sidebar {
+      width: 100vw;
+    }
+  }
+  @media print {
+    .lab-handler,
+    .lab-sidebar {
+      display: none !important;
+    }
+  }
+
+  /* ═══════════ GLOBAL SCHEME OVERRIDES ═══════════ */
+  :global(:root[data-lab-scheme="dark"]) {
+    --color-background: var(--color-dark-background);
+    --color-foreground: var(--color-dark-foreground);
+    --color-accent: var(--color-dark-accent);
+    --color-header: var(--color-dark-header, var(--color-foreground));
+    --color-surface: color-mix(
+      in srgb,
+      var(--color-background) 100%,
+      transparent
+    );
+  }
+  :global(:root[data-lab-scheme="light"]) {
+    --color-background: var(--color-light-background);
+    --color-foreground: var(--color-light-foreground);
+    --color-accent: var(--color-light-accent);
+    --color-header: var(--color-light-header, var(--color-foreground));
+    --color-surface: color-mix(
+      in srgb,
+      var(--color-background) 100%,
+      transparent
+    );
+  }
+  /* Combobox styles tuned for the Lab panel — make the combobox visually match lab inputs */
+  :global(.lab-font-combobox .std-combobox-trigger) {
+    width: 100%;
+    padding: calc(var(--space-d3) - 2px) var(--space-d4);
+    font-size: var(--size-2xs);
+    line-height: 1;
+    background: transparent;
+    border: var(--border);
+    border-radius: var(--radius);
+    color: var(--color-foreground);
+    box-shadow: var(--shadow-raised);
+    text-align: left;
+    display: inline-flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  :global(.lab-font-combobox .std-combobox-trigger .truncate) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  :global(.lab-font-combobox .std-combobox-popover) {
+    left: 0;
+    right: 0;
+    min-width: 100%;
+    max-width: none;
+    margin-top: var(--space-d2);
+    border: var(--border);
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-xl), var(--shadow-ring);
+    background: var(--color-surface, var(--color-background));
+    z-index: 120;
+  }
+
+  /* Make the search input inside the popover feel compact like lab inputs */
+  :global(.lab-font-combobox .std-combobox-header) {
+    padding: 0 var(--space-d4) var(--space-d3);
+    margin-bottom: var(--space-d2);
+  }
+  :global(.lab-font-combobox .std-combobox-header input) {
+    font-size: var(--size-sm);
+    padding: var(--space-half) 0;
+    width: 100%;
+    background: transparent;
+    border: none;
+    outline: none;
+  }
+
+  /* Ensure options are comfortably spaced in the Lab */
+  :global(.lab-font-combobox .std-combobox-listbox .std-menu-item) {
+    padding: var(--space-d2) var(--space-d4);
+    font-size: var(--size-sm);
+  }
+
+  /* Preserve the rest of the stylesheet closing tag */
+</style>