@revolist/ui 4.0.2-rc → 4.0.3-rc

package/surfaces.js

@@ -1,9 +1,9 @@
 import { calculateAnchoredPopoverPosition as e } from "./core/anchored-popover.js";
 import { t } from "./_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { createPreactElement as n, releasePreactElement as r } from "./preact-mount.js";
-import { createControlId as i } from "./core/control-id.js";
-import { hideTopLayerPopup as a, showTopLayerPopup as o } from "./core/top-layer-popup.js";
-import { inheritUiMotion as s } from "./core/motion.js";
+import { inheritUiMotion as n } from "./core/motion.js";
+import { hideTopLayerPopup as r, showTopLayerPopup as i } from "./core/top-layer-popup.js";
+import { createPreactElement as a, releasePreactElement as o } from "./preact-mount.js";
+import { createControlId as s } from "./core/control-id.js";
 import { createDialogElements as c, getDialogFocusableElements as l, trapDialogFocus as u } from "./dialog/dialog.dom.js";
 import { attachDialogDrag as d } from "./dialog/dialog.drag.js";
 //#region src/surfaces.view.tsx
@@ -19,23 +19,23 @@ var f = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), m = cl
 	}
 	open(e) {
 		this.close();
-		let t = this.document, n = t.activeElement, i = !1, a, o, f = p.get(t) ?? [];
+		let t = this.document, r = t.activeElement, i = !1, a, s, f = p.get(t) ?? [];
 		p.set(t, f);
 		let m = () => {
 			if (i) return;
-			i = !0, a?.(), o?.(), r(h.root);
-			let t = f.indexOf(h.root), s = t === f.length - 1;
+			i = !0, a?.(), s?.(), o(h.root);
+			let t = f.indexOf(h.root), n = t === f.length - 1;
 			t !== -1 && f.splice(t, 1), this.active?.root === h.root && (this.active = void 0);
 			try {
 				e.onClose?.();
 			} finally {
-				s && (this.environment.restoreFocus ? this.environment.restoreFocus(e.returnFocus, n ?? void 0) : [e.returnFocus, n].find((e) => e?.isConnected)?.focus?.({ preventScroll: !0 }));
+				n && (this.environment.restoreFocus ? this.environment.restoreFocus(e.returnFocus, r ?? void 0) : [e.returnFocus, r].find((e) => e?.isConnected)?.focus?.({ preventScroll: !0 }));
 			}
 		}, h = c(t, e, m), g = {
 			...h,
 			close: m
 		};
-		return this.environment.beforeMount?.(h.root), o = s(e.returnFocus ?? n, h.root), h.root.addEventListener("mousedown", (e) => {
+		return this.environment.beforeMount?.(h.root), s = n(e.returnFocus ?? r, h.root), h.root.addEventListener("mousedown", (e) => {
 			e.target === h.root && f.at(-1) === h.root && m();
 		}), h.root.addEventListener("keydown", (e) => {
 			f.at(-1) === h.root && (e.key === "Escape" ? (e.preventDefault(), e.stopPropagation(), m()) : e.key === "Tab" && u(h.root, e));
@@ -59,44 +59,44 @@ var f = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), m = cl
 	}
 	open(t) {
 		this.close(!1);
-		let { anchor: n, content: r } = t, i = n.ownerDocument, c = i.defaultView, l = f.get(i) ?? [];
-		f.set(i, l);
-		let u = r.parentNode, d = r.nextSibling, p = r.hidden, m = r.getAttribute("style"), h = r.getAttribute("popover"), g = s(n, r), _ = () => {
-			if (!n.isConnected) {
+		let { anchor: a, content: o } = t, s = a.ownerDocument, c = s.defaultView, l = f.get(s) ?? [];
+		f.set(s, l);
+		let u = o.parentNode, d = o.nextSibling, p = o.hidden, m = o.getAttribute("style"), h = o.getAttribute("popover"), g = n(a, o), _ = () => {
+			if (!a.isConnected) {
 				b(!1);
 				return;
 			}
-			let t = e(n.getBoundingClientRect(), r.getBoundingClientRect(), {
-				width: i.documentElement.clientWidth || c?.innerWidth || 0,
-				height: i.documentElement.clientHeight || c?.innerHeight || 0
+			let t = e(a.getBoundingClientRect(), o.getBoundingClientRect(), {
+				width: s.documentElement.clientWidth || c?.innerWidth || 0,
+				height: s.documentElement.clientHeight || c?.innerHeight || 0
 			});
-			Object.assign(r.style, {
+			Object.assign(o.style, {
 				left: `${t.left}px`,
 				top: `${t.top}px`
 			});
 		}, v, y = !1, b = (e = t.restoreFocus !== !1) => {
 			if (y) return;
-			y = !0, i.removeEventListener("pointerdown", x, !0), i.removeEventListener("keydown", S), c?.removeEventListener("resize", _), i.removeEventListener("scroll", _, !0), C?.disconnect();
-			let o = l.indexOf(r);
-			o !== -1 && l.splice(o, 1), a(r, v), g(), u?.isConnected ? u.insertBefore(r, d?.parentNode === u ? d : null) : r.remove(), m === null ? r.removeAttribute("style") : r.setAttribute("style", m), r.hidden = p, h === null ? r.removeAttribute("popover") : r.setAttribute("popover", h), this.active?.content === r && (this.active = void 0), e && n.isConnected && n.focus({ preventScroll: !0 }), t.onClose?.();
+			y = !0, s.removeEventListener("pointerdown", x, !0), o.removeEventListener("keydown", S), s.removeEventListener("keydown", S), c?.removeEventListener("resize", _), s.removeEventListener("scroll", _, !0), C?.disconnect();
+			let n = l.indexOf(o);
+			n !== -1 && l.splice(n, 1), r(o, v), g(), u?.isConnected ? u.insertBefore(o, d?.parentNode === u ? d : null) : o.remove(), m === null ? o.removeAttribute("style") : o.setAttribute("style", m), o.hidden = p, h === null ? o.removeAttribute("popover") : o.setAttribute("popover", h), this.active?.content === o && (this.active = void 0), e && a.isConnected && a.focus({ preventScroll: !0 }), t.onClose?.();
 		}, x = (e) => {
-			if (l.at(-1) !== r) return;
-			let i = e.composedPath();
-			t.closeOnOutside !== !1 && !i.includes(n) && !i.includes(r) && b(!1);
+			if (l.at(-1) !== o) return;
+			let n = e.composedPath();
+			t.closeOnOutside !== !1 && !n.includes(a) && !n.includes(o) && b(!1);
 		}, S = (e) => {
-			l.at(-1) === r && e.key === "Escape" && t.closeOnEscape !== !1 && !e.defaultPrevented && (e.preventDefault(), e.stopPropagation(), b());
+			l.at(-1) === o && e.key === "Escape" && t.closeOnEscape !== !1 && !e.defaultPrevented && (e.preventDefault(), e.stopPropagation(), b());
 		};
-		(t.appendTo ?? i.body).append(r), r.hidden = !1, Object.assign(r.style, {
+		(t.appendTo ?? s.body).append(o), o.hidden = !1, Object.assign(o.style, {
 			position: "fixed",
 			inset: "auto",
 			margin: "0"
-		}), v = o(r, t.display ?? "block");
+		}), v = i(o, t.display ?? "block");
 		let C = c?.ResizeObserver ? new c.ResizeObserver(_) : void 0;
-		return C?.observe(n), C?.observe(r), this.active = {
-			content: r,
+		return C?.observe(a), C?.observe(o), this.active = {
+			content: o,
 			close: b,
 			position: _
-		}, l.push(r), i.addEventListener("pointerdown", x, !0), i.addEventListener("keydown", S), c?.addEventListener("resize", _), i.addEventListener("scroll", _, !0), _(), {
+		}, l.push(o), s.addEventListener("pointerdown", x, !0), o.addEventListener("keydown", S), s.addEventListener("keydown", S), c?.addEventListener("resize", _), s.addEventListener("scroll", _, !0), _(), {
 			close: b,
 			refresh: _
 		};
@@ -111,10 +111,10 @@ var f = /* @__PURE__ */ new WeakMap(), p = /* @__PURE__ */ new WeakMap(), m = cl
 		this.close(!1);
 	}
 };
-function g(e, r = "grid-tooltip") {
-	return n(e, /* @__PURE__ */ t("div", {
-		id: i("rv-tooltip"),
-		class: r,
+function g(e, n = "grid-tooltip") {
+	return a(e, /* @__PURE__ */ t("div", {
+		id: s("rv-tooltip"),
+		class: n,
 		role: "tooltip",
 		hidden: !0
 	}));
@@ -124,26 +124,26 @@ var _ = /* @__PURE__ */ new WeakMap(), v = class {
 	release;
 	bind(e, t, n = {}) {
 		this.destroy();
-		let i = g(e.ownerDocument, "rv-tooltip");
-		i.textContent = t;
-		let a = () => {
-			_.get(e.ownerDocument) === o && _.delete(e.ownerDocument);
-		}, o = () => {
-			a(), this.popover.close(!1), i.hidden = !0, e.setAttribute("aria-describedby", s ?? ""), s === null && e.removeAttribute("aria-describedby");
+		let r = g(e.ownerDocument, "rv-tooltip");
+		r.textContent = t;
+		let i = () => {
+			_.get(e.ownerDocument) === a && _.delete(e.ownerDocument);
+		}, a = () => {
+			i(), this.popover.close(!1), r.hidden = !0, e.setAttribute("aria-describedby", s ?? ""), s === null && e.removeAttribute("aria-describedby");
 		}, s = e.getAttribute("aria-describedby"), c = n.trigger === "click", l = e.getAttribute("aria-expanded");
 		c && e.setAttribute("aria-expanded", "false");
 		let u = () => {
-			this.popover.isOpen || (_.get(e.ownerDocument)?.(), _.set(e.ownerDocument, o), i.hidden = !1, c && e.setAttribute("aria-expanded", "true"), e.setAttribute("aria-describedby", [s, i.id].filter(Boolean).join(" ")), this.popover.open({
+			this.popover.isOpen || (_.get(e.ownerDocument)?.(), _.set(e.ownerDocument, a), r.hidden = !1, c && e.setAttribute("aria-expanded", "true"), e.setAttribute("aria-describedby", [s, r.id].filter(Boolean).join(" ")), this.popover.open({
 				anchor: e,
-				content: i,
+				content: r,
 				restoreFocus: !1,
 				onClose: () => {
-					a(), i.hidden = !0, c && e.setAttribute("aria-expanded", "false"), s === null ? e.removeAttribute("aria-describedby") : e.setAttribute("aria-describedby", s);
+					i(), r.hidden = !0, c && e.setAttribute("aria-expanded", "false"), s === null ? e.removeAttribute("aria-describedby") : e.setAttribute("aria-describedby", s);
 				}
 			}));
-		}, d = () => this.popover.isOpen ? o() : u();
-		return c ? e.addEventListener("click", d) : (e.addEventListener("pointerenter", u), e.addEventListener("pointerleave", o), e.addEventListener("focus", u), e.addEventListener("blur", o)), this.release = () => {
-			o(), e.removeEventListener("click", d), c && (l === null ? e.removeAttribute("aria-expanded") : e.setAttribute("aria-expanded", l)), e.removeEventListener("pointerenter", u), e.removeEventListener("pointerleave", o), e.removeEventListener("focus", u), e.removeEventListener("blur", o), r(i);
+		}, d = () => this.popover.isOpen ? a() : u();
+		return c ? e.addEventListener("click", d) : (e.addEventListener("pointerenter", u), e.addEventListener("pointerleave", a), e.addEventListener("focus", u), e.addEventListener("blur", a)), this.release = () => {
+			a(), e.removeEventListener("click", d), c && (l === null ? e.removeAttribute("aria-expanded") : e.setAttribute("aria-expanded", l)), e.removeEventListener("pointerenter", u), e.removeEventListener("pointerleave", a), e.removeEventListener("focus", u), e.removeEventListener("blur", a), o(r);
 		}, () => this.destroy();
 	}
 	destroy() {

package/svelte/UiComponent.server.js

@@ -8,8 +8,6 @@ import {
 	withFrameworkContent
 } from '../framework.js';
 
-import { controlAttributes } from '../control-attributes.js';
-
 export default function UiComponent($$renderer, $$props) {
 	$$renderer.component(($$renderer) => {
 		let {
@@ -47,52 +45,7 @@ export default function UiComponent($$renderer, $$props) {
 			};
 		}
 
-		function nativeChange(event) {
-			props.onChange?.(event);
-
-			if (event.defaultPrevented) return;
-
-			const value = event.currentTarget.value;
-
-			props.onValueChange?.(value);
-			onValueChange?.(value);
-		}
-
-		let selectProps = $.derived(() => {
-			const { onChange, onValueChange, ...rest } = props;
-
-			return controlAttributes('select', rest);
-		});
-
-		$$renderer.push(`<span style="display: contents"${$.attr('data-rv-svelte-host', component)}></span> `);
-
-		if (component === 'NativeSelect') {
-			$$renderer.push('<!--[0-->');
-
-			$$renderer.select(
-				{ ...selectProps(), onchange: nativeChange },
-				($$renderer) => {
-					if (children) {
-						$$renderer.push('<!--[0-->');
-						children($$renderer, {});
-						$$renderer.push(`<!---->`);
-					} else {
-						$$renderer.push('<!--[-1-->');
-					}
-
-					$$renderer.push(`<!--]-->`);
-				},
-				void 0,
-				void 0,
-				void 0,
-				void 0,
-				true
-			);
-		} else {
-			$$renderer.push('<!--[-1-->');
-		}
-
-		$$renderer.push(`<!--]--> <!--[-->`);
+		$$renderer.push(`<span style="display: contents"${$.attr('data-rv-svelte-host', component)}></span> <!--[-->`);
 
 		const each_array = $.ensure_array_like(targets);
 

package/svelte/UiComponent.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { onMount, untrack, type Snippet } from 'svelte';
   import { uiComponents, componentModels, createFrameworkMount, withFrameworkContent, type UiContentTarget, type UiFrameworkMount } from '../framework';
-  import { controlAttributes } from '../control-attributes';
   import type { SvelteUiProps } from '../svelte-props';
 
   let { component, props = {}, children, slots = {}, onValueChange, onUiEvent }: SvelteUiProps = $props();
@@ -21,10 +20,6 @@
     const change = onValueChange;
     const event = onUiEvent;
     const renderer = mount;
-    if (name === 'NativeSelect') {
-      untrack(() => { renderer?.render(() => null, {}); });
-      return;
-    }
     const model = componentModels[name];
     const callbacks = new Set([...Object.keys(next).filter(key => /^on[A-Z]/.test(key)),
       'onClose', ...(model ? [model.callback] : [])]);
@@ -44,25 +39,9 @@
     target.appendChild(node);
     return { update(next: HTMLElement) { next.appendChild(node); } };
   }
-  function nativeChange(event: Event) {
-    props.onChange?.(event);
-    if (event.defaultPrevented) return;
-    const value = (event.currentTarget as HTMLSelectElement).value;
-    props.onValueChange?.(value);
-    onValueChange?.(value);
-  }
-  let selectProps = $derived.by(() => {
-    const { onChange, onValueChange, ...rest } = props;
-    return controlAttributes('select', rest);
-  });
 </script>
 
 <span bind:this={host} style="display: contents" data-rv-svelte-host={component}></span>
-{#if component === 'NativeSelect'}
-  <select {...selectProps} onchange={nativeChange}>
-    {#if children}{@render children({})}{/if}
-  </select>
-{/if}
 {#each targets as target (target.id)}
   <span use:portal={target.element} style="display: contents" data-rv-svelte-content>
     {@render target.content(target.scope)}

package/svelte.js

@@ -1,93 +1,58 @@
-import { controlAttributes as e } from "./control-attributes.js";
-import { i as t } from "./_chunks/component-YDcfoOLz.js";
-import { t as n } from "./_chunks/component-metadata-BENbgTjU.js";
-import { n as r, t as i } from "./_chunks/framework-mount-C-Zwm44H.js";
-import { uiComponents as a } from "./framework.js";
+import { i as e } from "./_chunks/component-C_T2VN5u.js";
+import { t } from "./_chunks/component-metadata-BMOOmqx5.js";
+import { n, t as r } from "./_chunks/framework-mount--RTLIqE-.js";
+import { uiComponents as i } from "./framework.js";
 import "svelte/internal/disclose-version";
-import * as o from "svelte/internal/client";
-import { onMount as s, untrack as c } from "svelte";
+import * as a from "svelte/internal/client";
+import { onMount as o, untrack as s } from "svelte";
 //#region src/svelte/UiComponent.svelte
-var l = o.from_html("<!>", 1), u = o.from_html("<select><!></select>"), d = o.from_html("<span style=\"display: contents\" data-rv-svelte-content=\"\"><!></span>"), f = o.from_html("<span style=\"display: contents\"></span> <!> <!>", 1);
-function p(t, p) {
-	o.push(p, !0);
-	let m = o.prop(p, "props", 19, () => ({})), h = o.prop(p, "slots", 19, () => ({})), g, _ = o.state([]), v = o.state(void 0);
-	s(() => {
-		let e = i(g, (e) => {
-			o.set(_, e);
+var c = a.from_html("<span style=\"display: contents\" data-rv-svelte-content=\"\"><!></span>"), l = a.from_html("<span style=\"display: contents\"></span> <!>", 1);
+function u(e, u) {
+	a.push(u, !0);
+	let d = a.prop(u, "props", 19, () => ({})), f = a.prop(u, "slots", 19, () => ({})), p, m = a.state([]), h = a.state(void 0);
+	o(() => {
+		let e = r(p, (e) => {
+			a.set(m, e);
 		});
-		return o.set(v, e), () => {
+		return a.set(h, e), () => {
 			e.destroy();
 		};
-	}), o.user_effect(() => {
-		let e = { ...m() }, t = p.component, i = {
-			...h(),
-			...p.children ? { default: p.children } : {}
-		}, s = p.onValueChange, l = p.onUiEvent, u = o.get(v);
-		if (t === "NativeSelect") {
-			c(() => {
-				u?.render(() => null, {});
-			});
-			return;
-		}
-		let d = n[t], f = /* @__PURE__ */ new Set([
+	}), a.user_effect(() => {
+		let e = { ...d() }, r = u.component, o = {
+			...f(),
+			...u.children ? { default: u.children } : {}
+		}, c = u.onValueChange, l = u.onUiEvent, p = a.get(h), m = t[r], g = /* @__PURE__ */ new Set([
 			...Object.keys(e).filter((e) => /^on[A-Z]/.test(e)),
 			"onClose",
-			...d ? [d.callback] : []
+			...m ? [m.callback] : []
 		]);
-		for (let t of f) {
+		for (let t of g) {
 			let n = e[t];
 			e[t] = (...e) => {
 				let r = n?.(...e);
-				return t === d?.callback && s?.(e[0]), l?.({
+				return t === m?.callback && c?.(e[0]), l?.({
 					name: t,
 					args: e
 				}), r;
 			};
 		}
-		c(() => u?.render(a[t], e, (e, n) => r(t, e, i, n)));
+		s(() => p?.render(i[r], e, (e, t) => n(r, e, o, t)));
 	});
-	function y(e, t) {
+	function g(e, t) {
 		return t.appendChild(e), { update(t) {
 			t.appendChild(e);
 		} };
 	}
-	function b(e) {
-		if (m().onChange?.(e), e.defaultPrevented) return;
-		let t = e.currentTarget.value;
-		m().onValueChange?.(t), p.onValueChange?.(t);
-	}
-	let x = o.derived(() => {
-		let { onChange: t, onValueChange: n, ...r } = m();
-		return e("select", r);
-	});
-	var S = f(), C = o.first_child(S);
-	o.bind_this(C, (e) => g = e, () => g);
-	var w = o.sibling(C, 2), T = (e) => {
-		var t = u();
-		o.attribute_effect(t, () => ({
-			...o.get(x),
-			onchange: b
-		})), o.customizable_select(t, () => {
-			var e = o.child(t), n = l(), r = o.first_child(n), i = (e) => {
-				var t = o.comment(), n = o.first_child(t);
-				o.snippet(n, () => p.children, () => ({})), o.append(e, t);
-			};
-			o.if(r, (e) => {
-				p.children && e(i);
-			}), o.append(e, n);
-		}), o.append(e, t);
-	};
-	o.if(w, (e) => {
-		p.component === "NativeSelect" && e(T);
-	});
-	var E = o.sibling(w, 2);
-	o.each(E, 17, () => o.get(_), (e) => e.id, (e, t) => {
-		var n = d(), r = o.child(n);
-		o.snippet(r, () => o.get(t).content, () => o.get(t).scope), o.reset(n), o.action(n, (e, t) => y?.(e, t), () => o.get(t).element), o.append(e, n);
-	}), o.template_effect(() => o.set_attribute(C, "data-rv-svelte-host", p.component)), o.append(t, S), o.pop();
+	var _ = l(), v = a.first_child(_);
+	a.bind_this(v, (e) => p = e, () => p);
+	var y = a.sibling(v, 2);
+	a.each(y, 17, () => a.get(m), (e) => e.id, (e, t) => {
+		var n = c(), r = a.child(n);
+		a.snippet(r, () => a.get(t).content, () => a.get(t).scope), a.reset(n), a.action(n, (e, t) => g?.(e, t), () => a.get(t).element), a.append(e, n);
+	}), a.template_effect(() => a.set_attribute(v, "data-rv-svelte-host", u.component)), a.append(e, _), a.pop();
 }
 //#endregion
 //#region src/svelte.ts
-var m = p;
+var d = u;
 //#endregion
-export { m as UiComponent, t as defaultPdfViewerText };
+export { d as UiComponent, e as defaultPdfViewerText };

package/time-grid.js

@@ -1,6 +1,6 @@
 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-C_yok8_-.js";
 //#region src/time-grid.tsx
 var i = (e, t) => `${e}:${t}`;
 function a(e) {

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-C_yok8_-.js";
+import { n as r } from "../_chunks/control-tooltip-uscKfAnV.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 };