@hyperframes/studio 0.8.55 → 0.8.56

package/src/player/components/timelineTheme.ts

@@ -22,6 +22,8 @@ export interface TimelineTheme {
   tickMinor: string;
   clipBackground: string;
   clipBackgroundActive: string;
+  clipBackgroundHover: string;
+  clipBackgroundDragging: string;
   clipBorder: string;
   clipBorderHover: string;
   clipBorderActive: string;
@@ -36,43 +38,45 @@ export interface TimelineTheme {
 }
 
 const TRACK_STYLE: TimelineTrackStyle = {
-  clip: "rgba(255,255,255,0.055)",
-  clipActive: "rgba(60,230,172,0.16)",
-  accent: "#3CE6AC",
-  label: "rgba(255,255,255,0.5)",
+  clip: "var(--timeline-track-clip-fill)",
+  clipActive: "var(--timeline-track-clip-active)",
+  accent: "var(--color-accent)",
+  label: "var(--timeline-track-label)",
 };
 
+// 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 = {
-  // 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)",
+  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)",
+  clipBackgroundHover: "var(--timeline-clip-bg-hover)",
+  clipBackgroundDragging: "var(--timeline-clip-bg-dragging)",
+  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.
   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: "rgba(255,255,255,0.2)",
-  panelResizeSeam: "rgba(255,255,255,0.12)",
-  panelResizeActive: "rgba(255,255,255,0.24)",
-  clipRadius: "8px",
+  handleColor: "var(--timeline-handle)",
+  panelResizeSeam: "var(--timeline-resize-seam)",
+  panelResizeActive: "var(--timeline-resize-active)",
+  clipRadius: "var(--radius-lg)",
 };
 
 export function getTimelineTrackStyle(_tag: string): TimelineTrackStyle {

package/src/player/components/timelineTrackDisplay.ts

@@ -1,10 +1,7 @@
 /**
  * The one owner of "what track number does the user see".
  *
- * `TimelineElement.track` is a z-order SORT key, not a row number: an expanded
- * sub-composition child gets a synthesized fractional key (`host.track + n /
- * (siblings + 2)`, see `useTimelineRowElements`), so putting it in a string
- * announces "Hide track 0.16666666666666666". Every user-visible track number,
+ * `TimelineElement.track` is a z-order SORT key, not a row number. Every
  * whether it is rendered by a component or baked into an undo-history label,
  * routes through here; the raw key stays in callbacks and lookups only.
  */

package/src/player/components/useTimelineTrackDerivations.ts

@@ -98,8 +98,8 @@ function buildGroupInfo(
     id: groupId,
     label: membership.labelByGroup.get(groupId) ?? groupId,
     // Exactly x.5, which sub-composition child rows are now kept strictly below
-    // (`useTimelineRowElements`) — they used to be able to land here and
-    // collide, duplicating the group header.
+    // the timeline row source — they used to be able to land here and collide,
+    // duplicating the group header.
     anchorKey: (memberTracks[0] ?? fallbackTrackNum) - 0.5,
     memberTracks,
     memberElements: memberTracks.flatMap((track) => rawByTrack.get(track) ?? []),

package/src/player/hooks/timelineSyncHydration.test.ts

@@ -3,7 +3,6 @@
 import { describe, expect, it } from "vitest";
 import {
   collectSubCompositionDomChildren,
-  collectTopLevelElementIds,
   collectSubCompositionHostState,
 } from "./timelineSyncHydration";
 import type { ClipManifestClip } from "../lib/playbackTypes";
@@ -95,20 +94,3 @@ describe("collectSubCompositionHostState", () => {
     expect(state.size).toBe(0);
   });
 });
-
-describe("collectTopLevelElementIds", () => {
-  const docOf = (html: string) => new DOMParser().parseFromString(html, "text/html");
-
-  it("names the sub-composition host and a timed element, not what is nested inside them", () => {
-    const doc = docOf(`<div data-composition-id="root">
-      <div id="wrap"><div id="a" data-start="0" data-duration="2"><div id="inner" data-start="0"></div></div></div>
-      <div id="scene" data-composition-id="scene" data-composition-src="scene.html"><div id="box" data-start="0"></div></div>
-    </div>`);
-    expect([...collectTopLevelElementIds(doc)!].sort()).toEqual(["a", "scene"]);
-  });
-
-  it("is null when the document has no composition root", () => {
-    expect(collectTopLevelElementIds(docOf("<p>hi</p>"))).toBeNull();
-    expect(collectTopLevelElementIds(null)).toBeNull();
-  });
-});

package/src/player/hooks/timelineSyncHydration.ts

@@ -14,7 +14,6 @@ import { usePlayerStore } from "../store/playerStore";
 import type { TimelineElement, DomClipChild, SubCompositionHostState } from "../store/playerStore";
 import { resolveCssStackingContextId } from "@hyperframes/core/runtime/stacking-context";
 import type { ClipTree } from "@hyperframes/core/runtime/clipTree";
-import { topLevelElements, type StructureNode } from "@hyperframes/parsers/top-level-elements";
 import { HF_AUDIO_GROUP_ATTR } from "@hyperframes/core/audio-groups";
 import { groupInfoFor } from "../lib/timelineGroupInfo";
 import type { PlaybackAdapter, ClipManifestClip, IframeWindow } from "../lib/playbackTypes";
@@ -137,28 +136,6 @@ export function collectSubCompositionDomChildren(
   return out;
 }
 
-interface DomStructureNode extends StructureNode<DomStructureNode> {
-  id: string;
-}
-
-function toStructureNode(el: Element): DomStructureNode {
-  const attrs: Record<string, string> = {};
-  for (const attr of Array.from(el.attributes)) attrs[attr.name] = attr.value;
-  return {
-    tag: el.tagName,
-    attrs,
-    id: el.id,
-    children: Array.from(el.children).map(toStructureNode),
-  };
-}
-
-/** DOM ids of the timeline's rows, by the definition the structure lint shares; null when there is no readable root. */
-export function collectTopLevelElementIds(doc: Document | null): Set<string> | null {
-  const root = doc?.querySelector("[data-composition-id]");
-  if (!root) return null;
-  return new Set(topLevelElements(toStructureNode(root)).flatMap((n) => (n.id ? [n.id] : [])));
-}
-
 /** The host-element `data-*` state one element carries, or null when it has none. */
 function readSubCompositionHostState(el: Element): SubCompositionHostState | null {
   const state: SubCompositionHostState = {};

package/src/player/hooks/useTimelineSyncCallbacks.ts

@@ -19,7 +19,6 @@ import {
   buildTimelineElementsFromClips,
   syncManifestTimeline,
   clipTreeParentMap,
-  collectTopLevelElementIds,
   collectSubCompositionDomChildren,
   collectSubCompositionHostState,
   hydrateTimelineFromPreview,
@@ -130,13 +129,11 @@ export function useTimelineSyncCallbacks({
         const parentMap = clipTreeParentMap(iframeRef.current?.contentWindow ?? null);
         const domClipChildren = collectSubCompositionDomChildren(iframeDoc, data.clips, parentMap);
         usePlayerStore.getState().setClipParentMap(parentMap);
-        usePlayerStore.getState().setTopLevelIds(collectTopLevelElementIds(iframeDoc));
         usePlayerStore.getState().setDomClipChildren(domClipChildren);
         usePlayerStore
           .getState()
           .setSubCompositionHostState(collectSubCompositionHostState(iframeDoc, data.clips));
       } catch {
-        usePlayerStore.getState().setTopLevelIds(null);
         // cross-origin or __clipTree not available — maps stay empty
       }
 

package/src/player/store/playerStore.ts

@@ -202,8 +202,6 @@ interface PlayerState extends PlayerStoreSlices {
   clipManifest: ClipManifestClip[] | null;
   setClipManifest: (clips: ClipManifestClip[] | null) => void;
   clipParentMap: Map<string, string>;
-  topLevelIds: ReadonlySet<string> | null;
-  setTopLevelIds: (ids: ReadonlySet<string> | null) => void;
   setClipParentMap: (map: Map<string, string>) => void;
   /**
    * Sub-composition DOM descendants (groups + their children) that have no
@@ -394,8 +392,6 @@ export const usePlayerStore = create<PlayerState>((set, get) => ({
   setClipManifest: (clips) => set({ clipManifest: clips }),
   clipParentMap: new Map(),
   setClipParentMap: (map) => set({ clipParentMap: map }),
-  topLevelIds: null,
-  setTopLevelIds: (ids) => set({ topLevelIds: ids }),
   domClipChildren: [],
   setDomClipChildren: (children) => set({ domClipChildren: children }),
   subCompositionHostState: new Map(),

package/src/player/store/timelineElement.ts

@@ -77,10 +77,8 @@ export interface TimelineElement {
   audioGroupFxChain?: string;
   audioGroupAutomation?: string;
   /**
-   * Set by useTimelineRowElements on an inline-expanded sub-composition
-   * child: the absolute master-timeline start of the sub-comp host the child
-   * lives in. Presence marks the element as expanded; edits subtract it to get
-   * the child's local (sourceFile-relative) time. Works at any nesting depth.
+   * Legacy source-coordinate marker for an inline sub-composition child. The
+   * current timeline keeps sub-compositions as single rows.
    */
   expandedParentStart?: number;
   expandedHostKey?: string;

package/src/player/store/timelineResetState.ts

@@ -44,7 +44,6 @@ export function createTimelineResetState() {
     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": 418,
+  "total": 385,
   "files": {
     "packages/studio/src/captions/components/CaptionOverlay.tsx": 5,
     "packages/studio/src/captions/components/CaptionTimeline.tsx": 11,
@@ -61,7 +61,6 @@
     "packages/studio/src/player/components/SpeedMenu.tsx": 2,
     "packages/studio/src/player/components/TimelineAutomationLane.tsx": 4,
     "packages/studio/src/player/components/TimelineCanvas.tsx": 13,
-    "packages/studio/src/player/components/TimelineClip.tsx": 2,
     "packages/studio/src/player/components/TimelineClipDiamonds.tsx": 2,
     "packages/studio/src/player/components/TimelineDiamondConnectors.tsx": 2,
     "packages/studio/src/player/components/TimelineEmptyState.tsx": 1,
@@ -75,9 +74,9 @@
     "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": 29,
+    "packages/studio/src/player/components/timelineTheme.ts": 5,
     "packages/studio/src/player/components/trackHeaderLabelRows.tsx": 6,
-    "packages/studio/src/styles/studio.css": 70,
+    "packages/studio/src/styles/studio.css": 63,
     "packages/studio/src/telemetry/client.ts": 1,
     "packages/studio/src/webmcp/webmcpTestUtils.ts": 1
   }

package/src/styles/studio.css

@@ -200,8 +200,8 @@ body {
 }
 
 .timeline-clip {
-  background-color: rgba(255, 255, 255, 0.055);
-  border: 1px solid rgba(255, 255, 255, 0.09);
+  background-color: var(--clip-bg);
+  border: 1px solid var(--clip-border);
   border-radius: 8px;
 }
 
@@ -210,13 +210,13 @@ body {
   position: absolute;
   inset: 0;
   border-radius: inherit;
-  background: rgba(60, 230, 172, 0.2);
+  background: var(--clip-bg-active);
   opacity: 0;
   pointer-events: none;
 }
 
 .timeline-clip[data-active] {
-  border-color: rgba(60, 230, 172, 0.55);
+  border-color: var(--clip-border-active);
 }
 
 .timeline-clip[data-active]::before {
@@ -240,11 +240,11 @@ body {
 }
 
 .timeline-clip.is-hovered {
-  background-color: rgba(255, 255, 255, 0.09);
+  background-color: var(--clip-bg-hover);
 }
 
 .timeline-clip[data-active].is-hovered {
-  border-color: rgba(60, 230, 172, 0.75);
+  border-color: var(--clip-border-hover);
 }
 
 .timeline-clip.is-selected {
@@ -258,7 +258,7 @@ body {
 .timeline-clip.is-dragging {
   /* Solid background so the picked-up clip reads clearly while dragging — audio
      clips (waveform drawn on a separate layer) would otherwise look transparent. */
-  background-color: rgba(38, 42, 52, 0.96);
+  background-color: var(--clip-bg-dragging);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
 }
 

package/src/styles/theme.css

@@ -46,6 +46,35 @@
   --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 (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: rgba(255, 255, 255, 0.12);
+  --timeline-clip-bg-active: rgba(60, 230, 172, 0.2);
+  --timeline-clip-bg-hover: rgba(255, 255, 255, 0.16);
+  --timeline-clip-bg-dragging: rgba(38, 42, 52, 0.96);
+  --timeline-clip-border: rgba(255, 255, 255, 0.22);
+  --timeline-clip-border-hover: rgba(60, 230, 172, 0.75);
+  --timeline-clip-border-active: rgba(60, 230, 172, 0.55);
+  --timeline-handle: rgba(255, 255, 255, 0.55);
+  --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;

package/src/player/hooks/useTimelineRowElements.test.ts

@@ -1,28 +0,0 @@
-import { describe, expect, it } from "vitest";
-import type { TimelineElement } from "../store/playerStore";
-import { selectTimelineRowElements } from "./useTimelineRowElements";
-
-const el = (id: string, domId?: string): TimelineElement => ({
-  id,
-  domId,
-  start: 0,
-  duration: 1,
-  track: 0,
-  tag: "div",
-});
-
-describe("selectTimelineRowElements", () => {
-  it("drops an element the shared definition does not call top-level", () => {
-    const rows = selectTimelineRowElements([el("a", "a"), el("b", "b")], new Set(["a"]));
-    expect(rows.map((r) => r.id)).toEqual(["a"]);
-  });
-
-  it("keeps everything until the document has been read", () => {
-    const all = [el("a", "a"), el("b", "b")];
-    expect(selectTimelineRowElements(all, null)).toBe(all);
-  });
-
-  it("keeps an element with no DOM id", () => {
-    expect(selectTimelineRowElements([el("k")], new Set())).toHaveLength(1);
-  });
-});

package/src/player/hooks/useTimelineRowElements.ts

@@ -1,17 +0,0 @@
-import { useMemo } from "react";
-import { usePlayerStore, type TimelineElement } from "../store/playerStore";
-
-/** Rows are the ids `topLevelElements` names, as the lint does; id-less ones are kept. */
-export function selectTimelineRowElements(
-  elements: TimelineElement[],
-  topLevelIds: ReadonlySet<string> | null,
-): TimelineElement[] {
-  if (!topLevelIds) return elements;
-  return elements.filter((el) => el.domId === undefined || topLevelIds.has(el.domId));
-}
-
-export function useTimelineRowElements(): TimelineElement[] {
-  const elements = usePlayerStore((s) => s.elements);
-  const topLevelIds = usePlayerStore((s) => s.topLevelIds);
-  return useMemo(() => selectTimelineRowElements(elements, topLevelIds), [elements, topLevelIds]);
-}