@hyperframes/studio 0.7.57 → 0.7.59

package/src/hooks/useTimelineEditing.ts

@@ -31,8 +31,10 @@ import {
   useTimelineTrackVisibilityEditing,
 } from "./timelineTrackVisibility";
 import { useTimelineGroupEditing } from "./useTimelineGroupEditing";
-import { sdkTimingPersist } from "../utils/sdkCutover";
+import { serializeZLaneGesture } from "../components/nle/zLaneGesture";
+import { cutoverCommittedOrThrow, sdkTimingPersist } from "../utils/sdkCutover";
 import type { UseTimelineEditingOptions } from "./useTimelineEditingTypes";
+import { getStudioSaveErrorMessage } from "../utils/studioSaveDiagnostics";
 
 type TimelineMoveUpdates = Pick<TimelineElement, "start" | "track"> & {
   stackingReorder?: TimelineStackingReorderIntent | null;
@@ -52,6 +54,7 @@ export function useTimelineEditing({
   uploadProjectFiles,
   isRecordingRef,
   sdkSession,
+  publishSdkSession,
   forceReloadSdkSession,
   handleDomZIndexReorderCommitRef,
 }: UseTimelineEditingOptions) {
@@ -120,124 +123,131 @@ export function useTimelineEditing({
     recordEdit,
     reloadPreview,
     sdkSession,
+    publishSdkSession,
     showToast,
     writeProjectFile,
   });
-
   const handleTimelineElementMove = useCallback(
     // fallow-ignore-next-line complexity
     (element: TimelineElement, updates: TimelineMoveUpdates) => {
-      const targetPath = element.sourceFile || activeCompPath || "index.html";
-      const startChanged = updates.start !== element.start;
-      // A vertical-only lane move arrives with start unchanged but track changed
-      // (on this single-element path the drag commit has already folded the
-      // AUTHORED persist track into updates.track). It must persist like any
-      // other move — early-returning on !startChanged alone silently dropped
-      // the file write, so the lane snapped back on reload.
-      const trackChanged = updates.track !== element.track;
+      const commitMove = () => {
+        const targetPath = element.sourceFile || activeCompPath || "index.html";
+        const startChanged = updates.start !== element.start;
+        // A vertical-only lane move arrives with start unchanged but track changed
+        // (on this single-element path the drag commit has already folded the
+        // AUTHORED persist track into updates.track). It must persist like any
+        // other move — early-returning on !startChanged alone silently dropped
+        // the file write, so the lane snapped back on reload.
+        const trackChanged = updates.track !== element.track;
 
-      if (startChanged || trackChanged) {
-        const liveAttrs: Array<[string, string]> = [];
-        if (startChanged) {
-          liveAttrs.push(["data-start", formatTimelineAttributeNumber(updates.start)]);
-        }
-        if (trackChanged) {
-          liveAttrs.push(["data-track-index", formatTimelineAttributeNumber(updates.track)]);
+        if (startChanged || trackChanged) {
+          const liveAttrs: Array<[string, string]> = [];
+          if (startChanged) {
+            liveAttrs.push(["data-start", formatTimelineAttributeNumber(updates.start)]);
+          }
+          if (trackChanged) {
+            liveAttrs.push(["data-track-index", formatTimelineAttributeNumber(updates.track)]);
+          }
+          patchIframeDomTiming(previewIframeRef.current, element, liveAttrs, activeCompPath);
         }
-        patchIframeDomTiming(previewIframeRef.current, element, liveAttrs);
-      }
 
-      const reorderDone = applyTimelineStackingReorder({
-        element,
-        stackingReorder: updates.stackingReorder,
-        timelineElements,
-        iframe: previewIframeRef.current,
-        activeCompPath,
-        commit: handleDomZIndexReorderCommitRef?.current,
-      });
+        const reorderDone = applyTimelineStackingReorder({
+          element,
+          stackingReorder: updates.stackingReorder,
+          timelineElements,
+          iframe: previewIframeRef.current,
+          activeCompPath,
+          commit: handleDomZIndexReorderCommitRef?.current,
+        });
 
-      if (!startChanged && !trackChanged) return reorderDone;
+        if (!startChanged && !trackChanged) return reorderDone;
 
-      // Snapshot the duration BEFORE the optimistic updates below so a failed
-      // persist can roll the readout + live root back (see captureDurationRollback).
-      const rollbackDuration = captureDurationRollback(previewIframeRef.current);
-      // needsExtension gates the SDK path (setTiming can't grow the root duration), so read the store BEFORE the readout sync below optimistically updates it.
-      const needsExtension = extendRootDurationIfNeeded(updates.start + element.duration);
-      // Optimistic duration readout: content-driven (grow AND shrink), from the just-patched live DOM. See syncPreviewContentDuration.
-      syncPreviewContentDuration(previewIframeRef.current);
+        // Snapshot the duration BEFORE the optimistic updates below so a failed
+        // persist can roll the readout + live root back (see captureDurationRollback).
+        const rollbackDuration = captureDurationRollback(previewIframeRef.current);
+        // needsExtension gates the SDK path (setTiming can't grow the root duration), so read the store BEFORE the readout sync below optimistically updates it.
+        const needsExtension = extendRootDurationIfNeeded(updates.start + element.duration);
+        // Optimistic duration readout: content-driven (grow AND shrink), from the just-patched live DOM. See syncPreviewContentDuration.
+        syncPreviewContentDuration(previewIframeRef.current);
 
-      const buildMovePatches: PersistTimelineEditInput["buildPatches"] = (original, target) => {
-        // Persist lane changes too — data-start-only writes let reload snap the lane back.
-        const track = trackChanged ? updates.track : undefined;
-        return buildTimelineMoveTimingPatch(
-          original,
-          target,
-          updates.start,
-          element.duration,
-          track,
-        );
-      };
-      const coalesceKey = `timeline-move:${element.hfId ?? element.id}`;
-      const moveFallback = () =>
-        enqueueEdit(element, "Move timeline clip", buildMovePatches, coalesceKey).then(() =>
-          // Soft-reload with the server's rewritten GSAP script — the timing-only move already patched
-          // DOM + store, so swapping the script avoids the all-clips flash; falls back to reloadPreview().
-          finishClipTimingFallback({
-            iframe: previewIframeRef.current,
-            reloadPreview,
-            projectId: projectIdRef.current,
-            targetPath,
-            domId: element.domId,
-            label: "Move timeline clip",
-            coalesceKey,
-            recordEdit,
-            edit: { kind: "shift", delta: updates.start - element.start },
-          }),
-        );
-      return reorderDone
-        .then(() => {
-          // The SDK setTiming path writes start only — a lane change must take
-          // the fallback, whose patch builder writes data-track-index too.
-          if (sdkSession && element.hfId && !needsExtension && !trackChanged) {
-            return sdkTimingPersist(
-              element.hfId,
+        const buildMovePatches: PersistTimelineEditInput["buildPatches"] = (original, target) => {
+          // Persist lane changes too — data-start-only writes let reload snap the lane back.
+          const track = trackChanged ? updates.track : undefined;
+          return buildTimelineMoveTimingPatch(
+            original,
+            target,
+            updates.start,
+            element.duration,
+            track,
+          );
+        };
+        const coalesceKey = `timeline-move:${element.hfId ?? element.id}`;
+        const moveFallback = () =>
+          enqueueEdit(element, "Move timeline clip", buildMovePatches, coalesceKey).then(() =>
+            // Soft-reload with the server's rewritten GSAP script — the timing-only move already patched
+            // DOM + store, so swapping the script avoids the all-clips flash; falls back to reloadPreview().
+            finishClipTimingFallback({
+              iframe: previewIframeRef.current,
+              reloadPreview,
+              projectId: projectIdRef.current,
               targetPath,
-              { start: updates.start },
-              sdkSession,
-              {
-                editHistory: { recordEdit },
-                writeProjectFile,
-                reloadPreview,
-                domEditSaveTimestampRef,
-                compositionPath: activeCompPath,
-                // Capture on-disk bytes as the undo `before` so undoing a timing move
-                // restores the file verbatim, not a normalized full-DOM re-emit.
-                readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path),
-              },
-              { label: "Move timeline clip", coalesceKey },
-            ).then((handled) => {
-              if (!handled) return moveFallback();
-            });
-          }
-          return moveFallback();
-        })
-        .catch((error) => {
-          // Failed persist: revert the optimistic duration readout + live root.
-          rollbackDuration();
-          throw error;
-        });
+              domId: element.domId,
+              label: "Move timeline clip",
+              coalesceKey,
+              recordEdit,
+              edit: { kind: "shift", delta: updates.start - element.start },
+            }),
+          );
+        return reorderDone
+          .then(() => {
+            // The SDK setTiming path writes start only — a lane change must take
+            // the fallback, whose patch builder writes data-track-index too.
+            if (sdkSession && element.hfId && !needsExtension && !trackChanged) {
+              return sdkTimingPersist(
+                element.hfId,
+                targetPath,
+                { start: updates.start },
+                sdkSession,
+                {
+                  editHistory: { recordEdit },
+                  writeProjectFile,
+                  reloadPreview,
+                  domEditSaveTimestampRef,
+                  compositionPath: activeCompPath,
+                  // Capture on-disk bytes as the undo `before` so undoing a timing move
+                  // restores the file verbatim, not a normalized full-DOM re-emit.
+                  readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path),
+                  publishSession: publishSdkSession,
+                },
+                { label: "Move timeline clip", coalesceKey },
+              ).then((result) => {
+                if (!cutoverCommittedOrThrow(result)) return moveFallback();
+              });
+            }
+            return moveFallback();
+          })
+          .catch((error) => {
+            // Failed persist: revert the optimistic duration readout + live root.
+            rollbackDuration();
+            showToast(getStudioSaveErrorMessage(error), "error");
+            throw error;
+          });
+      };
+      return updates.stackingReorder ? serializeZLaneGesture(commitMove) : commitMove();
     },
     [
       previewIframeRef,
       enqueueEdit,
       activeCompPath,
       sdkSession,
+      publishSdkSession,
       recordEdit,
       writeProjectFile,
       reloadPreview,
       domEditSaveTimestampRef,
       timelineElements,
       handleDomZIndexReorderCommitRef,
+      showToast,
     ],
   );
 
@@ -251,9 +261,6 @@ export function useTimelineEditing({
         ["data-start", formatTimelineAttributeNumber(updates.start)],
         ["data-duration", formatTimelineAttributeNumber(updates.duration)],
       ];
-      // Patch the live playback-start/media-start attr too, or a resize that
-      // trims the playback start leaves the preview showing the old in-point
-      // until the next reload (the persisted patch handles it via pbs below).
       if (updates.playbackStart != null) {
         const liveAttr =
           element.playbackStartAttr === "playback-start"
@@ -261,7 +268,7 @@ export function useTimelineEditing({
             : "data-media-start";
         liveAttrs.push([liveAttr, formatTimelineAttributeNumber(updates.playbackStart)]);
       }
-      patchIframeDomTiming(previewIframeRef.current, element, liveAttrs);
+      patchIframeDomTiming(previewIframeRef.current, element, liveAttrs, activeCompPath);
       // Snapshot the duration BEFORE the optimistic updates below so a failed
       // persist can roll the readout + live root back (see captureDurationRollback).
       const rollbackDuration = captureDurationRollback(previewIframeRef.current);
@@ -315,15 +322,17 @@ export function useTimelineEditing({
                 // Capture on-disk bytes as the undo `before` so undoing a timing
                 // resize restores the file verbatim, not a normalized full-DOM re-emit.
                 readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path),
+                publishSession: publishSdkSession,
               },
               { label: "Resize timeline clip", coalesceKey },
-            ).then((handled) => {
-              if (!handled) return resizeFallback();
+            ).then((result) => {
+              if (!cutoverCommittedOrThrow(result)) return resizeFallback();
             })
           : resizeFallback();
       return persistDone.catch((error) => {
         // Failed persist: revert the optimistic duration readout + live root.
         rollbackDuration();
+        showToast(getStudioSaveErrorMessage(error), "error");
         throw error;
       });
     },
@@ -332,10 +341,12 @@ export function useTimelineEditing({
       enqueueEdit,
       activeCompPath,
       sdkSession,
+      publishSdkSession,
       recordEdit,
       writeProjectFile,
       reloadPreview,
       domEditSaveTimestampRef,
+      showToast,
     ],
   );
 
@@ -356,7 +367,6 @@ export function useTimelineEditing({
   const handleToggleElementHidden = useTimelineElementVisibilityEditing({
     projectIdRef,
     activeCompPath,
-    timelineElements,
     showToast,
     writeProjectFile,
     recordEdit,

package/src/hooks/useTimelineEditingTypes.ts

@@ -2,6 +2,7 @@ import type { MutableRefObject, RefObject } from "react";
 import type { Composition } from "@hyperframes/sdk";
 import type { TimelineElement } from "../player";
 import type { EditHistoryKind } from "../utils/editHistory";
+import type { PublishSdkSession } from "../utils/sdkCutover";
 
 interface RecordEditInput {
   label: string;
@@ -23,7 +24,7 @@ export type TimelineZIndexReorderCommit = (
     key?: string;
   }>,
   coalesceKey?: string,
-) => Promise<void>;
+) => Promise<import("./domEditCommitTypes").DomEditPatchBatchesResult | undefined | void>;
 
 export interface UseTimelineEditingOptions {
   projectId: string | null;
@@ -40,6 +41,8 @@ export interface UseTimelineEditingOptions {
   isRecordingRef?: RefObject<boolean>;
   /** Stage 7 §3.2: SDK session for routing timing ops through setTiming. */
   sdkSession?: Composition | null;
+  /** Publish a fully persisted candidate SDK session. */
+  publishSdkSession?: PublishSdkSession;
   /** Resync the SDK session after a server-authoritative timeline write. */
   forceReloadSdkSession?: () => void;
   handleDomZIndexReorderCommitRef?: MutableRefObject<TimelineZIndexReorderCommit | null>;

package/src/hooks/useTimelineGroupEditing.ts

@@ -1,7 +1,11 @@
 import { useCallback, type MutableRefObject, type RefObject } from "react";
 import type { Composition } from "@hyperframes/sdk";
 import type { TimelineElement } from "../player";
-import { sdkTimingBatchPersist } from "../utils/sdkCutover";
+import {
+  cutoverCommittedOrThrow,
+  sdkTimingBatchPersist,
+  type PublishSdkSession,
+} from "../utils/sdkCutover";
 import {
   buildTimelineMoveTimingPatch,
   buildTimelineResizeTimingPatch,
@@ -20,6 +24,7 @@ import {
   shiftGsapPositions,
   syncPreviewContentDuration,
 } from "./timelineTimingSync";
+import { getStudioSaveErrorMessage } from "../utils/studioSaveDiagnostics";
 
 export interface TimelineGroupMoveChange {
   element: TimelineElement;
@@ -37,6 +42,8 @@ export interface TimelineGroupResizeChange {
 export interface TimelineGroupCommitOptions {
   beforeTiming?: Promise<void>;
   coalesceKey?: string;
+  /** Per-entry undo coalesce window override (ms) — see EditHistoryEntry.coalesceMs. */
+  coalesceMs?: number;
 }
 
 interface UseTimelineGroupEditingOptions {
@@ -51,6 +58,7 @@ interface UseTimelineGroupEditingOptions {
   recordEdit: (input: RecordEditInput) => Promise<void>;
   reloadPreview: () => void;
   sdkSession?: Composition | null;
+  publishSdkSession?: PublishSdkSession;
   showToast: (message: string, tone?: "error" | "info") => void;
   writeProjectFile: (path: string, content: string) => Promise<void>;
 }
@@ -106,6 +114,7 @@ export function useTimelineGroupEditing({
   recordEdit,
   reloadPreview,
   sdkSession,
+  publishSdkSession,
   showToast,
   writeProjectFile,
 }: UseTimelineGroupEditingOptions) {
@@ -137,6 +146,7 @@ export function useTimelineGroupEditing({
       label: string,
       batchChanges: PersistTimelineBatchChange[],
       coalesceKey: string,
+      coalesceMs?: number,
     ) => {
       await persistTimelineBatchEdit({
         projectId,
@@ -148,6 +158,7 @@ export function useTimelineGroupEditing({
         domEditSaveTimestampRef,
         pendingTimelineEditPathRef,
         coalesceKey,
+        coalesceMs,
       });
       forceReloadSdkSession?.();
     },
@@ -176,6 +187,7 @@ export function useTimelineGroupEditing({
       needsExtension: boolean;
       label: string;
       coalesceKey: string;
+      coalesceMs?: number;
     }): Promise<boolean> => {
       const sharedPath = allChangesSharePath(input.changes, activeCompPath);
       const canUseSdk =
@@ -184,7 +196,7 @@ export function useTimelineGroupEditing({
         input.eligible &&
         input.sdkChanges.every((change) => change !== null);
       if (!canUseSdk) return false;
-      return sdkTimingBatchPersist(
+      const result = await sdkTimingBatchPersist(
         input.sdkChanges.filter((change): change is NonNullable<typeof change> => change !== null),
         sharedPath,
         sdkSession,
@@ -195,14 +207,17 @@ export function useTimelineGroupEditing({
           domEditSaveTimestampRef,
           compositionPath: activeCompPath,
           readProjectFile: (path) => readFileContent(projectIdRef.current ?? "", path),
+          publishSession: publishSdkSession,
         },
-        { label: input.label, coalesceKey: input.coalesceKey },
+        { label: input.label, coalesceKey: input.coalesceKey, coalesceMs: input.coalesceMs },
       );
+      return cutoverCommittedOrThrow(result);
     },
     [
       activeCompPath,
       domEditSaveTimestampRef,
       projectIdRef,
+      publishSdkSession,
       recordEdit,
       reloadPreview,
       sdkSession,
@@ -220,20 +235,38 @@ export function useTimelineGroupEditing({
         if (change.track != null) {
           attrs.push(["data-track-index", formatTimelineAttributeNumber(change.track)]);
         }
-        patchIframeDomTiming(previewIframeRef.current, change.element, attrs);
+        patchIframeDomTiming(previewIframeRef.current, change.element, attrs, activeCompPath);
       }
 
+      // TRACK-ONLY batch: every change keeps its start (moves never carry a
+      // duration change), so nothing timing-related changed — the batch only
+      // rewrites data-track-index, which the renderer never reads (documented
+      // in core runtime/timeline.ts; track is a studio lane concept). The live
+      // DOM patch above + the gesture owner's optimistic store update fully
+      // cover the UI, so after the persist there is nothing to GSAP-shift and
+      // nothing for the preview to recompute: skip the fallback below entirely.
+      // Running it anyway is what made the mirrored z-order lane move blink —
+      // a zero-delta batch yields no scriptText, and finishGroupTimingGsapFallback
+      // used to full-reload the iframe when there was no script to soft-swap
+      // (it now rebinds the runtime timing in place, but a track-only batch
+      // needs NO preview sync at all, so the skip stays).
+      const trackOnly = changes.every((change) => change.start === change.element.start);
+
       const maxEnd = Math.max(...changes.map((change) => change.start + change.element.duration));
       // Snapshot the duration BEFORE the optimistic updates below so a failed
       // persist can roll the readout + live root back (see captureDurationRollback).
       const rollbackDuration = captureDurationRollback(previewIframeRef.current);
       // needsExtension gates the SDK path (setTiming can't grow the root duration),
       // so read the store BEFORE the readout sync below optimistically updates it.
+      // Track-only batches leave every clip end unchanged, so both this and the
+      // readout sync below are provable no-ops there — kept unconditional so the
+      // duration machinery stays on one code path.
       const needsExtension = extendRootDurationIfNeeded(maxEnd);
       // Optimistic duration readout: content-driven (grow AND shrink), read from
       // the just-patched live DOM. See syncPreviewContentDuration.
       syncPreviewContentDuration(previewIframeRef.current);
       const coalesceKey = options?.coalesceKey ?? moveCoalesceKey(changes);
+      const coalesceMs = options?.coalesceMs;
       return enqueueGroupOperation("Move timeline clips", async (projectId) => {
         await options?.beforeTiming;
         const handledBySdk = await trySdkBatchPersist({
@@ -243,6 +276,7 @@ export function useTimelineGroupEditing({
           needsExtension,
           label: "Move timeline clips",
           coalesceKey,
+          coalesceMs,
         });
         if (handledBySdk) return;
 
@@ -261,7 +295,12 @@ export function useTimelineGroupEditing({
               ),
           })),
           coalesceKey,
+          coalesceMs,
         );
+        // Track-only: no timing delta → no GSAP positions to shift and no
+        // reload (see the trackOnly doc above). Mixed batches (any start
+        // change) keep the full fallback below.
+        if (trackOnly) return;
         await finishGroupTimingGsapFallback({
           projectId,
           iframe: previewIframeRef.current,
@@ -284,6 +323,7 @@ export function useTimelineGroupEditing({
         // Failed persist: revert the optimistic duration readout + live root
         // alongside the gesture owner's store rollback.
         rollbackDuration();
+        showToast(getStudioSaveErrorMessage(error), "error");
         throw error;
       });
     },
@@ -295,6 +335,7 @@ export function useTimelineGroupEditing({
       recordEdit,
       reloadPreview,
       trySdkBatchPersist,
+      showToast,
     ],
   );
 
@@ -313,7 +354,7 @@ export function useTimelineGroupEditing({
               : "data-media-start";
           liveAttrs.push([liveAttr, formatTimelineAttributeNumber(change.playbackStart)]);
         }
-        patchIframeDomTiming(previewIframeRef.current, change.element, liveAttrs);
+        patchIframeDomTiming(previewIframeRef.current, change.element, liveAttrs, activeCompPath);
       }
 
       const maxEnd = Math.max(...changes.map((change) => change.start + change.duration));
@@ -327,6 +368,7 @@ export function useTimelineGroupEditing({
       // the just-patched live DOM. See syncPreviewContentDuration.
       syncPreviewContentDuration(previewIframeRef.current);
       const coalesceKey = options?.coalesceKey ?? resizeCoalesceKey(changes);
+      const coalesceMs = options?.coalesceMs;
       return enqueueGroupOperation("Resize timeline clips", async (projectId) => {
         await options?.beforeTiming;
         const handledBySdk = await trySdkBatchPersist({
@@ -339,6 +381,7 @@ export function useTimelineGroupEditing({
           needsExtension,
           label: "Resize timeline clips",
           coalesceKey,
+          coalesceMs,
         });
         if (handledBySdk) return;
 
@@ -355,6 +398,7 @@ export function useTimelineGroupEditing({
               }),
           })),
           coalesceKey,
+          coalesceMs,
         );
         await finishGroupTimingGsapFallback({
           projectId,
@@ -387,6 +431,7 @@ export function useTimelineGroupEditing({
         // Failed persist: revert the optimistic duration readout + live root
         // alongside the gesture owner's store rollback.
         rollbackDuration();
+        showToast(getStudioSaveErrorMessage(error), "error");
         throw error;
       });
     },
@@ -398,6 +443,7 @@ export function useTimelineGroupEditing({
       recordEdit,
       reloadPreview,
       trySdkBatchPersist,
+      showToast,
     ],
   );
 

package/src/hooks/useVariablesPersist.ts

@@ -1,6 +1,6 @@
 import { useCallback } from "react";
 import type { Composition } from "@hyperframes/sdk";
-import { persistSdkSerialize } from "../utils/sdkCutover";
+import { cutoverCommittedOrThrow, persistSdkCandidateMutation } from "../utils/sdkCutover";
 import type { UseSlideshowPersistParams } from "./useSlideshowPersist";
 
 /** Same single-writer dependency set the slideshow persist path uses. */
@@ -21,6 +21,7 @@ export function useVariablesPersist({
   recordEdit,
   reloadPreview,
   domEditSaveTimestampRef,
+  publishSdkSession,
 }: UseVariablesPersistParams): (
   label: string,
   mutate: (session: Composition) => void,
@@ -30,11 +31,8 @@ export function useVariablesPersist({
       if (!sdkSession) return false;
       const path = activeCompPath ?? "index.html";
       const originalContent = await readProjectFile(path);
-      mutate(sdkSession);
-      const after = sdkSession.serialize();
-      if (after === originalContent) return false;
-      await persistSdkSerialize(
-        after,
+      const result = await persistSdkCandidateMutation(
+        sdkSession,
         path,
         originalContent,
         {
@@ -43,10 +41,13 @@ export function useVariablesPersist({
           reloadPreview,
           domEditSaveTimestampRef,
           compositionPath: activeCompPath,
+          readProjectFile,
+          publishSession: publishSdkSession,
         },
+        mutate,
         { label },
       );
-      return true;
+      return cutoverCommittedOrThrow(result);
     },
     [
       sdkSession,
@@ -56,6 +57,7 @@ export function useVariablesPersist({
       recordEdit,
       reloadPreview,
       domEditSaveTimestampRef,
+      publishSdkSession,
     ],
   );
 }

package/src/icons/SystemIcons.tsx

@@ -21,6 +21,7 @@ import {
   ArrowClockwise,
   Gear,
   Scissors as PhScissors,
+  Link as PhLink,
 } from "@phosphor-icons/react";
 import type { Icon as PhosphorIcon, IconProps as PhosphorIconProps } from "@phosphor-icons/react";
 
@@ -69,3 +70,4 @@ export const Camera = makeIcon(PhCamera);
 export const RotateCw = makeIcon(ArrowClockwise);
 export const Settings = makeIcon(Gear);
 export const Scissors = makeIcon(PhScissors);
+export const Link = makeIcon(PhLink);