@hyperframes/studio 0.7.46 → 0.7.47

package/src/utils/editHistory.test.ts

@@ -209,6 +209,67 @@ describe("edit history", () => {
     expect(state.undo[0].files["index.html"].after).toBe("c");
   });
 
+  it("folds a slow GSAP follow-up into the timing edit via a per-entry coalesceMs override", () => {
+    const timing = buildEditHistoryEntry({
+      projectId: "project-1",
+      label: "Resize timeline clip",
+      kind: "timeline",
+      coalesceKey: "timeline-resize:clip",
+      files: { "index.html": { before: "orig", after: "timing" } },
+      now: 0,
+      id: "timing",
+    });
+    // The server GSAP rewrite lands ~2s later, past the 300ms default window, but the
+    // follow-up carries a large coalesceMs so undo still collapses to a single step.
+    const gsap = buildEditHistoryEntry({
+      projectId: "project-1",
+      label: "Resize timeline clip",
+      kind: "timeline",
+      coalesceKey: "timeline-resize:clip",
+      coalesceMs: 10_000,
+      files: { "index.html": { before: "timing", after: "timing+gsap" } },
+      now: 2000,
+      id: "gsap",
+    });
+
+    const state = pushEditHistoryEntry(
+      pushEditHistoryEntry(createEmptyEditHistory(), timing),
+      gsap,
+    );
+
+    expect(state.undo).toHaveLength(1);
+    expect(state.undo[0].files["index.html"].before).toBe("orig");
+    expect(state.undo[0].files["index.html"].after).toBe("timing+gsap");
+  });
+
+  it("does not merge a slow follow-up without the coalesceMs override", () => {
+    const timing = buildEditHistoryEntry({
+      projectId: "project-1",
+      label: "Resize timeline clip",
+      kind: "timeline",
+      coalesceKey: "timeline-resize:clip",
+      files: { "index.html": { before: "orig", after: "timing" } },
+      now: 0,
+      id: "timing",
+    });
+    const late = buildEditHistoryEntry({
+      projectId: "project-1",
+      label: "Resize timeline clip",
+      kind: "timeline",
+      coalesceKey: "timeline-resize:clip",
+      files: { "index.html": { before: "timing", after: "timing+gsap" } },
+      now: 2000,
+      id: "late",
+    });
+
+    const state = pushEditHistoryEntry(
+      pushEditHistoryEntry(createEmptyEditHistory(), timing),
+      late,
+    );
+
+    expect(state.undo).toHaveLength(2);
+  });
+
   it("coalesces entries with the same coalesceKey within the window (prop: format)", () => {
     const first = buildEditHistoryEntry({
       projectId: "project-1",

package/src/utils/editHistory.ts

@@ -13,6 +13,8 @@ export interface EditHistoryEntry {
   label: string;
   kind: EditHistoryKind;
   coalesceKey?: string;
+  /** Per-entry coalesce window override (ms). Falls back to the reducer default. */
+  coalesceMs?: number;
   createdAt: number;
   files: Record<string, EditHistoryFileSnapshot>;
 }
@@ -35,6 +37,7 @@ export interface BuildEditHistoryEntryInput {
   label: string;
   kind?: EditHistoryKind;
   coalesceKey?: string;
+  coalesceMs?: number;
   now: number;
   files: Record<string, { before: string; after: string }>;
 }
@@ -99,6 +102,7 @@ export function buildEditHistoryEntry(input: BuildEditHistoryEntryInput): EditHi
     label: input.label,
     kind: input.kind ?? "manual",
     coalesceKey: input.coalesceKey,
+    coalesceMs: input.coalesceMs,
     createdAt: input.now,
     files,
   };
@@ -111,7 +115,9 @@ export function pushEditHistoryEntry(
 ): EditHistoryState {
   if (Object.keys(entry.files).length === 0) return state;
 
-  const coalesceMs = options?.coalesceMs ?? DEFAULT_COALESCE_MS;
+  // The incoming entry's own window wins so a caller can guarantee a merge even when a
+  // slow async step (e.g. a server GSAP rewrite) sits between the two records.
+  const coalesceMs = entry.coalesceMs ?? options?.coalesceMs ?? DEFAULT_COALESCE_MS;
   const maxEntries = options?.maxEntries ?? DEFAULT_MAX_ENTRIES;
   const previous = state.undo[state.undo.length - 1];
   let undo = state.undo;

package/src/utils/rootDuration.test.ts

@@ -0,0 +1,34 @@
+import { describe, expect, it } from "vitest";
+import { extendRootDurationInSource } from "./rootDuration";
+
+describe("extendRootDurationInSource", () => {
+  it("extends data-duration when the new end is bigger than the root duration", () => {
+    const source = [
+      `<div data-composition-id="main" data-duration="4">`,
+      `  <section id="clip" data-start="2" data-duration="3"></section>`,
+      `</div>`,
+    ].join("\n");
+
+    expect(extendRootDurationInSource(source, 5.25)).toContain(
+      `data-composition-id="main" data-duration="5.25"`,
+    );
+  });
+
+  it("does nothing when the new end is smaller than or equal to the root duration", () => {
+    const source = `<div data-composition-id="main" data-duration="6"></div>`;
+
+    expect(extendRootDurationInSource(source, 5)).toBe(source);
+    expect(extendRootDurationInSource(source, 6)).toBe(source);
+  });
+
+  it("leaves non-root data-duration attributes untouched by the extension", () => {
+    const source = [
+      `<div data-duration="3"></div>`,
+      `<div data-composition-id="main" data-duration="4"></div>`,
+    ].join("\n");
+    const patched = extendRootDurationInSource(source, 7);
+
+    expect(patched).toContain(`<div data-duration="3"></div>`);
+    expect(patched).toContain(`<div data-composition-id="main" data-duration="7"></div>`);
+  });
+});

package/src/utils/rootDuration.ts

@@ -0,0 +1,17 @@
+import { formatTimelineAttributeNumber } from "../player/components/timelineEditing";
+
+export function extendRootDurationInSource(source: string, newEnd: number): string {
+  const rootDurMatch = source.match(
+    /(<[^>]*data-composition-id="[^"]*"[^>]*data-duration=")([^"]*)(")/,
+  );
+  if (rootDurMatch) {
+    const rootDur = parseFloat(rootDurMatch[2]!);
+    if (newEnd > rootDur) {
+      return source.replace(
+        rootDurMatch[0],
+        `${rootDurMatch[1]}${formatTimelineAttributeNumber(newEnd)}${rootDurMatch[3]}`,
+      );
+    }
+  }
+  return source;
+}

package/src/utils/sdkCutover.ts

@@ -196,6 +196,51 @@ export async function sdkTimingPersist(
   }
 }
 
+export async function sdkTimingBatchPersist(
+  changes: Array<{
+    hfId: string;
+    timingUpdate: { start?: number; duration?: number; trackIndex?: number };
+  }>,
+  targetPath: string,
+  sdkSession: Composition | null | undefined,
+  deps: CutoverDeps,
+  options?: CutoverOptions,
+): Promise<boolean> {
+  const timingSrc = deps.readProjectFile;
+  for (const change of changes) {
+    void recordResolverParity(
+      sdkSession,
+      change.hfId,
+      "setTiming",
+      timingSrc ? () => timingSrc(targetPath) : undefined,
+    );
+  }
+  if (!STUDIO_SDK_CUTOVER_ENABLED) return false;
+  if (!sdkSession || wrongCompositionFile(deps, targetPath)) return false;
+  if (changes.some((change) => !sdkSession.getElement(change.hfId))) return false;
+  try {
+    const serializedBefore = sdkSession.serialize();
+    sdkSession.batch(() => {
+      for (const change of changes) sdkSession.setTiming(change.hfId, change.timingUpdate);
+    });
+    const after = sdkSession.serialize();
+    if (after === serializedBefore) return false;
+    const undoBefore = await captureOnDiskBefore(deps, targetPath, serializedBefore);
+    await persistSdkSerialize(after, targetPath, undoBefore, deps, options);
+    trackStudioEvent("sdk_cutover_success", {
+      hfId: changes[0]?.hfId ?? null,
+      opCount: changes.length,
+    });
+    return true;
+  } catch (err) {
+    trackStudioEvent("sdk_cutover_fallback", {
+      hfId: changes[0]?.hfId ?? null,
+      error: String(err),
+    });
+    return false;
+  }
+}
+
 type SdkGsapTweenOp =
   | { kind: "add"; target: string; spec: GsapTweenSpec }
   | { kind: "set"; animationId: string; properties: Partial<GsapTweenSpec> }

package/src/utils/studioHelpers.test.ts

@@ -4,6 +4,7 @@ import { describe, expect, it } from "vitest";
 import {
   findMatchingTimelineElementId,
   findTimelineIdByAncestor,
+  resolveTimelineIdForSelection,
   resolveTimelineSelectionSeekTime,
 } from "./studioHelpers";
 
@@ -72,3 +73,33 @@ describe("findTimelineIdByAncestor", () => {
     expect(findTimelineIdByAncestor(child, [], "index.html")).toBe(null);
   });
 });
+
+describe("resolveTimelineIdForSelection", () => {
+  const el = (over: Record<string, unknown>) =>
+    ({ id: "x", start: 0, duration: 1, track: 0, tag: "div", ...over }) as never;
+
+  it("resolves an ancestor clip against activeCompPath when the selection has no sourceFile", () => {
+    // #card (a clip in a sub-composition) > .leaf (selected, not itself a clip)
+    const card = document.createElement("div");
+    card.id = "card";
+    const leaf = document.createElement("span");
+    leaf.className = "leaf";
+    card.appendChild(leaf);
+
+    const els = [
+      el({
+        id: "card",
+        domId: "card",
+        key: "comps/panel.html#card",
+        sourceFile: "comps/panel.html",
+      }),
+    ];
+    const selection = { element: leaf } as never;
+
+    // Falling back to the active comp matches; the old index.html-only fallback would miss.
+    expect(resolveTimelineIdForSelection(selection, els, "comps/panel.html")).toBe(
+      "comps/panel.html#card",
+    );
+    expect(resolveTimelineIdForSelection(selection, els, null)).toBe(null);
+  });
+});

package/src/utils/studioHelpers.ts

@@ -13,7 +13,13 @@ export interface AppToast {
   tone: "error" | "info";
 }
 
-export type RightPanelTab = "layers" | "design" | "renders" | "block-params" | "slideshow";
+export type RightPanelTab =
+  | "layers"
+  | "design"
+  | "renders"
+  | "block-params"
+  | "slideshow"
+  | "variables";
 export type RightInspectorPane = "layers" | "design";
 
 export interface RightInspectorPanes {
@@ -209,6 +215,28 @@ export function findTimelineIdByAncestor(
   return null;
 }
 
+/**
+ * Resolve the timeline element id for a DOM selection: direct match first, then
+ * nearest clip ancestor. The ancestor lookup resolves against the selection's own
+ * source file, falling back to the active composition path, then index.html — so a
+ * sub-composition selection with no explicit sourceFile resolves against the comp
+ * currently open, not always the root file.
+ */
+export function resolveTimelineIdForSelection(
+  selection: DomEditSelection,
+  elements: TimelineElement[],
+  activeCompPath: string | null,
+): string | null {
+  return (
+    findMatchingTimelineElementId(selection, elements) ??
+    findTimelineIdByAncestor(
+      selection.element,
+      elements,
+      selection.sourceFile || activeCompPath || "index.html",
+    )
+  );
+}
+
 export function resolveTimelineSelectionSeekTime(
   currentTime: number,
   element: Pick<TimelineElement, "start" | "duration"> | null | undefined,

package/src/utils/studioUrlState.test.ts

@@ -8,12 +8,41 @@ import {
   normalizeStudioCompositionPath,
   normalizeStudioUrlPanelTab,
   parseStudioUrlStateFromHash,
+  resolveMasterCompositionPath,
 } from "./studioUrlState";
 import { useStudioUrlState } from "../hooks/useStudioUrlState";
 import { usePlayerStore } from "../player";
 
 globalThis.IS_REACT_ACT_ENVIRONMENT = true;
 
+describe("resolveMasterCompositionPath", () => {
+  it("prefers index.html when present", () => {
+    expect(resolveMasterCompositionPath(["frames/a.html", "index.html", "b.html"])).toBe(
+      "index.html",
+    );
+  });
+
+  it("falls back to the first .html when there is no index.html", () => {
+    expect(resolveMasterCompositionPath(["notes.md", "card.html", "hero.html"])).toBe("card.html");
+  });
+
+  it("returns null when the project carries no composition", () => {
+    expect(resolveMasterCompositionPath(["notes.md", "styles.css"])).toBeNull();
+    expect(resolveMasterCompositionPath([])).toBeNull();
+  });
+});
+
+describe("normalizeStudioUrlPanelTab", () => {
+  it("accepts slideshow and variables as valid tabs", () => {
+    expect(normalizeStudioUrlPanelTab("slideshow", { inspectorPanelsEnabled: true })).toBe(
+      "slideshow",
+    );
+    expect(normalizeStudioUrlPanelTab("variables", { inspectorPanelsEnabled: true })).toBe(
+      "variables",
+    );
+  });
+});
+
 function resetPlayerStore() {
   usePlayerStore.setState({
     isPlaying: false,

package/src/utils/studioUrlState.ts

@@ -19,7 +19,20 @@ export interface StudioUrlState {
   selection: StudioUrlSelectionState | null;
 }
 
-const VALID_TABS: RightPanelTab[] = ["layers", "design", "renders"];
+const VALID_TABS: RightPanelTab[] = ["layers", "design", "renders", "slideshow", "variables"];
+
+/**
+ * The composition a schema-level panel (Variables / Slideshow) targets on the
+ * master view, where there is no explicit `activeCompPath`. Prefer the
+ * `index.html` convention, but fall back to the first `.html` in the file tree
+ * (composition-browser order) so projects whose entry file is `card.html`,
+ * `hero.html`, etc. don't silently mis-target a non-existent `index.html`.
+ * Returns null when the project carries no composition file at all.
+ */
+export function resolveMasterCompositionPath(fileTree: string[]): string | null {
+  if (fileTree.includes("index.html")) return "index.html";
+  return fileTree.find((p) => p.endsWith(".html")) ?? null;
+}
 
 export function normalizeStudioUrlPanelTab(
   tab: RightPanelTab | null,
@@ -106,6 +119,8 @@ export function readStudioUrlStateFromWindow(): StudioUrlState {
   return parseStudioUrlStateFromHash(window.location.hash);
 }
 
+// Pre-existing param-assembly complexity — surfaced by this PR's line shifts.
+// fallow-ignore-next-line complexity
 export function buildStudioHash(projectId: string, state: StudioUrlState): string {
   const params = new URLSearchParams();