@hyperframes/studio 0.8.79 → 0.8.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.8.79",
+  "version": "0.8.81",
   "description": "",
   "repository": {
     "type": "git",
@@ -52,12 +52,12 @@
     "dockview-react": "8.3.1",
     "gsap": "^3.13.0",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.8.79",
-    "@hyperframes/parsers": "0.8.79",
-    "@hyperframes/sdk": "0.8.79",
-    "@hyperframes/player": "0.8.79",
-    "@hyperframes/shader-transitions": "0.8.79",
-    "@hyperframes/studio-server": "0.8.79"
+    "@hyperframes/core": "0.8.81",
+    "@hyperframes/parsers": "0.8.81",
+    "@hyperframes/player": "0.8.81",
+    "@hyperframes/sdk": "0.8.81",
+    "@hyperframes/shader-transitions": "0.8.81",
+    "@hyperframes/studio-server": "0.8.81"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.3",
@@ -73,7 +73,7 @@
     "vite": "^6.4.2",
     "vitest": "^4.1.11",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.8.79"
+    "@hyperframes/producer": "0.8.81"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -209,6 +209,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
       refreshFileTree: fileManager.refreshFileTree,
       reloadPreview,
       showToast,
+      dismissToast,
     },
     previewIframeRef,
     setRightCollapsed: panelLayout.setRightCollapsed,
@@ -260,7 +261,10 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     handleDuplicate,
     onResetKeyframes: () => resetKeyframesRef.current(),
     onDeleteSelectedKeyframes: () => deleteSelectedKeyframesRef.current(),
-    onAfterUndoRedo: () => invalidateGsapCacheRef.current(),
+    onAfterUndoRedo: (restore) => {
+      invalidateGsapCacheRef.current();
+      timelineEditing.restoreLiveLanes(restore);
+    },
     onGroupSelection: () => domEditSessionRef.current.handleGroupSelection(),
     onUngroupSelection: () => domEditSessionRef.current.handleUngroupSelection(),
     activeCompPath,
@@ -340,8 +344,7 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
     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,
@@ -496,11 +499,11 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
                         onSelectComposition={handleSelectComposition}
                         onAddBlock={handleAddBlock}
                         onPreviewBlock={setBlockPreview}
-                        onLint={handleLint}
-                        linting={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}
                       />
@@ -573,8 +576,8 @@ export function StudioApp({ readOnlyPreview = false, readOnlyPreviewReason }: St
                 <StudioOverlays
                   projectId={projectId}
                   projectDir={fileManager.projectDir}
-                  lintModal={lintModal}
-                  closeLintModal={closeLintModal}
+                  lintModal={lint.lintModal}
+                  closeLintModal={lint.closeLintModal}
                   consoleErrors={consoleErrors}
                   clearConsoleErrors={() => setConsoleErrors(null)}
                   domEditSession={domEditSession}

package/src/components/StudioRightPanels.tsx

@@ -23,14 +23,10 @@ import { useStudioPlaybackContext, useStudioShellContext } from "../contexts/Stu
 import { useFileManagerContext } from "../contexts/FileManagerContext";
 import { useDomEditContext } from "../contexts/DomEditContext";
 import { usePlayerStore } from "../player";
-import {
-  applyColorGradingScopeUpdate,
-  EMPTY_COLOR_GRADING_SCOPE_RESULT,
-  type ColorGradingScope,
-} from "./studioColorGradingScope";
 import { timelineKeysForSelections } from "../utils/studioHelpers";
 import { canHideSelections } from "../utils/timelineInspector";
 import { useRemoveBackground } from "../hooks/useRemoveBackground";
+import { useApplyColorGradingScope } from "../hooks/useApplyColorGradingScope";
 
 // fallow-ignore-next-line complexity
 export function StudioRightPanels({
@@ -49,14 +45,8 @@ export function StudioRightPanels({
   onAutoGroupCarveSources,
   onAddMediaOverlay,
 }: StudioRightPanelsProps) {
-  const {
-    previewIframeRef,
-    projectId,
-    activeCompPath,
-    showToast,
-    waitForPendingDomEditSaves,
-    renderQueue,
-  } = useStudioShellContext();
+  const { previewIframeRef, projectId, activeCompPath, showToast, renderQueue } =
+    useStudioShellContext();
   const { captionEditMode, refreshKey } = useStudioPlaybackContext();
 
   const {
@@ -114,7 +104,6 @@ export function StudioRightPanels({
     refreshFileTree,
     readProjectFile,
     writeProjectFile,
-    fileTree,
     editingFile,
   } = useFileManagerContext();
 
@@ -158,40 +147,7 @@ export function StudioRightPanels({
   });
   useCaptionDesignFocus(captionEditMode);
 
-  const handleApplyColorGradingScope = useCallback(
-    async (scope: ColorGradingScope, value: string | null) =>
-      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);
 

package/src/components/editor/TimelineFxPopover.test.tsx

@@ -87,7 +87,7 @@ describe("TimelineFxPopover", () => {
     act(() => {
       button?.dispatchEvent(new FocusEvent("focusout", { bubbles: true }));
     });
-    expect(onChainPreview).toHaveBeenCalledWith(EMPTY_CHAIN);
+    expect(onChainPreview).toHaveBeenCalledWith(EMPTY_CHAIN, true);
   });
 
   it("Escape closes without letting the keystroke propagate past the popover", () => {

package/src/components/editor/TimelineFxPopover.tsx

@@ -75,7 +75,7 @@ export interface TimelineFxPopoverProps {
    *  selected clip's attribute — the caller resolves which). */
   onChainChange: (next: HfAudioFxChain) => void;
   /** Preview a hypothetical chain on the running graph without persisting. */
-  onChainPreview?: (next: HfAudioFxChain) => void;
+  onChainPreview?: (next: HfAudioFxChain, ended?: boolean) => void;
   onAuditionTransport?: (on: boolean) => void;
   /** Select the target the way clicking it in the timeline does, and ensure
    *  the property panel's Audio FX group is expanded. */

package/src/components/editor/manualEdits.ts

@@ -11,6 +11,7 @@ export {
 
 export {
   readFileChangeAffectedCompositions,
+  readFileChangeAffectsPreview,
   readFileChangeField,
   readStudioFileChangePath,
 } from "./manualEditsParsing";

package/src/components/editor/manualEditsParsing.ts

@@ -34,6 +34,10 @@ export function readStudioFileChangePath(payload: unknown): string | null {
   return path === null ? null : normalizeStudioFileChangePath(path);
 }
 
+export function readFileChangeAffectsPreview(payload: unknown): boolean {
+  return asPayloadRecord(payload)?.affectsPreview !== false;
+}
+
 /**
  * The compositions whose thumbnails a change can alter, or `null` for all of them. Anything
  * but a list of paths (an older server, the Vite dev host) reads as "all".

package/src/components/editor/useFxAudition.ts

@@ -11,7 +11,7 @@ import type { HfAudioFxChain } from "@hyperframes/core/audio-fx";
 
 export function useFxAudition(
   chain: HfAudioFxChain,
-  onChainPreview: ((chain: HfAudioFxChain) => void) | undefined,
+  onChainPreview: ((chain: HfAudioFxChain, ended?: boolean) => void) | undefined,
   onAuditionTransport: ((on: boolean) => void) | undefined,
 ) {
   /**
@@ -45,7 +45,7 @@ export function useFxAudition(
         // Stop before reverting, for the mirror of that reason — the last thing
         // heard should be the preset, not a frame of the chain coming back.
         onAuditionTransport?.(false);
-        onChainPreview(auditionBase.current);
+        onChainPreview(auditionBase.current, true);
         auditionBase.current = null;
       }
     },
@@ -96,7 +96,7 @@ export function useFxAudition(
     () => () => {
       if (auditionBase.current) {
         transportRef.current?.(false);
-        previewRef.current?.(auditionBase.current);
+        previewRef.current?.(auditionBase.current, true);
       }
     },
     [],

package/src/components/nle/useTimelineEditCallbacks.ts

@@ -41,6 +41,7 @@ export interface TimelineEditCallbackDeps {
   handleToggleTrackHidden: (track: number, hidden: boolean) => Promise<void> | void;
   setAudioGroupAttribute: {
     setLive: (groupId: string, attr: string, value: string | null) => void;
+    revertLive?: (groupId: string, attr: string) => void;
     setQuiet: (
       groupId: string,
       attr: string,
@@ -61,6 +62,7 @@ export interface TimelineEditCallbackDeps {
   /** C1's single-clip FX write, addressed by the clip itself. */
   setElementFxAttribute?: {
     setLive: (element: TimelineElement, attr: string, value: string | null) => void;
+    revertLive?: (element: TimelineElement, attr: string) => void;
     setQuiet: (
       element: TimelineElement,
       attr: string,
@@ -216,9 +218,11 @@ export function useTimelineEditCallbacks({
       onToggleTrackHidden: handleToggleTrackHidden,
       onSetAudioGroupAttributeLive: setAudioGroupAttribute.setLive,
       onSetAudioGroupAttributeQuiet: setAudioGroupAttribute.setQuiet,
+      onRevertAudioGroupAttributeLive: setAudioGroupAttribute.revertLive,
       onGroupClips: handleGroupClips,
       onSetElementAttributeLive: setElementFxAttribute?.setLive,
       onSetElementAttributeQuiet: setElementFxAttribute?.setQuiet,
+      onRevertElementAttributeLive: setElementFxAttribute?.revertLive,
       onBlockedEditAttempt: handleBlockedTimelineEdit,
       onSplitElement: handleTimelineElementSplit,
       onRazorSplit: handleRazorSplit,

package/src/components/panels/VariablesOtherCompositions.tsx

@@ -85,7 +85,7 @@ function CompositionSection({
 }
 
 export function VariablesOtherCompositions({
-  fileTree,
+  compositionPaths,
   excludePath,
   refreshKey,
   readProjectFile,
@@ -93,8 +93,8 @@ export function VariablesOtherCompositions({
   recordEdit,
   reloadPreview,
 }: {
-  fileTree: string[];
-  excludePath: string;
+  compositionPaths: string[];
+  excludePath: string | null;
   refreshKey: unknown;
   readProjectFile: (path: string) => Promise<string>;
   writeProjectFile: (path: string, content: string) => Promise<void>;
@@ -103,7 +103,7 @@ export function VariablesOtherCompositions({
 }) {
   const [selfRefresh, setSelfRefresh] = useState(0);
   const groups = useProjectCompositionVariables(
-    fileTree,
+    compositionPaths,
     excludePath,
     readProjectFile,
     `${refreshKey}:${selfRefresh}`,

package/src/components/panels/VariablesPanel.test.tsx

@@ -0,0 +1,86 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { openComposition } from "@hyperframes/sdk";
+import { VariablesPanel } from "./VariablesPanel";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const withTitle = (id: string, label: string) => `<!DOCTYPE html>
+<html data-composition-variables='[{"id":"title","type":"string","label":"${label}","default":"Hello"}]'>
+<body><div data-composition-id="${id}" data-hf-id="hf-stage" data-hf-root data-duration="5"></div></body>
+</html>`;
+
+const files: Record<string, string> = {
+  "index.html":
+    '<html><body><div data-hf-id="hf-stage" data-hf-root data-duration="5"></div></body></html>',
+  "main.html": withTitle("main", "Main title"),
+  "scene.html": withTitle("scene", "Scene title"),
+  ".hyperframes/preview/4884df6e.html": withTitle("root", "Generated title"),
+};
+const shell = {
+  activeCompPath: "index.html" as string | null,
+  compositions: ["index.html", "scene.html"],
+};
+
+vi.mock("../../contexts/StudioContext", () => ({
+  useStudioShellContext: () => ({ activeCompPath: shell.activeCompPath, showToast: vi.fn() }),
+  useStudioPlaybackContext: () => ({ refreshKey: 0 }),
+}));
+vi.mock("../../contexts/DomEditContext", () => ({
+  useDomEditContext: () => ({ domEditSelection: null }),
+}));
+vi.mock("../../contexts/FileManagerContext", () => ({
+  useFileManagerContext: () => ({
+    readProjectFile: async (path: string) => files[path] ?? "",
+    writeProjectFile: vi.fn(),
+    fileTree: Object.keys(files),
+    compositions: shell.compositions,
+  }),
+}));
+
+let root: Root | null = null;
+
+afterEach(() => {
+  act(() => root?.unmount());
+  root = null;
+  document.body.innerHTML = "";
+});
+
+async function renderOtherCompositions(sessionPath: string): Promise<string> {
+  const host = document.createElement("div");
+  document.body.append(host);
+  root = createRoot(host);
+  const session = await openComposition(files[sessionPath]!, { history: false });
+  await act(async () => {
+    root?.render(
+      <VariablesPanel
+        sdkSession={session}
+        publishSdkSession={vi.fn()}
+        reloadPreview={vi.fn()}
+        recordEdit={vi.fn(async () => {})}
+      />,
+    );
+  });
+  const other = () =>
+    [...host.querySelectorAll("p")].find((p) => p.textContent === "Other compositions")
+      ?.parentElement?.textContent ?? "";
+  await vi.waitFor(() => expect(other()).toContain("scene.html"));
+  return other();
+}
+
+describe("VariablesPanel other compositions", () => {
+  it("lists the project's compositions, not Studio's generated preview documents", async () => {
+    shell.activeCompPath = "index.html";
+    shell.compositions = ["index.html", "scene.html"];
+    expect(await renderOtherCompositions("index.html")).not.toContain(".hyperframes/preview");
+  });
+
+  it("leaves out the main composition in the master view when it is not index.html", async () => {
+    shell.activeCompPath = null;
+    shell.compositions = ["main.html", "scene.html"];
+    expect(await renderOtherCompositions("main.html")).not.toContain("main.html");
+  });
+});

package/src/components/panels/VariablesPanel.tsx

@@ -254,7 +254,7 @@ export const VariablesPanel = memo(function VariablesPanel({
 }: VariablesPanelProps) {
   const { activeCompPath, showToast } = useStudioShellContext();
   const { refreshKey } = useStudioPlaybackContext();
-  const { readProjectFile, writeProjectFile, fileTree, compositions } = useFileManagerContext();
+  const { readProjectFile, writeProjectFile, compositions } = useFileManagerContext();
   const { domEditSelection } = useDomEditContext();
   // Master view (no activeCompPath) targets the real main composition, not a
   // hardcoded index.html — used for both the persist write target and the
@@ -537,8 +537,8 @@ export const VariablesPanel = memo(function VariablesPanel({
           </button>
         )}
         <VariablesOtherCompositions
-          fileTree={fileTree}
-          excludePath={activeCompPath ?? "index.html"}
+          compositionPaths={compositions}
+          excludePath={effectiveCompPath}
           refreshKey={`${refreshKey}:${revision}`}
           readProjectFile={readProjectFile}
           writeProjectFile={writeProjectFile}

package/src/components/sidebar/SidebarLintButton.test.tsx

@@ -44,6 +44,35 @@ describe("SidebarLintButton badge", () => {
     expect(badge?.textContent).toContain("including errors");
   });
 
+  it("pulses a few times and then holds still, so an idle Studio paints nothing", () => {
+    const badge = renderBadge(true);
+    expect(badge?.style.animationIterationCount).toBe("3");
+  });
+
+  it("pulses again when the finding count changes", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    root = createRoot(host);
+    const render = (findingCount: number) =>
+      act(() => {
+        root?.render(
+          <SidebarLintButton
+            onLint={vi.fn()}
+            linting={false}
+            findingCount={findingCount}
+            hasError
+          />,
+        );
+      });
+    render(2);
+    const first = host.querySelector("[data-lint-badge]");
+    render(2);
+    expect(host.querySelector("[data-lint-badge]")).toBe(first);
+    render(3);
+    // A new element restarts its CSS animation; a text change on the old one would not.
+    expect(host.querySelector("[data-lint-badge]")).not.toBe(first);
+  });
+
   it("stays still when the findings are warnings only", () => {
     const badge = renderBadge(false);
     expect(badge?.dataset.lintBadge).toBe("warning");

package/src/components/sidebar/SidebarLintButton.tsx

@@ -1,3 +1,5 @@
+const ERROR_PULSES_BEFORE_IDLE = 3;
+
 export function SidebarLintButton({
   onLint,
   linting,
@@ -31,7 +33,9 @@ export function SidebarLintButton({
         {linting ? "Linting…" : "Lint"}
         {!linting && findingCount != null && findingCount > 0 && (
           <span
+            key={findingCount}
             data-lint-badge={hasError ? "error" : "warning"}
+            style={hasError ? { animationIterationCount: ERROR_PULSES_BEFORE_IDLE } : undefined}
             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"

package/src/components/studioColorGradingScope.ts

@@ -22,7 +22,7 @@ interface ApplyColorGradingScopeOptions {
   scope: ColorGradingScope;
   value: string | null;
   selectedSourceFile: string;
-  fileTree: string[];
+  compositionPaths: string[];
   projectId: string;
   waitForPendingDomEditSaves: () => Promise<void>;
   readProjectFile: ProjectFileReader;
@@ -35,11 +35,9 @@ interface ApplyColorGradingScopeOptions {
 function colorGradingScopePaths(
   scope: ColorGradingScope,
   selectedSourceFile: string,
-  fileTree: string[],
+  compositionPaths: string[],
 ): string[] {
-  return scope === "source-file"
-    ? [selectedSourceFile]
-    : fileTree.filter((path) => /\.html?$/i.test(path));
+  return scope === "source-file" ? [selectedSourceFile] : compositionPaths;
 }
 
 async function patchColorGradingScopeFiles(
@@ -72,7 +70,7 @@ export async function applyColorGradingScopeUpdate({
   scope,
   value,
   selectedSourceFile,
-  fileTree,
+  compositionPaths,
   projectId,
   waitForPendingDomEditSaves,
   readProjectFile,
@@ -91,7 +89,7 @@ export async function applyColorGradingScopeUpdate({
   }
 
   const { files, changedElements } = await patchColorGradingScopeFiles(
-    colorGradingScopePaths(scope, selectedSourceFile, fileTree),
+    colorGradingScopePaths(scope, selectedSourceFile, compositionPaths),
     value,
     readProjectFile,
   );

package/src/contexts/DomEditContext.tsx

@@ -13,6 +13,7 @@ export interface DomEditActionsValue extends Pick<
   | "handlePreviewCanvasPointerLeave"
   | "applyDomSelection"
   | "clearDomSelection"
+  | "refreshDomEditSelectionFromPreview"
   | "handleDomStyleCommit"
   | "handleDomStyleCommitForSelection"
   | "handleDomAttributeCommit"
@@ -155,6 +156,7 @@ export function DomEditProvider({
     handlePreviewCanvasPointerLeave,
     applyDomSelection,
     clearDomSelection,
+    refreshDomEditSelectionFromPreview,
     handleDomStyleCommit,
     handleDomStyleCommitForSelection,
     handleDomAttributeCommit,
@@ -248,6 +250,7 @@ export function DomEditProvider({
       handlePreviewCanvasPointerLeave,
       applyDomSelection,
       clearDomSelection,
+      refreshDomEditSelectionFromPreview,
       handleDomStyleCommit,
       handleDomStyleCommitForSelection,
       handleDomAttributeCommit,
@@ -322,6 +325,7 @@ export function DomEditProvider({
       handlePreviewCanvasPointerLeave,
       applyDomSelection,
       clearDomSelection,
+      refreshDomEditSelectionFromPreview,
       handleDomStyleCommit,
       handleDomStyleCommitForSelection,
       handleDomAttributeCommit,

package/src/contexts/TimelineEditContext.tsx

@@ -44,9 +44,11 @@ export function TimelineEditProvider({
       value.onToggleTrackHidden,
       value.onSetAudioGroupAttributeLive,
       value.onSetAudioGroupAttributeQuiet,
+      value.onRevertAudioGroupAttributeLive,
       value.onGroupClips,
       value.onSetElementAttributeLive,
       value.onSetElementAttributeQuiet,
+      value.onRevertElementAttributeLive,
       value.onBlockedEditAttempt,
       value.onSplitElement,
       value.onRazorSplit,