@stnd/lab 1.4.2 → 1.5.0

package/Lab.svelte

@@ -15,6 +15,13 @@
   import { modules as loadedModules } from "virtual:stnd/modules-metadata";
   import { confirm } from "@stnd/ui/dialog.js";
   import Combobox from "@stnd/ui/Combobox.svelte";
+  import {
+    clamp,
+    oklchToRgb,
+    rgbToHex,
+    formatOklch,
+    parseCssColor,
+  } from "./color.js";
 
   // Sidebar transition parameters (defaults)
   let sidebarDuration = $state(2000); // milliseconds
@@ -40,6 +47,26 @@
     ),
   ].sort((a, b) => a.localeCompare(b));
 
+  const MAX_CHROMA = 0.32;
+  const BG_PRESETS = [
+    { label: "Pure White", value: "#ffffff" },
+    { label: "Warm Paper", value: "#f7f3ee" },
+    { label: "Soft Cream", value: "oklch(0.955 0.018 85)" },
+    { label: "Sage Mist", value: "oklch(0.95 0.016 150)" },
+    { label: "Warm Charcoal", value: "#231e1a" },
+    { label: "Deep Slate", value: "oklch(0.19 0.015 255)" },
+    { label: "Carbon", value: "#141413" },
+  ];
+  const FG_PRESETS = [
+    { label: "Warm Ink", value: "#262626" },
+    { label: "Espresso", value: "#4a341c" },
+    { label: "Forest Ink", value: "oklch(0.392 0.0488 67.4)" },
+    { label: "Navy Ink", value: "oklch(0.28 0.045 255)" },
+    { label: "Warm Parchment", value: "#e6cfb3" },
+    { label: "Soft Ivory", value: "oklch(0.88 0.018 85)" },
+    { label: "Pure White", value: "#ffffff" },
+  ];
+
   // =========================================================================
   // STATE
   // =========================================================================
@@ -61,54 +88,41 @@
   let scrollTimer;
   let sidebarEl = $state();
 
-  // Font dropdown state: tracks which font field is showing the picker
-  let fontDropdown = $state(null); // null | "--font-text" | "--font-header" | ...
-  let fontSearch = $state("");
-  let fontHighlight = $state(-1);
-
-  let filteredFonts = $derived(
-    fontSearch.trim() === ""
-      ? FONTS
-      : FONTS.filter((f) => f.toLowerCase().includes(fontSearch.toLowerCase())),
-  );
-
-  function openFontDropdown(token) {
-    fontDropdown = token;
-    fontSearch = "";
-    fontHighlight = -1;
-  }
-
-  function closeFontDropdown() {
-    fontDropdown = null;
-    fontSearch = "";
-    fontHighlight = -1;
-  }
+  // Custom OKLCH color picker state
+  let activePicker = $state(null); // null | "bg" | "fg"
+  let pickerFormat = $state("oklch"); // "oklch" | "hex"
+  let bgOklch = $state({ L: 1, C: 0, h: 0 });
+  let fgOklch = $state({ L: 0.2, C: 0, h: 0 });
+  let pickerCanvasEl = $state();
+  let isDraggingPlane = $state(false);
+  const hasEyeDropper =
+    typeof window !== "undefined" && "EyeDropper" in window;
 
   function selectFont(token, name) {
     if (!name) return;
-    const val =
-      name.includes(" ") && !name.startsWith('"') ? `"${name}"` : name;
+    const clean = name.trim().replace(/^"|"$/g, "");
+    const val = clean.includes(" ") ? `"${clean}"` : clean;
     writeVar(token, val);
-    loadGoogleFont(name);
+    loadGoogleFont(clean);
     if (token === "--font-text") fontText = val;
     else if (token === "--font-header") fontHeader = val;
     else if (token === "--font-interface") fontInterface = val;
     else if (token === "--font-monospace") fontMono = val;
-    closeFontDropdown();
-  }
-
-  function onFontKeydown(token, e) {
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      fontHighlight = Math.min(fontHighlight + 1, filteredFonts.length - 1);
-    } else if (e.key === "ArrowUp") {
-      e.preventDefault();
-      fontHighlight = Math.max(fontHighlight - 1, -1);
-    } else if (e.key === "Enter" && fontHighlight >= 0) {
-      e.preventDefault();
-      selectFont(token, filteredFonts[fontHighlight]);
-    } else if (e.key === "Escape") {
-      closeFontDropdown();
+  }
+
+  function previewFont(token, previewName, committedValue) {
+    if (typeof document === "undefined") return;
+    if (previewName) {
+      const clean = previewName.trim().replace(/^"|"$/g, "");
+      const val = clean.includes(" ") ? `"${clean}"` : clean;
+      loadGoogleFont(clean);
+      document.documentElement.style.setProperty(token, val);
+    } else {
+      if (modified.has(token) && committedValue) {
+        document.documentElement.style.setProperty(token, committedValue);
+      } else {
+        document.documentElement.style.removeProperty(token);
+      }
     }
   }
 
@@ -118,12 +132,13 @@
   }
 
   function requestCloseLab() {
-    if (pinned) return;
-    // Keep open if user is interacting with inputs inside
+    if (pinned || activePicker || isDraggingPlane) return;
+    // Keep open if user is interacting with inputs or popovers inside
     if (
       sidebarEl &&
       typeof document !== "undefined" &&
-      sidebarEl.contains(document.activeElement)
+      (sidebarEl.contains(document.activeElement) ||
+        sidebarEl.querySelector(".std-combobox-popover"))
     ) {
       return;
     }
@@ -131,7 +146,7 @@
     clearTimeout(closeTimer);
     closeTimer = setTimeout(() => {
       view = "dormant";
-    }, 100); // Increased delay for smoother transitions
+    }, 100);
   }
 
   function cancelCloseLab() {
@@ -153,13 +168,36 @@
     links: false,
   });
 
-  // Color scheme detection
-  let systemScheme = $state(
-    typeof window !== "undefined" &&
-      window.matchMedia?.("(prefers-color-scheme: dark)").matches
+  /** Detect the active scheme of the current page */
+  function detectPageScheme() {
+    if (typeof document === "undefined") return "light";
+    const root = document.documentElement;
+    const body = document.body;
+    const explicitMode =
+      root.getAttribute("data-color-mode") ||
+      body?.getAttribute("data-color-mode");
+    if (explicitMode === "dark" || explicitMode === "light") {
+      return explicitMode;
+    }
+    if (
+      root.classList.contains("theme-dark") ||
+      body?.classList.contains("theme-dark")
+    ) {
+      return "dark";
+    }
+    if (
+      root.classList.contains("theme-light") ||
+      body?.classList.contains("theme-light")
+    ) {
+      return "light";
+    }
+    return window.matchMedia?.("(prefers-color-scheme: dark)").matches
       ? "dark"
-      : "light",
-  );
+      : "light";
+  }
+
+  // Color scheme detection
+  let systemScheme = $state(detectPageScheme());
   let userScheme = $state("auto");
   let scheme = $derived(userScheme === "auto" ? systemScheme : userScheme);
 
@@ -176,6 +214,7 @@
       } else {
         document.documentElement.setAttribute("data-lab-scheme", userScheme);
       }
+      requestAnimationFrame(syncFromDOM);
     }
   });
   let bgToken = $derived(
@@ -219,23 +258,35 @@
   // HELPERS
   // =========================================================================
 
+  /** Find the element carrying the page's active theme tokens */
+  function getThemeTargetElement() {
+    if (typeof document === "undefined") return null;
+    if (document.documentElement.hasAttribute("data-theme")) {
+      return document.documentElement;
+    }
+    if (document.body?.hasAttribute("data-theme")) {
+      return document.body;
+    }
+    return document.documentElement;
+  }
+
   /** Read a CSS custom property, resolving one level of var() */
-  function readVar(token) {
-    const raw = getComputedStyle(document.documentElement)
-      .getPropertyValue(token)
-      .trim();
+  function readVar(token, el) {
+    if (typeof document === "undefined") return "";
+    const target = el || getThemeTargetElement() || document.documentElement;
+    const cs = getComputedStyle(target);
+    const raw = cs.getPropertyValue(token).trim();
     if (!raw) return "";
     const m = raw.match(/^var\(--([\w-]+)\)$/);
-    return m
-      ? getComputedStyle(document.documentElement)
-          .getPropertyValue(`--${m[1]}`)
-          .trim()
-      : raw;
+    return m ? cs.getPropertyValue(`--${m[1]}`).trim() : raw;
   }
 
   /** Write an inline override and mark as modified */
   function writeVar(token, value) {
     document.documentElement.style.setProperty(token, value);
+    if (document.body?.hasAttribute("data-theme")) {
+      document.body.style.setProperty(token, value);
+    }
     modified = new Set([...modified, token]);
 
     // Persist to session
@@ -250,36 +301,6 @@
     }
   }
 
-  /** Convert any CSS color to #hex for <input type="color"> */
-  function toHex(css) {
-    if (!css) return "#000000";
-    if (/^#[0-9a-f]{6}$/i.test(css.trim())) return css.trim();
-    if (css.trim().toLowerCase() === "white") return "#ffffff";
-    if (css.trim().toLowerCase() === "black") return "#000000";
-
-    // Use a temp element to resolve any CSS color format
-    try {
-      const el = document.createElement("div");
-      el.style.color = css;
-      document.body.appendChild(el);
-      const resolved = getComputedStyle(el).color;
-      el.remove();
-      const m = resolved.match(/(\d+)/g);
-      if (m && m.length >= 3) {
-        return (
-          "#" +
-          m
-            .slice(0, 3)
-            .map((n) => parseInt(n).toString(16).padStart(2, "0"))
-            .join("")
-        );
-      }
-    } catch {
-      /* noop */
-    }
-    return "#000000";
-  }
-
   /** Resolve a CSS length (var, calc, unit) to pixels */
   function resolvePx(value) {
     if (typeof document === "undefined" || !value) return 0;
@@ -299,25 +320,50 @@
 
   /** Read all token values from the current DOM cascade */
   function syncFromDOM() {
-    // Detect current scheme
-    systemScheme = window.matchMedia?.("(prefers-color-scheme: dark)").matches
-      ? "dark"
-      : "light";
+    if (typeof document === "undefined") return;
+    systemScheme = detectPageScheme();
+    const target = getThemeTargetElement();
+
+    // Read and resolve the active scheme's background and foreground seeds
+    const rawBg = readVar(bgToken, target);
+    const rawFg = readVar(fgToken, target);
+
+    const parsedBg = parseCssColor(
+      rawBg && !/\b(from|light-dark|var)\b/i.test(rawBg)
+        ? rawBg
+        : `var(${bgToken}, var(--color-background))`,
+      target,
+    );
+    const parsedFg = parseCssColor(
+      rawFg && !/\b(from|light-dark|var)\b/i.test(rawFg)
+        ? rawFg
+        : `var(${fgToken}, var(--color-foreground))`,
+      target,
+    );
 
-    // Read the active scheme's seeds
-    seedBg = readVar(bgToken);
-    seedFg = readVar(fgToken);
-    seedBgHex = toHex(seedBg);
-    seedFgHex = toHex(seedFg);
-    fontText = readVar("--font-text");
-    fontHeader = readVar("--font-header");
-    fontInterface = readVar("--font-interface");
-    fontMono = readVar("--font-monospace");
-    fontSize = parseFloat(readVar("--font-size")) || 1;
-    lineHeight = parseFloat(readVar("--line-height")) || 1.414;
-    ratio = parseFloat(readVar("--optical-ratio")) || 1.414;
-
-    const rawGap = readVar("--page-padding");
+    seedBg =
+      rawBg && !/\b(from|light-dark|var|calc|color-mix)\b/i.test(rawBg)
+        ? rawBg
+        : parsedBg.css;
+    seedFg =
+      rawFg && !/\b(from|light-dark|var|calc|color-mix)\b/i.test(rawFg)
+        ? rawFg
+        : parsedFg.css;
+
+    seedBgHex = parsedBg.hex;
+    seedFgHex = parsedFg.hex;
+    bgOklch = { L: parsedBg.L, C: parsedBg.C, h: parsedBg.h };
+    fgOklch = { L: parsedFg.L, C: parsedFg.C, h: parsedFg.h };
+
+    fontText = readVar("--font-text", target);
+    fontHeader = readVar("--font-header", target);
+    fontInterface = readVar("--font-interface", target);
+    fontMono = readVar("--font-monospace", target);
+    fontSize = parseFloat(readVar("--font-size", target)) || 1;
+    lineHeight = parseFloat(readVar("--line-height", target)) || 1.414;
+    ratio = parseFloat(readVar("--optical-ratio", target)) || 1.414;
+
+    const rawGap = readVar("--page-padding", target);
     const pxSpace = resolvePx("var(--space)");
 
     // Calculate body gap multiplier
@@ -329,13 +375,16 @@
     rhythmGap = pxSpace ? pxRhythm / pxSpace : 0.5;
 
     // Calculate radius multiplier
-    const rawRadius = readVar("--radius");
+    const rawRadius = readVar("--radius", target);
     const pxRadius = resolvePx(rawRadius);
     radius = pxSpace ? pxRadius / pxSpace : 0;
 
     debug = document.documentElement.classList.contains("stnd-debug");
     eink = document.documentElement.classList.contains("standard-eink");
-    theme = document.documentElement.getAttribute("data-theme") || "";
+    theme =
+      document.documentElement.getAttribute("data-theme") ||
+      document.body?.getAttribute("data-theme") ||
+      "";
     viewportW = window.innerWidth;
   }
 
@@ -681,21 +730,35 @@
 
     function onGlobalClick(e) {
       if (view !== "open" || pinned) return;
-      if (sidebarEl && sidebarEl.contains(e.target)) return;
+      if (sidebarEl && e.composedPath().includes(sidebarEl)) return;
       if (
-        e.target.closest(".lab-handler") ||
-        e.target.closest(".lab-handler-top")
+        e.target.closest?.(".lab-handler") ||
+        e.target.closest?.(".lab-handler-top")
       )
         return;
       view = "dormant";
     }
 
+    const domObserver = new MutationObserver(() => {
+      requestAnimationFrame(syncFromDOM);
+    });
+    domObserver.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: [
+        "data-theme",
+        "data-color-mode",
+        "class",
+        "data-lab-scheme",
+      ],
+    });
+
     document.addEventListener("keydown", onKey);
     document.addEventListener("click", onGlobalClick);
     window.addEventListener("resize", onResize);
     window.addEventListener("scroll", onScroll, { passive: true });
 
     return () => {
+      domObserver.disconnect();
       document.removeEventListener("keydown", onKey);
       document.removeEventListener("click", onGlobalClick);
       document.removeEventListener("astro:after-swap", restoreLabState);
@@ -741,6 +804,37 @@
     }
   });
 
+  // Render 2D color area on canvas whenever active picker, hue, or picker open state changes
+  $effect(() => {
+    if (!activePicker || !pickerCanvasEl) return;
+    const canvas = pickerCanvasEl;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const width = canvas.width;
+    const height = canvas.height;
+    const imgData = ctx.createImageData(width, height);
+    const data = imgData.data;
+
+    const cur = activePicker === "bg" ? bgOklch : fgOklch;
+    const h = cur.h;
+
+    // Render 2D grid: X = Chroma (0 to MAX_CHROMA), Y = Lightness (1 at top to 0 at bottom)
+    for (let y = 0; y < height; y++) {
+      const L = 1 - y / (height - 1);
+      for (let x = 0; x < width; x++) {
+        const C = (x / (width - 1)) * MAX_CHROMA;
+        const rgb = oklchToRgb(L, C, h);
+        const idx = (y * width + x) * 4;
+        data[idx] = rgb.r;
+        data[idx + 1] = rgb.g;
+        data[idx + 2] = rgb.b;
+        data[idx + 3] = rgb.inGamut ? 255 : 180;
+      }
+    }
+    ctx.putImageData(imgData, 0, 0);
+  });
+
   // =========================================================================
   // HANDLERS — Theme
   // =========================================================================
@@ -786,50 +880,115 @@
   }
 
   // =========================================================================
-  // HANDLERS — Seed Colors
+  // HANDLERS — Color Picker
   // =========================================================================
-  function onColorSwatch(role, e) {
-    const hex = e.target.value;
+  function toggleColorPicker(role) {
+    activePicker = activePicker === role ? null : role;
+  }
+
+  function updateColorFromOklch(role, newOklch) {
+    const L = clamp(newOklch.L, 0, 1);
+    const C = clamp(newOklch.C, 0, MAX_CHROMA);
+    const h = ((newOklch.h % 360) + 360) % 360;
+
+    const rgb = oklchToRgb(L, C, h);
+    const hex = rgbToHex(rgb);
+    const oklchStr = formatOklch(L, C, h);
+    const formatted = pickerFormat === "hex" ? hex : oklchStr;
+
     const token = role === "bg" ? bgToken : fgToken;
+
     if (role === "bg") {
-      seedBg = hex;
+      bgOklch = { L, C, h };
+      seedBg = formatted;
       seedBgHex = hex;
     } else {
-      seedFg = hex;
+      fgOklch = { L, C, h };
+      seedFg = formatted;
       seedFgHex = hex;
     }
-    writeVar(token, hex);
+
+    writeVar(token, formatted);
   }
 
   function onColorText(role, e) {
     const val = e.target.value;
     const token = role === "bg" ? bgToken : fgToken;
+    const target = getThemeTargetElement();
+    const parsed = parseCssColor(val, target);
+
     if (role === "bg") {
       seedBg = val;
-      seedBgHex = toHex(val);
+      seedBgHex = parsed.hex;
+      bgOklch = { L: parsed.L, C: parsed.C, h: parsed.h };
     } else {
       seedFg = val;
-      seedFgHex = toHex(val);
+      seedFgHex = parsed.hex;
+      fgOklch = { L: parsed.L, C: parsed.C, h: parsed.h };
     }
     writeVar(token, val);
   }
 
-  // =========================================================================
-  // HANDLERS — Fonts
-  // =========================================================================
-  function onFontInput(token, e) {
-    const raw = e.target.value;
-    // Wrap multi-word font names in quotes for valid CSS font-family
-    const val = raw.includes(" ") && !raw.startsWith('"') ? `"${raw}"` : raw;
-    writeVar(token, val);
-    loadGoogleFont(raw);
-    // Re-read the specific font state
-    if (token === "--font-text") fontText = val;
-    else if (token === "--font-header") fontHeader = val;
-    else if (token === "--font-interface") fontInterface = val;
-    else if (token === "--font-monospace") fontMono = val;
-    // Update search to match typed value for filtering
-    fontSearch = raw;
+  function onSliderInput(role, channel, e) {
+    const val = parseFloat(e.target.value);
+    const cur = role === "bg" ? { ...bgOklch } : { ...fgOklch };
+    cur[channel] = val;
+    updateColorFromOklch(role, cur);
+  }
+
+  function handlePlanePointer(e) {
+    if (!pickerCanvasEl || !activePicker) return;
+    const rect = pickerCanvasEl.getBoundingClientRect();
+    const x = clamp(e.clientX - rect.left, 0, rect.width);
+    const y = clamp(e.clientY - rect.top, 0, rect.height);
+
+    const C = (x / rect.width) * MAX_CHROMA;
+    const L = 1 - y / rect.height;
+
+    const cur = activePicker === "bg" ? bgOklch : fgOklch;
+    updateColorFromOklch(activePicker, { L, C, h: cur.h });
+  }
+
+  function onPlanePointerDown(e) {
+    isDraggingPlane = true;
+    e.currentTarget.setPointerCapture(e.pointerId);
+    handlePlanePointer(e);
+  }
+
+  function onPlanePointerMove(e) {
+    if (!isDraggingPlane) return;
+    handlePlanePointer(e);
+  }
+
+  function onPlanePointerUp(e) {
+    if (isDraggingPlane) {
+      isDraggingPlane = false;
+      try {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      } catch {
+        /* noop */
+      }
+    }
+  }
+
+  async function pickWithEyeDropper(role) {
+    if (!hasEyeDropper) return;
+    try {
+      const eyeDropper = new window.EyeDropper();
+      const result = await eyeDropper.open();
+      if (result?.sRGBHex) {
+        const parsed = parseCssColor(result.sRGBHex);
+        updateColorFromOklch(role, parsed);
+      }
+    } catch {
+      /* User dismissed eyedropper */
+    }
+  }
+
+  function applyPreset(role, val) {
+    const target = getThemeTargetElement();
+    const parsed = parseCssColor(val, target);
+    updateColorFromOklch(role, parsed);
   }
 
   // =========================================================================
@@ -1093,49 +1252,207 @@
         {#if sectionsOpen.colors}
           <div class="lab-section-body" transition:slide>
             <div class="lab-field">
-              <label class="lab-field-label" for="lab-bg-text">Background</label
-              >
+              <label class="lab-field-label" for="lab-bg-text">Background</label>
               <div class="lab-color-row">
-                <input
-                  type="color"
+                <button
+                  type="button"
                   class="lab-swatch"
-                  value={seedBgHex}
-                  title="{scheme} background seed"
-                  oninput={(e) => onColorSwatch("bg", e)}
-                />
+                  class:active={activePicker === "bg"}
+                  style="background-color: {seedBgHex};"
+                  title="Toggle OKLCH background picker"
+                  onclick={() => toggleColorPicker("bg")}
+                  aria-label="Pick background color"
+                ></button>
                 <input
                   id="lab-bg-text"
                   type="text"
                   class="lab-text-input"
                   value={seedBg}
                   spellcheck="false"
-                  placeholder="e.g. #fafafa"
+                  placeholder="e.g. oklch(0.23 0.02 67)"
                   oninput={(e) => onColorText("bg", e)}
                 />
               </div>
             </div>
+
             <div class="lab-field">
-              <label class="lab-field-label" for="lab-fg-text">Foreground</label
-              >
+              <label class="lab-field-label" for="lab-fg-text">Foreground</label>
               <div class="lab-color-row">
-                <input
-                  type="color"
+                <button
+                  type="button"
                   class="lab-swatch"
-                  value={seedFgHex}
-                  title="{scheme} foreground seed"
-                  oninput={(e) => onColorSwatch("fg", e)}
-                />
+                  class:active={activePicker === "fg"}
+                  style="background-color: {seedFgHex};"
+                  title="Toggle OKLCH foreground picker"
+                  onclick={() => toggleColorPicker("fg")}
+                  aria-label="Pick foreground color"
+                ></button>
                 <input
                   id="lab-fg-text"
                   type="text"
                   class="lab-text-input"
                   value={seedFg}
                   spellcheck="false"
-                  placeholder="e.g. #1a1a1a"
+                  placeholder="e.g. #262626"
                   oninput={(e) => onColorText("fg", e)}
                 />
               </div>
             </div>
+
+            <!-- Custom OKLCH Color Picker Panel -->
+            {#if activePicker}
+              {@const curOklch = activePicker === "bg" ? bgOklch : fgOklch}
+              {@const curHex = activePicker === "bg" ? seedBgHex : seedFgHex}
+              {@const presets = activePicker === "bg" ? BG_PRESETS : FG_PRESETS}
+              <div class="lab-picker-panel" transition:slide>
+                <header class="lab-picker-header">
+                  <div class="lab-picker-title">
+                    <span class="lab-picker-role"
+                      >{activePicker === "bg" ? "Background" : "Foreground"}</span
+                    >
+                    <span class="lab-picker-hex">{curHex}</span>
+                  </div>
+                  <div class="lab-picker-actions">
+                    <button
+                      type="button"
+                      class="smaller ghost"
+                      title="Toggle output format (OKLCH or Hex)"
+                      onclick={() => {
+                        pickerFormat =
+                          pickerFormat === "oklch" ? "hex" : "oklch";
+                        updateColorFromOklch(activePicker, curOklch);
+                      }}
+                    >
+                      {pickerFormat.toUpperCase()}
+                    </button>
+                    {#if hasEyeDropper}
+                      <button
+                        type="button"
+                        class="smaller icon ghost"
+                        title="Pick color from screen"
+                        onclick={() => pickWithEyeDropper(activePicker)}
+                      >
+                        <svg
+                          width="1em"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="2"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        >
+                          <path
+                            d="m14 7 3 3m-8.5 8.5L4 20l1.5-4.5L14 7l3 3L8.5 18.5Z"
+                          ></path>
+                        </svg>
+                      </button>
+                    {/if}
+                    <button
+                      type="button"
+                      class="smaller icon ghost"
+                      title="Close color picker"
+                      onclick={() => (activePicker = null)}
+                    >
+                      ✕
+                    </button>
+                  </div>
+                </header>
+
+                <!-- 2D Lightness x Chroma Color Plane -->
+                <div
+                  class="lab-plane-wrapper"
+                  role="slider"
+                  tabindex="0"
+                  aria-label="Lightness and Chroma 2D plane"
+                  aria-valuemin="0"
+                  aria-valuemax="100"
+                  aria-valuenow={Math.round(curOklch.L * 100)}
+                  onpointerdown={onPlanePointerDown}
+                  onpointermove={onPlanePointerMove}
+                  onpointerup={onPlanePointerUp}
+                >
+                  <canvas
+                    bind:this={pickerCanvasEl}
+                    width="240"
+                    height="110"
+                    class="lab-plane-canvas"
+                  ></canvas>
+                  <div
+                    class="lab-plane-thumb"
+                    style="left: {(curOklch.C / MAX_CHROMA) *
+                      100}%; top: {(1 - curOklch.L) *
+                      100}%; background-color: {curHex};"
+                  ></div>
+                </div>
+
+                <!-- Perceptual OKLCH Sliders -->
+                <div class="lab-picker-sliders">
+                  <!-- Lightness Slider -->
+                  <div class="lab-picker-slider-row">
+                    <span class="lab-slider-label">L</span>
+                    <input
+                      type="range"
+                      class="lab-range lab-range-l"
+                      min="0"
+                      max="1"
+                      step="0.005"
+                      value={curOklch.L}
+                      style="--slider-track: linear-gradient(to right, oklch(0 {curOklch.C} {curOklch.h}), oklch(0.5 {curOklch.C} {curOklch.h}), oklch(1 {curOklch.C} {curOklch.h}));"
+                      oninput={(e) => onSliderInput(activePicker, "L", e)}
+                    />
+                    <span class="lab-slider-val"
+                      >{Math.round(curOklch.L * 100)}%</span
+                    >
+                  </div>
+
+                  <!-- Chroma Slider -->
+                  <div class="lab-picker-slider-row">
+                    <span class="lab-slider-label">C</span>
+                    <input
+                      type="range"
+                      class="lab-range lab-range-c"
+                      min="0"
+                      max={MAX_CHROMA}
+                      step="0.002"
+                      value={curOklch.C}
+                      style="--slider-track: linear-gradient(to right, oklch({curOklch.L} 0 {curOklch.h}), oklch({curOklch.L} {MAX_CHROMA *
+                        0.5} {curOklch.h}), oklch({curOklch.L} {MAX_CHROMA} {curOklch.h}));"
+                      oninput={(e) => onSliderInput(activePicker, "C", e)}
+                    />
+                    <span class="lab-slider-val">{curOklch.C.toFixed(3)}</span>
+                  </div>
+
+                  <!-- Hue Slider -->
+                  <div class="lab-picker-slider-row">
+                    <span class="lab-slider-label">H</span>
+                    <input
+                      type="range"
+                      class="lab-range lab-range-h"
+                      min="0"
+                      max="360"
+                      step="1"
+                      value={curOklch.h}
+                      oninput={(e) => onSliderInput(activePicker, "h", e)}
+                    />
+                    <span class="lab-slider-val">{Math.round(curOklch.h)}°</span>
+                  </div>
+                </div>
+
+                <!-- Palette Presets -->
+                <div class="lab-picker-presets">
+                  {#each presets as p}
+                    <button
+                      type="button"
+                      class="lab-preset-dot"
+                      title={p.label}
+                      style="background-color: {p.value};"
+                      onclick={() => applyPreset(activePicker, p.value)}
+                    ></button>
+                  {/each}
+                </div>
+              </div>
+            {/if}
           </div>
         {/if}
       </section>
@@ -1168,13 +1485,13 @@
                   emptyText="No fonts found."
                   allowCustom={true}
                   preview={true}
-                  previewDebounce={120}
+                  previewDebounce={60}
                   loadFont={(name) => loadGoogleFont(name)}
                   class="lab-font-combobox"
                   aria-controls={inputId}
-                  onpreview={(e) => loadGoogleFont(e.detail?.value)}
+                  onpreview={(e) =>
+                    previewFont(token, e.detail?.value, currentValue)}
                   onchange={(e) => {
-                    // Combobox dispatches change with detail.value (base font name)
                     selectFont(token, e.detail?.value);
                   }}
                 />
@@ -1546,14 +1863,16 @@
     }
   }
 
-  /* Reset children to Lab font */
+  /* Reset children to Lab font, allowing explicit font-family previews to win */
   .lab-sidebar * {
-    font-family: var(--font-monospace) !important;
     box-sizing: border-box;
     /* Disable opacity transitions on child elements to prevent fading when opening the lab.
        Other property transitions for children remain allowed outside of opacity. */
     transition: opacity 0s !important;
   }
+  .lab-sidebar *:not([style*="font-family"]) {
+    font-family: var(--font-monospace);
+  }
 
   /* ═══════════ HEADER ═══════════ */
   .lab-header {
@@ -1683,34 +2002,201 @@
     margin: 0 !important;
   }
 
-  /* ═══════════ COLOR ROW ═══════════ */
+  /* ═══════════ COLOR ROW & SWATCH ═══════════ */
   .lab-color-row {
     display: flex;
     align-items: center;
     gap: var(--trim);
   }
   .lab-swatch {
+    all: unset;
     width: var(--space);
     height: var(--space);
     border: var(--border);
     border-radius: var(--radius);
     cursor: pointer;
-    padding: 0px;
-    background: var(--color-surface);
+    box-shadow: var(--shadow);
     flex-shrink: 0;
+    box-sizing: border-box;
+    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
   }
-  .lab-swatch::-webkit-color-swatch-wrapper {
-    padding: 0;
+  .lab-swatch:hover {
+    transform: scale(1.05);
   }
-  .lab-swatch::-webkit-color-swatch {
-    border: none;
-    border-radius: var(--radius);
+  .lab-swatch.active {
+    box-shadow: 0 0 0 2px var(--color-accent);
   }
   .lab-color-row .lab-text-input {
     flex: 1;
     min-width: 0;
   }
 
+  /* ═══════════ OKLCH COLOR PICKER ═══════════ */
+  .lab-picker-panel {
+    margin-top: var(--space-d2);
+    margin-bottom: var(--space-d2);
+    padding: var(--space-d3);
+    background: var(--color-surface-sunken);
+    border: var(--border);
+    border-radius: var(--radius);
+    box-shadow: var(--shadow-inset);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-d3);
+  }
+
+  .lab-picker-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-d4);
+  }
+
+  .lab-picker-title {
+    display: flex;
+    align-items: baseline;
+    gap: var(--space-d4);
+  }
+
+  .lab-picker-role {
+    font-size: var(--scale-d4);
+    font-weight: 600;
+    text-transform: uppercase;
+    color: var(--color-muted);
+  }
+
+  .lab-picker-hex {
+    font-size: var(--scale-d4);
+    color: var(--color-foreground);
+    font-family: var(--font-monospace);
+  }
+
+  .lab-picker-actions {
+    display: flex;
+    align-items: center;
+    gap: var(--space-d6);
+  }
+
+  .lab-plane-wrapper {
+    position: relative;
+    width: 100%;
+    height: 110px;
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+    cursor: crosshair;
+    user-select: none;
+    touch-action: none;
+    box-shadow: var(--shadow-inset);
+    border: var(--border);
+  }
+
+  .lab-plane-canvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+  }
+
+  .lab-plane-thumb {
+    position: absolute;
+    width: var(--space-d2);
+    height: var(--space-d2);
+    border-radius: 50%;
+    border: 2px solid white;
+    box-shadow: 0 0 2px black;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+  }
+
+  .lab-picker-sliders {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-d4);
+  }
+
+  .lab-picker-slider-row {
+    display: grid;
+    grid-template-columns: var(--space-d2) 1fr var(--space-2);
+    align-items: center;
+    gap: var(--space-d4);
+  }
+
+  .lab-slider-label {
+    font-size: var(--scale-d4);
+    font-weight: 600;
+    color: var(--color-muted);
+    text-align: center;
+  }
+
+  .lab-slider-val {
+    font-size: var(--scale-d4);
+    color: var(--color-foreground);
+    text-align: right;
+    font-family: var(--font-monospace);
+  }
+
+  .lab-range-l,
+  .lab-range-c,
+  .lab-range-h {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 100%;
+    height: var(--space-d4);
+    border-radius: var(--radius-sm);
+    outline: none;
+    background: var(--slider-track, var(--color-surface));
+    box-shadow: var(--shadow-inset);
+    cursor: pointer;
+  }
+
+  .lab-range-h {
+    background: linear-gradient(
+      to right,
+      oklch(0.7 0.18 0),
+      oklch(0.7 0.18 60),
+      oklch(0.7 0.18 120),
+      oklch(0.7 0.18 180),
+      oklch(0.7 0.18 240),
+      oklch(0.7 0.18 300),
+      oklch(0.7 0.18 360)
+    );
+  }
+
+  .lab-range::-webkit-slider-thumb {
+    appearance: none;
+    -webkit-appearance: none;
+    width: var(--space-d2);
+    height: var(--space-d2);
+    border-radius: 50%;
+    background: var(--color-surface);
+    border: 2px solid var(--color-foreground);
+    box-shadow: var(--shadow);
+    cursor: pointer;
+  }
+
+  .lab-picker-presets {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--space-d4);
+    padding-top: var(--space-d6);
+    border-top: var(--border);
+  }
+
+  .lab-preset-dot {
+    all: unset;
+    width: var(--space-d2);
+    height: var(--space-d2);
+    border-radius: var(--radius-sm);
+    border: var(--border);
+    cursor: pointer;
+    box-shadow: var(--shadow);
+    transition: transform var(--transition-fast);
+    box-sizing: border-box;
+  }
+
+  .lab-preset-dot:hover {
+    transform: scale(1.15);
+  }
+
   /* ═══════════ SELECT ═══════════ */
   .lab-select {
     font-size: var(--scale-d4) !important;