@hyperframes/studio 0.8.53-desktop.0 → 0.8.54

package/src/player/components/TimelineTrackHeader.tsx

@@ -34,7 +34,7 @@ const GROUP_MEMBER_INDENT = 14;
 const GROUP_MEMBER_TINT = "rgba(255,255,255,0.035)";
 
 /** The gutter fill for a row, tinted when it belongs to a group. */
-export function gutterFill(base: string, isGroupMember: boolean): string {
+function gutterFill(base: string, isGroupMember: boolean): string {
   return isGroupMember
     ? `linear-gradient(${GROUP_MEMBER_TINT}, ${GROUP_MEMBER_TINT}), ${base}`
     : base;

package/src/player/components/TimelineTypes.ts

@@ -1,5 +1,6 @@
 import type { ReactNode } from "react";
 import type { TimelineElement } from "../store/playerStore";
+import type { TimelineTimeRange } from "../store/rangeSelectionSlice";
 import type { TimelineDropCallbacks } from "./timelineCallbacks";
 import type { TimelineTheme } from "./timelineTheme";
 import type { TimelineEditOverrides } from "./useResolvedTimelineEditCallbacks";
@@ -23,6 +24,8 @@ export interface TimelineProps extends TimelineDropCallbacks, TimelineEditOverri
   renderClipOverlay?: (element: TimelineElement) => ReactNode;
   onDeleteElement?: (element: TimelineElement) => Promise<void> | void;
   onSelectElement?: (element: TimelineElement | null) => void;
+  /** Notification only; null when cleared. The value lives in usePlayerStore.rangeSelection. */
+  onRangeSelect?: (range: TimelineTimeRange | null) => void;
   onCopyClip?: () => boolean;
   onPasteClip?: () => Promise<void>;
   onDuplicateClip?: () => Promise<boolean>;

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

@@ -9,10 +9,10 @@ import { getTrackStyle } from "./timelineIcons";
 describe("getTimelineTrackStyle", () => {
   it("uses one neutral clip style for every timeline tag", () => {
     const expectedStyle = {
-      clip: "var(--timeline-track-clip-fill)",
-      clipActive: "var(--timeline-track-clip-active)",
-      accent: "var(--color-accent)",
-      label: "var(--timeline-track-label)",
+      clip: "rgba(255,255,255,0.055)",
+      clipActive: "rgba(60,230,172,0.16)",
+      accent: "#3CE6AC",
+      label: "rgba(255,255,255,0.5)",
     };
 
     expect(getTimelineTrackStyle("video")).toEqual(expectedStyle);

package/src/player/components/timelineTheme.ts

@@ -36,43 +36,43 @@ export interface TimelineTheme {
 }
 
 const TRACK_STYLE: TimelineTrackStyle = {
-  clip: "var(--timeline-track-clip-fill)",
-  clipActive: "var(--timeline-track-clip-active)",
-  accent: "var(--color-accent)",
-  label: "var(--timeline-track-label)",
+  clip: "rgba(255,255,255,0.055)",
+  clipActive: "rgba(60,230,172,0.16)",
+  accent: "#3CE6AC",
+  label: "rgba(255,255,255,0.5)",
 };
 
-// Every field reads a CSS custom property (declared in styles/theme.css)
-// rather than a literal, so a host themes the timeline the same way it
-// themes the rest of Studio: by overriding the token, not this object.
 export const defaultTimelineTheme: TimelineTheme = {
-  shellBackground: "var(--timeline-shell-bg)",
-  shellBorder: "var(--timeline-shell-border)",
-  rulerBorder: "var(--timeline-ruler-border)",
-  rowBackground: "var(--timeline-row-bg)",
-  rowBorder: "var(--timeline-row-border)",
-  gutterBackground: "var(--timeline-gutter-bg)",
-  gutterBorder: "var(--timeline-gutter-border)",
-  textPrimary: "var(--timeline-text-primary)",
-  textSecondary: "var(--timeline-text-secondary)",
-  tickText: "var(--timeline-tick-text)",
-  tickMajor: "var(--timeline-tick-major)",
-  tickMinor: "var(--timeline-tick-minor)",
-  clipBackground: "var(--timeline-clip-bg)",
-  clipBackgroundActive: "var(--timeline-clip-bg-active)",
-  clipBorder: "var(--timeline-clip-border)",
-  clipBorderHover: "var(--timeline-clip-border-hover)",
-  clipBorderActive: "var(--timeline-clip-border-active)",
-  // Shadows stay literal: a light host still wants a dark contact shadow, so
-  // these are not part of the surface/hairline/text/clip-colour theming ask.
+  // Near-black card surfaces: the panels sit dark while the shell canvas
+  // between them is a step LIGHTER (#18181B), so the gaps read as visible
+  // seams around dark cards (CapCut-style).
+  shellBackground: "#0A0A0B",
+  shellBorder: "rgba(255,255,255,0.05)",
+  rulerBorder: "rgba(255,255,255,0.16)",
+  // All track lanes use a single uniform color — one step lighter than the panel
+  // surface (#0A0A0B) so lanes are visibly distinct from the ruler/shell.
+  rowBackground: "#101014",
+  rowBorder: "rgba(255,255,255,0.06)",
+  gutterBackground: "#0E0F12",
+  gutterBorder: "rgba(255,255,255,0.10)",
+  textPrimary: "rgba(255,255,255,0.92)",
+  textSecondary: "rgba(255,255,255,0.62)",
+  tickText: "rgba(255,255,255,0.34)",
+  tickMajor: "rgba(255,255,255,0.10)",
+  tickMinor: "rgba(255,255,255,0.06)",
+  clipBackground: "#141922",
+  clipBackgroundActive: "#181e28",
+  clipBorder: "rgba(255,255,255,0.10)",
+  clipBorderHover: "rgba(255,255,255,0.18)",
+  clipBorderActive: "rgba(255,255,255,0.24)",
   clipShadow: "none",
   clipShadowHover: "0 2px 8px rgba(0,0,0,0.2)",
   clipShadowActive: "0 2px 8px rgba(0,0,0,0.2), 0 0 0 1px rgba(255,255,255,0.04)",
   clipShadowDragging: "0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06)",
-  handleColor: "var(--timeline-handle)",
-  panelResizeSeam: "var(--timeline-resize-seam)",
-  panelResizeActive: "var(--timeline-resize-active)",
-  clipRadius: "var(--radius-lg)",
+  handleColor: "rgba(255,255,255,0.2)",
+  panelResizeSeam: "rgba(255,255,255,0.12)",
+  panelResizeActive: "rgba(255,255,255,0.24)",
+  clipRadius: "8px",
 };
 
 export function getTimelineTrackStyle(_tag: string): TimelineTrackStyle {

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

@@ -0,0 +1,60 @@
+// @vitest-environment happy-dom
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { usePlayerStore } from "../store/playerStore";
+import type { TimelineTimeRange } from "../store/rangeSelectionSlice";
+import type { TimelineRangeSelection } from "./timelineEditing";
+import { usePublishRangeSelection } from "./usePublishRangeSelection";
+
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+function mount(onRangeSelect: (range: TimelineTimeRange | null) => void) {
+  const host = document.createElement("div");
+  const root = createRoot(host);
+  const Harness = ({ selection }: { selection: TimelineRangeSelection | null }) => {
+    usePublishRangeSelection(selection, onRangeSelect);
+    return null;
+  };
+  const render = (selection: TimelineRangeSelection | null) =>
+    act(() => root.render(<Harness selection={selection} />));
+  return { render, unmount: () => act(() => root.unmount()) };
+}
+
+const selection = (start: number, end: number): TimelineRangeSelection => ({
+  start,
+  end,
+  anchorX: 0,
+  anchorY: 0,
+});
+
+describe("usePublishRangeSelection", () => {
+  afterEach(() => usePlayerStore.setState({ rangeSelection: null }));
+
+  it("publishes an ordered range to the store and the host, and clears with null", () => {
+    const onRangeSelect = vi.fn();
+    const view = mount(onRangeSelect);
+
+    view.render(selection(3, 1));
+    expect(usePlayerStore.getState().rangeSelection).toEqual({ t0: 1, t1: 3 });
+    expect(onRangeSelect).toHaveBeenLastCalledWith({ t0: 1, t1: 3 });
+
+    view.render(null);
+    expect(usePlayerStore.getState().rangeSelection).toBeNull();
+    expect(onRangeSelect).toHaveBeenLastCalledWith(null);
+    view.unmount();
+  });
+
+  it("does not re-notify for an unchanged range and preserves a newer store value on unmount", () => {
+    const onRangeSelect = vi.fn();
+    const view = mount(onRangeSelect);
+
+    view.render(selection(1, 3));
+    view.render(selection(3, 1));
+    expect(onRangeSelect).toHaveBeenCalledTimes(1);
+
+    usePlayerStore.setState({ rangeSelection: { t0: 9, t1: 10 } });
+    view.unmount();
+    expect(usePlayerStore.getState().rangeSelection).toEqual({ t0: 9, t1: 10 });
+  });
+});

package/src/player/components/usePublishRangeSelection.ts

@@ -0,0 +1,42 @@
+import { useEffect, useRef } from "react";
+import { usePlayerStore } from "../store/playerStore";
+import type { TimelineTimeRange } from "../store/rangeSelectionSlice";
+import type { TimelineRangeSelection } from "./timelineEditing";
+
+/** Mirrors the gesture's range into the store and notifies the host. */
+export function usePublishRangeSelection(
+  rangeSelection: TimelineRangeSelection | null,
+  onRangeSelect?: (range: TimelineTimeRange | null) => void,
+) {
+  const onRangeSelectRef = useRef(onRangeSelect);
+  const publishedRangeRef = useRef<TimelineTimeRange | null>(null);
+
+  useEffect(() => {
+    onRangeSelectRef.current = onRangeSelect;
+  }, [onRangeSelect]);
+
+  useEffect(() => {
+    const range = rangeSelection
+      ? {
+          t0: Math.min(rangeSelection.start, rangeSelection.end),
+          t1: Math.max(rangeSelection.start, rangeSelection.end),
+        }
+      : null;
+    const store = usePlayerStore.getState();
+    const current = store.rangeSelection;
+    if (current?.t0 === range?.t0 && current?.t1 === range?.t1) return;
+    publishedRangeRef.current = range;
+    usePlayerStore.setState({ rangeSelection: range });
+    onRangeSelectRef.current?.(range);
+  }, [rangeSelection]);
+
+  useEffect(
+    () => () => {
+      const current = usePlayerStore.getState().rangeSelection;
+      const published = publishedRangeRef.current;
+      if (current?.t0 !== published?.t0 || current?.t1 !== published?.t1) return;
+      usePlayerStore.setState({ rangeSelection: null });
+    },
+    [],
+  );
+}

package/src/player/index.ts

@@ -12,6 +12,7 @@ export { resolveIframe } from "./lib/timelineDOM";
 // Store
 export { usePlayerStore, liveTime } from "./store/playerStore";
 export type { SelectElementOptions, TimelineElement, ZoomMode } from "./store/playerStore";
+export type { TimelineTimeRange } from "./store/rangeSelectionSlice";
 
 // Utils
 export { formatTime } from "./lib/time";

package/src/player/store/playerStore.ts

@@ -2,7 +2,6 @@ import { create } from "zustand";
 import { attachPlayerStoreDevHandle } from "./playerStoreDevHandle";
 import { nextSelectionSet, revealTargetsSelection } from "./playerStoreSelection";
 import type { MusicBeatAnalysis } from "@hyperframes/core/beats";
-import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { BeatEditState } from "../../utils/beatEditing";
 import type { ClipManifestClip } from "../lib/playbackTypes";
 import {
@@ -11,7 +10,7 @@ import {
   type TimelineTimeDisplayMode,
 } from "../../utils/studioUiPreferences";
 import { clampTimelineZoomPercent, computePinnedZoomPercent } from "../components/timelineZoom";
-import { createKeyframeSlice, type KeyframeCacheEntry, type KeyframeSlice } from "./keyframeSlice";
+import { createKeyframeSlice, type KeyframeSlice } from "./keyframeSlice";
 import {
   createAutomationSelectionSlice,
   type AutomationSelectionSlice,
@@ -19,10 +18,12 @@ import {
 import { createEditingModeSlice, type EditingModeSlice } from "./editingModeSlice";
 import { createTimelineFocusRequest, type TimelineFocusRequest } from "./timelineFocusState";
 import { createThumbnailSlice, type ThumbnailSlice } from "./thumbnailSlice";
-import { createPlaybackReadinessSlice, resetPlaybackReadinessState } from "./readinessSlice";
-
+import { createPlaybackReadinessSlice } from "./readinessSlice";
+import { createRangeSelectionSlice, type RangeSelectionSlice } from "./rangeSelectionSlice";
+import { createTimelineResetState } from "./timelineResetState";
 export type { KeyframeCacheEntry } from "./keyframeSlice";
 export { liveTime } from "./liveTime";
+export { createTimelineResetState };
 
 import type {
   TimelineElement,
@@ -59,7 +60,8 @@ type PlayerStoreSlices = KeyframeSlice &
   AutomationSelectionSlice &
   ThumbnailSlice &
   EditingModeSlice &
-  ReturnType<typeof createPlaybackReadinessSlice>;
+  ReturnType<typeof createPlaybackReadinessSlice> &
+  RangeSelectionSlice;
 interface PlayerState extends PlayerStoreSlices {
   isPlaying: boolean;
   currentTime: number;
@@ -250,52 +252,6 @@ interface BeatHistoryEntry {
   label: string;
 }
 
-export function createTimelineResetState() {
-  return {
-    isPlaying: false,
-    currentTime: 0,
-    duration: 0,
-    ...resetPlaybackReadinessState(),
-    beatDragging: false,
-    elements: [],
-    selectedElementId: null,
-    zEditVersion: 0,
-    inPoint: null,
-    outPoint: null,
-    activeTool: "select" as const,
-    activeKeyframePct: null,
-    motionPathArmed: false,
-    motionPathCreateAvailable: false,
-    selectedKeyframes: new Set<string>(),
-    // Ephemeral like every other selection here. A range surviving a project
-    // switch can match a same-keyed clip in the new project and redirect a
-    // paste through `sel.elementKey === paste.elementKey` to a stale t0.
-    automationSelection: null,
-    expandedClipIds: new Set<string>(),
-    // Per-composition: ids from comp A match nothing in B, silencing all of it.
-    collapsedGroupIds: new Set<string>(),
-    expandedLaneOwnerIds: new Set<string>(),
-    focusedEaseSegment: null,
-    revealedAudioFxTarget: null,
-    selectedElementIds: new Set<string>(),
-    requestedSeekTime: null,
-    lintFindingsByElement: new Map<string, { count: number; messages: string[] }>(),
-    timelineFocus: null,
-    keyframeCache: new Map<string, KeyframeCacheEntry>(),
-    gsapAnimations: new Map<string, GsapAnimation[]>(),
-    beatAnalysis: null,
-    beatEdits: null,
-    beatUndo: [],
-    beatRedo: [],
-    beatPersist: null,
-    clipManifest: null,
-    clipParentMap: new Map<string, string>(),
-    topLevelIds: null,
-    domClipChildren: [],
-    subCompositionHostState: new Map<string, SubCompositionHostState>(),
-  };
-}
-
 export const usePlayerStore = create<PlayerState>((set, get) => ({
   isPlaying: false,
   currentTime: 0,
@@ -328,6 +284,7 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
 
   ...createAutomationSelectionSlice(set),
   ...createEditingModeSlice(set),
+  ...createRangeSelectionSlice(),
   ...createPlaybackReadinessSlice(set),
 
   activeKeyframePct: null,

package/src/player/store/rangeSelectionSlice.ts

@@ -0,0 +1,13 @@
+export interface TimelineTimeRange {
+  t0: number;
+  t1: number;
+}
+
+export interface RangeSelectionSlice {
+  /** Shift-drag ruler range in seconds, normalized so t0 <= t1. */
+  rangeSelection: TimelineTimeRange | null;
+}
+
+export function createRangeSelectionSlice(): RangeSelectionSlice {
+  return { rangeSelection: null };
+}

package/src/player/store/timelineResetState.ts

@@ -0,0 +1,51 @@
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import type { KeyframeCacheEntry } from "./keyframeSlice";
+import { resetPlaybackReadinessState } from "./readinessSlice";
+import type { SubCompositionHostState } from "./timelineElement";
+
+export function createTimelineResetState() {
+  return {
+    isPlaying: false,
+    currentTime: 0,
+    duration: 0,
+    ...resetPlaybackReadinessState(),
+    beatDragging: false,
+    elements: [],
+    selectedElementId: null,
+    zEditVersion: 0,
+    inPoint: null,
+    outPoint: null,
+    rangeSelection: null,
+    activeTool: "select" as const,
+    activeKeyframePct: null,
+    motionPathArmed: false,
+    motionPathCreateAvailable: false,
+    selectedKeyframes: new Set<string>(),
+    // Ephemeral like every other selection here. A range surviving a project
+    // switch can match a same-keyed clip in the new project and redirect a
+    // paste through `sel.elementKey === paste.elementKey` to a stale t0.
+    automationSelection: null,
+    expandedClipIds: new Set<string>(),
+    // Per-composition: ids from comp A match nothing in B, silencing all of it.
+    collapsedGroupIds: new Set<string>(),
+    expandedLaneOwnerIds: new Set<string>(),
+    focusedEaseSegment: null,
+    revealedAudioFxTarget: null,
+    selectedElementIds: new Set<string>(),
+    requestedSeekTime: null,
+    lintFindingsByElement: new Map<string, { count: number; messages: string[] }>(),
+    timelineFocus: null,
+    keyframeCache: new Map<string, KeyframeCacheEntry>(),
+    gsapAnimations: new Map<string, GsapAnimation[]>(),
+    beatAnalysis: null,
+    beatEdits: null,
+    beatUndo: [],
+    beatRedo: [],
+    beatPersist: null,
+    clipManifest: null,
+    clipParentMap: new Map<string, string>(),
+    topLevelIds: null,
+    domClipChildren: [],
+    subCompositionHostState: new Map<string, SubCompositionHostState>(),
+  };
+}

package/src/styles/hex-baseline.json

@@ -1,5 +1,5 @@
 {
-  "total": 394,
+  "total": 418,
   "files": {
     "packages/studio/src/captions/components/CaptionOverlay.tsx": 5,
     "packages/studio/src/captions/components/CaptionTimeline.tsx": 11,
@@ -75,7 +75,7 @@
     "packages/studio/src/player/components/TimelineTrackHeader.tsx": 2,
     "packages/studio/src/player/components/TimelineTrackPlainHeader.tsx": 2,
     "packages/studio/src/player/components/VideoThumbnail.tsx": 6,
-    "packages/studio/src/player/components/timelineTheme.ts": 5,
+    "packages/studio/src/player/components/timelineTheme.ts": 29,
     "packages/studio/src/player/components/trackHeaderLabelRows.tsx": 6,
     "packages/studio/src/styles/studio.css": 70,
     "packages/studio/src/telemetry/client.ts": 1,

package/src/styles/theme.css

@@ -46,33 +46,6 @@
   --color-brand-gradient-from: #06e3fa;
   --color-brand-gradient-to: #4fdb5e;
 
-  /* The timeline's own surfaces: darker and bluer than the shared scale, so they
-   * get their own names instead of snapping to the nearest --color-bg/-surface
-   * step (AD147: a host themes the timeline by overriding these). */
-  --timeline-shell-bg: #0a0a0b;
-  --timeline-shell-border: rgba(255, 255, 255, 0.05);
-  --timeline-ruler-border: rgba(255, 255, 255, 0.16);
-  --timeline-row-bg: #101014;
-  --timeline-row-border: rgba(255, 255, 255, 0.06);
-  --timeline-gutter-bg: #0e0f12;
-  --timeline-gutter-border: rgba(255, 255, 255, 0.1);
-  --timeline-text-primary: rgba(255, 255, 255, 0.92);
-  --timeline-text-secondary: rgba(255, 255, 255, 0.62);
-  --timeline-tick-text: rgba(255, 255, 255, 0.34);
-  --timeline-tick-major: rgba(255, 255, 255, 0.1);
-  --timeline-tick-minor: rgba(255, 255, 255, 0.06);
-  --timeline-clip-bg: #141922;
-  --timeline-clip-bg-active: #181e28;
-  --timeline-clip-border: rgba(255, 255, 255, 0.1);
-  --timeline-clip-border-hover: rgba(255, 255, 255, 0.18);
-  --timeline-clip-border-active: rgba(255, 255, 255, 0.24);
-  --timeline-handle: rgba(255, 255, 255, 0.2);
-  --timeline-resize-seam: rgba(255, 255, 255, 0.12);
-  --timeline-resize-active: rgba(255, 255, 255, 0.24);
-  --timeline-track-clip-fill: rgba(255, 255, 255, 0.055);
-  --timeline-track-clip-active: rgba(60, 230, 172, 0.16);
-  --timeline-track-label: rgba(255, 255, 255, 0.5);
-
   /* -------------------------------------------------------------- geometry */
 
   --radius-sm: 0.25rem;