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

package/dist/types/ui/compare-css.d.ts

@@ -1 +1 @@
-export declare const compareCss = "\n:where(.knobs-compare,.knobs-compare *,.knobs-cmp-strip,.knobs-cmp-strip *){box-sizing:border-box}\n.knobs-ui.knobs-compare{--_ku-cmp-diff:var(--k-compare-diff,var(--_k-ok));--_ku-cmp-line:var(--_k-compare-divider);\n  --_ku-cmp-stage:var(--_k-compare-stage);\n  display:flex;flex-direction:column;gap:6px;width:100%;height:100%;min-height:160px;outline:none;user-select:none;-webkit-user-select:none;\n  font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}\n: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}\n.knobs-cmp-bar{flex:none;display:flex;align-items:center;gap:var(--_k-gap);height:var(--_k-control-h)}\n/* The modes: one fill, the selection pill on the one picked; a mode isn't brighter for being\n   picked: the pill's bright copy is. */\n.knobs-cmp-modes{position:relative;display:inline-flex;height:var(--_k-control-h);border-radius:var(--_k-radius);background:var(--_k-fill)}\n.knobs-cmp-modes[hidden]{display:none}\n.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;\n  transition:color calc(var(--_k-hover-out) * 1ms)}\n.knobs-ui .knobs-cmp-mode:is(:hover,:focus-visible){color:var(--_k-fg)}\n/* Toggles: icon buttons, the accent's wash when on. */\n.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;\n  transition:color calc(var(--_k-hover-out) * 1ms),background calc(var(--_k-hover-out) * 1ms)}\n.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_ku-wash)}\n.knobs-ui .knobs-cmp-toggle[aria-pressed=\"true\"]{color:var(--_k-accent-fg);background:var(--_k-accent-soft)}\n.knobs-cmp-toggle svg{display:block}\n.knobs-cmp-fill{flex:1}\n.knobs-cmp-toggle[hidden]{display:none}\n/* One surface: on a card (a walkthrough's step, a split's pane, anything .knobs-surface) or marked\n   data-nested, the stage drops its fill and the sides sit on that card. */\n:where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-ui.knobs-compare,.knobs-ui.knobs-compare[data-nested]{--_ku-cmp-stage:var(--k-compare-stage,transparent)}\n/* In a page's flow (a container with no height), it takes the height its sides need. */\n.knobs-ui.knobs-compare[data-auto]{height:auto}\n.knobs-compare[data-auto] .knobs-cmp-stage{flex:none;min-height:0}\n.knobs-cmp-stage{position:relative;flex:1;min-height:96px;overflow:hidden;border-radius:var(--_k-radius-panel);background:var(--_ku-cmp-stage);touch-action:pan-y;outline:none}\n.knobs-compare[data-frame=\"flat\"] .knobs-cmp-stage{border-radius:0}\n.knobs-compare[data-mode=\"wipe\"] .knobs-cmp-stage{cursor:ew-resize}\n/* Unzoomed, a finger still scrolls the page up and down; zoomed, the stage takes every gesture. */\n.knobs-compare[data-zoomed] .knobs-cmp-stage{cursor:grab;touch-action:none}\n.knobs-compare[data-panning],.knobs-compare[data-panning] *{cursor:grabbing!important}\n/* Wiping, the grip stands in for the cursor. */\n.knobs-compare[data-dragging],.knobs-compare[data-dragging] *{cursor:none!important}\n.knobs-cmp-sizer{position:absolute;left:0;right:0;top:0;height:0;visibility:hidden;pointer-events:none}\n.knobs-cmp-canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}\n.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}\n.knobs-compare[data-renderer=\"gpu\"] .knobs-cmp-media{opacity:0}\n/* Glass: what's behind shows through, blurred, on the knobs tokens. */\n.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);\n  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)))}\n.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)}\n/* The wipe: a hairline down the line with a raised grip at the pointer's height; a wider strip\n   takes the hand and the keys (a slider). It fades with the mode; wiping, line and grip brighten. */\n.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)}\n.knobs-cmp-handle[data-on]{opacity:1;pointer-events:auto;transition:opacity .22s cubic-bezier(.2,.8,.2,1)}\n.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)}\n.knobs-compare[data-dragging] .knobs-cmp-handle::before{background:var(--_ku-cmp-line)}\n.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);\n  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)}\n.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)}\n.knobs-cmp-grip::before{left:6px}\n.knobs-cmp-grip::after{left:9px}\n.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)}\n.knobs-compare[data-dragging] .knobs-cmp-grip::before,.knobs-compare[data-dragging] .knobs-cmp-grip::after{background:var(--_k-fg)}\n.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)}\n/* The split's hairline, down the middle side by side. */\n.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}\n/* Zoomed: how far, and a way back, in the stage's corner; it fades in and out, nothing shifts. */\n.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;\n  color:var(--_k-fg);font-size:var(--_k-text-meta);font-variant-numeric:tabular-nums;font-feature-settings:\"tnum\";white-space:nowrap;\n  opacity:0;scale:.96;pointer-events:none;transition:opacity .16s cubic-bezier(.4,0,1,1),scale .16s cubic-bezier(.4,0,1,1)}\n.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)}\n: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;\n  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}\n: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)}\n.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}\n.knobs-cmp-note:empty{display:none}\n.knobs-cmp-strip-host{flex:none;height:60px;min-height:0}\n.knobs-cmp-timeline-host{flex:none;min-height:0}\n/* The frame strip: Before over After per column, a difference bar under them, a dot where it peaks. */\n.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;\n  font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg)}\n.knobs-cmp-strip>canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}\n@media(prefers-reduced-motion:reduce){:is(.knobs-compare,.knobs-cmp-strip) :where(*,::before,::after){transition-duration:.12s!important}}\n";
+export declare const compareCss = "\n:where(.knobs-compare,.knobs-compare *,.knobs-cmp-strip,.knobs-cmp-strip *){box-sizing:border-box}\n.knobs-ui.knobs-compare{--_ku-cmp-diff:var(--k-compare-diff,var(--_k-ok));--_ku-cmp-line:var(--_k-compare-divider);\n  --_ku-cmp-stage:var(--_k-compare-stage);\n  display:flex;flex-direction:column;gap:6px;width:100%;height:100%;min-height:160px;outline:none;user-select:none;-webkit-user-select:none;\n  font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}\n: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}\n.knobs-cmp-bar{flex:none;display:flex;align-items:center;gap:var(--_k-gap);height:var(--_k-control-h)}\n/* The modes: one fill, the selection pill on the one picked; a mode isn't brighter for being\n   picked: the pill's bright copy is. */\n.knobs-cmp-modes{position:relative;display:inline-flex;height:var(--_k-control-h);border-radius:var(--_k-radius);background:var(--_k-fill)}\n.knobs-cmp-modes[hidden]{display:none}\n.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;\n  transition:color calc(var(--_k-hover-out) * 1ms)}\n.knobs-ui .knobs-cmp-mode:is(:hover,:focus-visible){color:var(--_k-fg)}\n/* Toggles: icon buttons, the accent's wash when on. */\n.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;\n  transition:color calc(var(--_k-hover-out) * 1ms),background calc(var(--_k-hover-out) * 1ms)}\n.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_ku-wash)}\n.knobs-ui .knobs-cmp-toggle[aria-pressed=\"true\"]{color:var(--_k-accent-fg);background:var(--_k-accent-soft)}\n.knobs-cmp-toggle svg{display:block}\n.knobs-cmp-fill{flex:1}\n.knobs-cmp-toggle[hidden]{display:none}\n/* One surface: on a card (a walkthrough's step, a split's pane, anything .knobs-surface) or marked\n   data-nested, the stage drops its fill and the sides sit on that card. */\n:where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-ui.knobs-compare,.knobs-ui.knobs-compare[data-nested]{--_ku-cmp-stage:var(--k-compare-stage,transparent)}\n/* In a page's flow (a container with no height), it takes the height its sides need. */\n.knobs-ui.knobs-compare[data-auto]{height:auto}\n.knobs-compare[data-auto] .knobs-cmp-stage{flex:none;min-height:0}\n.knobs-cmp-stage{position:relative;flex:1;min-height:96px;overflow:hidden;border-radius:var(--_k-radius-panel);background:var(--_ku-cmp-stage);touch-action:pan-y;outline:none}\n.knobs-compare[data-frame=\"flat\"] .knobs-cmp-stage{border-radius:0}\n.knobs-compare[data-mode=\"wipe\"] .knobs-cmp-stage{cursor:ew-resize}\n/* Videos: a click on the stage plays and pauses. */\n.knobs-compare[data-video]:not([data-mode=\"wipe\"],[data-zoomed]) .knobs-cmp-stage{cursor:pointer}\n/* Unzoomed, a finger still scrolls the page up and down; zoomed, the stage takes every gesture. */\n.knobs-compare[data-zoomed] .knobs-cmp-stage{cursor:grab;touch-action:none}\n.knobs-compare[data-panning],.knobs-compare[data-panning] *{cursor:grabbing!important}\n/* Wiping, the grip stands in for the cursor. */\n.knobs-compare[data-dragging],.knobs-compare[data-dragging] *{cursor:none!important}\n.knobs-cmp-sizer{position:absolute;left:0;right:0;top:0;height:0;visibility:hidden;pointer-events:none}\n.knobs-cmp-canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}\n.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}\n.knobs-compare[data-renderer=\"gpu\"] .knobs-cmp-media{opacity:0}\n/* The media comes in with its first frames: a fade and a 4px blur on the default spring. */\n.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)}\n.knobs-compare:not([data-ready]) :is(.knobs-cmp-canvas,.knobs-cmp-media){opacity:0;filter:blur(4px)}\n/* Glass: what's behind shows through, blurred, on the knobs tokens. */\n.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);\n  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)))}\n/* \u2717 Before \u00B7 \u2713 After: Before quieter (fg-3), After in full text. Neutral: no colour of its own. */\n.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-size:var(--_k-text-meta);line-height:16px;font-weight:var(--_k-weight-label);\n  white-space:nowrap;pointer-events:none;will-change:transform}\n.knobs-cmp-label[data-side=\"before\"]{color:var(--_k-fg-3)}\n.knobs-cmp-label[data-side=\"after\"]{color:var(--_k-fg)}\n/* Fusing, the mark folds away and the label is its name. */\n.knobs-cmp-mark{flex:none;display:flex;justify-content:flex-end;overflow:hidden}\n.knobs-cmp-mark svg{display:block;flex:none;width:12px;height:12px}\n/* The fuse's seam: a blurred strip over where the sides meet, soft at both sides. */\n.knobs-cmp-seam{position:absolute;left:0;top:0;width:8px;height:0;opacity:0;pointer-events:none;will-change:transform,opacity;\n  -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)}\n/* The wipe: a hairline down the line with a raised grip in its middle (at the pointer's height\n   while dragged); a wider strip takes the hand and the keys (a slider). It fades in with the\n   fuse; wiping, line and grip brighten. */\n.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}\n.knobs-cmp-handle[data-on]{pointer-events:auto}\n.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)}\n.knobs-compare[data-dragging] .knobs-cmp-handle::before{background:var(--_ku-cmp-line)}\n.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);\n  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)}\n.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)}\n.knobs-cmp-grip::before{left:6px}\n.knobs-cmp-grip::after{left:9px}\n.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)}\n.knobs-compare[data-dragging] .knobs-cmp-grip::before,.knobs-compare[data-dragging] .knobs-cmp-grip::after{background:var(--_k-fg)}\n.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)}\n/* The split's hairline, down the middle side by side. */\n.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}\n/* Zoomed: how far, and a way back, in the stage's corner; it fades in and out, nothing shifts. */\n.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;\n  color:var(--_k-fg);font-size:var(--_k-text-meta);font-variant-numeric:tabular-nums;font-feature-settings:\"tnum\";white-space:nowrap;\n  opacity:0;scale:.96;pointer-events:none;transition:opacity .16s cubic-bezier(.4,0,1,1),scale .16s cubic-bezier(.4,0,1,1)}\n.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)}\n: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;\n  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}\n: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)}\n.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}\n.knobs-cmp-note:empty{display:none}\n.knobs-cmp-strip-host{flex:none;height:60px;min-height:0}\n.knobs-cmp-timeline-host{flex:none;min-height:0}\n/* The frame strip: Before over After per column, a difference bar under them, a dot where it peaks. */\n.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;\n  font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg)}\n.knobs-cmp-strip>canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}\n@media(prefers-reduced-motion:reduce){:is(.knobs-compare,.knobs-cmp-strip) :where(*,::before,::after){transition-duration:.12s!important}}\n";

package/dist/types/ui/compare-gpu.d.ts

@@ -14,7 +14,10 @@ export interface CompareDraw {
     readonly width: number;
     readonly height: number;
     readonly dpr: number;
-    /** The wipe's line (device px) and its soft edge (device px). */
+    /**
+     * Where Before is cut (device px: the split side by side, the wipe's line fused) and its soft
+     * edge either side (device px). Side and Wipe composite the same way; only the cut moves.
+     */
     readonly wipeX: number;
     readonly soft: number;
     readonly from: number;

package/dist/types/ui/compare-model.d.ts

@@ -89,7 +89,10 @@ export interface CompareLayout {
         readonly after: Rect;
         readonly split: number;
     };
-    /** Overlaid (wipe, difference): both in the same place. */
+    /**
+     * Overlaid (wipe, difference): both in the same place, one side's size, centred on the split,
+     * so fusing never resizes anything.
+     */
     readonly overlay: {
         readonly before: Rect;
         readonly after: Rect;
@@ -97,6 +100,38 @@ export interface CompareLayout {
 }
 /** Where the two sides sit inside `box`, side by side and overlaid. */
 export declare function compareLayout(box: Rect, before: Size, after: Size): CompareLayout;
+/** The fuse's feather at its middle, the seam's blur as it starts and the overlap it fades in over (px). */
+export declare const FUSE: {
+    readonly feather: 24;
+    readonly blur: 4;
+    readonly seamFade: 48;
+};
+export interface FuseFrame {
+    /** Where Before is cut: the split side by side, the wipe's line fused. */
+    readonly cut: number;
+    /** The cut's soft edge, px either side of it. */
+    readonly feather: number;
+    /** The seam's (and the wipe handle's) opacity, 0–1. */
+    readonly seam: number;
+    /** The seam's blur (px), gone once fused. */
+    readonly blur: number;
+}
+/**
+ * Kit Motion's Comparison fuse, one frame of it: side by side (`k` 0) the panes glide together
+ * into one (`k` 1). Before is cut only where the inner edges overlap, with a feather that swells
+ * mid-transition; the seam fades in as they overlap, blurred until they've fused. `before` and
+ * `after` are where the sides are drawn this frame.
+ */
+export declare function fuseFrame(L: CompareLayout, before: Rect, after: Rect, k: number, wipe: number): FuseFrame;
+/**
+ * A label folded `fold` (0 open, 1 folded to its name): its mark's width, opacity and blur (px,
+ * up to `blur` as it goes, kit-motion's in-place exit).
+ */
+export declare const labelFold: (fold: number, mark: number, blur?: number) => {
+    width: number;
+    opacity: number;
+    blur: number;
+};
 /** The height a split screen of `w` needs so neither side has margins: half its width, in shape. */
 export declare const splitHeight: (w: number, media: Size) => number;
 /**

package/dist/types/ui/compare.d.ts

@@ -46,8 +46,9 @@ export interface CompareOptions extends UiLook {
     readonly threshold?: number;
     /**
      * The clock: an existing `timeline()` (its time drives both sides; while playing it follows
-     * After), or `true` for a slim one of its own under the viewer (the `"lane"` variant: its
-     * markers are chapter ticks). Without one, `seek`, `play` and keys still work.
+     * After), or `true` for one of its own under the viewer: a player's thin progress line (the
+     * `"line"` variant, as `player()` has), its markers chapter segments. Without one, `seek`,
+     * `play` and keys still work. Either way a click on the stage plays and pauses (not wiping).
      */
     readonly timeline?: Timeline | boolean;
     /** The frame strip over the timeline (off; one timeline is made if there's none). */

package/dist/types/ui/diff.d.ts

@@ -105,12 +105,11 @@ export declare function diffCounts(file: DiffFile, doc?: Document, options?: {
 /** A file's change as a letter (M, A, D, R), for a tree's `icon`. */
 export declare function diffStatus(file: DiffFile, doc?: Document): HTMLElement;
 /**
- * A code diff in a knobs card: a header with the file's path, its counts and Split | Unified
- * over the diff, drawn by `@pierre/diffs` (Shiki highlighting, word-level changes, hunks that
+ * A code diff on the void (no card, fill or ring: a hairline under its header and one under the
+ * code): a quiet header with the file's path, its counts and Split | Unified over the diff, drawn by `@pierre/diffs` (Shiki highlighting, word-level changes, hunks that
  * expand when the whole files are known). Takes a unified patch or before and after pairs.
  * Changing the file or the layout fades the new view in over the old, in place; each file
- * keeps its scroll. On another surface (a card, a split's pane, a walkthrough's step) it draws
- * no card of its own. Needs `@pierre/diffs` installed; it loads on first use.
+ * keeps its scroll. Needs `@pierre/diffs` installed; it loads on first use.
  */
 export declare function codeDiff(container: HTMLElement, options: CodeDiffOptions): CodeDiff;
 export interface DiffReviewOptions extends CodeDiffOptions {
@@ -147,7 +146,7 @@ export interface DiffReview {
     dispose(): void;
 }
 /**
- * A diff beside its file list, as a review, in one card: the list is a drawer at its left that
+ * A diff beside its file list, as a review, on the void as the diff is: the list is a drawer at its left that
  * springs open and shut (0 to 256px, .4 s, no bounce; the diff reflows as it moves) from a
  * button at the start of the diff's header, or ⌘B / Ctrl+B. In it, a field that narrows the list
  * by path, then the changed files as a compact tree (folders folded into paths), each with its

package/dist/types/ui/history-css.d.ts

@@ -0,0 +1 @@
+export declare const historyCss = "\n:where(.knobs-history,.knobs-history *){box-sizing:border-box}\n.knobs-ui.knobs-history{--hy-gutter:128px;--hy-lane:24px;--hy-bar:16px;--hy-axis:20px;--hy-bandrow:0px;--hy-c:var(--_k-fg-3);\n  --hy-fade:linear-gradient(to right,#000 calc(100% - 1.5em),transparent);\n  position:relative;display:flex;flex-direction:column;width:100%;min-width:0;outline:none;color:var(--_k-fg);\n  font:var(--_k-weight) var(--_k-type-body)/var(--_k-leading-body) var(--_k-font);font-variant-numeric:tabular-nums;font-feature-settings:\"tnum\";\n  text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}\n.knobs-history[data-bands]{--hy-bandrow:var(--_k-leading-small)}\n.knobs-history[data-narrow]{--hy-gutter:0px}\n.knobs-history [hidden]{display:none!important}\n:where(.knobs-ui) :is(.knobs-hy-ev,.knobs-hy-span,.knobs-hy-jump,.knobs-hy-more){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;\n  background:transparent;border:0;border-radius:0;margin:0;padding:0;min-width:0;box-shadow:none;outline:none}\n.knobs-history [data-tone=\"good\"]{--hy-c:var(--_k-ok)}\n.knobs-history [data-tone=\"warn\"]{--hy-c:var(--_k-warn)}\n.knobs-history [data-tone=\"bad\"]{--hy-c:var(--_k-danger)}\n.knobs-history [data-tone=\"info\"]{--hy-c:var(--_k-info)}\n.knobs-history [data-tone=\"dim\"]{--hy-c:var(--_k-fg-3)}\n\n/* \u2014\u2014\u2014 the chart: lane labels beside the plot (above each lane where it's narrow) \u2014\u2014\u2014 */\n.knobs-hy-chart{position:relative;display:grid;grid-template-columns:var(--hy-gutter) minmax(0,1fr)}\n.knobs-hy-axis{position:relative;grid-column:2;grid-row:1;height:calc(var(--hy-bandrow) + var(--hy-axis))}\n:is(.knobs-hy-tick,.knobs-hy-now,.knobs-hy-blabel){position:absolute;white-space:nowrap;font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}\n.knobs-hy-tick{bottom:2px;padding-left:4px}\n.knobs-hy-now{bottom:2px;color:var(--_k-accent-fg);font-weight:var(--_k-weight-label)}\n.knobs-hy-blabel{top:0;padding-left:4px;overflow:hidden;color:var(--_k-fg-2)}\n.knobs-hy-label{grid-column:1;align-self:center;min-width:0;margin-right:var(--_k-space-title);overflow:hidden;white-space:nowrap;\n  font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}\n.knobs-history[data-narrow] .knobs-hy-label{grid-column:2;align-self:end;margin:0}\n:is(.knobs-hy-label,.knobs-hy-blabel)[data-overflow]{-webkit-mask-image:var(--hy-fade);mask-image:var(--hy-fade)}\n.knobs-hy-track{position:relative;grid-column:2;height:var(--hy-lane)}\n.knobs-hy-layer{position:absolute;inset:0;grid-column:2;grid-row:1/-1;pointer-events:none}\n\n/* Bands and month lines behind the lanes; today, the selection and the pointer's line over them. */\n.knobs-hy-band{position:absolute;top:0;bottom:0;background:color-mix(in oklch,var(--_k-fg) 3.5%,transparent);box-shadow:inset 1px 0 0 var(--_k-border-subtle)}\n:is(.knobs-hy-grid,.knobs-hy-today,.knobs-hy-hover,.knobs-hy-sel){position:absolute;left:0;top:calc(var(--hy-bandrow) + var(--hy-axis));bottom:0;width:1px;margin-left:-.5px}\n.knobs-hy-grid{background:var(--_k-border-subtle)}\n.knobs-hy-today{top:calc(var(--hy-bandrow) + var(--hy-axis) - 4px);background:var(--_k-accent)}\n.knobs-hy-hover{background:color-mix(in oklch,var(--_k-fg) 32%,transparent);opacity:0;transition:opacity calc(var(--_k-hover-out) * 1ms)}\n.knobs-hy-hover[data-on]{opacity:1;transition-duration:calc(var(--_k-hover-in) * 1ms)}\n.knobs-hy-sel{background:var(--_k-fg-2);opacity:0}\n.knobs-hy-sel[data-on]{opacity:.6}\n\n/* Spans: a soft bar in their state's tone, inferred ones hatched; the tag at the end. */\n.knobs-hy-span{position:absolute;top:calc((var(--hy-lane) - var(--hy-bar)) / 2);height:var(--hy-bar);border-radius:var(--_k-radius-sm);cursor:pointer;\n  background:color-mix(in oklch,var(--hy-c) 24%,transparent);transition:background calc(var(--_k-hover-out) * 1ms),box-shadow calc(var(--_k-hover-out) * 1ms)}\n.knobs-hy-span[data-inferred]{background:repeating-linear-gradient(135deg,color-mix(in oklch,var(--hy-c) 34%,transparent) 0 2px,color-mix(in oklch,var(--hy-c) 9%,transparent) 2px 6px)}\n.knobs-hy-span[data-hover]{background-color:color-mix(in oklch,var(--hy-c) 34%,transparent);transition-duration:calc(var(--_k-hover-in) * 1ms)}\n.knobs-hy-span[data-selected]{box-shadow:inset 0 0 0 1px var(--hy-c)}\n.knobs-hy-span[data-clip-start]{border-top-left-radius:0;border-bottom-left-radius:0;-webkit-mask-image:linear-gradient(to right,transparent,#000 16px);mask-image:linear-gradient(to right,transparent,#000 16px)}\n.knobs-hy-span[data-clip-end]{border-top-right-radius:0;border-bottom-right-radius:0;-webkit-mask-image:linear-gradient(to left,transparent,#000 16px);mask-image:linear-gradient(to left,transparent,#000 16px)}\n.knobs-hy-tag{position:absolute;top:0;right:6px;font-size:var(--_k-type-small);line-height:var(--hy-bar);white-space:nowrap;pointer-events:none;\n  color:color-mix(in oklch,var(--hy-c) 55%,var(--_k-fg))}\n.knobs-hy-tag[data-place=\"after\"]{right:auto;left:calc(100% + 6px)}\n.knobs-hy-tag[data-place=\"none\"]{visibility:hidden}\n\n/* Event marks (their kind named in the tooltip): a dot for a commit, a diamond for a release, a cross for a deletion, a square for a\n   channel's switch, a triangle for a finding; inferred ones hollow. */\n.knobs-hy-ev{position:absolute;top:0;width:16px;height:var(--hy-lane);margin-left:-8px;cursor:pointer;--hy-c:var(--_k-fg-2);--hy-s:9px}\n.knobs-hy-ev::before{content:\"\";position:absolute;left:50%;top:50%;width:var(--hy-s);height:var(--hy-s);margin:calc(var(--hy-s) / -2) 0 0 calc(var(--hy-s) / -2);\n  border-radius:50%;background:var(--hy-c);transition:scale calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy)}\n.knobs-hy-ev[data-range]{width:calc(var(--hy-w) + 16px)}\n.knobs-hy-ev[data-range]::before{left:calc(8px - var(--hy-s) / 2);right:calc(8px - var(--hy-s) / 2);width:auto;margin-left:0;border-radius:var(--_k-round)}\n.knobs-hy-ev[data-type=\"release\"]{--hy-s:8px}\n.knobs-hy-ev[data-type=\"release\"]::before{border-radius:1.5px;rotate:45deg}\n.knobs-hy-ev[data-type=\"channel\"]{--hy-s:8px}\n.knobs-hy-ev[data-type=\"channel\"]::before{border-radius:2px}\n.knobs-hy-ev[data-type=\"audit\"]{--hy-s:10px}\n.knobs-hy-ev[data-type=\"audit\"]::before{border-radius:0;clip-path:polygon(50% 4%,100% 92%,0 92%)}\n.knobs-hy-ev[data-type=\"deletion\"]::before{border-radius:0;rotate:45deg;\n  background:linear-gradient(var(--hy-c),var(--hy-c)) center/100% 1.75px no-repeat,linear-gradient(var(--hy-c),var(--hy-c)) center/1.75px 100% no-repeat}\n.knobs-hy-ev[data-inferred]:not([data-type=\"audit\"],[data-type=\"deletion\"])::before{background:transparent;box-shadow:inset 0 0 0 1.5px var(--hy-c)}\n.knobs-hy-ev[data-inferred]:is([data-type=\"audit\"],[data-type=\"deletion\"])::before{opacity:.5}\n/* Held-back marks (commits, by default) come up while the pointer is on their lane, and stay with\n   \"Show commits\" or while selected. */\n.knobs-hy-ev[data-quiet]{opacity:0;transition:opacity calc(var(--_k-hover-out) * 1ms)}\n.knobs-hy-track:hover .knobs-hy-ev[data-quiet]{opacity:.6;transition-duration:calc(var(--_k-motion-snappy-ms) * 1ms)}\n:is(.knobs-history[data-all] .knobs-hy-ev[data-quiet],.knobs-hy-ev[data-quiet]:is([data-selected],[data-hover])){opacity:1}\n.knobs-hy-ev[data-hover]::before{scale:1.25}\n.knobs-hy-ev[data-selected]::before{scale:1.3}\n.knobs-hy-ev[data-selected]::after{content:\"\";position:absolute;left:50%;top:50%;width:calc(var(--hy-s) + 9px);height:calc(var(--hy-s) + 9px);\n  margin:calc((var(--hy-s) + 9px) / -2) 0 0 calc((var(--hy-s) + 9px) / -2);border-radius:50%;box-shadow:0 0 0 1.5px var(--hy-c)}\n.knobs-hy-ev[data-range][data-selected]::after{left:3px;right:3px;width:auto;margin-left:0;border-radius:var(--_k-round)}\n.knobs-history:focus-visible .knobs-hy-ev[data-selected]::after{box-shadow:0 0 0 2px var(--_k-focus)}\n.knobs-history:focus-visible .knobs-hy-span[data-selected]{box-shadow:inset 0 0 0 2px var(--_k-focus)}\n\n/* \u2014\u2014\u2014 under the chart: \"Show commits\", and a legend only when inferred and verified both appear \u2014\u2014\u2014 */\n.knobs-hy-foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--_k-space-inside) var(--_k-space-title);margin-top:var(--_k-space-sibling);padding-left:var(--hy-gutter);\n  font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}\n.knobs-hy-legend{display:flex;flex-wrap:wrap;gap:var(--_k-space-inside) var(--_k-space-title)}\n.knobs-ui .knobs-hy-more{height:20px;margin-left:-6px;padding:0 6px;border-radius:var(--_k-radius-sm);color:var(--_k-fg-3);cursor:pointer;\n  transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}\n.knobs-ui .knobs-hy-more:is(:hover,:focus-visible){background:var(--_k-fill);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}\n.knobs-hy-key{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}\n.knobs-hy-swatch{flex:none;width:14px;height:8px;border-radius:2px;background:color-mix(in oklch,var(--hy-c) 34%,transparent)}\n.knobs-hy-swatch[data-inferred]{background:repeating-linear-gradient(135deg,color-mix(in oklch,var(--hy-c) 60%,transparent) 0 1.5px,transparent 1.5px 4px)}\n\n/* \u2014\u2014\u2014 the detail: one area under the chart, its height on a spring \u2014\u2014\u2014 */\n.knobs-hy-detail{position:relative;overflow:hidden;user-select:text;-webkit-user-select:text}\n.knobs-hy-detail[data-moving]{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 16px),transparent)}\n.knobs-hy-dc{padding:var(--_k-space-title) 0 0 var(--hy-gutter);transition:opacity calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy)}\n.knobs-hy-dc:is([data-enter],[data-leave]){opacity:0}\n.knobs-hy-dc[data-leave]{position:absolute;left:0;right:0;top:0;transition-duration:calc(var(--_k-motion-snappy-ms) * .8ms)}\n.knobs-hy-dmeta{display:flex;flex-wrap:wrap;gap:0 var(--_k-space-sibling);font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}\n.knobs-hy-dmeta>[data-tone]{color:var(--hy-c)}\n.knobs-hy-dtitle{margin-top:var(--_k-space-inside);font-size:var(--_k-type-body);line-height:var(--_k-leading-body);font-weight:var(--_k-weight-title);color:var(--_k-fg);text-wrap:balance}\n.knobs-hy-dtext{margin:var(--_k-space-inside) 0 0;max-width:68ch;font-size:var(--_k-type-body);line-height:var(--_k-leading-body);color:var(--_k-fg-2);text-wrap:pretty}\n.knobs-hy-dtext code{font:calc(1em - 1px) var(--_k-mono);padding:1px 4px;border-radius:var(--_k-radius-sm);background:var(--_k-fill)}\n.knobs-hy-dfoot{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:var(--_k-space-sibling)}\n.knobs-hy-dfoot:empty{display:none}\n.knobs-hy-evidence{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:var(--_k-radius-sm);background:var(--_k-fill);color:var(--_k-fg-2);\n  font:var(--_k-type-small)/1 var(--_k-mono);text-decoration:none;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}\na.knobs-hy-evidence:hover{background:var(--_k-fill-hover);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}\n.knobs-ui .knobs-hy-jump{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px 0 8px;border-radius:var(--_k-radius-sm);color:var(--_k-fg-2);cursor:pointer;\n  font-size:var(--_k-type-small);transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}\n.knobs-ui .knobs-hy-jump:is(:hover,:focus-visible){background:var(--_k-fill);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}\n.knobs-hy-jump svg{width:12px;height:12px}\n\n/* \u2014\u2014\u2014 the pointer's tooltip: title, date, one line \u2014\u2014\u2014 */\n.knobs-hy-tip{position:absolute;left:0;top:0;max-width:280px;padding:6px 8px;border-radius:var(--_k-radius-md);background:var(--_k-bg-overlay);\n  box-shadow:var(--_k-shadow-overlay),0 0 0 1px var(--_k-border);pointer-events:none;opacity:0;transition:opacity calc(var(--_k-hover-out) * 1ms)}\n.knobs-hy-tip[data-on]{opacity:1;transition-duration:calc(var(--_k-hover-in) * 1ms)}\n.knobs-hy-tt{font-size:var(--_k-type-small);line-height:var(--_k-leading-small);font-weight:var(--_k-weight-label);color:var(--_k-fg);text-wrap:balance}\n:is(.knobs-hy-td,.knobs-hy-tl){font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}\n.knobs-hy-tl{margin-top:2px;color:var(--_k-fg-2);text-wrap:pretty}\n.knobs-hy-tl:empty{display:none}\n\n@media(prefers-reduced-motion:reduce){\n  .knobs-history :where(*,::before,::after){transition-property:opacity,background,color,box-shadow!important}\n  .knobs-hy-dc{transition-duration:calc(var(--_k-hover-out) * 1ms)!important}\n}\n";

package/dist/types/ui/history-model.d.ts

@@ -0,0 +1,249 @@
+export type HistoryTone = "good" | "warn" | "bad" | "info" | "dim";
+export type HistoryProvenance = "verified" | "inferred";
+/** A small tag that backs a claim: a PR, a commit, a log, as a link or not. */
+export interface HistoryEvidence {
+    readonly label: string;
+    readonly href?: string;
+}
+/** A stretch of a lane in one state: "v1 works", "v2 broken". */
+export interface HistorySpan {
+    readonly id?: string;
+    /** ISO date (`2026-09-19`), or as a page writes it (`"Sep 19, 2026"`). */
+    readonly from: string;
+    /** Left out: still so today. */
+    readonly to?: string;
+    /** A key in `states`, or a word of its own. */
+    readonly state: string;
+    /** Its tag at the end, in place of the state's (`"31d broken"`). */
+    readonly label?: string;
+    /** Its detail's title, in place of "lane · state". */
+    readonly title?: string;
+    readonly detail?: string;
+    readonly provenance?: HistoryProvenance;
+    readonly source?: string;
+    readonly evidence?: readonly HistoryEvidence[];
+    /** A step it's about, for `onJump`. */
+    readonly step?: string;
+}
+/** A row of the chart: a channel or a track, with its spans. */
+export interface HistoryLane {
+    readonly id: string;
+    readonly label: string;
+    readonly spans?: readonly HistorySpan[];
+}
+/** A dated moment: a commit, a release, a deletion. */
+export interface HistoryEvent {
+    readonly id?: string;
+    /** ISO, or as written: "Apr 9, 2026", "Oct 14–16, 2026", "May 7–8". */
+    readonly date: string;
+    /** Where it ran over days: its last day. */
+    readonly to?: string;
+    /** The lane it sits on (`"code"` by default). */
+    readonly lane?: string;
+    readonly title: string;
+    readonly detail?: string;
+    /** Its mark: a commit a dot, a release a diamond, a deletion a cross, an audit a triangle. */
+    readonly type?: "commit" | "release" | "deletion" | "channel" | "audit" | (string & {});
+    readonly tone?: HistoryTone;
+    readonly provenance?: HistoryProvenance;
+    readonly source?: string;
+    readonly evidence?: readonly HistoryEvidence[];
+    readonly step?: string;
+}
+/** A faint labelled stretch behind every lane: a phase. */
+export interface HistoryBand {
+    readonly from: string;
+    readonly to?: string;
+    readonly label: string;
+}
+/** What a span's state means: its name in the legend, its colour and its tag (`{d}` the days). */
+export interface HistoryState {
+    readonly label?: string;
+    readonly tone?: HistoryTone;
+    /** `"{d}d"` (the default), words of its own (`"v1"`), or `""` for none. */
+    readonly tag?: string;
+}
+/** The walkthrough's older shape: events under headings. */
+export interface HistoryGroup {
+    readonly heading?: string;
+    readonly summary?: string;
+    readonly events?: readonly HistoryEvent[];
+    readonly rows?: readonly HistoryEvent[];
+}
+/** What `history()` draws: plain JSON. */
+export interface HistoryData {
+    readonly axis?: {
+        readonly from?: string;
+        readonly to?: string;
+        readonly today?: string;
+    };
+    readonly lanes?: readonly HistoryLane[];
+    readonly events?: readonly HistoryEvent[];
+    readonly bands?: readonly HistoryBand[];
+    readonly states?: Readonly<Record<string, HistoryState>>;
+    /** The walkthrough's older shape: each group's events go on the code lane under a band. */
+    readonly groups?: readonly HistoryGroup[];
+}
+/** Days since 1970-01-01 (UTC): every date in the model. */
+export type Day = number;
+export interface HyItem {
+    readonly id: string;
+    readonly kind: "event" | "span";
+    readonly lane: string;
+    readonly from: Day;
+    readonly to: Day;
+    /** A span still running today. */
+    readonly open: boolean;
+    readonly title: string;
+    readonly detail?: string;
+    readonly tone: HistoryTone;
+    readonly type?: string;
+    readonly inferred: boolean;
+    readonly provenance?: HistoryProvenance;
+    readonly source?: string;
+    readonly evidence: readonly HistoryEvidence[];
+    readonly step?: string;
+    /** A span's state key. */
+    readonly state?: string;
+    /** A span's end tags, longest first: its own or the state's, then the days alone. */
+    readonly tags: readonly string[];
+}
+export interface HyLane {
+    readonly id: string;
+    readonly label: string;
+    readonly spans: readonly HyItem[];
+    readonly events: readonly HyItem[];
+}
+export interface HyBand {
+    readonly from: Day;
+    readonly to: Day;
+    readonly label: string;
+}
+export interface HyState {
+    readonly key: string;
+    readonly label: string;
+    readonly tone: HistoryTone;
+}
+export interface HistoryModel {
+    readonly from: Day;
+    readonly to: Day;
+    readonly today: Day;
+    readonly lanes: readonly HyLane[];
+    /** Every event, in the order ←/→ walk them. */
+    readonly events: readonly HyItem[];
+    readonly bands: readonly HyBand[];
+    /** The states the spans use, in the order they first appear. */
+    readonly states: readonly HyState[];
+    /** The event types used, in the order they first appear. */
+    readonly types: readonly string[];
+    /** Whether anything is marked inferred, and anything verified: the legend needs both. */
+    readonly inferred: boolean;
+    readonly verified: boolean;
+    readonly items: ReadonlyMap<string, HyItem>;
+}
+export declare const dayOf: (y: number, m: number, d: number) => Day;
+export declare const todayDay: (now?: number) => Day;
+/**
+ * A date as written, as whole days: ISO (`2026-04-09`, a time after it ignored), or `"Apr 9, 2026"`,
+ * `"Oct 14–16, 2026"`, `"Jun 26 – Jul 2, 2026"`; with no year, `year`. Null when it's neither.
+ */
+export declare function parseDay(text: string, year?: number): {
+    from: Day;
+    to: Day;
+    year?: number;
+} | null;
+/** `"Jun 26, 2026"`. */
+export declare function formatDay(day: Day): string;
+/** One day, or a range as short as it reads: `"Oct 14–16, 2026"`, `"Sep 19, 2026 – today"`. */
+export declare function formatRange(from: Day, to: Day, open?: boolean): string;
+/** `"1 day"`, `"31 days"`. */
+export declare const formatDays: (n: number) => string;
+/** A state's colour from its name when `states` doesn't give one. */
+export declare function guessTone(state: string): HistoryTone;
+/** A group heading as a band's label: its number and a trailing "(Apr – May 2026)" go. */
+export declare const bandLabel: (heading: string) => string;
+/**
+ * The walkthrough's older shape in the new one: every group's events on the code lane, each group
+ * with a heading a faint band from its first event to its last. Dates with no year take the year
+ * of the event before (or the first one written).
+ */
+export declare function fromGroups(groups: readonly HistoryGroup[], today: Day): {
+    events: HistoryEvent[];
+    bands: HistoryBand[];
+};
+/** A day as ISO `2026-04-09`. */
+export declare function iso(day: Day): string;
+/** The document filled in: whole days, lanes with their spans and events, the axis and the order. */
+export declare function normalizeHistory(data: HistoryData, now?: Day): HistoryModel;
+/** The marks drawn from the start: the rest wait for the pointer or "Show …". */
+export declare const DEFAULT_MARKS: readonly string[];
+/**
+ * The events held back until asked for: those with a type that isn't in `marks`. Untyped events
+ * always show, and where holding back would leave no mark at all, none are.
+ */
+export declare function quietEvents(events: readonly HyItem[], marks: readonly string[] | "all"): Set<string>;
+/** What the toggle shows: `"commits"`, `"commits and findings"`. */
+export declare function quietLabel(events: readonly HyItem[], quiet: ReadonlySet<string>): string;
+/** The order ←/→ walk: by date, then lane (top first), then as written. */
+export declare function eventOrder(events: readonly {
+    item: HyItem;
+    index: number;
+    laneIndex: number;
+}[]): HyItem[];
+/**
+ * The event ←/→ land on from `current`: the next or the one before, stopping at the ends; from
+ * nothing (or a span), → the first and ← the last.
+ */
+export declare function stepEvent(order: readonly HyItem[], current: string | null, dir: 1 | -1, 
+/** Where the selection is when it isn't in `order` (a held-back mark): carry on from there. */
+at?: Day): HyItem | null;
+/** Where a day sits across `width` (pixels), and the day at an x. */
+export declare function dayScale(from: Day, to: Day, width: number): {
+    x: (day: number) => number;
+    day: (x: number) => number;
+    /** As a fraction of the width, for `left: n%`. */
+    f: (day: number) => number;
+};
+export interface MonthTick {
+    readonly day: Day;
+    /** `"Apr"`, or the year on January. */
+    readonly label: string;
+}
+/**
+ * A tick on the first of each month inside the axis, thinned to every 2, 3, 6 or 12 months until
+ * neighbours sit at least `minGap` pixels apart. January says its year.
+ */
+export declare function monthTicks(from: Day, to: Day, width: number, minGap?: number): MonthTick[];
+/**
+ * Which labels to draw, left to right: each starts at its `x` and is `w` wide, and one is left out
+ * where it would touch the one before (within `gap`), a reserved box (today's label), or run past
+ * `width`.
+ */
+export declare function fitLabels(labels: readonly {
+    x: number;
+    w: number;
+}[], width: number, reserved?: readonly {
+    x0: number;
+    x1: number;
+}[], gap?: number): boolean[];
+/** A span clipped to the axis, and which ends were cut; null when it's outside it. */
+export declare function clipSpan(from: Day, to: Day, axisFrom: Day, axisTo: Day): {
+    from: Day;
+    to: Day;
+    clipStart: boolean;
+    clipEnd: boolean;
+} | null;
+/**
+ * Where a span's tag goes: the longest of `widths` (pixels, longest first) that fits inside the
+ * bar with `pad` either side, else one that fits after it in `roomAfter`; else none.
+ */
+export declare function fitTag(widths: readonly number[], spanWidth: number, roomAfter: number, pad?: number): {
+    index: number;
+    place: "inside" | "after";
+} | null;
+/** Each band's label room: from its start to its end or the next band's start, if sooner. */
+export declare function bandRoom(bands: readonly HyBand[], x: (day: Day) => number): number[];
+/** The event nearest `day` within `tolerance` days, else null. */
+export declare function nearestEvent(events: readonly HyItem[], day: number, tolerance: number): HyItem | null;
+/** The first sentence of a detail: a tooltip's one line. */
+export declare function firstSentence(text: string | undefined): string;

package/dist/types/ui/history.d.ts

@@ -0,0 +1,38 @@
+import { type HistoryData, type HistoryModel } from "./history-model.js";
+import { type UiLook } from "./look.js";
+export type { HistoryBand, HistoryData, HistoryEvent, HistoryEvidence, HistoryGroup, HistoryLane, HistoryProvenance, HistorySpan, HistoryState, HistoryTone, } from "./history-model.js";
+export interface HistoryOptions extends UiLook {
+    /** Lanes of spans and events (or the walkthrough's `groups` of events): plain JSON. */
+    readonly data: HistoryData;
+    /** The selected event or span's id. */
+    readonly selected?: string | null;
+    /** Clicks and keys moved the selection (a host's `select()` doesn't call it). */
+    readonly onSelect?: (id: string | null) => void;
+    /** Draws "Go to step" in the detail of anything with a `step`, and Enter on it. */
+    readonly onJump?: (step: string) => void;
+    /** Its accessible name. */
+    readonly label?: string;
+    /** Under this width (px) lane labels sit above their lanes instead of beside them (560). */
+    readonly narrow?: number;
+    /**
+     * The event types marked from the start (releases and deletions, or `"all"`); the rest show
+     * while the pointer is on their lane, and all of them behind a "Show commits" toggle.
+     */
+    readonly marks?: readonly string[] | "all";
+}
+export interface History {
+    readonly element: HTMLElement;
+    /** The data filled in: whole days, lanes, the axis and the order ←/→ walk. */
+    readonly model: HistoryModel;
+    readonly selected: string | null;
+    /** Selects an event or span (`null` clears); doesn't call `onSelect`. */
+    select(id: string | null): void;
+    set(data: HistoryData): void;
+    focus(): void;
+    dispose(): void;
+    /** The same as `dispose`. */
+    destroy(): void;
+}
+/** Adds the history's stylesheet once per document. */
+export declare function injectHistoryStyles(doc: Document): void;
+export declare function history(container: HTMLElement, options: HistoryOptions): History;

package/dist/types/ui/index.d.ts

@@ -15,9 +15,10 @@ export { tooltip, tooltips, type TooltipContent, type TooltipOptions } from "./t
 export { split, type PaneAction, type PaneOptions, type Split, type SplitFold, type SplitOptions, type SplitPane, } from "./split.js";
 export { COLLAPSE_PAST, drag as dragDivider, parseLayout, softClamp, solve as solveSplit, type PaneSpec, type SplitDirection, type SplitLayout, } from "./split-model.js";
 export { timeline, type SeekSource, type Timeline, type TimelineMarker, type TimelineListener, type TimelineOptions, type TimelineRange, } from "./timeline.js";
-export { adjacentMarker, advance, CATCH_UP, clampView, currentMarker, followView, frameTime, magnet, moveHead, rulerTicks, scrubTime, timeLabel, toFrame, zoomView, type HeadPosition, type Tick, type Ticks, type TimeUnits, type TimeView, } from "./timeline-model.js";
+export { adjacentMarker, advance, CATCH_UP, clampView, currentMarker, followView, frameTime, magnet, moveHead, rulerTicks, scrubTime, minutes, timeLabel, toFrame, zoomView, type HeadPosition, type Tick, type Ticks, type TimeUnits, type TimeView, } from "./timeline-model.js";
 export { compare, COMPARE_FFMPEG, type Compare, type CompareLoop, type CompareMode, type CompareOptions, type CompareSource, type CompareView, type MediaKind, type ZoomRegion, } from "./compare.js";
 export { compareStrip, type CompareStrip, type CompareStripOptions } from "./compare-strip.js";
+export { player, type Player, type PlayerChapter, type PlayerOptions } from "./player.js";
 export { compareLayout, compareModes, frameMidpoint, frameOf, gripTop, letterbox, mediaKind, meanAbsDiff, modeForKey, requestSeek, seamLabels, seeked, seekTime, stripColumns, stripPeaks, syncAction, wipeAt, wipeGrab, wipeKey, wipeX, zoomAbout, type CompareLayout, type SeekState, type StripColumn, type SyncAction, } from "./compare-model.js";
 export { tree, type Tree, type TreeOptions, type TreeRowContext, type TreeToggle } from "./tree.js";
 export { applyMove, plainAccess, dropTarget, flatten, indexTree, matchLabel, navigate, select, stepMove, topmost, typeahead, validMove, virtualWindow, type DropTarget, type FlatRow, type Selection, type TreeAccess, type TreeFilter, type TreeMove, } from "./tree-model.js";

package/dist/types/ui/player-css.d.ts

@@ -0,0 +1 @@
+export declare const playerCss = "\n:where(.knobs-player,.knobs-player *){box-sizing:border-box}\n.knobs-ui.knobs-player{--_kp-stage:var(--_k-compare-stage);display:flex;flex-direction:column;gap:6px;width:100%;outline:none;\n  font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}\n: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)}\n.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);cursor:pointer}\n.knobs-player[data-frame=\"flat\"] .knobs-player-frame{border-radius:0}\n.knobs-player-media{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;object-fit:contain;\n  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)}\n.knobs-player[data-ready] .knobs-player-media{opacity:1;filter:none}\n.knobs-player-glyph{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;color:var(--_k-fg);pointer-events:none;\n  opacity:0;filter:blur(4px);scale:.96;\n  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);\n  box-shadow:inset 0 0 0 .5px var(--_k-border),inset 0 1px 0 var(--_k-rim);\n  transition:opacity calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy),filter calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy),scale calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy)}\n.knobs-player-glyph svg{width:16px;height:16px}\n.knobs-player-glyph[data-flash]{opacity:1;filter:none;scale:1}\n.knobs-player-line{flex:none;min-height:0}\n";

package/dist/types/ui/player.d.ts

@@ -0,0 +1,60 @@
+import { type UiLook } from "./look.js";
+import { type Timeline } from "./timeline.js";
+/** A chapter: where it starts (seconds) and its name. */
+export interface PlayerChapter {
+    readonly label: string;
+    readonly start: number;
+    readonly id?: string;
+}
+export interface PlayerOptions extends UiLook {
+    readonly src: string;
+    readonly poster?: string;
+    /** A WebVTT file, shown by default. */
+    readonly captions?: string;
+    /** One segment of the line each, named under the pointer. */
+    readonly chapters?: readonly PlayerChapter[];
+    /** Starts over at the end (true). */
+    readonly loop?: boolean;
+    /** True by default. */
+    readonly muted?: boolean;
+    /** Width over height before the video loads (16/9). */
+    readonly aspect?: number;
+    /** Frames per second, for stepping with `,` and `.` (30). */
+    readonly fps?: number;
+    readonly label?: string;
+    /** The line's play key and playhead take codes in the page's hint mode (on by default). */
+    readonly hints?: boolean;
+    /** Played or paused, at `time` (seconds). */
+    onPlay?(playing: boolean, time: number): void;
+    /** Sought by the hand (the line, a key, a chapter) or code, at rest. */
+    onSeek?(time: number): void;
+}
+export interface Player {
+    readonly element: HTMLElement;
+    readonly video: HTMLVideoElement;
+    readonly timeline: Timeline;
+    /** Seconds. */
+    readonly time: number;
+    readonly playing: boolean;
+    readonly duration: number;
+    play(): void;
+    pause(): void;
+    toggle(): void;
+    /** `glide`: a jump the hand didn't make; the line catches up while the video lands at once. */
+    seek(time: number, options?: {
+        readonly glide?: boolean;
+    }): void;
+    seekBy(seconds: number): void;
+    focus(): void;
+    dispose(): void;
+}
+export declare function player(container: HTMLElement, options: PlayerOptions): Player;
+/**
+ * The glyph a play or a pause flashes in the middle of the media (a player's, a compare's stage):
+ * the state it went to, blurring in and out.
+ */
+export declare function playGlyph(doc: Document): {
+    element: HTMLSpanElement;
+    flash(playing: boolean): void;
+    dispose: () => void;
+};

package/dist/types/ui/timeline-model.d.ts

@@ -104,3 +104,7 @@ export declare function moveHead(head: HeadPosition, t: number, motion: "jump" |
 export declare function currentMarker<M extends {
     readonly time: number;
 }>(markers: readonly M[], t: number, fps: number): M | null;
+/** A time as a player shows it: `m:ss` (`1:05`), `h:mm:ss` past an hour. */
+export declare function minutes(t: number): string;
+/** A line's segment bounds: 0, each chapter start inside the length (once each), the end. */
+export declare function chapterBounds(times: readonly number[], duration: number): number[];

package/dist/types/ui/timeline.d.ts

@@ -48,10 +48,15 @@ export interface TimelineOptions extends UiLook {
     /**
      * `"editor"` (the default): a ruler with labels over a lane of markers to add, drag and name,
      * zoomed and panned by the wheel. `"lane"`: one slim lane under a compare or a video, with ticks
-     * and no labels, markers as faint chapter ticks (the current one in text colour), nothing to
-     * edit, and the wheel left to the page.
+     * and no labels, markers as faint chapter ticks (the current one in text colour) and nothing to
+     * edit. A pinch, ⌘/ctrl-wheel or = and - zoom it around the pointer, a sideways scroll pans it,
+     * both following the hand 1:1; a double-click or 0 fits it again. An up-and-down wheel is left
+     * to the page. `"line"`: a player's progress, a single thin line under a video or a compare (no
+     * play button: the media and Space play), one segment per chapter with a small gap between,
+     * each filling as the time passes it, thicker under the pointer; click or drag anywhere on it
+     * to seek, 1:1, and the chapter and time under the pointer show over it. Zooms as a lane does.
      */
-    readonly variant?: "editor" | "lane";
+    readonly variant?: "editor" | "lane" | "line";
     readonly label?: string;
     /** The time moved: scrubbed, stepped, jumped, played (every frame) or set from code. */
     onSeek?(time: number, source: SeekSource): void;
@@ -117,3 +122,5 @@ export interface Timeline {
     dispose(): void;
 }
 export declare function timeline(container: HTMLElement, options: TimelineOptions): Timeline;
+export declare const PLAY = "<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><path d=\"M5 3.6v8.8c0 .5.5.8.9.5l6.6-4.4c.4-.3.4-.8 0-1L5.9 3.1c-.4-.3-.9 0-.9.5Z\" fill=\"currentColor\"/></svg>";
+export declare const PAUSE = "<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><rect x=\"4\" y=\"3.2\" width=\"2.8\" height=\"9.6\" rx=\"1\" fill=\"currentColor\"/><rect x=\"9.2\" y=\"3.2\" width=\"2.8\" height=\"9.6\" rx=\"1\" fill=\"currentColor\"/></svg>";