@stnd/lab 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @stnd/lab
 
+## 1.3.0
+
+### Minor Changes
+
+- Auto-bumped @stnd/lab due to modified code.
+
+### Patch Changes
+
+- Updated dependencies
+  - @stnd/ui@0.11.0
+
+## 1.2.0
+
+### Minor Changes
+
+- Auto-bumped @stnd/lab due to modified code.
+
+### Patch Changes
+
+- Updated dependencies
+  - @stnd/ui@0.10.0
+
 ## 1.1.0
 
 ### Minor Changes

package/Lab.svelte

@@ -40,6 +40,17 @@
   // =========================================================================
   // STATE
   // =========================================================================
+  // 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();
+
+  // 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
+  // one to do what it was asked for. Decided at creation, before any effect runs.
+  const duplicate =
+    typeof window !== "undefined" && window.__stndLabClaimed === true;
+  if (typeof window !== "undefined" && !duplicate) window.__stndLabClaimed = true;
+
   let view = $state("dormant"); // dormant | open
   let closeTimer;
   let isScrolling = $state(false);
@@ -149,6 +160,7 @@
   let scheme = $derived(userScheme === "auto" ? systemScheme : userScheme);
 
   $effect(() => {
+    if (duplicate) return;
     if (typeof sessionStorage !== "undefined") {
       sessionStorage.setItem("stnd-scheme", userScheme);
       sessionStorage.setItem("stnd-pinned", String(pinned));
@@ -438,6 +450,19 @@
   // LIFECYCLE
   // =========================================================================
   onMount(() => {
+    if (duplicate) {
+      let tries = 0;
+      const relay = setInterval(() => {
+        const first = window.StandardLab;
+        if (first) {
+          if (open) first.open();
+          if (pin) first.pin();
+          clearInterval(relay);
+        } else if (++tries > 40) clearInterval(relay);
+      }, 50);
+      return () => clearInterval(relay);
+    }
+
     version = document.documentElement.dataset.standardVersion || "";
     viewportW = window.innerWidth;
 
@@ -573,6 +598,8 @@
     };
 
     restoreLabState();
+    if (open) view = "open";
+    if (pin) pinned = true;
     document.addEventListener("astro:after-swap", restoreLabState);
 
     // Global API for dev toolbar compatibility
@@ -589,6 +616,12 @@
       toggle() {
         view = view === "dormant" ? "open" : "dormant";
       },
+      pin() {
+        pinned = true;
+      },
+      unpin() {
+        pinned = false;
+      },
       refresh: syncFromDOM,
     };
 
@@ -659,6 +692,7 @@
       window.removeEventListener("scroll", onScroll);
       mql.removeEventListener("change", onSchemeChange);
       delete window.StandardLab;
+      delete window.__stndLabClaimed;
     };
   });
 
@@ -669,6 +703,7 @@
   // Persist panel state + dispatch event for dev toolbar
   // Shrink the page when the sidebar is open (like DevTools)
   $effect(() => {
+    if (duplicate) return;
     if (typeof document === "undefined") return;
     const el = document.documentElement;
     if (view === "open") {
@@ -679,6 +714,7 @@
   });
 
   $effect(() => {
+    if (duplicate) return;
     if (typeof window === "undefined") return;
     if (view === "dormant") {
       sessionStorage.removeItem("stnd-panel-state");
@@ -908,6 +944,7 @@
   let modCount = $derived(modified.size);
 </script>
 
+{#if !duplicate}
 <!-- ======================================================================
      TRIGGER / HANDLER
      ====================================================================== -->
@@ -1394,6 +1431,7 @@
     </footer>
   </div>
 {/if}
+{/if}
 
 <!-- ======================================================================
      STYLES — Fully scoped, isolated from design tokens
@@ -1516,7 +1554,7 @@
     border-bottom: var(--border);
     flex-shrink: 0;
 
-    background: var(--color-surface-light-1);
+    background: var(--color-surface-raised);
   }
   .lab-header-title {
     display: flex;
@@ -1710,7 +1748,7 @@
     padding: var(--space-half) var(--space);
     box-shadow: var(--shadow);
     flex-shrink: 0;
-    background: var(--color-surface-light-1);
+    background: var(--color-surface-raised);
   }
 
   /* ═══════════ RESPONSIVE ═══════════ */
@@ -1728,26 +1766,10 @@
 
   /* ═══════════ GLOBAL SCHEME OVERRIDES ═══════════ */
   :global(:root[data-lab-scheme="dark"]) {
-    --color-background: var(--color-dark-background);
-    --color-foreground: var(--color-dark-foreground);
-    --color-accent: var(--color-dark-accent);
-    --color-header: var(--color-dark-header, var(--color-foreground));
-    --color-surface: color-mix(
-      in srgb,
-      var(--color-background) 100%,
-      transparent
-    );
+    color-scheme: dark;
   }
   :global(:root[data-lab-scheme="light"]) {
-    --color-background: var(--color-light-background);
-    --color-foreground: var(--color-light-foreground);
-    --color-accent: var(--color-light-accent);
-    --color-header: var(--color-light-header, var(--color-foreground));
-    --color-surface: color-mix(
-      in srgb,
-      var(--color-background) 100%,
-      transparent
-    );
+    color-scheme: light;
   }
   /* Combobox styles tuned for the Lab panel — make the combobox visually match lab inputs */
   :global(.lab-font-combobox .std-combobox-trigger) {

package/README.md

@@ -62,6 +62,28 @@ The `Lab` component is typically injected automatically by the `@stnd/core` inte
 {/if}
 ```
 
+### In production: the Studio
+
+The module that injects the Lab everywhere is dev-only, but a page can mount it on purpose. The
+Studio (`apps/stnd.build`, `/studio`) does, in production too:
+
+```astro
+---
+import Lab from "@stnd/lab/Lab.svelte";
+---
+<Lab client:only="svelte" open pin />
+```
+
+| Prop | Default | Effect |
+|---|---|---|
+| `open` | `false` | Opens the panel when it mounts |
+| `pin` | `false` | Keeps it open (it does not close on a click outside or on mouse leave) |
+
+There is one Lab per page. If the dev module has already mounted one, a second instance renders
+nothing and asks the first to open or pin itself, so a page can ask for the Lab without caring who
+got there first. `window.StandardLab` offers `open()`, `close()`, `toggle()`, `pin()`, `unpin()`
+and `refresh()`.
+
 ## Shortcuts
 - `Cmd/Ctrl + S`: Toggle the Lab panel open/dormant (overrides the browser’s save dialog).
 - `Cmd/Ctrl + D`: Same toggle, alternate binding.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stnd/lab",
-  "version": "1.1.0",
+  "version": "1.3.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.9.0"
+    "@stnd/ui": "0.11.0"
   },
   "peerDependencies": {
     "astro": ">=5.0.0"