fix(studio): code-review and live-test fixes for the variables stack

packages/studio/src/hooks/usePreviewDocumentVersion.ts

@@ -0,0 +1,27 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+/**
+ * Version counter for the preview DOM. `refresh` bumps immediately and again
+ * at 80ms / 300ms so consumers re-scan after the iframe settles; pending
+ * timers are collapsed by each new refresh and cleared on unmount.
+ */
+export function usePreviewDocumentVersion(): [number, () => void] {
+  const [previewDocumentVersion, setPreviewDocumentVersion] = useState(0);
+  const refreshTimersRef = useRef<number[]>([]);
+  const refresh = useCallback(() => {
+    for (const id of refreshTimersRef.current) clearTimeout(id);
+    refreshTimersRef.current = [];
+    setPreviewDocumentVersion((v) => v + 1);
+    refreshTimersRef.current.push(
+      window.setTimeout(() => setPreviewDocumentVersion((v) => v + 1), 80),
+      window.setTimeout(() => setPreviewDocumentVersion((v) => v + 1), 300),
+    );
+  }, []);
+  useEffect(
+    () => () => {
+      for (const id of refreshTimersRef.current) clearTimeout(id);
+    },
+    [],
+  );
+  return [previewDocumentVersion, refresh];
+}

packages/studio/src/hooks/useStudioSdkSessions.ts

@@ -0,0 +1,37 @@
+import { useEffect, type MutableRefObject } from "react";
+import { useSdkSession } from "./useSdkSession";
+import { usePreviewVariablesStore } from "./previewVariablesStore";
+
+/**
+ * Open the studio's SDK session with master-view semantics.
+ *
+ * The master view has no explicit comp path, but the session must still model
+ * the project's main composition so schema-level panels (Variables, Slideshow)
+ * work there. Edit-flow consumers keep the legacy "no session on master view"
+ * gating via `editFlowSdkSession` so cutover behavior is unchanged.
+ *
+ * Also clears preview variable overrides whenever the composition or project
+ * changes — overrides are per-composition and must never leak into another
+ * composition's preview or render.
+ */
+export function useStudioSdkSessions(
+  projectId: string | null,
+  activeCompPath: string | null,
+  domEditSaveTimestampRef: MutableRefObject<number>,
+  masterCompPath: string | null,
+) {
+  // On the master view (no explicit comp) the schema panels target the project's
+  // resolved main composition — the first `.html` in the tree, not a hardcoded
+  // "index.html" that may not exist. `null` when the project has no composition
+  // yet, which correctly leaves the session (and the panels) empty.
+  const sdkHandle = useSdkSession(
+    projectId,
+    activeCompPath ?? masterCompPath,
+    domEditSaveTimestampRef,
+  );
+  const editFlowSdkSession = activeCompPath ? sdkHandle.session : null;
+  useEffect(() => {
+    usePreviewVariablesStore.getState().setValues(null);
+  }, [projectId, activeCompPath]);
+  return { sdkHandle, editFlowSdkSession };
+}