@hyperframes/studio 0.5.0-alpha.9 → 0.5.0

package/src/icons/SystemIcons.tsx

@@ -53,6 +53,7 @@ import {
   CaretRight,
   ClipboardText,
   ArrowCounterClockwise,
+  Camera as PhCamera,
   Gear,
 } from "@phosphor-icons/react";
 import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from "@phosphor-icons/react";
@@ -127,4 +128,5 @@ export const ChevronDown = makeIcon(CaretDown);
 export const ChevronRight = makeIcon(CaretRight);
 export const ClipboardList = makeIcon(ClipboardText);
 export const RotateCcw = makeIcon(ArrowCounterClockwise);
+export const Camera = makeIcon(PhCamera);
 export const Settings = makeIcon(Gear);

package/src/player/components/CompositionThumbnail.tsx

@@ -7,7 +7,6 @@ interface CompositionThumbnailProps {
   labelColor: string;
   accentColor?: string;
   selector?: string;
-  selectorIndex?: number;
   seekTime?: number;
   duration?: number;
   width?: number;
@@ -17,44 +16,12 @@ interface CompositionThumbnailProps {
 const CLIP_HEIGHT = 66;
 const THUMBNAIL_URL_VERSION = "v2";
 
-export function buildCompositionThumbnailUrl({
-  previewUrl,
-  seekTime = 2,
-  duration = 5,
-  selector,
-  selectorIndex,
-  origin,
-}: {
-  previewUrl: string;
-  seekTime?: number;
-  duration?: number;
-  selector?: string;
-  selectorIndex?: number;
-  origin: string;
-}): string {
-  const thumbnailBase = previewUrl
-    .replace("/preview/comp/", "/thumbnail/")
-    .replace(/\/preview$/, "/thumbnail/index.html");
-  const midTime = seekTime + duration / 2;
-  const thumbnailUrl = new URL(thumbnailBase, origin);
-  thumbnailUrl.searchParams.set("t", midTime.toFixed(2));
-  thumbnailUrl.searchParams.set("v", THUMBNAIL_URL_VERSION);
-  if (selector) {
-    thumbnailUrl.searchParams.set("selector", selector);
-    if (selectorIndex != null && selectorIndex > 0) {
-      thumbnailUrl.searchParams.set("selectorIndex", String(selectorIndex));
-    }
-  }
-  return thumbnailUrl.toString();
-}
-
 export const CompositionThumbnail = memo(function CompositionThumbnail({
   previewUrl,
   label,
   labelColor,
   accentColor = "#6B7280",
   selector,
-  selectorIndex,
   seekTime = 2,
   duration = 5,
 }: CompositionThumbnailProps) {
@@ -81,14 +48,15 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
     roRef.current?.disconnect();
   });
 
-  const url = buildCompositionThumbnailUrl({
-    previewUrl,
-    seekTime,
-    duration,
-    selector,
-    selectorIndex,
-    origin: window.location.origin,
-  });
+  const thumbnailBase = previewUrl
+    .replace("/preview/comp/", "/thumbnail/")
+    .replace(/\/preview$/, "/thumbnail/index.html");
+  const midTime = seekTime + duration / 2;
+  const thumbnailUrl = new URL(thumbnailBase, window.location.origin);
+  thumbnailUrl.searchParams.set("t", midTime.toFixed(2));
+  thumbnailUrl.searchParams.set("v", THUMBNAIL_URL_VERSION);
+  if (selector) thumbnailUrl.searchParams.set("selector", selector);
+  const url = thumbnailUrl.toString();
   const frameW = Math.max(48, Math.round(CLIP_HEIGHT * aspect));
   const frameCount = containerWidth > 0 ? Math.max(1, Math.ceil(containerWidth / frameW)) : 1;
 
@@ -98,7 +66,7 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
         src={url}
         alt=""
         draggable={false}
-        loading="eager"
+        loading="lazy"
         onLoad={(e) => {
           const img = e.currentTarget;
           if (img.naturalWidth > 0 && img.naturalHeight > 0) {

package/src/player/components/EditModal.tsx

@@ -3,7 +3,6 @@ import { useMountEffect } from "../../hooks/useMountEffect";
 import { usePlayerStore } from "../store/playerStore";
 import { formatTime } from "../lib/time";
 import { buildPromptCopyText, buildTimelineAgentPrompt } from "./timelineEditing";
-import { copyTextToClipboard } from "../../utils/clipboard";
 
 interface EditPopoverProps {
   rangeStart: number;
@@ -63,8 +62,16 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
   }, [start, end, elementsInRange, prompt]);
 
   const handleCopy = useCallback(async () => {
-    const copied = await copyTextToClipboard(buildClipboardText());
-    if (!copied) return;
+    try {
+      await navigator.clipboard.writeText(buildClipboardText());
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = buildClipboardText();
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+    }
     setCopiedAgentPrompt(true);
     setTimeout(() => {
       setCopiedAgentPrompt(false);
@@ -75,8 +82,16 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
   const handleCopyPrompt = useCallback(async () => {
     const promptText = buildPromptCopyText(prompt);
     if (!promptText) return;
-    const copied = await copyTextToClipboard(promptText);
-    if (!copied) return;
+    try {
+      await navigator.clipboard.writeText(promptText);
+    } catch {
+      const ta = document.createElement("textarea");
+      ta.value = promptText;
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand("copy");
+      document.body.removeChild(ta);
+    }
     setCopiedPromptOnly(true);
     setTimeout(() => {
       setCopiedPromptOnly(false);

package/src/player/components/Player.tsx

@@ -1,37 +1,43 @@
-import { forwardRef, useRef, useState } from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
+import { isLottieAnimationLoaded } from "@hyperframes/core/runtime/lottie-readiness";
 import { useMountEffect } from "../../hooks/useMountEffect";
+import { HyperframesLoader } from "../../components/ui";
+// NOTE: importing "@hyperframes/player" registers a class extending HTMLElement
+// at module load, which throws under SSR. Defer the import to the mount effect
+// so it only runs in the browser.
 
 interface PlayerProps {
   projectId?: string;
   directUrl?: string;
   onLoad: () => void;
   portrait?: boolean;
-  style?: React.CSSProperties;
 }
 
 interface HyperframesPlayerElement extends HTMLElement {
   iframeElement: HTMLIFrameElement;
 }
 
-function enableInteractiveIframe(player: HyperframesPlayerElement): void {
-  const root = player.shadowRoot;
-  if (!root) return;
-
-  const container = root.querySelector<HTMLElement>(".hfp-container");
-  const iframe = root.querySelector<HTMLIFrameElement>(".hfp-iframe");
-
-  container?.style.setProperty("pointer-events", "auto");
-  iframe?.style.setProperty("pointer-events", "auto");
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
 }
 
-function isLottieAnimationReady(anim: unknown): boolean {
-  if (typeof anim !== "object" || anim === null) return true;
-  const maybe = anim as { isLoaded?: boolean; totalFrames?: number };
-  if (maybe.isLoaded === true) return true;
-  if (typeof maybe.totalFrames === "number" && maybe.totalFrames > 0) return true;
-  return false;
+function getShaderTransitionLoading(event: Event): boolean | null {
+  if (!(event instanceof CustomEvent)) return null;
+  const detail: unknown = event.detail;
+  if (!isRecord(detail)) return null;
+  const state = detail.state;
+  if (!isRecord(state)) return null;
+  return state.loading === true && state.ready !== true;
 }
 
+// Assets are considered ready when every `<video>`/`<audio>` has enough data
+// to play through without buffering, and every registered Lottie animation has
+// finished loading.
+//
+// Returns whichever value was returned last on cross-origin / transient DOM
+// races so a brief access failure (e.g. an iframe that just swapped src)
+// doesn't flicker the overlay state — we keep showing whatever was most
+// recently true.
 function hasUnloadedAssets(iframe: HTMLIFrameElement, lastResult: boolean): boolean {
   try {
     const win = iframe.contentWindow as unknown as (Window & { __hfLottie?: unknown[] }) | null;
@@ -47,7 +53,7 @@ function hasUnloadedAssets(iframe: HTMLIFrameElement, lastResult: boolean): bool
     const lotties = win.__hfLottie;
     if (lotties?.length) {
       for (const anim of lotties) {
-        if (!isLottieAnimationReady(anim)) return true;
+        if (!isLottieAnimationLoaded(anim)) return true;
       }
     }
 
@@ -57,11 +63,24 @@ function hasUnloadedAssets(iframe: HTMLIFrameElement, lastResult: boolean): bool
   }
 }
 
+/**
+ * Renders a composition preview using the <hyperframes-player> web component.
+ *
+ * The web component handles iframe scaling, dimension detection, and
+ * ResizeObserver internally. This wrapper bridges its inner iframe to the
+ * forwarded ref so useTimelinePlayer can access it for clip manifest parsing,
+ * timeline probing, and DOM inspection.
+ */
 export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
-  ({ projectId, directUrl, onLoad, portrait, style }, ref) => {
+  ({ projectId, directUrl, onLoad, portrait }, ref) => {
     const containerRef = useRef<HTMLDivElement>(null);
+    const loadCountRef = useRef(0);
     const assetPollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+    const assetFadeRef = useRef<ReturnType<typeof setTimeout> | null>(null);
     const [assetsLoading, setAssetsLoading] = useState(false);
+    const [assetOverlayVisible, setAssetOverlayVisible] = useState(false);
+    const [assetOverlayFading, setAssetOverlayFading] = useState(false);
+    const [shaderTransitionLoading, setShaderTransitionLoading] = useState(false);
 
     useMountEffect(() => {
       const container = containerRef.current;
@@ -70,11 +89,15 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
       let canceled = false;
       let cleanup: (() => void) | undefined;
 
+      // Dynamic import registers the custom element in the browser only.
       import("@hyperframes/player").then(() => {
         if (canceled) return;
 
+        // Create the web component imperatively to avoid JSX custom-element typing.
         const player = document.createElement("hyperframes-player") as HyperframesPlayerElement;
         const src = directUrl || `/api/projects/${projectId}/preview`;
+        player.setAttribute("shader-capture-scale", "1");
+        player.setAttribute("shader-loading", "player");
         player.setAttribute("src", src);
         player.setAttribute("width", String(portrait ? 1080 : 1920));
         player.setAttribute("height", String(portrait ? 1920 : 1080));
@@ -82,8 +105,8 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
         player.style.height = "100%";
         player.style.display = "block";
         container.appendChild(player);
-        enableInteractiveIframe(player);
 
+        // Bridge the inner iframe to the forwarded ref for useTimelinePlayer.
         const iframe = player.iframeElement;
         if (typeof ref === "function") {
           ref(iframe);
@@ -91,12 +114,42 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
           (ref as React.MutableRefObject<HTMLIFrameElement | null>).current = iframe;
         }
 
+        // Prevent the web component's built-in click-to-toggle behavior.
+        // The studio manages playback exclusively via useTimelinePlayer.
         const preventToggle = (e: Event) => e.stopImmediatePropagation();
         player.addEventListener("click", preventToggle, { capture: true });
 
+        const handleShaderTransitionState = (event: Event) => {
+          const loading = getShaderTransitionLoading(event);
+          if (loading !== null) setShaderTransitionLoading(loading);
+        };
+        player.addEventListener("shadertransitionstate", handleShaderTransitionState);
+
+        // Forward the iframe's native load event to the studio's onIframeLoad.
         const handleLoad = () => {
+          loadCountRef.current++;
+          setShaderTransitionLoading(false);
+          // Reveal animation on reload (hot-reload, composition switch)
+          if (loadCountRef.current > 1) {
+            container.classList.remove("preview-revealing");
+            void container.offsetWidth;
+            container.classList.add("preview-revealing");
+            const onEnd = () => container.classList.remove("preview-revealing");
+            container.addEventListener("animationend", onEnd, { once: true });
+          }
           onLoad();
 
+          // Show a loading overlay until every `<video>`/`<audio>` and Lottie
+          // asset is ready. Without this users can click play before audio has
+          // buffered — the runtime is resilient (queued play() resolves once
+          // data arrives), but the overlay communicates why the first frame
+          // or first audio beat may lag.
+          //
+          // Poll with a 10 s safety cap (100 ticks × 100 ms). If the cap
+          // trips we hide the overlay so the UI doesn't appear stuck forever,
+          // but we log a debug warning so the case is diagnosable — a long
+          // cold video or a broken asset can legitimately exceed 10 s on a
+          // slow network.
           if (assetPollRef.current) clearInterval(assetPollRef.current);
           let lastUnloaded = hasUnloadedAssets(iframe, false);
           if (lastUnloaded) {
@@ -109,6 +162,11 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
                 if (assetPollRef.current) clearInterval(assetPollRef.current);
                 assetPollRef.current = null;
                 setAssetsLoading(false);
+                if (lastUnloaded) {
+                  console.debug(
+                    "[Player] Asset-loading overlay timed out after 10s; hiding anyway. Check network or asset integrity.",
+                  );
+                }
               }
             }, 100);
           } else {
@@ -120,9 +178,11 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
         cleanup = () => {
           iframe.removeEventListener("load", handleLoad);
           player.removeEventListener("click", preventToggle, { capture: true });
+          player.removeEventListener("shadertransitionstate", handleShaderTransitionState);
           if (assetPollRef.current) clearInterval(assetPollRef.current);
           assetPollRef.current = null;
           container.removeChild(player);
+          // Clear the forwarded ref
           if (typeof ref === "function") {
             ref(null);
           } else if (ref) {
@@ -137,16 +197,57 @@ export const Player = forwardRef<HTMLIFrameElement, PlayerProps>(
       };
     });
 
+    useEffect(() => {
+      if (assetFadeRef.current) {
+        clearTimeout(assetFadeRef.current);
+        assetFadeRef.current = null;
+      }
+
+      if (assetsLoading) {
+        setAssetOverlayVisible(true);
+        setAssetOverlayFading(false);
+        return;
+      }
+
+      setAssetOverlayFading(true);
+      assetFadeRef.current = setTimeout(() => {
+        setAssetOverlayVisible(false);
+        setAssetOverlayFading(false);
+        assetFadeRef.current = null;
+      }, 240);
+
+      return () => {
+        if (assetFadeRef.current) {
+          clearTimeout(assetFadeRef.current);
+          assetFadeRef.current = null;
+        }
+      };
+    }, [assetsLoading]);
+
+    const showAssetOverlay = assetOverlayVisible && !shaderTransitionLoading;
+
     return (
-      <div
-        className="relative w-full h-full max-w-full max-h-full overflow-hidden bg-black flex items-center justify-center"
-        style={style}
-      >
+      <div className="relative w-full h-full max-w-full max-h-full overflow-hidden bg-black flex items-center justify-center">
         <div ref={containerRef} className="w-full h-full" />
-        {assetsLoading && (
-          <div className="absolute inset-0 bg-black/80 flex flex-col items-center justify-center z-20 pointer-events-none">
-            <div className="w-8 h-8 border-2 border-white/20 border-t-white rounded-full animate-spin" />
-            <span className="text-white/60 text-xs mt-3">Loading assets…</span>
+        {showAssetOverlay && (
+          <div
+            className="absolute inset-0 bg-black flex items-center justify-center z-20 select-none"
+            data-hyperframes-ignore=""
+            draggable={false}
+            style={{
+              opacity: assetOverlayFading ? 0 : 1,
+              pointerEvents: assetOverlayFading ? "none" : "auto",
+              transition: "opacity 240ms ease-out",
+            }}
+            onDragStart={(event) => event.preventDefault()}
+            onMouseDown={(event) => event.preventDefault()}
+            onPointerDown={(event) => event.preventDefault()}
+          >
+            <HyperframesLoader
+              title="Preparing preview assets"
+              detail="Waiting for media and motion assets before playback starts."
+              size={56}
+            />
           </div>
         )}
       </div>

package/src/player/components/PlayerControls.tsx

@@ -1,10 +1,6 @@
 import { useRef, useState, useCallback, useEffect, memo } from "react";
 import { useMountEffect } from "../../hooks/useMountEffect";
-import {
-  TIMELINE_TOGGLE_SHORTCUT_LABEL,
-  getTimelineToggleTitle,
-} from "../../utils/timelineDiscovery";
-import { formatFrameTime, frameToSeconds, formatTime } from "../lib/time";
+import { formatFrameTime, frameToSeconds, stepFrameTime, formatTime } from "../lib/time";
 import { usePlayerStore, liveTime } from "../store/playerStore";
 
 const SPEED_OPTIONS = [0.25, 0.5, 1, 1.5, 2] as const;
@@ -30,15 +26,11 @@ export function resolveSeekPercent(clientX: number, rectLeft: number, rectWidth:
 interface PlayerControlsProps {
   onTogglePlay: () => void;
   onSeek: (time: number) => void;
-  timelineVisible?: boolean;
-  onToggleTimeline?: () => void;
 }
 
 export const PlayerControls = memo(function PlayerControls({
   onTogglePlay,
   onSeek,
-  timelineVisible,
-  onToggleTimeline,
 }: PlayerControlsProps) {
   // Subscribe to only the fields we render — each selector prevents cascading re-renders
   const isPlaying = usePlayerStore((s) => s.isPlaying);
@@ -216,10 +208,10 @@ export const PlayerControls = memo(function PlayerControls({
       const step = e.shiftKey ? 10 : 1;
       if (e.key === "ArrowLeft") {
         e.preventDefault();
-        onSeek(Math.max(0, currentTimeRef.current - frameToSeconds(step)));
+        onSeek(stepFrameTime(currentTimeRef.current, -step));
       } else if (e.key === "ArrowRight") {
         e.preventDefault();
-        onSeek(Math.min(duration, currentTimeRef.current + frameToSeconds(step)));
+        onSeek(Math.min(duration, stepFrameTime(currentTimeRef.current, step)));
       }
     },
     [timelineReady, duration, onSeek],
@@ -437,39 +429,6 @@ export const PlayerControls = memo(function PlayerControls({
           </span>
         ))}
       </div>
-
-      {/* Timeline toggle */}
-      {onToggleTimeline !== undefined && (
-        <button
-          type="button"
-          onClick={onToggleTimeline}
-          className={`h-7 flex items-center gap-1.5 rounded-md border px-2.5 text-[11px] font-medium transition-colors ${
-            timelineVisible
-              ? "text-studio-accent bg-studio-accent/10 border-studio-accent/30"
-              : "border-neutral-700 text-neutral-300 hover:border-neutral-500 hover:bg-neutral-800"
-          }`}
-          title={getTimelineToggleTitle(Boolean(timelineVisible))}
-          aria-label={timelineVisible ? "Hide timeline editor" : "Show timeline editor"}
-        >
-          <svg
-            width="13"
-            height="13"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-          >
-            <rect x="3" y="13" width="18" height="8" rx="1" />
-            <line x1="3" y1="9" x2="21" y2="9" />
-            <line x1="3" y1="5" x2="21" y2="5" />
-          </svg>
-          <span>Timeline</span>
-          <span className="hidden md:inline rounded bg-black/20 px-1 py-0.5 text-[9px] font-mono opacity-70">
-            {TIMELINE_TOGGLE_SHORTCUT_LABEL}
-          </span>
-        </button>
-      )}
     </div>
   );
 });

package/src/player/components/Timeline.test.ts

@@ -8,7 +8,6 @@ import {
   getTimelinePlayheadLeft,
   getTimelineScrollLeftForZoomAnchor,
   getTimelineScrollLeftForZoomTransition,
-  shouldShowTimelineShortcutHint,
   shouldHandleTimelineDeleteKey,
   shouldAutoScrollTimeline,
 } from "./Timeline";
@@ -238,17 +237,6 @@ describe("getTimelineCanvasHeight", () => {
   });
 });
 
-describe("shouldShowTimelineShortcutHint", () => {
-  it("shows the hint when the timeline does not vertically overflow", () => {
-    expect(shouldShowTimelineShortcutHint(220, 220)).toBe(true);
-    expect(shouldShowTimelineShortcutHint(220.5, 220)).toBe(true);
-  });
-
-  it("hides the hint when timeline tracks need vertical scrolling", () => {
-    expect(shouldShowTimelineShortcutHint(221.5, 220)).toBe(false);
-  });
-});
-
 describe("shouldHandleTimelineDeleteKey", () => {
   it("handles Delete and Backspace when focus is not in an editor", () => {
     expect(shouldHandleTimelineDeleteKey({ key: "Delete" })).toBe(true);

package/src/player/components/Timeline.tsx

@@ -35,7 +35,7 @@ const TRACK_H = 72;
 const RULER_H = 24;
 const CLIP_Y = 3; // vertical inset inside track
 const CLIP_HANDLE_W = 18;
-const TIMELINE_SCROLL_BUFFER = 20;
+const TIMELINE_SCROLL_BUFFER = 24;
 
 interface TrackVisualStyle extends TimelineTrackStyle {
   icon: ReactNode;
@@ -216,14 +216,6 @@ export function getTimelineCanvasHeight(trackCount: number): number {
   return RULER_H + Math.max(0, trackCount) * TRACK_H + TIMELINE_SCROLL_BUFFER;
 }
 
-export function shouldShowTimelineShortcutHint(
-  scrollHeight: number,
-  clientHeight: number,
-): boolean {
-  if (!Number.isFinite(scrollHeight) || !Number.isFinite(clientHeight)) return true;
-  return scrollHeight - clientHeight <= 1;
-}
-
 export function shouldHandleTimelineDeleteKey(input: {
   key: string;
   metaKey?: boolean;
@@ -287,6 +279,7 @@ export function resolveTimelineAssetDrop(
     track: getDefaultDroppedTrack(input.trackOrder, rowIndex),
   };
 }
+
 /* ── Component ──────────────────────────────────────────────────── */
 interface TimelineProps {
   /** Called when user seeks via ruler/track click or playhead drag */
@@ -434,51 +427,30 @@ export const Timeline = memo(function Timeline({
   onDeleteElementRef.current = onDeleteElement;
   const suppressClickRef = useRef(false);
   const [showPopover, setShowPopover] = useState(false);
-  const [showShortcutHint, setShowShortcutHint] = useState(true);
   const [viewportWidth, setViewportWidth] = useState(0);
   const roRef = useRef<ResizeObserver | null>(null);
-  const shortcutHintRafRef = useRef(0);
-  const syncShortcutHintVisibility = useCallback(() => {
-    const scroll = scrollRef.current;
-    setShowShortcutHint(
-      scroll ? shouldShowTimelineShortcutHint(scroll.scrollHeight, scroll.clientHeight) : true,
-    );
-  }, []);
-  const scheduleShortcutHintVisibilitySync = useCallback(() => {
-    if (shortcutHintRafRef.current) cancelAnimationFrame(shortcutHintRafRef.current);
-    shortcutHintRafRef.current = requestAnimationFrame(() => {
-      shortcutHintRafRef.current = 0;
-      syncShortcutHintVisibility();
-    });
-  }, [syncShortcutHintVisibility]);
 
   // Callback ref: sets up ResizeObserver when the DOM element actually mounts.
   // useMountEffect can't work here because the component returns null on first
   // render (timelineReady=false), so containerRef.current is null when the
   // effect fires and the ResizeObserver is never created.
-  const setContainerRef = useCallback(
-    (el: HTMLDivElement | null) => {
-      if (roRef.current) {
-        roRef.current.disconnect();
-        roRef.current = null;
-      }
-      containerRef.current = el;
-      if (!el) return;
-      setViewportWidth(el.clientWidth);
-      scheduleShortcutHintVisibilitySync();
-      roRef.current = new ResizeObserver(([entry]) => {
-        setViewportWidth(entry.contentRect.width);
-        scheduleShortcutHintVisibilitySync();
-      });
-      roRef.current.observe(el);
-    },
-    [scheduleShortcutHintVisibilitySync],
-  );
+  const setContainerRef = useCallback((el: HTMLDivElement | null) => {
+    if (roRef.current) {
+      roRef.current.disconnect();
+      roRef.current = null;
+    }
+    containerRef.current = el;
+    if (!el) return;
+    setViewportWidth(el.clientWidth);
+    roRef.current = new ResizeObserver(([entry]) => {
+      setViewportWidth(entry.contentRect.width);
+    });
+    roRef.current.observe(el);
+  }, []);
 
   // Clean up ResizeObserver on unmount
   useMountEffect(() => () => {
     roRef.current?.disconnect();
-    if (shortcutHintRafRef.current) cancelAnimationFrame(shortcutHintRafRef.current);
   });
 
   // Effective duration: max of store duration and the furthest element end.
@@ -523,7 +495,6 @@ export const Timeline = memo(function Timeline({
     }
     return [...trackOrder, draggedClip.previewTrack].sort((a, b) => a - b);
   }, [draggedClip, trackOrder]);
-  const totalH = getTimelineCanvasHeight(displayTrackOrder.length);
   const selectedElement = useMemo(
     () => elements.find((element) => (element.key ?? element.id) === selectedElementId) ?? null,
     [elements, selectedElementId],
@@ -573,6 +544,7 @@ export const Timeline = memo(function Timeline({
     );
     previousZoomModeRef.current = zoomMode;
   }, [zoomMode]);
+
   useMountEffect(() => {
     const unsub = liveTime.subscribe((t) => {
       const dur = durationRef.current;
@@ -1040,12 +1012,12 @@ export const Timeline = memo(function Timeline({
   );
   const majorTickInterval =
     major.length >= 2 ? Math.max(0.25, major[1] - major[0]) : effectiveDuration;
-  useEffect(() => {
-    syncShortcutHintVisibility();
-  }, [syncShortcutHintVisibility, timelineReady, elements.length, totalH]);
   const getPreviewElement = useCallback(
     (element: TimelineElement): TimelineElement => {
-      if (resizingClip?.element.id === element.id) {
+      if (
+        resizingClip &&
+        (resizingClip.element.key ?? resizingClip.element.id) === (element.key ?? element.id)
+      ) {
         return {
           ...element,
           start: resizingClip.previewStart,
@@ -1267,12 +1239,13 @@ export const Timeline = memo(function Timeline({
     );
   }
 
+  const totalH = getTimelineCanvasHeight(displayTrackOrder.length);
   const draggedElement = draggedClip?.element ?? null;
   const activeDraggedElement =
     draggedClip?.started === true && draggedElement
       ? getRenderedTimelineElement({
           element: draggedElement,
-          draggedElementId: draggedElement.id,
+          draggedElementId: draggedElement.key ?? draggedElement.id,
           previewStart: draggedClip.previewStart,
           previewTrack: draggedClip.previewTrack,
         })
@@ -1340,7 +1313,7 @@ export const Timeline = memo(function Timeline({
     <div
       ref={setContainerRef}
       aria-label="Timeline"
-      className={`relative border-t select-none h-full overflow-hidden ${shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
+      className={`border-t select-none h-full overflow-hidden ${shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
       style={{
         touchAction: "pan-x pan-y",
         background: theme.shellBackground,
@@ -1679,8 +1652,8 @@ export const Timeline = memo(function Timeline({
         </div>
       </div>
 
-      {/* Keyboard shortcut hint */}
-      {showShortcutHint && !showPopover && !rangeSelection && (
+      {/* Keyboard shortcut hint — always visible */}
+      {!showPopover && !rangeSelection && (
         <div className="absolute bottom-2 right-3 pointer-events-none z-20">
           <div
             className="flex items-center gap-1.5 px-2 py-1 rounded-md border"