@stnd/lab 1.6.0 → 1.6.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @stnd/lab
 
+## 1.6.1
+
+### Patch Changes
+
+- @stnd/ui@0.16.1
+
 ## 1.6.0
 
 ### Minor Changes

package/Lab.svelte

@@ -57,6 +57,15 @@
     { label: "Deep Slate", value: "oklch(0.19 0.015 255)" },
     { label: "Carbon", value: "#141413" },
   ];
+  const ACCENT_PRESETS = [
+    { label: "Signal Red", value: "oklch(0.6 0.2 27)" },
+    { label: "Amber", value: "oklch(0.5 0.12 55)" },
+    { label: "Forest", value: "oklch(0.5 0.12 150)" },
+    { label: "Teal", value: "oklch(0.6 0.1 195)" },
+    { label: "Ocean", value: "oklch(0.55 0.15 245)" },
+    { label: "Violet", value: "oklch(0.5 0.18 300)" },
+    { label: "Candy Pink", value: "oklch(0.65 0.22 355)" },
+  ];
   const FG_PRESETS = [
     { label: "Warm Ink", value: "#262626" },
     { label: "Espresso", value: "#4a341c" },
@@ -72,7 +81,28 @@
   // =========================================================================
   // Props. `open` opens the panel on mount and `pin` keeps it open: the Studio
   // page embeds the Lab that way, so it works in production too.
-  let { open = false, pin = false } = $props();
+  // `showHandler` controls whether the floating edge pastille/handler is rendered.
+  let { open = false, pin = false, showHandler = true } = $props();
+
+  let handlerVisible = $state(
+    showHandler &&
+      (typeof document === "undefined" ||
+        (document.documentElement.getAttribute("data-lab-handler") !== "false" &&
+          !document.documentElement.hasAttribute("data-lab-no-handler"))),
+  );
+
+  function syncHandlerVisibility() {
+    if (
+      showHandler === false ||
+      (typeof document !== "undefined" &&
+        (document.documentElement.getAttribute("data-lab-handler") === "false" ||
+          document.documentElement.hasAttribute("data-lab-no-handler")))
+    ) {
+      handlerVisible = false;
+    } else {
+      handlerVisible = true;
+    }
+  }
 
   // One Lab per page. The dev module mounts it on every page and the Studio
   // mounts its own; whichever comes second renders nothing and asks the first
@@ -89,10 +119,11 @@
   let sidebarEl = $state();
 
   // Custom OKLCH color picker state
-  let activePicker = $state(null); // null | "bg" | "fg"
+  let activePicker = $state(null); // null | "bg" | "fg" | "accent"
   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 accentOklch = $state({ L: 0.6, C: 0.15, h: 30 });
   let pickerCanvasEl = $state();
   let isDraggingPlane = $state(false);
   const hasEyeDropper =
@@ -159,11 +190,9 @@
 
   // Collapsible sections
   let sectionsOpen = $state({
-    theme: false,
-    colors: false,
-    typography: false,
-    scale: false,
-    spacing: false,
+    theme: true,
+    colors: true,
+    typography: true,
     debug: false,
     links: false,
   });
@@ -223,17 +252,28 @@
   let fgToken = $derived(
     scheme === "dark" ? "--color-dark-foreground" : "--color-light-foreground",
   );
+  let accentToken = $derived(
+    scheme === "dark" ? "--color-dark-accent" : "--color-light-accent",
+  );
+  const oklchOf = (role) =>
+    role === "bg" ? bgOklch : role === "fg" ? fgOklch : accentOklch;
+  const tokenOf = (role) =>
+    role === "bg" ? bgToken : role === "fg" ? fgToken : accentToken;
+  const ROLE_LABEL = { bg: "Background", fg: "Foreground", accent: "Accent" };
 
   // Quick panel seeds (scheme-aware)
   let seedBg = $state("");
   let seedFg = $state("");
   let seedBgHex = $state("#ffffff");
   let seedFgHex = $state("#262626");
+  let seedAccent = $state("");
+  let seedAccentHex = $state("transparent");
   let fontText = $state("");
   let fontHeader = $state("");
   let fontInterface = $state("");
   let fontMono = $state("");
   let fontSize = $state(1);
+  /** Font density: the theme-authoring knob. `--line-height` is derived from it, clamped to 1.35–1.75. */
   let lineHeight = $state(1.414);
   let rhythmGap = $state(1);
   let ratio = $state(1.414);
@@ -355,6 +395,20 @@
     bgOklch = { L: parsedBg.L, C: parsedBg.C, h: parsedBg.h };
     fgOklch = { L: parsedFg.L, C: parsedFg.C, h: parsedFg.h };
 
+    const rawAccent = readVar(accentToken, target);
+    const parsedAccent = parseCssColor(
+      rawAccent && !/\b(from|light-dark|var)\b/i.test(rawAccent)
+        ? rawAccent
+        : `var(${accentToken}, var(--color-accent))`,
+      target,
+    );
+    seedAccent =
+      rawAccent && !/\b(from|light-dark|var|calc|color-mix)\b/i.test(rawAccent)
+        ? rawAccent
+        : parsedAccent.css;
+    seedAccentHex = parsedAccent.hex;
+    accentOklch = { L: parsedAccent.L, C: parsedAccent.C, h: parsedAccent.h };
+
     fontText = readVar("--font-text", target);
     fontHeader = readVar("--font-header", target);
     fontInterface = readVar("--font-interface", target);
@@ -363,7 +417,10 @@
       parseFloat(readVar("--font-text-size", target)) ||
       parseFloat(readVar("--font-size", target)) ||
       1;
-    lineHeight = parseFloat(readVar("--line-height", target)) || 1.414;
+    lineHeight = Math.min(
+      1.75,
+      Math.max(1.35, parseFloat(readVar("--density-base", target)) || parseFloat(readVar("--line-height", target)) || 1.414),
+    );
     ratio = parseFloat(readVar("--optical-ratio", target)) || 1.414;
 
     const rawGap = readVar("--page-padding", target);
@@ -373,9 +430,8 @@
     const pxGap = resolvePx(rawGap);
     gapBody = pxSpace ? pxGap / pxSpace : 1;
 
-    // Calculate rhythm gap multiplier
-    const pxRhythm = resolvePx("var(--rhythm-gap-new-line)");
-    rhythmGap = pxSpace ? pxRhythm / pxSpace : 0.5;
+    // The rhythm: how much heavier than a text gap the space around a block is (`--rhythm-block-scale`).
+    rhythmGap = parseFloat(readVar("--rhythm-block-scale", target)) || 2;
 
     // Calculate radius multiplier
     const rawRadius = readVar("--radius", target);
@@ -398,15 +454,17 @@
       "--color-light-foreground",
       "--color-dark-background",
       "--color-dark-foreground",
+      "--color-light-accent",
+      "--color-dark-accent",
       "--font-text",
       "--font-header",
       "--font-interface",
       "--font-monospace",
       "--font-text-size",
-      "--line-height",
+      "--font-density",
       "--optical-ratio",
       "--page-padding",
-      "--rhythm-gap-new-line",
+      "--rhythm-block-scale",
       "--radius",
     ];
     for (const t of tokens) {
@@ -458,15 +516,17 @@
       "--color-light-foreground",
       "--color-dark-background",
       "--color-dark-foreground",
+      "--color-light-accent",
+      "--color-dark-accent",
       "--font-text",
       "--font-header",
       "--font-interface",
       "--font-monospace",
       "--font-text-size",
-      "--line-height",
+      "--font-density",
       "--optical-ratio",
       "--page-padding",
-      "--rhythm-gap-new-line",
+      "--rhythm-block-scale",
       "--radius",
     ];
     const css = tokens
@@ -670,9 +730,13 @@
     };
 
     restoreLabState();
+    syncHandlerVisibility();
     if (open) view = "open";
     if (pin) pinned = true;
-    document.addEventListener("astro:after-swap", restoreLabState);
+    document.addEventListener("astro:after-swap", () => {
+      restoreLabState();
+      syncHandlerVisibility();
+    });
 
     // Global API for dev toolbar compatibility
     window.StandardLab = {
@@ -705,15 +769,18 @@
       if (mod && !e.shiftKey && e.key.toLowerCase() === "s") {
         e.preventDefault();
         view = view === "dormant" ? "open" : "dormant";
+        if (view === "open") pinned = true;
       }
 
       if (e.shiftKey && mod && e.key.toLowerCase() === "s") {
         e.preventDefault();
         view = view === "dormant" ? "open" : "dormant";
+        if (view === "open") pinned = true;
       }
       if (mod && !e.shiftKey && e.key.toLowerCase() === "d") {
         e.preventDefault();
         view = view === "dormant" ? "open" : "dormant";
+        if (view === "open") pinned = true;
       }
       if (e.shiftKey && mod && e.key.toLowerCase() === "d") {
         e.preventDefault();
@@ -752,6 +819,7 @@
     }
 
     const domObserver = new MutationObserver(() => {
+      syncHandlerVisibility();
       requestAnimationFrame(syncFromDOM);
     });
     domObserver.observe(document.documentElement, {
@@ -761,6 +829,8 @@
         "data-color-mode",
         "class",
         "data-lab-scheme",
+        "data-lab-handler",
+        "data-lab-no-handler",
       ],
     });
 
@@ -828,7 +898,7 @@
     const imgData = ctx.createImageData(width, height);
     const data = imgData.data;
 
-    const cur = activePicker === "bg" ? bgOklch : fgOklch;
+    const cur = oklchOf(activePicker);
     const h = cur.h;
 
     // Render 2D grid: X = Chroma (0 to MAX_CHROMA), Y = Lightness (1 at top to 0 at bottom)
@@ -860,15 +930,19 @@
       "--color-light-foreground",
       "--color-dark-background",
       "--color-dark-foreground",
+      "--color-light-accent",
+      "--color-dark-accent",
       "--font-text",
       "--font-header",
       "--font-interface",
       "--font-monospace",
       "--font-text-size",
       "--font-size",
+      "--font-density",
       "--line-height",
       "--optical-ratio",
       "--page-padding",
+      "--rhythm-block-scale",
       "--rhythm-gap-new-line",
       "--radius",
     ];
@@ -917,16 +991,20 @@
     const oklchStr = formatOklch(L, C, h);
     const formatted = pickerFormat === "hex" ? hex : oklchStr;
 
-    const token = role === "bg" ? bgToken : fgToken;
+    const token = tokenOf(role);
 
     if (role === "bg") {
       bgOklch = { L, C, h };
       seedBg = formatted;
       seedBgHex = hex;
-    } else {
+    } else if (role === "fg") {
       fgOklch = { L, C, h };
       seedFg = formatted;
       seedFgHex = hex;
+    } else {
+      accentOklch = { L, C, h };
+      seedAccent = formatted;
+      seedAccentHex = hex;
     }
 
     writeVar(token, formatted);
@@ -934,7 +1012,7 @@
 
   function onColorText(role, e) {
     const val = e.target.value;
-    const token = role === "bg" ? bgToken : fgToken;
+    const token = tokenOf(role);
     const target = getThemeTargetElement();
     const parsed = parseCssColor(val, target);
 
@@ -942,17 +1020,21 @@
       seedBg = val;
       seedBgHex = parsed.hex;
       bgOklch = { L: parsed.L, C: parsed.C, h: parsed.h };
-    } else {
+    } else if (role === "fg") {
       seedFg = val;
       seedFgHex = parsed.hex;
       fgOklch = { L: parsed.L, C: parsed.C, h: parsed.h };
+    } else {
+      seedAccent = val;
+      seedAccentHex = parsed.hex;
+      accentOklch = { L: parsed.L, C: parsed.C, h: parsed.h };
     }
     writeVar(token, val);
   }
 
   function onSliderInput(role, channel, e) {
     const val = parseFloat(e.target.value);
-    const cur = role === "bg" ? { ...bgOklch } : { ...fgOklch };
+    const cur = { ...oklchOf(role) };
     cur[channel] = val;
     updateColorFromOklch(role, cur);
   }
@@ -966,7 +1048,7 @@
     const C = (x / rect.width) * MAX_CHROMA;
     const L = 1 - y / rect.height;
 
-    const cur = activePicker === "bg" ? bgOklch : fgOklch;
+    const cur = oklchOf(activePicker);
     updateColorFromOklch(activePicker, { L, C, h: cur.h });
   }
 
@@ -1026,7 +1108,7 @@
 
   function onLineHeightInput(e) {
     lineHeight = parseFloat(e.target.value);
-    writeVar("--line-height", String(lineHeight));
+    writeVar("--font-density", String(lineHeight));
   }
 
   function onRatioInput(e) {
@@ -1041,7 +1123,7 @@
 
   function onRhythmGapInput(e) {
     rhythmGap = parseFloat(e.target.value);
-    writeVar("--rhythm-gap-new-line", `calc(var(--space) * ${rhythmGap})`);
+    writeVar("--rhythm-block-scale", String(rhythmGap));
   }
 
   function onRadiusInput(e) {
@@ -1143,6 +1225,7 @@
 <!-- ======================================================================
      TRIGGER / HANDLER
      ====================================================================== -->
+{#if handlerVisible}
 <div
   class="lab-handler-top m-0"
   role="button"
@@ -1170,6 +1253,7 @@
 >
   <div class="lab-handler-bar"></div>
 </div>
+{/if}
 
 <!-- ======================================================================
      SIDE PANEL
@@ -1324,16 +1408,50 @@
               </div>
             </div>
 
+            <div class="lab-field">
+              <label class="lab-field-label" for="lab-accent-text">Accent</label>
+              <div class="lab-color-row">
+                <button
+                  type="button"
+                  class="lab-swatch"
+                  class:active={activePicker === "accent"}
+                  style="background-color: {seedAccentHex};"
+                  title="Toggle OKLCH accent picker"
+                  onclick={() => toggleColorPicker("accent")}
+                  aria-label="Pick accent color"
+                ></button>
+                <input
+                  id="lab-accent-text"
+                  type="text"
+                  class="lab-text-input"
+                  value={seedAccent}
+                  spellcheck="false"
+                  placeholder="e.g. oklch(0.65 0.22 355)"
+                  oninput={(e) => onColorText("accent", 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}
+              {@const curOklch = oklchOf(activePicker)}
+              {@const curHex =
+                activePicker === "bg"
+                  ? seedBgHex
+                  : activePicker === "fg"
+                    ? seedFgHex
+                    : seedAccentHex}
+              {@const presets =
+                activePicker === "bg"
+                  ? BG_PRESETS
+                  : activePicker === "fg"
+                    ? FG_PRESETS
+                    : ACCENT_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
+                      >{ROLE_LABEL[activePicker]}</span
                     >
                     <span class="lab-picker-hex">{curHex}</span>
                   </div>
@@ -1547,20 +1665,6 @@
               "--font-monospace",
               fontMono,
             )}
-          </div>
-        {/if}
-      </section>
-
-      <!-- ─── SCALE ─── -->
-      <section class="lab-section">
-        <button class="lab-section-head" onclick={() => toggleSection("scale")}>
-          <span class="lab-section-arrow" class:open={sectionsOpen.scale}
-            >▶</span
-          >
-          <span class="lab-section-title">Scale</span>
-        </button>
-        {#if sectionsOpen.scale}
-          <div class="lab-section-body" transition:slide>
             <div class="lab-field">
               <label class="lab-field-label" for="lab-font-size"
                 >Font Size</label
@@ -1581,16 +1685,16 @@
             </div>
             <div class="lab-field">
               <label class="lab-field-label" for="lab-line-height"
-                >Line Height</label
+                >Font density</label
               >
               <div class="lab-slider-wrapper">
                 <input
-                  id="lab-line-height"
+                  id="lab-line-height" title="--font-density: sets --line-height, which stays between 1.35 and 1.75"
                   type="range"
                   class="lab-range"
                   value={lineHeight}
-                  min="1"
-                  max="2"
+                  min="1.35"
+                  max="1.75"
                   step="0.05"
                   oninput={onLineHeightInput}
                 />
@@ -1615,23 +1719,6 @@
                 <span class="lab-readout">{ratio.toFixed(2)}</span>
               </div>
             </div>
-          </div>
-        {/if}
-      </section>
-
-      <!-- ─── SPACING ─── -->
-      <section class="lab-section">
-        <button
-          class="lab-section-head"
-          onclick={() => toggleSection("spacing")}
-        >
-          <span class="lab-section-arrow" class:open={sectionsOpen.spacing}
-            >▶</span
-          >
-          <span class="lab-section-title">Spacing</span>
-        </button>
-        {#if sectionsOpen.spacing}
-          <div class="lab-section-body" transition:slide>
             <div class="lab-field">
               <label class="lab-field-label" for="lab-gap-body">Body Gap</label>
               <div class="lab-slider-wrapper">
@@ -1650,15 +1737,15 @@
             </div>
             <div class="lab-field">
               <label class="lab-field-label" for="lab-rhythm-gap"
-                >Rhythm Gap</label
+                >Block rhythm</label
               >
               <div class="lab-slider-wrapper">
                 <input
-                  id="lab-rhythm-gap"
+                  id="lab-rhythm-gap" title="--rhythm-block-scale: the space around tables, cards and figures, as a multiple of the text gap"
                   type="range"
                   class="lab-range"
                   value={rhythmGap}
-                  min="0"
+                  min="1"
                   max="4"
                   step="0.25"
                   oninput={onRhythmGapInput}
@@ -1806,6 +1893,14 @@
   }
 
   /* ═══════════ HANDLER TRIGGER ═══════════ */
+  :global(:root[data-lab-handler="false"]) .lab-handler,
+  :global(:root[data-lab-handler="false"]) .lab-handler-top,
+  :global(:root[data-lab-no-handler]) .lab-handler,
+  :global(:root[data-lab-no-handler]) .lab-handler-top {
+    display: none !important;
+    pointer-events: none !important;
+  }
+
   .lab-handler-top {
     position: fixed;
     z-index: 200;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stnd/lab",
-  "version": "1.6.0",
+  "version": "1.6.1",
   "type": "module",
   "svelte": "./Lab.svelte",
   "author": "Francis Fontaine",
@@ -16,7 +16,7 @@
   "dependencies": {
     "bezier-easing": "^3.0.1",
     "svelte": "5.57.2",
-    "@stnd/ui": "0.16.0"
+    "@stnd/ui": "0.16.1"
   },
   "peerDependencies": {
     "astro": ">=5.0.0"