@revolist/ui 4.0.1-rc → 4.0.1

package/time-grid.js

@@ -1,6 +1,7 @@
-import { ButtonControl as e } from "./native-control.js";
-import { useLayoutEffect as t, useRef as n } from "preact/hooks";
-import { jsx as r, jsxs as i } from "preact/jsx-runtime";
+import { r as e, t } from "./_chunks/hooks.module-CG3gN83z.js";
+import { t as n } from "./_chunks/jsxRuntime.module-F6UFnpT-.js";
+import { t as r } from "./_chunks/native-control-B9MNibfa.js";
+import { t as i } from "./_chunks/tooltip-text-BXsUEmBH.js";
 //#region src/time-grid.tsx
 var a = (e, t) => `${e}:${t}`;
 function o(e) {
@@ -10,53 +11,53 @@ function o(e) {
 		e.outsideWorkHours && "is-outside-work-hours"
 	].filter(Boolean).join(" ");
 }
-function s(t) {
-	let n = (e) => `rv-time-grid__${e}${t.legacyClassPrefix ? ` ${t.legacyClassPrefix}__${e}` : ""}`, s = Array.from({ length: 12 }, (e, t) => t * 2);
-	return /* @__PURE__ */ i("div", {
-		class: n("schedule"),
-		children: [/* @__PURE__ */ i("div", {
-			class: n("hours"),
+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__ */ r("span", {}), s.map((e) => /* @__PURE__ */ r("span", {
-				class: n("hour"),
-				children: t.hourLabel(e)
-			}, e))]
-		}), /* @__PURE__ */ r("div", {
-			ref: t.matrixRef,
-			class: n("matrix"),
+			children: [/* @__PURE__ */ n("span", {}), s.map((r) => /* @__PURE__ */ n("span", {
+				class: t("hour"),
+				children: e.hourLabel(r)
+			}, r))]
+		}), /* @__PURE__ */ n("div", {
+			ref: e.matrixRef,
+			class: t("matrix"),
 			role: "grid",
-			"aria-label": t.gridLabel,
-			"aria-rowcount": t.days.length,
+			"aria-label": e.gridLabel,
+			"aria-rowcount": e.days.length,
 			"aria-colcount": 12,
-			children: t.days.map((c) => {
-				let { weekday: l, short: u, long: d } = c, f = t.weekendDays.includes(l);
-				return /* @__PURE__ */ i("div", {
-					class: `${n("row")}${f ? " is-weekend" : ""}`,
+			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")}${f ? " is-weekend" : ""}`,
 					role: "row",
-					children: [/* @__PURE__ */ r("span", {
-						class: n("weekday"),
+					children: [/* @__PURE__ */ n(i, {
+						class: t("weekday"),
 						role: "rowheader",
 						title: d,
 						children: u
-					}), s.map((n) => {
-						let i = a(l, n), s = t.cells.has(i) || t.cells.has(a(l, n + 1)), u = t.workingHours ? n < t.workingHours.startHour || n + 2 > t.workingHours.endHour : !1;
-						return /* @__PURE__ */ r(e, {
+					}), 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: t.disabled,
+							disabled: e.disabled,
 							role: "gridcell",
 							"data-time-cell": i,
-							class: `${o({
+							class: o({
 								weekend: f,
 								outsideWorkHours: u
-							})} ${t.legacyClassPrefix ? `${t.legacyClassPrefix}__cell` : ""}`,
+							}),
 							"aria-selected": s,
-							"aria-label": t.cellLabel(c, t.hourLabel(n), t.hourLabel(n + 2), s),
-							tabIndex: t.focused === i ? 0 : -1,
-							onFocus: () => t.onFocus(i),
-							onKeyDown: (e) => t.onKeyDown(e, l, n),
-							onClick: (e) => t.onClick(e, l, n, s),
-							onPointerDown: (e) => t.onPointerDown(e, l, n, s),
-							onPointerEnter: () => t.onPointerEnter(l, n)
+							"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);
 					})]
 				}, l);
@@ -64,13 +65,13 @@ function s(t) {
 		})]
 	});
 }
-function c(e) {
-	let r = n(e);
-	r.current = e;
-	let i = n(), o = n(), s = n(), c = () => {
+function c(n) {
+	let r = t(n);
+	r.current = n;
+	let i = t(), o = t(), s = t(), c = () => {
 		o.current?.(), o.current = void 0;
 	};
-	t(() => () => {
+	e(() => () => {
 		i.current = void 0, c(), s.current !== void 0 && cancelAnimationFrame(s.current);
 	}, []);
 	let l = (e, t) => {

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("preact").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,139 +1,156 @@
-import { ButtonControl as e } from "../native-control.js";
-import { eventOutsideRange as t, moveTimelineEvent as n, niceTimelineStep as r, resizeTimelineEvent as i, timelineGeometry as a } from "./model.js";
-import { useRef as o } from "preact/hooks";
-import { jsx as s, jsxs as c } from "preact/jsx-runtime";
+import { t as e } from "../_chunks/hooks.module-CG3gN83z.js";
+import { t } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
+import { t as n } from "../_chunks/native-control-B9MNibfa.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 l = {
+var u = {
 	preview: "Timeline preview",
 	moveEvent: (e) => `Move event ${e}`,
 	resizeStart: (e) => `Resize start of ${e}`,
 	resizeEnd: (e) => `Resize end of ${e}`
 };
-function u({ rows: u, selected: d, range: f, labels: p, onSelect: m, onEventChange: h }) {
-	let g = {
-		...l,
-		...p
-	}, _ = o(), v = (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), _.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
-		}, m(t.id));
-	}, y = (e) => {
-		let t = _.current;
+		}, v(t.id));
+	}, C = (e) => {
+		let t = x.current;
 		if (!t) return;
-		let a = r(f), o = (e.clientX - t.clientX) / Math.max(1, t.width) * (f.end - f.start), s = Math.round(o / a) * a, c = t.mode === "move" ? n(t.event, s, f) : i(t.event, t.mode, s, f);
-		h(t.id, c);
-	}, b = () => {
-		_.current = void 0;
-	}, x = (e, t, a) => {
+		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 o = r(f) * (e.key === "ArrowLeft" ? -1 : 1);
-		h(t.id, a === "move" ? n(t.event, o, f) : i(t.event, a, o, f));
+		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__ */ c("div", {
+	return /* @__PURE__ */ t("div", {
 		class: "rv-timeline-editor__track rv-timeline-control__track",
 		role: "group",
-		"aria-label": g.preview,
+		"aria-label": b.preview,
 		children: [
-			/* @__PURE__ */ s("span", {
+			/* @__PURE__ */ t("span", {
 				class: "rv-timeline-editor__range rv-timeline-editor__range--start rv-timeline-control__range rv-timeline-control__range--start",
-				children: f.start
+				children: g.start
 			}),
-			/* @__PURE__ */ s("span", {
+			/* @__PURE__ */ t("span", {
 				class: "rv-timeline-editor__range rv-timeline-editor__range--end rv-timeline-control__range rv-timeline-control__range--end",
-				children: f.end
+				children: g.end
 			}),
-			u.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: n, index: r }) => {
-				let i = a(n.event, f), o = t(n.event, f), l = n.event.label || g.moveEvent(r + 1);
-				return /* @__PURE__ */ c("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",
-						d === n.id ? "rv-timeline-editor__bar--selected rv-timeline-control__bar--selected" : "",
-						n.event.start === n.event.end ? "rv-timeline-editor__bar--milestone rv-timeline-control__bar--milestone" : "",
+						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: `${i.left}%`,
-						width: `${i.width}%`
+						left: `${a.left}%`,
+						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": l,
+					"aria-label": s,
 					children: [
-						/* @__PURE__ */ s(e, {
+						/* @__PURE__ */ t(n, {
 							unstyled: !0,
 							type: "button",
 							class: "rv-timeline-editor__bar-move rv-timeline-control__bar-move",
 							"data-autofocus": r === 0 ? "" : void 0,
-							"aria-label": n.event.label ? `${g.moveEvent(r + 1)}: ${n.event.label}` : g.moveEvent(r + 1),
+							"aria-label": e.event.label ? `${b.moveEvent(r + 1)}: ${e.event.label}` : b.moveEvent(r + 1),
 							"aria-keyshortcuts": "ArrowLeft ArrowRight",
-							onFocus: () => m(n.id),
-							onPointerDown: (e) => v(e, n, "move"),
-							onPointerMove: y,
-							onPointerUp: b,
-							onPointerCancel: b,
-							onKeyDown: (e) => x(e, n, "move"),
-							children: /* @__PURE__ */ s("span", {
+							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: n.event.label
+								children: e.event.label
 							})
 						}),
-						/* @__PURE__ */ s(e, {
+						/* @__PURE__ */ t(n, {
 							unstyled: !0,
 							type: "button",
 							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": g.resizeStart(l),
-							"aria-valuemin": Math.min(f.start, n.event.start),
-							"aria-valuemax": n.event.end,
-							"aria-valuenow": n.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: () => m(n.id),
-							onPointerDown: (e) => {
-								e.stopPropagation(), v(e, n, "start");
+							onFocus: () => v(e.id),
+							onPointerDown: (t) => {
+								t.stopPropagation(), S(t, e, "start");
 							},
-							onPointerMove: y,
-							onPointerUp: b,
-							onPointerCancel: b,
-							onKeyDown: (e) => {
-								e.stopPropagation(), x(e, n, "start");
+							onPointerMove: C,
+							onPointerUp: w,
+							onPointerCancel: w,
+							onKeyDown: (t) => {
+								t.stopPropagation(), T(t, e, "start");
 							}
 						}),
-						/* @__PURE__ */ s(e, {
+						/* @__PURE__ */ t(n, {
 							unstyled: !0,
 							type: "button",
 							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": g.resizeEnd(l),
-							"aria-valuemin": n.event.start,
-							"aria-valuemax": Math.max(f.end, n.event.end),
-							"aria-valuenow": n.event.end,
+							"aria-label": b.resizeEnd(s),
+							"aria-valuemin": e.event.start,
+							"aria-valuemax": Math.max(g.end, e.event.end),
+							"aria-valuenow": e.event.end,
 							"aria-keyshortcuts": "ArrowLeft ArrowRight",
-							onFocus: () => m(n.id),
-							onPointerDown: (e) => {
-								e.stopPropagation(), v(e, n, "end");
+							onFocus: () => v(e.id),
+							onPointerDown: (t) => {
+								t.stopPropagation(), S(t, e, "end");
 							},
-							onPointerMove: y,
-							onPointerUp: b,
-							onPointerCancel: b,
-							onKeyDown: (e) => {
-								e.stopPropagation(), x(e, n, "end");
+							onPointerMove: C,
+							onPointerUp: w,
+							onPointerCancel: w,
+							onKeyDown: (t) => {
+								t.stopPropagation(), T(t, e, "end");
 							}
 						})
 					]
-				}, n.id);
+				}, e.id);
 			})
 		]
 	});
 }
+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 { u as TimelineTrack, t as eventOutsideRange, n as moveTimelineEvent, r as niceTimelineStep, i as resizeTimelineEvent, a 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 };