@hyperframes/studio 0.8.114 → 0.8.116

package/src/hooks/refreshTimelineRowText.test.ts

@@ -0,0 +1,65 @@
+// @vitest-environment happy-dom
+import { afterEach, describe, expect, it } from "vitest";
+import { usePlayerStore, type TimelineElement } from "../player/store/playerStore";
+import { refreshTimelineRowText } from "./refreshTimelineRowText";
+
+afterEach(() => {
+  usePlayerStore.getState().reset();
+  document.body.innerHTML = "";
+});
+
+const row = (key: string, selector: string, sourceFile?: string): TimelineElement => ({
+  id: key.split("#").pop()!,
+  key,
+  tag: "p",
+  start: 0,
+  duration: 2,
+  track: 0,
+  selector,
+  selectorIndex: 0,
+  sourceFile,
+  text: { value: "Old" },
+});
+
+describe("refreshTimelineRowText", () => {
+  it("gives the edited layer's row, addressed by its store key, its new words", () => {
+    document.body.innerHTML = `<h1 id="title">New words</h1>`;
+    usePlayerStore.getState().setElements([row("index.html#title", "#title")]);
+
+    refreshTimelineRowText(document.getElementById("title")!);
+
+    expect(usePlayerStore.getState().elements[0]?.text?.value).toBe("New words");
+  });
+
+  it("finds a row known only by its data-hf-id", () => {
+    document.body.innerHTML = `<p data-hf-id="caption-a">New</p>`;
+    usePlayerStore
+      .getState()
+      .setElements([
+        { ...row("index.html#caption-a", ""), selector: undefined, hfId: "caption-a" },
+      ]);
+
+    refreshTimelineRowText(document.querySelector("p")!);
+
+    expect(usePlayerStore.getState().elements[0]?.text?.value).toBe("New");
+  });
+
+  it("finds the row in the edited layer's own composition when two share a selector", () => {
+    document.body.innerHTML = `
+      <div data-composition-id="a" data-composition-file="a.html"><p class="caption">A</p></div>
+      <div data-composition-id="b" data-composition-file="b.html"><p class="caption">B new</p></div>`;
+    usePlayerStore
+      .getState()
+      .setElements([
+        row("a.html#a-caption", ".caption", "a.html"),
+        row("b.html#b-caption", ".caption", "b.html"),
+      ]);
+
+    refreshTimelineRowText(document.querySelectorAll<HTMLElement>(".caption")[1]!);
+
+    expect(usePlayerStore.getState().elements.map((element) => element.text?.value)).toEqual([
+      "Old",
+      "B new",
+    ]);
+  });
+});

package/src/hooks/refreshTimelineRowText.ts

@@ -0,0 +1,29 @@
+import {
+  getTimelineElementIdentity,
+  getTimelineElementSelector,
+  getTimelineElementSelectorIndex,
+  getTimelineElementSourceFile,
+} from "../player/lib/timelineElementHelpers";
+import { readTimelineText } from "../player/lib/timelineText";
+import { usePlayerStore } from "../player/store/playerStore";
+
+/** A text commit skips the preview reload, so the edited layer's row re-reads its words here. */
+export function refreshTimelineRowText(el: HTMLElement): void {
+  const sourceFile = getTimelineElementSourceFile(el);
+  const hfId = el.getAttribute("data-hf-id");
+  const selector = getTimelineElementSelector(el);
+  const selectorIndex = selector
+    ? (getTimelineElementSelectorIndex(el.ownerDocument, el, selector) ?? 0)
+    : 0;
+  const { elements, updateElement } = usePlayerStore.getState();
+  const row = elements.find(
+    (candidate) =>
+      candidate.sourceFile === sourceFile &&
+      (hfId
+        ? candidate.hfId === hfId
+        : !!selector &&
+          candidate.selector === selector &&
+          (candidate.selectorIndex ?? 0) === selectorIndex),
+  );
+  if (row) updateElement(getTimelineElementIdentity(row), { text: readTimelineText(el) });
+}

package/src/hooks/timelineTimingSync.test.ts

@@ -593,6 +593,7 @@ describe("a timing edit's soft reload restores what GSAP wrote from the files",
 
     expect(fetchMock).toHaveBeenCalledWith(
       expect.stringContaining("/files/compositions%2Fsub.html"),
+      { credentials: "omit" },
     );
     expect(reloadPreview).not.toHaveBeenCalled();
     expect(wt.getAttribute("style")).toBe("left: 700px;");

package/src/hooks/timelineTimingSync.ts

@@ -28,12 +28,13 @@ import {
   serializeStudioFileMutations,
   type StudioProjectFileWriter,
 } from "../utils/studioFileMutationCoordinator";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 export async function readFileContent(projectId: string, targetPath: string): Promise<string> {
   if (targetPath.includes("\0") || targetPath.includes("..")) {
     throw new Error(`Unsafe path: ${targetPath}`);
   }
-  const response = await fetch(
+  const response = await studioApiFetch(
     `/api/projects/${encodeURIComponent(projectId)}/files/${encodeURIComponent(targetPath)}`,
   );
   if (!response.ok) {

package/src/hooks/useAnimatedPropertyCommit.test.tsx

@@ -2,17 +2,22 @@
 
 import React, { act } from "react";
 import { afterEach, describe, expect, it, vi } from "vitest";
-import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+import { parseGsapScript, type GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import { usePlayerStore } from "../player/store/playerStore";
 import { useAnimatedPropertyCommit } from "./useAnimatedPropertyCommit";
 import { mountReactHarness, withInlineLayoutBox } from "./domSelectionTestHarness";
 import { writeSizeWithCrop } from "../components/editor/cropResize";
-import type { CommitMutation } from "./gsapScriptCommitTypes";
+import { trackStudioEvent } from "../utils/studioTelemetry";
+import { trackKeyframeCommit } from "../utils/keyframeUsage";
+import type { CommitMutationOptions, CommitMutation } from "./gsapScriptCommitTypes";
+
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
 
 (globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
 
 afterEach(() => {
+  vi.clearAllMocks();
   document.body.innerHTML = "";
   usePlayerStore.setState({ autoKeyframeEnabled: true, currentTime: 0 });
 });
@@ -43,7 +48,11 @@ type Commit = (
 /** Renders the hook and hands its commit function to the caller via a ref callback. */
 function renderHookWith(
   animations: GsapAnimation[],
-  onMutation: (mutation: Record<string, unknown>, label: string) => unknown | Promise<unknown>,
+  onMutation: (
+    mutation: Record<string, unknown>,
+    label: string,
+    options: CommitMutationOptions,
+  ) => unknown | Promise<unknown>,
   onReady: (commit: Commit) => void,
   bumpGsapCache = vi.fn(),
   onBatch?: (
@@ -56,9 +65,9 @@ function renderHookWith(
       async (
         _sel: DomEditSelection,
         mutation: Record<string, unknown>,
-        options: { label: string },
+        options: CommitMutationOptions,
       ) => {
-        await onMutation(mutation, options.label);
+        await onMutation(mutation, options.label, options);
       },
       onBatch
         ? {
@@ -401,3 +410,35 @@ describe("useAnimatedPropertyCommit — a size write and its crop are one undo s
     act(() => root.unmount());
   });
 });
+
+it("counts one add when an inspector edit first converts a flat animation", async () => {
+  usePlayerStore.setState({ autoKeyframeEnabled: true, currentTime: 1 });
+  const flat = parseGsapScript(
+    'const tl = gsap.timeline(); tl.to("#box", { rotationX: 0, duration: 2 }, 0);',
+  ).animations[0]!;
+  const mutations: Record<string, unknown>[] = [];
+  let commit!: Commit;
+  const root = renderHookWith(
+    [flat, keyframedAnim],
+    (mutation, _label, options) => {
+      mutations.push(mutation);
+      trackKeyframeCommit([mutation], { ok: true, changed: true }, options);
+    },
+    (value) => {
+      commit = value;
+    },
+  );
+  try {
+    await act(async () => {
+      await commit(selection, { rotationX: 20 });
+    });
+    expect(mutations.map((mutation) => mutation.type)).toEqual([
+      "convert-to-keyframes",
+      "add-keyframe",
+    ]);
+    expect(trackStudioEvent).toHaveBeenCalledTimes(1);
+    expect(trackStudioEvent).toHaveBeenCalledWith("keyframe", { action: "add" });
+  } finally {
+    act(() => root.unmount());
+  }
+});

package/src/hooks/useAnimatedPropertyCommit.ts

@@ -333,7 +333,7 @@ async function commitKeyframeProps(
     await commit(
       selection,
       { type: "convert-to-keyframes", animationId: anim.id },
-      { label: "Convert to keyframes", skipReload: true },
+      { label: "Convert to keyframes", keyframeTelemetry: false, skipReload: true },
     );
   }
   const ct = usePlayerStore.getState().currentTime;
@@ -389,7 +389,7 @@ async function commitKeyframeProps(
         duration: roundTo3(newDuration),
         keyframes: remapped,
       },
-      { label: `Edit ${primaryProp} (extended keyframe)`, softReload: true },
+      { label: `Edit ${primaryProp} (extended keyframe)`, keyframeAction: "add", softReload: true },
     );
     return;
   }

package/src/hooks/useAskAgentModal.ts

@@ -7,6 +7,7 @@ import { toProjectAbsolutePath, type AgentModalAnchorPoint } from "../utils/stud
 import { liveMarkupWithoutPreviewMarks } from "../utils/authoredSource";
 import { buildElementAgentPrompt, type DomEditSelection } from "../components/editor/domEditing";
 import { usePlayerStore } from "../player";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 // ── Types ──
 
@@ -55,7 +56,7 @@ export function useAskAgentModal({
 
       const targetPath = selection.sourceFile || activeCompPath || "index.html";
       try {
-        const response = await fetch(
+        const response = await studioApiFetch(
           buildProjectApiPath(pid, `/files/${encodeURIComponent(targetPath)}`),
         );
         if (!response.ok) return;

package/src/hooks/useBlockCatalog.ts

@@ -5,6 +5,7 @@ import {
   type BlockCategory,
   resolveBlockCategory,
 } from "../utils/blockCategories";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 type CatalogItem = RegistryItem & {
   category: BlockCategory;
@@ -14,7 +15,7 @@ let catalogCache: CatalogItem[] | null = null;
 let catalogRequest: Promise<CatalogItem[]> | null = null;
 
 function loadCatalog(): Promise<CatalogItem[]> {
-  catalogRequest ??= fetch("/api/registry/blocks")
+  catalogRequest ??= studioApiFetch("/api/registry/blocks")
     .then((response) => {
       if (!response.ok) throw new Error("Failed to load catalog");
       return response.json() as Promise<RegistryItem[]>;

package/src/hooks/useBlockedTimelineEditToast.ts

@@ -8,19 +8,28 @@
 
 import { useCallback, useRef } from "react";
 import type { TimelineElement } from "../player";
+import {
+  MAX_HAND_EDIT_CLIPS,
+  type BlockedTimelineEditIntent,
+} from "../player/components/timelineEditing";
 
 const BLOCKED_TOAST_INTERVAL_MS = 1500;
 
 export function useBlockedTimelineEditToast(
   showToast: (message: string, tone?: "info" | "error") => void,
-): (element: TimelineElement) => void {
+): (element: TimelineElement, intent: BlockedTimelineEditIntent) => void {
   const lastAtRef = useRef(0);
   return useCallback(
-    (_element: TimelineElement) => {
+    (_element: TimelineElement, intent: BlockedTimelineEditIntent) => {
       const now = Date.now();
       if (now - lastAtRef.current < BLOCKED_TOAST_INTERVAL_MS) return;
       lastAtRef.current = now;
-      showToast("This clip can't be moved or resized from the timeline yet.", "info");
+      showToast(
+        intent === "edit-many"
+          ? `Select ${MAX_HAND_EDIT_CLIPS} or fewer clips to move or resize by hand, or describe the change.`
+          : "This clip can't be moved or resized from the timeline yet.",
+        "info",
+      );
     },
     [showToast],
   );

package/src/hooks/useCaptionDetection.ts

@@ -5,6 +5,7 @@ import { useCaptionStore } from "../captions/store";
 import { acceptStudioRuntimeMessage } from "../player/lib/runtimeProtocol";
 import { useCaptionSync } from "../captions/hooks/useCaptionSync";
 import { parseCaptionComposition } from "../captions/parser";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 interface UseCaptionDetectionParams {
   projectId: string | null;
@@ -110,7 +111,7 @@ export function useCaptionDetection({
 
       activating = true;
       const srcPath = captionSrcPath;
-      fetch(buildProjectApiPath(projectId, `/files/${encodeURIComponent(srcPath)}`))
+      studioApiFetch(buildProjectApiPath(projectId, `/files/${encodeURIComponent(srcPath)}`))
         .then((r) => r.json())
         .then((data: { content?: string }) => {
           if (!data.content || !doc || !win || useCaptionStore.getState().isEditMode) return;

package/src/hooks/useCompositionContentLoader.ts

@@ -1,5 +1,6 @@
 import { buildProjectApiPath } from "../utils/projectRouting";
 import { useCallback } from "react";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 /**
  * Loads a composition file's content for the source editor when a composition
@@ -24,7 +25,7 @@ export function useCompositionContentLoader({
       if (!projectId) return;
       setActiveCompPath(comp.endsWith(".html") ? comp : null);
       setEditingFile({ path: comp, content: null });
-      fetch(buildProjectApiPath(projectId, `/files/${encodeURIComponent(comp)}`))
+      studioApiFetch(buildProjectApiPath(projectId, `/files/${encodeURIComponent(comp)}`))
         .then(async (r) => {
           if (!r.ok) throw new Error(`Failed to load ${comp} (${r.status})`);
           return r.json();

package/src/hooks/useDomEditCommitsHelpers.ts

@@ -7,6 +7,7 @@ import { buildProjectApiPath } from "../utils/projectRouting";
 import type { DomEditPatchBatch } from "./domEditCommitTypes";
 import { formatFieldsSuffix } from "./gsapScriptCommitHelpers";
 import { studioWriteHeaders } from "../utils/studioFileVersion";
+import { studioApiFetch } from "../utils/studioApiFetch";
 
 export function formatUnsafeFieldList(fields: Array<{ path: string }>): string {
   return fields.map((field) => field.path).join(", ");
@@ -99,7 +100,7 @@ function isAtomicElementPatchFile(value: unknown): value is AtomicElementPatchFi
 export async function patchElementBatches(projectId: string, batches: DomEditPatchBatch[]) {
   const body = JSON.stringify({ batches });
   try {
-    const response = await fetch(
+    const response = await studioApiFetch(
       `/api/projects/${encodeURIComponent(projectId)}/file-mutations/patch-element-batches`,
       {
         method: "POST",
@@ -178,7 +179,7 @@ export async function postPatchElement(
   body: unknown,
   showToast: ShowToast,
 ): Promise<PatchElementResponse> {
-  const response = await fetch(
+  const response = await studioApiFetch(
     buildProjectApiPath(
       projectId,
       `/file-mutations/patch-element/${encodeURIComponent(targetPath)}`,

package/src/hooks/useDomEditPositionPatchCommit.ts

@@ -33,30 +33,25 @@ export function useDomEditPositionPatchCommit({
         coalesceMs: options.coalesceMs,
         skipRefresh: options.skipRefresh ?? true,
         deferRender: options.deferRender,
-      })
-        .then(() => undefined)
-        .catch((error) => {
-          // A paused save queue is not worth a toast: the paused-save banner is
-          // already on screen, and one toast per blocked edit is what this branch
-          // exists to prevent. It still has to REJECT, though. Swallowing it
-          // resolved the commit, which skipped the caller's revert, so the element
-          // stayed where the drag put it while nothing reached the file.
-          if (error instanceof DomEditSaveQueueOpenError) throw error;
-          if (!wasAlreadyToasted(error)) {
-            showToast(error instanceof Error ? error.message : "Failed to save position");
-          }
-          trackStudioSaveFailure({
-            source: "dom_edit",
-            error,
-            filePath: selection.sourceFile ?? activeCompPath ?? "index.html",
-            mutationType: "position",
-            label: options.label,
-            targetId: selection.id,
-            targetSelector: selection.selector,
-            targetSourceFile: selection.sourceFile,
-          });
-          throw error;
+      }).catch((error) => {
+        // The paused-save banner already explains this refusal. Rethrow so the
+        // caller reverts the preview instead of treating an unsaved edit as committed.
+        if (error instanceof DomEditSaveQueueOpenError) throw error;
+        if (!wasAlreadyToasted(error)) {
+          showToast(error instanceof Error ? error.message : "Failed to save position");
+        }
+        trackStudioSaveFailure({
+          source: "dom_edit",
+          error,
+          filePath: selection.sourceFile ?? activeCompPath ?? "index.html",
+          mutationType: "position",
+          label: options.label,
+          targetId: selection.id,
+          targetSelector: selection.selector,
+          targetSourceFile: selection.sourceFile,
         });
+        throw error;
+      });
     },
     [activeCompPath, persistDomEditOperations, showToast],
   );

package/src/hooks/useDomEditSession.test.tsx

@@ -10,6 +10,7 @@ import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { TimelineElement } from "../player";
 import type { UseDomEditSessionParams } from "./useDomEditSession";
 import { makeSelection } from "./domSelectionTestHarness";
+import { readTranslatePx } from "../components/editor/plainTranslate";
 
 const styleOp = (property: string, value: string): PatchOperation => ({
   type: "inline-style",
@@ -66,6 +67,7 @@ const groupSelectionSpy = vi.fn();
 const gsapCommitMutation = Object.assign(vi.fn(), { batch: vi.fn() });
 const neverParsed = new Promise<{ animations: GsapAnimation[] }>(() => undefined);
 const parsedFile = { current: neverParsed };
+const groupCommitSpy = vi.fn(async () => {});
 
 function createSessionParams(
   overrides: Partial<UseDomEditSessionParams> = {},
@@ -256,7 +258,7 @@ vi.mock("./usePreviewInteraction", () => ({
 vi.mock("./useGsapAwareEditing", () => ({
   useGsapAwareEditing: () => ({
     handleGsapAwarePathOffsetCommit: vi.fn(),
-    handleGsapAwareGroupPathOffsetCommit: vi.fn(),
+    handleGsapAwareGroupPathOffsetCommit: groupCommitSpy,
     handleGsapAwareBoxSizeCommit: vi.fn(),
     handleGsapAwareRotationCommit: vi.fn(),
     commitAnimatedProperty: vi.fn(),
@@ -605,3 +607,30 @@ describe("a shadow reload promoted without a host re-render", () => {
     act(() => root.unmount());
   });
 });
+
+describe("handleDomGroupMoveBy", () => {
+  it("saves through the group drag's commit, leaving a refusal for the host to explain", async () => {
+    const { useDomEditSession } = await import("./useDomEditSession");
+    const element = document.createElement("div");
+    document.body.append(element);
+    element.getBoundingClientRect = () => {
+      const { x, y } = readTranslatePx(element);
+      return new DOMRect(x, y, 40, 20);
+    };
+    const selection = makeSelection("card", element);
+    let moveBy!: ReturnType<typeof useDomEditSession>["handleDomGroupMoveBy"];
+    function Probe() {
+      moveBy = useDomEditSession(createSessionParams()).handleDomGroupMoveBy;
+      return null;
+    }
+    const root = createRoot(document.createElement("div"));
+    act(() => root.render(<Probe />));
+    await act(() => moveBy([{ selection, delta: { x: 10, y: 0 } }]));
+    expect(groupCommitSpy).toHaveBeenCalledWith(
+      [{ selection, next: { x: 10, y: 0 }, plainTranslate: true }],
+      { refusalToast: false },
+    );
+    act(() => root.unmount());
+    element.remove();
+  });
+});

package/src/hooks/useDomEditSession.ts

@@ -25,6 +25,7 @@ import { membersForDelete, timelineElementsForDelete } from "./domEditDeleteMemb
 import type { RecordEditInput } from "./domEditDeleteMembers";
 import type { DomEditTimelineParams } from "./useDomSelectionTypes";
 import { useLivePreviewIframe } from "./useLivePreviewIframe";
+import { moveDomGroupBy, type DomGroupMove } from "../components/editor/domGroupMoveBy";
 // Re-exported: the delete rule lives in its own module; callers and its test import it from here.
 export { membersForDelete };
 
@@ -445,6 +446,7 @@ export function useDomEditSession({
     domEditSelection,
     selectedGsapAnimations,
     gsapCommitMutation,
+    activeCompPath,
     previewIframeRef,
     showToast,
     bumpGsapCache,
@@ -459,6 +461,13 @@ export function useDomEditSession({
     setArcPath,
     updateArcSegment,
   });
+  const handleDomGroupMoveBy = useCallback(
+    (moves: DomGroupMove[]) =>
+      moveDomGroupBy(moves, (updates) =>
+        handleGsapAwareGroupPathOffsetCommit(updates, { refusalToast: false }),
+      ),
+    [handleGsapAwareGroupPathOffsetCommit],
+  );
   const { handleUpdateSegmentEase, handleUpdateKeyframeEase, handleSetAllKeyframeEases } =
     useKeyframeEaseCommits({ gsapCommitMutation, domEditSelectionRef });
   const committable = useCommitPreflightCapabilities({
@@ -497,6 +506,7 @@ export function useDomEditSession({
     handleDomAttributeBatchCommit,
     handleDomPathOffsetCommit: handleGsapAwarePathOffsetCommit,
     handleDomGroupPathOffsetCommit: handleGsapAwareGroupPathOffsetCommit,
+    handleDomGroupMoveBy,
     handleDomZIndexReorderCommit,
     handleDomBoxSizeCommit: handleGsapAwareBoxSizeCommit,
     handleDomRotationCommit: handleGsapAwareRotationCommit,

package/src/hooks/useDomEditTextCommits.test.tsx

@@ -160,6 +160,21 @@ describe("useDomEditTextCommits", () => {
     };
   }
 
+  it.each([true, false])(
+    "counts in-place text only after a changed write (%s)",
+    async (changed) => {
+      vi.mocked(trackStudioEvent).mockClear();
+      const { persist, save } = richTextProbe();
+      persist.mockResolvedValue({ changed, sourceFile: "private.html", version: "v2" });
+      await save();
+      expect(vi.mocked(trackStudioEvent).mock.calls).toEqual(
+        changed
+          ? [["feature_used", { feature: "text_edit", surface: "preview", method: "field" }]]
+          : [],
+      );
+    },
+  );
+
   it("saves in-place text while the preview is editable, and refreshes the selection it edited", async () => {
     const applyDomSelection = vi.fn();
     const { persist, element, save } = richTextProbe(undefined, () => ({ applyDomSelection }));
@@ -335,6 +350,29 @@ describe("useDomEditTextCommits", () => {
     expect(outcome).toEqual({ ok: true, persistence });
   });
 
+  it("saves a style map on a selection as one patch, so it is one undo step", async () => {
+    const { iframe, element } = previewElement("<div id='card'>Original</div>", "card");
+    const persist = vi.fn().mockResolvedValue({ sourceFile: "index.html", changed: true });
+    const hook = renderTextCommitHook(
+      commitParams({
+        previewIframeRef: { current: iframe },
+        domEditSelection: null,
+        persistDomEditOperations: persist,
+      }),
+    );
+
+    await act(async () => {
+      await hook.handleDomStyleCommitForSelection(selectionFor(element), {
+        "border-width": "4px",
+        "border-style": "solid",
+      });
+    });
+
+    expect(persist).toHaveBeenCalledTimes(1);
+    expect(element.style.borderWidth).toBe("4px");
+    expect(element.style.borderStyle).toBe("solid");
+  });
+
   it("declines a style commit with no selection, without reaching the writer", async () => {
     const persistDomEditOperations = vi.fn().mockResolvedValue(undefined);
     const hook = renderTextCommitHook(
@@ -464,3 +502,6 @@ describe("useDomEditTextCommits", () => {
     expect(agentElement.textContent).toBe("Edited");
   });
 });
+
+vi.mock("../utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+import { trackStudioEvent } from "../utils/studioTelemetry";

package/src/hooks/useDomEditTextCommits.ts

@@ -1,4 +1,6 @@
+import { trackPreviewFeatureUsed } from "../utils/previewFeatureUsage";
 import { useCallback, useRef } from "react";
+import { refreshTimelineRowText } from "./refreshTimelineRowText";
 import { normalizeDomEditStyleValue } from "../utils/studioHelpers";
 import { injectPreviewGoogleFont, injectPreviewImportedFont } from "../utils/studioFontHelpers";
 import {
@@ -63,6 +65,7 @@ async function resyncDomTextSelectionFromPreview(
   if (!doc) return;
   const refreshed = findElementForSelection(doc, selection, activeCompPath);
   if (!refreshed) return;
+  refreshTimelineRowText(refreshed);
   const nextSelection = await buildDomSelectionFromTarget(refreshed);
   if (!nextSelection) return;
   applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
@@ -106,7 +109,11 @@ export function useDomEditTextCommits({
   });
 
   const handleDomStyleCommitForSelection = useCallback(
-    (selection: DomEditSelection, property: string, value: string): Promise<DomEditCommitOutcome> =>
+    (
+      selection: DomEditSelection,
+      propertyOrStylesAsOnePatch: string | Record<string, string>,
+      value = "",
+    ): Promise<DomEditCommitOutcome> =>
       commitDomStyles(
         {
           activeCompPath,
@@ -118,7 +125,9 @@ export function useDomEditTextCommits({
           resync: refreshDomEditSelectionFromPreview,
         },
         selection,
-        { [property]: value },
+        typeof propertyOrStylesAsOnePatch === "string"
+          ? { [propertyOrStylesAsOnePatch]: value }
+          : propertyOrStylesAsOnePatch,
       ),
     [
       activeCompPath,
@@ -272,11 +281,12 @@ export function useDomEditTextCommits({
           appliedHtml = element.innerHTML;
         },
         persist: async () => {
-          await persistDomEditOperations(selection, operations, {
+          const result = await persistDomEditOperations(selection, operations, {
             label: "Edit text",
             skipRefresh: true,
             shouldSave: isLatestTextCommit,
           });
+          if (result?.changed) trackPreviewFeatureUsed("text_edit", "field");
         },
         shouldRevert: () => isLatestTextCommit(),
         revert: () => {

package/src/hooks/useDomEditWiring.ts

@@ -104,8 +104,10 @@ export interface UseDomEditWiringParams {
     animId: string,
     resolvedFromValues?: Record<string, number | string>,
   ) => Promise<void>;
-  removeAllKeyframes: (sel: DomEditSelection, animId: string) => Promise<void>;
-  handleDomManualEditsReset: (sel: DomEditSelection) => Promise<void>;
+  removeAllKeyframes: Parameters<typeof useGsapSelectionHandlers>[0]["removeAllKeyframes"];
+  handleDomManualEditsReset: (
+    sel: DomEditSelection,
+  ) => Promise<void | import("./domEditCommitTypes").DomEditPersistOutcome>;
 }
 
 // fallow-ignore-next-line complexity