@hyperframes/studio 0.8.138 → 0.8.140

package/src/player/components/TimelineLanes.test.tsx

@@ -89,8 +89,11 @@ interface RenderLanesOptions {
   renderClipContent?: React.ComponentProps<typeof TimelineLanes>["renderClipContent"];
   snapGuide?: { time: number; type: "beat" | "clip-edge" | "playhead" } | null;
   withoutSelectHandler?: boolean;
+  pps?: number;
 }
 
+const lanePps = (options: RenderLanesOptions) => options.pps ?? 100;
+
 const selectHandlerFor = (
   options: RenderLanesOptions,
   handler: (element: TimelineElement | null) => void,
@@ -102,12 +105,14 @@ function renderLanes(options: RenderLanesOptions = {}): {
   rerender: (next: RenderLanesOptions) => void;
   setSelectedElementId: ReturnType<typeof vi.fn>;
   onSelectElement: ReturnType<typeof vi.fn>;
+  onRazorSplit: ReturnType<typeof vi.fn>;
 } {
   const host = document.createElement("div");
   document.body.append(host);
   const root = createRoot(host);
   const setSelectedElementId = vi.fn();
   const onSelectElement = vi.fn();
+  const onRazorSplit = vi.fn();
   const render = (next: RenderLanesOptions) => {
     const elements = next.elements ?? [element("clip-a", TRACK_A)];
     const gsapAnimations = next.animations ?? new Map<string, GsapAnimation[]>();
@@ -124,7 +129,7 @@ function renderLanes(options: RenderLanesOptions = {}): {
       usePlayerStore.setState({ expandedClipIds: new Set(next.expandedClipIds ?? []) });
       root.render(
         <TimelineLanes
-          pps={100}
+          pps={lanePps(next)}
           contentOrigin={232}
           contentGutter={32}
           trackContentWidth={800}
@@ -186,14 +191,14 @@ function renderLanes(options: RenderLanesOptions = {}): {
           onResizeElement={vi.fn()}
           onMoveElement={vi.fn()}
           onSelectElement={selectHandlerFor(next, onSelectElement)}
-          onRazorSplit={vi.fn()}
+          onRazorSplit={onRazorSplit}
           onRazorSplitAll={vi.fn()}
         />,
       );
     });
   };
   render(options);
-  return { host, root, rerender: render, setSelectedElementId, onSelectElement };
+  return { host, root, rerender: render, setSelectedElementId, onSelectElement, onRazorSplit };
 }
 
 function visibilityLabels(host: HTMLElement): (string | null)[] {
@@ -586,12 +591,18 @@ describe("TimelineLanes clip joins", () => {
 
     const joins = view.host.querySelectorAll<HTMLElement>("[data-timeline-clip-join]");
     expect(joins).toHaveLength(1);
-    expect(joins[0]?.style.left).toBe("200px");
+    // Both sit in one-second layers 100px wide: 200% is 200px, at the 2 s join.
+    const layerWidth = (el: Element | null | undefined) =>
+      (el?.closest("[data-timeline-time-layer]") as HTMLElement | null)?.style.width;
+    expect(joins[0]?.style.left).toBe("200%");
+    expect(layerWidth(joins[0])).toBe("100px");
     expect(joins[0]?.style.width).toBe("1px");
     expect(joins[0]?.style.background).toBe(defaultTimelineTheme.rowBackground);
     const clipB = view.host.querySelector<HTMLElement>('[data-el-id="clip-b"]');
-    expect(clipB?.style.left).toBe("200px");
-    expect(clipB?.style.width).toBe("150px");
+    expect(clipB?.style.left).toBe("200%");
+    expect(clipB?.style.width).toBe("150%");
+    expect(clipB?.style.minWidth).toBe("4px");
+    expect(layerWidth(clipB)).toBe("100px");
     act(() => view.root.unmount());
   });
 
@@ -624,3 +635,37 @@ describe("TimelineLanes transition seams", () => {
     act(() => view.root.unmount());
   });
 });
+
+describe("TimelineLanes clips during a zoom", () => {
+  afterEach(() => {
+    usePlayerStore.setState({ activeTool: "select" });
+  });
+
+  it("leaves a clip unrendered by a zoom step that does not change what it draws", () => {
+    const renderClipContent = vi.fn(() => null);
+    const clip = { ...element("clip-a", TRACK_A), start: 0, duration: 2 };
+    const view = renderLanes({ elements: [clip], renderClipContent, pps: 100 });
+    const drawn = renderClipContent.mock.calls.length;
+    // 200px to 220px: still a labelled clip with handles.
+    view.rerender({ elements: [clip], renderClipContent, pps: 110 });
+    expect(renderClipContent.mock.calls.length).toBe(drawn);
+    // 40px: the clip drops its label, so it draws again.
+    view.rerender({ elements: [clip], renderClipContent, pps: 20 });
+    expect(renderClipContent.mock.calls.length).toBeGreaterThan(drawn);
+    act(() => view.root.unmount());
+  });
+
+  it("splits with the razor at the time under the pointer at the current zoom", () => {
+    usePlayerStore.setState({ activeTool: "razor" });
+    const clip = { ...element("clip-a", TRACK_A), start: 0, duration: 2 };
+    const view = renderLanes({ elements: [clip], pps: 100 });
+    view.rerender({ elements: [clip], pps: 105 });
+    act(() => {
+      view.host
+        .querySelector('[data-el-id="clip-a"]')
+        ?.dispatchEvent(new MouseEvent("click", { bubbles: true, clientX: 105 }));
+    });
+    expect(view.onRazorSplit).toHaveBeenCalledWith(expect.objectContaining({ id: "clip-a" }), 1);
+    act(() => view.root.unmount());
+  });
+});

package/src/player/components/TimelineLanes.tsx

@@ -1,6 +1,6 @@
-import { Fragment, useId, useMemo, type CSSProperties } from "react";
+import { Fragment, useId, useMemo, useRef, type CSSProperties } from "react";
 import { BeatStrip, BeatBackgroundLines } from "./BeatStrip";
-import { TimelineClip } from "./TimelineClip";
+import { TimelineLaneClip, type TimelineLaneClipActions } from "./TimelineLaneClip";
 import { TimelineCompactDiamonds } from "./TimelineCompactDiamonds";
 import { TimelinePropertyLanes } from "./TimelinePropertyLanes";
 import { TimelineAutomationLaneSlot } from "./TimelineAutomationLaneSlot";
@@ -10,6 +10,8 @@ import { TimelineTrackHeader } from "./TimelineTrackHeader";
 import { TimelineGroupRow } from "./TimelineGroupRow";
 import { useTimelineLaneRowIndexes, useTimelineGroupDisclosure } from "./useTimelineLaneRowIndexes";
 import { useTimelineClipDisclosure } from "./useTimelineClipDisclosure";
+import { TimelineTimeLayer } from "./TimelineTimeLayer";
+import { clipWidthPx } from "./TimelineClip";
 import {
   isTrackRowExpanded,
   resolveTrackKeyframeClip,
@@ -24,8 +26,7 @@ import { isMultiDragPassenger, multiDragPassengerOffsetPx } from "./timelineMult
 import { useTimelineMultiDragActorWindows } from "./useTimelineMultiDragActorWindows";
 import type { TimelineLanesProps } from "./timelineLaneProps";
 import { isAudioTimelineElement, isMusicTrack } from "../../utils/timelineInspector";
-import { createClipGestureHandlers } from "./timelineClipGestureHandlers";
-import { renderClipChildren, resolveClipRenderContext } from "./timelineClipChildren";
+import { resolveClipRenderContext } from "./timelineClipChildren";
 import { TimelineTrackRow } from "./TimelineTrackRow";
 import { isTimelineClipActive } from "./useTimelineActiveClips";
 import { queryTimelineClipIndex } from "../lib/timelineClipIndex";
@@ -143,6 +144,28 @@ export function TimelineLanes({
     onToggleRow: (row) => row.elementId && toggleClipExpandedTracked(row.elementId),
     onDrillDown,
   });
+  const clipActions = useRef<TimelineLaneClipActions>(null!);
+  clipActions.current = {
+    gestures: {
+      pps,
+      onResizeElement,
+      onMoveElement,
+      onRazorSplit,
+      onRazorSplitAll,
+      blockedClipRef,
+      suppressClickRef,
+      scrollRef,
+      setShowPopover,
+      setRangeSelection,
+      setResizingClip,
+      setDraggedClip,
+      setSelectedElementId,
+      onSelectElement,
+    },
+    setHoveredClip,
+    onContextMenuClip,
+    onDrillDown,
+  };
   return (
     <div
       role="treegrid"
@@ -330,6 +353,7 @@ export function TimelineLanes({
               <div
                 role="gridcell"
                 aria-colindex={2}
+                data-timeline-zoom-scale=""
                 style={{
                   width: trackContentWidth,
                   marginLeft: contentGutter, // room for a 0% diamond left of t=0
@@ -368,181 +392,145 @@ export function TimelineLanes({
                     renderTimeRange={rowsVirtualized ? renderTimeRange : undefined}
                   />
                 )}
-                {
-                  // fallow-ignore-next-line complexity
-                  renderElements.map((el) => {
-                    const clipStyle = getTrackStyle(el.tag);
-                    const elementKey = getTimelineElementIdentity(el);
-                    // Only the track's active keyframe clip shows expanded lanes;
-                    // other clips (incl. siblings on a shared track) show compact
-                    // diamonds on their own bar instead.
-                    const isTrackKeyframeClip = elementKey === keyframeClipKey;
-                    const showsLanes = isTrackKeyframeClip && rowExpanded;
-                    const capabilities = getClipCapabilities(el);
-                    const isSelected =
-                      selectedElementId === elementKey || selectedElementIds.has(elementKey);
-                    const isComposition = !!el.compositionSrc;
-                    // Element identity stays stable across clip splices and reorders.
-                    const clipKey = elementKey;
-                    const isDraggingClip =
-                      draggedClip?.started === true &&
-                      draggedElement != null &&
-                      getTimelineElementIdentity(draggedElement) === elementKey;
-                    if (isDraggingClip) return null;
-                    const previewElement = getPreviewElement(el);
-                    const renderContext = resolveClipRenderContext(
-                      previewElement,
-                      visibleTimeRange,
-                      isSelected || hoveredClip === clipKey || pinnedClipIdentities.has(clipKey),
-                    );
-                    // Passenger of a live multi-drag: preserve the formation without changing
-                    // the passenger's timeline data until the owning drag commits.
-                    const isPassenger =
-                      multiDragPreview != null && isMultiDragPassenger(clipKey, multiDragPreview);
-                    const passengerStyle = isPassenger
-                      ? passengerStyleAt(multiDragPassengerOffsetPx(clipKey, pps, multiDragPreview))
-                      : undefined;
-                    const clipGestures = createClipGestureHandlers(
-                      el,
-                      elementKey,
-                      previewElement,
-                      capabilities,
-                      {
-                        pps,
-                        onResizeElement,
-                        onMoveElement,
-                        onRazorSplit,
-                        onRazorSplitAll,
-                        blockedClipRef,
-                        suppressClickRef,
-                        scrollRef,
-                        setShowPopover,
-                        setRangeSelection,
-                        setResizingClip,
-                        setDraggedClip,
-                        setSelectedElementId,
-                        onSelectElement,
-                      },
-                    );
-                    const clip = (
-                      <TimelineClip
-                        key={clipKey}
-                        onContextMenu={(e: React.MouseEvent) => {
-                          e.preventDefault();
-                          onContextMenuClip?.(e, el);
-                        }}
-                        el={previewElement}
-                        pps={pps}
-                        passengerStyle={passengerStyle}
-                        clipY={CLIP_Y}
-                        clipHeight={clipBarHeight}
-                        isSelected={isSelected}
-                        isHovered={hoveredClip === clipKey}
-                        isDragging={false}
-                        isActive={isTimelineClipActive(previewElement, currentTime)}
-                        hasCustomContent={!!renderClipContent}
-                        capabilities={capabilities}
-                        theme={theme}
-                        isComposition={isComposition}
-                        tabIndex={
-                          keyboard.rovingTargetId === timelineClipFocusId(elementKey) ? 0 : -1
-                        }
-                        onHoverStart={() => setHoveredClip(clipKey)}
-                        onHoverEnd={() => setHoveredClip(null)}
-                        onResizeStart={clipGestures.onResizeStart}
-                        onPointerDown={clipGestures.onPointerDown}
-                        onClick={clipGestures.onClick}
-                        onDoubleClick={(e) => {
-                          e.stopPropagation();
-                          if (suppressClickRef.current) return;
-                          if (isComposition && onDrillDown) onDrillDown(el);
-                        }}
-                      >
-                        {renderClipChildren(
-                          previewElement,
-                          clipStyle,
-                          renderClipContent,
-                          renderClipOverlay,
-                          renderContext,
-                        )}
-                      </TimelineClip>
-                    );
-                    const compactKeyframes = keyframeCache?.get(elementKey);
-                    const compactDiamonds = !showsLanes && compactKeyframes && (
-                      <TimelineCompactDiamonds
-                        key={`${clipKey}-diamonds`}
-                        element={previewElement}
-                        elementId={elementKey}
-                        keyframesData={compactKeyframes}
-                        pixelsPerSecond={pps}
-                        rowHeight={rowHeight}
-                        beatsActive={beatStripOnTrack}
-                        accentColor={clipStyle.accent}
-                        isSelected={isSelected}
-                        passengerStyle={passengerStyle}
-                        currentTime={currentTime}
-                        selectedKeyframes={selectedKeyframes}
-                        rovingTargetId={keyboard.rovingTargetId}
-                        onClickKeyframe={onClickKeyframe}
-                        onShiftClickKeyframe={onShiftClickKeyframe}
-                        onContextMenuKeyframe={onContextMenuKeyframe}
-                        onMoveKeyframe={onMoveKeyframe}
-                        onSelectSegment={onSelectSegment}
-                        suppressClickRef={suppressClickRef}
-                      />
-                    );
-                    // Keep this shell mounted while collapsed so aria-controls stays valid
-                    // and multi-drag cannot remount the subtree mid-gesture.
-                    const propertyLanes = isTrackKeyframeClip && (
-                      <TimelinePropertyLanes
-                        key={`${clipKey}-property-lanes`}
-                        id={lanesId}
-                        animations={showsLanes ? (gsapAnimations.get(elementKey) ?? []) : []}
-                        // clipTimingStart, not the raw start: an expanded sub-comp
-                        // child's start is host-absolute while its tweens are
-                        // local to its own file.
-                        clipStart={clipTimingStart(previewElement)}
-                        clipDuration={previewElement.duration}
-                        clipLeftPx={previewElement.start * pps}
-                        clipWidthPx={Math.max(previewElement.duration * pps, 4)}
-                        passengerStyle={passengerStyle}
-                        accentColor={clipStyle.accent}
-                        isSelected={isSelected}
-                        currentPercentage={
-                          previewElement.duration > 0
-                            ? ((currentTime - previewElement.start) / previewElement.duration) * 100
-                            : 0
-                        }
-                        elementId={elementKey}
-                        selectedKeyframes={selectedKeyframes}
-                        rovingTargetId={keyboard.rovingTargetId}
-                        onSelectSegment={(target) => onSelectSegment?.(elementKey, target)}
-                        onClickKeyframe={(target) => onClickKeyframe?.(previewElement, target)}
-                        onShiftClickKeyframe={(target) =>
-                          onShiftClickKeyframe?.(elementKey, target)
-                        }
-                        onContextMenuKeyframe={(e, target) =>
-                          onContextMenuKeyframe?.(e, elementKey, target)
-                        }
-                        onMoveKeyframe={(target, toClipPercentage) =>
-                          onMoveKeyframe?.(elementKey, target, toClipPercentage) ??
-                          Promise.resolve(false)
-                        }
-                        suppressClickRef={suppressClickRef}
-                      />
-                    );
+                <TimelineTimeLayer pixelsPerSecond={pps}>
+                  {
+                    // fallow-ignore-next-line complexity
+                    renderElements.map((el) => {
+                      const clipStyle = getTrackStyle(el.tag);
+                      const elementKey = getTimelineElementIdentity(el);
+                      // Only the track's active keyframe clip shows expanded lanes;
+                      // other clips (incl. siblings on a shared track) show compact
+                      // diamonds on their own bar instead.
+                      const isTrackKeyframeClip = elementKey === keyframeClipKey;
+                      const showsLanes = isTrackKeyframeClip && rowExpanded;
+                      const capabilities = getClipCapabilities(el);
+                      const isSelected =
+                        selectedElementId === elementKey || selectedElementIds.has(elementKey);
+                      // Element identity stays stable across clip splices and reorders.
+                      const clipKey = elementKey;
+                      const isDraggingClip =
+                        draggedClip?.started === true &&
+                        draggedElement != null &&
+                        getTimelineElementIdentity(draggedElement) === elementKey;
+                      if (isDraggingClip) return null;
+                      const previewElement = getPreviewElement(el);
+                      const renderContext = resolveClipRenderContext(
+                        previewElement,
+                        visibleTimeRange,
+                        isSelected || hoveredClip === clipKey || pinnedClipIdentities.has(clipKey),
+                      );
+                      // Passenger of a live multi-drag: preserve the formation without changing
+                      // the passenger's timeline data until the owning drag commits.
+                      const isPassenger =
+                        multiDragPreview != null && isMultiDragPassenger(clipKey, multiDragPreview);
+                      const passengerStyle = isPassenger
+                        ? passengerStyleAt(
+                            multiDragPassengerOffsetPx(clipKey, pps, multiDragPreview),
+                          )
+                        : undefined;
+                      const clip = (
+                        <TimelineLaneClip
+                          key={clipKey}
+                          el={el}
+                          previewElement={previewElement}
+                          elementKey={elementKey}
+                          capabilities={capabilities}
+                          pps={pps}
+                          passengerStyle={passengerStyle}
+                          clipBarHeight={clipBarHeight}
+                          isSelected={isSelected}
+                          isHovered={hoveredClip === clipKey}
+                          isActive={isTimelineClipActive(previewElement, currentTime)}
+                          tabIndex={
+                            keyboard.rovingTargetId === timelineClipFocusId(elementKey) ? 0 : -1
+                          }
+                          priority={renderContext.priority}
+                          rich={renderContext.rich}
+                          theme={theme}
+                          clipStyle={clipStyle}
+                          renderClipContent={renderClipContent}
+                          renderClipOverlay={renderClipOverlay}
+                          actions={clipActions}
+                        />
+                      );
+                      const compactKeyframes = keyframeCache?.get(elementKey);
+                      const compactDiamonds = !showsLanes && compactKeyframes && (
+                        <TimelineCompactDiamonds
+                          key={`${clipKey}-diamonds`}
+                          element={previewElement}
+                          elementId={elementKey}
+                          keyframesData={compactKeyframes}
+                          pixelsPerSecond={pps}
+                          rowHeight={rowHeight}
+                          beatsActive={beatStripOnTrack}
+                          accentColor={clipStyle.accent}
+                          isSelected={isSelected}
+                          passengerStyle={passengerStyle}
+                          currentTime={currentTime}
+                          selectedKeyframes={selectedKeyframes}
+                          rovingTargetId={keyboard.rovingTargetId}
+                          onClickKeyframe={onClickKeyframe}
+                          onShiftClickKeyframe={onShiftClickKeyframe}
+                          onContextMenuKeyframe={onContextMenuKeyframe}
+                          onMoveKeyframe={onMoveKeyframe}
+                          onSelectSegment={onSelectSegment}
+                          suppressClickRef={suppressClickRef}
+                        />
+                      );
+                      // Keep this shell mounted while collapsed so aria-controls stays valid
+                      // and multi-drag cannot remount the subtree mid-gesture.
+                      const propertyLanes = isTrackKeyframeClip && (
+                        <TimelinePropertyLanes
+                          key={`${clipKey}-property-lanes`}
+                          id={lanesId}
+                          animations={showsLanes ? (gsapAnimations.get(elementKey) ?? []) : []}
+                          // clipTimingStart, not the raw start: an expanded sub-comp
+                          // child's start is host-absolute while its tweens are
+                          // local to its own file.
+                          clipStart={clipTimingStart(previewElement)}
+                          clipDuration={previewElement.duration}
+                          clipLeftPx={previewElement.start * pps}
+                          clipWidthPx={clipWidthPx(previewElement, pps)}
+                          passengerStyle={passengerStyle}
+                          accentColor={clipStyle.accent}
+                          isSelected={isSelected}
+                          currentPercentage={
+                            previewElement.duration > 0
+                              ? ((currentTime - previewElement.start) / previewElement.duration) *
+                                100
+                              : 0
+                          }
+                          elementId={elementKey}
+                          selectedKeyframes={selectedKeyframes}
+                          rovingTargetId={keyboard.rovingTargetId}
+                          onSelectSegment={(target) => onSelectSegment?.(elementKey, target)}
+                          onClickKeyframe={(target) => onClickKeyframe?.(previewElement, target)}
+                          onShiftClickKeyframe={(target) =>
+                            onShiftClickKeyframe?.(elementKey, target)
+                          }
+                          onContextMenuKeyframe={(e, target) =>
+                            onContextMenuKeyframe?.(e, elementKey, target)
+                          }
+                          onMoveKeyframe={(target, toClipPercentage) =>
+                            onMoveKeyframe?.(elementKey, target, toClipPercentage) ??
+                            Promise.resolve(false)
+                          }
+                          suppressClickRef={suppressClickRef}
+                        />
+                      );
 
-                    // No wrapper node per clip, and the same Fragment whether or not it rides a
-                    // drag, so joining or leaving one restyles it, never remounts it.
-                    return (
-                      <Fragment key={clipKey}>
-                        {clip}
-                        {compactDiamonds}
-                        {propertyLanes}
-                      </Fragment>
-                    );
-                  })
-                }
+                      // No wrapper node per clip, and the same Fragment whether or not it rides a
+                      // drag, so joining or leaving one restyles it, never remounts it.
+                      return (
+                        <Fragment key={clipKey}>
+                          {clip}
+                          {compactDiamonds}
+                          {propertyLanes}
+                        </Fragment>
+                      );
+                    })
+                  }
+                </TimelineTimeLayer>
                 <TimelineTransitionOverlays
                   seams={transitionSeamsByTrack.get(trackNum) ?? []}
                   rowElements={draggedClip?.started ? [] : automationElements}

package/src/player/components/TimelineRuler.tsx

@@ -107,6 +107,7 @@ export const TimelineRuler = memo(function TimelineRuler({
       {/* Background SVG — beat lines only; major-tick gridlines removed so only
           the ruler's own small ticks mark intervals (no full-height lines). */}
       <svg
+        data-timeline-zoom-scale=""
         className="absolute pointer-events-none"
         style={{ left: contentOrigin, width: trackContentWidth, zIndex: 0 }}
         height={totalH}
@@ -152,6 +153,7 @@ export const TimelineRuler = memo(function TimelineRuler({
         {/* Breathing pad before 00:00 is folded into contentOrigin (see
             Timeline.tsx: GUTTER + TRACKS_LEFT_PAD), so no separate pad div. */}
         <div
+          data-timeline-zoom-scale=""
           className="relative overflow-hidden"
           style={{
             height: RULER_H,

package/src/player/components/TimelineTimeLayer.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+
+/**
+ * A box one second wide at the current zoom. What sits in it places itself in percent of it
+ * (`left: start * 100%`), so a zoom step rewrites this one width and no clip's style changes.
+ */
+export function TimelineTimeLayer({
+  pixelsPerSecond,
+  children,
+}: {
+  pixelsPerSecond: number;
+  children: ReactNode;
+}) {
+  return (
+    <div
+      data-timeline-time-layer=""
+      className="absolute inset-y-0 left-0"
+      style={{ width: pixelsPerSecond }}
+    >
+      {children}
+    </div>
+  );
+}
+
+export const timeLayerPercent = (seconds: number) => `${seconds * 100}%`;