zidane-ui 9.1.1 → 9.1.3

package/src/workspace/dnd/engine.ts

@@ -1,371 +0,0 @@
-/**
- * The pointer drag engine behind `layout/dnd` (see `index.ts` for how to use
- * it). One drag at a time per window, so the state is module-level: no
- * provider to mount. Nothing here renders through React while the pointer
- * moves: the ghost and the drop preview are plain elements written per
- * frame, and targets hear about a hover only when what they would do changes.
- */
-import type { Point, Rect } from '../headless/strip-drop';
-
-export { zoneRect, type Point, type Rect } from '../headless/strip-drop';
-
-/** What is being dragged. `kind` lets targets pick what they accept ('panel-tab', 'session', …). */
-export interface DragItem {
-  kind: string;
-  id: string;
-  /** Shown by the label preview (and read by assistive tech nowhere: the keyboard path is its own). */
-  label: string;
-  /** An icon class for the label preview. */
-  icon?: string;
-  /** Anything the source wants targets to see (its group, its scope…). */
-  data?: unknown;
-}
-
-/** What a target would do with the item at a point. */
-export interface DropHit {
-  /** The target's own vocabulary: 'center' | 'left' | … for zones, 'strip' for an insertion. */
-  zone: string;
-  /** Tells two hits with the same zone apart (an insertion index): a change re-notifies `onHover`. */
-  key?: string | number;
-  /** Viewport rect to highlight while the drop would land here. */
-  preview?: Rect;
-  /** A thin insertion caret, in viewport coordinates. */
-  caret?: Rect;
-  data?: unknown;
-}
-
-export interface DropTargetSpec {
-  accepts: (item: DragItem) => boolean;
-  /** Null: the item is over the target but dropping would do nothing (no preview, no drop). */
-  hit: (item: DragItem, point: Point, el: HTMLElement) => DropHit | null;
-  onDrop: (item: DragItem, hit: DropHit) => void;
-  /** The hit changed (null: the item left, or the drag ended). Keep it cheap: no per-pixel work. */
-  onHover?: (item: DragItem, hit: DropHit | null) => void;
-}
-
-export interface DragOptions {
-  /** Pixels the pointer travels before a press becomes a drag. */
-  threshold?: number;
-  /** 'clone' copies the source element (never one holding a webview, iframe or canvas); 'label' draws a chip. */
-  preview?: 'clone' | 'label';
-  onStart?: () => void;
-  /** `dropped`: a target took it (false: cancelled with Esc, or released over nothing). */
-  onEnd?: (dropped: boolean) => void;
-}
-
-/** The pointer-down that may start a drag (a React or DOM event). */
-export interface PressEvent {
-  button: number;
-  clientX: number;
-  clientY: number;
-  pointerId: number;
-  currentTarget: EventTarget | null;
-}
-
-const targets = new Map<HTMLElement, DropTargetSpec>();
-
-export function registerDropTarget(el: HTMLElement, spec: DropTargetSpec): () => void {
-  targets.set(el, spec);
-  return () => {
-    if (targets.get(el) === spec) targets.delete(el);
-  };
-}
-
-/* ------------------------------------------------------------------ state */
-
-let active: DragItem | null = null;
-const listeners = new Set<() => void>();
-
-export function currentDrag(): DragItem | null {
-  return active;
-}
-
-export function subscribeDrag(cb: () => void): () => void {
-  listeners.add(cb);
-  return () => listeners.delete(cb);
-}
-
-function setActive(item: DragItem | null) {
-  active = item;
-  for (const cb of [...listeners]) cb();
-}
-
-let cancelCurrent: (() => void) | null = null;
-
-/** Ends the drag in progress without dropping (no-op when none). */
-export function cancelDrag(): void {
-  cancelCurrent?.();
-}
-
-/* ----------------------------------------------------------- hit testing */
-
-interface Found {
-  el: HTMLElement;
-  spec: DropTargetSpec;
-  hit: DropHit | null;
-}
-
-function area(el: HTMLElement): number {
-  const r = el.getBoundingClientRect();
-  return r.width * r.height;
-}
-
-function contains(el: HTMLElement, p: Point): boolean {
-  const r = el.getBoundingClientRect();
-  return p.x >= r.left && p.x < r.left + r.width && p.y >= r.top && p.y < r.top + r.height;
-}
-
-/** The innermost target under the point that accepts the item (the topmost painted, when the DOM can tell). */
-export function findTarget(item: DragItem, p: Point): Found | null {
-  const stack =
-    typeof document.elementsFromPoint === 'function'
-      ? document.elementsFromPoint(p.x, p.y)
-      : [...targets.keys()].filter((el) => contains(el, p)).sort((a, b) => area(a) - area(b));
-  for (const el of stack) {
-    const spec = targets.get(el as HTMLElement);
-    if (!spec || !spec.accepts(item)) continue;
-    return { el: el as HTMLElement, spec, hit: spec.hit(item, p, el as HTMLElement) };
-  }
-  return null;
-}
-
-/* -------------------------------------------------------- ghost, preview */
-
-const LAYER_Z = '80';
-
-function motionOn(): boolean {
-  const v = document.documentElement.dataset.motion;
-  return v !== 'off' && v !== 'reduced';
-}
-
-function layer(): HTMLDivElement {
-  const el = document.createElement('div');
-  el.setAttribute('aria-hidden', 'true');
-  Object.assign(el.style, {
-    position: 'fixed',
-    left: '0px',
-    top: '0px',
-    pointerEvents: 'none',
-    zIndex: LAYER_Z,
-  });
-  return el;
-}
-
-function labelChip(item: DragItem): HTMLElement {
-  const chip = document.createElement('div');
-  chip.className =
-    'zg-raised border flex items-center gap-1.5 h-7 px-3 rounded-full text-zg-label text-[var(--zg-text)] whitespace-nowrap';
-  if (item.icon) {
-    const icon = document.createElement('span');
-    icon.className = item.icon + ' text-zg-body';
-    chip.append(icon);
-  }
-  chip.append(document.createTextNode(item.label));
-  return chip;
-}
-
-/** Never a copy of live surfaces: a webview snapshot can blank the page, a canvas copies empty. */
-function cloneable(el: HTMLElement): boolean {
-  const r = el.getBoundingClientRect();
-  return r.width > 0 && r.width < 480 && r.height < 120 && el.querySelector('webview, iframe, canvas, video') === null;
-}
-
-function buildGhost(item: DragItem, source: HTMLElement | null, mode: 'clone' | 'label', p: Point) {
-  const ghost = layer();
-  ghost.dataset.dragGhost = item.kind;
-  ghost.style.willChange = 'transform';
-  ghost.style.opacity = '0.94';
-  let offset = { x: -12, y: -14 };
-  if (mode === 'clone' && source && cloneable(source)) {
-    const r = source.getBoundingClientRect();
-    const clone = source.cloneNode(true) as HTMLElement;
-    for (const el of [clone, ...clone.querySelectorAll<HTMLElement>('[id], [data-testid], [data-tab-id]')]) {
-      el.removeAttribute('id');
-      el.removeAttribute('data-testid');
-      el.removeAttribute('data-tab-id');
-    }
-    clone.style.width = r.width + 'px';
-    clone.style.boxShadow = 'var(--zg-shadow-float)';
-    clone.style.borderRadius = '9999px';
-    ghost.append(clone);
-    offset = { x: r.left - p.x, y: r.top - p.y };
-  } else {
-    ghost.append(labelChip(item));
-  }
-  return { ghost, offset };
-}
-
-function buildPreview(): HTMLDivElement {
-  const el = layer();
-  el.dataset.dropPreview = '';
-  Object.assign(el.style, {
-    display: 'none',
-    borderRadius: 'var(--zg-radius-md, 8px)',
-    border: '1.5px solid var(--zg-accent)',
-    background: 'color-mix(in oklab, var(--zg-accent) 14%, transparent)',
-    zIndex: String(Number(LAYER_Z) - 1),
-    // Glides by transform only: a layout property animated here would relayout every frame.
-    transition: motionOn() ? 'transform 120ms' : 'none',
-  });
-  return el;
-}
-
-function buildCaret(): HTMLDivElement {
-  const el = layer();
-  el.dataset.dropCaret = '';
-  Object.assign(el.style, {
-    display: 'none',
-    borderRadius: '2px',
-    background: 'var(--zg-accent)',
-    zIndex: String(Number(LAYER_Z) - 1),
-  });
-  return el;
-}
-
-function place(el: HTMLElement, r: Rect | undefined) {
-  if (!r) {
-    el.style.display = 'none';
-    return;
-  }
-  el.style.display = 'block';
-  el.style.transform = 'translate3d(' + r.left + 'px,' + r.top + 'px,0)';
-  el.style.width = r.width + 'px';
-  el.style.height = r.height + 'px';
-}
-
-/* ------------------------------------------------------------------ drag */
-
-/** Webviews swallow the pointer while it crosses them (the class turns that off: workspace.css). */
-const WEBVIEW_OFF = 'zg-resizing-browser';
-
-/**
- * Call from a pointer-down: becomes a drag once the pointer travels
- * `threshold` px, else the press stays a click. Ends on release (drops on
- * the target under the pointer), Esc or window blur (cancels).
- */
-export function startDrag(e: PressEvent, item: DragItem, options: DragOptions = {}): void {
-  if (e.button !== 0 || active || cancelCurrent) return;
-  const { threshold = 4, preview = 'clone' } = options;
-  const source = e.currentTarget instanceof HTMLElement ? e.currentTarget : null;
-  const start = { x: e.clientX, y: e.clientY };
-  let point = start;
-  let dragging = false;
-  let frame = 0;
-  let ghost: { ghost: HTMLDivElement; offset: Point } | null = null;
-  let overlay: HTMLDivElement | null = null;
-  let caret: HTMLDivElement | null = null;
-  let hovered: { el: HTMLElement; spec: DropTargetSpec; hit: DropHit | null } | null = null;
-  const prevCursor = document.body.style.cursor;
-  const prevSelect = document.body.style.userSelect;
-
-  const update = () => {
-    frame = 0;
-    if (!dragging || !ghost) return;
-    ghost.ghost.style.transform =
-      'translate3d(' + (point.x + ghost.offset.x) + 'px,' + (point.y + ghost.offset.y) + 'px,0)';
-    const found = findTarget(item, point);
-    const same =
-      hovered !== null &&
-      found !== null &&
-      found.el === hovered.el &&
-      found.hit?.zone === hovered.hit?.zone &&
-      found.hit?.key === hovered.hit?.key;
-    if (!same) {
-      if (hovered && (!found || found.el !== hovered.el)) hovered.spec.onHover?.(item, null);
-      if (found) found.spec.onHover?.(item, found.hit);
-    }
-    hovered = found;
-    if (overlay) place(overlay, found?.hit?.preview);
-    if (caret) place(caret, found?.hit?.caret);
-  };
-
-  const begin = () => {
-    dragging = true;
-    ghost = buildGhost(item, source, preview, point);
-    overlay = buildPreview();
-    caret = buildCaret();
-    document.body.append(overlay, caret, ghost.ghost);
-    document.body.classList.add(WEBVIEW_OFF);
-    document.body.style.cursor = 'grabbing';
-    document.body.style.userSelect = 'none';
-    document.documentElement.dataset.dragging = item.kind;
-    try {
-      if (source && source.isConnected) source.setPointerCapture?.(e.pointerId);
-    } catch {
-      // The pointer is gone already (released between events): the window listeners still end the drag.
-    }
-    setActive(item);
-    options.onStart?.();
-    update();
-  };
-
-  const finish = (drop: boolean) => {
-    window.removeEventListener('pointermove', onMove, true);
-    window.removeEventListener('pointerup', onUp, true);
-    window.removeEventListener('pointercancel', onCancel, true);
-    window.removeEventListener('keydown', onKey, true);
-    window.removeEventListener('blur', onCancel);
-    window.removeEventListener('dragstart', onNativeDrag, true);
-    cancelCurrent = null;
-    cancelAnimationFrame(frame);
-    if (!dragging) return;
-    if (drop) update();
-    const target = hovered;
-    hovered = null;
-    target?.spec.onHover?.(item, null);
-    ghost?.ghost.remove();
-    overlay?.remove();
-    caret?.remove();
-    document.body.classList.remove(WEBVIEW_OFF);
-    document.body.style.cursor = prevCursor;
-    document.body.style.userSelect = prevSelect;
-    delete document.documentElement.dataset.dragging;
-    try {
-      if (source?.hasPointerCapture?.(e.pointerId)) source.releasePointerCapture(e.pointerId);
-    } catch {
-      // Released already.
-    }
-    // The click that ends a drag must not also activate what is under it.
-    const swallow = (ev: Event) => {
-      ev.stopPropagation();
-      ev.preventDefault();
-    };
-    window.addEventListener('click', swallow, true);
-    setTimeout(() => window.removeEventListener('click', swallow, true), 0);
-    setActive(null);
-    const dropped = drop && target !== null && target.hit !== null;
-    if (dropped) target.spec.onDrop(item, target.hit!);
-    options.onEnd?.(dropped);
-  };
-
-  const onMove = (ev: PointerEvent) => {
-    if (ev.pointerId !== undefined && e.pointerId !== undefined && ev.pointerId !== e.pointerId) return;
-    point = { x: ev.clientX, y: ev.clientY };
-    if (!dragging) {
-      if (Math.hypot(point.x - start.x, point.y - start.y) < threshold) return;
-      begin();
-      return;
-    }
-    if (!frame) frame = requestAnimationFrame(update);
-  };
-  const onUp = (ev: PointerEvent) => {
-    point = { x: ev.clientX, y: ev.clientY };
-    finish(true);
-  };
-  const onCancel = () => finish(false);
-  const onKey = (ev: KeyboardEvent) => {
-    if (ev.key !== 'Escape' || !dragging) return;
-    ev.preventDefault();
-    ev.stopPropagation();
-    finish(false);
-  };
-  const onNativeDrag = (ev: Event) => ev.preventDefault();
-
-  cancelCurrent = () => finish(false);
-  window.addEventListener('pointermove', onMove, true);
-  window.addEventListener('pointerup', onUp, true);
-  window.addEventListener('pointercancel', onCancel, true);
-  window.addEventListener('keydown', onKey, true);
-  window.addEventListener('blur', onCancel);
-  window.addEventListener('dragstart', onNativeDrag, true);
-}

package/src/workspace/dnd/hooks.ts

@@ -1,72 +0,0 @@
-/** React bindings for the drag engine (`engine.ts`). */
-import {
-  useCallback,
-  useLayoutEffect,
-  useRef,
-  useSyncExternalStore,
-  type PointerEvent as ReactPointerEvent,
-} from 'react';
-
-import {
-  currentDrag,
-  registerDropTarget,
-  startDrag,
-  subscribeDrag,
-  type DragItem,
-  type DragOptions,
-  type DropHit,
-  type DropTargetSpec,
-  type Point,
-} from './engine';
-
-const NEVER: DropTargetSpec = { accepts: () => false, hit: () => null, onDrop: () => {} };
-
-/**
- * A ref callback that makes its element a drop target. The spec is read
- * fresh on every event, so it may close over render values; null turns the
- * target off.
- */
-export function useDropTarget<T extends HTMLElement = HTMLElement>(
-  spec: DropTargetSpec | null,
-): (el: T | null) => void {
-  const latest = useRef(spec);
-  // Read on pointer events only, after the commit.
-  useLayoutEffect(() => {
-    latest.current = spec;
-  });
-  const off = useRef<(() => void) | null>(null);
-  return useCallback((el: T | null) => {
-    off.current?.();
-    off.current = null;
-    if (!el) return;
-    off.current = registerDropTarget(el, {
-      accepts: (item) => (latest.current ?? NEVER).accepts(item),
-      hit: (item: DragItem, point: Point, target: HTMLElement) => (latest.current ?? NEVER).hit(item, point, target),
-      onDrop: (item: DragItem, hit: DropHit) => latest.current?.onDrop(item, hit),
-      onHover: (item: DragItem, hit: DropHit | null) => latest.current?.onHover?.(item, hit),
-    });
-  }, []);
-}
-
-/**
- * Props for a drag source: spread `{ onPointerDown }` on the element. Null
- * `item` turns it off. Clicks keep working (a press only becomes a drag past
- * the threshold, and the click ending a drag is swallowed).
- */
-export function useDragSource(item: DragItem | null, options?: DragOptions) {
-  const latest = useRef({ item, options });
-  useLayoutEffect(() => {
-    latest.current = { item, options };
-  });
-  const onPointerDown = useCallback((e: ReactPointerEvent<HTMLElement>) => {
-    const { item: it, options: opts } = latest.current;
-    if (it) startDrag(e, it, opts);
-  }, []);
-  return { onPointerDown };
-}
-
-/** The item being dragged (re-renders on start and end only), optionally only of one kind. */
-export function useDragItem(kind?: string): DragItem | null {
-  const item = useSyncExternalStore(subscribeDrag, currentDrag, () => null);
-  return item && (kind === undefined || item.kind === kind) ? item : null;
-}

package/src/workspace/dnd/index.ts

@@ -1,57 +0,0 @@
-/**
- * Pointer drag and drop for the window's layout: tabs between strips and
- * groups, and anything else that drops on a region. Not panel-specific:
- * items carry a `kind`, targets pick what they accept.
- *
- * Source (any element):
- *
- *   const source = useDragSource({ kind: PANEL_TAB_DRAG, id, label, icon: 'i-ph-file' }, {
- *     preview: 'label',          // 'clone' (default) copies the element; never one with a webview/canvas
- *     onEnd: (dropped) => {},
- *   });
- *   <div {...source}>…</div>     // or call startDrag(e, item, options) from your own onPointerDown
- *
- * Target (a group's body: the five zones of `headless/tree`'s `dropTarget`, highlighted with `zoneRect`):
- *
- *   const ref = useDropTarget({
- *     accepts: (item) => item.kind === PANEL_TAB_DRAG,
- *     hit: (item, point, el) => bodyDrop(el.getBoundingClientRect(), point), // { zone, preview } | null (no-op)
- *     onDrop: (item, hit) => dropTab(item.id, { groupId, zone: hit.zone as DropZone }),
- *     onHover: (item, hit) => {},                             // only when zone/key changes
- *   });
- *   <section ref={ref}>…</section>
- *
- * The innermost accepting target under the pointer wins (a strip inside a
- * group beats the group). While a drag runs: the ghost and preview are
- * drawn above the dev browser page, webviews stop taking the pointer,
- * `html[data-dragging]` names the kind, Esc or a window blur cancels, and
- * the click ending the drag is swallowed. `useDragItem(kind)` re-renders on
- * start/end only, for showing drop affordances. Keyboard users get the
- * moves from keys (Alt+Shift+←/→ on a tab, the split shortcuts), not from here.
- */
-export {
-  cancelDrag,
-  currentDrag,
-  findTarget,
-  registerDropTarget,
-  startDrag,
-  subscribeDrag,
-  zoneRect,
-  type DragItem,
-  type DragOptions,
-  type DropHit,
-  type DropTargetSpec,
-  type Point,
-  type PressEvent,
-  type Rect,
-} from './engine';
-export { useDragItem, useDragSource, useDropTarget } from './hooks';
-// Content that follows a move without remounting: see `parking.tsx`.
-export {
-  createSlotRegistry,
-  Parking,
-  useParkingSlot,
-  useSlotRegistry,
-  type ParkedItem,
-  type SlotRegistry,
-} from './parking';

package/src/workspace/dnd/parking.tsx

@@ -1,181 +0,0 @@
-/**
- * Keyed parking for content that moves between slots without remounting.
- *
- * Each item renders once, through a portal into its own container element;
- * the container (not the React tree) moves into whichever slot owns the
- * item now. A tab dragged to another group therefore keeps its state: the
- * Files editor its buffers and scroll, the terminal its view (no history
- * replay, no second placement claim). Moving an element resets the scroll
- * of what it holds, so scrolled descendants are put back.
- *
- *   const slots = useSlotRegistry();                  // one per region
- *   <div ref={useParkingSlot(slots, groupId)} />       // where a group shows its content (no React children)
- *   <Parking slots={slots} items={[{ key, slot, visible, node }]} />   // anywhere after the slots
- *
- * `visible: false` keeps the item mounted behind `hidden`. Slots and
- * containers are plain elements, so a slot must render no children of its
- * own. Key the `Parking` to remount everything (another conversation).
- */
-import { useCallback, useLayoutEffect, useMemo, useRef, useState, type ReactNode } from 'react';
-import { createPortal } from 'react-dom';
-import { useHydrated } from '../../hooks/useHydrated';
-import { pulseLayout } from '../../motion/layout-animating';
-
-export interface ParkedItem {
-  key: string;
-  /** The slot showing it. An unknown slot leaves the item where it is until that slot mounts. */
-  slot: string;
-  visible: boolean;
-  node: ReactNode;
-}
-
-type Placer = (slotId: string) => void;
-
-export interface SlotRegistry {
-  slot: (id: string) => HTMLElement | undefined;
-  attach: (id: string, el: HTMLElement) => void;
-  detach: (id: string, el: HTMLElement) => void;
-  /** Called with a slot's id when it mounts. */
-  onAttach: (placer: Placer) => () => void;
-}
-
-export function createSlotRegistry(): SlotRegistry {
-  const slots = new Map<string, HTMLElement>();
-  const placers = new Set<Placer>();
-  return {
-    slot: (id) => slots.get(id),
-    attach: (id, el) => {
-      slots.set(id, el);
-      for (const place of [...placers]) place(id);
-    },
-    detach: (id, el) => {
-      if (slots.get(id) === el) slots.delete(id);
-    },
-    onAttach: (placer) => {
-      placers.add(placer);
-      return () => placers.delete(placer);
-    },
-  };
-}
-
-export function useSlotRegistry(): SlotRegistry {
-  return useMemo(() => createSlotRegistry(), []);
-}
-
-/** The ref of a slot element. */
-export function useParkingSlot(slots: SlotRegistry, id: string): (el: HTMLElement | null) => void {
-  const current = useRef<HTMLElement | null>(null);
-  return useCallback(
-    (el: HTMLElement | null) => {
-      if (current.current && current.current !== el) slots.detach(id, current.current);
-      current.current = el;
-      if (el) slots.attach(id, el);
-    },
-    [slots, id],
-  );
-}
-
-/** Moves `el` into `parent` with its scrolled descendants where they were. */
-function moveKeepingScroll(el: HTMLElement, parent: HTMLElement) {
-  const scrolled: [Element, number, number][] = [];
-  if (el.isConnected) {
-    for (const node of [el, ...el.querySelectorAll('*')]) {
-      if (node.scrollTop !== 0 || node.scrollLeft !== 0) scrolled.push([node, node.scrollTop, node.scrollLeft]);
-    }
-  }
-  parent.append(el);
-  for (const [node, top, left] of scrolled) {
-    node.scrollTop = top;
-    node.scrollLeft = left;
-  }
-}
-
-export function Parking({
-  slots,
-  items,
-  className = '',
-}: {
-  slots: SlotRegistry;
-  items: readonly ParkedItem[];
-  /** The containers' class (they sit in the slot like the content they hold). */
-  className?: string;
-}) {
-  const hydrated = useHydrated();
-  const [containers] = useState(() => new Map<string, HTMLDivElement>());
-  const plan = useRef(items);
-  // The placer's layout effect (a child's, so it runs before any of ours) places this render's plan.
-  // eslint-disable-next-line react-hooks/refs
-  plan.current = items;
-  // Created during render: the portals below need them in this same commit.
-  const containerFor = (key: string) => {
-    let el = containers.get(key);
-    if (!el) {
-      el = document.createElement('div');
-      el.dataset.parked = key;
-      containers.set(key, el);
-    }
-    if (el.className !== className) el.className = className;
-    return el;
-  };
-  // No document to hold containers on a server render, so none while hydrating its HTML either.
-  if (!hydrated) return null;
-  const portals = items.map((item) => createPortal(item.node, containerFor(item.key), item.key));
-  return (
-    <>
-      {/* First: its layout effect places the containers before the content's own effects measure them. */}
-      <Placer slots={slots} plan={plan} containers={containers} />
-      {portals}
-    </>
-  );
-}
-
-function Placer({
-  slots,
-  plan,
-  containers,
-}: {
-  slots: SlotRegistry;
-  plan: { current: readonly ParkedItem[] };
-  containers: Map<string, HTMLDivElement>;
-}) {
-  const placeIn = useCallback(
-    // `plan` is a ref read when placing, not a render value.
-    // eslint-disable-next-line react-hooks/preserve-manual-memoization
-    (slotId: string | null) => {
-      let moved = false;
-      for (const item of plan.current) {
-        if (slotId !== null && item.slot !== slotId) continue;
-        const el = containers.get(item.key);
-        if (!el) continue;
-        if (el.hidden === item.visible) el.hidden = !item.visible;
-        const slot = slots.slot(item.slot);
-        if (slot && el.parentElement !== slot) {
-          moved = true;
-          moveKeepingScroll(el, slot);
-        }
-      }
-      // A reparent at the same size fires no ResizeObserver: followers (the browser slot) re-measure.
-      if (moved) pulseLayout();
-    },
-    [slots, plan, containers],
-  );
-  useLayoutEffect(() => {
-    const live = new Set(plan.current.map((i) => i.key));
-    for (const [key, el] of containers) {
-      if (live.has(key)) continue;
-      el.remove();
-      containers.delete(key);
-    }
-    placeIn(null);
-  });
-  useLayoutEffect(() => {
-    const off = slots.onAttach(placeIn);
-    placeIn(null);
-    return () => {
-      off();
-      // Out of the slots, kept: a StrictMode remount places the same containers again.
-      for (const el of containers.values()) el.remove();
-    };
-  }, [slots, placeIn, containers]);
-  return null;
-}