@hyperframes/studio 0.8.54 → 0.8.56

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/utils/studioSaveDiagnostics.ts

@@ -165,9 +165,21 @@ export function buildStudioSaveFailureProperties(
     target_id: input.targetId ?? undefined,
     target_selector: input.targetSelector ?? undefined,
     target_source_file: input.targetSourceFile ?? undefined,
+    block_detail: gsapBlockDetail(input.error),
   };
 }
 
+/**
+ * The specific cause behind a blocked GSAP edit. `error_message` only carries
+ * the coarse copy, and one of those strings covers six different situations,
+ * so the message alone cannot say which one a user hit.
+ */
+function gsapBlockDetail(error: unknown): string | undefined {
+  if (!(error instanceof Error) || error.name !== "GsapEditBlockedError") return undefined;
+  const detail = (error as { detail?: unknown }).detail;
+  return typeof detail === "string" ? detail : undefined;
+}
+
 export function trackStudioSaveFailure(input: StudioSaveFailureInput): void {
   trackStudioEvent("save_failure", buildStudioSaveFailureProperties(input));
 }

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]);
-}