@hyperframes/studio 0.8.115 → 0.8.117

package/src/components/editor/motionPathSelection.test.ts

@@ -1,41 +1,16 @@
 // @vitest-environment jsdom
 import { afterEach, describe, expect, it } from "vitest";
-import type { DomEditSelection } from "./domEditingTypes";
-import { buildStableSelector, getSelectorIndex } from "./domEditingDom";
+import { mountGroupSiblings, stableSelectionFor } from "../../hooks/domSelectionTestHarness";
 import { selectorFor } from "./motionPathSelection";
 
 afterEach(() => {
   document.body.innerHTML = "";
 });
 
-function selectionFor(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;
-}
-
-function mountGroupSiblings(): HTMLElement[] {
-  document.body.innerHTML = `
-    <div id="scene" class="clip" data-start="0" data-duration="2">
-      <div class="group"></div>
-      <div class="group"></div>
-      <div class="group"></div>
-    </div>
-  `;
-  return Array.from(document.querySelectorAll<HTMLElement>(".group"));
-}
-
 describe("selectorFor", () => {
   it("addresses one element for a class-only sibling", () => {
-    const groups = mountGroupSiblings();
-    const selector = selectorFor(selectionFor(groups[2]!));
+    const groups = mountGroupSiblings(3);
+    const selector = selectorFor(stableSelectionFor(groups[2]!));
 
     // The bare ".group" both measured home off the FIRST sibling and wrote the
     // new motion path onto all three.
@@ -48,7 +23,7 @@ describe("selectorFor", () => {
     document.body.innerHTML = `<div id="hero"></div>`;
     const el = document.querySelector<HTMLElement>("#hero")!;
 
-    expect(selectorFor(selectionFor(el))).toBe("#hero");
+    expect(selectorFor(stableSelectionFor(el))).toBe("#hero");
   });
 
   it("returns null with no selection", () => {
@@ -56,8 +31,8 @@ describe("selectorFor", () => {
   });
 
   it("returns null when no rung addresses one element", () => {
-    const groups = mountGroupSiblings();
-    const selection = selectionFor(groups[1]!);
+    const groups = mountGroupSiblings(3);
+    const selection = stableSelectionFor(groups[1]!);
     groups[1]!.remove();
 
     expect(selectorFor(selection)).toBeNull();

package/src/components/editor/plainTranslate.ts

@@ -1,5 +1,5 @@
 import { roundTo3 } from "../../utils/rounding";
-import { gsapWritesPosition, gsapWritesRotation } from "../../hooks/gsapRuntimeKeyframes";
+import { editsPlainCss } from "../../hooks/gsapRuntimeKeyframes";
 import { readCssRotation } from "../../hooks/draggedGsapPosition";
 import { readStudioPathOffset, readStudioRotation, styleUsesStudioOffset } from "./manualEditsDom";
 import { splitTopLevelWhitespace } from "./manualEditsStyleHelpers";
@@ -142,10 +142,12 @@ export function writeTranslatePx(el: HTMLElement, p: Point): void {
 }
 
 /** The position the panel shows and edits: the translate a move writes, unless GSAP positions it. */
-export function readMoveOffset(el: HTMLElement, plainTranslate = !gsapWritesPosition(el)): Point {
+export function readMoveOffset(el: HTMLElement, plainTranslate = editsPlainCss(el, "move")): Point {
   return plainTranslate ? readTranslatePx(el) : readStudioPathOffset(el);
 }
 
 export function readShownRotation(el: HTMLElement): { angle: number } {
-  return gsapWritesRotation(el) ? readStudioRotation(el) : { angle: roundTo3(readCssRotation(el)) };
+  return editsPlainCss(el, "rotate")
+    ? { angle: roundTo3(readCssRotation(el)) }
+    : readStudioRotation(el);
 }

package/src/components/editor/probeSourceElement.ts

@@ -1,4 +1,5 @@
 import { buildProjectApiPath } from "../../utils/projectRouting";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 type ProbeTarget = { id?: string; hfId?: string; selector?: string; selectorIndex?: number };
 
@@ -12,7 +13,7 @@ const pending = new Map<string, PendingProbe[]>();
 async function sendBatch(projectId: string, sourceFile: string, probes: PendingProbe[]) {
   let exists: boolean[] = [];
   try {
-    const response = await fetch(
+    const response = await studioApiFetch(
       buildProjectApiPath(
         projectId,
         `/file-mutations/probe-elements/${encodeURIComponent(sourceFile)}`,

package/src/components/editor/propertyPanelFont.tsx

@@ -20,6 +20,7 @@ import {
 } from "./propertyPanelHelpers";
 import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
 import { runWhenInputIdle } from "./overlayFrameLoop";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 /* ------------------------------------------------------------------ */
 /*  Font helper functions                                              */
@@ -135,7 +136,7 @@ let fontListsRequest: Promise<void> | null = null;
 const fontListListeners = new Set<() => void>();
 
 async function fetchFontList(url: string): Promise<string[]> {
-  const data = (await (await fetch(url)).json()) as { fonts?: unknown };
+  const data = (await (await studioApiFetch(url)).json()) as { fonts?: unknown };
   if (!Array.isArray(data.fonts)) throw new Error(`${url} returned no font list`);
   return data.fonts as string[];
 }
@@ -356,7 +357,7 @@ export function FontFamilyField({
 
   const importSystemFont = async (family: string): Promise<ImportedFontAsset | null> => {
     if (!onImportFonts) return null;
-    const response = await fetch(`/api/fonts/file?family=${encodeURIComponent(family)}`);
+    const response = await studioApiFetch(`/api/fonts/file?family=${encodeURIComponent(family)}`);
     if (!response.ok) return null;
     const blob = await response.blob();
     const ext = response.headers.get("Content-Disposition")?.match(/\.(\w+)"?$/)?.[1] ?? "ttf";

package/src/components/editor/propertyPanelHelpers.ts

@@ -9,7 +9,7 @@ import {
   playbackStartAttributeForElement,
   readPlaybackStartAttributes,
 } from "../../player/lib/timelineElementHelpers";
-import { GSAP_TRANSFORM_KEYS, gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
+import { editsPlainCss, GSAP_TRANSFORM_KEYS } from "../../hooks/gsapRuntimeKeyframes";
 
 export type {
   BackgroundRemovalProgress,
@@ -496,7 +496,7 @@ export function readGsapRuntimeValuesForPanel(
     const el = findPreviewNode(iframe.contentDocument, element);
     if (!el) return null;
     const propKeys = collectPanelPropKeys(gsapAnimations);
-    const readsTransform = gsapWritesPosition(el);
+    const readsTransform = !editsPlainCss(el, "move");
     const result: Record<string, number> = {};
     for (const prop of propKeys) {
       if (!readsTransform && GSAP_TRANSFORM_KEYS.has(prop)) continue;

package/src/components/editor/propertyPanelTransformCommit.ts

@@ -1,4 +1,4 @@
-import { gsapWritesPosition } from "../../hooks/gsapRuntimeKeyframes";
+import { editsPlainCss } from "../../hooks/gsapRuntimeKeyframes";
 import type { DomEditSelection } from "./domEditingTypes";
 import { readStudioBoxSize } from "./manualEdits";
 import { readMoveOffset, UNREADABLE_TRANSLATE } from "./plainTranslate";
@@ -75,7 +75,7 @@ export function createTransformCommitHandlers({
       )
     )
       return;
-    const plainTranslate = !gsapWritesPosition(element.element);
+    const plainTranslate = editsPlainCss(element.element, "move");
     const current = readMoveOffset(element.element, plainTranslate);
     if (!Number.isFinite(current.x) || !Number.isFinite(current.y))
       return void showToast?.(UNREADABLE_TRANSLATE);

package/src/components/editor/rotationDraft.ts

@@ -51,7 +51,8 @@ export interface CssRotationTarget {
   inline: boolean;
 }
 
-export type RotationCommit = { angle: number; plain?: CssRotationTarget };
+export type PressChoseGsap = null;
+export type RotationCommit = { angle: number; plain?: CssRotationTarget | PressChoseGsap };
 
 const TRANSLATE = /^translate(?:3d|X|Y|Z)?\(/i;
 const OWN_TURN = /^rotate\(\s*-?[\d.]+(?:e[+-]?\d+)?deg\s*\)$/i;

package/src/components/editor/useColorGradingController.ts

@@ -29,6 +29,7 @@ import {
   type ColorGradingPresetPreviews,
   type ColorGradingPreviewOptions,
 } from "./useColorGradingPreviews";
+import { studioApiFetch } from "../../utils/studioApiFetch";
 
 export type { ColorGradingPresetPreviews, ColorGradingPreviewOptions };
 
@@ -290,7 +291,7 @@ export function useColorGradingController({
       return;
     }
     const controller = new AbortController();
-    fetch(cacheKey, { signal: controller.signal })
+    studioApiFetch(cacheKey, { signal: controller.signal })
       .then(async (response) => {
         if (!response.ok) return { ok: false as const };
         const data: MediaMetadataResponse | null = await response.json();

package/src/components/editor/useDomEditOverlayGestures.ts

@@ -442,7 +442,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
       }
       // Hold the final angle while the commit lands.
       applyRotationDraft(sel.element, finalRotation.angle, g.plainRotation);
-      const commit = g.plainRotation ? { ...finalRotation, plain: g.plainRotation } : finalRotation;
+      const commit = { ...finalRotation, plain: g.plainRotation };
       void Promise.resolve(opts.onRotationCommitRef.current(sel, commit))
         .then((result) => trackPreviewEditResult("rotate", "drag", result))
         .catch((error) => {
@@ -536,7 +536,7 @@ export function createDomEditOverlayGestureHandlers(opts: UseDomEditOverlayGestu
         if (finalOffset) restoreStudioPathOffset(sel.element, g.initialPathOffset);
       };
       void Promise.resolve(
-        opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? undefined, restore),
+        opts.onBoxSizeCommitRef.current(sel, finalSize, finalOffset ?? undefined, restore, member),
       )
         .then((result) => trackPreviewEditResult("resize", "drag", result))
         .catch((error) => {

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/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/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/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,
@@ -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/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");
+}