hyperframes 0.8.80 → 0.8.81

package/dist/studio/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>HyperFrames Studio</title>
-    <script type="module" crossorigin src="/assets/index-CsG24Jub.js"></script>
+    <script type="module" crossorigin src="/assets/index-hNVM9Pd2.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-BWJqxeaH.css">
   </head>
   <body>

package/dist/studio/index.js

@@ -68183,7 +68183,7 @@ var FileTree = memo38(function FileTree2({
 });
 
 // src/App.tsx
-import { useState as useState155, useCallback as useCallback182, useRef as useRef186, useMemo as useMemo77, useLayoutEffect as useLayoutEffect11 } from "react";
+import { useState as useState155, useCallback as useCallback183, useRef as useRef186, useMemo as useMemo77, useLayoutEffect as useLayoutEffect11 } from "react";
 
 // src/hooks/useRightPanelIntents.ts
 import { useCallback as useCallback90, useEffect as useEffect101, useRef as useRef121 } from "react";
@@ -82945,7 +82945,9 @@ function useLintModal(projectId, refreshKey) {
   );
   const findingsByElement = useMemo69(() => groupFindings((f) => f.elementId), [groupFindings]);
   const findingsByFile = useMemo69(() => groupFindings((f) => f.file), [groupFindings]);
-  const hasLintError = (lintModal ?? backgroundFindings).some((f) => f.severity === "error");
+  const badgeFindings = lintModal ?? backgroundFindings;
+  const lintFindingCount = badgeFindings.length;
+  const hasLintError = badgeFindings.some((f) => f.severity === "error");
   useEffect125(() => {
     usePlayerStore.getState().setLintFindingsByElement(findingsByElement);
   }, [findingsByElement]);
@@ -82957,6 +82959,7 @@ function useLintModal(projectId, refreshKey) {
     backgroundFindings,
     findingsByElement,
     findingsByFile,
+    lintFindingCount,
     hasLintError
   };
 }
@@ -86724,6 +86727,7 @@ function CompositionsPanel(props) {
 
 // src/components/sidebar/SidebarLintButton.tsx
 import { jsx as jsx216, jsxs as jsxs171 } from "react/jsx-runtime";
+var ERROR_PULSES_BEFORE_IDLE = 3;
 function SidebarLintButton({
   onLint,
   linting,
@@ -86758,12 +86762,14 @@ function SidebarLintButton({
           "span",
           {
             "data-lint-badge": hasError ? "error" : "warning",
+            style: hasError ? { animationIterationCount: ERROR_PULSES_BEFORE_IDLE } : void 0,
             className: hasError ? "ml-1 min-w-[16px] rounded-full bg-panel-danger/25 px-1 text-[9px] font-bold text-panel-danger animate-pulse motion-reduce:animate-none" : "ml-1 min-w-[16px] rounded-full bg-amber-500/20 px-1 text-[9px] font-bold text-amber-400",
             children: [
               findingCount,
               /* @__PURE__ */ jsx216("span", { className: "sr-only", children: hasError ? " lint findings, including errors" : " lint findings, warnings only" })
             ]
-          }
+          },
+          findingCount
         )
       ]
     }
@@ -86941,7 +86947,7 @@ function CodeBody({
 }
 
 // src/components/StudioRightPanels.tsx
-import { useCallback as useCallback177 } from "react";
+import { useCallback as useCallback178 } from "react";
 
 // src/components/editor/LayersPanel.tsx
 import { memo as memo44, useState as useState140, useCallback as useCallback163, useEffect as useEffect138, useRef as useRef176 } from "react";
@@ -90175,11 +90181,11 @@ async function readGroup(path, readProjectFile) {
     return null;
   }
 }
-function useProjectCompositionVariables(fileTree, excludePath, readProjectFile, refreshKey) {
+function useProjectCompositionVariables(compositionPaths, excludePath, readProjectFile, refreshKey) {
   const [groups, setGroups] = useState149([]);
   useEffect144(() => {
     let cancelled = false;
-    const htmlFiles = fileTree.filter((p) => p.endsWith(".html") && p !== excludePath);
+    const htmlFiles = compositionPaths.filter((p) => p !== excludePath);
     void (async () => {
       const out = [];
       for (const path of htmlFiles) {
@@ -90191,7 +90197,7 @@ function useProjectCompositionVariables(fileTree, excludePath, readProjectFile,
     return () => {
       cancelled = true;
     };
-  }, [fileTree, excludePath, readProjectFile, refreshKey]);
+  }, [compositionPaths, excludePath, readProjectFile, refreshKey]);
   return groups;
 }
 function useEditVariablesInFile(deps) {
@@ -90551,7 +90557,7 @@ function CompositionSection({
   ] });
 }
 function VariablesOtherCompositions({
-  fileTree,
+  compositionPaths,
   excludePath,
   refreshKey,
   readProjectFile,
@@ -90561,7 +90567,7 @@ function VariablesOtherCompositions({
 }) {
   const [selfRefresh, setSelfRefresh] = useState151(0);
   const groups = useProjectCompositionVariables(
-    fileTree,
+    compositionPaths,
     excludePath,
     readProjectFile,
     `${refreshKey}:${selfRefresh}`
@@ -90777,7 +90783,7 @@ var VariablesPanel = memo52(function VariablesPanel2({
 }) {
   const { activeCompPath, showToast } = useStudioShellContext();
   const { refreshKey } = useStudioPlaybackContext();
-  const { readProjectFile, writeProjectFile, fileTree, compositions } = useFileManagerContext();
+  const { readProjectFile, writeProjectFile, compositions } = useFileManagerContext();
   const { domEditSelection } = useDomEditContext();
   const effectiveCompPath = activeCompPath ?? resolveMasterCompositionPath(compositions);
   const previewValues = usePreviewVariablesStore((s) => s.values);
@@ -91024,8 +91030,8 @@ var VariablesPanel = memo52(function VariablesPanel2({
       /* @__PURE__ */ jsx232(
         VariablesOtherCompositions,
         {
-          fileTree,
-          excludePath: activeCompPath ?? "index.html",
+          compositionPaths: compositions,
+          excludePath: effectiveCompPath,
           refreshKey: `${refreshKey}:${revision}`,
           readProjectFile,
           writeProjectFile,
@@ -91196,46 +91202,8 @@ function DesignPanelPromoteProvider({
   );
 }
 
-// src/components/editor/colorGradingScopePatch.ts
-var MEDIA_TAG_RE = /<\s*(video|img)\b(?:[^>"']|"[^"]*"|'[^']*')*>/gi;
-var COLOR_GRADING_ATTR_RE = /\sdata-color-grading=(?:"[^"]*"|'[^']*')/i;
-var IGNORED_HTML_RANGE_RE = /<!--[\s\S]*?-->|<(script|style)\b[\s\S]*?<\/\1\s*>/gi;
-function collectIgnoredRanges(html2) {
-  const ranges = [];
-  let match;
-  IGNORED_HTML_RANGE_RE.lastIndex = 0;
-  while ((match = IGNORED_HTML_RANGE_RE.exec(html2)) !== null) {
-    ranges.push({ start: match.index, end: match.index + match[0].length });
-  }
-  return ranges;
-}
-function isInsideRange(offset, ranges) {
-  return ranges.some((range) => offset >= range.start && offset < range.end);
-}
-function escapeHtmlAttribute2(value) {
-  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
-}
-function patchMediaTag(tag, value) {
-  if (value === null || value === "") {
-    return tag.replace(COLOR_GRADING_ATTR_RE, "");
-  }
-  const nextAttr = ` data-color-grading="${escapeHtmlAttribute2(value)}"`;
-  if (COLOR_GRADING_ATTR_RE.test(tag)) {
-    return tag.replace(COLOR_GRADING_ATTR_RE, nextAttr);
-  }
-  return tag.replace(/\s*\/?>$/, (end) => `${nextAttr}${end}`);
-}
-function patchMediaColorGradingInHtml(html2, value) {
-  let count = 0;
-  const ignoredRanges = collectIgnoredRanges(html2);
-  const patched = html2.replace(MEDIA_TAG_RE, (tag, _tagName, offset) => {
-    if (isInsideRange(offset, ignoredRanges)) return tag;
-    const next = patchMediaTag(tag, value);
-    if (next !== tag) count += 1;
-    return next;
-  });
-  return { html: patched, count };
-}
+// src/hooks/useRemoveBackground.ts
+import { useCallback as useCallback176, useEffect as useEffect146, useRef as useRef182 } from "react";
 
 // src/components/studioMediaJobs.ts
 var MEDIA_JOB_RECONNECT_TIMEOUT_MS = 15e3;
@@ -91339,13 +91307,104 @@ function waitForMediaJob(jobId, onProgress, signal) {
   });
 }
 
+// src/hooks/useRemoveBackground.ts
+function useRemoveBackground(projectId, refreshFileTree, showToast) {
+  const abortRef = useRef182(null);
+  useEffect146(
+    () => () => {
+      abortRef.current?.abort();
+    },
+    []
+  );
+  return useCallback176(
+    // fallow-ignore-next-line complexity
+    async (inputPath, options) => {
+      const response = await fetch(
+        `/api/projects/${encodeURIComponent(projectId)}/media/remove-background`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({
+            inputPath,
+            createBackgroundPlate: options.createBackgroundPlate === true,
+            quality: options.quality ?? "balanced"
+          })
+        }
+      );
+      const data = await response.json().catch(() => ({}));
+      if (!response.ok || !data.jobId) {
+        throw new Error(data.error || `Background removal failed (${response.status})`);
+      }
+      showToast("Removing background...", "info");
+      abortRef.current?.abort();
+      const controller = new AbortController();
+      abortRef.current = controller;
+      try {
+        const result = await waitForMediaJob(data.jobId, options.onProgress, controller.signal);
+        await refreshFileTree();
+        showToast(`Created transparent asset: ${result.outputPath.split("/").pop()}`, "info");
+        return result;
+      } finally {
+        if (abortRef.current === controller) {
+          abortRef.current = null;
+        }
+      }
+    },
+    [projectId, refreshFileTree, showToast]
+  );
+}
+
+// src/hooks/useApplyColorGradingScope.ts
+import { useCallback as useCallback177 } from "react";
+
+// src/components/editor/colorGradingScopePatch.ts
+var MEDIA_TAG_RE = /<\s*(video|img)\b(?:[^>"']|"[^"]*"|'[^']*')*>/gi;
+var COLOR_GRADING_ATTR_RE = /\sdata-color-grading=(?:"[^"]*"|'[^']*')/i;
+var IGNORED_HTML_RANGE_RE = /<!--[\s\S]*?-->|<(script|style)\b[\s\S]*?<\/\1\s*>/gi;
+function collectIgnoredRanges(html2) {
+  const ranges = [];
+  let match;
+  IGNORED_HTML_RANGE_RE.lastIndex = 0;
+  while ((match = IGNORED_HTML_RANGE_RE.exec(html2)) !== null) {
+    ranges.push({ start: match.index, end: match.index + match[0].length });
+  }
+  return ranges;
+}
+function isInsideRange(offset, ranges) {
+  return ranges.some((range) => offset >= range.start && offset < range.end);
+}
+function escapeHtmlAttribute2(value) {
+  return value.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function patchMediaTag(tag, value) {
+  if (value === null || value === "") {
+    return tag.replace(COLOR_GRADING_ATTR_RE, "");
+  }
+  const nextAttr = ` data-color-grading="${escapeHtmlAttribute2(value)}"`;
+  if (COLOR_GRADING_ATTR_RE.test(tag)) {
+    return tag.replace(COLOR_GRADING_ATTR_RE, nextAttr);
+  }
+  return tag.replace(/\s*\/?>$/, (end) => `${nextAttr}${end}`);
+}
+function patchMediaColorGradingInHtml(html2, value) {
+  let count = 0;
+  const ignoredRanges = collectIgnoredRanges(html2);
+  const patched = html2.replace(MEDIA_TAG_RE, (tag, _tagName, offset) => {
+    if (isInsideRange(offset, ignoredRanges)) return tag;
+    const next = patchMediaTag(tag, value);
+    if (next !== tag) count += 1;
+    return next;
+  });
+  return { html: patched, count };
+}
+
 // src/components/studioColorGradingScope.ts
 var EMPTY_COLOR_GRADING_SCOPE_RESULT = {
   changedFiles: 0,
   changedElements: 0
 };
-function colorGradingScopePaths(scope, selectedSourceFile, fileTree) {
-  return scope === "source-file" ? [selectedSourceFile] : fileTree.filter((path) => /\.html?$/i.test(path));
+function colorGradingScopePaths(scope, selectedSourceFile, compositionPaths) {
+  return scope === "source-file" ? [selectedSourceFile] : compositionPaths;
 }
 async function patchColorGradingScopeFiles(paths, value, readProjectFile) {
   const snapshots = await Promise.all(
@@ -91369,7 +91428,7 @@ async function applyColorGradingScopeUpdate({
   scope,
   value,
   selectedSourceFile,
-  fileTree,
+  compositionPaths,
   projectId,
   waitForPendingDomEditSaves,
   readProjectFile,
@@ -91387,7 +91446,7 @@ async function applyColorGradingScopeUpdate({
     return EMPTY_COLOR_GRADING_SCOPE_RESULT;
   }
   const { files, changedElements } = await patchColorGradingScopeFiles(
-    colorGradingScopePaths(scope, selectedSourceFile, fileTree),
+    colorGradingScopePaths(scope, selectedSourceFile, compositionPaths),
     value,
     readProjectFile
   );
@@ -91411,51 +91470,43 @@ async function applyColorGradingScopeUpdate({
   return { changedFiles: changedPaths.length, changedElements };
 }
 
-// src/hooks/useRemoveBackground.ts
-import { useCallback as useCallback176, useEffect as useEffect146, useRef as useRef182 } from "react";
-function useRemoveBackground(projectId, refreshFileTree, showToast) {
-  const abortRef = useRef182(null);
-  useEffect146(
-    () => () => {
-      abortRef.current?.abort();
-    },
-    []
-  );
-  return useCallback176(
-    // fallow-ignore-next-line complexity
-    async (inputPath, options) => {
-      const response = await fetch(
-        `/api/projects/${encodeURIComponent(projectId)}/media/remove-background`,
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            inputPath,
-            createBackgroundPlate: options.createBackgroundPlate === true,
-            quality: options.quality ?? "balanced"
-          })
-        }
+// src/hooks/useApplyColorGradingScope.ts
+function useApplyColorGradingScope(recordEdit, reloadPreview) {
+  const { projectId, activeCompPath, showToast, waitForPendingDomEditSaves } = useStudioShellContext();
+  const { domEditSelection } = useDomEditContext();
+  const { readProjectFile, writeProjectFile, compositions } = useFileManagerContext();
+  return useCallback177(
+    async (scope, value) => applyColorGradingScopeUpdate({
+      scope,
+      value,
+      selectedSourceFile: domEditSelection?.sourceFile || activeCompPath || "index.html",
+      compositionPaths: compositions,
+      projectId,
+      waitForPendingDomEditSaves,
+      readProjectFile,
+      writeProjectFile,
+      recordEdit,
+      reloadPreview,
+      showToast
+    }).catch((error) => {
+      showToast(
+        `Couldn't apply color grading: ${error instanceof Error ? error.message : String(error)}`,
+        "error"
       );
-      const data = await response.json().catch(() => ({}));
-      if (!response.ok || !data.jobId) {
-        throw new Error(data.error || `Background removal failed (${response.status})`);
-      }
-      showToast("Removing background...", "info");
-      abortRef.current?.abort();
-      const controller = new AbortController();
-      abortRef.current = controller;
-      try {
-        const result = await waitForMediaJob(data.jobId, options.onProgress, controller.signal);
-        await refreshFileTree();
-        showToast(`Created transparent asset: ${result.outputPath.split("/").pop()}`, "info");
-        return result;
-      } finally {
-        if (abortRef.current === controller) {
-          abortRef.current = null;
-        }
-      }
-    },
-    [projectId, refreshFileTree, showToast]
+      return EMPTY_COLOR_GRADING_SCOPE_RESULT;
+    }),
+    [
+      activeCompPath,
+      compositions,
+      domEditSelection?.sourceFile,
+      projectId,
+      readProjectFile,
+      recordEdit,
+      reloadPreview,
+      showToast,
+      waitForPendingDomEditSaves,
+      writeProjectFile
+    ]
   );
 }
 
@@ -91477,14 +91528,7 @@ function StudioRightPanels({
   onAutoGroupCarveSources,
   onAddMediaOverlay
 }) {
-  const {
-    previewIframeRef,
-    projectId,
-    activeCompPath,
-    showToast,
-    waitForPendingDomEditSaves,
-    renderQueue
-  } = useStudioShellContext();
+  const { previewIframeRef, projectId, activeCompPath, showToast, renderQueue } = useStudioShellContext();
   const { captionEditMode, refreshKey } = useStudioPlaybackContext();
   const {
     domEditSelection,
@@ -91540,7 +91584,6 @@ function StudioRightPanels({
     refreshFileTree,
     readProjectFile,
     writeProjectFile,
-    fileTree,
     editingFile
   } = useFileManagerContext();
   const onPersistSlideshow = useSlideshowPersist({
@@ -91576,41 +91619,9 @@ function StudioRightPanels({
     onDismiss: onDismissBlockParams
   });
   useCaptionDesignFocus(captionEditMode);
-  const handleApplyColorGradingScope = useCallback177(
-    async (scope, value) => applyColorGradingScopeUpdate({
-      scope,
-      value,
-      selectedSourceFile: domEditSelection?.sourceFile || activeCompPath || "index.html",
-      fileTree,
-      projectId,
-      waitForPendingDomEditSaves,
-      readProjectFile,
-      writeProjectFile,
-      recordEdit,
-      reloadPreview,
-      showToast
-    }).catch((error) => {
-      showToast(
-        `Couldn't apply color grading: ${error instanceof Error ? error.message : String(error)}`,
-        "error"
-      );
-      return EMPTY_COLOR_GRADING_SCOPE_RESULT;
-    }),
-    [
-      activeCompPath,
-      domEditSelection?.sourceFile,
-      fileTree,
-      projectId,
-      readProjectFile,
-      recordEdit,
-      reloadPreview,
-      showToast,
-      waitForPendingDomEditSaves,
-      writeProjectFile
-    ]
-  );
+  const handleApplyColorGradingScope = useApplyColorGradingScope(recordEdit, reloadPreview);
   const handleRemoveBackground = useRemoveBackground(projectId, refreshFileTree, showToast);
-  const setAttributeWhileDragging = useCallback177(
+  const setAttributeWhileDragging = useCallback178(
     (attr, value) => handleDomAttributeLiveCommit(attr, value, void 0, { previewOnly: true }),
     [handleDomAttributeLiveCommit]
   );
@@ -91755,7 +91766,7 @@ import { useEffect as useEffect148, useRef as useRef183 } from "react";
 import { Image as Image3, Magnet, MagnifyingGlassMinus, MagnifyingGlassPlus } from "@phosphor-icons/react";
 
 // src/hooks/useEnableKeyframes.ts
-import { useCallback as useCallback178 } from "react";
+import { useCallback as useCallback179 } from "react";
 var enableKeyframesTransactionCounter = 0;
 function animatedProps(anim) {
   if (!anim) return ["x", "y"];
@@ -92008,7 +92019,7 @@ async function applyArcKeyframeAtPlayhead(session, sel, arcAnim, t, iframe) {
   );
 }
 function useEnableKeyframes(sessionRef) {
-  return useCallback178(async () => {
+  return useCallback179(async () => {
     const session = sessionRef.current;
     if (!session) return;
     const sel = session.domEditSelection;
@@ -92090,7 +92101,7 @@ function useEnableKeyframes(sessionRef) {
 }
 
 // src/hooks/useKeyframeKeyboard.ts
-import { useEffect as useEffect147, useCallback as useCallback179 } from "react";
+import { useEffect as useEffect147, useCallback as useCallback180 } from "react";
 function isTextInput2(el) {
   if (!el) return false;
   const tag = el.tagName;
@@ -92107,7 +92118,7 @@ function useKeyframeKeyboard({
   onToggleExpand,
   onNudgeKeyframe
 }) {
-  const handler = useCallback179(
+  const handler = useCallback180(
     (e) => {
       if (!enabled) return;
       if (isTextInput2(document.activeElement)) return;
@@ -92775,12 +92786,12 @@ function useStudioSessionStart(projectId, resolving, waitingForServer) {
 }
 
 // src/hooks/useTimelineAddAtPlayhead.ts
-import { useCallback as useCallback180 } from "react";
+import { useCallback as useCallback181 } from "react";
 function useTimelineAddAtPlayhead(addAsset, addComposition) {
   const placement = () => ({ start: usePlayerStore.getState().currentTime, track: 0 });
   return {
-    addAssetAtPlayhead: useCallback180((path) => addAsset(path, placement()), [addAsset]),
-    addCompositionAtPlayhead: useCallback180(
+    addAssetAtPlayhead: useCallback181((path) => addAsset(path, placement()), [addAsset]),
+    addCompositionAtPlayhead: useCallback181(
       (path) => addComposition(path, placement()),
       [addComposition]
     )
@@ -92836,14 +92847,14 @@ function useAutoOpenRootComposition({
 }
 
 // src/hooks/useCompositionContentLoader.ts
-import { useCallback as useCallback181 } from "react";
+import { useCallback as useCallback182 } from "react";
 function useCompositionContentLoader({
   projectId,
   setEditingFile,
   setActiveCompPath,
   showToast
 }) {
-  return useCallback181(
+  return useCallback182(
     (comp) => {
       if (!projectId) return;
       setActiveCompPath(comp.endsWith(".html") ? comp : null);
@@ -92961,7 +92972,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   const handleDomZIndexReorderCommitRef = useRef186(null);
   const pendingTimelineEditPathRef = useRef186(/* @__PURE__ */ new Set());
   const isGestureRecordingRef = useRef186(false);
-  const reloadPreview = useCallback182(() => setRefreshKey((k) => k + 1), []);
+  const reloadPreview = useCallback183(() => setRefreshKey((k) => k + 1), []);
   const fileManager = useFileManager({
     projectId,
     showToast,
@@ -93012,7 +93023,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
   });
   const invalidateGsapCacheRef = useRef186(() => {
   });
-  const invalidateGsapCache = useCallback182(() => invalidateGsapCacheRef.current(), []);
+  const invalidateGsapCache = useCallback183(() => invalidateGsapCacheRef.current(), []);
   const timelineEditing = useTimelineEditing({
     projectId,
     activeCompPath,
@@ -93032,7 +93043,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     invalidateGsapCache,
     handleDomZIndexReorderCommitRef
   });
-  const handleTimelineElementsMove = useCallback182(
+  const handleTimelineElementsMove = useCallback183(
     async (edits, coalesceKey, operation = "timing", coalesceMs) => {
       const deps = { handleTimelineGroupMove: timelineEditing.handleTimelineGroupMove };
       await persistTimelineMoveEditsAtomically(edits, coalesceKey, operation, deps, coalesceMs);
@@ -93070,7 +93081,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     setRightCollapsed: panelLayout.setRightCollapsed,
     setRightPanelTab: panelLayout.setRightPanelTab
   });
-  const dismissBlockParams = useCallback182(() => setActiveBlockParams(null), [setActiveBlockParams]);
+  const dismissBlockParams = useCallback183(() => setActiveBlockParams(null), [setActiveBlockParams]);
   const setRightPanelTab = useDismissingTabSetter(panelLayout.setRightPanelTab, dismissBlockParams);
   const layout = useMemo77(
     () => ({ ...panelLayout, setRightPanelTab }),
@@ -93197,7 +93208,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     effectiveTimelineDuration
   });
   const compositionDimensions = useCompositionDimensions(previewIframeRef);
-  const { lintModal, linting, handleLint, closeLintModal, findingsByFile, hasLintError } = useLintModal(projectId, refreshKey);
+  const lint = useLintModal(projectId, refreshKey);
   const frameCapture = useFrameCapture({
     projectId,
     activeCompPath,
@@ -93230,7 +93241,7 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
     }
     canvasRectRef.current = previewIframe.getBoundingClientRect();
   }, [gestureState, previewIframe]);
-  const handlePreviewIframeRef = useCallback182(
+  const handlePreviewIframeRef = useCallback183(
     (iframe) => {
       previewIframeRef.current = iframe;
       usePreviewIframeStore.getState().setIframe(iframe);
@@ -93349,11 +93360,11 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
                   onSelectComposition: handleSelectComposition,
                   onAddBlock: handleAddBlock,
                   onPreviewBlock: setBlockPreview,
-                  onLint: handleLint,
-                  linting,
-                  lintFindingCount: lintModal?.length ?? findingsByFile.size,
-                  lintFindingsByFile: findingsByFile,
-                  lintHasError: hasLintError,
+                  onLint: lint.handleLint,
+                  linting: lint.linting,
+                  lintFindingCount: lint.lintFindingCount,
+                  lintFindingsByFile: lint.findingsByFile,
+                  lintHasError: lint.hasLintError,
                   onAddAssetToTimeline: handleAddAssetAtPlayhead,
                   onAddCompositionToTimeline: handleAddCompositionAtPlayhead
                 }
@@ -93431,8 +93442,8 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
           {
             projectId,
             projectDir: fileManager.projectDir,
-            lintModal,
-            closeLintModal,
+            lintModal: lint.lintModal,
+            closeLintModal: lint.closeLintModal,
             consoleErrors,
             clearConsoleErrors: () => setConsoleErrors(null),
             domEditSession,
@@ -93447,32 +93458,32 @@ function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason } = {}) {
 }
 
 // src/hooks/useElementPicker.ts
-import { useState as useState156, useCallback as useCallback183, useRef as useRef187 } from "react";
+import { useState as useState156, useCallback as useCallback184, useRef as useRef187 } from "react";
 function useElementPicker(iframeRef, options) {
   const [isPickMode, setIsPickMode] = useState156(false);
   const [pickedElement, setPickedElement] = useState156(null);
   const activeOverrideRef = useRef187(null);
-  const getActiveIframe = useCallback183(() => {
+  const getActiveIframe = useCallback184(() => {
     return activeOverrideRef.current ?? iframeRef.current;
   }, [iframeRef]);
-  const setActiveIframe = useCallback183((el) => {
+  const setActiveIframe = useCallback184((el) => {
     activeOverrideRef.current = el;
   }, []);
-  const enablePick = useCallback183(() => {
+  const enablePick = useCallback184(() => {
     try {
       postRuntimeControlMessage(getActiveIframe()?.contentWindow, "enable-pick-mode");
       setIsPickMode(true);
     } catch {
     }
   }, [getActiveIframe]);
-  const disablePick = useCallback183(() => {
+  const disablePick = useCallback184(() => {
     try {
       postRuntimeControlMessage(getActiveIframe()?.contentWindow, "disable-pick-mode");
     } catch {
     }
     setIsPickMode(false);
   }, [getActiveIframe]);
-  const clearPick = useCallback183(() => {
+  const clearPick = useCallback184(() => {
     setPickedElement(null);
   }, []);
   useMountEffect(() => {
@@ -93502,7 +93513,7 @@ function useElementPicker(iframeRef, options) {
   optionsRef.current = options;
   const pendingWritesRef = useRef187(/* @__PURE__ */ new Map());
   settlePendingWrites(pendingWritesRef.current, options?.workspaceFiles);
-  const syncToSource = useCallback183(
+  const syncToSource = useCallback184(
     (picked, live, iframe, op) => {
       const opts = optionsRef.current;
       if (!opts?.workspaceFiles || !opts.onSyncFiles) return;
@@ -93516,7 +93527,7 @@ function useElementPicker(iframeRef, options) {
     },
     []
   );
-  const setStyle = useCallback183(
+  const setStyle = useCallback184(
     (prop, value) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;
@@ -93542,7 +93553,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const setDataAttr = useCallback183(
+  const setDataAttr = useCallback184(
     (attr, value) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;
@@ -93568,7 +93579,7 @@ function useElementPicker(iframeRef, options) {
     },
     [pickedElement, getActiveIframe, syncToSource]
   );
-  const setTextContent = useCallback183(
+  const setTextContent = useCallback184(
     (text) => {
       const activeIframe = getActiveIframe();
       if (!pickedElement?.selector || !activeIframe) return;