@hyperframes/studio 0.8.151 → 0.8.152

package/dist/assets/{index-DgbLblGR.js → index-rmD5k_ES.js}

@@ -1,4 +1,4 @@
-import{n as Qi}from"./index-BGks9KLI.js";/*!
+import{n as Qi}from"./index-p-VXwuJ2.js";/*!
  * Copyright (c) 2026-present, Vanilagy and contributors
  *
  * This Source Code Form is subject to the terms of the Mozilla Public

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export { Player } from './player.js';
 import { MusicBeatAnalysis } from '@hyperframes/core/beats';
 import * as _hyperframes_parsers from '@hyperframes/parsers';
 import { CanvasResolution } from '@hyperframes/parsers';
+import { HistoryTarget } from '@hyperframes/studio-server';
 export { SeamTransitionFrameSource, SeamTransitionLoopHandle, SeamTransitionLoopOptions, playSeamTransitionLoop } from '@hyperframes/shader-transitions';
 import '@base-ui/react/tabs';
 import 'cn';
@@ -784,6 +785,19 @@ declare function buildPickerAgentPrompt({ selection, userInstruction, }: {
 }): string;
 declare function buildPickerAgentContextPreview(selection: HyperframePickerElementInfo | null): string;
 
+type EditContextTarget = HistoryTarget;
+interface RecordEditInput$4 {
+    targets?: EditContextTarget[];
+    label: string;
+    coalesceKey?: string;
+    coalesceMs?: number;
+    files: Record<string, {
+        before: string;
+        after: string;
+    }>;
+    created?: string[];
+}
+
 interface SdkSessionPublication {
     candidate: Composition;
     expectedSession: Composition;
@@ -828,17 +842,6 @@ interface TimelineRangeSelection {
     anchorY: number;
 }
 
-interface RecordEditInput$5 {
-    label: string;
-    coalesceKey?: string;
-    coalesceMs?: number;
-    files: Record<string, {
-        before: string;
-        after: string;
-    }>;
-    created?: string[];
-}
-
 interface ImportedFontAsset {
     family: string;
     path: string;
@@ -872,7 +875,7 @@ type CommitDomAttributeBatch = (selection: DomEditSelection, operations: PatchOp
     prepareContent?: (html: string) => string;
 }) => Promise<boolean>;
 
-interface RecordEditInput$4 {
+interface RecordEditInput$3 {
     label: string;
     coalesceKey?: string;
     files: Record<string, {
@@ -896,7 +899,7 @@ interface UseTimelineEditingOptions {
     showToast: (message: string, tone?: "error" | "info") => void;
     writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
     observeProjectFileVersion?: (path: string, version: string | null) => void;
-    recordEdit: (input: RecordEditInput$4) => Promise<void>;
+    recordEdit: (input: RecordEditInput$3) => Promise<void>;
     reloadPreview: () => void;
     previewIframeRef: RefObject<HTMLIFrameElement | null>;
     pendingTimelineEditPathRef: MutableRefObject<Set<string>>;
@@ -2888,7 +2891,7 @@ declare function usePersistentEditHistory({ projectId }: UsePersistentEditHistor
             createdAt: number;
         }[];
     };
-    recordEdit: ({ label, coalesceKey, coalesceMs, files, created }: RecordEditInput$5) => Promise<void>;
+    recordEdit: ({ label, coalesceKey, coalesceMs, files, targets, created }: RecordEditInput$4) => Promise<void>;
     claimKey: (key: string) => string;
     undo: (callbacks: ApplyCallbacks) => Promise<ApplyResult>;
     redo: (callbacks: ApplyCallbacks) => Promise<ApplyResult>;
@@ -3128,7 +3131,7 @@ declare const useAudioMetersVisible: zustand.UseBoundStore<zustand.StoreApi<{
 type InPlace = {
     inPlace?: boolean;
 };
-interface RecordEditInput$3 {
+interface RecordEditInput$2 {
     label: string;
     coalesceKey?: string;
     files: Record<string, {
@@ -3142,7 +3145,7 @@ interface UseClipboardOptions {
     domEditSelectionRef: React.MutableRefObject<DomEditSelection | null>;
     showToast: (message: string, tone?: "error" | "info") => void;
     writeProjectFile: (path: string, content: string) => Promise<void>;
-    recordEdit: (input: RecordEditInput$3) => Promise<void>;
+    recordEdit: (input: RecordEditInput$2) => Promise<void>;
     reloadPreview: () => void;
     handleTimelineElementsDelete: (elements: TimelineElement[]) => Promise<void>;
     handleDomEditElementDelete: (selection: DomEditSelection) => Promise<void>;
@@ -3391,7 +3394,7 @@ type DomEditCommitOutcome = {
 
 /** One entry in the studio's edit history, as `useDomEditSession`'s caller
  *  supplies it. */
-interface RecordEditInput$2 {
+interface RecordEditInput$1 {
     label: string;
     coalesceKey?: string;
     files: Record<string, {
@@ -3419,7 +3422,7 @@ interface UseDomEditSessionParams extends DomEditTimelineParams {
     writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
     updateEditingFileContent: (path: string, content: string) => void;
     editHistory: {
-        recordEdit: (entry: RecordEditInput$2) => Promise<void>;
+        recordEdit: (entry: RecordEditInput$1) => Promise<void>;
     };
     fileTree: string[];
     importedFontAssetsRef: React.MutableRefObject<ImportedFontAsset[]>;
@@ -3613,7 +3616,7 @@ interface HistoryPreviewRestore {
     paths?: string[];
     files?: RestoreFiles;
 }
-interface RecordEditInput$1 {
+interface RecordEditInput {
     label: string;
     coalesceKey?: string;
     files: Record<string, {
@@ -3625,7 +3628,7 @@ interface UsePreviewPersistenceParams {
     showToast: (message: string, tone?: "error" | "info") => void;
     readOptionalProjectFile: (path: string) => Promise<string>;
     writeProjectFile: (path: string, content: string) => Promise<void>;
-    recordEdit: (entry: RecordEditInput$1) => Promise<void>;
+    recordEdit: (entry: RecordEditInput) => Promise<void>;
     previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
     activeCompPathRef: React.MutableRefObject<string | null>;
     /** Called to reload the preview after undo/redo or external file changes. */
@@ -3863,23 +3866,13 @@ interface DomEditZOrder {
 }
 declare function useDomEditZOrder(): DomEditZOrder;
 
-interface RecordEditInput {
-    label: string;
-    coalesceKey?: string;
-    coalesceMs?: number;
-    files: Record<string, {
-        before: string;
-        after: string;
-    }>;
-}
-
 interface UseDomStyleCommitOptions {
     projectId: string | null;
     /** The preview the host already runs: the style applies there live, and it reseeks after a save. */
     iframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
     /** The same function objects the host gives the timeline, so there is one writer and one undo list. */
     writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
-    recordEdit: (entry: RecordEditInput) => Promise<void>;
+    recordEdit: (entry: RecordEditInput$4) => Promise<void>;
     activeCompPath?: string | null;
     showToast?: (message: string, tone?: "error" | "info") => void;
 }

package/dist/index.html

@@ -14,7 +14,7 @@
         document.documentElement.dataset.theme = "paper";
       }
     </script>
-    <script type="module" crossorigin src="/assets/index-BGks9KLI.js"></script>
+    <script type="module" crossorigin src="/assets/index-p-VXwuJ2.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-DkQKsFxx.css">
   </head>
   <body>

package/dist/index.js

@@ -44187,6 +44187,14 @@ async function rollbackWrite(targetPath, originalContent, expectedCurrentContent
     );
   }
 }
+function historyEntryOptions(options) {
+  return {
+    label: options?.label ?? "Edit layer",
+    ...options?.targets && { targets: options.targets },
+    ...options?.coalesceKey ? { coalesceKey: options.coalesceKey } : {},
+    ...options?.coalesceMs != null ? { coalesceMs: options.coalesceMs } : {}
+  };
+}
 async function writeAndRecord(after, targetPath, originalContent, deps, options) {
   markSelfWrite(targetPath, after);
   try {
@@ -44196,9 +44204,7 @@ async function writeAndRecord(after, targetPath, originalContent, deps, options)
   }
   try {
     await deps.editHistory.recordEdit({
-      label: options?.label ?? "Edit layer",
-      ...options?.coalesceKey ? { coalesceKey: options.coalesceKey } : {},
-      ...options?.coalesceMs != null ? { coalesceMs: options.coalesceMs } : {},
+      ...historyEntryOptions(options),
       files: { [targetPath]: { before: originalContent, after } }
     });
     return null;
@@ -44318,7 +44324,18 @@ async function sdkCutoverPersist(selection, ops, originalContent, targetPath, sd
     (session) => {
       for (const editOp of patchOpsToSdkEditOps(hfId, ops)) session.dispatch(editOp);
     },
-    options
+    {
+      ...options,
+      targets: [
+        {
+          file: targetPath,
+          hfId,
+          ...selection.id && { id: selection.id },
+          ...selection.selector && { selector: selection.selector },
+          ...selection.selectorIndex !== void 0 && { selectorIndex: selection.selectorIndex }
+        }
+      ]
+    }
   );
   trackCutoverResult(result, "dom", { hfId, opCount: ops.length });
   return result;
@@ -74892,13 +74909,14 @@ function usePersistentEditHistory({ projectId }) {
     return () => setStudioPendingEditClaimClock(null);
   }, [own]);
   const recordEdit = useCallback99(
-    async ({ label, coalesceKey, coalesceMs, files, created = [] }) => {
+    async ({ label, coalesceKey, coalesceMs, files, targets, created = [] }) => {
       if (!projectId) return;
       const paths = [...Object.keys(files), ...created];
       own.overtake();
       const reply = await post(historyUrl(projectId, "/claim"), {
         label,
         paths,
+        ...targets?.length && { targets },
         overwrote: await overwroteVersions(files),
         ...coalesceKey && {
           coalesceKey: claimKey(coalesceKey),
@@ -80574,6 +80592,17 @@ function useDomEditPersist({
         const finalContent2 = prepared.content;
         await editHistory.recordEdit({
           ...history2,
+          targets: [
+            {
+              file: targetPath,
+              ...selection.id && { id: selection.id },
+              ...selection.hfId && { hfId: selection.hfId },
+              ...selection.selector && { selector: selection.selector },
+              ...selection.selectorIndex !== void 0 && {
+                selectorIndex: selection.selectorIndex
+              }
+            }
+          ],
           files: { [targetPath]: { before: originalContent, after: finalContent2 } }
         });
         return { patchData: patchData2, patchedContent: patchedContent2, finalContent: finalContent2 };
@@ -81836,7 +81865,18 @@ function useDomEditCommits({
                   label: options.label,
                   coalesceKey: options.coalesceKey,
                   coalesceMs: options.coalesceMs,
-                  files
+                  files,
+                  targets: batches.filter((batch) => Object.hasOwn(files, batch.sourceFile)).flatMap(
+                    (batch) => batch.patches.map(({ target }) => ({
+                      file: batch.sourceFile,
+                      ...target.id && { id: target.id },
+                      ...target.hfId && { hfId: target.hfId },
+                      ...target.selector && { selector: target.selector },
+                      ...target.selectorIndex !== void 0 && {
+                        selectorIndex: target.selectorIndex
+                      }
+                    }))
+                  )
                 });
               }
               return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.151",
+  "version": "0.8.152",
   "description": "",
   "repository": {
     "type": "git",
@@ -60,12 +60,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/player": "0.8.151",
-    "@hyperframes/sdk": "0.8.151",
-    "@hyperframes/core": "0.8.151",
-    "@hyperframes/shader-transitions": "0.8.151",
-    "@hyperframes/studio-server": "0.8.151",
-    "@hyperframes/parsers": "0.8.151"
+    "@hyperframes/core": "0.8.152",
+    "@hyperframes/parsers": "0.8.152",
+    "@hyperframes/player": "0.8.152",
+    "@hyperframes/sdk": "0.8.152",
+    "@hyperframes/shader-transitions": "0.8.152",
+    "@hyperframes/studio-server": "0.8.152"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -82,7 +82,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.151"
+    "@hyperframes/producer": "0.8.152"
   },
   "peerDependencies": {
     "react": "19",

package/src/hooks/useDomEditCommits.test.tsx

@@ -350,6 +350,11 @@ describe("useDomEditCommits z-index reorder persistence", () => {
           // round-trip that separates them.
           coalesceMs: Number.POSITIVE_INFINITY,
           files: { "index.html": { before: original, after } },
+          targets: [
+            { file: "index.html", id: "a", hfId: "hf-card" },
+            { file: "index.html", id: "b" },
+            { file: "index.html", id: "c" },
+          ],
         });
         // FIX: a z-only reorder must NOT remount the preview iframe ("the blink").
         // The live DOM + store already hold the final state and the server matched

package/src/hooks/useDomEditCommits.ts

@@ -178,6 +178,19 @@ export function useDomEditCommits({
                   coalesceKey: options.coalesceKey,
                   coalesceMs: options.coalesceMs,
                   files,
+                  targets: batches
+                    .filter((batch) => Object.hasOwn(files, batch.sourceFile))
+                    .flatMap((batch) =>
+                      batch.patches.map(({ target }) => ({
+                        file: batch.sourceFile,
+                        ...(target.id && { id: target.id }),
+                        ...(target.hfId && { hfId: target.hfId }),
+                        ...(target.selector && { selector: target.selector }),
+                        ...(target.selectorIndex !== undefined && {
+                          selectorIndex: target.selectorIndex,
+                        }),
+                      })),
+                    ),
                 });
               }
               return {

package/src/hooks/useDomEditPersist.test.tsx

@@ -116,6 +116,14 @@ describe("useDomEditPersist", () => {
       coalesceKey: undefined,
       coalesceMs: undefined,
       files: { "index.html": { before: SOURCE, after: PATCHED } },
+      targets: [
+        {
+          file: "index.html",
+          hfId: "hf-card",
+          selector: '[data-hf-id="hf-card"]',
+          selectorIndex: 0,
+        },
+      ],
     });
     expect(params.forceReloadSdkSession).toHaveBeenCalledTimes(1);
     expect(params.reloadPreview).toHaveBeenCalledTimes(1);

package/src/hooks/useDomEditPersist.ts

@@ -22,12 +22,8 @@ import { reseekPreviewRuntime } from "./timelineTrackVisibility";
 import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
 import { readProjectFileContent } from "../utils/studioFileHistory";
 
-export interface RecordEditInput {
-  label: string;
-  coalesceKey?: string;
-  coalesceMs?: number;
-  files: Record<string, { before: string; after: string }>;
-}
+import type { RecordEditInput } from "../utils/studioFileHistory";
+export type { RecordEditInput } from "../utils/studioFileHistory";
 
 export interface UseDomEditPersistParams {
   activeCompPath: string | null;
@@ -164,6 +160,17 @@ export function useDomEditPersist({
 
         await editHistory.recordEdit({
           ...history,
+          targets: [
+            {
+              file: targetPath,
+              ...(selection.id && { id: selection.id }),
+              ...(selection.hfId && { hfId: selection.hfId }),
+              ...(selection.selector && { selector: selection.selector }),
+              ...(selection.selectorIndex !== undefined && {
+                selectorIndex: selection.selectorIndex,
+              }),
+            },
+          ],
           files: { [targetPath]: { before: originalContent, after: finalContent } },
         });
         return { patchData, patchedContent, finalContent };

package/src/hooks/usePersistentEditHistory.test.ts

@@ -700,3 +700,23 @@ it("an undo taken before the view caught up with the edit still reports the prev
     files: { "index.html": { previous: "B", restored: "A" } },
   });
 });
+
+it("stores DOM targets in existing history and retains them through undo and redo", async () => {
+  const { hook, save, readFile, history } = await studio();
+  save("B");
+  const targets = [{ file: "index.html", id: "title", selector: ".title", selectorIndex: 1 }];
+  await act(() =>
+    hook().recordEdit({
+      label: "Title",
+      targets,
+      files: { "index.html": { before: "A", after: "B" } },
+    }),
+  );
+  expect(history.list().at(-1)?.targets).toEqual(targets);
+  await vi.waitFor(() => expect(hook().canUndo).toBe(true));
+  await act(() => hook().undo({ readFile }));
+  expect(history.list().at(-1)?.targets).toEqual(targets);
+  await vi.waitFor(() => expect(hook().canRedo).toBe(true));
+  await act(() => hook().redo({ readFile }));
+  expect(history.list().at(-1)?.targets).toEqual(targets);
+});

package/src/hooks/usePersistentEditHistory.ts

@@ -240,13 +240,14 @@ export function usePersistentEditHistory({ projectId }: UsePersistentEditHistory
   }, [own]);
 
   const recordEdit = useCallback(
-    async ({ label, coalesceKey, coalesceMs, files, created = [] }: RecordEditInput) => {
+    async ({ label, coalesceKey, coalesceMs, files, targets, created = [] }: RecordEditInput) => {
       if (!projectId) return;
       const paths = [...Object.keys(files), ...created];
       own.overtake();
       const reply = await post(historyUrl(projectId, "/claim"), {
         label,
         paths,
+        ...(targets?.length && { targets }),
         overwrote: await overwroteVersions(files),
         ...(coalesceKey && {
           coalesceKey: claimKey(coalesceKey),

package/src/utils/sdkCutover.test.ts

@@ -358,7 +358,10 @@ describe("sdkCutoverPersist", () => {
       label: "Resize layer box",
     });
     expect(deps.editHistory.recordEdit).toHaveBeenCalledWith(
-      expect.objectContaining({ label: "Resize layer box" }),
+      expect.objectContaining({
+        label: "Resize layer box",
+        targets: [{ file: "/comp.html", hfId: "hf-abc" }],
+      }),
     );
   });
 

package/src/utils/sdkCutover.ts

@@ -32,7 +32,6 @@ export type {
   CutoverResult,
   PublishSdkSession,
 } from "./sdkEditTransaction";
-
 function sdkFamilyEnabled(family: StudioSdkOperationFamily): boolean {
   const configured = Object.prototype.hasOwnProperty.call(
     studioAvailability,
@@ -54,7 +53,6 @@ function trackCutoverResult(
     failedCutover(result.error, family, context);
   }
 }
-
 /** True when targetPath isn't the composition the SDK session models. */
 function wrongCompositionFile(deps: CutoverDeps, targetPath: string): boolean {
   return deps.compositionPath != null && targetPath !== deps.compositionPath;
@@ -105,7 +103,18 @@ export async function sdkCutoverPersist(
     (session) => {
       for (const editOp of patchOpsToSdkEditOps(hfId, ops)) session.dispatch(editOp);
     },
-    options,
+    {
+      ...options,
+      targets: [
+        {
+          file: targetPath,
+          hfId,
+          ...(selection.id && { id: selection.id }),
+          ...(selection.selector && { selector: selection.selector }),
+          ...(selection.selectorIndex !== undefined && { selectorIndex: selection.selectorIndex }),
+        },
+      ],
+    },
   );
   trackCutoverResult(result, "dom", { hfId, opCount: ops.length });
   return result;
@@ -155,7 +164,6 @@ export async function sdkTimingPersist(
     return failedCutover(error, "timing", { hfId, opCount: 1 });
   }
 }
-
 export async function sdkTimingBatchPersist(
   changes: Array<{
     hfId: string;
@@ -224,7 +232,6 @@ type SdkGsapTweenOp =
   | { kind: "add"; target: string; spec: GsapTweenSpec }
   | { kind: "set"; animationId: string; properties: Partial<GsapTweenSpec> }
   | { kind: "remove"; animationId: string };
-
 export function sdkGsapTweenPersist(
   targetPath: string,
   op: SdkGsapTweenOp,
@@ -276,7 +283,6 @@ export function sdkGsapTweenPersist(
     });
   });
 }
-
 async function dispatchGsapOpAndPersist(
   family: "gsap-animation" | "gsap-keyframe",
   targetPath: string,
@@ -327,7 +333,6 @@ async function dispatchGsapOpAndPersist(
     return failedCutover(error, family, { opCount: 1 });
   }
 }
-
 export function sdkGsapKeyframePersist(
   targetPath: string,
   animationId: string,

package/src/utils/sdkEditTransaction.ts

@@ -1,3 +1,4 @@
+import type { EditContextTarget } from "./studioFileHistory";
 import { openComposition, type Composition } from "@hyperframes/sdk";
 import { hashContent, markSelfWrite } from "../hooks/sdkSelfWriteRegistry";
 import { trackStudioEvent } from "./studioTelemetry";
@@ -31,6 +32,7 @@ export interface CutoverDeps {
   editHistory: {
     recordEdit: (entry: {
       label: string;
+      targets?: EditContextTarget[];
       coalesceKey?: string;
       coalesceMs?: number;
       files: Record<string, { before: string; after: string }>;
@@ -56,6 +58,7 @@ export interface CutoverDeps {
 }
 
 export interface CutoverOptions {
+  targets?: EditContextTarget[];
   label?: string;
   coalesceKey?: string;
   /** Coalesce window (ms); Infinity folds across a slow round-trip. */
@@ -232,6 +235,15 @@ async function rollbackWrite(
   }
 }
 
+function historyEntryOptions(options?: CutoverOptions) {
+  return {
+    label: options?.label ?? "Edit layer",
+    ...(options?.targets && { targets: options.targets }),
+    ...(options?.coalesceKey ? { coalesceKey: options.coalesceKey } : {}),
+    ...(options?.coalesceMs != null ? { coalesceMs: options.coalesceMs } : {}),
+  };
+}
+
 async function writeAndRecord(
   after: string,
   targetPath: string,
@@ -247,9 +259,7 @@ async function writeAndRecord(
   }
   try {
     await deps.editHistory.recordEdit({
-      label: options?.label ?? "Edit layer",
-      ...(options?.coalesceKey ? { coalesceKey: options.coalesceKey } : {}),
-      ...(options?.coalesceMs != null ? { coalesceMs: options.coalesceMs } : {}),
+      ...historyEntryOptions(options),
       files: { [targetPath]: { before: originalContent, after } },
     });
     return null;

package/src/utils/studioFileHistory.ts

@@ -1,10 +1,14 @@
+import type { HistoryTarget } from "@hyperframes/studio-server";
 import { buildProjectApiPath } from "./projectRouting";
 import type { MutableRefObject } from "react";
 import { serializeStudioFileMutations } from "./studioFileMutationCoordinator";
 import { createStudioSaveHttpError } from "./studioSaveDiagnostics";
 import { studioApiFetch } from "./studioApiFetch";
 
+export type EditContextTarget = HistoryTarget;
+
 export interface RecordEditInput {
+  targets?: EditContextTarget[];
   label: string;
   coalesceKey?: string;
   coalesceMs?: number;