@hyperframes/studio 0.8.6 → 0.8.8

package/src/components/editor/propertyPanelPrimitives.tsx

@@ -74,6 +74,8 @@ export function MetricField({
           onPointerDown: handleScrubPointerDown,
           onPointerMove: handleScrubPointerMove,
           onPointerUp: handleScrubPointerUp,
+          onPointerCancel: handleScrubPointerUp,
+          onLostPointerCapture: handleScrubPointerUp,
         } as const)
       : ({ className: "flex-shrink-0 text-[11px] font-medium text-neutral-500" } as const);
 
@@ -180,6 +182,7 @@ export function SliderControl({
         step={step}
         value={draft}
         disabled={disabled}
+        aria-label={trackName}
         onChange={(e) => {
           const n = Number(e.target.value);
           setDraft(n);
@@ -228,6 +231,7 @@ export function SegmentedControl({
             if (option.value !== value) track("segmented", trackName);
             onChange(option.value);
           }}
+          aria-pressed={option.value === value}
           className={`min-w-0 truncate rounded px-2 py-[5px] text-[11px] font-medium transition-colors disabled:cursor-not-allowed ${
             option.value === value
               ? "bg-panel-hover text-white"
@@ -292,23 +296,15 @@ export function Section({
   defaultCollapsed?: boolean;
 }) {
   const [collapsed, setCollapsed] = useState(defaultCollapsed);
-  const collapseIcon = collapsed ? (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      className="flex-shrink-0 text-panel-text-5"
-    >
-      <path d="M6 2.5v7M2.5 6h7" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
-    </svg>
-  ) : (
+  const collapseIcon = (
     <svg
       width="10"
       height="10"
       viewBox="0 0 10 10"
       fill="currentColor"
-      className="flex-shrink-0 text-panel-text-5"
+      className={`flex-shrink-0 text-panel-text-5 transition-transform duration-150 ${
+        collapsed ? "-rotate-90" : ""
+      }`}
     >
       <path d="M2 3l3 4 3-4z" />
     </svg>
@@ -322,6 +318,7 @@ export function Section({
           <button
             type="button"
             onClick={() => setCollapsed((v) => !v)}
+            aria-expanded={!collapsed}
             className="flex min-w-0 flex-1 items-center justify-between gap-2 text-left"
           >
             <h3 className="text-[12px] font-semibold text-panel-text-1">{title}</h3>

package/src/components/editor/propertyPanelStyleSections.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { Eye, Layers, Palette, Settings, Square, Zap } from "../../icons/SystemIcons";
 import { buildDefaultGradientModel, serializeGradient } from "./gradientValue";
 import { isTextEditableSelection, type DomEditSelection } from "./domEditing";
@@ -116,21 +116,40 @@ export function StyleSections({
       : "Solid";
   const [preferredFillMode, setPreferredFillMode] = useState(fillMode);
   const imageUrl = extractBackgroundImageUrl(backgroundImage);
+  // Remember the last authored gradient so an exploratory Solid↔Gradient
+  // toggle restores it instead of destroying it with the default gradient.
+  const lastGradientRef = useRef<string | null>(
+    backgroundImage.includes("gradient") ? backgroundImage : null,
+  );
+
+  // The remembered gradient is per-element: reset on selection change so
+  // element A's gradient can't leak onto element B via the fill-mode toggle.
+  // (The effect below re-stores it when the new element has its own gradient.)
+  useEffect(() => {
+    lastGradientRef.current = null;
+  }, [element.id, element.selector]);
 
   useEffect(() => {
     setPreferredFillMode(fillMode);
+    if (backgroundImage.includes("gradient")) {
+      lastGradientRef.current = backgroundImage;
+    }
   }, [fillMode, element.id, element.selector, backgroundImage]);
 
   const handleFillModeChange = (nextMode: string) => {
     setPreferredFillMode(nextMode);
     if (nextMode === "Solid") {
+      if (backgroundImage.includes("gradient")) {
+        lastGradientRef.current = backgroundImage;
+      }
       onSetStyle("background-image", "none");
       return;
     }
     if (nextMode === "Gradient" && !backgroundImage.includes("gradient")) {
       onSetStyle(
         "background-image",
-        serializeGradient(buildDefaultGradientModel(styles["background-color"])),
+        lastGradientRef.current ??
+          serializeGradient(buildDefaultGradientModel(styles["background-color"])),
       );
     }
   };

package/src/components/editor/propertyPanelTransformCommit.ts

@@ -69,7 +69,7 @@ export function createTransformCommitHandlers({
       await commitAnimatedTransformValue(
         axis,
         parsed,
-        "Cannot edit position — animation callbacks not available",
+        "This element's position can't be edited here yet — it is driven by its animation",
       )
     )
       return;
@@ -91,7 +91,7 @@ export function createTransformCommitHandlers({
       return;
     }
     if (hasGsapAnimation) {
-      showToast?.("Cannot edit size — animation callbacks not available");
+      showToast?.("This element's size can't be edited here yet — it is driven by its animation");
       return;
     }
     const current = readStudioBoxSize(element.element);
@@ -118,7 +118,7 @@ export function createTransformCommitHandlers({
       await commitAnimatedTransformValue(
         "rotation",
         parsed,
-        "Cannot edit rotation — animation callbacks not available",
+        "This element's rotation can't be edited here yet — it is driven by its animation",
       )
     )
       return;

package/src/components/editor/propertyPanelTypes.ts

@@ -92,6 +92,8 @@ export interface PropertyPanelProps {
   onRemoveTextField: (fieldKey: string) => void;
   onAskAgent: () => void;
   onToggleElementHidden?: (elementKey: string, hidden: boolean) => void | Promise<void>;
+  /** B6: group two or more picked voice clips, atomically, one undo entry. */
+  onAutoGroupCarveSources?: (clipIds: readonly string[], groupId: string) => Promise<void>;
   onImportAssets?: (files: FileList, dir?: string) => Promise<string[]>;
   onAddMediaOverlay?: AddMediaOverlayHandler;
   fontAssets?: ImportedFontAsset[];

package/src/components/editor/useApplyAudioFxPreset.ts

@@ -0,0 +1,36 @@
+/**
+ * Append (or, on reapply, replace in place) a preset's nodes onto a chain,
+ * with the telemetry that decision needs — the write path the property
+ * panel's FX section and the timeline FX popover (C1) both use, so a preset
+ * applied from either surface counts the same way.
+ */
+
+import { applyAudioFxPreset, getAudioFxPreset } from "@hyperframes/core/audio-fx-presets";
+import type { HfAudioFxChain } from "@hyperframes/core/audio-fx";
+import type { HfAudioNameKind } from "@hyperframes/core/audio-carve";
+import { trackPresetApplied } from "./audioFxTelemetry.js";
+
+export function applyPresetToChain(
+  chain: HfAudioFxChain,
+  presetId: string,
+  trackKind: HfAudioNameKind | undefined,
+): HfAudioFxChain | null {
+  const preset = getAudioFxPreset(presetId);
+  if (!preset) return null;
+  // Appends. Stacking a character preset onto an already-cleaned voice is a
+  // real thing to want, and replacing silently would throw work away — so
+  // the destructive option is a separate gesture, not the default one.
+  const next = applyAudioFxPreset(chain, preset);
+  // Re-applying replaces this preset's own nodes in place rather than
+  // appending a second copy, and the two are different decisions — worth
+  // telling apart in the numbers.
+  const reapply = chain.nodes.some((n) => n.fromPreset === preset.id);
+  trackPresetApplied(
+    preset.id,
+    preset.family,
+    preset.nodes.length,
+    reapply ? "reapply" : "append",
+    { trackKind },
+  );
+  return next;
+}

package/src/components/editor/useFxCarveGrouping.ts

@@ -0,0 +1,132 @@
+/**
+ * B6's normative rule: plural voiceover carve always targets a group.
+ *
+ * Split out of `useFxCarve.ts`, which owned all of this before the file grew
+ * past a size where "carve targets a group" was still one thing to read —
+ * same reason `useFxCarve.ts` itself was split out of
+ * `propertyPanelAudioFxGroup.tsx`.
+ */
+
+import { classifyAudioName, type HfCarveSettings } from "@hyperframes/core/audio-carve";
+import { resolveAudioGroups } from "@hyperframes/core/audio-groups";
+
+/**
+ * An id for a new voiceover group, de-duped against every id already in the
+ * document — group ids and plain element ids share one namespace, so both
+ * have to be checked.
+ */
+export function mintGroupId(doc: Document): string {
+  const taken = new Set([
+    ...resolveAudioGroups(doc).map((g) => g.id),
+    ...Array.from(doc.querySelectorAll("[id]")).map((el) => el.id),
+  ]);
+  if (!taken.has("voiceover")) return "voiceover";
+  let n = 2;
+  while (taken.has(`voiceover-${n}`)) n += 1;
+  return `voiceover-${n}`;
+}
+
+export function isPromiseLike<T>(value: T | Promise<T>): value is Promise<T> {
+  return typeof (value as { then?: unknown })?.then === "function";
+}
+
+/**
+ * Plural voiceover carve, always against a group — normative, not a
+ * suggestion (groups doc §1.6). Picking a second ungrouped voice clip mints a
+ * group behind the two of them and points the carve at it instead, the same
+ * way a hand-authored composition is expected to work; a source list already
+ * naming a group is left alone; this only fires on a run of plain clip ids.
+ *
+ * Returns the settings unchanged, synchronously, when there is nothing to do —
+ * NOT wrapped in a promise even though the caller may `await` the result. An
+ * `async` function always yields a microtask, which would push every
+ * `setCarve` call (grouped or not) one tick later than before this existed;
+ * several tests assert on `onSetAttributeQuiet` synchronously after mount and
+ * would miss that write.
+ */
+function withAutoGroupedSources(
+  doc: Document,
+  next: HfCarveSettings,
+  assignGroup: ((clipIds: readonly string[], groupId: string) => Promise<void>) | undefined,
+): HfCarveSettings | Promise<HfCarveSettings> {
+  if (!assignGroup || next.sources.length < 2) return next;
+  const groupIds = new Set(resolveAudioGroups(doc).map((g) => g.id));
+  if (next.sources.some((id) => groupIds.has(id))) return next;
+  const groupId = mintGroupId(doc);
+  return assignGroup(next.sources, groupId).then(() => ({ ...next, sources: [groupId] }));
+}
+
+/**
+ * `setCarve`'s first step: apply the auto-group rule, if a document and a
+ * write-back are both available.
+ *
+ * Deliberately NOT an `async function`: wrapping this in one would make every
+ * call return a promise-wrapped value, forcing the caller's `await` to yield
+ * a microtask even on the synchronous branch — the exact bug
+ * `withAutoGroupedSources`'s own sync-when-possible contract exists to avoid.
+ * The caller does the `isPromiseLike` check (re-exported from here) and only
+ * awaits the branch that is genuinely async.
+ */
+export function resolveNextCarveSettings(
+  nextRaw: HfCarveSettings | null,
+  doc: Document | undefined,
+  assignGroup: ((clipIds: readonly string[], groupId: string) => Promise<void>) | undefined,
+): HfCarveSettings | Promise<HfCarveSettings> | null {
+  return nextRaw && doc ? withAutoGroupedSources(doc, nextRaw, assignGroup) : nextRaw;
+}
+
+export interface CarveCandidate {
+  id: string;
+  label: string;
+  kind: ReturnType<typeof classifyAudioName>;
+}
+
+/**
+ * One row per ungrouped clip that overlaps the bed, one row per group that has
+ * ANY overlapping member (union, not per-clip — a narration group spanning
+ * the whole timeline is relevant even if each of its segments only overlaps
+ * part of the bed). Grouped members never appear individually.
+ */
+export function collectCarveCandidates(
+  doc: Document,
+  others: readonly HTMLAudioElement[],
+  overlapsBed: (a: Element) => boolean,
+): CarveCandidate[] {
+  const groupByMember = new Map(
+    resolveAudioGroups(doc).flatMap((group) => group.memberIds.map((id) => [id, group] as const)),
+  );
+  const offeredGroupIds = new Set<string>();
+  const described: CarveCandidate[] = [];
+  for (const a of others) {
+    const group = groupByMember.get(a.id);
+    if (!group) {
+      if (overlapsBed(a)) {
+        described.push({
+          id: a.id,
+          label: a.id,
+          kind: classifyAudioName(a.id, a.getAttribute("src")),
+        });
+      }
+      continue;
+    }
+    if (offeredGroupIds.has(group.id)) continue;
+    const members = group.memberIds
+      .map((id) => doc.getElementById(id))
+      // Not `instanceof HTMLAudioElement`: these belong to the composition's
+      // iframe document, so the constructor is a different realm's and the
+      // instanceof is false for every one (mirrors resolveCarveVoices in
+      // useFxCarve.ts).
+      .filter((el): el is HTMLElement => el?.tagName === "AUDIO");
+    if (!members.some(overlapsBed)) continue;
+    offeredGroupIds.add(group.id);
+    described.push({
+      id: group.id,
+      label: `${group.label} (${members.length})`,
+      kind: classifyAudioName(
+        group.label,
+        ...members.flatMap((m) => [m.id, m.getAttribute("src")]),
+      ),
+    });
+  }
+  return described;
+}

package/src/components/nle/PreviewOverlays.tsx

@@ -1,5 +1,6 @@
-import { useState } from "react";
+import { useCallback, useState } from "react";
 import { CaptionOverlay } from "../../captions/components/CaptionOverlay";
+import { useCaptionStore } from "../../captions/store";
 import { DomEditOverlay } from "../editor/DomEditOverlay";
 import { MotionPathOverlay } from "../editor/MotionPathOverlay";
 import { SnapToolbar } from "../editor/SnapToolbar";
@@ -139,6 +140,24 @@ export function PreviewOverlays({
   const { captionEditMode, compositionLoading, isPlaying } = useStudioPlaybackContext();
   const compositionDimensions = useCompositionDimensions();
 
+  // Caption edit mode is entered automatically when captions are detected;
+  // these give the author an explicit way OUT (and back in). Without them the
+  // caption overlay permanently replaces normal element editing.
+  const captionModelPresent = useCaptionStore((state) => state.model !== null);
+  const captionDismissed = useCaptionStore((state) => state.dismissed);
+  const captionSyncError = useCaptionStore((state) => state.syncError);
+  const exitCaptionMode = useCallback(() => {
+    const store = useCaptionStore.getState();
+    store.clearSelection();
+    store.setDismissed(true);
+    store.setEditMode(false);
+  }, []);
+  const enterCaptionMode = useCallback(() => {
+    const store = useCaptionStore.getState();
+    store.setDismissed(false);
+    store.setEditMode(true);
+  }, []);
+
   const { domEditHoverSelection, domEditSelection, domEditGroupSelections } =
     useDomEditSelectionContext();
   const {
@@ -194,7 +213,46 @@ export function PreviewOverlays({
   }
 
   if (captionEditMode) {
-    return <CaptionOverlay iframeRef={previewIframeRef} />;
+    return (
+      <>
+        <CaptionOverlay iframeRef={previewIframeRef} />
+        {/* Mode indicator + explicit exit */}
+        <div className="absolute top-2 left-1/2 -translate-x-1/2 z-[60] flex items-center gap-2 rounded-full border border-studio-accent/40 bg-black/70 px-2.5 py-1">
+          <span className="h-1.5 w-1.5 rounded-full bg-studio-accent" aria-hidden="true" />
+          <span className="text-2xs text-neutral-200">Editing captions</span>
+          <button
+            type="button"
+            onClick={exitCaptionMode}
+            className="rounded text-2xs text-neutral-400 underline underline-offset-2 hover:text-neutral-100 focus-visible:outline focus-visible:outline-1 focus-visible:outline-studio-accent"
+          >
+            Exit
+          </button>
+        </div>
+        {captionSyncError && (
+          <div
+            role="alert"
+            className="absolute top-10 left-1/2 -translate-x-1/2 z-[60] flex items-center gap-2 rounded-full border border-red-500/50 bg-red-950/90 px-2.5 py-1"
+          >
+            <span className="text-2xs text-red-200">{captionSyncError}</span>
+            <button
+              type="button"
+              onClick={() => useCaptionStore.getState().retrySave?.()}
+              className="rounded text-2xs text-red-100 underline underline-offset-2 hover:text-white"
+            >
+              Retry
+            </button>
+            <button
+              type="button"
+              onClick={() => useCaptionStore.getState().setSyncError(null)}
+              aria-label="Dismiss"
+              className="rounded px-0.5 text-2xs text-red-300/70 hover:text-red-100"
+            >
+              ✕
+            </button>
+          </div>
+        )}
+      </>
+    );
   }
 
   return (
@@ -270,6 +328,15 @@ export function PreviewOverlays({
         isPlaying={isPlaying}
       />
       {gestureOverlay}
+      {captionModelPresent && captionDismissed && (
+        <button
+          type="button"
+          onClick={enterCaptionMode}
+          className="absolute top-2 left-1/2 -translate-x-1/2 z-[60] rounded-full border border-neutral-700 bg-black/60 px-2.5 py-1 text-2xs text-neutral-300 transition-colors hover:border-studio-accent/50 hover:text-studio-accent focus-visible:outline focus-visible:outline-1 focus-visible:outline-studio-accent"
+        >
+          Edit captions
+        </button>
+      )}
     </>
   );
 }

package/src/components/nle/PreviewPane.tsx

@@ -156,6 +156,7 @@ export function PreviewPane({
           disabled={timelineDisabled}
           isFullscreen={isFullscreen}
           onToggleFullscreen={toggleFullscreen}
+          previewIframeRef={iframeRef}
         />
       </div>
     </div>

package/src/components/nle/useTimelineEditCallbacks.test.tsx

@@ -104,6 +104,7 @@ function renderCallbacks(): { callbacks: TimelineEditCallbacks; unmount: () => v
       handleTimelineElementResize: vi.fn(),
       handleTimelineGroupResize: vi.fn(),
       handleToggleTrackHidden: vi.fn(),
+      setAudioGroupAttribute: { setLive: vi.fn(), setQuiet: vi.fn() },
       handleBlockedTimelineEdit: vi.fn(),
       handleTimelineElementSplit: vi.fn(),
       handleRazorSplit: vi.fn(),

package/src/components/nle/useTimelineEditCallbacks.ts

@@ -38,10 +38,26 @@ export interface TimelineEditCallbackDeps {
   ) => Promise<void> | void;
   handleTimelineGroupResize: NonNullable<TimelineEditCallbacks["onResizeElements"]>;
   handleToggleTrackHidden: (track: number, hidden: boolean) => Promise<void> | void;
+  setAudioGroupAttribute: {
+    setLive: (groupId: string, attr: string, value: string | null) => void;
+    setQuiet: (groupId: string, attr: string, value: string | null, label: string) => Promise<void>;
+  };
   handleBlockedTimelineEdit: (element: TimelineElement, intent: BlockedTimelineEditIntent) => void;
   handleTimelineElementSplit: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   handleRazorSplit: (element: TimelineElement, splitTime: number) => Promise<void> | void;
   handleRazorSplitAll: (splitTime: number) => Promise<void> | void;
+  /** C1's ungrouped-track FX pointer — same auto-grouping write B6's carve uses. */
+  handleGroupClips?: (clipIds: readonly string[], groupId: string) => Promise<void>;
+  /** C1's single-clip FX write, addressed by the clip itself. */
+  setElementFxAttribute?: {
+    setLive: (element: TimelineElement, attr: string, value: string | null) => void;
+    setQuiet: (
+      element: TimelineElement,
+      attr: string,
+      value: string | null,
+      label: string,
+    ) => Promise<void>;
+  };
 }
 
 interface TimelineKeyframeTargetAnimation {
@@ -99,10 +115,13 @@ export function useTimelineEditCallbacks({
   handleTimelineElementResize,
   handleTimelineGroupResize,
   handleToggleTrackHidden,
+  setAudioGroupAttribute,
   handleBlockedTimelineEdit,
   handleTimelineElementSplit,
   handleRazorSplit,
   handleRazorSplitAll,
+  handleGroupClips,
+  setElementFxAttribute,
 }: TimelineEditCallbackDeps): TimelineEditCallbacks {
   const { projectId, activeCompPath } = useStudioShellContext();
   const { domEditSelection, selectedGsapAnimations } = useDomEditSelectionContext();
@@ -185,6 +204,11 @@ export function useTimelineEditCallbacks({
       onResizeElement: handleTimelineElementResize,
       onResizeElements: handleTimelineGroupResize,
       onToggleTrackHidden: handleToggleTrackHidden,
+      onSetAudioGroupAttributeLive: setAudioGroupAttribute.setLive,
+      onSetAudioGroupAttributeQuiet: setAudioGroupAttribute.setQuiet,
+      onGroupClips: handleGroupClips,
+      onSetElementAttributeLive: setElementFxAttribute?.setLive,
+      onSetElementAttributeQuiet: setElementFxAttribute?.setQuiet,
       onBlockedEditAttempt: handleBlockedTimelineEdit,
       onSplitElement: handleTimelineElementSplit,
       onRazorSplit: handleRazorSplit,
@@ -378,6 +402,9 @@ export function useTimelineEditCallbacks({
       handleTimelineElementResize,
       handleTimelineGroupResize,
       handleToggleTrackHidden,
+      setAudioGroupAttribute,
+      handleGroupClips,
+      setElementFxAttribute,
       handleBlockedTimelineEdit,
       handleTimelineElementSplit,
       handleRazorSplit,

package/src/components/panels/SlideshowPanel.tsx

@@ -183,6 +183,13 @@ export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowP
   const [expandedSections, setExpandedSections] = useState<Set<SectionKey>>(
     () => new Set<SectionKey>(["slides", "inspector"]),
   );
+  // Persist failure surfacing: edits keep working in memory, but the user must
+  // know the file write failed (and be able to retry) — never silent data loss.
+  const [persistError, setPersistError] = useState(false);
+  const [retrying, setRetrying] = useState(false);
+  // In-panel undo history of manifest snapshots (discrete edits only).
+  const undoStackRef = useRef<SlideshowManifest[]>([]);
+  const [undoDepth, setUndoDepth] = useState(0);
 
   const currentTime = usePlayerStore((s) => s.currentTime);
   const { domEditSelection } = useDomEditSelectionContext();
@@ -209,26 +216,56 @@ export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowP
     setManifest(parsed);
     manifestRef.current = parsed;
     setSelectedSequenceId(null);
+    // History belongs to one composition — a switch starts fresh.
+    undoStackRef.current = [];
+    setUndoDepth(0);
+    setPersistError(false);
   }, [compHtml]);
 
   /** Discrete actions (toggle, reorder, add/delete, hotspot): persist immediately. */
   const applyManifest = useCallback(
-    async (next: SlideshowManifest) => {
+    async (next: SlideshowManifest, opts?: { skipUndo?: boolean }) => {
       // Fold any in-flight typed notes into the discrete manifest so they are
       // not silently dropped when the debounce timer would have fired later.
       const merged = notesCtrlRef.current.mergeIntoDiscrete(next);
+      if (!opts?.skipUndo) {
+        undoStackRef.current.push(manifestRef.current);
+        if (undoStackRef.current.length > 50) undoStackRef.current.shift();
+        setUndoDepth(undoStackRef.current.length);
+      }
       setManifest(merged);
       manifestRef.current = merged;
       // Surface persist failures instead of swallowing them at each call site.
       try {
         await onPersist(merged);
+        setPersistError(false);
       } catch (err) {
         console.error("[slideshow] failed to persist manifest edit:", err);
+        setPersistError(true);
       }
     },
     [onPersist],
   );
 
+  const handleUndo = useCallback(() => {
+    const prev = undoStackRef.current.pop();
+    if (!prev) return;
+    setUndoDepth(undoStackRef.current.length);
+    applyManifest(prev, { skipUndo: true }).catch(() => {});
+  }, [applyManifest]);
+
+  const handleRetryPersist = useCallback(async () => {
+    setRetrying(true);
+    try {
+      await onPersist(manifestRef.current);
+      setPersistError(false);
+    } catch (err) {
+      console.error("[slideshow] retry persist failed:", err);
+    } finally {
+      setRetrying(false);
+    }
+  }, [onPersist]);
+
   /**
    * Notes path: update in-memory state immediately for a responsive UI, but
    * debounce the disk persist to ~450 ms after the last keystroke.  The pending
@@ -338,18 +375,10 @@ export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowP
     [applyManifest],
   );
 
+  // Confirmation is inline in BranchItem (consistent with the FileTree/assets
+  // delete pattern); by the time this fires the user has already confirmed.
   const handleDeleteSequence = useCallback(
     (id: string) => {
-      // Deleting a branch removes its slides and orphans any hotspot targeting it —
-      // confirm first to prevent accidental data loss.
-      const seq = (manifestRef.current.slideSequences ?? []).find((s) => s.id === id);
-      const count = seq?.slides.length ?? 0;
-      const label = seq?.label ?? id;
-      const ok = window.confirm(
-        `Delete branch "${label}"${count ? ` and its ${count} slide${count === 1 ? "" : "s"}` : ""}? ` +
-          `Hotspots pointing to it will no longer resolve.`,
-      );
-      if (!ok) return;
       applyManifest(deleteSequence(manifestRef.current, id)).catch(() => {});
     },
     [applyManifest],
@@ -383,7 +412,47 @@ export function SlideshowPanel({ scenes, onPersist, onPersistNotes }: SlideshowP
   );
 
   return (
-    <div className="flex flex-col h-full overflow-y-auto text-white">
+    <div
+      className="flex flex-col h-full overflow-y-auto text-white"
+      onKeyDown={(e) => {
+        // In-panel undo — scoped so it never fights the app-level file undo.
+        if ((e.metaKey || e.ctrlKey) && !e.shiftKey && e.key.toLowerCase() === "z") {
+          const target = e.target instanceof HTMLElement ? e.target.tagName : "";
+          if (target === "TEXTAREA" || target === "INPUT") return;
+          e.preventDefault();
+          e.stopPropagation();
+          handleUndo();
+        }
+      }}
+    >
+      {persistError && (
+        <div
+          role="alert"
+          className="flex items-center justify-between gap-2 px-3 py-2 bg-red-950/40 border-b border-red-500/40"
+        >
+          <span className="text-[11px] text-red-300">Changes not saved</span>
+          <button
+            type="button"
+            disabled={retrying}
+            onClick={handleRetryPersist}
+            className="px-2 py-0.5 text-[10px] rounded bg-red-600 text-white enabled:hover:bg-red-500 enabled:active:scale-[0.97] disabled:opacity-50 transition-colors"
+          >
+            {retrying ? "Retrying…" : "Retry"}
+          </button>
+        </div>
+      )}
+      {undoDepth > 0 && (
+        <div className="flex items-center justify-end px-3 py-1 border-b border-neutral-800/60">
+          <button
+            type="button"
+            onClick={handleUndo}
+            title="Undo last slideshow edit (⌘Z)"
+            className="px-2 py-0.5 text-[10px] rounded text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800 active:scale-[0.97] transition-colors"
+          >
+            Undo ({undoDepth})
+          </button>
+        </div>
+      )}
       <SectionHeader
         expanded={expandedSections.has("slides")}
         onToggle={() => toggleSection("slides")}