feat(studio): add media treatment inspector

Author: ukimsanov

packages/studio/src/App.tsx

@@ -12,10 +12,7 @@ import { useFileManager } from "./hooks/useFileManager";
 import { usePreviewPersistence } from "./hooks/usePreviewPersistence";
 import { usePreviewDocumentVersion } from "./hooks/usePreviewDocumentVersion";
 import { useTimelineEditing } from "./hooks/useTimelineEditing";
-import {
-  persistTimelineMoveEditsAtomically,
-  type TimelineMoveOperation,
-} from "./hooks/timelineMoveAdapter";
+import { persistTimelineMoveEditsAtomically } from "./hooks/timelineMoveAdapter";
 import type { TimelineZIndexReorderCommit } from "./hooks/useTimelineEditingTypes";
 import type { TimelineStackingReorderIntent } from "./player/components/timelineStacking";
 import type { BlockPreviewInfo } from "./components/sidebar/BlocksTab";
@@ -65,6 +62,7 @@ import {
 } from "./utils/studioUrlState";
 import { trackStudioSessionStart } from "./telemetry/events";
 import { hasFiredSessionStart, markSessionStartFired } from "./telemetry/config";
+type TimelineMoveOperation = Parameters<typeof persistTimelineMoveEditsAtomically>[2];
 // fallow-ignore-next-line complexity
 export function StudioApp() {
   const { projectId, resolving, waitingForServer } = useServerConnection();
@@ -204,6 +202,7 @@ export function StudioApp() {
     setActiveBlockParams,
     handleAddBlock,
     handleTimelineBlockDrop,
+    handleAddMediaOverlay,
     handlePreviewBlockDrop,
   } = useBlockHandlers({
     projectId,
@@ -536,6 +535,7 @@ export function StudioApp() {
                           domEditSaveTimestampRef={domEditSaveTimestampRef}
                           recordEdit={editHistory.recordEdit}
                           onToggleElementHidden={timelineEditing.handleToggleElementHidden}
+                          onAddMediaOverlay={handleAddMediaOverlay}
                         />
                       )
                     }

packages/studio/src/components/StudioRightPanel.tsx

@@ -31,7 +31,10 @@ import {
   EMPTY_COLOR_GRADING_SCOPE_RESULT,
   type ColorGradingScope,
 } from "./studioColorGradingScope";
-import type { BackgroundRemovalProgress } from "./editor/propertyPanelTypes";
+import type {
+  AddMediaOverlayHandler,
+  BackgroundRemovalProgress,
+} from "./editor/propertyPanelTypes";
 import { timelineKeysForSelections, type ToggleHiddenHandler } from "../utils/studioHelpers";
 import { useInspectorSplitResize } from "../hooks/useInspectorSplitResize";
 
@@ -71,6 +74,7 @@ export interface StudioRightPanelProps extends StudioEditPersistenceProps {
     files: Record<string, { before: string; after: string }>;
   }) => Promise<void>;
   onToggleElementHidden?: ToggleHiddenHandler;
+  onAddMediaOverlay?: AddMediaOverlayHandler;
 }
 
 // fallow-ignore-next-line complexity
@@ -88,6 +92,7 @@ export function StudioRightPanel({
   domEditSaveTimestampRef,
   recordEdit,
   onToggleElementHidden,
+  onAddMediaOverlay,
 }: StudioRightPanelProps) {
   const {
     rightWidth,
@@ -372,6 +377,7 @@ export function StudioRightPanel({
         onRemoveTextField={handleDomRemoveTextField}
         onAskAgent={handleAskAgent}
         onImportAssets={handleImportFiles}
+        onAddMediaOverlay={onAddMediaOverlay}
         fontAssets={fontAssets}
         onImportFonts={handleImportFonts}
         previewIframeRef={previewIframeRef}

packages/studio/src/components/editor/PropertyPanel.test.tsx

@@ -812,10 +812,10 @@ describe("PropertyPanel — Media group (Plan 4)", () => {
 // design_handoff scrollable-open-section: collapsed headers before/after the
 // open group render in normal document flow and never move (no sticky, no
 // stacking offsets) — only the open group's own body content scrolls, in a
-// dedicated region between the two fixed header stacks. Worked example: 6
-// groups [text, style, layout, motion, grade, media], motion open (index 3)
+// dedicated region between the two fixed header stacks. Worked example: 7
+// groups [text, style, layout, motion, grade, effects, media], motion open (index 3)
 // -> text/style/layout render as fixed collapsed headers before it, motion
-// renders as an open header + scrollable body, grade/media render as fixed
+// renders as an open header + scrollable body, grade/effects/media render as fixed
 // collapsed headers after it — in exactly that DOM order, nothing sticky.
 describe("PropertyPanel — fixed headers + scrollable open section (Plan 11)", () => {
   it(
@@ -839,13 +839,14 @@ describe("PropertyPanel — fixed headers + scrollable open section (Plan 11)",
       });
       // Filter to just the group entries (drop any non-group nulls).
       const groupTitles = titles.filter((t): t is string => t !== null);
-      expect(groupTitles).toHaveLength(6);
+      expect(groupTitles).toHaveLength(7);
       expect(groupTitles[0]).toContain("Text");
       expect(groupTitles[1]).toContain("Style");
       expect(groupTitles[2]).toContain("Layout");
       expect(groupTitles[3]).toContain("Motion");
       expect(groupTitles[4]).toContain("Grade");
-      expect(groupTitles[5]).toContain("Media");
+      expect(groupTitles[5]).toContain("Effects");
+      expect(groupTitles[6]).toContain("Media");
 
       // The open group (Motion, index 3) is the one wrapped in
       // data-flat-group-open, sitting between the before/after collapsed
@@ -880,14 +881,15 @@ describe("PropertyPanel — fixed headers + scrollable open section (Plan 11)",
       const collapsedRows = Array.from(
         host.querySelectorAll<HTMLButtonElement>('[data-flat-group-collapsed="true"]'),
       );
-      expect(collapsedRows).toHaveLength(6);
+      expect(collapsedRows).toHaveLength(7);
       const titlesInOrder = collapsedRows.map((el) => el.textContent ?? "");
       expect(titlesInOrder[0]).toContain("Text");
       expect(titlesInOrder[1]).toContain("Style");
       expect(titlesInOrder[2]).toContain("Layout");
       expect(titlesInOrder[3]).toContain("Motion");
       expect(titlesInOrder[4]).toContain("Grade");
-      expect(titlesInOrder[5]).toContain("Media");
+      expect(titlesInOrder[5]).toContain("Effects");
+      expect(titlesInOrder[6]).toContain("Media");
 
       const body = host.querySelector('[data-flat-panel-body="true"]');
       expect(body?.querySelector(".overflow-y-auto")).toBeNull();