@hyperframes/studio 0.6.88 → 0.6.90

package/src/hooks/timelineEditingHelpers.ts

@@ -0,0 +1,148 @@
+import type { TimelineElement } from "../player";
+import { applyPatchByTarget, readAttributeByTarget } from "../utils/sourcePatcher";
+import { formatTimelineAttributeNumber } from "../player/components/timelineEditing";
+import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
+import type { EditHistoryKind } from "../utils/editHistory";
+
+// ── Types ──
+
+interface RecordEditInput {
+  label: string;
+  kind: EditHistoryKind;
+  coalesceKey?: string;
+  files: Record<string, { before: string; after: string }>;
+}
+
+export function buildPatchTarget(element: {
+  domId?: string;
+  hfId?: string;
+  selector?: string;
+  selectorIndex?: number;
+}) {
+  if (element.domId) {
+    return {
+      id: element.domId,
+      hfId: element.hfId,
+      selector: element.selector,
+      selectorIndex: element.selectorIndex,
+    };
+  }
+  if (element.hfId) {
+    return { hfId: element.hfId, selector: element.selector, selectorIndex: element.selectorIndex };
+  }
+  if (element.selector) {
+    return { selector: element.selector, selectorIndex: element.selectorIndex };
+  }
+  return null;
+}
+
+export type PatchTarget = NonNullable<ReturnType<typeof buildPatchTarget>>;
+
+// The runtime re-reads data-start/data-duration from the DOM on each sync tick
+// (packages/core/src/runtime/init.ts:1324-1368), so attribute mutations here are
+// picked up automatically on the next frame without a rebind call.
+export function patchIframeDomTiming(
+  iframe: HTMLIFrameElement | null,
+  element: TimelineElement,
+  attrs: Array<[string, string]>,
+): void {
+  try {
+    const doc = iframe?.contentDocument;
+    if (!doc) return;
+    const el = element.domId
+      ? doc.getElementById(element.domId)
+      : element.selector
+        ? (doc.querySelectorAll(element.selector)[element.selectorIndex ?? 0] ?? null)
+        : null;
+    if (!el) return;
+    for (const [name, value] of attrs) el.setAttribute(name, value);
+  } catch {
+    // Cross-origin or mid-navigation — file save is enqueued; iframe patch is best-effort.
+  }
+}
+
+export function resolveResizePlaybackStart(
+  original: string,
+  target: PatchTarget,
+  element: TimelineElement,
+  updates: Pick<TimelineElement, "start" | "playbackStart">,
+): { attrName: string; value: number } | null {
+  if (updates.playbackStart != null) {
+    const attrName =
+      element.playbackStartAttr === "playback-start" ? "playback-start" : "media-start";
+    return { attrName, value: updates.playbackStart };
+  }
+  const trimDelta = updates.start - element.start;
+  if (trimDelta === 0) return null;
+  const raw =
+    readAttributeByTarget(original, target, "playback-start") ??
+    readAttributeByTarget(original, target, "media-start");
+  const current = raw != null ? parseFloat(raw) : undefined;
+  if (current == null || !Number.isFinite(current)) return null;
+  const attrName =
+    element.playbackStartAttr === "playback-start" ? "playback-start" : "media-start";
+  return {
+    attrName,
+    value: Math.max(0, current + trimDelta * Math.max(element.playbackRate ?? 1, 0.1)),
+  };
+}
+
+export interface PersistTimelineEditInput {
+  projectId: string;
+  element: TimelineElement;
+  activeCompPath: string | null;
+  label: string;
+  buildPatches: (original: string, target: PatchTarget) => string;
+  writeProjectFile: (path: string, content: string) => Promise<void>;
+  recordEdit: (input: RecordEditInput) => Promise<void>;
+  domEditSaveTimestampRef: React.MutableRefObject<number>;
+  pendingTimelineEditPathRef: React.MutableRefObject<Set<string>>;
+}
+
+export async function persistTimelineEdit(input: PersistTimelineEditInput): Promise<void> {
+  const targetPath = input.element.sourceFile || input.activeCompPath || "index.html";
+  const originalContent = await readFileContent(input.projectId, targetPath);
+
+  const patchTarget = buildPatchTarget(input.element);
+  if (!patchTarget) {
+    throw new Error(`Timeline element ${input.element.id} is missing a patchable target`);
+  }
+
+  const patchedContent = input.buildPatches(originalContent, patchTarget);
+  if (patchedContent === originalContent) {
+    throw new Error(`Unable to patch timeline element ${input.element.id} in ${targetPath}`);
+  }
+
+  input.pendingTimelineEditPathRef.current.add(targetPath);
+  input.domEditSaveTimestampRef.current = Date.now();
+  await saveProjectFilesWithHistory({
+    projectId: input.projectId,
+    label: input.label,
+    kind: "timeline",
+    files: { [targetPath]: patchedContent },
+    readFile: async () => originalContent,
+    writeFile: input.writeProjectFile,
+    recordEdit: input.recordEdit,
+  });
+  input.domEditSaveTimestampRef.current = Date.now();
+}
+
+export async function readFileContent(projectId: string, targetPath: string): Promise<string> {
+  if (targetPath.includes("\0") || targetPath.includes("..")) {
+    throw new Error(`Unsafe path: ${targetPath}`);
+  }
+  const response = await fetch(
+    `/api/projects/${projectId}/files/${encodeURIComponent(targetPath)}`,
+  );
+  if (!response.ok) {
+    throw new Error(`Failed to read ${targetPath}`);
+  }
+  const data = (await response.json()) as { content?: string };
+  if (typeof data.content !== "string") {
+    throw new Error(`Missing file contents for ${targetPath}`);
+  }
+  return data.content;
+}
+
+// Re-export applyPatchByTarget for use in the hook (avoids double import in callers)
+export { applyPatchByTarget, formatTimelineAttributeNumber };

package/src/hooks/useAnimatedPropertyCommit.ts

@@ -36,15 +36,46 @@ interface CommitAnimatedPropertyDeps {
   bumpGsapCache: () => void;
 }
 
-function computePercentage(selection: DomEditSelection): number {
+function computePercentage(selection: DomEditSelection, anim?: GsapAnimation): number {
+  const currentTime = usePlayerStore.getState().currentTime;
+  const tweenPos = typeof anim?.position === "number" ? anim.position : 0;
+  const tweenDur = anim?.duration ?? 0;
+  if (tweenDur > 0) {
+    return Math.max(
+      0,
+      Math.min(100, Math.round(((currentTime - tweenPos) / tweenDur) * 1000) / 10),
+    );
+  }
   const elStart = Number.parseFloat(selection.dataAttributes?.start ?? "0") || 0;
   const elDuration = Number.parseFloat(selection.dataAttributes?.duration ?? "1") || 1;
-  const currentTime = usePlayerStore.getState().currentTime;
   return elDuration > 0
     ? Math.max(0, Math.min(100, Math.round(((currentTime - elStart) / elDuration) * 1000) / 10))
     : 0;
 }
 
+function pickBestAnimation(
+  animations: GsapAnimation[],
+  selector: string | null,
+): GsapAnimation | undefined {
+  if (animations.length <= 1) return animations[0];
+  const currentTime = usePlayerStore.getState().currentTime;
+
+  const scored = animations.map((a) => {
+    let score = 0;
+    if (a.keyframes) score += 10;
+    // Prefer single-element selectors over comma-separated groups
+    if (selector && a.targetSelector === selector) score += 5;
+    else if (a.targetSelector.includes(",")) score -= 3;
+    // Prefer tweens active at the current time
+    const pos = typeof a.position === "number" ? a.position : 0;
+    const dur = a.duration ?? 0;
+    if (currentTime >= pos - 0.05 && currentTime <= pos + dur + 0.05) score += 8;
+    return { anim: a, score };
+  });
+  scored.sort((a, b) => b.score - a.score);
+  return scored[0]?.anim;
+}
+
 function selectorFor(selection: DomEditSelection): string | null {
   if (selection.id) return `#${selection.id}`;
   if (selection.selector) return selection.selector;
@@ -70,10 +101,8 @@ export function useAnimatedPropertyCommit(deps: CommitAnimatedPropertyDeps) {
 
       const iframe = previewIframeRef.current;
       const selector = selectorFor(selection);
-      const pct = computePercentage(selection);
 
-      let anim: GsapAnimation | undefined =
-        selectedGsapAnimations.find((a) => a.keyframes) ?? selectedGsapAnimations[0];
+      let anim: GsapAnimation | undefined = pickBestAnimation(selectedGsapAnimations, selector);
 
       // Case 3: No animation — create one first
       if (!anim) {
@@ -97,6 +126,8 @@ export function useAnimatedPropertyCommit(deps: CommitAnimatedPropertyDeps) {
         );
       }
 
+      const pct = computePercentage(selection, anim);
+
       // Read all currently animated properties from runtime for backfill
       const runtimeProps = selector ? readAllAnimatedProperties(iframe, selector, anim) : {};
 
@@ -112,15 +143,26 @@ export function useAnimatedPropertyCommit(deps: CommitAnimatedPropertyDeps) {
       }
       backfillDefaults[property] = typeof value === "number" ? value : value;
 
+      const existingKf = anim.keyframes?.keyframes.some(
+        (kf) => Math.abs(kf.percentage - pct) < 0.05,
+      );
+
       await gsapCommitMutation(
         selection,
-        {
-          type: "add-keyframe",
-          animationId: anim.id,
-          percentage: pct,
-          properties,
-          backfillDefaults,
-        },
+        existingKf
+          ? {
+              type: "update-keyframe",
+              animationId: anim.id,
+              percentage: pct,
+              properties,
+            }
+          : {
+              type: "add-keyframe",
+              animationId: anim.id,
+              percentage: pct,
+              properties,
+              backfillDefaults,
+            },
         { label: `Edit ${property} (keyframe ${pct}%)`, softReload: true },
       );
     },

package/src/hooks/useBlockHandlers.ts

@@ -0,0 +1,150 @@
+/**
+ * Block drop/add handlers for the Studio.
+ * Extracted from App.tsx to keep file sizes under the 600-line limit.
+ */
+import { useCallback, useMemo, useState } from "react";
+import type { TimelineElement } from "../player";
+import { usePlayerStore } from "../player";
+import { addBlockToProject } from "../utils/blockInstaller";
+import type { BlockParam } from "@hyperframes/core/registry";
+import type { EditHistoryKind } from "../utils/editHistory";
+import type { RightPanelTab } from "../utils/studioHelpers";
+
+interface BlockCtxDeps {
+  activeCompPath: string | null;
+  timelineElements: TimelineElement[];
+  readProjectFile: (path: string) => Promise<string>;
+  writeProjectFile: (path: string, content: string) => Promise<void>;
+  recordEdit: (entry: {
+    label: string;
+    kind: EditHistoryKind;
+    coalesceKey?: string;
+    files: Record<string, { before: string; after: string }>;
+  }) => Promise<void>;
+  refreshFileTree: () => Promise<void>;
+  reloadPreview: () => void;
+  showToast: (message: string, tone?: "error" | "info") => void;
+}
+
+interface UseBlockHandlersParams {
+  projectId: string | null;
+  blockCtxDeps: BlockCtxDeps;
+  previewIframeRef: React.RefObject<HTMLIFrameElement | null>;
+  setRightCollapsed: (collapsed: boolean) => void;
+  setRightPanelTab: (tab: RightPanelTab) => void;
+}
+
+export interface UseBlockHandlersResult {
+  activeBlockParams: {
+    blockName: string;
+    blockTitle: string;
+    params: BlockParam[];
+    compositionPath: string;
+  } | null;
+  setActiveBlockParams: React.Dispatch<
+    React.SetStateAction<UseBlockHandlersResult["activeBlockParams"]>
+  >;
+  handleAddBlock: (blockName: string) => void;
+  handleTimelineBlockDrop: (blockName: string, placement: { start: number; track: number }) => void;
+  handlePreviewBlockDrop: (blockName: string, position: { left: number; top: number }) => void;
+}
+
+export function useBlockHandlers({
+  projectId,
+  blockCtxDeps,
+  previewIframeRef,
+  setRightCollapsed,
+  setRightPanelTab,
+}: UseBlockHandlersParams): UseBlockHandlersResult {
+  const [activeBlockParams, setActiveBlockParams] =
+    useState<UseBlockHandlersResult["activeBlockParams"]>(null);
+
+  const blockCtx = useMemo(
+    () => ({
+      activeCompPath: blockCtxDeps.activeCompPath,
+      timelineElements: blockCtxDeps.timelineElements,
+      readProjectFile: blockCtxDeps.readProjectFile,
+      writeProjectFile: blockCtxDeps.writeProjectFile,
+      recordEdit: blockCtxDeps.recordEdit,
+      refreshFileTree: blockCtxDeps.refreshFileTree,
+      reloadPreview: blockCtxDeps.reloadPreview,
+      showToast: blockCtxDeps.showToast,
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      blockCtxDeps.activeCompPath,
+      blockCtxDeps.timelineElements,
+      blockCtxDeps.readProjectFile,
+      blockCtxDeps.writeProjectFile,
+      blockCtxDeps.recordEdit,
+      blockCtxDeps.refreshFileTree,
+      blockCtxDeps.reloadPreview,
+      blockCtxDeps.showToast,
+    ],
+  );
+
+  const handleAddBlock = useCallback(
+    (blockName: string) => {
+      if (!projectId) return;
+      void (async () => {
+        const result = await addBlockToProject({
+          projectId,
+          blockName,
+          ...blockCtx,
+          previewIframe: previewIframeRef.current,
+          currentTime: usePlayerStore.getState().currentTime,
+        });
+        const params = result?.block.type === "hyperframes:block" ? result.block.params : undefined;
+        if (params?.length) {
+          setActiveBlockParams({
+            blockName: result!.block.name,
+            blockTitle: result!.block.title,
+            params,
+            compositionPath: result!.compositionPath,
+          });
+          setRightCollapsed(false);
+          setRightPanelTab("block-params");
+        }
+      })();
+    },
+    [projectId, blockCtx, previewIframeRef, setRightCollapsed, setRightPanelTab],
+  );
+
+  const handleTimelineBlockDrop = useCallback(
+    (blockName: string, placement: { start: number; track: number }) => {
+      if (!projectId) return;
+      void addBlockToProject({
+        projectId,
+        blockName,
+        placement,
+        ...blockCtx,
+        previewIframe: previewIframeRef.current,
+        currentTime: usePlayerStore.getState().currentTime,
+      });
+    },
+    [projectId, blockCtx, previewIframeRef],
+  );
+
+  const handlePreviewBlockDrop = useCallback(
+    (blockName: string, position: { left: number; top: number }) => {
+      if (!projectId) return;
+      void addBlockToProject({
+        projectId,
+        blockName,
+        visualPosition: position,
+        ...blockCtx,
+        previewIframe: previewIframeRef.current,
+        currentTime: usePlayerStore.getState().currentTime,
+      });
+    },
+    [projectId, blockCtx, previewIframeRef],
+  );
+
+  return {
+    activeBlockParams,
+    setActiveBlockParams,
+    handleAddBlock,
+    handleTimelineBlockDrop,
+    handlePreviewBlockDrop,
+  };
+}

package/src/hooks/useClipboard.ts

@@ -8,6 +8,7 @@ import { insertTimelineAssetIntoSource } from "../utils/timelineAssetDrop";
 import { saveProjectFilesWithHistory } from "../utils/studioFileHistory";
 import type { EditHistoryKind } from "../utils/editHistory";
 import { formatTimelineAttributeNumber } from "../player/components/timelineEditing";
+import { readFileContent } from "./timelineEditingHelpers";
 
 interface RecordEditInput {
   label: string;
@@ -30,16 +31,6 @@ interface UseClipboardOptions {
   previewIframeRef: React.MutableRefObject<HTMLIFrameElement | null>;
 }
 
-async function readFileContent(projectId: string, targetPath: string): Promise<string> {
-  const response = await fetch(
-    `/api/projects/${projectId}/files/${encodeURIComponent(targetPath)}`,
-  );
-  if (!response.ok) throw new Error(`Failed to read ${targetPath}`);
-  const data = (await response.json()) as { content?: string };
-  if (typeof data.content !== "string") throw new Error(`Missing file contents for ${targetPath}`);
-  return data.content;
-}
-
 function getElementOuterHtml(
   iframeRef: React.MutableRefObject<HTMLIFrameElement | null>,
   selection: DomEditSelection,

package/src/hooks/useDomEditPreviewSync.ts

@@ -0,0 +1,126 @@
+/**
+ * Side effects for syncing the DOM edit selection with the preview iframe on
+ * load/refresh, and for auto-revealing source in the Code tab.
+ * Extracted from useDomEditSession to keep file sizes under the 600-line limit.
+ */
+import { useEffect, useRef } from "react";
+import { STUDIO_INSPECTOR_PANELS_ENABLED } from "../components/editor/manualEditingAvailability";
+import { findElementForSelection, type DomEditSelection } from "../components/editor/domEditing";
+import { reapplyPositionEditsAfterSeek } from "../components/editor/manualEdits";
+import type { SidebarTab } from "../components/sidebar/LeftSidebar";
+import type { PatchTarget } from "../utils/sourcePatcher";
+
+interface UseDomEditPreviewSyncParams {
+  previewIframe: HTMLIFrameElement | null;
+  activeCompPath: string | null;
+  captionEditMode: boolean;
+  domEditSelectionRef: React.MutableRefObject<DomEditSelection | null>;
+  domEditSelection: DomEditSelection | null;
+  applyDomSelection: (
+    selection: DomEditSelection | null,
+    options?: { revealPanel?: boolean; preserveGroup?: boolean },
+  ) => void;
+  buildDomSelectionFromTarget: (element: HTMLElement) => Promise<DomEditSelection | null>;
+  refreshPreviewDocumentVersion: () => void;
+  syncPreviewHistoryHotkey: (iframe: HTMLIFrameElement | null) => void;
+  applyStudioManualEditsToPreviewRef: React.MutableRefObject<
+    (iframe: HTMLIFrameElement) => Promise<void>
+  >;
+  openSourceForSelection?: (sourceFile: string, target: PatchTarget) => void;
+  getSidebarTab?: () => SidebarTab;
+}
+
+export function useDomEditPreviewSync({
+  previewIframe,
+  activeCompPath,
+  captionEditMode,
+  domEditSelectionRef,
+  domEditSelection,
+  applyDomSelection,
+  buildDomSelectionFromTarget,
+  refreshPreviewDocumentVersion,
+  syncPreviewHistoryHotkey,
+  applyStudioManualEditsToPreviewRef,
+  openSourceForSelection,
+  getSidebarTab,
+}: UseDomEditPreviewSyncParams): void {
+  // Sync selection from preview document on load / refresh
+  // eslint-disable-next-line no-restricted-syntax
+  useEffect(() => {
+    if (!previewIframe) return;
+
+    // fallow-ignore-next-line complexity
+    const syncSelectionFromDocument = async () => {
+      if (!STUDIO_INSPECTOR_PANELS_ENABLED || captionEditMode) return;
+      const currentSelection = domEditSelectionRef.current;
+      if (!currentSelection) return;
+      let doc: Document | null = null;
+      try {
+        doc = previewIframe.contentDocument;
+      } catch {
+        return;
+      }
+      if (!doc) return;
+
+      reapplyPositionEditsAfterSeek(doc);
+
+      const nextElement = findElementForSelection(doc, currentSelection, activeCompPath);
+      if (!nextElement) {
+        applyDomSelection(null, { revealPanel: false });
+        return;
+      }
+
+      const nextSelection = await buildDomSelectionFromTarget(nextElement);
+      if (nextSelection) {
+        applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
+      }
+    };
+
+    syncPreviewHistoryHotkey(previewIframe);
+    void applyStudioManualEditsToPreviewRef.current(previewIframe);
+    void syncSelectionFromDocument();
+    refreshPreviewDocumentVersion();
+
+    const handleLoad = () => {
+      syncPreviewHistoryHotkey(previewIframe);
+      void applyStudioManualEditsToPreviewRef.current(previewIframe);
+      void syncSelectionFromDocument();
+      refreshPreviewDocumentVersion();
+    };
+
+    previewIframe.addEventListener("load", handleLoad);
+    return () => {
+      previewIframe.removeEventListener("load", handleLoad);
+    };
+  }, [
+    activeCompPath,
+    applyDomSelection,
+    buildDomSelectionFromTarget,
+    captionEditMode,
+    domEditSelectionRef,
+    previewIframe,
+    refreshPreviewDocumentVersion,
+    syncPreviewHistoryHotkey,
+    applyStudioManualEditsToPreviewRef,
+  ]);
+
+  // Auto-reveal source when an element is selected while the Code tab is active.
+  // Use a ref for the callback so the effect only fires on selection changes,
+  // not when openSourceForSelection is recreated due to editingFile content updates.
+  const openSourceRef = useRef(openSourceForSelection);
+  openSourceRef.current = openSourceForSelection;
+  useEffect(
+    // fallow-ignore-next-line complexity
+    () => {
+      if (!domEditSelection || !openSourceRef.current || !getSidebarTab) return;
+      if (!domEditSelection.sourceFile) return;
+      if (getSidebarTab() !== "code") return;
+      openSourceRef.current(domEditSelection.sourceFile, {
+        id: domEditSelection.id,
+        selector: domEditSelection.selector,
+        selectorIndex: domEditSelection.selectorIndex,
+      });
+    },
+    [domEditSelection, getSidebarTab],
+  );
+}

package/src/hooks/useDomEditSession.ts

@@ -1,12 +1,9 @@
 import { useCallback, useEffect, useRef } from "react";
 import type { TimelineElement } from "../player";
 import { usePlayerStore } from "../player";
-import {
-  STUDIO_INSPECTOR_PANELS_ENABLED,
-  STUDIO_GSAP_PANEL_ENABLED,
-} from "../components/editor/manualEditingAvailability";
-import { findElementForSelection, type DomEditSelection } from "../components/editor/domEditing";
-import { reapplyPositionEditsAfterSeek } from "../components/editor/manualEdits";
+import { STUDIO_GSAP_PANEL_ENABLED } from "../components/editor/manualEditingAvailability";
+import { type DomEditSelection } from "../components/editor/domEditing";
+import { useDomEditPreviewSync } from "./useDomEditPreviewSync";
 import type { ImportedFontAsset } from "../components/editor/fontAssets";
 import type { EditHistoryKind } from "../utils/editHistory";
 import type { RightPanelTab } from "../utils/studioHelpers";
@@ -482,85 +479,20 @@ export function useDomEditSession({
     [domEditSelection, updateArcSegment],
   );
 
-  // Sync selection from preview document on load / refresh
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (!previewIframe) return;
-
-    // fallow-ignore-next-line complexity
-    const syncSelectionFromDocument = async () => {
-      if (!STUDIO_INSPECTOR_PANELS_ENABLED || captionEditMode) return;
-      const currentSelection = domEditSelectionRef.current;
-      if (!currentSelection) return;
-      let doc: Document | null = null;
-      try {
-        doc = previewIframe.contentDocument;
-      } catch {
-        return;
-      }
-      if (!doc) return;
-
-      reapplyPositionEditsAfterSeek(doc);
-
-      const nextElement = findElementForSelection(doc, currentSelection, activeCompPath);
-      if (!nextElement) {
-        applyDomSelection(null, { revealPanel: false });
-        return;
-      }
-
-      const nextSelection = await buildDomSelectionFromTarget(nextElement);
-      if (nextSelection) {
-        applyDomSelection(nextSelection, { revealPanel: false, preserveGroup: true });
-      }
-    };
-
-    syncPreviewHistoryHotkey(previewIframe);
-    void applyStudioManualEditsToPreviewRef.current(previewIframe);
-    void syncSelectionFromDocument();
-    refreshPreviewDocumentVersion();
-
-    const handleLoad = () => {
-      syncPreviewHistoryHotkey(previewIframe);
-      void applyStudioManualEditsToPreviewRef.current(previewIframe);
-      void syncSelectionFromDocument();
-      refreshPreviewDocumentVersion();
-    };
-
-    previewIframe.addEventListener("load", handleLoad);
-    return () => {
-      previewIframe.removeEventListener("load", handleLoad);
-    };
-  }, [
+  useDomEditPreviewSync({
+    previewIframe,
     activeCompPath,
-    applyDomSelection,
-    buildDomSelectionFromTarget,
     captionEditMode,
     domEditSelectionRef,
-    previewIframe,
+    domEditSelection,
+    applyDomSelection,
+    buildDomSelectionFromTarget,
     refreshPreviewDocumentVersion,
     syncPreviewHistoryHotkey,
     applyStudioManualEditsToPreviewRef,
-  ]);
-
-  // Auto-reveal source when an element is selected while the Code tab is active.
-  // Use a ref for the callback so the effect only fires on selection changes,
-  // not when openSourceForSelection is recreated due to editingFile content updates.
-  const openSourceRef = useRef(openSourceForSelection);
-  openSourceRef.current = openSourceForSelection;
-  useEffect(
-    // fallow-ignore-next-line complexity
-    () => {
-      if (!domEditSelection || !openSourceRef.current || !getSidebarTab) return;
-      if (!domEditSelection.sourceFile) return;
-      if (getSidebarTab() !== "code") return;
-      openSourceRef.current(domEditSelection.sourceFile, {
-        id: domEditSelection.id,
-        selector: domEditSelection.selector,
-        selectorIndex: domEditSelection.selectorIndex,
-      });
-    },
-    [domEditSelection, getSidebarTab],
-  );
+    openSourceForSelection,
+    getSidebarTab,
+  });
 
   return {
     // State