@hyperframes/studio 0.8.24 → 0.8.26

package/src/components/ui/HyperframesMark.tsx

@@ -0,0 +1,53 @@
+import { useId, type SVGProps } from "react";
+
+export function HyperframesMark({ viewBox = "0 0 100 100", ...props }: SVGProps<SVGSVGElement>) {
+  const gradientId = useId();
+  const leftGradient = `${gradientId}-left`;
+  const rightGradient = `${gradientId}-right`;
+  return (
+    <svg
+      viewBox={viewBox}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+      {...props}
+    >
+      <g transform="translate(50 50)" opacity=".92">
+        <g transform="translate(-50 -50)">
+          <path
+            d="M10.1851 57.8021L33.1145 73.8313C36.2202 75.9978 41.5173 73.5433 42.4816 69.4984L51.7611 30.4271C52.7253 26.3822 48.5802 23.9277 44.4602 26.0942L13.917 42.1235C6.96677 45.7676 4.97564 54.1579 10.1851 57.8021Z"
+            fill={`url(#${leftGradient})`}
+          />
+          <path
+            d="M87.5129 57.5141L56.9696 73.5433C52.8371 75.7098 48.7046 73.2553 49.6688 69.2104L58.9483 30.1391C59.9125 26.0942 65.2097 23.6397 68.3154 25.8062L91.2447 41.8354C96.4668 45.4796 94.4631 53.8699 87.5129 57.5141Z"
+            fill={`url(#${rightGradient})`}
+          />
+        </g>
+      </g>
+      <defs>
+        <linearGradient
+          id={leftGradient}
+          x1="48.5676"
+          y1="25"
+          x2="44.7804"
+          y2="71.9384"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#06E3FA" />
+          <stop offset="1" stopColor="#4FDB5E" />
+        </linearGradient>
+        <linearGradient
+          id={rightGradient}
+          x1="54.8282"
+          y1="73.8392"
+          x2="72.0989"
+          y2="32.8932"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#06E3FA" />
+          <stop offset="1" stopColor="#4FDB5E" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}

package/src/contexts/DomEditContext.tsx

@@ -14,6 +14,7 @@ export interface DomEditActionsValue extends Pick<
   | "applyDomSelection"
   | "clearDomSelection"
   | "handleDomStyleCommit"
+  | "handleDomStyleCommitForSelection"
   | "handleDomAttributeCommit"
   | "handleDomAttributeLiveCommit"
   | "handleDomAttributeQuietCommit"
@@ -26,10 +27,12 @@ export interface DomEditActionsValue extends Pick<
   | "handleDomRotationCommit"
   | "handleDomManualEditsReset"
   | "handleDomTextCommit"
+  | "handleDomTextCommitForSelection"
   | "handleDomRichTextCommit"
   | "handleDomTextFieldStyleCommit"
   | "handleDomAddTextField"
   | "handleDomRemoveTextField"
+  | "getGsapAnimationsForSelection"
   | "handleAskAgent"
   | "handleAgentModalSubmit"
   | "handleBlockedDomMove"
@@ -153,6 +156,7 @@ export function DomEditProvider({
     applyDomSelection,
     clearDomSelection,
     handleDomStyleCommit,
+    handleDomStyleCommitForSelection,
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomAttributeQuietCommit,
@@ -166,10 +170,12 @@ export function DomEditProvider({
     handleDomManualEditsReset,
 
     handleDomTextCommit,
+    handleDomTextCommitForSelection,
     handleDomRichTextCommit,
     handleDomTextFieldStyleCommit,
     handleDomAddTextField,
     handleDomRemoveTextField,
+    getGsapAnimationsForSelection,
     handleAskAgent,
     handleAgentModalSubmit,
     handleBlockedDomMove,
@@ -243,6 +249,7 @@ export function DomEditProvider({
       applyDomSelection,
       clearDomSelection,
       handleDomStyleCommit,
+      handleDomStyleCommitForSelection,
       handleDomAttributeCommit,
       handleDomAttributeLiveCommit,
       handleDomAttributeQuietCommit,
@@ -255,10 +262,12 @@ export function DomEditProvider({
       handleDomRotationCommit,
       handleDomManualEditsReset,
       handleDomTextCommit,
+      handleDomTextCommitForSelection,
       handleDomRichTextCommit,
       handleDomTextFieldStyleCommit,
       handleDomAddTextField,
       handleDomRemoveTextField,
+      getGsapAnimationsForSelection,
       handleAskAgent,
       handleAgentModalSubmit,
       handleBlockedDomMove,
@@ -314,6 +323,7 @@ export function DomEditProvider({
       applyDomSelection,
       clearDomSelection,
       handleDomStyleCommit,
+      handleDomStyleCommitForSelection,
       handleDomAttributeCommit,
       handleDomAttributeLiveCommit,
       handleDomAttributeQuietCommit,
@@ -326,10 +336,12 @@ export function DomEditProvider({
       handleDomRotationCommit,
       handleDomManualEditsReset,
       handleDomTextCommit,
+      handleDomTextCommitForSelection,
       handleDomRichTextCommit,
       handleDomTextFieldStyleCommit,
       handleDomAddTextField,
       handleDomRemoveTextField,
+      getGsapAnimationsForSelection,
       handleAskAgent,
       handleAgentModalSubmit,
       handleBlockedDomMove,

package/src/hooks/domEditCommitRunner.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it, vi } from "vitest";
+import { bumpDomEditCommitMapVersion, runDomEditCommit } from "./domEditCommitRunner";
+
+function commitConfig(overrides: Partial<Parameters<typeof runDomEditCommit>[0]> = {}) {
+  return {
+    capture: vi.fn(),
+    apply: vi.fn(),
+    persist: vi.fn(async () => undefined),
+    shouldRevert: vi.fn(() => true),
+    revert: vi.fn(),
+    onError: vi.fn(),
+    shouldResync: vi.fn(() => false),
+    resync: vi.fn(),
+    ...overrides,
+  };
+}
+
+describe("DOM edit commit version cleanup", () => {
+  it("releases a settled target without deleting a newer target version", () => {
+    const versions = new Map<string, symbol>();
+    const first = bumpDomEditCommitMapVersion(versions, "headline");
+    const second = bumpDomEditCommitMapVersion(versions, "headline");
+
+    first.release();
+    expect(versions.size).toBe(1);
+    expect(second()).toBe(true);
+
+    second.release();
+    expect(versions.size).toBe(0);
+  });
+
+  it("never lets an old commit become latest again after cleanup and reuse", () => {
+    const versions = new Map<string, symbol>();
+    const first = bumpDomEditCommitMapVersion(versions, "headline");
+    const second = bumpDomEditCommitMapVersion(versions, "headline");
+    second.release();
+
+    const third = bumpDomEditCommitMapVersion(versions, "headline");
+
+    expect(first()).toBe(false);
+    expect(third()).toBe(true);
+  });
+
+  it("runs settlement cleanup even when capture throws", async () => {
+    const onFinally = vi.fn();
+    await expect(
+      runDomEditCommit(
+        commitConfig({
+          capture: () => {
+            throw new Error("capture failed");
+          },
+          onFinally,
+        }),
+      ),
+    ).rejects.toThrow("capture failed");
+
+    expect(onFinally).toHaveBeenCalledOnce();
+  });
+});

package/src/hooks/domEditCommitRunner.ts

@@ -1,7 +1,9 @@
+import type { DomEditPersistOutcome } from "./domEditCommitTypes";
+
 interface DomEditCommitRunnerConfig {
   capture: () => void;
   apply: () => void;
-  persist: () => Promise<void>;
+  persist: () => Promise<unknown>;
   shouldRevert: (error: unknown) => boolean;
   revert: () => void;
   onError: (error: unknown) => void;
@@ -16,6 +18,8 @@ interface DomEditCommitRunnerConfig {
    * instead of relying on a rejection that will never come.
    */
   onSettled?: (ok: boolean) => void;
+  /** Always runs once after persistence, resync, or an unexpected runner error. */
+  onFinally?: () => void;
 }
 
 interface CommitVersionRef {
@@ -28,32 +32,46 @@ export function bumpDomEditCommitVersion(versionRef: CommitVersionRef): () => bo
   return () => versionRef.current === commitVersion;
 }
 
+export interface DomEditCommitVersionGuard {
+  (): boolean;
+  release: () => void;
+}
+
 export function bumpDomEditCommitMapVersion<TKey>(
-  versionMap: Map<TKey, number>,
+  versionMap: Map<TKey, symbol>,
   versionKey: TKey,
-): () => boolean {
-  const commitVersion = (versionMap.get(versionKey) ?? 0) + 1;
+): DomEditCommitVersionGuard {
+  const commitVersion = Symbol("dom-edit-commit");
   versionMap.set(versionKey, commitVersion);
-  return () => versionMap.get(versionKey) === commitVersion;
+  const isLatest = () => versionMap.get(versionKey) === commitVersion;
+  return Object.assign(isLatest, {
+    release: () => {
+      if (isLatest()) versionMap.delete(versionKey);
+    },
+  });
 }
 
 export async function runDomEditCommit(config: DomEditCommitRunnerConfig): Promise<void> {
-  config.capture();
-  config.apply();
-
   try {
-    await config.persist();
-    config.onSettled?.(true);
-  } catch (error) {
-    if (config.shouldRevert(error)) {
-      config.revert();
+    config.capture();
+    config.apply();
+
+    try {
+      await config.persist();
+      config.onSettled?.(true);
+    } catch (error) {
+      if (config.shouldRevert(error)) {
+        config.revert();
+      }
+      config.onError(error);
+      config.onSettled?.(false);
     }
-    config.onError(error);
-    config.onSettled?.(false);
-  }
 
-  if (!config.shouldResync()) return;
-  await config.resync();
+    if (!config.shouldResync()) return;
+    await config.resync();
+  } finally {
+    config.onFinally?.();
+  }
 }
 
 /**
@@ -75,7 +93,9 @@ export type DomEditCommitDeclineReason =
   | "preview-stale"
   | "persist-failed";
 
-export type DomEditCommitOutcome = { ok: true } | { ok: false; reason: DomEditCommitDeclineReason };
+export type DomEditCommitOutcome =
+  | { ok: true; persistence?: DomEditPersistOutcome }
+  | { ok: false; reason: DomEditCommitDeclineReason };
 
 export function domEditCommitDeclined(reason: DomEditCommitDeclineReason): DomEditCommitOutcome {
   return { ok: false, reason };
@@ -93,12 +113,27 @@ export async function runReportedDomEditCommit(
   config: DomEditCommitRunnerConfig,
 ): Promise<DomEditCommitOutcome> {
   let landed = false;
+  let persistence: DomEditPersistOutcome | undefined;
   await runDomEditCommit({
     ...config,
+    persist: async () => {
+      const result = await config.persist();
+      if (isDomEditPersistOutcome(result)) persistence = result;
+    },
     onSettled: (ok) => {
       landed = ok;
       config.onSettled?.(ok);
     },
   });
-  return landed ? { ok: true } : domEditCommitDeclined("persist-failed");
+  if (!landed) return domEditCommitDeclined("persist-failed");
+  return persistence ? { ok: true, persistence } : { ok: true };
+}
+
+function isDomEditPersistOutcome(value: unknown): value is DomEditPersistOutcome {
+  if (typeof value !== "object" || value === null) return false;
+  return (
+    typeof Reflect.get(value, "sourceFile") === "string" &&
+    typeof Reflect.get(value, "version") === "string" &&
+    typeof Reflect.get(value, "changed") === "boolean"
+  );
 }

package/src/hooks/domEditCommitTypes.ts

@@ -6,6 +6,13 @@ export interface DomEditPatchBatch {
   patches: Array<{ target: PatchTarget; operations: PatchOperation[] }>;
 }
 
+/** Durable evidence returned by the one Studio DOM persistence actor. */
+export interface DomEditPersistOutcome {
+  sourceFile: string;
+  version: string;
+  changed: boolean;
+}
+
 export type CommitDomEditPatchBatches = (
   batches: DomEditPatchBatch[],
   options: {
@@ -49,4 +56,4 @@ export type PersistDomEditOperations = (
     prepareContent?: (html: string, sourceFile: string) => string;
     shouldSave?: () => boolean;
   },
-) => Promise<void>;
+) => Promise<DomEditPersistOutcome | undefined>;

package/src/hooks/domEditTextCommitPlan.ts

@@ -0,0 +1,47 @@
+import {
+  buildDomEditRichTextPatchOperation,
+  buildDomEditTextPatchOperation,
+  serializeDomEditTextFields,
+  type DomEditTextField,
+} from "../components/editor/domEditing";
+import type { PatchOperation } from "../utils/sourcePatcher";
+import { buildTextFieldChildOperations } from "./domEditTextFieldCommitOps";
+
+interface DomTextCommitPlan {
+  usesSerializedTextFields: boolean;
+  nextContent: string;
+  operations: PatchOperation[];
+}
+
+export function buildNextDomTextFields(
+  textFields: DomEditTextField[],
+  value: string,
+  fieldKey?: string,
+): DomEditTextField[] {
+  if (textFields.length === 0) return [];
+  return textFields.map((field) => (field.key === fieldKey ? { ...field, value } : field));
+}
+
+export function planDomTextCommit(
+  originalTextFields: DomEditTextField[],
+  nextTextFields: DomEditTextField[],
+  plainTextContent: string,
+): DomTextCommitPlan {
+  const usesSerializedTextFields =
+    nextTextFields.length > 1 || nextTextFields.some((field) => field.source === "child");
+  const nextContent = usesSerializedTextFields
+    ? serializeDomEditTextFields(nextTextFields)
+    : plainTextContent;
+  const childOperations = usesSerializedTextFields
+    ? buildTextFieldChildOperations(originalTextFields, nextTextFields)
+    : null;
+  // Per-child operations when the layers still line up one-for-one. Structure
+  // changes write the element's markup because no stable child address exists.
+  const operations =
+    childOperations ??
+    (usesSerializedTextFields
+      ? [buildDomEditRichTextPatchOperation(nextContent)]
+      : [buildDomEditTextPatchOperation(nextContent)]);
+
+  return { usesSerializedTextFields, nextContent, operations };
+}

package/src/hooks/timelineTrackVisibility.test.ts

@@ -316,10 +316,15 @@ describe("toggleTimelineElementHidden", () => {
     const iframe = document.createElement("iframe");
     document.body.append(iframe);
     const seek = vi.fn();
+    const forceTimelineRebind = vi.fn();
     const win = iframe.contentWindow;
     if (!win) throw new Error("Expected iframe contentWindow");
-    const playerWindow: Window & { __player?: { seek?: (time: number) => void } } = win;
+    const playerWindow: Window & {
+      __player?: { seek?: (time: number) => void };
+      __hfForceTimelineRebind?: () => void;
+    } = win;
     playerWindow.__player = { seek };
+    playerWindow.__hfForceTimelineRebind = forceTimelineRebind;
 
     const files = new Map([
       [
@@ -369,6 +374,7 @@ describe("toggleTimelineElementHidden", () => {
     expect(recordEdit).toHaveBeenCalledTimes(1);
     expect(recordEdit.mock.calls[0]?.[0]?.label).toBe("Hide element");
     expect(seek).toHaveBeenCalledWith(1.25);
+    expect(forceTimelineRebind).toHaveBeenCalledTimes(1);
     expect(
       usePlayerStore.getState().elements.find((el) => el.key === "index.html:#hero")?.hidden,
     ).toBe(true);

package/src/hooks/timelineTrackVisibility.ts

@@ -1,6 +1,8 @@
 import { useCallback } from "react";
 import { usePlayerStore, type TimelineElement } from "../player";
+import { reseekPreviewAtTime } from "../player/hooks/timelineSyncHydration";
 import { useExpandedTimelineElements } from "../player/hooks/useExpandedTimelineElements";
+import { applySoftReloadFinalization } from "../utils/gsapSoftReload";
 import {
   timelineTrackOrder,
   trackDisplayNumber,
@@ -106,11 +108,9 @@ function patchLiveHiddenState(
 }
 
 export function reseekPreviewRuntime(iframe: HTMLIFrameElement | null): void {
-  try {
-    const win: (Window & { __player?: { seek?: (time: number) => void } }) | null =
-      iframe?.contentWindow ?? null;
-    win?.__player?.seek?.(usePlayerStore.getState().currentTime);
-  } catch {}
+  const store = usePlayerStore.getState();
+  if (applySoftReloadFinalization(iframe, store.currentTime)) return;
+  reseekPreviewAtTime({ seek: store.requestSeek }, store.currentTime);
 }
 
 export function groupElementsByTargetPath(

package/src/hooks/useDomEditAttributeCommits.ts

@@ -135,7 +135,7 @@ export function useDomEditAttributeCommits({
   refreshDomEditSelectionFromPreview,
   persistDomEditOperations,
 }: UseDomEditAttributeCommitsParams) {
-  const domAttributeCommitVersionRef = useRef(new Map<string, number>());
+  const domAttributeCommitVersionRef = useRef(new Map<string, symbol>());
 
   const commitDataAttribute = useCallback(
     async (attr: string, value: string | null, options: DataAttributeCommitOptions) => {
@@ -200,6 +200,7 @@ export function useDomEditAttributeCommits({
           syncStoredAutomationFromPreview(previewIframeRef.current?.contentDocument ?? null);
         },
         onSettled: options.onSettled,
+        onFinally: isLatestCommit.release,
       });
     },
     [
@@ -288,6 +289,7 @@ export function useDomEditAttributeCommits({
         shouldResync: () => isLatestCommit() && !!options.refreshAfter,
         resync: () => refreshDomEditSelectionFromPreview(selection),
         onSettled: options.onSettled,
+        onFinally: isLatestCommit.release,
       });
     },
     [
@@ -420,6 +422,7 @@ export function useDomEditAttributeCommits({
           // shipped without one.
           syncStoredAutomationFromPreview(previewIframeRef.current?.contentDocument ?? null);
         },
+        onFinally: isLatestCommit.release,
       });
     },
     [