@hyperframes/studio 0.7.39 → 0.7.41

package/src/player/components/TimelineCanvas.tsx

@@ -1,4 +1,5 @@
 import { memo, type ReactNode } from "react";
+import { Eye, EyeSlash } from "@phosphor-icons/react";
 import { BeatStrip, BeatBackgroundLines } from "./BeatStrip";
 import { TimelineClip } from "./TimelineClip";
 import { TimelineClipDiamonds } from "./TimelineClipDiamonds";
@@ -24,21 +25,15 @@ import { SPLIT_BOUNDARY_EPSILON_S } from "../../utils/timelineElementSplit";
 import { useTimelineEditContextOptional } from "../../contexts/TimelineEditContext";
 import { isMusicTrack } from "../../utils/timelineInspector";
 
-function ClipLabel({ element, color }: { element: TimelineElement; color: string }) {
+function ClipLintDot({ element }: { element: TimelineElement }) {
   const lint = usePlayerStore((s) => s.lintFindingsByElement.get(element.key ?? element.id));
+  if (!lint || lint.count === 0) return null;
   return (
     <span
-      className="flex items-center gap-1 truncate text-[10px] font-medium leading-none"
-      style={{ color }}
-    >
-      {element.label || element.id || element.tag}
-      {lint && lint.count > 0 && (
-        <span
-          className="flex-shrink-0 w-1.5 h-1.5 rounded-full bg-amber-400"
-          title={lint.messages.join("\n")}
-        />
-      )}
-    </span>
+      className="absolute w-1.5 h-1.5 rounded-full bg-amber-400"
+      style={{ top: 7, right: 7 }}
+      title={lint.messages.join("\n")}
+    />
   );
 }
 
@@ -50,7 +45,6 @@ interface TimelineCanvasProps {
   totalH: number;
   effectiveDuration: number;
   majorTickInterval: number;
-  shiftHeld: boolean;
   rangeSelection: TimelineRangeSelection | null;
   theme: TimelineTheme;
   displayTrackOrder: number[];
@@ -109,7 +103,6 @@ export const TimelineCanvas = memo(function TimelineCanvas({
   totalH,
   effectiveDuration,
   majorTickInterval,
-  shiftHeld,
   rangeSelection,
   theme,
   displayTrackOrder,
@@ -148,7 +141,7 @@ export const TimelineCanvas = memo(function TimelineCanvas({
   onContextMenuClip,
   beatAnalysis,
 }: TimelineCanvasProps) {
-  const { onResizeElement, onMoveElement, onRazorSplit, onRazorSplitAll } =
+  const { onResizeElement, onMoveElement, onToggleTrackHidden, onRazorSplit, onRazorSplitAll } =
     useTimelineEditContextOptional();
   const beatDragging = usePlayerStore((s) => s.beatDragging);
   const draggedElement = draggedClip?.element ?? null;
@@ -180,17 +173,12 @@ export const TimelineCanvas = memo(function TimelineCanvas({
   const renderClipChildren = (element: TimelineElement, clipStyle: TrackVisualStyle) => (
     <>
       {renderClipOverlay?.(element)}
-      <div
-        className={
-          renderClipContent
-            ? "absolute inset-0 overflow-hidden"
-            : "flex items-center overflow-hidden flex-1 min-w-0 px-3 gap-2"
-        }
-      >
-        {renderClipContent?.(element, clipStyle) ?? (
-          <ClipLabel element={element} color={clipStyle.label} />
-        )}
-      </div>
+      {!renderClipContent && <ClipLintDot element={element} />}
+      {renderClipContent && (
+        <div className="absolute inset-0 overflow-hidden">
+          {renderClipContent(element, clipStyle)}
+        </div>
+      )}
     </>
   );
 
@@ -204,258 +192,290 @@ export const TimelineCanvas = memo(function TimelineCanvas({
         totalH={totalH}
         effectiveDuration={effectiveDuration}
         majorTickInterval={majorTickInterval}
-        shiftHeld={shiftHeld}
-        rangeSelection={rangeSelection}
         theme={theme}
         beatAnalysis={beatAnalysis}
       />
 
-      {displayTrackOrder.map((trackNum) => {
-        const els = tracks.find(([t]) => t === trackNum)?.[1] ?? [];
-        const ts = trackStyles.get(trackNum) ?? getTrackStyle("");
-        const isPendingTrack =
-          draggedClip?.started === true && !trackOrder.includes(trackNum) && els.length === 0;
-        // The beat-dot strip occupies the top of this track's lane (active track,
-        // or the music track when nothing is selected). When shown, keyframe
-        // diamonds shrink + drop to the bottom half so they don't collide with it.
-        const beatStripOnTrack =
-          (beatAnalysis?.beatTimes?.length ?? 0) >= 2 &&
-          (selectedElementId
-            ? els.some((e) => (e.key ?? e.id) === selectedElementId)
-            : els.some(isMusicTrack));
-        return (
-          <div
-            key={trackNum}
-            className="relative flex"
-            style={{
-              height: TRACK_H,
-              background: theme.rowBackground,
-              borderBottom: `1px solid ${theme.rowBorder}`,
-            }}
-          >
+      {
+        // fallow-ignore-next-line complexity
+        displayTrackOrder.map((trackNum) => {
+          const els = tracks.find(([t]) => t === trackNum)?.[1] ?? [];
+          const ts = trackStyles.get(trackNum) ?? getTrackStyle("");
+          const isPendingTrack =
+            draggedClip?.started === true && !trackOrder.includes(trackNum) && els.length === 0;
+          const rowBackground =
+            displayTrackOrder.indexOf(trackNum) % 2 === 0 ? theme.rowBackground : "#0D0E12";
+          // The beat-dot strip occupies the top of this track's lane (active track,
+          // or the music track when nothing is selected). When shown, keyframe
+          // diamonds shrink + drop to the bottom half so they don't collide with it.
+          const beatStripOnTrack =
+            (beatAnalysis?.beatTimes?.length ?? 0) >= 2 &&
+            (selectedElementId
+              ? els.some((e) => (e.key ?? e.id) === selectedElementId)
+              : els.some(isMusicTrack));
+          const isTrackHidden = els.length > 0 && els.every((element) => element.hidden === true);
+          return (
             <div
-              className="flex-shrink-0 flex items-center justify-center"
+              key={trackNum}
+              className="relative flex"
               style={{
-                width: GUTTER,
-                background: theme.gutterBackground,
-                borderRight: `1px solid ${theme.gutterBorder}`,
+                height: TRACK_H,
+                background: rowBackground,
+                borderBottom: `1px solid ${theme.rowBorder}`,
               }}
             >
               <div
-                className="flex items-center justify-center"
+                className="sticky left-0 z-[12] flex-shrink-0 flex items-center justify-center"
                 style={{
-                  width: 18,
-                  height: 18,
-                  borderRadius: 6,
-                  backgroundColor: ts.iconBackground,
-                  border: `1px solid ${theme.gutterBorder}`,
-                  color: "#fff",
+                  width: GUTTER,
+                  background: theme.gutterBackground,
+                  borderRight: `1px solid ${theme.gutterBorder}`,
                 }}
               >
-                {ts.icon}
+                <button
+                  type="button"
+                  aria-label={isTrackHidden ? `Show track ${trackNum}` : `Hide track ${trackNum}`}
+                  title={isTrackHidden ? `Show track ${trackNum}` : `Hide track ${trackNum}`}
+                  className={`flex h-6 w-6 items-center justify-center rounded border-0 bg-transparent p-0 transition-colors focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-[-1px] focus-visible:outline-[#3CE6AC] ${
+                    isTrackHidden
+                      ? "text-[#3CE6AC] hover:text-white"
+                      : "text-white/35 hover:text-white/75"
+                  }`}
+                  onPointerDown={(e) => {
+                    e.stopPropagation();
+                  }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    void onToggleTrackHidden?.(trackNum, !isTrackHidden);
+                  }}
+                >
+                  {isTrackHidden ? (
+                    <EyeSlash size={14} weight="bold" aria-hidden="true" />
+                  ) : (
+                    <Eye size={14} weight="bold" aria-hidden="true" />
+                  )}
+                </button>
               </div>
-            </div>
-            <div style={{ width: trackContentWidth }} className="relative">
-              {/* Faint beat lines in every track's background (behind the clips);
-                  the active move-snap target is highlighted. */}
-              <BeatBackgroundLines
-                beatTimes={beatAnalysis?.beatTimes}
-                beatStrengths={beatAnalysis?.beatStrengths}
-                pps={pps}
-                highlightTime={draggedClip?.started ? draggedClip.snapBeatTime : null}
-              />
-              {/* Beat dots on the active track (the one holding the selection),
-                  falling back to the music track when nothing is selected. */}
-              {beatStripOnTrack && (
-                <BeatStrip
+              <div
+                style={{
+                  width: trackContentWidth,
+                  opacity: isTrackHidden ? 0.35 : 1,
+                  transition: "opacity 120ms ease",
+                }}
+                className="relative"
+              >
+                {/* Faint beat lines in every track's background (behind the clips);
+                    the active move-snap target is highlighted. */}
+                <BeatBackgroundLines
                   beatTimes={beatAnalysis?.beatTimes}
                   beatStrengths={beatAnalysis?.beatStrengths}
                   pps={pps}
+                  highlightTime={draggedClip?.started ? draggedClip.snapBeatTime : null}
                 />
-              )}
-              {isPendingTrack && (
-                <div
-                  className="absolute inset-0 flex items-center"
-                  style={{
-                    paddingLeft: 16,
-                    color: ts.label,
-                    fontSize: 11,
-                    letterSpacing: "0.06em",
-                    textTransform: "uppercase",
-                    opacity: 0.5,
-                  }}
-                >
-                  New track
-                </div>
-              )}
-              {els.map((el, i) => {
-                const clipStyle = getTrackStyle(el.tag);
-                const elementKey = el.key ?? el.id;
-                const capabilities = getTimelineEditCapabilities(el);
-                const isSelected = selectedElementId === elementKey;
-                const isComposition = !!el.compositionSrc;
-                const clipKey = `${elementKey}-${i}`;
-                const isDraggingClip =
-                  draggedClip?.started === true &&
-                  (draggedElement?.key ?? draggedElement?.id) === elementKey;
-                if (isDraggingClip) return null;
-                const previewElement = getPreviewElement(el);
-                return (
-                  <TimelineClip
-                    key={clipKey}
-                    onContextMenu={(e: React.MouseEvent) => {
-                      e.preventDefault();
-                      onContextMenuClip?.(e, el);
-                    }}
-                    el={previewElement}
+                {/* Beat dots on the active track (the one holding the selection),
+                    falling back to the music track when nothing is selected. */}
+                {beatStripOnTrack && (
+                  <BeatStrip
+                    beatTimes={beatAnalysis?.beatTimes}
+                    beatStrengths={beatAnalysis?.beatStrengths}
                     pps={pps}
-                    clipY={CLIP_Y}
-                    isSelected={isSelected}
-                    isHovered={hoveredClip === clipKey}
-                    isDragging={false}
-                    hasCustomContent={!!renderClipContent}
-                    capabilities={capabilities}
-                    theme={theme}
-                    trackStyle={clipStyle}
-                    isComposition={isComposition}
-                    onHoverStart={() => setHoveredClip(clipKey)}
-                    onHoverEnd={() => setHoveredClip(null)}
-                    onResizeStart={(edge, e) => {
-                      if (e.button !== 0 || e.shiftKey || !onResizeElement) return;
-                      if (edge === "start" && !capabilities.canTrimStart) return;
-                      if (edge === "end" && !capabilities.canTrimEnd) return;
-                      e.stopPropagation();
-                      blockedClipRef.current = null;
-                      setShowPopover(false);
-                      setRangeSelection(null);
-                      setResizingClip({
-                        element: el,
-                        edge,
-                        originClientX: e.clientX,
-                        previewStart: el.start,
-                        previewDuration: el.duration,
-                        previewPlaybackStart: el.playbackStart,
-                        started: false,
-                      });
-                    }}
-                    onPointerDown={(e) => {
-                      if (e.button !== 0) return;
-                      if (usePlayerStore.getState().activeTool === "razor") return;
-                      if (e.shiftKey) {
-                        shiftClickClipRef.current = {
-                          element: el,
-                          anchorX: e.clientX,
-                          anchorY: e.clientY,
-                        };
-                        return;
-                      }
-                      const target = e.currentTarget as HTMLElement;
-                      const rect = target.getBoundingClientRect();
-                      const blockedIntent = resolveBlockedTimelineEditIntent({
-                        width: rect.width,
-                        offsetX: e.clientX - rect.left,
-                        handleWidth: CLIP_HANDLE_W,
-                        capabilities,
-                      });
-                      if (
-                        blockedIntent &&
-                        ((blockedIntent === "move" && onMoveElement) ||
-                          (blockedIntent !== "move" && onResizeElement))
-                      ) {
-                        blockedClipRef.current = {
-                          element: el,
-                          intent: blockedIntent,
-                          originClientX: e.clientX,
-                          originClientY: e.clientY,
-                          started: false,
-                        };
-                        return;
-                      }
-                      if (!onMoveElement || !capabilities.canMove) return;
-                      blockedClipRef.current = null;
-                      setShowPopover(false);
-                      setRangeSelection(null);
-                      setDraggedClip({
-                        element: el,
-                        originClientX: e.clientX,
-                        originClientY: e.clientY,
-                        originScrollLeft: scrollRef.current?.scrollLeft ?? 0,
-                        originScrollTop: scrollRef.current?.scrollTop ?? 0,
-                        pointerClientX: e.clientX,
-                        pointerClientY: e.clientY,
-                        pointerOffsetX: e.clientX - rect.left,
-                        pointerOffsetY: e.clientY - rect.top,
-                        previewStart: el.start,
-                        previewTrack: el.track,
-                        snapBeatTime: null,
-                        started: false,
-                      });
-                      syncClipDragAutoScroll(e.clientX, e.clientY);
-                    }}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      if (suppressClickRef.current) return;
-                      const { activeTool } = usePlayerStore.getState();
-                      if (activeTool === "razor" && onRazorSplit) {
-                        const clipRect = (e.currentTarget as HTMLElement).getBoundingClientRect();
-                        const clickOffsetX = e.clientX - clipRect.left;
-                        const splitTime = previewElement.start + clickOffsetX / pps;
-                        const clampedTime = Math.max(
-                          previewElement.start + SPLIT_BOUNDARY_EPSILON_S,
-                          Math.min(
-                            previewElement.start +
-                              previewElement.duration -
-                              SPLIT_BOUNDARY_EPSILON_S,
-                            splitTime,
-                          ),
-                        );
-                        if (e.shiftKey && onRazorSplitAll) {
-                          onRazorSplitAll(clampedTime);
-                        } else {
-                          onRazorSplit(el, clampedTime);
-                        }
-                        return;
-                      }
-                      const nextElement = isSelected ? null : el;
-                      setSelectedElementId(nextElement ? elementKey : null);
-                      onSelectElement?.(nextElement);
-                    }}
-                    onDoubleClick={(e) => {
-                      e.stopPropagation();
-                      if (suppressClickRef.current) return;
-                      if (isComposition && onDrillDown) onDrillDown(el);
+                  />
+                )}
+                {isPendingTrack && (
+                  <div
+                    className="absolute inset-0 flex items-center"
+                    style={{
+                      paddingLeft: 16,
+                      color: ts.label,
+                      fontSize: 11,
+                      letterSpacing: "0.06em",
+                      textTransform: "uppercase",
+                      opacity: 0.5,
                     }}
                   >
-                    {renderClipChildren(previewElement, clipStyle)}
-                    {STUDIO_KEYFRAMES_ENABLED && keyframeCache?.get(elementKey) && (
-                      <TimelineClipDiamonds
-                        keyframesData={keyframeCache.get(elementKey)!}
-                        clipWidthPx={Math.max(previewElement.duration * pps, 4)}
-                        clipHeightPx={TRACK_H - 2 * CLIP_Y}
-                        beatsActive={beatStripOnTrack}
-                        accentColor={clipStyle.accent}
+                    New track
+                  </div>
+                )}
+                {
+                  // fallow-ignore-next-line complexity
+                  els.map((el) => {
+                    const clipStyle = getTrackStyle(el.tag);
+                    const elementKey = el.key ?? el.id;
+                    const capabilities = getTimelineEditCapabilities(el);
+                    const isSelected = selectedElementId === elementKey;
+                    const isComposition = !!el.compositionSrc;
+                    // elementKey (el.key ?? el.id) is already unique per clip; do NOT
+                    // fold in the map index, or a splice/reorder remounts every clip
+                    // at/after the change (DOM flash, drag interruption).
+                    const clipKey = elementKey;
+                    const isDraggingClip =
+                      draggedClip?.started === true &&
+                      (draggedElement?.key ?? draggedElement?.id) === elementKey;
+                    if (isDraggingClip) return null;
+                    const previewElement = getPreviewElement(el);
+                    return (
+                      <TimelineClip
+                        key={clipKey}
+                        onContextMenu={(e: React.MouseEvent) => {
+                          e.preventDefault();
+                          onContextMenuClip?.(e, el);
+                        }}
+                        el={previewElement}
+                        pps={pps}
+                        clipY={CLIP_Y}
                         isSelected={isSelected}
-                        currentPercentage={
-                          previewElement.duration > 0
-                            ? ((currentTime - previewElement.start) / previewElement.duration) * 100
-                            : 0
+                        isHovered={hoveredClip === clipKey}
+                        isDragging={false}
+                        hasCustomContent={!!renderClipContent}
+                        capabilities={capabilities}
+                        theme={theme}
+                        isComposition={isComposition}
+                        onHoverStart={() => setHoveredClip(clipKey)}
+                        onHoverEnd={() => setHoveredClip(null)}
+                        onResizeStart={(edge, e) => {
+                          if (e.button !== 0 || e.shiftKey || !onResizeElement) return;
+                          if (edge === "start" && !capabilities.canTrimStart) return;
+                          if (edge === "end" && !capabilities.canTrimEnd) return;
+                          e.stopPropagation();
+                          blockedClipRef.current = null;
+                          setShowPopover(false);
+                          setRangeSelection(null);
+                          setResizingClip({
+                            element: el,
+                            edge,
+                            originClientX: e.clientX,
+                            previewStart: el.start,
+                            previewDuration: el.duration,
+                            previewPlaybackStart: el.playbackStart,
+                            started: false,
+                          });
+                        }}
+                        onPointerDown={
+                          // fallow-ignore-next-line complexity
+                          (e) => {
+                            if (e.button !== 0) return;
+                            if (usePlayerStore.getState().activeTool === "razor") return;
+                            if (e.shiftKey) {
+                              shiftClickClipRef.current = {
+                                element: el,
+                                anchorX: e.clientX,
+                                anchorY: e.clientY,
+                              };
+                              return;
+                            }
+                            const target = e.currentTarget as HTMLElement;
+                            const rect = target.getBoundingClientRect();
+                            const blockedIntent = resolveBlockedTimelineEditIntent({
+                              width: rect.width,
+                              offsetX: e.clientX - rect.left,
+                              handleWidth: CLIP_HANDLE_W,
+                              capabilities,
+                            });
+                            if (
+                              blockedIntent &&
+                              ((blockedIntent === "move" && onMoveElement) ||
+                                (blockedIntent !== "move" && onResizeElement))
+                            ) {
+                              blockedClipRef.current = {
+                                element: el,
+                                intent: blockedIntent,
+                                originClientX: e.clientX,
+                                originClientY: e.clientY,
+                                started: false,
+                              };
+                              return;
+                            }
+                            if (!onMoveElement || !capabilities.canMove) return;
+                            blockedClipRef.current = null;
+                            setShowPopover(false);
+                            setRangeSelection(null);
+                            setDraggedClip({
+                              element: el,
+                              originClientX: e.clientX,
+                              originClientY: e.clientY,
+                              originScrollLeft: scrollRef.current?.scrollLeft ?? 0,
+                              originScrollTop: scrollRef.current?.scrollTop ?? 0,
+                              pointerClientX: e.clientX,
+                              pointerClientY: e.clientY,
+                              pointerOffsetX: e.clientX - rect.left,
+                              pointerOffsetY: e.clientY - rect.top,
+                              previewStart: el.start,
+                              previewTrack: el.track,
+                              snapBeatTime: null,
+                              started: false,
+                            });
+                            syncClipDragAutoScroll(e.clientX, e.clientY);
+                          }
                         }
-                        elementId={elementKey}
-                        selectedKeyframes={selectedKeyframes}
-                        onClickKeyframe={(pct) => onClickKeyframe?.(previewElement, pct)}
-                        onShiftClickKeyframe={onShiftClickKeyframe}
-                        onContextMenuKeyframe={onContextMenuKeyframe}
-                        onMoveKeyframe={onMoveKeyframe}
-                        suppressClickRef={suppressClickRef}
-                      />
-                    )}
-                  </TimelineClip>
-                );
-              })}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          if (suppressClickRef.current) return;
+                          const { activeTool } = usePlayerStore.getState();
+                          if (activeTool === "razor" && onRazorSplit) {
+                            const clipRect = (
+                              e.currentTarget as HTMLElement
+                            ).getBoundingClientRect();
+                            const clickOffsetX = e.clientX - clipRect.left;
+                            const splitTime = previewElement.start + clickOffsetX / pps;
+                            const clampedTime = Math.max(
+                              previewElement.start + SPLIT_BOUNDARY_EPSILON_S,
+                              Math.min(
+                                previewElement.start +
+                                  previewElement.duration -
+                                  SPLIT_BOUNDARY_EPSILON_S,
+                                splitTime,
+                              ),
+                            );
+                            if (e.shiftKey && onRazorSplitAll) {
+                              onRazorSplitAll(clampedTime);
+                            } else {
+                              onRazorSplit(el, clampedTime);
+                            }
+                            return;
+                          }
+                          const nextElement = isSelected ? null : el;
+                          setSelectedElementId(nextElement ? elementKey : null);
+                          onSelectElement?.(nextElement);
+                        }}
+                        onDoubleClick={(e) => {
+                          e.stopPropagation();
+                          if (suppressClickRef.current) return;
+                          if (isComposition && onDrillDown) onDrillDown(el);
+                        }}
+                      >
+                        {renderClipChildren(previewElement, clipStyle)}
+                        {STUDIO_KEYFRAMES_ENABLED && keyframeCache?.get(elementKey) && (
+                          <TimelineClipDiamonds
+                            keyframesData={keyframeCache.get(elementKey)!}
+                            clipWidthPx={Math.max(previewElement.duration * pps, 4)}
+                            clipHeightPx={TRACK_H - 2 * CLIP_Y}
+                            beatsActive={beatStripOnTrack}
+                            accentColor={clipStyle.accent}
+                            isSelected={isSelected}
+                            currentPercentage={
+                              previewElement.duration > 0
+                                ? ((currentTime - previewElement.start) / previewElement.duration) *
+                                  100
+                                : 0
+                            }
+                            elementId={elementKey}
+                            selectedKeyframes={selectedKeyframes}
+                            onClickKeyframe={(pct) => onClickKeyframe?.(previewElement, pct)}
+                            onShiftClickKeyframe={onShiftClickKeyframe}
+                            onContextMenuKeyframe={onContextMenuKeyframe}
+                            onMoveKeyframe={onMoveKeyframe}
+                            suppressClickRef={suppressClickRef}
+                          />
+                        )}
+                      </TimelineClip>
+                    );
+                  })
+                }
+              </div>
             </div>
-          </div>
-        );
-      })}
+          );
+        })
+      }
 
       {/* Drag ghost */}
       {activeDraggedElement && activeDraggedPosition && (
@@ -479,7 +499,6 @@ export const TimelineCanvas = memo(function TimelineCanvas({
             hasCustomContent={!!renderClipContent}
             capabilities={getTimelineEditCapabilities(activeDraggedElement)}
             theme={theme}
-            trackStyle={getTrackStyle(activeDraggedElement.tag)}
             isComposition={!!activeDraggedElement.compositionSrc}
             onHoverStart={() => {}}
             onHoverEnd={() => {}}