@kitlangton/knobs 0.4.0-next.15 → 0.4.0-next.17

package/dist/dev/{chunk-49hkdggk.js → chunk-5cv3g7ca.js}

@@ -46,7 +46,7 @@ import {
   pushReadout,
   READOUT,
   storageKey
-} from "./chunk-v2g91mrm.js";
+} from "./chunk-2g0znytq.js";
 import {
   resolveLook,
   themeOf,
@@ -119,7 +119,7 @@ import {
   createHintController,
   pageHints,
   toggleLayer
-} from "./chunk-bejz4qcg.js";
+} from "./chunk-3vag4n3q.js";
 
 // src/panel/die.ts
 var ROUND = 16 * Math.sqrt(5), DIE = { half: 64 + ROUND, round: ROUND, pip: 12 }, PIPS = {
@@ -2666,7 +2666,7 @@ function readPanelTokens(panel, version = -1) {
     if (hit && hit.version === version)
       return hit.tokens;
   }
-  let style = getComputedStyle(panel), light = isLightStyle(style), theme = gpuDefaults(themeOf(panel), light), bg = parseCssColor(token(style, "bg"), theme.bg), isLight = light || bg[0] * 0.2126 + bg[1] * 0.7152 + bg[2] * 0.0722 > 0.55, surface = parseCssColor(token(style, "fill"), theme.fill), surfaceHi = parseCssColor(token(style, "fill-selected"), theme["fill-selected"]), line = parseCssColor(token(style, "border"), theme.border), lineHi = parseCssColor(token(style, "border-strong"), theme["border-strong"]), text = parseCssColor(token(style, "fg"), theme.fg), label = parseCssColor(token(style, "fg-2"), theme["fg-2"]), dim = parseCssColor(token(style, "fg-3"), theme["fg-3"]), accent = parseCssColor(token(style, "accent"), theme.accent), modified = parseCssColor(token(style, "modified"), theme.modified), segBg = parseCssColor(token(style, "segmented-track"), theme["segmented-track"]), segActive = parseCssColor(token(style, "segmented-active"), theme["segmented-active"]), toggleTrack = parseCssColor(token(style, "toggle-track"), theme["toggle-track"]), fillBase = style.getPropertyValue("--k-fill-base").trim() ? parseCssColor(token(style, "fill-base"), surfaceHi) : surfaceHi, toggleThumb = parseCssColor(token(style, "toggle-thumb"), theme["toggle-thumb"]), [duration, bounce] = style.getPropertyValue("--k-spring").trim().split(/\s+/).map(Number), fill = Number.isFinite(duration) && Number.isFinite(bounce) ? springMotion2({ duration, bounce }) : MOTION.default, fontFamily = style.fontFamily || style.getPropertyValue("--_k-font").trim() || 'system-ui, -apple-system, "SF Pro Text", sans-serif', monoFamily = style.getPropertyValue("--_k-mono").trim() || '"SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace', unit = numProp(style, "unit", 4), pad = numProp(style, "pad", 10), inset = numProp(style, "inset", pad), row = numProp(style, "row", 32), gap = numProp(style, "gap", 4), trayPad = numProp(style, "tray-pad", unit * 0.5), radius = numProp(style, "radius", 8), panelRadius = numProp(style, "radius-panel", radius + unit), radiusMd = Math.max(0, radius - trayPad), radiusSm = Math.max(0, radius - trayPad * 2), fontSize = parseFloat(style.fontSize) || numProp(style, "font-size", 12), roundRaw = style.getPropertyValue("--_k-round").trim(), round = /^-?[\d.]+(px)?$/.test(roundRaw) ? Math.max(0, parseFloat(roundRaw)) : radius > 0 ? 1e4 : 0, tokens = {
+  let style = getComputedStyle(panel), light = isLightStyle(style), theme = gpuDefaults(themeOf(panel), light), bg = parseCssColor(token(style, "bg"), theme.bg), isLight = light || bg[0] * 0.2126 + bg[1] * 0.7152 + bg[2] * 0.0722 > 0.55, surface = parseCssColor(token(style, "fill"), theme.fill), surfaceHi = parseCssColor(token(style, "fill-selected"), theme["fill-selected"]), line = parseCssColor(token(style, "border"), theme.border), lineHi = parseCssColor(token(style, "border-strong"), theme["border-strong"]), text = parseCssColor(token(style, "fg"), theme.fg), label = parseCssColor(token(style, "fg-2"), theme["fg-2"]), dim = parseCssColor(token(style, "fg-3"), theme["fg-3"]), accent = parseCssColor(token(style, "accent"), theme.accent), modified = parseCssColor(token(style, "modified"), theme.modified), segBg = parseCssColor(token(style, "segmented-track"), theme["segmented-track"]), segActive = parseCssColor(token(style, "segmented-active"), theme["segmented-active"]), toggleTrack = parseCssColor(token(style, "toggle-track"), theme["toggle-track"]), fillBase = style.getPropertyValue("--k-fill-base").trim() ? parseCssColor(token(style, "fill-base"), surfaceHi) : surfaceHi, toggleThumb = parseCssColor(token(style, "toggle-thumb"), theme["toggle-thumb"]), [duration, bounce] = style.getPropertyValue("--k-spring").trim().split(/\s+/).map(Number), fill = Number.isFinite(duration) && Number.isFinite(bounce) ? springMotion2({ duration, bounce }) : MOTION.default, fontFamily = style.fontFamily || style.getPropertyValue("--_k-font").trim() || 'system-ui, -apple-system, "SF Pro Text", sans-serif', monoFamily = style.getPropertyValue("--_k-mono").trim() || '"SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace', unit = numProp(style, "unit", 4), pad = numProp(style, "pad", 10), inset = numProp(style, "inset", pad), row = numProp(style, "row", 32), gap = numProp(style, "gap", 4), trayPad = numProp(style, "tray-pad", unit * 0.5), radius = numProp(style, "radius", 8), panelRadius = numProp(style, "radius-panel", radius + unit), frameRadius = numProp(style, "radius-frame", radius > 0 ? radius + pad + 1 : 0), radiusMd = Math.max(0, radius - trayPad), radiusSm = Math.max(0, radius - trayPad * 2), fontSize = parseFloat(style.fontSize) || numProp(style, "font-size", 12), roundRaw = style.getPropertyValue("--_k-round").trim(), round = /^-?[\d.]+(px)?$/.test(roundRaw) ? Math.max(0, parseFloat(roundRaw)) : radius > 0 ? 1e4 : 0, tokens = {
     bg,
     surface,
     surfaceHi,
@@ -2717,6 +2717,7 @@ function readPanelTokens(panel, version = -1) {
     trayPad,
     radius,
     panelRadius,
+    frameRadius,
     radiusMd,
     radiusSm,
     fontSize,
@@ -4734,6 +4735,33 @@ class GpuOverlayManager {
     let clipped = width > 0 && el.scrollWidth > el.clientWidth;
     return this.clipCache.set(el, { key, text, width, clipped }), clipped;
   }
+  lineCache = /* @__PURE__ */ new WeakMap;
+  linesOf(el, width) {
+    let text = el.textContent ?? "", hit = this.lineCache.get(el);
+    if (hit && hit.text === text && hit.width === width)
+      return hit.lines;
+    let lines = [], node = el.firstChild;
+    if (node?.nodeType === Node.TEXT_NODE) {
+      let top = el.getBoundingClientRect().top, range = el.ownerDocument.createRange(), line, flush = () => {
+        if (line)
+          lines.push({
+            text: text.slice(line.from, line.to),
+            y: (line.top + line.bottom) / 2 - top
+          });
+      };
+      for (let word of text.matchAll(/\S+/g)) {
+        let from = word.index, to = from + word[0].length;
+        range.setStart(node, from), range.setEnd(node, to);
+        let r = range.getBoundingClientRect();
+        if (line && Math.abs(r.top - line.top) < 1)
+          line.to = to, line.bottom = Math.max(line.bottom, r.bottom);
+        else
+          flush(), line = { from, to, top: r.top, bottom: r.bottom };
+      }
+      flush();
+    }
+    return this.lineCache.set(el, { text, width, lines }), lines;
+  }
   curReduced = !1;
   curLocks;
   curSelected = 0;
@@ -5875,7 +5903,7 @@ class GpuOverlayManager {
         this.curAlpha = 1;
       if (revealing)
         anyMoving = !0;
-      let blurMul = reducedMotion ? 0 : tokens.blurStrength, outerClip = panel.inline ? getEffectiveClipRect(panel.root, win, this.styleVersion) : [0, 0, win.innerWidth, win.innerHeight], morph = panel.morph?.(this.frameNow), shown = morph ? clamp(morph.progress, 0, 1) : 1, card = morph ? new DOMRect(morph.x, morph.y, morph.w, morph.h) : pRect, cardRadius = morph ? morph.radius : tokens.panelRadius;
+      let blurMul = reducedMotion ? 0 : tokens.blurStrength, outerClip = panel.inline ? getEffectiveClipRect(panel.root, win, this.styleVersion) : [0, 0, win.innerWidth, win.innerHeight], morph = panel.morph?.(this.frameNow), shown = morph ? clamp(morph.progress, 0, 1) : 1, card = morph ? new DOMRect(morph.x, morph.y, morph.w, morph.h) : pRect, cardRadius = morph ? morph.radius : tokens.frameRadius;
       if (morph)
         anyMoving = !0;
       let masked = morph !== void 0 && this.maskCount < MAX_MASKS, panelClip = intersectClip(outerClip, [pRect.left, pRect.top, pRect.right, pRect.bottom]);
@@ -6146,12 +6174,10 @@ class GpuOverlayManager {
             this.drawText(this.fit(g.labelEl.textContent ?? "", lr.width, px, tokens.titleWeight), lr.left, cy, withAlpha(tokens.text, 1 - peek), { px, weight: tokens.titleWeight, track: -0.01 });
           if (g.peek && peek > 0.005)
             this.drawText(this.fit(g.peek.textContent ?? "", lr.width, px, tokens.titleWeight), lr.left, cy, withAlpha(tokens.text, peek), { px, weight: tokens.titleWeight, track: -0.01 });
-        } else
-          this.drawText(tokens.groupUpper ? (g.labelEl.textContent ?? "").toUpperCase() : g.labelEl.textContent ?? "", lr.left, lr.top + lr.height * 0.5, tokens.groupColor, {
-            px: Math.max(9, tokens.groupSize),
-            weight: tokens.titleWeight,
-            track: tokens.groupTracking
-          });
+        } else {
+          let label = tokens.groupUpper ? (g.labelEl.textContent ?? "").toUpperCase() : g.labelEl.textContent ?? "", px = Math.max(9, tokens.groupSize);
+          this.drawText(this.domClipped(g.labelEl, label, lr.width) ? this.fit(label, lr.width, px, tokens.titleWeight, void 0, tokens.groupTracking, !0) : label, lr.left, lr.top + lr.height * 0.5, tokens.groupColor, { px, weight: tokens.titleWeight, track: tokens.groupTracking });
+        }
         if (!g.title && tokens.groupDivider[3] > 0 && g.element.previousElementSibling)
           this.pushPrim({
             x: gr.left,
@@ -6162,13 +6188,14 @@ class GpuOverlayManager {
             kind: 1
           });
         if (g.desc && !g.desc.hidden) {
-          let r = this.rectOf(g.desc), cs = getComputedStyle(g.desc), left = r.left + (parseFloat(cs.paddingLeft) || 0), w = r.width - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0);
-          this.drawText(this.fit(g.desc.textContent ?? "", w + 0.5, tokens.textMeta, tokens.labelWeight), left, r.top + r.height * 0.5, tokens.dim, { px: tokens.textMeta, weight: tokens.labelWeight });
+          let r = this.rectOf(g.desc), cs = getComputedStyle(g.desc), left = r.left + (parseFloat(cs.paddingLeft) || 0), w = r.width - (parseFloat(cs.paddingLeft) || 0) - (parseFloat(cs.paddingRight) || 0), lines = cs.whiteSpace.includes("nowrap") ? [{ text: g.desc.textContent ?? "", y: r.height * 0.5 }] : this.linesOf(g.desc, r.width);
+          for (let line of lines)
+            this.drawText(this.fit(line.text, w + 0.5, tokens.textMeta, tokens.labelWeight), left, r.top + line.y, tokens.dim, { px: tokens.textMeta, weight: tokens.labelWeight });
         }
         let fadeIn = (node) => node.parentElement?.closest("[data-fold-motion]") ? Number(getComputedStyle(node).opacity) || 0 : 1;
         if (g.summary && g.summary.getClientRects().length) {
-          let r = this.rectOf(g.summary), a = fadeIn(g.summary);
-          this.drawText(this.fit(g.summary.textContent ?? "", r.width + 0.5, tokens.textControl, 500), r.left, r.top + r.height * 0.5, withAlpha(tokens.dim, a), { px: tokens.textControl, weight: 500 });
+          let r = this.rectOf(g.summary), a = fadeIn(g.summary), px = g.title ? tokens.textControl : tokens.textMeta;
+          this.drawText(this.fit(g.summary.textContent ?? "", r.width + 0.5, px, 500), r.left, r.top + r.height * 0.5, withAlpha(tokens.dim, a), { px, weight: 500 });
         }
         let ctlShown = !g.controls || g.controls.getClientRects().length > 0, headAlpha = this.curAlpha;
         if (g.controls && ctlShown)
@@ -10663,7 +10690,6 @@ var compareCss = `
 :where(.knobs-ui) .knobs-cmp-zoom-reset:is(:hover,:focus-visible){background:color-mix(in srgb,var(--_ku-on-media) 16%,transparent);color:var(--_ku-on-media);transition-duration:calc(var(--_k-hover-in) * 1ms)}
 .knobs-cmp-note{position:absolute;left:50%;top:50%;translate:-50% -50%;color:var(--_k-fg-3);pointer-events:none}
 .knobs-cmp-note:empty{display:none}
-.knobs-cmp-strip-host{flex:none;height:60px;min-height:0}
 .knobs-cmp-timeline-host{flex:none;min-height:0}
 /* The frame strip: Before over After per column, a difference bar under them, a dot where it peaks. */
 .knobs-ui.knobs-cmp-strip{--_ku-cmp-diff:var(--k-compare-diff,var(--_k-ok));position:relative;width:100%;height:100%;min-height:40px;overflow:hidden;cursor:col-resize;touch-action:none;
@@ -10683,6 +10709,9 @@ var playerCss = `
 .knobs-player-media{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;object-fit:contain;
   opacity:0;filter:blur(4px);transition:opacity calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default),filter calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default)}
 .knobs-player[data-ready] .knobs-player-media{opacity:1;filter:none}
+/* Mid-scrub, the cached frame under the hand, over the video until it lands. */
+.knobs-player-preview{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
+.knobs-player-preview[hidden]{display:none}
 .knobs-player-line{flex:none;min-height:0}
 /* The timeline's own stylesheet is look.ts's; what the player's row and every timeline share
    about the hand is set here, after it. No hand cursor anywhere (the arrow, or a resize where it
@@ -11399,8 +11428,51 @@ function place2(o) {
 }
 var clamp2 = (v, lo, hi) => hi < lo ? lo : Math.max(lo, Math.min(hi, v));
 
+// src/ui/tooltip-model.ts
+function tipSchedule(clock, view) {
+  let shown = null, pending = null, timer, hiddenAt = -1 / 0, cancel = () => {
+    if (pending)
+      clock.clear(timer);
+    pending = null;
+  }, hide = (now = !1) => {
+    if (cancel(), !shown)
+      return;
+    shown = null, hiddenAt = clock.now(), view.hide(now);
+  };
+  return {
+    get shown() {
+      return shown;
+    },
+    get pending() {
+      return pending;
+    },
+    want(tip, options = {}) {
+      if (tip.el === shown?.el || tip.el === pending?.el)
+        return;
+      cancel();
+      let handoff = shown !== null || clock.now() - hiddenAt < 400;
+      if (handoff || options.now) {
+        shown = tip, view.show(tip, handoff);
+        return;
+      }
+      pending = tip, timer = clock.set(() => {
+        if (pending = null, !view.connected(tip))
+          return;
+        shown = tip, view.show(tip, !1);
+      }, options.delay ?? 500);
+    },
+    hide,
+    leave(within) {
+      if (pending && within(pending))
+        cancel();
+      if (shown && within(shown))
+        hide();
+    }
+  };
+}
+
 // src/ui/tooltip.ts
-var tips = /* @__PURE__ */ new WeakMap, HANDOFF_MS = 400, controllers = /* @__PURE__ */ new WeakMap;
+var tips = /* @__PURE__ */ new WeakMap, controllers = /* @__PURE__ */ new WeakMap;
 function tipOf(start) {
   let node = start instanceof Element ? start : null;
   while (node) {
@@ -11426,7 +11498,7 @@ function controllerOf(doc) {
   let existing = controllers.get(doc);
   if (existing)
     return existing;
-  let win = doc.defaultView, layer, motion, text, keys, target = null, pending = null, timer = 0, hiddenAt = -1 / 0, quiet = null, keyboard = !1, build = (look) => {
+  let win = doc.defaultView, layer, motion, text, keys, target = null, quiet = null, keyboard = !1, build = (look) => {
     layer = layerElement(doc, "knobs-layer knobs-tooltip", look), layer.id = `knobs-tooltip-${Math.random().toString(36).slice(2, 8)}`, layer.setAttribute("role", "tooltip"), text = doc.createElement("span"), text.className = "knobs-tooltip-text", keys = doc.createElement("span"), keys.className = "knobs-tooltip-keys", layer.append(text, keys), motion = presence(layer, { scale: 0.96, blur: 3, duration: 0.24 });
   }, show = (el, tip, instant) => {
     if (!layer?.isConnected)
@@ -11448,30 +11520,28 @@ function controllerOf(doc) {
       motion.snap(1);
     else
       motion.show();
-  }, hide = (now = !1) => {
-    if (win.clearTimeout(timer), pending = null, !target)
-      return;
-    if (target.removeAttribute("aria-describedby"), target = null, hiddenAt = performance.now(), now)
-      motion?.snap(0);
-    else
-      motion?.hide();
-  }, want = (found) => {
+  }, schedule = tipSchedule({
+    set: (run, ms) => win.setTimeout(run, ms),
+    clear: (handle) => win.clearTimeout(handle),
+    now: () => performance.now()
+  }, {
+    show: ({ el, tip }, snap) => show(el, tip, snap),
+    hide: (now) => {
+      if (target?.removeAttribute("aria-describedby"), target = null, now)
+        motion?.snap(0);
+      else
+        motion?.hide();
+    },
+    connected: ({ el }) => el.isConnected
+  }), hide = (now = !1) => schedule.hide(now), want = (found, now = !1) => {
     if (!found)
       return hide();
-    if (found.el === target || found.el === pending?.el)
-      return;
     if (found.el === quiet)
       return;
-    if (win.clearTimeout(timer), target !== null || performance.now() - hiddenAt < HANDOFF_MS) {
-      pending = null, show(found.el, found.tip, !0);
-      return;
-    }
-    if (target)
-      hide();
-    pending = found, timer = win.setTimeout(() => {
-      if (pending = null, found.el.isConnected)
-        show(found.el, found.tip, !1);
-    }, found.tip.opts.delay ?? 500);
+    schedule.want(found, {
+      now,
+      ...found.tip.opts.delay !== void 0 ? { delay: found.tip.opts.delay } : {}
+    });
   };
   doc.addEventListener("pointerover", (e) => {
     if (e.pointerType === "touch")
@@ -11498,10 +11568,9 @@ function controllerOf(doc) {
   }, !0), doc.addEventListener("focusin", (e) => {
     let found = tipOf(e.target);
     if (found && keyboard && e.target.matches(":focus-visible"))
-      want(found);
+      want(found, !0);
   }), doc.addEventListener("focusout", (e) => {
-    if (target && target.contains(e.target))
-      hide();
+    schedule.leave(({ el }) => el.contains(e.target));
   }), doc.addEventListener("scroll", () => target && hide(!0), !0);
   let c = { hide };
   return controllers.set(doc, c), c;
@@ -12432,6 +12501,13 @@ function toolbarRow(c, press, keyOf = toolbarShortcut2) {
   };
 }
 
+// src/panel/description-ids.ts
+var panels = 0;
+function descriptionIds(storeId) {
+  let prefix = `knobs-desc-${++panels}-${storeId.replace(/[^\w-]/g, "-")}`, n = 0;
+  return () => `${prefix}-${++n}`;
+}
+
 // src/panel/search.ts
 function createSearch(doc, options) {
   let element = doc.createElement("div");
@@ -14439,6 +14515,79 @@ function createLens(o) {
   };
 }
 
+// src/panel/active.ts
+var same2 = (a, b) => a === b || a !== null && b !== null && a.group === b.group && a.key === b.key;
+function activeReporter(resolve, report, schedule) {
+  let hover = null, focus = null, lead = "pointer", last = null, cancel, flush = () => {
+    cancel = void 0;
+    let [first, second] = lead === "pointer" ? [hover, focus] : [focus, hover], at = resolve(first) ?? resolve(second);
+    if (same2(at, last))
+      return;
+    last = at, report(at);
+  }, touch = () => {
+    cancel ??= schedule(flush);
+  };
+  return {
+    pointer(target) {
+      if (hover = target, target !== null)
+        lead = "pointer";
+      touch();
+    },
+    focus(target) {
+      if (focus = target, target !== null)
+        lead = "focus";
+      touch();
+    },
+    dispose() {
+      if (cancel?.(), cancel = void 0, hover = focus = null, last !== null)
+        report(last = null);
+    }
+  };
+}
+function activeEvents(reporter, where) {
+  let inMenu = !1;
+  return {
+    over(e) {
+      reporter.pointer(e.target);
+    },
+    move(e) {
+      if (e.movementX || e.movementY)
+        reporter.pointer(e.target);
+    },
+    out(e) {
+      if (where(e.relatedTarget) !== "inside")
+        reporter.pointer(null);
+    },
+    focusIn(e) {
+      let at = where(e.target);
+      if (inMenu = at === "menu", at === "inside")
+        reporter.focus(e.target);
+      else if (at === "outside")
+        reporter.focus(null);
+    },
+    focusOut(e) {
+      if (e.relatedTarget !== null)
+        return;
+      let at = where(e.target);
+      if (at === "inside" || at === "menu" && inMenu)
+        inMenu = !1, reporter.focus(null);
+    }
+  };
+}
+function watchActive(root, resolve, report) {
+  let doc = root.ownerDocument, win = doc.defaultView, reporter = activeReporter(resolve, report, (flush) => {
+    let id = win.requestAnimationFrame(flush);
+    return () => win.cancelAnimationFrame(id);
+  }), events = activeEvents(reporter, (node) => node instanceof Node && root.contains(node) ? "inside" : node instanceof Element && node.closest(".knobs-menu") ? "menu" : "outside"), el = (node) => node, over = (e) => events.over({ target: el(e.target) }), move = (e) => events.move({ target: el(e.target), movementX: e.movementX, movementY: e.movementY }), out = (e) => events.out({ relatedTarget: el(e.relatedTarget) }), focusIn = (e) => events.focusIn({ target: el(e.target) }), focusOut = (e) => events.focusOut({ target: el(e.target), relatedTarget: el(e.relatedTarget) });
+  if (root.addEventListener("pointerover", over), root.addEventListener("pointermove", move), root.addEventListener("pointerout", out), doc.addEventListener("focusin", focusIn), doc.addEventListener("focusout", focusOut), doc.activeElement && root.contains(doc.activeElement))
+    reporter.focus(doc.activeElement);
+  return {
+    dispose() {
+      root.removeEventListener("pointerover", over), root.removeEventListener("pointermove", move), root.removeEventListener("pointerout", out), doc.removeEventListener("focusin", focusIn), doc.removeEventListener("focusout", focusOut), reporter.dispose();
+    }
+  };
+}
+
 // src/panel/has.ts
 function trackHas(root) {
   let doc = root.ownerDocument, win = doc.defaultView, marked = { fv: [], active: [] }, mark = (list, name, nodes, value = "") => {
@@ -14589,7 +14738,7 @@ function morphFromChip(chip, root, wake, restored) {
   }, ensureShape = () => {
     if (shape)
       return shape;
-    let cs = getComputedStyle(root), r = parseFloat(cs.getPropertyValue("--kv-radius-panel"));
+    let cs = getComputedStyle(root), r = parseFloat(cs.getPropertyValue("--kv-radius-frame"));
     if (Number.isFinite(r))
       panelRadius = r;
     shape = doc.createElement("div"), shape.className = "knobs-root knobs-morph", shape.setAttribute("aria-hidden", "true");
@@ -14719,6 +14868,7 @@ function foldMemory(id, storage) {
       let next = {
         sections: { ...data.sections },
         groups: { ...data.groups },
+        ...data.subsections ? { subsections: { ...data.subsections } } : {},
         [kind]: { ...data[kind], [at]: folded }
       };
       try {
@@ -14729,14 +14879,27 @@ function foldMemory(id, storage) {
 }
 
 // src/panel/position.ts
-function positionPanel(panel, header, anchor, id, storage) {
-  let doc = panel.ownerDocument, win = doc.defaultView, bounds = anchor.getBoundingClientRect(), w = panel.offsetWidth || 288, clampX = (v) => Math.max(8, Math.min(v, win.innerWidth - w - 8)), x = bounds.right + w <= win.innerWidth - 8 ? bounds.right + 8 : clampX(bounds.left - w - 8), y = Math.max(8, bounds.top), key = storageKey(id, "position"), hasSaved = !1;
+function savedPosition(left, top, width, view) {
+  let right = left + width / 2 > view / 2;
+  return right ? { x: view - left - width, y: top, right } : { x: left, y: top };
+}
+var leftOf = (saved, width, view) => saved.right ? view - width - saved.x : saved.x;
+function readPosition(raw) {
   try {
-    let saved = JSON.parse(storage()?.getItem(key) ?? "null");
+    let saved = JSON.parse(raw ?? "null");
     if (saved && Number.isFinite(saved.x) && Number.isFinite(saved.y))
-      x = saved.x, y = saved.y, hasSaved = !0;
+      return { x: saved.x, y: saved.y, ...saved.right === !0 ? { right: !0 } : {} };
   } catch {}
-  if (!hasSaved) {
+  return;
+}
+function positionPanel(panel, header, anchor, id, storage) {
+  let doc = panel.ownerDocument, win = doc.defaultView, bounds = anchor.getBoundingClientRect(), w = panel.offsetWidth || 288, clampX = (v) => Math.max(8, Math.min(v, win.innerWidth - w - 8)), x = bounds.right + w <= win.innerWidth - 8 ? bounds.right + 8 : clampX(bounds.left - w - 8), y = Math.max(8, bounds.top), key = storageKey(id, "position"), saved;
+  try {
+    saved = readPosition(storage()?.getItem(key));
+  } catch {}
+  if (saved)
+    x = leftOf(saved, w, win.innerWidth), y = saved.y;
+  else {
     let others = [...doc.querySelectorAll(".knobs-panel:not(.knobs-inline)")].filter((el) => el !== panel).map((el) => el.getBoundingClientRect());
     if (others.length > 0) {
       let overlaps = (cx, cy) => others.some((r) => Math.abs(cx - r.left) < w - 24 && Math.abs(cy - r.top) < 120);
@@ -14756,6 +14919,8 @@ function positionPanel(panel, header, anchor, id, storage) {
     }
   }
   let shown = { x, y }, constrain = () => {
+    if (saved && !drag)
+      x = leftOf(saved, panel.offsetWidth, win.innerWidth);
     shown = {
       x: Math.max(8, Math.min(x, win.innerWidth - panel.offsetWidth - 8)),
       y: Math.max(8, Math.min(y, win.innerHeight - panel.offsetHeight - 8))
@@ -14764,17 +14929,27 @@ function positionPanel(panel, header, anchor, id, storage) {
   header.onpointerdown = (event) => {
     if (event.button !== 0 || event.target.closest("button,select,input"))
       return;
-    event.preventDefault(), drag = { id: event.pointerId, x: event.clientX, y: event.clientY, left: shown.x, top: shown.y }, header.setPointerCapture(event.pointerId);
+    event.preventDefault(), drag = { id: event.pointerId, x: event.clientX, y: event.clientY, left: shown.x, top: shown.y };
   }, header.onpointermove = (event) => {
     if (!drag || event.pointerId !== drag.id)
       return;
+    if (!("dragging" in panel.dataset)) {
+      if (!(event.buttons & 1))
+        return void (drag = void 0);
+      if (Math.hypot(event.clientX - drag.x, event.clientY - drag.y) <= 2)
+        return;
+      panel.dataset.dragging = "", header.setPointerCapture(event.pointerId);
+    }
     x = drag.left + event.clientX - drag.x, y = drag.top + event.clientY - drag.y, constrain();
+  }, header.onpointerup = header.onpointercancel = () => {
+    if (drag && !("dragging" in panel.dataset))
+      drag = void 0;
   }, header.onlostpointercapture = () => {
     if (!drag)
       return;
-    drag = void 0, { x, y } = shown;
+    drag = void 0, delete panel.dataset.dragging, { x, y } = shown, saved = savedPosition(x, y, panel.offsetWidth, win.innerWidth);
     try {
-      storage()?.setItem(key, JSON.stringify({ x, y }));
+      storage()?.setItem(key, JSON.stringify(saved));
     } catch {}
   };
   let observer = new ResizeObserver(constrain);
@@ -14888,7 +15063,7 @@ function createPresence(root, options) {
       if (!root.dataset.presence || root.hidden)
         return;
       let look = presenceLook(spring.x, inline, reduced), r = root.getBoundingClientRect();
-      radius ??= parseFloat(win.getComputedStyle(root).getPropertyValue("--kv-radius-panel")) || 12;
+      radius ??= parseFloat(win.getComputedStyle(root).getPropertyValue("--kv-radius-frame")) || 12;
       let s = look.scale, ox = r.left + r.width / 2, oy = inline ? r.top : r.top + r.height / 2;
       return {
         x: ox + (r.left - ox) * s,
@@ -14915,6 +15090,19 @@ function createPresence(root, options) {
   };
 }
 
+// src/panel/summary.ts
+function panelFoldSummary(rows, preset) {
+  if (rows.length === 1 && rows[0].value)
+    return rows[0].value;
+  let lead = preset ?? rows.find((r) => r.changed && r.value)?.value ?? rows.find((r) => r.choice && r.value)?.value, changed = rows.filter((r) => r.changed).length;
+  return [lead, changed ? `${changed} changed` : ""].filter(Boolean).join(" · ");
+}
+var baseSignature = (controls) => JSON.stringify([
+  controls.activePreset(),
+  Object.keys(controls.scopes).map((s) => controls.activePreset(s)),
+  Object.keys(controls.groupPresets).map((g) => controls.activeGroupPreset(g))
+]);
+
 // src/panel/panel.ts
 var layer = 2147480001, COPIED_MS = 1000, lastTab = /* @__PURE__ */ new Map, REVEAL_QUIET_MS = 2000, NUDGE_BURST_MS = 300;
 function readableTitle(id) {
@@ -15339,16 +15527,19 @@ function buildPanel(controls, host, options) {
       foldTile(card, next && !filterEl.value.trim(), animate);
     else
       applyVisibility(animate ? "reveal" : "instant");
+    let marked = page ? card.parentElement : head;
+    if (marked) {
+      if (marked.toggleAttribute("data-folded", next), animate)
+        marked.setAttribute("data-fold-motion", ""), clearTimeout(foldMotions.get(marked)), foldMotions.set(marked, setTimeout(() => marked.removeAttribute("data-fold-motion"), 400));
+    }
     if (page) {
-      let tile = card.parentElement;
-      if (tile.toggleAttribute("data-folded", next), animate)
-        tile.setAttribute("data-fold-motion", ""), clearTimeout(foldMotions.get(tile)), foldMotions.set(tile, setTimeout(() => tile.removeAttribute("data-fold-motion"), 400));
       if (remember)
         foldsKept?.set("groups", group, next);
-      refreshFolds();
-    } else if (sessionKept)
-      writeSession(controls.id, { groups: { ...readSession(controls.id).groups, [group]: next } });
-    positioned?.constrain(), wakeGpu();
+    } else if (sessionKept) {
+      if (writeSession(controls.id, { groups: { ...readSession(controls.id).groups, [group]: next } }), remember)
+        panelFolds?.set("groups", group, next);
+    }
+    refreshFolds(), positioned?.constrain(), wakeGpu();
   }
   function foldTile(card, shut, animate) {
     if ((!card.hidden && card.dataset.leaving !== "true") !== shut)
@@ -15375,9 +15566,7 @@ function buildPanel(controls, host, options) {
     });
     gReset.className = "knobs-group-reset", gReset.dataset.hint = `${title} reset`, bloom(gReset, !1), groupResetButtons.set(groupName, gReset);
     let gDie = createHeaderDie(doc, () => wakeGpu(), GROUP_DIE), gRandom = iconButton("random", `Randomize ${title}`, "g Alt+g", () => {});
-    gRandom.className = "knobs-group-die", gRandom.dataset.hint = `${title} random`, gRandom.querySelector(".knobs-icon")?.replaceWith(gDie.node), gRandom.onclick = (event) => run(() => rerollGroup(groupName, event.altKey));
-    let rollable = Object.values(controls.schema).some((f) => f.group === groupName && hasValue2(f));
-    if (!bound("random") && !bound("mutate") || !rollable)
+    if (gRandom.className = "knobs-group-die", gRandom.dataset.hint = `${title} random`, gRandom.querySelector(".knobs-icon")?.replaceWith(gDie.node), gRandom.onclick = (event) => run(() => rerollGroup(groupName, event.altKey)), !bound("random") && !bound("mutate"))
       gRandom.hidden = !0;
     groupDice.set(groupName, { button: gRandom, die: gDie });
     let presets = page ? (controls.groupPresets[groupName] ?? []).slice(0, 9) : [], ui, gPeek = el("span");
@@ -15444,11 +15633,13 @@ function buildPanel(controls, host, options) {
       desc.className = "knobs-group-desc", groupDescs.set(groupName, desc), describeGroup(groupName);
     }
     if (foldAt !== void 0) {
-      if (page)
-        summary = el("span"), summary.className = "knobs-group-summary", gRight.append(summary), groupSummaries.set(groupName, summary);
-      caret = caretSvg(), gRight.append(caret), gHead.dataset.foldable = "", gHead.tabIndex = -1, gHead.setAttribute("role", "button"), gHead.setAttribute("aria-label", title);
-      let folded = (page ? foldsKept?.get("groups", groupName) : session.groups?.[groupName]) ?? foldAt;
-      folds.set(groupName, folded), gHead.setAttribute("aria-expanded", String(!folded)), gHead.addEventListener("click", (event) => {
+      if (summary = el("span"), summary.className = "knobs-group-summary", page)
+        gRight.append(summary);
+      groupSummaries.set(groupName, summary), caret = caretSvg(), gRight.append(caret), gHead.dataset.foldable = "", gHead.tabIndex = -1, gHead.setAttribute("role", "button"), gHead.setAttribute("aria-label", title);
+      let folded = (page ? foldsKept?.get("groups", groupName) : session.groups?.[groupName] ?? panelFolds?.get("groups", groupName)) ?? foldAt;
+      if (folds.set(groupName, folded), gHead.setAttribute("aria-expanded", String(!folded)), !page)
+        gHead.toggleAttribute("data-folded", folded);
+      gHead.addEventListener("click", (event) => {
         if (event.detail > 1 || event.target.closest("button"))
           return;
         byUser(() => fold(groupName));
@@ -15457,8 +15648,10 @@ function buildPanel(controls, host, options) {
     if (page) {
       let gTitle = el("span");
       gTitle.className = "knobs-group-title", gTitle.append(gLabel, gPeek), gHead.append(gTitle, gRight);
-    } else
-      gHead.append(gLabel, gRight);
+    } else {
+      let desc = el("span");
+      desc.className = "knobs-group-desc", groupDescs.set(groupName, desc), describeGroup(groupName), gHead.append(gLabel, desc, ...summary ? [summary] : [], gRight);
+    }
     return gpuGroups.push({
       element: gHead,
       labelEl: gLabel,
@@ -15499,7 +15692,7 @@ function buildPanel(controls, host, options) {
     if (!preset)
       return;
     cue(root, coalesce ? "select" : "preset"), controls.groupPreset(group, index, { coalesce }), peek(group, preset.name, 1100);
-  }, remember = options.session ?? controls.storage !== null, sessionKept = remember, session = remember ? readSession(controls.id) : {}, foldPort = page?.foldStorage !== void 0 ? page.foldStorage : controls.persist === "none" ? null : controls.storage, foldsKept = page && foldPort ? foldMemory(controls.id, () => foldPort) : null, tracks = /* @__PURE__ */ new Map, toolbars = /* @__PURE__ */ new Map, keyedActions = /* @__PURE__ */ new Map, actionKey = (key, field) => {
+  }, remember = options.session ?? controls.storage !== null, sessionKept = remember, session = remember ? readSession(controls.id) : {}, foldPort = page?.foldStorage !== void 0 ? page.foldStorage : controls.persist === "none" ? null : controls.storage, foldsKept = page && foldPort ? foldMemory(controls.id, () => foldPort) : null, panelFolds = !page && remember && foldPort ? foldMemory(controls.id, () => foldPort) : null, tracks = /* @__PURE__ */ new Map, toolbars = /* @__PURE__ */ new Map, keyedActions = /* @__PURE__ */ new Map, actionKey = (key, field) => {
     let combo = controls.shortcut(key);
     return combo ? { key: combo, scope: actionShortcut2(field)?.scope ?? "panel" } : void 0;
   }, readouts = /* @__PURE__ */ new Map, readoutPort = controls[READOUT], planRows = (schema) => {
@@ -15528,7 +15721,8 @@ function buildPanel(controls, host, options) {
             label,
             ...duration.group !== void 0 ? { group: duration.group } : {},
             ...duration.section !== void 0 ? { section: duration.section } : {},
-            ...duration.shortcut !== void 0 ? { shortcut: duration.shortcut } : {}
+            ...duration.shortcut !== void 0 ? { shortcut: duration.shortcut } : {},
+            ...duration.description !== void 0 ? { description: duration.description } : {}
           },
           parts: { duration, bounce },
           group: duration.group,
@@ -15958,7 +16152,33 @@ function buildPanel(controls, host, options) {
       return;
     slot.replaceChildren(...node ? [node] : []);
   }
-  let fieldFlag = (field, name) => {
+  let descriptions = el("div");
+  descriptions.hidden = !0, root.append(descriptions);
+  let described = /* @__PURE__ */ new Map, descriptionId = descriptionIds(controls.id);
+  function describe(row) {
+    let text = row.field.description?.trim() ?? "", had = described.get(row);
+    if ((had?.text ?? "") === text)
+      return;
+    let inputs = row.choice ? [row.choice.seg, row.choice.menu] : [row.input];
+    if (had) {
+      had.untip(), had.node.remove(), described.delete(row);
+      for (let input of inputs)
+        input.removeAttribute("aria-describedby");
+    }
+    if (!text)
+      return;
+    let node = el("span", text);
+    node.id = descriptionId(), descriptions.append(node);
+    for (let input of inputs)
+      input.setAttribute("aria-describedby", node.id);
+    described.set(row, { text, node, untip: tooltip(row.row, text) });
+  }
+  let undescribe = (row) => {
+    let had = described.get(row);
+    if (!had)
+      return;
+    had.untip(), had.node.remove(), described.delete(row);
+  }, fieldFlag = (field, name) => {
     let v = field[name];
     return typeof v === "function" ? Boolean(v(controls.get())) : Boolean(v);
   };
@@ -15989,7 +16209,7 @@ function buildPanel(controls, host, options) {
         announceSections();
     }, delay), wakeGpu();
   }, dropGpu = (row) => {
-    row.dispose?.(), row.slider?.dispose(), row.editor?.dispose();
+    undescribe(row), row.dispose?.(), row.slider?.dispose(), row.editor?.dispose();
     for (let g of row.gpu) {
       let at = gpuRows.indexOf(g);
       if (at >= 0)
@@ -16030,11 +16250,11 @@ function buildPanel(controls, host, options) {
     for (let spec of specs) {
       let existing = kept.get(spec.id);
       if (existing && existing.shape === shapeOf(spec)) {
-        kept.delete(spec.id), existing.retune(spec), next.push(existing);
+        kept.delete(spec.id), existing.retune(spec), describe(existing), next.push(existing);
         continue;
       }
       let row = buildRow(spec);
-      decorate(row), gpuRows.push(...row.gpu), entering.add(row), next.push(row);
+      decorate(row), describe(row), gpuRows.push(...row.gpu), entering.add(row), next.push(row);
     }
     let leaving = [...kept.values()];
     rows = next;
@@ -16116,6 +16336,8 @@ function buildPanel(controls, host, options) {
               motion.push({ node: r.row, show: !0 });
         }
       }
+      for (let group of groupDescs.keys())
+        describeGroup(group);
       for (let [id, sh] of subheads)
         if (!usedSubheads.has(id)) {
           sh.el.remove();
@@ -16166,9 +16388,7 @@ function buildPanel(controls, host, options) {
       let stagger = cascade(motion.length);
       motion.forEach((m, i) => present(m.node, m.show, i * stagger, m.after));
     }
-    if (applyVisibility(animate ? "reveal" : "instant"), page)
-      refreshFolds();
-    if (focused && root.contains(focused) && doc.activeElement !== focused && focused.isConnected)
+    if (applyVisibility(animate ? "reveal" : "instant"), refreshFolds(), focused && root.contains(focused) && doc.activeElement !== focused && focused.isConnected)
       focused.focus({ preventScroll: !0 });
     let gone = focused ? leaving.find((r) => r.row.contains(focused)) : void 0;
     if (gone) {
@@ -16193,7 +16413,7 @@ function buildPanel(controls, host, options) {
     label.className = "knobs-subhead-label";
     let caret = caretSvg();
     if (node.append(label, caret), !subFolds.has(id))
-      subFolds.set(id, session.subsections?.[id] ?? options.subsectionFolded?.[name] ?? !1);
+      subFolds.set(id, session.subsections?.[id] ?? panelFolds?.get("subsections", id) ?? options.subsectionFolded?.[name] ?? !1);
     node.setAttribute("aria-expanded", String(!subFolds.get(id))), node.addEventListener("click", (event) => {
       if (event.detail < 2)
         foldSub(id);
@@ -16224,7 +16444,7 @@ function buildPanel(controls, host, options) {
     if (applyVisibility("reveal"), remember)
       writeSession(controls.id, {
         subsections: { ...readSession(controls.id).subsections, [id]: next }
-      });
+      }), panelFolds?.set("subsections", id, next);
   }
   let groupTab = (group) => {
     for (let f of Object.values(controls.schema))
@@ -16293,7 +16513,7 @@ function buildPanel(controls, host, options) {
     return selectTab(list[(at + direction + list.length) % list.length].id, !1), !0;
   }, searching = () => search?.filtering() ?? !1, rowMatches = (r) => {
     let query = search.query();
-    if (query && !matchesFilter(query, r.display, r.key, r.group, r.group && groupTitle(r.group), r.field.subsection))
+    if (query && !matchesFilter(query, r.display, r.key, r.group, r.group && groupTitle(r.group), r.group && groupDescription(r.group), r.field.subsection, r.field.description))
       return !1;
     for (let chip of search.active())
       if (!r.keys.some((k) => chipTests.get(chip)?.(k)))
@@ -16392,7 +16612,10 @@ function buildPanel(controls, host, options) {
         lock.dataset.enter = "", lock.getBoundingClientRect();
     }
     return lock;
-  }, keysOf = (indices) => indices.flatMap((i) => rows[i]?.keys ?? []), groupKeys = (group) => rows.filter((r) => r.group === group).flatMap((r) => r.keys), rerollGroup = (group, nudge) => {
+  }, keysOf = (indices) => indices.flatMap((i) => rows[i]?.keys ?? []), groupKeys = (group) => rows.filter((r) => r.group === group).flatMap((r) => r.keys), mayRoll = (key) => {
+    let field = controls.schema[key];
+    return Boolean(field && hasValue2(field) && field.random !== !1);
+  }, rerollGroup = (group, nudge) => {
     let roller = groupDice.get(group)?.die;
     if (!roller)
       return;
@@ -16498,15 +16721,22 @@ function buildPanel(controls, host, options) {
   });
   apply.className = "knobs-apply-btn", apply.setAttribute("aria-label", "Import JSON"), apply.hidden = !0;
   let copy = async (value, inPlace = !0) => {
-    try {
-      if (await doc.defaultView.navigator.clipboard.writeText(value), inPlace && !copyButton.hidden && headerShown())
+    let done = () => {
+      if (inPlace && !copyButton.hidden && headerShown())
         copied();
       else
         say("Copied.");
+    };
+    try {
+      await doc.defaultView.navigator.clipboard.writeText(value), done();
     } catch {
-      if (text.value = value, page)
-        togglePopover(!0);
-      reveal(text, !0), apply.hidden = !0, positioned?.constrain(), text.focus(), text.select(), say("Clipboard unavailable. Copy the selected text.", 6000);
+      if (copyByCommand(doc, value))
+        done();
+      else {
+        if (text.value = value, page)
+          togglePopover(!0);
+        reveal(text, !0), apply.hidden = !0, positioned?.constrain(), text.focus(), text.select(), say("Clipboard unavailable. Copy the selected text.", 6000);
+      }
     }
     wakeGpu();
   }, gpuActionButtons = [], panelActions = allActions.filter((a) => !a.group), customActions = el("div");
@@ -16585,11 +16815,7 @@ function buildPanel(controls, host, options) {
     if (changed)
       wakeGpu();
   }
-  let shownBase = "", baseSignature = () => JSON.stringify([
-    controls.activePreset(),
-    Object.keys(controls.scopes).map((s) => controls.activePreset(s)),
-    Object.keys(controls.groupPresets).map((g) => controls.activeGroupPreset(g))
-  ]);
+  let shownBase = "";
   function update() {
     if (!controls.enabled) {
       close?.();
@@ -16608,7 +16834,7 @@ function buildPanel(controls, host, options) {
         if (!fresh(r) && changed(r))
           changedCount++;
     }
-    let stagger = initialized ? cascade(changedCount) : 0, moving = initialized ? rows.filter(changed) : rows;
+    let stagger = initialized ? cascade(changedCount) : 0, moving = initialized ? rows.filter(changed) : rows, rebasing = baseSignature(controls) !== shownBase;
     if (updateStrips(), batchMeasures(() => {
       for (let row of moving)
         if (row.slider?.prime(), row.editor?.prime?.(), row.choice)
@@ -16616,7 +16842,7 @@ function buildPanel(controls, host, options) {
       for (let chips of groupChips.values())
         primeSegPill(chips.seg, chips.buttons);
       showValues(values, moving, stagger, landing);
-    }), moving.length || !initialized)
+    }), moving.length || !initialized || rebasing)
       refreshFolds();
     shown = values, initialized = !0, wakeGpu();
   }
@@ -16636,7 +16862,7 @@ function buildPanel(controls, host, options) {
     }
   }
   function showValues(values, moving, stagger, landing) {
-    let baseline = controls.baseValues(), fresh = (r) => r.row.dataset.shown === void 0, now = performance.now(), turn = 0, based = baseSignature(), rebased = based !== shownBase;
+    let baseline = controls.baseValues(), fresh = (r) => r.row.dataset.shown === void 0, now = performance.now(), turn = 0, based = baseSignature(controls), rebased = based !== shownBase;
     shownBase = based;
     for (let row of moving) {
       let instant = !initialized || landing || fresh(row);
@@ -16690,10 +16916,16 @@ function buildPanel(controls, host, options) {
     }
     if (randomButton.disabled !== (unlocked === 0))
       randomButton.disabled = unlocked === 0;
+    let headerHidden = !((bound("random") || bound("mutate")) && shows("random")) || !rows.some((r) => r.keys.some(mayRoll));
+    if (randomButton.hidden !== headerHidden)
+      randomButton.hidden = headerHidden;
     for (let [group, { button }] of groupDice) {
       let off = !options.groupRandom && !groupKeys(group).some((k) => controls.canRoll(k));
       if (button.disabled !== off)
         button.disabled = off;
+      let hidden = !bound("random") && !bound("mutate") || !options.groupRandom && !groupKeys(group).some(mayRoll);
+      if (button.hidden !== hidden)
+        button.hidden = hidden;
     }
     if (root.hasAttribute("data-comparing") !== controls.comparing)
       root.toggleAttribute("data-comparing", controls.comparing);
@@ -16846,7 +17078,7 @@ function buildPanel(controls, host, options) {
     filtered = query, root.toggleAttribute("data-filtering", Boolean(query)), layout.change(() => {
       layout.openFolds(Boolean(query));
       for (let r of rows) {
-        let show = !query || matchesFilter(query, r.display, r.key, r.group, r.group && groupTitle(r.group, r.section), r.group && groupDescription(r.group), r.section, r.section && sectionTitle(r.section), r.section && sectionDescription(r.section));
+        let show = !query || matchesFilter(query, r.display, r.key, r.group, r.group && groupTitle(r.group, r.section), r.group && groupDescription(r.group), r.section, r.section && sectionTitle(r.section), r.section && sectionDescription(r.section), r.field.description);
         if (r.row.hidden === show)
           r.row.hidden = !show;
       }
@@ -16889,16 +17121,45 @@ function buildPanel(controls, host, options) {
     preset: null,
     changed: changedRows((r) => r.section === section),
     keys: rows.filter((r) => r.section === section).flatMap((r) => r.keys)
-  }), changedText = (n) => n && marks ? `${n} changed` : "";
+  }), changedText = (n) => n && marks ? `${n} changed` : "", valueText = (r, values) => {
+    let f = r.field, v = r.value(values), num = (n) => String(Number(n.toFixed(2)));
+    switch (f.kind) {
+      case "choice":
+        return f.labels?.[v] ?? String(v);
+      case "toggle":
+        return v ? "On" : "Off";
+      case "knob":
+        return `${v.toFixed(f.decimals ?? decimals(f.step))}${f.unit ? ` ${f.unit}` : ""}`;
+      case "spring": {
+        let { duration, bounce } = v;
+        return `${num(duration)} s${bounce ? `, bounce ${num(bounce)}` : ""}`;
+      }
+      case "color":
+        return colorHex2(v);
+      case "text":
+        return String(v);
+      default:
+        return "";
+    }
+  }, groupSummary = (group) => {
+    let info = groupInfo(group);
+    if (options.groupSummary)
+      return options.groupSummary(group, info);
+    if (page)
+      return [info.preset, changedText(info.changed)].filter(Boolean).join(" · ") || null;
+    let values = controls.get(), own = rows.filter((r) => r.group === group && !r.leaving && r.keys.length);
+    return panelFoldSummary(own.map((r) => ({
+      value: valueText(r, values),
+      changed: marks && r.keys.some((k) => controls.isModified(k)),
+      choice: r.field.kind === "choice"
+    })), info.preset) || null;
+  };
   function refreshFolds() {
+    for (let [group, node] of groupSummaries)
+      if (folds.get(group))
+        putSummary(node, groupSummary(group));
     if (!layout || !page)
       return;
-    for (let [group, node] of groupSummaries) {
-      if (!folds.get(group))
-        continue;
-      let info = groupInfo(group);
-      putSummary(node, page.groupSummary ? page.groupSummary(group, info) : [info.preset, changedText(info.changed)].filter(Boolean).join(" · ") || null);
-    }
     for (let s of layout.sectionList()) {
       let node = s.label?.querySelector(":scope > .knobs-section-summary");
       if (!node || !s.folded)
@@ -17294,8 +17555,19 @@ function buildPanel(controls, host, options) {
     setTimeout(() => {
       pointerHeld = !1, queueScope();
     });
+  }, onPressOutside = (event) => {
+    let target = event.target;
+    if (page || !target || root.contains(target))
+      return;
+    if (target.closest?.(".knobs-root,.knobs-layers"))
+      return;
+    setTimeout(() => {
+      let active = doc.activeElement;
+      if (active && root.contains(active))
+        active.blur();
+    });
   };
-  doc.addEventListener("pointerdown", onPress, !0), doc.addEventListener("pointerup", onRelease, !0), doc.addEventListener("pointercancel", onRelease, !0), root.addEventListener("keydown", () => {
+  doc.addEventListener("pointerdown", onPress, !0), doc.addEventListener("pointerdown", onPressOutside, !0), doc.addEventListener("pointerup", onRelease, !0), doc.addEventListener("pointercancel", onRelease, !0), root.addEventListener("keydown", () => {
     pointerOut = !1;
   }, !0);
   let syncScope = () => {
@@ -18050,7 +18322,15 @@ function buildPanel(controls, host, options) {
     attributes: !0,
     attributeFilter: ["data-knobs-renderer", "data-theme", "data-appearance", "class", "style"]
   });
-  let panel = {
+  let onActive = options.onActive, active = onActive ? watchActive(root, (node) => {
+    if (!node || !root.contains(node))
+      return null;
+    let r = rows.find((r) => !r.leaving && r.row.contains(node));
+    if (r)
+      return r.group === void 0 ? null : { group: r.group, key: r.key };
+    let card = node.closest("[data-group]");
+    return card && root.contains(card) ? { group: card.dataset.group } : null;
+  }, onActive) : void 0, panel = {
     element: root,
     presetStrip,
     focus() {
@@ -18113,7 +18393,7 @@ function buildPanel(controls, host, options) {
         doc.removeEventListener(type, onPointerUp, !0);
       for (let type of ["pointerup", "pointercancel"])
         doc.removeEventListener(type, endScrub, !0);
-      doc.defaultView?.removeEventListener("blur", endScrub), endScrub(), unregisterHints?.(), hintCtrl.stop(), modeObserver.disconnect(), unregisterGpu?.(), lens.dispose(), win?.cancelAnimationFrame(lensFrame), doc.removeEventListener("pointerdown", onPress, !0), doc.removeEventListener("pointerup", onRelease, !0), doc.removeEventListener("pointercancel", onRelease, !0), crumbs?.dispose(), clearTimeout(escTimer), win?.removeEventListener("blur", queueScope), win?.removeEventListener("focus", queueScope), unsubscribe(), unlisten?.(), rowsObserver.disconnect(), gpuObserver.disconnect(), doc.defaultView?.cancelAnimationFrame(landTimer);
+      doc.defaultView?.removeEventListener("blur", endScrub), endScrub(), unregisterHints?.(), hintCtrl.stop(), modeObserver.disconnect(), unregisterGpu?.(), lens.dispose(), win?.cancelAnimationFrame(lensFrame), doc.removeEventListener("pointerdown", onPress, !0), doc.removeEventListener("pointerdown", onPressOutside, !0), doc.removeEventListener("pointerup", onRelease, !0), doc.removeEventListener("pointercancel", onRelease, !0), crumbs?.dispose(), active?.dispose(), clearTimeout(escTimer), win?.removeEventListener("blur", queueScope), win?.removeEventListener("focus", queueScope), unsubscribe(), unlisten?.(), rowsObserver.disconnect(), gpuObserver.disconnect(), doc.defaultView?.cancelAnimationFrame(landTimer);
       for (let k of inHand)
         controls.hold(k, !1);
       inHand.clear(), positioned?.dispose(), die.dispose();
@@ -18264,6 +18544,17 @@ function buildPanel(controls, host, options) {
   }
   return pageApi;
 }
+function copyByCommand(doc, value) {
+  let was = doc.activeElement, area = doc.createElement("textarea");
+  area.value = value, area.setAttribute("readonly", ""), area.style.cssText = "position:fixed;top:0;left:0;opacity:0;pointer-events:none", doc.body.append(area), area.select();
+  let ok = !1;
+  try {
+    ok = doc.execCommand("copy");
+  } catch {
+    ok = !1;
+  }
+  return area.remove(), was?.focus({ preventScroll: !0 }), ok;
+}
 function createPanel(controls, anchor, close, options) {
   return buildPanel(controls, anchor.ownerDocument.body, {
     ...options,