@setsquare/ui 0.10.0 → 0.11.1

package/dist/lib/timeline-scale.js

@@ -0,0 +1,221 @@
+/**
+ * Time on a timeline: formats for the ruler and for screen readers, the ruler's tick steps at a zoom, snapping, and
+ * stacking flags that would overlap. Plain functions, so they are tested without a browser and a server can use them.
+ *
+ * Every time is a number of seconds. For `date`, it is seconds since the Unix epoch.
+ */
+const pad = (n, width = 2) => String(Math.floor(n)).padStart(width, '0');
+const fpsOf = (o) => o.fps ?? 25;
+/** The frame a time falls in, counting from 0. */
+export const frameAt = (t, fps) => Math.round(t * fps + 1e-9);
+/**
+ * A time as the ruler and a tooltip show it. `step` is the ruler's step, so a label says no more than the step can
+ * tell apart: 0:04 for whole seconds, 0:04.5 for tenths. For `date`, the step picks the parts (time of day, day,
+ * month).
+ */
+export function formatTime(t, options, step = 1) {
+    const fps = fpsOf(options);
+    switch (options.format) {
+        case 'frames':
+            return new Intl.NumberFormat(options.locale).format(frameAt(t, fps));
+        case 'timecode': {
+            const frames = frameAt(t, fps);
+            const whole = Math.floor(frames / fps);
+            return `${pad(whole / 3600)}:${pad((whole % 3600) / 60)}:${pad(whole % 60)}:${pad(frames % fps)}`;
+        }
+        case 'date': {
+            const date = new Date(t * 1000);
+            const zone = options.timeZone ? { timeZone: options.timeZone } : {};
+            const parts = step < 60
+                ? { hour: 'numeric', minute: '2-digit', second: '2-digit' }
+                : step < 86400
+                    ? { hour: 'numeric', minute: '2-digit' }
+                    : step < 28 * 86400
+                        ? { day: 'numeric', month: 'short' }
+                        : { month: 'short', year: 'numeric' };
+            return new Intl.DateTimeFormat(options.locale, { ...parts, ...zone }).format(date);
+        }
+        default: {
+            const decimals = step >= 1 ? 0 : step >= 0.1 ? 1 : 2;
+            const sign = t < 0 ? '-' : '';
+            const abs = Math.abs(t);
+            const hours = Math.floor(abs / 3600);
+            const minutes = Math.floor((abs % 3600) / 60);
+            const seconds = abs % 60;
+            const secondsText = new Intl.NumberFormat(options.locale, {
+                minimumIntegerDigits: 2,
+                minimumFractionDigits: decimals,
+                maximumFractionDigits: decimals,
+                useGrouping: false,
+            }).format(Math.floor(seconds * 10 ** decimals + 1e-9) / 10 ** decimals);
+            return hours
+                ? `${sign}${hours}:${pad(minutes)}:${secondsText}`
+                : `${sign}${minutes}:${secondsText}`;
+        }
+    }
+}
+/**
+ * A time in words, for a screen reader (a slider's aria-valuetext): "1 minute, 4.5 seconds", from the locale's own
+ * unit names and list pattern. `words.frames` names a count of frames, which Intl has no unit for ("12 frames"), and
+ * `words.frame` a frame number ("Frame 96"); both come from the component's labels.
+ */
+export function speakTime(t, options, words) {
+    const locale = options.locale;
+    const fps = fpsOf(options);
+    if (options.format === 'date') {
+        const zone = options.timeZone ? { timeZone: options.timeZone } : {};
+        return new Intl.DateTimeFormat(locale, {
+            dateStyle: 'medium',
+            timeStyle: 'short',
+            ...zone,
+        }).format(new Date(t * 1000));
+    }
+    if (options.format === 'frames')
+        return words.frame(frameAt(t, fps));
+    const unit = (value, name, digits = 0) => new Intl.NumberFormat(locale, {
+        style: 'unit',
+        unit: name,
+        unitDisplay: 'long',
+        maximumFractionDigits: digits,
+    }).format(value);
+    const list = new Intl.ListFormat(locale, { style: 'long', type: 'unit' });
+    if (options.format === 'timecode') {
+        const frames = frameAt(t, fps);
+        const whole = Math.floor(frames / fps);
+        const parts = [
+            whole >= 3600 ? unit(Math.floor(whole / 3600), 'hour') : '',
+            whole >= 60 ? unit(Math.floor((whole % 3600) / 60), 'minute') : '',
+            unit(whole % 60, 'second'),
+            words.frames(frames % fps),
+        ].filter(Boolean);
+        return list.format(parts);
+    }
+    const abs = Math.abs(t);
+    const hours = Math.floor(abs / 3600);
+    const minutes = Math.floor((abs % 3600) / 60);
+    const seconds = Math.round((abs % 60) * 100) / 100;
+    const parts = [
+        hours ? unit(hours, 'hour') : '',
+        minutes ? unit(minutes, 'minute') : '',
+        seconds || (!hours && !minutes) ? unit(seconds, 'second', 2) : '',
+    ].filter(Boolean);
+    return list.format(parts);
+}
+/**
+ * The steps a ruler may label, in seconds, smallest first. Dates stop at a fortnight: months and years aren't a
+ * whole number of seconds, so a ruler that long needs calendar ticks, which this doesn't draw.
+ */
+function ladder(options) {
+    const fps = fpsOf(options);
+    const seconds = [
+        1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600, 7200, 10800, 21600, 43200,
+    ];
+    switch (options.format) {
+        case 'frames':
+        case 'timecode':
+            return [...[1, 2, 5, 10].filter((f) => f < fps).map((f) => f / fps), ...seconds];
+        case 'date':
+            return [...seconds, 86400, 2 * 86400, 7 * 86400, 14 * 86400];
+        default:
+            return [0.01, 0.02, 0.05, 0.1, 0.2, 0.5, ...seconds];
+    }
+}
+/**
+ * The ruler's steps at a zoom. `major` is the smallest labelled step whose labels are at least `minLabelPx` apart:
+ * a number, or a function of the step, since a label's width depends on what it shows (0:04 or 0:04.5, a time or a
+ * day). `minor` is the smallest step on the same ladder that divides `major` into at most ten, with ticks at least
+ * `minTickPx` apart, or null when there's no room for one.
+ */
+export function tickSteps(pxPerSecond, options, minLabelPx = 72, minTickPx = 8) {
+    const steps = ladder(options);
+    const need = typeof minLabelPx === 'number' ? () => minLabelPx : minLabelPx;
+    const major = steps.find((s) => s * pxPerSecond >= need(s)) ?? steps[steps.length - 1];
+    const divides = (s) => Math.abs(major / s - Math.round(major / s)) < 1e-6;
+    const minor = steps.find((s) => s < major && divides(s) && major / s <= 10 && s * pxPerSecond >= minTickPx) ??
+        null;
+    return { major, minor };
+}
+/**
+ * The ticks from `start` to `end`: every `step` counted from `origin`, each marked major when it is also a whole
+ * number of `major` steps from there. A date ruler counts from its own start (local midnight, say), not from the
+ * epoch, so its hours and days fall where the reader's do.
+ */
+export function ticks(start, end, step, major = step, origin = 0) {
+    const out = [];
+    const first = Math.ceil((start - origin) / step - 1e-9);
+    for (let i = first; i < first + 5000; i++) {
+        const t = Math.round((origin + i * step) * 1e6) / 1e6;
+        if (t > end + 1e-9)
+            break;
+        const n = (t - origin) / major;
+        out.push({ t, major: Math.abs(n - Math.round(n)) < 1e-6 });
+    }
+    return out;
+}
+/**
+ * The nearest snap point within `thresholdPx` of `t` at this zoom, and the time to use: the point's, or `t` itself
+ * when none is close enough.
+ */
+export function snap(t, points, pxPerSecond, thresholdPx = 8) {
+    let best = null;
+    let distance = Infinity;
+    for (const point of points) {
+        const d = Math.abs(point.time - t) * pxPerSecond;
+        if (d <= thresholdPx && d < distance) {
+            best = point;
+            distance = d;
+        }
+    }
+    return { time: best ? best.time : t, point: best };
+}
+/**
+ * Where a pointer puts something: `raw` rounded to the nearest `step` from `origin` (a frame, say), then pulled to
+ * a snap point within `thresholdPx`, which wins over the step. `free` (Alt held) skips both.
+ */
+export function place(raw, options, thresholdPx = 8) {
+    if (options.free)
+        return { time: raw, point: null };
+    const origin = options.origin ?? 0;
+    const stepped = origin + Math.round((raw - origin) / options.step) * options.step;
+    const near = snap(raw, options.points ?? [], options.pxPerSecond, thresholdPx);
+    return near.point ? near : { time: Math.round(stepped * 1e6) / 1e6, point: null };
+}
+/**
+ * Where a key press moves something: `delta` from `t`, caught by the first snap point it would cross or come
+ * within `thresholdPx` of. Only points beyond `t` count, so the next press moves on from a point rather than
+ * sticking to it. `free` (Alt held) moves by `delta` alone.
+ */
+export function nudge(t, delta, options, thresholdPx = 8) {
+    const next = Math.round((t + delta) * 1e6) / 1e6;
+    if (options.free || !options.points?.length)
+        return { time: next, point: null };
+    const reach = thresholdPx / options.pxPerSecond;
+    const ahead = options.points.filter((p) => delta > 0
+        ? p.time > t + 1e-9 && p.time <= next + reach
+        : p.time < t - 1e-9 && p.time >= next - reach);
+    if (!ahead.length)
+        return { time: next, point: null };
+    const point = ahead.reduce((a, b) => (Math.abs(b.time - t) < Math.abs(a.time - t) ? b : a));
+    return { time: point.time, point };
+}
+/** `t` kept between `min` and `max`. */
+export const clampTime = (t, min, max) => Math.min(max, Math.max(min, t));
+/**
+ * Stacks flags whose labels would overlap into tiers: each takes the lowest tier where nothing already there reaches
+ * its start (with `gap` px between). Given each flag's left and right edge in px; returns each one's tier, in the
+ * order given, and how many tiers there are.
+ */
+export function stackTiers(flags, gap = 4) {
+    const order = flags.map((f, i) => ({ ...f, i })).sort((a, b) => a.left - b.left || a.i - b.i);
+    const ends = [];
+    const tiers = new Array(flags.length).fill(0);
+    for (const flag of order) {
+        let tier = ends.findIndex((end) => end + gap <= flag.left);
+        if (tier === -1)
+            tier = ends.length;
+        ends[tier] = flag.right;
+        tiers[flag.i] = tier;
+    }
+    return { tiers, count: Math.max(1, ends.length) };
+}
+//# sourceMappingURL=timeline-scale.js.map

package/dist/lib/timeline-scale.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline-scale.js","sourceRoot":"","sources":["../../src/lib/timeline-scale.ts"],"names":[],"mappings":"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"}

package/dist/shell/right-panel.d.ts

@@ -13,6 +13,14 @@ export interface RightPanelProps {
     children: ReactNode;
     /** Actions pinned to the bottom. */
     footer?: ReactNode;
+    /**
+     * How the content sits in the panel. `"sections"`, the default: padded, `PanelSection`s stacked 20px apart, and
+     * the body scrolls. `"fill"`: for content that lays itself out (a chat with its own header, a scrolling list
+     * and a composer), the body is a flex column with no padding or gap that doesn't scroll; the content fills it,
+     * and its own scrollers work, since the body is `min-h-0`. The same beside main and in the Sheet. The content's
+     * scrollers are the product's to make reachable by keyboard: a tab stop on any that holds nothing focusable.
+     */
+    body?: 'sections' | 'fill';
     /**
      * Its width beside main: `"default"`, `--panel-width` (320px; 360px at AAA); `"wide"`, `--panel-width-wide` (512px;
      * 560px at AAA), for a panel that is a working surface such as a chat; or a number of px, kept between
@@ -40,7 +48,7 @@ export interface RightPanelProps {
  * Extra information about the current selection. An <aside> beside main on wide shells,
  * a Sheet (modal dialog) on narrow ones. Closing returns focus to the PanelToggle.
  */
-export declare function RightPanel({ title, children, footer, width, hideTitleBar, 'aria-labelledby': labelledBy, isDismissable, labels: given, className, }: RightPanelProps): import("react").JSX.Element | null;
+export declare function RightPanel({ title, children, footer, body: layout, width, hideTitleBar, 'aria-labelledby': labelledBy, isDismissable, labels: given, className, }: RightPanelProps): import("react").JSX.Element | null;
 /** Shows and hides the right panel. Put it in the page actions. */
 export declare function PanelToggle({ label, labels, }: {
     /** @deprecated Use `labels.toggle`. Kept for one release. */

package/dist/shell/right-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"right-panel.d.ts","sourceRoot":"","sources":["../../src/shell/right-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAS9D,gDAAgD;AAChD,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAG9B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACpC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0FAA0F;IAC1F,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,KAAiB,EACjB,YAAY,EACZ,iBAAiB,EAAE,UAAU,EAC7B,aAAoB,EACpB,MAAM,EAAE,KAAK,EACb,SAAS,GACV,EAAE,eAAe,sCA0EjB;AAED,mEAAmE;AACnE,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,GACP,EAAE;IACD,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACpC,+BAcA;AAED,uCAAuC;AACvC,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAOA"}
+{"version":3,"file":"right-panel.d.ts","sourceRoot":"","sources":["../../src/shell/right-panel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,SAAS,EAAkB,MAAM,OAAO,CAAC;AAS9D,gDAAgD;AAChD,MAAM,WAAW,gBAAgB;IAC/B,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,gBAAgB,EAAE,gBAG9B,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,oCAAoC;IACpC,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;IAC3B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,GAAG,MAAM,CAAC;IACpC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0FAA0F;IAC1F,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAID;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,IAAI,EAAE,MAAmB,EACzB,KAAiB,EACjB,YAAY,EACZ,iBAAiB,EAAE,UAAU,EAC7B,aAAoB,EACpB,MAAM,EAAE,KAAK,EACb,SAAS,GACV,EAAE,eAAe,sCAiFjB;AAED,mEAAmE;AACnE,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,GACP,EAAE;IACD,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;CACpC,+BAcA;AAED,uCAAuC;AACvC,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAOA"}

package/dist/shell/right-panel.js

@@ -17,13 +17,14 @@ const panelWidths = { default: 'w-panel', wide: 'w-(--panel-width-wide)' };
  * Extra information about the current selection. An <aside> beside main on wide shells,
  * a Sheet (modal dialog) on narrow ones. Closing returns focus to the PanelToggle.
  */
-export function RightPanel({ title, children, footer, width = 'default', hideTitleBar, 'aria-labelledby': labelledBy, isDismissable = true, labels: given, className, }) {
+export function RightPanel({ title, children, footer, body: layout = 'sections', width = 'default', hideTitleBar, 'aria-labelledby': labelledBy, isDismissable = true, labels: given, className, }) {
     const t = useLabels('rightPanel', rightPanelLabels, given);
     const close = t('close', { title });
     const { panelOpen, setPanelOpen, panelMode, panelToggleRef, isSizeForced } = useShell();
     const headingId = useId();
     const foot = footer ? (_jsx("div", { className: "flex gap-(--control-gap) border-t border-border px-4 py-3 *:flex-1", children: footer })) : null;
-    const body = (_jsx("div", { className: "relative flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto p-4", children: children }));
+    // Positioned either way, so hidden inputs and text inside are placed against it (positioned-scroll-container).
+    const body = (_jsx("div", { "data-panel-body": layout, className: cn('relative flex min-h-0 flex-1 flex-col', layout === 'sections' && 'gap-5 overflow-y-auto p-4'), children: children }));
     if (panelMode === 'sheet') {
         return (_jsx(Sheet, { side: "right", title: title, labels: { close: literal(close) }, isOpen: panelOpen, onOpenChange: setPanelOpen, footer: foot, children: body }));
     }

package/dist/shell/right-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"right-panel.js","sourceRoot":"","sources":["../../src/shell/right-panel.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"right-panel.js","sourceRoot":"","sources":["../../src/shell/right-panel.tsx"],"names":[],"mappings":"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"}

package/dist/styles/theme.css

@@ -71,6 +71,7 @@
   --container-site: var(--site-max);
   --container-site-narrow: var(--site-max-narrow);
   --spacing-nav-item: var(--nav-item-height);
+  --spacing-lane: var(--lane-height);
   --spacing-header: var(--header-height);
   --spacing-sidebar: var(--sidebar-width);
   --spacing-sidebar-collapsed: var(--sidebar-width-collapsed);
@@ -1333,6 +1334,7 @@
   --control-pad-x: var(--control-pad-x-compact);
   --control-gap: var(--control-gap-compact);
   --nav-item-height: var(--nav-item-height-compact);
+  --lane-height: var(--lane-height-compact);
   --field-gap: var(--field-gap-compact);
   --text-sm: var(--text-sm-compact);
 }

package/dist/styles/tokens.css

@@ -31,6 +31,8 @@
   --control-gap-aaa: 12px;
   --nav-item-height-aa: 36px;
   --nav-item-height-aaa: 36px;
+  --lane-height-aa: 32px;
+  --lane-height-aaa: 44px;
   --nav-item-gap-aa: 2px;
   --nav-item-gap-aaa: 4px;
   --choice-size-aa: 20px;
@@ -54,6 +56,7 @@
   --control-pad-x-compact: 8px;
   --control-gap-compact: 4px;
   --nav-item-height-compact: 28px;
+  --lane-height-compact: 24px;
   --field-gap-compact: 12px;
   --text-sm-compact: 13px;
   --header-height-aa: 56px;
@@ -108,6 +111,7 @@
   --control-pad-x: var(--control-pad-x-aa);
   --control-gap: var(--control-gap-aa);
   --nav-item-height: var(--nav-item-height-aa);
+  --lane-height: var(--lane-height-aa);
   --nav-item-gap: var(--nav-item-gap-aa);
   --choice-size: var(--choice-size-aa);
   --field-gap: var(--field-gap-aa);
@@ -132,6 +136,7 @@
   --control-pad-x: var(--control-pad-x-aaa);
   --control-gap: var(--control-gap-aaa);
   --nav-item-height: var(--nav-item-height-aaa);
+  --lane-height: var(--lane-height-aaa);
   --nav-item-gap: var(--nav-item-gap-aaa);
   --choice-size: var(--choice-size-aaa);
   --field-gap: var(--field-gap-aaa);

package/dist/tokens.json

@@ -753,6 +753,16 @@
         "value": "36px",
         "usage": "Equal to AA by default: at AAA the 36px highlight sits in a 44px row."
       },
+      {
+        "name": "lane-height-aa",
+        "value": "32px",
+        "usage": "A timeline lane's height, and its ruler's and marker bands' tiers (resolved as --lane-height). An item on a lane is the lane's height, so it is a target at least --target-min tall."
+      },
+      {
+        "name": "lane-height-aaa",
+        "value": "44px",
+        "usage": "At AAA a lane is the 44px target size (2.5.5), so seven lanes are 308px."
+      },
       {
         "name": "nav-item-gap-aa",
         "value": "2px",
@@ -868,6 +878,11 @@
         "value": "28px",
         "usage": "Compact density's menu and list rows."
       },
+      {
+        "name": "lane-height-compact",
+        "value": "24px",
+        "usage": "Compact density's timeline lanes: the AA target floor (2.5.8), the smallest lane whose items are targets without leaning on the spacing exception. Holds 13px text at a line height of 1.5."
+      },
       {
         "name": "field-gap-compact",
         "value": "12px",

package/dist/ui/timeline.d.ts

@@ -0,0 +1,231 @@
+import { type ReactNode } from 'react';
+import { type Key, type TreeProps as RACTreeProps } from 'react-aria-components';
+import { type SnapPoint, type TimeFormat } from '../lib/timeline-scale.js';
+import type { StatusTone } from './badge.js';
+export type { SnapPoint, TimeFormat } from '../lib/timeline-scale.js';
+/** A timeline's words, for the `labels` prop. Times inside them are said in words already ("1 minute, 4 seconds"). */
+export interface TimelineLabels {
+    /** The playhead's name. */
+    playhead: string;
+    /** A count of frames, said after the seconds of a timecode. */
+    frames: string;
+    /** A frame number, said for a `frames` timeline. */
+    frame: string;
+    /** A span's times: "{start} to {end}". */
+    span: string;
+    /** An item's name, its label and its time: "{label}, {time}". */
+    item: string;
+    /** Said when something being moved snaps to a point: "Snapped to {point}". */
+    snapped: string;
+    /** Said and shown when a marker is pressed without being dragged. */
+    picked: string;
+    /** Said and shown when a picked-up marker is put down. */
+    placed: string;
+    /** Said and shown when Escape puts a picked-up marker back. */
+    cancelled: string;
+    /** Every marker's description: the ways to move it. */
+    markerHint: string;
+}
+export declare const timelineLabels: TimelineLabels;
+/** The part of the timeline in view, for a slot to draw: times, and the scale between time and px. */
+export interface TimelineView {
+    /** The timeline's first and last time. */
+    start: number;
+    end: number;
+    /** The first and last time in view (the slot's own band of it). */
+    visibleStart: number;
+    visibleEnd: number;
+    pxPerSecond: number;
+    /** The track's whole width in px: draw `width` wide, or only the visible part. */
+    width: number;
+    /** A time's x in the track, in px. */
+    toX: (time: number) => number;
+}
+type TimelineName = {
+    'aria-label': string;
+} | {
+    'aria-labelledby': string;
+};
+export type TimelineProps = TimelineName & {
+    /** How long the timeline runs, in seconds. */
+    duration: number;
+    /** Its first time, in seconds: 0 for media, the first moment of a schedule (seconds since the epoch) for dates. */
+    start?: number;
+    /** How times are shown and said. Default `seconds`. */
+    format?: TimeFormat;
+    /** Frames per second, for `frames` and `timecode`. Default 25. */
+    fps?: number;
+    /** For `date`: the time zone the schedule is in. Default the reader's. */
+    timeZone?: string;
+    /** The zoom: px per second. Default 100. The ruler's labels and ticks adapt to it. */
+    pxPerSecond?: number;
+    /**
+     * What an arrow key moves the playhead and markers by, and what a pointer rounds to: one frame by default for
+     * `frames` and `timecode`, a tenth of a second for `seconds`, 15 minutes for `date`. Shift moves ten steps.
+     */
+    step?: number;
+    /** The playhead's time. Leave both out for a timeline without one. */
+    time?: number;
+    defaultTime?: number;
+    onTimeChange?: (time: number) => void;
+    /** Points markers snap to: frames are the step, so these are beats, downbeats, cuts. Each says its own name. */
+    snapPoints?: readonly SnapPoint[];
+    /** The id of the selected span or point. */
+    selectedItem?: string | null;
+    defaultSelectedItem?: string | null;
+    onSelectedItemChange?: (id: string | null) => void;
+    /** The label column's width in px. Default 160. Lane labels that don't fit are cut short. */
+    labelWidth?: number;
+    /** The most the timeline is tall, in px or any CSS length: past it, its rows scroll under the ruler. */
+    maxHeight?: number | string;
+    /** Scroll to keep the playhead in view as its time changes. Default true. Instant under reduced motion and at AAA. */
+    followPlayhead?: boolean;
+    labels?: Partial<TimelineLabels>;
+    className?: string;
+    children?: ReactNode;
+};
+/**
+ * Things over time, and the work on them: a ruler whose ticks and labels adapt to the zoom, a playhead to scrub,
+ * lanes of spans and points, markers people move, and slots for a product's own drawing (a waveform, thumbnails).
+ * One scroll container: the ruler stays at the top and the label column at the start while the rest scrolls both
+ * ways, and focus scrolls clear of both. Put `TimeRuler`, `TimelineSlot`, `TimelineMarkers` and `TimelineLanes`
+ * inside, in the order they stack.
+ *
+ * The playhead's line crosses every row. Times are seconds throughout; for `date`, seconds since the epoch. The
+ * axis runs left to right; right-to-left layouts aren't supported yet. Under it, a line says what moving a marker
+ * did (snapped, picked up, put down), and is read out as it changes.
+ */
+export declare function Timeline({ duration, start, format, fps, timeZone, pxPerSecond: pps, step: givenStep, time: givenTime, defaultTime, onTimeChange, snapPoints, selectedItem: givenItem, defaultSelectedItem, onSelectedItemChange, labelWidth, maxHeight, followPlayhead, labels, className, children, ...name }: TimelineProps): import("react").JSX.Element;
+export interface TimeRulerProps {
+    /** What the corner over the label column shows. Default the playhead's time, or nothing. */
+    corner?: ReactNode;
+    className?: string;
+}
+/**
+ * Ticks and labels along the top, which stay as the rows scroll. They adapt to the zoom: labels as close as they
+ * fit and no closer, at steps a reader expects (1, 2, 5, 10, 15, 30 seconds; frames; hours; days), with unlabelled
+ * ticks between. It is where the playhead lives: press anywhere on it to seek, drag to scrub.
+ *
+ * The playhead is a slider named "Playhead", its value said as a time ("1 minute, 4 seconds"), not a number. ← →
+ * move it a step (a frame), Shift ten, Page Up and Page Down a tenth of the timeline, Home and End to the ends.
+ * While a marker is picked up, pressing the ruler puts the marker there instead, and the playhead stays.
+ */
+export declare function TimeRuler({ corner, className }: TimeRulerProps): import("react").JSX.Element;
+export interface TimelineSlotProps {
+    /** Shown in the label column. */
+    label?: ReactNode;
+    /** The band's height in px. Default 48. */
+    height?: number;
+    /**
+     * Names the drawing for a screen reader (`role="img"`). Without it the drawing is hidden from them: a picture
+     * of the signal, which the lanes and the playhead's time already say.
+     */
+    'aria-label'?: string;
+    /** Draws the band, given the part in view. Draw `view.width` wide, or only `visibleStart` to `visibleEnd`. */
+    children: (view: TimelineView) => ReactNode;
+    className?: string;
+}
+/**
+ * A band across the timeline for the product's own drawing: a waveform canvas, a strip of thumbnails, a grid. It
+ * scrolls with the track; the playhead's line crosses it. Not a target: pointers pass through to nothing.
+ */
+export declare function TimelineSlot({ label, height, 'aria-label': named, children, className, }: TimelineSlotProps): import("react").JSX.Element;
+type LanesName = {
+    'aria-label': string;
+} | {
+    'aria-labelledby': string;
+};
+export type TimelineLanesProps = Omit<RACTreeProps<object>, 'className' | 'aria-label' | 'aria-labelledby' | 'children' | 'style'> & LanesName & {
+    className?: string;
+    children?: ReactNode;
+};
+/**
+ * The rows: React Aria's Tree, a `treegrid` and one tab stop. ↑ ↓ move between lanes, → opens a group and ← closes
+ * it, and typing jumps to a lane by name. → on a lane moves into its items, in time order; ← → move between them
+ * and back to the lane. Pressing a lane selects it (one at a time by default). Each lane is `--lane-height` tall:
+ * 32px, 24px in compact density, 44px at AAA, so its items are targets at least `--target-min` tall.
+ */
+export declare function TimelineLanes({ className, children, ...props }: TimelineLanesProps): import("react").JSX.Element;
+export interface TimelineLaneProps {
+    id: Key;
+    /** The lane's name, in the label column. Also how typing finds it and what a screen reader says. */
+    label: string;
+    /** Its spans and points, in any order: they're laid out, and reached by keyboard, in time order. */
+    items?: ReactNode;
+    /** The lanes inside this one, for a group that opens. */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * One lane: its name in the label column, its items on the track. A lane with lanes inside it is a group, with a
+ * chevron to open it. Selected, it takes the `brand-subtle` ground and, in forced colours, a Highlight bar.
+ */
+export declare function TimelineLane({ id, label, items, children, className }: TimelineLaneProps): import("react").JSX.Element;
+export type TimelineTone = StatusTone;
+interface ItemBase {
+    id: string;
+    /** What it is: shown on a span when it fits, and always in its tooltip and its name. */
+    label: string;
+    tone?: TimelineTone;
+    /** More in its tooltip, under the label and time. */
+    details?: ReactNode;
+    className?: string;
+}
+export interface TimelineSpanProps extends ItemBase {
+    start: number;
+    end: number;
+}
+export interface TimelinePointProps extends ItemBase {
+    at: number;
+}
+/**
+ * Something that lasts, from `start` to `end`: a tween, a booking, a deploy. A bar in its tone; its target is the
+ * whole bar, as tall as the lane. Selecting it (pressing it, or Enter or Space on it) marks it with a ring; its
+ * label, times and `details` show on hover and focus.
+ *
+ * A bar is as wide as its time, however narrow that is: two moments close in time are close on screen. That rests
+ * on 2.5.8's Essential exception for the time axis; keyboard focus reaches every item, in time order, whatever its
+ * width. Items in a lane shouldn't overlap in time: put overlapping things in lanes of their own.
+ */
+export declare function TimelineSpan({ id, label, start, end, tone, details, className, }: TimelineSpanProps): import("react").JSX.Element;
+/**
+ * Something that happens at an instant, `at`: a cue, an error, a release. A diamond in its tone. Its target is
+ * `--target-min` wide, centred on its time, or narrower where a neighbour is closer than that, so targets never
+ * overlap; the narrow case rests on 2.5.8's Essential exception, as a span's does.
+ */
+export declare function TimelinePoint({ id, label, at, tone, details, className, }: TimelinePointProps): import("react").JSX.Element;
+export interface TimelineMarker {
+    id: string;
+    time: number;
+    /** A short name, shown on its flag: "Beat 3", "Chorus", "Cut". */
+    label: string;
+}
+export interface TimelineMarkersProps {
+    /** Shown in the label column, and names the group of markers. */
+    label: string;
+    markers: readonly TimelineMarker[];
+    /**
+     * Called as a marker moves, with where it is now (snapped, unless Alt or Option is held). Leave it out for
+     * markers that can't move: they are still focusable, and say their time.
+     */
+    onMove?: (id: string, time: number) => void;
+    /**
+     * Points to snap to, instead of the Timeline's `snapPoints`. A marker never snaps to a point with its own label
+     * at its own time, so a band's markers can be among its snap points.
+     */
+    snapPoints?: readonly SnapPoint[];
+    className?: string;
+}
+/**
+ * Flags at times, each with a short label, on a band of their own: under the ruler for markers and cue points, or
+ * beside the lanes for beats. Flags that would overlap stack into tiers, each a `--lane-height` row.
+ *
+ * Each flag is a slider (its value said as a time) and its own tab stop. People move one by:
+ * - dragging it, snapping to the snap points within 8px and otherwise to the step (a frame); Alt or Option moves it
+ *   freely. The point it snaps to is said, once each time it snaps.
+ * - the arrow keys: a step, Shift ten, caught by any snap point on the way; Alt or Option without snapping.
+ * - without dragging (2.5.7): click it to pick it up, then click the ruler or this band where it should go. Escape
+ *   puts it back. What happened shows, and is said, in the line under the timeline.
+ */
+export declare function TimelineMarkers({ label, markers, onMove, snapPoints, className, }: TimelineMarkersProps): import("react").JSX.Element;
+//# sourceMappingURL=timeline.d.ts.map

package/dist/ui/timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"timeline.d.ts","sourceRoot":"","sources":["../../src/ui/timeline.tsx"],"names":[],"mappings":"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"}