@setsquare/ui 0.11.1 → 0.13.0

package/dist/ui/timeline.js

@@ -1,11 +1,12 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
-import { ChevronRight } from 'lucide-react';
+import { Children, createContext, isValidElement, memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, } from 'react';
+import { ChevronRight, EllipsisVertical } from 'lucide-react';
 import { Button as RACButton, Focusable, ToggleButton, Tree as RACTree, TreeItem as RACTreeItem, TreeItemContent, TooltipTrigger, useLocale, } from 'react-aria-components';
 import { cn } from '../lib/cn.js';
 import { useLabels } from '../lib/locale.js';
 import { clampTime, formatTime, nudge, place, speakTime, stackTiers, tickSteps, ticks, } from '../lib/timeline-scale.js';
+import { Menu, MenuItem, MenuTrigger, Popover } from './menu.js';
 import { Tooltip } from './tooltip.js';
 export const timelineLabels = {
     playhead: 'Playhead',
@@ -18,27 +19,55 @@ export const timelineLabels = {
     placed: '{label} moved to {time}',
     cancelled: '{label} left at {time}',
     markerHint: 'Drag it, or use the arrow keys. Or click it, then click where it should go. Hold Alt or Option to move it freely.',
+    markerActionHint: 'Press Enter or click it to open it. Drag it, or use the arrow keys, to move it; hold Alt or Option to move it freely. Its menu moves it without dragging.',
+    markerOpenHint: 'Press Enter or click it to open it.',
+    markerMenuHint: 'Shift+F10 opens its menu.',
+    markerMenu: 'Options for {label}',
+    open: 'Open',
+    move: 'Move',
+    reset: 'Reset to {time}',
+    wasReset: '{label} reset to {time}',
 };
 const TimelineContext = createContext(null);
+/**
+ * The playhead's time, on its own: it changes every frame while media plays, and only the playhead and its line
+ * read it, so lanes, items and markers don't render again with it.
+ */
+const TimeContext = createContext(undefined);
+/** The part in view, for the ruler's ticks and the slots: it changes as the timeline scrolls. */
+const ViewContext = createContext({ start: 0, end: 0 });
 function useTimeline(part) {
     const value = useContext(TimelineContext);
     if (!value)
         throw new Error(`${part} goes inside a Timeline.`);
     return value;
 }
+/**
+ * The marker being dragged or moved by key, if any: its id, where the move started, where it is now and the
+ * difference. Null otherwise, and for a pick-up-and-place, which moves it in one step. For drawing what moves with a
+ * marker at its new place, as `moveWith` does for spans and points. Inside a Timeline.
+ */
+export function useTimelineMove() {
+    return useTimeline('useTimelineMove').moving;
+}
 function useControlled(value, initial, onChange) {
     const [own, setOwn] = useState(initial);
     const controlled = value !== undefined;
-    return [
-        controlled ? value : own,
-        (next) => {
-            if (!controlled)
-                setOwn(next);
-            onChange?.(next);
-        },
-    ];
+    // The setter keeps its identity across renders, so the context it goes in can too.
+    const latest = useRef(onChange);
+    useEffect(() => {
+        latest.current = onChange;
+    });
+    const set = useCallback((next) => {
+        if (!controlled)
+            setOwn(next);
+        latest.current?.(next);
+    }, [controlled]);
+    return [controlled ? value : own, set];
 }
 const defaultStep = (format, fps) => format === 'frames' || format === 'timecode' ? 1 / fps : format === 'date' ? 900 : 0.1;
+/** One empty list for every timeline without snap points: a new `[]` each render would change the context. */
+const NO_POINTS = [];
 /** AAA as products mark it and as the design-system artifact does. */
 const AAA = '[data-conformance="aaa"], [data-theme$="-aaa"]';
 /**
@@ -52,7 +81,7 @@ const AAA = '[data-conformance="aaa"], [data-theme$="-aaa"]';
  * 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 function Timeline({ duration, start = 0, format = 'seconds', fps = 25, timeZone, pxPerSecond: pps = 100, step: givenStep, time: givenTime, defaultTime, onTimeChange, snapPoints = [], selectedItem: givenItem, defaultSelectedItem = null, onSelectedItemChange, labelWidth = 160, maxHeight, followPlayhead = true, labels, className, children, ...name }) {
+export function Timeline({ duration, start = 0, format = 'seconds', fps = 25, timeZone, pxPerSecond: pps = 100, step: givenStep, time: givenTime, defaultTime, onTimeChange, snapPoints = NO_POINTS, selectedItem: givenItem, defaultSelectedItem = null, onSelectedItemChange, labelWidth = 160, maxHeight, followPlayhead = true, labels, className, children, ...name }) {
     const t = useLabels('timeline', timelineLabels, labels);
     const { locale } = useLocale();
     const end = start + duration;
@@ -64,38 +93,60 @@ export function Timeline({ duration, start = 0, format = 'seconds', fps = 25, ti
     const [selectedItem, selectItem] = useControlled(givenItem, defaultSelectedItem, onSelectedItemChange);
     const [status, setStatus] = useState('');
     const [picked, pick] = useState(null);
+    const [moving, setMoving] = useState(null);
     // Before the scroller is measured (and on the server), assume a wide screen's worth is in view.
     const [scroll, setScroll] = useState({ left: 0, width: 1600 });
     const scroller = useRef(null);
-    const toX = (s) => (s - start) * pps;
-    const value = {
+    const seek = useCallback((s) => setTime(clampTime(s, start, end)), [setTime, start, end]);
+    // Everything but the playhead's time and the part in view, kept as one value while none of it changes: playback
+    // and scrolling don't render lanes, items and markers again.
+    const value = useMemo(() => {
+        const toX = (s) => (s - start) * pps;
+        return {
+            start,
+            end,
+            pps,
+            step,
+            trackWidth,
+            scale,
+            toX,
+            timeAt: (clientX, track) => clampTime(start + (clientX - track.getBoundingClientRect().left) / pps, start, end),
+            show: (s, shownStep = step) => formatTime(s, scale, shownStep),
+            speak: (s) => speakTime(s, scale, {
+                frames: (count) => t('frames', { count }),
+                frame: (frame) => t('frame', { frame }),
+            }),
+            t,
+            hasPlayhead,
+            seek,
+            snapPoints,
+            selectedItem,
+            selectItem,
+            announce: setStatus,
+            picked,
+            pick,
+            moving,
+            setMoving,
+        };
+    }, [
         start,
         end,
         pps,
         step,
         trackWidth,
         scale,
-        toX,
-        timeAt: (clientX, track) => clampTime(start + (clientX - track.getBoundingClientRect().left) / pps, start, end),
-        show: (s, shownStep = step) => formatTime(s, scale, shownStep),
-        speak: (s) => speakTime(s, scale, {
-            frames: (count) => t('frames', { count }),
-            frame: (frame) => t('frame', { frame }),
-        }),
         t,
-        time: hasPlayhead ? time : undefined,
-        seek: (s) => setTime(clampTime(s, start, end)),
+        hasPlayhead,
+        seek,
         snapPoints,
         selectedItem,
         selectItem,
-        announce: setStatus,
         picked,
-        pick,
-        view: {
-            start: clampTime(start + scroll.left / pps, start, end),
-            end: clampTime(start + (scroll.left + scroll.width) / pps, start, end),
-        },
-    };
+        moving,
+    ]);
+    const viewStart = clampTime(start + scroll.left / pps, start, end);
+    const viewEnd = clampTime(start + (scroll.left + scroll.width) / pps, start, end);
+    const view = useMemo(() => ({ start: viewStart, end: viewEnd }), [viewStart, viewEnd]);
     // Track what's in view, for the ruler's ticks and the slots: on scroll, and as the scroller resizes.
     useEffect(() => {
         const el = scroller.current;
@@ -138,9 +189,9 @@ export function Timeline({ duration, start = 0, format = 'seconds', fps = 25, ti
             picked.cancel();
         }
     };
-    return (_jsx(TimelineContext.Provider, { value: value, children: _jsxs("div", { role: "group", ...name, onKeyDownCapture: onKeyDownCapture, style: {
-                '--timeline-label-width': `${labelWidth}px`,
-            }, className: cn('relative flex flex-col overflow-hidden rounded-lg border border-border bg-background text-sm', className), children: [_jsx("div", { ref: scroller, "data-timeline-scroller": "", style: { maxHeight }, className: "relative overflow-auto overscroll-contain [scroll-padding-block-start:var(--lane-height)] [scroll-padding-inline-start:var(--timeline-label-width)]", children: _jsxs("div", { className: "relative", style: { width: `calc(var(--timeline-label-width) + ${trackWidth}px)` }, children: [children, playheadX !== null && (_jsx("div", { "aria-hidden": "true", "data-timeline-playhead-line": "", className: "pointer-events-none absolute inset-y-0 z-10 w-0.5 -translate-x-1/2 bg-primary forced-colors:bg-[Highlight] forced-colors:forced-color-adjust-none", style: { left: `calc(var(--timeline-label-width) + ${playheadX}px)` } }))] }) }), _jsx("p", { "aria-live": "polite", "aria-atomic": "true", "data-timeline-status": "", className: "border-t border-border px-3 py-1 text-[13px] leading-5 text-muted-foreground empty:border-0 empty:p-0", children: status })] }) }));
+    return (_jsx(TimelineContext.Provider, { value: value, children: _jsx(ViewContext.Provider, { value: view, children: _jsx(TimeContext.Provider, { value: hasPlayhead ? time : undefined, children: _jsxs("div", { role: "group", ...name, onKeyDownCapture: onKeyDownCapture, style: {
+                        '--timeline-label-width': `${labelWidth}px`,
+                    }, className: cn('relative flex flex-col overflow-hidden rounded-lg border border-border bg-background text-sm', className), children: [_jsx("div", { ref: scroller, "data-timeline-scroller": "", style: { maxHeight }, className: "relative overflow-auto overscroll-contain [scroll-padding-block-start:var(--lane-height)] [scroll-padding-inline-start:var(--timeline-label-width)]", children: _jsxs("div", { className: "relative", style: { width: `calc(var(--timeline-label-width) + ${trackWidth}px)` }, children: [children, playheadX !== null && (_jsx("div", { "aria-hidden": "true", "data-timeline-playhead-line": "", className: "pointer-events-none absolute inset-y-0 z-10 w-0.5 -translate-x-1/2 bg-primary forced-colors:bg-[Highlight] forced-colors:forced-color-adjust-none", style: { left: `calc(var(--timeline-label-width) + ${playheadX}px)` } }))] }) }), _jsx("p", { "aria-live": "polite", "aria-atomic": "true", "data-timeline-status": "", className: "border-t border-border px-3 py-1 text-[13px] leading-5 text-muted-foreground empty:border-0 empty:p-0", children: status })] }) }) }) }));
 }
 /** The label column's cell at the start of a row: it stays put while the track scrolls under it. */
 function LabelCell({ className, style, children, }) {
@@ -157,7 +208,8 @@ function LabelCell({ className, style, children, }) {
  */
 export function TimeRuler({ corner, className }) {
     const tl = useTimeline('TimeRuler');
-    const { start, end, pps, scale, time, view, toX, show } = tl;
+    const view = useContext(ViewContext);
+    const { start, end, pps, scale, toX, show } = tl;
     const [dragging, setDragging] = useState(false);
     const thumb = useRef(null);
     // A label is about as wide as its widest text at this step: 8.5px a character, and room either side.
@@ -173,7 +225,7 @@ export function TimeRuler({ corner, className }) {
             tl.picked.put(at, e.altKey);
             return;
         }
-        if (time === undefined)
+        if (!tl.hasPlayhead)
             return;
         e.preventDefault();
         e.currentTarget.setPointerCapture(e.pointerId);
@@ -188,16 +240,7 @@ export function TimeRuler({ corner, className }) {
         tl.seek(place(at, { step: tl.step, origin: start, pxPerSecond: pps, free: e.altKey }).time);
     };
     const stop = () => setDragging(false);
-    const onKeyDown = (e) => {
-        if (time === undefined)
-            return;
-        const next = keyTime(e, time, tl);
-        if (next === null)
-            return;
-        e.preventDefault();
-        tl.seek(next);
-    };
-    return (_jsxs("div", { "data-timeline-ruler": "", className: cn('sticky top-0 z-30 flex h-lane min-h-target bg-background', className), children: [_jsx(LabelCell, { className: "justify-end shadow-[inset_0_-1px_0_var(--border)]", children: _jsx("span", { "aria-hidden": "true", className: "leading-5 font-semibold text-foreground tabular-nums", children: corner ?? (time !== undefined ? show(time) : null) }) }), _jsxs("div", { "data-timeline-ruler-track": "", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: stop, onPointerCancel: stop, className: cn('relative shrink-0 touch-none shadow-[inset_0_-1px_0_var(--border)] select-none', time !== undefined || tl.picked ? 'cursor-pointer' : 'cursor-default'), style: { width: tl.trackWidth }, children: [marks.map((mark) => (_jsx("span", { "aria-hidden": "true", className: cn('absolute bottom-0 w-px bg-muted-foreground', mark.major ? 'h-2.5' : 'h-1.5'), style: { left: toX(mark.t) } }, mark.t))), marks
+    return (_jsxs("div", { "data-timeline-ruler": "", className: cn('sticky top-0 z-30 flex h-lane min-h-target bg-background', className), children: [_jsx(LabelCell, { className: "justify-end shadow-[inset_0_-1px_0_var(--border)]", children: _jsx("span", { "aria-hidden": "true", className: "leading-5 font-semibold text-foreground tabular-nums", children: corner ?? _jsx(PlayheadTime, {}) }) }), _jsxs("div", { "data-timeline-ruler-track": "", onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: stop, onPointerCancel: stop, className: cn('relative shrink-0 touch-none shadow-[inset_0_-1px_0_var(--border)] select-none', tl.hasPlayhead || tl.picked ? 'cursor-pointer' : 'cursor-default'), style: { width: tl.trackWidth }, children: [marks.map((mark) => (_jsx("span", { "aria-hidden": "true", className: cn('absolute bottom-0 w-px bg-muted-foreground', mark.major ? 'h-2.5' : 'h-1.5'), style: { left: toX(mark.t) } }, mark.t))), marks
                         .filter((mark) => mark.major)
                         .map((mark) => {
                         const x = toX(mark.t);
@@ -208,9 +251,30 @@ export function TimeRuler({ corner, className }) {
                         if (last && mark.t - major >= start && x - toX(mark.t - major) < labelPx * 2)
                             return null;
                         return (_jsx("span", { "aria-hidden": "true", className: "absolute top-0 text-sm leading-5 whitespace-nowrap text-muted-foreground tabular-nums", style: last ? { right: tl.trackWidth - x + 4 } : { left: x + 4 }, children: show(mark.t, major) }, mark.t));
-                    }), time !== undefined && (_jsx("div", { ref: thumb, role: "slider", tabIndex: 0, "aria-label": tl.t('playhead'), "aria-orientation": "horizontal", "aria-valuemin": start, "aria-valuemax": end, "aria-valuenow": Math.round(time * 1000) / 1000, "aria-valuetext": tl.speak(time), "data-dragging": dragging || undefined, onKeyDown: onKeyDown, 
-                        // Layer 1: one target square, centred on the time. Dragged, so grab.
-                        className: "group/playhead absolute top-0 z-10 flex h-full w-target -translate-x-1/2 cursor-grab justify-center outline-none data-dragging:cursor-grabbing", style: { left: toX(time) }, children: _jsx("span", { "aria-hidden": "true", className: "mt-0.5 h-[calc(100%-4px)] w-2.5 rounded-sm bg-primary group-focus-visible/playhead:focus-ring forced-colors:bg-[Highlight] forced-colors:forced-color-adjust-none" }) }))] })] }));
+                    }), tl.hasPlayhead && _jsx(Playhead, { thumb: thumb, dragging: dragging })] })] }));
+}
+/** The playhead's time as the ruler shows it, for the corner: one of the few things that follows the time. */
+function PlayheadTime() {
+    const tl = useTimeline('TimeRuler');
+    const time = useContext(TimeContext);
+    return time === undefined ? null : tl.show(time);
+}
+/** The playhead's slider. Its own component, so the ticks and labels don't render again as the time moves. */
+function Playhead({ thumb, dragging, }) {
+    const tl = useTimeline('TimeRuler');
+    const time = useContext(TimeContext);
+    if (time === undefined)
+        return null;
+    const onKeyDown = (e) => {
+        const next = keyTime(e, time, tl);
+        if (next === null)
+            return;
+        e.preventDefault();
+        tl.seek(next);
+    };
+    return (_jsx("div", { ref: thumb, role: "slider", tabIndex: 0, "aria-label": tl.t('playhead'), "aria-orientation": "horizontal", "aria-valuemin": tl.start, "aria-valuemax": tl.end, "aria-valuenow": Math.round(time * 1000) / 1000, "aria-valuetext": tl.speak(time), "data-dragging": dragging || undefined, onKeyDown: onKeyDown, 
+        // Layer 1: one target square, centred on the time. Dragged, so grab.
+        className: "group/playhead absolute top-0 z-10 flex h-full w-target -translate-x-1/2 cursor-grab justify-center outline-none data-dragging:cursor-grabbing", style: { left: tl.toX(time) }, children: _jsx("span", { "aria-hidden": "true", className: "mt-0.5 h-[calc(100%-4px)] w-2.5 rounded-sm bg-primary group-focus-visible/playhead:focus-ring forced-colors:bg-[Highlight] forced-colors:forced-color-adjust-none" }) }));
 }
 /** The time a key moves a slider on the timeline to, or null for a key it doesn't use. */
 function keyTime(e, from, tl) {
@@ -234,11 +298,12 @@ function keyTime(e, from, tl) {
  */
 export function TimelineSlot({ label, height = 48, 'aria-label': named, children, className, }) {
     const tl = useTimeline('TimelineSlot');
+    const inView = useContext(ViewContext);
     const view = {
         start: tl.start,
         end: tl.end,
-        visibleStart: tl.view.start,
-        visibleEnd: tl.view.end,
+        visibleStart: inView.start,
+        visibleEnd: inView.end,
         pxPerSecond: tl.pps,
         width: tl.trackWidth,
         toX: tl.toX,
@@ -266,16 +331,26 @@ const itemTimes = (node) => {
  * chevron to open it. Selected, it takes the `brand-subtle` ground and, in forced colours, a Highlight bar.
  */
 export function TimelineLane({ id, label, items, children, className }) {
+    return (_jsxs(RACTreeItem, { id: id, textValue: label, className: cn('group/lane relative flex h-lane min-h-target cursor-default outline-none', 'data-hovered:cursor-pointer data-hovered:bg-accent data-selected:bg-brand-subtle data-focus-visible:focus-ring-inset', className), children: [_jsx(TreeItemContent, { children: ({ hasChildItems, level }) => (_jsxs(_Fragment, { children: [_jsxs(LabelCell, { style: { '--lane-indent': level - 1 }, className: cn('gap-0.5 ps-[calc(var(--lane-indent)*12px)] shadow-[inset_0_-1px_0_var(--border)] group-data-hovered/lane:bg-accent group-data-selected/lane:bg-brand-subtle', 
+                            // Forced colours drop the selected ground: a Highlight bar instead, on the cell that stays in view.
+                            "forced-colors:group-data-selected/lane:before:absolute forced-colors:group-data-selected/lane:before:inset-y-0.5 forced-colors:group-data-selected/lane:before:start-0 forced-colors:group-data-selected/lane:before:w-[3px] forced-colors:group-data-selected/lane:before:bg-[Highlight] forced-colors:group-data-selected/lane:before:forced-color-adjust-none forced-colors:group-data-selected/lane:before:content-['']"), children: [hasChildItems ? (_jsx(RACButton, { slot: "chevron", className: "group/lane-chevron relative flex size-target shrink-0 cursor-pointer items-center justify-center outline-none", children: _jsx("span", { className: "flex size-5 items-center justify-center rounded-sm text-muted-foreground group-data-focus-visible/lane-chevron:focus-ring group-data-hovered/lane-chevron:bg-muted group-data-hovered/lane-chevron:text-foreground", children: _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 group-data-expanded/lane:rotate-90" }) }) })) : (_jsx("span", { "aria-hidden": "true", className: "w-target shrink-0" })), _jsx("span", { className: "min-w-0 truncate leading-5 font-medium text-foreground group-data-selected/lane:font-semibold", children: label })] }), _jsx(LaneTrack, { items: items })] })) }), children] }));
+}
+/**
+ * A lane's track and its items, in time order. A component of its own, and memoised on `items`: React Aria renders a
+ * row again as its focus and hover change, and this keeps that from reaching the items, which render again only when
+ * the lane's items, the zoom, the selection or a move changes.
+ */
+const LaneTrack = memo(function LaneTrack({ items }) {
     const tl = useTimeline('TimelineLane');
     const sorted = Children.toArray(items)
         .filter(isValidElement)
         .sort((a, b) => itemTimes(a)[0] - itemTimes(b)[0]);
-    return (_jsxs(RACTreeItem, { id: id, textValue: label, className: cn('group/lane relative flex h-lane min-h-target cursor-default outline-none', 'data-hovered:cursor-pointer data-hovered:bg-accent data-selected:bg-brand-subtle data-focus-visible:focus-ring-inset', className), children: [_jsx(TreeItemContent, { children: ({ hasChildItems, level }) => (_jsxs(_Fragment, { children: [_jsxs(LabelCell, { style: { '--lane-indent': level - 1 }, className: cn('gap-0.5 ps-[calc(var(--lane-indent)*12px)] shadow-[inset_0_-1px_0_var(--border)] group-data-hovered/lane:bg-accent group-data-selected/lane:bg-brand-subtle', 
-                            // Forced colours drop the selected ground: a Highlight bar instead, on the cell that stays in view.
-                            "forced-colors:group-data-selected/lane:before:absolute forced-colors:group-data-selected/lane:before:inset-y-0.5 forced-colors:group-data-selected/lane:before:start-0 forced-colors:group-data-selected/lane:before:w-[3px] forced-colors:group-data-selected/lane:before:bg-[Highlight] forced-colors:group-data-selected/lane:before:forced-color-adjust-none forced-colors:group-data-selected/lane:before:content-['']"), children: [hasChildItems ? (_jsx(RACButton, { slot: "chevron", className: "group/lane-chevron relative flex size-target shrink-0 cursor-pointer items-center justify-center outline-none", children: _jsx("span", { className: "flex size-5 items-center justify-center rounded-sm text-muted-foreground group-data-focus-visible/lane-chevron:focus-ring group-data-hovered/lane-chevron:bg-muted group-data-hovered/lane-chevron:text-foreground", children: _jsx(ChevronRight, { "aria-hidden": "true", className: "size-4 group-data-expanded/lane:rotate-90" }) }) })) : (_jsx("span", { "aria-hidden": "true", className: "w-target shrink-0" })), _jsx("span", { className: "min-w-0 truncate leading-5 font-medium text-foreground group-data-selected/lane:font-semibold", children: label })] }), _jsx("div", { className: "relative shrink-0 shadow-[inset_0_-1px_0_var(--border)]", style: { width: tl.trackWidth }, children: sorted.map((item, i) => (_jsx(ItemRoomContext.Provider, { value: {
-                                    before: i > 0 ? tl.toX(itemTimes(sorted[i - 1])[1]) : -Infinity,
-                                    after: i < sorted.length - 1 ? tl.toX(itemTimes(sorted[i + 1])[0]) : Infinity,
-                                }, children: item }, item.key ?? i))) })] })) }), children] }));
+    return (_jsx("div", { className: "relative shrink-0 shadow-[inset_0_-1px_0_var(--border)]", style: { width: tl.trackWidth }, children: sorted.map((item, i) => (_jsx(Neighbours, { before: i > 0 ? tl.toX(itemTimes(sorted[i - 1])[1]) : -Infinity, after: i < sorted.length - 1 ? tl.toX(itemTimes(sorted[i + 1])[0]) : Infinity, children: item }, item.key ?? i))) }));
+});
+/** Where an item's neighbours are, kept as one value while they don't move. */
+function Neighbours({ before, after, children }) {
+    const room = useMemo(() => ({ before, after }), [before, after]);
+    return _jsx(ItemRoomContext.Provider, { value: room, children: children });
 }
 // The badge's pairs, whose text the contrast audit promises against their ground; the edge is the text colour.
 const tones = {
@@ -285,6 +360,28 @@ const tones = {
     info: 'bg-brand-subtle text-brand',
     neutral: 'bg-muted text-muted-foreground',
 };
+/** The tones' edge colours alone, for a ghost. */
+const toneEdges = {
+    success: 'text-success',
+    warning: 'text-warning',
+    danger: 'text-destructive',
+    info: 'text-brand',
+    neutral: 'text-muted-foreground',
+};
+/** How far, in px, a ghost of an item that moves with `moveWith` is drawn from it, or null for no ghost. */
+function useGhost(moveWith) {
+    const tl = useTimeline('A timeline item');
+    const m = tl.moving;
+    if (!m || !moveWith || Math.abs(m.delta) < 1e-9)
+        return null;
+    const ids = typeof moveWith === 'string' ? [moveWith] : moveWith;
+    return ids.includes(m.id) ? m.delta * tl.pps : null;
+}
+/**
+ * A dashed outline where an item would go, for `moveWith`: no target, no name, nothing to focus. In the tone's edge
+ * colour at full strength, which the contrast audit holds at 3:1 on a lane's grounds.
+ */
+const ghost = 'pointer-events-none absolute border-2 border-dashed border-current forced-colors:border-[CanvasText]';
 /**
  * Hides a span's label when the span is too narrow for it, rather than cut it short: the label is always in the
  * tooltip and the name. Read when the span arrives and whenever it or its label resizes (zoom, text spacing),
@@ -356,36 +453,41 @@ function ItemButton({ id, label, time, shown, details, style, className, childre
  * 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 function TimelineSpan({ id, label, start, end, tone = 'info', details, className, }) {
+export function TimelineSpan({ id, label, start, end, tone = 'info', details, moveWith, className, }) {
     const tl = useTimeline('TimelineSpan');
     const ref = useLabelFits();
+    const shift = useGhost(moveWith);
     const left = tl.toX(start);
-    return (_jsx(ItemButton, { id: id, label: label, time: tl.t('span', { start: tl.speak(start), end: tl.speak(end) }), shown: `${tl.show(start)}–${tl.show(end)}`, details: details, className: cn('group/item', className), style: { left, width: Math.max(2, tl.toX(end) - left) }, children: _jsx("span", { ref: ref, "aria-hidden": "true", className: cn(
-            // overflow-clip, not hidden, so the label can stick: hidden would make the bar its scroller.
-            'absolute inset-x-0 inset-y-0.5 flex items-center overflow-clip rounded-sm border border-current', tones[tone], 'group-data-hovered/item:brightness-95 dark:group-data-hovered/item:brightness-125', 
-            // Selected: a 2px foreground ring as a shadow, so focus's outline still shows on top of it.
-            'group-data-selected/item:shadow-[0_0_0_1px_var(--background),0_0_0_3px_var(--foreground)]', 'group-data-focus-visible/item:focus-ring', 'forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText] forced-colors:forced-color-adjust-none forced-colors:group-data-selected/item:border-[Highlight] forced-colors:group-data-selected/item:bg-[Highlight] forced-colors:group-data-selected/item:text-[HighlightText]'), children: _jsx("span", { "data-timeline-item-label": "", 
-                // Sticks clear of the label column, so a long bar scrolled half out of view still says what it is.
-                className: "sticky start-(--timeline-label-width) px-1.5 text-[13px] leading-4 font-medium whitespace-nowrap text-foreground forced-colors:text-inherit", children: label }) }) }));
+    const width = Math.max(2, tl.toX(end) - left);
+    return (_jsxs(_Fragment, { children: [_jsx(ItemButton, { id: id, label: label, time: tl.t('span', { start: tl.speak(start), end: tl.speak(end) }), shown: `${tl.show(start)}–${tl.show(end)}`, details: details, className: cn('group/item', className), style: { left, width }, children: _jsx("span", { ref: ref, "aria-hidden": "true", className: cn(
+                    // overflow-clip, not hidden, so the label can stick: hidden would make the bar its scroller.
+                    'absolute inset-x-0 inset-y-0.5 flex items-center overflow-clip rounded-sm border border-current', tones[tone], 'group-data-hovered/item:brightness-95 dark:group-data-hovered/item:brightness-125', 
+                    // Selected: a 2px foreground ring as a shadow, so focus's outline still shows on top of it.
+                    'group-data-selected/item:shadow-[0_0_0_1px_var(--background),0_0_0_3px_var(--foreground)]', 'group-data-focus-visible/item:focus-ring', 'forced-colors:border-[CanvasText] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText] forced-colors:forced-color-adjust-none forced-colors:group-data-selected/item:border-[Highlight] forced-colors:group-data-selected/item:bg-[Highlight] forced-colors:group-data-selected/item:text-[HighlightText]'), children: _jsx("span", { "data-timeline-item-label": "", 
+                        // Sticks clear of the label column, so a long bar scrolled half out of view still says what it is.
+                        className: "sticky start-(--timeline-label-width) px-1.5 text-[13px] leading-4 font-medium whitespace-nowrap text-foreground forced-colors:text-inherit", children: label }) }) }), shift !== null && (_jsx("span", { "aria-hidden": "true", "data-timeline-ghost": id, className: cn(ghost, 'inset-y-0.5 rounded-sm', toneEdges[tone]), style: { left: left + shift, width } }))] }));
 }
 /**
  * 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 function TimelinePoint({ id, label, at, tone = 'info', details, className, }) {
+export function TimelinePoint({ id, label, at, tone = 'info', details, moveWith, className, }) {
     const tl = useTimeline('TimelinePoint');
     const room = useContext(ItemRoomContext);
+    const shift = useGhost(moveWith);
     const x = tl.toX(at);
     const half = Math.min(x - room.before, room.after - x);
-    return (_jsx(ItemButton, { id: id, label: label, time: tl.speak(at), shown: tl.show(at), details: details, className: cn('group/item flex -translate-x-1/2 items-center justify-center', className), style: {
-            left: x,
-            width: Number.isFinite(half)
-                ? `min(var(--target-min), ${Math.max(2, half * 2)}px)`
-                : undefined,
-            minWidth: Number.isFinite(half) ? undefined : 'var(--target-min)',
-        }, children: _jsx("span", { "aria-hidden": "true", className: cn('size-3 rotate-45 rounded-[2px] border border-current', tones[tone], 'group-data-hovered/item:scale-110', 'group-data-selected/item:shadow-[0_0_0_1px_var(--background),0_0_0_3px_var(--foreground)]', 'group-data-focus-visible/item:focus-ring', 'forced-colors:border-[CanvasText] forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none forced-colors:group-data-selected/item:border-[Highlight] forced-colors:group-data-selected/item:bg-[Highlight]') }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(ItemButton, { id: id, label: label, time: tl.speak(at), shown: tl.show(at), details: details, className: cn('group/item flex -translate-x-1/2 items-center justify-center', className), style: {
+                    left: x,
+                    width: Number.isFinite(half)
+                        ? `min(var(--target-min), ${Math.max(2, half * 2)}px)`
+                        : undefined,
+                    minWidth: Number.isFinite(half) ? undefined : 'var(--target-min)',
+                }, children: _jsx("span", { "aria-hidden": "true", className: cn('size-3 rotate-45 rounded-[2px] border border-current', tones[tone], 'group-data-hovered/item:scale-110', 'group-data-selected/item:shadow-[0_0_0_1px_var(--background),0_0_0_3px_var(--foreground)]', 'group-data-focus-visible/item:focus-ring', 'forced-colors:border-[CanvasText] forced-colors:bg-[CanvasText] forced-colors:forced-color-adjust-none forced-colors:group-data-selected/item:border-[Highlight] forced-colors:group-data-selected/item:bg-[Highlight]') }) }), shift !== null && (_jsx("span", { "aria-hidden": "true", "data-timeline-ghost": id, className: cn(ghost, 'top-1/2 size-3 -translate-1/2 rotate-45 rounded-[2px]', toneEdges[tone]), style: { left: x + shift } }))] }));
 }
+/** How long the arrow keys must rest before a run of presses counts as one finished move, in ms. */
+const KEYS_SETTLE = 600;
 /**
  * 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.
@@ -394,14 +496,20 @@ export function TimelinePoint({ id, label, at, tone = 'info', details, className
  * - 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.
+ * - without dragging (2.5.7): pick it up, by pressing it (`pressAction="move"`) or from its menu, then click the
+ *   ruler or this band where it should go.
+ *
+ * Escape puts a marker back where the move started: a drag, a run of keys, or a pick-up. What happened shows, and
+ * is said, in the line under the timeline. A flag with something in its menu (Open, Move, Reset) has a menu button
+ * beside it, its own tab stop; Shift+F10, the context-menu key and a right-click open it from the flag too.
  */
-export function TimelineMarkers({ label, markers, onMove, snapPoints, className, }) {
+export function TimelineMarkers({ label, markers, onMove, onMoveEnd, onAction, pressAction, actionLabel, snapPoints, className, }) {
     const tl = useTimeline('TimelineMarkers');
     const hint = useId();
+    const menuHint = useId();
     const [widths, setWidths] = useState({});
     const points = snapPoints ?? tl.snapPoints;
+    const press = pressAction ?? (onAction ? 'action' : 'move');
     // Lay the flags out: each starts at its time, or ends there when it would run past the end.
     const boxes = markers.map((m) => {
         const x = tl.toX(m.time);
@@ -415,17 +523,35 @@ export function TimelineMarkers({ label, markers, onMove, snapPoints, className,
             return;
         tl.picked.put(tl.timeAt(e.clientX, e.currentTarget), e.altKey);
     };
-    return (_jsxs("div", { role: "group", "aria-label": label, "data-timeline-markers": "", className: cn('flex', className), style: { height: `calc(var(--lane-height) * ${count})`, minHeight: 'var(--target-min)' }, children: [_jsx(LabelCell, { className: "items-start pt-0.5 text-muted-foreground shadow-[inset_0_-1px_0_var(--border)]", children: _jsx("span", { className: "min-w-0 truncate leading-5", children: label }) }), _jsxs("div", { onPointerDown: onTrackPointerDown, className: cn('relative shrink-0 shadow-[inset_0_-1px_0_var(--border)]', tl.picked ? 'cursor-pointer' : 'cursor-default'), style: { width: tl.trackWidth }, children: [_jsx("span", { id: hint, hidden: true, children: tl.t('markerHint') }), markers.map((m, i) => (_jsx(Flag, { marker: m, box: boxes[i], tier: tiers[i] ?? 0, setWidths: setWidths, hint: onMove ? hint : undefined, onMove: onMove, points: points }, m.id)))] })] }));
+    const hintText = press === 'action'
+        ? onMove
+            ? tl.t('markerActionHint')
+            : tl.t('markerOpenHint')
+        : onMove
+            ? tl.t('markerHint')
+            : null;
+    return (_jsxs("div", { role: "group", "aria-label": label, "data-timeline-markers": "", className: cn('flex', className), style: { height: `calc(var(--lane-height) * ${count})`, minHeight: 'var(--target-min)' }, children: [_jsx(LabelCell, { className: "items-start pt-0.5 text-muted-foreground shadow-[inset_0_-1px_0_var(--border)]", children: _jsx("span", { className: "min-w-0 truncate leading-5", children: label }) }), _jsxs("div", { onPointerDown: onTrackPointerDown, className: cn('relative shrink-0 shadow-[inset_0_-1px_0_var(--border)]', tl.picked ? 'cursor-pointer' : 'cursor-default'), style: { width: tl.trackWidth }, children: [hintText && (_jsx("span", { id: hint, hidden: true, children: hintText })), _jsx("span", { id: menuHint, hidden: true, children: tl.t('markerMenuHint') }), markers.map((m, i) => (_jsx(Flag, { marker: m, box: boxes[i], tier: tiers[i] ?? 0, setWidths: setWidths, hint: hintText ? hint : undefined, menuHint: menuHint, press: press, actionLabel: actionLabel, onMove: onMove, onMoveEnd: onMoveEnd, onAction: onAction, points: points }, m.id)))] })] }));
 }
-function Flag({ marker, box, tier, setWidths, hint, onMove, points, }) {
+function Flag({ marker, box, tier, setWidths, hint, menuHint, press, actionLabel, onMove, onMoveEnd, onAction, points, }) {
     const tl = useTimeline('A marker');
+    const id = marker.id;
+    const slider = useRef(null);
     const drag = useRef(null);
+    // A run of arrow keys, finished once they rest: where it started, where it is, and the timer.
+    const keys = useRef(null);
+    // The product's onMoveEnd when the keys' timer fires, which can be renders after it was set.
+    const ended = useRef(onMoveEnd);
+    useEffect(() => {
+        ended.current = onMoveEnd;
+    });
     const [dragging, setDragging] = useState(false);
     const [tip, setTip] = useState(false);
     const [quiet, setQuiet] = useState(false);
-    const picked = tl.picked?.id === marker.id;
-    // Its width, for the tiers: read when it arrives and as its label or text spacing changes it.
-    const id = marker.id;
+    const [menu, setMenu] = useState(false);
+    // Opened from the flag by key or right-click: focus goes to its first item, and comes back to the flag.
+    const [fromFlag, setFromFlag] = useState(false);
+    const picked = tl.picked?.id === id;
+    // Its width, with its menu button, for the tiers: read when it arrives and as its label or text spacing change it.
     const measure = useCallback((el) => {
         if (!el)
             return;
@@ -436,51 +562,99 @@ function Flag({ marker, box, tier, setWidths, hint, onMove, points, }) {
         return watch(el, [el], read);
     }, [id, setWidths]);
     const others = points.filter((p) => Math.abs(p.time - marker.time) > 1e-9 || p.label !== marker.label);
+    const same = (a, b) => Math.abs(a - b) < 1e-9;
+    // What the menu holds: Open when a press moves it, Move when a press opens it, and Reset with a default time.
+    const items = [];
+    if (press === 'move' && onAction)
+        items.push({ id: 'open', label: actionLabel ?? tl.t('open') });
+    if (press === 'action' && onMove)
+        items.push({ id: 'move', label: tl.t('move') });
+    if (marker.defaultTime !== undefined && onMove)
+        items.push({
+            id: 'reset',
+            label: tl.t('reset', { time: tl.show(marker.defaultTime) }),
+            disabled: same(marker.time, marker.defaultTime),
+        });
     const move = (time, point, was) => {
-        onMove?.(marker.id, clampTime(time, tl.start, tl.end));
+        onMove?.(id, clampTime(time, tl.start, tl.end));
         if (point && point !== was)
             tl.announce(tl.t('snapped', { point: point.label }));
         else if (!point && was)
             tl.announce('');
     };
+    const moving = (from, time) => tl.setMoving({ id, from, time, delta: time - from });
+    /** Puts it back where a move started, without finishing a move. */
+    const putBack = (from) => {
+        onMove?.(id, from);
+        tl.setMoving(null);
+        tl.announce(tl.t('cancelled', { label: marker.label, time: tl.speak(from) }));
+    };
     const pickUp = () => {
         const from = marker.time;
         tl.announce(tl.t('picked', { label: marker.label }));
         tl.pick({
-            id: marker.id,
+            id,
             label: marker.label,
             put: (time, free) => {
-                const { time: to } = place(time, {
+                const { time: placed } = place(time, {
                     step: tl.step,
                     origin: tl.start,
                     points: others,
                     pxPerSecond: tl.pps,
                     free,
                 });
-                onMove?.(marker.id, clampTime(to, tl.start, tl.end));
+                const to = clampTime(placed, tl.start, tl.end);
+                onMove?.(id, to);
                 tl.pick(null);
                 tl.announce(tl.t('placed', { label: marker.label, time: tl.speak(to) }));
+                if (!same(to, from))
+                    onMoveEnd?.(id, to);
             },
             cancel: () => {
-                onMove?.(marker.id, from);
                 tl.pick(null);
-                tl.announce(tl.t('cancelled', { label: marker.label, time: tl.speak(from) }));
+                putBack(from);
             },
         });
     };
+    const reset = () => {
+        const to = marker.defaultTime;
+        if (to === undefined)
+            return;
+        onMove?.(id, to);
+        tl.announce(tl.t('wasReset', { label: marker.label, time: tl.speak(to) }));
+        if (!same(to, marker.time))
+            onMoveEnd?.(id, to);
+    };
+    const finishKeys = () => {
+        const k = keys.current;
+        if (!k)
+            return;
+        clearTimeout(k.timer);
+        keys.current = null;
+        tl.setMoving(null);
+        if (!same(k.time, k.from))
+            ended.current?.(id, k.time);
+    };
     const onPointerDown = (e) => {
-        if (e.button !== 0 || !onMove)
+        if (e.button !== 0 || (!onMove && !onAction))
             return;
         e.stopPropagation();
         e.preventDefault();
         e.currentTarget.focus({ preventScroll: true });
         e.currentTarget.setPointerCapture(e.pointerId);
-        drag.current = { x: e.clientX, from: marker.time, moved: false, snapped: null };
+        drag.current = {
+            x: e.clientX,
+            pointer: e.pointerId,
+            from: marker.time,
+            time: marker.time,
+            moved: false,
+            snapped: null,
+        };
         setQuiet(true);
     };
     const onPointerMove = (e) => {
         const d = drag.current;
-        if (!d)
+        if (!d || !onMove)
             return;
         if (!d.moved && Math.abs(e.clientX - d.x) < 4)
             return;
@@ -500,26 +674,79 @@ function Flag({ marker, box, tier, setWidths, hint, onMove, points, }) {
         });
         move(time, point, d.snapped);
         d.snapped = point;
+        d.time = clampTime(time, tl.start, tl.end);
+        moving(d.from, d.time);
     };
     const onPointerUp = () => {
         const d = drag.current;
         drag.current = null;
         setDragging(false);
-        if (d && !d.moved) {
-            if (picked)
-                tl.picked?.cancel();
-            else
-                pickUp();
+        if (!d)
+            return;
+        if (d.moved) {
+            tl.setMoving(null);
+            if (!same(d.time, d.from))
+                onMoveEnd?.(id, d.time);
         }
+        else if (press === 'action')
+            onAction?.(id);
+        else if (picked)
+            tl.picked?.cancel();
+        else if (onMove)
+            pickUp();
+    };
+    // A pointer the browser took back (a touch turned into a scroll) puts the marker back.
+    const onPointerCancel = () => {
+        const d = drag.current;
+        drag.current = null;
+        setDragging(false);
+        if (d?.moved)
+            putBack(d.from);
+    };
+    const openMenu = () => {
+        setFromFlag(true);
+        setMenu(true);
     };
     const onKeyDown = (e) => {
+        setQuiet(true);
+        if (items.length && (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10'))) {
+            e.preventDefault();
+            openMenu();
+            return;
+        }
+        if (e.key === 'Escape') {
+            const d = drag.current;
+            if (d?.moved) {
+                e.stopPropagation();
+                drag.current = null;
+                setDragging(false);
+                if (slider.current?.hasPointerCapture(d.pointer))
+                    slider.current.releasePointerCapture(d.pointer);
+                putBack(d.from);
+            }
+            else if (keys.current) {
+                e.stopPropagation();
+                const { from, timer } = keys.current;
+                clearTimeout(timer);
+                keys.current = null;
+                putBack(from);
+            }
+            return;
+        }
+        if ((e.key === 'Enter' || e.key === ' ') && press === 'action' && onAction) {
+            e.preventDefault();
+            onAction(id);
+            return;
+        }
         if (!onMove)
             return;
-        setQuiet(true);
         const target = keyTime(e, marker.time, tl);
         if (target === null)
             return;
         e.preventDefault();
+        // The keys move it now, so it isn't waiting to be put down.
+        if (picked)
+            tl.pick(null);
         const arrow = e.key.startsWith('Arrow');
         const { time, point } = arrow
             ? nudge(marker.time, target - marker.time, {
@@ -531,13 +758,50 @@ function Flag({ marker, box, tier, setWidths, hint, onMove, points, }) {
         move(time, point, null);
         if (!point)
             tl.announce('');
+        const k = keys.current ?? { from: marker.time, time: marker.time, timer: setTimeout(() => { }) };
+        clearTimeout(k.timer);
+        k.time = clampTime(time, tl.start, tl.end);
+        k.timer = setTimeout(finishKeys, KEYS_SETTLE);
+        keys.current = k;
+        moving(k.from, k.time);
+    };
+    const onMenuOpenChange = (open) => {
+        setMenu(open);
+        if (open || !fromFlag)
+            return;
+        setFromFlag(false);
+        // Opened from the flag, it hands focus back to the flag, not to its button, once React Aria has restored it.
+        requestAnimationFrame(() => requestAnimationFrame(() => slider.current?.focus()));
     };
-    return (_jsxs(TooltipTrigger, { delay: 600, isOpen: tip && !quiet && !dragging, onOpenChange: setTip, children: [_jsx(Focusable, { children: _jsxs("div", { ref: measure, role: "slider", tabIndex: 0, "aria-label": marker.label, "aria-orientation": "horizontal", "aria-valuemin": tl.start, "aria-valuemax": tl.end, "aria-valuenow": Math.round(marker.time * 1000) / 1000, "aria-valuetext": tl.speak(marker.time), "aria-readonly": onMove ? undefined : true, "aria-describedby": hint, "data-marker": marker.id, "data-picked": picked || undefined, "data-dragging": dragging || undefined, "data-flipped": box.flipped || undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, onBlur: () => setQuiet(false), onPointerLeave: () => setQuiet(false), className: cn(
-                    // Layer 1: the flag, a lane tall and at least a target wide, starting (or ending) at its time.
-                    'group/marker absolute flex h-lane min-h-target min-w-target touch-none items-center outline-none select-none', onMove ? 'cursor-grab data-dragging:cursor-grabbing' : 'cursor-default', box.flipped ? 'flex-row-reverse' : ''), style: {
-                        left: box.flipped ? undefined : box.x,
-                        right: box.flipped ? `calc(100% - ${box.x}px)` : undefined,
-                        top: `calc(var(--lane-height) * ${tier})`,
-                    }, children: [_jsx("span", { "aria-hidden": "true", className: "w-0.5 self-stretch bg-foreground group-data-picked/marker:bg-primary forced-colors:bg-[Highlight] forced-colors:forced-color-adjust-none" }), _jsx("span", { "aria-hidden": "true", className: cn('h-5 rounded-sm border border-foreground bg-background px-1.5 text-[13px] leading-[18px] font-medium whitespace-nowrap text-foreground', box.flipped ? 'rounded-e-none' : 'rounded-s-none', 'group-hover/marker:bg-accent group-data-dragging/marker:bg-accent', 'group-data-picked/marker:border-primary group-data-picked/marker:bg-primary group-data-picked/marker:text-primary-foreground', 'group-focus-visible/marker:focus-ring', 'forced-colors:border-[Highlight] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText] forced-colors:forced-color-adjust-none forced-colors:group-data-picked/marker:bg-[Highlight] forced-colors:group-data-picked/marker:text-[HighlightText]'), children: marker.label })] }) }), _jsxs(Tooltip, { placement: "top", children: [_jsx("span", { className: "block font-semibold", children: marker.label }), _jsx("span", { className: "block tabular-nums", children: tl.show(marker.time) })] })] }));
+    const pressable = onMove || onAction;
+    return (_jsxs("div", { ref: measure, "data-marker-flag": id, className: cn('absolute flex h-lane min-h-target', box.flipped && 'flex-row-reverse'), style: {
+            left: box.flipped ? undefined : box.x,
+            right: box.flipped ? `calc(100% - ${box.x}px)` : undefined,
+            top: `calc(var(--lane-height) * ${tier})`,
+        }, children: [_jsxs(TooltipTrigger, { delay: 600, isOpen: tip && !quiet && !dragging, onOpenChange: setTip, children: [_jsx(Focusable, { children: _jsxs("div", { ref: slider, role: "slider", tabIndex: 0, "aria-label": marker.label, "aria-orientation": "horizontal", "aria-valuemin": tl.start, "aria-valuemax": tl.end, "aria-valuenow": Math.round(marker.time * 1000) / 1000, "aria-valuetext": tl.speak(marker.time), "aria-readonly": onMove ? undefined : true, "aria-describedby": [hint, items.length ? menuHint : ''].filter(Boolean).join(' ') || undefined, "data-marker": id, "data-picked": picked || undefined, "data-dragging": dragging || undefined, "data-flipped": box.flipped || undefined, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerCancel, onContextMenu: (e) => {
+                                if (!items.length)
+                                    return;
+                                e.preventDefault();
+                                openMenu();
+                            }, onKeyDown: onKeyDown, onBlur: () => {
+                                finishKeys();
+                                setQuiet(false);
+                            }, onPointerLeave: () => setQuiet(false), className: cn(
+                            // Layer 1: the flag, a lane tall and at least a target wide, starting (or ending) at its time.
+                            'group/marker relative flex h-full min-w-target touch-none items-center outline-none select-none', onMove
+                                ? 'cursor-grab data-dragging:cursor-grabbing'
+                                : pressable
+                                    ? 'cursor-pointer'
+                                    : 'cursor-default', box.flipped ? 'flex-row-reverse' : ''), children: [_jsx("span", { "aria-hidden": "true", className: "w-0.5 self-stretch bg-foreground group-data-picked/marker:bg-primary forced-colors:bg-[Highlight] forced-colors:forced-color-adjust-none" }), _jsx("span", { "aria-hidden": "true", className: cn('h-5 rounded-sm border border-foreground bg-background px-1.5 text-[13px] leading-[18px] font-medium whitespace-nowrap text-foreground', box.flipped ? 'rounded-e-none' : 'rounded-s-none', 'group-hover/marker:bg-accent group-data-dragging/marker:bg-accent', 'group-data-picked/marker:border-primary group-data-picked/marker:bg-primary group-data-picked/marker:text-primary-foreground', 'group-focus-visible/marker:focus-ring', 'forced-colors:border-[Highlight] forced-colors:bg-[Canvas] forced-colors:text-[CanvasText] forced-colors:forced-color-adjust-none forced-colors:group-data-picked/marker:bg-[Highlight] forced-colors:group-data-picked/marker:text-[HighlightText]'), children: marker.label })] }) }), _jsxs(Tooltip, { placement: "top", children: [_jsx("span", { className: "block font-semibold", children: marker.label }), _jsx("span", { className: "block tabular-nums", children: tl.show(marker.time) })] })] }), items.length > 0 && (_jsxs(MenuTrigger, { isOpen: menu, onOpenChange: onMenuOpenChange, children: [_jsx(RACButton, { "aria-label": tl.t('markerMenu', { label: marker.label }), "data-marker-menu": id, className: "group/marker-menu relative flex size-target shrink-0 cursor-pointer items-center justify-center outline-none", children: _jsx("span", { className: "flex size-5 items-center justify-center rounded-sm text-muted-foreground group-data-hovered/marker-menu:bg-muted group-data-hovered/marker-menu:text-foreground group-data-pressed/marker-menu:bg-muted group-data-focus-visible/marker-menu:focus-ring", children: _jsx(EllipsisVertical, { "aria-hidden": "true", className: "size-4" }) }) }), _jsx(Popover, { placement: "bottom start", children: _jsx(Menu, { "aria-label": tl.t('markerMenu', { label: marker.label }), 
+                            // React Aria's focus strategy, not the HTML attribute: the first item, as a menu button's ↓ does.
+                            // oxlint-disable-next-line jsx-a11y/no-autofocus
+                            autoFocus: fromFlag ? 'first' : undefined, disabledKeys: items.filter((item) => item.disabled).map((item) => item.id), onAction: (key) => {
+                                if (key === 'open')
+                                    onAction?.(id);
+                                else if (key === 'move')
+                                    pickUp();
+                                else if (key === 'reset')
+                                    reset();
+                            }, children: items.map((item) => (_jsx(MenuItem, { id: item.id, children: item.label }, item.id))) }) })] }))] }));
 }
 //# sourceMappingURL=timeline.js.map