@hyperframes/studio 0.8.114 → 0.8.116

package/src/components/editor/useFxCarveNodes.ts

@@ -24,6 +24,7 @@ import {
 import { fxAutomationTarget, type HfAutomationLane } from "@hyperframes/core/audio-automation";
 import { clipStart } from "./propertyPanelAudioFxGroupUtils.js";
 import { clipAudioOnItsClock, type ClipClock } from "./clipAudioClock.js";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 /** Decode rate every carve measurement shares — see `measureCarve`. */
 const DECODE_SAMPLE_RATE = 48000;
@@ -95,7 +96,7 @@ export async function measureCarve(
   if (!Ctor) return null;
   // Each clip as it plays: trimmed to its in-point and duration, and at its own speed.
   const decode = async (relative: string, clock: ClipClock): Promise<Float32Array> => {
-    const res = await fetch(new URL(relative, doc.baseURI).href);
+    const res = await studioApiFetch(new URL(relative, doc.baseURI).href);
     const buffer = await new Ctor(1, 1, DECODE_SAMPLE_RATE).decodeAudioData(
       await res.arrayBuffer(),
     );

package/src/components/editor/useFxLevelling.ts

@@ -26,6 +26,7 @@ import { trackLeveller } from "./audioFxTelemetry.js";
 import type { DomEditSelection } from "./domEditingTypes";
 import { clipSourceWindow, readClipClock } from "./clipAudioClock.js";
 import { useAuditionTransport } from "./useAuditionTransport.js";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 /**
  * Rate the track is decoded at. Analysis is self-consistent because it reads
@@ -63,7 +64,7 @@ export function useFxLevelling(
       (window as unknown as { webkitOfflineAudioContext?: typeof OfflineAudioContext })
         .webkitOfflineAudioContext;
     if (!Ctor) return null;
-    const res = await fetch(new URL(src, doc.baseURI).href);
+    const res = await studioApiFetch(new URL(src, doc.baseURI).href);
     const buffer = await new Ctor(1, 1, DECODE_SAMPLE_RATE).decodeAudioData(
       await res.arrayBuffer(),
     );

package/src/components/feedback/projectProvenance.ts

@@ -17,6 +17,7 @@ import { buildProjectApiPath } from "../../utils/projectRouting";
 
 import type { FeedbackContext } from "./feedbackTrigger";
 import { isMediaFile } from "../../utils/mediaTypes";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 /** Written by `hyperframes init`; absent in a hand-made or copied project. */
 const CONFIG_FILE = "hyperframes.json";
@@ -53,7 +54,7 @@ export async function captureProjectProvenance(
   if (!scaffolded) return;
 
   try {
-    const res = await fetch(
+    const res = await studioApiFetch(
       buildProjectApiPath(projectId, `/files/${encodeURIComponent(CONFIG_FILE)}`),
     );
     if (!res.ok) return;

package/src/components/nle/NLEContext.test.ts

@@ -126,6 +126,7 @@ describe("NLEProvider — composition source-map scoping", () => {
     expect(observed.filter((map) => map.size === 0)).toHaveLength(2);
     expect(fetchMock).toHaveBeenCalledWith("/api/projects/project-b/files/index.html", {
       signal: expect.any(AbortSignal),
+      credentials: "omit",
     });
     expect(observed.at(-1)).toEqual(new Map([["b-comp", "compositions/b.html"]]));
 

package/src/components/nle/NLEContext.tsx

@@ -9,6 +9,7 @@ import { setCompositionSourceMap } from "../editor/domEditingDom";
 import { ensureMotionPathPluginLoaded } from "../../utils/gsapSoftReload";
 import { useAssetPreviewStore } from "../../utils/assetPreviewStore";
 import { createStableContext } from "../../utils/hmrStableContext";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 export function shouldDisableTimelineWhileCompositionLoading(compositionLoading: boolean): boolean {
   return compositionLoading;
@@ -209,7 +210,7 @@ export function NLEProvider({
     setCompositionSourceMap(emptyMap);
     onCompIdToSrcChangeRef.current?.(emptyMap);
 
-    fetch(buildProjectApiPath(projectId, `/files/index.html`), {
+    studioApiFetch(buildProjectApiPath(projectId, `/files/index.html`), {
       signal: controller.signal,
     })
       .then((r) => {

package/src/components/nle/NLEPreview.tsx

@@ -12,7 +12,7 @@ import {
   type RefObject,
 } from "react";
 import { Player } from "../../player";
-import type { PreviewIframeSlot } from "../../player/hooks/useTimelineSyncCallbacks";
+import type { NLEContextValue } from "./NLEContext";
 import {
   DEFAULT_PREVIEW_ZOOM,
   canStartPreviewPan,
@@ -29,16 +29,18 @@ import { RULER_GUTTER_PX, usePreviewGuidesStore } from "../editor/previewGuidesS
 import { PreviewZoomOverlay, usePreviewNavigator } from "./PreviewZoomOverlay";
 import { usePreviewFirstFrameTelemetry } from "../../player/hooks/usePreviewFirstFrameTelemetry";
 import { PreviewPoster, usePreviewPoster } from "./PreviewPoster";
-interface NLEPreviewProps {
-  projectId: string;
+interface NLEPreviewProps extends Pick<
+  NLEContextValue,
+  | "projectId"
+  | "onIframeLoad"
+  | "previewSlots"
+  | "onShadowIframeLoad"
+  | "onShadowReadyChange"
+  | "onShadowError"
+  | "setShadowIframeNode"
+  | "resetPreviewSlots"
+> {
   iframeRef: RefObject<HTMLIFrameElement | null>;
-  onIframeLoad: () => void;
-  previewSlots: PreviewIframeSlot[];
-  onShadowIframeLoad: (gen: number) => void;
-  onShadowReadyChange: (gen: number, ready: boolean) => void;
-  onShadowError: (gen: number, message: string) => void;
-  setShadowIframeNode: (node: HTMLIFrameElement | null) => void;
-  resetPreviewSlots: () => void;
   onCompositionLoadingChange?: (loading: boolean) => void;
   portrait?: boolean;
   directUrl?: string;

package/src/components/nle/PreviewPoster.tsx

@@ -6,6 +6,7 @@ import {
   type ThumbnailRequest,
 } from "../../player/lib/thumbnailScheduler";
 import type { PreviewCompositionSize } from "../../utils/previewCompositionSize";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 /** Frame 0 as the thumbnail route last rendered it; `cachedOnly` never starts a render. */
 function previewPosterUrl(projectId: string, cachedOnly: boolean): string {
@@ -107,7 +108,7 @@ export function renderPosterForNextOpen(projectId: string): void {
     priority: "overscan",
     discardWhenReleased: true,
     load: async (signal) => {
-      await (await fetch(url, { signal })).arrayBuffer();
+      await (await studioApiFetch(url, { signal })).arrayBuffer();
       return { value: { kind: "image", url, aspect: 16 / 9 }, weight: 0 };
     },
   };

package/src/components/nle/useTimelineEditCallbacks.test.tsx

@@ -409,6 +409,7 @@ describe("useTimelineEditCallbacks — flat tween keyframe lanes", () => {
     expect(mocks.actions.handleGsapRemoveAllKeyframes).toHaveBeenCalledWith(
       scaleAnimation.id,
       circleSelection,
+      false,
     );
     view.unmount();
   });

package/src/components/nle/useTimelineEditCallbacks.ts

@@ -1,4 +1,5 @@
 import type { TimelineEditOutcome } from "../../hooks/timelineEditPermission";
+import { trackKeyframeUsage } from "../../utils/keyframeUsage";
 import { useCallback, useMemo } from "react";
 import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
 import type { TimelineElement } from "../../player";
@@ -259,7 +260,12 @@ export function useTimelineEditCallbacks({
           if (!selection) return;
           // Serial: each removal rewrites the same source file, so dispatching
           // them together would have the later writes read a pre-edit document.
-          for (const anim of anims) await handleGsapRemoveAllKeyframes(anim.id, selection);
+          let changed = false;
+          for (const anim of anims) {
+            const result = await handleGsapRemoveAllKeyframes(anim.id, selection, false);
+            changed = result || changed;
+          }
+          if (changed) trackKeyframeUsage("remove_all");
         });
       },
       onDeleteKeyframe: (elId, keyframe) => {

package/src/components/renders/useFfmpegStatus.ts

@@ -1,4 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 /**
  * What the dev server knows about this machine's FFmpeg, as reported by
@@ -59,7 +60,7 @@ function parseStatus(body: unknown): ProbeResult {
 
 async function probe(): Promise<ProbeResult> {
   try {
-    const res = await fetch("/api/environment/ffmpeg");
+    const res = await studioApiFetch("/api/environment/ffmpeg");
     return res.ok ? parseStatus(await res.json()) : null;
   } catch {
     return null;

package/src/components/renders/useRenderQueue.ts

@@ -8,6 +8,7 @@ import { generateId } from "../../utils/generateId";
 import { readServerError } from "./serverError";
 import { ffmpegInstallMessage, useFfmpegStatus } from "./useFfmpegStatus";
 import { requestStudioFeedback, type FeedbackContext } from "../feedback/feedbackTrigger";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 export interface RenderJob {
   id: string;
@@ -126,7 +127,7 @@ export function useRenderQueue(
   const loadRenders = useCallback(async () => {
     if (!projectId) return;
     try {
-      const res = await fetch(buildProjectApiPath(projectId, `/renders`));
+      const res = await studioApiFetch(buildProjectApiPath(projectId, `/renders`));
       if (!res.ok) {
         setLoadError(`Couldn't load render history (server error ${res.status}).`);
         return;
@@ -262,7 +263,7 @@ export function useRenderQueue(
       }
       let res: Response;
       try {
-        res = await fetch(buildProjectApiPath(projectId, `/render`), {
+        res = await studioApiFetch(buildProjectApiPath(projectId, `/render`), {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify(body),
@@ -376,7 +377,7 @@ export function useRenderQueue(
         ),
       );
       try {
-        const res = await fetch(`/api/render/${jobId}/cancel`, { method: "POST" });
+        const res = await studioApiFetch(`/api/render/${jobId}/cancel`, { method: "POST" });
         if (!res.ok && res.status !== 404) {
           setActionError("Couldn't cancel on the server — the render may still be running.");
           return;
@@ -403,7 +404,7 @@ export function useRenderQueue(
       setActionError(null);
       closeActiveEventSource(jobId);
       try {
-        const res = await fetch(`/api/render/${jobId}`, { method: "DELETE" });
+        const res = await studioApiFetch(`/api/render/${jobId}`, { method: "DELETE" });
         if (!res.ok) {
           setActionError("Couldn't delete the render — it's still on disk.");
           return;

package/src/components/sidebar/AssetContextMenu.tsx

@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { filename } from "./assetHelpers";
+import { menuClasses } from "../ui/menuStyle";
 
 /** Reject names that would escape the asset directory or break paths. */
 function isValidAssetName(name: string): boolean {
@@ -94,8 +95,7 @@ export function ContextMenu({
     onClose();
   }, [renameDraft, asset, onRename, onClose]);
 
-  const itemCls =
-    "w-full text-left px-3 py-1.5 text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 outline-hidden active:bg-neutral-700/70 transition-colors";
+  const itemCls = `${menuClasses.row} ${menuClasses.rowEnabled} active:bg-neutral-700/70 transition-colors`;
 
   return (
     <div
@@ -110,7 +110,7 @@ export function ContextMenu({
         ref={menuRef}
         role="menu"
         aria-label={`Actions for ${filename(asset)}`}
-        className="absolute bg-neutral-900 border border-neutral-700 rounded-lg shadow-xl py-1 min-w-[160px] text-xs"
+        className={`${menuClasses.panel} absolute min-w-[160px] text-xs`}
         style={{ left: pos.x, top: pos.y }}
         onClick={(e) => e.stopPropagation()}
       >
@@ -147,7 +147,7 @@ export function ContextMenu({
               <button
                 role="menuitem"
                 onClick={() => setMode("confirm-delete")}
-                className={`${itemCls} text-danger-ink`}
+                className={`${menuClasses.row} ${menuClasses.rowDanger} active:bg-neutral-700/70 transition-colors`}
               >
                 Delete
               </button>

package/src/components/sidebar/AssetsTab.tsx

@@ -16,6 +16,7 @@ import {
 import { AudioRow } from "./AudioRow";
 import { GlobalAssetsView } from "./GlobalAssetsView";
 import { AssetCard, FontRow } from "./AssetCard";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 interface AssetsTabProps {
   projectId: string;
@@ -217,7 +218,7 @@ export const AssetsTab = memo(function AssetsTab({
   useEffect(() => {
     if (manifest404Ref.current.has(projectId)) return;
     let cancelled = false;
-    fetch(buildProjectApiPath(projectId, `/preview/.media/manifest.jsonl`))
+    studioApiFetch(buildProjectApiPath(projectId, `/preview/.media/manifest.jsonl`))
       .then((r) => {
         if (!r.ok) {
           manifest404Ref.current.add(projectId);

package/src/components/sidebar/GlobalAssetsView.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 // Cross-project asset view — the global media-use cache (~/.media), fetched from
 // /api/assets/global. Self-contained (owns its fetch + state) so AssetsTab stays
@@ -43,7 +44,7 @@ export function GlobalAssetsView({ searchQuery }: { searchQuery: string }) {
   const [records, setRecords] = useState<GlobalAssetRecord[] | null>(null);
   useEffect(() => {
     let cancelled = false;
-    fetch("/api/assets/global")
+    studioApiFetch("/api/assets/global")
       .then((r) => (r.ok ? r.json() : { assets: [] }))
       .then((d) => {
         if (!cancelled) setRecords(Array.isArray(d.assets) ? d.assets : []);

package/src/components/ui/menuStyle.test.ts

@@ -0,0 +1,61 @@
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+import { describe, expect, it } from "vitest";
+import { menuClasses } from "./menuStyle";
+
+const spacing = /(^| )-?(p|py|pt|pb|m|my|mt|mb)-\d/;
+const root = join(__dirname, "../..");
+
+/** Panels that are not a column of rows: a dialog, a crop toolbar, a preset card and a bare speed list. */
+const NOT_ROW_MENUS = new Set([
+  "player/components/AudioGainDialog.tsx",
+  "components/editor/CropPresetBar.tsx",
+  "components/editor/EaseCurveSection.tsx",
+  "player/components/SpeedMenu.tsx",
+]);
+
+function sources(dir: string): string[] {
+  return readdirSync(dir).flatMap((name) => {
+    const path = join(dir, name);
+    if (statSync(path).isDirectory()) return sources(path);
+    return /\.tsx$/.test(name) && !/\.test\./.test(name) ? [path] : [];
+  });
+}
+
+const files = sources(root).map((path) => ({
+  name: relative(root, path).replaceAll("\\", "/"),
+  text: readFileSync(path, "utf8"),
+}));
+
+describe("menu style", () => {
+  it("adds no padding or margin around a menu's rows", () => {
+    for (const key of ["panel", "group", "divider"] as const)
+      expect(menuClasses[key], key).not.toMatch(spacing);
+  });
+
+  it("clips the panel to its own rounded corners, so a highlight never pokes out of them", () => {
+    expect(menuClasses.panel).toContain("overflow-hidden");
+    expect(menuClasses.panel).toMatch(/(^| )rounded-/);
+  });
+
+  it("is the only place a menu panel's fill, border and shadow are written", () => {
+    const handBuilt = files
+      .filter(({ name }) => !NOT_ROW_MENUS.has(name))
+      .filter(({ text }) =>
+        [...text.matchAll(/["'`]([^"'`]*)["'`]/g)].some(
+          ([, literal]) =>
+            /shadow-(lg|xl)/.test(literal!) && /bg-(neutral-900|panel-bg-2)\b/.test(literal!),
+        ),
+      )
+      .map(({ name }) => name);
+    expect(handBuilt).toEqual([]);
+  });
+
+  it("is the panel of every role=menu, wherever its element is written", () => {
+    const unowned = files
+      .filter(({ text }) => text.includes('role="menu"'))
+      .filter(({ name, text }) => !NOT_ROW_MENUS.has(name) && !text.includes("menuClasses.panel"))
+      .map(({ name }) => name);
+    expect(unowned).toEqual([]);
+  });
+});

package/src/components/ui/menuStyle.ts

@@ -0,0 +1,10 @@
+/** The one owner of context menu spacing: rows touch the panel, which clips to its rounded corners. */
+export const menuClasses = {
+  panel: "overflow-hidden rounded-md border border-neutral-700 bg-neutral-900 shadow-lg",
+  group: "empty:hidden border-b border-neutral-700/60",
+  divider: "border-t border-neutral-700/60",
+  row: "w-full px-3 py-1.5 text-left text-xs outline-hidden",
+  rowEnabled: "text-neutral-300 hover:bg-neutral-800 focus-visible:bg-neutral-800 cursor-pointer",
+  rowDanger: "text-danger-ink hover:bg-danger/25 focus-visible:bg-danger/25 cursor-pointer",
+  rowDisabled: "text-neutral-600 cursor-not-allowed",
+} as const;

package/src/contexts/DomEditContext.tsx

@@ -24,6 +24,7 @@ const SAVES_AN_EDIT = {
   handleDomAttributeBatchCommit: true,
   handleDomPathOffsetCommit: true,
   handleDomGroupPathOffsetCommit: true,
+  handleDomGroupMoveBy: true,
   handleDomZIndexReorderCommit: true,
   handleDomBoxSizeCommit: true,
   handleDomRotationCommit: true,
@@ -179,6 +180,7 @@ export function DomEditProvider({
     handleDomAttributeBatchCommit,
     handleDomPathOffsetCommit,
     handleDomGroupPathOffsetCommit,
+    handleDomGroupMoveBy,
     handleDomZIndexReorderCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
@@ -251,7 +253,7 @@ export function DomEditProvider({
   commitMutationRef.current = commitMutation;
 
   const stableCommitMutation = useCallback<DomEditActionsValue["commitMutation"]>(
-    (mutation, options) => commitMutationRef.current(mutation, options),
+    (mutation, options, selection) => commitMutationRef.current(mutation, options, selection),
     [],
   );
 
@@ -274,6 +276,7 @@ export function DomEditProvider({
       handleDomAttributeBatchCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
+      handleDomGroupMoveBy,
       handleDomZIndexReorderCommit,
       handleDomBoxSizeCommit,
       handleDomRotationCommit,
@@ -350,6 +353,7 @@ export function DomEditProvider({
       handleDomAttributeBatchCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
+      handleDomGroupMoveBy,
       handleDomZIndexReorderCommit,
       handleDomBoxSizeCommit,
       handleDomRotationCommit,

package/src/contexts/TimelineEditContext.tsx

@@ -46,6 +46,7 @@ const EDIT_CALLBACK_KEY_SET: Record<keyof TimelineEditCallbacks, true> = {
   onRazorSplit: true,
   onRazorSplitAll: true,
   onFreezeFrame: true,
+  clipMenuTools: true,
   onNotice: true,
   onDeleteKeyframe: true,
   onDeleteAllKeyframes: true,

package/src/domEditExports.test.tsx

@@ -79,7 +79,7 @@ describe("DOM editing package exports", () => {
     front.id = "front";
     parent.append(back, front);
     document.body.append(parent);
-    const commitZ = vi.fn(() => Promise.resolve());
+    const commitZ = vi.fn(async () => ({ durable: true, changed: true }));
     const session = {
       handleDomZIndexReorderCommit: commitZ,
     } as unknown as Parameters<typeof DomEditProvider>[0]["value"];
@@ -107,6 +107,11 @@ describe("DOM editing package exports", () => {
     await act(async () => {
       expect(zOrder?.apply(sel, toFront)).toBe(true);
     });
+    expect(trackStudioEvent).toHaveBeenCalledWith("feature_used", {
+      feature: "z_order",
+      surface: "preview",
+      method: "button",
+    });
     expect(commitZ).toHaveBeenCalledTimes(1);
     expect(commitZ).toHaveBeenCalledWith(
       expect.arrayContaining([expect.objectContaining({ element: back, id: "back" })]),
@@ -159,3 +164,6 @@ describe("DOM editing package exports", () => {
     await act(async () => root.unmount());
   });
 });
+
+vi.mock("./utils/studioTelemetry", () => ({ trackStudioEvent: vi.fn() }));
+import { trackStudioEvent } from "./utils/studioTelemetry";

package/src/hooks/domEditCommitRunner.ts

@@ -94,7 +94,7 @@ export type DomEditCommitDeclineReason =
   | "persist-failed";
 
 export type DomEditCommitOutcome =
-  | { ok: true; persistence?: DomEditPersistOutcome }
+  | { ok: true; persistence?: DomEditPersistOutcome; changed?: boolean }
   | { ok: false; reason: DomEditCommitDeclineReason };
 
 export function domEditCommitDeclined(reason: DomEditCommitDeclineReason): DomEditCommitOutcome {

package/src/hooks/domSelectionTestHarness.ts

@@ -4,6 +4,7 @@ import type React from "react";
 import { act } from "react";
 import { createRoot, type Root } from "react-dom/client";
 import type { DomEditSelection } from "../components/editor/domEditing";
+import { buildStableSelector, getSelectorIndex } from "../components/editor/domEditingDom";
 
 export function installReactActEnvironment(): void {
   Object.defineProperty(globalThis, "IS_REACT_ACT_ENVIRONMENT", {
@@ -61,3 +62,25 @@ export function makeSelection(label: string, element: HTMLElement): DomEditSelec
     },
   };
 }
+
+/** Built as getDomLayerPatchTarget builds it: a bare class for an element with no id or hf-id. */
+export function stableSelectionFor(el: HTMLElement): DomEditSelection {
+  const selector = buildStableSelector(el);
+  return {
+    element: el,
+    id: el.id || undefined,
+    hfId: el.getAttribute("data-hf-id") || undefined,
+    selector,
+    selectorIndex: getSelectorIndex(document, el, selector, "index.html", null),
+    sourceFile: "index.html",
+    dataAttributes: { start: "0", duration: "2" },
+  } as unknown as DomEditSelection;
+}
+
+export function mountGroupSiblings(count: number, withIds = false): HTMLElement[] {
+  const groups = Array.from({ length: count }, (_, i) =>
+    withIds ? `<div class="group" id="group-${i}"></div>` : `<div class="group"></div>`,
+  );
+  document.body.innerHTML = `<div id="scene" class="clip" data-start="0" data-duration="2">${groups.join("")}</div>`;
+  return Array.from(document.querySelectorAll<HTMLElement>(".group"));
+}

package/src/hooks/domStyleCommit.propertyNames.test.ts

@@ -0,0 +1,73 @@
+// @vitest-environment jsdom
+import { expect, it } from "vitest";
+import type { DomEditSelection } from "../components/editor/domEditing";
+import type { PatchOperation } from "../utils/sourcePatcher";
+import { commitDomStyles, type DomStyleCommitContext } from "./domStyleCommit";
+
+const selection = {
+  id: "target",
+  selector: "#target",
+  label: "Target",
+  tagName: "div",
+  sourceFile: "index.html",
+  compositionPath: "index.html",
+  textFields: [],
+  inlineStyles: {},
+  computedStyles: {},
+  dataAttributes: {},
+  capabilities: { canSelect: true, canEditStyles: true },
+} as unknown as DomEditSelection;
+
+async function savedPatches(styles: Record<string, string>) {
+  const saves: Array<{ operations: PatchOperation[]; label?: string }> = [];
+  const context: DomStyleCommitContext = {
+    activeCompPath: "index.html",
+    previewIframeRef: { current: null },
+    showToast: () => undefined,
+    versions: new Map(),
+    persistDomEditOperations: (async (
+      _selection: DomEditSelection,
+      operations: PatchOperation[],
+      options?: { label?: string },
+    ) => {
+      saves.push({ operations, label: options?.label });
+    }) as unknown as DomStyleCommitContext["persistDomEditOperations"],
+  };
+  await commitDomStyles(context, selection, styles);
+  return saves;
+}
+
+const written = (operations: PatchOperation[]) =>
+  operations.map((op) => [(op as { property: string }).property, (op as { value: string }).value]);
+
+it("writes a style named the JavaScript way under its CSS name", async () => {
+  const saves = await savedPatches({ backgroundColor: "#ff0000" });
+  expect(saves.map((save) => written(save.operations))).toEqual([
+    [["background-color", "#ff0000"]],
+  ]);
+});
+
+it("saves a map mixing both forms as one patch and one undo step, all under CSS names", async () => {
+  const saves = await savedPatches({
+    borderRadius: "4",
+    "border-color": "red",
+    WebkitTextStroke: "1px black",
+    msTransform: "none",
+  });
+  expect(saves).toHaveLength(1);
+  expect(saves[0]!.label).toBe("Edit layer style");
+  expect(written(saves[0]!.operations)).toEqual([
+    ["border-radius", "4px"],
+    ["border-color", "red"],
+    ["-webkit-text-stroke", "1px black"],
+    ["-ms-transform", "none"],
+  ]);
+});
+
+it("keeps a custom property's name exactly as given", async () => {
+  const saves = await savedPatches({ "--brand": "#123456", "--brandAccent": "#654321" });
+  expect(written(saves[0]!.operations)).toEqual([
+    ["--brand", "#123456"],
+    ["--brandAccent", "#654321"],
+  ]);
+});

package/src/hooks/domStyleCommit.ts

@@ -1,5 +1,6 @@
 import type { PatchOperation } from "../utils/sourcePatcher";
 import {
+  cssPropertyName,
   isImageBackgroundValue,
   isManualGeometryStyleProperty,
   normalizeDomEditStyleValue,
@@ -43,8 +44,14 @@ export interface DomStyleCommitContext {
 export async function commitDomStyles(
   context: DomStyleCommitContext,
   selection: DomEditSelection,
-  styles: Record<string, string>,
+  stylesInEitherCase: Record<string, string>,
 ): Promise<DomEditCommitOutcome> {
+  const styles = Object.fromEntries(
+    Object.entries(stylesInEitherCase).map(([property, value]) => [
+      cssPropertyName(property),
+      value,
+    ]),
+  );
   const entries = Object.entries(styles);
   if (entries.length === 0) return domEditCommitDeclined("no-selection");
   if (entries.some(([property]) => isManualGeometryStyleProperty(property)))

package/src/hooks/draggedGsapPosition.ts

@@ -75,3 +75,13 @@ export function computeDraggedGsapPosition(
     baseGsapY,
   };
 }
+
+/** Puts the drag's preview offset back once the written position renders instead. */
+export function restoreDragOffset(element: HTMLElement): void {
+  const origin = (axis: "x" | "y") =>
+    Number.parseFloat(element.getAttribute(`data-hf-drag-initial-offset-${axis}`) ?? "") || 0;
+  element.style.setProperty("--hf-studio-offset-x", `${origin("x")}px`);
+  element.style.setProperty("--hf-studio-offset-y", `${origin("y")}px`);
+  element.removeAttribute("data-hf-drag-initial-offset-x");
+  element.removeAttribute("data-hf-drag-initial-offset-y");
+}

package/src/hooks/elementOffsetStager.ts

@@ -1,3 +1,4 @@
+import type { DomEditPersistOutcome } from "./domEditCommitTypes";
 import { getDomEditTargetKey, type DomEditSelection } from "../components/editor/domEditing";
 import {
   applyElementPositionOffset,
@@ -23,7 +24,7 @@ export interface ElementOffsetStagerDeps {
     selection: DomEditSelection,
     patches: PatchOperation[],
     options: { label: string; coalesceKey: string; coalesceMs?: number },
-  ) => Promise<void>;
+  ) => Promise<DomEditPersistOutcome | undefined>;
   showToast: (message: string, tone?: "error" | "info") => void;
   readOnlyPreview?: boolean;
 }
@@ -59,7 +60,7 @@ function stagePlainTranslate(
   selection: DomEditSelection,
   next: { x: number; y: number },
   coalesceKey?: string,
-): { save: () => Promise<void>; rollback: () => void } {
+): { save: () => Promise<DomEditPersistOutcome | undefined>; rollback: () => void } {
   const el = selection.element;
   const before = captureStudioPathOffset(el);
   const patches = writePlainMove(el, next);
@@ -85,9 +86,9 @@ export function stageElementOffset(
   next: { x: number; y: number },
   plainTranslate: boolean,
   coalesceKey?: string,
-): { save: () => Promise<void>; rollback: () => void } {
+): { save: () => Promise<DomEditPersistOutcome | undefined>; rollback: () => void } {
   const el = selection.element;
-  if (readOnlyPreview) return { save: () => Promise.resolve(), rollback: () => undefined };
+  if (readOnlyPreview) return { save: () => Promise.resolve(undefined), rollback: () => undefined };
   if (plainTranslate) {
     refuseGsapTakeover(el, showToast);
     return stagePlainTranslate(commitPositionPatchToHtml, selection, next, coalesceKey);