@hyperframes/studio 0.8.119 → 0.8.121

package/dist/index.d.ts

@@ -1308,6 +1308,7 @@ interface TimelineProps extends TimelineDropCallbacks, TimelineEditOverrides, Ti
     onDuplicateClip?: () => Promise<boolean>;
     canPasteClip?: () => boolean;
     clipMenuItems?: (element: TimelineElement) => readonly TimelineClipMenuItem[];
+    splitShortcut?: string;
     theme?: Partial<TimelineTheme>;
     showAudioEffects?: boolean;
     showKeyframes?: boolean;
@@ -1689,6 +1690,7 @@ interface TimelineOverlaysState {
     onDuplicateClip?: () => Promise<boolean>;
     canPasteClip?: () => boolean;
     clipMenuItems?: TimelineProps["clipMenuItems"];
+    splitShortcut?: TimelineProps["splitShortcut"];
     gapContextMenu: TrackGapContextMenuState | null;
     onDismissGapContextMenu: () => void;
     onCloseTrackGap: () => void;
@@ -2018,6 +2020,7 @@ interface EditorShellProps extends TimelineEditCallbackDeps {
     onDuplicateClip: () => Promise<boolean>;
     canPasteClip: () => boolean;
     clipMenuItems?: TimelineProps["clipMenuItems"];
+    splitShortcut?: TimelineProps["splitShortcut"];
     setCompIdToSrc: (map: Map<string, string>) => void;
     setCompositionLoading: (loading: boolean) => void;
     shouldShowMotionPath: boolean;
@@ -3023,8 +3026,9 @@ interface TimelinePaneProps {
     onDuplicateClip?: () => Promise<boolean>;
     canPasteClip?: () => boolean;
     clipMenuItems?: TimelineProps["clipMenuItems"];
+    splitShortcut?: TimelineProps["splitShortcut"];
 }
-declare function TimelinePane({ timelineToolbar, timelineFooter, timelineOverlay, renderClipContent, onFileDrop, onDeleteElement, onAssetDrop, onBlockDrop, onCompositionDrop, onBlockedEditAttempt, onSelectTimelineElement, onRangeSelect, onCopyClip, onPasteClip, onDuplicateClip, canPasteClip, clipMenuItems, }: TimelinePaneProps): react_jsx_runtime.JSX.Element;
+declare function TimelinePane({ timelineToolbar, timelineFooter, timelineOverlay, renderClipContent, onFileDrop, onDeleteElement, onAssetDrop, onBlockDrop, onCompositionDrop, onBlockedEditAttempt, onSelectTimelineElement, onRangeSelect, onCopyClip, onPasteClip, onDuplicateClip, canPasteClip, clipMenuItems, splitShortcut, }: TimelinePaneProps): react_jsx_runtime.JSX.Element;
 
 declare function TimelineEditProvider({ value, children, }: {
     value: TimelineEditCallbacks;

package/dist/index.html

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

package/dist/index.js

@@ -626,6 +626,7 @@ var STUDIO_PLAIN_KEYS = {
   audioGain: "g"
 };
 var hintKey = (key2) => key2.toUpperCase();
+var SPLIT_SHORTCUT_HINT = hintKey(STUDIO_PLAIN_KEYS.split);
 var DEFAULT_SHORTCUT_SECTIONS = [
   {
     title: "Playback",
@@ -657,7 +658,7 @@ var DEFAULT_SHORTCUT_SECTIONS = [
       { key: "\u2318C", label: "Copy element" },
       { key: "\u2318V", label: "Paste element" },
       { key: "\u2318X", label: "Cut element" },
-      { key: hintKey(STUDIO_PLAIN_KEYS.split), label: "Split clip at playhead" },
+      { key: SPLIT_SHORTCUT_HINT, label: "Split clip at playhead" },
       { key: hintKey(STUDIO_PLAIN_KEYS.audioGain), label: "Audio Gain for clips with sound" },
       { key: "\u21E7Click", label: "Razor tool: split all tracks" },
       { key: "[", label: "Select clips starting before the playhead" },
@@ -14054,6 +14055,7 @@ function useTimelineProviderState({
   onDuplicateClip,
   canPasteClip,
   clipMenuItems,
+  splitShortcut,
   theme: themeOverrides,
   showAudioEffects = true,
   showKeyframes = true,
@@ -14359,6 +14361,7 @@ function useTimelineProviderState({
     onDuplicateClip,
     canPasteClip,
     clipMenuItems,
+    splitShortcut,
     onSelectElement,
     selectedElementId,
     setRangeSelectionRef,
@@ -17402,17 +17405,20 @@ function readMutationError(value, fallback) {
   if (isRecord2(value) && typeof value.error === "string") return value.error;
   return fallback;
 }
+function requestGsapMutation(projectId, route, filePath, body) {
+  return studioApiFetch(
+    `/api/projects/${encodeURIComponent(projectId)}/${route}/${encodeURIComponent(filePath)}`,
+    {
+      method: "POST",
+      headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
+      body: JSON.stringify(body)
+    }
+  );
+}
 async function postGsapMutation(projectId, filePath, mutation, fallback) {
   let response;
   try {
-    response = await studioApiFetch(
-      `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations/${encodeURIComponent(filePath)}`,
-      {
-        method: "POST",
-        headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
-        body: JSON.stringify(mutation)
-      }
-    );
+    response = await requestGsapMutation(projectId, "gsap-mutations", filePath, mutation);
   } catch (error) {
     throw new GsapPreviewConvergenceError(`${fallback}: mutation outcome unknown`, {
       cause: error
@@ -26250,7 +26256,8 @@ var ClipContextMenu = memo17(function ClipContextMenu2({
   onPaste,
   onDuplicate,
   canPaste,
-  hostItems = []
+  hostItems = [],
+  splitShortcut = SPLIT_SHORTCUT_HINT
 }) {
   const menuRef = useContextMenuDismiss(onClose);
   useMenuKeyboardNav(menuRef);
@@ -26294,7 +26301,7 @@ var ClipContextMenu = memo17(function ClipContextMenu2({
                 },
                 children: [
                   /* @__PURE__ */ jsx66("span", { children: splitLabel }),
-                  /* @__PURE__ */ jsx66("span", { className: "text-neutral-500 text-[10px] ml-3", children: "S" })
+                  /* @__PURE__ */ jsx66("span", { className: "text-neutral-500 text-[10px] ml-3", children: splitShortcut })
                 ]
               }
             ),
@@ -26669,7 +26676,8 @@ function TimelineClipMenuOverlay() {
       onPaste: overlay.onPasteClip,
       onDuplicate: overlay.onDuplicateClip,
       canPaste: overlay.canPasteClip?.() ?? false,
-      hostItems
+      hostItems,
+      splitShortcut: overlay.splitShortcut
     }
   );
 }
@@ -33751,7 +33759,8 @@ function TimelinePane({
   onPasteClip,
   onDuplicateClip,
   canPasteClip,
-  clipMenuItems
+  clipMenuItems,
+  splitShortcut
 }) {
   const {
     seek,
@@ -33807,7 +33816,8 @@ function TimelinePane({
                     onPasteClip,
                     onDuplicateClip,
                     canPasteClip,
-                    clipMenuItems
+                    clipMenuItems,
+                    splitShortcut
                   }
                 ) }),
                 /* @__PURE__ */ jsx86(AudioMeterStrip, {})
@@ -50179,6 +50189,7 @@ var EditorShell = memo33(function EditorShell2({
   onDuplicateClip,
   canPasteClip,
   clipMenuItems,
+  splitShortcut,
   setCompIdToSrc,
   setCompositionLoading,
   shouldShowMotionPath,
@@ -50270,6 +50281,7 @@ var EditorShell = memo33(function EditorShell2({
           onDuplicateClip,
           canPasteClip,
           clipMenuItems,
+          splitShortcut,
           previewOverlay: /* @__PURE__ */ jsx112(
             PreviewOverlays,
             {
@@ -50305,7 +50317,8 @@ function EditorShellBody({
   onPasteClip,
   onDuplicateClip,
   canPasteClip,
-  clipMenuItems
+  clipMenuItems,
+  splitShortcut
 }) {
   const { compositionStack, updateCompositionStack, containerRef } = useNLEContext();
   const seekCaptionTime = useCallback74((time) => {
@@ -50352,6 +50365,7 @@ function EditorShellBody({
               onDuplicateClip,
               canPasteClip,
               clipMenuItems,
+              splitShortcut,
               onSelectTimelineElement,
               timelineFooter: captionEditMode ? /* @__PURE__ */ jsxs82("div", { className: "border-t border-neutral-800/30 shrink-0", style: { height: 60 }, children: [
                 /* @__PURE__ */ jsx112("div", { className: "flex items-center gap-1.5 px-2 py-0.5", children: /* @__PURE__ */ jsx112("span", { className: "text-[9px] font-medium text-neutral-500 uppercase tracking-wider", children: "Captions" }) }),
@@ -78034,7 +78048,6 @@ import { useCallback as useCallback127, useRef as useRef144 } from "react";
 import { findUnsafeDomPatchValues as findUnsafeDomPatchValues2 } from "@hyperframes/core/studio-api/finite-mutation";
 
 // src/hooks/gsapScriptCommitHelpers.ts
-import { findUnsafeDomPatchValues } from "@hyperframes/core/studio-api/finite-mutation";
 function ensureElementAddressable(selection) {
   if (selection.id) return { selector: idSelector(selection.id) };
   const el = selection.element;
@@ -78049,7 +78062,6 @@ function ensureElementAddressable(selection) {
     n += 1;
     id = `${tag}-${n}`;
   }
-  el.setAttribute("id", id);
   return { selector: idSelector(id), autoId: id };
 }
 var GsapMutationHttpError = class extends Error {
@@ -78092,49 +78104,9 @@ function formatGsapMutationRejectionToast(error) {
   }
   return `Couldn't save animation: ${error.message}`;
 }
-async function assignGsapTargetAutoIdIfNeeded({
-  projectId,
-  targetPath,
-  selection,
-  autoId,
-  showToast
-}) {
-  const patchBody = {
-    target: {
-      id: selection.id,
-      hfId: selection.hfId,
-      selector: selection.selector,
-      selectorIndex: selection.selectorIndex
-    },
-    operations: [{ type: "html-attribute", property: "id", value: autoId }]
-  };
-  const unsafePatchFields = findUnsafeDomPatchValues(patchBody);
-  if (unsafePatchFields.length > 0) {
-    showToast?.("Couldn't assign element id because the patch contains invalid values", "error");
-    return false;
-  }
-  const res = await studioApiFetch(
-    `/api/projects/${encodeURIComponent(projectId)}/file-mutations/patch-element/${encodeURIComponent(targetPath)}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
-      body: JSON.stringify(patchBody)
-    }
-  );
-  if (!res.ok) {
-    showToast?.(
-      formatGsapMutationRejectionToast(
-        new GsapMutationHttpError(res.status, await readJsonResponseBody(res))
-      ),
-      "error"
-    );
-    return false;
-  }
-  const data = await res.json();
-  return data.changed === true;
-}
 
 // src/hooks/useDomEditCommitsHelpers.ts
+import { findUnsafeDomPatchValues } from "@hyperframes/core/studio-api/finite-mutation";
 function formatUnsafeFieldList(fields) {
   return fields.map((field) => field.path).join(", ");
 }
@@ -78238,6 +78210,36 @@ async function postPatchElement(projectId, targetPath, body, showToast) {
   }
   return await response.json();
 }
+async function assignGsapTargetAutoIdIfNeeded({
+  projectId,
+  targetPath,
+  selection,
+  autoId,
+  showToast
+}) {
+  const patchBody = {
+    target: {
+      id: selection.id,
+      hfId: selection.hfId,
+      selector: selection.selector,
+      selectorIndex: selection.selectorIndex
+    },
+    operations: [{ type: "ensure-id", property: "id", value: autoId }]
+  };
+  if (findUnsafeDomPatchValues(patchBody).length > 0) {
+    showToast("Couldn't assign element id because the patch contains invalid values", "error");
+    return null;
+  }
+  try {
+    const { elementId: elementId2 } = await postPatchElement(projectId, targetPath, patchBody, showToast);
+    if (elementId2) return elementId2;
+    showToast(`Couldn't assign element id: element not found in ${targetPath}`, "error");
+    return null;
+  } catch (error) {
+    if (error instanceof StudioSaveHttpError && error.alreadyToasted) return null;
+    throw error;
+  }
+}
 async function writePreparedContent(targetPath, patchedContent, prepare, writeProjectFile, showToast) {
   const preparedContent = prepare(patchedContent, targetPath);
   if (preparedContent === patchedContent) return { content: patchedContent, failed: false };
@@ -80135,11 +80137,13 @@ function useGsapAnimationOps({
   const addGsapAnimation = useCallback134(
     // fallow-ignore-next-line complexity
     async (selection, method, _currentTime) => {
-      const { selector, autoId } = ensureElementAddressable(selection);
+      const address = ensureElementAddressable(selection);
+      const { autoId } = address;
+      let selector = address.selector;
       if (autoId) {
         const pid = projectIdRef.current;
-        const targetPath = selection.sourceFile || activeCompPath || "index.html";
         if (!pid) return;
+        const targetPath = selection.sourceFile || activeCompPath || "index.html";
         const assign = () => assignGsapTargetAutoIdIfNeeded({
           projectId: pid,
           targetPath,
@@ -80147,8 +80151,10 @@ function useGsapAnimationOps({
           autoId,
           showToast
         });
-        const assigned = await (writeProjectFile ? serializeStudioFileMutation(writeProjectFile, targetPath, assign) : assign());
-        if (!assigned) return;
+        const savedId = await (writeProjectFile ? serializeStudioFileMutation(writeProjectFile, targetPath, assign) : assign());
+        if (!savedId) return;
+        selection.element.setAttribute("id", savedId);
+        selector = idSelector(savedId);
       }
       const elStart = Number.parseFloat(selection.dataAttributes?.start ?? "0") || 0;
       const elDuration = Number.parseFloat(selection.dataAttributes?.duration ?? "1") || 1;
@@ -80975,29 +80981,8 @@ function useSafeGsapCommitMutation(commitMutation, trackGsapSaveFailure, showToa
 }
 
 // src/hooks/useGsapScriptCommits.ts
-async function mutateGsapScript(projectId, sourceFile, mutation) {
-  const res = await studioApiFetch(
-    `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations/${encodeURIComponent(sourceFile)}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
-      body: JSON.stringify(mutation)
-    }
-  );
-  if (!res.ok) throw new GsapMutationHttpError(res.status, await readJsonResponseBody(res));
-  const result = await res.json();
-  if (!result.ok) throw new Error(`Failed to update GSAP in ${sourceFile}`);
-  return result;
-}
-async function mutateGsapScriptBatch(projectId, sourceFile, mutations) {
-  const res = await studioApiFetch(
-    `/api/projects/${encodeURIComponent(projectId)}/gsap-mutations-batch/${encodeURIComponent(sourceFile)}`,
-    {
-      method: "POST",
-      headers: { "Content-Type": "application/json", ...studioWriteHeaders() },
-      body: JSON.stringify({ mutations })
-    }
-  );
+async function mutateGsapScript(projectId, route, sourceFile, body) {
+  const res = await requestGsapMutation(projectId, route, sourceFile, body);
   if (!res.ok) throw new GsapMutationHttpError(res.status, await readJsonResponseBody(res));
   const result = await res.json();
   if (!result.ok) throw new Error(`Failed to update GSAP in ${sourceFile}`);
@@ -81195,7 +81180,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
       [mutation],
       options,
       showToast,
-      () => mutateGsapScript(pid, targetPath, mutation)
+      () => mutateGsapScript(pid, "gsap-mutations", targetPath, mutation)
     );
     if (!result) return;
     trackKeyframeCommit([mutation], result, options);
@@ -81211,7 +81196,7 @@ function useGsapScriptCommits({ projectIdRef, activeCompPath, previewIframeRef,
       mutations,
       options,
       showToast,
-      () => mutateGsapScriptBatch(pid, targetPath, mutations)
+      () => mutateGsapScript(pid, "gsap-mutations-batch", targetPath, { mutations })
     );
     if (!result) return;
     trackKeyframeCommit(mutations, result, options, calls.map((call) => call.options));