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

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

@@ -1,12 +1,17 @@
 import { knobs } from "./knobs.js";
+import { reviewTheme } from "./review.js";
 import { voidTheme } from "./void.js";
 export { APCA_BUDGET, type Appearance as ThemeAppearance, type Density, defineTheme, type GpuColors, type Material, type ResolvedTokens, type Theme, type ThemeInputs, type ThemeSpec, type TokenOverrides, } from "./define.js";
-export { knobs, voidTheme };
+export { knobs, reviewTheme, voidTheme };
 export type { Appearance } from "../core/appearance.js";
 export type { PublicTokenName, TokenName, TokenProperty } from "../tokens/schema.js";
-/** The shipped themes: Knobs (the default) and Void (true black, flat, for OLED and video). */
+/**
+ * The shipped themes: Knobs (the default), Void (true black, flat, for OLED and video) and Review
+ * (the review pieces' own default: Void with hairlines you can see).
+ */
 export declare const themes: {
     readonly knobs: import("./define.js").Theme;
     readonly void: import("./define.js").Theme;
+    readonly review: import("./define.js").Theme;
 };
 export { labPreset, presetCss, problemsPreset, type TokenPreset } from "../core/theme.js";

package/dist/types/themes/review.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The review pieces' own look (walkthrough, compare, player, diff, facts, decision): Void's true
+ * black, flat and neutral, with hairlines you can see. Borders are alpha of the text colour, set
+ * by APCA on the page: subtle ≈ Lc 9, default ≈ Lc 12, strong ≈ Lc 17, in both appearances
+ * (Void's composited 6% and 10% read Lc 0 on black). Fills step 6 / 10 / 14% so a hover's
+ * background is plain to see. Light is white, page and surface alike. The platform's own face.
+ */
+export declare const reviewTheme: import("./define.js").Theme;

package/dist/types/tokens/schema.d.ts

@@ -409,6 +409,24 @@ export declare const TOKENS: readonly [{
         readonly css: "var(--k-warn)";
     };
     readonly doc: "Modified lines.";
+}, {
+    readonly name: "before";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Data";
+    readonly source: {
+        readonly css: "var(--k-fg-3)";
+    };
+    readonly doc: "Before in a comparison, and only Before: its label and side of the seam. Neutral unless a theme gives it a colour.";
+}, {
+    readonly name: "after";
+    readonly tier: "semantic";
+    readonly type: "color";
+    readonly group: "Data";
+    readonly source: {
+        readonly css: "var(--k-fg)";
+    };
+    readonly doc: "After in a comparison, and only After.";
 }, {
     readonly name: "series-1";
     readonly tier: "semantic";
@@ -510,6 +528,168 @@ export declare const TOKENS: readonly [{
         readonly value: "288px";
     };
     readonly doc: "Panel width.";
+}, {
+    readonly name: "space-inside";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Space";
+    readonly source: {
+        readonly css: "var(--k-unit)";
+    };
+    readonly doc: "Parts of one thing: an icon and its label, a meta line and its title.";
+}, {
+    readonly name: "space-sibling";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Space";
+    readonly source: {
+        readonly css: "calc(var(--k-unit) * 2)";
+    };
+    readonly doc: "Siblings in a group: buttons in a row, a list item's lines.";
+}, {
+    readonly name: "space-title";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Space";
+    readonly source: {
+        readonly css: "calc(var(--k-unit) * 3)";
+    };
+    readonly doc: "A heading and what it heads.";
+}, {
+    readonly name: "space-group";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Space";
+    readonly source: {
+        readonly css: "calc(var(--k-unit) * 12)";
+    };
+    readonly doc: "Groups inside a section (prose, video, diff), stacked media, feed items (a hairline in the middle).";
+}, {
+    readonly name: "space-section";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Space";
+    readonly source: {
+        readonly css: "calc(var(--k-unit) * 24)";
+    };
+    readonly doc: "Sections of a page (the intro, the updates, each PR), a hairline in the middle.";
+}, {
+    readonly name: "space-column";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Space";
+    readonly source: {
+        readonly css: "calc(var(--k-unit) * 6)";
+    };
+    readonly doc: "Columns: a contents rail and the page, media side by side.";
+}, {
+    readonly name: "pad-page";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Space";
+    readonly source: {
+        readonly css: "calc(var(--k-unit) * 6)";
+    };
+    readonly doc: "A page's edge; 16px under 640px wide.";
+}, {
+    readonly name: "pad-card";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Space";
+    readonly source: {
+        readonly css: "calc(var(--k-unit) * 3)";
+    };
+    readonly doc: "Inside a card or popover.";
+}, {
+    readonly name: "type-heading";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "20px";
+    };
+    readonly doc: "A page's title, weight 500.";
+}, {
+    readonly name: "leading-heading";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "28px";
+    };
+    readonly doc: "Line height for type-heading.";
+}, {
+    readonly name: "type-title";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "16px";
+    };
+    readonly doc: "Section titles (under their kicker), weight 500.";
+}, {
+    readonly name: "leading-title";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "24px";
+    };
+    readonly doc: "Line height for type-title.";
+}, {
+    readonly name: "type-body";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "13px";
+    };
+    readonly doc: "Prose, questions, list rows, step titles; 400, or 500 for emphasis.";
+}, {
+    readonly name: "leading-body";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "20px";
+    };
+    readonly doc: "Line height for type-body.";
+}, {
+    readonly name: "type-label";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "12px";
+    };
+    readonly doc: "Mono inside body text: code and paths.";
+}, {
+    readonly name: "leading-label";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "16px";
+    };
+    readonly doc: "Line height for type-label.";
+}, {
+    readonly name: "type-small";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "11px";
+    };
+    readonly doc: "Meta, controls, keys, timestamps; mono inside labels.";
+}, {
+    readonly name: "leading-small";
+    readonly tier: "semantic";
+    readonly type: "length";
+    readonly group: "Type";
+    readonly source: {
+        readonly value: "16px";
+    };
+    readonly doc: "Line height for type-small.";
 }, {
     readonly name: "font-size";
     readonly tier: "semantic";

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:2px;height:24px;padding:0 2px}\n.knobs-cmp-modes{display:flex;align-items:center;gap:2px}\n.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;\n  transition:color .15s,background .15s}\n.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)}\n.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)}\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.knobs-compare[data-dragging],.knobs-compare[data-dragging] *{cursor:ew-resize!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 .15s}\n.knobs-cmp-label[data-lit]{color:var(--_k-fg)}\n.knobs-cmp-label[data-dim]{color:var(--_k-fg-3)}\n/* The wipe: a hairline down the line with a grip at its middle; a wider strip takes the hand and\n   the keys (a slider). It fades with the mode. */\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:var(--_ku-cmp-line);box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 0 6px rgba(0,0,0,.25)}\n.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);\n  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}\n.knobs-compare[data-dragging] .knobs-cmp-handle::after{scale:1.12}\n.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)}\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  height:20px;padding:0 8px;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;height:56px;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-type-small)/var(--_k-leading-small) 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/* Hover is a quiet fill under the arrow cursor (no hand, no brightening), there at once. */\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:default;white-space:nowrap;\n  transition:background calc(var(--_k-hover-out) * 1ms)}\n.knobs-ui .knobs-cmp-mode:not([aria-checked=\"true\"]):is(:hover,:focus-visible){background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}\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-2);cursor:default;\n  transition:background calc(var(--_k-hover-out) * 1ms)}\n.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}\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/* Zoomed, it pans: a move cursor, never a hand. */\n.knobs-compare[data-zoomed] .knobs-cmp-stage{cursor:move;touch-action:none}\n.knobs-compare[data-panning],.knobs-compare[data-panning] *{cursor:move!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/* Over the pictures: a quiet scrim, dark in either appearance, blurred, with no ring. */\n.knobs-cmp-label,.knobs-cmp-zoom,.knobs-cmp-grip{background:var(--_ku-media-scrim);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}\n/* \u2717 Before \u00B7 \u2713 After: Before quieter, After in full. 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-weight:var(--_k-weight-label);\n  white-space:nowrap;pointer-events:none;will-change:transform}\n.knobs-cmp-label[data-side=\"before\"]{color:var(--_ku-on-media-2)}\n.knobs-cmp-label[data-side=\"after\"]{color:var(--_ku-on-media)}\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 6px var(--_ku-media-scrim)}\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));will-change:transform}\n.knobs-cmp-grip::before,.knobs-cmp-grip::after{content:\"\";position:absolute;top:10px;width:1px;height:8px;background:var(--_ku-on-media-2);transition:background calc(var(--_k-hover-out) * 1ms)}\n.knobs-cmp-grip::before{left:6px}\n.knobs-cmp-grip::after{left:9px}\n.knobs-compare[data-dragging] .knobs-cmp-grip::before,.knobs-compare[data-dragging] .knobs-cmp-grip::after{background:var(--_ku-on-media)}\n.knobs-cmp-handle:focus-visible .knobs-cmp-grip,.knobs-compare[data-keyboard] .knobs-cmp-handle:focus .knobs-cmp-grip{box-shadow:0 0 0 2px var(--_k-accent)}\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(--_ku-on-media);font-variant-numeric:tabular-nums;font-feature-settings:var(--_kr-data,\"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(--_ku-on-media-2);cursor:default;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}\n:where(.knobs-ui) .knobs-cmp-zoom-reset:is(:hover,:focus-visible){background:color-mix(in srgb,var(--_ku-on-media) 16%,transparent);color:var(--_ku-on-media);transition-duration:calc(var(--_k-hover-in) * 1ms)}\n.knobs-cmp-note{position:absolute;left:50%;top:50%;translate:-50% -50%;color:var(--_k-fg-3);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-type-small)/var(--_k-leading-small) 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

@@ -3,7 +3,6 @@ export declare const MODE_INDEX: {
     readonly side: 0;
     readonly wipe: 1;
     readonly difference: 2;
-    readonly flicker: 3;
 };
 export interface CompareDraw {
     /** Device px: where each side's picture lands (zoomed, it's larger than its clip). */
@@ -12,20 +11,21 @@ export interface CompareDraw {
     /** Device px: the part of the stage each side may draw in. */
     readonly beforeClip: Rect;
     readonly afterClip: Rect;
+    /** Device px: the clips' corner radii, Before's left and right, then After's. */
+    readonly radii: readonly [number, number, number, number];
     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;
     readonly to: number;
     /** 0 shows `from`, 1 shows `to`. */
     readonly mix: number;
-    /** Before in After's place (X held). */
-    readonly flick: boolean;
-    /** Flicker mode's phase: Before showing. */
-    readonly phase: boolean;
     readonly threshold: number;
     readonly gain: number;
     readonly accent: readonly [number, number, number];

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

@@ -1,5 +1,18 @@
 import type { TimeView } from "./timeline-model.js";
-export type CompareMode = "side" | "wipe" | "difference" | "flicker";
+/** Side by side, a wipe, or (opt in) a difference. */
+export type CompareMode = "side" | "wipe" | "difference";
+/**
+ * The modes a viewer offers (`["side", "wipe"]` unless given; `difference` only when asked for),
+ * in their order, and the mode it starts in (the first offered when the asked one isn't).
+ */
+export declare function compareModes(modes?: readonly CompareMode[], mode?: CompareMode): {
+    readonly modes: readonly CompareMode[];
+    readonly mode: CompareMode;
+};
+/** The mode a key picks among those offered: a digit by position, or S, W, D. */
+export declare function modeForKey(key: string, modes: readonly CompareMode[]): CompareMode | null;
+/** A mode's letter key (S, W, D). */
+export declare const modeKey: (mode: CompareMode) => string;
 export type MediaKind = "video" | "image";
 /** A source's kind: as given, else by its extension (a video's, or an image). */
 export declare function mediaKind(src: string, kind?: MediaKind): MediaKind;
@@ -76,7 +89,10 @@ export interface CompareLayout {
         readonly after: Rect;
         readonly split: number;
     };
-    /** Overlaid (wipe, difference, flicker): 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;
@@ -84,6 +100,57 @@ 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;
+/**
+ * Kit Motion's blend blur, in px: the feather Before's cut swells to mid-fuse, the blur of the
+ * strip over the seam at its peak (mid-fuse too), and the overlap the seam fades in over.
+ */
+export declare const FUSE: {
+    readonly feather: 32;
+    readonly blur: 8;
+    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): none apart or fused, `FUSE.blur` mid-fuse. */
+    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, and a blurred strip over the seam blends the two, strongest mid-transition
+ * (the blend blur); it fades in as they overlap. `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).
+ */
+/**
+ * Each side's corner radii, `left` and `right` (px), so the frame is rounded at every frame of the
+ * fuse: a side's outer corners always take the frame's radius `r`; its inner ones (at the split)
+ * are square apart and grow to `r` as the sides fuse into one picture.
+ */
+export declare const fuseCorners: (r: number, k: number) => {
+    before: {
+        left: number;
+        right: number;
+    };
+    after: {
+        left: number;
+        right: number;
+    };
+};
+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;
 /**
@@ -134,6 +201,22 @@ export declare function wipeGrab(x: number, rect: Rect, wipe: number, slop?: num
     onLine: boolean;
     offset: number;
 };
+/**
+ * Wiping, Before and After ride either side of the seam at `x`, `gap` from it, each fading out as
+ * its side runs out of room (`left`/`right`: the wipe's edges; `wb`/`wa`: the labels' widths).
+ */
+export declare function seamLabels(x: number, left: number, right: number, wb: number, wa: number, gap?: number): {
+    before: {
+        x: number;
+        opacity: number;
+    };
+    after: {
+        x: number;
+        opacity: number;
+    };
+};
+/** Where the wipe's grip sits for a pointer at `y`: its top, kept `margin` inside the line. */
+export declare function gripTop(y: number, rect: Rect, grip: number, margin?: number): number;
 /** The wipe moved by a key: 1% a press, 10% with Shift. */
 export declare const wipeKey: (wipe: number, dir: -1 | 1, big?: boolean) => number;
 export interface StripColumn {

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

@@ -29,8 +29,13 @@ export interface CompareSource {
 export interface CompareOptions extends UiLook {
     readonly before: CompareSource;
     readonly after: CompareSource;
-    /** `"side"` (side by side) by default. */
+    /** The first of `modes` (`"side"`, side by side) by default. */
     readonly mode?: CompareMode;
+    /**
+     * The modes it offers, in the mode bar's order and on `1`–`3`: `["side", "wipe"]` by default.
+     * Add `"difference"` to offer a difference. One mode hides the bar.
+     */
+    readonly modes?: readonly CompareMode[];
     /** Where the wipe's line sits, 0 (all After) to 1 (all Before); 0.5. */
     readonly wipe?: number;
     /** Frames per second (the bound timeline's, else 30): steps, and where paused videos land. */
@@ -41,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 one of its own under the viewer. 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.
      */
     readonly timeline?: Timeline | boolean;
     /** The frame strip over the timeline (off; one timeline is made if there's none). */
@@ -68,6 +74,8 @@ export interface CompareOptions extends UiLook {
 export interface Compare {
     readonly element: HTMLElement;
     readonly mode: CompareMode;
+    /** The modes it offers. */
+    readonly modes: readonly CompareMode[];
     readonly wipe: number;
     readonly loupe: boolean;
     /** Seconds. */
@@ -85,7 +93,13 @@ export interface Compare {
     readonly loop: CompareLoop | null;
     /** New sources, mode, wipe, loupe, threshold or fps. A new mode glides in. */
     update(next: Partial<Pick<CompareOptions, "before" | "after" | "mode" | "wipe" | "loupe" | "threshold" | "fps">>): void;
-    seek(time: number): void;
+    /**
+     * `glide`: a jump the hand didn't make (a chapter's click): the timeline's playhead catches up
+     * from where it is while the videos land at once.
+     */
+    seek(time: number, options?: {
+        readonly glide?: boolean;
+    }): void;
     /** Moves by `seconds`, the timeline's playhead gliding there (playing carries on). */
     seekBy(seconds: number): void;
     play(): void;

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:var(--_kr-data,\"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:var(--_k-fill);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:default;\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:default;--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-hover-in) * 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:default;\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-hover);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-label);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:var(--_k-type-label) var(--_k-mono);letter-spacing:0;padding:1px 5px;border-radius:calc(var(--_k-radius) / 2);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 5px 0 6px;border-radius:var(--_k-radius-sm);color:var(--_k-fg-2);cursor:default;\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-hover);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";