@hyperframes/studio 0.5.5 → 0.6.0-alpha.2

package/src/player/components/Timeline.tsx

@@ -28,6 +28,11 @@ import {
 } from "./timelineTheme";
 import { getPinchTimelineZoomPercent, getTimelinePixelsPerSecond } from "./timelineZoom";
 import { TIMELINE_ASSET_MIME } from "../../utils/timelineAssetDrop";
+import {
+  canInspectTimelineElement,
+  getTimelineElementKey,
+  isAudioTimelineElement,
+} from "../../utils/timelineInspector";
 
 /* ── Layout ─────────────────────────────────────────────────────── */
 const GUTTER = 32;
@@ -35,7 +40,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 = 24;
+const TIMELINE_SCROLL_BUFFER = 20;
 
 interface TrackVisualStyle extends TimelineTrackStyle {
   icon: ReactNode;
@@ -216,6 +221,14 @@ 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;
@@ -279,7 +292,6 @@ export function resolveTimelineAssetDrop(
     track: getDefaultDroppedTrack(input.trackOrder, rowIndex),
   };
 }
-
 /* ── Component ──────────────────────────────────────────────────── */
 interface TimelineProps {
   /** Called when user seeks via ruler/track click or playhead drag */
@@ -322,6 +334,12 @@ interface TimelineProps {
     element: import("../store/playerStore").TimelineElement,
     intent: BlockedTimelineEditIntent,
   ) => void;
+  onSelectElement?: (element: import("../store/playerStore").TimelineElement | null) => void;
+  onInspectElement?: (element: import("../store/playerStore").TimelineElement) => void;
+  inspectedElementId?: string | null;
+  layerChildCounts?: ReadonlyMap<string, number>;
+  thumbnailedElementIds?: ReadonlySet<string>;
+  onToggleElementThumbnail?: (element: import("../store/playerStore").TimelineElement) => void;
   theme?: Partial<TimelineTheme>;
 }
 
@@ -369,6 +387,12 @@ export const Timeline = memo(function Timeline({
   onMoveElement,
   onResizeElement,
   onBlockedEditAttempt,
+  onSelectElement,
+  onInspectElement,
+  inspectedElementId,
+  layerChildCounts,
+  thumbnailedElementIds,
+  onToggleElementThumbnail,
   theme: themeOverrides,
 }: TimelineProps = {}) {
   const theme = useMemo(() => ({ ...defaultTimelineTheme, ...themeOverrides }), [themeOverrides]);
@@ -427,30 +451,51 @@ 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);
-    roRef.current = new ResizeObserver(([entry]) => {
-      setViewportWidth(entry.contentRect.width);
-    });
-    roRef.current.observe(el);
-  }, []);
+  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],
+  );
 
   // 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.
@@ -495,6 +540,7 @@ 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],
@@ -544,7 +590,6 @@ export const Timeline = memo(function Timeline({
     );
     previousZoomModeRef.current = zoomMode;
   }, [zoomMode]);
-
   useMountEffect(() => {
     const unsub = liveTime.subscribe((t) => {
       const dur = durationRef.current;
@@ -1012,6 +1057,10 @@ 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 (
@@ -1239,7 +1288,6 @@ export const Timeline = memo(function Timeline({
     );
   }
 
-  const totalH = getTimelineCanvasHeight(displayTrackOrder.length);
   const draggedElement = draggedClip?.element ?? null;
   const activeDraggedElement =
     draggedClip?.started === true && draggedElement
@@ -1313,7 +1361,7 @@ export const Timeline = memo(function Timeline({
     <div
       ref={setContainerRef}
       aria-label="Timeline"
-      className={`border-t select-none h-full overflow-hidden ${shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
+      className={`relative border-t select-none h-full overflow-hidden ${shiftHeld ? "cursor-crosshair" : "cursor-default"}`}
       style={{
         touchAction: "pan-x pan-y",
         background: theme.shellBackground,
@@ -1451,6 +1499,14 @@ export const Timeline = memo(function Timeline({
                     const elementKey = el.key ?? el.id;
                     const capabilities = getTimelineEditCapabilities(el);
                     const isSelected = selectedElementId === elementKey;
+                    const canInspectClip = canInspectTimelineElement(el);
+                    const isInspectorActive =
+                      canInspectClip && inspectedElementId === getTimelineElementKey(el);
+                    const childCount = canInspectClip
+                      ? (layerChildCounts?.get(elementKey) ?? 0)
+                      : 0;
+                    const isThumbnailActive = thumbnailedElementIds?.has(elementKey) ?? false;
+                    const thumbnailLabel = isAudioTimelineElement(el) ? "waveform" : "thumbnail";
                     const isComposition = !!el.compositionSrc;
                     const clipKey = `${elementKey}-${i}`;
                     const isHovered = hoveredClip === clipKey;
@@ -1474,8 +1530,32 @@ export const Timeline = memo(function Timeline({
                         theme={theme}
                         trackStyle={clipStyle}
                         isComposition={isComposition}
+                        isInspectorActive={isInspectorActive}
+                        isThumbnailActive={isThumbnailActive}
+                        thumbnailLabel={thumbnailLabel}
+                        childCount={childCount}
                         onHoverStart={() => setHoveredClip(clipKey)}
                         onHoverEnd={() => setHoveredClip(null)}
+                        onInspectorClick={
+                          canInspectClip && onInspectElement
+                            ? (e) => {
+                                e.stopPropagation();
+                                if (suppressClickRef.current) return;
+                                setSelectedElementId(elementKey);
+                                onSelectElement?.(el);
+                                onInspectElement(el);
+                              }
+                            : undefined
+                        }
+                        onThumbnailClick={
+                          onToggleElementThumbnail && canInspectClip
+                            ? (e) => {
+                                e.stopPropagation();
+                                if (suppressClickRef.current) return;
+                                onToggleElementThumbnail(el);
+                              }
+                            : undefined
+                        }
                         onResizeStart={(edge, e) => {
                           if (e.button !== 0 || e.shiftKey || !onResizeElement) return;
                           if (edge === "start" && !capabilities.canTrimStart) return;
@@ -1548,7 +1628,9 @@ export const Timeline = memo(function Timeline({
                         onClick={(e) => {
                           e.stopPropagation();
                           if (suppressClickRef.current) return;
-                          setSelectedElementId(isSelected ? null : elementKey);
+                          const nextElement = isSelected ? null : el;
+                          setSelectedElementId(nextElement ? elementKey : null);
+                          onSelectElement?.(nextElement);
                         }}
                         onDoubleClick={(e) => {
                           e.stopPropagation();
@@ -1652,8 +1734,8 @@ export const Timeline = memo(function Timeline({
         </div>
       </div>
 
-      {/* Keyboard shortcut hint — always visible */}
-      {!showPopover && !rangeSelection && (
+      {/* Keyboard shortcut hint */}
+      {showShortcutHint && !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"

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

@@ -0,0 +1,92 @@
+import { describe, expect, it } from "vitest";
+import { getTimelineClipControlPresentation } from "./TimelineClip";
+
+describe("getTimelineClipControlPresentation", () => {
+  it("collapses persistent controls for compact clips until the clip is interactive", () => {
+    expect(
+      getTimelineClipControlPresentation({
+        widthPx: 42,
+        isHovered: false,
+        isSelected: false,
+        isInspectorActive: false,
+        isThumbnailActive: false,
+        isDragging: false,
+      }),
+    ).toMatchObject({
+      compact: true,
+      showControls: false,
+    });
+  });
+
+  it("shows compact controls when the clip is hovered, selected, or active", () => {
+    expect(
+      getTimelineClipControlPresentation({
+        widthPx: 42,
+        isHovered: true,
+        isSelected: false,
+        isInspectorActive: false,
+        isThumbnailActive: false,
+        isDragging: false,
+      }),
+    ).toMatchObject({
+      compact: true,
+      showControls: true,
+    });
+
+    expect(
+      getTimelineClipControlPresentation({
+        widthPx: 42,
+        isHovered: false,
+        isSelected: false,
+        isInspectorActive: true,
+        isThumbnailActive: false,
+        isDragging: false,
+      }).showControls,
+    ).toBe(true);
+  });
+
+  it("keeps controls visible on wide clips", () => {
+    expect(
+      getTimelineClipControlPresentation({
+        widthPx: 120,
+        isHovered: false,
+        isSelected: false,
+        isInspectorActive: false,
+        isThumbnailActive: false,
+        isDragging: false,
+      }),
+    ).toMatchObject({
+      compact: false,
+      showControls: true,
+    });
+  });
+
+  it("treats medium-width clips as compact so dense tracks do not turn into icon grids", () => {
+    expect(
+      getTimelineClipControlPresentation({
+        widthPx: 96,
+        isHovered: false,
+        isSelected: false,
+        isInspectorActive: false,
+        isThumbnailActive: false,
+        isDragging: false,
+      }),
+    ).toMatchObject({
+      compact: true,
+      showControls: false,
+    });
+  });
+
+  it("hides controls while dragging", () => {
+    expect(
+      getTimelineClipControlPresentation({
+        widthPx: 120,
+        isHovered: true,
+        isSelected: true,
+        isInspectorActive: true,
+        isThumbnailActive: true,
+        isDragging: true,
+      }).showControls,
+    ).toBe(false);
+  });
+});

package/src/player/components/TimelineClip.tsx

@@ -17,15 +17,67 @@ interface TimelineClipProps {
   theme?: TimelineTheme;
   trackStyle: TimelineTrackStyle;
   isComposition: boolean;
+  isInspectorActive?: boolean;
+  isThumbnailActive?: boolean;
+  thumbnailLabel?: string;
+  childCount?: number;
   onHoverStart: () => void;
   onHoverEnd: () => void;
   onPointerDown?: (e: React.PointerEvent) => void;
   onResizeStart?: (edge: "start" | "end", e: React.PointerEvent) => void;
+  onInspectorClick?: (e: React.MouseEvent) => void;
+  onThumbnailClick?: (e: React.MouseEvent) => void;
   onClick: (e: React.MouseEvent) => void;
   onDoubleClick: (e: React.MouseEvent) => void;
   children?: ReactNode;
 }
 
+export const TIMELINE_CLIP_CONTROL_Z_INDEX = 20;
+
+const COMPACT_CLIP_CONTROL_WIDTH = 112;
+
+interface TimelineClipControlPresentationInput {
+  widthPx: number;
+  isSelected: boolean;
+  isHovered: boolean;
+  isInspectorActive: boolean;
+  isThumbnailActive: boolean;
+  isDragging: boolean;
+}
+
+export interface TimelineClipControlPresentation {
+  compact: boolean;
+  showControls: boolean;
+  containerClassName: string;
+  buttonClassName: string;
+  iconSize: number;
+}
+
+export function getTimelineClipControlPresentation({
+  widthPx,
+  isSelected,
+  isHovered,
+  isInspectorActive,
+  isThumbnailActive,
+  isDragging,
+}: TimelineClipControlPresentationInput): TimelineClipControlPresentation {
+  const compact = widthPx < COMPACT_CLIP_CONTROL_WIDTH;
+  const isInteractive = isHovered || isSelected || isInspectorActive || isThumbnailActive;
+  const showControls = !isDragging && (!compact || isInteractive);
+
+  return {
+    compact,
+    showControls,
+    containerClassName: compact
+      ? "absolute right-1 top-1 flex items-center gap-1"
+      : "absolute right-2 top-2 flex items-center gap-1",
+    buttonClassName: compact
+      ? "flex h-5 w-5 items-center justify-center rounded-[7px]"
+      : "flex h-6 w-6 items-center justify-center rounded-md",
+    iconSize: compact ? 12 : 14,
+  };
+}
+
 export const TimelineClip = memo(function TimelineClip({
   el,
   pps,
@@ -37,10 +89,16 @@ export const TimelineClip = memo(function TimelineClip({
   theme = defaultTimelineTheme,
   trackStyle,
   isComposition,
+  isInspectorActive = false,
+  isThumbnailActive = false,
+  thumbnailLabel = "thumbnail",
+  childCount = 0,
   onHoverStart,
   onHoverEnd,
   onPointerDown,
   onResizeStart,
+  onInspectorClick,
+  onThumbnailClick,
   onClick,
   onDoubleClick,
   children,
@@ -62,7 +120,38 @@ export const TimelineClip = memo(function TimelineClip({
         : theme.clipShadow;
   const capabilities = getTimelineEditCapabilities(el);
   const displayLabel = el.label || el.id || el.tag;
+  const inspectorLabel =
+    childCount > 0
+      ? `${childCount} nested selectable layer${childCount === 1 ? "" : "s"}`
+      : "Inspect clip layer";
   const showHandles = handleOpacity > 0.01;
+  const baseBackgroundImage = isSelected ? theme.clipBackgroundActive : theme.clipBackground;
+  const controlPresentation = getTimelineClipControlPresentation({
+    widthPx,
+    isSelected,
+    isHovered,
+    isInspectorActive,
+    isThumbnailActive,
+    isDragging,
+  });
+  const glossBackgroundImage = isSelected
+    ? "linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0))"
+    : "linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0))";
+  const accentBackgroundImage = `linear-gradient(120deg, ${trackStyle.accent}${
+    isSelected ? "22" : "1e"
+  }, transparent 28%)`;
+  const compositionStripeBackgroundImage =
+    isComposition && !hasCustomContent
+      ? "repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(255,255,255,0.05) 3px, rgba(255,255,255,0.05) 6px)"
+      : undefined;
+  const clipBackgroundImage = [
+    compositionStripeBackgroundImage,
+    glossBackgroundImage,
+    accentBackgroundImage,
+    baseBackgroundImage,
+  ]
+    .filter(Boolean)
+    .join(", ");
 
   return (
     <div
@@ -76,13 +165,7 @@ export const TimelineClip = memo(function TimelineClip({
         top: clipY,
         bottom: clipY,
         borderRadius: theme.clipRadius,
-        background: isSelected
-          ? `linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)), linear-gradient(120deg, ${trackStyle.accent}22, transparent 28%), ${theme.clipBackgroundActive}`
-          : `linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0)), linear-gradient(120deg, ${trackStyle.accent}1e, transparent 28%), ${theme.clipBackground}`,
-        backgroundImage:
-          isComposition && !hasCustomContent
-            ? `repeating-linear-gradient(135deg, transparent, transparent 3px, rgba(255,255,255,0.05) 3px, rgba(255,255,255,0.05) 6px)`
-            : undefined,
+        backgroundImage: clipBackgroundImage,
         border: `1px solid ${borderColor}`,
         boxShadow,
         transition:
@@ -102,6 +185,157 @@ export const TimelineClip = memo(function TimelineClip({
       onClick={onClick}
       onDoubleClick={onDoubleClick}
     >
+      {childCount > 0 && controlPresentation.showControls && (
+        <button
+          type="button"
+          className={`absolute flex items-center gap-1 rounded-md border border-studio-accent/30 bg-neutral-950/75 text-[10px] font-semibold tabular-nums text-studio-accent shadow-lg shadow-black/25 backdrop-blur transition-colors hover:border-studio-accent/60 hover:bg-studio-accent/15 ${
+            controlPresentation.compact ? "left-1 top-1 h-5 px-1" : "left-2 top-2 h-6 px-1.5"
+          }`}
+          style={{ zIndex: TIMELINE_CLIP_CONTROL_Z_INDEX }}
+          title={inspectorLabel}
+          aria-label={inspectorLabel}
+          onPointerDown={(event) => {
+            event.stopPropagation();
+          }}
+          onClick={(event) => {
+            event.stopPropagation();
+            onInspectorClick?.(event);
+          }}
+        >
+          <svg
+            width={controlPresentation.compact ? "11" : "13"}
+            height={controlPresentation.compact ? "11" : "13"}
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            aria-hidden="true"
+          >
+            <rect x="4" y="4" width="6" height="6" rx="1" />
+            <rect x="14" y="4" width="6" height="6" rx="1" />
+            <rect x="4" y="14" width="6" height="6" rx="1" />
+            <path d="M14 17h6" />
+          </svg>
+          {childCount}
+        </button>
+      )}
+      {onInspectorClick &&
+        controlPresentation.compact &&
+        !controlPresentation.showControls &&
+        !isDragging && (
+          <button
+            type="button"
+            className="group/clip-inspect absolute right-1 top-1/2 flex h-7 w-2 -translate-y-1/2 items-center justify-center rounded-full border border-white/15 bg-neutral-950/70 text-neutral-300 shadow-lg shadow-black/25 backdrop-blur transition-all hover:w-5 hover:border-white/30 hover:bg-neutral-950/90 focus:w-5 focus:border-studio-accent/60 focus:bg-studio-accent/15 focus:outline-none"
+            style={{ zIndex: TIMELINE_CLIP_CONTROL_Z_INDEX }}
+            title={inspectorLabel}
+            aria-label={inspectorLabel}
+            onPointerDown={(event) => {
+              event.stopPropagation();
+            }}
+            onClick={(event) => {
+              event.stopPropagation();
+              onInspectorClick(event);
+            }}
+          >
+            <svg
+              className="opacity-0 transition-opacity group-hover/clip-inspect:opacity-100 group-focus/clip-inspect:opacity-100"
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.8"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              aria-hidden="true"
+            >
+              <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z" />
+              <circle cx="12" cy="12" r="3" />
+            </svg>
+          </button>
+        )}
+      {(onThumbnailClick || onInspectorClick) && controlPresentation.showControls && (
+        <div
+          className={controlPresentation.containerClassName}
+          style={{ zIndex: TIMELINE_CLIP_CONTROL_Z_INDEX }}
+        >
+          {onThumbnailClick && (
+            <button
+              type="button"
+              className={`${controlPresentation.buttonClassName} border shadow-lg shadow-black/25 backdrop-blur transition-colors ${
+                isThumbnailActive
+                  ? "border-studio-accent/60 bg-studio-accent/18 text-studio-accent"
+                  : "border-white/12 bg-neutral-950/70 text-neutral-400 hover:border-white/24 hover:text-neutral-100"
+              }`}
+              title={
+                isThumbnailActive ? `Hide clip ${thumbnailLabel}` : `Show clip ${thumbnailLabel}`
+              }
+              aria-label={
+                isThumbnailActive ? `Hide clip ${thumbnailLabel}` : `Show clip ${thumbnailLabel}`
+              }
+              onPointerDown={(event) => {
+                event.stopPropagation();
+              }}
+              onClick={(event) => {
+                event.stopPropagation();
+                onThumbnailClick(event);
+              }}
+            >
+              <svg
+                width={controlPresentation.iconSize}
+                height={controlPresentation.iconSize}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.8"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+              >
+                <rect x="3" y="5" width="18" height="14" rx="2" />
+                <circle cx="8" cy="10" r="1.5" />
+                <path d="m4 17 5-5 4 4 2-2 5 5" />
+              </svg>
+            </button>
+          )}
+          {onInspectorClick && (
+            <button
+              type="button"
+              className={`${controlPresentation.buttonClassName} border shadow-lg shadow-black/25 backdrop-blur transition-colors ${
+                isInspectorActive
+                  ? "border-studio-accent/60 bg-studio-accent/18 text-studio-accent"
+                  : "border-white/12 bg-neutral-950/70 text-neutral-400 hover:border-white/24 hover:text-neutral-100"
+              }`}
+              title={inspectorLabel}
+              aria-label={inspectorLabel}
+              onPointerDown={(event) => {
+                event.stopPropagation();
+              }}
+              onClick={(event) => {
+                event.stopPropagation();
+                onInspectorClick(event);
+              }}
+            >
+              <svg
+                width={controlPresentation.iconSize}
+                height={controlPresentation.iconSize}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.8"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+              >
+                <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6S2 12 2 12Z" />
+                <circle cx="12" cy="12" r="3" />
+              </svg>
+            </button>
+          )}
+        </div>
+      )}
       <div
         aria-hidden="true"
         role="presentation"

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

@@ -248,13 +248,28 @@ describe("getTimelineEditCapabilities", () => {
     });
   });
 
-  it("disables move and trims for generic motion clips even when patchable", () => {
+  it("allows moving generic motion clips while keeping trims blocked", () => {
     expect(
       getTimelineEditCapabilities({
         tag: "section",
         duration: 2,
         selector: ".feature-card",
       }),
+    ).toEqual({
+      canMove: true,
+      canTrimStart: false,
+      canTrimEnd: false,
+    });
+  });
+
+  it("keeps implicit layout layers selectable but not timeline-editable", () => {
+    expect(
+      getTimelineEditCapabilities({
+        duration: 8,
+        selector: ".scene-shell",
+        tag: "div",
+        timingSource: "implicit",
+      }),
     ).toEqual({
       canMove: false,
       canTrimStart: false,
@@ -428,7 +443,6 @@ describe("buildClipRangeSelection", () => {
     });
   });
 });
-
 describe("resolveTimelineAutoScroll", () => {
   it("does not scroll when the pointer stays away from the edges", () => {
     expect(
@@ -512,7 +526,6 @@ describe("buildTimelineElementAgentPrompt", () => {
     ).toContain("If this clip is animated with GSAP");
   });
 });
-
 describe("resolveTimelineResize", () => {
   it("shrinks clip duration from the right edge", () => {
     expect(