{members.map((m, i) => (
);
}
// ─── 3 members: equilateral triangle of overlapping tiles ───────────────
// ─── 4-10 members: diamond of overlapping tiles (+N in bottom slot) ─────
//
// Math: each tile has size T = ratio · S. Tile centers sit on a circle of
// radius R around the box center; we choose R = (S - T) / 2 so the
// farthest edges of the tiles graze the box's bounding box (no clipping,
// no wasted whitespace). Angles are spaced evenly, starting at -90° (top)
// so the layout always has a tile pointing up — visually anchors the
// composition the same way the 2-member case anchors top-left.
//
// Ratio choice:
// • 3 tiles at 0.62 → adjacent tiles overlap by ~12% of S edge-to-edge
// (visually similar to the 2-member 30% offset overlap once you
// account for the triangular spacing being larger than diagonal).
// • 4 tiles at 0.58 → cardinal positions, neighbors overlap by ~16% of S.
//
// Both ratios keep the tiles large enough to read at size 32 while
// leaving enough gap for the 2px borders to read clearly.
const isTriangle = members.length === 3;
const tileRatio = isTriangle ? 0.62 : 0.58;
const tileSize = Math.round(size * tileRatio);
const radius = (size - tileSize) / 2;
const cx = size / 2;
const cy = size / 2;
// Angles in radians, -90° (top) start. For triangle: 3 evenly spaced.
// For diamond: 4 cardinal points (top, right, bottom, left).
const slotCount = isTriangle ? 3 : 4;
const startAngle = -Math.PI / 2;
const angles = Array.from({ length: slotCount }, (_, i) =>
startAngle + (i * 2 * Math.PI) / slotCount,
);
const positions = angles.map((a) => ({
left: Math.round(cx + radius * Math.cos(a) - tileSize / 2),
top: Math.round(cy + radius * Math.sin(a) - tileSize / 2),
}));
// Visible avatar tiles + overflow slot logic:
// • 3 members → 3 tiles, no overflow
// • 4 members → 4 tiles, no overflow
// • 5+ members → 3 tiles + `+N` in the 4th (bottom) slot
// Overflow lives in the bottom slot of the diamond so it reads as
// "more behind these three" rather than "+N is one of the people".
const overflow = members.length > 4 ? members.length - 3 : 0;
const visibleCount = overflow > 0 ? 3 : members.length;
const visibleMembers = members.slice(0, visibleCount);
// Bottom slot of diamond is index 2 (top, right, bottom, left).
const overflowSlot = 2;
const overflowFontSize = Math.max(9, Math.round(tileSize * 0.42));
// Z-stack: top tile sits highest so the upward-pointing avatar is fully
// visible; remaining tiles descend by angle so each one tucks slightly
// under its clockwise neighbor — mirrors the 2-member case where the
// first tile sits on top of the second.
const zIndexFor = (slotIndex: number) => slotCount - slotIndex;
return (
{visibleMembers.map((m, i) => {
// Skip the overflow slot when rendering visible tiles in the
// overflow case — only relevant when overflow > 0 and i would
// collide with overflowSlot. With visibleCount=3 and overflowSlot=2
// (bottom), this never collides because i ∈ {0,1,2} maps to
// slotIndex ∈ {0,1,3} — see assignment below.
const slotIndex = overflow > 0 && i >= overflowSlot ? i + 1 : i;
const pos = positions[slotIndex]!;
return (
);
}
{`+${overflow}`}
)}