@kitlangton/knobs 0.2.0 → 0.4.0-next.0

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

@@ -0,0 +1,128 @@
+/** A file as before and after text. */
+export interface DiffSource {
+    /** Its path, which is its id. */
+    readonly name: string;
+    readonly before: string;
+    readonly after: string;
+    /** A Shiki language id, when the extension doesn't say. */
+    readonly lang?: string;
+}
+/** What a diff takes: a unified patch (`git diff`, `git show`, one file or many) or pairs. */
+export interface DiffInput {
+    readonly patch?: string;
+    readonly files?: readonly DiffSource[];
+}
+export type DiffChange = "change" | "new" | "deleted" | "rename";
+export interface DiffFile {
+    /** Its path after the change (before it, for a deleted file): the file's id. */
+    readonly name: string;
+    /** Its path before a rename. */
+    readonly prevName?: string;
+    readonly change: DiffChange;
+    readonly additions: number;
+    readonly deletions: number;
+    readonly binary?: boolean;
+    /** Its own part of the patch, headers and hunks. */
+    readonly patch?: string;
+    readonly before?: string;
+    readonly after?: string;
+    readonly lang?: string;
+    /** The rows its diff takes once drawn (see `DiffRows`). */
+    readonly rows?: DiffRows;
+}
+/**
+ * How tall a file's diff is once drawn, in rows: each layout's lines (`split` pairs a removed
+ * line with an added one) and the separators that stand for unchanged lines between hunks. A
+ * card reserves this much before the renderer has loaded, so nothing jumps when it does.
+ */
+export interface DiffRows {
+    readonly unified: number;
+    readonly split: number;
+    readonly separators: number;
+}
+/** The context lines a patch made from before and after text keeps around each change. */
+export declare const DIFF_CONTEXT = 3;
+/**
+ * The files in a unified patch, in its order, with lines added and removed counted from the
+ * hunks. Takes `git diff`, `git show` and `format-patch` output (anything before the first
+ * file, a commit's header and message, is skipped) and plain `diff -u` output.
+ */
+export declare function parsePatch(patch: string): DiffFile[];
+/** Lines one side has that the other doesn't, by a shortest edit (Myers), as a patch counts them. */
+export declare function countChanges(before: string, after: string): {
+    additions: number;
+    deletions: number;
+};
+/** What a patch made from before and after text would show: its counts and its rows. */
+export declare function compareText(before: string, after: string, context?: number): {
+    additions: number;
+    deletions: number;
+    rows: DiffRows;
+};
+/**
+ * The rows of a patch over whole files: changes with `context` unchanged lines around them,
+ * changes no more than twice that apart in one hunk, and a separator for each run of
+ * unchanged lines left out (before, between and after the hunks).
+ */
+export declare function hunkRows(ops: ArrayLike<number>, context?: number): DiffRows;
+/**
+ * A fingerprint of a file's change (its part of the patch, or its before and after text), so a
+ * file marked viewed comes back unviewed once its diff changes.
+ */
+export declare function fileKey(file: DiffFile): string;
+/**
+ * Orders paths as a file tree shows them: at each level folders first, then files, each by
+ * name (natural order, so `file2` comes before `file10`).
+ */
+export declare function comparePaths(a: string, b: string): number;
+/** A diff's files in tree order, counted: from the patch, or from each pair's text. */
+export declare function diffFiles(input: DiffInput): DiffFile[];
+/** Lines added and removed across the files. */
+export declare function diffStats(files: readonly DiffFile[]): {
+    files: number;
+    additions: number;
+    deletions: number;
+};
+/** A path as the folder it's in and its own name. */
+export declare function splitPath(name: string): {
+    dir: string;
+    base: string;
+};
+/** A row of a diff's file tree: a folder (one or more path segments) or a file. */
+export interface DiffTreeItem {
+    /** A file's name, or `dir:` and a folder's path. */
+    readonly id: string;
+    readonly label: string;
+    /** The folder's path, or the file's. */
+    readonly path: string;
+    readonly file?: DiffFile;
+    readonly children?: readonly DiffTreeItem[];
+}
+/**
+ * The files as tree items: folders hold what's in them, and a folder whose only child is a
+ * folder joins it (`src` › `ui` is one row, `src/ui`), so short trees stay flat.
+ */
+export declare function diffTree(files: readonly DiffFile[]): DiffTreeItem[];
+/** Every folder's id in a diff tree (to open them all). */
+export declare function diffFolders(items: readonly DiffTreeItem[]): string[];
+/**
+ * Which file to show once the list changes: the same one if it's still there; else the one now
+ * where it was (the next, or the last); else the first. Null with no files.
+ */
+export declare function keepFile(prev: readonly DiffFile[], next: readonly DiffFile[], current: string | null | undefined): string | null;
+/** The file before or after `current`, stopping at the ends. */
+export declare function stepFile(files: readonly DiffFile[], current: string | null | undefined, dir: -1 | 1): string | null;
+/**
+ * A change as a bar of `cells` squares, as GitHub draws one: how many show added, how many
+ * removed and how many neither. A change smaller than the bar fills one square a line; each side
+ * that has lines keeps at least one.
+ */
+export declare function diffBar(additions: number, deletions: number, cells?: number): [number, number, number];
+/** Whether a path has every word of a query in it, any case: `ui diff` finds `src/ui/diff.ts`. */
+export declare function matchPath(path: string, query: string): boolean;
+/** The files still viewed: those saved viewed whose change is the one saved (see `fileKey`). */
+export declare function stillViewed(saved: Readonly<Record<string, string>>, files: readonly DiffFile[]): Set<string>;
+/** What to save for the files viewed: each one's name and the key of its change. */
+export declare function saveViewed(viewed: Iterable<string>, files: readonly DiffFile[]): Record<string, string>;
+/** The files under a tree item (itself, for a file). */
+export declare function filesUnder(item: DiffTreeItem): string[];

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

@@ -0,0 +1,29 @@
+/**
+ * The CSS to hand the renderer: its code columns' native scrollbars hidden (`codeBars` draws
+ * thin ones), and every corner its stylesheet rounds by 6px rounded by `--kd-inner` instead, so
+ * a hunk separator inset in the card is concentric with it. Read once from its stylesheet.
+ */
+export declare function rendererCss(coreCss: () => string): string;
+export interface CodeBars {
+    /** Looks for the code columns again (after a render) and places their bars. */
+    rescan(): void;
+    place(): void;
+    dispose(): void;
+}
+/**
+ * Thin bars for the code columns' sideways scroll (one per column; two when split), drawn in
+ * `layer` (a positioned element inside the scroller) at the bottom of what shows of each
+ * column, so the bar is in view however far down a long file you are. Hidden until the pointer
+ * is over the diff, or while you scroll the code sideways or drag a bar, as `overlayScrollbar`'s.
+ */
+export declare function codeBars(scroller: HTMLElement, layer: HTMLElement, root: () => ShadowRoot | null | undefined): CodeBars;
+export interface EdgeFades {
+    update(): void;
+    dispose(): void;
+}
+/**
+ * Marks a scroller `data-fade-top` once it's scrolled and `data-fade-bottom` while there's more
+ * below, for the CSS that fades its content out at that edge (a mask, its stops on registered
+ * properties so they ease in and out).
+ */
+export declare function edgeFades(scroller: HTMLElement, content: Element): EdgeFades;

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

@@ -0,0 +1,158 @@
+import { type StoragePort } from "../core/storage.js";
+import { type DiffFile, type DiffSource, type DiffTreeItem } from "./diff-model.js";
+import { type UiLook } from "./look.js";
+import { type Tree } from "./tree.js";
+export type DiffLayout = "split" | "unified";
+/** Lines picked in a diff (`onLines`): a range on one side, or across both. */
+export interface DiffLines {
+    readonly start: number;
+    readonly end: number;
+    readonly side?: "deletions" | "additions";
+    readonly endSide?: "deletions" | "additions";
+}
+export interface CodeDiffOptions extends UiLook {
+    /** A unified patch: `git diff` or `git show` output, one file or many. */
+    readonly patch?: string;
+    /** Or files as before and after text (`patch` wins when both are set). */
+    readonly files?: readonly DiffSource[];
+    /** The file on show (its path); the first unless set. */
+    readonly file?: string | null;
+    /** Side by side (default) or one column. */
+    readonly layout?: DiffLayout;
+    /** Long lines wrap instead of scrolling sideways. */
+    readonly wrap?: boolean;
+    /**
+     * `"fill"` (default): the card fills its container and the diff scrolls inside it. `"auto"`:
+     * the card is as tall as the file's diff, up to `maxHeight`, and springs to each new height;
+     * it holds the height the diff will take from the start, so a page doesn't jump as it loads.
+     */
+    readonly height?: "fill" | "auto";
+    /** Pixels, for `height: "auto"` (640, or 70% of the window when that's less); it scrolls past. */
+    readonly maxHeight?: number;
+    /**
+     * Draws only near the viewport (a screen ahead) and lets go of a diff far behind, keeping its
+     * height; on by default with `height: "auto"`, for a long page of them. `ready` waits for it.
+     */
+    readonly lazy?: boolean;
+    /**
+     * Every file down one scroller, each under its own header (status, path, counts, Viewed)
+     * that sticks to the top until the next file's pushes it off; ‹ › and `show()` glide to a
+     * file, and the file on show follows the scroll. Each file draws when it's near the view.
+     */
+    readonly stack?: boolean;
+    /** The files marked viewed; with this or `onViewed`, a Viewed check in the header. */
+    readonly viewed?: readonly string[];
+    /** The header's Viewed check marked or cleared the file on show. */
+    readonly onViewed?: (viewed: readonly string[], file: string) => void;
+    /** ‹ 2 of 5 › in the header when there are several files (on by default). */
+    readonly nav?: boolean;
+    /** Shiki themes for the code, dark and light (Pierre's own unless set). */
+    readonly syntax?: {
+        readonly dark: string;
+        readonly light: string;
+    };
+    /** Its own controls changed the file (‹ ›); `show()` doesn't call it. */
+    readonly onFile?: (name: string) => void;
+    readonly onLayout?: (layout: DiffLayout) => void;
+    readonly onWrap?: (wrap: boolean) => void;
+    /** Lines picked by dragging over line numbers; turns line selection on. */
+    readonly onLines?: (lines: DiffLines | null, file: string) => void;
+    /** Shown with no files. */
+    readonly empty?: string;
+    /** An element of your own at the start of the header (diffReview puts its list's toggle here). */
+    readonly lead?: HTMLElement;
+}
+export interface CodeDiffUpdate {
+    readonly patch?: string;
+    readonly files?: readonly DiffSource[];
+    readonly file?: string | null;
+    readonly layout?: DiffLayout;
+    readonly wrap?: boolean;
+    readonly viewed?: readonly string[];
+    /**
+     * Switches between filling the container and its diff's own height, in place: the views and
+     * their scroll stay. The new height is taken as it is, not sprung, so a container whose size
+     * is moving (a card going full window) is followed rather than fought.
+     */
+    readonly height?: "fill" | "auto";
+    readonly maxHeight?: number;
+}
+export interface CodeDiff {
+    readonly element: HTMLElement;
+    /** The diff's files, counted, in tree order. */
+    readonly files: readonly DiffFile[];
+    readonly file: string | null;
+    readonly layout: DiffLayout;
+    readonly wrap: boolean;
+    readonly viewed: readonly string[];
+    /** Shows a file: the new one fades in over the last, in place. */
+    show(name: string): void;
+    /** The file before or after the one on show. */
+    step(dir: -1 | 1): void;
+    /** New input or settings; a new patch keeps the file on show if it's still there. */
+    update(next: CodeDiffUpdate): void;
+    /** Settles once the first file is drawn. */
+    readonly ready: Promise<void>;
+    dispose(): void;
+}
+/**
+ * A file's `+12 −3`, coloured, for a row of your own (a tree's `detail`); `bar` adds five
+ * squares that show the share added and removed, as GitHub does.
+ */
+export declare function diffCounts(file: DiffFile, doc?: Document, options?: {
+    readonly bar?: boolean;
+}): HTMLElement;
+/** 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
+ * 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.
+ */
+export declare function codeDiff(container: HTMLElement, options: CodeDiffOptions): CodeDiff;
+export interface DiffReviewOptions extends CodeDiffOptions {
+    /**
+     * Saves whether the file list is open and the files marked viewed, under this id. A viewed
+     * file whose change moves on comes back unviewed.
+     */
+    readonly id?: string;
+    readonly storage?: StoragePort | null;
+    /** The file list's title ("Files"). */
+    readonly title?: string;
+    /** The file list's width in pixels when open (256). */
+    readonly listSize?: number;
+    /** The file list starts open (the default) or closed; what was last chosen wins, with an id. */
+    readonly listOpen?: boolean;
+    /** A field over the file list that narrows it by path (on by default). */
+    readonly search?: boolean;
+}
+export interface DiffReview {
+    readonly element: HTMLElement;
+    readonly tree: Tree<DiffTreeItem>;
+    readonly diff: CodeDiff;
+    /** The files marked viewed. */
+    readonly viewed: readonly string[];
+    /** Marks files viewed or not (a folder's id marks what's in it). */
+    setViewed(names: readonly string[], viewed: boolean): void;
+    /** Narrows the file list to paths with every word of `query`. */
+    filter(query: string): void;
+    /** Whether the file list is open. */
+    readonly listOpen: boolean;
+    /** Springs the file list open or closed (toggles without an argument). */
+    toggleList(open?: boolean): void;
+    update(next: CodeDiffUpdate): void;
+    dispose(): void;
+}
+/**
+ * A diff beside its file list, as a review, in one card: 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
+ * change as a letter (M, A, D, R, coloured), its +/− counts and their bar, and a tick to mark it
+ * viewed; one highlight glides to the file on show. Viewed files dim, count in the list's title
+ * and, with an `id`, are remembered until their change moves on. `tree` and `diff` are the pieces.
+ */
+export declare function diffReview(container: HTMLElement, options: DiffReviewOptions): DiffReview;

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

@@ -12,13 +12,21 @@ export { toast, type Toast, type ToastOptions } from "./toast.js";
 export { tooltip, tooltips, type TooltipContent, type TooltipOptions } from "./tooltip.js";
 export { split, type PaneAction, type PaneOptions, type Split, type SplitFold, type SplitOptions, type SplitPane, } from "./split.js";
 export { COLLAPSE_PAST, drag as dragDivider, parseLayout, softClamp, solve as solveSplit, type PaneSpec, type SplitDirection, type SplitLayout, } from "./split-model.js";
-export { timeline, type SeekSource, type Timeline, type TimelineMarker, type TimelineOptions, type TimelineRange, } from "./timeline.js";
+export { timeline, type SeekSource, type Timeline, type TimelineMarker, type TimelineListener, type TimelineOptions, type TimelineRange, } from "./timeline.js";
 export { adjacentMarker, advance, clampView, followView, frameTime, magnet, rulerTicks, scrubTime, timeLabel, toFrame, zoomView, type Tick, type Ticks, type TimeUnits, type TimeView, } from "./timeline-model.js";
+export { compare, COMPARE_FFMPEG, type Compare, type CompareLoop, type CompareMode, type CompareOptions, type CompareSource, type CompareView, type MediaKind, type ZoomRegion, } from "./compare.js";
+export { compareStrip, type CompareStrip, type CompareStripOptions } from "./compare-strip.js";
+export { compareLayout, frameMidpoint, frameOf, letterbox, mediaKind, meanAbsDiff, requestSeek, seeked, seekTime, stripColumns, stripPeaks, syncAction, wipeAt, wipeGrab, wipeKey, wipeX, zoomAbout, type CompareLayout, type SeekState, type StripColumn, type SyncAction, } from "./compare-model.js";
 export { tree, type Tree, type TreeOptions, type TreeRowContext, type TreeToggle } from "./tree.js";
 export { applyMove, plainAccess, dropTarget, flatten, indexTree, matchLabel, navigate, select, stepMove, topmost, typeahead, validMove, virtualWindow, type DropTarget, type FlatRow, type Selection, type TreeAccess, type TreeFilter, type TreeMove, } from "./tree-model.js";
+export { codeDiff, diffCounts, diffReview, diffStatus, type CodeDiff, type CodeDiffOptions, type CodeDiffUpdate, type DiffLayout, type DiffLines, type DiffReview, type DiffReviewOptions, } from "./diff.js";
+export { compareText, comparePaths, countChanges, diffBar, diffFiles, diffFolders, diffStats, diffTree, fileKey, filesUnder, keepFile, matchPath, parsePatch, splitPath, stepFile, type DiffChange, type DiffFile, type DiffInput, type DiffRows, type DiffSource, type DiffTreeItem, } from "./diff-model.js";
 export { bento, type Bento, type BentoItem, type BentoOptions } from "./bento.js";
 export { fitRect, FIT_MAX, motionBlur, neighbour as bentoNeighbour, planBento, rowTarget, windowOf as bentoWindow, type BentoDirection, type BentoLayout, type BentoMode, type BentoPlan, type BentoRect, } from "./bento-model.js";
 export { activity, type Activity, type ActivityOptions, } from "./activity.js";
 export { diffActivity, flattenActivity, formatDuration, indexActivity, keepSelection as keepActivitySelection, navigateActivity, railSegments, showsSelection, stackRows, type ActivityEvent, type ActivityInput, type ActivityKey, type ActivityKind, type ActivityRow, type RailNode, } from "./activity-model.js";
 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 } from "./walkthrough-media.js";
+export { collectFeedback, feedbackMarkdown, inlineMarkdown, normalizeWalkthrough, readState as readWalkthroughState, walkthroughProgress, type ContextEvent, type FeedbackItem, type FeedbackNote, type FeedItem, type MediaContext, type NoteContext, type WalkInk, type WalkNote, type WalkVoice, type WalkthroughQA, type WalkthroughUpdate, type WalkPage, type WalkStep, type WalkthroughDoc, type WalkthroughFeedback, type WalkthroughMedia, type WalkthroughMeta, type WalkthroughOption, type WalkthroughSection, type WalkthroughSource, type WalkthroughState, type WalkthroughStatus, type WalkthroughStep, } from "./walkthrough-model.js";

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

@@ -39,7 +39,7 @@ export declare const tune: <T extends {
     readonly zeta: number;
 }) => T;
 /** Whether `target` is an editable field or select that takes typed keys. */
-export declare const isTypingTarget: (t: EventTarget | null) => boolean;
+export { isTypingTarget } from "../core/keys.js";
 /**
  * Tells the page's GPU overlay that layout moved (a pane resizing, collapsing or sliding): it
  * reads rects afresh on its next frame, so a panel inside a pane keeps up.

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

@@ -1,10 +1,15 @@
 import { type CSSProperties, type ReactNode } from "react";
 import { type Activity as ActivityHandle, type ActivityOptions } from "./activity.js";
 import { type Bento as BentoHandle, type BentoOptions } from "./bento.js";
+import { type CodeDiff as CodeDiffHandle, type CodeDiffOptions, type DiffReview as DiffReviewHandle, type DiffReviewOptions } from "./diff.js";
 import { type OptionPicker as OptionPickerHandle, type OptionPickerOptions, type PickerOption } from "./picker.js";
 import { type Split as SplitHandle, type SplitOptions } from "./split.js";
 import { type Timeline as TimelineHandle, type TimelineOptions } from "./timeline.js";
+import { type Compare as CompareHandle, type CompareOptions } from "./compare.js";
+import { type CompareStrip as CompareStripHandle, type CompareStripOptions } from "./compare-strip.js";
 import { type Tree as TreeHandle, type TreeOptions } from "./tree.js";
+import { type TasteTest as TasteTestHandle, type TasteTestOptions, type Walkthrough as WalkthroughHandle, type WalkthroughOptions } from "./walkthrough.js";
+import { type MediaSlot as MediaSlotHandle, type MediaSlotOptions } from "./walkthrough-media.js";
 export type SplitProps = SplitOptions & {
     /** One child per pane, in the panes' order; each renders into its pane's body. */
     children?: ReactNode;
@@ -24,6 +29,24 @@ export type TreeProps<T> = TreeOptions<T> & {
  * `filter` follow their props; callbacks always call the latest props.
  */
 export declare function Tree<T>(props: TreeProps<T>): import("react").JSX.Element;
+export type CodeDiffProps = CodeDiffOptions & {
+    className?: string;
+    style?: CSSProperties;
+    onReady?: (diff: CodeDiffHandle) => void;
+};
+/**
+ * `codeDiff()` as a component. `patch`, `files`, `file`, `layout`, `wrap`, `viewed`, `height` and
+ * `maxHeight` follow their
+ * props; callbacks always call the latest props.
+ */
+export declare function CodeDiff(props: CodeDiffProps): import("react").JSX.Element;
+export type DiffReviewProps = DiffReviewOptions & {
+    className?: string;
+    style?: CSSProperties;
+    onReady?: (review: DiffReviewHandle) => void;
+};
+/** `diffReview()` as a component: the file tree beside the diff; follows as `CodeDiff` does. */
+export declare function DiffReview(props: DiffReviewProps): import("react").JSX.Element;
 export type TimelineProps = TimelineOptions & {
     className?: string;
     style?: CSSProperties;
@@ -35,6 +58,24 @@ export type TimelineProps = TimelineOptions & {
  * always call the latest props.
  */
 export declare function Timeline(props: TimelineProps): import("react").JSX.Element;
+export type CompareProps = CompareOptions & {
+    className?: string;
+    style?: CSSProperties;
+    onReady?: (compare: CompareHandle) => void;
+};
+/**
+ * `compare()` as a component. `before`, `after` (by `src`), `mode`, `wipe`, `loupe`, `threshold`
+ * and `fps` follow their props; a new `timeline` handle, `strip` or `renderer` makes it afresh;
+ * callbacks always call the latest props.
+ */
+export declare function Compare(props: CompareProps): import("react").JSX.Element;
+export type CompareStripProps = CompareStripOptions & {
+    className?: string;
+    style?: CSSProperties;
+    onReady?: (strip: CompareStripHandle) => void;
+};
+/** `compareStrip()` as a component, on a timeline handle; new sources (by `src`) follow. */
+export declare function CompareStrip(props: CompareStripProps): import("react").JSX.Element;
 export type BentoProps = BentoOptions & {
     className?: string;
     style?: CSSProperties;
@@ -70,3 +111,28 @@ export type OptionPickerProps = Omit<OptionPickerOptions, "body"> & {
 export declare function OptionPicker(props: OptionPickerProps): import("react").JSX.Element;
 export type { ActivityEvent } from "./activity-model.js";
 export type { PickerOption } from "./picker.js";
+export type WalkthroughProps = WalkthroughOptions & {
+    className?: string;
+    style?: CSSProperties;
+    onReady?: (walkthrough: WalkthroughHandle) => void;
+};
+/**
+ * `walkthrough()` as a component: a new `doc` is a new draft (answers carry over by step key);
+ * `onFeedback` always calls the latest prop.
+ */
+export declare function Walkthrough(props: WalkthroughProps): import("react").JSX.Element;
+export type TasteTestProps = TasteTestOptions & {
+    className?: string;
+    style?: CSSProperties;
+    onReady?: (test: TasteTestHandle) => void;
+};
+/** `tasteTest()` as a component: `picked` follows its prop; new `options` make it afresh. */
+export declare function TasteTest(props: TasteTestProps): import("react").JSX.Element;
+export type MediaSlotProps = MediaSlotOptions & {
+    className?: string;
+    style?: CSSProperties;
+    onReady?: (slot: MediaSlotHandle) => void;
+};
+/** `mediaSlot()` as a component: one walkthrough media slot; new `media` mounts afresh. */
+export declare function MediaSlot(props: MediaSlotProps): import("react").JSX.Element;
+export type { WalkthroughDoc, WalkthroughFeedback } from "./walkthrough-model.js";

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

@@ -0,0 +1,12 @@
+/**
+ * A thin scrollbar drawn over a scroller's content, in place of the native one beside it. A native
+ * scrollbar that's always shown (as a system may be set) takes its width from the rows the moment
+ * the content overflows, so every row jumps sideways, and gives it back when it stops; this one
+ * takes no room. It shows while the pointer is over the scroller, while you scroll it and while
+ * you drag it; a scroll from code (a reveal, a restored position) doesn't flash it. `content` is the element whose height makes the scroll: it's watched for changes.
+ * The scroller hides its own (`scrollbar-width: none`) and is positioned.
+ */
+export declare function overlayScrollbar(scroller: HTMLElement, content: Element): {
+    update: () => void;
+    dispose(): void;
+};

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

@@ -1,10 +1,15 @@
 import { type JSX } from "solid-js";
 import { type Activity as ActivityHandle, type ActivityOptions } from "./activity.js";
 import { type Bento as BentoHandle, type BentoOptions } from "./bento.js";
+import { type CodeDiff as CodeDiffHandle, type CodeDiffOptions, type DiffReview as DiffReviewHandle, type DiffReviewOptions } from "./diff.js";
 import { type OptionPicker as OptionPickerHandle, type OptionPickerOptions, type PickerOption } from "./picker.js";
 import { type Split as SplitHandle, type SplitOptions } from "./split.js";
 import { type Timeline as TimelineHandle, type TimelineOptions } from "./timeline.js";
+import { type Compare as CompareHandle, type CompareOptions } from "./compare.js";
+import { type CompareStrip as CompareStripHandle, type CompareStripOptions } from "./compare-strip.js";
 import { type Tree as TreeHandle, type TreeOptions } from "./tree.js";
+import { type TasteTest as TasteTestHandle, type TasteTestOptions, type Walkthrough as WalkthroughHandle, type WalkthroughOptions } from "./walkthrough.js";
+import { type MediaSlot as MediaSlotHandle, type MediaSlotOptions } from "./walkthrough-media.js";
 export type SplitProps = SplitOptions & {
     /** One element per pane, in the panes' order; each goes into its pane's body. */
     children?: JSX.Element;
@@ -23,6 +28,20 @@ export type TreeProps<T> = TreeOptions<T> & {
  * `filter` follow their props; callbacks always call the latest props.
  */
 export declare function Tree<T>(props: TreeProps<T>): JSX.Element;
+export type CodeDiffProps = CodeDiffOptions & {
+    onReady?: (diff: CodeDiffHandle) => void;
+};
+/**
+ * `codeDiff()` as a component. `patch`, `files`, `file`, `layout`, `wrap`, `viewed`, `height` and
+ * `maxHeight` follow their
+ * props; callbacks always call the latest props.
+ */
+export declare function CodeDiff(props: CodeDiffProps): JSX.Element;
+export type DiffReviewProps = DiffReviewOptions & {
+    onReady?: (review: DiffReviewHandle) => void;
+};
+/** `diffReview()` as a component: the file tree beside the diff; follows as `CodeDiff` does. */
+export declare function DiffReview(props: DiffReviewProps): JSX.Element;
 export type TimelineProps = TimelineOptions & {
     onReady?: (timeline: TimelineHandle) => void;
 };
@@ -32,6 +51,20 @@ export type TimelineProps = TimelineOptions & {
  * always call the latest props.
  */
 export declare function Timeline(props: TimelineProps): JSX.Element;
+export type CompareProps = CompareOptions & {
+    onReady?: (compare: CompareHandle) => void;
+};
+/**
+ * `compare()` as a component, made once (with the `timeline`, `strip` and `renderer` it starts
+ * with). `before`, `after` (by `src`), `mode`, `wipe`, `loupe`, `threshold` and `fps` follow
+ * their props; callbacks always call the latest props.
+ */
+export declare function Compare(props: CompareProps): JSX.Element;
+export type CompareStripProps = CompareStripOptions & {
+    onReady?: (strip: CompareStripHandle) => void;
+};
+/** `compareStrip()` as a component, on a timeline handle; new sources (by `src`) follow. */
+export declare function CompareStrip(props: CompareStripProps): JSX.Element;
 export type BentoProps = BentoOptions & {
     onReady?: (bento: BentoHandle) => void;
 };
@@ -61,3 +94,22 @@ export type OptionPickerProps = Omit<OptionPickerOptions, "body"> & {
 export declare function OptionPicker(props: OptionPickerProps): JSX.Element;
 export type { ActivityEvent } from "./activity-model.js";
 export type { PickerOption } from "./picker.js";
+export type WalkthroughProps = WalkthroughOptions & {
+    onReady?: (walkthrough: WalkthroughHandle) => void;
+};
+/**
+ * `walkthrough()` as a component: a new `doc` is a new draft (answers carry over by step key);
+ * `onFeedback` always calls the latest prop.
+ */
+export declare function Walkthrough(props: WalkthroughProps): JSX.Element;
+export type TasteTestProps = TasteTestOptions & {
+    onReady?: (test: TasteTestHandle) => void;
+};
+/** `tasteTest()` as a component: `picked` follows its prop. */
+export declare function TasteTest(props: TasteTestProps): JSX.Element;
+export type MediaSlotProps = MediaSlotOptions & {
+    onReady?: (slot: MediaSlotHandle) => void;
+};
+/** `mediaSlot()` as a component: one walkthrough media slot. */
+export declare function MediaSlot(props: MediaSlotProps): JSX.Element;
+export type { WalkthroughDoc, WalkthroughFeedback } from "./walkthrough-model.js";

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

@@ -97,10 +97,11 @@ export declare function foldFaces(prev: FoldFaces, p: number): FoldFaces;
  */
 export declare function chevronTurn(p: number, edge: "start" | "end"): number;
 /**
- * The fold's chevron, flipping: its width (scaleX) against the rail's chevron at flip progress
- * `f` (0 open, 1 folded). The arms close in to a flat line halfway and open out the other way.
+ * The fold's chevron, flipping over: its turn about its vertical axis (degrees, drawn with depth)
+ * against the rail's chevron at flip progress `f` (0 open, 1 folded). Edge-on halfway, it comes
+ * round mirrored, rolling the way the pane's edge travels.
  */
-export declare function chevronFlip(f: number): number;
+export declare function chevronFlip(f: number, edge: "start" | "end"): number;
 /** How a pane folds: see `SplitOptions.fold`. */
 export interface FoldStyle {
     readonly chevron: "flip" | "turn";

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

@@ -45,8 +45,9 @@ export interface SplitOptions extends UiLook {
 /** How a pane folds (each part has a default). */
 export interface SplitFold {
     /**
-     * The collapse chevron: `"flip"` (default) closes it to a flat line and opens it the other way,
-     * quickly, on its own snappy spring; `"turn"` spins it half a turn with the fold.
+     * The collapse chevron: `"flip"` (default) turns it over about its vertical axis, with depth,
+     * mirrored as it travels, on its own snappy spring; `"turn"` spins it half a turn flat, with
+     * the fold.
      */
     readonly chevron?: "flip" | "turn";
     /**
@@ -54,7 +55,7 @@ export interface SplitFold {
      * element all the way; `"fade"` fades it out with the header as the rail's label fades in.
      */
     readonly title?: "travel" | "fade";
-    /** The fold's spring, in seconds (no bounce): 0.3 unless set. */
+    /** The fold's spring, in seconds (no bounce): 0.25 unless set. */
     readonly duration?: number;
 }
 export interface SplitPane {
@@ -85,8 +86,9 @@ export interface Split {
 /**
  * Resizable panes along a row or a column, divided by hairlines with a wider grip. Drag a divider
  * to resize (each pane slows into its min and max), double-click it to reset, or focus it and use
- * the arrow keys (⇧ for bigger steps) and Enter to collapse. Collapsing springs the pane down to a
- * slim rail, or to its header in a column, which opens it again. Sizes persist and restore before
- * the first paint. Splits nest: call `split` on another split's pane body.
+ * the arrow keys (⇧ for bigger steps) and Enter to collapse; in a row, double-click a pane's header
+ * to collapse it too. Collapsing springs the pane down to a slim rail, or to its header in a
+ * column, which opens it again. Sizes persist and restore before the first paint. Splits nest:
+ * call `split` on another split's pane body.
  */
 export declare function split(container: HTMLElement, options: SplitOptions): Split;