@hyperframes/studio 0.8.115 → 0.8.116

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