CedarCopilot/cedar-mail

/**
 * How much room a graph card takes, and how much air goes between them.
 *
 * ── Why these are not `autoLayout`'s numbers ──
 *
 * `autoLayout` is shared with the outbound flow canvas, whose nodes are 200×72 and genuinely
 * that size. A graph card is not: it stacks a name and up to four `displayOnCard` field rows,
 * so it renders around 150px tall. Dagre was being told 72, and it spaces RANKS by
 * `ranksep + nodeHeight` — so with a 150px card and `ranksep: 80` the actual clear space
 * between two rows came out near zero and the cards looked stacked against each other.
 *
 * Telling dagre the real size is most of the fix; the rest is simply more air. A chart is read
 * by tracing lines between boxes, and the lines need somewhere to be.
 */

/** Matches the card's own `minWidth`. */
export const CARD_WIDTH = 200;

/**
 * The card's REAL rendered height, not its `minHeight`.
 *
 * A name plus four field rows plus padding. Deliberately generous: overshooting spreads the
 * chart slightly, while undershooting overlaps the cards — and only one of those is a bug.
 * Layout runs before React Flow has measured anything, so this cannot be read from the DOM.
 */
export const CARD_HEIGHT = 150;

/** Horizontal air between two cards in the same row. */
export const GAP_X = 120;

/** Vertical air between two rows, on top of the card height. */
export const GAP_Y = 110;

/**
 * Between the reporting tree and the loose block below it.
 *
 * Wider than a row gap so the split reads as "these are two different things" rather than as
 * one more rank — the whole point of the lower block is that its nodes are NOT in the hierarchy.
 */
export const SECTION_GAP = 200;

/** The canvas margin, so the topmost card is not flush against the viewport edge. */
export const MARGIN = 24;