@revolist/ui 4.0.2-rc → 4.0.2

package/time-grid.js

@@ -1,23 +1,24 @@
 import { r as e, t } from "./_chunks/hooks.module-CG3gN83z.js";
 import { t as n } from "./_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { ButtonControl as r } from "./native-control.js";
+import { t as r } from "./_chunks/native-control-B_fVA5bL.js";
+import { t as i } from "./_chunks/tooltip-text-BXsUEmBH.js";
 //#region src/time-grid.tsx
-var i = (e, t) => `${e}:${t}`;
-function a(e) {
+var a = (e, t) => `${e}:${t}`;
+function o(e) {
 	return [
 		"rv-time-grid__cell",
 		e.weekend && "is-weekend",
 		e.outsideWorkHours && "is-outside-work-hours"
 	].filter(Boolean).join(" ");
 }
-function o(e) {
-	let t = (t) => `rv-time-grid__${t}${e.legacyClassPrefix ? ` ${e.legacyClassPrefix}__${t}` : ""}`, o = Array.from({ length: 12 }, (e, t) => t * 2);
+function s(e) {
+	let t = (e) => `rv-time-grid__${e}`, s = Array.from({ length: 12 }, (e, t) => t * 2);
 	return /* @__PURE__ */ n("div", {
 		class: t("schedule"),
 		children: [/* @__PURE__ */ n("div", {
 			class: t("hours"),
 			"aria-hidden": "true",
-			children: [/* @__PURE__ */ n("span", {}), o.map((r) => /* @__PURE__ */ n("span", {
+			children: [/* @__PURE__ */ n("span", {}), s.map((r) => /* @__PURE__ */ n("span", {
 				class: t("hour"),
 				children: e.hourLabel(r)
 			}, r))]
@@ -28,53 +29,53 @@ function o(e) {
 			"aria-label": e.gridLabel,
 			"aria-rowcount": e.days.length,
 			"aria-colcount": 12,
-			children: e.days.map((s) => {
-				let { weekday: c, short: l, long: u } = s, d = e.weekendDays.includes(c);
+			children: e.days.map((c) => {
+				let { weekday: l, short: u, long: d } = c, f = e.weekendDays.includes(l);
 				return /* @__PURE__ */ n("div", {
-					class: `${t("row")}${d ? " is-weekend" : ""}`,
+					class: `${t("row")}${f ? " is-weekend" : ""}`,
 					role: "row",
-					children: [/* @__PURE__ */ n("span", {
+					children: [/* @__PURE__ */ n(i, {
 						class: t("weekday"),
 						role: "rowheader",
-						title: u,
-						children: l
-					}), o.map((t) => {
-						let o = i(c, t), l = e.cells.has(o) || e.cells.has(i(c, t + 1)), u = e.workingHours ? t < e.workingHours.startHour || t + 2 > e.workingHours.endHour : !1;
+						title: d,
+						children: u
+					}), s.map((t) => {
+						let i = a(l, t), s = e.cells.has(i) || e.cells.has(a(l, t + 1)), u = e.workingHours ? t < e.workingHours.startHour || t + 2 > e.workingHours.endHour : !1;
 						return /* @__PURE__ */ n(r, {
 							type: "button",
 							disabled: e.disabled,
 							role: "gridcell",
-							"data-time-cell": o,
-							class: `${a({
-								weekend: d,
+							"data-time-cell": i,
+							class: o({
+								weekend: f,
 								outsideWorkHours: u
-							})} ${e.legacyClassPrefix ? `${e.legacyClassPrefix}__cell` : ""}`,
-							"aria-selected": l,
-							"aria-label": e.cellLabel(s, e.hourLabel(t), e.hourLabel(t + 2), l),
-							tabIndex: e.focused === o ? 0 : -1,
-							onFocus: () => e.onFocus(o),
-							onKeyDown: (n) => e.onKeyDown(n, c, t),
-							onClick: (n) => e.onClick(n, c, t, l),
-							onPointerDown: (n) => e.onPointerDown(n, c, t, l),
-							onPointerEnter: () => e.onPointerEnter(c, t)
-						}, o);
+							}),
+							"aria-selected": s,
+							"aria-label": e.cellLabel(c, e.hourLabel(t), e.hourLabel(t + 2), s),
+							tabIndex: e.focused === i ? 0 : -1,
+							onFocus: () => e.onFocus(i),
+							onKeyDown: (n) => e.onKeyDown(n, l, t),
+							onClick: (n) => e.onClick(n, l, t, s),
+							onPointerDown: (n) => e.onPointerDown(n, l, t, s),
+							onPointerEnter: () => e.onPointerEnter(l, t)
+						}, i);
 					})]
-				}, c);
+				}, l);
 			})
 		})]
 	});
 }
-function s(n) {
+function c(n) {
 	let r = t(n);
 	r.current = n;
-	let a = t(), o = t(), s = t(), c = () => {
+	let i = t(), o = t(), s = t(), c = () => {
 		o.current?.(), o.current = void 0;
 	};
 	e(() => () => {
-		a.current = void 0, c(), s.current !== void 0 && cancelAnimationFrame(s.current);
+		i.current = void 0, c(), s.current !== void 0 && cancelAnimationFrame(s.current);
 	}, []);
 	let l = (e, t) => {
-		let n = i(e, t);
+		let n = a(e, t);
 		r.current.onFocus(n), s.current !== void 0 && cancelAnimationFrame(s.current), s.current = requestAnimationFrame(() => r.current.matrixRef.current?.querySelector(`[data-time-cell="${n}"]`)?.focus());
 	};
 	return {
@@ -97,18 +98,18 @@ function s(n) {
 		},
 		onPointerDown: (e, t, n, s) => {
 			if (r.current.disabled || e.button !== 0) return;
-			e.preventDefault(), c(), a.current = { selected: !s };
+			e.preventDefault(), c(), i.current = { selected: !s };
 			let l = e.currentTarget.ownerDocument, u = () => {
-				a.current && (a.current = void 0, c(), r.current.onCommit());
+				i.current && (i.current = void 0, c(), r.current.onCommit());
 			};
 			l.addEventListener("pointerup", u), l.addEventListener("pointercancel", u), o.current = () => {
 				l.removeEventListener("pointerup", u), l.removeEventListener("pointercancel", u);
-			}, r.current.onPaint(t, n, !s), r.current.onFocus(i(t, n));
+			}, r.current.onPaint(t, n, !s), r.current.onFocus(a(t, n));
 		},
 		onPointerEnter: (e, t) => {
-			a.current && !r.current.disabled && r.current.onPaint(e, t, a.current.selected);
+			i.current && !r.current.disabled && r.current.onPaint(e, t, i.current.selected);
 		}
 	};
 }
 //#endregion
-export { o as TimeGrid, i as timeGridCellKey, s as useTimeGridInteraction };
+export { s as TimeGrid, a as timeGridCellKey, c as useTimeGridInteraction };

package/timeline-track/_style.scss

@@ -6,11 +6,29 @@
   height: 112px;
   margin: 0 0 12px;
   overflow: hidden;
-  border: 1px solid var(--rv-ui-border, var(--rv-dialog-border, var(--rv-ui-border)));
+  border: 1px solid
+    var(--rv-ui-border, var(--rv-dialog-border, var(--rv-ui-border)));
   border-radius: 11px;
   background:
-    repeating-linear-gradient(to right, transparent 0, transparent calc(25% - 1px), color-mix(in srgb, var(--rv-ui-border, var(--rv-dialog-border, var(--rv-ui-border))) 58%, transparent) 25%),
-    var(--rv-ui-surface-sunken, color-mix(in srgb, var(--rv-dialog-bg, var(--rv-ui-surface)) 96%, var(--rv-ui-text-muted, var(--rv-dialog-muted, var(--rv-ui-text-muted)))));
+    repeating-linear-gradient(
+      to right,
+      transparent 0,
+      transparent calc(25% - 1px),
+      color-mix(
+          in srgb,
+          var(--rv-ui-border, var(--rv-dialog-border, var(--rv-ui-border))) 58%,
+          transparent
+        )
+        25%
+    ),
+    var(
+      --rv-ui-surface-sunken,
+      color-mix(
+        in srgb,
+        var(--rv-dialog-bg, var(--rv-ui-surface)) 96%,
+        var(--rv-ui-text-muted, var(--rv-dialog-muted, var(--rv-ui-text-muted)))
+      )
+    );
 }
 .rv-timeline-control__track::before {
   position: absolute;
@@ -18,12 +36,29 @@
   right: 0;
   left: 0;
   height: 1px;
-  background: color-mix(in srgb, var(--rv-ui-border, var(--rv-dialog-border, var(--rv-ui-border))) 82%, transparent);
+  background: color-mix(
+    in srgb,
+    var(--rv-ui-border, var(--rv-dialog-border, var(--rv-ui-border))) 82%,
+    transparent
+  );
   content: '';
 }
-.rv-timeline-control__range { position: absolute; bottom: 8px; color: var(--rv-ui-text-muted, var(--rv-dialog-muted, var(--rv-ui-text-muted))); font-size: 11px; font-variant-numeric: tabular-nums; }
-.rv-timeline-control__range--start { left: 10px; }
-.rv-timeline-control__range--end { right: 10px; }
+.rv-timeline-control__range {
+  position: absolute;
+  bottom: 8px;
+  color: var(
+    --rv-ui-text-muted,
+    var(--rv-dialog-muted, var(--rv-ui-text-muted))
+  );
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+.rv-timeline-control__range--start {
+  left: 10px;
+}
+.rv-timeline-control__range--end {
+  right: 10px;
+}
 .rv-timeline-control__bar {
   position: absolute;
   top: 39px;
@@ -37,7 +72,11 @@
   color: var(--timeline-event-text-color, #0f172a);
   box-shadow: 0 1px 2px var(--rv-ui-shadow);
   touch-action: none;
-  transition: border-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)), box-shadow var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+  transition:
+    border-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    box-shadow var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }
 .rv-timeline-control__bar-move {
   position: absolute;
@@ -55,14 +94,28 @@
   cursor: grab;
   touch-action: none;
 }
-.rv-timeline-control__bar-move:active { cursor: grabbing; }
+.rv-timeline-control__bar-move:active {
+  cursor: grabbing;
+}
 .rv-timeline-control__bar:hover {
   border-color: var(--timeline-event-hover-color-end, #166534);
 }
-.rv-timeline-control__bar--selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--timeline-event-color, #16a34a) 22%, transparent), 0 1px 2px var(--rv-ui-shadow); }
-.rv-timeline-control__bar--milestone { border-radius: 50%; }
-.rv-timeline-control__bar--milestone .rv-timeline-control__bar-label { display: none; }
-.rv-timeline-control__bar--outside { outline: 2px dashed var(--rv-structured-warning, var(--rv-ui-warning)); outline-offset: 2px; }
+.rv-timeline-control__bar--selected {
+  box-shadow:
+    0 0 0 3px
+      color-mix(in srgb, var(--timeline-event-color, #16a34a) 22%, transparent),
+    0 1px 2px var(--rv-ui-shadow);
+}
+.rv-timeline-control__bar--milestone {
+  border-radius: 50%;
+}
+.rv-timeline-control__bar--milestone .rv-timeline-control__bar-label {
+  display: none;
+}
+.rv-timeline-control__bar--outside {
+  outline: 2px dashed var(--rv-structured-warning, var(--rv-ui-warning));
+  outline-offset: 2px;
+}
 .rv-timeline-control__bar-label {
   display: block;
   overflow: hidden;
@@ -89,16 +142,27 @@
   width: 4px;
   border-radius: 999px;
   background: rgb(255 255 255 / 82%);
-  opacity: .45;
-  transition: opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+  opacity: 0.45;
+  transition: opacity var(--rv-ui-motion-fast, 120ms)
+    var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
   content: '';
 }
 .rv-timeline-control__bar:hover .rv-timeline-control__handle::after,
-.rv-timeline-control__bar--selected .rv-timeline-control__handle::after { opacity: 1; }
-.rv-timeline-control__handle--start { left: -12px; }
-.rv-timeline-control__handle--start::after { left: 10px; }
-.rv-timeline-control__handle--end { right: -12px; }
-.rv-timeline-control__handle--end::after { right: 10px; }
+.rv-timeline-control__bar--selected .rv-timeline-control__handle::after {
+  opacity: 1;
+}
+.rv-timeline-control__handle--start {
+  left: -12px;
+}
+.rv-timeline-control__handle--start::after {
+  left: 10px;
+}
+.rv-timeline-control__handle--end {
+  right: -12px;
+}
+.rv-timeline-control__handle--end::after {
+  right: 10px;
+}
 
 .rv-timeline-control__track button:focus-visible {
   outline: 0;
@@ -106,16 +170,24 @@
   box-shadow: 0 0 0 3px var(--rv-ui-focus-ring);
 }
 @media (prefers-reduced-motion: reduce) {
-  .rv-timeline-control__bar { transition: none; }
+  .rv-timeline-control__bar {
+    transition: none;
+  }
 }
 @media (forced-colors: active) {
-  .rv-timeline-control__track { border-color: CanvasText; }
+  .rv-timeline-control__track {
+    border-color: CanvasText;
+  }
   .rv-timeline-control__bar {
     border-color: Highlight;
     background: Highlight;
     color: HighlightText;
     forced-color-adjust: auto;
   }
-  .rv-timeline-control__bar--selected { outline: 2px solid Highlight; }
-  .rv-timeline-control__handle::after { background: HighlightText; }
+  .rv-timeline-control__bar--selected {
+    outline: 2px solid Highlight;
+  }
+  .rv-timeline-control__handle::after {
+    background: HighlightText;
+  }
 }

package/timeline-track/component.d.ts

@@ -1,3 +1,4 @@
+import { JSX } from '../_vendor/preact/src/index';
 import { TimelineTrackEvent, TimelineTrackRange } from './model';
 export type TimelineTrackPointerMode = 'move' | 'start' | 'end';
 export interface TimelineTrackItem<T extends TimelineTrackEvent> {
@@ -12,6 +13,9 @@ export interface TimelineTrackLabels {
 }
 export interface TimelineTrackProps<T extends TimelineTrackEvent> {
     readonly rows: readonly TimelineTrackItem<T>[];
+    readonly tooltip?: boolean;
+    readonly formatValue?: (value: number) => string;
+    readonly getTooltip?: (event: T) => string;
     readonly selected?: string | number;
     /** Finite bounds with end greater than start. */
     readonly range: TimelineTrackRange;
@@ -20,4 +24,4 @@ export interface TimelineTrackProps<T extends TimelineTrackEvent> {
     readonly onEventChange: (id: string | number, event: T) => void;
 }
 /** Controlled numeric timeline. Changes preserve event metadata; consumers own commits. */
-export declare function TimelineTrack<T extends TimelineTrackEvent>({ rows, selected, range, labels, onSelect, onEventChange, }: TimelineTrackProps<T>): import("../_vendor/preact/src/index").JSX.Element;
+export declare function TimelineTrack<T extends TimelineTrackEvent>({ rows, tooltip, formatValue, getTooltip, selected, range, labels, onSelect, onEventChange, }: TimelineTrackProps<T>): JSX.Element;

package/timeline-track/index.js

@@ -1,85 +1,91 @@
 import { t as e } from "../_chunks/hooks.module-CG3gN83z.js";
 import { t } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { ButtonControl as n } from "../native-control.js";
-import { eventOutsideRange as r, moveTimelineEvent as i, niceTimelineStep as a, resizeTimelineEvent as o, timelineGeometry as s } from "./model.js";
+import { t as n } from "../_chunks/native-control-B_fVA5bL.js";
+import { n as r } from "../_chunks/tooltip-D4xkio5G.js";
+import { eventOutsideRange as i, moveTimelineEvent as a, niceTimelineStep as o, resizeTimelineEvent as s, timelineEventBackground as c, timelineGeometry as l } from "./model.js";
 //#region src/timeline-track/component.tsx
-var c = {
+var u = {
 	preview: "Timeline preview",
 	moveEvent: (e) => `Move event ${e}`,
 	resizeStart: (e) => `Resize start of ${e}`,
 	resizeEnd: (e) => `Resize end of ${e}`
 };
-function l({ rows: l, selected: u, range: d, labels: f, onSelect: p, onEventChange: m }) {
-	let h = {
-		...c,
-		...f
-	}, g = e(), _ = (e, t, n) => {
+function d({ rows: r, tooltip: d = !0, formatValue: p = String, getTooltip: m, selected: h, range: g, labels: _, onSelect: v, onEventChange: y }) {
+	let b = {
+		...u,
+		..._
+	}, x = e(), S = (e, t, n) => {
 		let r = e.currentTarget.closest(".rv-timeline-control__track");
-		r && (e.preventDefault(), e.currentTarget.setPointerCapture?.(e.pointerId), g.current = {
+		r && (e.preventDefault(), e.currentTarget.setPointerCapture?.(e.pointerId), x.current = {
 			id: t.id,
 			mode: n,
 			clientX: e.clientX,
 			event: t.event,
 			width: r.getBoundingClientRect().width
-		}, p(t.id));
-	}, v = (e) => {
-		let t = g.current;
+		}, v(t.id));
+	}, C = (e) => {
+		let t = x.current;
 		if (!t) return;
-		let n = a(d), r = (e.clientX - t.clientX) / Math.max(1, t.width) * (d.end - d.start), s = Math.round(r / n) * n, c = t.mode === "move" ? i(t.event, s, d) : o(t.event, t.mode, s, d);
-		m(t.id, c);
-	}, y = () => {
-		g.current = void 0;
-	}, b = (e, t, n) => {
+		let n = o(g), r = (e.clientX - t.clientX) / Math.max(1, t.width) * (g.end - g.start), i = Math.round(r / n) * n, c = t.mode === "move" ? a(t.event, i, g) : s(t.event, t.mode, i, g);
+		y(t.id, c);
+	}, w = () => {
+		x.current = void 0;
+	}, T = (e, t, n) => {
 		if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
 		e.preventDefault();
-		let r = a(d) * (e.key === "ArrowLeft" ? -1 : 1);
-		m(t.id, n === "move" ? i(t.event, r, d) : o(t.event, n, r, d));
+		let r = o(g) * (e.key === "ArrowLeft" ? -1 : 1);
+		y(t.id, n === "move" ? a(t.event, r, g) : s(t.event, n, r, g));
 	};
 	return /* @__PURE__ */ t("div", {
 		class: "rv-timeline-editor__track rv-timeline-control__track",
 		role: "group",
-		"aria-label": h.preview,
+		"aria-label": b.preview,
 		children: [
 			/* @__PURE__ */ t("span", {
 				class: "rv-timeline-editor__range rv-timeline-editor__range--start rv-timeline-control__range rv-timeline-control__range--start",
-				children: d.start
+				children: g.start
 			}),
 			/* @__PURE__ */ t("span", {
 				class: "rv-timeline-editor__range rv-timeline-editor__range--end rv-timeline-control__range rv-timeline-control__range--end",
-				children: d.end
+				children: g.end
 			}),
-			l.map((e, t) => ({
+			r.map((e, t) => ({
 				row: e,
 				index: t
-			})).filter(({ row: e }) => Number.isFinite(e.event.start) && Number.isFinite(e.event.end) && e.event.end >= e.event.start).map(({ row: e, index: i }) => {
-				let a = s(e.event, d), o = r(e.event, d), c = e.event.label || h.moveEvent(i + 1);
-				return /* @__PURE__ */ t("div", {
+			})).filter(({ row: e }) => Number.isFinite(e.event.start) && Number.isFinite(e.event.end) && e.event.end >= e.event.start).map(({ row: e, index: r }) => {
+				let a = l(e.event, g), o = i(e.event, g), s = e.event.label || b.moveEvent(r + 1);
+				return /* @__PURE__ */ t(f, {
+					tooltipText: d ? m?.(e.event) ?? `${s}: ${p(e.event.start)} – ${p(e.event.end)}` : void 0,
 					class: [
 						"rv-timeline-editor__bar rv-timeline-control__bar",
-						u === e.id ? "rv-timeline-editor__bar--selected rv-timeline-control__bar--selected" : "",
+						h === e.id ? "rv-timeline-editor__bar--selected rv-timeline-control__bar--selected" : "",
 						e.event.start === e.event.end ? "rv-timeline-editor__bar--milestone rv-timeline-control__bar--milestone" : "",
 						o ? "rv-timeline-editor__bar--outside rv-timeline-control__bar--outside" : ""
 					].filter(Boolean).join(" "),
 					style: {
 						left: `${a.left}%`,
-						width: `${a.width}%`
+						width: `${a.width}%`,
+						background: c(e.event),
+						color: e.event.textColor,
+						"--timeline-event-color": e.event.color,
+						"--timeline-event-color-end": e.event.color
 					},
 					role: "group",
-					"aria-label": c,
+					"aria-label": s,
 					children: [
 						/* @__PURE__ */ t(n, {
 							unstyled: !0,
 							type: "button",
 							class: "rv-timeline-editor__bar-move rv-timeline-control__bar-move",
-							"data-autofocus": i === 0 ? "" : void 0,
-							"aria-label": e.event.label ? `${h.moveEvent(i + 1)}: ${e.event.label}` : h.moveEvent(i + 1),
+							"data-autofocus": r === 0 ? "" : void 0,
+							"aria-label": e.event.label ? `${b.moveEvent(r + 1)}: ${e.event.label}` : b.moveEvent(r + 1),
 							"aria-keyshortcuts": "ArrowLeft ArrowRight",
-							onFocus: () => p(e.id),
-							onPointerDown: (t) => _(t, e, "move"),
-							onPointerMove: v,
-							onPointerUp: y,
-							onPointerCancel: y,
-							onKeyDown: (t) => b(t, e, "move"),
+							onFocus: () => v(e.id),
+							onPointerDown: (t) => S(t, e, "move"),
+							onPointerMove: C,
+							onPointerUp: w,
+							onPointerCancel: w,
+							onKeyDown: (t) => T(t, e, "move"),
 							children: /* @__PURE__ */ t("span", {
 								class: "rv-timeline-editor__bar-label rv-timeline-control__bar-label",
 								children: e.event.label
@@ -91,20 +97,20 @@ function l({ rows: l, selected: u, range: d, labels: f, onSelect: p, onEventChan
 							class: "rv-timeline-editor__handle rv-timeline-editor__handle--start rv-timeline-control__handle rv-timeline-control__handle--start",
 							role: "slider",
 							"aria-orientation": "horizontal",
-							"aria-label": h.resizeStart(c),
-							"aria-valuemin": Math.min(d.start, e.event.start),
+							"aria-label": b.resizeStart(s),
+							"aria-valuemin": Math.min(g.start, e.event.start),
 							"aria-valuemax": e.event.end,
 							"aria-valuenow": e.event.start,
 							"aria-keyshortcuts": "ArrowLeft ArrowRight",
-							onFocus: () => p(e.id),
+							onFocus: () => v(e.id),
 							onPointerDown: (t) => {
-								t.stopPropagation(), _(t, e, "start");
+								t.stopPropagation(), S(t, e, "start");
 							},
-							onPointerMove: v,
-							onPointerUp: y,
-							onPointerCancel: y,
+							onPointerMove: C,
+							onPointerUp: w,
+							onPointerCancel: w,
 							onKeyDown: (t) => {
-								t.stopPropagation(), b(t, e, "start");
+								t.stopPropagation(), T(t, e, "start");
 							}
 						}),
 						/* @__PURE__ */ t(n, {
@@ -113,20 +119,20 @@ function l({ rows: l, selected: u, range: d, labels: f, onSelect: p, onEventChan
 							class: "rv-timeline-editor__handle rv-timeline-editor__handle--end rv-timeline-control__handle rv-timeline-control__handle--end",
 							role: "slider",
 							"aria-orientation": "horizontal",
-							"aria-label": h.resizeEnd(c),
+							"aria-label": b.resizeEnd(s),
 							"aria-valuemin": e.event.start,
-							"aria-valuemax": Math.max(d.end, e.event.end),
+							"aria-valuemax": Math.max(g.end, e.event.end),
 							"aria-valuenow": e.event.end,
 							"aria-keyshortcuts": "ArrowLeft ArrowRight",
-							onFocus: () => p(e.id),
+							onFocus: () => v(e.id),
 							onPointerDown: (t) => {
-								t.stopPropagation(), _(t, e, "end");
+								t.stopPropagation(), S(t, e, "end");
 							},
-							onPointerMove: v,
-							onPointerUp: y,
-							onPointerCancel: y,
+							onPointerMove: C,
+							onPointerUp: w,
+							onPointerCancel: w,
 							onKeyDown: (t) => {
-								t.stopPropagation(), b(t, e, "end");
+								t.stopPropagation(), T(t, e, "end");
 							}
 						})
 					]
@@ -135,5 +141,16 @@ function l({ rows: l, selected: u, range: d, labels: f, onSelect: p, onEventChan
 		]
 	});
 }
+function f({ tooltipText: e, children: n, ...i }) {
+	let a = r(e ?? "", !0, {
+		className: "rv-control-tooltip",
+		placement: "above"
+	});
+	return /* @__PURE__ */ t("div", {
+		...i,
+		...e ? a.triggerProps : {},
+		children: [n, e && a.tooltip]
+	});
+}
 //#endregion
-export { l as TimelineTrack, r as eventOutsideRange, i as moveTimelineEvent, a as niceTimelineStep, o as resizeTimelineEvent, s as timelineGeometry };
+export { d as TimelineTrack, i as eventOutsideRange, a as moveTimelineEvent, o as niceTimelineStep, s as resizeTimelineEvent, c as timelineEventBackground, l as timelineGeometry };

package/timeline-track/model.d.ts

@@ -2,6 +2,13 @@ export interface TimelineTrackEvent {
     readonly start: number;
     readonly end: number;
     readonly label?: string;
+    /** Single CSS color, or weighted phases within this event. */
+    readonly color?: string;
+    readonly textColor?: string;
+    readonly segments?: readonly {
+        readonly color: string;
+        readonly weight: number;
+    }[];
 }
 export interface TimelineTrackRange {
     readonly start: number;
@@ -15,3 +22,5 @@ export declare function timelineGeometry(event: TimelineTrackEvent, range: Timel
 export declare function niceTimelineStep(range: TimelineTrackRange): number;
 export declare function moveTimelineEvent<T extends TimelineTrackEvent>(event: T, delta: number, range: TimelineTrackRange): T;
 export declare function resizeTimelineEvent<T extends TimelineTrackEvent>(event: T, edge: 'start' | 'end', delta: number, range: TimelineTrackRange): T;
+/** Weighted phase colors use hard stops and scale with the event on resize. */
+export declare function timelineEventBackground(event: TimelineTrackEvent): string | undefined;

package/timeline-track/model.js

@@ -34,5 +34,14 @@ function i(e, t, n, r) {
 		end: Math.min(r.end, Math.max(e.start, e.end + n))
 	};
 }
+function a(e) {
+	let t = e.segments?.filter((e) => Number.isFinite(e.weight) && e.weight > 0);
+	if (!t?.length) return e.color;
+	let n = t.reduce((e, t) => e + t.weight, 0), r = 0;
+	return `linear-gradient(to right, ${t.map((e) => {
+		let t = r / n * 100;
+		return r += e.weight, `${e.color} ${t}% ${r / n * 100}%`;
+	}).join(", ")})`;
+}
 //#endregion
-export { e as eventOutsideRange, r as moveTimelineEvent, n as niceTimelineStep, i as resizeTimelineEvent, t as timelineGeometry };
+export { e as eventOutsideRange, r as moveTimelineEvent, n as niceTimelineStep, i as resizeTimelineEvent, a as timelineEventBackground, t as timelineGeometry };