@hyperframes/studio 0.7.107 → 0.7.108

package/src/hooks/usePreviewPersistence.ts

@@ -14,6 +14,7 @@ import {
 import { trackStudioEvent } from "../utils/studioTelemetry";
 import { applyUndoRestoreToPreview, type UndoRestoreFile } from "../utils/gsapUndoRestore";
 import { usePlayerStore } from "../player";
+import { syncStoredAutomationFromPreview } from "../player/lib/automationStoreSync";
 
 /** The restore payload the undo/redo preview-sync consumes (from the history store). */
 interface HistoryPreviewRestore {
@@ -207,7 +208,13 @@ export function usePreviewPersistence({
         player.setElements([]);
         player.setSelectedElementId(null);
         player.setTimelineReady(false);
+        return;
       }
+      // A soft restore patched the reverted attributes onto the live preview, but the
+      // player store keeps its own copy and that copy is what the automation lanes
+      // draw — so without this an undone envelope edit stayed invisible until a
+      // reload. The full path above clears the store and waits for discovery instead.
+      syncStoredAutomationFromPreview(previewIframeRef.current?.contentDocument ?? null);
     },
     [previewIframeRef, activeCompPathRef, reloadPreview],
   );

package/src/hooks/useTimelineEditing.ts

@@ -449,6 +449,9 @@ export function useTimelineEditing({
             kind: "timeline",
             files: { [targetPath]: patchedContent },
             readFile: async () => originalContent,
+            // remove-element already wrote the removal, so disk holds THAT — not the
+            // content read at the top. Undo still goes back to the original.
+            diskContent: { [targetPath]: removedContent },
             writeFile: writeProjectFile,
             recordEdit,
           });

package/src/player/components/AutomationSelectionMenu.tsx

@@ -0,0 +1,76 @@
+/**
+ * Context menu for a right-click inside an automation time selection: the four
+ * utility shapes, then Simplify. Portal + dismiss handling mirror
+ * TrackGapContextMenu; rows never vanish — an inapplicable Simplify dims with
+ * a reason instead of leaving a shorter menu.
+ */
+import { memo } from "react";
+import { createPortal } from "react-dom";
+import { useContextMenuDismiss } from "../../hooks/useContextMenuDismiss";
+import { AUTOMATION_SHAPES, type AutomationShapeId } from "./automationShapes";
+
+interface AutomationSelectionMenuProps {
+  x: number;
+  y: number;
+  onClose(): void;
+  onInsertShape(shape: AutomationShapeId): void;
+  onSimplify(): void;
+  /** At least three points in the range — fewer has nothing to thin. */
+  canSimplify: boolean;
+}
+
+export const AutomationSelectionMenu = memo(function AutomationSelectionMenu({
+  x,
+  y,
+  onClose,
+  onInsertShape,
+  onSimplify,
+  canSimplify,
+}: AutomationSelectionMenuProps) {
+  const menuRef = useContextMenuDismiss(onClose);
+  const row =
+    "block w-full px-2 py-1 text-left text-[11px] text-panel-text-1 hover:bg-panel-bg-3 disabled:opacity-40";
+  // Same edge-clamping precedent as TrackGapContextMenu: without it a
+  // right-click near the bottom/right of the timeline renders this menu
+  // partially off-screen.
+  const menuWidth = 140;
+  const menuHeight = AUTOMATION_SHAPES.length * 24 + 32;
+  const overflowY = y + menuHeight - window.innerHeight;
+  const adjustedX = x + menuWidth > window.innerWidth ? x - menuWidth : x;
+  const adjustedY = overflowY > 0 ? y - overflowY - 8 : y;
+  return createPortal(
+    <div
+      ref={menuRef}
+      className="hf-automation-menu fixed z-50 min-w-[140px] rounded border border-panel-border-input bg-panel-bg-2 py-1 shadow-lg"
+      style={{ left: adjustedX, top: adjustedY }}
+    >
+      {AUTOMATION_SHAPES.map((shape) => (
+        <button
+          key={shape.id}
+          type="button"
+          className={row}
+          onClick={() => {
+            onInsertShape(shape.id);
+            onClose();
+          }}
+        >
+          {shape.label}
+        </button>
+      ))}
+      <div className="my-1 border-t border-panel-border-input" />
+      <button
+        type="button"
+        className={row}
+        disabled={!canSimplify}
+        title={canSimplify ? undefined : "Fewer than three points in the selection"}
+        onClick={() => {
+          onSimplify();
+          onClose();
+        }}
+      >
+        Simplify
+      </button>
+    </div>,
+    document.body,
+  );
+});

package/src/player/components/AutomationValueInput.tsx

@@ -0,0 +1,51 @@
+/**
+ * Typing an exact value into a breakpoint.
+ *
+ * Dragging is how an envelope is shaped, but it cannot land on a number: -6.0 dB
+ * is not a pixel you can find. This is the lane's keyboard route to one value,
+ * kept in its own file so the lane component stays about the pointer.
+ */
+
+export interface AutomationValueInputProps {
+  text: string;
+  /** Left edge in the lane's own coordinates. */
+  leftPx: number;
+  label: string;
+  onChange(text: string): void;
+  /** Enter or blur: apply what was typed. */
+  onCommit(): void;
+  /** Escape: leave the point where it was. */
+  onCancel(): void;
+}
+
+export function AutomationValueInput({
+  text,
+  leftPx,
+  label,
+  onChange,
+  onCommit,
+  onCancel,
+}: AutomationValueInputProps) {
+  return (
+    <input
+      // pointer-events-auto: the lane band around it takes none, so that clips
+      // sharing the row do not cover each other's envelopes (see the lane).
+      className="hf-automation-value pointer-events-auto absolute rounded-[3px] border border-panel-border-input bg-panel-bg-2 px-1 font-mono text-[9px] text-panel-text-1"
+      style={{ left: leftPx, top: 1, width: 44, zIndex: 4 }}
+      // The lane is a pointer surface, and the timeline above it owns single-key
+      // shortcuts. Without stopping both, a press lands on the lane instead of
+      // the field and a typed "5" scrubs the transport.
+      onPointerDown={(e) => e.stopPropagation()}
+      onKeyDown={(e) => {
+        e.stopPropagation();
+        if (e.key === "Enter") onCommit();
+        if (e.key === "Escape") onCancel();
+      }}
+      onChange={(e) => onChange(e.target.value)}
+      onBlur={onCommit}
+      value={text}
+      aria-label={`${label} value`}
+      autoFocus
+    />
+  );
+}

package/src/player/components/LayerDisclosureRow.tsx

@@ -1,12 +1,11 @@
 import { CaretRight } from "@phosphor-icons/react";
-import type { TimelineElement } from "../store/playerStore";
 import { TRACK_H } from "./timelineLayout";
 import { TrackClipCount } from "./TrackClipCount";
 
 // Layer row (Figma order: disclosure ▸/▾, diamond, name) — the disclosure lives
 // here, not on the clip bar, and re-expands a collapsed layer.
 export function LayerDisclosureRow({
-  keyframeClip,
+  name,
   clipCount,
   isExpanded,
   gutterBackground,
@@ -15,7 +14,10 @@ export function LayerDisclosureRow({
   onToggleClipExpanded,
   children,
 }: {
-  keyframeClip: TimelineElement;
+  /** What this row is called. The active clip's own name when it is alone on the
+   *  track; the track itself once it holds several, since naming a shared row
+   *  after one of its clips reads as if the rows under it were that clip's. */
+  name: string;
   clipCount: number;
   isExpanded: boolean;
   gutterBackground: string;
@@ -31,7 +33,6 @@ export function LayerDisclosureRow({
   /** Trailing controls that act on the LAYER (the visibility eye), not on a lane. */
   children?: React.ReactNode;
 }) {
-  const name = keyframeClip.label ?? keyframeClip.domId ?? keyframeClip.id;
   return (
     <div
       className="absolute left-0 top-0 flex items-center gap-1.5 overflow-hidden px-1.5 text-[11px]"

package/src/player/components/Timeline.test.ts

@@ -37,6 +37,7 @@ import {
   getTimelineLaneTop,
   createTimelineRowGeometry,
 } from "./timelineLayout";
+import { AUTOMATION_LANE_H } from "./automationLaneHeight";
 import { formatTime } from "../lib/time";
 import { usePlayerStore } from "../store/playerStore";
 import { TimelineEditProvider } from "../../contexts/TimelineEditContext";
@@ -578,6 +579,89 @@ describe("Timeline provider boundary", () => {
     act(() => root.unmount());
   });
 
+  // The caret belongs to the row, not to whichever clip on it is selected: the
+  // automation lanes below it are the track's, shared per property. Toggling one
+  // clip left the row's state depending on the selection, and a collapse that
+  // only dropped the active clip left the row stuck open.
+  it("expands and collapses every clip on a shared track together", () => {
+    const host = createSizedTimelineHost(720);
+    const automation = JSON.stringify({
+      version: 1,
+      lanes: [{ target: "volume", points: [{ t: 0, v: 1 }] }],
+    });
+    usePlayerStore.setState({
+      duration: 8,
+      timelineReady: true,
+      elements: [
+        { id: "narration-1", tag: "audio", start: 0, duration: 4, track: 0, automation },
+        { id: "narration-2", tag: "audio", start: 4, duration: 4, track: 0, automation },
+      ],
+    });
+    const root = createRoot(host);
+    act(() => root.render(React.createElement(Timeline)));
+
+    const row = host.querySelector<HTMLElement>('[data-el-id="narration-1"]')?.parentElement
+      ?.parentElement;
+    // A row of several clips is named for the track, so the caret is too.
+    const caret = () => host.querySelector<HTMLButtonElement>('button[aria-label$=" keyframes"]');
+    expect(caret()?.getAttribute("aria-label")).toBe("Expand Track 1 keyframes");
+
+    act(() => caret()?.click());
+    // One shared volume row, and BOTH clips hold it open.
+    expectTrackExpansion(row, ["narration-1", "narration-2"], TRACK_H + AUTOMATION_LANE_H);
+
+    // Every clip bar on the row is capped to one track height. Only the clip
+    // owning the property lanes used to be, so its siblings stretched the whole
+    // expanded row and painted their waveforms over the envelopes below.
+    expect(
+      ["narration-1", "narration-2"].map(
+        (id) => host.querySelector<HTMLElement>(`[data-el-id="${id}"]`)?.style.height,
+      ),
+    ).toEqual([`${TRACK_H - 2 * CLIP_Y}px`, `${TRACK_H - 2 * CLIP_Y}px`]);
+
+    act(() => caret()?.click());
+    expectTrackExpansion(row, [], TRACK_H);
+    act(() => root.unmount());
+  });
+
+  // The lanes are the row's, and selecting a clip must not rebuild them. They
+  // used to hang off the active clip's property lanes, so clicking a sibling
+  // moved the whole subtree into a different element and remounted every lane —
+  // which threw away each one's hover state and any gesture in flight. Pressing
+  // a lane to select its clip therefore made the handles vanish under the
+  // pointer, which is the one gesture the read-only lane exists to support.
+  it("keeps the automation lanes mounted when the selection moves along the row", () => {
+    const host = createSizedTimelineHost(720);
+    const automation = JSON.stringify({
+      version: 1,
+      lanes: [{ target: "volume", points: [{ t: 0, v: 1 }] }],
+    });
+    usePlayerStore.setState({
+      duration: 8,
+      timelineReady: true,
+      selectedElementId: "narration-2",
+      elements: [
+        { id: "narration-1", tag: "audio", start: 0, duration: 4, track: 0, automation },
+        { id: "narration-2", tag: "audio", start: 4, duration: 4, track: 0, automation },
+      ],
+    });
+    const root = createRoot(host);
+    act(() => root.render(React.createElement(Timeline)));
+    act(() => host.querySelector<HTMLButtonElement>('button[aria-label$=" keyframes"]')?.click());
+
+    const before = [...host.querySelectorAll(".hf-automation-lane")];
+    expect(before).toHaveLength(2);
+
+    act(() => usePlayerStore.setState({ selectedElementId: "narration-1" }));
+
+    // Identity, not deep equality: a remount produces structurally identical
+    // nodes, so only `toBe` can tell the two apart.
+    const after = [...host.querySelectorAll(".hf-automation-lane")];
+    expect(after).toHaveLength(before.length);
+    after.forEach((node, index) => expect(node).toBe(before[index]));
+    act(() => root.unmount());
+  });
+
   it("marks every clip in selectedElementIds as selected", () => {
     const host = createSizedTimelineHost(720);