Function animateCardsOutOfHeaderThen

public/js/dragAndDrop.js:690–889

(done)

// Animate cards "flying out" of header icons back into their zones.
function animateCardsOutOfHeaderThen(done) {
  const header = getHeaderDropArea();
  if (!header) { done(); return; }

  const cards = getCards().filter(c => c && c.headerIconButton);
  if (!cards.length) { done(); return; }

  // Make sure target containers are visible so their rects are non-zero.
  const sb  = getSidebar();
  const top = getTopZone();
  if (sb)  sb.style.display  = '';
  if (top) top.style.display = '';

  const SAFE_TOP       = 16;
  const START_OFFSET_Y = 95;   // a touch closer to header

  const layout = readLayout();
  const plan = [];

  cards.forEach(card => {
    const iconBtn = card.headerIconButton;
    if (!iconBtn) return;
    const zoneId = resolveTargetZoneForExpand(card.id);
    if (!zoneId) return;
    plan.push({ card, iconBtn, zoneId });
  });

  if (!plan.length) {
    done();
    return;
  }

  const savedHeights = {};
  CARD_IDS.forEach(id => {
    const val = parseFloat($(id)?.dataset.lastHeight || '');
    savedHeights[id] = (!Number.isNaN(val) && val > 0) ? val : 190;
  });

  const sidebarOrder = getZoneOrder(layout, ZONES.SIDEBAR);
  const fallbackSidebarOrder = sidebarOrder.length ? sidebarOrder : CARD_IDS;
  const ghosts = [];

  // Reserve top-zone height up front so the file list resizes BEFORE the ghosts land.
  __cleanupTopZonePreExpand = null;
  if (top) {
    const targetsTop = plan.filter(p => p.zoneId === ZONES.TOP_LEFT || p.zoneId === ZONES.TOP_RIGHT);
    if (targetsTop.length) {
      const prevMinHeight = top.style.minHeight;
      const reserved = Math.max(
        220,
        ...targetsTop.map(p => savedHeights[p.card.id] || 190)
      );

      top.style.display = '';
      top.style.minHeight = `${reserved}px`;
      void top.offsetHeight;

      const left = getLeftCol();