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

package/dist/panel.js

@@ -1746,6 +1746,22 @@ var init_schema = __esm(() => {
       source: css("var(--k-warn)"),
       doc: "Modified lines."
     },
+    {
+      name: "before",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: css("var(--k-fg-3)"),
+      doc: "Before in a comparison, and only Before: its label and side of the seam. Neutral unless a theme gives it a colour."
+    },
+    {
+      name: "after",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: css("var(--k-fg)"),
+      doc: "After in a comparison, and only After."
+    },
     {
       name: "series-1",
       tier: "semantic",
@@ -1836,6 +1852,150 @@ var init_schema = __esm(() => {
       source: value("288px"),
       doc: "Panel width."
     },
+    {
+      name: "space-inside",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("var(--k-unit)"),
+      doc: "Parts of one thing: an icon and its label, a meta line and its title."
+    },
+    {
+      name: "space-sibling",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 2)"),
+      doc: "Siblings in a group: buttons in a row, a list item's lines."
+    },
+    {
+      name: "space-title",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 3)"),
+      doc: "A heading and what it heads."
+    },
+    {
+      name: "space-group",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 12)"),
+      doc: "Groups inside a section (prose, video, diff), stacked media, feed items (a hairline in the middle)."
+    },
+    {
+      name: "space-section",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 24)"),
+      doc: "Sections of a page (the intro, the updates, each PR), a hairline in the middle."
+    },
+    {
+      name: "space-column",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 6)"),
+      doc: "Columns: a contents rail and the page, media side by side."
+    },
+    {
+      name: "pad-page",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 6)"),
+      doc: "A page's edge; 16px under 640px wide."
+    },
+    {
+      name: "pad-card",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 3)"),
+      doc: "Inside a card or popover."
+    },
+    {
+      name: "type-heading",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("20px"),
+      doc: "A page's title, weight 500."
+    },
+    {
+      name: "leading-heading",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("28px"),
+      doc: "Line height for type-heading."
+    },
+    {
+      name: "type-title",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("16px"),
+      doc: "Section titles (under their kicker), weight 500."
+    },
+    {
+      name: "leading-title",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("24px"),
+      doc: "Line height for type-title."
+    },
+    {
+      name: "type-body",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("13px"),
+      doc: "Prose, questions, list rows, step titles; 400, or 500 for emphasis."
+    },
+    {
+      name: "leading-body",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("20px"),
+      doc: "Line height for type-body."
+    },
+    {
+      name: "type-label",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("12px"),
+      doc: "Mono inside body text: code and paths."
+    },
+    {
+      name: "leading-label",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("16px"),
+      doc: "Line height for type-label."
+    },
+    {
+      name: "type-small",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("11px"),
+      doc: "Meta, controls, keys, timestamps; mono inside labels."
+    },
+    {
+      name: "leading-small",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("16px"),
+      doc: "Line height for type-small."
+    },
     {
       name: "font-size",
       tier: "semantic",
@@ -2800,16 +2960,18 @@ function injectTokens(doc) {
   style.textContent = rootCss;
   doc.head.append(style);
 }
-var ROOT_CLASS = "knobs-root", extras, spring, rootCss;
+var ROOT_CLASS = "knobs-root", extras, narrow, spring, rootCss;
 var init_root = __esm(() => {
   init_knobs();
   init_css();
   init_glide();
   init_motion();
   extras = `:where(.${ROOT_CLASS}){--_k-shadow-k:calc(var(--k-shadow-strength,calc(.48 - .32 * var(--_k-light,0))) / .48);--_k-glass-tone:var(--k-glass-tone,calc(.5 + .58 * var(--_k-light,0)));--_k-fill-base:var(--k-fill-base,var(--_k-fill-selected));--_k-fill-hover-mix:var(--k-fill-hover-mix,var(--k-fill-rest-mix,20%));--_k-reveal-ease:var(--k-ease,cubic-bezier(.2,.8,.2,1))}`;
+  narrow = `@media(max-width:639.98px){:where(.${ROOT_CLASS}){--_k-pad-page:var(--k-pad-page,calc(var(--_k-unit) * 4))}}`;
   spring = `:where(:root,:host){--k-fill-ease:${DEFAULT_LINEAR.easing};--k-fill-ms:${DEFAULT_LINEAR.ms}}`;
   rootCss = `${tokensCss(knobs)}
 ${extras}
+${narrow}
 ${spring}
 ${DRIVERS}
 ${motionCss}`;
@@ -3126,6 +3288,9 @@ ${GRAD_PROPS}
 .knobs-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px;margin:var(--k-group-gap) 0 var(--_k-gap);padding:0 var(--k-group-inset);color:var(--_k-group-label);font-size:var(--k-group-size);font-weight:var(--_k-weight-title);letter-spacing:var(--k-group-tracking);text-transform:var(--k-group-transform)}
 .knobs-panel:not(.knobs-page) .knobs-group-head:not(:first-child){border-top:1px solid var(--k-group-divider);padding-top:var(--k-group-divider-gap)}
 .knobs-group-head:first-child{margin-top:0}
+.knobs-panel:not(.knobs-page) .knobs-presets+.knobs-group-head{margin-top:0;border-top:0;padding-top:0}
+.knobs-pinned{margin-bottom:var(--k-group-gap)}
+.knobs-pinned:empty{display:none}
 .knobs-group-head>span:last-child{display:flex;align-items:center;gap:var(--_k-tray-pad);margin-right:calc((var(--k-icon-sm) - 20px) / 2)}
 .knobs-group-head button{height:20px;padding:0 6px;font-size:var(--_k-text-meta);font-weight:500;letter-spacing:0;text-transform:none;color:var(--_k-fg-2);background:transparent;border-radius:var(--_k-radius-sm);cursor:pointer}
 .knobs-group-head button:is(:hover:not([disabled]),:focus-visible){background:var(--_k-fill-selected);color:var(--_k-fg)}
@@ -6766,6 +6931,9 @@ function resolveActivePresetEntry(entries, currentValues, lastAppliedId, baseId
     isCustom: true
   };
 }
+function presetsTouch(entries, keys, defaults) {
+  return entries.some((e) => !(e.kind === "preset" && e.rawId === "default") && keys.some((k) => !same2(e.values[k], defaults[k])));
+}
 function nextPresetIndex(count, activeIndex, direction) {
   if (count <= 0)
     return -1;
@@ -6773,7 +6941,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) {
   const wake = () => onAfterChange?.();
   const el = (tag, cls, text) => {
     const node = doc.createElement(tag);
@@ -6819,6 +6987,15 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
   let prevDrifted = false;
   let initializedPill = false;
   let slideUntil = 0;
+  const unpinned = (values) => {
+    let out;
+    for (const k of Object.keys(values))
+      if (controls.isPinned(k) && !same2(values[k], controls.locked[k])) {
+        out ??= { ...values };
+        out[k] = controls.locked[k];
+      }
+    return out ?? values;
+  };
   function buildEntries() {
     const presetEntries = Object.entries(controls.presets).map(([id, presetValues]) => ({
       id: `p:${id}`,
@@ -6836,7 +7013,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];
@@ -6888,7 +7065,13 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     if (first)
       doc.defaultView?.requestAnimationFrame(() => pill.style.transition = "");
   }
-  const resolve = () => resolveActivePresetEntry(entries, controls.get(), lastAppliedId, activeEntryId(controls));
+  const resolve = () => resolveActivePresetEntry(entries, unpinned(controls.get()), lastAppliedId, activeEntryId(controls));
+  const wanted = (list) => (list.length > 1 || showVariants) && (relevant?.(list) ?? true);
+  function syncShown() {
+    const show = wanted(entries);
+    if (root.hidden === show && root.dataset.presence === undefined)
+      root.hidden = !show;
+  }
   function syncSelection(snap = false) {
     activeState = resolve();
     if (lastAppliedId !== null && activeState.activeId !== lastAppliedId) {
@@ -6945,14 +7128,15 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     run(() => {
       const variantsRef = showVariants ? controls.variants.list() : null;
       if (signature !== "" && variantsRef === lastVariantsRef) {
+        syncShown();
         syncSelection(false);
         return;
       }
       lastVariantsRef = variantsRef;
       const nextEntries = buildEntries();
       const nextSig = JSON.stringify(nextEntries.map((e) => [e.id, e.label]));
-      const shouldShow = nextEntries.length > 1 || showVariants;
-      root.hidden = !shouldShow;
+      entries = nextEntries;
+      syncShown();
       if (nextSig !== signature) {
         signature = nextSig;
         entries = nextEntries;
@@ -7223,6 +7407,7 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
     getEntries: () => entries,
     getButtons: () => buttons,
     getActiveState: () => activeState,
+    shows: () => wanted(entries),
     cycle,
     selectById,
     save: () => {
@@ -10002,6 +10187,8 @@ class GpuOverlayManager {
     });
     ro.observe(panel.root);
     ro.observe(panel.body);
+    if (panel.pinned)
+      ro.observe(panel.pinned);
     ro.observe(panel.presetStrip.track);
     const mo = new MutationObserver(() => {
       this.styleVersion++;
@@ -12711,7 +12898,9 @@ class GpuOverlayManager {
       }
       const ps = panel.presetStrip;
       const hinting = panel.root.classList.contains("knobs-hinting");
+      const stripAlpha = this.curAlpha;
       if (!ps.element.hidden) {
+        this.curAlpha = stripAlpha * this.presence(ps.element);
         const psHovered = this.curPanelHovered && ps.element.matches(":hover");
         this.curSubHovered = psHovered;
         const psRect = this.rectOf(ps.element);
@@ -12835,6 +13024,7 @@ class GpuOverlayManager {
             align: "center"
           });
         }
+        this.curAlpha = stripAlpha;
       }
       const tabs = panel.tabs;
       if (tabs && !tabs.element.hidden)
@@ -12950,7 +13140,7 @@ class GpuOverlayManager {
       }
       if (bodyRevealing || pageMoving)
         this.curBypassRectCache = true;
-      const bodyHovered = this.curPanelHovered && panel.body.matches(":hover");
+      const 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");
       const panelAlpha = this.curAlpha;
@@ -20907,14 +21097,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
@@ -20927,49 +21126,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}
@@ -21105,7 +21351,7 @@ var init_picker_css = __esm(() => {
 .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}
@@ -21209,6 +21455,15 @@ var readoutCss = `
 @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
 function injectUiStyles(doc) {
   injectTokens(doc);
@@ -21271,6 +21526,9 @@ var css3 = `
   --_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
@@ -21295,6 +21553,12 @@ var css3 = `
    --_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}
@@ -21429,11 +21693,9 @@ var css3 = `
 .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)}
@@ -21465,22 +21727,20 @@ var css3 = `
   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)}
@@ -21504,7 +21764,8 @@ var css3 = `
 .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}
@@ -21523,9 +21784,42 @@ var css3 = `
 .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(css3 + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss) + rolling_css_default, lookDefaults, svg = (body, box = 16) => `<svg viewBox="0 0 ${box} ${box}" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`, ICONS2;
+`, uiCss = () => aliased(css3 + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss + playerCss + selectionPillCss) + rolling_css_default, lookDefaults, svg = (body, box = 16) => `<svg viewBox="0 0 ${box} ${box}" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`, ICONS2;
 var init_look = __esm(() => {
   init_appearance();
   init_activity_css();
@@ -25474,7 +25768,7 @@ function buildPanel(controls, host, options) {
     titleEl.title = `${titleEl.textContent ? `${titleEl.textContent}
 ` : ""}Press ${show("help")} for keyboard shortcuts`;
   const presetLabel = (id) => options.presetLabels?.[id] ?? (id === "default" ? options.defaultLabel : undefined) ?? controls.presetLabel(id);
-  const presetStrip = createPresetStrip(doc, controls, showVariants, run, () => wakeGpu(), presetLabel);
+  const presetStrip = createPresetStrip(doc, controls, showVariants, run, () => wakeGpu(), presetLabel, (entries) => presetsTouchTab(entries));
   const tabStrip = createTabStrip(doc, (id, animate) => selectTab(id, animate));
   let activeTab;
   const searchOptions = typeof options.search === "object" ? options.search : {};
@@ -25517,6 +25811,10 @@ function buildPanel(controls, host, options) {
   ];
   const body = el("div");
   const tabMotion = tabTransition(body, root, () => wakeGpu());
+  const pinnedBody = el("div");
+  pinnedBody.className = "knobs-pinned";
+  if (!page)
+    body.append(presetStrip.element);
   const blocks = [];
   const cards = [];
   const groupResetButtons = new Map;
@@ -25998,8 +26296,12 @@ function buildPanel(controls, host, options) {
         section: field.section
       });
     }
-    return gatherSubsections(specs);
+    const planned = gatherSubsections(specs);
+    if (page || !planned.some(pinnedRow))
+      return planned;
+    return [...planned.filter(pinnedRow), ...planned.filter((spec) => !pinnedRow(spec))];
   };
+  const pinnedRow = (r) => !page && controls.isPinned(r.keys[0] ?? r.id);
   const gatherSubsections = (specs) => {
     const out = [];
     for (let i = 0;i < specs.length; ) {
@@ -26645,13 +26947,15 @@ function buildPanel(controls, host, options) {
       const runs = [];
       for (const r of next) {
         const last = runs.at(-1);
-        if (last && last.group === r.group)
+        const 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] });
       }
       const free = blocks.filter((b) => !b.leaving);
       const chosen = [];
+      const pinnedBlocks = new Set;
       const usedSubheads = new Set;
       for (const run of runs) {
         const at = free.findIndex((b) => b.group === run.group);
@@ -26669,6 +26973,8 @@ function buildPanel(controls, host, options) {
           }
         }
         chosen.push(block);
+        if (run.pinned)
+          pinnedBlocks.add(block);
         const nodes = [];
         let under;
         for (const r of run.rows) {
@@ -26700,7 +27006,9 @@ 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]));
+      const 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 (const block of free) {
         block.leaving = true;
         const fold = () => {
@@ -26831,19 +27139,28 @@ function buildPanel(controls, host, options) {
         return f.tab;
     return;
   };
-  const tabOf = (r) => r.field.tab ?? (r.group !== undefined ? groupTab(r.group) : undefined);
+  const tabOf = (r) => pinnedRow(r) ? undefined : r.field.tab ?? (r.group !== undefined ? groupTab(r.group) : undefined);
   const tabList = () => {
     if (page)
       return [];
     const list = (options.tabs ?? []).map((t) => typeof t === "string" ? { id: t, label: readableTitle(t) } : { id: t.id, label: t.label ?? readableTitle(t.id) });
     const seen = new Set(list.map((t) => t.id));
-    for (const f of Object.values(controls.schema))
-      if (f.tab !== undefined && !seen.has(f.tab)) {
+    for (const [key, f] of Object.entries(controls.schema))
+      if (f.tab !== undefined && !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 === undefined)
+      return true;
+    const keys = rows.flatMap((r) => {
+      const tab = tabOf(r);
+      return !pinnedRow(r) && (tab === undefined || tab === activeTab) ? r.keys : [];
+    });
+    return presetsTouch(entries, keys, controls.locked);
+  }
   function syncTabs() {
     const list = tabList();
     const has = (id) => id !== undefined && list.some((t) => t.id === id);
@@ -26906,6 +27223,7 @@ function buildPanel(controls, host, options) {
         want.set(b.head, any);
       want.set(b.card, any && !(b.group !== undefined && folds.get(b.group) && !finding));
     }
+    want.set(presetStrip.element, presetStrip.shows());
     return want;
   }
   const shift = (node, show, delay) => {
@@ -26929,6 +27247,9 @@ function buildPanel(controls, host, options) {
     }
     if (tabMotion.running)
       tabMotion.finish();
+    const strip = presetStrip.element;
+    if (strip.hidden === want.get(strip))
+      strip.hidden = !want.get(strip);
     const showing = (n) => !n.hidden && n.dataset.leaving !== "true";
     const set = (node, show, animate) => {
       if (showing(node) === show)
@@ -27215,10 +27536,10 @@ function buildPanel(controls, host, options) {
     root.append(header);
     if (showFooter)
       root.append(popover);
-    root.append(tabStrip.element);
+    root.append(pinnedBody, tabStrip.element);
     if (search)
       root.append(search.element);
-    root.append(presetStrip.element, body);
+    root.append(body);
     if (panelActions.length > 0)
       root.append(customActions);
     root.append(text, apply, status, live);
@@ -27518,34 +27839,47 @@ function buildPanel(controls, host, options) {
   let lastActionButton;
   const stops = () => {
     const list = [];
+    const 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 (const strip of strips)
+        list.push(...strip.stops);
       for (const stop of pageStops())
         list.push({ contains: (n) => stop.contains(n), focus: (o) => stop.focus(o) });
       return list;
     }
+    const stopOf = (stop) => ({
+      contains: (n) => stop.contains(n),
+      focus: (o) => stop.focus(o)
+    });
+    const shown = (stops) => stops.filter((s) => !s.closest('[hidden],[data-presence="out"]')).map(stopOf);
     const runs = rows.map((r) => ({
       at: r.row,
-      stops: r.editor?.stops() ?? [r.input]
+      stops: shown(r.editor?.stops() ?? [r.input])
     }));
     for (const 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 (const sh of subheads.values())
-      runs.push({ at: sh.el, stops: [sh.el] });
+      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 (const run of runs)
-      for (const 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);
     const bar = actionBarButtons();
     if (bar.length)
       list.push({
@@ -28999,6 +29333,7 @@ function buildPanel(controls, host, options) {
     id: controls.id,
     root,
     body,
+    pinned: pinnedBody,
     inline,
     header,
     titleEl,