@stnd/lab 1.6.1 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @stnd/lab
 
+## 1.8.0
+
+### Minor Changes
+
+- Auto-bumped @stnd/lab due to modified code.
+
+### Patch Changes
+
+- @stnd/ui@0.16.2
+
+## 1.7.0
+
+### Minor Changes
+
+- Auto-bumped @stnd/lab due to modified code.
+
 ## 1.6.1
 
 ### Patch 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));
 
   // =========================================================================
@@ -157,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 (
@@ -177,13 +192,29 @@
     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);
@@ -461,9 +492,11 @@
       "--font-interface",
       "--font-monospace",
       "--font-text-size",
-      "--font-density",
+      "--density",
+      "--ratio",
       "--optical-ratio",
       "--page-padding",
+      "--reading-width",
       "--rhythm-block-scale",
       "--radius",
     ];
@@ -523,9 +556,11 @@
       "--font-interface",
       "--font-monospace",
       "--font-text-size",
-      "--font-density",
+      "--density",
+      "--ratio",
       "--optical-ratio",
       "--page-padding",
+      "--reading-width",
       "--rhythm-block-scale",
       "--radius",
     ];
@@ -764,6 +799,23 @@
     // 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") {
@@ -811,6 +863,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")
       )
@@ -856,13 +909,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");
@@ -938,10 +990,12 @@
       "--font-monospace",
       "--font-text-size",
       "--font-size",
-      "--font-density",
+      "--density",
+      "--ratio",
       "--line-height",
       "--optical-ratio",
       "--page-padding",
+      "--reading-width",
       "--rhythm-block-scale",
       "--rhythm-gap-new-line",
       "--radius",
@@ -1108,11 +1162,13 @@
 
   function onLineHeightInput(e) {
     lineHeight = parseFloat(e.target.value);
-    writeVar("--font-density", String(lineHeight));
+    writeVar("--density", String(lineHeight));
+    writeVar("--line-height", String(lineHeight));
   }
 
   function onRatioInput(e) {
     ratio = parseFloat(e.target.value);
+    writeVar("--ratio", String(ratio));
     writeVar("--optical-ratio", String(ratio));
   }
 
@@ -1223,61 +1279,81 @@
 
 {#if !duplicate}
 <!-- ======================================================================
-     TRIGGER / HANDLER
+     TOP-RIGHT STICKY FLASK TRIGGER (Right Sidebar Minimized Mode)
      ====================================================================== -->
-{#if handlerVisible}
-<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">
@@ -1300,16 +1376,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>
@@ -1685,11 +1762,11 @@
             </div>
             <div class="lab-field">
               <label class="lab-field-label" for="lab-line-height"
-                >Font density</label
+                >Density</label
               >
               <div class="lab-slider-wrapper">
                 <input
-                  id="lab-line-height" title="--font-density: sets --line-height, which stays between 1.35 and 1.75"
+                  id="lab-line-height" title="--density: sets vertical cadence and line-height (1.35 to 1.75)"
                   type="range"
                   class="lab-range"
                   value={lineHeight}
@@ -1703,11 +1780,11 @@
             </div>
             <div class="lab-field">
               <label class="lab-field-label" for="lab-ratio"
-                >Optical Ratio</label
+                >Ratio</label
               >
               <div class="lab-slider-wrapper">
                 <input
-                  id="lab-ratio"
+                  id="lab-ratio" title="--ratio: modular scale factor"
                   type="range"
                   class="lab-range"
                   value={ratio}
@@ -1877,10 +1954,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);
@@ -1889,89 +1968,82 @@
   /* ═══════════ DESIGN CONSTANTS ═══════════ */
   :root {
     --lab-font-size: 12px;
-    --lab-sidebar-w: 320px;
+    --lab-sidebar-w: 304px;
   }
 
-  /* ═══════════ 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 {
+  /* ═══════════ 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-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%;
-  }
-
-  .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),
@@ -1986,8 +2058,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"]) {
@@ -2000,19 +2070,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;
@@ -2371,11 +2444,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.1",
+  "version": "1.8.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.1"
+    "@stnd/ui": "0.16.2"
   },
   "peerDependencies": {
     "astro": ">=5.0.0"