@stnd/lab 0.2.0 → 1.0.0

package/{lab.js → old.standard.lab.js}

@@ -34,13 +34,14 @@
         "--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: "" },
+        "--font-weight-bold": { 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-body": { min: 0, max: 4, 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" },
       };
@@ -55,7 +56,7 @@
           "--optical-ratio",
           "--line-height",
           "--font-weight",
-          "--bold-weight",
+          "--font-weight-bold",
           "--font-letter-spacing",
           "--font-header-letter-spacing",
           "--font-header-weight",
@@ -63,9 +64,9 @@
         layout: [
           "--line-width",
           "--line-width-xs",
-          "--line-width-s",
-          "--line-width-m",
-          "--line-width-l",
+          "--line-width-sm",
+          "--line-width-md",
+          "--line-width-lg",
           "--line-width-xl",
           "--base",
           "--base-gap",
@@ -81,7 +82,7 @@
           "--ratio-wholestep",
           "--ratio-halfstep",
           "--radius",
-          "--blur",
+          "--filter-blur",
           "--transition",
           "--line-width",
           "--shadow",
@@ -91,21 +92,20 @@
 
       // NEW: CSS Variable configuration for StandardLab styling
       this.cssVars = {
-        "--standard-lab-bg":
+        "--stnd-lab-bg":
           "color-mix( in srgb, var(--color-dark-background) 90%, var(--color-dark-foreground))",
-        "--standard-lab-text":
+        "--stnd-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)",
+        "--stnd-lab-text-size": "12px",
+        "--stnd-lab-opacity": "1",
+        "--stnd-lab-accent": "var(--color-accent)",
+        "--stnd-lab-border": "var(--border)",
+        "--stnd-lab-shadow": "var(--shadow)",
+        "--stnd-lab-blur": "var(--filter-blur)",
+        "--stnd-lab-font-family": "var(--font-monospace)",
       };
 
       this.defaults = {};
-      this.log = (window.standard && window.standard.log) || console;
       this.initCSSVars();
       this.init();
     }
@@ -119,14 +119,14 @@
 
     /**
      * Set a custom CSS variable for StandardLab styling
-     * @param {string} varName - Variable name (e.g., "--standard-lab-bg")
+     * @param {string} varName - Variable name (e.g., "--stnd-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");
+     * window.StandardLab.setCSSVar("--stnd-lab-bg", "#1a1a1a");
+     * window.StandardLab.setCSSVar("--stnd-lab-text", "#fff");
+     * window.StandardLab.setCSSVar("--stnd-lab-text-size", "14px");
+     * window.StandardLab.setCSSVar("--stnd-lab-opacity", "0.95");
      */
     setCSSVar(varName, value) {
       this.cssVars[varName] = value;
@@ -159,7 +159,7 @@
       // 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");
+        document.documentElement.classList.contains("stnd-debug");
       const isBlueprintActive = currentTheme === "blueprint";
 
       if (isDebugActive || isBlueprintActive) {
@@ -181,7 +181,7 @@
 
     restoreTheme() {
       // Use sessionStorage instead of localStorage for tab-specific persistence
-      const savedTheme = sessionStorage.getItem("standard-theme");
+      const savedTheme = sessionStorage.getItem("stnd-theme");
 
       if (savedTheme) {
         document.documentElement.setAttribute("data-theme", savedTheme);
@@ -190,23 +190,23 @@
 
     // NEW: Restore debug mode from sessionStorage
     restoreDebugMode() {
-      const savedDebugMode = sessionStorage.getItem("standard-debug-mode");
+      const savedDebugMode = sessionStorage.getItem("stnd-debug-mode");
 
       if (savedDebugMode === "true") {
-        document.documentElement.classList.add("standard-debug");
+        document.documentElement.classList.add("stnd-debug");
       } else if (savedDebugMode === "false") {
-        document.documentElement.classList.remove("standard-debug");
+        document.documentElement.classList.remove("stnd-debug");
       }
     }
 
     // NEW: Save debug mode to sessionStorage
     saveDebugMode(isEnabled) {
-      sessionStorage.setItem("standard-debug-mode", isEnabled.toString());
+      sessionStorage.setItem("stnd-debug-mode", isEnabled.toString());
     }
 
     // NEW: Restore panel state from sessionStorage
     restorePanelState() {
-      const savedPanelState = sessionStorage.getItem("standard-panel-state");
+      const savedPanelState = sessionStorage.getItem("stnd-panel-state");
 
       if (savedPanelState === "quick") {
         this.openQuick();
@@ -218,9 +218,28 @@
     // NEW: Save panel state to sessionStorage
     savePanelState(state) {
       if (state === "dormant") {
-        sessionStorage.removeItem("standard-panel-state");
+        sessionStorage.removeItem("stnd-panel-state");
       } else {
-        sessionStorage.setItem("standard-panel-state", state);
+        sessionStorage.setItem("stnd-panel-state", state);
+      }
+    }
+
+    // Emit a window event when the panel state changes so external clients
+    // (for example the dev toolbar) can stay in sync with the Lab visibility.
+    dispatchStateEvent() {
+      try {
+        if (
+          typeof window !== "undefined" &&
+          typeof window.dispatchEvent === "function"
+        ) {
+          window.dispatchEvent(
+            new CustomEvent("standardlab:state", {
+              detail: { state: this.state },
+            }),
+          );
+        }
+      } catch (e) {
+        console.warn("[StandardLab] dispatchStateEvent failed", e);
       }
     }
 
@@ -274,8 +293,7 @@
         `--color-${scheme}-green`,
         `--color-${scheme}-cyan`,
         `--color-${scheme}-blue`,
-        `--color-${scheme}-purple`,
-        `--color-${scheme}-pink`,
+        `--color-${scheme}-magenta`,
       ];
     }
 
@@ -385,12 +403,14 @@
       this.state = "quick";
       this.savePanelState("quick");
       this.createQuickPanel();
+      this.dispatchStateEvent();
     }
 
     openFull() {
       this.state = "full";
       this.savePanelState("full");
       this.createFullPanel();
+      this.dispatchStateEvent();
     }
 
     close() {
@@ -406,6 +426,7 @@
       }
       this.state = "dormant";
       this.savePanelState("dormant");
+      this.dispatchStateEvent();
     }
 
     /**
@@ -413,16 +434,14 @@
      * 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");
-      }
+      console.log("refresh");
       this.storeDefaults();
 
       this.badge = null;
       this.init();
 
       // Re-inject overlays if debug is active
-      if (document.documentElement.classList.contains("standard-debug")) {
+      if (document.documentElement.classList.contains("stnd-debug")) {
         this.removeGridDebugOverlays();
         this.injectGridDebugOverlays();
       }
@@ -451,6 +470,16 @@
       }
     }
 
+    /** Read current seed / token value, resolving computed style */
+    _seedValue(token) {
+      return (
+        document.documentElement.style.getPropertyValue(token).trim() ||
+        getComputedStyle(document.documentElement)
+          .getPropertyValue(token)
+          .trim()
+      );
+    }
+
     createQuickPanel() {
       if (this.panel) this.panel.remove();
       this.panel = document.createElement("div");
@@ -458,17 +487,90 @@
       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");
+        document.documentElement.classList.contains("stnd-debug");
       const modifiedCount = this.modifiedTokens.size;
+
+      // Current seed colors
+      const lightBg = this._seedValue("--color-light-background");
+      const lightFg = this._seedValue("--color-light-foreground");
+      const lightBgHex = this.extractHexColor(lightBg);
+      const lightFgHex = this.extractHexColor(lightFg);
+
+      // Current fonts
+      const fontText = this._seedValue("--font-text");
+      const fontHeader = this._seedValue("--font-header");
+
+      // Current ratio & padding
+      const ratio = this._seedValue("--optical-ratio");
+      const ratioNum = this.extractNumericValue(ratio) || 1.414;
+      const gapBody = this._seedValue("--gap-body");
+      const gapNum = this.extractNumericValue(gapBody) || 1;
+
       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>
+        <div style="display:inline-flex;align-items:center;gap:6px;">
+          <h2 style="color:var(--color-dark-foreground);display:inline-block;">Lab v${this.version}</h2>
+          <div class="standard-lab-viewport-info" style="display:inline-block;">${window.innerWidth}px</div>
+        </div>
+        <button class="standard-lab-btn-icon" data-action="close" title="Close (Esc)">×</button>
+      </header>
+
+      <!-- Theme -->
+      <section class="standard-lab-section">
+        <label class="standard-lab-label">Theme</label>
+        <select class="standard-lab-select" data-action="theme">
+          ${this.getThemeOptions()}
+        </select>
+      </section>
+
+      <!-- Seed Colors -->
+      <section class="standard-lab-section">
+        <label class="standard-lab-label">Colors</label>
+        <div class="standard-lab-seed-row">
+          <input type="color" class="standard-lab-color-swatch" data-seed="--color-light-background" value="${lightBgHex}" title="Light background">
+          <input type="text" class="standard-lab-seed-input" data-seed="--color-light-background" value="${lightBg}" spellcheck="false" placeholder="background">
+          <span class="standard-lab-seed-tag">bg</span>
+        </div>
+        <div class="standard-lab-seed-row">
+          <input type="color" class="standard-lab-color-swatch" data-seed="--color-light-foreground" value="${lightFgHex}" title="Light foreground">
+          <input type="text" class="standard-lab-seed-input" data-seed="--color-light-foreground" value="${lightFg}" spellcheck="false" placeholder="foreground">
+          <span class="standard-lab-seed-tag">fg</span>
+        </div>
+      </section>
+
+      <!-- Typography -->
+      <section class="standard-lab-section">
+        <label class="standard-lab-label">Typography</label>
+        <div class="standard-lab-font-row">
+          <span class="standard-lab-font-tag">Body</span>
+          <input type="text" class="standard-lab-seed-input" data-seed="--font-text" value="${fontText}" spellcheck="false" placeholder="Font family">
+        </div>
+        <div class="standard-lab-font-row">
+          <span class="standard-lab-font-tag">Head</span>
+          <input type="text" class="standard-lab-seed-input" data-seed="--font-header" value="${fontHeader}" spellcheck="false" placeholder="Font family">
+        </div>
+      </section>
+
+      <!-- Scale -->
+      <section class="standard-lab-section">
+        <label class="standard-lab-label">Scale</label>
+        <div class="standard-lab-quick-slider">
+          <span class="standard-lab-font-tag">Ratio</span>
+          <input type="range" class="standard-lab-slider-input" data-seed="--optical-ratio"
+            value="${ratioNum}" min="1" max="2" step="0.01">
+          <span class="standard-lab-slider-readout" data-readout="--optical-ratio">${ratioNum}</span>
+        </div>
+        <div class="standard-lab-quick-slider">
+          <span class="standard-lab-font-tag">Gap</span>
+          <input type="range" class="standard-lab-slider-input" data-seed="--gap-body"
+            value="${gapNum}" min="0" max="4" step="0.25">
+          <span class="standard-lab-slider-readout" data-readout="--gap-body">${gapNum}rem</span>
+        </div>
+      </section>
+
+      <!-- Debug -->
       <section class="standard-lab-section">
         <label class="standard-lab-toggle">
           <input type="checkbox" ${debugActive ? "checked" : ""} data-toggle="debug">
@@ -476,15 +578,11 @@
           <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>
+
+      <!-- Actions -->
       <div class="standard-lab-actions">
         <button class="standard-lab-btn" data-action="edit-tokens">
-          ${modifiedCount > 0 ? `Edit Tokens (${modifiedCount})` : "Edit Tokens"}
+          ${modifiedCount > 0 ? `All Tokens (${modifiedCount})` : "All 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>
@@ -543,19 +641,26 @@
     }
 
     attachQuickPanelListeners() {
+      // Close / minimize / full-panel
       this.panel
         .querySelector('[data-action="close"]')
         ?.addEventListener("click", () => this.close());
+      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());
+
+      // Debug toggle
       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
+          document.documentElement.classList.toggle("stnd-debug", isEnabled);
           this.saveDebugMode(isEnabled);
 
           const currentTheme =
@@ -571,6 +676,8 @@
             `Debug mode ${e.target.checked ? "enabled" : "disabled"}`,
           );
         });
+
+      // Theme selector
       this.panel
         .querySelector('[data-action="theme"]')
         ?.addEventListener("change", (e) => {
@@ -580,22 +687,125 @@
           } else {
             document.documentElement.removeAttribute("data-theme");
           }
-          sessionStorage.setItem("standard-theme", theme);
-
-          // Handle blueprint exception for debug mode
+          sessionStorage.setItem("stnd-theme", theme);
           this.handleBlueprintDebugException(theme);
 
+          // Re-read seed values after theme switch and update controls
+          this._syncQuickSeedInputs();
           window.toast?.info(`Theme: ${theme || "Default"}`);
         });
+
+      // Seed color pickers (swatch)
       this.panel
-        .querySelector('[data-action="edit-tokens"]')
-        ?.addEventListener("click", () => this.openFull());
+        .querySelectorAll(".standard-lab-color-swatch")
+        .forEach((swatch) => {
+          swatch.addEventListener("input", (e) => {
+            const token = e.target.dataset.seed;
+            const color = e.target.value;
+            this.updateToken(token, color);
+            // Sync companion text input
+            const textInput = this.panel.querySelector(
+              `.standard-lab-seed-input[data-seed="${token}"]`,
+            );
+            if (textInput) textInput.value = color;
+          });
+        });
+
+      // Seed color text inputs
       this.panel
-        .querySelector('[data-action="reset"]')
-        ?.addEventListener("click", () => this.resetAll());
+        .querySelectorAll(
+          '.standard-lab-seed-input[data-seed^="--color-light-"]',
+        )
+        .forEach((input) => {
+          input.addEventListener("input", (e) => {
+            const token = e.target.dataset.seed;
+            const value = e.target.value;
+            this.updateToken(token, value);
+            // Sync companion swatch
+            const swatch = this.panel.querySelector(
+              `.standard-lab-color-swatch[data-seed="${token}"]`,
+            );
+            if (swatch && this.isColorValue(value)) {
+              swatch.value = this.extractHexColor(value);
+            }
+          });
+        });
+
+      // Font family inputs
       this.panel
-        .querySelector('[data-action="copy"]')
-        ?.addEventListener("click", () => this.copyCSS());
+        .querySelectorAll('.standard-lab-seed-input[data-seed^="--font-"]')
+        .forEach((input) => {
+          input.addEventListener("input", (e) => {
+            const token = e.target.dataset.seed;
+            const value = e.target.value;
+            this.updateToken(token, value);
+            this.loadGoogleFont(value);
+          });
+        });
+
+      // Quick sliders (ratio, gap)
+      this.panel
+        .querySelectorAll(
+          ".standard-lab-quick-slider .standard-lab-slider-input",
+        )
+        .forEach((slider) => {
+          slider.addEventListener("input", (e) => {
+            const token = e.target.dataset.seed;
+            const num = e.target.value;
+            const config = this.sliderConfig[token];
+            const unit = config?.unit || "";
+            const fullValue = `${num}${unit}`;
+            this.updateToken(token, fullValue);
+            // Sync readout
+            const readout = this.panel.querySelector(
+              `.standard-lab-slider-readout[data-readout="${token}"]`,
+            );
+            if (readout) readout.textContent = fullValue || num;
+          });
+        });
+    }
+
+    /** Re-read seed values from computed style and sync quick-panel inputs */
+    _syncQuickSeedInputs() {
+      if (!this.panel) return;
+      // Small delay so theme CSS cascades before we read computed values
+      requestAnimationFrame(() => {
+        const seeds = [
+          "--color-light-background",
+          "--color-light-foreground",
+          "--font-text",
+          "--font-header",
+        ];
+        seeds.forEach((token) => {
+          const val = this._seedValue(token);
+          const textInput = this.panel?.querySelector(
+            `.standard-lab-seed-input[data-seed="${token}"]`,
+          );
+          if (textInput) textInput.value = val;
+          const swatch = this.panel?.querySelector(
+            `.standard-lab-color-swatch[data-seed="${token}"]`,
+          );
+          if (swatch && this.isColorValue(val)) {
+            swatch.value = this.extractHexColor(val);
+          }
+        });
+        // Sliders
+        ["--optical-ratio", "--gap-body"].forEach((token) => {
+          const val = this._seedValue(token);
+          const num = this.extractNumericValue(val);
+          const slider = this.panel?.querySelector(
+            `.standard-lab-slider-input[data-seed="${token}"]`,
+          );
+          if (slider) slider.value = num;
+          const readout = this.panel?.querySelector(
+            `.standard-lab-slider-readout[data-readout="${token}"]`,
+          );
+          if (readout) {
+            const config = this.sliderConfig[token];
+            readout.textContent = `${num}${config?.unit || ""}`;
+          }
+        });
+      });
     }
     /**
      * Handle the blueprint theme exception for debug grid overlay
@@ -604,7 +814,7 @@
     handleBlueprintDebugException(theme) {
       const isBlueprint = theme === "blueprint";
       const hasDebugClass =
-        document.documentElement.classList.contains("standard-debug");
+        document.documentElement.classList.contains("stnd-debug");
 
       if (isBlueprint && !hasDebugClass) {
         // Blueprint theme activated - show grid overlays
@@ -992,10 +1202,10 @@
     isColorValue(value) {
       return value
         ? value.startsWith("#") ||
-        value.startsWith("rgb") ||
-        value.startsWith("hsl") ||
-        value.startsWith("oklch") ||
-        value.includes("color-mix")
+            value.startsWith("rgb") ||
+            value.startsWith("hsl") ||
+            value.startsWith("oklch") ||
+            value.includes("color-mix")
         : false;
     }
 
@@ -1089,9 +1299,9 @@
         ) {
           e.preventDefault();
 
-          document.documentElement.classList.toggle("standard-debug");
+          document.documentElement.classList.toggle("stnd-debug");
           const isActive =
-            document.documentElement.classList.contains("standard-debug");
+            document.documentElement.classList.contains("stnd-debug");
 
           // UPDATED: Save debug mode to sessionStorage
           this.saveDebugMode(isActive);
@@ -1167,39 +1377,39 @@
       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 { font-family: var(--stnd-lab-font-family); position: fixed; width: var(--space-d2); height: var(--space-d2); border-radius: 50%; background: var(--color-surface); border: var(--border); box-shadow: var(--shadow); backdrop-filter: var(--filter-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-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(--size-xs); 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(--stnd-lab-bg); color: var(--stnd-lab-text); font-size: var(--stnd-lab-text-size); border: var(--stnd-lab-border); border-radius: 6px; box-shadow: var(--stnd-lab-shadow); backdrop-filter: var(--stnd-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(--stnd-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-quick { max-width: 300px; max-height: 80vh; overflow-y: auto; }
       .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-panel-header { padding: 6px; border-bottom: var(--stnd-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(--stnd-lab-text-size) * 1.167); font-weight: 600; letter-spacing: -0.02em; }
+      .standard-lab-viewport-info { font-size: calc(var(--stnd-lab-text-size) * 0.917); font-weight: 400; color: var(--stnd-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 { margin:0;padding: 4px; border-bottom: var(--stnd-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-label { display: block; font-size: calc(var(--stnd-lab-text-size) * 0.917); font-weight: 600; color: var(--stnd-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-toggle span { flex: 1; font-size: calc(var(--stnd-lab-text-size) * 1.167); }
+      .standard-lab-toggle kbd { font-size: calc(var(--stnd-lab-text-size) * 1); font-family: var(--font-monospace); color: var(--stnd-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(--stnd-lab-bg); border: var(--stnd-lab-border); border-radius: 6px; font-size: calc(var(--stnd-lab-text-size) * 1.167); color: var(--stnd-lab-text); cursor: pointer; }
+      .standard-lab-actions { padding: 6px; border-top: var(--stnd-lab-border); display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }
+      .standard-lab-btn { font-size: calc(var(--stnd-lab-text-size) * 1.167); width: 100%; padding: 6px 3px; background: var(--stnd-lab-accent); color: var(--stnd-lab-bg); border: var(--stnd-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-btn-secondary { background: rgba(255,255,255,0.1); color: var(--stnd-lab-text); border: var(--stnd-lab-border); }
+      .standard-lab-btn-icon { font-size: calc(var(--stnd-lab-text-size) * 1.667); width: 24px; height: 24px; padding: 0; background: transparent; border: none; color: var(--stnd-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(--stnd-lab-text); opacity: 1; }
+      .standard-lab-tabs { display: flex; border-bottom: var(--stnd-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(--stnd-lab-text-size) * 1.333); font-weight: 500; color: var(--stnd-lab-text); opacity: 0.6; cursor: pointer; transition: all 0.2s ease; }
+      .standard-lab-tab:hover { color: var(--stnd-lab-text); opacity: 1; background: rgba(255,255,255,0.05); }
+      .standard-lab-tab[aria-selected="true"] { color: var(--stnd-lab-accent); opacity: 1; border-bottom-color: var(--stnd-lab-accent); font-weight: 600; }
+      .standard-lab-filter { padding: 6px 6px; background: rgba(255,255,255,0.05); border-bottom: var(--stnd-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; }
@@ -1208,35 +1418,50 @@
       .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-token-row.is-modified { background: rgba(var(--stnd-lab-accent-rgb, 255), 0.05); }
+      .standard-lab-text-input { padding: 0; background: transparent; border: 1px solid transparent; border-radius: 6px; font-size: var(--stnd-lab-text-size); font-family: var(--font-monospace); color: var(--stnd-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(--stnd-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-label { display: block; font-size: calc(var(--stnd-lab-text-size) * 0.917); font-family: var(--font-monospace); color: var(--stnd-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 { width: 40px; height: 40px; border: var(--stnd-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-color-value { flex: 1; min-width: 0; padding: 0; font-family: var(--font-monospace); font-size: var(--stnd-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-text-label { display: block; font-size: calc(var(--stnd-lab-text-size) * 0.917); font-family: var(--font-monospace); color: var(--stnd-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-label { display: block; font-size: calc(var(--stnd-lab-text-size) * 0.917); font-family: var(--font-monospace); color: var(--stnd-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 { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; background: var(--stnd-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 { width: 16px; height: 16px; background: var(--stnd-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-slider-value { width: 80px; flex-shrink: 0; text-align: center; padding: 6px 8px; font-size: var(--stnd-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); } }
+      .standard-lab-seed-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
+      .standard-lab-seed-row:last-child { margin-bottom: 0; }
+      .standard-lab-color-swatch { width: 28px; height: 28px; border: var(--stnd-lab-border); border-radius: 4px; cursor: pointer; padding: 2px; background: rgba(255,255,255,0.05); flex-shrink: 0; }
+      .standard-lab-color-swatch::-webkit-color-swatch-wrapper { padding: 0; }
+      .standard-lab-color-swatch::-webkit-color-swatch { border: none; border-radius: 2px; }
+      .standard-lab-seed-input { flex: 1; min-width: 0; padding: 2px 4px; background: transparent; border: 1px solid transparent; border-radius: 4px; font-family: var(--stnd-lab-font-family); font-size: var(--stnd-lab-text-size); color: var(--stnd-lab-text); transition: border-color 0.2s ease; }
+      .standard-lab-seed-input:focus { outline: none; background: rgba(255,255,255,0.05); border-color: var(--stnd-lab-accent); }
+      .standard-lab-seed-tag { font-size: calc(var(--stnd-lab-text-size) * 0.833); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5; flex-shrink: 0; width: 20px; text-align: right; }
+      .standard-lab-font-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
+      .standard-lab-font-row:last-child { margin-bottom: 0; }
+      .standard-lab-font-tag { font-size: calc(var(--stnd-lab-text-size) * 0.833); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.5; flex-shrink: 0; width: 32px; }
+      .standard-lab-quick-slider { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
+      .standard-lab-quick-slider:last-child { margin-bottom: 0; }
+      .standard-lab-quick-slider .standard-lab-slider-input { flex: 1; }
+      .standard-lab-slider-readout { font-family: var(--stnd-lab-font-family); font-size: var(--stnd-lab-text-size); opacity: 0.8; flex-shrink: 0; width: 48px; text-align: right; }
+      .standard-lab-empty { padding: 6px; text-align: center; color: var(--stnd-lab-text); opacity: 0.6; font-size: calc(var(--stnd-lab-text-size) * 1.167); }
+      .standard-lab-notification { position: fixed; top: 6px; left: 50%; transform: translateX(-50%) translateY(-10px); background: var(--stnd-lab-bg); border: var(--stnd-lab-border); border-radius: 6px; padding: 8px 16px; box-shadow: var(--stnd-lab-shadow); z-index: calc(var(--z-toast) + 1); font-size: calc(var(--stnd-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(--stnd-lab-accent); color: var(--stnd-lab-bg); border-color: var(--stnd-lab-accent); }
+      .standard-lab-notification-info { background: var(--stnd-lab-accent); color: var(--stnd-lab-bg); border-color: var(--stnd-lab-accent); }
+      @media (prefers-color-scheme: dark) { .standard-lab-panel { box-shadow: var(--stnd-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; } }
     `;
@@ -1258,18 +1483,14 @@
 
       if (!window.StandardLab) {
         window.StandardLab = new StandardLab();
-        if (window.StandardLab.log) {
-          window.StandardLab.log.info("Initialized");
-        }
+        console.log("[StandardLab] ✓ Initialized");
       }
 
       // Handle HTMX swaps - Setup here to ensure document.body exists
       if (document.body) {
         document.body.addEventListener("htmx:afterSettle", () => {
+          console.log("[StandardLab] ⚡ HTMX swap detected");
           if (window.StandardLab) {
-            if (window.StandardLab.log) {
-              window.StandardLab.log.debug("HTMX swap detected");
-            }
             window.StandardLab.refresh();
           }
         });
@@ -1284,12 +1505,10 @@
 
     // 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");
+      console.log("[StandardLab] 🔄 Page swap detected");
 
       if (!window.StandardLab) {
-        const l = (window.standard && window.standard.log) || console;
-        if (l.warn) l.warn("Instance not found, reinitializing");
+        console.log("[StandardLab] ⚠️  Instance not found, reinitializing");
         window.StandardLab = new StandardLab();
         return;
       }
@@ -1299,9 +1518,7 @@
 
       // If badge is gone, recreate it
       if (!badge) {
-        if (window.StandardLab.log) {
-          window.StandardLab.log.debug("Recreating badge");
-        }
+        console.log("[StandardLab] 🔨 Recreating badge");
         window.StandardLab.badge = null;
         window.StandardLab.createBadge();
       }
@@ -1320,7 +1537,7 @@
       window.StandardLab.restoreDebugMode();
 
       // Re-inject debug overlays if needed
-      if (document.documentElement.classList.contains("standard-debug")) {
+      if (document.documentElement.classList.contains("stnd-debug")) {
         window.StandardLab.injectGridDebugOverlays();
       }
     });