@fundar/data-chart-telling 0.0.64 → 1.0.0

package/dist/layout/timeline/TimelineLayout.svelte

@@ -1,186 +1,131 @@
 <script lang="ts" generics="TRow extends Record<string, unknown>">
-  import { resolveAccessor } from '../../plots/utils/accessors';
-  import Timeline from './Timeline.svelte';
-  import { resolveEasing, interpolateSeries } from '../../utils/interpolate';
-  import type {
-    Orientation,
-    TimeValue,
-    TimelineChildSnippet,
-    TimelineInterpolation,
-  } from '../../types/layout/timeline';
-  import type { Accessor } from '../../types/plots/data/common';
+	import { untrack } from 'svelte';
+	import { resolveAccessor } from '../../plots/utils/accessors';
+	import TimelineFrame from './TimelineFrame.svelte';
+	import { TimelineSteps } from './TimelineSteps';
+	import { Interpolation } from '../../utils/Interpolation';
+	import type {
+		Orientation,
+		TimeValue,
+		TimelineChildSnippet,
+		TimelineInterpolation
+	} from '../../types/layout/timeline';
+	import type { Accessor } from '../../types/plots/data/common';
+	import type { PlotBoxContext } from '../../types/layout/figure';
 
-  /**
-   * Couples a scrubber `progress` to a discrete sequence of time steps. It picks
-   * the selected step, filters the data down to it, splits the available box
-   * between the plot and the timeline gutter, and renders both. The plot itself
-   * is supplied as the `child` snippet, so this layout is plot-agnostic.
-   */
-  let {
-    data,
-    accessor,
-    progress,
-    values,
-    orientation = 'vertical',
-    show = true,
-    thickness = 60,
-    filterMode = 'exact',
-    interpolate,
-    width,
-    height,
-    child,
-  }: {
-    data: TRow[];
-    accessor: Accessor<TRow, TimeValue>;
-    progress: number;
-    values?: TimeValue[];
-    orientation?: Orientation;
-    show?: boolean;
-    thickness?: number;
-    filterMode?: 'exact' | 'upTo';
-    interpolate?: TimelineInterpolation<TRow>;
-    width: number;
-    height: number;
-    child: TimelineChildSnippet<TRow>;
-  } = $props();
+	/**
+	 * Couples a scrubber `progress` to a discrete sequence of time steps. It picks
+	 * the selected step, filters the data down to it, and renders the plot beside
+	 * the timeline in a `TimelineFrame`. The plot itself is supplied as the
+	 * `child` snippet, so this layout is plot-agnostic.
+	 */
+	let {
+		data,
+		accessor,
+		progress,
+		values,
+		orientation = 'vertical',
+		show = true,
+		thickness = 60,
+		filterMode = 'exact',
+		interpolate,
+		onsteps,
+		width,
+		height,
+		child
+	}: {
+		data: TRow[];
+		accessor: Accessor<TRow, TimeValue>;
+		progress: number;
+		values?: TimeValue[];
+		orientation?: Orientation;
+		show?: boolean;
+		thickness?: number;
+		filterMode?: 'exact' | 'upTo';
+		interpolate?: TimelineInterpolation<TRow>;
+		/** Told the steps, whenever they change - for whoever else draws or drives the timeline. */
+		onsteps?: (values: TimeValue[]) => void;
+		width: number;
+		height: number;
+		child: TimelineChildSnippet<TRow>;
+	} = $props();
 
-  const getTime = $derived(resolveAccessor<TRow>(accessor));
+	const getTime = $derived(resolveAccessor<TRow>(accessor));
 
-  const steps = $derived.by(() => {
-    if (values?.length) return [...values].sort((a, b) => a - b);
-    return [...new Set(data.map(getTime))].sort((a, b) => a - b);
-  });
+	const steps = $derived(TimelineSteps.of(values, data, getTime));
 
-  const progressEasingFn = $derived(resolveEasing(interpolate?.progressEasing));
-  const segmentEasingFn = $derived(resolveEasing(interpolate?.segmentEasing));
+	$effect(() => {
+		const found = steps.values;
+		untrack(() => onsteps?.(found));
+	});
 
-  /** Continuous scrub position across the full step domain — only meaningful when `interpolate` is set. */
-  const currentTime = $derived.by(() => {
-    if (!steps.length) return 0;
-    const t0 = steps[0];
-    const t1 = steps[steps.length - 1];
-    return t0 + (t1 - t0) * progressEasingFn(progress);
-  });
+	const progressEasingFn = $derived(Interpolation.buildEasing(interpolate?.progressEasing));
+	const segmentEasingFn = $derived(Interpolation.buildEasing(interpolate?.segmentEasing));
 
-  const selectedValue = $derived.by(() => {
-    if (!steps.length) return 0;
-    if (interpolate) {
-      return steps.reduce((best, s) =>
-        Math.abs(s - currentTime) < Math.abs(best - currentTime) ? s : best,
-      );
-    }
-    const idx = Math.min(
-      steps.length - 1,
-      Math.max(0, Math.round(progress * (steps.length - 1))),
-    );
-    return steps[idx];
-  });
+	/** Continuous scrub position across the full step domain - only meaningful when `interpolate` is set. */
+	const currentTime = $derived(steps.timeAt(progress, progressEasingFn));
 
-  function defaultCreate(_lower: TRow, upper: TRow, x: TimeValue, value: number): TRow {
-    const valueField = interpolate?.value;
-    if (typeof accessor !== 'string' || typeof valueField !== 'string') {
-      console.warn(
-        'TimelineLayout: cannot auto-build an interpolated row when `accessor` or `interpolate.value` is a function — pass `interpolate.create` explicitly.',
-      );
-      return upper;
-    }
-    return { ...upper, [accessor]: x, [valueField]: value } as TRow;
-  }
+	const selectedValue = $derived(
+		(interpolate ? steps.nearest(currentTime) : steps.at(progress)) ?? 0
+	);
 
-  const filtered = $derived.by(() => {
-    const discrete = () =>
-      filterMode === 'upTo'
-        ? data.filter((d) => getTime(d) <= selectedValue)
-        : data.filter((d) => getTime(d) === selectedValue);
+	function defaultCreate(_lower: TRow, upper: TRow, x: TimeValue, value: number): TRow {
+		const valueField = interpolate?.value;
+		if (typeof accessor !== 'string' || typeof valueField !== 'string') {
+			console.warn(
+				'TimelineLayout: cannot auto-build an interpolated row when `accessor` or `interpolate.value` is a function - pass `interpolate.create` explicitly.'
+			);
+			return upper;
+		}
+		return { ...upper, [accessor]: x, [valueField]: value } as TRow;
+	}
 
-    if (!interpolate) return discrete();
-    if (!interpolate.value) {
-      console.warn('TimelineLayout: `interpolate.value` is required to tween — falling back to discrete filtering.');
-      return discrete();
-    }
+	const filtered = $derived.by(() => {
+		const discrete = () =>
+			data.filter((d) => TimelineSteps.matches(getTime(d), selectedValue, filterMode));
 
-    const getKey = resolveAccessor<TRow>(interpolate.key ?? (() => '__all__'));
-    const getValue = resolveAccessor<TRow>(interpolate.value) as (d: TRow) => number;
-    const create = interpolate.create ?? defaultCreate;
+		if (!interpolate) return discrete();
+		if (!interpolate.value) {
+			console.warn(
+				'TimelineLayout: `interpolate.value` is required to tween - falling back to discrete filtering.'
+			);
+			return discrete();
+		}
 
-    const groups = new Map<string, TRow[]>();
-    for (const row of data) {
-      const key = String(getKey(row));
-      const bucket = groups.get(key);
-      if (bucket) bucket.push(row);
-      else groups.set(key, [row]);
-    }
+		const getKey = resolveAccessor<TRow>(interpolate.key ?? (() => '__all__'));
+		const getValue = resolveAccessor<TRow>(interpolate.value) as (d: TRow) => number;
+		const create = interpolate.create ?? defaultCreate;
 
-    const result: TRow[] = [];
-    for (const rows of groups.values()) {
-      const tweened = interpolateSeries({
-        rows,
-        x: currentTime,
-        getTime,
-        getValue,
-        create,
-        segmentEasing: segmentEasingFn,
-      });
-      if (filterMode === 'upTo') result.push(...tweened);
-      else if (tweened.length) result.push(tweened[tweened.length - 1]);
-    }
-    return result;
-  });
+		const groups = Map.groupBy(data, (row) => String(getKey(row)));
 
-  const isVertical = $derived(orientation === 'vertical');
-  const gap = $derived(show ? 12 : 0);
-  const effectiveThickness = $derived(show ? thickness : 0);
-  const innerWidth = $derived(
-    Math.max(0, isVertical ? width - effectiveThickness - gap : width),
-  );
-  const innerHeight = $derived(
-    Math.max(0, isVertical ? height : height - effectiveThickness - gap),
-  );
+		const result: TRow[] = [];
+		for (const rows of groups.values()) {
+			const tweened = Interpolation.tweenSeries({
+				rows,
+				x: currentTime,
+				getTime,
+				getValue,
+				create,
+				segmentEasing: segmentEasingFn
+			});
+			if (filterMode === 'upTo') result.push(...tweened);
+			else if (tweened.length) result.push(tweened[tweened.length - 1]);
+		}
+		return result;
+	});
 </script>
 
-{#if isVertical}
-  <div class="dct-timeline dct-timeline--vertical" style:width="{width}px" style:height="{height}px" style:gap="{gap}px">
-    <div class="dct-timeline__plot">
-      {@render child({ selectedValue, data: filtered, width: innerWidth, height: innerHeight })}
-    </div>
-    {#if show}
-      <div class="dct-timeline__gutter" style:width="{thickness}px">
-        <Timeline currentValue={selectedValue} values={steps} orientation="vertical" width={thickness} height={innerHeight} />
-      </div>
-    {/if}
-  </div>
-{:else}
-  <div class="dct-timeline dct-timeline--horizontal" style:width="{width}px" style:height="{height}px" style:gap="{gap}px">
-    <div class="dct-timeline__plot">
-      {@render child({ selectedValue, data: filtered, width: innerWidth, height: innerHeight })}
-    </div>
-    {#if show}
-      <div class="dct-timeline__gutter" style:height="{thickness}px">
-        <Timeline currentValue={selectedValue} values={steps} orientation="horizontal" width={innerWidth} height={thickness} />
-      </div>
-    {/if}
-  </div>
-{/if}
+{#snippet plot({ width: w, height: h }: PlotBoxContext)}
+	{@render child({ selectedValue, data: filtered, width: w, height: h })}
+{/snippet}
 
-<style>
-  .dct-timeline {
-    display: flex;
-  }
-  .dct-timeline--vertical {
-    flex-direction: row;
-  }
-  .dct-timeline--horizontal {
-    flex-direction: column;
-  }
-  .dct-timeline__plot {
-    flex: 1 1 auto;
-    min-width: 0;
-    min-height: 0;
-  }
-  .dct-timeline__gutter {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-</style>
+<TimelineFrame
+	steps={steps.values}
+	{selectedValue}
+	{orientation}
+	{show}
+	{thickness}
+	{width}
+	{height}
+	child={plot}
+/>

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

@@ -11,6 +11,8 @@ declare function $$render<TRow extends Record<string, unknown>>(): {
         thickness?: number;
         filterMode?: "exact" | "upTo";
         interpolate?: TimelineInterpolation<TRow>;
+        /** Told the steps, whenever they change - for whoever else draws or drives the timeline. */
+        onsteps?: (values: TimeValue[]) => void;
         width: number;
         height: number;
         child: TimelineChildSnippet<TRow>;

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,50 @@
+<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}
+				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,82 @@
+import type { PlayerConfig, PlayerControl, Orientation, TimeValue, 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?: TimeValue[];
+    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[];
+    /** Reports the steps the plots found in their rows. */
+    setSteps(values: TimeValue[]): 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 the current step reads. */
+    get format(): (value: TimeValue) => string;
+    /** 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;
+}