@agent-native/core 0.86.1 → 0.87.0

package/corpus/templates/clips/app/components/editor/editor-layout.tsx

@@ -83,6 +83,26 @@ export interface EditorLayoutProps {
 }
 
 const WAVEFORM_HEIGHT = 120;
+const MIN_TIMELINE_ZOOM = 1;
+const MAX_TIMELINE_ZOOM = 50;
+
+function clampTimelineZoom(value: number): number {
+  if (!Number.isFinite(value)) return MIN_TIMELINE_ZOOM;
+  const clamped = Math.max(
+    MIN_TIMELINE_ZOOM,
+    Math.min(MAX_TIMELINE_ZOOM, value),
+  );
+  return Math.round(clamped * 10) / 10;
+}
+
+function normalizeWheelDeltaY(
+  event: WheelEvent,
+  viewportWidth: number,
+): number {
+  if (event.deltaMode === 1) return event.deltaY * 16;
+  if (event.deltaMode === 2) return event.deltaY * viewportWidth;
+  return event.deltaY;
+}
 
 function shouldProxyWaveformUrl(videoUrl: string): boolean {
   try {
@@ -210,6 +230,12 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
   const [chaptersOpen, setChaptersOpen] = useState(false);
 
   const containerRef = useRef<HTMLDivElement | null>(null);
+  const trackpadGestureRef = useRef<{
+    zoom: number;
+    scrollLeft: number;
+    anchorRatio: number;
+    viewportX: number;
+  } | null>(null);
 
   // Measure viewport so waveform + timeline stay responsive.
   useEffect(() => {
@@ -228,12 +254,149 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
     Math.floor(viewportWidth * Math.max(1, zoom)),
   );
 
+  const calculateAnchoredScrollLeft = useCallback(
+    (
+      nextZoom: number,
+      anchor?: { anchorRatio?: number; viewportX?: number },
+    ) => {
+      const nextTotalWidth = Math.max(
+        viewportWidth,
+        Math.floor(viewportWidth * Math.max(1, nextZoom)),
+      );
+      const maxScrollLeft = Math.max(0, nextTotalWidth - viewportWidth);
+      const anchorMs = selectionRange
+        ? (selectionRange.startMs + selectionRange.endMs) / 2
+        : playheadMs;
+      const fallbackAnchorRatio =
+        durationMs > 0
+          ? Math.max(0, Math.min(durationMs, anchorMs)) / durationMs
+          : 0;
+      const anchorRatio = Math.max(
+        0,
+        Math.min(1, anchor?.anchorRatio ?? fallbackAnchorRatio),
+      );
+      const viewportX =
+        typeof anchor?.viewportX === "number"
+          ? Math.max(0, Math.min(viewportWidth, anchor.viewportX))
+          : viewportWidth / 2;
+      const anchorX = anchorRatio * nextTotalWidth;
+      return Math.max(0, Math.min(maxScrollLeft, anchorX - viewportX));
+    },
+    [durationMs, playheadMs, selectionRange, viewportWidth],
+  );
+
+  const setAnchoredZoom = useCallback(
+    (
+      nextZoom: number,
+      anchor?: { anchorRatio?: number; viewportX?: number },
+    ) => {
+      const clamped = clampTimelineZoom(nextZoom);
+      setZoom(clamped);
+      setScrollLeft(calculateAnchoredScrollLeft(clamped, anchor));
+    },
+    [calculateAnchoredScrollLeft],
+  );
+
+  const handleZoomChange = useCallback(
+    (nextZoom: number) => setAnchoredZoom(nextZoom),
+    [setAnchoredZoom],
+  );
+
   useEffect(() => {
     setScrollLeft((current) =>
       Math.min(current, Math.max(0, totalWidth - viewportWidth)),
     );
   }, [totalWidth, viewportWidth]);
 
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+
+    const getViewportX = (clientX?: number) => {
+      if (typeof clientX !== "number") return viewportWidth / 2;
+      const rect = el.getBoundingClientRect();
+      return Math.max(0, Math.min(viewportWidth, clientX - rect.left));
+    };
+
+    const getAnchorRatio = (
+      sourceZoom: number,
+      sourceScrollLeft: number,
+      viewportX: number,
+    ) => {
+      const sourceTotalWidth = Math.max(
+        viewportWidth,
+        Math.floor(viewportWidth * Math.max(1, sourceZoom)),
+      );
+      return Math.max(
+        0,
+        Math.min(
+          1,
+          (sourceScrollLeft + viewportX) / Math.max(1, sourceTotalWidth),
+        ),
+      );
+    };
+
+    const handleWheel = (event: WheelEvent) => {
+      if (!event.ctrlKey) return;
+      event.preventDefault();
+      const deltaY = normalizeWheelDeltaY(event, viewportWidth);
+      if (Math.abs(deltaY) < 0.01) return;
+      const viewportX = getViewportX(event.clientX);
+      const anchorRatio = getAnchorRatio(zoom, scrollLeft, viewportX);
+      const nextZoom = clampTimelineZoom(zoom * Math.exp(-deltaY * 0.006));
+      if (nextZoom === zoom) return;
+      setAnchoredZoom(nextZoom, { anchorRatio, viewportX });
+    };
+
+    const handleGestureStart = (event: Event) => {
+      event.preventDefault();
+      const gesture = event as Event & { clientX?: number };
+      const viewportX = getViewportX(gesture.clientX);
+      trackpadGestureRef.current = {
+        zoom,
+        scrollLeft,
+        anchorRatio: getAnchorRatio(zoom, scrollLeft, viewportX),
+        viewportX,
+      };
+    };
+
+    const handleGestureChange = (event: Event) => {
+      const start = trackpadGestureRef.current;
+      if (!start) return;
+      event.preventDefault();
+      const gesture = event as Event & { scale?: number };
+      const scale =
+        typeof gesture.scale === "number" && Number.isFinite(gesture.scale)
+          ? gesture.scale
+          : 1;
+      const nextZoom = clampTimelineZoom(start.zoom * scale);
+      if (nextZoom === zoom) return;
+      setAnchoredZoom(nextZoom, {
+        anchorRatio: start.anchorRatio,
+        viewportX: start.viewportX,
+      });
+    };
+
+    const handleGestureEnd = () => {
+      trackpadGestureRef.current = null;
+    };
+
+    el.addEventListener("wheel", handleWheel, { passive: false });
+    el.addEventListener("gesturestart", handleGestureStart, {
+      passive: false,
+    });
+    el.addEventListener("gesturechange", handleGestureChange, {
+      passive: false,
+    });
+    el.addEventListener("gestureend", handleGestureEnd);
+    return () => {
+      el.removeEventListener("wheel", handleWheel);
+      el.removeEventListener("gesturestart", handleGestureStart);
+      el.removeEventListener("gesturechange", handleGestureChange);
+      el.removeEventListener("gestureend", handleGestureEnd);
+    };
+  }, [scrollLeft, setAnchoredZoom, viewportWidth, zoom]);
+
   // Sync the <video> to play state.
   useEffect(() => {
     const v = videoRef.current;
@@ -457,7 +620,7 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
         playbackSpeed={playbackSpeed}
         onPlaybackSpeedChange={handlePlaybackSpeedChange}
         zoom={zoom}
-        onZoomChange={setZoom}
+        onZoomChange={handleZoomChange}
         edits={edits}
         selectionRange={selectionRange}
         video={{ videoUrl, videoFormat, title: recording.title }}
@@ -524,6 +687,7 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
                 selectionRange={selectionRange}
                 activityRanges={transcriptSegments}
                 onSeek={seek}
+                scrollLeft={scrollLeft}
                 onScroll={(s) => setScrollLeft(s)}
               />
               <div
@@ -543,7 +707,6 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
                     value={effectiveSelection}
                     onChange={setSelectionRange}
                     durationMs={durationMs}
-                    scrollLeft={scrollLeft}
                   />
                 </div>
               </div>
@@ -566,7 +729,6 @@ export function EditorLayout({ recordingId, className }: EditorLayoutProps) {
                   chapters={chapters}
                   excludedRanges={excludedRanges}
                   splitPoints={splitPoints}
-                  scrollLeft={scrollLeft}
                   onSeek={seek}
                   onClickChapter={(c) => seek(c.startMs)}
                 />

package/corpus/templates/clips/app/components/editor/editor-toolbar.tsx

@@ -1,24 +1,4 @@
 import { useActionMutation, useT } from "@agent-native/core/client";
-import {
-  IconArrowBackUp,
-  IconChevronDown,
-  IconCut,
-  IconGauge,
-  IconZoomIn,
-  IconZoomOut,
-  IconPlayerPlay,
-  IconPlayerPause,
-  IconScissors,
-  IconPhotoEdit,
-  IconBookmarks,
-  IconPuzzle,
-  IconDownload,
-  IconLoader2,
-  IconTrash,
-} from "@tabler/icons-react";
-import { useState } from "react";
-import { toast } from "sonner";
-
 import {
   AlertDialog,
   AlertDialogAction,
@@ -28,8 +8,8 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
+} from "@agent-native/toolkit/ui/alert-dialog";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -37,17 +17,35 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Separator } from "@/components/ui/separator";
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { Separator } from "@agent-native/toolkit/ui/separator";
+import { Slider } from "@agent-native/toolkit/ui/slider";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import {
+  IconArrowBackUp,
+  IconChevronDown,
+  IconCut,
+  IconGauge,
+  IconZoomIn,
+  IconZoomOut,
+  IconPlayerPlay,
+  IconPlayerPause,
+  IconScissors,
+  IconPhotoEdit,
+  IconBookmarks,
+  IconPuzzle,
+  IconDownload,
+  IconLoader2,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
 import {
   exportMp4,
   LONG_EXPORT_THRESHOLD_MS,
@@ -61,6 +59,9 @@ import {
 } from "@/lib/timestamp-mapping";
 import { cn } from "@/lib/utils";
 
+const MIN_TIMELINE_ZOOM = 1;
+const MAX_TIMELINE_ZOOM = 50;
+
 export interface EditorToolbarProps {
   recordingId: string;
   playheadMs: number;
@@ -338,6 +339,74 @@ export function EditorToolbar({
         </DropdownMenuContent>
       </DropdownMenu>
 
+      <Separator orientation="vertical" className="mx-1 h-6" />
+
+      <div
+        className="flex h-8 shrink-0 items-center gap-1 rounded-md border border-border bg-background/70 px-1"
+        aria-label={t("editorToolbar.zoom")}
+      >
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-6 w-6"
+              aria-label={t("editorToolbar.zoomOut")}
+              disabled={zoom <= MIN_TIMELINE_ZOOM}
+              onClick={() =>
+                onZoomChange(Math.max(MIN_TIMELINE_ZOOM, zoom - 1))
+              }
+            >
+              <IconZoomOut className="h-3.5 w-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{t("editorToolbar.zoomOut")}</TooltipContent>
+        </Tooltip>
+
+        <Slider
+          value={[zoom]}
+          min={MIN_TIMELINE_ZOOM}
+          max={MAX_TIMELINE_ZOOM}
+          step={0.1}
+          aria-label={t("editorToolbar.zoom")}
+          onValueChange={(value) => onZoomChange(value[0] ?? zoom)}
+          className="hidden w-28 lg:flex"
+        />
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              size="sm"
+              variant={zoom === MIN_TIMELINE_ZOOM ? "secondary" : "ghost"}
+              className="h-6 min-w-10 px-1.5 font-mono text-[11px] tabular-nums"
+              aria-label={t("editorToolbar.fitToWidth")}
+              onClick={() => onZoomChange(MIN_TIMELINE_ZOOM)}
+            >
+              {formatZoomLabel(zoom)}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{t("editorToolbar.fitToWidth")}</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-6 w-6"
+              aria-label={t("editorToolbar.zoomIn")}
+              disabled={zoom >= MAX_TIMELINE_ZOOM}
+              onClick={() =>
+                onZoomChange(Math.min(MAX_TIMELINE_ZOOM, zoom + 1))
+              }
+            >
+              <IconZoomIn className="h-3.5 w-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{t("editorToolbar.zoomIn")}</TooltipContent>
+        </Tooltip>
+      </div>
+
       {selectionRange ? (
         <>
           <Separator orientation="vertical" className="mx-1 h-6" />
@@ -413,35 +482,6 @@ export function EditorToolbar({
             {t("editorToolbar.stitchClips")}
           </DropdownMenuItem>
           <DropdownMenuSeparator />
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger>
-              <IconZoomIn className="mr-2 h-4 w-4" />
-              {t("editorToolbar.zoom")}
-              <span className="ml-auto text-xs text-muted-foreground">
-                {zoom}x
-              </span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuSubContent className="w-44">
-              <DropdownMenuItem
-                disabled={zoom <= 1}
-                onSelect={() => onZoomChange(Math.max(1, zoom - 5))}
-              >
-                <IconZoomOut className="mr-2 h-4 w-4" />
-                {t("editorToolbar.zoomOut")}
-              </DropdownMenuItem>
-              <DropdownMenuItem onSelect={() => onZoomChange(1)}>
-                {t("editorToolbar.fitToWidth")}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                disabled={zoom >= 50}
-                onSelect={() => onZoomChange(Math.min(50, zoom + 5))}
-              >
-                <IconZoomIn className="mr-2 h-4 w-4" />
-                {t("editorToolbar.zoomIn")}
-              </DropdownMenuItem>
-            </DropdownMenuSubContent>
-          </DropdownMenuSub>
-          <DropdownMenuSeparator />
           <DropdownMenuItem onSelect={() => setClearOpen(true)}>
             <IconTrash className="mr-2 h-4 w-4" />
             {t("editorToolbar.clearAllEdits")}
@@ -536,3 +576,7 @@ export function EditorToolbar({
 function formatSpeedLabel(rate: number): string {
   return `${Number.isInteger(rate) ? rate : rate.toFixed(1)}x`;
 }
+
+function formatZoomLabel(zoom: number): string {
+  return `${Number.isInteger(zoom) ? zoom : zoom.toFixed(1)}x`;
+}

package/corpus/templates/clips/app/components/editor/split-button.tsx

@@ -1,13 +1,12 @@
 import { useActionMutation, useT } from "@agent-native/core/client";
-import { IconCut } from "@tabler/icons-react";
-import { toast } from "sonner";
-
-import { Button } from "@/components/ui/button";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import { IconCut } from "@tabler/icons-react";
+import { toast } from "sonner";
 
 export interface SplitButtonProps {
   recordingId: string;

package/corpus/templates/clips/app/components/editor/stitch-manager.tsx

@@ -4,6 +4,15 @@ import {
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@agent-native/toolkit/ui/dialog";
+import { ScrollArea } from "@agent-native/toolkit/ui/scroll-area";
 import {
   IconPuzzle,
   IconGripVertical,
@@ -13,15 +22,6 @@ import {
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import { exportConcat } from "@/lib/ffmpeg-export";
 import { formatMs } from "@/lib/timestamp-mapping";
 import { cn } from "@/lib/utils";

package/corpus/templates/clips/app/components/editor/thumbnail-picker.tsx

@@ -1,4 +1,20 @@
 import { useActionMutation, useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@agent-native/toolkit/ui/dialog";
+import { Label } from "@agent-native/toolkit/ui/label";
+import { Slider } from "@agent-native/toolkit/ui/slider";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@agent-native/toolkit/ui/tabs";
 import {
   IconPhoto,
   IconPhotoEdit,
@@ -8,17 +24,6 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
-import { Slider } from "@/components/ui/slider";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { exportGif, blobToDataUrl } from "@/lib/ffmpeg-export";
 import { formatMs } from "@/lib/timestamp-mapping";
 

package/corpus/templates/clips/app/components/editor/timeline.tsx

@@ -1,10 +1,10 @@
-import { useMemo } from "react";
-
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import { useMemo } from "react";
+
 import { formatMs } from "@/lib/timestamp-mapping";
 import { cn } from "@/lib/utils";
 
@@ -21,7 +21,6 @@ export interface TimelineProps {
   chapters?: TimelineChapter[];
   excludedRanges?: Array<{ startMs: number; endMs: number }>;
   splitPoints?: number[];
-  scrollLeft?: number;
   onSeek?: (originalMs: number) => void;
   onClickChapter?: (chapter: TimelineChapter) => void;
   className?: string;
@@ -45,7 +44,6 @@ export function Timeline({
   chapters = [],
   excludedRanges = [],
   splitPoints = [],
-  scrollLeft = 0,
   onSeek,
   onClickChapter,
   className,
@@ -72,7 +70,7 @@ export function Timeline({
   const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {
     if (!onSeek) return;
     const rect = e.currentTarget.getBoundingClientRect();
-    const x = e.clientX - rect.left + scrollLeft;
+    const x = e.clientX - rect.left;
     const ms = Math.max(0, Math.min(durationMs, (x / width) * durationMs));
     onSeek(ms);
   };

package/corpus/templates/clips/app/components/editor/transcript-editor.tsx

@@ -1,13 +1,13 @@
 import { useT } from "@agent-native/core/client";
-import { IconScissors } from "@tabler/icons-react";
-import { useMemo, useRef, useState } from "react";
-
-import { Button } from "@/components/ui/button";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import { IconScissors } from "@tabler/icons-react";
+import { useMemo, useRef, useState } from "react";
+
 import { formatMs, isExcluded, type EditsJson } from "@/lib/timestamp-mapping";
 import { cn } from "@/lib/utils";
 

package/corpus/templates/clips/app/components/editor/trim-handles.tsx

@@ -13,8 +13,6 @@ export interface TrimHandlesProps {
   /** Fires when the user releases the mouse after drag. */
   onCommit?: (value: { startMs: number; endMs: number }) => void;
   durationMs: number;
-  /** Scroll offset of the parent container so handles track with zoom. */
-  scrollLeft?: number;
   className?: string;
 }
 
@@ -46,7 +44,6 @@ export function TrimHandles({
   onChange,
   onCommit,
   durationMs,
-  scrollLeft = 0,
   className,
 }: TrimHandlesProps) {
   const rootRef = useRef<HTMLDivElement | null>(null);
@@ -57,10 +54,10 @@ export function TrimHandles({
     (clientX: number) => {
       const rect = rootRef.current?.getBoundingClientRect();
       if (!rect) return 0;
-      const x = clientX - rect.left + scrollLeft;
+      const x = clientX - rect.left;
       return Math.max(0, Math.min(durationMs, (x / width) * durationMs));
     },
-    [scrollLeft, durationMs, width],
+    [durationMs, width],
   );
 
   const startDrag = (mode: DragMode) => (e: React.PointerEvent) => {
@@ -101,7 +98,7 @@ export function TrimHandles({
     const toMsFromEvent = (e: PointerEvent) => {
       const rect = rootRef.current?.getBoundingClientRect();
       if (!rect) return null;
-      const x = e.clientX - rect.left + scrollLeft;
+      const x = e.clientX - rect.left;
       return Math.max(0, Math.min(durationMs, (x / width) * durationMs));
     };
     window.addEventListener("pointermove", handleMove);
@@ -110,7 +107,7 @@ export function TrimHandles({
       window.removeEventListener("pointermove", handleMove);
       window.removeEventListener("pointerup", handleUp);
     };
-  }, [dragMode, value, onChange, onCommit, scrollLeft, durationMs, width]);
+  }, [dragMode, value, onChange, onCommit, durationMs, width]);
 
   const startX = (value.startMs / Math.max(durationMs, 1)) * width;
   const endX = (value.endMs / Math.max(durationMs, 1)) * width;

package/corpus/templates/clips/app/components/editor/waveform.tsx

@@ -24,6 +24,8 @@ export interface WaveformProps {
   activityRanges?: Array<{ startMs: number; endMs: number }>;
   /** Click handler — returns the original ms at the click position. */
   onSeek?: (originalMs: number) => void;
+  /** Controlled horizontal scroll offset from the parent timeline shell. */
+  scrollLeft?: number;
   /** Called on scroll so the parent can sync ruler / chapter markers. */
   onScroll?: (scrollLeft: number, totalWidth: number) => void;
   className?: string;
@@ -88,6 +90,7 @@ export function Waveform({
   selectionRange,
   activityRanges = [],
   onSeek,
+  scrollLeft = 0,
   onScroll,
   className,
 }: WaveformProps) {
@@ -97,6 +100,15 @@ export function Waveform({
   // The total drawable width (scrolls horizontally). zoom=1 fits exactly.
   const totalWidth = Math.max(width, Math.floor(width * Math.max(1, zoom)));
 
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const next = Math.max(0, Math.min(scrollLeft, totalWidth - width));
+    if (Math.abs(el.scrollLeft - next) > 0.5) {
+      el.scrollLeft = next;
+    }
+  }, [scrollLeft, totalWidth, width]);
+
   // Re-draw whenever peaks, size, or excluded ranges change.
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -234,10 +246,7 @@ export function Waveform({
 
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (!onSeek) return;
-    const rect = (
-      e.currentTarget.firstElementChild as HTMLElement
-    )?.getBoundingClientRect();
-    if (!rect) return;
+    const rect = e.currentTarget.getBoundingClientRect();
     const scroll = scrollRef.current?.scrollLeft ?? 0;
     const x = e.clientX - rect.left + scroll;
     const ms = Math.max(0, Math.min(durationMs, (x / totalWidth) * durationMs));

package/corpus/templates/clips/app/components/layout/Header.tsx

@@ -1,8 +1,10 @@
 import { AgentToggleButton, useT } from "@agent-native/core/client";
+import {
+  useHeaderTitle,
+  useHeaderActions,
+} from "@agent-native/toolkit/app-shell";
 import { useLocation } from "react-router";
 
-import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
-
 const pageTitleKeys: Record<string, string> = {
   "/": "navigation.library",
   "/library": "navigation.library",