@hyperframes/studio 0.8.6 → 0.8.7

package/src/components/editor/KeyframeNavigation.tsx

@@ -177,7 +177,9 @@ export const KeyframeNavigation = memo(function KeyframeNavigation({
         type="button"
         disabled={!prevKf}
         onClick={() => prevKf && onSeek(prevKf.percentage)}
-        className="flex h-5 w-3 items-center justify-center disabled:cursor-default"
+        title="Previous keyframe"
+        aria-label={`Previous ${property} keyframe`}
+        className="relative flex h-5 w-3 items-center justify-center disabled:cursor-default before:absolute before:-inset-1.5 before:content-['']"
       >
         <ArrowLeft disabled={!prevKf} />
       </button>
@@ -197,7 +199,9 @@ export const KeyframeNavigation = memo(function KeyframeNavigation({
         type="button"
         disabled={!nextKf}
         onClick={() => nextKf && onSeek(nextKf.percentage)}
-        className="flex h-5 w-3 items-center justify-center disabled:cursor-default"
+        title="Next keyframe"
+        aria-label={`Next ${property} keyframe`}
+        className="relative flex h-5 w-3 items-center justify-center disabled:cursor-default before:absolute before:-inset-1.5 before:content-['']"
       >
         <ArrowRight disabled={!nextKf} />
       </button>

package/src/components/editor/LayersPanel.tsx

@@ -469,14 +469,23 @@ export const LayersPanel = memo(function LayersPanel() {
                   : selected
                     ? "bg-panel-accent/14 text-panel-accent"
                     : "text-panel-text-2 hover:bg-panel-hover/40 hover:text-panel-text-1"
-              } ${dragKey ? "cursor-grabbing" : draggable ? "cursor-pointer" : "cursor-not-allowed opacity-50"}`}
+              } ${dragKey ? "cursor-grabbing" : "cursor-pointer"}`}
               style={{ paddingLeft: 8 + layer.depth * 16 }}
+              title={
+                draggable
+                  ? layer.element.hasAttribute("data-hf-group")
+                    ? "Double-click to enter group"
+                    : undefined
+                  : "This layer can't be reordered"
+              }
             >
               {hasChildren ? (
                 <button
                   type="button"
                   onClick={(e) => toggleCollapse(layer.key, e)}
-                  className="flex h-4 w-4 flex-shrink-0 items-center justify-center rounded text-neutral-500 hover:text-neutral-300"
+                  aria-expanded={!isCollapsed}
+                  aria-label={isCollapsed ? "Expand children" : "Collapse children"}
+                  className="relative flex h-4 w-4 flex-shrink-0 items-center justify-center rounded text-neutral-500 hover:text-neutral-300 before:absolute before:-inset-1.5 before:content-['']"
                 >
                   <svg
                     width="8"

package/src/components/editor/MotionPathNode.tsx

@@ -55,6 +55,7 @@ export function MotionPathNode(props: {
           onPointerDown={props.onPointerDown}
           onPointerMove={props.onPointerMove}
           onPointerUp={props.onPointerUp}
+          onPointerCancel={props.onPointerUp}
           onContextMenu={props.onContextMenu}
         />
       )}

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

@@ -536,12 +536,11 @@ describe("PropertyPanel — flat Layout/Motion timing agreement (whole-plan cohe
       if (!xRow) throw new Error("expected an X row");
       const gutter = xRow.querySelector('[data-flat-kf-gutter="true"]');
       if (!gutter) throw new Error("expected a keyframe gutter on the X row");
-      // The diamond button always carries a `title`; the two plain arrow
-      // buttons don't. At currentPct=0 (playhead on the 0% keyframe), the prev
-      // arrow is disabled (no earlier keyframe) and the next arrow seeks to
-      // the 50% keyframe — exactly the case the coherence bug affected.
+      // At currentPct=0 (playhead on the 0% keyframe) the prev arrow is
+      // disabled (no earlier keyframe) and the next arrow seeks to the 50%
+      // keyframe — exactly the case the coherence bug affected.
       const nextArrow = Array.from(gutter.querySelectorAll<HTMLButtonElement>("button")).find(
-        (b) => !b.title && !b.disabled,
+        (b) => b.title === "Next keyframe" && !b.disabled,
       );
       if (!nextArrow) throw new Error("expected an enabled next-keyframe arrow button");
       act(() => nextArrow.dispatchEvent(new MouseEvent("click", { bubbles: true })));
@@ -582,7 +581,9 @@ describe("PropertyPanel — flat Layout currentPct basis (currentPct follow-up f
       if (!xRow) throw new Error("expected an X row");
       const gutter = xRow.querySelector('[data-flat-kf-gutter="true"]');
       if (!gutter) throw new Error("expected a keyframe gutter on the X row");
-      const diamond = gutter.querySelector<HTMLButtonElement>("button[title]");
+      // The diamond is the only gutter button that reports a pressed state;
+      // the prev/next arrows carry titles too, so `button[title]` is ambiguous.
+      const diamond = gutter.querySelector<HTMLButtonElement>("button[aria-pressed]");
       if (!diamond) throw new Error("expected a keyframe diamond button");
       // KeyframeDiamond's title mapping: active -> "Remove ... keyframe",
       // inactive -> "Add ... keyframe", ghost -> "Convert ... to keyframes".

package/src/components/editor/PropertyPanel.tsx

@@ -234,11 +234,19 @@ export const PropertyPanel = memo(function PropertyPanel(props: PropertyPanelPro
 
   const handleCopyElementInfo = () => {
     const text = buildElementInfoText(element, sourceLabel, gsapAnimations, previewIframeRef);
-    void navigator.clipboard.writeText(text);
-    showToast(`Copied element info for ${element.label} — paste into any AI agent`, "info");
-    setClipboardCopied(true);
-    clearTimeout(clipboardTimerRef.current);
-    clipboardTimerRef.current = setTimeout(() => setClipboardCopied(false), 1500);
+    // Claim the copy only once the write actually lands — a denied clipboard
+    // permission otherwise reports a copy that never happened.
+    navigator.clipboard
+      .writeText(text)
+      .then(() => {
+        showToast(`Copied element info for ${element.label} — paste into any AI agent`, "info");
+        setClipboardCopied(true);
+        clearTimeout(clipboardTimerRef.current);
+        clipboardTimerRef.current = setTimeout(() => setClipboardCopied(false), 1500);
+      })
+      .catch(() => {
+        showToast("Couldn't copy to the clipboard — check browser permissions", "error");
+      });
   };
 
   if (STUDIO_FLAT_INSPECTOR_ENABLED) {

package/src/components/editor/PropertyPanelFlat.tsx

@@ -79,6 +79,7 @@ export function PropertyPanelFlat({
   onRemoveTextField,
   onAskAgent,
   onToggleElementHidden,
+  onAutoGroupCarveSources,
   onImportAssets,
   onAddMediaOverlay,
   onImportFonts,
@@ -440,6 +441,7 @@ export function PropertyPanelFlat({
           element={element}
           onSetAttributeQuiet={onSetAttributeQuiet ?? onSetAttributeLive}
           onSetAttributeLive={onSetAttributeLive}
+          onAutoGroupCarveSources={onAutoGroupCarveSources}
         />
       ),
     });

package/src/components/editor/SnapToolbar.tsx

@@ -102,7 +102,7 @@ export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolb
       {motionPathCreateAvailable && (
         <button
           type="button"
-          className={`rounded-md p-1.5 transition-colors ${
+          className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
             motionPathArmed
               ? "bg-studio-accent/20 text-studio-accent"
               : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
@@ -118,7 +118,7 @@ export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolb
       )}
       <button
         type="button"
-        className={`rounded-md p-1.5 transition-colors ${
+        className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
           prefs.snapEnabled
             ? "bg-studio-accent/20 text-studio-accent"
             : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
@@ -134,7 +134,7 @@ export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolb
         <button
           ref={gridButtonRef}
           type="button"
-          className={`rounded-md p-1.5 transition-colors ${
+          className={`rounded-md p-1.5 transition-colors active:scale-[0.95] ${
             prefs.gridVisible
               ? "bg-studio-accent/20 text-studio-accent"
               : "bg-black/40 text-white/60 hover:bg-black/60 hover:text-white/80"
@@ -144,11 +144,27 @@ export const SnapToolbar = memo(function SnapToolbar({ onSnapChange }: SnapToolb
             e.preventDefault();
             setGridPopoverOpen((v) => !v);
           }}
-          title={prefs.gridVisible ? "Grid visible (G)" : "Grid hidden (G)"}
+          title={
+            prefs.gridVisible
+              ? "Grid visible (G) — right-click for spacing options"
+              : "Grid hidden (G) — right-click for spacing options"
+          }
           aria-label="Toggle grid"
         >
           <GridFour size={16} weight={prefs.gridVisible ? "fill" : "regular"} />
         </button>
+        <button
+          type="button"
+          className="absolute -right-0.5 -bottom-0.5 rounded p-0.5 text-white/50 hover:text-white/90 bg-black/50"
+          onClick={() => setGridPopoverOpen((v) => !v)}
+          title="Grid options"
+          aria-label="Grid options"
+          aria-expanded={gridPopoverOpen}
+        >
+          <svg width="7" height="7" viewBox="0 0 8 8" fill="currentColor" aria-hidden="true">
+            <path d="M1 2.5l3 3 3-3z" />
+          </svg>
+        </button>
 
         {gridPopoverOpen && (
           <div

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

@@ -0,0 +1,113 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { createRoot } from "react-dom/client";
+import type { HfAudioFxChain } from "@hyperframes/core/audio-fx";
+import { TimelineFxPopover } from "./TimelineFxPopover.js";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+const EMPTY_CHAIN: HfAudioFxChain = { version: 1, nodes: [] };
+const RECT = { left: 0, top: 0, right: 0, bottom: 0 } as DOMRect;
+
+function byTextButton(host: HTMLElement, text: string): HTMLButtonElement | undefined {
+  return Array.from(host.querySelectorAll("button")).find((b) => b.textContent?.includes(text));
+}
+
+function mount(overrides: Partial<Parameters<typeof TimelineFxPopover>[0]> = {}) {
+  const onClose = vi.fn();
+  const onChainChange = vi.fn();
+  const onChainPreview = vi.fn();
+  const onOpenRack = vi.fn();
+  const host = document.createElement("div");
+  document.body.append(host);
+  act(() => {
+    createRoot(host).render(
+      <TimelineFxPopover
+        anchorRect={RECT}
+        chain={EMPTY_CHAIN}
+        onClose={onClose}
+        onChainChange={onChainChange}
+        onChainPreview={onChainPreview}
+        onOpenRack={onOpenRack}
+        {...overrides}
+      />,
+    );
+  });
+  return { host, onClose, onChainChange, onChainPreview, onOpenRack };
+}
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("TimelineFxPopover", () => {
+  it("applies a preset with exactly one onChainChange write, and closes", () => {
+    const { host, onChainChange, onClose } = mount();
+    const button = byTextButton(host, "Chipmunk");
+    expect(button).toBeDefined();
+    act(() => button?.click());
+    expect(onChainChange).toHaveBeenCalledTimes(1);
+    const written = onChainChange.mock.calls[0]?.[0] as HfAudioFxChain;
+    expect(written.nodes.length).toBeGreaterThan(0);
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("auditions on hover (focus is the keyboard's hover) and reverts on leave", () => {
+    const { host, onChainPreview } = mount();
+    const button = byTextButton(host, "Chipmunk");
+    expect(button).toBeDefined();
+    act(() => (button as HTMLButtonElement).focus());
+    expect(onChainPreview).toHaveBeenCalled();
+    const previewed = onChainPreview.mock.calls.at(-1)?.[0] as HfAudioFxChain;
+    expect(previewed.nodes.length).toBeGreaterThan(0);
+    onChainPreview.mockClear();
+    act(() => {
+      button?.dispatchEvent(new FocusEvent("focusout", { bubbles: true }));
+    });
+    expect(onChainPreview).toHaveBeenCalledWith(EMPTY_CHAIN);
+  });
+
+  it("Escape closes without letting the keystroke propagate past the popover", () => {
+    const { host, onClose } = mount();
+    const outer = vi.fn();
+    document.body.addEventListener("keydown", outer);
+    const dialog = host.querySelector('[role="dialog"]');
+    expect(dialog).toBeTruthy();
+    act(() => {
+      dialog?.dispatchEvent(
+        new KeyboardEvent("keydown", { key: "Escape", bubbles: true, cancelable: true }),
+      );
+    });
+    expect(onClose).toHaveBeenCalled();
+    expect(outer).not.toHaveBeenCalled();
+    document.body.removeEventListener("keydown", outer);
+  });
+
+  it("dismisses on an outside pointerdown", () => {
+    const { onClose } = mount();
+    act(() => {
+      document.body.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+    });
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it("does not dismiss on a pointerdown inside the popover", () => {
+    const { host, onClose } = mount();
+    const dialog = host.querySelector('[role="dialog"]');
+    expect(dialog).toBeTruthy();
+    act(() => {
+      dialog?.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true }));
+    });
+    expect(onClose).not.toHaveBeenCalled();
+  });
+
+  it("the footer opens the rack and closes the popover", () => {
+    const { host, onOpenRack, onClose } = mount();
+    const openRack = byTextButton(host, "Open rack");
+    expect(openRack).toBeDefined();
+    act(() => openRack?.click());
+    expect(onOpenRack).toHaveBeenCalledTimes(1);
+    expect(onClose).toHaveBeenCalled();
+  });
+});

package/src/components/editor/TimelineFxPopover.tsx

@@ -0,0 +1,138 @@
+/**
+ * The FX popover the timeline's per-track/per-group FX button opens (C1).
+ *
+ * A THIN positioner around existing pieces, not a second rack: the body is
+ * `FxPresetMenu` exactly as the property panel's FX section renders it, and
+ * applying or auditioning a preset goes through the caller's own write path
+ * (a group's own attribute for a group target, the selected element's for a
+ * clip) — nothing here serializes a chain of its own.
+ */
+
+import { useEffect, useRef, type CSSProperties, type KeyboardEvent } from "react";
+import type { HfAudioFxChain } from "@hyperframes/core/audio-fx";
+import type { HfAudioNameKind } from "@hyperframes/core/audio-carve";
+import { FxPresetMenu } from "./propertyPanelFxPresetMenu.js";
+import { applyPresetToChain } from "./useApplyAudioFxPreset.js";
+import { useFxAudition } from "./useFxAudition.js";
+
+const POPOVER_WIDTH = 260;
+const VIEWPORT_MARGIN = 8;
+
+function clampedStyle(anchorRect: DOMRect): CSSProperties {
+  const left = Math.min(
+    Math.max(anchorRect.left, VIEWPORT_MARGIN),
+    Math.max(VIEWPORT_MARGIN, window.innerWidth - POPOVER_WIDTH - VIEWPORT_MARGIN),
+  );
+  const spaceBelow = window.innerHeight - anchorRect.bottom;
+  const openUpward = spaceBelow < 260 && anchorRect.top > spaceBelow;
+  return {
+    position: "fixed",
+    left,
+    width: POPOVER_WIDTH,
+    ...(openUpward
+      ? { bottom: window.innerHeight - anchorRect.top + 4 }
+      : { top: anchorRect.bottom + 4 }),
+  };
+}
+
+export interface TimelineFxPopoverProps {
+  anchorRect: DOMRect;
+  chain: HfAudioFxChain;
+  trackKind?: HfAudioNameKind;
+  onClose: () => void;
+  /** Persist the applied preset onto the target (group attribute, or the
+   *  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;
+  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. */
+  onOpenRack: () => void;
+}
+
+export function TimelineFxPopover({
+  anchorRect,
+  chain,
+  trackKind,
+  onClose,
+  onChainChange,
+  onChainPreview,
+  onAuditionTransport,
+  onOpenRack,
+}: TimelineFxPopoverProps) {
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const { audition, clearAudition } = useFxAudition(chain, onChainPreview, onAuditionTransport);
+
+  // Outside click dismisses like any other popover; the button itself is
+  // excluded by pointerdown timing (the button's own click hasn't happened yet).
+  useEffect(() => {
+    const onPointerDown = (event: PointerEvent) => {
+      if (rootRef.current && !rootRef.current.contains(event.target as Node)) onClose();
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [onClose]);
+
+  const applyPreset = (id: string) => {
+    const next = applyPresetToChain(chain, id, trackKind);
+    if (!next) return;
+    clearAudition();
+    onChainChange(next);
+    onClose();
+  };
+
+  // Escape closes without deselecting whatever is behind this — a keystroke
+  // aimed at the popover is not aimed at the clip under it.
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== "Escape") return;
+    event.stopPropagation();
+    audition(null);
+    onClose();
+  };
+
+  return (
+    <div
+      ref={rootRef}
+      role="dialog"
+      aria-label="Effects"
+      className="z-50 rounded-md border border-white/10 bg-[#1b1b1f] p-2 shadow-xl"
+      style={clampedStyle(anchorRect)}
+      onKeyDown={onKeyDown}
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      <FxPresetMenu
+        trackKind={trackKind}
+        onPick={applyPreset}
+        onAudition={
+          onChainPreview
+            ? (id) =>
+                audition(id ? (base) => applyPresetToChain(base, id, trackKind) ?? base : null)
+            : undefined
+        }
+      />
+      <div className="mt-2 flex items-center justify-between border-t border-white/10 pt-2 text-[10px] text-white/55">
+        <button
+          type="button"
+          className="hover:text-white"
+          onClick={() => {
+            onClose();
+            onOpenRack();
+          }}
+        >
+          + effect
+        </button>
+        <button
+          type="button"
+          className="hover:text-white"
+          onClick={() => {
+            onClose();
+            onOpenRack();
+          }}
+        >
+          Open rack ›
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/editor/Transform3DCube.tsx

@@ -163,6 +163,25 @@ export function Transform3DCube({
     setDraft(null);
   };
 
+  const onKeyDown = (e: React.KeyboardEvent<SVGSVGElement>) => {
+    const STEP = e.altKey ? 1 : 5;
+    let next: CubePose | null = null;
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      const dir = e.key === "ArrowUp" ? -1 : 1;
+      next = e.shiftKey
+        ? { ...shown, rotationZ: wrapDeg(shown.rotationZ + dir * STEP) }
+        : { ...shown, rotationX: wrapDeg(shown.rotationX + dir * STEP) };
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+      const dir = e.key === "ArrowRight" ? 1 : -1;
+      next = e.shiftKey
+        ? { ...shown, rotationZ: wrapDeg(shown.rotationZ + dir * STEP) }
+        : { ...shown, rotationY: wrapDeg(shown.rotationY + dir * STEP) };
+    }
+    if (!next) return;
+    e.preventDefault();
+    onPoseCommit(next);
+  };
+
   return (
     <div className="relative overflow-hidden rounded-lg border border-neutral-800 bg-gradient-to-b from-neutral-900 to-neutral-950">
       <svg
@@ -174,8 +193,10 @@ export function Transform3DCube({
         onPointerMove={onPointerMove}
         onPointerUp={onPointerUp}
         onPointerCancel={onPointerUp}
+        onKeyDown={onKeyDown}
+        tabIndex={0}
         role="slider"
-        aria-label="Drag to rotate in 3D; hold Shift to roll; scroll to change depth"
+        aria-label="3D rotation. Arrow keys rotate X/Y, Shift+arrows roll Z, Alt for fine steps; drag to rotate, scroll to change depth"
         aria-valuetext={`X ${Math.round(shown.rotationX)}°, Y ${Math.round(
           shown.rotationY,
         )}°, Z ${Math.round(shown.rotationZ)}°`}

package/src/components/editor/manualOffsetDrag.test.ts

@@ -2,6 +2,7 @@ import { Window } from "happy-dom";
 import { describe, expect, it } from "vitest";
 import {
   applyManualOffsetDragCommit,
+  resumeGsapTimelines,
   applyManualOffsetDragDraft,
   applyManualOffsetDragMatrix,
   createManualOffsetDragMember,
@@ -447,3 +448,51 @@ describe("GSAP-element drag — dot-a flies regressions", () => {
     expect(element.style.getPropertyValue("transform")).toMatch(/translate\(/);
   });
 });
+
+describe("resumeGsapTimelines", () => {
+  it("unpauses exactly the timelines the drag start paused, then re-seeks the player", () => {
+    const window = new Window();
+    const element = window.document.createElement("div");
+    element.setAttribute("data-hf-drag-paused-timelines", "figma-demo-unlock,figma-demo-stagger");
+    window.document.body.append(element);
+
+    const pausedState: Record<string, boolean> = {
+      "figma-demo-unlock": true,
+      "figma-demo-stagger": true,
+      main: true,
+    };
+    const makeTl = (id: string) => ({
+      paused: (value?: boolean) => {
+        if (value !== undefined) pausedState[id] = value;
+        return pausedState[id]!;
+      },
+    });
+    const seeks: number[] = [];
+    const win = element.ownerDocument.defaultView as unknown as {
+      __timelines?: Record<string, unknown>;
+      __player?: { seek: (t: number) => void; getTime: () => number };
+    };
+    win.__timelines = {
+      "figma-demo-unlock": makeTl("figma-demo-unlock"),
+      "figma-demo-stagger": makeTl("figma-demo-stagger"),
+      main: makeTl("main"),
+    };
+    win.__player = { seek: (t: number) => seeks.push(t), getTime: () => 3.5 };
+
+    resumeGsapTimelines(element);
+
+    expect(pausedState["figma-demo-unlock"]).toBe(false);
+    expect(pausedState["figma-demo-stagger"]).toBe(false);
+    // main was NOT paused by the drag — leave its state alone
+    expect(pausedState["main"]).toBe(true);
+    expect(seeks).toEqual([3.5]);
+    expect(element.hasAttribute("data-hf-drag-paused-timelines")).toBe(false);
+  });
+
+  it("is a no-op without the paused-timelines attribute", () => {
+    const window = new Window();
+    const element = window.document.createElement("div");
+    window.document.body.append(element);
+    expect(() => resumeGsapTimelines(element)).not.toThrow();
+  });
+});

package/src/components/editor/manualOffsetDrag.ts

@@ -561,11 +561,23 @@ export function resumeGsapTimelines(element: HTMLElement): void {
   if (!ids) return;
   const win = element.ownerDocument.defaultView as
     | (Window & {
-        __timelines?: Record<string, { pause?: () => void }>;
+        __timelines?: Record<string, { paused?: (value?: boolean) => boolean }>;
         __player?: { seek?: (t: number) => void; getTime?: () => number };
       })
     | null;
   if (!win) return;
+  // Unpause exactly the timelines the drag start paused. The player seek below
+  // repositions them, but a seek alone leaves play-state-driven sub-composition
+  // timelines paused forever — the "selecting a piece kills its animation" bug:
+  // main survives (seek-driven every frame) while every scene timeline freezes,
+  // and deselecting can't recover because nothing else ever resumes them.
+  for (const id of ids.split(",")) {
+    try {
+      win.__timelines?.[id]?.paused?.(false);
+    } catch {
+      /* cross-origin guard */
+    }
+  }
   const t = win.__player?.getTime?.() ?? 0;
   win.__player?.seek?.(t);
 }

package/src/components/editor/propertyPanel3dTransform.tsx

@@ -322,11 +322,19 @@ export function PropertyPanel3dTransform({
       <button
         type="button"
         onClick={() => setCollapsed((v) => !v)}
-        className="mb-2 flex w-full items-center justify-between text-[10px] font-medium uppercase tracking-wider text-neutral-600 hover:text-neutral-400"
+        aria-expanded={!collapsed}
+        className="mb-2 flex w-full items-center justify-between text-[10px] font-medium uppercase tracking-wider text-neutral-600 hover:text-neutral-400 active:scale-[0.99]"
       >
         <span>3D Transform</span>
-        <svg width="9" height="9" viewBox="0 0 10 10" fill="currentColor" aria-hidden>
-          {collapsed ? <path d="M3 2l4 3-4 3z" /> : <path d="M2 3l3 4 3-4z" />}
+        <svg
+          width="9"
+          height="9"
+          viewBox="0 0 10 10"
+          fill="currentColor"
+          aria-hidden
+          className={`transition-transform duration-150 ${collapsed ? "-rotate-90" : ""}`}
+        >
+          <path d="M2 3l3 4 3-4z" />
         </svg>
       </button>
       {collapsed ? null : (