@hyperframes/studio 0.7.38 → 0.7.40

package/src/hooks/useRenderClipContent.test.ts

@@ -3,6 +3,7 @@
 import React, { act, isValidElement, type ReactNode } from "react";
 import { createRoot } from "react-dom/client";
 import { afterEach, describe, expect, it } from "vitest";
+import { CompositionThumbnail, VideoThumbnail } from "../player";
 import { AudioWaveform } from "../player/components/AudioWaveform";
 import type { TimelineElement } from "../player/store/playerStore";
 import { normalizeCompositionSrc } from "./useRenderClipContent";
@@ -63,7 +64,10 @@ describe("normalizeCompositionSrc", () => {
 });
 
 describe("useRenderClipContent", () => {
-  function renderClipContent(el: TimelineElement): ReactNode {
+  function renderClipContent(
+    el: TimelineElement,
+    activePreviewUrl: string | null = "/api/projects/my-project/preview",
+  ): ReactNode {
     const host = document.createElement("div");
     document.body.append(host);
     const root = createRoot(host);
@@ -73,7 +77,7 @@ describe("useRenderClipContent", () => {
       const render = useRenderClipContent({
         projectIdRef: { current: "my-project" },
         compIdToSrc: new Map(),
-        activePreviewUrl: "/api/projects/my-project/preview",
+        activePreviewUrl,
         effectiveTimelineDuration: 12,
       });
       content = render(el, { clip: "#222", label: "#fff" });
@@ -100,4 +104,66 @@ describe("useRenderClipContent", () => {
     expect(isValidElement(content)).toBe(true);
     if (isValidElement(content)) expect(content.type).toBe(AudioWaveform);
   });
+
+  it("passes empty labels to thumbnail content so TimelineClip owns clip names", () => {
+    const cases: Array<{ content: ReactNode; type: unknown }> = [
+      {
+        content: renderClipContent({
+          id: "voiceover",
+          tag: "audio",
+          start: 1,
+          duration: 4,
+          track: 1,
+          src: "assets/voiceover.mp3",
+        }),
+        type: AudioWaveform,
+      },
+      {
+        content: renderClipContent({
+          id: "nested",
+          tag: "div",
+          start: 0,
+          duration: 4,
+          track: 0,
+          compositionSrc: "compositions/nested.html",
+        }),
+        type: CompositionThumbnail,
+      },
+      {
+        content: renderClipContent(
+          {
+            id: "clip-video",
+            tag: "video",
+            start: 0,
+            duration: 4,
+            track: 0,
+            src: "assets/clip.mp4",
+          },
+          null,
+        ),
+        type: VideoThumbnail,
+      },
+      {
+        content: renderClipContent(
+          {
+            id: "headline",
+            tag: "div",
+            start: 1,
+            duration: 4,
+            track: 0,
+          },
+          null,
+        ),
+        type: CompositionThumbnail,
+      },
+    ];
+
+    for (const item of cases) {
+      expect(isValidElement<{ label: string }>(item.content)).toBe(true);
+      if (isValidElement<{ label: string }>(item.content)) {
+        expect(item.content.type).toBe(item.type);
+        expect(item.content.props.label).toBe("");
+      }
+    }
+  });
 });

package/src/hooks/useRenderClipContent.ts

@@ -3,7 +3,6 @@ import { createElement } from "react";
 import { CompositionThumbnail, VideoThumbnail } from "../player";
 import type { TimelineElement } from "../player";
 import { AudioWaveform } from "../player/components/AudioWaveform";
-import { getTimelineElementLabel } from "../utils/studioHelpers";
 
 export function normalizeCompositionSrc(
   compSrc: string,
@@ -58,7 +57,7 @@ function renderAudioClip(el: TimelineElement, pid: string, labelColor: string):
   return createElement(AudioWaveform, {
     audioUrl,
     waveformUrl,
-    label: getTimelineElementLabel(el),
+    label: "",
     labelColor,
     trimStartFraction: start,
     trimEndFraction: end,
@@ -102,7 +101,7 @@ export function useRenderClipContent({
       if (compSrc) {
         return createElement(CompositionThumbnail, {
           previewUrl: `/api/projects/${pid}/preview/comp/${compSrc}`,
-          label: getTimelineElementLabel(el),
+          label: "",
           labelColor: style.label,
 
           seekTime: 0,
@@ -122,7 +121,7 @@ export function useRenderClipContent({
       if (activePreviewUrl && el.duration > 0) {
         return createElement(CompositionThumbnail, {
           previewUrl: activePreviewUrl,
-          label: getTimelineElementLabel(el),
+          label: "",
           labelColor: style.label,
 
           selector: el.selector,
@@ -144,7 +143,7 @@ export function useRenderClipContent({
           : `/api/projects/${pid}/preview/${el.src}`;
         return createElement(VideoThumbnail, {
           videoSrc: mediaSrc,
-          label: getTimelineElementLabel(el),
+          label: "",
           labelColor: style.label,
           duration: el.duration,
         });
@@ -153,7 +152,7 @@ export function useRenderClipContent({
       if (htmlPreviewEligible) {
         return createElement(CompositionThumbnail, {
           previewUrl: `/api/projects/${pid}/preview`,
-          label: getTimelineElementLabel(el),
+          label: "",
           labelColor: style.label,
 
           selector: el.selector,

package/src/hooks/useTimelineEditing.ts

@@ -20,7 +20,6 @@ import {
   collectHtmlIds,
   resolveDroppedAssetDuration,
 } from "../utils/studioHelpers";
-import type { EditHistoryKind } from "../utils/editHistory";
 import {
   buildPatchTarget,
   patchIframeDomTiming,
@@ -33,36 +32,12 @@ import {
   scaleGsapPositions,
 } from "./timelineEditingHelpers";
 import type { PersistTimelineEditInput } from "./timelineEditingHelpers";
+import {
+  useTimelineElementVisibilityEditing,
+  useTimelineTrackVisibilityEditing,
+} from "./timelineTrackVisibility";
 import { sdkTimingPersist } from "../utils/sdkCutover";
-import type { Composition } from "@hyperframes/sdk";
-
-// ── Types ──
-
-interface RecordEditInput {
-  label: string;
-  kind: EditHistoryKind;
-  coalesceKey?: string;
-  files: Record<string, { before: string; after: string }>;
-}
-
-interface UseTimelineEditingOptions {
-  projectId: string | null;
-  activeCompPath: string | null;
-  timelineElements: TimelineElement[];
-  showToast: (message: string, tone?: "error" | "info") => void;
-  writeProjectFile: (path: string, content: string) => Promise<void>;
-  recordEdit: (input: RecordEditInput) => Promise<void>;
-  domEditSaveTimestampRef: React.MutableRefObject<number>;
-  reloadPreview: () => void;
-  previewIframeRef: React.RefObject<HTMLIFrameElement | null>;
-  pendingTimelineEditPathRef: React.MutableRefObject<Set<string>>;
-  uploadProjectFiles: (files: Iterable<File>, dir?: string) => Promise<string[]>;
-  isRecordingRef?: React.RefObject<boolean>;
-  /** Stage 7 §3.2: SDK session for routing timing ops through setTiming. */
-  sdkSession?: Composition | null;
-  /** Resync the SDK session after a server-authoritative timeline write. */
-  forceReloadSdkSession?: () => void;
-}
+import type { UseTimelineEditingOptions } from "./useTimelineEditingTypes";
 
 // ── Hook ──
 
@@ -323,6 +298,34 @@ export function useTimelineEditing({
     ],
   );
 
+  const handleToggleTrackHidden = useTimelineTrackVisibilityEditing({
+    projectIdRef,
+    activeCompPath,
+    timelineElements,
+    showToast,
+    writeProjectFile,
+    recordEdit,
+    domEditSaveTimestampRef,
+    previewIframeRef,
+    pendingTimelineEditPathRef,
+    isRecordingRef,
+    forceReloadSdkSession,
+  });
+
+  const handleToggleElementHidden = useTimelineElementVisibilityEditing({
+    projectIdRef,
+    activeCompPath,
+    timelineElements,
+    showToast,
+    writeProjectFile,
+    recordEdit,
+    domEditSaveTimestampRef,
+    previewIframeRef,
+    pendingTimelineEditPathRef,
+    isRecordingRef,
+    forceReloadSdkSession,
+  });
+
   // fallow-ignore-next-line complexity
   const handleTimelineElementDelete = useCallback(
     // fallow-ignore-next-line complexity
@@ -562,6 +565,8 @@ export function useTimelineEditing({
   return {
     handleTimelineElementMove,
     handleTimelineElementResize,
+    handleToggleTrackHidden,
+    handleToggleElementHidden,
     handleTimelineElementDelete,
     handleTimelineElementSplit: handleRazorSplit,
     handleRazorSplit,

package/src/hooks/useTimelineEditingTypes.ts

@@ -0,0 +1,30 @@
+import type { MutableRefObject, RefObject } from "react";
+import type { Composition } from "@hyperframes/sdk";
+import type { TimelineElement } from "../player";
+import type { EditHistoryKind } from "../utils/editHistory";
+
+interface RecordEditInput {
+  label: string;
+  kind: EditHistoryKind;
+  coalesceKey?: string;
+  files: Record<string, { before: string; after: string }>;
+}
+
+export interface UseTimelineEditingOptions {
+  projectId: string | null;
+  activeCompPath: string | null;
+  timelineElements: TimelineElement[];
+  showToast: (message: string, tone?: "error" | "info") => void;
+  writeProjectFile: (path: string, content: string) => Promise<void>;
+  recordEdit: (input: RecordEditInput) => Promise<void>;
+  domEditSaveTimestampRef: MutableRefObject<number>;
+  reloadPreview: () => void;
+  previewIframeRef: RefObject<HTMLIFrameElement | null>;
+  pendingTimelineEditPathRef: MutableRefObject<Set<string>>;
+  uploadProjectFiles: (files: Iterable<File>, dir?: string) => Promise<string[]>;
+  isRecordingRef?: RefObject<boolean>;
+  /** Stage 7 §3.2: SDK session for routing timing ops through setTiming. */
+  sdkSession?: Composition | null;
+  /** Resync the SDK session after a server-authoritative timeline write. */
+  forceReloadSdkSession?: () => void;
+}

package/src/icons/SystemIcons.tsx

@@ -4,7 +4,6 @@ import {
   Eye as PhEye,
   FilmStrip,
   Stack,
-  ChatCenteredText,
   ArrowsOutCardinal,
   MusicNote,
   Palette as PhPalette,
@@ -15,7 +14,6 @@ import {
   TextT,
   X as PhX,
   Lightning,
-  CaretDown,
   CaretRight,
   ClipboardText,
   ArrowCounterClockwise,
@@ -41,7 +39,6 @@ export const Clock = makeIcon(PhClock);
 export const Eye = makeIcon(PhEye);
 export const Film = makeIcon(FilmStrip);
 export const Layers = makeIcon(Stack);
-export const MessageSquare = makeIcon(ChatCenteredText);
 export const Move = makeIcon(ArrowsOutCardinal);
 export const Music = makeIcon(MusicNote);
 export const Palette = makeIcon(PhPalette);
@@ -53,7 +50,18 @@ export const Type = makeIcon(TextT);
 export const X = makeIcon(PhX);
 export const Zap = makeIcon(Lightning);
 // Extra icons used in this project (not in lucide's default mapping above)
-export const ChevronDown = makeIcon(CaretDown);
+export const ChevronDown = ({ title, style, ...props }: IconProps) => {
+  const transform = style?.transform ? `${style.transform} rotate(90deg)` : "rotate(90deg)";
+  return (
+    <CaretRight
+      alt={title}
+      aria-label={title}
+      aria-hidden={title ? undefined : true}
+      style={{ ...style, transform }}
+      {...props}
+    />
+  );
+};
 export const ChevronRight = makeIcon(CaretRight);
 export const ClipboardList = makeIcon(ClipboardText);
 export const RotateCcw = makeIcon(ArrowCounterClockwise);

package/src/player/components/AudioWaveform.tsx

@@ -32,6 +32,7 @@ function extractPeaks(channelData: Float32Array, barCount: number): number[] {
     const start = i * samplesPerBar;
     const end = Math.min(start + samplesPerBar, channelData.length);
     for (let j = start; j < end; j++) {
+      // fallow-ignore-next-line code-duplication
       const abs = Math.abs(channelData[j] ?? 0);
       if (abs > max) max = abs;
     }
@@ -195,14 +196,16 @@ export const AudioWaveform = memo(function AudioWaveform({
           }}
         />
       )}
-      <div className="absolute top-0 left-0 right-0 px-1.5 py-0.5 z-10">
-        <span
-          className="text-[9px] font-semibold truncate block leading-tight"
-          style={{ color: labelColor, textShadow: "0 1px 3px rgba(0,0,0,0.9)" }}
-        >
-          {label}
-        </span>
-      </div>
+      {label && (
+        <div className="absolute top-0 left-0 right-0 px-1.5 py-0.5 z-10">
+          <span
+            className="text-[9px] font-semibold truncate block leading-tight"
+            style={{ color: labelColor, textShadow: "0 1px 3px rgba(0,0,0,0.9)" }}
+          >
+            {label}
+          </span>
+        </div>
+      )}
     </div>
   );
 });

package/src/player/components/CompositionThumbnail.tsx

@@ -66,6 +66,7 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
     if (!el) return;
 
     const measured = el.parentElement?.clientWidth || el.clientWidth;
+    // fallow-ignore-next-line code-duplication
     setContainerWidth(measured);
 
     const target = el.parentElement || el;
@@ -130,17 +131,19 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
         </div>
       )}
 
-      <div className="absolute left-3 top-0 bottom-0 flex items-center" style={{ zIndex: 10 }}>
-        <span
-          className="block max-w-full truncate text-[10px] font-semibold leading-none"
-          style={{
-            color: labelColor,
-            textShadow: loaded ? "0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6)" : "none",
-          }}
-        >
-          {label}
-        </span>
-      </div>
+      {label && (
+        <div className="absolute left-3 top-0 bottom-0 flex items-center" style={{ zIndex: 10 }}>
+          <span
+            className="block max-w-full truncate text-[10px] font-semibold leading-none"
+            style={{
+              color: labelColor,
+              textShadow: loaded ? "0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6)" : "none",
+            }}
+          >
+            {label}
+          </span>
+        </div>
+      )}
     </div>
   );
 });

package/src/player/components/PlayheadIndicator.tsx

@@ -12,29 +12,39 @@ interface PlayheadIndicatorProps {
 
 export function PlayheadIndicator({
   color = "var(--hf-accent, #3CE6AC)",
-  glowColor = "rgba(60,230,172,0.5)",
+  glowColor = "rgba(60,230,172,0.14)",
 }: PlayheadIndicatorProps) {
   return (
     <>
       <div
+        aria-hidden="true"
         className="absolute top-0 bottom-0"
         style={{
           left: "50%",
-          width: 2,
-          marginLeft: -1,
+          width: 13,
+          transform: "translateX(-50%)",
+          background: `radial-gradient(closest-side, ${glowColor}, transparent)`,
+        }}
+      />
+      <div
+        className="absolute top-0 bottom-0"
+        style={{
+          left: "50%",
+          width: 1,
+          marginLeft: -0.5,
           background: color,
-          boxShadow: `0 0 8px ${glowColor}`,
+          boxShadow: `0 0 6px ${glowColor}`,
         }}
       />
-      <div className="absolute" style={{ left: "50%", top: 0, transform: "translateX(-50%)" }}>
+      <div className="absolute" style={{ left: "50%", top: 1, transform: "translateX(-50%)" }}>
         <div
           style={{
-            width: 0,
-            height: 0,
-            borderLeft: "6px solid transparent",
-            borderRight: "6px solid transparent",
-            borderTop: `8px solid ${color}`,
-            filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.6))",
+            width: 9,
+            height: 9,
+            borderRadius: 2,
+            background: color,
+            boxShadow: `0 1px 3px rgba(0,0,0,0.55), 0 0 5px ${glowColor}`,
+            transform: "rotate(45deg)",
           }}
         />
       </div>

package/src/player/components/ShortcutsPanel.tsx

@@ -60,6 +60,15 @@ const SHORTCUT_SECTIONS = [
       { key: "⇧ Drag", label: "Uniform resize" },
     ],
   },
+  {
+    title: "Crop",
+    hints: [
+      { key: "DblClick", label: "Crop selected element" },
+      { key: "Drag edge", label: "Adjust crop side" },
+      { key: "Drag frame", label: "Move crop window" },
+      { key: "Esc", label: "Exit crop (or click outside)" },
+    ],
+  },
   {
     title: "Panels",
     hints: [

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

@@ -21,6 +21,7 @@ import {
 import { RULER_H, TRACK_H } from "./timelineLayout";
 import { formatTime } from "../lib/time";
 import { usePlayerStore } from "../store/playerStore";
+import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
@@ -30,6 +31,7 @@ afterEach(() => {
 });
 
 describe("Timeline provider boundary", () => {
+  // fallow-ignore-next-line code-duplication
   it("renders the public Timeline export without TimelineEditProvider", () => {
     const host = document.createElement("div");
     document.body.append(host);
@@ -55,6 +57,99 @@ describe("Timeline provider boundary", () => {
     act(() => root.unmount());
   });
 
+  // fallow-ignore-next-line code-duplication
+  it("renders the gutter without legacy icons or hue dots", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    Object.defineProperty(host, "clientWidth", {
+      configurable: true,
+      value: 640,
+    });
+
+    usePlayerStore.setState({
+      duration: 4,
+      timelineReady: true,
+      elements: [{ id: "clip-1", tag: "div", start: 0, duration: 2, track: 0 }],
+    });
+
+    const root = createRoot(host);
+    act(() => {
+      root.render(React.createElement(Timeline));
+    });
+
+    const hueDot = Array.from(host.querySelectorAll("div")).find(
+      (node) =>
+        node.style.width === "6px" &&
+        node.style.height === "6px" &&
+        node.style.borderRadius === "9999px",
+    );
+
+    expect(host.querySelector('img[src^="/icons/timeline/"]')).toBeNull();
+    expect(hueDot).toBeUndefined();
+    act(() => root.unmount());
+  });
+
+  // fallow-ignore-next-line code-duplication
+  it("requests persisted track visibility from the gutter without seeking", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    Object.defineProperty(host, "clientWidth", {
+      configurable: true,
+      value: 640,
+    });
+
+    usePlayerStore.setState({
+      duration: 4,
+      timelineReady: true,
+      elements: [{ id: "clip-1", tag: "div", start: 0, duration: 2, track: 0, hidden: true }],
+    });
+
+    const onSeek = vi.fn();
+    const onToggleTrackHidden = vi.fn();
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        React.createElement(
+          TimelineEditProvider,
+          { value: { onToggleTrackHidden } },
+          React.createElement(Timeline, { onSeek }),
+        ),
+      );
+    });
+
+    const button = host.querySelector<HTMLButtonElement>('button[aria-label="Show track 0"]');
+    expect(button).not.toBeNull();
+    if (!button) throw new Error("Expected a track visibility toggle");
+
+    act(() => {
+      button.dispatchEvent(
+        new MouseEvent("pointerdown", {
+          bubbles: true,
+          cancelable: true,
+          button: 0,
+          clientX: 120,
+          clientY: 40,
+        }),
+      );
+    });
+    expect(onSeek).not.toHaveBeenCalled();
+
+    act(() => {
+      button.click();
+    });
+
+    const row = button.parentElement?.parentElement;
+    const trackContent = row?.children.item(1);
+    expect(onToggleTrackHidden).toHaveBeenCalledWith(0, false);
+    expect(trackContent).toBeInstanceOf(HTMLElement);
+    if (!(trackContent instanceof HTMLElement)) {
+      throw new Error("Expected track content element");
+    }
+    expect(trackContent.style.opacity).toBe("0.35");
+
+    act(() => root.unmount());
+  });
+
   it("opens the keyframe context menu without seeking to that keyframe", () => {
     const host = document.createElement("div");
     document.body.append(host);
@@ -177,10 +272,10 @@ describe("generateTicks", () => {
   it("uses denser major labels as timeline zoom increases", () => {
     const fitTicks = generateTicks(180, 10);
     const zoomedTicks = generateTicks(180, 48);
-    expect(fitTicks.major[1] - fitTicks.major[0]).toBe(15);
-    expect(zoomedTicks.major[1] - zoomedTicks.major[0]).toBe(5);
+    expect(fitTicks.major[1] - fitTicks.major[0]).toBe(10);
+    expect(fitTicks.minor).toContain(5);
+    expect(zoomedTicks.major[1] - zoomedTicks.major[0]).toBe(2);
     expect(zoomedTicks.minor).toContain(1);
-    expect(zoomedTicks.minor).toContain(4);
   });
 
   it("keeps labels readable instead of placing one at every tiny tick", () => {
@@ -194,6 +289,7 @@ describe("formatTime", () => {
     expect(formatTime(0)).toBe("0:00");
   });
 
+  // fallow-ignore-next-line code-duplication
   it("formats seconds below a minute", () => {
     expect(formatTime(5)).toBe("0:05");
     expect(formatTime(30)).toBe("0:30");
@@ -261,8 +357,12 @@ describe("getTimelineScrollLeftForZoomTransition", () => {
     expect(getTimelineScrollLeftForZoomTransition("manual", "fit", 480)).toBe(0);
   });
 
-  it("preserves the current scroll offset for other zoom transitions", () => {
-    expect(getTimelineScrollLeftForZoomTransition("fit", "fit", 480)).toBe(480);
+  it("resets horizontal scroll whenever the next zoom mode is fit", () => {
+    expect(getTimelineScrollLeftForZoomTransition("fit", "fit", 480)).toBe(0);
+    expect(getTimelineScrollLeftForZoomTransition(null, "fit", 480)).toBe(0);
+  });
+
+  it("preserves the current scroll offset for manual zoom transitions", () => {
     expect(getTimelineScrollLeftForZoomTransition("fit", "manual", 480)).toBe(480);
     expect(getTimelineScrollLeftForZoomTransition("manual", "manual", 480)).toBe(480);
   });