@stnd/lab 1.6.0 → 1.7.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @stnd/lab
 
+## 1.7.0
+
+### Minor Changes
+
+- Auto-bumped @stnd/lab due to modified code.
+
+## 1.6.1
+
+### Patch Changes
+
+- @stnd/ui@0.16.1
+
 ## 1.6.0
 
 ### Minor Changes

package/Lab.svelte

@@ -24,7 +24,7 @@
   } from "./color.js";
 
   // Sidebar transition parameters (defaults)
-  let sidebarDuration = $state(2000); // milliseconds
+  let sidebarDuration = $state(220); // milliseconds
   let customEasing = $state(bezier(0.22, 1, 0.36, 1));
 
   // =========================================================================
@@ -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 =
@@ -126,12 +157,27 @@
     }
   }
 
+  let openTimer;
+
   function openLab() {
     clearTimeout(closeTimer);
+    clearTimeout(openTimer);
     view = "open";
   }
 
+  function hoverOpenLab() {
+    if (typeof window !== "undefined" && !window.matchMedia("(hover: hover) and (pointer: fine)").matches) {
+      return;
+    }
+    clearTimeout(closeTimer);
+    clearTimeout(openTimer);
+    openTimer = setTimeout(() => {
+      view = "open";
+    }, 120);
+  }
+
   function requestCloseLab() {
+    clearTimeout(openTimer);
     if (pinned || activePicker || isDraggingPlane) return;
     // Keep open if user is interacting with inputs or popovers inside
     if (
@@ -146,24 +192,38 @@
     clearTimeout(closeTimer);
     closeTimer = setTimeout(() => {
       view = "dormant";
-    }, 100);
+    }, 280);
   }
 
   function cancelCloseLab() {
+    clearTimeout(openTimer);
     clearTimeout(closeTimer);
   }
 
+  function togglePinned() {
+    pinned = !pinned;
+    try {
+      sessionStorage.setItem("stnd-pinned", String(pinned));
+    } catch {}
+  }
+
+  function collapseLab() {
+    pinned = false;
+    try {
+      sessionStorage.setItem("stnd-pinned", "false");
+    } catch {}
+    view = "dormant";
+  }
+
   let modified = $state(new Set());
   let version = $state("");
   let viewportW = $state(0);
 
   // Collapsible sections
   let sectionsOpen = $state({
-    theme: false,
-    colors: false,
-    typography: false,
-    scale: false,
-    spacing: false,
+    theme: true,
+    colors: true,
+    typography: true,
     debug: false,
     links: false,
   });
@@ -223,17 +283,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 +426,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 +448,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 +461,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 +485,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 +547,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 +761,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 = {
@@ -700,20 +795,40 @@
     // Keyboard shortcuts
     function onKey(e) {
       const mod = navigator.platform.includes("Mac") ? e.metaKey : e.ctrlKey;
+      const el = document.activeElement;
+      const typing =
+        !!el && (["INPUT", "TEXTAREA", "SELECT"].includes(el.tagName) || el.isContentEditable);
+
+      // Right-sidebar shortcut `]` when not typing
+      if (!typing && !e.metaKey && !e.ctrlKey && !e.altKey && e.key === "]") {
+        e.preventDefault();
+        if (view === "dormant") {
+          view = "open";
+          pinned = true;
+        } else if (!pinned) {
+          pinned = true;
+        } else {
+          collapseLab();
+        }
+        return;
+      }
 
       // Toggle lab with Cmd/Ctrl+S (override default save shortcut)
       if (mod && !e.shiftKey && e.key.toLowerCase() === "s") {
         e.preventDefault();
         view = view === "dormant" ? "open" : "dormant";
+        if (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();
@@ -744,6 +859,7 @@
       if (view !== "open" || pinned) return;
       if (sidebarEl && e.composedPath().includes(sidebarEl)) return;
       if (
+        e.target.closest?.(".lab-open-btn") ||
         e.target.closest?.(".lab-handler") ||
         e.target.closest?.(".lab-handler-top")
       )
@@ -752,6 +868,7 @@
     }
 
     const domObserver = new MutationObserver(() => {
+      syncHandlerVisibility();
       requestAnimationFrame(syncFromDOM);
     });
     domObserver.observe(document.documentElement, {
@@ -761,6 +878,8 @@
         "data-color-mode",
         "class",
         "data-lab-scheme",
+        "data-lab-handler",
+        "data-lab-no-handler",
       ],
     });
 
@@ -786,13 +905,12 @@
   // EFFECTS
   // =========================================================================
 
-  // Persist panel state + dispatch event for dev toolbar
-  // Shrink the page when the sidebar is open (like DevTools)
+  // Shrink the page only when the Lab is pinned open on wide screens
   $effect(() => {
     if (duplicate) return;
     if (typeof document === "undefined") return;
     const el = document.documentElement;
-    if (view === "open") {
+    if (view === "open" && pinned) {
       el.classList.add("lab-open");
     } else {
       el.classList.remove("lab-open");
@@ -828,7 +946,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 +978,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 +1039,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 +1060,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 +1068,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 +1096,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 +1156,7 @@
 
   function onLineHeightInput(e) {
     lineHeight = parseFloat(e.target.value);
-    writeVar("--line-height", String(lineHeight));
+    writeVar("--font-density", String(lineHeight));
   }
 
   function onRatioInput(e) {
@@ -1041,7 +1171,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) {
@@ -1141,59 +1271,81 @@
 
 {#if !duplicate}
 <!-- ======================================================================
-     TRIGGER / HANDLER
+     TOP-RIGHT STICKY FLASK TRIGGER (Right Sidebar Minimized Mode)
      ====================================================================== -->
-<div
-  class="lab-handler-top m-0"
-  role="button"
-  tabindex="0"
-  aria-label="Open Design Lab"
-  onmouseenter={openLab}
-  onmouseleave={requestCloseLab}
-  onclick={() => (view = view === "dormant" ? "open" : "dormant")}
-  onkeydown={(e) => e.key === "Enter" && (view = "open")}
->
-  <div class="lab-dot"></div>
-</div>
-
-<div
-  class="lab-handler m-0"
-  class:scrolling={isScrolling}
+{#if handlerVisible && view === "dormant"}
+<button
+  type="button"
+  class="item lab-open-btn m-0"
   class:modified={modCount > 0}
-  onmouseenter={openLab}
-  onmouseleave={requestCloseLab}
-  role="button"
-  tabindex="0"
   aria-label="Open Design Lab"
-  onclick={() => (view = view === "dormant" ? "open" : "dormant")}
-  onkeydown={(e) => e.key === "Enter" && (view = "open")}
+  title="Open Design Lab ( ] )"
+  onpointerenter={hoverOpenLab}
+  onpointerleave={requestCloseLab}
+  onclick={() => {
+    clearTimeout(openTimer);
+    view = "open";
+    pinned = true;
+    try {
+      sessionStorage.setItem("stnd-pinned", "true");
+    } catch {}
+  }}
 >
-  <div class="lab-handler-bar"></div>
-</div>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1.25em"
+    height="1.25em"
+    viewBox="0 0 256 256"
+    fill="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      d="M221.6,199.77,160,96.92V40h8a8,8,0,0,0,0-16H88a8,8,0,0,0,0,16h8V96.92L34.4,199.77A16,16,0,0,0,48.13,224H207.87a16,16,0,0,0,13.73-24.23ZM110.86,103.25A7.93,7.93,0,0,0,112,99.14V40h32V99.14a7.93,7.93,0,0,0,1.14,4.11L183.36,167c-12.19,2.31-26.07-.37-41.19-8.19-19-9.82-35.87-12.48-50.25-8.23ZM48.13,208l24.51-40.91c11.79-4.76,25.75-2.66,43.1,6.31,15.65,8.09,30.12,11.66,43.18,10.67a63.36,63.36,0,0,0,15.46-3L207.87,208Z"
+    />
+  </svg>
+  {#if modCount > 0}
+    <span class="lab-mod-dot" title="{modCount} active override(s)"></span>
+  {/if}
+</button>
+{/if}
 
 <!-- ======================================================================
-     SIDE PANEL
+     RIGHT SIDEBAR PANE
      ====================================================================== -->
 {#if view === "open"}
   <div
     bind:this={sidebarEl}
     transition:fly={{
-      x: 320,
+      x: 340,
       duration: sidebarDuration,
       easing: customEasing,
       opacity: false,
     }}
-    class="lab-sidebar no-rhythm mt-0"
+    class="pane lab-sidebar no-rhythm mt-0"
+    data-pinned={pinned ? "" : undefined}
     role="dialog"
     tabindex="-1"
     aria-label="Design Lab"
-    onmouseenter={cancelCloseLab}
-    onmouseleave={requestCloseLab}
+    onpointerenter={cancelCloseLab}
+    onpointerleave={requestCloseLab}
   >
     <!-- ═══════════ HEADER ═══════════ -->
     <header class="lab-header">
       <div class="lab-header-title">
-        <h2>stnd</h2>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="1.15em"
+          height="1.15em"
+          viewBox="0 0 256 256"
+          fill="currentColor"
+          class="lab-flask-mark"
+          aria-hidden="true"
+        >
+          <path
+            d="M221.6,199.77,160,96.92V40h8a8,8,0,0,0,0-16H88a8,8,0,0,0,0,16h8V96.92L34.4,199.77A16,16,0,0,0,48.13,224H207.87a16,16,0,0,0,13.73-24.23ZM110.86,103.25A7.93,7.93,0,0,0,112,99.14V40h32V99.14a7.93,7.93,0,0,0,1.14,4.11L183.36,167c-12.19,2.31-26.07-.37-41.19-8.19-19-9.82-35.87-12.48-50.25-8.23ZM48.13,208l24.51-40.91c11.79-4.76,25.75-2.66,43.1,6.31,15.65,8.09,30.12,11.66,43.18,10.67a63.36,63.36,0,0,0,15.46-3L207.87,208Z"
+          />
+        </svg>
+        <h2>stnd lab</h2>
         {#if version}<span class="lab-version">v{version}</span>{/if}
       </div>
       <div class="lab-header-meta">
@@ -1216,16 +1368,17 @@
 
         <button
           class="smaller icon ghost"
-          onclick={() => (pinned = !pinned)}
-          aria-label={pinned ? "Unpin Lab" : "Pin Lab"}
-          title={pinned ? "Unpin Lab" : "Pin Lab"}
+          onclick={togglePinned}
+          aria-label={pinned ? "Unpin Lab (hover peek mode)" : "Pin Lab open"}
+          title={pinned ? "Pinned open — click to switch to hover peek" : "Hover peek — click to pin open"}
         >
           {pinned ? "●" : "○"}
         </button>
         <button
           class="smaller icon ghost"
-          onclick={() => (view = "dormant")}
-          aria-label="Close Lab"
+          onclick={collapseLab}
+          aria-label="Minimize Lab to top-right icon"
+          title="Collapse Lab ( ] )"
         >
           ✕
         </button>
@@ -1324,16 +1477,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 +1734,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 +1754,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 +1788,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 +1806,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}
@@ -1790,10 +1946,12 @@
      STYLES — Fully scoped, isolated from design tokens
      ====================================================================== -->
 <style>
-  /* ═══════════ PAGE SHRINK (like DevTools) ═══════════ */
-  :global(html.lab-open) {
-    margin-right: var(--lab-sidebar-w, 320px);
-    transition: margin-right var(--transition);
+  /* ═══════════ PAGE SHRINK (only when pinned on wide screens) ═══════════ */
+  @media (min-width: 1025px) {
+    :global(html.lab-open) {
+      margin-right: calc(var(--lab-sidebar-w, 304px) + var(--window-inset, 8px) * 2);
+      transition: margin-right var(--transition);
+    }
   }
   :global(html:not(.lab-open)) {
     transition: margin-right var(--transition);
@@ -1802,81 +1960,82 @@
   /* ═══════════ DESIGN CONSTANTS ═══════════ */
   :root {
     --lab-font-size: 12px;
-    --lab-sidebar-w: 320px;
+    --lab-sidebar-w: 304px;
   }
 
-  /* ═══════════ HANDLER TRIGGER ═══════════ */
-  .lab-handler-top {
-    position: fixed;
-    z-index: 200;
-    top: 0;
-    right: 0;
-    padding: var(--space-2);
-    cursor: pointer;
-    opacity: 0.1;
-    transition: opacity var(--transition);
-    display: none;
-  }
-  .lab-handler-top:hover {
-    opacity: 1;
-  }
-  .lab-dot {
-    width: var(--space-d4);
-    height: var(--space-d4);
-    background: var(--color-foreground);
-    border-radius: 50%;
+  /* ═══════════ TOP-RIGHT STICKY FLASK TRIGGER ═══════════ */
+  :global(:root[data-lab-handler="false"]) .lab-open-btn,
+  :global(:root[data-lab-no-handler]) .lab-open-btn {
+    display: none !important;
+    pointer-events: none !important;
   }
 
-  .lab-handler {
+  .lab-open-btn {
     position: fixed;
-    z-index: 200;
-    top: 20%;
-    right: 0;
-    padding: var(--space); /* Bigger hit area */
-    padding-right: 20px;
-    cursor: normal;
-    display: flex;
-    flex-direction: row;
+    z-index: 9991;
+    top: calc(var(--window-inset, 8px) + env(safe-area-inset-top, 0px));
+    right: calc(var(--window-inset, 8px) + env(safe-area-inset-right, 0px));
+    display: inline-flex;
     align-items: center;
-    transition: all var(--transition);
+    justify-content: center;
+    width: calc(var(--space) * 1.5);
+    height: calc(var(--space) * 1.5);
+    padding: 0;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: var(--color-surface-raised);
+    color: var(--color-muted);
+    box-shadow: var(--shadow), var(--pane-edge);
+    cursor: pointer;
+    transition:
+      color var(--transition-fast),
+      background var(--transition-fast),
+      transform var(--transition-fast),
+      box-shadow var(--transition-fast);
   }
-  .lab-handler.scrolling .lab-handler-bar {
-    background: oklch(from var(--color-foreground) l c h / 0.3);
+  .lab-open-btn:hover {
+    color: var(--color-foreground);
+    background: var(--color-surface-overlay);
+    box-shadow: var(--shadow-lg), var(--pane-edge);
   }
-  .lab-handler-bar {
-    width: var(--space-d4);
-    height: var(--space-2);
-    background: oklch(from var(--color-foreground) l c h / 0);
-    border-radius: var(--radius);
-    box-shadow: var(--shadow-inset) var(--shadow-ring);
-    transition: all var(--transition);
-    cursor: normal;
-    backdrop-filter: var(--filter-glass);
+  .lab-open-btn.modified {
+    color: var(--color-accent);
   }
-  .lab-handler.modified .lab-handler-bar {
-    background: oklch(from var(--color-accent) l c h / 0.1);
+  .lab-mod-dot {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background: var(--color-accent);
   }
 
-  /* ═══════════ SIDEBAR ═══════════ */
+  /* ═══════════ RIGHT SIDEBAR PANE (Reveal Dev Panel geometry) ═══════════ */
   .lab-sidebar {
     position: fixed;
     z-index: 9992;
-    top: 0;
-    right: 0;
+    top: calc(var(--window-inset, 8px) + env(safe-area-inset-top, 0px));
+    right: calc(var(--window-inset, 8px) + env(safe-area-inset-right, 0px));
     width: var(--lab-sidebar-w);
-    height: 100dvh;
+    height: calc(
+      100dvh - 2 * var(--window-inset, 8px) - env(safe-area-inset-top, 0px) -
+        env(safe-area-inset-bottom, 0px)
+    );
+    margin: 0;
+    padding: 0;
 
     color: var(--color-foreground);
     font: var(--lab-font-size) / 1.5 var(--font-monospace);
-    border-left: var(--border);
+    border-radius: var(--pane-radius, 9px);
     display: flex;
     flex-direction: column;
-    box-shadow: var(--shadow-ring), var(--shadow-glow);
-    background: var(--color-surface);
-    backdrop-filter: var(--filter-blur);
+    box-shadow: var(--shadow-overlay), var(--pane-edge);
+    background: var(--color-surface-raised);
+    backdrop-filter: var(--filter-glass);
+    overflow: hidden;
     /* Ensure the sidebar stays fully opaque and never animates opacity */
     opacity: 1 !important;
-    /* Explicitly disable opacity animation while preserving other transitions */
     transition:
       transform var(--transition),
       box-shadow var(--transition),
@@ -1891,8 +2050,6 @@
   /* Reset children to Lab font, allowing explicit font-family previews to win */
   .lab-sidebar * {
     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"]) {
@@ -1905,19 +2062,22 @@
     flex-wrap: wrap;
     align-items: center;
     gap: 0;
-    padding: var(--space-d6) var(--space-d2);
+    padding: var(--space-d4) var(--space-d2);
     border-bottom: var(--border);
     flex-shrink: 0;
-
     background: var(--color-surface-raised);
   }
   .lab-header-title {
     display: flex;
     align-items: center;
-    gap: 0px;
+    gap: var(--space-d5);
     flex: 1;
     min-width: 0;
   }
+  .lab-flask-mark {
+    color: var(--color-accent);
+    flex-shrink: 0;
+  }
   .lab-header h2 {
     font-size: var(--scale-d2) !important;
     line-height: 1 !important;
@@ -2276,11 +2436,15 @@
   /* ═══════════ RESPONSIVE ═══════════ */
   @media (max-width: 480px) {
     .lab-sidebar {
+      top: 0;
+      right: 0;
       width: 100vw;
+      height: 100dvh;
+      border-radius: 0;
     }
   }
   @media print {
-    .lab-handler,
+    .lab-open-btn,
     .lab-sidebar {
       display: none !important;
     }

package/README.md

@@ -14,7 +14,7 @@ status: active
 tags:
   - package
   - stnd
-theme: kernel
+theme: maker
 type: package
 visibility: public
 garden-url: https://standard.garden/@francis/readme

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stnd/lab",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "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"