@zendir/ui 0.7.1 → 0.8.1

package/dist/react/astro/UnifiedTimeline.js

@@ -47,6 +47,44 @@ var Z = {
 	/** Floating tooltips — above all chart chrome */
 	tooltip: 1e3
 };
+/**
+* How long the playhead line takes to glide from one position to the next.
+*
+* Matched against a caller reporting position continuously (a running
+* playback clock): each glide is meant to finish about the time the next
+* position arrives, smoothing what would otherwise be a visible step.
+*/
+var PLAYHEAD_GLIDE_MS = 400;
+/**
+* How far the playhead can move between two renders and still be a step in
+* that continuous reporting rather than a deliberate jump — a reader
+* dragging the scrubber to a distant point, or clicking far ahead on the
+* track.
+*
+* Gliding a jump the same way a small step glides turns an instant move into
+* a slow animated slide across the whole timeline: each render arriving
+* before the previous glide finishes restarts it toward a target that is
+* itself only a little further along, so the line perpetually chases a
+* moving point rather than arriving. Held well above the largest step
+* continuous playback can produce and well below the smallest gap anyone
+* would call a jump.
+*/
+var PLAYHEAD_JUMP_THRESHOLD_MS = 6e4;
+/**
+* Whether the playhead's move to `now` (epoch ms) should snap rather than
+* glide, and remembers `now` for the next call.
+*
+* A ref rather than a WeakMap: one playhead per view instance, not one
+* shared across many chart handles, so there is nothing to key it by.
+*/
+function usePlayheadJump(now) {
+	const lastRef = useRef(null);
+	const isJump = now === null || lastRef.current === null || Math.abs(now - lastRef.current) > PLAYHEAD_JUMP_THRESHOLD_MS;
+	useEffect(() => {
+		lastRef.current = now;
+	}, [now]);
+	return isJump;
+}
 /** Filter key for events with no team accent (use with `TimelineFilter.teams`). */
 var TIMELINE_FILTER_TEAM_NONE = "__zendir_team_none__";
 /** Filter key for legacy accent color only (no structured `team.id`). */
@@ -77,6 +115,27 @@ function getTimelineTeamFilterKey(event) {
 	if (accent.id === void 0 || accent.id === "") return TIMELINE_FILTER_TEAM_LEGACY;
 	return String(accent.id);
 }
+/**
+* A timeline instant, written the way the view is labelled.
+*
+* Module level so every view formats a time the same way — the main component
+* memoises a bound version of this for its own axis, and the compact rows call
+* it directly rather than carrying a second copy of the rules.
+*/
+function formatTimelineTime(date, timeFormat, refTime) {
+	if (timeFormat === "relative") {
+		const totalSeconds = Math.floor(Math.abs(date.getTime() - refTime.getTime()) / 1e3);
+		const hours = Math.floor(totalSeconds / 3600);
+		const minutes = Math.floor(totalSeconds % 3600 / 60);
+		const seconds = totalSeconds % 60;
+		return hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m ${seconds}s`;
+	}
+	if (timeFormat === "utc") return date.toISOString().slice(11, 19) + " UTC";
+	return date.toLocaleTimeString([], {
+		hour: "2-digit",
+		minute: "2-digit"
+	});
+}
 var ALL_TIMELINE_STATUSES = [
 	"off",
 	"standby",
@@ -266,6 +325,89 @@ function TimelineStatusMarker({ status, fillColor, size = 12 }) {
 		});
 	}
 }
+/**
+* One event on a single line.
+*
+* The list view gives each event a card it can be expanded from, which is the
+* right shape for reading a handful closely and the wrong one for finding a
+* moment among hundreds — a three-hour exercise fills several screens before
+* it reaches the second minute. This is the other half of that: time, name and
+* owner on one row, so a long session can be scanned rather than scrolled.
+*
+* Marked rather than auto-scrolled. Scrolling the list under a reader who is
+* looking at something else is the more annoying failure of the two.
+*/
+var CompactEventRow = memo(function CompactEventRow({ event, current, onEventClick, timeFormat, refTime }) {
+	const { tokens } = useTheme();
+	const [hovered, setHovered] = useState(false);
+	const accent = getTimelineTeamAccent(event);
+	const clickable = Boolean(onEventClick);
+	return /* @__PURE__ */ jsxs("div", {
+		role: clickable ? "button" : void 0,
+		tabIndex: clickable ? 0 : void 0,
+		onClick: clickable ? () => onEventClick(event) : void 0,
+		onKeyDown: clickable ? (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				onEventClick(event);
+			}
+		} : void 0,
+		onMouseEnter: () => setHovered(true),
+		onMouseLeave: () => setHovered(false),
+		style: {
+			display: "flex",
+			alignItems: "baseline",
+			gap: "10px",
+			padding: "3px 8px",
+			borderRadius: tokens.borderRadius.sm,
+			cursor: clickable ? "pointer" : "default",
+			background: current ? `${tokens.colors.accent.primary}1f` : hovered ? tokens.colors.background.elevated : "transparent",
+			boxShadow: current ? `inset 2px 0 0 0 ${tokens.colors.accent.primary}` : void 0
+		},
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					flexShrink: 0,
+					fontFamily: tokens.typography.fontFamily.mono,
+					fontVariantNumeric: "tabular-nums",
+					fontSize: "0.6875rem",
+					color: tokens.colors.text.tertiary
+				},
+				children: formatTimelineTime(event.start, timeFormat, refTime)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				"aria-hidden": true,
+				style: {
+					flexShrink: 0,
+					width: "6px",
+					height: "6px",
+					borderRadius: "50%",
+					background: accent?.color ?? tokens.colors.status[event.status ?? "normal"]
+				}
+			}),
+			/* @__PURE__ */ jsx("span", {
+				style: {
+					flex: 1,
+					minWidth: 0,
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap",
+					fontSize: "0.75rem",
+					color: current ? tokens.colors.text.primary : tokens.colors.text.secondary
+				},
+				children: event.title
+			}),
+			event.track ? /* @__PURE__ */ jsx("span", {
+				style: {
+					flexShrink: 0,
+					fontSize: "0.6875rem",
+					color: tokens.colors.text.tertiary
+				},
+				children: event.track
+			}) : null
+		]
+	});
+});
 var EventListItem = memo(function EventListItem({ event, isLast, onEventClick }) {
 	const { tokens } = useTheme();
 	const [expanded, setExpanded] = useState(false);
@@ -629,6 +771,7 @@ var ChartView = memo(function ChartView({ events, tracks, start, end, trackHeigh
 	const currentPlayheadTime = playheadTime || /* @__PURE__ */ new Date();
 	const now = currentPlayheadTime.getTime();
 	const playheadPercent = showPlayhead && now >= start.getTime() && now <= end.getTime() ? (now - start.getTime()) / totalDuration * 100 : null;
+	const playheadIsJump = usePlayheadJump(playheadPercent === null ? null : now);
 	const lastAutoScrollRef = useRef(0);
 	useEffect(() => {
 		if (playheadPercent === null) return;
@@ -951,6 +1094,7 @@ var ChartView = memo(function ChartView({ events, tracks, start, end, trackHeigh
 							})]
 						}, track.id)),
 						playheadPercent !== null && /* @__PURE__ */ jsxs("div", {
+							"data-testid": "timeline-playhead",
 							style: {
 								position: "absolute",
 								top: 0,
@@ -961,7 +1105,7 @@ var ChartView = memo(function ChartView({ events, tracks, start, end, trackHeigh
 								boxShadow: `0 0 12px ${tokens.colors.accent.primary}`,
 								zIndex: Z.playhead,
 								pointerEvents: "none",
-								transition: "left 0.4s linear"
+								transition: playheadIsJump ? "none" : `left ${PLAYHEAD_GLIDE_MS}ms linear`
 							},
 							children: [/* @__PURE__ */ jsx("div", { style: {
 								position: "absolute",
@@ -1216,13 +1360,17 @@ var ChartView = memo(function ChartView({ events, tracks, start, end, trackHeigh
 		]
 	});
 });
-var ScatterView = memo(function ScatterView({ events, tracks, start, end, trackHeight, onEventClick, timeFormat = "relative", referenceTime, zoom = 1 }) {
+var ScatterView = memo(function ScatterView({ events, tracks, start, end, trackHeight, onEventClick, timeFormat = "relative", referenceTime, zoom = 1, showPlayhead = true, playheadTime }) {
 	const { tokens } = useTheme();
 	const [hoveredEvent, setHoveredEvent] = useState(null);
 	const [tooltipPosition, setTooltipPosition] = useState(null);
 	const totalDuration = end.getTime() - start.getTime();
 	const trackLabelWidth = 140;
 	const refTime = referenceTime || start;
+	const currentPlayheadTime = playheadTime || /* @__PURE__ */ new Date();
+	const now = currentPlayheadTime.getTime();
+	const playheadPercent = showPlayhead && now >= start.getTime() && now <= end.getTime() ? (now - start.getTime()) / totalDuration * 100 : null;
+	const playheadIsJump = usePlayheadJump(playheadPercent === null ? null : now);
 	const formatTimeLabel = useCallback((date) => {
 		if (timeFormat === "relative") {
 			const diff = date.getTime() - refTime.getTime();
@@ -1398,6 +1546,49 @@ var ScatterView = memo(function ScatterView({ events, tracks, start, end, trackH
 					})]
 				}, track.id))]
 			}),
+			playheadPercent !== null && /* @__PURE__ */ jsxs("div", {
+				"data-testid": "timeline-playhead",
+				style: {
+					position: "absolute",
+					top: 0,
+					bottom: 0,
+					left: `calc(${trackLabelWidth}px + (100% - ${trackLabelWidth}px) * ${playheadPercent} / 100)`,
+					width: 2,
+					backgroundColor: tokens.colors.accent.primary,
+					boxShadow: `0 0 12px ${tokens.colors.accent.primary}`,
+					zIndex: Z.playhead,
+					pointerEvents: "none",
+					transition: playheadIsJump ? "none" : `left ${PLAYHEAD_GLIDE_MS}ms linear`
+				},
+				children: [/* @__PURE__ */ jsx("div", { style: {
+					position: "absolute",
+					top: 22,
+					left: -5,
+					width: 12,
+					height: 12,
+					backgroundColor: tokens.colors.accent.primary,
+					borderRadius: 2,
+					transform: "rotate(45deg)",
+					boxShadow: `0 0 8px ${tokens.colors.accent.primary}`
+				} }), /* @__PURE__ */ jsx("div", {
+					style: {
+						position: "absolute",
+						top: 4,
+						left: "50%",
+						transform: "translateX(-50%)",
+						backgroundColor: tokens.colors.accent.primary,
+						color: tokens.colors.background.base,
+						fontSize: "0.5625rem",
+						fontWeight: 500,
+						fontFamily: tokens.typography.fontFamily.mono,
+						padding: "2px 6px",
+						borderRadius: 3,
+						whiteSpace: "nowrap",
+						boxShadow: "0 2px 8px rgba(0, 0, 0, 0.3)"
+					},
+					children: formatTimeLabel(currentPlayheadTime)
+				})]
+			}),
 			hoveredEventData && tooltipPosition && (() => {
 				const scatterTipColor = getStatusColor(hoveredEventData.status);
 				const scatterTeamTip = getTimelineTeamAccent(hoveredEventData);
@@ -1963,6 +2154,7 @@ var UnifiedTimeline = memo(function UnifiedTimeline({ title = "Timeline", events
 		return [...filteredEvents].sort((a, b) => b.start.getTime() - a.start.getTime());
 	}, [filteredEvents]);
 	const countLabel = !_showCount ? title : `${title} (${filteredEvents.length}${filteredEvents.length !== events.length ? ` / ${events.length}` : ""})`;
+	const showHeading = title !== null;
 	return /* @__PURE__ */ jsxs("div", {
 		className: classNames("zendir-unified-timeline", className),
 		style: {
@@ -1992,7 +2184,7 @@ var UnifiedTimeline = memo(function UnifiedTimeline({ title = "Timeline", events
 							alignItems: "center",
 							gap: tokens.spacing.sm
 						},
-						children: [/* @__PURE__ */ jsx("h3", {
+						children: [showHeading && /* @__PURE__ */ jsx("h3", {
 							style: {
 								margin: 0,
 								fontSize: "1rem",
@@ -2231,17 +2423,20 @@ var UnifiedTimeline = memo(function UnifiedTimeline({ title = "Timeline", events
 									children: [
 										"chart",
 										"list",
+										"compact",
 										"scatter"
 									].map((mode) => {
 										const isActive = viewMode === mode;
 										const icons = {
 											chart: "chart",
 											list: "list",
+											compact: "list",
 											scatter: "timeline"
 										};
 										const labels = {
 											chart: "Gantt Chart",
 											list: "List View",
+											compact: "Compact List",
 											scatter: "Scatter View"
 										};
 										return /* @__PURE__ */ jsx(Tooltip, {
@@ -2324,10 +2519,10 @@ var UnifiedTimeline = memo(function UnifiedTimeline({ title = "Timeline", events
 			}),
 			/* @__PURE__ */ jsx("div", {
 				style: {
-					padding: viewMode === "list" ? "16px 20px" : "16px",
+					padding: viewMode === "list" || viewMode === "compact" ? "16px 20px" : "16px",
 					maxHeight,
 					overflowY: maxHeight ? "auto" : void 0,
-					overflowX: viewMode !== "list" ? "auto" : void 0
+					overflowX: viewMode !== "list" && viewMode !== "compact" ? "auto" : void 0
 				},
 				children: events.length === 0 ? /* @__PURE__ */ jsxs("div", {
 					style: {
@@ -2390,6 +2585,12 @@ var UnifiedTimeline = memo(function UnifiedTimeline({ title = "Timeline", events
 					event,
 					isLast: index === sortedEvents.length - 1,
 					onEventClick
+				}, event.id)) : viewMode === "compact" ? sortedEvents.map((event) => /* @__PURE__ */ jsx(CompactEventRow, {
+					event,
+					current: referenceTime ? event.start <= referenceTime && (!event.end || event.end >= referenceTime) : false,
+					timeFormat,
+					refTime: referenceTime || start,
+					onEventClick
 				}, event.id)) : viewMode === "scatter" ? /* @__PURE__ */ jsx(ScatterView, {
 					events: filteredEvents,
 					tracks: effectiveTracksForViews,
@@ -2399,7 +2600,9 @@ var UnifiedTimeline = memo(function UnifiedTimeline({ title = "Timeline", events
 					onEventClick,
 					timeFormat,
 					referenceTime: referenceTime || start,
-					zoom
+					zoom,
+					showPlayhead,
+					playheadTime
 				}) : /* @__PURE__ */ jsx(ChartView, {
 					events: filteredEvents,
 					tracks: effectiveTracksForViews,
@@ -2425,6 +2628,6 @@ var UnifiedTimeline = memo(function UnifiedTimeline({ title = "Timeline", events
 	});
 });
 //#endregion
-export { TIMELINE_FILTER_TEAM_LEGACY, TIMELINE_FILTER_TEAM_NONE, UnifiedTimeline, UnifiedTimeline as default, getTimelineEventDisplayStatus, getTimelineTeamAccent, getTimelineTeamDisplayLabel, getTimelineTeamFilterKey, isTimelineFilterActive, matchesTimelineFilter };
+export { TIMELINE_FILTER_TEAM_LEGACY, TIMELINE_FILTER_TEAM_NONE, UnifiedTimeline, UnifiedTimeline as default, formatTimelineTime, getTimelineEventDisplayStatus, getTimelineTeamAccent, getTimelineTeamDisplayLabel, getTimelineTeamFilterKey, isTimelineFilterActive, matchesTimelineFilter };
 
 //# sourceMappingURL=UnifiedTimeline.js.map