@camstack/ui-library 1.1.14 → 1.1.15

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

@@ -13,9 +13,10 @@ interface TimelineControlsProps {
 }
 /**
  * Date selector + zoom-in / zoom-out buttons for the recording timeline.
- * Zoom cycles through ZOOM_LEVELS (widest → narrowest), centred on the
- * current view midpoint. Horizontal pan is wired via wheel events in
- * RecordingTimeline directly.
+ * 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.
  */
 export declare function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange, }: TimelineControlsProps): import("react").JSX.Element;
 export {};

package/dist/composites/cap-settings/recording-timeline-model.d.ts

@@ -58,10 +58,17 @@ export declare function dayWindow(date: Date, nowMs: number): DayWindow;
 /** Available zoom levels in ms, from widest (24h) to narrowest (15 min). */
 export declare const ZOOM_LEVELS: readonly number[];
 /**
- * Produce a `levelMs`-wide DayWindow centred on `centerMs`, clamped within
- * `dayBounds`. If `levelMs >= dayBounds span`, returns `dayBounds` unchanged.
+ * Produce a `levelMs`-wide window whose RIGHT edge stays anchored at
+ * `rightEdgeMs` (clamped within `dayBounds`), rather than centring on the view
+ * midpoint. On today's timeline the view's right edge is "now", so zooming this
+ * way keeps the most recent footage pinned to the right instead of drifting to
+ * a midday range that no longer contains now. Panning then moves back/forward.
+ *
+ * Falls back to `dayBounds` when `levelMs` meets or exceeds the day span (can't
+ * show a wider window than the day holds — e.g. early morning with little
+ * elapsed time).
  */
-export declare function zoomWindow(_current: DayWindow, dayBounds: DayWindow, levelMs: number, centerMs: number): DayWindow;
+export declare function zoomWindowAnchoredRight(dayBounds: DayWindow, levelMs: number, rightEdgeMs: number): DayWindow;
 /**
  * Shift `win` by `deltaMs`, preserving width, clamped within `dayBounds`.
  */

package/dist/index.cjs

@@ -32695,23 +32695,21 @@ var ZOOM_LEVELS = [
 	15 * 6e4
 ];
 /**
-* Produce a `levelMs`-wide DayWindow centred on `centerMs`, clamped within
-* `dayBounds`. If `levelMs >= dayBounds span`, returns `dayBounds` unchanged.
+* Produce a `levelMs`-wide window whose RIGHT edge stays anchored at
+* `rightEdgeMs` (clamped within `dayBounds`), rather than centring on the view
+* midpoint. On today's timeline the view's right edge is "now", so zooming this
+* way keeps the most recent footage pinned to the right instead of drifting to
+* a midday range that no longer contains now. Panning then moves back/forward.
+*
+* Falls back to `dayBounds` when `levelMs` meets or exceeds the day span (can't
+* show a wider window than the day holds — e.g. early morning with little
+* elapsed time).
 */
-function zoomWindow(_current, dayBounds, levelMs, centerMs) {
+function zoomWindowAnchoredRight(dayBounds, levelMs, rightEdgeMs) {
 	if (levelMs >= dayBounds.toMs - dayBounds.fromMs) return dayBounds;
-	let fromMs = centerMs - levelMs / 2;
-	let toMs = centerMs + levelMs / 2;
-	if (fromMs < dayBounds.fromMs) {
-		fromMs = dayBounds.fromMs;
-		toMs = fromMs + levelMs;
-	}
-	if (toMs > dayBounds.toMs) {
-		toMs = dayBounds.toMs;
-		fromMs = toMs - levelMs;
-	}
+	const toMs = Math.min(Math.max(rightEdgeMs, dayBounds.fromMs + levelMs), dayBounds.toMs);
 	return {
-		fromMs,
+		fromMs: toMs - levelMs,
 		toMs
 	};
 }
@@ -33026,9 +33024,10 @@ function parseDateInput(value) {
 }
 /**
 * Date selector + zoom-in / zoom-out buttons for the recording timeline.
-* Zoom cycles through ZOOM_LEVELS (widest → narrowest), centred on the
-* current view midpoint. Horizontal pan is wired via wheel events in
-* RecordingTimeline directly.
+* 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.
 */
 function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange }) {
 	const handleDateChange = (e) => {
@@ -33050,16 +33049,16 @@ function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange }) {
 		}
 		return best;
 	})();
-	const centerMs = (view.fromMs + view.toMs) / 2;
+	const rightEdgeMs = view.toMs;
 	const handleZoomIn = () => {
 		const nextLevel = ZOOM_LEVELS[Math.min(currentLevelIdx + 1, ZOOM_LEVELS.length - 1)];
 		if (nextLevel === void 0) return;
-		onViewChange(zoomWindow(view, dayBounds, nextLevel, centerMs));
+		onViewChange(zoomWindowAnchoredRight(dayBounds, nextLevel, rightEdgeMs));
 	};
 	const handleZoomOut = () => {
 		const nextLevel = ZOOM_LEVELS[Math.max(currentLevelIdx - 1, 0)];
 		if (nextLevel === void 0) return;
-		onViewChange(zoomWindow(view, dayBounds, nextLevel, centerMs));
+		onViewChange(zoomWindowAnchoredRight(dayBounds, nextLevel, rightEdgeMs));
 	};
 	const canZoomIn = currentLevelIdx < ZOOM_LEVELS.length - 1;
 	const canZoomOut = currentLevelIdx > 0;

package/dist/index.js

@@ -32671,23 +32671,21 @@ var ZOOM_LEVELS = [
 	15 * 6e4
 ];
 /**
-* Produce a `levelMs`-wide DayWindow centred on `centerMs`, clamped within
-* `dayBounds`. If `levelMs >= dayBounds span`, returns `dayBounds` unchanged.
+* Produce a `levelMs`-wide window whose RIGHT edge stays anchored at
+* `rightEdgeMs` (clamped within `dayBounds`), rather than centring on the view
+* midpoint. On today's timeline the view's right edge is "now", so zooming this
+* way keeps the most recent footage pinned to the right instead of drifting to
+* a midday range that no longer contains now. Panning then moves back/forward.
+*
+* Falls back to `dayBounds` when `levelMs` meets or exceeds the day span (can't
+* show a wider window than the day holds — e.g. early morning with little
+* elapsed time).
 */
-function zoomWindow(_current, dayBounds, levelMs, centerMs) {
+function zoomWindowAnchoredRight(dayBounds, levelMs, rightEdgeMs) {
 	if (levelMs >= dayBounds.toMs - dayBounds.fromMs) return dayBounds;
-	let fromMs = centerMs - levelMs / 2;
-	let toMs = centerMs + levelMs / 2;
-	if (fromMs < dayBounds.fromMs) {
-		fromMs = dayBounds.fromMs;
-		toMs = fromMs + levelMs;
-	}
-	if (toMs > dayBounds.toMs) {
-		toMs = dayBounds.toMs;
-		fromMs = toMs - levelMs;
-	}
+	const toMs = Math.min(Math.max(rightEdgeMs, dayBounds.fromMs + levelMs), dayBounds.toMs);
 	return {
-		fromMs,
+		fromMs: toMs - levelMs,
 		toMs
 	};
 }
@@ -33002,9 +33000,10 @@ function parseDateInput(value) {
 }
 /**
 * Date selector + zoom-in / zoom-out buttons for the recording timeline.
-* Zoom cycles through ZOOM_LEVELS (widest → narrowest), centred on the
-* current view midpoint. Horizontal pan is wired via wheel events in
-* RecordingTimeline directly.
+* 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.
 */
 function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange }) {
 	const handleDateChange = (e) => {
@@ -33026,16 +33025,16 @@ function TimelineControls({ day, onDayChange, view, dayBounds, onViewChange }) {
 		}
 		return best;
 	})();
-	const centerMs = (view.fromMs + view.toMs) / 2;
+	const rightEdgeMs = view.toMs;
 	const handleZoomIn = () => {
 		const nextLevel = ZOOM_LEVELS[Math.min(currentLevelIdx + 1, ZOOM_LEVELS.length - 1)];
 		if (nextLevel === void 0) return;
-		onViewChange(zoomWindow(view, dayBounds, nextLevel, centerMs));
+		onViewChange(zoomWindowAnchoredRight(dayBounds, nextLevel, rightEdgeMs));
 	};
 	const handleZoomOut = () => {
 		const nextLevel = ZOOM_LEVELS[Math.max(currentLevelIdx - 1, 0)];
 		if (nextLevel === void 0) return;
-		onViewChange(zoomWindow(view, dayBounds, nextLevel, centerMs));
+		onViewChange(zoomWindowAnchoredRight(dayBounds, nextLevel, rightEdgeMs));
 	};
 	const canZoomIn = currentLevelIdx < ZOOM_LEVELS.length - 1;
 	const canZoomOut = currentLevelIdx > 0;

package/package.json

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