@kitlangton/knobs 0.4.0-next.1 → 0.4.0-next.11

package/dist/dev/{chunk-1qzffbpa.js → chunk-bnhzf1tj.js}

@@ -44,7 +44,7 @@ import {
   pushReadout,
   READOUT,
   storageKey
-} from "./chunk-3ygqgy1x.js";
+} from "./chunk-mjdgzad5.js";
 import {
   resolveLook,
   themeOf,
@@ -116,7 +116,7 @@ import {
   createHintController,
   pageHints,
   toggleLayer
-} from "./chunk-8mabjeyk.js";
+} from "./chunk-j57rhjtm.js";
 
 // src/panel/die.ts
 var ROUND = 16 * Math.sqrt(5), DIE = { half: 64 + ROUND, round: ROUND, pip: 12 }, PIPS = {
@@ -994,6 +994,9 @@ function resolveActivePresetEntry(entries, currentValues, lastAppliedId, baseId
     isCustom: !0
   };
 }
+function presetsTouch(entries, keys, defaults) {
+  return entries.some((e) => !(e.kind === "preset" && e.rawId === "default") && keys.some((k) => !same(e.values[k], defaults[k])));
+}
 function nextPresetIndex(count, activeIndex, direction) {
   if (count <= 0)
     return -1;
@@ -1001,7 +1004,7 @@ function nextPresetIndex(count, activeIndex, direction) {
     return direction > 0 ? 0 : count - 1;
   return ((activeIndex + direction) % count + count) % count;
 }
-function createPresetStrip(doc, controls, showVariants, run, onAfterChange, presetLabel = (id) => controls.presetLabel(id)) {
+function createPresetStrip(doc, controls, showVariants, run, onAfterChange, presetLabel = (id) => controls.presetLabel(id), relevant) {
   let wake = () => onAfterChange?.(), el = (tag, cls, text) => {
     let node = doc.createElement(tag);
     if (cls)
@@ -1018,7 +1021,13 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     saveButton.type = "button", saveButton.tabIndex = -1, saveButton.setAttribute("aria-label", "Save as variant"), saveButton.setAttribute("aria-keyshortcuts", "Shift+S"), saveButton.dataset.hint = "Save", saveButton.onclick = () => run(save);
   if (track.append(pill), root.append(track), saveButton)
     root.append(saveButton);
-  let pillEdges = new Edges, pillY = new Spring(0, 28, 0.86), pillAlpha = new Spring(1, 26, 0.9), entries = [], buttons = [], signature = "", lastVariantsRef = null, lastAppliedId = null, activeState = { activeId: "p:default", activeIndex: 0, isCustom: !1 }, prevActiveId = "", prevActiveIndex = -2, prevIsCustom = !1, prevDrifted = !1, initializedPill = !1, slideUntil = 0;
+  let pillEdges = new Edges, pillY = new Spring(0, 28, 0.86), pillAlpha = new Spring(1, 26, 0.9), entries = [], buttons = [], signature = "", lastVariantsRef = null, lastAppliedId = null, activeState = { activeId: "p:default", activeIndex: 0, isCustom: !1 }, prevActiveId = "", prevActiveIndex = -2, prevIsCustom = !1, prevDrifted = !1, initializedPill = !1, slideUntil = 0, unpinned = (values) => {
+    let out;
+    for (let k of Object.keys(values))
+      if (controls.isPinned(k) && !same(values[k], controls.locked[k]))
+        out ??= { ...values }, out[k] = controls.locked[k];
+    return out ?? values;
+  };
   function buildEntries() {
     let presetEntries = Object.entries(controls.presets).map(([id, presetValues]) => ({
       id: `p:${id}`,
@@ -1035,7 +1044,7 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
       kind: "variant",
       rawId: v.id,
       label: v.name ?? v.id.slice(0, 8),
-      values: v.values,
+      values: unpinned(v.values),
       apply: (coalesce) => controls.variants.load(v.id, { coalesce })
     }));
     return [...presetEntries, ...variantEntries];
@@ -1070,7 +1079,12 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     if (pill.style.left = `${left}px`, pill.style.right = `${box.trackWidth - right}px`, pill.style.top = `${top}px`, pill.style.height = `${box.height}px`, pill.style.opacity = activeState.drifted ? String(DRIFTED_PILL) : "1", pill.style.scale = "", first)
       doc.defaultView?.requestAnimationFrame(() => pill.style.transition = "");
   }
-  let resolve = () => resolveActivePresetEntry(entries, controls.get(), lastAppliedId, activeEntryId(controls));
+  let resolve = () => resolveActivePresetEntry(entries, unpinned(controls.get()), lastAppliedId, activeEntryId(controls)), wanted = (list) => (list.length > 1 || showVariants) && (relevant?.(list) ?? !0);
+  function syncShown() {
+    let show = wanted(entries);
+    if (root.hidden === show && root.dataset.presence === void 0)
+      root.hidden = !show;
+  }
   function syncSelection(snap = !1) {
     if (activeState = resolve(), lastAppliedId !== null && activeState.activeId !== lastAppliedId)
       lastAppliedId = null;
@@ -1110,12 +1124,12 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     run(() => {
       let variantsRef = showVariants ? controls.variants.list() : null;
       if (signature !== "" && variantsRef === lastVariantsRef) {
-        syncSelection(!1);
+        syncShown(), syncSelection(!1);
         return;
       }
       lastVariantsRef = variantsRef;
-      let nextEntries = buildEntries(), nextSig = JSON.stringify(nextEntries.map((e) => [e.id, e.label])), shouldShow = nextEntries.length > 1 || showVariants;
-      if (root.hidden = !shouldShow, nextSig !== signature)
+      let nextEntries = buildEntries(), nextSig = JSON.stringify(nextEntries.map((e) => [e.id, e.label]));
+      if (entries = nextEntries, syncShown(), nextSig !== signature)
         signature = nextSig, entries = nextEntries, buttons = entries.map((entry, idx) => {
           let b = el("button", "knobs-preset-chip", entry.label);
           return b.type = "button", b.tabIndex = -1, b.dataset.presetId = entry.id, b.dataset.presetKind = entry.kind, b.dataset.presetName = entry.label, b.setAttribute("role", "radio"), b.setAttribute("aria-label", entry.label), b.onclick = (e) => {
@@ -1286,6 +1300,7 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     getEntries: () => entries,
     getButtons: () => buttons,
     getActiveState: () => activeState,
+    shows: () => wanted(entries),
     cycle,
     selectById,
     save: () => {
@@ -3762,7 +3777,9 @@ class GpuOverlayManager {
     let ro = new ResizeObserver(() => {
       this.wake();
     });
-    ro.observe(panel.root), ro.observe(panel.body), ro.observe(panel.presetStrip.track);
+    if (ro.observe(panel.root), ro.observe(panel.body), panel.pinned)
+      ro.observe(panel.pinned);
+    ro.observe(panel.presetStrip.track);
     let mo = new MutationObserver(() => {
       this.styleVersion++, this.wake();
     });
@@ -5838,8 +5855,9 @@ class GpuOverlayManager {
             ], this.maskCount * MASK_FLOATS), this.curMask = ++this.maskCount;
         }
       }
-      let ps = panel.presetStrip, hinting = panel.root.classList.contains("knobs-hinting");
+      let ps = panel.presetStrip, hinting = panel.root.classList.contains("knobs-hinting"), stripAlpha = this.curAlpha;
       if (!ps.element.hidden) {
+        this.curAlpha = stripAlpha * this.presence(ps.element);
         let psHovered = this.curPanelHovered && ps.element.matches(":hover");
         this.curSubHovered = psHovered;
         let psRect = this.rectOf(ps.element), trackRect = this.rectOf(ps.track);
@@ -5941,6 +5959,7 @@ class GpuOverlayManager {
             align: "center"
           });
         }
+        this.curAlpha = stripAlpha;
       }
       let tabs = panel.tabs;
       if (tabs && !tabs.element.hidden)
@@ -6042,7 +6061,7 @@ class GpuOverlayManager {
       }
       if (bodyRevealing || pageMoving)
         this.curBypassRectCache = !0;
-      let bodyHovered = this.curPanelHovered && panel.body.matches(":hover");
+      let bodyHovered = this.curPanelHovered && (panel.body.matches(":hover") || Boolean(panel.pinned?.matches(":hover")));
       this.curSubHovered = bodyHovered, this.curPointerRow = bodyHovered && panel.root.hasAttribute("data-k-row-hover");
       let panelAlpha = this.curAlpha;
       for (let g of panel.groups) {
@@ -11446,14 +11465,23 @@ var compareCss = `
 .knobs-ui.knobs-compare{--_ku-cmp-diff:var(--k-compare-diff,var(--_k-ok));--_ku-cmp-line:var(--_k-compare-divider);
   --_ku-cmp-stage:var(--_k-compare-stage);
   display:flex;flex-direction:column;gap:6px;width:100%;height:100%;min-height:160px;outline:none;user-select:none;-webkit-user-select:none;
-  font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}
+  font:var(--_k-weight) var(--_k-type-small)/var(--_k-leading-small) var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}
 :where(.knobs-ui) :is(.knobs-cmp-mode,.knobs-cmp-toggle){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;margin:0;padding:0;outline:none;box-shadow:none}
-.knobs-cmp-bar{flex:none;display:flex;align-items:center;gap:2px;height:24px;padding:0 2px}
-.knobs-cmp-modes{display:flex;align-items:center;gap:2px}
-.knobs-ui .knobs-cmp-mode,.knobs-ui .knobs-cmp-toggle{height:22px;padding:0 7px;border-radius:max(0px,calc(var(--_k-radius) - 2px));color:var(--_k-fg-3);cursor:pointer;white-space:nowrap;
-  transition:color .15s,background .15s}
-.knobs-ui .knobs-cmp-mode:is(:hover,:focus-visible),.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_ku-wash)}
-.knobs-ui .knobs-cmp-mode[aria-checked="true"],.knobs-ui .knobs-cmp-toggle[aria-pressed="true"]{color:var(--_k-fg);font-weight:var(--_k-weight-label)}
+.knobs-cmp-bar{flex:none;display:flex;align-items:center;gap:var(--_k-gap);height:var(--_k-control-h)}
+/* The modes: one fill, the selection pill on the one picked; a mode isn't brighter for being
+   picked: the pill's bright copy is. */
+.knobs-cmp-modes{position:relative;display:inline-flex;height:var(--_k-control-h);border-radius:var(--_k-radius);background:var(--_k-fill)}
+.knobs-cmp-modes[hidden]{display:none}
+/* Hover is a quiet fill under the arrow cursor (no hand, no brightening), there at once. */
+.knobs-ui .knobs-cmp-mode{display:inline-flex;align-items:center;height:100%;padding:0 8px;border-radius:var(--_k-radius);color:var(--_k-fg-2);cursor:default;white-space:nowrap;
+  transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-cmp-mode:not([aria-checked="true"]):is(:hover,:focus-visible){background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+/* Toggles: icon buttons, the accent's wash when on. */
+.knobs-ui .knobs-cmp-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);border-radius:var(--_k-radius);color:var(--_k-fg-2);cursor:default;
+  transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-cmp-toggle[aria-pressed="true"]{color:var(--_k-accent-fg);background:var(--_k-accent-soft)}
+.knobs-cmp-toggle svg{display:block}
 .knobs-cmp-fill{flex:1}
 .knobs-cmp-toggle[hidden]{display:none}
 /* One surface: on a card (a walkthrough's step, a split's pane, anything .knobs-surface) or marked
@@ -11466,49 +11494,96 @@ var compareCss = `
 .knobs-compare[data-frame="flat"] .knobs-cmp-stage{border-radius:0}
 .knobs-compare[data-mode="wipe"] .knobs-cmp-stage{cursor:ew-resize}
 /* Unzoomed, a finger still scrolls the page up and down; zoomed, the stage takes every gesture. */
-.knobs-compare[data-zoomed] .knobs-cmp-stage{cursor:grab;touch-action:none}
-.knobs-compare[data-panning],.knobs-compare[data-panning] *{cursor:grabbing!important}
-.knobs-compare[data-dragging],.knobs-compare[data-dragging] *{cursor:ew-resize!important}
+/* Zoomed, it pans: a move cursor, never a hand. */
+.knobs-compare[data-zoomed] .knobs-cmp-stage{cursor:move;touch-action:none}
+.knobs-compare[data-panning],.knobs-compare[data-panning] *{cursor:move!important}
+/* Wiping, the grip stands in for the cursor. */
+.knobs-compare[data-dragging],.knobs-compare[data-dragging] *{cursor:none!important}
 .knobs-cmp-sizer{position:absolute;left:0;right:0;top:0;height:0;visibility:hidden;pointer-events:none}
 .knobs-cmp-canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
 .knobs-cmp-media{position:absolute;left:0;top:0;display:block;max-width:none;margin:0;padding:0;border:0;object-fit:fill;transform-origin:0 0;pointer-events:none;will-change:transform}
 .knobs-compare[data-renderer="gpu"] .knobs-cmp-media{opacity:0}
-/* Glass: what's behind shows through, blurred, on the knobs tokens. */
-.knobs-cmp-label,.knobs-cmp-zoom{background:color-mix(in srgb,var(--_k-bg) 52%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
-  box-shadow:inset 0 0 0 .5px var(--_k-border),inset 0 1px 0 var(--_k-rim),0 2px 10px rgba(0,0,0,calc(.18 * var(--_k-shadow-k,1)))}
-.knobs-cmp-label{position:absolute;left:0;top:0;padding:1px 7px;border-radius:999px;font-size:var(--_k-text-meta);line-height:16px;color:var(--_k-fg-2);white-space:nowrap;pointer-events:none;will-change:transform;transition:color .15s}
-.knobs-cmp-label[data-lit]{color:var(--_k-fg)}
-.knobs-cmp-label[data-dim]{color:var(--_k-fg-3)}
-/* The wipe: a hairline down the line with a grip at its middle; a wider strip takes the hand and
-   the keys (a slider). It fades with the mode. */
-.knobs-cmp-handle{cursor:ew-resize;position:absolute;left:-12px;top:0;width:24px;height:0;opacity:0;pointer-events:none;outline:none;will-change:transform;transition:opacity .18s cubic-bezier(.4,0,1,1)}
-.knobs-cmp-handle[data-on]{opacity:1;pointer-events:auto;transition:opacity .22s cubic-bezier(.2,.8,.2,1)}
-.knobs-cmp-handle::before{content:"";position:absolute;top:0;bottom:0;left:11.5px;width:1px;background:var(--_ku-cmp-line);box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 0 6px rgba(0,0,0,.25)}
-.knobs-cmp-handle::after{content:"";position:absolute;top:50%;left:9px;width:6px;height:28px;margin-top:-14px;border-radius:3px;background:var(--_ku-cmp-line);
-  box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.2);transition:scale .18s var(--_ku-ease),box-shadow .15s}
-.knobs-compare[data-dragging] .knobs-cmp-handle::after{scale:1.12}
-.knobs-cmp-handle:focus-visible::after,.knobs-compare[data-keyboard] .knobs-cmp-handle:focus::after{box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 3px color-mix(in srgb,var(--_k-accent) 40%,transparent)}
+/* The media comes in with its first frames: a fade and a 4px blur on the default spring. */
+.knobs-cmp-canvas,.knobs-compare[data-renderer="dom"] .knobs-cmp-media{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-compare:not([data-ready]) :is(.knobs-cmp-canvas,.knobs-cmp-media){opacity:0;filter:blur(4px)}
+/* Over the pictures: a quiet scrim, dark in either appearance, blurred, with no ring. */
+.knobs-cmp-label,.knobs-cmp-zoom,.knobs-cmp-grip{background:var(--_ku-media-scrim);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
+/* ✗ Before · ✓ After: Before quieter, After in full. Neutral: no colour of its own. */
+.knobs-cmp-label{position:absolute;left:0;top:0;display:flex;align-items:center;gap:4px;padding:1px 7px 1px 5px;border-radius:999px;font-weight:var(--_k-weight-label);
+  white-space:nowrap;pointer-events:none;will-change:transform}
+.knobs-cmp-label[data-side="before"]{color:var(--_ku-on-media-2)}
+.knobs-cmp-label[data-side="after"]{color:var(--_ku-on-media)}
+/* Fusing, the mark folds away and the label is its name. */
+.knobs-cmp-mark{flex:none;display:flex;justify-content:flex-end;overflow:hidden}
+.knobs-cmp-mark svg{display:block;flex:none;width:12px;height:12px}
+/* The fuse's seam: a blurred strip over where the sides meet, soft at both sides. */
+.knobs-cmp-seam{position:absolute;left:0;top:0;width:8px;height:0;opacity:0;pointer-events:none;will-change:transform,opacity;
+  -webkit-mask-image:linear-gradient(to right,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(to right,transparent,#000 35%,#000 65%,transparent)}
+/* The wipe: a hairline down the line with a raised grip in its middle (at the pointer's height
+   while dragged); a wider strip takes the hand and the keys (a slider). It fades in with the
+   fuse; wiping, line and grip brighten. */
+.knobs-cmp-handle{cursor:ew-resize;position:absolute;left:-12px;top:0;width:24px;height:0;opacity:0;pointer-events:none;outline:none;will-change:transform,opacity}
+.knobs-cmp-handle[data-on]{pointer-events:auto}
+.knobs-cmp-handle::before{content:"";position:absolute;top:0;bottom:0;left:11.5px;width:1px;background:color-mix(in srgb,var(--_ku-cmp-line) 72%,transparent);box-shadow:0 0 6px var(--_ku-media-scrim)}
+.knobs-compare[data-dragging] .knobs-cmp-handle::before{background:var(--_ku-cmp-line)}
+.knobs-cmp-grip{position:absolute;top:0;left:4px;width:16px;height:28px;border-radius:min(8px,calc(var(--_k-radius) * 999));will-change:transform}
+.knobs-cmp-grip::before,.knobs-cmp-grip::after{content:"";position:absolute;top:10px;width:1px;height:8px;background:var(--_ku-on-media-2);transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-cmp-grip::before{left:6px}
+.knobs-cmp-grip::after{left:9px}
+.knobs-compare[data-dragging] .knobs-cmp-grip::before,.knobs-compare[data-dragging] .knobs-cmp-grip::after{background:var(--_ku-on-media)}
+.knobs-cmp-handle:focus-visible .knobs-cmp-grip,.knobs-compare[data-keyboard] .knobs-cmp-handle:focus .knobs-cmp-grip{box-shadow:0 0 0 2px var(--_k-accent)}
 /* The split's hairline, down the middle side by side. */
 .knobs-cmp-split{position:absolute;left:0;top:0;width:1px;height:0;margin-left:-.5px;background:color-mix(in srgb,var(--_k-bg) 72%,transparent);pointer-events:none;will-change:transform,opacity}
 /* Zoomed: how far, and a way back, in the stage's corner; it fades in and out, nothing shifts. */
 .knobs-cmp-zoom{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:4px;height:26px;padding:0 3px 0 10px;border-radius:999px;
-  color:var(--_k-fg);font-size:var(--_k-text-meta);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap;
+  color:var(--_ku-on-media);font-variant-numeric:tabular-nums;font-feature-settings:var(--_kr-data,"tnum");white-space:nowrap;
   opacity:0;scale:.96;pointer-events:none;transition:opacity .16s cubic-bezier(.4,0,1,1),scale .16s cubic-bezier(.4,0,1,1)}
 .knobs-cmp-zoom[data-on]{opacity:1;scale:1;pointer-events:auto;transition:opacity .2s cubic-bezier(.2,.8,.2,1),scale .2s cubic-bezier(.2,.8,.2,1)}
 :where(.knobs-ui) .knobs-cmp-zoom-reset{all:revert;box-sizing:border-box;font:inherit;letter-spacing:inherit;margin:0;border:0;outline:none;box-shadow:none;
-  height:20px;padding:0 8px;border-radius:999px;background:transparent;color:var(--_k-fg-2);cursor:pointer;transition:color .15s,background .15s}
-:where(.knobs-ui) .knobs-cmp-zoom-reset:is(:hover,:focus-visible){color:var(--_k-fg);background:color-mix(in srgb,var(--_k-fg) 12%,transparent)}
-.knobs-cmp-note{position:absolute;left:50%;top:50%;translate:-50% -50%;color:var(--_k-fg-3);font-size:var(--_k-text-meta);pointer-events:none}
+  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border-radius:999px;background:transparent;color:var(--_ku-on-media-2);cursor:default;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+: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;height:56px;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;
-  font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg)}
+  font:var(--_k-weight) var(--_k-type-small)/var(--_k-leading-small) var(--_k-font);color:var(--_k-fg)}
 .knobs-cmp-strip>canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
 @media(prefers-reduced-motion:reduce){:is(.knobs-compare,.knobs-cmp-strip) :where(*,::before,::after){transition-duration:.12s!important}}
 `;
 
+// src/ui/player-css.ts
+var playerCss = `
+:where(.knobs-player,.knobs-player *){box-sizing:border-box}
+.knobs-ui.knobs-player{--_kp-stage:var(--_k-compare-stage);display:flex;flex-direction:column;gap:6px;width:100%;outline:none;
+  font:var(--_k-weight) var(--_k-type-small)/var(--_k-leading-small) var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}
+:where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-ui.knobs-player,.knobs-ui.knobs-player[data-nested]{--_kp-stage:var(--k-compare-stage,transparent)}
+.knobs-player-frame{position:relative;width:100%;aspect-ratio:var(--kp-aspect,16/9);overflow:hidden;border-radius:var(--_k-radius-panel);background:var(--_kp-stage)}
+.knobs-player[data-frame="flat"] .knobs-player-frame{border-radius:0}
+.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}
+.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
+   resizes); hover is a quiet fill (fill-hover), in at once (hover-in, 0 ms), out easing. */
+.knobs-ui .knobs-tl-play,.knobs-ui.knobs-timeline :is(.knobs-tl-pin,.knobs-tl-rlabel),
+.knobs-ui.knobs-timeline[data-dragging] .knobs-tl-marker :is(.knobs-tl-pin,.knobs-tl-mlabel){cursor:default}
+.knobs-ui .knobs-tl-play:hover,.knobs-tl-edge:hover::after,.knobs-tl-rlabel:hover,.knobs-tl-track:hover .knobs-tl-hover,
+.knobs-timeline[data-variant="line"] .knobs-tl-track:hover .knobs-tl-segs{transition-duration:calc(var(--_k-hover-in) * 1ms)}
+/* The line's row: a minimal play/pause (the filled pair, a 28px target, no fill at rest), then
+   the line, centred on it. */
+.knobs-ui.knobs-timeline[data-variant="line"]{gap:4px;align-items:center}
+.knobs-timeline[data-variant="line"] .knobs-tl-transport{display:flex}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-play{width:28px;height:28px;min-width:28px;min-height:28px;border-radius:var(--_k-radius);background:transparent;color:var(--_k-fg-2);
+  transition:background calc(var(--_k-hover-out) * 1ms),transform .15s var(--_ku-ease)}
+.knobs-ui.knobs-timeline[data-variant="line"][data-playing] .knobs-tl-play{background:transparent;color:var(--_k-fg-2)}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-play:hover{background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-track{cursor:default;transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-track:hover{background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+`;
+
 // src/ui/overlay-css.ts
 var overlayCss = `
 .knobs-layers{position:fixed;inset:0;z-index:2147480005;pointer-events:none}
@@ -11640,7 +11715,7 @@ var snappy = springLinear(SPRINGS2.snappy), pickerCss = `
 .knobs-picker-suggested{flex:none;color:var(--_k-fg-3);font-size:var(--_k-text-meta)}
 .knobs-picker-check{flex:none;display:flex;width:14px;height:14px;color:var(--_k-accent);opacity:0;scale:.6;filter:blur(2px);
   transition:opacity .11s ease-in,scale .11s ease-in,filter .11s ease-in}
-.knobs-picker-check svg{display:block;width:14px;height:14px}
+.knobs-picker-check svg{display:block;width:12px;height:12px}
 .knobs-picker-option[data-chosen] .knobs-picker-check{opacity:1;scale:1;filter:none;transition:opacity .15s ease-out,scale var(--kp-snappy-ms) var(--kp-snappy),filter .15s ease-out}
 .knobs-picker-body{position:relative;overflow:visible}
 .knobs-picker-body[data-moving]{overflow:hidden}
@@ -11742,6 +11817,15 @@ var readoutCss = `
 .knobs-panel[data-gpu-active="true"] .knobs-rd-find{position:relative;z-index:2147480003}
 @media(prefers-reduced-motion:reduce){.knobs-rd :where(*){transition:none!important}}
 `;
+
+// src/ui/selection-pill-css.ts
+var selectionPillCss = `
+.knobs-pick-pill,.knobs-pick-copy{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;transition:opacity .1s linear}
+.knobs-pick-pill{background:var(--_k-fill-selected);will-change:transform}
+.knobs-pick-copy{overflow:hidden;will-change:transform}
+.knobs-pick-copy-rows{position:absolute;left:0;top:0;width:0;height:0}
+:is(.knobs-pick-pill,.knobs-pick-copy)[data-off]{opacity:0}
+`;
 // src/ui/look.ts
 var css = `
 :where(.knobs-ui){
@@ -11753,6 +11837,9 @@ var css = `
   --_ku-wash:var(--k-ui-wash,color-mix(in srgb,var(--_k-fill) 70%,transparent));
   --_ku-wash-hi:var(--k-ui-wash-hi,var(--_k-fill-selected));
   --_ku-ease:var(--_k-motion-snappy);--_ku-ease-ms:calc(var(--_k-motion-snappy-ms) * 1ms);
+  /* Over a picture: a quiet dark scrim in either appearance (a picture is no lighter in light
+     mode), light type on it, no ring. */
+  --_ku-media-scrim:rgb(0 0 0/.5);--_ku-on-media:#fff;--_ku-on-media-2:color-mix(in srgb,var(--_ku-on-media) 64%,transparent);
   /* The card frame (knobs' own look): every leaf pane a rounded card on the page, half a gap
      inside its slot, so panes sit a gap apart with the dividers' grips between them; tree rows
      inset as soft rounded washes. --k-frame: flat (labPreset) puts panes edge to edge on
@@ -11777,6 +11864,12 @@ var css = `
    --_ku-pane-bg and --_ku-pane-ring so this reaches them. */
 :where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-ui:not(.knobs-surface),.knobs-ui[data-nested]{--_ku-gap:var(--k-ui-gap,0px);--_ku-pane-bg:transparent;--_ku-pane-ring:none;
   --_ku-divider:var(--_k-split-gutter);--_kd-bg:transparent}
+/* What draws its box without those: a picker's card keeps its fill as the highlight but drops its
+   ring; a timeline's track drops its well for a hairline under the lane; an inline panel sheds its
+   card (--k-chrome 0). A full-window step is the one raised exception (it is the surface). */
+:is(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-picker-card,.knobs-ui[data-nested] .knobs-picker-card{box-shadow:none}
+:is(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-tl-track,.knobs-ui[data-nested] .knobs-tl-track{background:transparent;border-radius:0;box-shadow:inset 0 -1px 0 var(--_k-border-subtle)}
+:where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-panel.knobs-inline:not(.knobs-page){--k-chrome:0}
 /* Only the pieces' own elements take their type and resets: what you put in a pane is yours. */
 .knobs-ui{box-sizing:border-box}
 :where(.knobs-split>*,.knobs-pane-clip,.knobs-pane-inner,.knobs-pane-body,.knobs-pane-head,.knobs-pane-head *,.knobs-pane-rail,.knobs-pane-rail *,.knobs-tree,.knobs-tree *,.knobs-tree-ghost){box-sizing:border-box}
@@ -11911,11 +12004,9 @@ var css = `
 .knobs-tree:focus .knobs-tree-row[data-active][aria-selected="true"]::before{background:var(--_ku-select-focus)}
 .knobs-tree-row[data-drop="into"]::before{opacity:1;background:color-mix(in srgb,var(--_k-accent) 30%,transparent)}
 .knobs-tree-row[data-dragged]{opacity:.38}
-/* glide: one highlight under the selected row that glides between rows (the row's own stays off). */
-.knobs-tree-cursor{position:absolute;left:var(--_ku-row-x);right:var(--_ku-row-x);top:0;height:var(--_k-row);border-radius:var(--_ku-row-radius);background:var(--_ku-select);
-  opacity:0;pointer-events:none;will-change:transform;transition:opacity .15s ease-out,background .12s}
-.knobs-tree-cursor[data-on]{opacity:1}
-.knobs-tree:focus .knobs-tree-cursor{background:var(--_ku-select-focus)}
+/* glide: the selection pill on the selected row, in the selection's colour (the row's own stays off). */
+.knobs-tree>.knobs-pick-pill{background:var(--_ku-select)}
+.knobs-tree:focus>.knobs-pick-pill{background:var(--_ku-select-focus)}
 .knobs-tree[data-glide] .knobs-tree-row[aria-selected="true"]::before{opacity:0!important}
 .knobs-tree-row>*{position:relative}
 .knobs-tree-caret{flex:none;display:flex;align-items:center;justify-content:center;width:16px;height:100%;color:var(--_k-fg-3);transition:transform var(--_ku-ease-ms) var(--_ku-ease)}
@@ -11947,22 +12038,20 @@ var css = `
   box-shadow:0 0 0 1px var(--_k-border-strong),0 6px 18px rgba(0,0,0,calc(.35 * var(--_k-shadow-k,1)));pointer-events:none;white-space:nowrap;font:var(--_k-weight) var(--_k-font-size)/1.6 var(--_k-font)}
 .knobs-tree-empty{padding:10px var(--_k-inset);color:var(--_k-fg-3)}
 
-/* Timeline: a transport (play, the time) beside a track: the ruler's canvas over a lane of
-   markers, ranges as soft bands, and the playhead, a hairline in the accent with a cap. */
+/* Timeline: play beside a track: the ruler's canvas over a lane of markers, ranges as soft bands,
+   and the playhead, a hairline in the accent with a cap. No clock: the time shows under the
+   pointer on the track (the tag), in seconds, while hovering or scrubbing. */
 :where(.knobs-timeline,.knobs-timeline *){box-sizing:border-box}
 .knobs-ui.knobs-timeline{display:flex;align-items:stretch;gap:10px;width:100%;height:100%;min-height:52px;padding:6px var(--_k-inset) 8px 8px;outline:none;user-select:none;-webkit-user-select:none;
   font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}
 :where(.knobs-ui) :is(.knobs-tl-play,.knobs-tl-edit){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;margin:0;padding:0;outline:none;box-shadow:none}
-.knobs-tl-transport{flex:none;display:flex;align-items:center;gap:8px;min-width:96px}
+.knobs-tl-transport{flex:none;display:flex;align-items:center}
 .knobs-ui .knobs-tl-play{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);min-width:22px;min-height:22px;border-radius:calc(var(--_k-radius) * 999);
   background:var(--_k-fill-selected);color:var(--_k-fg);cursor:pointer;transition:background .15s,transform .15s var(--_ku-ease)}
 .knobs-ui .knobs-tl-play:hover{background:color-mix(in srgb,var(--_k-fg) 16%,transparent)}
 .knobs-ui .knobs-tl-play:active{transform:scale(.94)}
 .knobs-tl-play svg{width:12px;height:12px}
 .knobs-timeline[data-playing] .knobs-tl-play{background:var(--_k-accent);color:var(--_k-bg)}
-.knobs-tl-time{display:flex;flex-direction:column;line-height:1.2;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
-.knobs-tl-now{font:var(--_k-weight) var(--_k-value-size)/1.2 var(--_k-value-font);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";color:var(--_k-fg);white-space:nowrap}
-.knobs-tl-sub{font-size:var(--_k-text-meta);color:var(--_k-fg-3);white-space:nowrap}
 .knobs-tl-track{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:var(--_k-radius);background:var(--_k-fill);cursor:col-resize;touch-action:none;
   transition:background calc(var(--_k-hover-out) * 1ms)}
 .knobs-timeline:focus-visible .knobs-tl-track,.knobs-timeline[data-keyboard]:focus .knobs-tl-track{background:color-mix(in srgb,var(--_k-fill-selected) 80%,transparent)}
@@ -11986,7 +12075,8 @@ var css = `
 .knobs-tl-pin{position:absolute;top:13px;left:-5px;width:10px;height:10px;pointer-events:auto;cursor:grab}
 .knobs-tl-pin::after{content:"";position:absolute;inset:1.5px;border-radius:min(2px,var(--_k-radius));background:var(--knobs-tl-c);rotate:45deg;transition:background .15s,scale .2s var(--_ku-ease)}
 .knobs-tl-mlabel{position:absolute;top:26px;left:3px;max-width:140px;padding:0 6px;border-radius:max(0px,calc(var(--_k-radius) - 3px));background:var(--_k-fill-selected);color:var(--_k-fg);
-  font-size:var(--_k-text-meta);line-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto;cursor:grab;transition:background .15s,color .15s}
+  font-size:var(--_k-text-meta);line-height:17px;white-space:nowrap;pointer-events:auto;cursor:grab;transition:background .15s,color .15s}
+.knobs-tl-mtext{display:block;overflow:hidden;white-space:nowrap}
 .knobs-tl-marker[data-selected]{--knobs-tl-c:var(--_k-accent)}
 .knobs-tl-marker[data-selected] .knobs-tl-mlabel{background:color-mix(in srgb,var(--_k-accent) 24%,var(--_k-fill-selected))}
 .knobs-tl-marker[data-selected] .knobs-tl-pin::after{scale:1.2}
@@ -12005,9 +12095,42 @@ var css = `
 .knobs-tl-hover{position:absolute;left:0;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--_k-border-strong);transform:translateX(-100px);pointer-events:none;opacity:0;transition:opacity .15s}
 .knobs-tl-track:hover .knobs-tl-hover{opacity:1}
 .knobs-timeline[data-scrubbing] .knobs-tl-hover{opacity:0}
+.knobs-tl-tag{position:absolute;left:0;bottom:2px;font-size:var(--_k-text-meta);line-height:16px;color:var(--_k-fg);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap;pointer-events:none;opacity:0}
+.knobs-tl-tag[data-on]{opacity:1}
+/* The lane (variant: "lane"): one slim track of ticks under a compare or a video; markers are
+   faint chapter ticks, the current one in text colour; nothing to edit. */
+.knobs-ui.knobs-timeline[data-variant="lane"]{height:auto;min-height:0;padding:0;gap:var(--_k-gap)}
+.knobs-timeline[data-variant="lane"] .knobs-tl-track{height:var(--_k-control-h)}
+.knobs-timeline[data-variant="lane"] .knobs-tl-ruler{height:100%}
+.knobs-timeline[data-variant="lane"] .knobs-tl-lane{top:0}
+.knobs-timeline[data-variant="lane"] .knobs-tl-marker{top:0}
+.knobs-timeline[data-variant="lane"] .knobs-tl-marker::before{top:0;bottom:50%;left:-.75px;width:1.5px;background:var(--_k-fg-3)}
+.knobs-timeline[data-variant="lane"] .knobs-tl-marker[data-current]::before{background:var(--_k-fg)}
+.knobs-timeline[data-variant="lane"] :is(.knobs-tl-pin,.knobs-tl-mlabel,.knobs-tl-rlabel){display:none}
+.knobs-timeline[data-variant="lane"] .knobs-tl-head::before{top:0}
+.knobs-timeline[data-variant="lane"] .knobs-tl-head::after{content:none}
+.knobs-timeline[data-variant="lane"] .knobs-tl-tag{top:2px;bottom:auto}
+/* The line (variant: "line"): a player's progress under its media. One 2px line, fg-3 with fg
+   filling it, a segment per chapter; it thickens under the pointer and while scrubbing. The
+   chapter and time under the pointer float over it; nothing else shows. */
+.knobs-ui.knobs-timeline[data-variant="line"]{height:auto;min-height:0;padding:0;gap:0}
+.knobs-timeline[data-variant="line"] .knobs-tl-transport{display:none}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-track{height:16px;overflow:visible;border-radius:var(--_k-radius);background:transparent;box-shadow:none;cursor:pointer}
+.knobs-timeline[data-variant="line"] :is(.knobs-tl-ruler,.knobs-tl-lane,.knobs-tl-hover,.knobs-tl-head,.knobs-tl-rlabel){display:none}
+.knobs-tl-segs{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;pointer-events:none;transition:scale calc(var(--_k-hover-out) * 1ms) var(--_ku-ease)}
+.knobs-tl-seg{position:absolute;left:0;top:0;height:100%;overflow:hidden;border-radius:1px;background:var(--_k-fg-3);will-change:transform}
+.knobs-tl-seg-fill{position:absolute;inset:0;background:var(--_k-fg);transform-origin:0 0;will-change:transform}
+.knobs-timeline[data-variant="line"] .knobs-tl-track:hover .knobs-tl-segs,.knobs-timeline[data-variant="line"][data-scrubbing] .knobs-tl-segs{scale:1 2}
+.knobs-timeline[data-variant="line"] .knobs-tl-range{top:3px;bottom:3px;border-radius:3px}
+.knobs-timeline[data-variant="line"]:focus-visible .knobs-tl-track,.knobs-timeline[data-variant="line"][data-keyboard]:focus .knobs-tl-track{background:transparent;box-shadow:0 0 0 2px color-mix(in srgb,var(--_k-accent) 60%,transparent)}
+.knobs-timeline[data-variant="line"] .knobs-tl-tag{top:auto;bottom:calc(100% + 2px);display:flex;gap:6px;padding:0 6px;border-radius:calc(var(--_k-radius) * 999);background:var(--_ku-media-scrim);color:var(--_ku-on-media);
+  font-size:var(--_k-type-small);line-height:var(--_k-leading-small);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
+.knobs-tl-tag-label{color:var(--_k-fg-2)}
+.knobs-timeline[data-variant="line"] .knobs-tl-tag-label{color:var(--_ku-on-media-2)}
+.knobs-tl-tag-label:empty{display:none}
 @media(prefers-reduced-motion:reduce){.knobs-timeline :where(*,::before,::after){transition:none!important}}
 @media(prefers-reduced-motion:reduce){:is(.knobs-tree,.knobs-split>.knobs-divider,.knobs-pane-head,.knobs-pane-rail) :where(*,::before,::after){transition:none!important}}
-`, uiCss = () => aliased(css + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss) + rolling_css_default;
+`, uiCss = () => aliased(css + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss + playerCss + selectionPillCss) + rolling_css_default;
 function injectUiStyles(doc) {
   if (injectTokens(doc), doc.querySelector("style[data-knobs-ui]"))
     return;
@@ -14752,7 +14875,7 @@ function buildPanel(controls, host, options) {
   if (helpButton?.hidden)
     titleEl.title = `${titleEl.textContent ? `${titleEl.textContent}
 ` : ""}Press ${show("help")} for keyboard shortcuts`;
-  let presetLabel = (id) => options.presetLabels?.[id] ?? (id === "default" ? options.defaultLabel : void 0) ?? controls.presetLabel(id), presetStrip = createPresetStrip(doc, controls, showVariants, run, () => wakeGpu(), presetLabel), tabStrip = createTabStrip(doc, (id, animate) => selectTab(id, animate)), activeTab, searchOptions = typeof options.search === "object" ? options.search : {}, chipTests = /* @__PURE__ */ new Map, search = options.search && !page ? createSearch(doc, {
+  let presetLabel = (id) => options.presetLabels?.[id] ?? (id === "default" ? options.defaultLabel : void 0) ?? controls.presetLabel(id), presetStrip = createPresetStrip(doc, controls, showVariants, run, () => wakeGpu(), presetLabel, (entries) => presetsTouchTab(entries)), tabStrip = createTabStrip(doc, (id, animate) => selectTab(id, animate)), activeTab, searchOptions = typeof options.search === "object" ? options.search : {}, chipTests = /* @__PURE__ */ new Map, search = options.search && !page ? createSearch(doc, {
     placeholder: searchOptions.placeholder ?? "Search",
     chips: (searchOptions.chips ?? ["modified"]).map((chip) => {
       if (chip === "modified")
@@ -14774,7 +14897,10 @@ function buildPanel(controls, host, options) {
   let allActions = [
     ...controls.actions ?? [],
     ...options.actions ?? []
-  ], body = el("div"), tabMotion = tabTransition(body, root, () => wakeGpu()), blocks = [], cards = [], groupResetButtons = /* @__PURE__ */ new Map, groupDice = /* @__PURE__ */ new Map, gpuGroups = [], gpuRows = [], layout, layoutTick = 0, foldSource = null, userFolding = !1, noteFold = (source) => {
+  ], body = el("div"), tabMotion = tabTransition(body, root, () => wakeGpu()), pinnedBody = el("div");
+  if (pinnedBody.className = "knobs-pinned", !page)
+    body.append(presetStrip.element);
+  let blocks = [], cards = [], groupResetButtons = /* @__PURE__ */ new Map, groupDice = /* @__PURE__ */ new Map, gpuGroups = [], gpuRows = [], layout, layoutTick = 0, foldSource = null, userFolding = !1, noteFold = (source) => {
     if (foldSource !== "user")
       foldSource = source;
   }, byUser = (act) => {
@@ -15091,8 +15217,11 @@ function buildPanel(controls, host, options) {
         section: field.section
       });
     }
-    return gatherSubsections(specs);
-  }, gatherSubsections = (specs) => {
+    let planned = gatherSubsections(specs);
+    if (page || !planned.some(pinnedRow))
+      return planned;
+    return [...planned.filter(pinnedRow), ...planned.filter((spec) => !pinnedRow(spec))];
+  }, pinnedRow = (r) => !page && controls.isPinned(r.keys[0] ?? r.id), gatherSubsections = (specs) => {
     let out = [];
     for (let i = 0;i < specs.length; ) {
       let end = i;
@@ -15616,13 +15745,13 @@ function buildPanel(controls, host, options) {
     } else {
       let runs = [];
       for (let r of next) {
-        let last = runs.at(-1);
-        if (last && last.group === r.group)
+        let last = runs.at(-1), pinned = pinnedRow(r);
+        if (last && last.group === r.group && last.pinned === pinned)
           last.rows.push(r);
         else
-          runs.push({ group: r.group, rows: [r] });
+          runs.push({ group: r.group, pinned, rows: [r] });
       }
-      let free = blocks.filter((b) => !b.leaving), chosen = [], usedSubheads = /* @__PURE__ */ new Set;
+      let free = blocks.filter((b) => !b.leaving), chosen = [], pinnedBlocks = /* @__PURE__ */ new Set, usedSubheads = /* @__PURE__ */ new Set;
       for (let run of runs) {
         let at = free.findIndex((b) => b.group === run.group), block = at >= 0 ? free.splice(at, 1)[0] : newBlock(run.group);
         if (at < 0) {
@@ -15637,7 +15766,8 @@ function buildPanel(controls, host, options) {
               motion.push({ node: block.card, show: !0 });
           }
         }
-        chosen.push(block);
+        if (chosen.push(block), run.pinned)
+          pinnedBlocks.add(block);
         let nodes = [], under;
         for (let r of run.rows) {
           let name = r.field.subsection;
@@ -15662,7 +15792,8 @@ function buildPanel(controls, host, options) {
             gpuRows.splice(gi, 1);
           subheads.delete(id);
         }
-      arrange(body, chosen.flatMap((b) => b.head ? [b.head, b.card] : [b.card]));
+      let nodesOf = (list) => list.flatMap((b) => b.head ? [b.head, b.card] : [b.card]);
+      arrange(pinnedBody, nodesOf(chosen.filter((b) => pinnedBlocks.has(b)))), arrange(body, [presetStrip.element, ...nodesOf(chosen.filter((b) => !pinnedBlocks.has(b)))]);
       for (let block of free) {
         block.leaving = !0;
         let fold = () => {
@@ -15768,15 +15899,24 @@ function buildPanel(controls, host, options) {
       if (f.group === group && f.tab !== void 0)
         return f.tab;
     return;
-  }, tabOf = (r) => r.field.tab ?? (r.group !== void 0 ? groupTab(r.group) : void 0), tabList = () => {
+  }, tabOf = (r) => pinnedRow(r) ? void 0 : r.field.tab ?? (r.group !== void 0 ? groupTab(r.group) : void 0), tabList = () => {
     if (page)
       return [];
     let list = (options.tabs ?? []).map((t) => typeof t === "string" ? { id: t, label: readableTitle(t) } : { id: t.id, label: t.label ?? readableTitle(t.id) }), seen = new Set(list.map((t) => t.id));
-    for (let f of Object.values(controls.schema))
-      if (f.tab !== void 0 && !seen.has(f.tab))
+    for (let [key, f] of Object.entries(controls.schema))
+      if (f.tab !== void 0 && !seen.has(f.tab) && !controls.isPinned(key))
         seen.add(f.tab), list.push({ id: f.tab, label: readableTitle(f.tab) });
     return list;
   };
+  function presetsTouchTab(entries) {
+    if (page || activeTab === void 0)
+      return !0;
+    let keys = rows.flatMap((r) => {
+      let tab = tabOf(r);
+      return !pinnedRow(r) && (tab === void 0 || tab === activeTab) ? r.keys : [];
+    });
+    return presetsTouch(entries, keys, controls.locked);
+  }
   function syncTabs() {
     let list = tabList(), has = (id) => id !== void 0 && list.some((t) => t.id === id);
     if (!has(activeTab))
@@ -15830,7 +15970,7 @@ function buildPanel(controls, host, options) {
         want.set(b.head, any);
       want.set(b.card, any && !(b.group !== void 0 && folds.get(b.group) && !finding));
     }
-    return want;
+    return want.set(presetStrip.element, presetStrip.shows()), want;
   }
   let shift = (node, show, delay) => {
     shifting.add(node), node.dataset.presence = show ? "in" : "out", reveal(node, show, () => {
@@ -15847,6 +15987,9 @@ function buildPanel(controls, host, options) {
     }
     if (tabMotion.running)
       tabMotion.finish();
+    let strip = presetStrip.element;
+    if (strip.hidden === want.get(strip))
+      strip.hidden = !want.get(strip);
     let showing = (n) => !n.hidden && n.dataset.leaving !== "true", set = (node, show, animate) => {
       if (showing(node) === show)
         return;
@@ -16051,9 +16194,9 @@ function buildPanel(controls, host, options) {
   } else {
     if (root.append(header), showFooter)
       root.append(popover);
-    if (root.append(tabStrip.element), search)
+    if (root.append(pinnedBody, tabStrip.element), search)
       root.append(search.element);
-    if (root.append(presetStrip.element, body), panelActions.length > 0)
+    if (root.append(body), panelActions.length > 0)
       root.append(customActions);
     root.append(text, apply, status, live);
   }
@@ -16285,35 +16428,44 @@ function buildPanel(controls, host, options) {
       nodes.push(...r.editor?.stops() ?? [r.input]);
     return nodes.push(...body.querySelectorAll("[data-knobs-stop],.knobs-tile>[data-foldable],.knobs-section-head[data-foldable]")), nodes.filter(visible).sort((a, b) => a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
   }, actionBarButtons = () => [...customActions.querySelectorAll("button")].filter((b) => visible(b) && !b.disabled), lastActionButton, stops = () => {
-    let list = [];
+    let list = [], strips = [];
     if (visible(tabStrip.element))
-      list.push({
-        contains: (n) => tabStrip.element.contains(n),
-        focus: (o) => tabStrip.focus(o)
+      strips.push({
+        at: tabStrip.element,
+        stops: [{ contains: (n) => tabStrip.element.contains(n), focus: (o) => tabStrip.focus(o) }]
       });
     if (visible(presetStrip.element))
-      list.push({
-        contains: (n) => presetStrip.element.contains(n),
-        focus: (o) => presetStrip.element.focus(o)
+      strips.push({
+        at: presetStrip.element,
+        stops: [
+          {
+            contains: (n) => presetStrip.element.contains(n),
+            focus: (o) => presetStrip.element.focus(o)
+          }
+        ]
       });
     if (page) {
+      for (let strip of strips)
+        list.push(...strip.stops);
       for (let stop of pageStops())
         list.push({ contains: (n) => stop.contains(n), focus: (o) => stop.focus(o) });
       return list;
     }
-    let runs = rows.map((r) => ({
+    let stopOf = (stop) => ({
+      contains: (n) => stop.contains(n),
+      focus: (o) => stop.focus(o)
+    }), shown = (stops) => stops.filter((s) => !s.closest('[hidden],[data-presence="out"]')).map(stopOf), runs = rows.map((r) => ({
       at: r.row,
-      stops: r.editor?.stops() ?? [r.input]
+      stops: shown(r.editor?.stops() ?? [r.input])
     }));
     for (let b of blocks)
       if (b.head?.hasAttribute("data-foldable") && !b.leaving)
-        runs.push({ at: b.head, stops: [b.head] });
+        runs.push({ at: b.head, stops: shown([b.head]) });
     for (let sh of subheads.values())
-      runs.push({ at: sh.el, stops: [sh.el] });
-    runs.sort((a, b) => a.at.compareDocumentPosition(b.at) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
+      runs.push({ at: sh.el, stops: shown([sh.el]) });
+    runs.push(...strips), runs.sort((a, b) => a.at.compareDocumentPosition(b.at) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1);
     for (let run of runs)
-      for (let stop of run.stops.filter((s) => !s.closest('[hidden],[data-presence="out"]')))
-        list.push({ contains: (n) => stop.contains(n), focus: (o) => stop.focus(o) });
+      list.push(...run.stops);
     let bar = actionBarButtons();
     if (bar.length)
       list.push({
@@ -17419,6 +17571,7 @@ function buildPanel(controls, host, options) {
     id: controls.id,
     root,
     body,
+    pinned: pinnedBody,
     inline,
     header,
     titleEl,