@ixfx/components 0.2.4 → 0.2.6

package/dist/timeline-B62Sz6J_.js

@@ -0,0 +1,1748 @@
+import { n as safeCustomElement, t as __decorate } from "./decorate-O4m1U4l3.js";
+import { LitElement, css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import "@clinth/vcanvas";
+//#region src/timeline/timeline-draw.ts
+const NICE_STEPS = [
+	1,
+	2,
+	5,
+	10
+];
+/**
+* Dispatch to adaptive or fixed grid mode.
+*/
+const resolveGrid = (viewRange, userScale, viewportWidth, mode = `adaptive`, fixedMinorStep, ppu) => {
+	if (mode === `fixed` && fixedMinorStep !== void 0 && ppu !== void 0) return resolveFixedGrid(fixedMinorStep, ppu);
+	return resolveAdaptiveGrid(viewRange, userScale, viewportWidth);
+};
+/**
+* Compute a nice major/minor grid resolution for the current view.
+* Uses a 1-2-5-10 "nice number" algorithm.
+*/
+const resolveAdaptiveGrid = (viewRange, userScale, viewportWidth) => {
+	const span = viewRange.max - viewRange.min;
+	if (span <= 0 || viewportWidth <= 0) return {
+		majorStep: 100,
+		minorDivisions: 4,
+		minorStep: 25
+	};
+	const targetPx = 80 * scaleMultiplier(userScale);
+	const rawStep = span / Math.max(2, Math.floor(viewportWidth / targetPx));
+	const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));
+	let bestStep = magnitude;
+	for (const n of NICE_STEPS) {
+		const candidate = n * magnitude;
+		if (candidate >= rawStep * .8) {
+			bestStep = candidate;
+			break;
+		}
+	}
+	const normalised = bestStep / magnitude;
+	const minorDivisions = normalised === 5 || normalised === 10 ? 5 : 4;
+	const minorStep = bestStep / minorDivisions;
+	return {
+		majorStep: bestStep,
+		minorDivisions,
+		minorStep
+	};
+};
+/**
+* Fixed grid: user specifies a base minor step in logical units.
+* If the minor step at current zoom would produce lines < 5px apart,
+* double the effective step until they're >= 5px.
+* Major = 4× effective minor.
+*/
+const resolveFixedGrid = (baseMinorStep, ppu) => {
+	const MIN_PX_BETWEEN = 5;
+	let effectiveMinor = baseMinorStep;
+	while (effectiveMinor * ppu < MIN_PX_BETWEEN && effectiveMinor < 0xe8d4a51000) effectiveMinor *= 2;
+	const minorDivisions = 4;
+	return {
+		majorStep: effectiveMinor * minorDivisions,
+		minorDivisions,
+		minorStep: effectiveMinor
+	};
+};
+const scaleMultiplier = (scale) => {
+	switch (scale) {
+		case `x-wide`: return 2;
+		case `wide`: return 1.5;
+		case `normal`: return 1;
+		case `slim`: return .7;
+		case `x-slim`: return .5;
+		default: return 1;
+	}
+};
+const drawMajorMinorGrid = (ctx, region, resolution, altMajorBg, vars, ppu) => {
+	const { majorStep, minorStep } = resolution;
+	if (majorStep <= 0) return;
+	const regionEnd = region.x + region.width;
+	if (altMajorBg) {
+		ctx.fillStyle = vars[`--timeline-alt-major-bg`] ?? `rgba(255,255,255,0.03)`;
+		const firstMajor = Math.floor(region.x / majorStep);
+		for (let i = firstMajor; i * majorStep < regionEnd; i++) if (i % 2 !== 0) {
+			const x = i * majorStep * ppu;
+			ctx.fillRect(x, region.y, majorStep * ppu, region.height);
+		}
+	}
+	if (minorStep > 0) {
+		ctx.strokeStyle = vars[`--timeline-grid-minor-color`] ?? `rgba(255,255,255,0.05)`;
+		ctx.lineWidth = parseFloat(vars[`--timeline-grid-minor-width`] ?? `0.5`);
+		ctx.beginPath();
+		const firstMinor = Math.floor(region.x / minorStep) * minorStep;
+		for (let val = firstMinor; val < regionEnd; val += minorStep) {
+			if (Math.abs(val % majorStep) < minorStep * .01) continue;
+			const px = val * ppu;
+			ctx.moveTo(px, region.y);
+			ctx.lineTo(px, region.y + region.height);
+		}
+		ctx.stroke();
+	}
+	ctx.strokeStyle = vars[`--timeline-grid-major-color`] ?? `rgba(255,255,255,0.12)`;
+	ctx.lineWidth = parseFloat(vars[`--timeline-grid-major-width`] ?? `1`);
+	ctx.beginPath();
+	const firstMajor = Math.floor(region.x / majorStep) * majorStep;
+	for (let val = firstMajor; val < regionEnd; val += majorStep) {
+		const px = val * ppu;
+		ctx.moveTo(px, region.y);
+		ctx.lineTo(px, region.y + region.height);
+	}
+	ctx.stroke();
+};
+/**
+* Draw the axis header band. With 2D virtualization the axis is "sticky" —
+* it is always drawn at the current vertical scroll position (`scrollTop`)
+* so it appears fixed at the viewport top.
+*/
+const drawAxis = (ctx, region, resolution, axisHeight, formatLabel, vars, ppu, scrollTop = 0) => {
+	const { majorStep } = resolution;
+	if (majorStep <= 0 || axisHeight <= 0) return;
+	const axisTop = scrollTop;
+	const axisBottom = scrollTop + axisHeight;
+	if (region.y + region.height < axisTop || region.y > axisBottom) return;
+	const regionEnd = region.x + region.width;
+	const bgHeight = axisHeight - 6;
+	ctx.fillStyle = vars[`--timeline-bg`] ?? `#111`;
+	const bgLeft = region.x * ppu;
+	ctx.fillRect(bgLeft, axisTop, region.width * ppu, bgHeight);
+	ctx.strokeStyle = vars[`--timeline-grid-major-color`] ?? `rgba(255,255,255,0.12)`;
+	ctx.lineWidth = parseFloat(vars[`--timeline-grid-major-width`] ?? `1`);
+	ctx.beginPath();
+	const firstMajor = Math.ceil(region.x / majorStep) * majorStep;
+	for (let val = firstMajor; val < regionEnd; val += majorStep) {
+		const px = val * ppu;
+		ctx.moveTo(px, axisTop + bgHeight);
+		ctx.lineTo(px, axisBottom);
+	}
+	ctx.stroke();
+	ctx.strokeStyle = vars[`--timeline-grid-major-color`] ?? `rgba(255,255,255,0.12)`;
+	ctx.lineWidth = 1;
+	ctx.beginPath();
+	ctx.moveTo(bgLeft, axisBottom);
+	ctx.lineTo(bgLeft + region.width * ppu, axisBottom);
+	ctx.stroke();
+	ctx.fillStyle = vars[`--timeline-axis-label-color`] ?? `rgba(255,255,255,0.5)`;
+	ctx.font = `11px system-ui, sans-serif`;
+	ctx.textBaseline = `middle`;
+	ctx.textAlign = `left`;
+	const labelPadding = 4;
+	for (let val = firstMajor; val < regionEnd; val += majorStep) {
+		const px = val * ppu;
+		ctx.fillText(formatLabel(val), px + labelPadding, axisTop + bgHeight / 2);
+	}
+	ctx.textAlign = `start`;
+};
+const drawTrackBackgrounds = (ctx, region, trackLayout, tracks, vars, ppu) => {
+	const bgDefault = vars[`--timeline-track-bg`] ?? `#1a1a1a`;
+	const bgAlt = vars[`--timeline-track-bg-alt`] ?? `#1e1e1e`;
+	for (let i = 0; i < trackLayout.length; i++) {
+		const layout = trackLayout[i];
+		if (layout.y + layout.height < region.y) continue;
+		if (layout.y > region.y + region.height) break;
+		const track = tracks.find((t) => t.key === layout.trackKey);
+		ctx.fillStyle = track?.color ? track.color + `22` : i % 2 === 0 ? bgDefault : bgAlt;
+		ctx.fillRect(region.x * ppu, layout.y, region.width * ppu, layout.height);
+		ctx.strokeStyle = vars[`--timeline-grid-major-color`] ?? `rgba(255,255,255,0.12)`;
+		ctx.lineWidth = .5;
+		ctx.beginPath();
+		ctx.moveTo(region.x * ppu, layout.y + layout.height);
+		ctx.lineTo((region.x + region.width) * ppu, layout.y + layout.height);
+		ctx.stroke();
+	}
+};
+const drawEventRects = (ctx, region, events, trackLayout, selectedIds, tickledId, drag, vars, ppu) => {
+	const eventBg = vars[`--timeline-event-bg`] ?? `#3498db`;
+	const eventSelectedBg = vars[`--timeline-event-selected-bg`] ?? `#5dade2`;
+	const eventTickledBg = vars[`--timeline-event-tickled-bg`] ?? `#444`;
+	const eventLabelColor = vars[`--timeline-event-label-color`] ?? `#fff`;
+	const radius = parseFloat(vars[`--timeline-event-radius`] ?? `4`);
+	const regionEnd = region.x + region.width;
+	const padding = 3;
+	for (const evt of events) {
+		if (evt.end < region.x || evt.start > regionEnd) continue;
+		const layout = trackLayout.find((l) => l.trackKey === evt.trackKey);
+		if (!layout) continue;
+		if (layout.y + layout.height < region.y) continue;
+		if (layout.y > region.y + region.height) continue;
+		let isDragging = false;
+		if (drag.kind === `event-move` && drag.eventId === evt.id) isDragging = true;
+		else if (drag.kind === `event-start` && drag.eventId === evt.id) isDragging = true;
+		else if (drag.kind === `event-end` && drag.eventId === evt.id) isDragging = true;
+		const x = evt.start * ppu;
+		const w = (evt.end - evt.start) * ppu;
+		const y = layout.y + padding;
+		const h = layout.height - padding * 2;
+		if (w < 1) continue;
+		const isSelected = selectedIds.has(evt.id);
+		const isTickled = tickledId === evt.id;
+		let fill;
+		if (isSelected) fill = eventSelectedBg;
+		else if (isTickled) fill = eventTickledBg;
+		else fill = evt.color ?? eventBg;
+		ctx.fillStyle = fill;
+		ctx.beginPath();
+		drawRoundRect(ctx, x, y, w, h, Math.min(radius, w / 2, h / 2));
+		ctx.fill();
+		if (isDragging) {
+			ctx.strokeStyle = `#fff`;
+			ctx.lineWidth = 1.5;
+			ctx.beginPath();
+			drawRoundRect(ctx, x, y, w, h, Math.min(radius, w / 2, h / 2));
+			ctx.stroke();
+		}
+		if (isSelected && !isDragging) {
+			ctx.strokeStyle = eventSelectedBg;
+			ctx.lineWidth = 1;
+			ctx.beginPath();
+			drawRoundRect(ctx, x, y, w, h, Math.min(radius, w / 2, h / 2));
+			ctx.stroke();
+		}
+		if (w >= 40 && evt.label) {
+			ctx.fillStyle = eventLabelColor;
+			ctx.font = `11px system-ui, sans-serif`;
+			ctx.textBaseline = `middle`;
+			ctx.save();
+			ctx.beginPath();
+			ctx.rect(x + 4, y, w - 8, h);
+			ctx.clip();
+			ctx.fillText(evt.label, x + 6, y + h / 2);
+			ctx.restore();
+		}
+	}
+};
+const drawMarquee = (ctx, drag, ppu) => {
+	if (drag.kind !== `marquee`) return;
+	const x1 = Math.min(drag.startLogicalX, drag.currentLogicalX) * ppu;
+	const x2 = Math.max(drag.startLogicalX, drag.currentLogicalX) * ppu;
+	const y1 = Math.min(drag.startY, drag.currentY);
+	const y2 = Math.max(drag.startY, drag.currentY);
+	ctx.fillStyle = `rgba(100, 150, 255, 0.15)`;
+	ctx.fillRect(x1, y1, x2 - x1, y2 - y1);
+	ctx.strokeStyle = `rgba(100, 150, 255, 0.6)`;
+	ctx.lineWidth = 1;
+	ctx.strokeRect(x1, y1, x2 - x1, y2 - y1);
+};
+const drawRoundRect = (ctx, x, y, w, h, r) => {
+	r = Math.max(0, r);
+	ctx.moveTo(x + r, y);
+	ctx.arcTo(x + w, y, x + w, y + h, r);
+	ctx.arcTo(x + w, y + h, x, y + h, r);
+	ctx.arcTo(x, y + h, x, y, r);
+	ctx.arcTo(x, y, x + w, y, r);
+	ctx.closePath();
+};
+const TIMELINE_CSS_VARS = [
+	`--timeline-bg`,
+	`--timeline-track-bg`,
+	`--timeline-track-bg-alt`,
+	`--timeline-alt-major-bg`,
+	`--timeline-grid-major-color`,
+	`--timeline-grid-minor-color`,
+	`--timeline-grid-major-width`,
+	`--timeline-grid-minor-width`,
+	`--timeline-event-bg`,
+	`--timeline-event-selected-bg`,
+	`--timeline-event-tickled-bg`,
+	`--timeline-event-label-color`,
+	`--timeline-event-radius`,
+	`--timeline-axis-label-color`
+];
+const resolveCssVars = (host) => {
+	const computed = getComputedStyle(host);
+	const vars = {};
+	for (const v of TIMELINE_CSS_VARS) vars[v] = computed.getPropertyValue(v).trim();
+	return vars;
+};
+//#endregion
+//#region src/timeline/timeline-interactions.ts
+/** Hit zone near the edge of an event (px in screen space) */
+const EDGE_HIT_PX = 8;
+/**
+* Convert a vcanvas logical (pixel) coordinate to timeline logical units.
+* vcanvas pixel coordinates are in the 1:1 pixel space; divide by ppu then add min.
+*/
+const canvasToTimeline = (canvasX, ppu, min) => canvasX / ppu + min;
+/**
+* Convert screen-space pixel distance to timeline logical units.
+* Used for edge hit threshold: how many logical units does EDGE_HIT_PX correspond to.
+*/
+const pxToLogicalUnits = (ppu) => ppu > 0 ? 1 / ppu : 1;
+const hitTest = (logicalX, y, events, trackLayout, ppu) => {
+	const track = trackLayout.find((tl) => y >= tl.y && y < tl.y + tl.height);
+	if (!track) return {
+		kind: `empty`,
+		logicalX,
+		y,
+		trackKey: void 0
+	};
+	const edgeThreshold = EDGE_HIT_PX * pxToLogicalUnits(ppu);
+	const trackEvents = events.filter((e) => e.trackKey === track.trackKey);
+	for (const evt of trackEvents) {
+		if (logicalX < evt.start || logicalX > evt.end) continue;
+		if (logicalX <= evt.start + edgeThreshold) return {
+			kind: `event-start`,
+			eventId: evt.id
+		};
+		if (logicalX >= evt.end - edgeThreshold) return {
+			kind: `event-end`,
+			eventId: evt.id
+		};
+		return {
+			kind: `event-move`,
+			eventId: evt.id,
+			trackKey: track.trackKey,
+			offsetX: logicalX - evt.start
+		};
+	}
+	return {
+		kind: `empty`,
+		logicalX,
+		y,
+		trackKey: track.trackKey
+	};
+};
+const trackAtY = (y, trackLayout) => {
+	return trackLayout.find((tl) => y >= tl.y && y < tl.y + tl.height)?.trackKey;
+};
+/** Sensitivity: how many pixels of vertical drag = 1 e-fold of zoom */
+const ZOOM_SENSITIVITY_PX = 100;
+/**
+* Subtract a deadzone from a value.
+* Returns 0 if |value| <= deadzone, otherwise value shifted toward zero by deadzone.
+*/
+const applyDeadzone = (value, deadzone) => Math.abs(value) > deadzone ? value - Math.sign(value) * deadzone : 0;
+/**
+* Compute new ppu + viewMin from an axis-zoom drag.
+* Vertical delta (dy) controls zoom (up = zoom in, down = zoom out), anchored at `anchorUnit`.
+* Horizontal delta (dx) controls pan.
+*
+* Returns { ppu, viewMin } — the caller uses host.setZoomPan() to apply.
+*/
+const computeAxisZoom = (startViewMin, startPpu, anchorUnit, dx, dy) => {
+	const newPpu = startPpu * Math.exp(-dy / ZOOM_SENSITIVITY_PX);
+	let newMin = anchorUnit - (anchorUnit - startViewMin) * startPpu / newPpu;
+	if (newPpu > 0) newMin += -dx / newPpu;
+	return {
+		ppu: newPpu,
+		viewMin: newMin
+	};
+};
+/**
+* Compute new vertical view range from a v-axis-zoom drag.
+* Horizontal delta (dx) controls zoom (right = zoom in, left = zoom out),
+* anchored at `anchorBaseY` (a position in base-height units).
+* Vertical delta (dy) controls pan (drag down = scroll down through tracks).
+*
+* Returns { vMin, vMax } — the caller uses host.setVerticalZoomPan() to apply.
+*/
+const computeVerticalAxisZoom = (startVMin, startVMax, startVScale, anchorBaseY, dx, dy) => {
+	const startSpan = startVMax - startVMin;
+	const newSpan = startSpan * Math.exp(-dx / ZOOM_SENSITIVITY_PX);
+	let newMin = anchorBaseY - (startSpan > 0 ? (anchorBaseY - startVMin) / startSpan : .5) * newSpan;
+	if (startVScale > 0) newMin += dy / startVScale;
+	return {
+		vMin: newMin,
+		vMax: newMin + newSpan
+	};
+};
+/**
+* Attaches pointer and keyboard interaction handlers to the timeline.
+* Returns a cleanup function.
+*/
+const attachTimelineInteractions = (host, vcanvasEl) => {
+	const ac = new AbortController();
+	const signal = ac.signal;
+	vcanvasEl.addEventListener(`pointerdown`, (e) => {
+		const ppu = host.pxPerUnit;
+		const canvasCoord = vcanvasEl.convertFromViewportToCanvas(e.offsetX, e.offsetY);
+		const lx = canvasToTimeline(canvasCoord.x, ppu, host.min);
+		const ly = canvasCoord.y;
+		const axisTop = vcanvasEl.logicalScrollTop;
+		if (ly >= axisTop && ly < axisTop + host.axisHeight) {
+			vcanvasEl.setPointerCapture(e.pointerId);
+			host._drag = {
+				kind: `axis-zoom`,
+				anchorUnit: lx,
+				startScreenX: e.screenX,
+				startScreenY: e.screenY,
+				startViewMin: host._viewRange.min,
+				startPpu: ppu
+			};
+			return;
+		}
+		const hit = hitTest(lx, ly, host._internalEvents, host._trackLayout, ppu);
+		if (e.shiftKey && hit.kind === `event-move`) {
+			toggleSelection(host, hit.eventId);
+			return;
+		}
+		if (hit.kind === `event-move`) {
+			vcanvasEl.setPointerCapture(e.pointerId);
+			host._drag = {
+				kind: `event-move`,
+				eventId: hit.eventId,
+				originTrackKey: hit.trackKey,
+				offsetX: hit.offsetX
+			};
+			return;
+		}
+		if (hit.kind === `event-start`) {
+			vcanvasEl.setPointerCapture(e.pointerId);
+			host._drag = {
+				kind: `event-start`,
+				eventId: hit.eventId
+			};
+			return;
+		}
+		if (hit.kind === `event-end`) {
+			vcanvasEl.setPointerCapture(e.pointerId);
+			host._drag = {
+				kind: `event-end`,
+				eventId: hit.eventId
+			};
+			return;
+		}
+		if (hit.kind === `empty`) {
+			vcanvasEl.setPointerCapture(e.pointerId);
+			host._drag = {
+				kind: `marquee`,
+				startLogicalX: lx,
+				startY: ly,
+				currentLogicalX: lx,
+				currentY: ly
+			};
+			return;
+		}
+	}, { signal });
+	vcanvasEl.addEventListener(`pointermove`, (e) => {
+		const drag = host._drag;
+		if (drag.kind === `none`) {
+			handleHover(host, vcanvasEl, e);
+			return;
+		}
+		const ppu = host.pxPerUnit;
+		const canvasCoord = vcanvasEl.convertFromViewportToCanvas(e.offsetX, e.offsetY);
+		const lx = canvasToTimeline(canvasCoord.x, ppu, host.min);
+		const ly = canvasCoord.y;
+		if (drag.kind === `axis-zoom`) {
+			const rawDx = e.screenX - drag.startScreenX;
+			const rawDy = e.screenY - drag.startScreenY;
+			if (Math.abs(rawDx) + Math.abs(rawDy) < 5) return;
+			const dx = applyDeadzone(rawDx, 4);
+			const dy = applyDeadzone(rawDy, 4);
+			const result = computeAxisZoom(drag.startViewMin, drag.startPpu, drag.anchorUnit, dx, dy);
+			host.setZoomPan(result.viewMin, result.ppu);
+			return;
+		}
+		if (drag.kind === `marquee`) {
+			host._drag = {
+				...drag,
+				currentLogicalX: lx,
+				currentY: ly
+			};
+			vcanvasEl.invalidateAll();
+			return;
+		}
+		if (drag.kind === `event-move`) {
+			const evt = host._internalEvents.find((ev) => ev.id === drag.eventId);
+			if (!evt) return;
+			const duration = evt.end - evt.start;
+			const rawLx = lx;
+			const rawLy = ly;
+			const newStart = lx - drag.offsetX;
+			const newEnd = newStart + duration;
+			const newTrackKey = trackAtY(ly, host._trackLayout) ?? evt.trackKey;
+			const ppu = host.pxPerUnit;
+			const grid = resolveGrid(host._viewRange, host.userScale, vcanvasEl.viewportWidth, host.gridMode, host.minorStep, ppu);
+			const snapped = host.processDrag(drag.eventId, rawLx, rawLy, newStart, newEnd, newTrackKey, drag.originTrackKey, grid);
+			host._internalEvents = host._internalEvents.map((ev) => ev.id === drag.eventId ? {
+				...ev,
+				start: snapped.start,
+				end: snapped.end,
+				trackKey: snapped.trackKey
+			} : ev);
+			vcanvasEl.invalidateAll();
+			return;
+		}
+		if (drag.kind === `event-start`) {
+			const evt = host._internalEvents.find((ev) => ev.id === drag.eventId);
+			if (!evt) return;
+			const newStart = Math.min(lx, evt.end - 1);
+			host._internalEvents = host._internalEvents.map((ev) => ev.id === drag.eventId ? {
+				...ev,
+				start: newStart
+			} : ev);
+			vcanvasEl.invalidateAll();
+			return;
+		}
+		if (drag.kind === `event-end`) {
+			const evt = host._internalEvents.find((ev) => ev.id === drag.eventId);
+			if (!evt) return;
+			const newEnd = Math.max(lx, evt.start + 1);
+			host._internalEvents = host._internalEvents.map((ev) => ev.id === drag.eventId ? {
+				...ev,
+				end: newEnd
+			} : ev);
+			vcanvasEl.invalidateAll();
+			return;
+		}
+	}, { signal });
+	vcanvasEl.addEventListener(`pointerup`, (e) => {
+		const drag = host._drag;
+		vcanvasEl.releasePointerCapture(e.pointerId);
+		if (drag.kind === `axis-zoom`) {
+			host._drag = { kind: `none` };
+			return;
+		}
+		if (drag.kind === `marquee`) {
+			const x1 = Math.min(drag.startLogicalX, drag.currentLogicalX);
+			const x2 = Math.max(drag.startLogicalX, drag.currentLogicalX);
+			const y1 = Math.min(drag.startY, drag.currentY);
+			const y2 = Math.max(drag.startY, drag.currentY);
+			if (Math.abs(x2 - x1) < 2 && Math.abs(y2 - y1) < 2) {
+				host._selectedIds = /* @__PURE__ */ new Set();
+				fireSelectionChange(host);
+			} else {
+				const selected = /* @__PURE__ */ new Set();
+				for (const evt of host._internalEvents) {
+					const layout = host._trackLayout.find((l) => l.trackKey === evt.trackKey);
+					if (!layout) continue;
+					const evtTop = layout.y + 3;
+					const evtBottom = layout.y + layout.height - 3;
+					if (evt.end >= x1 && evt.start <= x2 && evtBottom >= y1 && evtTop <= y2) selected.add(evt.id);
+				}
+				host._selectedIds = selected;
+				fireSelectionChange(host);
+			}
+			host._drag = { kind: `none` };
+			vcanvasEl.invalidateAll();
+			return;
+		}
+		if (drag.kind === `event-move`) {
+			const evt = host._internalEvents.find((ev) => ev.id === drag.eventId);
+			if (evt) host.dispatchEvent(new CustomEvent(`event-move`, {
+				detail: {
+					eventId: evt.id,
+					fromTrackKey: drag.originTrackKey,
+					toTrackKey: evt.trackKey,
+					start: evt.start,
+					end: evt.end
+				},
+				bubbles: true,
+				composed: true
+			}));
+			host._drag = { kind: `none` };
+			return;
+		}
+		if (drag.kind === `event-start` || drag.kind === `event-end`) {
+			const evt = host._internalEvents.find((ev) => ev.id === drag.eventId);
+			if (evt) host.dispatchEvent(new CustomEvent(`event-resize`, {
+				detail: {
+					eventId: evt.id,
+					start: evt.start,
+					end: evt.end
+				},
+				bubbles: true,
+				composed: true
+			}));
+			host._drag = { kind: `none` };
+			return;
+		}
+		host._drag = { kind: `none` };
+	}, { signal });
+	vcanvasEl.addEventListener(`pointerleave`, () => {
+		if (host._tickledId !== void 0) {
+			host._tickledId = void 0;
+			vcanvasEl.invalidateAll();
+		}
+	}, { signal });
+	return () => ac.abort();
+};
+const handleHover = (host, vcanvasEl, e) => {
+	const ppu = host.pxPerUnit;
+	const canvasCoord = vcanvasEl.convertFromViewportToCanvas(e.offsetX, e.offsetY);
+	const lx = canvasToTimeline(canvasCoord.x, ppu, host.min);
+	const ly = canvasCoord.y;
+	const axisTop = vcanvasEl.logicalScrollTop;
+	if (ly >= axisTop && ly < axisTop + host.axisHeight) {
+		vcanvasEl.style.cursor = `col-resize`;
+		if (host._tickledId !== void 0) {
+			host._tickledId = void 0;
+			vcanvasEl.invalidateAll();
+		}
+		return;
+	}
+	const hit = hitTest(lx, ly, host._internalEvents, host._trackLayout, ppu);
+	let newTickledId;
+	if (hit.kind === `event-move` || hit.kind === `event-start` || hit.kind === `event-end`) newTickledId = hit.eventId;
+	if (hit.kind === `event-start` || hit.kind === `event-end`) vcanvasEl.style.cursor = `ew-resize`;
+	else if (hit.kind === `event-move`) vcanvasEl.style.cursor = `grab`;
+	else vcanvasEl.style.cursor = `crosshair`;
+	if (newTickledId !== host._tickledId) {
+		host._tickledId = newTickledId;
+		vcanvasEl.invalidateAll();
+	}
+};
+const toggleSelection = (host, eventId) => {
+	const next = new Set(host._selectedIds);
+	if (next.has(eventId)) next.delete(eventId);
+	else next.add(eventId);
+	host._selectedIds = next;
+	fireSelectionChange(host);
+	host.getVCanvas()?.invalidateAll();
+};
+const fireSelectionChange = (host) => {
+	host.dispatchEvent(new CustomEvent(`selection-change`, {
+		detail: { selectedIds: [...host._selectedIds] },
+		bubbles: true,
+		composed: true
+	}));
+};
+//#endregion
+//#region src/timeline/timeline-styles.ts
+const timelineStyles = css`
+  :host {
+    /* Layout */
+    --timeline-axis-height: 24px;
+    --timeline-tab-width: 120px;
+
+    /* Backgrounds */
+    --timeline-bg: var(--content, #111);
+    --timeline-track-bg: var(--surface-2);
+    --timeline-track-bg-alt: var(--surface-3);
+    --timeline-alt-major-bg: color-mix(in oklch, var(--surface-3) 40%, transparent);
+    --timeline-meta-bg: var(--surface-2);
+
+    /* Grid */
+    --timeline-grid-major-color: var(--surface-5);
+    --timeline-grid-minor-color: var(--surface-4);
+    --timeline-grid-major-width: 1px;
+    --timeline-grid-minor-width: 0.5px;
+
+    /* Events */
+    --timeline-event-bg: var(--accent);
+    --timeline-event-selected-bg: color-mix(in oklch, var(--accent) 80%, white);
+    --timeline-event-tickled-bg: var(--surface-6);
+    --timeline-event-label-color: var(--accent-text);
+    --timeline-event-radius: var(--radius-s, 4px);
+
+    /* Tabs */
+    --timeline-tab-bg: var(--surface-3);
+    --timeline-tab-text: var(--surface-3-text);
+    --timeline-tab-selected-bg: var(--accent);
+
+    /* Axis */
+    --timeline-axis-label-color: var(--surface-muted-text);
+
+    /* Resizer */
+    --timeline-resizer-color: var(--surface-5);
+
+    display: grid;
+    grid-template-rows: 1fr auto auto auto;
+    background: var(--timeline-bg);
+    overflow: hidden;
+    position: relative;
+  }
+
+  /* ── Content wrapper ───────────────────────────────────────────────── */
+
+  .content-wrapper {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  /* ── Vertical zoom (right sidebar) ─────────────────────────────────── */
+
+  .v-zoom {
+    padding: 6px 4px;
+    padding-top: var(--timeline-axis-height);
+    display: flex;
+    align-items: stretch;
+    width: 30px;
+    box-sizing: content-box;
+  }
+
+  .v-zoom ixfx-range-multi {
+    height: 100%;
+    width: 100%;
+  }
+
+  /* ── Content area ──────────────────────────────────────────────────── */
+
+  .content-area {
+    position: relative;
+    display: grid;
+    grid-template-columns: var(--timeline-tab-width) 1fr;
+    overflow: hidden;
+    min-height: 0;
+  }
+
+  /* ── Tab column (sits beside vcanvas) ────────────────────────────── */
+
+  .tab-column {
+    position: relative;
+    overflow: hidden;
+    z-index: 2;
+  }
+
+  .tab-column ixfx-timeline-track-tab {
+    position: absolute;
+    left: 0;
+    width: 100%;
+    box-sizing: border-box;
+    pointer-events: auto;
+  }
+
+  /* ── Vertical axis interaction zone ─────────────────────────────────── */
+
+  .v-axis-zone {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--timeline-tab-width);
+    height: 100%;
+    cursor: ns-resize;
+    z-index: 3;
+  }
+
+  /* ── VCanvas ───────────────────────────────────────────────────────── */
+
+  .content-area x-vcanvas {
+    width: 100%;
+    height: 100%;
+    display: block;
+    --scrollbar-width: none;
+  }
+
+  /* ── Horizontal zoom ───────────────────────────────────────────────── */
+
+  .h-zoom {
+    padding: 4px 8px;
+    padding-left: var(--timeline-tab-width);
+    padding-right: 38px; /* align with v-zoom column (30px + 2×4px padding) */
+  }
+
+  .h-zoom ixfx-range-multi {
+    width: 100%;
+  }
+
+  /* ── Meta area ─────────────────────────────────────────────────────── */
+
+  .meta-resizer {
+    display: none;
+    height: 6px;
+    cursor: ns-resize;
+    background: var(--timeline-resizer-color);
+  }
+
+  .meta-resizer.visible {
+    display: block;
+  }
+
+  .meta-area {
+    display: none;
+    background: var(--timeline-meta-bg);
+    overflow: hidden;
+  }
+
+  .meta-area.visible {
+    display: block;
+  }
+`;
+//#endregion
+//#region src/timeline/timeline-track-tabs.ts
+/** Minimum track height in px */
+const MIN_TRACK_HEIGHT = 24;
+/** How close to the bottom edge the pointer must be (px) to trigger resize */
+const EDGE_ZONE_PX = 6;
+let TimelineTrackTabElement = class TimelineTrackTabElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = ``;
+		this.trackKey = ``;
+		this.selected = false;
+		this.reorderable = false;
+		this.resizable = false;
+		this.#dragging = false;
+		this.#startScreenY = 0;
+		this.#startHeight = 0;
+		this.#pointerId = void 0;
+		this.#onPointerMove = (e) => {
+			if (this.#dragging) {
+				const dy = e.screenY - this.#startScreenY;
+				const newHeight = Math.max(MIN_TRACK_HEIGHT, this.#startHeight + dy);
+				this.#fireResizeEvent(`track-resize-move`, newHeight);
+				return;
+			}
+			if (this.#isInResizeZone(e)) this.style.cursor = `ns-resize`;
+			else this.style.cursor = ``;
+		};
+		this.#onPointerDown = (e) => {
+			if (!this.#isInResizeZone(e)) return;
+			e.stopPropagation();
+			e.preventDefault();
+			this.#dragging = true;
+			this.#startScreenY = e.screenY;
+			this.#startHeight = this.offsetHeight;
+			this.#pointerId = e.pointerId;
+			this.setPointerCapture(e.pointerId);
+		};
+		this.#onPointerUp = (e) => {
+			if (!this.#dragging) return;
+			const dy = e.screenY - this.#startScreenY;
+			const finalHeight = Math.max(MIN_TRACK_HEIGHT, this.#startHeight + dy);
+			this.#fireResizeEvent(`track-resize`, finalHeight);
+			this.#resetDrag(e.pointerId);
+		};
+		this.#onPointerCancel = (_e) => {
+			if (!this.#dragging) return;
+			this.#resetDrag(this.#pointerId);
+		};
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: flex;
+      align-items: center;
+      background: color-mix(in oklch, var(--timeline-tab-bg, #2a2a2a) 70%, transparent);
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+      color: var(--timeline-tab-text, #ccc);
+      font-size: 0.75rem;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: pointer;
+      user-select: none;
+      border-bottom: 1px solid var(--timeline-grid-major-color, rgba(255,255,255,0.12));
+      box-sizing: border-box;
+      position: relative;
+    }
+
+    :host([selected]) {
+      background: color-mix(in oklch, var(--timeline-tab-selected-bg, #3498db) 75%, transparent);
+      color: white;
+    }
+
+    .handle {
+      display: none;
+      cursor: grab;
+      padding: 0 4px;
+      opacity: 0.5;
+      font-size: 0.65rem;
+    }
+
+    :host([reorderable]) .handle {
+      display: block;
+    }
+
+    .label {
+      flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      padding: 0 8px;
+    }
+  `;
+	}
+	#dragging;
+	#startScreenY;
+	#startHeight;
+	#pointerId;
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener(`pointermove`, this.#onPointerMove);
+		this.addEventListener(`pointerdown`, this.#onPointerDown);
+		this.addEventListener(`pointerup`, this.#onPointerUp);
+		this.addEventListener(`pointercancel`, this.#onPointerCancel);
+		this.addEventListener(`lostpointercapture`, this.#onPointerCancel);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener(`pointermove`, this.#onPointerMove);
+		this.removeEventListener(`pointerdown`, this.#onPointerDown);
+		this.removeEventListener(`pointerup`, this.#onPointerUp);
+		this.removeEventListener(`pointercancel`, this.#onPointerCancel);
+		this.removeEventListener(`lostpointercapture`, this.#onPointerCancel);
+		this.#dragging = false;
+	}
+	render() {
+		return html`
+      <span class="handle">\u2630</span>
+      <span class="label">${this.label}</span>
+    `;
+	}
+	/** Is the pointer within the bottom edge zone? */
+	#isInResizeZone(e) {
+		if (!this.resizable) return false;
+		const rect = this.getBoundingClientRect();
+		return e.clientY >= rect.bottom - EDGE_ZONE_PX;
+	}
+	#fireResizeEvent(eventName, height) {
+		this.dispatchEvent(new CustomEvent(eventName, {
+			detail: {
+				trackKey: this.trackKey,
+				height
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	#onPointerMove;
+	#onPointerDown;
+	#onPointerUp;
+	#onPointerCancel;
+	#resetDrag(pointerId) {
+		this.#dragging = false;
+		this.#startScreenY = 0;
+		this.#startHeight = 0;
+		if (pointerId !== void 0) try {
+			this.releasePointerCapture(pointerId);
+		} catch {}
+		this.#pointerId = void 0;
+		this.style.cursor = ``;
+	}
+};
+__decorate([property({ type: String })], TimelineTrackTabElement.prototype, "label", void 0);
+__decorate([property({
+	type: String,
+	attribute: `track-key`
+})], TimelineTrackTabElement.prototype, "trackKey", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TimelineTrackTabElement.prototype, "selected", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TimelineTrackTabElement.prototype, "reorderable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], TimelineTrackTabElement.prototype, "resizable", void 0);
+TimelineTrackTabElement = __decorate([safeCustomElement(`ixfx-timeline-track-tab`)], TimelineTrackTabElement);
+//#endregion
+//#region src/timeline/timeline-element.ts
+/** Reasonable maximum ppu to prevent infinite zoom-in */
+const MAX_PPU = 1e4;
+/** Minimum rendered track height (~1.5em) at max zoom-out */
+const MIN_TRACK_RENDER_HEIGHT = 24;
+let IxfxTimelineElement = class IxfxTimelineElement extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.tracks = [];
+		this.events = [];
+		this.min = 0;
+		this.max = 1e3;
+		this.trackHeight = `fixed`;
+		this.userScale = `normal`;
+		this.reorderable = false;
+		this.metaEnabled = false;
+		this.altMajorBg = false;
+		this.defaultTrackHeight = 48;
+		this.gridMode = `adaptive`;
+		this.minorStep = 10;
+		this.onDragging = null;
+		this.formatLabel = String;
+		this._ppu = 1;
+		this._viewRange = {
+			min: 0,
+			max: 4e3
+		};
+		this._vViewRange = {
+			min: 0,
+			max: 1
+		};
+		this._vScale = 1;
+		this._selectedIds = /* @__PURE__ */ new Set();
+		this._tickledId = void 0;
+		this._drag = { kind: `none` };
+		this._metaHeight = 120;
+		this._trackHeightOverrides = /* @__PURE__ */ new Map();
+		this._trackLayout = [];
+		this._internalEvents = [];
+		this._internalTracks = [];
+		this.#vcanvas = null;
+		this.#cssVarsCache = {};
+		this.#cleanupInteractions = null;
+		this.#axisHeight = 24;
+		this.#prevTickledId = void 0;
+		this.#resizeObserver = null;
+		this.#pendingVerticalZoomToFit = false;
+		this.#hasInitializedZoom = false;
+		this.#onResize = (_entries) => {
+			if (!this.#hasInitializedZoom) {
+				this.#hasInitializedZoom = true;
+				this.#initZoomToFit();
+				this.#initVerticalZoomToFit();
+				this.#recomputeTrackLayout();
+			} else {
+				this._viewRange = this.#deriveViewRange(this._viewRange.min, this._ppu);
+				this.#deriveVerticalZoom(this._vViewRange.min, this._vViewRange.max);
+			}
+			this.#syncVCanvas();
+			this.#invalidateCanvas();
+		};
+		this.#drawCallback = (ctx, region, _signal) => {
+			const ppu = this._ppu;
+			const logicalRegion = {
+				x: region.x / ppu + this.min,
+				y: region.y,
+				width: region.width / ppu,
+				height: region.height
+			};
+			this.#cssVarsCache = resolveCssVars(this);
+			const grid = resolveGrid(this._viewRange, this.userScale, this.#getViewportWidth(), this.gridMode, this.minorStep, ppu);
+			const trackInfos = this._internalTracks.map((t) => ({
+				key: t.key,
+				color: t.color
+			}));
+			drawTrackBackgrounds(ctx, logicalRegion, this._trackLayout, trackInfos, this.#cssVarsCache, ppu);
+			drawMajorMinorGrid(ctx, logicalRegion, grid, this.altMajorBg, this.#cssVarsCache, ppu);
+			drawEventRects(ctx, logicalRegion, this._internalEvents, this._trackLayout, this._selectedIds, this._tickledId, this._drag, this.#cssVarsCache, ppu);
+			drawMarquee(ctx, this._drag, ppu);
+			const scrollTop = this.#vcanvas?.logicalScrollTop ?? 0;
+			drawAxis(ctx, logicalRegion, grid, this.#axisHeight, this.formatLabel, this.#cssVarsCache, ppu, scrollTop);
+		};
+		this.#onScrollVirtual = (e) => {
+			const detail = e.detail;
+			if (detail.userGesture === false) return;
+			const ppu = this._ppu;
+			if (ppu <= 0) return;
+			const viewMin = detail.logicalScrollLeft / ppu + this.min;
+			this._viewRange = this.#deriveViewRange(viewMin, ppu);
+			if (this._vScale > 0) {
+				const span = this._vViewRange.max - this._vViewRange.min;
+				const newVMin = detail.logicalScrollTop / this._vScale;
+				this.#deriveVerticalZoom(newVMin, newVMin + span);
+			}
+		};
+		this.#onHZoomInput = (e) => {
+			const detail = e.detail;
+			const span = detail.b - detail.a;
+			const vpWidth = this.#getViewportWidth();
+			if (span > 0) this._ppu = Math.max(this.#minPpu(), Math.min(vpWidth / span, MAX_PPU));
+			this._viewRange = this.#deriveViewRange(detail.a, this._ppu);
+			this.#syncVCanvas();
+		};
+		this.#onVZoomInput = (e) => {
+			const detail = e.detail;
+			this.#deriveVerticalZoom(detail.a, detail.b);
+		};
+		this.#onVAxisPointerDown = (e) => {
+			const zone = e.currentTarget;
+			zone.setPointerCapture(e.pointerId);
+			e.stopPropagation();
+			e.preventDefault();
+			const rect = zone.getBoundingClientRect();
+			const clickFrac = rect.height > 0 ? (e.clientY - rect.top) / rect.height : .5;
+			const span = this._vViewRange.max - this._vViewRange.min;
+			const anchorBaseY = this._vViewRange.min + clickFrac * span;
+			this._drag = {
+				kind: `v-axis-zoom`,
+				anchorBaseY,
+				startScreenX: e.screenX,
+				startScreenY: e.screenY,
+				startVMin: this._vViewRange.min,
+				startVMax: this._vViewRange.max,
+				startVScale: this._vScale
+			};
+		};
+		this.#onVAxisPointerMove = (e) => {
+			if (this._drag.kind !== `v-axis-zoom`) return;
+			const drag = this._drag;
+			const rawDx = e.screenX - drag.startScreenX;
+			const rawDy = e.screenY - drag.startScreenY;
+			if (Math.abs(rawDx) + Math.abs(rawDy) < 5) return;
+			const dx = applyDeadzone(rawDx, 4);
+			const dy = applyDeadzone(rawDy, 4);
+			const result = computeVerticalAxisZoom(drag.startVMin, drag.startVMax, drag.startVScale, drag.anchorBaseY, dx, dy);
+			this.setVerticalZoomPan(result.vMin, result.vMax);
+		};
+		this.#onVAxisPointerUp = (e) => {
+			if (this._drag.kind !== `v-axis-zoom`) return;
+			e.currentTarget.releasePointerCapture(e.pointerId);
+			this._drag = { kind: `none` };
+		};
+		this.#onTrackResizeMove = (e) => {
+			const { trackKey, height } = e.detail;
+			this.#applyTrackResize(trackKey, height);
+		};
+		this.#onTrackResizeEnd = (e) => {
+			const { trackKey, height } = e.detail;
+			this.#applyTrackResize(trackKey, height);
+			this.dispatchEvent(new CustomEvent(`track-resize`, {
+				detail: {
+					trackKey,
+					height
+				},
+				bubbles: true,
+				composed: true
+			}));
+		};
+	}
+	static {
+		this.styles = [timelineStyles];
+	}
+	#vcanvas;
+	#cssVarsCache;
+	#cleanupInteractions;
+	#axisHeight;
+	#prevTickledId;
+	#resizeObserver;
+	#pendingVerticalZoomToFit;
+	#hasInitializedZoom;
+	/** Pixels per logical unit — the zoom level */
+	get pxPerUnit() {
+		return this._ppu;
+	}
+	/** Height of the axis header band in pixels */
+	get axisHeight() {
+		return this.#axisHeight;
+	}
+	/** Width of the track tab area in pixels (from --timeline-tab-width CSS var) */
+	get tabWidth() {
+		return this.#tabWidth;
+	}
+	#getViewportWidth() {
+		return this.#vcanvas?.viewportWidth ?? this.#vcanvas?.clientWidth ?? 800;
+	}
+	/** Minimum ppu: fits the full total range into the viewport */
+	#minPpu() {
+		const totalSpan = this.max - this.min;
+		if (totalSpan <= 0) return 1;
+		return this.#getViewportWidth() / totalSpan;
+	}
+	/** Available vertical pixels for track content (excludes axis) */
+	#getViewportHeight() {
+		return this.#vcanvas?.viewportHeight ?? this.#vcanvas?.clientHeight ?? 300;
+	}
+	/**
+	* Total base height: sum of all visible track base heights (before vScale).
+	* This is the "total range" for the vertical slider.
+	*/
+	#getTotalBaseHeight() {
+		let total = 0;
+		for (const track of this._internalTracks) {
+			if (track.hidden) continue;
+			const override = this._trackHeightOverrides.get(track.key);
+			total += override ?? track.height ?? this.defaultTrackHeight;
+		}
+		return total || 1;
+	}
+	/** Smallest base height among visible tracks (before vScale) */
+	#getSmallestBaseTrackHeight() {
+		let smallest = Infinity;
+		for (const track of this._internalTracks) {
+			if (track.hidden) continue;
+			const h = this._trackHeightOverrides.get(track.key) ?? track.height ?? this.defaultTrackHeight;
+			if (h < smallest) smallest = h;
+		}
+		return smallest === Infinity ? this.defaultTrackHeight : smallest;
+	}
+	/** Largest base height among visible tracks (before vScale) */
+	#getLargestBaseTrackHeight() {
+		let largest = 0;
+		for (const track of this._internalTracks) {
+			if (track.hidden) continue;
+			const h = this._trackHeightOverrides.get(track.key) ?? track.height ?? this.defaultTrackHeight;
+			if (h > largest) largest = h;
+		}
+		return largest || this.defaultTrackHeight;
+	}
+	/**
+	* Derive vScale and vViewRange from a given vertical view range.
+	* viewportHeight / span = scale factor applied to base track heights.
+	* The axis header takes up fixed space, so available height for tracks is reduced.
+	*/
+	#deriveVerticalZoom(vMin, vMax) {
+		const totalBase = this.#getTotalBaseHeight();
+		const vpHeight = this.#getViewportHeight() - this.#axisHeight;
+		let a = vMin;
+		let b = vMax;
+		const largestBase = this.#getLargestBaseTrackHeight();
+		const minSpan = Math.max(largestBase, totalBase * .05);
+		const smallestBase = this.#getSmallestBaseTrackHeight();
+		const maxSpanFromMinHeight = vpHeight > 0 ? vpHeight * smallestBase / MIN_TRACK_RENDER_HEIGHT : totalBase;
+		const maxSpan = Math.min(totalBase, maxSpanFromMinHeight);
+		let span = b - a;
+		if (span < minSpan) {
+			const center = (a + b) / 2;
+			a = center - minSpan / 2;
+			b = center + minSpan / 2;
+			span = minSpan;
+		}
+		if (span > maxSpan) {
+			const center = (a + b) / 2;
+			a = center - maxSpan / 2;
+			b = center + maxSpan / 2;
+			span = maxSpan;
+		}
+		if (b > totalBase) {
+			b = totalBase;
+			a = Math.max(0, b - span);
+		}
+		if (a < 0) {
+			a = 0;
+			b = Math.min(totalBase, a + span);
+		}
+		this._vViewRange = {
+			min: a,
+			max: b
+		};
+		this._vScale = vpHeight > 0 ? vpHeight / (b - a) : 1;
+	}
+	/** Reset vertical zoom to fit all tracks */
+	#initVerticalZoomToFit() {
+		const totalBase = this.#getTotalBaseHeight();
+		this.#deriveVerticalZoom(0, totalBase);
+	}
+	/** Pixel offset to scroll the content area */
+	get #vScrollOffset() {
+		return this._vViewRange.min * this._vScale;
+	}
+	/**
+	* Derive viewRange from ppu + viewMin, clamped to [min, max].
+	* Returns a new ViewRange.
+	*/
+	#deriveViewRange(viewMin, ppu) {
+		const vpWidth = this.#getViewportWidth();
+		const viewSpan = ppu > 0 ? vpWidth / ppu : this.max - this.min;
+		let newMin = viewMin;
+		let newMax = newMin + viewSpan;
+		if (newMax > this.max) {
+			newMax = this.max;
+			newMin = Math.max(this.min, newMax - viewSpan);
+		}
+		if (newMin < this.min) {
+			newMin = this.min;
+			newMax = Math.min(this.max, newMin + viewSpan);
+		}
+		return {
+			min: newMin,
+			max: newMax
+		};
+	}
+	/** Set the zoom level (pixels per logical unit) */
+	setPpu(ppu) {
+		this._ppu = Math.max(this.#minPpu(), Math.min(ppu, MAX_PPU));
+		this._viewRange = this.#deriveViewRange(this._viewRange.min, this._ppu);
+	}
+	/**
+	* Set the view range. ppu is back-computed from the span.
+	* Use for programmatic view changes (e.g. TimelineController).
+	*/
+	setViewRange(range) {
+		const vpWidth = this.#getViewportWidth();
+		const span = range.max - range.min;
+		if (span > 0) this._ppu = Math.max(this.#minPpu(), Math.min(vpWidth / span, MAX_PPU));
+		this._viewRange = this.#deriveViewRange(range.min, this._ppu);
+	}
+	/**
+	* Set zoom + pan atomically. Used by axis-zoom interaction.
+	* viewMin is the left edge in timeline units; ppu is the new zoom level.
+	*/
+	setZoomPan(viewMin, ppu) {
+		this._ppu = Math.max(this.#minPpu(), Math.min(ppu, MAX_PPU));
+		this._viewRange = this.#deriveViewRange(viewMin, this._ppu);
+	}
+	/**
+	* Set vertical zoom + pan atomically. Used by v-axis-zoom interaction.
+	* vMin/vMax define the vertical view range in base-height units.
+	*/
+	setVerticalZoomPan(vMin, vMax) {
+		this.#deriveVerticalZoom(vMin, vMax);
+	}
+	selectAll() {
+		this._selectedIds = new Set(this._internalEvents.map((e) => e.id));
+		this.#fireSelectionChange();
+		this.#invalidateCanvas();
+	}
+	deselectAll() {
+		this._selectedIds = /* @__PURE__ */ new Set();
+		this.#fireSelectionChange();
+		this.#invalidateCanvas();
+	}
+	getTrackEvents(trackKey) {
+		return this._internalEvents.filter((e) => e.trackKey === trackKey);
+	}
+	get selectedIds() {
+		return [...this._selectedIds];
+	}
+	set selectedIds(ids) {
+		this._selectedIds = new Set(ids);
+		this.#fireSelectionChange();
+		this.#invalidateCanvas();
+	}
+	selectTrack(key, shiftKey = false) {
+		this.dispatchEvent(new CustomEvent(`track-select`, {
+			detail: {
+				trackKey: key,
+				shiftKey
+			},
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/** Resets all track height overrides to the default height and resets vertical zoom. */
+	resetTrackHeights() {
+		this._trackHeightOverrides = /* @__PURE__ */ new Map();
+		this.#pendingVerticalZoomToFit = true;
+	}
+	static {
+		this.defaultDragSnapping = () => ({});
+	}
+	static {
+		this.gridSnapping = (detail) => {
+			const { gridResolution, currentStart, currentEnd } = detail;
+			const { minorStep } = gridResolution;
+			return {
+				start: Math.round(currentStart / minorStep) * minorStep,
+				end: Math.round(currentEnd / minorStep) * minorStep
+			};
+		};
+	}
+	/**
+	* Called by timeline-interactions during drag.
+	* Applies onDragging callback if set, then fires 'dragging' event.
+	* Returns constrained values.
+	*/
+	processDrag(eventId, rawLogicalX, rawY, currentStart, currentEnd, currentTrackKey, originTrackKey, gridResolution) {
+		let constrainedStart = currentStart;
+		let constrainedEnd = currentEnd;
+		let constrainedTrackKey = currentTrackKey;
+		if (this.onDragging) {
+			const result = this.onDragging({
+				eventId,
+				rawLogicalX,
+				rawY,
+				currentStart,
+				currentEnd,
+				currentTrackKey,
+				gridResolution,
+				originTrackKey
+			});
+			constrainedStart = result.start ?? currentStart;
+			constrainedEnd = result.end ?? currentEnd;
+			constrainedTrackKey = result.trackKey ?? currentTrackKey;
+		}
+		this.dispatchEvent(new CustomEvent(`dragging`, {
+			detail: {
+				eventId,
+				start: constrainedStart,
+				end: constrainedEnd,
+				trackKey: constrainedTrackKey,
+				rawLogicalX,
+				rawY,
+				originTrackKey
+			},
+			bubbles: true,
+			composed: true
+		}));
+		return {
+			start: constrainedStart,
+			end: constrainedEnd,
+			trackKey: constrainedTrackKey
+		};
+	}
+	/** Returns the vcanvas element (for timeline-interactions) */
+	getVCanvas() {
+		return this.#vcanvas;
+	}
+	/** Returns the currently hovered (tickled) event, or null if none. */
+	get tickledEvent() {
+		if (this._tickledId === void 0) return null;
+		return this._internalEvents.find((e) => e.id === this._tickledId) ?? null;
+	}
+	firstUpdated() {
+		this.#vcanvas = this.shadowRoot?.querySelector(`x-vcanvas`);
+		if (this.#vcanvas) {
+			this.#vcanvas.drawCallback = this.#drawCallback;
+			this.#vcanvas.addEventListener(`scroll-virtual`, this.#onScrollVirtual);
+			this.#cleanupInteractions = attachTimelineInteractions(this, this.#vcanvas);
+			this.#resizeObserver = new ResizeObserver(this.#onResize);
+			this.#resizeObserver.observe(this.#vcanvas);
+		}
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.#cleanupInteractions?.();
+		this.#cleanupInteractions = null;
+		this.#resizeObserver?.disconnect();
+		this.#resizeObserver = null;
+	}
+	/**
+	* willUpdate runs before render — safe to set @state() properties here
+	* without triggering an additional update cycle. All state derivation
+	* (internal copies, track layout, vertical zoom) happens here.
+	*/
+	willUpdate(changedProps) {
+		let needsLayoutRecompute = false;
+		let needsVerticalZoomReset = false;
+		let needsHorizontalZoomToFit = false;
+		if (changedProps.has(`tracks`)) {
+			this._internalTracks = [...this.tracks];
+			needsLayoutRecompute = true;
+			needsVerticalZoomReset = true;
+		}
+		if (changedProps.has(`events`)) this._internalEvents = [...this.events];
+		if (changedProps.has(`trackHeight`)) {
+			if (this.trackHeight !== `free` && this._trackHeightOverrides.size > 0) this._trackHeightOverrides = /* @__PURE__ */ new Map();
+			needsLayoutRecompute = true;
+			needsVerticalZoomReset = true;
+		}
+		if (changedProps.has(`_vScale`) || changedProps.has(`defaultTrackHeight`) || changedProps.has(`_trackHeightOverrides`)) needsLayoutRecompute = true;
+		if (changedProps.has(`min`) || changedProps.has(`max`)) needsHorizontalZoomToFit = true;
+		if (this.#pendingVerticalZoomToFit) {
+			this.#pendingVerticalZoomToFit = false;
+			needsVerticalZoomReset = true;
+		}
+		if (needsHorizontalZoomToFit) this.#initZoomToFit();
+		if (needsVerticalZoomReset) this.#initVerticalZoomToFit();
+		if (needsLayoutRecompute) this.#recomputeTrackLayout();
+	}
+	/**
+	* updated runs after render — for DOM side-effects only (syncing vcanvas,
+	* scrolling, invalidating canvas, dispatching events).
+	*/
+	updated(changedProps) {
+		if (changedProps.has(`_ppu`) || changedProps.has(`_viewRange`) || changedProps.has(`min`) || changedProps.has(`max`)) {
+			this.#syncVCanvas();
+			this.#invalidateCanvas();
+		}
+		if (changedProps.has(`events`) || changedProps.has(`userScale`) || changedProps.has(`altMajorBg`) || changedProps.has(`gridMode`) || changedProps.has(`minorStep`)) this.#invalidateCanvas();
+		if (changedProps.has(`_trackLayout`)) {
+			this.#syncVCanvasVertical();
+			this.#positionTabs();
+			this.#invalidateCanvas();
+		}
+		if (changedProps.has(`_vViewRange`) || changedProps.has(`_vScale`)) {
+			this.#syncVerticalScroll();
+			this.#invalidateCanvas();
+		}
+		if (this._tickledId !== this.#prevTickledId) {
+			this.#prevTickledId = this._tickledId;
+			this.dispatchEvent(new CustomEvent(`tickle-change`, {
+				detail: { event: this.tickledEvent },
+				bubbles: true,
+				composed: true
+			}));
+		}
+	}
+	render() {
+		const totalBaseHeight = this.#getTotalBaseHeight();
+		return html`
+      <div class="content-wrapper">
+        <div class="content-area">
+          <div class="v-axis-zone"
+            @pointerdown=${this.#onVAxisPointerDown}
+            @pointermove=${this.#onVAxisPointerMove}
+            @pointerup=${this.#onVAxisPointerUp}
+            @pointercancel=${this.#onVAxisPointerUp}
+          ></div>
+          <div class="tab-column">
+            ${this._internalTracks.filter((t) => !t.hidden).map((t) => {
+			if (!this._trackLayout.find((l) => l.trackKey === t.key)) return nothing;
+			return html`
+                  <ixfx-timeline-track-tab
+                    .label=${t.label}
+                    track-key="${t.key}"
+                    ?resizable=${this.trackHeight !== `none`}
+                    ?reorderable=${this.reorderable}
+                    @click=${(e) => this.selectTrack(t.key, e.shiftKey)}
+                    @track-resize-move=${this.#onTrackResizeMove}
+                    @track-resize=${this.#onTrackResizeEnd}
+                  ></ixfx-timeline-track-tab>
+                `;
+		})}
+          </div>
+          <x-vcanvas></x-vcanvas>
+        </div>
+        <div class="v-zoom">
+          <ixfx-range-multi
+            orientation="vertical"
+            min="0"
+            max="${totalBaseHeight}"
+            a="${this._vViewRange.min}"
+            b="${this._vViewRange.max}"
+            step="any"
+            crossover="stop"
+            resize-mode="bipolar-flex"
+            @input=${this.#onVZoomInput}
+          ></ixfx-range-multi>
+        </div>
+      </div>
+
+      <div class="h-zoom">
+        <ixfx-range-multi
+          min="${this.min}"
+          max="${this.max}"
+          a="${this._viewRange.min}"
+          b="${this._viewRange.max}"
+          crossover="stop"
+          resize-mode="bipolar-flex"
+          @input=${this.#onHZoomInput}
+        ></ixfx-range-multi>
+      </div>
+
+      <div class="meta-resizer ${this.metaEnabled ? `visible` : ``}"></div>
+      <div class="meta-area ${this.metaEnabled ? `visible` : ``}" style="height:${this._metaHeight}px"></div>
+    `;
+	}
+	/** Compute initial ppu to fit 80% of the range, then derive viewRange */
+	#initZoomToFit() {
+		const vpWidth = this.#getViewportWidth();
+		const totalSpan = this.max - this.min;
+		const zoomFactor = .8;
+		this._ppu = totalSpan > 0 ? vpWidth / (totalSpan * zoomFactor) : 1;
+		this._viewRange = {
+			min: this.min,
+			max: this.min + totalSpan * zoomFactor
+		};
+		this.#syncVCanvas();
+	}
+	#syncVCanvas() {
+		if (!this.#vcanvas) return;
+		const totalSpan = this.max - this.min;
+		this.#vcanvas.logicalWidth = totalSpan * this._ppu;
+		this.#syncVCanvasVertical();
+		this.#syncVCanvasScroll();
+	}
+	/** Sync logicalHeight and logicalScrollTop to the vcanvas */
+	#syncVCanvasVertical() {
+		if (!this.#vcanvas) return;
+		const totalHeight = this._trackLayout.reduce((sum, tl) => sum + tl.height, 0);
+		const canvasHeight = Math.max(totalHeight, 40) + this.#axisHeight;
+		this.#vcanvas.logicalHeight = canvasHeight;
+		this.#vcanvas.logicalScrollTop = this.#vScrollOffset;
+	}
+	#syncVCanvasScroll() {
+		if (!this.#vcanvas) return;
+		this.#vcanvas.logicalScrollLeft = (this._viewRange.min - this.min) * this._ppu;
+	}
+	#invalidateCanvas() {
+		this.#vcanvas?.invalidateAll();
+	}
+	/** Called by ResizeObserver when vcanvas/content-area changes size */
+	#onResize;
+	#drawCallback;
+	#onScrollVirtual;
+	#recomputeTrackLayout() {
+		const layout = [];
+		let y = this.#axisHeight;
+		for (const track of this._internalTracks) {
+			if (track.hidden) continue;
+			const baseHeight = this._trackHeightOverrides.get(track.key) ?? track.height ?? this.defaultTrackHeight;
+			const height = Math.round(baseHeight * this._vScale);
+			layout.push({
+				trackKey: track.key,
+				y,
+				height
+			});
+			y += height;
+		}
+		this._trackLayout = layout;
+	}
+	/**
+	* Range slider handler.
+	* Slider controls zoom (via span) + pan (via position).
+	* Derive ppu from the span the slider produces.
+	*/
+	#onHZoomInput;
+	/**
+	* Vertical range slider handler.
+	* Slider controls vertical zoom (via span) + vertical pan (via position).
+	* Derive _vScale from the span the slider produces.
+	*/
+	#onVZoomInput;
+	#onVAxisPointerDown;
+	#onVAxisPointerMove;
+	#onVAxisPointerUp;
+	/** Sync vertical scroll position to vcanvas logicalScrollTop */
+	#syncVerticalScroll() {
+		this.#syncVCanvasVertical();
+		this.#positionTabs();
+	}
+	/**
+	* Position track tabs in the .tab-column via absolute CSS positioning.
+	* Applies a vertical translateY to offset for the current vertical scroll.
+	*/
+	#positionTabs() {
+		const tabColumn = this.shadowRoot?.querySelector(`.tab-column`);
+		if (!tabColumn) return;
+		const scrollTop = this.#vcanvas?.logicalScrollTop ?? 0;
+		tabColumn.style.transform = `translateY(${-scrollTop}px)`;
+		for (const layout of this._trackLayout) {
+			const tab = tabColumn.querySelector(`ixfx-timeline-track-tab[track-key="${layout.trackKey}"]`);
+			if (!tab) continue;
+			tab.style.top = `${layout.y}px`;
+			tab.style.height = `${layout.height}px`;
+		}
+	}
+	/** Read the tab width from the CSS custom property */
+	get #tabWidth() {
+		const raw = getComputedStyle(this).getPropertyValue(`--timeline-tab-width`).trim();
+		return Number.parseInt(raw, 10) || 120;
+	}
+	/** Live preview during drag — update heights but don't fire public event */
+	#onTrackResizeMove;
+	/** Final resize on pointerup — apply height and fire public event */
+	#onTrackResizeEnd;
+	/**
+	* Apply track height based on the current `trackHeight` mode.
+	* - `fixed`: sets `defaultTrackHeight` (all tracks change uniformly)
+	* - `free`: sets per-track override in `_trackHeightOverrides`
+	* - `none`: should never be called (resize is disabled)
+	*/
+	#applyTrackResize(trackKey, height) {
+		if (this.trackHeight === `fixed`) this.defaultTrackHeight = height;
+		else if (this.trackHeight === `free`) {
+			const next = new Map(this._trackHeightOverrides);
+			next.set(trackKey, height);
+			this._trackHeightOverrides = next;
+		}
+	}
+	#fireSelectionChange() {
+		this.dispatchEvent(new CustomEvent(`selection-change`, {
+			detail: { selectedIds: [...this._selectedIds] },
+			bubbles: true,
+			composed: true
+		}));
+	}
+};
+__decorate([property({ type: Array })], IxfxTimelineElement.prototype, "tracks", void 0);
+__decorate([property({ type: Array })], IxfxTimelineElement.prototype, "events", void 0);
+__decorate([property({ type: Number })], IxfxTimelineElement.prototype, "min", void 0);
+__decorate([property({ type: Number })], IxfxTimelineElement.prototype, "max", void 0);
+__decorate([property({
+	type: String,
+	attribute: `track-height`
+})], IxfxTimelineElement.prototype, "trackHeight", void 0);
+__decorate([property({
+	type: String,
+	attribute: `user-scale`
+})], IxfxTimelineElement.prototype, "userScale", void 0);
+__decorate([property({ type: Boolean })], IxfxTimelineElement.prototype, "reorderable", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `meta`
+})], IxfxTimelineElement.prototype, "metaEnabled", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: `alt-major-bg`
+})], IxfxTimelineElement.prototype, "altMajorBg", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `default-track-height`
+})], IxfxTimelineElement.prototype, "defaultTrackHeight", void 0);
+__decorate([property({
+	type: String,
+	attribute: `grid-mode`
+})], IxfxTimelineElement.prototype, "gridMode", void 0);
+__decorate([property({
+	type: Number,
+	attribute: `minor-step`
+})], IxfxTimelineElement.prototype, "minorStep", void 0);
+__decorate([property({ type: Object })], IxfxTimelineElement.prototype, "onDragging", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_ppu", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_viewRange", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_vViewRange", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_vScale", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_selectedIds", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_tickledId", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_drag", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_metaHeight", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_trackHeightOverrides", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_trackLayout", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_internalEvents", void 0);
+__decorate([state()], IxfxTimelineElement.prototype, "_internalTracks", void 0);
+IxfxTimelineElement = __decorate([safeCustomElement(`ixfx-timeline`)], IxfxTimelineElement);
+//#endregion
+//#region src/timeline/timeline-controller.ts
+/**
+* External adapter class that can configure a timeline element
+* with musical time, custom label formatting, etc.
+* 
+* The controller has no import of any timeline element type.
+* Users create a controller, pass it the component instance,
+* and the controller calls the component's public API.
+*/
+var TimelineController = class {
+	#host;
+	#config;
+	#bpm = 120;
+	#timeSignatureNumerator = 4;
+	#timeSignatureDenominator = 4;
+	constructor(timeline, config) {
+		this.#host = timeline;
+		this.#config = config;
+		timeline.min = config.logicalMin;
+		timeline.max = config.logicalMax;
+		if (config.labelFormatter) timeline.formatLabel = config.labelFormatter;
+		timeline.addEventListener(`track-select`, this.#onTrackSelect);
+	}
+	/** Update the tempo (BPM) for musical time calculations. */
+	setTempo(bpm) {
+		this.#bpm = bpm;
+		this.#updateFormatLabel();
+	}
+	/** Update the time signature for musical time calculations. */
+	setTimeSignature(numerator, denominator) {
+		this.#timeSignatureNumerator = numerator;
+		this.#timeSignatureDenominator = denominator;
+		this.#updateFormatLabel();
+	}
+	/** Set the visible view range on the timeline. */
+	setViewRange(range) {
+		this.#host.setViewRange(range);
+	}
+	/** Clean up any resources held by the controller. */
+	dispose() {
+		this.#host.removeEventListener(`track-select`, this.#onTrackSelect);
+	}
+	#onTrackSelect = (e) => {
+		const detail = e.detail;
+		const trackEventIds = this.#host.getTrackEvents(detail.trackKey).map((e) => e.id);
+		if (detail.shiftKey) {
+			const current = new Set(this.#host.selectedIds);
+			for (const id of trackEventIds) if (current.has(id)) current.delete(id);
+			else current.add(id);
+			this.#host.selectedIds = [...current];
+		} else this.#host.selectedIds = trackEventIds;
+	};
+	#updateFormatLabel() {
+		if (this.#config.labelFormatter) return;
+		this.#bpm;
+		const num = this.#timeSignatureNumerator;
+		this.#host.formatLabel = (v) => {
+			const beatsPerBar = num;
+			const totalBeats = v;
+			return `${Math.floor(totalBeats / beatsPerBar) + 1}.${Math.floor(totalBeats % beatsPerBar) + 1}`;
+		};
+	}
+};
+//#endregion
+export { attachTimelineInteractions as a, timelineStyles as i, IxfxTimelineElement as n, resolveCssVars as o, TimelineTrackTabElement as r, resolveGrid as s, TimelineController as t };
+
+//# sourceMappingURL=timeline-B62Sz6J_.js.map