@hyperframes/studio 0.7.37 → 0.7.38

package/src/components/StudioRightPanel.tsx

@@ -1,5 +1,6 @@
 import {
   useCallback,
+  useEffect,
   useMemo,
   useRef,
   useState,
@@ -27,6 +28,13 @@ import { usePanelLayoutContext } from "../contexts/PanelLayoutContext";
 import { useFileManagerContext } from "../contexts/FileManagerContext";
 import { useDomEditContext } from "../contexts/DomEditContext";
 import { usePlayerStore } from "../player";
+import { waitForMediaJob } from "./studioMediaJobs";
+import {
+  applyColorGradingScopeUpdate,
+  EMPTY_COLOR_GRADING_SCOPE_RESULT,
+  type ColorGradingScope,
+} from "./studioColorGradingScope";
+import type { BackgroundRemovalProgress } from "./editor/propertyPanelTypes";
 
 const MIN_INSPECTOR_SPLIT_PERCENT = 20;
 const MAX_INSPECTOR_SPLIT_PERCENT = 75;
@@ -69,6 +77,7 @@ export function StudioRightPanel({
 }: StudioRightPanelProps) {
   const {
     rightWidth,
+    setRightWidth,
     rightPanelTab,
     setRightPanelTab,
     rightInspectorPanes,
@@ -82,6 +91,7 @@ export function StudioRightPanel({
     previewIframeRef,
     projectId,
     activeCompPath,
+    showToast,
     compositionDimensions,
     waitForPendingDomEditSaves,
     renderQueue,
@@ -136,8 +146,10 @@ export function StudioRightPanel({
     projectDir,
     handleImportFiles,
     handleImportFonts,
+    refreshFileTree,
     readProjectFile,
     writeProjectFile,
+    fileTree,
   } = useFileManagerContext();
 
   // Discrete ops (toggle, reorder, add/delete, hotspot): persist immediately,
@@ -172,6 +184,14 @@ export function StudioRightPanel({
     startPercent: number;
     height: number;
   } | null>(null);
+  const backgroundRemovalAbortRef = useRef<AbortController | null>(null);
+
+  useEffect(
+    () => () => {
+      backgroundRemovalAbortRef.current?.abort();
+    },
+    [],
+  );
 
   const renderJobs = renderQueue.jobs as RenderJob[];
   const inspectorTabActive = rightPanelTab === "design" || rightPanelTab === "layers";
@@ -233,6 +253,90 @@ export function StudioRightPanel({
     splitDragRef.current = null;
   }, []);
 
+  const handleApplyColorGradingScope = useCallback(
+    async (scope: ColorGradingScope, value: string | null) =>
+      applyColorGradingScopeUpdate({
+        scope,
+        value,
+        selectedSourceFile: domEditSelection?.sourceFile || activeCompPath || "index.html",
+        fileTree,
+        projectId,
+        domEditSaveTimestampRef,
+        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,
+      domEditSaveTimestampRef,
+      domEditSelection?.sourceFile,
+      fileTree,
+      projectId,
+      readProjectFile,
+      recordEdit,
+      reloadPreview,
+      showToast,
+      waitForPendingDomEditSaves,
+      writeProjectFile,
+    ],
+  );
+
+  const handleRemoveBackground = useCallback(
+    // fallow-ignore-next-line complexity
+    async (
+      inputPath: string,
+      options: {
+        createBackgroundPlate?: boolean;
+        quality?: "fast" | "balanced" | "best";
+        onProgress?: (progress: BackgroundRemovalProgress) => void;
+      },
+    ) => {
+      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(() => ({}))) as {
+        jobId?: string;
+        error?: string;
+      };
+      if (!response.ok || !data.jobId) {
+        throw new Error(data.error || `Background removal failed (${response.status})`);
+      }
+      showToast("Removing background...", "info");
+      backgroundRemovalAbortRef.current?.abort();
+      const controller = new AbortController();
+      backgroundRemovalAbortRef.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 (backgroundRemovalAbortRef.current === controller) {
+          backgroundRemovalAbortRef.current = null;
+        }
+      }
+    },
+    [projectId, refreshFileTree, showToast],
+  );
+
   const propertyPanel = (
     <PropertyPanel
       projectId={projectId}
@@ -246,7 +350,9 @@ export function StudioRightPanel({
       onSetStyle={handleDomStyleCommit}
       onSetAttribute={handleDomAttributeCommit}
       onSetAttributeLive={handleDomAttributeLiveCommit}
+      onApplyColorGradingScope={handleApplyColorGradingScope}
       onSetHtmlAttribute={handleDomHtmlAttributeCommit}
+      onRemoveBackground={handleRemoveBackground}
       onSetManualOffset={handleDomPathOffsetCommit}
       onSetManualSize={handleDomBoxSizeCommit}
       onSetManualRotation={handleDomRotationCommit}
@@ -295,6 +401,11 @@ export function StudioRightPanel({
       jobs={renderJobs}
       projectId={projectId}
       onDelete={renderQueue.deleteRender}
+      onCancel={renderQueue.cancelRender}
+      loadError={renderQueue.loadError}
+      onRetryLoad={renderQueue.reloadRenders}
+      actionError={renderQueue.actionError}
+      onDismissActionError={renderQueue.dismissActionError}
       onClearCompleted={renderQueue.clearCompleted}
       onStartRender={async (format, quality, resolution, fps) => {
         await waitForPendingDomEditSaves();
@@ -316,30 +427,43 @@ export function StudioRightPanel({
   return (
     <>
       <div
-        className="group w-2 flex-shrink-0 cursor-col-resize flex items-center justify-center"
+        role="separator"
+        aria-label="Resize inspector panel"
+        aria-orientation="vertical"
+        tabIndex={0}
+        className="group w-2 flex-shrink-0 cursor-col-resize flex items-center justify-center outline-none focus-visible:bg-studio-accent/20"
         style={{ touchAction: "none" }}
         onPointerDown={(e) => handlePanelResizeStart("right", e)}
         onPointerMove={handlePanelResizeMove}
         onPointerUp={handlePanelResizeEnd}
+        onPointerCancel={handlePanelResizeEnd}
+        onKeyDown={(e) => {
+          if (e.key !== "ArrowLeft" && e.key !== "ArrowRight") return;
+          e.preventDefault();
+          // Panel is right-anchored: ArrowLeft grows it, ArrowRight shrinks it.
+          const delta = e.key === "ArrowLeft" ? 16 : -16;
+          setRightWidth(Math.max(160, Math.min(600, rightWidth + delta)));
+        }}
       >
         <div className="h-[52px] w-px bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
       </div>
       <div
-        className="flex flex-col border-l border-neutral-800 bg-neutral-900 flex-shrink-0"
+        className="flex min-w-0 flex-shrink-0 flex-col overflow-hidden border-l border-neutral-800 bg-neutral-900"
         style={{ width: rightWidth }}
       >
         {captionEditMode ? (
           <CaptionPropertyPanel iframeRef={previewIframeRef} />
         ) : (
           <>
-            <div className="flex items-center gap-1 border-b border-neutral-800 px-3 py-2">
+            <div className="flex min-w-0 items-center gap-1 overflow-hidden border-b border-neutral-800 px-3 py-2">
               {STUDIO_INSPECTOR_PANELS_ENABLED && (
                 <>
                   <Tooltip label="Element styles and properties" side="bottom">
                     <button
                       type="button"
                       onClick={() => handleInspectorPaneButtonClick("design")}
-                      className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
+                      aria-pressed={designPaneOpen}
+                      className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors active:scale-[0.98] ${
                         designPaneOpen
                           ? "bg-neutral-800 text-white"
                           : "text-neutral-500 hover:bg-neutral-800/70 hover:text-neutral-200"
@@ -352,7 +476,8 @@ export function StudioRightPanel({
                     <button
                       type="button"
                       onClick={() => handleInspectorPaneButtonClick("layers")}
-                      className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
+                      aria-pressed={layersPaneOpen}
+                      className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors active:scale-[0.98] ${
                         layersPaneOpen
                           ? "bg-neutral-800 text-white"
                           : "text-neutral-500 hover:bg-neutral-800/70 hover:text-neutral-200"
@@ -367,7 +492,8 @@ export function StudioRightPanel({
                 <button
                   type="button"
                   onClick={() => setRightPanelTab("renders")}
-                  className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
+                  aria-pressed={rightPanelTab === "renders"}
+                  className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors active:scale-[0.98] ${
                     rightPanelTab === "renders"
                       ? "bg-neutral-800 text-white"
                       : "text-neutral-500 hover:bg-neutral-800/70 hover:text-neutral-200"
@@ -380,7 +506,8 @@ export function StudioRightPanel({
                 <button
                   type="button"
                   onClick={() => setRightPanelTab("slideshow")}
-                  className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors ${
+                  aria-pressed={rightPanelTab === "slideshow"}
+                  className={`h-8 rounded-xl px-3 text-[11px] font-medium transition-colors active:scale-[0.98] ${
                     rightPanelTab === "slideshow"
                       ? "bg-neutral-800 text-white"
                       : "text-neutral-500 hover:bg-neutral-800/70 hover:text-neutral-200"
@@ -390,7 +517,7 @@ export function StudioRightPanel({
                 </button>
               </Tooltip>
             </div>
-            <div className="min-h-0 flex-1">
+            <div className="min-h-0 min-w-0 flex-1 overflow-hidden">
               {rightPanelTab === "block-params" && activeBlockParams ? (
                 <BlockParamsPanel
                   blockName={activeBlockParams.blockName}
@@ -406,7 +533,7 @@ export function StudioRightPanel({
                   onPersistNotes={onPersistSlideshowNotes}
                 />
               ) : layersPaneOpen && designPaneOpen ? (
-                <div ref={splitContainerRef} className="flex h-full min-h-0 flex-col">
+                <div ref={splitContainerRef} className="flex h-full min-h-0 min-w-0 flex-col">
                   <div
                     className="min-h-[120px] overflow-hidden"
                     style={{ flexBasis: `${layersPanePercent}%`, flexShrink: 0 }}
@@ -432,6 +559,24 @@ export function StudioRightPanel({
                 <LayersPanel />
               ) : designPaneOpen ? (
                 propertyPanel
+              ) : inspectorTabActive ? (
+                // Inspector tab selected but no pane can render (panes toggled
+                // off, or inspector inactive during playback/recording): show an
+                // explanation instead of silently rendering the render queue
+                // under a highlighted inspector tab.
+                <div className="flex h-full flex-col items-center justify-center gap-3 px-6 text-center">
+                  <p className="text-xs text-neutral-500">
+                    Inspector is unavailable right now — select the Design or Layers pane above, or
+                    pause playback/recording to inspect elements.
+                  </p>
+                  <button
+                    type="button"
+                    onClick={() => setRightPanelTab("renders")}
+                    className="h-7 rounded-md border border-neutral-800 px-3 text-[11px] font-medium text-neutral-400 transition-colors hover:border-neutral-700 hover:text-neutral-200 active:scale-[0.98]"
+                  >
+                    Show Renders
+                  </button>
+                </div>
               ) : (
                 renderQueuePanel
               )}

package/src/components/StudioSplash.tsx

@@ -2,15 +2,18 @@ export function StudioSplash({ waiting }: { waiting?: boolean }) {
   return (
     <div className="h-full w-full bg-neutral-950 flex items-center justify-center">
       {waiting ? (
-        <div className="flex flex-col items-center gap-3 text-center px-6">
-          <div className="w-4 h-4 rounded-full border-2 border-neutral-700 border-t-neutral-500 animate-spin" />
+        <div className="flex flex-col items-center gap-3 text-center px-6" role="status">
+          <div className="w-4 h-4 rounded-full border-2 border-neutral-700 border-t-neutral-500 animate-spin motion-reduce:animate-none" />
           <p className="text-xs text-neutral-600">
             Waiting for preview server… run{" "}
             <code className="text-neutral-500 font-mono">npm run dev</code>
           </p>
         </div>
       ) : (
-        <div className="w-4 h-4 rounded-full bg-studio-accent animate-pulse" />
+        <div className="flex flex-col items-center gap-3 text-center px-6" role="status">
+          <div className="w-4 h-4 rounded-full bg-studio-accent animate-pulse motion-reduce:animate-none" />
+          <p className="text-xs text-neutral-600">Connecting to project…</p>
+        </div>
       )}
     </div>
   );

package/src/components/StudioToast.tsx

@@ -1,20 +1,20 @@
 interface StudioToastProps {
   message: string;
   tone?: "error" | "info";
+  /** Plays the exit animation when true (owner removes the node after ~160ms). */
+  leaving?: boolean;
   onDismiss?: () => void;
 }
 
-export function StudioToast({ message, tone, onDismiss }: StudioToastProps) {
+export function StudioToast({ message, tone, leaving, onDismiss }: StudioToastProps) {
   const isError = tone === "error";
   return (
     <div
-      className="absolute bottom-6 right-6 z-[91] animate-in fade-in slide-in-from-bottom-2"
-      onClick={onDismiss}
-      role={onDismiss ? "button" : undefined}
-      style={onDismiss ? { cursor: "pointer" } : undefined}
+      role={isError ? "alert" : "status"}
+      className={`motion-reduce:animate-none ${leaving ? "hf-toast-exit" : "hf-toast-enter"}`}
     >
       <div
-        className="relative flex items-center gap-3 overflow-hidden rounded-2xl pl-4 pr-2 py-3 text-[12px]"
+        className="relative flex max-w-[min(420px,calc(100vw-48px))] items-center gap-3 overflow-hidden rounded-2xl py-3 pl-4 pr-2 text-[12px]"
         style={{
           background: isError
             ? "linear-gradient(135deg, rgba(127,29,29,0.55), rgba(80,10,10,0.45))"
@@ -29,14 +29,15 @@ export function StudioToast({ message, tone, onDismiss }: StudioToastProps) {
           ].join(", "),
         }}
       >
-        <span className={isError ? "text-red-200" : "text-neutral-200"}>{message}</span>
+        <span
+          className={`min-w-0 break-words leading-5 ${isError ? "text-red-200" : "text-neutral-200"}`}
+        >
+          {message}
+        </span>
         {onDismiss && (
           <button
             type="button"
-            onClick={(e) => {
-              e.stopPropagation();
-              onDismiss();
-            }}
+            onClick={onDismiss}
             className="flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-md text-neutral-500 transition-colors hover:bg-white/10 hover:text-neutral-300"
             aria-label="Dismiss"
           >

package/src/components/TimelineToolbar.test.tsx

@@ -30,21 +30,27 @@ function renderToolbar() {
 describe("TimelineToolbar — auto-keyframe toggle (#1808)", () => {
   it("renders enabled (pressed) by default with no selection", () => {
     const { host, root } = renderToolbar();
-    const btn = host.querySelector<HTMLButtonElement>('button[aria-pressed="true"]');
+    const btn = host.querySelector<HTMLButtonElement>(
+      'button[aria-label="Auto-record manual edits as keyframes"]',
+    );
     expect(btn).not.toBeNull();
+    expect(btn?.getAttribute("aria-pressed")).toBe("true");
     act(() => root.unmount());
   });
 
   it("flips autoKeyframeEnabled in the store when clicked", () => {
     const { host, root } = renderToolbar();
-    const btn = host.querySelector<HTMLButtonElement>('button[aria-pressed="true"]')!;
+    const btn = host.querySelector<HTMLButtonElement>(
+      'button[aria-label="Auto-record manual edits as keyframes"]',
+    );
+    if (!btn) throw new Error("auto-keyframe toggle not rendered");
 
     act(() => {
       btn.dispatchEvent(new MouseEvent("click", { bubbles: true }));
     });
 
     expect(usePlayerStore.getState().autoKeyframeEnabled).toBe(false);
-    expect(host.querySelector('button[aria-pressed="false"]')).not.toBeNull();
+    expect(btn.getAttribute("aria-pressed")).toBe("false");
     act(() => root.unmount());
   });
 });

package/src/components/TimelineToolbar.tsx

@@ -112,7 +112,9 @@ export function TimelineToolbar({
                 <button
                   type="button"
                   onClick={() => setActiveTool("select")}
-                  className={`flex h-6 w-6 items-center justify-center transition-colors ${
+                  aria-label="Selection tool"
+                  aria-pressed={activeTool === "select"}
+                  className={`flex h-6 w-6 items-center justify-center transition-colors active:scale-[0.98] ${
                     activeTool === "select"
                       ? "bg-neutral-700 text-neutral-200"
                       : "text-neutral-500 hover:text-neutral-300"
@@ -123,11 +125,13 @@ export function TimelineToolbar({
                   </svg>
                 </button>
               </Tooltip>
-              <Tooltip label="Razor tool (B)">
+              <Tooltip label="Razor tool (B) — Shift+click splits all tracks">
                 <button
                   type="button"
                   onClick={() => setActiveTool("razor")}
-                  className={`flex h-6 w-6 items-center justify-center transition-colors ${
+                  aria-label="Razor tool"
+                  aria-pressed={activeTool === "razor"}
+                  className={`flex h-6 w-6 items-center justify-center transition-colors active:scale-[0.98] ${
                     activeTool === "razor"
                       ? "bg-neutral-700 text-neutral-200"
                       : "text-neutral-500 hover:text-neutral-300"
@@ -153,7 +157,12 @@ export function TimelineToolbar({
               <button
                 type="button"
                 onClick={onToggleKeyframe}
-                className={`flex h-7 w-7 items-center justify-center rounded transition-colors ${
+                aria-label={
+                  keyframeState === "active"
+                    ? "Remove keyframe at playhead"
+                    : "Add keyframe at playhead"
+                }
+                className={`flex h-7 w-7 items-center justify-center rounded transition-colors active:scale-[0.98] ${
                   keyframeState === "active"
                     ? "text-studio-accent"
                     : keyframeState === "inactive"
@@ -187,8 +196,9 @@ export function TimelineToolbar({
               <button
                 type="button"
                 onClick={() => setAutoKeyframeEnabled(!autoKeyframeEnabled)}
+                aria-label="Auto-record manual edits as keyframes"
                 aria-pressed={autoKeyframeEnabled}
-                className={`flex h-7 w-7 items-center justify-center rounded transition-colors ${
+                className={`flex h-7 w-7 items-center justify-center rounded transition-colors active:scale-[0.98] ${
                   autoKeyframeEnabled
                     ? "text-red-400 hover:text-red-300"
                     : "text-neutral-600 hover:text-neutral-400"
@@ -213,23 +223,35 @@ export function TimelineToolbar({
           )}
           {onSplitElement &&
             (() => {
+              // Render the button unconditionally (disabled when unusable):
+              // mounting/unmounting mid-task shifts the neighboring controls.
               const { selectedElementId, elements, currentTime } = usePlayerStore.getState();
               const el = selectedElementId
                 ? elements.find((e) => (e.key ?? e.id) === selectedElementId)
                 : null;
-              if (!el || !canSplitElement(el)) return null;
-              const canSplit = currentTime > el.start && currentTime < el.start + el.duration;
+              const splittable = el != null && canSplitElement(el);
+              const canSplit =
+                splittable && currentTime > el.start && currentTime < el.start + el.duration;
               return (
-                <Tooltip label="Split clip at playhead (S)">
+                <Tooltip
+                  label={
+                    canSplit
+                      ? "Split clip at playhead (S)"
+                      : splittable
+                        ? "Move the playhead inside the clip to split"
+                        : "Select a clip to split"
+                  }
+                >
                   <button
                     type="button"
                     disabled={!canSplit}
+                    aria-label="Split clip at playhead"
                     onClick={() => {
-                      if (canSplit) onSplitElement(el, currentTime);
+                      if (canSplit && el) onSplitElement(el, currentTime);
                     }}
                     className={`flex h-7 w-7 items-center justify-center rounded transition-colors ${
                       canSplit
-                        ? "text-neutral-500 hover:text-neutral-200"
+                        ? "text-neutral-500 hover:text-neutral-200 active:scale-[0.98]"
                         : "text-neutral-700 cursor-not-allowed"
                     }`}
                   >
@@ -239,26 +261,38 @@ export function TimelineToolbar({
               );
             })()}
           {beatAnalysisReady &&
-            canAddBeatAt(currentTime) &&
-            (() => (
-              <Tooltip label="Add beat at playhead">
-                <button
-                  type="button"
-                  onClick={() => addBeatAtCompositionTime(currentTime)}
-                  className="flex h-7 w-7 items-center justify-center rounded text-neutral-500 transition-colors hover:text-[#22c55e]"
+            (() => {
+              const canAdd = canAddBeatAt(currentTime);
+              return (
+                <Tooltip
+                  label={canAdd ? "Add beat at playhead" : "A beat already exists at the playhead"}
                 >
-                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
-                    <path
-                      d="M21 10C21 12.2091 16.9706 14 12 14M21 10C21 7.79086 16.9706 6 12 6C7.02944 6 3 7.79086 3 10M21 10V16C21 18.2091 16.9706 20 12 20M12 14C7.02944 14 3 12.2091 3 10M12 14V20M3 10V16C3 18.2091 7.02944 20 12 20M7 19.3264V13.3264M17 19.3264V13.3264M12 10L20 4"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                    />
-                  </svg>
-                </button>
-              </Tooltip>
-            ))()}
+                  <button
+                    type="button"
+                    disabled={!canAdd}
+                    aria-label="Add beat at playhead"
+                    onClick={() => {
+                      if (canAdd) addBeatAtCompositionTime(currentTime);
+                    }}
+                    className={`flex h-7 w-7 items-center justify-center rounded transition-colors ${
+                      canAdd
+                        ? "text-neutral-500 hover:text-[#22c55e] active:scale-[0.98]"
+                        : "text-neutral-700 cursor-not-allowed"
+                    }`}
+                  >
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
+                      <path
+                        d="M21 10C21 12.2091 16.9706 14 12 14M21 10C21 7.79086 16.9706 6 12 6C7.02944 6 3 7.79086 3 10M21 10V16C21 18.2091 16.9706 20 12 20M12 14C7.02944 14 3 12.2091 3 10M12 14V20M3 10V16C3 18.2091 7.02944 20 12 20M7 19.3264V13.3264M17 19.3264V13.3264M12 10L20 4"
+                        stroke="currentColor"
+                        strokeWidth="2"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                    </svg>
+                  </button>
+                </Tooltip>
+              );
+            })()}
         </div>
         <div className="flex items-center gap-1">
           <Tooltip label="Fit timeline to width">

package/src/components/editor/PropertyPanel.tsx

@@ -22,11 +22,7 @@ import { TextSection, StyleSections } from "./propertyPanelSections";
 import { GsapAnimationSection } from "./GsapAnimationSection";
 import { PropertyPanel3dTransform } from "./propertyPanel3dTransform";
 import { KeyframeNavigation } from "./KeyframeNavigation";
-import {
-  STUDIO_COLOR_GRADING_ENABLED,
-  STUDIO_GSAP_PANEL_ENABLED,
-  STUDIO_KEYFRAMES_ENABLED,
-} from "./manualEditingAvailability";
+import { STUDIO_GSAP_PANEL_ENABLED, STUDIO_KEYFRAMES_ENABLED } from "./manualEditingAvailability";
 import { usePlayerStore, liveTime } from "../../player";
 import { TimingSection } from "./propertyPanelTimingSection";
 import { type PropertyPanelProps } from "./propertyPanelHelpers";
@@ -57,7 +53,9 @@ export const PropertyPanel = memo(function PropertyPanel({
   onSetStyle,
   onSetAttribute,
   onSetAttributeLive,
+  onApplyColorGradingScope,
   onSetHtmlAttribute,
+  onRemoveBackground,
   onSetManualOffset,
   onSetManualSize,
   onSetManualRotation,
@@ -352,18 +350,7 @@ export const PropertyPanel = memo(function PropertyPanel({
             onSetAttribute={onSetAttribute}
           />
         )}
-        {sections.media && (
-          <MediaSection
-            projectDir={projectDir}
-            element={element}
-            styles={styles}
-            onSetStyle={onSetStyle}
-            onSetAttribute={onSetAttribute}
-            onSetHtmlAttribute={onSetHtmlAttribute}
-          />
-        )}
-
-        {STUDIO_COLOR_GRADING_ENABLED && sections.colorGrading && (
+        {sections.colorGrading && (
           <ColorGradingSection
             key={[
               element.id ?? "",
@@ -371,11 +358,25 @@ export const PropertyPanel = memo(function PropertyPanel({
               element.selector ?? "",
               String(element.selectorIndex ?? ""),
             ].join("|")}
+            projectId={projectId}
             element={element}
             assets={assets}
             previewIframeRef={previewIframeRef}
             onImportAssets={onImportAssets}
             onSetAttributeLive={onSetAttributeLive}
+            onApplyScope={onApplyColorGradingScope}
+          />
+        )}
+
+        {sections.media && (
+          <MediaSection
+            projectDir={projectDir}
+            element={element}
+            styles={styles}
+            onSetStyle={onSetStyle}
+            onSetAttribute={onSetAttribute}
+            onSetHtmlAttribute={onSetHtmlAttribute}
+            onRemoveBackground={onRemoveBackground}
           />
         )}