@kitlangton/knobs 0.4.0-next.2 → 0.4.0-next.3

package/dist/ui-react.js

@@ -571,12 +571,20 @@ var compareCss = `
   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}
 :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}
+.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:pointer;white-space:nowrap;
+  transition:color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-cmp-mode:is(:hover,:focus-visible){color:var(--_k-fg)}
+/* 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-3);cursor:pointer;
+  transition:color calc(var(--_k-hover-out) * 1ms),background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_ku-wash)}
+.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
@@ -591,7 +599,8 @@ var compareCss = `
 /* 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}
+/* 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}
@@ -599,18 +608,21 @@ var compareCss = `
 /* 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-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 calc(var(--_k-hover-out) * 1ms)}
+/* The wipe: a hairline down the line with a raised grip at the pointer's height; a wider strip
+   takes the hand and the keys (a slider). It fades with the mode; 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;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)}
+.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 0 .5px rgba(0,0,0,.28),0 0 6px rgba(0,0,0,.25)}
+.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));background:var(--_k-bg-overlay);
+  box-shadow:var(--_k-shadow-overlay),inset 0 0 0 1px var(--_k-border),inset 0 1px 0 var(--_k-rim);will-change:transform;transition:box-shadow calc(var(--_k-hover-out) * 1ms)}
+.knobs-cmp-grip::before,.knobs-cmp-grip::after{content:"";position:absolute;top:10px;width:1px;height:8px;background:var(--_k-fg-3);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{box-shadow:var(--_k-shadow-overlay),inset 0 0 0 1px var(--_k-border-strong),inset 0 1px 0 var(--_k-rim)}
+.knobs-compare[data-dragging] .knobs-cmp-grip::before,.knobs-compare[data-dragging] .knobs-cmp-grip::after{background:var(--_k-fg)}
+.knobs-cmp-handle:focus-visible .knobs-cmp-grip,.knobs-compare[data-keyboard] .knobs-cmp-handle:focus .knobs-cmp-grip{box-shadow:var(--_k-shadow-overlay),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. */
@@ -619,12 +631,12 @@ var compareCss = `
   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}
+  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;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}
 .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)}
@@ -767,7 +779,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}
@@ -871,6 +883,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/tokens/color.ts
 function linearToOklch([r, g, b, a]) {
   const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
@@ -2719,11 +2740,9 @@ var css2 = `
 .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)}
@@ -2755,22 +2774,20 @@ var css2 = `
   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)}
@@ -2794,7 +2811,8 @@ var css2 = `
 .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}
@@ -2815,7 +2833,22 @@ var css2 = `
 .knobs-timeline[data-scrubbing] .knobs-tl-hover{opacity:0}
 @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(css2 + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss) + rolling_css_default, lookDefaults, tune = (s, m) => {
+.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}
+`, uiCss = () => aliased(css2 + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss + selectionPillCss) + rolling_css_default, lookDefaults, tune = (s, m) => {
   s.omega = m.omega;
   s.zeta = m.zeta;
   return s;
@@ -2973,33 +3006,29 @@ var init_diff_css = __esm(() => {
 .knobs-diff-fill{flex:1}
 .knobs-diff-nav{flex:none;display:inline-flex;align-items:center;gap:1px;color:var(--_k-fg-3);font-size:var(--_k-text-meta);font-variant-numeric:tabular-nums}
 .knobs-diff-nav>span{min-width:3.6em;text-align:center}
-:where(.knobs-ui) :is(.knobs-diff-btn,.knobs-diff-seg>button,.knobs-diff-viewed,.knobs-diff-filter>input,.knobs-diff-filter>button){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;border-radius:0;
+:where(.knobs-ui) :is(.knobs-diff-btn,.knobs-diff-choice,.knobs-diff-viewed,.knobs-diff-filter>input,.knobs-diff-filter>button){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;border-radius:0;
   margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
-.knobs-ui .knobs-diff-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:calc(var(--_k-radius) * 999);color:var(--_k-fg-3);cursor:pointer;
+.knobs-ui .knobs-diff-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);border-radius:calc(var(--_k-radius) * 999);color:var(--_k-fg-3);cursor:pointer;
   transition:background .15s,color .15s,opacity .15s}
 .knobs-ui .knobs-diff-btn:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
 .knobs-ui .knobs-diff-btn[aria-pressed="true"]{color:var(--_k-fg);background:var(--_ku-wash)}
 .knobs-ui .knobs-diff-btn:disabled{opacity:.35;cursor:default;background:transparent}
-.knobs-diff-btn svg{width:13px;height:13px}
+.knobs-diff-btn svg{width:16px;height:16px}
 /* Viewed: a check with its word, as on GitHub; the path dims once it's ticked. */
 .knobs-ui .knobs-diff-viewed{flex:none;display:inline-flex;align-items:center;gap:5px;height:var(--_k-control-h);padding:0 8px 0 6px;border-radius:var(--kd-ctl);color:var(--_k-fg-2);
   font-size:var(--_k-text-meta);font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
 .knobs-ui .knobs-diff-viewed:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
 .knobs-ui .knobs-diff-viewed[aria-pressed="true"]{color:var(--_k-fg);background:var(--_ku-wash)}
-.knobs-diff-viewed svg{width:13px;height:13px}
+.knobs-diff-viewed svg{width:16px;height:16px}
 .knobs-diff-viewed[aria-pressed="true"] svg{color:var(--kd-add)}
 .knobs-diff-path{transition:opacity .2s}
 .knobs-diff[data-viewed]>.knobs-diff-head .knobs-diff-path,.knobs-diff-part[data-viewed] .knobs-diff-path{opacity:.6}
-/* Split | Unified: one pill that glides between the two, raised as a panel's segments are (a
-   lighter bg in dark, near white in light). */
-.knobs-diff-seg{position:relative;flex:none;display:grid;grid-template-columns:1fr 1fr;height:var(--_k-control-h);padding:2px;border-radius:var(--kd-ctl);background:var(--_k-segmented-track)}
-.knobs-ui .knobs-diff-seg>button{position:relative;z-index:1;padding:0 9px;border-radius:max(0px,calc(var(--kd-ctl) - 2px));color:var(--_k-fg-2);font-size:var(--_k-text-meta);
-  font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:color .15s}
-.knobs-ui .knobs-diff-seg>button:is(:hover,:focus-visible),.knobs-ui .knobs-diff-seg>button[aria-checked="true"]{color:var(--_k-fg)}
-.knobs-diff-pill{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:max(0px,calc(var(--kd-ctl) - 2px));background:color-mix(in srgb,var(--_k-accent) 18%,var(--_k-segmented-active));
-  box-shadow:0 1px 2px rgba(0,0,0,calc(.16 * var(--k-lift,1)));transition:transform var(--_ku-ease-ms) var(--_ku-ease)}
-.knobs-diff-seg[data-value="unified"]>.knobs-diff-pill{transform:translateX(100%)}
-.knobs-diff[data-frame="flat"] .knobs-diff-pill{box-shadow:none}
+/* Split | Unified: the selection pill on the one picked, its bright copy the picked one's text; a
+   choice isn't brighter for being picked. Choices are styled by class, as the copy holds them too. */
+.knobs-diff-seg{position:relative;flex:none;display:grid;grid-template-columns:1fr 1fr;height:var(--_k-control-h);padding:2px;border-radius:var(--kd-ctl);background:var(--_k-fill)}
+.knobs-ui .knobs-diff-choice{padding:0 9px;border-radius:max(0px,calc(var(--kd-ctl) - 2px));color:var(--_k-fg-2);font-size:var(--_k-text-meta);
+  font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-diff-choice:is(:hover,:focus-visible){color:var(--_k-fg)}
 /* The diff: one layer per file or layout on show, the old fading under the new. */
 .knobs-diff-body{position:relative;flex:1;min-height:0}
 .knobs-diff-probe{position:absolute;left:0;top:0;width:0;height:var(--kd-line);visibility:hidden;pointer-events:none}
@@ -3094,7 +3123,7 @@ var init_diff_css = __esm(() => {
 .knobs-ui .knobs-diff-filter>input::placeholder{color:var(--_k-fg-3)}
 .knobs-ui .knobs-diff-filter>button{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;color:var(--_k-fg-3);cursor:pointer;transition:background .12s,color .12s,opacity .12s}
 .knobs-ui .knobs-diff-filter>button:hover{background:var(--_ku-wash-hi);color:var(--_k-fg)}
-.knobs-diff-filter>button svg{width:10px;height:10px}
+.knobs-diff-filter>button svg{width:12px;height:12px}
 .knobs-diff-list{position:relative;flex:1;min-height:0}
 .knobs-diff-files .knobs-diff-counts{font-size:var(--_k-text-meta);align-items:center}
 .knobs-diff-files .knobs-diff-counts{gap:5px}
@@ -3861,6 +3890,283 @@ var init_rgba = __esm(() => {
   cache = new Map;
 });
 
+// src/ui/icons.ts
+function icon(name, options = {}) {
+  const size = options.small ? 12 : 16;
+  return `<svg class="knobs-icon" viewBox="0 0 256 256" width="${size}" height="${size}" fill="currentColor" aria-hidden="true" focusable="false"><path d="${PATHS[name]}"/></svg>`;
+}
+var PATHS, ICON_NAMES;
+var init_icons = __esm(() => {
+  PATHS = {
+    arrowLeft: "M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z",
+    arrowUpRight: "M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z",
+    arrowSquareOut: "M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z",
+    arrowCounterClockwise: "M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z",
+    arrowUDownLeft: "M232,112a64.07,64.07,0,0,1-64,64H51.31l34.35,34.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48a8,8,0,0,1,11.32,11.32L51.31,160H168a48,48,0,0,0,0-96H80a8,8,0,0,1,0-16h88A64.07,64.07,0,0,1,232,112Z",
+    arrowsHorizontal: "M136,40V216a8,8,0,0,1-16,0V40a8,8,0,0,1,16,0ZM96,120H35.31l18.35-18.34A8,8,0,0,0,42.34,90.34l-32,32a8,8,0,0,0,0,11.32l32,32a8,8,0,0,0,11.32-11.32L35.31,136H96a8,8,0,0,0,0-16Zm149.66,2.34-32-32a8,8,0,0,0-11.32,11.32L220.69,120H160a8,8,0,0,0,0,16h60.69l-18.35,18.34a8,8,0,0,0,11.32,11.32l32-32A8,8,0,0,0,245.66,122.34Z",
+    caretDown: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z",
+    caretLeft: "M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z",
+    caretRight: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z",
+    caretUp: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z",
+    check: "M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z",
+    checkCircle: "M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z",
+    circle: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z",
+    copy: "M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z",
+    cornersIn: "M152,96V48a8,8,0,0,1,16,0V88h40a8,8,0,0,1,0,16H160A8,8,0,0,1,152,96ZM96,152H48a8,8,0,0,0,0,16H88v40a8,8,0,0,0,16,0V160A8,8,0,0,0,96,152Zm112,0H160a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V168h40a8,8,0,0,0,0-16ZM96,40a8,8,0,0,0-8,8V88H48a8,8,0,0,0,0,16H96a8,8,0,0,0,8-8V48A8,8,0,0,0,96,40Z",
+    cornersOut: "M216,48V88a8,8,0,0,1-16,0V56H168a8,8,0,0,1,0-16h40A8,8,0,0,1,216,48ZM88,200H56V168a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H88a8,8,0,0,0,0-16Zm120-40a8,8,0,0,0-8,8v32H168a8,8,0,0,0,0,16h40a8,8,0,0,0,8-8V168A8,8,0,0,0,208,160ZM88,40H48a8,8,0,0,0-8,8V88a8,8,0,0,0,16,0V56H88a8,8,0,0,0,0-16Z",
+    folder: "M216,72H130.67L102.93,51.2a16.12,16.12,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V200a16,16,0,0,0,16,16H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72Zm0,128H40V64H93.33L123.2,86.4A8,8,0,0,0,128,88h88Z",
+    keyboard: "M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192Zm-16-64a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,128Zm0-32a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,96ZM72,160a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16h8A8,8,0,0,1,72,160Zm96,0a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,160Zm40,0a8,8,0,0,1-8,8h-8a8,8,0,0,1,0-16h8A8,8,0,0,1,208,160Z",
+    magnifyingGlass: "M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z",
+    magnifyingGlassMinus: "M152,112a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h64A8,8,0,0,1,152,112Zm77.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88.11,88.11,0,1,1,11.31-11.31l50.07,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z",
+    magnifyingGlassPlus: "M152,112a8,8,0,0,1-8,8H120v24a8,8,0,0,1-16,0V120H80a8,8,0,0,1,0-16h24V80a8,8,0,0,1,16,0v24h24A8,8,0,0,1,152,112Zm77.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88.11,88.11,0,1,1,11.31-11.31l50.07,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z",
+    microphone: "M128,176a48.05,48.05,0,0,0,48-48V64a48,48,0,0,0-96,0v64A48.05,48.05,0,0,0,128,176ZM96,64a32,32,0,0,1,64,0v64a32,32,0,0,1-64,0Zm40,143.6V240a8,8,0,0,1-16,0V207.6A80.11,80.11,0,0,1,48,128a8,8,0,0,1,16,0,64,64,0,0,0,128,0,8,8,0,0,1,16,0A80.11,80.11,0,0,1,136,207.6Z",
+    paperPlaneRight: "M231.87,114l-168-95.89A16,16,0,0,0,40.92,37.34L71.55,128,40.92,218.67A16,16,0,0,0,56,240a16.15,16.15,0,0,0,7.93-2.1l167.92-96.05a16,16,0,0,0,.05-27.89ZM56,224a.56.56,0,0,0,0-.12L85.74,136H144a8,8,0,0,0,0-16H85.74L56.06,32.16A.46.46,0,0,0,56,32l168,95.83Z",
+    pencilSimple: "M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z",
+    repeat: "M24,128A72.08,72.08,0,0,1,96,56H204.69L194.34,45.66a8,8,0,0,1,11.32-11.32l24,24a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32-11.32L204.69,72H96a56.06,56.06,0,0,0-56,56,8,8,0,0,1-16,0Zm200-8a8,8,0,0,0-8,8,56.06,56.06,0,0,1-56,56H51.31l10.35-10.34a8,8,0,0,0-11.32-11.32l-24,24a8,8,0,0,0,0,11.32l24,24a8,8,0,0,0,11.32-11.32L51.31,200H160a72.08,72.08,0,0,0,72-72A8,8,0,0,0,224,120Z",
+    sidebar: "M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,56H80V200H40ZM216,200H96V56H216V200Z",
+    x: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
+  };
+  ICON_NAMES = Object.keys(PATHS);
+});
+
+// src/ui/selection-pill.ts
+function pillSpring(distance, base = SPRINGS.default) {
+  return distance > 400 ? { duration: base.duration * 1.4, bounce: base.bounce } : base;
+}
+function pillBoxOf(row, container) {
+  return {
+    x: row.left - container.left - container.clientLeft + container.scrollLeft,
+    y: row.top - container.top - container.clientTop + container.scrollTop,
+    w: row.width,
+    h: row.height
+  };
+}
+function pillRadius(from, to, h, k) {
+  const t = Math.abs(to.h - from.h) > 0.5 ? (h - from.h) / (to.h - from.h) : Number.isFinite(k) ? k : 1;
+  return from.r + (to.r - from.r) * Math.min(1, Math.max(0, t));
+}
+function pillProgress(from, to, at) {
+  const d = Math.hypot(to.x - from.x, to.y - from.y);
+  if (d < 0.5)
+    return 1;
+  const p = ((at.x - from.x) * (to.x - from.x) + (at.y - from.y) * (to.y - from.y)) / (d * d);
+  return Math.min(1, Math.max(0, p));
+}
+function planPill(state, next, flags = {}) {
+  if (!next)
+    return { kind: "hide" };
+  if (!state.shown || !state.at || flags.first || flags.reduced || flags.snap)
+    return { kind: "land", box: next };
+  const t = state.target;
+  if (t && t.x === next.x && t.y === next.y && t.w === next.w && t.h === next.h)
+    return { kind: "stay" };
+  const d = Math.hypot(next.x - state.at.x, next.y - state.at.y);
+  return { kind: "travel", box: next, spring: pillSpring(d) };
+}
+function selectionPill(container, options) {
+  const doc = container.ownerDocument;
+  const win = doc.defaultView;
+  injectUiStyles(doc);
+  if (win.getComputedStyle(container).position === "static")
+    container.style.position = "relative";
+  const pill = doc.createElement("i");
+  pill.className = "knobs-pick-pill";
+  pill.setAttribute("aria-hidden", "true");
+  pill.dataset.off = "";
+  const copyOn = options.copy !== false;
+  const copy = doc.createElement("div");
+  copy.className = "knobs-pick-copy";
+  copy.setAttribute("aria-hidden", "true");
+  copy.inert = true;
+  copy.dataset.off = "";
+  const copyRows = doc.createElement("div");
+  copyRows.className = "knobs-pick-copy-rows";
+  copy.append(copyRows);
+  container.prepend(pill);
+  if (copyOn)
+    container.append(copy);
+  const { omega, zeta } = springMotion(SPRINGS.default);
+  const springs = [0, 0, 0, 0].map(() => new Spring(0, omega, zeta, 0.01));
+  const [sx, sy, sw, sh] = springs;
+  let shown = false;
+  let first = true;
+  let target = null;
+  let from = { x: 0, y: 0, w: 0, h: 0 };
+  let fromR = 0;
+  let toR = 0;
+  let rowBoxes = [];
+  const clones = new Map;
+  let disposed = false;
+  const radiusOf = (row) => options.radius?.(row) ?? (Number.parseFloat(win.getComputedStyle(row).borderTopLeftRadius) || 0);
+  const rowsNow = () => options.rows ? [...options.rows()] : [...container.children].filter((n) => n !== pill && n !== copy);
+  const measure = (row) => {
+    const c = container.getBoundingClientRect();
+    const r = row.getBoundingClientRect();
+    return pillBoxOf(r, {
+      left: c.left,
+      top: c.top,
+      scrollLeft: container.scrollLeft,
+      scrollTop: container.scrollTop,
+      clientLeft: container.clientLeft,
+      clientTop: container.clientTop
+    });
+  };
+  const at = () => ({ x: sx.x, y: sy.x, w: sw.x, h: sh.x });
+  const syncCopy = (span) => {
+    if (!copyOn)
+      return;
+    const keep = new Set;
+    for (const { row, box } of rowBoxes) {
+      if (!boxesMeet(box, span))
+        continue;
+      keep.add(row);
+      let n = clones.get(row);
+      if (!n) {
+        n = row.cloneNode(true);
+        n.removeAttribute("id");
+        for (const d of n.querySelectorAll("[id]"))
+          d.removeAttribute("id");
+        clones.set(row, n);
+        copyRows.append(n);
+      }
+      const s = n.style;
+      s.position = "absolute";
+      s.inset = "auto";
+      s.left = `${box.x}px`;
+      s.top = `${box.y}px`;
+      s.width = `${box.w}px`;
+      s.height = `${box.h}px`;
+      s.margin = "0";
+      s.transform = "none";
+      s.clipPath = "";
+      s.opacity = "";
+      s.boxSizing = "border-box";
+      s.color = options.color ?? "var(--_k-fg)";
+    }
+    for (const [row, n] of clones)
+      if (!keep.has(row)) {
+        n.remove();
+        clones.delete(row);
+      }
+  };
+  const paint = () => {
+    const b = at();
+    const x0 = grid(b.x);
+    const y0 = grid(b.y);
+    const w = grid(b.x + b.w) - x0;
+    const h = grid(b.y + b.h) - y0;
+    const r = target ? pillRadius({ h: from.h, r: fromR }, { h: target.h, r: toR }, b.h, pillProgress(from, target, b)) : toR;
+    const radius = `${Math.max(0, Math.min(r, h / 2, w / 2)).toFixed(2)}px`;
+    for (const n of copyOn ? [pill, copy] : [pill]) {
+      n.style.transform = `translate3d(${x0}px,${y0}px,0)`;
+      n.style.width = `${w}px`;
+      n.style.height = `${h}px`;
+      n.style.borderRadius = radius;
+    }
+    if (copyOn)
+      copyRows.style.transform = `translate3d(${-x0}px,${-y0}px,0)`;
+  };
+  const loop = frameLoop(win, (dt) => {
+    for (const s of springs)
+      s.step(dt);
+    paint();
+    return springs.some((s) => !s.resting);
+  });
+  const show = (on) => {
+    shown = on;
+    pill.toggleAttribute("data-off", !on);
+    copy.toggleAttribute("data-off", !on);
+    container.toggleAttribute("data-pick-empty", !on);
+  };
+  const update = (o) => {
+    if (disposed)
+      return;
+    const row = options.selected();
+    const next = row?.isConnected ? measure(row) : null;
+    const plan = planPill({ shown, at: shown ? at() : null, target }, next, {
+      first,
+      reduced: reducedMotion(win),
+      ...o?.snap ? { snap: true } : {}
+    });
+    first = false;
+    for (const n of clones.values())
+      n.remove();
+    clones.clear();
+    rowBoxes = copyOn ? rowsNow().filter((r) => r.isConnected).map((r) => ({ row: r, box: measure(r) })) : [];
+    if (plan.kind === "hide") {
+      if (shown)
+        show(false);
+      return;
+    }
+    if (plan.kind === "stay") {
+      syncCopy(boxUnion(at(), target));
+      return;
+    }
+    const r = radiusOf(row);
+    if (plan.kind === "land") {
+      sx.snap(plan.box.x);
+      sy.snap(plan.box.y);
+      sw.snap(plan.box.w);
+      sh.snap(plan.box.h);
+      from = plan.box;
+      fromR = r;
+      toR = r;
+      target = plan.box;
+      syncCopy(plan.box);
+      paint();
+      loop.stop();
+      if (!shown)
+        show(true);
+      return;
+    }
+    const m = springMotion(plan.spring);
+    for (const s of springs) {
+      s.omega = m.omega;
+      s.zeta = m.zeta;
+    }
+    const now = at();
+    fromR = target ? pillRadius({ h: from.h, r: fromR }, { h: target.h, r: toR }, now.h, pillProgress(from, target, now)) : r;
+    from = now;
+    toR = r;
+    target = plan.box;
+    sx.set(plan.box.x);
+    sy.set(plan.box.y);
+    sw.set(plan.box.w);
+    sh.set(plan.box.h);
+    syncCopy(boxUnion(now, plan.box));
+    loop.wake();
+  };
+  const ro = "ResizeObserver" in win ? new win.ResizeObserver(() => update({ snap: true })) : null;
+  ro?.observe(container);
+  update();
+  return {
+    element: pill,
+    update,
+    dispose() {
+      disposed = true;
+      loop.stop();
+      ro?.disconnect();
+      pill.remove();
+      copy.remove();
+      container.removeAttribute("data-pick-empty");
+    }
+  };
+}
+var boxesMeet = (a, b) => a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h, boxUnion = (a, b) => {
+  const x = Math.min(a.x, b.x);
+  const y = Math.min(a.y, b.y);
+  return {
+    x,
+    y,
+    w: Math.max(a.x + a.w, b.x + b.w) - x,
+    h: Math.max(a.y + a.h, b.y + b.h) - y
+  };
+}, grid = (v) => Math.round(v * 64) / 64;
+var init_selection_pill = __esm(() => {
+  init_motion();
+  init_look();
+});
+
 // src/panel/hints.ts
 function extractWords(text) {
   return text.toLowerCase().match(/[a-z]+/g) ?? [];
@@ -4689,34 +4995,27 @@ function tree(container, options) {
   const empty = doc.createElement("div");
   empty.className = "knobs-tree-empty";
   empty.hidden = true;
-  const cursor = doc.createElement("div");
-  cursor.className = "knobs-tree-cursor";
-  root.append(space, cursor, line, empty);
-  const cursorY = new Spring(0, MOVE.omega, MOVE.zeta, 0.1);
-  let cursorOn = false;
-  const drawCursor = () => {
-    cursor.style.transform = `translate3d(0,${Math.round(cursorY.x * 2) / 2}px,0)`;
+  root.append(space, line, empty);
+  let pill = null;
+  let picked = null;
+  let travelUntil = 0;
+  const pickedRow = () => {
+    const id = sel.ids.length === 1 ? sel.ids[0] : null;
+    const v = id === null ? undefined : views.get(id);
+    return v && !v.leaving && rowIndex.has(v.id) ? v : null;
   };
   const placeCursor = (animate) => {
-    if (!options.glide)
+    if (!pill)
       return;
     const id = sel.ids.length === 1 ? sel.ids[0] : null;
-    const i = id === null ? undefined : rowIndex.get(id);
-    root.toggleAttribute("data-glide", i !== undefined);
-    if (i === undefined) {
-      cursor.removeAttribute("data-on");
-      cursorOn = false;
-      return;
-    }
-    if (cursorOn && animate && !reducedMotion(win))
-      cursorY.set(i * h);
-    else
-      cursorY.snap(i * h);
-    cursorOn = true;
-    cursor.setAttribute("data-on", "");
-    drawCursor();
-    if (!cursorY.resting)
-      loop.wake();
+    root.toggleAttribute("data-glide", id !== null && rowIndex.has(id));
+    const fresh = id !== picked;
+    picked = id;
+    if (animate && fresh) {
+      travelUntil = performance.now() + 450;
+      pill.update();
+    } else if (performance.now() >= travelUntil)
+      pill.update({ snap: true });
   };
   container.append(root);
   const scrollbar = overlayScrollbar(root, space);
@@ -4745,6 +5044,12 @@ function tree(container, options) {
   };
   const views = new Map;
   const pool = [];
+  if (options.glide)
+    pill = selectionPill(root, {
+      rows: () => [...views.values()].filter((v) => !v.leaving).map((v) => v.el),
+      selected: () => pickedRow()?.el ?? null,
+      radius: (row) => Number.parseFloat(win.getComputedStyle(row, "::before").borderTopLeftRadius) || 0
+    });
   const makeView = (id) => {
     const v = pool.pop() ?? createView();
     v.id = id;
@@ -4925,12 +5230,6 @@ function tree(container, options) {
   function frame(dt) {
     let moving = false;
     let bottom = rows.length * h;
-    if (options.glide && !cursorY.resting) {
-      cursorY.step(dt);
-      drawCursor();
-      if (!cursorY.resting)
-        moving = true;
-    }
     for (const v of views.values()) {
       v.y.step(dt);
       if (!v.y.resting)
@@ -4950,6 +5249,8 @@ function tree(container, options) {
     }
     setSpace(moving ? bottom : rows.length * h);
     trim();
+    if (pill && moving && performance.now() >= travelUntil)
+      pill.update({ snap: true });
     return moving;
   }
   const trim = () => {
@@ -5578,6 +5879,7 @@ function tree(container, options) {
       autoScroll.stop();
       ro.disconnect();
       scrollbar.dispose();
+      pill?.dispose();
       dragging?.ghost.remove();
       root.remove();
     }
@@ -5596,6 +5898,7 @@ var init_tree = __esm(() => {
   init_motion();
   init_page_hints();
   init_look();
+  init_selection_pill();
   init_tree_model();
   MOVE = springMotion(SPRINGS.default);
 });
@@ -5732,7 +6035,7 @@ function codeDiff(container, options) {
   };
   const nav = make("span", "knobs-diff-nav");
   const prev = button("Previous file", PREV);
-  const next = button("Next file", ICONS.caret);
+  const next = button("Next file", NEXT);
   const place = make("span", "");
   nav.append(prev, place, next);
   const wrapButton = button("Wrap lines", WRAP);
@@ -5753,9 +6056,8 @@ function codeDiff(container, options) {
   const seg = make("div", "knobs-diff-seg");
   seg.setAttribute("role", "radiogroup");
   seg.setAttribute("aria-label", "Layout");
-  const pill = make("i", "knobs-diff-pill");
   const choice = (value, label) => {
-    const b = make("button", "");
+    const b = make("button", "knobs-diff-choice");
     b.type = "button";
     b.setAttribute("role", "radio");
     b.dataset.value = value;
@@ -5764,7 +6066,7 @@ function codeDiff(container, options) {
   };
   const splitButton = choice("split", "Split");
   const unifiedButton = choice("unified", "Unified");
-  seg.append(pill, splitButton, unifiedButton);
+  seg.append(splitButton, unifiedButton);
   if (options.lead)
     head.append(options.lead);
   head.append(path, stat, make("span", "knobs-diff-fill"), nav, wrapButton, seg, viewedButton);
@@ -5775,6 +6077,11 @@ function codeDiff(container, options) {
   body.append(note, probe);
   root.append(head, body);
   container.append(root);
+  const segPill = selectionPill(seg, {
+    rows: () => [splitButton, unifiedButton],
+    selected: () => layout === "split" ? splitButton : unifiedButton
+  });
+  let pilled = layout;
   const fileNow = () => files.find((f) => f.name === current) ?? null;
   const paintHead = () => {
     const file = fileNow();
@@ -5807,6 +6114,10 @@ function codeDiff(container, options) {
     next.disabled = at >= files.length - 1;
     wrapButton.setAttribute("aria-pressed", String(wrap));
     seg.dataset.value = layout;
+    if (pilled !== layout) {
+      pilled = layout;
+      segPill.update();
+    }
     splitButton.setAttribute("aria-checked", String(layout === "split"));
     unifiedButton.setAttribute("aria-checked", String(layout === "unified"));
     splitButton.tabIndex = layout === "split" ? 0 : -1;
@@ -6641,6 +6952,7 @@ function codeDiff(container, options) {
     dispose() {
       disposed = true;
       loop.stop();
+      segPill.dispose();
       sizes.disconnect();
       attaching.disconnect();
       resized.disconnect();
@@ -6996,7 +7308,7 @@ function diffReview(container, options) {
     }
   };
 }
-var lib, load = () => lib ??= import("@pierre/diffs"), SYNTAX, IN, OUT, FADE4, HEIGHT, DRAWER, BLUR = 3, WRAP, PREV, UNVIEWED, VIEWED, SEARCH, CLEAR2, SIDEBAR, SEPARATOR = 32;
+var lib, load = () => lib ??= import("@pierre/diffs"), SYNTAX, IN, OUT, FADE4, HEIGHT, DRAWER, BLUR = 3, WRAP, PREV, NEXT, UNVIEWED, VIEWED, SEARCH, CLEAR2, SIDEBAR, SEPARATOR = 32;
 var init_diff = __esm(() => {
   init_glide();
   init_motion();
@@ -7004,6 +7316,8 @@ var init_diff = __esm(() => {
   init_diff_model();
   init_look();
   init_rgba();
+  init_icons();
+  init_selection_pill();
   init_tree();
   SYNTAX = { dark: "pierre-dark", light: "pierre-light" };
   IN = springMotion(SPRINGS.default);
@@ -7011,13 +7325,14 @@ var init_diff = __esm(() => {
   FADE4 = springMotion(FADE);
   HEIGHT = springMotion(SPRINGS.calm);
   DRAWER = springMotion(SPRINGS.calm);
-  WRAP = svg('<path d="M2.5 4h11"/><path d="M2.5 8h9a2 2 0 0 1 0 4H8.5"/><path d="M10 10.5 8.5 12l1.5 1.5"/><path d="M2.5 12h3"/>');
-  PREV = svg('<path d="M10 3.5 5.5 8l4.5 4.5"/>');
-  UNVIEWED = svg('<circle cx="8" cy="8" r="5.5"/>');
-  VIEWED = svg('<circle cx="8" cy="8" r="5.5"/><path d="m5.6 8.1 1.7 1.7 3.2-3.5"/>');
-  SEARCH = svg('<circle cx="7" cy="7" r="4.5"/><path d="m10.5 10.5 3 3"/>');
-  CLEAR2 = svg('<path d="m5 5 6 6M11 5l-6 6"/>');
-  SIDEBAR = svg('<rect x="2" y="3" width="12" height="10" rx="2"/><path d="M6.5 3v10"/>');
+  WRAP = icon("arrowUDownLeft");
+  PREV = icon("caretLeft");
+  NEXT = icon("caretRight");
+  UNVIEWED = icon("circle");
+  VIEWED = icon("checkCircle");
+  SEARCH = icon("magnifyingGlass", { small: true });
+  CLEAR2 = icon("x", { small: true });
+  SIDEBAR = icon("sidebar");
 });
 
 // src/ui/layer.ts
@@ -8000,10 +8315,25 @@ function advance(t, dt, o) {
   }
   return { t: hi, ended: true, wrapped: false };
 }
-var SECOND_STEPS, FRAME_STEPS, toFrame = (t, fps) => Math.round(t * fps), frameTime = (t, fps) => Math.round(t * fps) / fps, round = (t) => Math.round(t * 1e6) / 1e6;
+function moveHead(head, t, motion, catching, minGap = 0) {
+  if (motion === "jump" && Math.abs(t - head.x) > minGap)
+    return { x: head.x, target: t, catching: true };
+  if (catching)
+    return { x: head.x + (t - head.target), target: t, catching: true };
+  return { x: t, target: t, catching: false };
+}
+function currentMarker(markers, t, fps) {
+  let best = null;
+  for (const m of markers)
+    if (m.time <= t + 0.5 / fps && (!best || m.time >= best.time))
+      best = m;
+  return best;
+}
+var SECOND_STEPS, FRAME_STEPS, toFrame = (t, fps) => Math.round(t * fps), frameTime = (t, fps) => Math.round(t * fps) / fps, round = (t) => Math.round(t * 1e6) / 1e6, CATCH_UP;
 var init_timeline_model = __esm(() => {
   SECOND_STEPS = [0.1, 0.2, 0.25, 0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600];
   FRAME_STEPS = [1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600, 9000, 18000];
+  CATCH_UP = { duration: 0.15, bounce: 0 };
 });
 
 // src/ui/timeline.ts
@@ -8016,6 +8346,7 @@ function timeline(container, options) {
   let speed = options.speed ?? 1;
   let repeat = options.repeat ?? true;
   const arrows = options.arrows ?? "frames";
+  const lane = options.variant === "lane";
   let time = Math.min(duration, Math.max(0, options.time ?? 0));
   let playing = false;
   let markers = [...options.markers ?? []];
@@ -8049,27 +8380,27 @@ function timeline(container, options) {
   root.setAttribute("aria-label", options.label ?? "Timeline");
   root.setAttribute("aria-keyshortcuts", "Space ArrowLeft ArrowRight , . Home End [ ] I O M");
   applyLook2(root, options);
+  if (lane)
+    root.dataset.variant = "lane";
   const transport = el("div", "knobs-tl-transport");
   const playBtn = el("button", "knobs-tl-play");
   playBtn.type = "button";
   playBtn.tabIndex = -1;
-  const readout = el("div", "knobs-tl-time");
-  const now = el("span", "knobs-tl-now");
-  const sub = el("span", "knobs-tl-sub");
-  readout.append(now, sub);
-  transport.append(playBtn, readout);
+  transport.append(playBtn);
   const track = el("div", "knobs-tl-track");
   const canvas = el("canvas", "knobs-tl-ruler");
   canvas.setAttribute("aria-hidden", "true");
-  const lane = el("div", "knobs-tl-lane");
+  const markerLane = el("div", "knobs-tl-lane");
   const hover = el("div", "knobs-tl-hover");
+  const tag = el("span", "knobs-tl-tag");
+  tag.setAttribute("aria-hidden", "true");
   const head = el("div", "knobs-tl-head");
   head.id = `${id}-head`;
   head.setAttribute("role", "slider");
   head.setAttribute("aria-label", "Playhead");
   head.setAttribute("aria-valuemin", "0");
   head.setAttribute("aria-valuemax", String(duration));
-  track.append(canvas, lane, hover, head);
+  track.append(canvas, markerLane, hover, head, tag);
   root.append(transport, track);
   container.append(root);
   let width = 1;
@@ -8116,13 +8447,14 @@ function timeline(container, options) {
   let drawn = "";
   const drawRuler = () => {
     const v = view();
-    const key = `${v.start.toFixed(6)}:${v.span.toFixed(6)}:${width}:${units}:${fps}`;
+    const key = `${v.start.toFixed(6)}:${v.span.toFixed(6)}:${width}:${height}:${units}:${fps}`;
     if (key === drawn)
       return;
     drawn = key;
     const dpr = win.devicePixelRatio || 1;
     const w = Math.max(1, Math.round(width * dpr));
-    const h = Math.round(RULER * dpr);
+    const rh = lane ? height : RULER;
+    const h = Math.round(rh * dpr);
     if (canvas.width !== w || canvas.height !== h) {
       canvas.width = w;
       canvas.height = h;
@@ -8131,8 +8463,19 @@ function timeline(container, options) {
     if (!ctx)
       return;
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    ctx.clearRect(0, 0, width, RULER);
+    ctx.clearRect(0, 0, width, rh);
     const ticks = rulerTicks(v, width, { fps, units });
+    if (lane) {
+      ctx.fillStyle = colors.tick;
+      for (const t of ticks.minor)
+        if (t >= -0.000000001 && t <= duration + 0.000000001)
+          ctx.fillRect(xOf(t) - 0.5, rh - 4, 1, 4);
+      ctx.fillStyle = colors.major;
+      for (const m of ticks.major)
+        if (m.t >= -0.000000001 && m.t <= duration + 0.000000001)
+          ctx.fillRect(xOf(m.t) - 0.5, rh - 7, 1, 7);
+      return;
+    }
     const px = (t) => Math.round(xOf(t)) + 0.5;
     ctx.fillStyle = colors.line;
     ctx.fillRect(0, RULER - 1, width, 1);
@@ -8172,18 +8515,21 @@ function timeline(container, options) {
         n.dataset.id = m.id;
         const pin = el("span", "knobs-tl-pin");
         const label = el("span", "knobs-tl-mlabel");
+        label.append(el("span", "knobs-tl-mtext knobs-scroll-fade-x"));
         n.append(pin, label);
-        lane.append(n);
+        markerLane.append(n);
         markerEls.set(m.id, n);
         if (built)
           enter(n);
       }
       const label = n.querySelector(".knobs-tl-mlabel");
-      if (label.textContent !== (m.label ?? ""))
-        label.textContent = m.label ?? "";
+      const text = label.firstElementChild;
+      if (text.textContent !== (m.label ?? ""))
+        text.textContent = m.label ?? "";
       label.hidden = !m.label;
       n.style.setProperty("--knobs-tl-color", m.color ?? "");
       n.toggleAttribute("data-selected", selected?.kind === "marker" && selected.id === m.id);
+      n.toggleAttribute("data-current", m.id === currentId);
       n.title = `${m.label ? `${m.label} · ` : ""}${clock(m.time)}`;
     }
     placeMarkers();
@@ -8211,7 +8557,7 @@ function timeline(container, options) {
         b.dataset.edge = "end";
         const label = el("span", "knobs-tl-rlabel");
         n.append(label, a, b);
-        track.insertBefore(n, lane);
+        track.insertBefore(n, markerLane);
         rangeEls.set(r.id, n);
         if (built)
           enter(n);
@@ -8260,16 +8606,17 @@ function timeline(container, options) {
   };
   const clock = (t) => units === "frames" ? `f${toFrame(t, fps)}` : `${timeLabel(t, "seconds", fps, 0.01)}`;
   let shownHead = time;
+  let currentId = null;
   const renderHead = () => {
     head.style.transform = `translateX(${xOf(shownHead).toFixed(2)}px)`;
-    const main = units === "frames" ? `f${toFrame(time, fps)}` : `${time.toFixed(2)}s`;
-    const minor = units === "frames" ? `${time.toFixed(2)}s` : `f${toFrame(time, fps)}`;
-    if (now.textContent !== main)
-      now.textContent = main;
-    if (sub.textContent !== minor)
-      sub.textContent = minor;
     head.setAttribute("aria-valuenow", time.toFixed(3));
     head.setAttribute("aria-valuetext", `${time.toFixed(2)} seconds, frame ${toFrame(time, fps)}`);
+    const cur = currentMarker(markers, time, fps)?.id ?? null;
+    if (cur !== currentId) {
+      markerEls.get(currentId ?? "")?.removeAttribute("data-current");
+      currentId = cur;
+      markerEls.get(cur ?? "")?.setAttribute("data-current", "");
+    }
   };
   let viewSent = "";
   const render = () => {
@@ -8295,18 +8642,27 @@ function timeline(container, options) {
   };
   const caret = new Spring(time, GLIDE.omega, GLIDE.zeta, 0.00001);
   let gliding = false;
-  const setTime = (t, source, shown = t, glide = false) => {
-    const next = Math.min(duration, Math.max(0, t));
-    if (glide && !reducedMotion(win)) {
+  const headTo = (shown, motion) => {
+    const from = gliding ? { x: caret.x, target: caret.target } : { x: shownHead, target: shownHead };
+    const jump = motion === "jump" && !reducedMotion(win);
+    const next = moveHead(from, shown, jump ? "jump" : "follow", gliding, 2 / pxPerSec());
+    if (next.catching) {
       if (!gliding)
-        caret.snap(shownHead);
-      caret.set(next);
+        caret.snap(from.x);
+      caret.x = next.x;
+      caret.target = next.target;
       gliding = true;
+      shownHead = caret.x;
       loop.wake();
     } else {
       gliding = false;
-      shownHead = shown;
+      caret.snap(next.x);
+      shownHead = next.x;
     }
+  };
+  const setTime = (t, source, shown = t, glide = false) => {
+    const next = Math.min(duration, Math.max(0, t));
+    headTo(Math.min(duration, Math.max(0, shown)), glide ? "jump" : "follow");
     const moved = next !== time;
     time = next;
     renderHead();
@@ -8347,8 +8703,7 @@ function timeline(container, options) {
             options.onCross?.(m);
       }
       time = step.t;
-      shownHead = time;
-      gliding = false;
+      headTo(time, step.wrapped ? "jump" : "follow");
       emitSeek(time, "play");
       keepInView();
       if (step.ended) {
@@ -8361,7 +8716,7 @@ function timeline(container, options) {
       shownHead = caret.step(dt);
       if (caret.resting) {
         gliding = false;
-        shownHead = time;
+        shownHead = caret.target;
       }
     }
     vStart.step(dt);
@@ -8374,9 +8729,9 @@ function timeline(container, options) {
       return;
     const r = loopRange();
     if (r && (time < r.start || time >= r.end - 0.5 / fps))
-      setTime(r.start, "code");
+      setTime(r.start, "code", r.start, true);
     else if (!r && time >= duration - 0.5 / fps)
-      setTime(0, "code");
+      setTime(0, "code", 0, true);
     playing = true;
     syncPlay();
     emitPlay(true);
@@ -8505,24 +8860,35 @@ function timeline(container, options) {
   };
   const localX = (e) => e.clientX - track.getBoundingClientRect().left;
   let drag = null;
-  const scrubTo = (x) => {
+  const scrubTo = (x, press = false) => {
     const shownX = softClamp(x, xOf(0), xOf(duration), 10);
     const s = scrubTime(tOf(shownX), {
       duration,
       fps,
       pxPerSec: pxPerSec(),
-      stops: snapMarkers ? markers.map((m) => m.time) : [],
+      stops: snapMarkers && !lane ? markers.map((m) => m.time) : [],
       frames: snapFrames
     });
-    setTime(s.t, "scrub", s.shown);
+    setTime(s.t, "scrub", s.shown, press);
     root.toggleAttribute("data-stuck", s.stop !== null);
   };
+  const showTag = (x) => {
+    const at = Math.min(duration, Math.max(0, tOf(x)));
+    const text = `${at.toFixed(2)} s`;
+    if (tag.textContent !== text)
+      tag.textContent = text;
+    const cx = Math.min(width, Math.max(0, x));
+    const flip = cx > width - tag.offsetWidth - 12;
+    tag.style.transform = `translateX(${cx.toFixed(1)}px) translateX(${flip ? "calc(-100% - 4px)" : "4px"})`;
+    tag.dataset.on = "";
+  };
+  const hideTag = () => delete tag.dataset.on;
   track.addEventListener("pointerdown", (e) => {
     if (e.button !== 0 || editing)
       return;
     root.focus({ preventScroll: true });
     const t = e.target;
-    const markerEl = t.closest(".knobs-tl-marker");
+    const markerEl = lane ? null : t.closest(".knobs-tl-marker");
     const edgeEl = t.closest(".knobs-tl-edge");
     const rangeEl = t.closest(".knobs-tl-range");
     track.setPointerCapture(e.pointerId);
@@ -8567,13 +8933,16 @@ function timeline(container, options) {
       root.dataset.scrubbing = "";
       for (const l of listeners)
         l.onScrub?.(true);
-      scrubTo(localX(e));
+      scrubTo(localX(e), true);
+      showTag(localX(e));
     }
     e.preventDefault();
   });
   track.addEventListener("pointermove", (e) => {
     const x = localX(e);
     hover.style.transform = `translateX(${x.toFixed(1)}px)`;
+    if (!drag || drag.kind === "scrub")
+      showTag(x);
     if (!drag)
       return;
     if (drag.kind === "scrub")
@@ -8619,8 +8988,10 @@ function timeline(container, options) {
     delete root.dataset.dragging;
     root.removeAttribute("data-stuck");
     if (d.kind === "scrub") {
-      shownHead = time;
+      headTo(time, "follow");
       renderHead();
+      if (!track.matches(":hover"))
+        hideTag();
       for (const l of listeners)
         l.onScrub?.(false);
       if (d.wasPlaying)
@@ -8633,7 +9004,7 @@ function timeline(container, options) {
       } else {
         const m = markers.find((x) => x.id === d.id);
         if (m)
-          setTime(m.time, "marker");
+          setTime(m.time, "marker", m.time, true);
       }
     } else if (d.kind === "edge" || d.moved)
       emitRanges();
@@ -8642,10 +9013,14 @@ function timeline(container, options) {
   track.addEventListener("pointercancel", endDrag);
   track.addEventListener("lostpointercapture", endDrag);
   track.addEventListener("pointerleave", () => {
-    if (!drag)
-      hover.style.transform = "translateX(-100px)";
+    if (drag)
+      return;
+    hover.style.transform = "translateX(-100px)";
+    hideTag();
   });
   track.addEventListener("dblclick", (e) => {
+    if (lane)
+      return;
     const markerEl = e.target.closest(".knobs-tl-marker");
     if (markerEl)
       return rename(markerEl.dataset.id);
@@ -8656,6 +9031,8 @@ function timeline(container, options) {
       rename(m.id);
   });
   track.addEventListener("wheel", (e) => {
+    if (lane)
+      return;
     e.preventDefault();
     const scale = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? height : 1;
     if (e.ctrlKey || e.metaKey) {
@@ -8719,7 +9096,7 @@ function timeline(container, options) {
         if (!m)
           return;
         select({ kind: "marker", id: m.id });
-        return setTime(m.time, "marker");
+        return setTime(m.time, "marker", m.time, true);
       }
       case "i":
       case "I":
@@ -8731,11 +9108,13 @@ function timeline(container, options) {
         return setEdge("end", time);
       case "m":
       case "M":
+        if (lane)
+          return;
         claim();
         addMarker(time);
         return;
       case "Enter":
-        if (selected?.kind === "marker") {
+        if (selected?.kind === "marker" && !lane) {
           claim();
           rename(selected.id);
         }
@@ -8753,19 +9132,25 @@ function timeline(container, options) {
         return;
       case "=":
       case "+":
+        if (lane)
+          return;
         claim();
         return zoom(1.5);
       case "-":
+        if (lane)
+          return;
         claim();
         return zoom(1 / 1.5);
       case "0":
+        if (lane)
+          return;
         claim();
         return fit();
     }
   });
   const unregisterHints = options.hints === false ? undefined : hints.register(root, () => [
     { el: playBtn, label: playing ? "Pause" : "Play", activate: toggle },
-    ...markers.flatMap((m) => {
+    ...(lane ? [] : markers).flatMap((m) => {
       const n = markerEls.get(m.id);
       if (!n || n.dataset.leaving !== undefined)
         return [];
@@ -8777,7 +9162,7 @@ function timeline(container, options) {
           ...label && !label.hidden ? { labelEl: label } : {},
           activate: () => {
             select({ kind: "marker", id: m.id });
-            setTime(m.time, "marker");
+            setTime(m.time, "marker", m.time, true);
             root.focus({ preventScroll: true });
           }
         }
@@ -8789,7 +9174,7 @@ function timeline(container, options) {
       activate: () => root.focus({ preventScroll: true })
     }
   ], { listen: false, rank: 1 });
-  const menu = contextMenu(track, (e) => {
+  const menu = lane ? null : contextMenu(track, (e) => {
     const t = e?.target ?? null;
     const markerEl = t?.closest(".knobs-tl-marker");
     const rangeEl = t?.closest(".knobs-tl-range");
@@ -8804,7 +9189,7 @@ function timeline(container, options) {
           run: () => {
             const m = markers.find((x) => x.id === mid);
             if (m)
-              setTime(m.time, "marker");
+              setTime(m.time, "marker", m.time, true);
           }
         },
         { label: "Rename…", shortcut: "Enter", run: () => rename(mid) },
@@ -8968,7 +9353,7 @@ function timeline(container, options) {
       listeners.clear();
       loop.stop();
       ro.disconnect();
-      menu.dispose();
+      menu?.dispose();
       root.remove();
     }
   };
@@ -8985,10 +9370,21 @@ var init_timeline = __esm(() => {
   init_timeline_model();
   INSTANT2 = springMotion(SPRINGS.instant);
   CALM = springMotion(SPRINGS.calm);
-  GLIDE = springMotion(SPRINGS.snappy);
+  GLIDE = springMotion(CATCH_UP);
 });
 
 // src/ui/compare-model.ts
+function compareModes(modes, mode) {
+  const list = [...new Set((modes ?? ["side", "wipe"]).filter((m) => ALL_MODES.includes(m)))];
+  const offered = list.length ? list : ["side", "wipe"];
+  return { modes: offered, mode: mode && offered.includes(mode) ? mode : offered[0] };
+}
+function modeForKey(key, modes) {
+  const k = key.toLowerCase();
+  if (/^[1-9]$/.test(k))
+    return modes[Number(k) - 1] ?? null;
+  return modes.find((m) => MODE_KEYS[m] === k) ?? null;
+}
 function mediaKind(src, kind) {
   if (kind)
     return kind;
@@ -9067,6 +9463,18 @@ function wipeGrab(x, rect, wipe, slop = 12) {
   const onLine = Math.abs(x - line) <= slop;
   return { onLine, offset: onLine ? x - line : 0 };
 }
+function seamLabels(x, left, right, wb, wa, gap = 8) {
+  const room = (space, w) => Math.min(1, Math.max(0, (space - w - 2 * gap) / gap));
+  return {
+    before: { x: x - gap - wb, opacity: room(x - left, wb) },
+    after: { x: x + gap, opacity: room(right - x, wa) }
+  };
+}
+function gripTop(y, rect, grip, margin = 8) {
+  const lo = rect.y + margin;
+  const hi = rect.y + rect.h - margin - grip;
+  return hi < lo ? rect.y + (rect.h - grip) / 2 : Math.min(hi, Math.max(lo, y - grip / 2));
+}
 function stripColumns(view, width, o) {
   const { fps } = o;
   const total = Math.max(1, Math.round(o.duration * fps));
@@ -9117,7 +9525,7 @@ function stripPeaks(diffs, o = {}) {
   });
   return out;
 }
-var VIDEO, frameOf = (t, fps) => Math.max(0, Math.floor(t * fps + 0.0001)), lastFrame = (duration, fps) => Math.max(0, Math.ceil(duration * fps - 0.0001) - 1), sameFrame = (a, b, fps) => frameOf(a, fps) === frameOf(b, fps), SEEK_IDLE, splitHeight = (w, media) => media.w > 0 && media.h > 0 ? w / 2 * (media.h / media.w) : w / 2 * (9 / 16), ZOOM_FIT, ZOOM_MAX = 16, panBy = (r, dx, dy, base) => clampZoom({
+var ALL_MODES, MODE_KEYS, modeKey = (mode) => MODE_KEYS[mode].toUpperCase(), VIDEO, frameOf = (t, fps) => Math.max(0, Math.floor(t * fps + 0.0001)), lastFrame = (duration, fps) => Math.max(0, Math.ceil(duration * fps - 0.0001) - 1), sameFrame = (a, b, fps) => frameOf(a, fps) === frameOf(b, fps), SEEK_IDLE, splitHeight = (w, media) => media.w > 0 && media.h > 0 ? w / 2 * (media.h / media.w) : w / 2 * (9 / 16), ZOOM_FIT, ZOOM_MAX = 16, panBy = (r, dx, dy, base) => clampZoom({
   u: r.u - dx / Math.max(1, base.w) * r.w,
   v: r.v - dy / Math.max(1, base.h) * r.h,
   w: r.w
@@ -9136,6 +9544,8 @@ var VIDEO, frameOf = (t, fps) => Math.max(0, Math.floor(t * fps + 0.0001)), last
   h: a.h + (b.h - a.h) * k
 }), wipeX = (rect, wipe) => rect.x + Math.min(1, Math.max(0, wipe)) * rect.w, wipeAt = (x, rect, offset = 0) => rect.w <= 0 ? 0.5 : Math.min(1, Math.max(0, (x - offset - rect.x) / rect.w)), wipeKey = (wipe, dir, big = false) => Math.min(1, Math.max(0, Math.round((wipe + dir * (big ? 0.1 : 0.01)) * 1000) / 1000));
 var init_compare_model = __esm(() => {
+  ALL_MODES = ["side", "wipe", "difference"];
+  MODE_KEYS = { side: "s", wipe: "w", difference: "d" };
   VIDEO = /\.(mp4|m4v|mov|webm|ogv|mkv)$/i;
   SEEK_IDLE = { seeking: false, pending: null };
   ZOOM_FIT = { u: 0, v: 0, w: 1, h: 1 };
@@ -9935,8 +10345,8 @@ async function createCompareGpu(canvas, onLost) {
       r(0, f.before);
       r(4, f.after);
       data.set([f.width, f.height, f.dpr, 0], 8);
-      data.set([f.wipeX, f.soft, 0, f.phase ? 1 : 0], 12);
-      data.set([f.from, f.to, f.mix, f.flick ? 1 : 0], 16);
+      data.set([f.wipeX, f.soft, 0, 0], 12);
+      data.set([f.from, f.to, f.mix, 0], 16);
       data.set([f.threshold, f.gain, ready[0], ready[1]], 20);
       data.set([f.accent[0], f.accent[1], f.accent[2], 1], 24);
       const l = f.loupe;
@@ -9978,8 +10388,8 @@ var MODE_INDEX, WGSL = `
 struct U {
   ra: vec4f, rb: vec4f,
   view: vec4f,   // w, h, dpr, _
-  wipe: vec4f,   // x, soft, _, phase
-  modes: vec4f,  // from, to, mix, flick
+  wipe: vec4f,   // x, soft, _, _
+  modes: vec4f,  // from, to, mix, _
   diff: vec4f,   // threshold, gain, readyA, readyB
   accent: vec4f,
   loupe: vec4f,  // x, y, r, zoom (0: none)
@@ -10030,21 +10440,14 @@ fn takeB(p: vec2f, r: vec4f, c0: vec4f, near: bool) -> vec4f {
 
 fn pm(c: vec4f) -> vec4f { return vec4f(c.rgb * c.a, c.a); }
 
-fn composite(mode: u32, p: vec2f, a: vec4f, b: vec4f, a2: vec4f) -> vec4f {
-  let flick = u.modes.w > 0.5;
+fn composite(mode: u32, p: vec2f, a: vec4f, b: vec4f) -> vec4f {
   switch mode {
-    case 0u: {
-      let bb = select(b, vec4f(a2.rgb, b.a), flick);
-      return vec4f(a.rgb * a.a + bb.rgb * bb.a * (1.0 - a.a), a.a + bb.a * (1.0 - a.a));
-    }
     case 1u: {
-      if (flick) { return pm(a); }
       let s = max(u.wipe.y, 0.5);
       let m = smoothstep(u.wipe.x - s, u.wipe.x + s, p.x);
       return pm(vec4f(mix(a.rgb, b.rgb, m), mix(a.a, b.a, m)));
     }
     case 2u: {
-      if (flick) { return pm(a); }
       let d = abs(a.rgb - b.rgb);
       let h = smoothstep(u.diff.x, u.diff.x + 0.06, max(d.r, max(d.g, d.b)) * u.diff.y) * min(a.a, b.a);
       let c = mix(vec3f(luma(b.rgb) * 0.35), u.accent.rgb, h);
@@ -10052,8 +10455,8 @@ fn composite(mode: u32, p: vec2f, a: vec4f, b: vec4f, a2: vec4f) -> vec4f {
     }
     default: {}
   }
-  // Flicker: After, or Before while X is held or on the flicker's other beat.
-  return pm(select(b, a, flick || u.wipe.w > 0.5));
+  // Side by side: each side in its own place, Before over After where they meet.
+  return vec4f(a.rgb * a.a + b.rgb * b.a * (1.0 - a.a), a.a + b.a * (1.0 - a.a));
 }
 
 @fragment fn fs(@builtin(position) q: vec4f) -> @location(0) vec4f {
@@ -10071,16 +10474,14 @@ fn composite(mode: u32, p: vec2f, a: vec4f, b: vec4f, a2: vec4f) -> vec4f {
   }
   let a = takeA(p, u.ra, u.ca, near);
   let b = takeB(p, u.rb, u.cb, near);
-  // Before in After's place (X held, side by side): After's rect, as if Before were zoomed there.
-  let a2 = takeA(p, u.rb, u.cb, near);
-  var o = mix(composite(u32(u.modes.x), p, a, b, a2), composite(u32(u.modes.y), p, a, b, a2), u.modes.z);
+  var o = mix(composite(u32(u.modes.x), p, a, b), composite(u32(u.modes.y), p, a, b), u.modes.z);
   if (near) { o = o + vec4f(0.05, 0.05, 0.06, 1.0) * (1.0 - o.a); }
   o = mix(o, vec4f(0.92), ring * 0.9);
   return o;
 }
 `, TEXTURE_BINDING = 4, COPY_DST = 2, RENDER_ATTACHMENT = 16, shared = null, lostListeners;
 var init_compare_gpu = __esm(() => {
-  MODE_INDEX = { side: 0, wipe: 1, difference: 2, flicker: 3 };
+  MODE_INDEX = { side: 0, wipe: 1, difference: 2 };
   lostListeners = new Set;
 });
 
@@ -10466,7 +10867,9 @@ function compare(container, options) {
     ...options.theme ? { theme: options.theme } : {},
     ...options.appearance ? { appearance: options.appearance } : {}
   };
-  let mode = options.mode ?? "side";
+  const offered = compareModes(options.modes, options.mode);
+  const modeList = offered.modes;
+  let mode = offered.mode;
   let wipe = Math.min(1, Math.max(0, options.wipe ?? 0.5));
   let loupeOn = options.loupe ?? false;
   let threshold = options.threshold ?? 4 / 255;
@@ -10484,7 +10887,7 @@ function compare(container, options) {
   root.setAttribute("role", "group");
   root.setAttribute("aria-roledescription", "compare");
   root.setAttribute("aria-label", options.label ?? "Compare");
-  root.setAttribute("aria-keyshortcuts", "Space ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight , . 1 2 3 4 S W D X Z L 0 = -");
+  root.setAttribute("aria-keyshortcuts", `Space ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight , . ${modeList.map((m, i) => `${i + 1} ${modeKey(m)}`).join(" ")} Z L 0 = -`);
   applyLook2(root, options);
   root.dataset.mode = mode;
   if (auto)
@@ -10493,35 +10896,37 @@ function compare(container, options) {
   const modes = el("div", "knobs-cmp-modes");
   modes.setAttribute("role", "radiogroup");
   modes.setAttribute("aria-label", "Mode");
-  const modeBtns = MODES2.map((m, i) => {
+  modes.hidden = modeList.length < 2;
+  const modeBtns = modeList.map((m, i) => {
     const b = el("button", "knobs-cmp-mode");
     b.type = "button";
     b.tabIndex = -1;
-    b.textContent = m.label;
-    b.title = `${m.label} · ${i + 1}${m.key ? ` or ${m.key}` : " (hold X to flick)"}`;
+    b.textContent = MODE_LABEL[m].short;
+    b.title = `${MODE_LABEL[m].long} · ${i + 1} or ${modeKey(m)}`;
     b.setAttribute("role", "radio");
-    b.setAttribute("aria-keyshortcuts", m.key ? `${i + 1} ${m.key}` : `${i + 1}`);
+    b.setAttribute("aria-keyshortcuts", `${i + 1} ${modeKey(m)}`);
     b.addEventListener("click", () => {
-      setMode(m.mode);
+      setMode(m);
       root.focus({ preventScroll: true });
     });
     modes.append(b);
     return b;
   });
-  const loupeBtn = el("button", "knobs-cmp-toggle");
-  loupeBtn.type = "button";
-  loupeBtn.tabIndex = -1;
-  loupeBtn.textContent = "Loupe";
-  loupeBtn.title = "Loupe · hold Z";
+  const toggleBtn = (name, label, title) => {
+    const b = el("button", "knobs-cmp-toggle");
+    b.type = "button";
+    b.tabIndex = -1;
+    b.innerHTML = icon(name);
+    b.setAttribute("aria-label", label);
+    b.title = title;
+    return b;
+  };
+  const loupeBtn = toggleBtn("magnifyingGlass", "Loupe", "Loupe · hold Z");
   loupeBtn.addEventListener("click", () => {
     setLoupe(!loupeOn);
     root.focus({ preventScroll: true });
   });
-  const loopBtn = el("button", "knobs-cmp-toggle");
-  loopBtn.type = "button";
-  loopBtn.tabIndex = -1;
-  loopBtn.textContent = "Loop";
-  loopBtn.title = "Loop · L (drag its ends on the timeline)";
+  const loopBtn = toggleBtn("repeat", "Loop", "Loop · L (drag its ends on the timeline)");
   loopBtn.setAttribute("aria-keyshortcuts", "L");
   loopBtn.addEventListener("click", () => {
     api.setLoop(!loopNow());
@@ -10538,7 +10943,8 @@ function compare(container, options) {
   const zoomReset = el("button", "knobs-cmp-zoom-reset");
   zoomReset.type = "button";
   zoomReset.tabIndex = -1;
-  zoomReset.textContent = "Reset";
+  zoomReset.innerHTML = icon("arrowCounterClockwise", { small: true });
+  zoomReset.setAttribute("aria-label", "Reset zoom");
   zoomReset.title = "Fit · 0 or double-click";
   zoomReset.addEventListener("click", () => {
     api.setZoom(null);
@@ -10553,6 +10959,9 @@ function compare(container, options) {
   handle.setAttribute("aria-label", "Wipe");
   handle.setAttribute("aria-valuemin", "0");
   handle.setAttribute("aria-valuemax", "100");
+  const grip = el("span", "knobs-cmp-grip");
+  grip.setAttribute("aria-hidden", "true");
+  handle.append(grip);
   const note = el("div", "knobs-cmp-note");
   stage.append(canvas, split, labels[0], labels[1], handle, zoomPill, note);
   root.append(bar, stage);
@@ -10569,6 +10978,7 @@ function compare(container, options) {
     root.append(host);
     tl = timeline(host, {
       ...look,
+      variant: "lane",
       duration: 1,
       fps: fps(),
       arrows: { step: 0.5, shift: 2 },
@@ -10587,9 +10997,9 @@ function compare(container, options) {
   const fade = new Spring(1, FADE6.omega, FADE6.zeta, 0.001);
   let fromMode = mode;
   let toMode = mode;
-  let phase = false;
-  let flickerTimer = 0;
-  let flickHeld = false;
+  const wipeLine = new Spring(wipe, WIPE_CATCH.omega, WIPE_CATCH.zeta, 0.0001);
+  let wipeCatching = false;
+  let gripY = null;
   let loupeHeld = false;
   let pointer = null;
   let drag = null;
@@ -10907,25 +11317,16 @@ function compare(container, options) {
     gpu = g;
     setRenderer("gpu");
   };
-  const syncFlicker = () => {
-    win.clearInterval(flickerTimer);
-    flickerTimer = 0;
-    phase = false;
-    if (mode === "flicker")
-      flickerTimer = win.setInterval(() => {
-        phase = !phase;
-        requestDraw();
-      }, FLICKER_MS);
-  };
   const syncModeUi = () => {
     root.dataset.mode = mode;
-    MODES2.forEach((m, i) => {
-      modeBtns[i].setAttribute("aria-checked", String(m.mode === mode));
+    modeList.forEach((m, i) => {
+      modeBtns[i].setAttribute("aria-checked", String(m === mode));
     });
     handle.tabIndex = mode === "wipe" ? 0 : -1;
+    modePill?.update();
   };
   const setMode = (next, emit = true) => {
-    if (next === mode)
+    if (next === mode || !modeList.includes(next))
       return;
     mode = next;
     const reduced = reducedMotion(win);
@@ -10941,19 +11342,29 @@ function compare(container, options) {
     else
       lay.set(next === "side" ? 0 : 1);
     syncModeUi();
-    syncFlicker();
     if (emit)
       options.onMode?.(next);
     requestDraw();
   };
-  const setWipe = (next, emit = true) => {
+  const setWipe = (next, emit = true, jump = false) => {
     const w = Math.min(1, Math.max(0, next));
-    if (w === wipe)
+    if (w === wipe && !jump)
       return;
     wipe = w;
+    const minGap = 2 / Math.max(1, wipeRect(layoutNow().L.overlay).w);
+    const head = moveHead({ x: wipeLine.x, target: wipeLine.target }, w, jump && !reducedMotion(win) ? "jump" : "follow", wipeCatching, minGap);
+    wipeCatching = head.catching;
+    if (head.catching) {
+      wipeLine.x = head.x;
+      wipeLine.target = head.target;
+    } else
+      wipeLine.snap(head.x);
     if (emit)
       options.onWipe?.(w);
-    drawNow();
+    if (head.catching)
+      requestDraw();
+    else
+      drawNow();
   };
   const setLoupe = (on) => {
     loupeOn = on;
@@ -11106,28 +11517,44 @@ function compare(container, options) {
     viewSent = key;
     options.onView({ zoom: clampZoom(z), loop: l });
   };
+  const labelsIn = (m, r, wr, wx) => {
+    if (m === "wipe") {
+      const at = seamLabels(wx, wr.x, wr.x + wr.w, labelW[0], labelW[1], INSET);
+      return [at.before, at.after];
+    }
+    const ax = r.after.x + INSET + (r.after.w - labelW[1] - INSET * 2) * lay.x;
+    return [
+      { x: r.before.x + INSET, opacity: 1 },
+      { x: ax, opacity: 1 }
+    ];
+  };
+  const placeGrip = (wr) => {
+    const gy = gripTop(gripY ?? wr.y + wr.h / 2, wr, GRIP.h) - wr.y;
+    grip.style.transform = `translate3d(0,${gy.toFixed(2)}px,0)`;
+  };
   const draw = () => {
     dirty = false;
     const r = layoutNow();
     const wr = wipeRect(r.L.overlay);
-    const wx = wipeX(wr, wipe);
+    const wx = wipeX(wr, wipeLine.x);
     const k = lay.x;
-    const ax = r.after.x + INSET + (r.after.w - labelW[1] - INSET * 2) * k;
-    labels[0].style.transform = `translate(${(r.before.x + INSET).toFixed(2)}px,${(r.before.y + INSET).toFixed(2)}px)`;
-    labels[1].style.transform = `translate(${ax.toFixed(2)}px,${(r.after.y + INSET).toFixed(2)}px)`;
-    const showsBefore = flickHeld || mode === "flicker" && phase;
-    const flickering = flickHeld || mode === "flicker";
-    labels[0].toggleAttribute("data-lit", flickering && showsBefore);
-    labels[1].toggleAttribute("data-lit", flickering && !showsBefore);
-    labels[0].toggleAttribute("data-dim", flickering && !showsBefore || mode === "wipe" && wipe < 0.02);
-    labels[1].toggleAttribute("data-dim", flickering && showsBefore || mode === "wipe" && wipe > 0.98);
+    const a = labelsIn(fromMode, r, wr, wx);
+    const b = labelsIn(toMode, r, wr, wx);
+    const f = Math.min(1, Math.max(0, fade.x));
+    const ys = [r.before.y + INSET, r.after.y + INSET];
+    for (const i of [0, 1]) {
+      const x = a[i].x + (b[i].x - a[i].x) * f;
+      labels[i].style.transform = `translate(${x.toFixed(2)}px,${ys[i].toFixed(2)}px)`;
+      labels[i].style.opacity = (a[i].opacity + (b[i].opacity - a[i].opacity) * f).toFixed(3);
+    }
     const top = Math.min(r.L.side.before.y, r.L.side.after.y);
     split.style.transform = `translate(${r.L.side.split.toFixed(2)}px,${top.toFixed(2)}px)`;
     split.style.height = `${Math.max(0, r.L.side.after.h).toFixed(2)}px`;
     split.style.opacity = String(Math.max(0, 1 - k * 2));
-    handle.toggleAttribute("data-on", mode === "wipe" && !flickHeld);
+    handle.toggleAttribute("data-on", mode === "wipe");
     handle.style.transform = `translate(${wx.toFixed(2)}px,${wr.y.toFixed(2)}px)`;
     handle.style.height = `${Math.max(0, wr.h).toFixed(2)}px`;
+    placeGrip(wr);
     handle.setAttribute("aria-valuenow", String(Math.round(wipe * 100)));
     handle.setAttribute("aria-valuetext", `${Math.round(wipe * 100)}% Before`);
     const pct = `${Math.round(100 / zw.x)}%`;
@@ -11150,7 +11577,7 @@ function compare(container, options) {
         const right = Math.max(0, rect.x + rect.w - Math.min(clip.x + clip.w, cutAt));
         st.clipPath = t + l + b + right > 0.01 ? `inset(${t.toFixed(2)}px ${right.toFixed(2)}px ${b.toFixed(2)}px ${l.toFixed(2)}px)` : "";
       };
-      const cut = mode === "wipe" && !flickHeld ? wx : Number.POSITIVE_INFINITY;
+      const cut = mode === "wipe" ? wx : Number.POSITIVE_INFINITY;
       for (const s of sides) {
         const rect = s.index === 0 ? r.zBefore : r.zAfter;
         const clip = s.index === 0 ? r.before : r.after;
@@ -11159,10 +11586,8 @@ function compare(container, options) {
         place(s.preview, rect, clip, at);
         if (s.index !== 0)
           continue;
-        for (const n of [s.el, s.preview]) {
-          n.style.mixBlendMode = mode === "difference" && !flickHeld ? "difference" : "";
-          n.style.opacity = mode === "flicker" && !showsBefore ? "0" : "";
-        }
+        for (const n of [s.el, s.preview])
+          n.style.mixBlendMode = mode === "difference" ? "difference" : "";
       }
       return;
     }
@@ -11183,8 +11608,6 @@ function compare(container, options) {
       from: MODE_INDEX[fromMode],
       to: MODE_INDEX[toMode],
       mix: Math.min(1, Math.max(0, fade.x)),
-      flick: flickHeld,
-      phase,
       threshold,
       gain: 1,
       accent,
@@ -11200,6 +11623,11 @@ function compare(container, options) {
   const loop = frameLoop(win, (dt) => {
     lay.step(dt);
     fade.step(dt);
+    if (wipeCatching) {
+      wipeLine.step(dt);
+      if (wipeLine.resting)
+        wipeCatching = false;
+    }
     zu.step(dt);
     zv.step(dt);
     zw.step(dt);
@@ -11233,7 +11661,7 @@ function compare(container, options) {
             pushFrame(s);
       }
     }
-    const moving = !lay.resting || !fade.resting || !zoomResting();
+    const moving = !lay.resting || !fade.resting || !zoomResting() || wipeCatching;
     if (moving)
       dirty = true;
     if (auto && !lay.resting)
@@ -11376,16 +11804,19 @@ function compare(container, options) {
       e.preventDefault();
       return startPinch();
     }
-    if (mode === "wipe" && !flickHeld) {
+    if (mode === "wipe") {
       const wr = wipeRect(layoutNow().L.overlay);
       const inside = p.x >= wr.x - SLOP && p.x <= wr.x + wr.w + SLOP && p.y >= wr.y && p.y <= wr.y + wr.h;
-      const grab = wipeGrab(p.x, wr, wipe, SLOP);
+      const grab = wipeGrab(p.x, wr, wipeLine.x, SLOP);
       if (inside && (grab.onLine || !zoomed())) {
         drag = { kind: "wipe", offset: grab.offset };
         root.dataset.dragging = "";
+        gripY = p.y;
         e.preventDefault();
         if (!grab.onLine)
-          setWipe(wipeAt(p.x, wr));
+          setWipe(wipeAt(p.x, wr), true, true);
+        else
+          drawNow();
         return;
       }
     }
@@ -11411,6 +11842,11 @@ function compare(container, options) {
       pinch = { d, x: mid.x, y: mid.y };
       return handZoom(zoomAbout(panned, k, q.pu, q.pv));
     }
+    if (mode === "wipe" && drag?.kind !== "pan") {
+      gripY = p.y;
+      if (!drag)
+        placeGrip(wipeRect(layoutNow().L.overlay));
+    }
     if (drag?.kind === "wipe")
       setWipe(wipeAt(p.x, wipeRect(layoutNow().L.overlay), drag.offset));
     else if (drag?.kind === "pan") {
@@ -11483,12 +11919,6 @@ function compare(container, options) {
     const z = { u: zu.target, v: zv.target, w: zw.target, h: zw.target };
     glideZoom(zoomAbout(z, factor, 0.5, 0.5));
   };
-  const holdFlick = (on) => {
-    if (flickHeld === on)
-      return;
-    flickHeld = on;
-    drawNow();
-  };
   const holdLoupe = (on) => {
     if (loupeHeld === on)
       return;
@@ -11534,25 +11964,17 @@ function compare(container, options) {
       case "s":
       case "w":
       case "d":
-        if (e.altKey || e.shiftKey || key === "s" && claimsHintKey(doc, key))
-          return;
-        claim();
-        return setMode(KEY_MODE[key]);
       case "1":
       case "2":
-      case "3":
-      case "4":
-        if (e.altKey || e.shiftKey)
+      case "3": {
+        if (e.altKey || e.shiftKey || key === "s" && claimsHintKey(doc, key))
           return;
-        claim();
-        return setMode(MODES2[Number(key) - 1].mode);
-      case "x":
-        if (e.altKey)
+        const m = modeForKey(key, modeList);
+        if (!m)
           return;
         claim();
-        if (!e.repeat)
-          holdFlick(true);
-        return;
+        return setMode(m);
+      }
       case "z":
         if (e.altKey)
           return;
@@ -11608,8 +12030,11 @@ function compare(container, options) {
   labels[1].textContent = labelOf(1);
   loupeBtn.setAttribute("aria-pressed", String(loupeOn));
   loopBtn.setAttribute("aria-pressed", String(loopNow() !== null));
+  const modePill = modeList.length > 1 ? selectionPill(modes, {
+    rows: () => modeBtns,
+    selected: () => modeBtns[modeList.indexOf(mode)] ?? null
+  }) : null;
   syncModeUi();
-  syncFlicker();
   const unlisten = tl?.listen({
     onSeek: (t, source) => {
       if (source === "play") {
@@ -11667,24 +12092,20 @@ function compare(container, options) {
   });
   root.addEventListener("keydown", onKey);
   root.addEventListener("keyup", (e) => {
-    const key = e.key.toLowerCase();
-    if (key === "x")
-      holdFlick(false);
-    else if (key === "z")
+    if (e.key.toLowerCase() === "z")
       holdLoupe(false);
   });
   root.addEventListener("focusout", (e) => {
     if (root.contains(e.relatedTarget))
       return;
-    holdFlick(false);
     holdLoupe(false);
   });
   const unregisterHints = options.hints === false ? undefined : hints.register(root, () => [
-    ...MODES2.map((m, i) => ({
+    ...modeList.length > 1 ? modeList.map((m, i) => ({
       el: modeBtns[i],
-      label: m.label,
-      activate: () => setMode(m.mode)
-    })),
+      label: MODE_LABEL[m].long,
+      activate: () => setMode(m)
+    })) : [],
     { el: loopBtn, label: "Loop", activate: () => api.setLoop(!loopNow()) },
     ...loupeBtn.hidden ? [] : [{ el: loupeBtn, label: "Loupe", activate: () => setLoupe(!loupeOn) }],
     ...zoomed() ? [{ el: zoomReset, label: "Reset zoom", activate: () => api.setZoom(null) }] : [],
@@ -11709,6 +12130,7 @@ function compare(container, options) {
     get mode() {
       return mode;
     },
+    modes: modeList,
     get wipe() {
       return wipe;
     },
@@ -11764,7 +12186,7 @@ function compare(container, options) {
         tl?.update({ fps: next.fps });
       requestDraw();
     },
-    seek: (t) => tl ? tl.seek(t) : ownSeek(t),
+    seek: (t, o) => tl ? tl.seek(t, o?.glide ? { glide: true } : undefined) : ownSeek(t),
     seekBy(d) {
       const total = duration || tl?.duration || 0;
       const t = Math.min(total, Math.max(0, now() + d));
@@ -11805,7 +12227,7 @@ function compare(container, options) {
     dispose() {
       disposed = true;
       loop.stop();
-      win.clearInterval(flickerTimer);
+      modePill?.dispose();
       win.clearTimeout(releaseTimer);
       ro.disconnect();
       nearIo?.disconnect();
@@ -11835,7 +12257,7 @@ function compare(container, options) {
     wake();
   return api;
 }
-var LAYOUT2, FADE6, FADE_REDUCED, ZOOM, FLICKER_MS = 400, SLOP = 12, INSET = 8, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODES2, KEY_MODE;
+var LAYOUT2, FADE6, FADE_REDUCED, ZOOM, WIPE_CATCH, SLOP = 12, INSET = 8, GRIP, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODE_LABEL;
 var init_compare = __esm(() => {
   init_motion();
   init_page_hints();
@@ -11843,21 +12265,24 @@ var init_compare = __esm(() => {
   init_compare_gpu();
   init_compare_model();
   init_compare_strip();
+  init_icons();
   init_look();
   init_rgba();
+  init_selection_pill();
   init_timeline();
+  init_timeline_model();
   LAYOUT2 = springMotion({ duration: 0.35, bounce: 0 });
   FADE6 = springMotion(SPRINGS.snappy);
   FADE_REDUCED = springMotion(FADE);
   ZOOM = springMotion({ duration: 0.35, bounce: 0 });
+  WIPE_CATCH = springMotion(CATCH_UP);
+  GRIP = { w: 16, h: 28 };
   LOUPE = { r: 88, zoom: 4 };
-  MODES2 = [
-    { mode: "side", label: "Side by side", key: "S" },
-    { mode: "wipe", label: "Wipe", key: "W" },
-    { mode: "difference", label: "Difference", key: "D" },
-    { mode: "flicker", label: "Flicker", key: "" }
-  ];
-  KEY_MODE = { s: "side", w: "wipe", d: "difference" };
+  MODE_LABEL = {
+    side: { short: "Side", long: "Side by side" },
+    wipe: { short: "Wipe", long: "Wipe" },
+    difference: { short: "Difference", long: "Difference" }
+  };
 });
 
 // src/ui/react.tsx
@@ -14757,6 +15182,7 @@ function timelineChanges(now, changed) {
 // src/ui/picker.ts
 init_motion();
 init_look();
+init_icons();
 
 // src/ui/picker-model.ts
 function digitPick(ids, key) {
@@ -14811,7 +15237,7 @@ var CLOSE3 = springMotion(CLOSE);
 var CARD = springMotion(SPRINGS.default);
 var FADE5 = springMotion(FADE);
 var DRIFT = 6;
-var CHECK = svg('<path d="m3.5 8.4 3 3 6-6.6"/>');
+var CHECK = icon("check", { small: true });
 function optionPicker(container, options) {
   const doc = container.ownerDocument;
   const win = doc.defaultView;
@@ -17667,7 +18093,7 @@ function mountTable(host, m, steps) {
     context: () => ({ kind: "table" })
   };
 }
-var grid = (v) => Math.round(v * 64) / 64;
+var grid2 = (v) => Math.round(v * 64) / 64;
 function chapterPills(host, chapters, io) {
   const doc = host.ownerDocument;
   const win = doc.defaultView;
@@ -17695,9 +18121,9 @@ function chapterPills(host, chapters, io) {
   const y = new Spring(0, MOTION.calm.omega, MOTION.calm.zeta, 0.25);
   const w = new Spring(0, MOTION.calm.omega, MOTION.calm.zeta, 0.25);
   const draw = () => {
-    const left = grid(x.x);
-    mark.style.transform = `translate(${left}px,${grid(y.x)}px)`;
-    mark.style.width = `${grid(x.x + w.x) - left}px`;
+    const left = grid2(x.x);
+    mark.style.transform = `translate(${left}px,${grid2(y.x)}px)`;
+    mark.style.width = `${grid2(x.x + w.x) - left}px`;
   };
   const loop = frameLoop(win, (dt) => {
     x.step(dt);
@@ -18301,7 +18727,7 @@ var lookOf2 = (o) => ({
   ...o.preset ? { preset: o.preset } : {},
   ...o.theme ? { theme: o.theme } : {}
 });
-var grid2 = (v) => Math.round(v * 64) / 64;
+var grid3 = (v) => Math.round(v * 64) / 64;
 var ICON = {
   full: svg('<path d="M3 6.5V3h3.5M13 6.5V3H9.5M3 9.5V13h3.5M13 9.5V13H9.5"/>'),
   exit: svg('<path d="M6.5 3v3.5H3M9.5 3v3.5H13M6.5 13V9.5H3M9.5 13V9.5H13"/>'),
@@ -18481,8 +18907,8 @@ function walkthrough(container, options) {
     if (mark) {
       pillY.step(dt);
       pillH.step(dt);
-      mark.style.transform = `translateY(${grid2(pillY.x)}px)`;
-      mark.style.height = `${grid2(pillY.x + pillH.x) - grid2(pillY.x)}px`;
+      mark.style.transform = `translateY(${grid3(pillY.x)}px)`;
+      mark.style.height = `${grid3(pillY.x + pillH.x) - grid3(pillY.x)}px`;
       more ||= !pillY.resting || !pillH.resting;
     }
     if (scroll.to && scroll.el) {
@@ -18642,10 +19068,10 @@ function walkthrough(container, options) {
     const a = f.hold.getBoundingClientRect();
     const b = fullRect();
     const k = reduced() ? Math.round(f.p.target) : f.p.x;
-    const left = grid2(a.left + (b.x - a.left) * k);
-    const top = grid2(a.top + (b.y - a.top) * k);
-    const right = grid2(a.right + (b.x + b.w - a.right) * k);
-    const bottom = grid2(a.bottom + (b.y + b.h - a.bottom) * k);
+    const left = grid3(a.left + (b.x - a.left) * k);
+    const top = grid3(a.top + (b.y - a.top) * k);
+    const right = grid3(a.right + (b.x + b.w - a.right) * k);
+    const bottom = grid3(a.bottom + (b.y + b.h - a.bottom) * k);
     const s = f.v.card.style;
     s.left = `${left}px`;
     s.top = `${top}px`;