@stnd/lab 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @stnd/lab
+
+## 0.2.0
+
+### Minor Changes
+
+- 6d8888a: First release

package/lab.js

@@ -0,0 +1,1328 @@
+(function () {
+  /*!
+   * Standard System Inspector - Minimal Debug Interface
+   *
+   * A minimalist debug interface for the Standard Framework
+   * Philosophy: Felt, not seen. Present when needed, invisible when not.
+   *
+   * HTMX-COMPATIBLE VERSION: Includes a .refresh() method and stable IDs
+   * to work with htmx:load events and hx-preserve.
+   *
+   * @version @VERSION_PLACEHOLDER@
+   */
+
+  class StandardLab {
+    constructor() {
+      this.state = "dormant"; // dormant, quick, full
+      this.badge = null;
+      this.panel = null;
+      this.currentTab = "typography";
+      this.googleFontsLoaded = new Set();
+      this.colorScheme = this.detectColorScheme();
+      this.modifiedTokens = new Set();
+      this.position = this.loadPosition();
+      this.version = document.documentElement.dataset.standardVersion;
+      this.customThemes = []; // Store custom themes added by users
+
+      // Slider configuration for numeric tokens
+      this.sliderConfig = {
+        "--optical-ratio": { min: 1, max: 2, step: 0.01, unit: "" },
+        "--line-height": { min: 1, max: 2, step: 0.05, unit: "" },
+        "--font-size": { min: 0, max: 2, step: 0.05, unit: "em" },
+        "--ratio-golden": { min: 1, max: 2, step: 0.01, unit: "" },
+        "--ratio-silver": { min: 1, max: 3, step: 0.01, unit: "" },
+        "--ratio-wholestep": { min: 1, max: 3, step: 0.01, unit: "" },
+        "--ratio-halfstep": { min: 1, max: 2, step: 0.01, unit: "" },
+        "--font-weight": { min: 100, max: 900, step: 100, unit: "" },
+        "--bold-weight": { min: 100, max: 900, step: 100, unit: "" },
+        "--radius": { min: 0, max: 2, step: 0.05, unit: "rem" },
+        "--line-width": { min: 0, max: 10, step: 0.5, unit: "px" },
+        "--base": { min: 0.5, max: 3, step: 0.05, unit: "rem" },
+        "--base-gap": { min: 0, max: 3, step: 0.05, unit: "rem" },
+        "--base-block-gap": { min: 0, max: 3, step: 0.05, unit: "rem" },
+        "--body-padding": { min: 0, max: 5, step: 0.25, unit: "rem" },
+        "--gap": { min: 0, max: 3, step: 0.05, unit: "rem" },
+        "--grid-gap": { min: 0, max: 3, step: 0.05, unit: "rem" },
+      };
+
+      this.coreTokens = {
+        typography: [
+          "--font-text",
+          "--font-header",
+          "--font-monospace",
+          "--font-interface",
+          "--font-size",
+          "--optical-ratio",
+          "--line-height",
+          "--font-weight",
+          "--bold-weight",
+          "--font-letter-spacing",
+          "--font-header-letter-spacing",
+          "--font-header-weight",
+        ],
+        layout: [
+          "--line-width",
+          "--line-width-xs",
+          "--line-width-s",
+          "--line-width-m",
+          "--line-width-l",
+          "--line-width-xl",
+          "--base",
+          "--base-gap",
+          "--base-block-gap",
+          "--body-padding",
+          "--gap",
+          "--grid-gap",
+        ],
+        colors: this.getColorTokens(),
+        advanced: [
+          "--ratio-golden",
+          "--ratio-silver",
+          "--ratio-wholestep",
+          "--ratio-halfstep",
+          "--radius",
+          "--blur",
+          "--transition",
+          "--line-width",
+          "--shadow",
+          "--border",
+        ],
+      };
+
+      // NEW: CSS Variable configuration for StandardLab styling
+      this.cssVars = {
+        "--standard-lab-bg":
+          "color-mix( in srgb, var(--color-dark-background) 90%, var(--color-dark-foreground))",
+        "--standard-lab-text":
+          "color-mix( in srgb, var(--color-dark-background) 10%, var(--color-dark-foreground))",
+        "--standard-lab-text-size": "12px",
+        "--standard-lab-opacity": "1",
+        "--standard-lab-accent": "var(--color-accent)",
+        "--standard-lab-border": "var(--border)",
+        "--standard-lab-shadow": "var(--shadow)",
+        "--standard-lab-blur": "var(--blur)",
+        "--standard-lab-font-family": "var(--font-monospace)",
+      };
+
+      this.defaults = {};
+      this.log = (window.standard && window.standard.log) || console;
+      this.initCSSVars();
+      this.init();
+    }
+
+    // NEW: Initialize CSS variables on the root element
+    initCSSVars() {
+      Object.entries(this.cssVars).forEach(([varName, value]) => {
+        document.documentElement.style.setProperty(varName, value);
+      });
+    }
+
+    /**
+     * Set a custom CSS variable for StandardLab styling
+     * @param {string} varName - Variable name (e.g., "--standard-lab-bg")
+     * @param {string} value - CSS value
+     *
+     * @example
+     * window.StandardLab.setCSSVar("--standard-lab-bg", "#1a1a1a");
+     * window.StandardLab.setCSSVar("--standard-lab-text", "#fff");
+     * window.StandardLab.setCSSVar("--standard-lab-text-size", "14px");
+     * window.StandardLab.setCSSVar("--standard-lab-opacity", "0.95");
+     */
+    setCSSVar(varName, value) {
+      this.cssVars[varName] = value;
+      document.documentElement.style.setProperty(varName, value);
+
+      // Refresh panel if it's open to apply new styles
+      if (this.state !== "dormant" && this.panel) {
+        this.refresh();
+      }
+    }
+
+    /**
+     * Get a custom CSS variable value
+     * @param {string} varName - Variable name
+     * @returns {string} CSS value
+     */
+    getCSSVar(varName) {
+      return this.cssVars[varName] || "";
+    }
+
+    init() {
+      this.storeDefaults();
+      this.createBadge();
+      this.initKeyboardShortcuts();
+
+      this.restoreTheme();
+      this.restoreDebugMode(); // NEW: Restore debug mode from sessionStorage
+      this.restorePanelState(); // NEW: Restore panel state from sessionStorage
+
+      // Check if debug mode is already active OR if blueprint theme is active
+      const currentTheme = document.documentElement.getAttribute("data-theme");
+      const isDebugActive =
+        document.documentElement.classList.contains("standard-debug");
+      const isBlueprintActive = currentTheme === "blueprint";
+
+      if (isDebugActive || isBlueprintActive) {
+        this.injectGridDebugOverlays();
+      }
+
+      if (window.matchMedia) {
+        window
+          .matchMedia("(prefers-color-scheme: dark)")
+          .addEventListener("change", (e) => {
+            this.colorScheme = e.matches ? "dark" : "light";
+            if (this.state === "full") {
+              this.refreshTokenList();
+            }
+          });
+      }
+      this.initModificationTracking();
+    }
+
+    restoreTheme() {
+      // Use sessionStorage instead of localStorage for tab-specific persistence
+      const savedTheme = sessionStorage.getItem("standard-theme");
+
+      if (savedTheme) {
+        document.documentElement.setAttribute("data-theme", savedTheme);
+      }
+    }
+
+    // NEW: Restore debug mode from sessionStorage
+    restoreDebugMode() {
+      const savedDebugMode = sessionStorage.getItem("standard-debug-mode");
+
+      if (savedDebugMode === "true") {
+        document.documentElement.classList.add("standard-debug");
+      } else if (savedDebugMode === "false") {
+        document.documentElement.classList.remove("standard-debug");
+      }
+    }
+
+    // NEW: Save debug mode to sessionStorage
+    saveDebugMode(isEnabled) {
+      sessionStorage.setItem("standard-debug-mode", isEnabled.toString());
+    }
+
+    // NEW: Restore panel state from sessionStorage
+    restorePanelState() {
+      const savedPanelState = sessionStorage.getItem("standard-panel-state");
+
+      if (savedPanelState === "quick") {
+        this.openQuick();
+      } else if (savedPanelState === "full") {
+        this.openFull();
+      }
+    }
+
+    // NEW: Save panel state to sessionStorage
+    savePanelState(state) {
+      if (state === "dormant") {
+        sessionStorage.removeItem("standard-panel-state");
+      } else {
+        sessionStorage.setItem("standard-panel-state", state);
+      }
+    }
+
+    /**
+     * Add a custom theme to the theme selector
+     * @param {string} value - Theme attribute value (e.g., "custom_dark")
+     * @param {string} label - Display label (e.g., "Custom Dark")
+     *
+     * @example
+     * window.StandardLab.addTheme("my-theme", "My Theme");
+     */
+    addTheme(value, label) {
+      // Check if theme already exists
+      const exists = this.customThemes.some((theme) => theme.value === value);
+      if (!exists) {
+        this.customThemes.push({ value, label });
+
+        // Refresh panel if it's open
+        if (this.state === "quick") {
+          this.createQuickPanel();
+        }
+      }
+    }
+
+    storeDefaults() {
+      const allTokens = [
+        ...this.coreTokens.typography,
+        ...this.coreTokens.layout,
+        ...this.coreTokens.colors,
+        ...this.coreTokens.advanced,
+      ];
+      allTokens.forEach((token) => {
+        const value = getComputedStyle(document.documentElement)
+          .getPropertyValue(token)
+          .trim();
+        if (value) {
+          this.defaults[token] = value;
+        }
+      });
+    }
+
+    getColorTokens() {
+      const scheme = this.colorScheme === "light" ? "light" : "dark";
+      return [
+        `--color-${scheme}-background`,
+        `--color-${scheme}-foreground`,
+        `--color-${scheme}-accent`,
+        `--color-${scheme}-red`,
+        `--color-${scheme}-orange`,
+        `--color-${scheme}-yellow`,
+        `--color-${scheme}-green`,
+        `--color-${scheme}-cyan`,
+        `--color-${scheme}-blue`,
+        `--color-${scheme}-purple`,
+        `--color-${scheme}-pink`,
+      ];
+    }
+
+    detectColorScheme() {
+      if (
+        window.matchMedia &&
+        window.matchMedia("(prefers-color-scheme: dark)").matches
+      ) {
+        return "dark";
+      }
+      return "light";
+    }
+
+    loadPosition() {
+      const saved = localStorage.getItem("standard-lab-position");
+      if (saved) {
+        return JSON.parse(saved);
+      }
+      return { bottom: 16, right: 16 };
+    }
+
+    savePosition() {
+      localStorage.setItem(
+        "standard-lab-position",
+        JSON.stringify(this.position),
+      );
+    }
+
+    createBadge() {
+      if (this.badge) return;
+      this.badge = document.createElement("button");
+      this.badge.id = "standard-lab-badge-container";
+      this.badge.className = "standard-lab-badge";
+      this.badge.setAttribute("aria-label", "Open Standard Inspector");
+      this.badge.setAttribute("title", "Standard Inspector (Shift+Cmd+S)");
+      this.badge.setAttribute("style", "color:var(--color-subtle);");
+      this.badge.style.bottom = `${this.position.bottom}px`;
+      this.badge.style.right = `${this.position.right}px`;
+      this.badge.innerHTML = ``;
+      this.badge.addEventListener("click", () => this.openQuick());
+      this.makeDraggable(this.badge);
+
+      // Append to body
+      document.body.appendChild(this.badge);
+
+      this.updateBadge();
+      this.injectStyles();
+    }
+
+    updateBadge() {
+      if (!this.badge) return;
+      const count = this.modifiedTokens.size;
+      if (count > 0) {
+        this.badge.setAttribute("data-modified", count);
+      } else {
+        this.badge.removeAttribute("data-modified");
+      }
+    }
+
+    makeDraggable(element) {
+      let isDragging = false,
+        startX,
+        startY,
+        initialBottom,
+        initialRight;
+      const onMouseDown = (e) => {
+        if (
+          e.target !== element &&
+          !element.classList.contains("standard-lab-panel-header")
+        )
+          return;
+        isDragging = true;
+        startX = e.clientX;
+        startY = e.clientY;
+        const rect = element.getBoundingClientRect();
+        initialBottom = window.innerHeight - rect.bottom;
+        initialRight = window.innerWidth - rect.right;
+        document.addEventListener("mousemove", onMouseMove);
+        document.addEventListener("mouseup", onMouseUp);
+        element.style.cursor = "grabbing";
+        e.preventDefault();
+      };
+      const onMouseMove = (e) => {
+        if (!isDragging) return;
+        const deltaX = startX - e.clientX;
+        const deltaY = e.clientY - startY;
+        this.position.right = Math.max(0, initialRight + deltaX);
+        this.position.bottom = Math.max(0, initialBottom - deltaY);
+        element.style.right = `${this.position.right}px`;
+        element.style.bottom = `${this.position.bottom}px`;
+      };
+      const onMouseUp = () => {
+        isDragging = false;
+        element.style.cursor = "";
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+        this.savePosition();
+      };
+      element.addEventListener("mousedown", onMouseDown);
+    }
+
+    openQuick() {
+      if (this.state === "quick") {
+        this.close();
+        return;
+      }
+      this.state = "quick";
+      this.savePanelState("quick");
+      this.createQuickPanel();
+    }
+
+    openFull() {
+      this.state = "full";
+      this.savePanelState("full");
+      this.createFullPanel();
+    }
+
+    close() {
+      if (this.panel) {
+        this.panel.style.opacity = "0";
+        this.panel.style.transform = "translateY(10px)";
+        setTimeout(() => {
+          if (this.panel) {
+            this.panel.remove();
+            this.panel = null;
+          }
+        }, 200);
+      }
+      this.state = "dormant";
+      this.savePanelState("dormant");
+    }
+
+    /**
+     * Public method to refresh the panel's UI.
+     * Ideal for calling after HTMX swaps change the page state (e.g., theme).
+     */
+    refresh() {
+      if (this.log && this.log.debug) {
+        this.log.debug("Refreshing StandardLab");
+      }
+      this.storeDefaults();
+
+      this.badge = null;
+      this.init();
+
+      // Re-inject overlays if debug is active
+      if (document.documentElement.classList.contains("standard-debug")) {
+        this.removeGridDebugOverlays();
+        this.injectGridDebugOverlays();
+      }
+
+      // Do nothing if the panel is closed
+      if (this.state === "dormant") {
+        return;
+      }
+
+      // Re-run the appropriate panel creation method to rebuild the UI
+      if (this.state === "quick") {
+        this.createQuickPanel();
+      } else if (this.state === "full") {
+        const showModifiedOnly =
+          this.panel?.querySelector('[data-filter="modified"]')?.checked ||
+          false;
+        this.createFullPanel();
+        this.switchTab(this.currentTab);
+        const modifiedFilter = this.panel?.querySelector(
+          '[data-filter="modified"]',
+        );
+        if (modifiedFilter) {
+          modifiedFilter.checked = showModifiedOnly;
+          this.refreshTokenList(showModifiedOnly);
+        }
+      }
+    }
+
+    createQuickPanel() {
+      if (this.panel) this.panel.remove();
+      this.panel = document.createElement("div");
+      this.panel.id = "standard-lab-panel-container";
+      this.panel.className = "standard-lab-panel standard-lab-panel-quick";
+      this.panel.style.bottom = `calc(${this.position.bottom}px + var(--space-2))`;
+      this.panel.style.right = `${this.position.right}px`;
+      const debugActive =
+        document.documentElement.classList.contains("standard-debug");
+      const modifiedCount = this.modifiedTokens.size;
+      this.panel.innerHTML = `
+      <header class="standard-lab-panel-header">
+          <div style="display:inline-block;">
+            <h2 style="color: var(--color-dark-foreground);display:inline-block;">Inspector v${this.version}</h2>
+            <div style="display:inline-block;" class="standard-lab-viewport-info">${window.innerWidth}px</div>
+          </div>
+          <button class="standard-lab-btn-icon" data-action="close" title="Close (Esc)">×</button>
+        </header>
+      <section class="standard-lab-section">
+        <label class="standard-lab-toggle">
+          <input type="checkbox" ${debugActive ? "checked" : ""} data-toggle="debug">
+          <span>Debug Mode</span>
+          <kbd>⇧⌘D</kbd>
+        </label>
+      </section>
+      <section class="standard-lab-section">
+        <label class="standard-lab-label">Theme</label>
+        <select class="standard-lab-select" data-action="theme">
+          ${this.getThemeOptions()}
+        </select>
+      </section>
+      <div class="standard-lab-actions">
+        <button class="standard-lab-btn" data-action="edit-tokens">
+          ${modifiedCount > 0 ? `Edit Tokens (${modifiedCount})` : "Edit Tokens"}
+        </button>
+        ${modifiedCount > 0 ? `<button class="standard-lab-btn standard-lab-btn-secondary" data-action="reset">Reset</button>` : ""}
+        <button class="standard-lab-btn standard-lab-btn-secondary" data-action="copy">Copy CSS</button>
+      </div>
+    `;
+      this.attachQuickPanelListeners();
+      document.body.appendChild(this.panel);
+      requestAnimationFrame(() => {
+        this.panel.style.opacity = "1";
+        this.panel.style.transform = "translateY(0)";
+      });
+    }
+
+    getThemeOptions() {
+      const defaultThemes = [
+        { value: "", label: "Empty" },
+        { value: "default", label: "Default" },
+
+        { value: "system", label: "System" },
+        { value: "claude", label: "Claude" },
+        { value: "bauhaus", label: "Bauhaus" },
+        { value: "venetian", label: "Venetian" },
+        { value: "newspaper", label: "Newspaper" },
+        { value: "didone", label: "Didone" },
+        { value: "transitional", label: "Transitional" },
+
+        { value: "english-oldstyle", label: "English Oldstyle" },
+
+        { value: "paper", label: "Paper" },
+        { value: "swiss", label: "Swiss" },
+        { value: "kernel", label: "Kernel" },
+        { value: "forest", label: "Forest" },
+        { value: "book", label: "Book" },
+        { value: "occult", label: "Occult" },
+        { value: "baroque", label: "Baroque" },
+        { value: "botanist", label: "Botanist" },
+        { value: "chalky", label: "Chalky" },
+        { value: "minimal", label: "Minimal" },
+        { value: "marauder", label: "Marauder" },
+        { value: "blueprint", label: "Blueprint" },
+        { value: "custom_1", label: "Custom 1" },
+        { value: "custom_2", label: "Custom 2" },
+        { value: "custom_3", label: "Custom 3" },
+      ];
+
+      // Merge default themes with custom themes
+      const allThemes = [...defaultThemes, ...this.customThemes];
+
+      const current = document.documentElement.getAttribute("data-theme") || "";
+      return allThemes
+        .map(
+          (theme) =>
+            `<option value="${theme.value}" ${current === theme.value ? "selected" : ""}>${theme.label}</option>`,
+        )
+        .join("");
+    }
+
+    attachQuickPanelListeners() {
+      this.panel
+        .querySelector('[data-action="close"]')
+        ?.addEventListener("click", () => this.close());
+      this.panel
+        .querySelector('[data-toggle="debug"]')
+        ?.addEventListener("change", (e) => {
+          const isEnabled = e.target.checked;
+          document.documentElement.classList.toggle(
+            "standard-debug",
+            isEnabled,
+          );
+
+          // UPDATED: Save debug mode to sessionStorage
+          this.saveDebugMode(isEnabled);
+
+          const currentTheme =
+            document.documentElement.getAttribute("data-theme");
+          const isBlueprintActive = currentTheme === "blueprint";
+
+          if (isEnabled || isBlueprintActive) {
+            this.injectGridDebugOverlays();
+          } else {
+            this.removeGridDebugOverlays();
+          }
+          window.toast?.info(
+            `Debug mode ${e.target.checked ? "enabled" : "disabled"}`,
+          );
+        });
+      this.panel
+        .querySelector('[data-action="theme"]')
+        ?.addEventListener("change", (e) => {
+          const theme = e.target.value;
+          if (theme) {
+            document.documentElement.setAttribute("data-theme", theme);
+          } else {
+            document.documentElement.removeAttribute("data-theme");
+          }
+          sessionStorage.setItem("standard-theme", theme);
+
+          // Handle blueprint exception for debug mode
+          this.handleBlueprintDebugException(theme);
+
+          window.toast?.info(`Theme: ${theme || "Default"}`);
+        });
+      this.panel
+        .querySelector('[data-action="edit-tokens"]')
+        ?.addEventListener("click", () => this.openFull());
+      this.panel
+        .querySelector('[data-action="reset"]')
+        ?.addEventListener("click", () => this.resetAll());
+      this.panel
+        .querySelector('[data-action="copy"]')
+        ?.addEventListener("click", () => this.copyCSS());
+    }
+    /**
+     * Handle the blueprint theme exception for debug grid overlay
+     * @param {string} theme - Current theme name
+     */
+    handleBlueprintDebugException(theme) {
+      const isBlueprint = theme === "blueprint";
+      const hasDebugClass =
+        document.documentElement.classList.contains("standard-debug");
+
+      if (isBlueprint && !hasDebugClass) {
+        // Blueprint theme activated - show grid overlays
+        this.injectGridDebugOverlays();
+      } else if (!isBlueprint && !hasDebugClass) {
+        // Non-blueprint theme and debug not active - remove overlays
+        this.removeGridDebugOverlays();
+      }
+      // If debug is explicitly active, let it control the overlays
+    }
+    createFullPanel() {
+      if (this.panel) this.panel.remove();
+      this.panel = document.createElement("div");
+      this.panel.id = "standard-lab-panel-container";
+      this.panel.className = "standard-lab-panel standard-lab-panel-full";
+      this.panel.style.bottom = `calc(${this.position.bottom}px + var(--space-2))`;
+      this.panel.style.right = `${this.position.right}px`;
+      const modifiedCount = this.modifiedTokens.size;
+      const showModifiedOnly = modifiedCount > 0;
+      this.panel.innerHTML = `
+      <header class="standard-lab-panel-header" style="cursor: grab;">
+        <h2 style="display:inline-block;">Token Editor</h2>
+        <div class="standard-lab-header-actions">
+          <button class="standard-lab-btn-icon" data-action="minimize" title="Minimize">−</button>
+          <button class="standard-lab-btn-icon" data-action="close" title="Close (Esc)">×</button>
+        </div>
+      </header>
+      <nav class="standard-lab-tabs">
+        <button class="standard-lab-tab" data-tab="typography" aria-selected="true">Typography</button>
+        <button class="standard-lab-tab" data-tab="layout">Layout</button>
+        <button class="standard-lab-tab" data-tab="colors">Colors</button>
+        <button class="standard-lab-tab" data-tab="advanced">Advanced</button>
+      </nav>
+      ${modifiedCount > 0 ? `<div class="standard-lab-filter"><label class="standard-lab-toggle"><input type="checkbox" ${showModifiedOnly ? "checked" : ""} data-filter="modified"><span>Show modified only (${modifiedCount})</span></label></div>` : ""}
+      <div class="standard-lab-content">${this.renderTokenList("typography", showModifiedOnly)}</div>
+      <div class="standard-lab-actions">
+        <button class="standard-lab-btn standard-lab-btn-secondary" data-action="reset">Reset All</button>
+        <button class="standard-lab-btn" data-action="copy">Copy CSS</button>
+      </div>
+    `;
+      this.attachFullPanelListeners();
+      this.makeDraggable(
+        this.panel.querySelector(".standard-lab-panel-header"),
+      );
+      document.body.appendChild(this.panel);
+      requestAnimationFrame(() => {
+        this.panel.style.opacity = "1";
+        this.panel.style.transform = "translateY(0)";
+      });
+    }
+
+    renderTokenList(category, modifiedOnly = false) {
+      const tokens = this.coreTokens[category] || [];
+      let filteredTokens = modifiedOnly
+        ? tokens.filter((token) => this.modifiedTokens.has(token))
+        : tokens;
+      if (filteredTokens.length === 0) {
+        return `<div class="standard-lab-empty">No tokens to display</div>`;
+      }
+      return `<div class="standard-lab-token-list">${filteredTokens.map((token) => this.renderTokenRow(token)).join("")}</div>`;
+    }
+
+    /**
+     * Check if a value is numeric (with optional unit)
+     */
+    isNumericValue(value) {
+      if (!value) return false;
+      // Match patterns like: 1.5, 1.5rem, 16px, 1.618, 500
+      return /^-?\d+(\.\d+)?(rem|em|px|%|ch|vh|vw)?$/.test(value.trim());
+    }
+
+    /**
+     * Extract numeric portion from a CSS value
+     */
+    extractNumericValue(value) {
+      if (!value) return 0;
+      const match = value.match(/^(-?\d+(\.\d+)?)/);
+      return match ? parseFloat(match[1]) : 0;
+    }
+
+    /**
+     * Extract unit from a CSS value (rem, px, em, etc.)
+     */
+    extractUnit(value) {
+      if (!value) return "";
+      const match = value.match(/[a-z%]+$/i);
+      return match ? match[0] : "";
+    }
+
+    renderTokenRow(token) {
+      const value = this.getPropertyValue(token);
+      const isModified = this.modifiedTokens.has(token);
+      const isColor = token.includes("color") && this.isColorValue(value);
+      const sliderConfig = this.sliderConfig[token];
+
+      // Detect if this is a slider-enabled numeric token
+      const isSlider = sliderConfig && this.isNumericValue(value);
+
+      if (isSlider) {
+        const numericValue = this.extractNumericValue(value);
+        return `
+        <div class="standard-lab-token-row ${isModified ? "is-modified" : ""}">
+          <div class="standard-lab-slider-container">
+            <label class="standard-lab-slider-label">${token}</label>
+            <div class="standard-lab-slider-controls">
+              <input
+                type="range"
+                class="standard-lab-slider-input"
+                data-token="${token}"
+                value="${numericValue}"
+                min="${sliderConfig.min}"
+                max="${sliderConfig.max}"
+                step="${sliderConfig.step}"
+                title="${token}">
+              <input
+                type="text"
+                class="standard-lab-text-input standard-lab-slider-value"
+                data-token="${token}"
+                value="${value}"
+                spellcheck="false">
+            </div>
+          </div>
+          <button class="standard-lab-btn-icon standard-lab-btn-reset" data-action="reset-token" data-token="${token}" title="Reset" ${!isModified ? "disabled" : ""}>↺</button>
+        </div>
+      `;
+      }
+
+      if (isColor) {
+        return `
+        <div class="standard-lab-token-row ${isModified ? "is-modified" : ""}">
+          <div class="standard-lab-color-container">
+            <label class="standard-lab-color-label">${token}</label>
+            <div class="standard-lab-color-controls">
+              <input
+                type="color"
+                class="standard-lab-color-input"
+                data-token="${token}"
+                value="${this.extractHexColor(value)}"
+                title="Pick color">
+              <input
+                type="text"
+                class="standard-lab-text-input standard-lab-color-value"
+                data-token="${token}"
+                value="${value}"
+                placeholder="${token}"
+                spellcheck="false">
+            </div>
+          </div>
+          <button class="standard-lab-btn-icon standard-lab-btn-reset" data-action="reset-token" data-token="${token}" title="Reset" ${!isModified ? "disabled" : ""}>↺</button>
+        </div>
+      `;
+      }
+
+      // Default text input (for font names, etc.)
+      return `
+      <div class="standard-lab-token-row ${isModified ? "is-modified" : ""}">
+        <div class="standard-lab-text-container">
+          <label class="standard-lab-text-label">${token}</label>
+          <input type="text" class="standard-lab-text-input" data-token="${token}" value="${value}" placeholder="${token}" spellcheck="false">
+        </div>
+        <button class="standard-lab-btn-icon standard-lab-btn-reset" data-action="reset-token" data-token="${token}" title="Reset" ${!isModified ? "disabled" : ""}>↺</button>
+      </div>
+    `;
+    }
+
+    attachFullPanelListeners() {
+      this.panel
+        .querySelector('[data-action="close"]')
+        ?.addEventListener("click", () => this.close());
+      this.panel
+        .querySelector('[data-action="minimize"]')
+        ?.addEventListener("click", () => this.openQuick());
+      this.panel.querySelectorAll(".standard-lab-tab").forEach((tab) => {
+        tab.addEventListener("click", (e) =>
+          this.switchTab(e.target.dataset.tab),
+        );
+      });
+      this.panel
+        .querySelector('[data-filter="modified"]')
+        ?.addEventListener("change", (e) =>
+          this.refreshTokenList(e.target.checked),
+        );
+
+      // Slider input listeners
+      this.panel
+        .querySelectorAll(".standard-lab-slider-input")
+        .forEach((slider) => {
+          slider.addEventListener("input", (e) => {
+            const token = e.target.dataset.token;
+            const numericValue = e.target.value;
+            const config = this.sliderConfig[token];
+            const unit =
+              config.unit || this.extractUnit(this.getPropertyValue(token));
+            const fullValue = `${numericValue}${unit}`;
+
+            this.updateToken(token, fullValue);
+
+            // Update the text input to reflect slider value
+            const textInput = this.panel.querySelector(
+              `.standard-lab-slider-value[data-token="${token}"]`,
+            );
+            if (textInput) textInput.value = fullValue;
+          });
+        });
+
+      // Text input for sliders (allows manual override)
+      this.panel
+        .querySelectorAll(".standard-lab-slider-value")
+        .forEach((input) => {
+          input.addEventListener("input", (e) => {
+            const token = e.target.dataset.token;
+            const value = e.target.value;
+            const numericValue = this.extractNumericValue(value);
+
+            this.updateToken(token, value);
+
+            // Sync slider position
+            const slider = this.panel.querySelector(
+              `.standard-lab-slider-input[data-token="${token}"]`,
+            );
+            if (slider) slider.value = numericValue;
+          });
+        });
+
+      // Regular text inputs
+      this.panel
+        .querySelectorAll(
+          ".standard-lab-text-input:not(.standard-lab-slider-value):not(.standard-lab-color-value)",
+        )
+        .forEach((input) => {
+          input.addEventListener("input", (e) =>
+            this.updateToken(e.target.dataset.token, e.target.value),
+          );
+        });
+
+      // Color pickers
+      this.panel
+        .querySelectorAll(".standard-lab-color-input")
+        .forEach((input) => {
+          input.addEventListener("input", (e) => {
+            const token = e.target.dataset.token;
+            const color = e.target.value;
+            this.updateToken(token, color);
+            const textInput = this.panel.querySelector(
+              `.standard-lab-color-value[data-token="${token}"]`,
+            );
+            if (textInput) textInput.value = color;
+          });
+        });
+
+      // Color text inputs
+      this.panel
+        .querySelectorAll(".standard-lab-color-value")
+        .forEach((input) => {
+          input.addEventListener("input", (e) => {
+            const token = e.target.dataset.token;
+            const value = e.target.value;
+            this.updateToken(token, value);
+            const colorInput = this.panel.querySelector(
+              `.standard-lab-color-input[data-token="${token}"]`,
+            );
+            if (colorInput && this.isColorValue(value)) {
+              colorInput.value = this.extractHexColor(value);
+            }
+          });
+        });
+
+      // Reset buttons
+      this.panel
+        .querySelectorAll('[data-action="reset-token"]')
+        .forEach((btn) => {
+          btn.addEventListener("click", (e) =>
+            this.resetToken(e.target.dataset.token),
+          );
+        });
+      this.panel
+        .querySelector('[data-action="reset"]')
+        ?.addEventListener("click", () => this.resetAll());
+      this.panel
+        .querySelector('[data-action="copy"]')
+        ?.addEventListener("click", () => this.copyCSS());
+    }
+
+    switchTab(category) {
+      this.currentTab = category;
+      this.panel.querySelectorAll(".standard-lab-tab").forEach((tab) => {
+        tab.setAttribute("aria-selected", tab.dataset.tab === category);
+      });
+      const showModifiedOnly =
+        this.panel.querySelector('[data-filter="modified"]')?.checked || false;
+      this.refreshTokenList(showModifiedOnly);
+    }
+
+    refreshTokenList(modifiedOnly = false) {
+      const content = this.panel?.querySelector(".standard-lab-content");
+      if (!content) return;
+      content.innerHTML = this.renderTokenList(this.currentTab, modifiedOnly);
+      this.attachFullPanelListeners();
+    }
+
+    updateToken(token, value) {
+      document.documentElement.style.setProperty(token, value);
+      if (value !== this.defaults[token]) {
+        this.modifiedTokens.add(token);
+      } else {
+        this.modifiedTokens.delete(token);
+      }
+      this.updateBadge();
+      const resetBtn = this.panel?.querySelector(
+        `[data-action="reset-token"][data-token="${token}"]`,
+      );
+      if (resetBtn) resetBtn.disabled = !this.modifiedTokens.has(token);
+      const row = this.panel?.querySelector(
+        `.standard-lab-token-row:has([data-token="${token}"])`,
+      );
+      if (row)
+        row.classList.toggle("is-modified", this.modifiedTokens.has(token));
+      if (
+        token.includes("font-") &&
+        !token.includes("font-size") &&
+        !token.includes("font-ratio")
+      ) {
+        this.loadGoogleFont(value);
+      }
+    }
+
+    resetToken(token) {
+      const defaultValue = this.defaults[token];
+      if (defaultValue) {
+        document.documentElement.style.setProperty(token, defaultValue);
+        this.modifiedTokens.delete(token);
+        const input = this.panel?.querySelector(`[data-token="${token}"]`);
+        if (input) input.value = defaultValue;
+        this.updateBadge();
+        this.refreshTokenList();
+        window.toast?.info(`Reset ${token}`);
+      }
+    }
+
+    resetAll() {
+      if (!confirm("Reset all tokens to defaults?")) return;
+      document.documentElement.removeAttribute("style");
+      this.modifiedTokens.clear();
+      this.googleFontsLoaded.clear();
+      this.updateBadge();
+      if (this.state === "full") {
+        this.refreshTokenList();
+      }
+      window.toast?.info("All tokens reset");
+    }
+
+    copyCSS() {
+      const allTokens = [
+        ...this.coreTokens.typography,
+        ...this.coreTokens.layout,
+        ...this.coreTokens.colors,
+        ...this.coreTokens.advanced,
+      ];
+      const css = `:root {\n${allTokens.map((token) => `  ${token}: ${this.getPropertyValue(token)};`).join("\n")}\n}`;
+      navigator.clipboard
+        .writeText(css)
+        .then(() => window.toast?.success("CSS copied to clipboard!"))
+        .catch(() => {
+          const textarea = document.createElement("textarea");
+          textarea.value = css;
+          textarea.style.position = "fixed";
+          textarea.style.opacity = "0";
+          document.body.appendChild(textarea);
+          textarea.select();
+          document.execCommand("copy");
+          document.body.removeChild(textarea);
+          window.toast?.success("CSS copied to clipboard!");
+        });
+    }
+
+    getPropertyValue(token) {
+      const value = getComputedStyle(document.documentElement)
+        .getPropertyValue(token)
+        .trim();
+      return (
+        value || document.documentElement.style.getPropertyValue(token).trim()
+      );
+    }
+
+    isColorValue(value) {
+      return value
+        ? value.startsWith("#") ||
+        value.startsWith("rgb") ||
+        value.startsWith("hsl") ||
+        value.startsWith("oklch") ||
+        value.includes("color-mix")
+        : false;
+    }
+
+    extractHexColor(value) {
+      if (!value) return "#000000";
+      const hexMatch = value.match(/#[0-9a-f]{6}/i);
+      if (hexMatch) return hexMatch[0];
+      const rgbMatch = value.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
+      if (rgbMatch) {
+        const [, r, g, b] = rgbMatch;
+        return (
+          "#" +
+          [r, g, b]
+            .map((x) => parseInt(x).toString(16).padStart(2, "0"))
+            .join("")
+        );
+      }
+      const colorMap = {
+        white: "#ffffff",
+        black: "#000000",
+        red: "#ff0000",
+        green: "#00ff00",
+        blue: "#0000ff",
+        yellow: "#ffff00",
+        orange: "#ffa500",
+        purple: "#800080",
+        pink: "#ffc0cb",
+        cyan: "#00ffff",
+      };
+      return colorMap[value.toLowerCase()] || "#000000";
+    }
+
+    loadGoogleFont(fontName) {
+      const cleanName = fontName.split(",")[0].trim().replace(/['"]/g, "");
+      const systemFonts = [
+        "system-ui",
+        "sans-serif",
+        "serif",
+        "monospace",
+        "-apple-system",
+        "BlinkMacSystemFont",
+      ];
+      if (
+        systemFonts.includes(cleanName) ||
+        this.googleFontsLoaded.has(cleanName)
+      )
+        return;
+      const fontUrl = `https://fonts.googleapis.com/css2?family=${cleanName.replace(/ /g, "+")}:wght@300;400;500;600;700;900&display=swap`;
+      if (
+        !document.querySelector(`link[href*="${cleanName.replace(/ /g, "+")}"]`)
+      ) {
+        const link = document.createElement("link");
+        link.rel = "stylesheet";
+        link.href = fontUrl;
+        document.head.appendChild(link);
+        this.googleFontsLoaded.add(cleanName);
+      }
+    }
+
+    showNotification(message, type = "info") {
+      const notification = document.createElement("div");
+      notification.className = `standard-lab-notification standard-lab-notification-${type}`;
+      notification.textContent = message;
+      document.body.appendChild(notification);
+      requestAnimationFrame(() => {
+        notification.style.opacity = "1";
+        notification.style.transform = "translateY(0)";
+      });
+      setTimeout(() => {
+        notification.style.opacity = "0";
+        notification.style.transform = "translateY(-10px)";
+        setTimeout(() => notification.remove(), 200);
+      }, 2500);
+    }
+
+    initKeyboardShortcuts() {
+      document.addEventListener("keydown", (e) => {
+        const isMac = navigator.platform.indexOf("Mac") > -1;
+        if (
+          e.shiftKey &&
+          (isMac ? e.metaKey : e.ctrlKey) &&
+          e.key.toLowerCase() === "s"
+        ) {
+          e.preventDefault();
+          this.state === "dormant" ? this.openQuick() : this.close();
+        }
+        if (
+          e.shiftKey &&
+          (isMac ? e.metaKey : e.ctrlKey) &&
+          e.key.toLowerCase() === "d"
+        ) {
+          e.preventDefault();
+
+          document.documentElement.classList.toggle("standard-debug");
+          const isActive =
+            document.documentElement.classList.contains("standard-debug");
+
+          // UPDATED: Save debug mode to sessionStorage
+          this.saveDebugMode(isActive);
+
+          if (isActive) {
+            this.injectGridDebugOverlays();
+          } else {
+            this.removeGridDebugOverlays();
+          }
+
+          window.toast?.info(`Debug mode ${isActive ? "enabled" : "disabled"}`);
+        }
+        if (e.key === "Escape" && this.state !== "dormant") {
+          this.close();
+        }
+      });
+    }
+
+    initModificationTracking() {
+      const allTokens = [
+        ...this.coreTokens.typography,
+        ...this.coreTokens.layout,
+        ...this.coreTokens.colors,
+        ...this.coreTokens.advanced,
+      ];
+      allTokens.forEach((token) => {
+        const currentValue = this.getPropertyValue(token);
+        const defaultValue = this.defaults[token];
+        if (currentValue && defaultValue && currentValue !== defaultValue) {
+          this.modifiedTokens.add(token);
+        }
+      });
+      this.updateBadge();
+    }
+
+    /**
+     * Inject grid debug overlays into all .prose containers
+     */
+    injectGridDebugOverlays() {
+      const proseContainers = document.querySelectorAll(".prose");
+
+      proseContainers.forEach((prose) => {
+        // Check if overlay already exists
+        if (prose.querySelector(".grid-debug-overlay")) {
+          return;
+        }
+
+        const overlay = document.createElement("div");
+        overlay.className = "grid-debug-overlay";
+        overlay.setAttribute("aria-hidden", "true");
+
+        // Add 7 spans for grid columns
+        for (let i = 0; i < 7; i++) {
+          overlay.appendChild(document.createElement("span"));
+        }
+
+        // Insert as first child
+        prose.insertBefore(overlay, prose.firstChild);
+      });
+    }
+
+    /**
+     * Remove grid debug overlays from all .prose containers
+     */
+    removeGridDebugOverlays() {
+      document
+        .querySelectorAll(".grid-debug-overlay")
+        .forEach((overlay) => overlay.remove());
+    }
+
+    injectStyles() {
+      if (document.getElementById("standard-lab-styles")) return;
+      const styles = document.createElement("style");
+      styles.id = "standard-lab-styles";
+      styles.textContent = `
+      .standard-lab-badge { font-family: var(--standard-lab-font-family); position: fixed; width: var(--space-half); height: var(--space-half); border-radius: 50%; background: var(--color-surface); border: var(--border); box-shadow: var(--shadow); backdrop-filter: var(--blur); cursor: pointer; z-index: var(--z-toast); line-height:1.5; display: flex; align-items: baseline; justify-content: center; color: var(--color-foreground); transition: all 0.2s ease; padding: 0; margin:0; }
+      .standard-lab-badge:hover { box-shadow: var(--shadow); transform: scale(1.05); color: var(--color-dark-accent); }
+      .standard-lab-badge:active { transform: scale(0.95); }
+      .standard-lab-badge[data-modified]::after { content: attr(data-modified); position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-accent); color: var(--color-background); font-size: var(--scale-d3); display: flex; align-items: center; justify-content: center; font-weight: 600; border: var(--border); box-shadow:var(--shadow); }
+      .standard-lab-panel { position: fixed; background: var(--standard-lab-bg); color: var(--standard-lab-text); font-size: var(--standard-lab-text-size); border: var(--standard-lab-border); border-radius: 6px; box-shadow: var(--standard-lab-shadow); backdrop-filter: var(--standard-lab-blur); z-index: var(--z-toast); opacity: 0; transform: translateY(10px); transition: opacity 0.2s ease, transform 0.2s ease; display: flex; flex-direction: column; }
+      .standard-lab-panel * { font-family: var(--standard-lab-font-family) !important; font-size: inherit; line-height:1.5; margin:0; }
+      .standard-lab-panel :is(label, input) { margin:0; }
+      .standard-lab-panel-quick { max-width: 280px; max-height: 400px; }
+      .standard-lab-panel-full { max-width: 360px; max-height: 600px; }
+      .standard-lab-panel-header { padding: 6px; border-bottom: var(--standard-lab-border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
+      .standard-lab-panel-header h2 { margin: 0; font-size: calc(var(--standard-lab-text-size) * 1.167); font-weight: 600; letter-spacing: -0.02em; }
+      .standard-lab-viewport-info { font-size: calc(var(--standard-lab-text-size) * 0.917); font-weight: 400; color: var(--standard-lab-text); opacity: 0.7; margin-top: 2px; font-family: var(--font-monospace); }
+      .standard-lab-header-actions { display: flex; gap: 6px; }
+      .standard-lab-section { margin:0;padding: 4px; border-bottom: var(--standard-lab-border); }
+      .standard-lab-section:last-of-type { border-bottom: none; }
+      .standard-lab-label { display: block; font-size: calc(var(--standard-lab-text-size) * 0.917); font-weight: 600; color: var(--standard-lab-text); opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px; }
+      .standard-lab-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
+      .standard-lab-toggle input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; margin: 0; }
+      .standard-lab-toggle span { flex: 1; font-size: calc(var(--standard-lab-text-size) * 1.167); }
+      .standard-lab-toggle kbd { font-size: calc(var(--standard-lab-text-size) * 1); font-family: var(--font-monospace); color: var(--standard-lab-text); opacity: 0.6; padding: 2px 6px; background: rgba(0,0,0,0.1); border-radius: 6px; }
+      .standard-lab-select { width: 100%; padding: 6px 3px; margin:0 ; background: var(--standard-lab-bg); border: var(--standard-lab-border); border-radius: 6px; font-size: calc(var(--standard-lab-text-size) * 1.167); color: var(--standard-lab-text); cursor: pointer; }
+      .standard-lab-actions { padding: 6px; border-top: var(--standard-lab-border); display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
+      .standard-lab-btn { font-size: calc(var(--standard-lab-text-size) * 1.167); width: 100%; padding: 6px 3px; background: var(--standard-lab-accent); color: var(--standard-lab-bg); border: var(--standard-lab-border); border-radius: 6px; font-weight: 600; cursor: pointer; transition: opacity 0.2s ease; }
+      .standard-lab-btn:hover { opacity: 0.9; }
+      .standard-lab-btn:active { opacity: 0.8; }
+      .standard-lab-btn-secondary { background: rgba(255,255,255,0.1); color: var(--standard-lab-text); border: var(--standard-lab-border); }
+      .standard-lab-btn-icon { font-size: calc(var(--standard-lab-text-size) * 1.667); width: 24px; height: 24px; padding: 0; background: transparent; border: none; color: var(--standard-lab-text); line-height: 1; cursor: pointer; border-radius: 6px; transition: all 0.2s ease; display: inline-flex; align-items: center; justify-content: center; opacity: 0.7; }
+      .standard-lab-btn-icon:hover { background: rgba(255,255,255,0.1); color: var(--standard-lab-text); opacity: 1; }
+      .standard-lab-tabs { display: flex; border-bottom: var(--standard-lab-border); flex-shrink: 0; }
+      .standard-lab-tab { flex: 1; padding: 6px; background: transparent; border: none; border-bottom: 2px solid transparent; font-size: calc(var(--standard-lab-text-size) * 1.333); font-weight: 500; color: var(--standard-lab-text); opacity: 0.6; cursor: pointer; transition: all 0.2s ease; }
+      .standard-lab-tab:hover { color: var(--standard-lab-text); opacity: 1; background: rgba(255,255,255,0.05); }
+      .standard-lab-tab[aria-selected="true"] { color: var(--standard-lab-accent); opacity: 1; border-bottom-color: var(--standard-lab-accent); font-weight: 600; }
+      .standard-lab-filter { padding: 6px 6px; background: rgba(255,255,255,0.05); border-bottom: var(--standard-lab-border); flex-shrink: 0; }
+      .standard-lab-content { flex: 1; overflow-y: auto; padding: 6px; }
+      .standard-lab-content::-webkit-scrollbar { width: 6px; }
+      .standard-lab-content::-webkit-scrollbar-track { background: transparent; }
+      .standard-lab-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 6px; }
+      .standard-lab-content::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
+      .standard-lab-token-list { display: flex; flex-direction: column; gap: 3px; }
+      .standard-lab-token-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: start; padding: 6px; border-radius: 6px; transition: background 0.2s ease; }
+      .standard-lab-token-row:hover { background: rgba(255,255,255,0.05); }
+      .standard-lab-token-row.is-modified { background: rgba(var(--standard-lab-accent-rgb, 255), 0.05); }
+      .standard-lab-text-input { padding: 0; background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: var(--standard-lab-text-size); font-family: var(--font-monospace); color: var(--standard-lab-text); min-width: 0; transition: all 0.2s ease; }
+      .standard-lab-text-input:focus { outline: none; background: rgba(255,255,255,0.05); border-color: var(--standard-lab-accent); }
+      .standard-lab-color-container { width: 100%; }
+      .standard-lab-color-label { display: block; font-size: calc(var(--standard-lab-text-size) * 0.917); font-family: var(--font-monospace); color: var(--standard-lab-text); opacity: 0.7; margin-bottom: 6px; }
+      .standard-lab-color-controls { display: flex; gap: 6px; align-items: center; }
+      .standard-lab-color-input { width: 40px; height: 40px; border: var(--standard-lab-border); border-radius: 6px; cursor: pointer; padding: 4px; background: rgba(255,255,255,0.05); flex-shrink: 0; }
+      .standard-lab-color-input::-webkit-color-swatch-wrapper { padding: 0; }
+      .standard-lab-color-input::-webkit-color-swatch { border: none; border-radius: 6px; }
+      .standard-lab-color-value { flex: 1; min-width: 0; padding: 0; font-family: var(--font-monospace); font-size: var(--standard-lab-text-size); }
+      .standard-lab-text-container { width: 100%; }
+      .standard-lab-text-label { display: block; font-size: calc(var(--standard-lab-text-size) * 0.917); font-family: var(--font-monospace); color: var(--standard-lab-text); opacity: 0.7; margin-bottom: 6px; }
+      .standard-lab-slider-container { width: 100%; }
+      .standard-lab-slider-label { display: block; font-size: calc(var(--standard-lab-text-size) * 0.917); font-family: var(--font-monospace); color: var(--standard-lab-text); opacity: 0.7; margin-bottom: 6px; }
+      .standard-lab-slider-controls { display: flex; gap: 6px; align-items: center; }
+      .standard-lab-slider-input { flex: 1; height: 6px; -webkit-appearance: none; appearance: none; background: rgba(255,255,255,0.1); border-radius: 6px; outline: none; cursor: pointer; }
+      .standard-lab-slider-input::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: var(--standard-lab-accent); border-radius: 50%; cursor: grab; transition: transform 0.1s ease; }
+      .standard-lab-slider-input::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.2); }
+      .standard-lab-slider-input::-moz-range-thumb { width: 16px; height: 16px; background: var(--standard-lab-accent); border-radius: 50%; border: none; cursor: grab; transition: transform 0.1s ease; }
+      .standard-lab-slider-input::-moz-range-thumb:active { cursor: grabbing; transform: scale(1.2); }
+      .standard-lab-slider-value { width: 80px; flex-shrink: 0; text-align: center; padding: 6px 8px; font-size: var(--standard-lab-text-size); }
+      .standard-lab-btn-reset { opacity: 0; transition: opacity 0.2s ease; }
+      .standard-lab-token-row:hover .standard-lab-btn-reset:not(:disabled) { opacity: 1; }
+      .standard-lab-btn-reset:disabled { opacity: 0; cursor: not-allowed; }
+      .standard-lab-empty { padding: 6px; text-align: center; color: var(--standard-lab-text); opacity: 0.6; font-size: calc(var(--standard-lab-text-size) * 1.167); }
+      .standard-lab-notification { position: fixed; top: 6px; left: 50%; transform: translateX(-50%) translateY(-10px); background: var(--standard-lab-bg); border: var(--standard-lab-border); border-radius: 6px; padding: 8px 16px; box-shadow: var(--standard-lab-shadow); z-index: calc(var(--z-toast) + 1); font-size: calc(var(--standard-lab-text-size) * 1.167); opacity: 0; transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; }
+      .standard-lab-notification-success { background: var(--standard-lab-accent); color: var(--standard-lab-bg); border-color: var(--standard-lab-accent); }
+      .standard-lab-notification-info { background: var(--standard-lab-accent); color: var(--standard-lab-bg); border-color: var(--standard-lab-accent); }
+      @media (prefers-color-scheme: dark) { .standard-lab-panel { box-shadow: var(--standard-lab-shadow); } }
+      @media (max-width: 768px) { .standard-lab-panel-quick, .standard-lab-panel-full { width: calc(100vw - 32px); max-width: 360px; } }
+      @media print { .standard-lab-badge, .standard-lab-panel, .standard-lab-notification { display: none !important; } }
+    `;
+      document.head.appendChild(styles);
+    }
+  }
+
+  // ================================================================
+  // AUTO-INITIALIZATION AND ASTRO CLIENTROUTER INTEGRATION
+  // ================================================================
+
+  if (typeof window !== "undefined") {
+    const setupStandardLab = () => {
+      // Ensure body exists before initializing
+      if (!document.body) {
+        setTimeout(setupStandardLab, 10);
+        return;
+      }
+
+      if (!window.StandardLab) {
+        window.StandardLab = new StandardLab();
+        if (window.StandardLab.log) {
+          window.StandardLab.log.info("Initialized");
+        }
+      }
+
+      // Handle HTMX swaps - Setup here to ensure document.body exists
+      if (document.body) {
+        document.body.addEventListener("htmx:afterSettle", () => {
+          if (window.StandardLab) {
+            if (window.StandardLab.log) {
+              window.StandardLab.log.debug("HTMX swap detected");
+            }
+            window.StandardLab.refresh();
+          }
+        });
+      }
+    };
+
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", setupStandardLab);
+    } else {
+      setupStandardLab();
+    }
+
+    // Handle Astro ClientRouter page swaps - MUST check root container
+    document.addEventListener("astro:after-swap", () => {
+      const l = (window.StandardLab && window.StandardLab.log) || console;
+      if (l.debug) l.debug("Page swap detected");
+
+      if (!window.StandardLab) {
+        const l = (window.standard && window.standard.log) || console;
+        if (l.warn) l.warn("Instance not found, reinitializing");
+        window.StandardLab = new StandardLab();
+        return;
+      }
+
+      // Check if badge exists in the new DOM
+      const badge = document.getElementById("standard-lab-badge-container");
+
+      // If badge is gone, recreate it
+      if (!badge) {
+        if (window.StandardLab.log) {
+          window.StandardLab.log.debug("Recreating badge");
+        }
+        window.StandardLab.badge = null;
+        window.StandardLab.createBadge();
+      }
+
+      // If panel was open, we might want to close it or re-open it.
+      // For now, let's ensure state is consistent.
+      // If the panel element is missing from DOM but state says it's open, close it to reset.
+      const panel = document.getElementById("standard-lab-panel-container");
+      if (window.StandardLab.state !== "dormant" && !panel) {
+        window.StandardLab.state = "dormant";
+        window.StandardLab.panel = null;
+      }
+
+      // Always restore state from storage
+      window.StandardLab.restoreTheme();
+      window.StandardLab.restoreDebugMode();
+
+      // Re-inject debug overlays if needed
+      if (document.documentElement.classList.contains("standard-debug")) {
+        window.StandardLab.injectGridDebugOverlays();
+      }
+    });
+  }
+})();

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@stnd/lab",
+  "version": "0.2.0",
+  "type": "module",
+  "main": "./lab.js",
+  "exports": {
+    ".": "./lab.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}