@camstack/ui-library 1.1.23 → 1.1.24

package/dist/composites/cap-settings/TimelineControls.d.ts

@@ -12,11 +12,13 @@ interface TimelineControlsProps {
     readonly onViewChange: (w: DayWindow) => void;
 }
 /**
- * Date selector + zoom-in / zoom-out buttons for the recording timeline.
- * Zoom cycles through ZOOM_LEVELS (widest → narrowest), anchored on the view's
- * RIGHT edge — so on today's timeline "now" stays pinned to the right instead
- * of drifting to a midday range. Horizontal pan (wheel) then moves the window
- * back/forward in time. Pan is wired via wheel events in RecordingTimeline.
+ * Date selector + prev/next pan + zoom-in / zoom-out buttons for the recording
+ * timeline. Zoom cycles through ZOOM_LEVELS (widest → narrowest), anchored on
+ * the view's RIGHT edge — so on today's timeline "now" stays pinned to the right
+ * instead of drifting to a midday range. The ◀ / ▶ buttons step the visible
+ * window earlier/later within the day (the discoverable equivalent of the
+ * horizontal wheel-pan wired in RecordingTimeline), so a zoomed-in day can be
+ * navigated back and forth without a mouse wheel.
  */
 export declare function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange, }: TimelineControlsProps): import("react").JSX.Element;
 export {};

package/dist/index.cjs

@@ -34197,11 +34197,13 @@ function parseDateInput(value) {
 	return new Date(y, m - 1, d);
 }
 /**
-* Date selector + zoom-in / zoom-out buttons for the recording timeline.
-* Zoom cycles through ZOOM_LEVELS (widest → narrowest), anchored on the view's
-* RIGHT edge — so on today's timeline "now" stays pinned to the right instead
-* of drifting to a midday range. Horizontal pan (wheel) then moves the window
-* back/forward in time. Pan is wired via wheel events in RecordingTimeline.
+* Date selector + prev/next pan + zoom-in / zoom-out buttons for the recording
+* timeline. Zoom cycles through ZOOM_LEVELS (widest → narrowest), anchored on
+* the view's RIGHT edge — so on today's timeline "now" stays pinned to the right
+* instead of drifting to a midday range. The ◀ / ▶ buttons step the visible
+* window earlier/later within the day (the discoverable equivalent of the
+* horizontal wheel-pan wired in RecordingTimeline), so a zoomed-in day can be
+* navigated back and forth without a mouse wheel.
 */
 function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange }) {
 	const handleDateChange = (e) => {
@@ -34236,6 +34238,15 @@ function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange }) {
 	};
 	const canZoomIn = currentLevelIdx < ZOOM_LEVELS.length - 1;
 	const canZoomOut = currentLevelIdx > 0;
+	const panStepMs = Math.max(1, Math.round(viewSpan * .9));
+	const canPanPrev = view.fromMs > dayBounds.fromMs;
+	const canPanNext = view.toMs < dayBounds.toMs;
+	const handlePanPrev = () => {
+		onViewChange(panWindow(view, dayBounds, -panStepMs));
+	};
+	const handlePanNext = () => {
+		onViewChange(panWindow(view, dayBounds, panStepMs));
+	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: "flex items-center gap-2",
 		children: [
@@ -34249,23 +34260,48 @@ function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange }) {
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "ml-auto flex items-center gap-1",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: handleZoomOut,
-					disabled: !canZoomOut,
-					title: "Zoom out",
-					"aria-label": "Zoom out",
-					className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomOut, { size: 13 })
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
-					onClick: handleZoomIn,
-					disabled: !canZoomIn,
-					title: "Zoom in",
-					"aria-label": "Zoom in",
-					className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomIn, { size: 13 })
-				})]
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: handlePanPrev,
+						disabled: !canPanPrev,
+						title: "Earlier (pan back)",
+						"aria-label": "Pan earlier",
+						className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronLeft, { size: 14 })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: handlePanNext,
+						disabled: !canPanNext,
+						title: "Later (pan forward)",
+						"aria-label": "Pan later",
+						className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ChevronRight, { size: 14 })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "mx-0.5 h-3 w-px bg-border",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: handleZoomOut,
+						disabled: !canZoomOut,
+						title: "Zoom out",
+						"aria-label": "Zoom out",
+						className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomOut, { size: 13 })
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						onClick: handleZoomIn,
+						disabled: !canZoomIn,
+						title: "Zoom in",
+						"aria-label": "Zoom in",
+						className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ZoomIn, { size: 13 })
+					})
+				]
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 				className: "text-[9px] text-foreground-subtle",

package/dist/index.js

@@ -34173,11 +34173,13 @@ function parseDateInput(value) {
 	return new Date(y, m - 1, d);
 }
 /**
-* Date selector + zoom-in / zoom-out buttons for the recording timeline.
-* Zoom cycles through ZOOM_LEVELS (widest → narrowest), anchored on the view's
-* RIGHT edge — so on today's timeline "now" stays pinned to the right instead
-* of drifting to a midday range. Horizontal pan (wheel) then moves the window
-* back/forward in time. Pan is wired via wheel events in RecordingTimeline.
+* Date selector + prev/next pan + zoom-in / zoom-out buttons for the recording
+* timeline. Zoom cycles through ZOOM_LEVELS (widest → narrowest), anchored on
+* the view's RIGHT edge — so on today's timeline "now" stays pinned to the right
+* instead of drifting to a midday range. The ◀ / ▶ buttons step the visible
+* window earlier/later within the day (the discoverable equivalent of the
+* horizontal wheel-pan wired in RecordingTimeline), so a zoomed-in day can be
+* navigated back and forth without a mouse wheel.
 */
 function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange }) {
 	const handleDateChange = (e) => {
@@ -34212,6 +34214,15 @@ function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange }) {
 	};
 	const canZoomIn = currentLevelIdx < ZOOM_LEVELS.length - 1;
 	const canZoomOut = currentLevelIdx > 0;
+	const panStepMs = Math.max(1, Math.round(viewSpan * .9));
+	const canPanPrev = view.fromMs > dayBounds.fromMs;
+	const canPanNext = view.toMs < dayBounds.toMs;
+	const handlePanPrev = () => {
+		onViewChange(panWindow(view, dayBounds, -panStepMs));
+	};
+	const handlePanNext = () => {
+		onViewChange(panWindow(view, dayBounds, panStepMs));
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "flex items-center gap-2",
 		children: [
@@ -34225,23 +34236,48 @@ function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange }) {
 			}),
 			/* @__PURE__ */ jsxs("div", {
 				className: "ml-auto flex items-center gap-1",
-				children: [/* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: handleZoomOut,
-					disabled: !canZoomOut,
-					title: "Zoom out",
-					"aria-label": "Zoom out",
-					className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
-					children: /* @__PURE__ */ jsx(ZoomOut, { size: 13 })
-				}), /* @__PURE__ */ jsx("button", {
-					type: "button",
-					onClick: handleZoomIn,
-					disabled: !canZoomIn,
-					title: "Zoom in",
-					"aria-label": "Zoom in",
-					className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
-					children: /* @__PURE__ */ jsx(ZoomIn, { size: 13 })
-				})]
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: handlePanPrev,
+						disabled: !canPanPrev,
+						title: "Earlier (pan back)",
+						"aria-label": "Pan earlier",
+						className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ jsx(ChevronLeft, { size: 14 })
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: handlePanNext,
+						disabled: !canPanNext,
+						title: "Later (pan forward)",
+						"aria-label": "Pan later",
+						className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ jsx(ChevronRight, { size: 14 })
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "mx-0.5 h-3 w-px bg-border",
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: handleZoomOut,
+						disabled: !canZoomOut,
+						title: "Zoom out",
+						"aria-label": "Zoom out",
+						className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ jsx(ZoomOut, { size: 13 })
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: handleZoomIn,
+						disabled: !canZoomIn,
+						title: "Zoom in",
+						"aria-label": "Zoom in",
+						className: "rounded p-1 text-foreground-subtle transition-colors hover:bg-background/60 hover:text-foreground disabled:cursor-not-allowed disabled:opacity-40",
+						children: /* @__PURE__ */ jsx(ZoomIn, { size: 13 })
+					})
+				]
 			}),
 			/* @__PURE__ */ jsx("span", {
 				className: "text-[9px] text-foreground-subtle",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camstack/ui-library",
-  "version": "1.1.23",
+  "version": "1.1.24",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",