@oxyhq/bloom 0.35.0 → 0.35.2

package/lib/commonjs/avatar-group/cluster-layout.js

@@ -7,8 +7,9 @@ exports.computeClusterLayout = computeClusterLayout;
 /**
  * Deterministic organic circle-packing for the {@link AvatarGroup} `cluster`
  * layout — the iMessage-style "magnetic bubble cluster" where several avatars of
- * varying sizes nestle together inside a round bounding box (a large primary in
- * the middle/front, smaller members packed around it with a uniform gap).
+ * NEAR-EQUAL size nestle tightly together and fill a round bounding box (a
+ * modestly larger primary with the rest only slightly smaller, packed against
+ * each other with a small uniform gap — not a big primary ringed by tiny dots).
  *
  * For 4+ members the layout is produced by a small, FULLY DETERMINISTIC
  * force-directed relaxation (no `Math.random`): the primary is pinned at the
@@ -17,15 +18,18 @@ exports.computeClusterLayout = computeClusterLayout;
  * centre and (b) push any two circles apart until they clear a uniform gap. A
  * fixed iteration count + deterministic seed means the same `count` always
  * yields byte-identical positions, so native and web render the cluster
- * identically with no `onLayout`/DOM measurement. The very small counts (1, 2,
- * 3) — where a relaxation degenerates into a line or a lone pair — use explicit
- * iMessage-style arrangements instead.
+ * identically with no `onLayout`/DOM measurement. The small counts (1, 2, 3, 4)
+ * use explicit iMessage-style arrangements instead — 1–3 because a relaxation
+ * there degenerates into a line or a lone pair, and 4 because the iconic
+ * 4-person layout is a clean 2×2 grid of equal circles rather than a pack.
  *
  * Output is resolution-independent: each bubble is expressed as a fraction of
  * the group's bounding box (`cx`/`cy` centre, `d` diameter, all 0..1), so the
- * consumer just multiplies by the pixel `size`. Every bubble is guaranteed to
- * sit fully inside the `[0, 1]` box (the packed result is scaled + translated to
- * fit), so the cluster drops in exactly where a single round Avatar would.
+ * consumer just multiplies by the pixel `size`. The relaxed blob is recentred on
+ * its own centre and scaled so the outermost bubble edge lands on the box edge,
+ * so it fills the round box densely with minimal empty margin while every bubble
+ * is guaranteed to sit fully inside the `[0, 1]` box — the cluster drops in
+ * exactly where a single round Avatar would.
  */
 
 /** A single packed bubble, expressed as fractions of the bounding box (0..1). */
@@ -45,17 +49,20 @@ const CENTERING = 0.05;
 // the pinned primary and many passes this stays stable and converges.
 const SEPARATION_STRENGTH = 1;
 // Uniform gap kept between every touching pair, in primary-radius units
-// (primary radius = 1). Reads as consistent spacing everywhere in the cluster.
-const LAYOUT_GAP = 0.16;
+// (primary radius = 1). Small, so near-equal bubbles nestle tightly like
+// magnets rather than floating apart with visible margins.
+const LAYOUT_GAP = 0.12;
 // Initial spiral spacing. Only affects convergence (the result is re-fitted to
 // the box afterwards), not the final scale.
 const SEED_SPACING = 1.7;
-// Relative radii: the primary is the largest; the remaining members taper from
-// SECONDARY_MAX (nearest the primary) down to SECONDARY_MIN (outermost) so size
-// decreases outward and later/overflow members are the smallest.
+// Relative radii: the primary is only MODESTLY the largest; every other member
+// tapers gently from SECONDARY_MAX (nearest the primary) down to SECONDARY_MIN
+// (outermost). The spread is deliberately narrow so the cluster reads as a pack
+// of near-equal magnetic bubbles — a slightly larger primary, not a big primary
+// ringed by tiny dots.
 const PRIMARY_RADIUS = 1;
-const SECONDARY_MAX = 0.72;
-const SECONDARY_MIN = 0.5;
+const SECONDARY_MAX = 0.9;
+const SECONDARY_MIN = 0.8;
 const EPSILON = 1e-6;
 
 /** Relative radius for member `index` of a `count`-member cluster. */
@@ -106,8 +113,8 @@ function separate(xs, ys, radii, count) {
 
 /**
  * Deterministic force-directed pack of `count` circles (primary pinned at the
- * centre), returned as box-fraction bubbles. Used for every cluster with 4+
- * members; 1–3 are handled as explicit arrangements in
+ * centre), returned as box-fraction bubbles. Used for every cluster with 5+
+ * members; 1–4 are handled as explicit arrangements in
  * {@link computeClusterLayout}.
  */
 function packCluster(count) {
@@ -145,20 +152,41 @@ function packCluster(count) {
     ys[0] = 0;
   }
 
-  // Fit to the unit box: the primary is at the origin, so scale so the
-  // outermost circle edge lands on the box radius (0.5) and place the primary at
-  // the box centre.
+  // Fit to the unit box so the pack FILLS the round box edge-to-edge with
+  // minimal empty margin. The primary was pinned at the origin during
+  // relaxation, but the relaxed blob is not centred on it, so we recentre on the
+  // cluster's OWN centre (its bounding-box midpoint) rather than the primary:
+  // enclose every bubble in a circle around that centre, then scale so the
+  // outermost bubble edge lands exactly on the box radius (0.5). Centring the
+  // enclosing circle at the box centre keeps every bubble inside the [0, 1] box
+  // (the enclosing circle is inscribed in the square) while packing the blob
+  // tightly against the edge instead of floating with a gap.
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  for (let i = 0; i < count; i++) {
+    const x = xs[i] ?? 0;
+    const y = ys[i] ?? 0;
+    const r = radii[i] ?? 0;
+    if (x - r < minX) minX = x - r;
+    if (x + r > maxX) maxX = x + r;
+    if (y - r < minY) minY = y - r;
+    if (y + r > maxY) maxY = y + r;
+  }
+  const centerX = (minX + maxX) / 2;
+  const centerY = (minY + maxY) / 2;
   let bound = 0;
   for (let i = 0; i < count; i++) {
-    const reach = Math.hypot(xs[i] ?? 0, ys[i] ?? 0) + (radii[i] ?? 0);
+    const reach = Math.hypot((xs[i] ?? 0) - centerX, (ys[i] ?? 0) - centerY) + (radii[i] ?? 0);
     if (reach > bound) bound = reach;
   }
   const scale = bound > EPSILON ? 0.5 / bound : 0.5;
   const bubbles = new Array(count);
   for (let i = 0; i < count; i++) {
     bubbles[i] = {
-      cx: 0.5 + (xs[i] ?? 0) * scale,
-      cy: 0.5 + (ys[i] ?? 0) * scale,
+      cx: 0.5 + ((xs[i] ?? 0) - centerX) * scale,
+      cy: 0.5 + ((ys[i] ?? 0) - centerY) * scale,
       d: 2 * (radii[i] ?? 0) * scale
     };
   }
@@ -172,12 +200,19 @@ function packCluster(count) {
  *
  * - `<= 0` → empty.
  * - `1` → a single bubble filling the box.
- * - `2` → the iMessage "one in front, one behind" pair: a larger primary set
- *   low-left with a smaller member tucked behind it to the upper-right.
+ * - `2` → the iMessage "one in front, one behind" pair: two EQUAL-diameter
+ *   bubbles offset on a diagonal — the front set low-left, the other tucked
+ *   behind it to the upper-right. Same radius, so neither member reads as
+ *   secondary; the overlap + separator ring alone convey the stacking.
  * - `3` → an iMessage-style triangle: the larger primary along the bottom with
  *   two smaller members above it.
- * - `4+` → the deterministic force-directed pack (primary centred, the rest
- *   packed magnetically around it, denser as the count grows).
+ * - `4` → the iMessage 4-person layout: a 2×2 grid of EQUAL-diameter bubbles,
+ *   centred in the box with a uniform gap, sized so the outermost edges reach the
+ *   box edge like the other counts.
+ * - `5+` → the deterministic force-directed pack of near-equal bubbles, recentred
+ *   and scaled to fill the round box edge-to-edge (a modestly larger primary near
+ *   the centre, the rest packed magnetically around it, denser as the count
+ *   grows).
  */
 function computeClusterLayout(count) {
   if (count <= 0) return [];
@@ -187,14 +222,18 @@ function computeClusterLayout(count) {
     d: 1
   }];
   if (count === 2) {
+    // Two EQUAL-diameter bubbles, offset symmetrically on the diagonal: the
+    // front (index 0, highest zIndex) sits low-left, the other tucks behind it
+    // to the upper-right. They overlap (the intentional "front + behind" pair);
+    // the separator ring — not a size difference — reads the stacking.
     return [{
-      cx: 0.42,
-      cy: 0.56,
-      d: 0.66
+      cx: 0.35,
+      cy: 0.65,
+      d: 0.64
     }, {
-      cx: 0.68,
-      cy: 0.36,
-      d: 0.5
+      cx: 0.65,
+      cy: 0.35,
+      d: 0.64
     }];
   }
   if (count === 3) {
@@ -212,6 +251,39 @@ function computeClusterLayout(count) {
       d: 0.4
     }];
   }
+  if (count === 4) {
+    // The iMessage 4-person layout: a 2×2 grid of EQUAL-diameter bubbles,
+    // centred in the box with the same uniform neighbour gap the rest of the
+    // cluster keeps (LAYOUT_GAP, in circle-radius units), sized so the outermost
+    // bubble edge reaches the box radius (0.5 from the centre) — exactly as the
+    // force-packed counts do — so the four circles fill the round box
+    // edge-to-edge with a clean uniform gap and no overlap.
+    //
+    // With diameter `d` and radius `r = d/2`, the neighbour gap `g = LAYOUT_GAP·r`,
+    // so the centre-to-centre spacing is `s = d + g = d·(1 + LAYOUT_GAP/2)`. Each
+    // centre sits `(s/2, s/2)` from the box centre, so its farthest point lies
+    // `(s/2)·√2 + r` away; setting that to `0.5` and solving for `d`:
+    const spacingFactor = 1 + LAYOUT_GAP / 2;
+    const d = 0.5 / (spacingFactor * Math.SQRT2 / 2 + 0.5);
+    const half = d * spacingFactor / 2;
+    return [{
+      cx: 0.5 - half,
+      cy: 0.5 - half,
+      d
+    }, {
+      cx: 0.5 + half,
+      cy: 0.5 - half,
+      d
+    }, {
+      cx: 0.5 - half,
+      cy: 0.5 + half,
+      d
+    }, {
+      cx: 0.5 + half,
+      cy: 0.5 + half,
+      d
+    }];
+  }
   return packCluster(count);
 }
 //# sourceMappingURL=cluster-layout.js.map

package/lib/commonjs/avatar-group/cluster-layout.js.map

@@ -1 +1 @@
-{"version":3,"names":["GOLDEN_ANGLE","Math","PI","sqrt","ITERATIONS","CLEANUP_ITERATIONS","CENTERING","SEPARATION_STRENGTH","LAYOUT_GAP","SEED_SPACING","PRIMARY_RADIUS","SECONDARY_MAX","SECONDARY_MIN","EPSILON","relativeRadius","index","count","t","separate","xs","ys","radii","i","j","dx","dy","dist","hypot","minDist","a","cos","sin","overlap","nx","ny","packCluster","Array","seedR","angle","iter","bound","reach","scale","bubbles","cx","cy","d","computeClusterLayout"],"sourceRoot":"../../../src","sources":["avatar-group/cluster-layout.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["GOLDEN_ANGLE","Math","PI","sqrt","ITERATIONS","CLEANUP_ITERATIONS","CENTERING","SEPARATION_STRENGTH","LAYOUT_GAP","SEED_SPACING","PRIMARY_RADIUS","SECONDARY_MAX","SECONDARY_MIN","EPSILON","relativeRadius","index","count","t","separate","xs","ys","radii","i","j","dx","dy","dist","hypot","minDist","a","cos","sin","overlap","nx","ny","packCluster","Array","seedR","angle","iter","minX","Infinity","maxX","minY","maxY","x","y","r","centerX","centerY","bound","reach","scale","bubbles","cx","cy","d","computeClusterLayout","spacingFactor","SQRT2","half"],"sourceRoot":"../../../src","sources":["avatar-group/cluster-layout.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/avatar-group/cluster-layout.js

@@ -3,8 +3,9 @@
 /**
  * Deterministic organic circle-packing for the {@link AvatarGroup} `cluster`
  * layout — the iMessage-style "magnetic bubble cluster" where several avatars of
- * varying sizes nestle together inside a round bounding box (a large primary in
- * the middle/front, smaller members packed around it with a uniform gap).
+ * NEAR-EQUAL size nestle tightly together and fill a round bounding box (a
+ * modestly larger primary with the rest only slightly smaller, packed against
+ * each other with a small uniform gap — not a big primary ringed by tiny dots).
  *
  * For 4+ members the layout is produced by a small, FULLY DETERMINISTIC
  * force-directed relaxation (no `Math.random`): the primary is pinned at the
@@ -13,15 +14,18 @@
  * centre and (b) push any two circles apart until they clear a uniform gap. A
  * fixed iteration count + deterministic seed means the same `count` always
  * yields byte-identical positions, so native and web render the cluster
- * identically with no `onLayout`/DOM measurement. The very small counts (1, 2,
- * 3) — where a relaxation degenerates into a line or a lone pair — use explicit
- * iMessage-style arrangements instead.
+ * identically with no `onLayout`/DOM measurement. The small counts (1, 2, 3, 4)
+ * use explicit iMessage-style arrangements instead — 1–3 because a relaxation
+ * there degenerates into a line or a lone pair, and 4 because the iconic
+ * 4-person layout is a clean 2×2 grid of equal circles rather than a pack.
  *
  * Output is resolution-independent: each bubble is expressed as a fraction of
  * the group's bounding box (`cx`/`cy` centre, `d` diameter, all 0..1), so the
- * consumer just multiplies by the pixel `size`. Every bubble is guaranteed to
- * sit fully inside the `[0, 1]` box (the packed result is scaled + translated to
- * fit), so the cluster drops in exactly where a single round Avatar would.
+ * consumer just multiplies by the pixel `size`. The relaxed blob is recentred on
+ * its own centre and scaled so the outermost bubble edge lands on the box edge,
+ * so it fills the round box densely with minimal empty margin while every bubble
+ * is guaranteed to sit fully inside the `[0, 1]` box — the cluster drops in
+ * exactly where a single round Avatar would.
  */
 
 /** A single packed bubble, expressed as fractions of the bounding box (0..1). */
@@ -41,17 +45,20 @@ const CENTERING = 0.05;
 // the pinned primary and many passes this stays stable and converges.
 const SEPARATION_STRENGTH = 1;
 // Uniform gap kept between every touching pair, in primary-radius units
-// (primary radius = 1). Reads as consistent spacing everywhere in the cluster.
-const LAYOUT_GAP = 0.16;
+// (primary radius = 1). Small, so near-equal bubbles nestle tightly like
+// magnets rather than floating apart with visible margins.
+const LAYOUT_GAP = 0.12;
 // Initial spiral spacing. Only affects convergence (the result is re-fitted to
 // the box afterwards), not the final scale.
 const SEED_SPACING = 1.7;
-// Relative radii: the primary is the largest; the remaining members taper from
-// SECONDARY_MAX (nearest the primary) down to SECONDARY_MIN (outermost) so size
-// decreases outward and later/overflow members are the smallest.
+// Relative radii: the primary is only MODESTLY the largest; every other member
+// tapers gently from SECONDARY_MAX (nearest the primary) down to SECONDARY_MIN
+// (outermost). The spread is deliberately narrow so the cluster reads as a pack
+// of near-equal magnetic bubbles — a slightly larger primary, not a big primary
+// ringed by tiny dots.
 const PRIMARY_RADIUS = 1;
-const SECONDARY_MAX = 0.72;
-const SECONDARY_MIN = 0.5;
+const SECONDARY_MAX = 0.9;
+const SECONDARY_MIN = 0.8;
 const EPSILON = 1e-6;
 
 /** Relative radius for member `index` of a `count`-member cluster. */
@@ -102,8 +109,8 @@ function separate(xs, ys, radii, count) {
 
 /**
  * Deterministic force-directed pack of `count` circles (primary pinned at the
- * centre), returned as box-fraction bubbles. Used for every cluster with 4+
- * members; 1–3 are handled as explicit arrangements in
+ * centre), returned as box-fraction bubbles. Used for every cluster with 5+
+ * members; 1–4 are handled as explicit arrangements in
  * {@link computeClusterLayout}.
  */
 function packCluster(count) {
@@ -141,20 +148,41 @@ function packCluster(count) {
     ys[0] = 0;
   }
 
-  // Fit to the unit box: the primary is at the origin, so scale so the
-  // outermost circle edge lands on the box radius (0.5) and place the primary at
-  // the box centre.
+  // Fit to the unit box so the pack FILLS the round box edge-to-edge with
+  // minimal empty margin. The primary was pinned at the origin during
+  // relaxation, but the relaxed blob is not centred on it, so we recentre on the
+  // cluster's OWN centre (its bounding-box midpoint) rather than the primary:
+  // enclose every bubble in a circle around that centre, then scale so the
+  // outermost bubble edge lands exactly on the box radius (0.5). Centring the
+  // enclosing circle at the box centre keeps every bubble inside the [0, 1] box
+  // (the enclosing circle is inscribed in the square) while packing the blob
+  // tightly against the edge instead of floating with a gap.
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  for (let i = 0; i < count; i++) {
+    const x = xs[i] ?? 0;
+    const y = ys[i] ?? 0;
+    const r = radii[i] ?? 0;
+    if (x - r < minX) minX = x - r;
+    if (x + r > maxX) maxX = x + r;
+    if (y - r < minY) minY = y - r;
+    if (y + r > maxY) maxY = y + r;
+  }
+  const centerX = (minX + maxX) / 2;
+  const centerY = (minY + maxY) / 2;
   let bound = 0;
   for (let i = 0; i < count; i++) {
-    const reach = Math.hypot(xs[i] ?? 0, ys[i] ?? 0) + (radii[i] ?? 0);
+    const reach = Math.hypot((xs[i] ?? 0) - centerX, (ys[i] ?? 0) - centerY) + (radii[i] ?? 0);
     if (reach > bound) bound = reach;
   }
   const scale = bound > EPSILON ? 0.5 / bound : 0.5;
   const bubbles = new Array(count);
   for (let i = 0; i < count; i++) {
     bubbles[i] = {
-      cx: 0.5 + (xs[i] ?? 0) * scale,
-      cy: 0.5 + (ys[i] ?? 0) * scale,
+      cx: 0.5 + ((xs[i] ?? 0) - centerX) * scale,
+      cy: 0.5 + ((ys[i] ?? 0) - centerY) * scale,
       d: 2 * (radii[i] ?? 0) * scale
     };
   }
@@ -168,12 +196,19 @@ function packCluster(count) {
  *
  * - `<= 0` → empty.
  * - `1` → a single bubble filling the box.
- * - `2` → the iMessage "one in front, one behind" pair: a larger primary set
- *   low-left with a smaller member tucked behind it to the upper-right.
+ * - `2` → the iMessage "one in front, one behind" pair: two EQUAL-diameter
+ *   bubbles offset on a diagonal — the front set low-left, the other tucked
+ *   behind it to the upper-right. Same radius, so neither member reads as
+ *   secondary; the overlap + separator ring alone convey the stacking.
  * - `3` → an iMessage-style triangle: the larger primary along the bottom with
  *   two smaller members above it.
- * - `4+` → the deterministic force-directed pack (primary centred, the rest
- *   packed magnetically around it, denser as the count grows).
+ * - `4` → the iMessage 4-person layout: a 2×2 grid of EQUAL-diameter bubbles,
+ *   centred in the box with a uniform gap, sized so the outermost edges reach the
+ *   box edge like the other counts.
+ * - `5+` → the deterministic force-directed pack of near-equal bubbles, recentred
+ *   and scaled to fill the round box edge-to-edge (a modestly larger primary near
+ *   the centre, the rest packed magnetically around it, denser as the count
+ *   grows).
  */
 export function computeClusterLayout(count) {
   if (count <= 0) return [];
@@ -183,14 +218,18 @@ export function computeClusterLayout(count) {
     d: 1
   }];
   if (count === 2) {
+    // Two EQUAL-diameter bubbles, offset symmetrically on the diagonal: the
+    // front (index 0, highest zIndex) sits low-left, the other tucks behind it
+    // to the upper-right. They overlap (the intentional "front + behind" pair);
+    // the separator ring — not a size difference — reads the stacking.
     return [{
-      cx: 0.42,
-      cy: 0.56,
-      d: 0.66
+      cx: 0.35,
+      cy: 0.65,
+      d: 0.64
     }, {
-      cx: 0.68,
-      cy: 0.36,
-      d: 0.5
+      cx: 0.65,
+      cy: 0.35,
+      d: 0.64
     }];
   }
   if (count === 3) {
@@ -208,6 +247,39 @@ export function computeClusterLayout(count) {
       d: 0.4
     }];
   }
+  if (count === 4) {
+    // The iMessage 4-person layout: a 2×2 grid of EQUAL-diameter bubbles,
+    // centred in the box with the same uniform neighbour gap the rest of the
+    // cluster keeps (LAYOUT_GAP, in circle-radius units), sized so the outermost
+    // bubble edge reaches the box radius (0.5 from the centre) — exactly as the
+    // force-packed counts do — so the four circles fill the round box
+    // edge-to-edge with a clean uniform gap and no overlap.
+    //
+    // With diameter `d` and radius `r = d/2`, the neighbour gap `g = LAYOUT_GAP·r`,
+    // so the centre-to-centre spacing is `s = d + g = d·(1 + LAYOUT_GAP/2)`. Each
+    // centre sits `(s/2, s/2)` from the box centre, so its farthest point lies
+    // `(s/2)·√2 + r` away; setting that to `0.5` and solving for `d`:
+    const spacingFactor = 1 + LAYOUT_GAP / 2;
+    const d = 0.5 / (spacingFactor * Math.SQRT2 / 2 + 0.5);
+    const half = d * spacingFactor / 2;
+    return [{
+      cx: 0.5 - half,
+      cy: 0.5 - half,
+      d
+    }, {
+      cx: 0.5 + half,
+      cy: 0.5 - half,
+      d
+    }, {
+      cx: 0.5 - half,
+      cy: 0.5 + half,
+      d
+    }, {
+      cx: 0.5 + half,
+      cy: 0.5 + half,
+      d
+    }];
+  }
   return packCluster(count);
 }
 //# sourceMappingURL=cluster-layout.js.map

package/lib/module/avatar-group/cluster-layout.js.map

@@ -1 +1 @@
-{"version":3,"names":["GOLDEN_ANGLE","Math","PI","sqrt","ITERATIONS","CLEANUP_ITERATIONS","CENTERING","SEPARATION_STRENGTH","LAYOUT_GAP","SEED_SPACING","PRIMARY_RADIUS","SECONDARY_MAX","SECONDARY_MIN","EPSILON","relativeRadius","index","count","t","separate","xs","ys","radii","i","j","dx","dy","dist","hypot","minDist","a","cos","sin","overlap","nx","ny","packCluster","Array","seedR","angle","iter","bound","reach","scale","bubbles","cx","cy","d","computeClusterLayout"],"sourceRoot":"../../../src","sources":["avatar-group/cluster-layout.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["GOLDEN_ANGLE","Math","PI","sqrt","ITERATIONS","CLEANUP_ITERATIONS","CENTERING","SEPARATION_STRENGTH","LAYOUT_GAP","SEED_SPACING","PRIMARY_RADIUS","SECONDARY_MAX","SECONDARY_MIN","EPSILON","relativeRadius","index","count","t","separate","xs","ys","radii","i","j","dx","dy","dist","hypot","minDist","a","cos","sin","overlap","nx","ny","packCluster","Array","seedR","angle","iter","minX","Infinity","maxX","minY","maxY","x","y","r","centerX","centerY","bound","reach","scale","bubbles","cx","cy","d","computeClusterLayout","spacingFactor","SQRT2","half"],"sourceRoot":"../../../src","sources":["avatar-group/cluster-layout.ts"],"mappings":"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","ignoreList":[]}

package/lib/typescript/commonjs/avatar-group/cluster-layout.d.ts

@@ -1,8 +1,9 @@
 /**
  * Deterministic organic circle-packing for the {@link AvatarGroup} `cluster`
  * layout — the iMessage-style "magnetic bubble cluster" where several avatars of
- * varying sizes nestle together inside a round bounding box (a large primary in
- * the middle/front, smaller members packed around it with a uniform gap).
+ * NEAR-EQUAL size nestle tightly together and fill a round bounding box (a
+ * modestly larger primary with the rest only slightly smaller, packed against
+ * each other with a small uniform gap — not a big primary ringed by tiny dots).
  *
  * For 4+ members the layout is produced by a small, FULLY DETERMINISTIC
  * force-directed relaxation (no `Math.random`): the primary is pinned at the
@@ -11,15 +12,18 @@
  * centre and (b) push any two circles apart until they clear a uniform gap. A
  * fixed iteration count + deterministic seed means the same `count` always
  * yields byte-identical positions, so native and web render the cluster
- * identically with no `onLayout`/DOM measurement. The very small counts (1, 2,
- * 3) — where a relaxation degenerates into a line or a lone pair — use explicit
- * iMessage-style arrangements instead.
+ * identically with no `onLayout`/DOM measurement. The small counts (1, 2, 3, 4)
+ * use explicit iMessage-style arrangements instead — 1–3 because a relaxation
+ * there degenerates into a line or a lone pair, and 4 because the iconic
+ * 4-person layout is a clean 2×2 grid of equal circles rather than a pack.
  *
  * Output is resolution-independent: each bubble is expressed as a fraction of
  * the group's bounding box (`cx`/`cy` centre, `d` diameter, all 0..1), so the
- * consumer just multiplies by the pixel `size`. Every bubble is guaranteed to
- * sit fully inside the `[0, 1]` box (the packed result is scaled + translated to
- * fit), so the cluster drops in exactly where a single round Avatar would.
+ * consumer just multiplies by the pixel `size`. The relaxed blob is recentred on
+ * its own centre and scaled so the outermost bubble edge lands on the box edge,
+ * so it fills the round box densely with minimal empty margin while every bubble
+ * is guaranteed to sit fully inside the `[0, 1]` box — the cluster drops in
+ * exactly where a single round Avatar would.
  */
 /** A single packed bubble, expressed as fractions of the bounding box (0..1). */
 export interface ClusterBubble {
@@ -37,12 +41,19 @@ export interface ClusterBubble {
  *
  * - `<= 0` → empty.
  * - `1` → a single bubble filling the box.
- * - `2` → the iMessage "one in front, one behind" pair: a larger primary set
- *   low-left with a smaller member tucked behind it to the upper-right.
+ * - `2` → the iMessage "one in front, one behind" pair: two EQUAL-diameter
+ *   bubbles offset on a diagonal — the front set low-left, the other tucked
+ *   behind it to the upper-right. Same radius, so neither member reads as
+ *   secondary; the overlap + separator ring alone convey the stacking.
  * - `3` → an iMessage-style triangle: the larger primary along the bottom with
  *   two smaller members above it.
- * - `4+` → the deterministic force-directed pack (primary centred, the rest
- *   packed magnetically around it, denser as the count grows).
+ * - `4` → the iMessage 4-person layout: a 2×2 grid of EQUAL-diameter bubbles,
+ *   centred in the box with a uniform gap, sized so the outermost edges reach the
+ *   box edge like the other counts.
+ * - `5+` → the deterministic force-directed pack of near-equal bubbles, recentred
+ *   and scaled to fill the round box edge-to-edge (a modestly larger primary near
+ *   the centre, the rest packed magnetically around it, denser as the count
+ *   grows).
  */
 export declare function computeClusterLayout(count: number): ClusterBubble[];
 //# sourceMappingURL=cluster-layout.d.ts.map

package/lib/typescript/commonjs/avatar-group/cluster-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cluster-layout.d.ts","sourceRoot":"","sources":["../../../../src/avatar-group/cluster-layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,iFAAiF;AACjF,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,gDAAgD;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,CAAC,EAAE,MAAM,CAAC;CACX;AA4ID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,EAAE,CAiBnE"}
+{"version":3,"file":"cluster-layout.d.ts","sourceRoot":"","sources":["../../../../src/avatar-group/cluster-layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,iFAAiF;AACjF,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,gDAAgD;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,CAAC,EAAE,MAAM,CAAC;CACX;AAqKD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,EAAE,CA2CnE"}

package/lib/typescript/module/avatar-group/cluster-layout.d.ts

@@ -1,8 +1,9 @@
 /**
  * Deterministic organic circle-packing for the {@link AvatarGroup} `cluster`
  * layout — the iMessage-style "magnetic bubble cluster" where several avatars of
- * varying sizes nestle together inside a round bounding box (a large primary in
- * the middle/front, smaller members packed around it with a uniform gap).
+ * NEAR-EQUAL size nestle tightly together and fill a round bounding box (a
+ * modestly larger primary with the rest only slightly smaller, packed against
+ * each other with a small uniform gap — not a big primary ringed by tiny dots).
  *
  * For 4+ members the layout is produced by a small, FULLY DETERMINISTIC
  * force-directed relaxation (no `Math.random`): the primary is pinned at the
@@ -11,15 +12,18 @@
  * centre and (b) push any two circles apart until they clear a uniform gap. A
  * fixed iteration count + deterministic seed means the same `count` always
  * yields byte-identical positions, so native and web render the cluster
- * identically with no `onLayout`/DOM measurement. The very small counts (1, 2,
- * 3) — where a relaxation degenerates into a line or a lone pair — use explicit
- * iMessage-style arrangements instead.
+ * identically with no `onLayout`/DOM measurement. The small counts (1, 2, 3, 4)
+ * use explicit iMessage-style arrangements instead — 1–3 because a relaxation
+ * there degenerates into a line or a lone pair, and 4 because the iconic
+ * 4-person layout is a clean 2×2 grid of equal circles rather than a pack.
  *
  * Output is resolution-independent: each bubble is expressed as a fraction of
  * the group's bounding box (`cx`/`cy` centre, `d` diameter, all 0..1), so the
- * consumer just multiplies by the pixel `size`. Every bubble is guaranteed to
- * sit fully inside the `[0, 1]` box (the packed result is scaled + translated to
- * fit), so the cluster drops in exactly where a single round Avatar would.
+ * consumer just multiplies by the pixel `size`. The relaxed blob is recentred on
+ * its own centre and scaled so the outermost bubble edge lands on the box edge,
+ * so it fills the round box densely with minimal empty margin while every bubble
+ * is guaranteed to sit fully inside the `[0, 1]` box — the cluster drops in
+ * exactly where a single round Avatar would.
  */
 /** A single packed bubble, expressed as fractions of the bounding box (0..1). */
 export interface ClusterBubble {
@@ -37,12 +41,19 @@ export interface ClusterBubble {
  *
  * - `<= 0` → empty.
  * - `1` → a single bubble filling the box.
- * - `2` → the iMessage "one in front, one behind" pair: a larger primary set
- *   low-left with a smaller member tucked behind it to the upper-right.
+ * - `2` → the iMessage "one in front, one behind" pair: two EQUAL-diameter
+ *   bubbles offset on a diagonal — the front set low-left, the other tucked
+ *   behind it to the upper-right. Same radius, so neither member reads as
+ *   secondary; the overlap + separator ring alone convey the stacking.
  * - `3` → an iMessage-style triangle: the larger primary along the bottom with
  *   two smaller members above it.
- * - `4+` → the deterministic force-directed pack (primary centred, the rest
- *   packed magnetically around it, denser as the count grows).
+ * - `4` → the iMessage 4-person layout: a 2×2 grid of EQUAL-diameter bubbles,
+ *   centred in the box with a uniform gap, sized so the outermost edges reach the
+ *   box edge like the other counts.
+ * - `5+` → the deterministic force-directed pack of near-equal bubbles, recentred
+ *   and scaled to fill the round box edge-to-edge (a modestly larger primary near
+ *   the centre, the rest packed magnetically around it, denser as the count
+ *   grows).
  */
 export declare function computeClusterLayout(count: number): ClusterBubble[];
 //# sourceMappingURL=cluster-layout.d.ts.map

package/lib/typescript/module/avatar-group/cluster-layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cluster-layout.d.ts","sourceRoot":"","sources":["../../../../src/avatar-group/cluster-layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,iFAAiF;AACjF,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,gDAAgD;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,CAAC,EAAE,MAAM,CAAC;CACX;AA4ID;;;;;;;;;;;;;GAaG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,EAAE,CAiBnE"}
+{"version":3,"file":"cluster-layout.d.ts","sourceRoot":"","sources":["../../../../src/avatar-group/cluster-layout.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,iFAAiF;AACjF,MAAM,WAAW,aAAa;IAC5B,+CAA+C;IAC/C,EAAE,EAAE,MAAM,CAAC;IACX,gDAAgD;IAChD,EAAE,EAAE,MAAM,CAAC;IACX,8CAA8C;IAC9C,CAAC,EAAE,MAAM,CAAC;CACX;AAqKD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,EAAE,CA2CnE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxyhq/bloom",
-  "version": "0.35.0",
+  "version": "0.35.2",
   "description": "Bloom UI — Oxy ecosystem component library for React Native + Expo + Web",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",

package/src/__tests__/AvatarGroupCluster.test.tsx

@@ -74,11 +74,37 @@ describe('computeClusterLayout', () => {
     }
   });
 
-  it('centres the primary for the force-packed counts (4+)', () => {
-    for (const count of [4, 5, 8, 12, 20]) {
-      const primary = bubbleAt(computeClusterLayout(count), 0);
-      expect(primary.cx).toBeCloseTo(0.5, 5);
-      expect(primary.cy).toBeCloseTo(0.5, 5);
+  it('fills the round box edge-to-edge for the force-packed counts (5+)', () => {
+    // After the recentre + scale, the outermost bubble edge lands on the box
+    // radius (0.5 from the box centre) — the blob fills the round box densely
+    // with no big empty margin — and the whole cluster stays roughly centred.
+    // (count=4 is the explicit 2×2 grid, covered separately below.)
+    for (const count of [5, 8, 12, 20]) {
+      const bubbles = computeClusterLayout(count);
+      let reach = 0;
+      for (const bubble of bubbles) {
+        const r = Math.hypot(bubble.cx - 0.5, bubble.cy - 0.5) + bubble.d / 2;
+        if (r > reach) reach = r;
+      }
+      expect(reach).toBeCloseTo(0.5, 6);
+      const primary = bubbleAt(bubbles, 0);
+      expect(primary.cx).toBeGreaterThan(0.4);
+      expect(primary.cx).toBeLessThan(0.6);
+      expect(primary.cy).toBeGreaterThan(0.4);
+      expect(primary.cy).toBeLessThan(0.6);
+    }
+  });
+
+  it('keeps the force-packed bubbles near-equal in size (mild taper)', () => {
+    // The pack should read as near-equal magnetic bubbles: a modestly larger
+    // primary, everyone else only slightly smaller — not a big primary ringed by
+    // tiny dots. The smallest bubble stays at least ~75% of the largest.
+    // (count=4 is the explicit 2×2 grid, covered separately below.)
+    for (const count of [5, 6, 8, 12, 20]) {
+      const diameters = computeClusterLayout(count).map((bubble) => bubble.d);
+      const maxD = Math.max(...diameters);
+      const minD = Math.min(...diameters);
+      expect(minD / maxD).toBeGreaterThan(0.75);
     }
   });
 
@@ -88,6 +114,81 @@ describe('computeClusterLayout', () => {
       expect(minEdgeGap(computeClusterLayout(count))).toBeGreaterThan(-1e-3);
     }
   });
+
+  it('arranges the four-member cluster as an equal-size 2×2 grid', () => {
+    // The iMessage 4-person layout: four EQUAL-diameter bubbles at the corners of
+    // a 2×2 grid centred in the box, with a clean uniform gap (no overlap), sized
+    // so the outermost edges reach the box edge like the other counts.
+    const bubbles = computeClusterLayout(4);
+    expect(bubbles).toHaveLength(4);
+
+    // All four share one diameter.
+    const d = bubbleAt(bubbles, 0).d;
+    for (const bubble of bubbles) {
+      expect(bubble.d).toBeCloseTo(d, 10);
+    }
+
+    // Exactly two distinct rows (cy) and two distinct columns (cx), each shared by
+    // two bubbles — a true 2×2 grid, centred on the box (rows/cols symmetric
+    // about 0.5).
+    const round = (v: number) => Math.round(v * 1e6) / 1e6;
+    const cols = [...new Set(bubbles.map((b) => round(b.cx)))].sort((a, b) => a - b);
+    const rows = [...new Set(bubbles.map((b) => round(b.cy)))].sort((a, b) => a - b);
+    expect(cols).toHaveLength(2);
+    expect(rows).toHaveLength(2);
+    const col0 = cols[0];
+    const col1 = cols[1];
+    const row0 = rows[0];
+    const row1 = rows[1];
+    if (col0 === undefined || col1 === undefined || row0 === undefined || row1 === undefined) {
+      throw new Error('expected two distinct rows and columns');
+    }
+    expect((col0 + col1) / 2).toBeCloseTo(0.5, 9);
+    expect((row0 + row1) / 2).toBeCloseTo(0.5, 9);
+    // Square grid: the row and column spacings match.
+    expect(col1 - col0).toBeCloseTo(row1 - row0, 9);
+
+    // Clean uniform gap between neighbours — no overlap.
+    expect(minEdgeGap(bubbles)).toBeGreaterThan(0);
+
+    // Outermost edge reaches the box radius (fills the round box like the others).
+    let reach = 0;
+    for (const bubble of bubbles) {
+      const r = Math.hypot(bubble.cx - 0.5, bubble.cy - 0.5) + bubble.d / 2;
+      if (r > reach) reach = r;
+    }
+    expect(reach).toBeCloseTo(0.5, 6);
+
+    // Fully inside the unit box, and deterministic.
+    for (const bubble of bubbles) {
+      expect(bubble.cx - bubble.d / 2).toBeGreaterThanOrEqual(-1e-6);
+      expect(bubble.cx + bubble.d / 2).toBeLessThanOrEqual(1 + 1e-6);
+      expect(bubble.cy - bubble.d / 2).toBeGreaterThanOrEqual(-1e-6);
+      expect(bubble.cy + bubble.d / 2).toBeLessThanOrEqual(1 + 1e-6);
+    }
+    expect(computeClusterLayout(4)).toEqual(bubbles);
+  });
+
+  it('gives the two-member cluster equal-diameter, overlapping bubbles', () => {
+    const bubbles = computeClusterLayout(2);
+    expect(bubbles).toHaveLength(2);
+    const front = bubbleAt(bubbles, 0);
+    const behind = bubbleAt(bubbles, 1);
+    // The fix: both bubbles share the SAME diameter — the one drawn behind is no
+    // longer rendered too small.
+    expect(front.d).toBeCloseTo(behind.d, 10);
+    // Still the intentional iMessage "front + behind" overlap (negative gap).
+    expect(minEdgeGap(bubbles)).toBeLessThan(0);
+    // Deterministic (no Math.random).
+    expect(computeClusterLayout(2)).toEqual(bubbles);
+    // Both bubbles sit fully inside the unit box.
+    for (const bubble of bubbles) {
+      expect(bubble.cx - bubble.d / 2).toBeGreaterThanOrEqual(-1e-6);
+      expect(bubble.cx + bubble.d / 2).toBeLessThanOrEqual(1 + 1e-6);
+      expect(bubble.cy - bubble.d / 2).toBeGreaterThanOrEqual(-1e-6);
+      expect(bubble.cy + bubble.d / 2).toBeLessThanOrEqual(1 + 1e-6);
+    }
+  });
 });
 
 const CLUSTER_ITEMS: AvatarGroupItem[] = Array.from({ length: 25 }, (_, i) => ({

package/src/avatar-group/AvatarGroup.stories.tsx

@@ -157,15 +157,16 @@ const MANY: AvatarGroupItem[] = Array.from({ length: 25 }, (_, i) => ({
 
 /**
  * Cluster layout: a compact iMessage-style "magnetic bubble cluster" of
- * varying-size avatars packed into a round box (`size` = box diameter). The
- * primary is largest and centred/in front; the rest nestle around it with a
- * uniform gap. `showInitials` renders a colored letter for avatar-less members
- * so the packing reads clearly. Shown at counts 3, 5, 8, 12, and 20.
+ * NEAR-EQUAL-size avatars packed densely into a round box (`size` = box
+ * diameter). A modestly larger primary sits in front; the rest are only slightly
+ * smaller and nestle against it with a small uniform gap, filling the round box
+ * edge-to-edge. `showInitials` renders a colored letter for avatar-less members
+ * so the packing reads clearly. Shown at counts 3, 4, 5, 6, 8, 12, and 20.
  */
 export const ClusterLayout: Story = {
   render: () => (
     <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 24, alignItems: 'center' }}>
-      {[3, 5, 8, 12, 20].map((count) => (
+      {[3, 4, 5, 6, 8, 12, 20].map((count) => (
         <View key={count} style={{ alignItems: 'center', gap: 8 }}>
           <AvatarGroup
             layout="cluster"

package/src/avatar-group/cluster-layout.ts

@@ -1,8 +1,9 @@
 /**
  * Deterministic organic circle-packing for the {@link AvatarGroup} `cluster`
  * layout — the iMessage-style "magnetic bubble cluster" where several avatars of
- * varying sizes nestle together inside a round bounding box (a large primary in
- * the middle/front, smaller members packed around it with a uniform gap).
+ * NEAR-EQUAL size nestle tightly together and fill a round bounding box (a
+ * modestly larger primary with the rest only slightly smaller, packed against
+ * each other with a small uniform gap — not a big primary ringed by tiny dots).
  *
  * For 4+ members the layout is produced by a small, FULLY DETERMINISTIC
  * force-directed relaxation (no `Math.random`): the primary is pinned at the
@@ -11,15 +12,18 @@
  * centre and (b) push any two circles apart until they clear a uniform gap. A
  * fixed iteration count + deterministic seed means the same `count` always
  * yields byte-identical positions, so native and web render the cluster
- * identically with no `onLayout`/DOM measurement. The very small counts (1, 2,
- * 3) — where a relaxation degenerates into a line or a lone pair — use explicit
- * iMessage-style arrangements instead.
+ * identically with no `onLayout`/DOM measurement. The small counts (1, 2, 3, 4)
+ * use explicit iMessage-style arrangements instead — 1–3 because a relaxation
+ * there degenerates into a line or a lone pair, and 4 because the iconic
+ * 4-person layout is a clean 2×2 grid of equal circles rather than a pack.
  *
  * Output is resolution-independent: each bubble is expressed as a fraction of
  * the group's bounding box (`cx`/`cy` centre, `d` diameter, all 0..1), so the
- * consumer just multiplies by the pixel `size`. Every bubble is guaranteed to
- * sit fully inside the `[0, 1]` box (the packed result is scaled + translated to
- * fit), so the cluster drops in exactly where a single round Avatar would.
+ * consumer just multiplies by the pixel `size`. The relaxed blob is recentred on
+ * its own centre and scaled so the outermost bubble edge lands on the box edge,
+ * so it fills the round box densely with minimal empty margin while every bubble
+ * is guaranteed to sit fully inside the `[0, 1]` box — the cluster drops in
+ * exactly where a single round Avatar would.
  */
 
 /** A single packed bubble, expressed as fractions of the bounding box (0..1). */
@@ -47,17 +51,20 @@ const CENTERING = 0.05;
 // the pinned primary and many passes this stays stable and converges.
 const SEPARATION_STRENGTH = 1;
 // Uniform gap kept between every touching pair, in primary-radius units
-// (primary radius = 1). Reads as consistent spacing everywhere in the cluster.
-const LAYOUT_GAP = 0.16;
+// (primary radius = 1). Small, so near-equal bubbles nestle tightly like
+// magnets rather than floating apart with visible margins.
+const LAYOUT_GAP = 0.12;
 // Initial spiral spacing. Only affects convergence (the result is re-fitted to
 // the box afterwards), not the final scale.
 const SEED_SPACING = 1.7;
-// Relative radii: the primary is the largest; the remaining members taper from
-// SECONDARY_MAX (nearest the primary) down to SECONDARY_MIN (outermost) so size
-// decreases outward and later/overflow members are the smallest.
+// Relative radii: the primary is only MODESTLY the largest; every other member
+// tapers gently from SECONDARY_MAX (nearest the primary) down to SECONDARY_MIN
+// (outermost). The spread is deliberately narrow so the cluster reads as a pack
+// of near-equal magnetic bubbles — a slightly larger primary, not a big primary
+// ringed by tiny dots.
 const PRIMARY_RADIUS = 1;
-const SECONDARY_MAX = 0.72;
-const SECONDARY_MIN = 0.5;
+const SECONDARY_MAX = 0.9;
+const SECONDARY_MIN = 0.8;
 const EPSILON = 1e-6;
 
 /** Relative radius for member `index` of a `count`-member cluster. */
@@ -108,8 +115,8 @@ function separate(xs: number[], ys: number[], radii: number[], count: number): v
 
 /**
  * Deterministic force-directed pack of `count` circles (primary pinned at the
- * centre), returned as box-fraction bubbles. Used for every cluster with 4+
- * members; 1–3 are handled as explicit arrangements in
+ * centre), returned as box-fraction bubbles. Used for every cluster with 5+
+ * members; 1–4 are handled as explicit arrangements in
  * {@link computeClusterLayout}.
  */
 function packCluster(count: number): ClusterBubble[] {
@@ -149,12 +156,34 @@ function packCluster(count: number): ClusterBubble[] {
     ys[0] = 0;
   }
 
-  // Fit to the unit box: the primary is at the origin, so scale so the
-  // outermost circle edge lands on the box radius (0.5) and place the primary at
-  // the box centre.
+  // Fit to the unit box so the pack FILLS the round box edge-to-edge with
+  // minimal empty margin. The primary was pinned at the origin during
+  // relaxation, but the relaxed blob is not centred on it, so we recentre on the
+  // cluster's OWN centre (its bounding-box midpoint) rather than the primary:
+  // enclose every bubble in a circle around that centre, then scale so the
+  // outermost bubble edge lands exactly on the box radius (0.5). Centring the
+  // enclosing circle at the box centre keeps every bubble inside the [0, 1] box
+  // (the enclosing circle is inscribed in the square) while packing the blob
+  // tightly against the edge instead of floating with a gap.
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+  for (let i = 0; i < count; i++) {
+    const x = xs[i] ?? 0;
+    const y = ys[i] ?? 0;
+    const r = radii[i] ?? 0;
+    if (x - r < minX) minX = x - r;
+    if (x + r > maxX) maxX = x + r;
+    if (y - r < minY) minY = y - r;
+    if (y + r > maxY) maxY = y + r;
+  }
+  const centerX = (minX + maxX) / 2;
+  const centerY = (minY + maxY) / 2;
   let bound = 0;
   for (let i = 0; i < count; i++) {
-    const reach = Math.hypot(xs[i] ?? 0, ys[i] ?? 0) + (radii[i] ?? 0);
+    const reach =
+      Math.hypot((xs[i] ?? 0) - centerX, (ys[i] ?? 0) - centerY) + (radii[i] ?? 0);
     if (reach > bound) bound = reach;
   }
   const scale = bound > EPSILON ? 0.5 / bound : 0.5;
@@ -162,8 +191,8 @@ function packCluster(count: number): ClusterBubble[] {
   const bubbles = new Array<ClusterBubble>(count);
   for (let i = 0; i < count; i++) {
     bubbles[i] = {
-      cx: 0.5 + (xs[i] ?? 0) * scale,
-      cy: 0.5 + (ys[i] ?? 0) * scale,
+      cx: 0.5 + ((xs[i] ?? 0) - centerX) * scale,
+      cy: 0.5 + ((ys[i] ?? 0) - centerY) * scale,
       d: 2 * (radii[i] ?? 0) * scale,
     };
   }
@@ -177,20 +206,31 @@ function packCluster(count: number): ClusterBubble[] {
  *
  * - `<= 0` → empty.
  * - `1` → a single bubble filling the box.
- * - `2` → the iMessage "one in front, one behind" pair: a larger primary set
- *   low-left with a smaller member tucked behind it to the upper-right.
+ * - `2` → the iMessage "one in front, one behind" pair: two EQUAL-diameter
+ *   bubbles offset on a diagonal — the front set low-left, the other tucked
+ *   behind it to the upper-right. Same radius, so neither member reads as
+ *   secondary; the overlap + separator ring alone convey the stacking.
  * - `3` → an iMessage-style triangle: the larger primary along the bottom with
  *   two smaller members above it.
- * - `4+` → the deterministic force-directed pack (primary centred, the rest
- *   packed magnetically around it, denser as the count grows).
+ * - `4` → the iMessage 4-person layout: a 2×2 grid of EQUAL-diameter bubbles,
+ *   centred in the box with a uniform gap, sized so the outermost edges reach the
+ *   box edge like the other counts.
+ * - `5+` → the deterministic force-directed pack of near-equal bubbles, recentred
+ *   and scaled to fill the round box edge-to-edge (a modestly larger primary near
+ *   the centre, the rest packed magnetically around it, denser as the count
+ *   grows).
  */
 export function computeClusterLayout(count: number): ClusterBubble[] {
   if (count <= 0) return [];
   if (count === 1) return [{ cx: 0.5, cy: 0.5, d: 1 }];
   if (count === 2) {
+    // Two EQUAL-diameter bubbles, offset symmetrically on the diagonal: the
+    // front (index 0, highest zIndex) sits low-left, the other tucks behind it
+    // to the upper-right. They overlap (the intentional "front + behind" pair);
+    // the separator ring — not a size difference — reads the stacking.
     return [
-      { cx: 0.42, cy: 0.56, d: 0.66 },
-      { cx: 0.68, cy: 0.36, d: 0.5 },
+      { cx: 0.35, cy: 0.65, d: 0.64 },
+      { cx: 0.65, cy: 0.35, d: 0.64 },
     ];
   }
   if (count === 3) {
@@ -200,5 +240,27 @@ export function computeClusterLayout(count: number): ClusterBubble[] {
       { cx: 0.715, cy: 0.24, d: 0.4 },
     ];
   }
+  if (count === 4) {
+    // The iMessage 4-person layout: a 2×2 grid of EQUAL-diameter bubbles,
+    // centred in the box with the same uniform neighbour gap the rest of the
+    // cluster keeps (LAYOUT_GAP, in circle-radius units), sized so the outermost
+    // bubble edge reaches the box radius (0.5 from the centre) — exactly as the
+    // force-packed counts do — so the four circles fill the round box
+    // edge-to-edge with a clean uniform gap and no overlap.
+    //
+    // With diameter `d` and radius `r = d/2`, the neighbour gap `g = LAYOUT_GAP·r`,
+    // so the centre-to-centre spacing is `s = d + g = d·(1 + LAYOUT_GAP/2)`. Each
+    // centre sits `(s/2, s/2)` from the box centre, so its farthest point lies
+    // `(s/2)·√2 + r` away; setting that to `0.5` and solving for `d`:
+    const spacingFactor = 1 + LAYOUT_GAP / 2;
+    const d = 0.5 / ((spacingFactor * Math.SQRT2) / 2 + 0.5);
+    const half = (d * spacingFactor) / 2;
+    return [
+      { cx: 0.5 - half, cy: 0.5 - half, d },
+      { cx: 0.5 + half, cy: 0.5 - half, d },
+      { cx: 0.5 - half, cy: 0.5 + half, d },
+      { cx: 0.5 + half, cy: 0.5 + half, d },
+    ];
+  }
   return packCluster(count);
 }