@hyperframes/studio 0.7.58 → 0.7.60

package/src/contexts/DesignPanelInputContext.test.tsx

@@ -0,0 +1,81 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const trackDesignInput = vi.fn();
+vi.mock("../utils/designInputTracking", () => ({
+  trackDesignInput: (...args: unknown[]) => trackDesignInput(...args),
+}));
+
+import { DesignPanelInputProvider, useTrackDesignInput } from "./DesignPanelInputContext";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+beforeEach(() => trackDesignInput.mockReset());
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function FireButton({ control, name }: { control: string; name: string }) {
+  const track = useTrackDesignInput();
+  return (
+    <button type="button" onClick={() => track(control, name)}>
+      fire
+    </button>
+  );
+}
+
+function renderAndClick(tree: React.ReactElement) {
+  const host = document.createElement("div");
+  document.body.appendChild(host);
+  const root = createRoot(host);
+  act(() => root.render(tree));
+  act(() => {
+    host.querySelector("button")!.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+  });
+  act(() => root.unmount());
+}
+
+describe("DesignPanelInputContext", () => {
+  it("binds the tracker to the enclosing ui + section", () => {
+    renderAndClick(
+      <DesignPanelInputProvider ui="flat" section="style">
+        <FireButton control="metric" name="Opacity" />
+      </DesignPanelInputProvider>,
+    );
+    expect(trackDesignInput).toHaveBeenCalledWith({
+      ui: "flat",
+      section: "style",
+      control: "metric",
+      name: "Opacity",
+    });
+  });
+
+  it("nested provider overrides section but inherits ui from parent", () => {
+    renderAndClick(
+      <DesignPanelInputProvider ui="flat" section="outer">
+        <DesignPanelInputProvider section="color-grading">
+          <FireButton control="slider" name="Exposure" />
+        </DesignPanelInputProvider>
+      </DesignPanelInputProvider>,
+    );
+    expect(trackDesignInput).toHaveBeenCalledWith({
+      ui: "flat",
+      section: "color-grading",
+      control: "slider",
+      name: "Exposure",
+    });
+  });
+
+  it("defaults to classic/unknown with no provider", () => {
+    renderAndClick(<FireButton control="button" name="Reset" />);
+    expect(trackDesignInput).toHaveBeenCalledWith({
+      ui: "classic",
+      section: "unknown",
+      control: "button",
+      name: "Reset",
+    });
+  });
+});

package/src/contexts/DesignPanelInputContext.tsx

@@ -0,0 +1,48 @@
+import { createContext, useCallback, useContext, useMemo, type ReactNode } from "react";
+import { trackDesignInput, type DesignInputUi } from "../utils/designInputTracking";
+
+// Carries which inspector UI and which section the currently-rendered design-panel
+// inputs belong to, so commit sites only pass { control, name } and never thread
+// section/ui through every call. Providers nest: PropertyPanel sets `ui` once at the
+// top; each Section sets `section` and inherits `ui` from the parent.
+
+interface DesignPanelInputContextValue {
+  ui: DesignInputUi;
+  section: string;
+}
+
+const DesignPanelInputContext = createContext<DesignPanelInputContextValue>({
+  ui: "classic",
+  section: "unknown",
+});
+
+export function DesignPanelInputProvider({
+  ui,
+  section,
+  children,
+}: {
+  ui?: DesignInputUi;
+  section?: string;
+  children: ReactNode;
+}) {
+  const parent = useContext(DesignPanelInputContext);
+  const value = useMemo(
+    () => ({ ui: ui ?? parent.ui, section: section ?? parent.section }),
+    [ui, section, parent.ui, parent.section],
+  );
+  return (
+    <DesignPanelInputContext.Provider value={value}>{children}</DesignPanelInputContext.Provider>
+  );
+}
+
+/**
+ * Returns a stable `track(control, name)` fn bound to the current UI + section.
+ * Call it from any input's commit handler.
+ */
+export function useTrackDesignInput(): (control: string, name: string) => void {
+  const { ui, section } = useContext(DesignPanelInputContext);
+  return useCallback(
+    (control: string, name: string) => trackDesignInput({ ui, section, control, name }),
+    [ui, section],
+  );
+}

package/src/contexts/DomEditContext.tsx

@@ -16,6 +16,7 @@ export interface DomEditActionsValue extends Pick<
   | "handleDomAttributeCommit"
   | "handleDomAttributeLiveCommit"
   | "handleDomHtmlAttributeCommit"
+  | "handleDomAttributesCommit"
   | "handleDomPathOffsetCommit"
   | "handleDomGroupPathOffsetCommit"
   | "handleDomZIndexReorderCommit"
@@ -138,6 +139,7 @@ export function DomEditProvider({
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomPathOffsetCommit,
     handleDomGroupPathOffsetCommit,
     handleDomZIndexReorderCommit,
@@ -224,6 +226,7 @@ export function DomEditProvider({
       handleDomAttributeCommit,
       handleDomAttributeLiveCommit,
       handleDomHtmlAttributeCommit,
+      handleDomAttributesCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
       handleDomZIndexReorderCommit,
@@ -291,6 +294,7 @@ export function DomEditProvider({
       handleDomAttributeCommit,
       handleDomAttributeLiveCommit,
       handleDomHtmlAttributeCommit,
+      handleDomAttributesCommit,
       handleDomPathOffsetCommit,
       handleDomGroupPathOffsetCommit,
       handleDomZIndexReorderCommit,

package/src/contexts/FileManagerContext.tsx

@@ -30,6 +30,7 @@ export function FileManagerProvider({
     readProjectFile,
     writeProjectFile,
     readOptionalProjectFile,
+    observeProjectFileVersion,
     updateEditingFileContent,
     revealSourceOffset,
     openSourceForSelection,
@@ -69,6 +70,7 @@ export function FileManagerProvider({
       readProjectFile,
       writeProjectFile,
       readOptionalProjectFile,
+      observeProjectFileVersion,
       updateEditingFileContent,
       revealSourceOffset,
       openSourceForSelection,
@@ -102,6 +104,7 @@ export function FileManagerProvider({
       readProjectFile,
       writeProjectFile,
       readOptionalProjectFile,
+      observeProjectFileVersion,
       updateEditingFileContent,
       revealSourceOffset,
       openSourceForSelection,

package/src/contexts/PanelLayoutContext.tsx

@@ -25,6 +25,7 @@ export function PanelLayoutProvider({
     setRightPanelTab,
     rightInspectorPanes,
     toggleRightInspectorPane,
+    setExclusiveRightInspectorPane,
     toggleLeftSidebar,
     handlePanelResizeStart,
     handlePanelResizeMove,
@@ -49,6 +50,7 @@ export function PanelLayoutProvider({
       setRightPanelTab,
       rightInspectorPanes,
       toggleRightInspectorPane,
+      setExclusiveRightInspectorPane,
       toggleLeftSidebar,
       handlePanelResizeStart,
       handlePanelResizeMove,
@@ -67,6 +69,7 @@ export function PanelLayoutProvider({
       setRightPanelTab,
       rightInspectorPanes,
       toggleRightInspectorPane,
+      setExclusiveRightInspectorPane,
       toggleLeftSidebar,
       handlePanelResizeStart,
       handlePanelResizeMove,

package/src/contexts/VariablePromoteContext.test.tsx

@@ -0,0 +1,67 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { describe, expect, it, vi } from "vitest";
+import type { Composition } from "@hyperframes/sdk";
+import type { DomEditSelection } from "../components/editor/domEditingTypes";
+import {
+  VariablePromoteProvider,
+  useVariablePromoteChannel,
+  type ChannelPromote,
+} from "./VariablePromoteContext";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("VariablePromoteProvider save failures", () => {
+  it("reports a rejected promote instead of leaving an unhandled promise", async () => {
+    const snapshot = {
+      attributes: { id: "box" },
+      inlineStyles: {},
+      text: "",
+      children: [],
+    };
+    const session = {
+      getElement: vi.fn().mockReturnValue(snapshot),
+      getVariableDeclarations: vi.fn().mockReturnValue([]),
+      on: vi.fn().mockReturnValue(() => {}),
+    } as unknown as Composition;
+    const selection = {
+      hfId: "hf-box",
+      tagName: "div",
+      label: "Box",
+      capabilities: { canEditStyles: true },
+      computedStyles: { color: "rgb(255, 0, 0)" },
+    } as unknown as DomEditSelection;
+    const error = new Error("write failed");
+    const persist = vi.fn().mockRejectedValue(error);
+    const onPersistError = vi.fn();
+    let channel: ChannelPromote | null = null;
+
+    function Consumer() {
+      channel = useVariablePromoteChannel({ kind: "style", prop: "color" });
+      return null;
+    }
+
+    const root = createRoot(document.createElement("div"));
+    act(() => {
+      root.render(
+        <VariablePromoteProvider
+          session={session}
+          selection={selection}
+          persist={persist}
+          onPersistError={onPersistError}
+        >
+          <Consumer />
+        </VariablePromoteProvider>,
+      );
+    });
+    act(() => channel?.promote());
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(persist).toHaveBeenCalledOnce();
+    expect(onPersistError).toHaveBeenCalledWith(error);
+    act(() => root.unmount());
+  });
+});

package/src/contexts/VariablePromoteContext.tsx

@@ -44,6 +44,7 @@ interface VariablePromoteContextValue {
   actions: BindAction[];
   declarations: CompositionVariable[];
   persist: (label: string, mutate: (session: Composition) => void) => Promise<boolean>;
+  onPersistError: (error: unknown) => void;
 }
 
 const VariablePromoteContext = createContext<VariablePromoteContextValue | null>(null);
@@ -58,11 +59,13 @@ export function VariablePromoteProvider({
   session,
   selection,
   persist,
+  onPersistError,
   children,
 }: {
   session: Composition | null;
   selection: DomEditSelection | null;
   persist: (label: string, mutate: (session: Composition) => void) => Promise<boolean>;
+  onPersistError: (error: unknown) => void;
   children: React.ReactNode;
 }) {
   // Re-derive actions/bindings after each persisted schema edit.
@@ -85,8 +88,8 @@ export function VariablePromoteProvider({
   }, [session, revision]);
 
   const value = useMemo<VariablePromoteContextValue>(
-    () => ({ session, selection, actions, declarations, persist }),
-    [session, selection, actions, declarations, persist],
+    () => ({ session, selection, actions, declarations, persist, onPersistError }),
+    [session, selection, actions, declarations, persist, onPersistError],
   );
 
   return (
@@ -105,7 +108,7 @@ export function useVariablePromoteChannel(channel: PromoteChannel): ChannelPromo
 
   return useMemo(() => {
     if (!ctx || !ctx.session || !ctx.selection?.hfId) return null;
-    const { session, selection, actions, declarations, persist } = ctx;
+    const { session, selection, actions, declarations, persist, onPersistError } = ctx;
     const hfId = selection.hfId!;
     const action = matchAction(actions, channel);
     const boundId = readBinding(session, hfId, channel);
@@ -125,12 +128,14 @@ export function useVariablePromoteChannel(channel: PromoteChannel): ChannelPromo
         const id = uniqueId(action.suggestedId, declarations);
         void persist(`Bind ${action.label.toLowerCase()} to variable "${id}"`, (s) =>
           applyBind(s, hfId, action, id),
-        );
+        ).catch(onPersistError);
       },
       setDefault: (raw: string) => {
         if (!boundId || !declaration) return;
         const next = declaration.type === "color" ? rgbToHex(raw) : raw;
-        void persist(`Set default for "${boundId}"`, (s) => s.setVariableValue(boundId, next));
+        void persist(`Set default for "${boundId}"`, (s) =>
+          s.setVariableValue(boundId, next),
+        ).catch(onPersistError);
       },
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/hooks/domEditCommitRunner.ts

@@ -7,6 +7,15 @@ interface DomEditCommitRunnerConfig {
   onError: (error: unknown) => void;
   shouldResync: () => boolean;
   resync: () => void | Promise<void>;
+  /**
+   * Reports success/failure without changing this function's own resolve-
+   * always contract — `persist` failures are handled here (revert + onError)
+   * and never rethrown, so callers awaiting `runDomEditCommit` can't observe
+   * failure via rejection. A caller that needs to react to a specific
+   * commit's outcome (e.g. reverting its OWN optimistic state) can pass this
+   * instead of relying on a rejection that will never come.
+   */
+  onSettled?: (ok: boolean) => void;
 }
 
 interface CommitVersionRef {
@@ -34,11 +43,13 @@ export async function runDomEditCommit(config: DomEditCommitRunnerConfig): Promi
 
   try {
     await config.persist();
+    config.onSettled?.(true);
   } catch (error) {
     if (config.shouldRevert(error)) {
       config.revert();
     }
     config.onError(error);
+    config.onSettled?.(false);
   }
 
   if (!config.shouldResync()) return;

package/src/hooks/gsapScriptCommitTypes.ts

@@ -2,6 +2,7 @@ import type { ParsedGsap } from "@hyperframes/core/gsap-parser";
 import type { Composition } from "@hyperframes/sdk";
 import type { DomEditSelection } from "../components/editor/domEditingTypes";
 import type { EditHistoryKind } from "../utils/editHistory";
+import type { PublishSdkSession } from "../utils/sdkCutover";
 import type { RuntimeTweenChange } from "./gsapRuntimePatch";
 
 export interface MutationResult {
@@ -22,10 +23,9 @@ export interface CommitMutationOptions {
   beforeReload?: () => void;
   /**
    * Serialize this commit against others sharing the same key. Used to chain
-   * per-animationId GSAP meta updates so overlapping read-modify-write POSTs to
-   * one file can't interleave — which would pair the shadow fidelity diff with a
-   * stale server result and report false ease mismatches. Commits without a key
-   * (and under distinct keys) run concurrently as before.
+   * per-animationId GSAP meta updates. Every commit independently takes the
+   * project/file mutation lock, so this key only adds ordering and can never
+   * bypass whole-file serialization.
    */
   serializeKey?: string;
   /**
@@ -87,6 +87,8 @@ export interface GsapScriptCommitsParams {
   showToast: (message: string, tone?: "error" | "info") => void;
   /** Stage 7 §3.5: SDK session for routing GSAP tween ops through addGsapTween/setGsapTween/removeGsapTween. */
   sdkSession?: Composition | null;
+  /** Publish a fully persisted candidate SDK session. */
+  publishSdkSession?: PublishSdkSession;
   writeProjectFile?: (path: string, content: string) => Promise<void>;
   /** Resync the in-memory SDK session after a server-authoritative write. */
   forceReloadSdkSession?: () => void;

package/src/hooks/timelineEditingHelpers.ts

@@ -262,7 +262,7 @@ export interface PersistTimelineEditInput {
   activeCompPath: string | null;
   label: string;
   buildPatches: (original: string, target: PatchTarget) => string;
-  writeProjectFile: (path: string, content: string) => Promise<void>;
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
   recordEdit: (input: RecordEditInput) => Promise<void>;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   pendingTimelineEditPathRef: React.MutableRefObject<Set<string>>;
@@ -308,7 +308,7 @@ export interface PersistTimelineBatchEditInput {
   activeCompPath: string | null;
   label: string;
   changes: PersistTimelineBatchChange[];
-  writeProjectFile: (path: string, content: string) => Promise<void>;
+  writeProjectFile: (path: string, content: string, expectedContent?: string) => Promise<void>;
   recordEdit: (input: RecordEditInput) => Promise<void>;
   domEditSaveTimestampRef: React.MutableRefObject<number>;
   pendingTimelineEditPathRef: React.MutableRefObject<Set<string>>;

package/src/hooks/timelineTrackVisibility.test.ts

@@ -201,4 +201,56 @@ describe("toggleTimelineElementHidden", () => {
       usePlayerStore.getState().elements.find((el) => el.key === "index.html:#track-mate")?.hidden,
     ).toBeUndefined();
   });
+
+  it("hides several elements in ONE atomic write when given an array of keys", async () => {
+    const files = new Map([
+      [
+        "index.html",
+        `<div id="hero" data-start="0" data-duration="2"></div>
+<div id="caption" data-start="1" data-duration="2"></div>
+<div id="badge" data-start="2" data-duration="2"></div>`,
+      ],
+    ]);
+    stubProjectFiles(files);
+
+    const hero = element({ id: "hero", key: "index.html:#hero", domId: "hero", track: 0 });
+    const caption = element({
+      id: "caption",
+      key: "index.html:#caption",
+      domId: "caption",
+      track: 1,
+    });
+    const badge = element({ id: "badge", key: "index.html:#badge", domId: "badge", track: 2 });
+
+    const writes: Array<{ path: string; content: string }> = [];
+    const recordEdit = vi.fn();
+
+    await toggleTimelineElementHidden({
+      projectId: "project-1",
+      activeCompPath: "index.html",
+      timelineElements: [hero, caption, badge],
+      elementKey: ["index.html:#hero", "index.html:#caption"],
+      hidden: true,
+      previewIframe: null,
+      writeProjectFile: async (path, content) => {
+        writes.push({ path, content });
+      },
+      recordEdit,
+      domEditSaveTimestampRef: { current: 0 },
+      pendingTimelineEditPathRef: { current: new Set() },
+    });
+
+    // One write carrying BOTH hides — per-element writes would clobber each
+    // other (each starts from the original file content).
+    expect(writes).toHaveLength(1);
+    expect(writes[0]?.content).toContain(
+      'id="hero" data-start="0" data-duration="2" data-hidden=""',
+    );
+    expect(writes[0]?.content).toContain(
+      'id="caption" data-start="1" data-duration="2" data-hidden=""',
+    );
+    expect(writes[0]?.content).toContain('id="badge" data-start="2" data-duration="2"></div>');
+    expect(recordEdit).toHaveBeenCalledTimes(1);
+    expect(recordEdit.mock.calls[0]?.[0]?.label).toBe("Hide 2 elements");
+  });
 });

package/src/hooks/timelineTrackVisibility.ts

@@ -33,7 +33,8 @@ interface ToggleTimelineTrackHiddenInput {
 }
 
 interface ToggleTimelineElementHiddenInput extends Omit<ToggleTimelineTrackHiddenInput, "track"> {
-  elementKey: string;
+  /** One timeline key, or several to hide/show in a single atomic file write. */
+  elementKey: string | readonly string[];
 }
 
 interface SetElementsHiddenInput {
@@ -62,7 +63,7 @@ interface UseTimelineTrackVisibilityEditingInput extends Omit<
 
 interface UseTimelineElementVisibilityEditingInput extends Omit<
   ToggleTimelineElementHiddenInput,
-  "projectId" | "elementKey" | "hidden" | "previewIframe"
+  "projectId" | "elementKey" | "hidden" | "previewIframe" | "timelineElements"
 > {
   projectIdRef: ReadonlyRef<string | null>;
   previewIframeRef: ReadonlyRef<HTMLIFrameElement | null>;
@@ -233,13 +234,21 @@ export async function toggleTimelineElementHidden({
   domEditSaveTimestampRef,
   pendingTimelineEditPathRef,
 }: ToggleTimelineElementHiddenInput): Promise<string[]> {
-  const element = timelineElements.find((item) => (item.key ?? item.id) === elementKey);
+  const keys = new Set(typeof elementKey === "string" ? [elementKey] : elementKey);
+  const elements = timelineElements.filter((item) => keys.has(item.key ?? item.id));
   return setElementsHidden({
     projectId,
     activeCompPath,
-    elements: element ? [element] : [],
+    elements,
     hidden,
-    label: hidden ? "Hide element" : "Show element",
+    label:
+      elements.length > 1
+        ? hidden
+          ? `Hide ${elements.length} elements`
+          : `Show ${elements.length} elements`
+        : hidden
+          ? "Hide element"
+          : "Show element",
     previewIframe,
     writeProjectFile,
     recordEdit,
@@ -313,7 +322,6 @@ export function useTimelineTrackVisibilityEditing({
 export function useTimelineElementVisibilityEditing({
   projectIdRef,
   activeCompPath,
-  timelineElements,
   showToast,
   writeProjectFile,
   recordEdit,
@@ -323,11 +331,20 @@ export function useTimelineElementVisibilityEditing({
   isRecordingRef,
   forceReloadSdkSession,
 }: UseTimelineElementVisibilityEditingInput): (
-  elementKey: string,
+  elementKey: string | readonly string[],
   hidden: boolean,
 ) => Promise<void> {
+  // Resolve against the EXPANDED rows, not the raw store list — a nested
+  // sub-composition child has no entry of its own in the raw list (only its
+  // host does), so an elementKey for such a child (the
+  // `sourceFile#domId`-shaped virtual key `resolveTimelineIdForSelection`
+  // falls back to) would never match anything there and Hide All would
+  // silently no-op for it. The expanded list synthesizes a real, patchable
+  // TimelineElement (with matching key/domId/sourceFile) for each visible
+  // child whenever its host is currently expanded.
+  const expandedElements = useExpandedTimelineElements();
   return useCallback(
-    async (elementKey: string, hidden: boolean) => {
+    async (elementKey: string | readonly string[], hidden: boolean) => {
       if (isRecordingRef?.current) {
         showToast("Cannot edit timeline while recording", "error");
         return;
@@ -338,7 +355,7 @@ export function useTimelineElementVisibilityEditing({
         await toggleTimelineElementHidden({
           projectId: pid,
           activeCompPath,
-          timelineElements,
+          timelineElements: expandedElements,
           elementKey,
           hidden,
           previewIframe: previewIframeRef.current,
@@ -357,7 +374,7 @@ export function useTimelineElementVisibilityEditing({
     },
     [
       activeCompPath,
-      timelineElements,
+      expandedElements,
       previewIframeRef,
       writeProjectFile,
       recordEdit,

package/src/hooks/useAppHotkeys.ts

@@ -9,6 +9,7 @@ import { shouldIgnoreHistoryShortcut } from "../utils/studioHelpers";
 import { canSplitElement } from "../utils/timelineElementSplit";
 import { STUDIO_RAZOR_TOOL_ENABLED } from "../components/editor/manualEditingAvailability";
 import { trackStudioEvent } from "../utils/studioTelemetry";
+import { serializeStudioFileMutations } from "../utils/studioFileMutationCoordinator";
 
 function iframeContentWindow(iframe: HTMLIFrameElement | null): Window | null {
   try {
@@ -87,6 +88,7 @@ interface HistoryResult {
 interface HistoryFileCallbacks {
   readFile: (path: string) => Promise<string>;
   writeFile: (path: string, content: string) => Promise<void>;
+  serialize?: <T>(paths: readonly string[], task: () => Promise<T>) => Promise<T>;
 }
 interface EditHistoryHandle {
   undo: (cb: HistoryFileCallbacks) => Promise<HistoryResult>;
@@ -367,6 +369,11 @@ export function useAppHotkeys({
     },
     [domEditSaveTimestampRef, writeProjectFile],
   );
+  const serializeHistoryFiles = useCallback(
+    <T>(paths: readonly string[], task: () => Promise<T>) =>
+      serializeStudioFileMutations(writeProjectFile, paths, task),
+    [writeProjectFile],
+  );
 
   const applyHistory = useCallback(
     async (direction: "undo" | "redo") => {
@@ -377,6 +384,7 @@ export function useAppHotkeys({
       const result = await editHistory[direction]({
         readFile: readHistoryFile,
         writeFile: writeHistoryFile,
+        serialize: serializeHistoryFiles,
       });
       if (!result.ok && result.reason === "content-mismatch") {
         showToast(
@@ -406,6 +414,7 @@ export function useAppHotkeys({
       syncHistoryPreviewAfterApply,
       waitForPendingDomEditSaves,
       writeHistoryFile,
+      serializeHistoryFiles,
       onAfterUndoRedo,
       activeCompPath,
       forceReloadSdkSession,