Kill animation: fade the ghost instead of crushing it

The directional crush (to-left/right/up/down/hcenter/vcenter/br) added
motion that competed with the grower's FLIP reveal, which already
carries the direction. Replacing with a uniform opacity fade reads
cleaner and eliminates the case-detection branching — every kill path
(edge / middle / last-pane) now uses the same .pane-fading-out class.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: nedtwigg

docs/specs/layout.md

@@ -297,22 +297,17 @@ When a pane is added, its dockview group element gets a directional `.pane-spawn
 
 The direction is carried via `FreshlySpawnedContext` — a `Map<paneId, SpawnDirection>` written by the spawn call site and consumed once by `TerminalPanel`'s `useLayoutEffect` on first mount.
 
-### Kill (ghost crush + FLIP reclaim)
+### Kill (ghost fade + FLIP reclaim)
 
 `orchestrateKill(api, killedId)` in `Pond.tsx` runs on kill confirmation:
 
 1. Snapshot `getBoundingClientRect` for every other panel's group element.
 2. `destroyTerminal` + `api.removePanel`; dockview snaps the layout.
 3. Measure post-rects. Any panel whose rect grew is a "grower."
-4. Pick a crush direction by comparing growers' post-rect centers against the killed rect's center:
-   - Growers to one side only (horizontal axis) → `.pane-crushing-to-{left,right}`.
-   - Growers to one side only (vertical axis) → `.pane-crushing-{up,down}`.
-   - Growers on both sides of the killed pane's center (horizontal or vertical) → `.pane-crushing-to-{hcenter,vcenter}` (middle-kill crush).
-   - No growers (last-pane kill) → `.pane-crushing-to-br` (crushes toward bottom-right corner, opposite of where the auto-spawned replacement reveals from).
-5. Mount a solid `var(--color-surface)` ghost overlay at the killed rect (`position: fixed`, `z-index: 55`) with that class; it removes itself on `animationend` with a 1s timeout safety net.
-6. For each grower, apply an inline `clip-path: inset(...)` with the newly-claimed territory clipped off, force a reflow, then transition to `inset(0)`. This reveals the grower into the vacated space without affecting `getBoundingClientRect`. Clears on `transitionend`.
-
-Case detection is purely rect-based (measure before and after removal), so 2-pane splits, linear 3+ rows/columns, and nested splits all fall through the same code path.
+4. Mount a solid `var(--color-surface)` ghost overlay at the killed rect (`position: fixed`, `z-index: 55`) with the `.pane-fading-out` class; it removes itself on `animationend` with a 1s timeout safety net. A uniform fade works for every case (edge/middle/last-pane kill) because the directional cue is already carried by the grower's FLIP reveal.
+5. For each grower, apply an inline `clip-path: inset(...)` with the newly-claimed territory clipped off, force a reflow, then transition to `inset(0)`. This reveals the grower into the vacated space without affecting `getBoundingClientRect`. Clears on `transitionend`.
+
+Case handling is purely rect-based (measure before and after removal), so 2-pane splits, linear 3+ rows/columns, and nested splits all fall through the same code path with no per-case branching.
 
 ### Auto-spawn delay
 

lib/src/components/Pond.tsx

@@ -991,16 +991,15 @@ function KillConfirmOverlay({ confirmKill, panelElements, onCancel }: {
 // Orchestrates the visual reclaim when a pane is killed. Captures pre-rects of
 // every surviving pane's group element, removes the panel (dockview snaps the
 // layout), then:
-//   - Renders a ghost overlay at the killed pane's position with a clip-path
-//     crush animation (direction chosen from how the layout actually changed).
+//   - Renders a ghost overlay at the killed pane's position and fades it out.
 //   - Applies a FLIP-style clip-path reveal on each grower so its newly claimed
 //     territory is hidden at start and swept in by the animation. We use
 //     clip-path (not transform) because transform would corrupt the grower's
 //     getBoundingClientRect and make SelectionOverlay lag.
 //
-// For the "no surviving panes" case (Case C), we only render the ghost crushing
-// to the bottom-right corner; the auto-spawn handler (onDidRemovePanel) will
-// create a fresh pane tagged with 'top-left' spawn direction.
+// For the "no surviving panes" case (last-pane kill), only the ghost fade runs;
+// the delayed auto-spawn (see onDidRemovePanel) creates a fresh pane after the
+// fade, tagged with 'top-left' spawn direction.
 function orchestrateKill(api: DockviewApi, killedId: string): void {
   const panel = api.getPanel(killedId);
   if (!panel) return;
@@ -1030,7 +1029,7 @@ function orchestrateKill(api: DockviewApi, killedId: string): void {
   destroyTerminal(killedId);
   api.removePanel(panel);
 
-  // Classify growers (panes whose rect changed) and pick the crush direction.
+  // Collect growers (panes whose rect changed) for the FLIP reveal below.
   interface Grower { el: HTMLElement; preRect: DOMRect; postRect: DOMRect; }
   const growers: Grower[] = [];
   for (const p of api.panels) {
@@ -1043,29 +1042,7 @@ function orchestrateKill(api: DockviewApi, killedId: string): void {
     growers.push({ el: pre.el, preRect: pre.rect, postRect });
   }
 
-  let crushClass = 'pane-crushing-to-br';
-  if (killedRect && growers.length > 0) {
-    const horizontal = growers.some(g =>
-      Math.abs(g.postRect.width - g.preRect.width) > Math.abs(g.postRect.height - g.preRect.height)
-    );
-    const killedCenterX = (killedRect.left + killedRect.right) / 2;
-    const killedCenterY = (killedRect.top + killedRect.bottom) / 2;
-    if (horizontal) {
-      const hasLeft = growers.some(g => (g.postRect.left + g.postRect.right) / 2 < killedCenterX);
-      const hasRight = growers.some(g => (g.postRect.left + g.postRect.right) / 2 > killedCenterX);
-      if (hasLeft && hasRight) crushClass = 'pane-crushing-to-hcenter';
-      else if (hasLeft) crushClass = 'pane-crushing-to-right';
-      else crushClass = 'pane-crushing-to-left';
-    } else {
-      const hasAbove = growers.some(g => (g.postRect.top + g.postRect.bottom) / 2 < killedCenterY);
-      const hasBelow = growers.some(g => (g.postRect.top + g.postRect.bottom) / 2 > killedCenterY);
-      if (hasAbove && hasBelow) crushClass = 'pane-crushing-to-vcenter';
-      else if (hasAbove) crushClass = 'pane-crushing-down';
-      else crushClass = 'pane-crushing-up';
-    }
-  }
-
-  // Mount ghost overlay at the killed pane's pre-removal rect.
+  // Mount ghost overlay at the killed pane's pre-removal rect and fade it out.
   if (killedRect) {
     const ghost = document.createElement('div');
     Object.assign(ghost.style, {
@@ -1078,15 +1055,14 @@ function orchestrateKill(api: DockviewApi, killedId: string): void {
       zIndex: '55',
       pointerEvents: 'none',
     });
-    ghost.classList.add(crushClass);
+    ghost.classList.add('pane-fading-out');
     document.body.appendChild(ghost);
     const cleanup = () => {
       if (ghost.isConnected) ghost.remove();
     };
     ghost.addEventListener('animationend', cleanup, { once: true });
-    // Safety: reduced-motion + forwards fill mode still fires animationend, but
-    // if the browser ever elides the event (or the element is detached early),
-    // a timeout ensures the ghost doesn't linger.
+    // Safety: if the browser ever elides animationend (or the element is
+    // detached early), a timeout ensures the ghost doesn't linger.
     setTimeout(cleanup, 1000);
   }
 

lib/src/theme.css

@@ -167,35 +167,21 @@ body.vscode-light {
 .pane-spawning-from-top      { animation: pane-spawn-from-top      440ms cubic-bezier(0.22, 1, 0.36, 1); }
 .pane-spawning-from-top-left { animation: pane-spawn-from-top-left 440ms cubic-bezier(0.22, 1, 0.36, 1); }
 
-/* Pane kill — crush the ghost overlay in the direction of the replacing neighbor
- * (or to the centerline for a middle kill, or to the bottom-right corner when no
- * replacer exists and the auto-spawn takes over). */
-
-@keyframes pane-crush-to-left    { from { clip-path: inset(0 0 0 0); }        to { clip-path: inset(0 100% 0 0); } }
-@keyframes pane-crush-to-right   { from { clip-path: inset(0 0 0 0); }        to { clip-path: inset(0 0 0 100%); } }
-@keyframes pane-crush-up         { from { clip-path: inset(0 0 0 0); }        to { clip-path: inset(0 0 100% 0); } }
-@keyframes pane-crush-down       { from { clip-path: inset(0 0 0 0); }        to { clip-path: inset(100% 0 0 0); } }
-@keyframes pane-crush-to-hcenter { from { clip-path: inset(0 0 0 0); }        to { clip-path: inset(0 50% 0 50%); } }
-@keyframes pane-crush-to-vcenter { from { clip-path: inset(0 0 0 0); }        to { clip-path: inset(50% 0 50% 0); } }
-@keyframes pane-crush-to-br      { from { clip-path: inset(0 0 0 0); opacity: 1; } to { clip-path: inset(100% 0 0 100%); opacity: 0; } }
-
-.pane-crushing-to-left    { animation: pane-crush-to-left    440ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
-.pane-crushing-to-right   { animation: pane-crush-to-right   440ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
-.pane-crushing-up         { animation: pane-crush-up         440ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
-.pane-crushing-down       { animation: pane-crush-down       440ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
-.pane-crushing-to-hcenter { animation: pane-crush-to-hcenter 440ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
-.pane-crushing-to-vcenter { animation: pane-crush-to-vcenter 440ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
-.pane-crushing-to-br      { animation: pane-crush-to-br      440ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
+/* Pane kill — fade the ghost overlay out. Directional crushing read as noisy
+ * relative to the grower reveal already carrying the directional cue; a
+ * uniform fade is cleaner and works for every case (edge kill, middle kill,
+ * last-pane kill) with one rule. */
+
+@keyframes pane-fade-out {
+  from { opacity: 1; }
+  to   { opacity: 0; }
+}
+
+.pane-fading-out { animation: pane-fade-out 440ms cubic-bezier(0.22, 1, 0.36, 1) forwards; }
 
 @media (prefers-reduced-motion: reduce) {
   .pane-spawning-from-left,
   .pane-spawning-from-top,
   .pane-spawning-from-top-left,
-  .pane-crushing-to-left,
-  .pane-crushing-to-right,
-  .pane-crushing-up,
-  .pane-crushing-down,
-  .pane-crushing-to-hcenter,
-  .pane-crushing-to-vcenter,
-  .pane-crushing-to-br { animation: none; }
+  .pane-fading-out { animation: none; }
 }