@kitlangton/knobs 0.4.0-next.15 → 0.4.0-next.17

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

@@ -0,0 +1,35 @@
+/** Timers and the clock (the window's, or a test's). */
+export interface TipClock {
+    set(run: () => void, ms: number): unknown;
+    clear(handle: unknown): void;
+    now(): number;
+}
+/** What the schedule asks of the page. */
+export interface TipView<T> {
+    /** Shows `tip`; `snap` skips the entrance (a hand-off). */
+    show(tip: T, snap: boolean): void;
+    /** Hides the one showing; `now` skips the exit. */
+    hide(now: boolean): void;
+    /** Whether `tip`'s target is still in the page when its pause ends. */
+    connected(tip: T): boolean;
+}
+/** A neighbour within this long of a tip going shows at once. */
+export declare const HANDOFF_MS = 400;
+export declare const TIP_DELAY_MS = 500;
+export interface TipSchedule<T extends {
+    readonly el: object;
+}> {
+    readonly shown: T | null;
+    readonly pending: T | null;
+    /** `tip` wants to show: after its pause, or at once (`now`, or a hand-off). */
+    want(tip: T, options?: {
+        readonly now?: boolean;
+        readonly delay?: number;
+    }): void;
+    hide(now?: boolean): void;
+    /** Focus left: a tip shown or waiting for a target `within` matches goes, or never shows. */
+    leave(within: (tip: T) => boolean): void;
+}
+export declare function tipSchedule<T extends {
+    readonly el: object;
+}>(clock: TipClock, view: TipView<T>): TipSchedule<T>;

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

@@ -13,7 +13,7 @@ export interface TooltipOptions {
 export type TooltipContent = string | (() => string) | ({
     readonly text: string | (() => string);
 } & TooltipOptions);
-/** Shows `content` over `el` after a pause (or on keyboard focus). Returns the remover. */
+/** Shows `content` over `el` after a pause, or at once on keyboard focus. Returns the remover. */
 export declare function tooltip(el: HTMLElement, content: TooltipContent, options?: TooltipOptions): () => void;
 /** Turns on `data-tip` (and `data-tip-shortcut`, `data-tip-placement`) tooltips in a document. */
 export declare function tooltips(doc?: Document): void;

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

@@ -124,12 +124,12 @@ export type WalkthroughMedia = string | {
     readonly kind: "compare";
     readonly before: string | WalkthroughSource;
     readonly after: string | WalkthroughSource;
+    /** A small faint line over it, as every kind's `label` is. */
+    readonly label?: string;
     /** `"side"` by default (`"wipe"` where the slot is narrow). */
     readonly mode?: CompareMode;
     /** Width over height (`16 / 9`, or `"1100/900"`); read from the video when left out. */
     readonly aspect?: number | string;
-    /** The frame strip over the timeline. */
-    readonly strip?: boolean;
     /** Pills under it that seek, and markers on its timeline. */
     readonly chapters?: readonly WalkthroughChapter[];
     /** Marks on the pictures, on both sides (and under a zoom). */
@@ -193,6 +193,7 @@ export type WalkthroughMedia = string | {
     readonly kind: "diff";
     /** `git diff` / `git show` output. */
     readonly patch?: string;
+    readonly label?: string;
     readonly files?: readonly DiffSource[];
     readonly file?: string;
     readonly layout?: "split" | "unified";
@@ -239,6 +240,7 @@ export type WalkthroughMedia = string | {
 } | {
     readonly kind: "mount";
     readonly mount: (element: HTMLElement) => (() => void) | void;
+    readonly label?: string;
     /** Pixels held for it before it mounts. */
     readonly height?: number;
 };