@hyperframes/studio 0.8.53-desktop.0 → 0.8.53

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

@@ -5,7 +5,7 @@ import { createRoot, type Root } from "react-dom/client";
 import type { GsapAnimation, PropertyGroupName } from "@hyperframes/core/gsap-parser";
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { TimelinePropertyLanes } from "./TimelinePropertyLanes";
-import { TimelineTrackHeader, gutterFill } from "./TimelineTrackHeader";
+import { TimelineTrackHeader } from "./TimelineTrackHeader";
 import { defaultTimelineTheme } from "./timelineTheme";
 import { type TimelineElement } from "../store/playerStore";
 import type { TimelineEditCallbacks } from "./timelineCallbacks";
@@ -794,6 +794,10 @@ describe("TimelineTrackHeader", () => {
       });
       expect(header()?.style.paddingLeft).toBe("14px");
       expect(header()?.style.borderLeft).toContain("2px");
+      // And a lighter gutter, so the row reads as sitting INSIDE its group
+      // rather than beside it. Overlaid on the theme's own fill rather than a
+      // hard-coded colour, so it follows whatever the gutter is.
+      expect(header()?.style.background).toContain("linear-gradient");
       act(() => view.root.unmount());
     });
 
@@ -908,28 +912,3 @@ describe("TimelineTrackHeader", () => {
     });
   });
 });
-
-// AD147: a host themes the timeline by overriding --timeline-* on theme.css,
-// so the rendered gutter must carry the CSS variable, not a baked-in colour.
-describe("theming", () => {
-  it("reads the gutter background and border from timeline theme tokens", () => {
-    const view = renderHeader({});
-    const header = view.host.querySelector<HTMLElement>('[role="rowheader"]');
-    expect(header?.style.background).toBe(defaultTimelineTheme.gutterBackground);
-    expect(header?.style.background).toContain("var(--timeline-gutter-bg)");
-    expect(header?.style.borderRight).toContain(defaultTimelineTheme.gutterBorder);
-    act(() => view.root.unmount());
-  });
-
-  // happy-dom's `background` shorthand garbles a `var()` layer next to
-  // `linear-gradient(...)` (verified), so this checks the same value through
-  // the pure function instead of the broken CSSOM roundtrip.
-  it("overlays the group-member tint on the themed gutter, not a hard-coded colour", () => {
-    const filled = gutterFill(defaultTimelineTheme.gutterBackground, true);
-    expect(filled).toContain("linear-gradient");
-    expect(filled.endsWith(defaultTimelineTheme.gutterBackground)).toBe(true);
-    expect(gutterFill(defaultTimelineTheme.gutterBackground, false)).toBe(
-      defaultTimelineTheme.gutterBackground,
-    );
-  });
-});

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/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/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;

package/src/hooks/timelineEditPermission.ts

@@ -1,31 +0,0 @@
-import { useCallback } from "react";
-import type { TimelineElement } from "../player";
-
-/** A host's verdict on one element: editable, or blocked with a reason to show. */
-export type TimelineEditPermission = true | { blocked: true; reason: string };
-
-export type CanEditTimelineElement = (element: TimelineElement) => TimelineEditPermission;
-
-/**
- * Refuses a write when any target element is blocked, toasting the host's
- * reason. Absent `canEdit` never refuses, so Studio itself is unchanged.
- */
-export function useTimelineEditGate(
-  canEdit: CanEditTimelineElement | undefined,
-  showToast: (message: string, tone?: "error" | "info") => void,
-) {
-  return useCallback(
-    (targets: readonly TimelineElement[]): boolean => {
-      if (!canEdit) return true;
-      for (const element of targets) {
-        const verdict = canEdit(element);
-        if (verdict !== true) {
-          showToast(verdict.reason, "error");
-          return false;
-        }
-      }
-      return true;
-    },
-    [canEdit, showToast],
-  );
-}

package/src/hooks/useProjectFileWriter.ts

@@ -1,150 +0,0 @@
-import { useCallback, useMemo } from "react";
-import {
-  createStudioSaveHttpError,
-  retryStudioSave,
-  StudioFileConflictError,
-  StudioSaveNetworkError,
-} from "../utils/studioSaveDiagnostics";
-import { studioExpectedFileVersion, studioWriteHeaders } from "../utils/studioFileVersion";
-
-export interface UseProjectFileWriterOptions {
-  projectId: string | null;
-}
-
-// The etag-guarded project-file read/write pair every Studio save path
-// shares. A host mounting hand editing outside Studio needs only this, not
-// the full file manager (file tree, editor tabs, uploads, font assets).
-export function useProjectFileWriter({ projectId }: UseProjectFileWriterOptions) {
-  const fileVersionScope = useMemo(
-    () => ({ projectId, versions: new Map<string, string | null>() }),
-    [projectId],
-  );
-  const fileVersions = fileVersionScope.versions;
-
-  const observeProjectFileVersion = useCallback(
-    (path: string, version: string | null) => {
-      fileVersions.set(path, version);
-    },
-    [fileVersions],
-  );
-
-  const readProjectFile = useCallback(
-    async (path: string): Promise<string> => {
-      if (!projectId) throw new Error("No active project");
-      const response = await fetch(
-        `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}`,
-      );
-      if (!response.ok) throw new Error(`Failed to read ${path}`);
-      const data = (await response.json()) as { content?: string; version?: string };
-      if (typeof data.content !== "string") throw new Error(`Missing file contents for ${path}`);
-      fileVersions.set(path, data.version ?? response.headers.get("etag"));
-      return data.content;
-    },
-    [fileVersions, projectId],
-  );
-
-  const readOptionalProjectFile = useCallback(
-    async (path: string): Promise<string> => {
-      if (!projectId) throw new Error("No active project");
-      const response = await fetch(
-        `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(path)}?optional=1`,
-      );
-      if (!response.ok) throw new Error(`Failed to read ${path}`);
-      const data = (await response.json()) as { content?: string; version?: string };
-      fileVersions.set(path, data.version ?? response.headers.get("etag"));
-      return typeof data.content === "string" ? data.content : "";
-    },
-    [fileVersions, projectId],
-  );
-
-  const writeProjectFile = useCallback(
-    async (path: string, content: string, expectedContent?: string): Promise<void> => {
-      if (!projectId) throw new Error("No active project");
-      const writeProjectId = projectId;
-      let expectedVersion = await studioExpectedFileVersion(fileVersions, path, expectedContent);
-      if (expectedVersion === undefined) {
-        const preflight = await fetch(
-          `/api/projects/${encodeURIComponent(writeProjectId)}/files/${encodeURIComponent(path)}`,
-        );
-        if (preflight.ok) {
-          const data = (await preflight.json()) as { content?: string; version?: string };
-          throw new StudioFileConflictError({
-            filePath: path,
-            currentVersion: data.version ?? preflight.headers.get("etag"),
-            currentContent: data.content ?? null,
-            attemptedContent: content,
-          });
-        } else if (preflight.status === 404) {
-          expectedVersion = null;
-        } else {
-          throw await createStudioSaveHttpError(preflight, `Failed to read ${path} before save`);
-        }
-      }
-      // fallow-ignore-next-line complexity
-      await retryStudioSave(async () => {
-        // Each request gets its own receipt identity. If a committed request loses its response,
-        // the retry can produce a second filesystem receipt that must be suppressed independently.
-        let response: Response;
-        try {
-          response = await fetch(
-            `/api/projects/${encodeURIComponent(writeProjectId)}/files/${encodeURIComponent(path)}`,
-            {
-              method: "PUT",
-              headers: {
-                "Content-Type": "text/plain",
-                ...studioWriteHeaders(),
-                ...(expectedVersion ? { "If-Match": expectedVersion } : { "If-None-Match": "*" }),
-              },
-              body: content,
-            },
-          );
-        } catch (error) {
-          throw new StudioSaveNetworkError(`Failed to save ${path}: network error`, {
-            cause: error,
-          });
-        }
-        if (response.status === 409) {
-          const conflict = (await response.json().catch(() => null)) as {
-            currentVersion?: string | null;
-            currentContent?: string | null;
-          } | null;
-          const currentVersion = conflict?.currentVersion ?? null;
-          if (currentVersion && conflict?.currentContent === content) {
-            fileVersions.set(path, currentVersion);
-            return;
-          }
-          throw new StudioFileConflictError({
-            filePath: path,
-            currentVersion,
-            currentContent: conflict?.currentContent ?? null,
-            attemptedContent: content,
-          });
-        }
-        if (!response.ok) throw await createStudioSaveHttpError(response, `Failed to save ${path}`);
-        const result = (await response.json()) as { version?: string };
-        const version = result.version ?? response.headers.get("etag");
-        if (!version)
-          throw new Error(`Save response for ${path} did not include a content version`);
-        fileVersions.set(path, version);
-      });
-    },
-    [fileVersions, projectId],
-  );
-
-  return useMemo(
-    () => ({
-      fileVersions,
-      readProjectFile,
-      writeProjectFile,
-      readOptionalProjectFile,
-      observeProjectFileVersion,
-    }),
-    [
-      fileVersions,
-      readProjectFile,
-      writeProjectFile,
-      readOptionalProjectFile,
-      observeProjectFileVersion,
-    ],
-  );
-}

package/src/hooks/useTrackPendingTimelineEdit.test.tsx

@@ -1,62 +0,0 @@
-// @vitest-environment happy-dom
-
-import { act, createElement } from "react";
-import { createRoot, type Root } from "react-dom/client";
-import { afterEach, describe, expect, it } from "vitest";
-import { flushStudioPendingEdits } from "../utils/studioPendingEdits";
-import { useTrackPendingTimelineEdit } from "./useTrackPendingTimelineEdit";
-
-(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
-
-let root: Root | null = null;
-afterEach(() => act(() => root?.unmount()));
-
-function mount() {
-  let track!: ReturnType<typeof useTrackPendingTimelineEdit>;
-  function Probe() {
-    track = useTrackPendingTimelineEdit();
-    return null;
-  }
-  root = createRoot(document.createElement("div"));
-  act(() => root!.render(createElement(Probe)));
-  return track;
-}
-
-const deferred = <T,>() => {
-  let resolve!: (value: T) => void;
-  const promise = new Promise<T>((r) => (resolve = r));
-  return { promise, resolve };
-};
-
-describe("useTrackPendingTimelineEdit", () => {
-  it("feeds Studio's shared pending-edit registry, so the app-wide flush waits for it", async () => {
-    const track = mount();
-    const gate = deferred<void>();
-    const order: string[] = [];
-    const tracked = track(() => gate.promise.then(() => order.push("edit-settled")));
-    const call = tracked();
-    const flushPromise = flushStudioPendingEdits().then(() => order.push("flushed"));
-    // Give the flush's own microtasks a turn: if tracking did nothing, it
-    // would already show "flushed" here, before the edit ever settles.
-    await Promise.resolve();
-    await Promise.resolve();
-    expect(order).toEqual([]);
-    gate.resolve();
-    await call;
-    await flushPromise;
-    expect(order).toEqual(["edit-settled", "flushed"]);
-  });
-
-  it("returns the same wrapper for the same handler across calls", () => {
-    const track = mount();
-    const handler = () => Promise.resolve();
-    expect(track(handler)).toBe(track(handler));
-  });
-
-  it("returns a different wrapper for a different handler", () => {
-    const track = mount();
-    const a = () => Promise.resolve();
-    const b = () => Promise.resolve();
-    expect(track(a)).not.toBe(track(b));
-  });
-});

package/src/hooks/useTrackPendingTimelineEdit.ts

@@ -1,22 +0,0 @@
-import { useCallback, useRef } from "react";
-import { trackStudioPendingEdit } from "../utils/studioPendingEdits";
-
-type AsyncFn = (...args: never[]) => Promise<unknown>;
-
-// Tracks a hand-edit handler's write so undo/redo (already draining this
-// registry) waits for it. Same `fn` in, same wrapper out, so memoized deps stay stable.
-export function useTrackPendingTimelineEdit() {
-  const wrappedRef = useRef(new WeakMap<AsyncFn, AsyncFn>());
-  return useCallback(<Args extends unknown[], R>(fn: (...args: Args) => Promise<R>) => {
-    const key = fn as unknown as AsyncFn;
-    const cached = wrappedRef.current.get(key);
-    if (cached) return cached as unknown as (...args: Args) => Promise<R>;
-    const wrapped = (...args: Args): Promise<R> => {
-      const result = fn(...args);
-      trackStudioPendingEdit(result);
-      return result;
-    };
-    wrappedRef.current.set(key, wrapped as unknown as AsyncFn);
-    return wrapped;
-  }, []);
-}