@kitlangton/knobs 0.4.0-next.8 → 0.4.0-next.9

package/dist/themes.js

@@ -1603,28 +1603,6 @@ var knobs = defineTheme({
   material: "glass"
 });
 
-// src/themes/void.ts
-var voidTheme = defineTheme({
-  name: "void",
-  extends: knobs,
-  gray: { hue: 0, chroma: 0 },
-  accent: { dark: "#ffffff", light: "#1c1c1c" },
-  material: "flat",
-  tokens: {
-    dark: {
-      "bg-page": "#000000",
-      "bg-inset": "#0a0a0a",
-      bg: "#000000",
-      "bg-raised": "#1c1c1e",
-      "bg-overlay": "#2c2c2e",
-      fg: "#ededed",
-      "fg-2": "#cecece",
-      "fg-3": "#989898",
-      "fg-4": "#7a7a7a",
-      "compare-stage": "#000000"
-    }
-  }
-});
 // src/core/spring.ts
 class Spring {
   x;
@@ -1707,6 +1685,125 @@ function springCss(value) {
   return { easing, duration: ms };
 }
 
+// src/core/motion.ts
+var SPRINGS = {
+  instant: { duration: 0.1, bounce: 0 },
+  snappy: { duration: 0.25, bounce: 0 },
+  default: { duration: 0.3, bounce: 0 },
+  calm: { duration: 0.4, bounce: 0 },
+  smooth: { duration: 0.45, bounce: 0 }
+};
+var FADE = { duration: 0.16, bounce: 0 };
+var CLOSE = { duration: 0.18, bounce: 0 };
+var MOTION = Object.fromEntries(Object.entries(SPRINGS).map(([name, spring]) => [name, springMotion(spring)]));
+var springLinear = (spring) => {
+  const { omega, zeta } = springMotion(spring);
+  return springEasing(omega, zeta);
+};
+var names = Object.keys(SPRINGS);
+var linear = Object.fromEntries(names.map((n) => [n, springLinear(SPRINGS[n])]));
+var SPRING_TOKEN = `${SPRINGS.default.duration} ${SPRINGS.default.bounce}`;
+var DEFAULT_LINEAR = linear.default;
+var motionCss = `:where(:root,:host){${names.map((n) => `--_k-motion-${n}:${linear[n].easing};--_k-motion-${n}-ms:${linear[n].ms}`).join(";")}}
+@media(prefers-reduced-motion:reduce){:where(:root,:host){${names.map((n) => `--_k-motion-${n}-ms:0`).join(";")}}}`;
+
+// src/review/foundations.ts
+var TRACKING = 0.03;
+var MEASURE = "66ch";
+var FONT = {
+  sans: 'system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif',
+  mono: 'ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono","JetBrains Mono",Menlo,Consolas,monospace'
+};
+var FEATURES = {
+  figures: "tabular-nums",
+  data: '"tnum" 1,"ss01" 1',
+  code: "none"
+};
+var MOTION2 = [
+  {
+    name: "hover",
+    spring: null,
+    ms: "0 in, 120 out",
+    use: "A hover's fill: on at once, off softly"
+  },
+  {
+    name: "quick",
+    spring: FADE,
+    use: "Replacing a whole thing in place: fade, scale .98, blur 3 px"
+  },
+  { name: "close", spring: CLOSE, use: "A popover closing" },
+  { name: "snappy", spring: SPRINGS.snappy, use: "Controls: a toggle, a pick, a chapter row" },
+  { name: "state", spring: SPRINGS.default, use: "The selection pill, a disclosure opening" },
+  {
+    name: "calm",
+    spring: SPRINGS.calm,
+    use: "Layout: a compare's height, the page scrolling to a step"
+  },
+  { name: "smooth", spring: SPRINGS.smooth, use: "A step opening to the full window" }
+];
+var foundationCss = `
+:where(.knobs-walkthrough,.knobs-wt-slot,.knobs-review){
+  --_kr-track:calc((var(--_k-type-body) - 1em) * ${TRACKING});
+  --_kr-measure:var(--k-walkthrough-measure,${MEASURE});
+  --_kr-block:calc(var(--_k-space-title) * 2);
+  --_kr-data:${FEATURES.data};
+  letter-spacing:var(--_kr-track);font-variant-numeric:${FEATURES.figures};font-optical-sizing:auto;font-kerning:normal}
+:where(.knobs-walkthrough,.knobs-wt-slot,.knobs-review) :where(*){letter-spacing:var(--_kr-track)}
+:where(.knobs-walkthrough,.knobs-wt-slot,.knobs-review) :where(code,pre,kbd,samp,.knobs-wt-mono){letter-spacing:0;font-variant-ligatures:${FEATURES.code}}
+`;
+
+// src/themes/void.ts
+var voidTheme = defineTheme({
+  name: "void",
+  extends: knobs,
+  gray: { hue: 0, chroma: 0 },
+  accent: { dark: "#ffffff", light: "#1c1c1c" },
+  material: "flat",
+  tokens: {
+    dark: {
+      "bg-page": "#000000",
+      "bg-inset": "#0a0a0a",
+      bg: "#000000",
+      "bg-raised": "#1c1c1e",
+      "bg-overlay": "#2c2c2e",
+      fg: "#ededed",
+      "fg-2": "#cecece",
+      "fg-3": "#989898",
+      "fg-4": "#7a7a7a",
+      "compare-stage": "#000000"
+    }
+  }
+});
+
+// src/themes/review.ts
+var reviewTheme = defineTheme({
+  name: "review",
+  extends: voidTheme,
+  font: FONT,
+  tokens: {
+    dark: {
+      fill: "#ededed0f",
+      "fill-hover": "#ededed1a",
+      "fill-selected": "#ededed24",
+      "border-subtle": "#ededed47",
+      border: "#ededed4f",
+      "border-strong": "#585858"
+    },
+    light: {
+      "bg-page": "#ffffff",
+      "bg-inset": "#f7f7f7",
+      bg: "#ffffff",
+      "bg-raised": "#ffffff",
+      "bg-overlay": "#ffffff",
+      fill: "#1919190a",
+      "fill-hover": "#19191912",
+      "fill-selected": "#1919191c",
+      "border-subtle": "#19191917",
+      border: "#1919191d",
+      "border-strong": "#dcdcdc"
+    }
+  }
+});
 // src/core/theme.ts
 var property = (k) => k.startsWith("--") ? k : `--k-${k}`;
 function presetCss(preset) {
@@ -1884,7 +1981,7 @@ var problemsPreset = {
   }
 };
 // src/themes/index.ts
-var themes = { knobs, void: voidTheme };
+var themes = { knobs, void: voidTheme, review: reviewTheme };
 export {
   APCA_BUDGET,
   defineTheme,
@@ -1892,6 +1989,7 @@ export {
   labPreset,
   presetCss,
   problemsPreset,
+  reviewTheme,
   themes,
   voidTheme
 };

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

@@ -0,0 +1,13 @@
+import { type Theme } from "../themes/define.js";
+export interface ReviewFontOptions {
+    /** A stylesheet that declares the face (Google Fonts, rsms.me/inter, your own). */
+    readonly href?: string;
+    /** The family, first in the stack: `"Inter"`, `"Geist"`. The platform's face follows it. */
+    readonly sans?: string;
+    readonly mono?: string;
+}
+/**
+ * The review look in a webfont: loads `href` once per document and returns the review theme with
+ * `sans` (and `mono`) first in its stacks. Pass it as `theme`.
+ */
+export declare function reviewFont(doc: Document, options: ReviewFontOptions): Theme;

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

@@ -0,0 +1,175 @@
+/** The five sizes. Two weights: 400, and 500 for titles and emphasis. */
+export declare const TYPE: readonly [{
+    readonly role: "heading";
+    readonly size: 20;
+    readonly leading: 28;
+    readonly weight: 500;
+    readonly use: "A page's title";
+}, {
+    readonly role: "title";
+    readonly size: 16;
+    readonly leading: 24;
+    readonly weight: 500;
+    readonly use: "A section's title, under its kicker";
+}, {
+    readonly role: "body";
+    readonly size: 13;
+    readonly leading: 20;
+    readonly weight: 400;
+    readonly use: "Prose, step and option titles (500), rows, values";
+}, {
+    readonly role: "label";
+    readonly size: 12;
+    readonly leading: 16;
+    readonly weight: 400;
+    readonly use: "Mono inside body text: code, paths, evidence chips";
+}, {
+    readonly role: "small";
+    readonly size: 11;
+    readonly leading: 16;
+    readonly weight: 400;
+    readonly use: "Meta, terms, kickers, controls, keys, times";
+}];
+export type TypeRole = (typeof TYPE)[number]["role"];
+/**
+ * Tracking follows size, one rule for every element: (body − size) × 0.03, so 20 px closes up by
+ * 0.21 px, 16 px by 0.09, 13 px sits at 0 and 11 px opens by 0.06. Mono never tracks.
+ */
+export declare const TRACKING = 0.03;
+export declare const trackingAt: (size: number, body?: number) => number;
+/** Prose stops here: 45–75 characters, centred on 66. */
+export declare const MEASURE = "66ch";
+/**
+ * The type stack: the platform's own UI face (SF Pro with its optical sizes on Apple, Segoe UI
+ * Variable on Windows), so nothing downloads, nothing swaps in, and the pages read like the native
+ * apps beside them. A webfont goes in through `reviewFont`.
+ */
+export declare const FONT: {
+    readonly sans: "system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI Variable Text\",\"Segoe UI\",Roboto,\"Helvetica Neue\",Arial,sans-serif";
+    readonly mono: "ui-monospace,\"SF Mono\",SFMono-Regular,\"Cascadia Mono\",\"JetBrains Mono\",Menlo,Consolas,monospace";
+};
+/**
+ * OpenType: tabular figures everywhere (times and counts never jitter); in data, `ss01` too
+ * (straight-sided 6 and 9 in SF, open digits in Inter: figures that can't be misread); code with
+ * no ligatures (`=>` stays two characters).
+ */
+export declare const FEATURES: {
+    readonly figures: "tabular-nums";
+    readonly data: "\"tnum\" 1,\"ss01\" 1";
+    readonly code: "none";
+};
+/** The space roles (px, on the 4 px unit); each from `title` up at least doubles the one below. */
+export declare const SPACE: readonly [{
+    readonly role: "inside";
+    readonly px: 4;
+    readonly use: "Parts of one thing: an icon and its label, a term and its value";
+}, {
+    readonly role: "sibling";
+    readonly px: 8;
+    readonly use: "Siblings in a group: rows, buttons, a list's lines";
+}, {
+    readonly role: "title";
+    readonly px: 12;
+    readonly use: "A heading and what it heads";
+}, {
+    readonly role: "block";
+    readonly px: 24;
+    readonly use: "Blocks inside one piece: fact groups, columns, media and its caption";
+}, {
+    readonly role: "group";
+    readonly px: 48;
+    readonly use: "Steps and options, a hairline in the middle";
+}, {
+    readonly role: "section";
+    readonly px: 96;
+    readonly use: "Sections of a page, a hairline in the middle";
+}];
+/** Hairlines and fills: alpha of the text colour, held to an APCA target on the page. */
+export declare const HAIRLINES: readonly [{
+    readonly token: "border-subtle";
+    readonly lc: 9;
+    readonly use: "Dividers between rows, steps and sections";
+}, {
+    readonly token: "border";
+    readonly lc: 12;
+    readonly use: "Rings round frames and wells";
+}, {
+    readonly token: "border-strong";
+    readonly lc: 17;
+    readonly use: "Interactive edges, a focus that isn't the accent";
+}];
+export declare const FILLS: readonly [{
+    readonly token: "fill";
+    readonly use: "A well at rest: code, a chip, a frame loading";
+}, {
+    readonly token: "fill-hover";
+    readonly use: "Under the pointer, at once";
+}, {
+    readonly token: "fill-selected";
+    readonly use: "The selection pill, a pressed toggle";
+}];
+/** Radii, concentric: what sits inside a frame takes the frame's radius less the gap between. */
+export declare const RADII: readonly [{
+    readonly token: "radius";
+    readonly px: 8;
+    readonly use: "Controls and rows 28–32 px high";
+}, {
+    readonly token: "radius-panel";
+    readonly px: 12;
+    readonly use: "Frames, wells, cards";
+}, {
+    readonly token: "radius / 2";
+    readonly px: 4;
+    readonly use: "Inline code, chips, rows 20 px high";
+}];
+/**
+ * The motion set. Springs are a duration and no bounce; nothing moves on load; hovers land at once
+ * and ease out; a whole thing replaced in place fades with a 3 px blur.
+ */
+export declare const MOTION: readonly [{
+    readonly name: "hover";
+    readonly spring: null;
+    readonly ms: "0 in, 120 out";
+    readonly use: "A hover's fill: on at once, off softly";
+}, {
+    readonly name: "quick";
+    readonly spring: import("../index.js").SpringValue;
+    readonly use: "Replacing a whole thing in place: fade, scale .98, blur 3 px";
+}, {
+    readonly name: "close";
+    readonly spring: import("../index.js").SpringValue;
+    readonly use: "A popover closing";
+}, {
+    readonly name: "snappy";
+    readonly spring: {
+        readonly duration: 0.25;
+        readonly bounce: 0;
+    };
+    readonly use: "Controls: a toggle, a pick, a chapter row";
+}, {
+    readonly name: "state";
+    readonly spring: {
+        readonly duration: 0.3;
+        readonly bounce: 0;
+    };
+    readonly use: "The selection pill, a disclosure opening";
+}, {
+    readonly name: "calm";
+    readonly spring: {
+        readonly duration: 0.4;
+        readonly bounce: 0;
+    };
+    readonly use: "Layout: a compare's height, the page scrolling to a step";
+}, {
+    readonly name: "smooth";
+    readonly spring: {
+        readonly duration: 0.45;
+        readonly bounce: 0;
+    };
+    readonly use: "A step opening to the full window";
+}];
+/**
+ * The foundations as private tokens on every review root; the review stylesheet reads them.
+ * Tracking is a calc in em, so it resolves on each element at its own size.
+ */
+export declare const foundationCss: string;

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

@@ -0,0 +1,13 @@
+export { FEATURES, FILLS, FONT, HAIRLINES, MEASURE, MOTION, RADII, SPACE, TRACKING, TYPE, trackingAt, type TypeRole, } from "./foundations.js";
+export { reviewFont, type ReviewFontOptions } from "./font.js";
+export { reviewTheme } from "../themes/review.js";
+export { injectUiStyles, restyle, type RestyleLook, type UiLook } from "../ui/look.js";
+export { tasteTest, walkthrough, type TasteTest, type TasteTestOptions, type Walkthrough, type WalkthroughOptions, } from "../ui/walkthrough.js";
+export { decision, facts, mediaSlot, type DecisionOptions, type FactsOptions, type MediaSlot, type MediaSlotOptions, type StepLinks, } from "../ui/walkthrough-media.js";
+export { compare, type Compare, type CompareLoop, type CompareMode, type CompareOptions, type CompareSource, type CompareView, type ZoomRegion, } from "../ui/compare.js";
+export { compareStrip, type CompareStrip, type CompareStripOptions } from "../ui/compare-strip.js";
+export { player, type Player, type PlayerChapter, type PlayerOptions } from "../ui/player.js";
+export { codeDiff, diffReview, type CodeDiff, type CodeDiffOptions, type CodeDiffUpdate, type DiffLayout, type DiffReview, type DiffReviewOptions, } from "../ui/diff.js";
+export type { DiffSource } from "../ui/diff-model.js";
+export { history, type History, type HistoryBand, type HistoryData, type HistoryEvent, type HistoryEvidence, type HistoryGroup, type HistoryLane, type HistoryOptions, type HistoryProvenance, type HistorySpan, type HistoryState, type HistoryTone, } from "../ui/history.js";
+export { collectFeedback, feedbackMarkdown, inlineMarkdown, normalizeWalkthrough, plainMarkdown, readState as readWalkthroughState, walkthroughProgress, type FeedbackItem, type FeedbackNote, type WalkPage, type WalkStep, type WalkthroughAnnotation, type WalkthroughChapter, type WalkthroughDecisionOption, type WalkthroughFact, type WalkthroughFactGroup, type WalkthroughFacts, type WalkthroughDoc, type WalkthroughEvidence, type WalkthroughFeedback, type WalkthroughHistoryEvent, type WalkthroughHistoryGroup, type WalkthroughMedia, type WalkthroughMeta, type WalkthroughOption, type WalkthroughPR, type WalkthroughQA, type WalkthroughSection, type WalkthroughSource, type WalkthroughStackItem, type WalkthroughState, type WalkthroughStatus, type WalkthroughStep, type WalkthroughTableCell, type WalkthroughTableColumn, type WalkthroughTableRow, type WalkthroughTone, type WalkthroughUpdate, } from "../ui/walkthrough-model.js";

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

@@ -0,0 +1 @@
+export { CodeDiff, Compare, CompareStrip, DiffReview, MediaSlot, TasteTest, Walkthrough, type CodeDiffProps, type CompareProps, type CompareStripProps, type DiffReviewProps, type MediaSlotProps, type TasteTestProps, type WalkthroughDoc, type WalkthroughFeedback, type WalkthroughProps, } from "../ui/react.js";

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

@@ -0,0 +1 @@
+export { CodeDiff, Compare, CompareStrip, DiffReview, MediaSlot, TasteTest, Walkthrough, type CodeDiffProps, type CompareProps, type CompareStripProps, type DiffReviewProps, type MediaSlotProps, type TasteTestProps, type WalkthroughDoc, type WalkthroughFeedback, type WalkthroughProps, } from "../ui/solid.js";

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/ui/history-css.d.ts

@@ -1 +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";
+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: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: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/index.d.ts

@@ -32,5 +32,5 @@ export { diffActivity, flattenActivity, formatDuration, indexActivity, keepSelec
 export { optionPicker, type OptionPicker, type OptionPickerOptions, type PickerOption, } from "./picker.js";
 export { claimsDigit, digitPick, keepPick, stepPick } from "./picker-model.js";
 export { tasteTest, walkthrough, type TasteTest, type TasteTestOptions, type Walkthrough, type WalkthroughOptions, } from "./walkthrough.js";
-export { mediaSlot, type MediaSlot, type MediaSlotOptions, type StepLinks, } from "./walkthrough-media.js";
-export { collectFeedback, feedbackMarkdown, inlineMarkdown, plainMarkdown, normalizeWalkthrough, readState as readWalkthroughState, stackLayout, walkthroughProgress, type ContextEvent, type FeedbackItem, type FeedbackNote, type FeedItem, type MediaContext, type NoteContext, type StackLayout, type StackRow, type WalkInk, type WalkNote, type WalkVoice, type WalkthroughQA, type WalkthroughUpdate, type WalkPage, type WalkStep, type WalkthroughChapter, type WalkthroughDoc, type WalkthroughEvidence, type WalkthroughFeedback, type WalkthroughHistoryEvent, type WalkthroughHistoryGroup, type WalkthroughMedia, type WalkthroughMeta, type WalkthroughOption, type WalkthroughSection, type WalkthroughSource, type WalkthroughStackItem, type WalkthroughState, type WalkthroughStatus, type WalkthroughStep, type WalkthroughTableCell, type WalkthroughTableColumn, type WalkthroughTableRow, type WalkthroughTone, type WalkthroughPR, type WalkthroughAnnotation, } from "./walkthrough-model.js";
+export { decision, facts, mediaSlot, type DecisionOptions, type FactsOptions, type MediaSlot, type MediaSlotOptions, type StepLinks, } from "./walkthrough-media.js";
+export { collectFeedback, feedbackMarkdown, inlineMarkdown, plainMarkdown, normalizeWalkthrough, readState as readWalkthroughState, stackLayout, walkthroughProgress, type ContextEvent, type FeedbackItem, type FeedbackNote, type FeedItem, type MediaContext, type NoteContext, type StackLayout, type StackRow, type WalkInk, type WalkNote, type WalkVoice, type WalkthroughQA, type WalkthroughUpdate, type WalkPage, type WalkStep, type WalkthroughChapter, type WalkthroughDecisionOption, type WalkthroughFact, type WalkthroughFactGroup, type WalkthroughFacts, type WalkthroughDoc, type WalkthroughEvidence, type WalkthroughFeedback, type WalkthroughHistoryEvent, type WalkthroughHistoryGroup, type WalkthroughMedia, type WalkthroughMeta, type WalkthroughOption, type WalkthroughSection, type WalkthroughSource, type WalkthroughStackItem, type WalkthroughState, type WalkthroughStatus, type WalkthroughStep, type WalkthroughTableCell, type WalkthroughTableColumn, type WalkthroughTableRow, type WalkthroughTone, type WalkthroughPR, type WalkthroughAnnotation, } from "./walkthrough-model.js";

package/dist/types/ui/review-look.d.ts

@@ -0,0 +1,6 @@
+import type { UiLook } from "./look.js";
+/**
+ * A review piece's look: the theme it's given, else the theme of the knobs element it sits in,
+ * else the review theme (quiet, true black, visible hairlines) rather than the panel's glass.
+ */
+export declare function reviewLook<T extends UiLook>(options: T, container?: Element): T;

package/dist/types/ui/review-options.d.ts

@@ -0,0 +1,28 @@
+import { type WalkFact, type WalkFactGroup } from "./walkthrough-model.js";
+/** Facts as a `<dl>` per group under its heading: terms in a gutter, values beside them. */
+export declare function renderFacts(doc: Document, groups: readonly WalkFactGroup[]): HTMLElement;
+export interface OptionView {
+    /** "Option 1". */
+    readonly number: string;
+    readonly title: string;
+    readonly summary?: string;
+    readonly recommended: boolean;
+    readonly facts?: readonly WalkFact[];
+}
+/**
+ * One option's column: its head (a `div`, or the `button` given for picking), its sentence, then
+ * `media(tile)` and its facts.
+ */
+export declare function optionTile(doc: Document, o: OptionView, options?: {
+    readonly head?: HTMLElement;
+    readonly media?: (tile: HTMLElement) => void;
+}): {
+    readonly tile: HTMLElement;
+    readonly head: HTMLElement;
+    readonly kicker: HTMLElement;
+};
+/**
+ * Lays `tiles` out in `root` as columns that fill whole rows, marking each with its column and
+ * row for the hairlines, again whenever `root`'s width changes. Returns the cleanup.
+ */
+export declare function layoutOptions(root: HTMLElement, tiles: readonly HTMLElement[]): () => void;

package/dist/types/ui/selection-pill.d.ts

@@ -23,6 +23,8 @@ export interface SelectionPillOptions {
      * of their own keep them unless you restyle them under `.knobs-pick-copy`.
      */
     color?: string;
+    /** The spring it travels on (`SPRINGS.default`, the state spring); 1.4× as long past 400 px. */
+    spring?: SpringValue;
 }
 export interface SelectionPill {
     /** The fill. */
@@ -91,6 +93,7 @@ export declare function planPill(state: {
     readonly first?: boolean;
     readonly reduced?: boolean;
     readonly snap?: boolean;
+    readonly spring?: SpringValue;
 }): PillPlan;
 /** Whether two boxes overlap. */
 export declare const boxesMeet: (a: PillBox, b: PillBox) => boolean;

package/dist/types/ui/walkthrough-media.d.ts

@@ -31,5 +31,28 @@ export interface MediaSlot {
 }
 /** Adds the walkthrough's stylesheet once per document. */
 export declare function injectWalkthroughStyles(doc: Document): void;
-export declare function mediaSlot(container: HTMLElement, options: MediaSlotOptions): MediaSlot;
+export declare function mediaSlot(container: HTMLElement, given: MediaSlotOptions): MediaSlot;
 export declare const CHECK: string;
+type FactsMedia = Extract<WalkthroughMedia, {
+    kind: "facts";
+}>;
+type DecisionMedia = Extract<WalkthroughMedia, {
+    kind: "decision";
+}>;
+export interface FactsOptions extends UiLook, Omit<FactsMedia, "kind"> {
+}
+export interface DecisionOptions extends UiLook, Omit<DecisionMedia, "kind">, Pick<MediaSlotOptions, "lazy" | "steps" | "onEvent"> {
+}
+/**
+ * Term → value pairs in an aligned grid: terms small and faint in a fixed gutter, values beside
+ * them, code and evidence as small mono chips; groups under a heading, hairlines between. Each
+ * term sits over its value where it's narrow. Also a walkthrough's `{ kind: "facts" }`.
+ */
+export declare function facts(container: HTMLElement, options: FactsOptions): MediaSlot;
+/**
+ * N ways to go, one recommended: each a title, a sentence, optional media and what changes as
+ * facts, side by side where there's room (whole rows only), hairlines between, the recommended one
+ * marked by a quiet word. Also a walkthrough's `{ kind: "decision" }`; a step's `options` (Kit
+ * picks) look the same.
+ */
+export declare function decision(container: HTMLElement, options: DecisionOptions): MediaSlot;