@hyperframes/studio 0.7.58 → 0.7.60

package/dist/styles/tailwind-preset.d.ts

@@ -12,11 +12,14 @@ declare namespace studioPreset {
                 }
                 let panel: {
                     bg: string;
+                    "bg-inset": string;
                     input: string;
                     surface: string;
                     hover: string;
                     border: string;
                     "border-input": string;
+                    hairline: string;
+                    "text-0": string;
                     "text-1": string;
                     "text-2": string;
                     "text-3": string;
@@ -24,6 +27,8 @@ declare namespace studioPreset {
                     "text-5": string;
                     accent: string;
                     danger: string;
+                    media: string;
+                    container: string;
                 };
             }
         }

package/dist/styles/tailwind-preset.js

@@ -13,18 +13,25 @@ var studioPreset = {
         },
         panel: {
           bg: "#0C0C0E",
+          // Open inspector-section body — slightly lighter than headers (bg)
+          // so the recessed scrollable region reads distinct.
+          "bg-inset": "#121214",
           input: "#161618",
           surface: "#18181B",
           hover: "#27272A",
           border: "#1E1E1E",
           "border-input": "#27272A",
+          hairline: "#1A1A1C",
+          "text-0": "#FAFAFA",
           "text-1": "#E4E4E7",
           "text-2": "#A1A1AA",
           "text-3": "#71717A",
           "text-4": "#52525B",
           "text-5": "#3F3F46",
           accent: "#3CE6AC",
-          danger: "#EF4444"
+          danger: "#EF4444",
+          media: "#00E3FF",
+          container: "#F5A623"
         }
       }
     }

package/dist/styles/tailwind-preset.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/styles/tailwind-preset.shared.js","../../src/styles/tailwind-preset.ts"],"sourcesContent":["const studioPreset = {\n  theme: {\n    extend: {\n      colors: {\n        studio: {\n          bg: \"#0a0a0a\",\n          surface: \"#141414\",\n          border: \"#262626\",\n          text: \"#e5e5e5\",\n          muted: \"#737373\",\n          accent: \"#3CE6AC\",\n        },\n        panel: {\n          bg: \"#0C0C0E\",\n          input: \"#161618\",\n          surface: \"#18181B\",\n          hover: \"#27272A\",\n          border: \"#1E1E1E\",\n          \"border-input\": \"#27272A\",\n          \"text-1\": \"#E4E4E7\",\n          \"text-2\": \"#A1A1AA\",\n          \"text-3\": \"#71717A\",\n          \"text-4\": \"#52525B\",\n          \"text-5\": \"#3F3F46\",\n          accent: \"#3CE6AC\",\n          danger: \"#EF4444\",\n        },\n      },\n    },\n  },\n  plugins: [],\n};\n\nexport default studioPreset;\n","import studioPreset from \"./tailwind-preset.shared.js\";\n\nexport default studioPreset;\n"],"mappings":";AAAA,IAAM,eAAe;AAAA,EACnB,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,QAAQ;AAAA,UACN,IAAI;AAAA,UACJ,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QACA,OAAO;AAAA,UACL,IAAI;AAAA,UACJ,OAAO;AAAA,UACP,SAAS;AAAA,UACT,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,QAAQ;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,SAAS,CAAC;AACZ;AAEA,IAAO,iCAAQ;;;AC/Bf,IAAO,0BAAQ;","names":[]}
+{"version":3,"sources":["../../src/styles/tailwind-preset.shared.js","../../src/styles/tailwind-preset.ts"],"sourcesContent":["const studioPreset = {\n  theme: {\n    extend: {\n      colors: {\n        studio: {\n          bg: \"#0a0a0a\",\n          surface: \"#141414\",\n          border: \"#262626\",\n          text: \"#e5e5e5\",\n          muted: \"#737373\",\n          accent: \"#3CE6AC\",\n        },\n        panel: {\n          bg: \"#0C0C0E\",\n          // Open inspector-section body — slightly lighter than headers (bg)\n          // so the recessed scrollable region reads distinct.\n          \"bg-inset\": \"#121214\",\n          input: \"#161618\",\n          surface: \"#18181B\",\n          hover: \"#27272A\",\n          border: \"#1E1E1E\",\n          \"border-input\": \"#27272A\",\n          hairline: \"#1A1A1C\",\n          \"text-0\": \"#FAFAFA\",\n          \"text-1\": \"#E4E4E7\",\n          \"text-2\": \"#A1A1AA\",\n          \"text-3\": \"#71717A\",\n          \"text-4\": \"#52525B\",\n          \"text-5\": \"#3F3F46\",\n          accent: \"#3CE6AC\",\n          danger: \"#EF4444\",\n          media: \"#00E3FF\",\n          container: \"#F5A623\",\n        },\n      },\n    },\n  },\n  plugins: [],\n};\n\nexport default studioPreset;\n","import studioPreset from \"./tailwind-preset.shared.js\";\n\nexport default studioPreset;\n"],"mappings":";AAAA,IAAM,eAAe;AAAA,EACnB,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,QAAQ;AAAA,QACN,QAAQ;AAAA,UACN,IAAI;AAAA,UACJ,SAAS;AAAA,UACT,QAAQ;AAAA,UACR,MAAM;AAAA,UACN,OAAO;AAAA,UACP,QAAQ;AAAA,QACV;AAAA,QACA,OAAO;AAAA,UACL,IAAI;AAAA;AAAA;AAAA,UAGJ,YAAY;AAAA,UACZ,OAAO;AAAA,UACP,SAAS;AAAA,UACT,OAAO;AAAA,UACP,QAAQ;AAAA,UACR,gBAAgB;AAAA,UAChB,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU;AAAA,UACV,QAAQ;AAAA,UACR,QAAQ;AAAA,UACR,OAAO;AAAA,UACP,WAAW;AAAA,QACb;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAAA,EACA,SAAS,CAAC;AACZ;AAEA,IAAO,iCAAQ;;;ACtCf,IAAO,0BAAQ;","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyperframes/studio",
-  "version": "0.7.58",
+  "version": "0.7.60",
   "description": "",
   "repository": {
     "type": "git",
@@ -46,11 +46,11 @@
     "gsap": "^3.13.0",
     "marked": "^14.1.4",
     "mediabunny": "^1.45.3",
-    "@hyperframes/core": "0.7.58",
-    "@hyperframes/parsers": "0.7.58",
-    "@hyperframes/player": "0.7.58",
-    "@hyperframes/sdk": "0.7.58",
-    "@hyperframes/studio-server": "0.7.58"
+    "@hyperframes/core": "0.7.60",
+    "@hyperframes/player": "0.7.60",
+    "@hyperframes/sdk": "0.7.60",
+    "@hyperframes/parsers": "0.7.60",
+    "@hyperframes/studio-server": "0.7.60"
   },
   "devDependencies": {
     "@types/react": "19",
@@ -65,7 +65,7 @@
     "vite": "^6.4.2",
     "vitest": "^3.2.4",
     "zustand": "^5.0.0",
-    "@hyperframes/producer": "0.7.58"
+    "@hyperframes/producer": "0.7.60"
   },
   "peerDependencies": {
     "react": "19",

package/src/App.tsx

@@ -64,21 +64,18 @@ import {
 } from "./utils/studioUrlState";
 import { trackStudioSessionStart } from "./telemetry/events";
 import { hasFiredSessionStart, markSessionStartFired } from "./telemetry/config";
-
 type CanvasRect = { left: number; top: number; width: number; height: number };
 // fallow-ignore-next-line complexity
 export function StudioApp() {
   const { projectId, resolving, waitingForServer } = useServerConnection();
   const initialUrlStateRef = useRef(readStudioUrlStateFromWindow());
   const viewModeValue = useViewModeState();
-
   useEffect(() => {
     if (resolving || waitingForServer) return;
     if (hasFiredSessionStart()) return;
     markSessionStartFired();
     trackStudioSessionStart({ has_project: projectId != null });
   }, [projectId, resolving, waitingForServer]);
-
   const [activeCompPath, setActiveCompPath] = useState<string | null>(null);
   const [activeCompPathHydrated, setActiveCompPathHydrated] = useState(
     () => initialUrlStateRef.current.activeCompPath == null,
@@ -168,6 +165,7 @@ export function StudioApp() {
     timelineElements,
     showToast,
     writeProjectFile: fileManager.writeProjectFile,
+    observeProjectFileVersion: fileManager.observeProjectFileVersion,
     recordEdit: editHistory.recordEdit,
     domEditSaveTimestampRef,
     reloadPreview,
@@ -176,6 +174,7 @@ export function StudioApp() {
     uploadProjectFiles: fileManager.uploadProjectFiles,
     isRecordingRef: isGestureRecordingRef,
     sdkSession: editFlowSdkSession,
+    publishSdkSession: sdkHandle.publish,
     forceReloadSdkSession: sdkHandle.forceReload,
     handleDomZIndexReorderCommitRef,
   });
@@ -317,6 +316,7 @@ export function StudioApp() {
     selectSidebarTab: sidebarTabRef.current.select,
     getSidebarTab: sidebarTabRef.current.get,
     sdkSession: editFlowSdkSession,
+    publishSdkSession: sdkHandle.publish,
     forceReloadSdkSession: sdkHandle.forceReload,
   });
   domEditSelectionBridgeRef.current = domEditSession.domEditSelection;
@@ -331,7 +331,6 @@ export function StudioApp() {
     domEditSession.domEditSelection,
     domEditSession.domEditGroupSelections,
   );
-
   useCaptionDetection({
     projectId,
     activeCompPath,
@@ -533,6 +532,7 @@ export function StudioApp() {
                           recordingDuration={gestureRecording.recordingDuration}
                           onToggleRecording={recordingToggle}
                           sdkSession={sdkHandle.session}
+                          publishSdkSession={sdkHandle.publish}
                           reloadPreview={reloadPreview}
                           domEditSaveTimestampRef={domEditSaveTimestampRef}
                           recordEdit={editHistory.recordEdit}

package/src/components/DesignPanelPromoteProvider.tsx

@@ -9,11 +9,12 @@
  * composition, so behavior there is unchanged.
  */
 
-import type { ReactNode } from "react";
+import { useCallback, type ReactNode } from "react";
 import type { DomEditSelection } from "./editor/domEditingTypes";
 import { useSdkSession } from "../hooks/useSdkSession";
 import { useVariablesPersist, type UseVariablesPersistParams } from "../hooks/useVariablesPersist";
 import { VariablePromoteProvider } from "../contexts/VariablePromoteContext";
+import { getStudioSaveErrorMessage } from "../utils/studioSaveDiagnostics";
 
 /** Persist wiring minus the target — this provider derives the target from the selection. */
 type PersistDeps = Omit<UseVariablesPersistParams, "sdkSession" | "activeCompPath">;
@@ -22,12 +23,14 @@ export function DesignPanelPromoteProvider({
   selection,
   projectId,
   activeCompPath,
+  showToast,
   children,
   ...persistDeps
 }: PersistDeps & {
   selection: DomEditSelection | null;
   projectId: string | null;
   activeCompPath: string | null;
+  showToast: (message: string, tone?: "error" | "info") => void;
   children: ReactNode;
 }) {
   const targetPath = selection?.sourceFile || activeCompPath || "index.html";
@@ -35,10 +38,20 @@ export function DesignPanelPromoteProvider({
   const persist = useVariablesPersist({
     ...persistDeps,
     sdkSession: handle.session,
+    publishSdkSession: handle.publish,
     activeCompPath: targetPath,
   });
+  const handlePersistError = useCallback(
+    (error: unknown) => showToast(getStudioSaveErrorMessage(error), "error"),
+    [showToast],
+  );
   return (
-    <VariablePromoteProvider session={handle.session} selection={selection} persist={persist}>
+    <VariablePromoteProvider
+      session={handle.session}
+      selection={selection}
+      persist={persist}
+      onPersistError={handlePersistError}
+    >
       {children}
     </VariablePromoteProvider>
   );

package/src/components/StudioRightPanel.tsx

@@ -1,12 +1,4 @@
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type MutableRefObject,
-  type PointerEvent as ReactPointerEvent,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, type MutableRefObject } from "react";
 import { PropertyPanel } from "./editor/PropertyPanel";
 import { LayersPanel } from "./editor/LayersPanel";
 import { CaptionPropertyPanel } from "../captions/components/CaptionPropertyPanel";
@@ -20,10 +12,13 @@ import { usePreviewVariablesStore } from "../hooks/previewVariablesStore";
 import type { RenderJob } from "./renders/useRenderQueue";
 import type { BlockParam } from "@hyperframes/core/registry";
 import type { IframeWindow } from "../player/lib/playbackTypes";
-import { STUDIO_INSPECTOR_PANELS_ENABLED } from "./editor/manualEditingAvailability";
+import {
+  STUDIO_FLAT_INSPECTOR_ENABLED,
+  STUDIO_INSPECTOR_PANELS_ENABLED,
+} from "./editor/manualEditingAvailability";
 import type { Composition } from "@hyperframes/sdk";
 import type { EditHistoryKind } from "../utils/editHistory";
-import { useSlideshowPersist } from "../hooks/useSlideshowPersist";
+import { useSlideshowPersist, type UseSlideshowPersistParams } from "../hooks/useSlideshowPersist";
 import { DesignPanelPromoteProvider } from "./DesignPanelPromoteProvider";
 
 import { useStudioPlaybackContext, useStudioShellContext } from "../contexts/StudioContext";
@@ -38,9 +33,8 @@ import {
   type ColorGradingScope,
 } from "./studioColorGradingScope";
 import type { BackgroundRemovalProgress } from "./editor/propertyPanelTypes";
-
-const MIN_INSPECTOR_SPLIT_PERCENT = 20;
-const MAX_INSPECTOR_SPLIT_PERCENT = 75;
+import { timelineKeysForSelections, type ToggleHiddenHandler } from "../utils/studioHelpers";
+import { useInspectorSplitResize } from "../hooks/useInspectorSplitResize";
 
 export interface StudioRightPanelProps {
   designPanelActive: boolean;
@@ -56,6 +50,7 @@ export interface StudioRightPanelProps {
   onToggleRecording?: () => void;
   /** Dependencies for the Slideshow persist callback, threaded from App.tsx. */
   sdkSession: Composition | null;
+  publishSdkSession: NonNullable<UseSlideshowPersistParams["publishSdkSession"]>;
   reloadPreview: () => void;
   domEditSaveTimestampRef: MutableRefObject<number>;
   recordEdit: (entry: {
@@ -63,7 +58,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
@@ -75,6 +70,7 @@ export function StudioRightPanel({
   recordingDuration,
   onToggleRecording,
   sdkSession,
+  publishSdkSession,
   reloadPreview,
   domEditSaveTimestampRef,
   recordEdit,
@@ -87,6 +83,7 @@ export function StudioRightPanel({
     setRightPanelTab,
     rightInspectorPanes,
     toggleRightInspectorPane,
+    setExclusiveRightInspectorPane,
     handlePanelResizeStart,
     handlePanelResizeMove,
     handlePanelResizeEnd,
@@ -109,10 +106,12 @@ export function StudioRightPanel({
     copiedAgentPrompt,
     clearDomSelection,
     handleUngroupSelection,
+    handleGroupSelection,
     handleDomStyleCommit,
     handleDomAttributeCommit,
     handleDomAttributeLiveCommit,
     handleDomHtmlAttributeCommit,
+    handleDomAttributesCommit,
     handleDomPathOffsetCommit,
     handleDomBoxSizeCommit,
     handleDomRotationCommit,
@@ -167,6 +166,7 @@ export function StudioRightPanel({
     recordEdit,
     reloadPreview,
     domEditSaveTimestampRef,
+    publishSdkSession,
   });
 
   // Notes path: persists are debounced in SlideshowPanel; coalesceKey ensures
@@ -179,16 +179,17 @@ export function StudioRightPanel({
     recordEdit,
     reloadPreview,
     domEditSaveTimestampRef,
+    publishSdkSession,
     coalesceKey: activeCompPath ? `slideshow-notes:${activeCompPath}` : "slideshow-notes",
   });
 
-  const [layersPanePercent, setLayersPanePercent] = useState(40);
-  const splitContainerRef = useRef<HTMLDivElement>(null);
-  const splitDragRef = useRef<{
-    startY: number;
-    startPercent: number;
-    height: number;
-  } | null>(null);
+  const {
+    layersPanePercent,
+    splitContainerRef,
+    handleInspectorSplitResizeStart,
+    handleInspectorSplitResizeMove,
+    handleInspectorSplitResizeEnd,
+  } = useInspectorSplitResize();
   const backgroundRemovalAbortRef = useRef<AbortController | null>(null);
 
   useEffect(
@@ -226,38 +227,16 @@ export function StudioRightPanel({
       setRightPanelTab(pane);
       return;
     }
+    // Flat inspector: Layers always renders full-height by itself (see the
+    // render branch below), so the two panes are mutually exclusive here —
+    // otherwise both tabs could show "active" while only one actually shows.
+    if (STUDIO_FLAT_INSPECTOR_ENABLED) {
+      setExclusiveRightInspectorPane(pane);
+      return;
+    }
     toggleRightInspectorPane(pane);
   };
 
-  const handleInspectorSplitResizeStart = useCallback(
-    (event: ReactPointerEvent<HTMLDivElement>) => {
-      event.preventDefault();
-      event.currentTarget.setPointerCapture(event.pointerId);
-      const height = splitContainerRef.current?.getBoundingClientRect().height ?? 0;
-      splitDragRef.current = {
-        startY: event.clientY,
-        startPercent: layersPanePercent,
-        height,
-      };
-    },
-    [layersPanePercent],
-  );
-
-  const handleInspectorSplitResizeMove = useCallback((event: ReactPointerEvent<HTMLDivElement>) => {
-    const drag = splitDragRef.current;
-    if (!drag || drag.height <= 0) return;
-    const deltaPercent = ((event.clientY - drag.startY) / drag.height) * 100;
-    const next = Math.min(
-      MAX_INSPECTOR_SPLIT_PERCENT,
-      Math.max(MIN_INSPECTOR_SPLIT_PERCENT, drag.startPercent + deltaPercent),
-    );
-    setLayersPanePercent(next);
-  }, []);
-
-  const handleInspectorSplitResizeEnd = useCallback(() => {
-    splitDragRef.current = null;
-  }, []);
-
   const handleApplyColorGradingScope = useCallback(
     async (scope: ColorGradingScope, value: string | null) =>
       applyColorGradingScopeUpdate({
@@ -341,12 +320,17 @@ 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}
       projectId={projectId}
       activeCompPath={activeCompPath}
+      showToast={showToast}
       readProjectFile={readProjectFile}
       writeProjectFile={writeProjectFile}
       recordEdit={recordEdit}
@@ -359,12 +343,16 @@ 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}
         onUngroup={handleUngroupSelection}
         onSetStyle={handleDomStyleCommit}
         onSetAttribute={handleDomAttributeCommit}
+        onSetAttributes={handleDomAttributesCommit}
         onSetAttributeLive={handleDomAttributeLiveCommit}
         onApplyColorGradingScope={handleApplyColorGradingScope}
         onSetHtmlAttribute={handleDomHtmlAttributeCommit}
@@ -534,11 +522,12 @@ export function StudioRightPanel({
               ) : rightPanelTab === "variables" ? (
                 <VariablesPanel
                   sdkSession={sdkSession}
+                  publishSdkSession={publishSdkSession}
                   reloadPreview={reloadPreview}
                   domEditSaveTimestampRef={domEditSaveTimestampRef}
                   recordEdit={recordEdit}
                 />
-              ) : layersPaneOpen && designPaneOpen ? (
+              ) : layersPaneOpen && designPaneOpen && !STUDIO_FLAT_INSPECTOR_ENABLED ? (
                 <div ref={splitContainerRef} className="flex h-full min-h-0 min-w-0 flex-col">
                   <div
                     className="min-h-[120px] overflow-hidden"

package/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());
+  });
+});

package/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,13 +171,19 @@ 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
@@ -176,7 +191,7 @@ export const AnimationCard = memo(function AnimationCard({
           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>

package/src/components/editor/ArcPathControls.tsx

@@ -113,6 +113,7 @@ export const ArcPathControls = memo(function ArcPathControls({
                 )}
               </div>
               <SliderControl
+                trackName={segmentCount === 1 ? "Curviness" : `Segment ${i + 1} curviness`}
                 value={seg.curviness}
                 min={0}
                 max={3}

package/src/components/editor/GestureRecordControl.tsx

@@ -1,3 +1,5 @@
+import { useTrackDesignInput } from "../../contexts/DesignPanelInputContext";
+
 export type GestureRecordingState = "idle" | "recording" | "preview";
 
 interface GestureRecordIconProps {
@@ -28,13 +30,17 @@ export function GestureRecordPanelButton({
   onToggleRecording,
 }: GestureRecordPanelButtonProps) {
   const recording = recordingState === "recording";
+  const track = useTrackDesignInput();
 
   return (
     <div className="px-4 pb-3">
       <button
         type="button"
         onMouseDown={(e) => e.preventDefault()}
-        onClick={onToggleRecording}
+        onClick={() => {
+          track("button", "Gesture recording");
+          onToggleRecording();
+        }}
         className={`w-full flex items-center justify-center gap-2 rounded-lg py-2 text-[11px] font-medium transition-colors ${
           recording
             ? "bg-red-500/15 text-red-400 border border-red-500/30 animate-pulse"