@fundar/data-chart-telling 0.0.64 → 1.1.0

package/dist/layout/timeline/TimelinePlayer.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+	import type { TimelineState } from './TimelineState.svelte';
+
+	/**
+	 * A timeline drawn as a player bar: play and pause, the current step, a
+	 * slider over the steps, and a speed and a loop button - each only when the
+	 * timeline's `controls` list it, in that order. It draws the
+	 * {@link TimelineState} it is handed and tells it what the reader does;
+	 * every size and color comes from the `--dct-player-*` custom properties
+	 * (the configuration's `timeline.player`).
+	 */
+	let { timeline }: { timeline: TimelineState } = $props();
+
+	const last = $derived(Math.max(0, timeline.steps.length - 1));
+	const percent = $derived(timeline.progress * 100);
+
+	function onkeydown(event: KeyboardEvent) {
+		const target = event.target as HTMLElement;
+		if (event.key !== ' ' || target.closest('button')) return;
+		event.preventDefault();
+		timeline.toggle();
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div class="dct-player" role="group" aria-label="Timeline" {onkeydown}>
+	{#each timeline.controls as control (control)}
+		{#if control === 'play'}
+			<button
+				type="button"
+				class="dct-player__play"
+				aria-label={timeline.playing ? 'Pause' : 'Play'}
+				onclick={() => timeline.toggle()}
+			>
+				<svg viewBox="0 0 16 16" width="55%" height="55%" aria-hidden="true">
+					{#if timeline.playing}
+						<path fill="currentColor" d="M4 2h3v12H4zM9 2h3v12H9z" />
+					{:else}
+						<path fill="currentColor" d="M4 2l10 6-10 6z" />
+					{/if}
+				</svg>
+			</button>
+		{:else if control === 'value'}
+			<span class="dct-player__value" aria-live="off">
+				{timeline.value === undefined ? '' : timeline.format(timeline.value)}
+			</span>
+		{:else if control === 'slider'}
+			<input
+				type="range"
+				class="dct-player__slider"
+				aria-label="Step"
+				min="0"
+				max={last}
+				step="1"
+				value={Math.max(0, timeline.index)}
+				style:--dct-player-progress="{percent}%"
+				oninput={(event) => timeline.seekIndex(Number(event.currentTarget.value))}
+			/>
+		{:else if control === 'speed'}
+			<button
+				type="button"
+				class="dct-player__toggle"
+				aria-label="Speed"
+				onclick={() => timeline.cycleSpeed()}
+			>
+				×{timeline.speed}
+			</button>
+		{:else if control === 'loop'}
+			<button
+				type="button"
+				class="dct-player__toggle"
+				class:dct-player__toggle--active={timeline.loop}
+				aria-label="Loop"
+				aria-pressed={timeline.loop}
+				onclick={() => timeline.setLoop(!timeline.loop)}
+			>
+				<svg viewBox="0 0 16 16" width="1.1em" height="1.1em" aria-hidden="true">
+					<path
+						fill="none"
+						stroke="currentColor"
+						stroke-width="1.6"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						d="M3 7V6a2 2 0 0 1 2-2h7M10 1.5 12.5 4 10 6.5M13 9v1a2 2 0 0 1-2 2H4M6 14.5 3.5 12 6 9.5"
+					/>
+				</svg>
+			</button>
+		{/if}
+	{/each}
+</div>
+
+<style>
+	.dct-player {
+		display: flex;
+		align-items: center;
+		gap: var(--dct-player-gap, 1rem);
+		padding: var(--dct-player-pad, 0.5rem 1rem);
+		border-radius: var(--dct-player-radius, 0.5rem);
+		background: var(--dct-player-bg, transparent);
+		color: var(--dct-player-color, currentColor);
+		font-size: var(--dct-player-size, 0.875rem);
+		font-weight: var(--dct-player-weight, 500);
+	}
+
+	.dct-player__play {
+		flex: 0 0 auto;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--dct-player-button-size, 2rem);
+		height: var(--dct-player-button-size, 2rem);
+		padding: 0;
+		border: none;
+		border-radius: var(--dct-player-button-radius, 999px);
+		background: var(--dct-player-button-bg, #e6580d);
+		color: var(--dct-player-button-color, #fff);
+		cursor: pointer;
+	}
+	.dct-player__play:hover {
+		background: var(--dct-player-button-hover-bg, var(--dct-player-button-bg, #e6580d));
+	}
+
+	.dct-player__value {
+		flex: 0 0 auto;
+		min-width: var(--dct-player-value-width, 3rem);
+		font-variant-numeric: tabular-nums;
+	}
+
+	.dct-player__slider {
+		flex: 1 1 auto;
+		min-width: 0;
+		height: var(--dct-player-thumb-size, 14px);
+		margin: 0;
+		background: transparent;
+		appearance: none;
+		cursor: pointer;
+	}
+	.dct-player__slider::-webkit-slider-runnable-track {
+		height: var(--dct-player-track-height, 3px);
+		border-radius: var(--dct-player-track-radius, 999px);
+		background: linear-gradient(
+			to right,
+			var(--dct-player-track-fill, currentColor) var(--dct-player-progress, 0%),
+			var(--dct-player-track-color, currentColor) var(--dct-player-progress, 0%)
+		);
+	}
+	.dct-player__slider::-moz-range-track {
+		height: var(--dct-player-track-height, 3px);
+		border-radius: var(--dct-player-track-radius, 999px);
+		background: var(--dct-player-track-color, currentColor);
+	}
+	.dct-player__slider::-moz-range-progress {
+		height: var(--dct-player-track-height, 3px);
+		border-radius: var(--dct-player-track-radius, 999px);
+		background: var(--dct-player-track-fill, currentColor);
+	}
+	.dct-player__slider::-webkit-slider-thumb {
+		appearance: none;
+		width: var(--dct-player-thumb-size, 14px);
+		height: var(--dct-player-thumb-size, 14px);
+		margin-top: calc(
+			(var(--dct-player-track-height, 3px) - var(--dct-player-thumb-size, 14px)) / 2
+		);
+		border: none;
+		border-radius: 50%;
+		background: var(--dct-player-thumb-color, currentColor);
+	}
+	.dct-player__slider::-moz-range-thumb {
+		width: var(--dct-player-thumb-size, 14px);
+		height: var(--dct-player-thumb-size, 14px);
+		border: none;
+		border-radius: 50%;
+		background: var(--dct-player-thumb-color, currentColor);
+	}
+
+	.dct-player__toggle {
+		flex: 0 0 auto;
+		display: inline-flex;
+		align-items: center;
+		padding: var(--dct-player-toggle-pad, 0.125rem 0.5rem);
+		border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
+		border-radius: var(--dct-player-toggle-radius, 0.375rem);
+		background: var(--dct-player-toggle-bg, transparent);
+		color: var(--dct-player-toggle-color, currentColor);
+		font: inherit;
+		font-size: var(--dct-player-toggle-size, 0.75rem);
+		font-variant-numeric: tabular-nums;
+		cursor: pointer;
+	}
+	.dct-player__toggle--active {
+		border-color: transparent;
+		background: var(--dct-player-toggle-active-bg, currentColor);
+		color: var(--dct-player-toggle-active-color, #fff);
+	}
+</style>

package/dist/layout/timeline/TimelinePlayer.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TimelineState } from './TimelineState.svelte';
+type $$ComponentProps = {
+    timeline: TimelineState;
+};
+declare const TimelinePlayer: import("svelte").Component<$$ComponentProps, {}, "">;
+type TimelinePlayer = ReturnType<typeof TimelinePlayer>;
+export default TimelinePlayer;

package/dist/layout/timeline/TimelineRule.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import Timeline from './Timeline.svelte';
+	import type { TimelineState } from './TimelineState.svelte';
+
+	/**
+	 * A timeline drawn as a rule: a line with the steps written along it, the
+	 * current one emphasised. It takes `thickness` across and, along it, the
+	 * room the chrome gives it - measured, so a vertical rule lines up with
+	 * the plot beside it - and draws the {@link TimelineState} it is handed.
+	 */
+	let { timeline }: { timeline: TimelineState } = $props();
+
+	const vertical = $derived(timeline.orientation === 'vertical');
+
+	let measuredWidth = $state(0);
+	let measuredHeight = $state(0);
+</script>
+
+<div
+	class="dct-timeline-rule"
+	style:width={vertical ? `${timeline.thickness}px` : '100%'}
+	style:height={vertical ? '100%' : `${timeline.thickness}px`}
+	bind:clientWidth={measuredWidth}
+	bind:clientHeight={measuredHeight}
+>
+	{#if measuredWidth > 0 && measuredHeight > 0 && timeline.value !== undefined}
+		<div class="dct-timeline-rule__box">
+			<Timeline
+				currentValue={timeline.value}
+				values={timeline.steps}
+				format={timeline.format}
+				orientation={timeline.orientation}
+				width={measuredWidth}
+				height={measuredHeight}
+			/>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.dct-timeline-rule {
+		position: relative;
+		min-width: 0;
+		min-height: 0;
+	}
+	/* Out of flow, so the rule's own size doesn't feed back into the box it is measured in. */
+	.dct-timeline-rule__box {
+		position: absolute;
+		inset: 0;
+	}
+</style>

package/dist/layout/timeline/TimelineRule.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { TimelineState } from './TimelineState.svelte';
+type $$ComponentProps = {
+    timeline: TimelineState;
+};
+declare const TimelineRule: import("svelte").Component<$$ComponentProps, {}, "">;
+type TimelineRule = ReturnType<typeof TimelineRule>;
+export default TimelineRule;

package/dist/layout/timeline/TimelineState.svelte.d.ts

@@ -0,0 +1,90 @@
+import type { PlayerConfig, PlayerControl, Orientation, TimeInput, TimeValue, TimelineStep, TimelineCallbacks, TimelineType } from '../../types/layout/timeline';
+/** What a {@link TimelineState} reads from the timeline's owner, each time it needs it. */
+export type TimelineSettings = TimelineCallbacks & {
+    type?: TimelineType;
+    player?: PlayerConfig;
+    progress?: number;
+    values?: TimeInput[];
+    /** How a non-ISO date string in `values` reads. */
+    dateFormat?: string;
+    show?: boolean;
+    orientation?: Orientation;
+    thickness?: number;
+};
+/**
+ * One figure's timeline: where it is across its steps, and whether it is
+ * playing, looping and how fast. Shared by everything in the figure - the
+ * plots that slice their rows by it, the player bar that draws it, and what
+ * the user builds with `useFigure().timeline`.
+ *
+ * The position is the owner's `progress` until the player (or a reader)
+ * moves it; from then on it is theirs, until the owner's `progress` changes.
+ * Create it during component init and call {@link watch} there.
+ */
+export declare class TimelineState {
+    #private;
+    constructor(settings: () => TimelineSettings | undefined);
+    /** The enclosing figure's timeline, or `null` outside one. Call during component init. */
+    static current(): TimelineState | null;
+    /** Makes `state` the timeline of everything below. Call during component init. */
+    static provide(state: TimelineState): TimelineState;
+    /** Whether its owner set a timeline at all. */
+    get enabled(): boolean;
+    get type(): TimelineType;
+    /** Which way a `'rule'` runs; a `'player'` is always horizontal. */
+    get orientation(): Orientation;
+    /** How much room a `'rule'` takes across, in px. */
+    get thickness(): number;
+    /** Whether the owner wants it drawn. */
+    get shown(): boolean;
+    /** The steps it moves across, ascending: the owner's `values`, else those its plots report. */
+    get steps(): TimeValue[];
+    /** Whether the steps are dates. */
+    get temporal(): boolean;
+    /** Reports the steps the plots found in their rows, and whether they are dates. */
+    setSteps(values: TimeValue[], temporal?: boolean): void;
+    /** The position across the steps, `0`-`1`. */
+    get progress(): number;
+    /** The step the position lands on, as an index; `-1` without steps. */
+    get index(): number;
+    /** The step the position lands on, or `undefined` without steps. */
+    get value(): TimeValue | undefined;
+    get playing(): boolean;
+    get loop(): boolean;
+    /** The playing speed, as a multiple of {@link stepDuration}. */
+    get speed(): number;
+    /** The controls the player bar draws, in order. */
+    get controls(): PlayerControl[];
+    /** The speeds the speed control cycles through. */
+    get speeds(): number[];
+    /** Milliseconds each step lasts at speed `1`. */
+    get stepDuration(): number;
+    /** How a step reads: the player's `format`, else a date label or the number. */
+    get format(): (value: TimeValue) => string;
+    /** A step as authors see it. */
+    step(value: TimeValue): TimelineStep;
+    /** An author's step as the timeline's own, or `undefined` when it reads as none. */
+    timeOf(value: TimeInput): TimeValue | undefined;
+    /** Moves to `progress` (`0`-`1`), and tells the owner. */
+    seek(progress: number): void;
+    /** Moves to the step at `index`. */
+    seekIndex(index: number): void;
+    /** Moves to the step closest to `value`. */
+    seekValue(value: TimeValue): void;
+    next(): void;
+    previous(): void;
+    play(): void;
+    pause(): void;
+    toggle(): void;
+    setLoop(loop: boolean): void;
+    setSpeed(speed: number): void;
+    /** Takes the next of `speeds` after the current one, from the first again after the last. */
+    cycleSpeed(): void;
+    /**
+     * Moves the position on by `elapsed` milliseconds of playing. At the end it
+     * starts again from the first step when looping, and stops otherwise.
+     */
+    advance(elapsed: number): void;
+    /** Starts what the timeline does by itself: playing, the owner's `onvalue` and `autoplay`. Call during component init. */
+    watch(): void;
+}

package/dist/layout/timeline/TimelineState.svelte.js

@@ -0,0 +1,260 @@
+import { getContext, setContext, untrack } from 'svelte';
+import { getConfiguration } from '../../configuration/config.svelte';
+import { TimelineSteps } from './TimelineSteps';
+import { TimelineTime } from './TimelineTime';
+const TIMELINE_KEY = Symbol('dct-timeline');
+/** The longest a frame counts for while playing, so a hidden tab doesn't jump ahead when it comes back. */
+const MAX_FRAME_MS = 250;
+/**
+ * One figure's timeline: where it is across its steps, and whether it is
+ * playing, looping and how fast. Shared by everything in the figure - the
+ * plots that slice their rows by it, the player bar that draws it, and what
+ * the user builds with `useFigure().timeline`.
+ *
+ * The position is the owner's `progress` until the player (or a reader)
+ * moves it; from then on it is theirs, until the owner's `progress` changes.
+ * Create it during component init and call {@link watch} there.
+ */
+export class TimelineState {
+    #settings;
+    #steps = $state([]);
+    #temporal = $state(false);
+    #own = $state(null);
+    #playing = $state(false);
+    #loop = $state(false);
+    #speed = $state(1);
+    constructor(settings) {
+        this.#settings = settings;
+        untrack(() => {
+            this.#loop = settings()?.player?.loop ?? false;
+            this.#speed = settings()?.player?.speed ?? 1;
+        });
+    }
+    /** The enclosing figure's timeline, or `null` outside one. Call during component init. */
+    static current() {
+        return getContext(TIMELINE_KEY) ?? null;
+    }
+    /** Makes `state` the timeline of everything below. Call during component init. */
+    static provide(state) {
+        setContext(TIMELINE_KEY, state);
+        return state;
+    }
+    /** Whether its owner set a timeline at all. */
+    get enabled() {
+        return this.#settings() !== undefined;
+    }
+    get type() {
+        return this.#settings()?.type ?? 'player';
+    }
+    /** Which way a `'rule'` runs; a `'player'` is always horizontal. */
+    get orientation() {
+        return this.type === 'player' ? 'horizontal' : (this.#settings()?.orientation ?? 'vertical');
+    }
+    /** How much room a `'rule'` takes across, in px. */
+    get thickness() {
+        return this.#settings()?.thickness ?? getConfiguration().timeline.thickness;
+    }
+    /** Whether the owner wants it drawn. */
+    get shown() {
+        return this.#settings()?.show !== false;
+    }
+    /** The steps it moves across, ascending: the owner's `values`, else those its plots report. */
+    get steps() {
+        const values = this.#ownerValues;
+        return values ? new TimelineSteps(values).values : this.#steps;
+    }
+    /** Whether the steps are dates. */
+    get temporal() {
+        const settings = this.#settings();
+        if (!settings?.values?.length)
+            return this.#temporal;
+        return new TimelineTime(settings.dateFormat).isTemporal(settings.values);
+    }
+    /** Reports the steps the plots found in their rows, and whether they are dates. */
+    setSteps(values, temporal = false) {
+        const same = values.length === this.#steps.length && values.every((v, i) => v === this.#steps[i]);
+        if (!same)
+            this.#steps = values;
+        if (temporal !== this.#temporal)
+            this.#temporal = temporal;
+    }
+    /** The owner's `values` as steps, or `undefined` without any. */
+    get #ownerValues() {
+        const settings = this.#settings();
+        if (!settings?.values?.length)
+            return undefined;
+        const time = new TimelineTime(settings.dateFormat);
+        return settings.values
+            .map((value) => time.toTime(value))
+            .filter((value) => value !== undefined);
+    }
+    /** The position across the steps, `0`-`1`. */
+    get progress() {
+        const external = this.#settings()?.progress ?? 0;
+        return this.#own && this.#own.base === external ? this.#own.value : external;
+    }
+    /** The step the position lands on, as an index; `-1` without steps. */
+    get index() {
+        const count = this.steps.length;
+        return count === 0 ? -1 : Math.min(count - 1, Math.round(this.progress * (count - 1)));
+    }
+    /** The step the position lands on, or `undefined` without steps. */
+    get value() {
+        return this.steps[this.index];
+    }
+    get playing() {
+        return this.#playing;
+    }
+    get loop() {
+        return this.#loop;
+    }
+    /** The playing speed, as a multiple of {@link stepDuration}. */
+    get speed() {
+        return this.#speed;
+    }
+    /** The controls the player bar draws, in order. */
+    get controls() {
+        return this.#settings()?.player?.controls ?? getConfiguration().timeline.player.controls;
+    }
+    /** The speeds the speed control cycles through. */
+    get speeds() {
+        return this.#settings()?.player?.speeds ?? getConfiguration().timeline.player.speeds;
+    }
+    /** Milliseconds each step lasts at speed `1`. */
+    get stepDuration() {
+        return (this.#settings()?.player?.stepDuration ?? getConfiguration().timeline.player.stepDuration);
+    }
+    /** How a step reads: the player's `format`, else a date label or the number. */
+    get format() {
+        const own = this.#settings()?.player?.format;
+        if (own)
+            return (value) => own(this.step(value));
+        if (this.temporal)
+            return TimelineTime.dateLabel(this.steps, getConfiguration().axis.locale);
+        return (value) => String(value);
+    }
+    /** A step as authors see it. */
+    step(value) {
+        return TimelineTime.toStep(value, this.temporal);
+    }
+    /** An author's step as the timeline's own, or `undefined` when it reads as none. */
+    timeOf(value) {
+        return new TimelineTime(this.#settings()?.dateFormat).toTime(value);
+    }
+    /** Moves to `progress` (`0`-`1`), and tells the owner. */
+    seek(progress) {
+        const next = Math.min(1, Math.max(0, progress));
+        if (next === this.progress)
+            return;
+        this.#own = { base: this.#settings()?.progress ?? 0, value: next };
+        this.#settings()?.onprogress?.(next);
+    }
+    /** Moves to the step at `index`. */
+    seekIndex(index) {
+        const count = this.steps.length;
+        this.seek(count > 1 ? Math.min(count - 1, Math.max(0, index)) / (count - 1) : 0);
+    }
+    /** Moves to the step closest to `value`. */
+    seekValue(value) {
+        const nearest = new TimelineSteps(this.steps).nearest(value);
+        if (nearest !== undefined)
+            this.seekIndex(this.steps.indexOf(nearest));
+    }
+    next() {
+        this.seekIndex(this.index + 1);
+    }
+    previous() {
+        this.seekIndex(this.index - 1);
+    }
+    play() {
+        if (this.#playing || this.steps.length < 2)
+            return;
+        if (this.progress >= 1)
+            this.seek(0);
+        this.#playing = true;
+        this.#settings()?.player?.onplay?.(true);
+    }
+    pause() {
+        if (!this.#playing)
+            return;
+        this.#playing = false;
+        this.#settings()?.player?.onplay?.(false);
+    }
+    toggle() {
+        if (this.#playing)
+            this.pause();
+        else
+            this.play();
+    }
+    setLoop(loop) {
+        if (loop === this.#loop)
+            return;
+        this.#loop = loop;
+        this.#settings()?.player?.onloop?.(loop);
+    }
+    setSpeed(speed) {
+        if (!(speed > 0) || speed === this.#speed)
+            return;
+        this.#speed = speed;
+        this.#settings()?.player?.onspeed?.(speed);
+    }
+    /** Takes the next of `speeds` after the current one, from the first again after the last. */
+    cycleSpeed() {
+        const { speeds } = this;
+        if (speeds.length === 0)
+            return;
+        const at = speeds.indexOf(this.#speed);
+        this.setSpeed(speeds[(at + 1) % speeds.length]);
+    }
+    /**
+     * Moves the position on by `elapsed` milliseconds of playing. At the end it
+     * starts again from the first step when looping, and stops otherwise.
+     */
+    advance(elapsed) {
+        const count = this.steps.length;
+        if (!this.#playing || count < 2)
+            return;
+        const span = (this.stepDuration / this.#speed) * (count - 1);
+        const next = this.progress + Math.min(elapsed, MAX_FRAME_MS) / span;
+        if (next < 1)
+            return this.seek(next);
+        if (this.#loop)
+            return this.seek(next - 1);
+        this.seek(1);
+        this.pause();
+    }
+    /** Starts what the timeline does by itself: playing, the owner's `onvalue` and `autoplay`. Call during component init. */
+    watch() {
+        let last;
+        $effect(() => {
+            const value = this.value;
+            untrack(() => {
+                if (last !== undefined && value !== undefined && value !== last) {
+                    this.#settings()?.onvalue?.(this.step(value));
+                }
+                last = value;
+            });
+        });
+        let autoplayed = false;
+        $effect(() => {
+            if (autoplayed || this.steps.length < 2)
+                return;
+            autoplayed = true;
+            if (untrack(() => this.#settings()?.player?.autoplay))
+                untrack(() => this.play());
+        });
+        $effect(() => {
+            if (!this.#playing)
+                return;
+            let frame = 0;
+            let previous = performance.now();
+            const tick = (now) => {
+                untrack(() => this.advance(now - previous));
+                previous = now;
+                frame = requestAnimationFrame(tick);
+            };
+            frame = requestAnimationFrame(tick);
+            return () => cancelAnimationFrame(frame);
+        });
+    }
+}

package/dist/layout/timeline/TimelineSteps.d.ts

@@ -0,0 +1,24 @@
+import type { EasingFn } from '../../types/misc/easing';
+import type { TimeValue } from '../../types/layout/timeline';
+/**
+ * A timeline's distinct steps, ascending: where a scrubber `progress`
+ * (`0`-`1`) lands on them, the span they cover and which rows a step shows.
+ */
+export declare class TimelineSteps {
+    readonly values: TimeValue[];
+    constructor(values: Iterable<TimeValue>);
+    /** The steps the author listed in `values` or, without any, the times of `rows`. */
+    static of<TRow>(values: TimeValue[] | undefined, rows: TRow[], getTime: (row: TRow) => TimeValue): TimelineSteps;
+    /** Whether a row at time `value` shows in `step`: at it, or up to it. */
+    static matches(value: unknown, step: TimeValue, mode?: 'exact' | 'upTo'): boolean;
+    get first(): TimeValue | undefined;
+    get last(): TimeValue | undefined;
+    /** The first and last step - empty without any. */
+    get domain(): TimeValue[];
+    /** The step a scrubber `progress` snaps to, or `undefined` without steps. */
+    at(progress: number): TimeValue | undefined;
+    /** The continuous time `progress` is at across the steps, eased - `0` without steps. */
+    timeAt(progress: number, easing: EasingFn): number;
+    /** The step closest to `time`, or `undefined` without steps. */
+    nearest(time: number): TimeValue | undefined;
+}

package/dist/layout/timeline/TimelineSteps.js

@@ -0,0 +1,48 @@
+/**
+ * A timeline's distinct steps, ascending: where a scrubber `progress`
+ * (`0`-`1`) lands on them, the span they cover and which rows a step shows.
+ */
+export class TimelineSteps {
+    values;
+    constructor(values) {
+        this.values = [...new Set(values)].sort((a, b) => a - b);
+    }
+    /** The steps the author listed in `values` or, without any, the times of `rows`. */
+    static of(values, rows, getTime) {
+        return new TimelineSteps(values?.length ? values : rows.map(getTime));
+    }
+    /** Whether a row at time `value` shows in `step`: at it, or up to it. */
+    static matches(value, step, mode = 'exact') {
+        return mode === 'upTo' ? Number(value) <= step : Number(value) === step;
+    }
+    get first() {
+        return this.values[0];
+    }
+    get last() {
+        return this.values[this.values.length - 1];
+    }
+    /** The first and last step - empty without any. */
+    get domain() {
+        const { first, last } = this;
+        return first === undefined || last === undefined ? [] : [first, last];
+    }
+    /** The step a scrubber `progress` snaps to, or `undefined` without steps. */
+    at(progress) {
+        const { values } = this;
+        if (!values.length)
+            return undefined;
+        const index = Math.round(progress * (values.length - 1));
+        return values[Math.min(values.length - 1, Math.max(0, index))];
+    }
+    /** The continuous time `progress` is at across the steps, eased - `0` without steps. */
+    timeAt(progress, easing) {
+        const { first, last } = this;
+        if (first === undefined || last === undefined)
+            return 0;
+        return first + (last - first) * easing(progress);
+    }
+    /** The step closest to `time`, or `undefined` without steps. */
+    nearest(time) {
+        return this.values.reduce((best, step) => best === undefined || Math.abs(step - time) < Math.abs(best - time) ? step : best, undefined);
+    }
+}