feat(studio): gate flat inspector redesign

.fallowrc.jsonc

@@ -313,6 +313,28 @@
       "file": "packages/core/src/figma/manifest.ts",
       "exports": ["mediaDir", "typeDirPath", "isFigmaManifestRecord"],
     },
+    // STUDIO_FLAT_INSPECTOR_ENABLED: exported for use by downstream studio
+    // inspector redesign tasks; consumed by components in later PRs.
+    {
+      "file": "packages/studio/src/components/editor/manualEditingAvailability.ts",
+      "exports": ["STUDIO_FLAT_INSPECTOR_ENABLED"],
+    },
+    // TextAreaField: newly exported for FlatTextSection (flat inspector
+    // redesign, Task 8), which lands in a later commit on this branch.
+    {
+      "file": "packages/studio/src/components/editor/propertyPanelSections.tsx",
+      "exports": ["TextAreaField"],
+    },
+    // Link: its only consumer was FlatRadiusRow's uniform-only fallback row in
+    // propertyPanelFlatStyleSections.tsx, deleted by the Style parity fix
+    // (p8-task-style-parity) — that row was unreachable from a uniform radius
+    // and is now replaced by BorderRadiusEditor's own unlink toggle. Kept in
+    // the icon set for future reuse rather than deleted from a file outside
+    // this fix's scope.
+    {
+      "file": "packages/studio/src/icons/SystemIcons.tsx",
+      "exports": ["Link"],
+    },
   ],
   "ignoreDependencies": [
     // Runtime/dynamic deps not visible to static analysis: tsup `external`,
@@ -483,6 +505,18 @@
       // scopeRootSelectors handling shifts lines and re-flags both.
       "packages/core/src/compiler/inlineSubCompositions.ts",
       "packages/core/src/compiler/compositionScoping.test.ts",
+      // Studio flat-inspector redesign (Plans 2-4): each Flat*Section test file
+      // repeats the same renderInto/pointerdown-drag/reset-click scaffold as its
+      // sibling group's tests, added task-by-task across separate PRs on this
+      // branch. Pre-existing relative to Grade group (Plan 5) work; consistent
+      // with the norm above of leaving parallel arrange/act/assert test cases
+      // unabstracted where each case verifies a distinct control's behavior.
+      "packages/studio/src/components/editor/propertyPanelFlatMediaSection.test.tsx",
+      "packages/studio/src/components/editor/propertyPanelFlatMediaSection.tsx",
+      "packages/studio/src/components/editor/propertyPanelMediaSection.tsx",
+      "packages/studio/src/components/editor/PropertyPanel.test.tsx",
+      "packages/studio/src/components/editor/propertyPanelFlatStyleSections.test.tsx",
+      "packages/studio/src/components/editor/propertyPanelFlatMotionSection.test.tsx",
     ],
   },
   "health": {
@@ -660,6 +694,10 @@
       "packages/core/src/compiler/inlineSubCompositions.ts",
       "packages/core/src/compiler/htmlBundler.ts",
       "packages/core/src/runtime/compositionLoader.ts",
+      // TextFieldEditor: pre-existing complexity from earlier Text-inspector
+      // work on this same branch (commits 444639d75, b57b31beb, 6f2e9848c,
+      // eba8a0fa2), unrelated to the Grade group (Plan 5) currently landing.
+      "packages/studio/src/components/editor/propertyPanelSections.tsx",
     ],
   },
 }

packages/studio/src/components/StudioRightPanel.tsx

@@ -38,6 +38,7 @@ import {
   type ColorGradingScope,
 } from "./studioColorGradingScope";
 import type { BackgroundRemovalProgress } from "./editor/propertyPanelTypes";
+import { timelineKeysForSelections, type ToggleHiddenHandler } from "../utils/studioHelpers";
 
 const MIN_INSPECTOR_SPLIT_PERCENT = 20;
 const MAX_INSPECTOR_SPLIT_PERCENT = 75;
@@ -63,7 +64,7 @@ export interface StudioRightPanelProps {
     kind: EditHistoryKind;
     files: Record<string, { before: string; after: string }>;
   }) => Promise<void>;
-  onToggleElementHidden?: (elementKey: string, hidden: boolean) => Promise<void> | void;
+  onToggleElementHidden?: ToggleHiddenHandler;
 }
 
 // fallow-ignore-next-line complexity
@@ -109,6 +110,7 @@ export function StudioRightPanel({
     copiedAgentPrompt,
     clearDomSelection,
     handleUngroupSelection,
+    handleGroupSelection,
     handleDomStyleCommit,
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
@@ -342,6 +344,11 @@ export function StudioRightPanel({
     [projectId, refreshFileTree, showToast],
   );
 
+  const handleHideAllSelected = () => {
+    const { elements } = usePlayerStore.getState();
+    const keys = timelineKeysForSelections(domEditGroupSelections, elements, activeCompPath);
+    if (keys.length > 0) void onToggleElementHidden?.(keys, true);
+  };
   const propertyPanel = (
     <DesignPanelPromoteProvider
       selection={domEditGroupSelections.length > 1 ? null : domEditSelection}
@@ -359,6 +366,9 @@ export function StudioRightPanel({
         assets={assets}
         element={domEditGroupSelections.length > 1 ? null : domEditSelection}
         multiSelectCount={domEditGroupSelections.length}
+        multiSelectedElements={domEditGroupSelections}
+        onGroupSelection={handleGroupSelection}
+        onHideAllSelected={handleHideAllSelected}
         copiedAgentPrompt={copiedAgentPrompt}
         onClearSelection={clearDomSelection}
         onToggleElementHidden={onToggleElementHidden}
@@ -446,8 +456,6 @@ export function StudioRightPanel({
 
   return (
     <>
-      {/* Vertical resize divider: 3px visible seam, 8px pointer-capture zone via
-          the absolutely-positioned inner hit area. */}
       <div
         role="separator"
         aria-label="Resize inspector panel"
@@ -467,9 +475,7 @@ export function StudioRightPanel({
           setRightWidth(Math.max(160, Math.min(600, rightWidth + delta)));
         }}
       >
-        {/* Expanded hit zone: 8px wide, centered on the 3px seam */}
         <div className="absolute inset-y-0 -left-[2.5px] w-2" />
-        {/* Visible hairline */}
         <div className="absolute top-1/2 left-0 h-[52px] w-[3px] -translate-y-1/2 bg-white/12 transition-colors group-hover:bg-white/18 group-active:bg-white/24" />
       </div>
       <div
@@ -566,10 +572,6 @@ export function StudioRightPanel({
               ) : 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

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

@@ -0,0 +1,134 @@
+// @vitest-environment happy-dom
+
+import React, { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { AnimationCard } from "./AnimationCard";
+import type { GsapAnimation } from "@hyperframes/core/gsap-parser";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+function baseAnimation(overrides: Partial<GsapAnimation> = {}): GsapAnimation {
+  return {
+    id: "anim-1",
+    method: "to",
+    position: 0.8,
+    duration: 1.2,
+    ease: "power2.out",
+    properties: { opacity: 1 },
+    ...overrides,
+  } as GsapAnimation;
+}
+
+const noop = () => {};
+
+describe("AnimationCard flat branch", () => {
+  it("renders a mint border-left and panel-token colors when flat", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <AnimationCard
+          animation={baseAnimation()}
+          defaultExpanded={false}
+          flat
+          onUpdateProperty={noop}
+          onUpdateMeta={noop}
+          onDeleteAnimation={noop}
+          onAddProperty={noop}
+          onRemoveProperty={noop}
+        />,
+      );
+    });
+    const card = host.querySelector('[data-flat-effect-card="true"]');
+    expect(card).not.toBeNull();
+    expect(card?.className).toContain("border-panel-accent");
+    act(() => root.unmount());
+  });
+
+  it("still renders the legacy (non-flat) appearance when flat is omitted", () => {
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <AnimationCard
+          animation={baseAnimation()}
+          defaultExpanded={false}
+          onUpdateProperty={noop}
+          onUpdateMeta={noop}
+          onDeleteAnimation={noop}
+          onAddProperty={noop}
+          onRemoveProperty={noop}
+        />,
+      );
+    });
+    expect(host.querySelector('[data-flat-effect-card="true"]')).toBeNull();
+    expect(host.textContent).toContain("power2.out");
+    act(() => root.unmount());
+  });
+
+  it("toggles expanded state when the collapsed header button is clicked, in both modes", () => {
+    for (const flat of [false, true]) {
+      const host = document.createElement("div");
+      document.body.append(host);
+      const root = createRoot(host);
+      act(() => {
+        root.render(
+          <AnimationCard
+            animation={baseAnimation()}
+            defaultExpanded={false}
+            flat={flat || undefined}
+            onUpdateProperty={noop}
+            onUpdateMeta={noop}
+            onDeleteAnimation={noop}
+            onAddProperty={noop}
+            onRemoveProperty={noop}
+          />,
+        );
+      });
+      expect(host.textContent).not.toContain("Remove");
+      const button = host.querySelector("button");
+      expect(button).not.toBeNull();
+      act(() => {
+        button?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+      });
+      expect(host.textContent).toContain("Remove");
+      act(() => root.unmount());
+    }
+  });
+
+  it("invokes onDeleteAnimation with the animation id when Remove is clicked, in flat mode", () => {
+    const onDeleteAnimation = vi.fn();
+    const host = document.createElement("div");
+    document.body.append(host);
+    const root = createRoot(host);
+    act(() => {
+      root.render(
+        <AnimationCard
+          animation={baseAnimation()}
+          defaultExpanded={true}
+          flat
+          onUpdateProperty={noop}
+          onUpdateMeta={noop}
+          onDeleteAnimation={onDeleteAnimation}
+          onAddProperty={noop}
+          onRemoveProperty={noop}
+        />,
+      );
+    });
+    const buttons = Array.from(host.querySelectorAll("button"));
+    const removeButton = buttons.find((b) => b.textContent === "Remove");
+    expect(removeButton).not.toBeUndefined();
+    act(() => {
+      removeButton?.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+    expect(onDeleteAnimation).toHaveBeenCalledWith("anim-1");
+    act(() => root.unmount());
+  });
+});

packages/studio/src/components/editor/AnimationCard.tsx

@@ -21,12 +21,14 @@ import {
 interface AnimationCardProps extends GsapAnimationEditCallbacks {
   animation: GsapAnimation;
   defaultExpanded: boolean;
+  flat?: boolean;
 }
 
 // fallow-ignore-next-line complexity
 export const AnimationCard = memo(function AnimationCard({
   animation,
   defaultExpanded,
+  flat,
   onUpdateProperty,
   onUpdateMeta,
   onDeleteAnimation,
@@ -150,7 +152,14 @@ export const AnimationCard = memo(function AnimationCard({
     );
 
   return (
-    <div className="border-b border-neutral-800 pb-3">
+    <div
+      data-flat-effect-card={flat ? "true" : undefined}
+      className={
+        flat
+          ? "border-b border-l-2 border-panel-accent/40 border-b-panel-hairline pb-3 pl-2"
+          : "border-b border-neutral-800 pb-3"
+      }
+    >
       <button
         type="button"
         onClick={() => setExpanded((v) => !v)}
@@ -162,21 +171,27 @@ export const AnimationCard = memo(function AnimationCard({
         >
           {methodLabel}
         </span>
-        <span className="text-[11px] font-medium text-neutral-400" title="When this effect plays">
+        <span
+          className={`text-[11px] font-medium ${flat ? "text-panel-text-3" : "text-neutral-400"}`}
+          title="When this effect plays"
+        >
           {typeof animation.position === "number"
             ? `${parseFloat(animation.position.toFixed(3))}s`
             : animation.position}{" "}
           – {typeof endTime === "number" ? `${parseFloat(endTime.toFixed(3))}s` : endTime}
         </span>
-        <span className="ml-auto text-[10px] text-neutral-500" title={easeName}>
+        <span
+          className={`ml-auto text-[10px] ${flat ? "text-panel-text-3" : "text-neutral-500"}`}
+          title={easeName}
+        >
           {easeLabel}
         </span>
         <svg
           width="10"
           height="10"
           viewBox="0 0 10 10"
           fill="currentColor"
-          className={`flex-shrink-0 text-neutral-500 transition-transform ${expanded ? "" : "-rotate-90"}`}
+          className={`flex-shrink-0 transition-transform ${flat ? "text-panel-text-5" : "text-neutral-500"} ${expanded ? "" : "-rotate-90"}`}
         >
           <path d="M2 3l3 4 3-4z" />
         </svg>