six-degrees 0.3.0 → 0.4.0

package/.next/standalone/app/components/BridgeRing.js

@@ -1,753 +0,0 @@
-'use client';
-
-/**
- * BridgeRing — the rotary dial, ported from the v2 build.
- *
- * Your highest-leverage connections sit on a ring around you. Drag anywhere to
- * spin it (1:1, no snapping while the pointer is down); release and the nearest
- * bridge snaps to the top slot. That bridge's known 2nd-degree circle fans
- * outward from the top inside a soft, deformable boundary, revealed node by
- * node.
- *
- * Rotation is fully imperative: the angle lives in a ref and positions are
- * written through d3-selection each frame, so React never re-renders during a
- * drag or a tween. It re-renders only when a selection is committed.
- */
-
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { select } from 'd3';
-import { TIER_COLORS, initialsFor } from '../../lib/tiers';
-
-// Twelve is what fits at full size, with a name and a circle-power figure under
-// each. Beyond that the dial goes dense: smaller nodes, and only the selected
-// one is labelled — so the capacity comes from the geometry of the ring rather
-// than from a number someone picked. A network with thirty-nine S-tier bridges
-// should show thirty-nine, not page four times to prove they exist.
-export const MAX_BRIDGES = 12;
-const DENSE_NODE_R = 9;
-const DENSE_GAP = 7;
-const MAX_CLUSTER_NODES = 24;
-const TOP = -Math.PI / 2;
-const SNAP_MS = 350;
-const CLICK_SLOP_PX = 6;
-const HULL_PAD_PX = 18;
-
-function normalizeAngle(a) {
-  let x = a % (Math.PI * 2);
-  if (x > Math.PI) x -= Math.PI * 2;
-  if (x < -Math.PI) x += Math.PI * 2;
-  return x;
-}
-
-/** Andrew's monotone chain convex hull. */
-function convexHull(points) {
-  const pts = [...points].sort((a, b) => a.x - b.x || a.y - b.y);
-  if (pts.length <= 2) return pts;
-  const cross = (o, a, b) => (a.x - o.x) * (b.y - o.y) - (a.y - o.y) * (b.x - o.x);
-  const lower = [];
-  for (const p of pts) {
-    while (lower.length >= 2 && cross(lower[lower.length - 2], lower[lower.length - 1], p) <= 0) lower.pop();
-    lower.push(p);
-  }
-  const upper = [];
-  for (let i = pts.length - 1; i >= 0; i--) {
-    const p = pts[i];
-    while (upper.length >= 2 && cross(upper[upper.length - 2], upper[upper.length - 1], p) <= 0) upper.pop();
-    upper.push(p);
-  }
-  lower.pop();
-  upper.pop();
-  return lower.concat(upper);
-}
-
-/** Closed Catmull-Rom spline through the points, emitted as cubic beziers. */
-function catmullRomClosed(points) {
-  const n = points.length;
-  if (n < 3) return '';
-  let d = `M ${points[0].x.toFixed(1)} ${points[0].y.toFixed(1)}`;
-  for (let i = 0; i < n; i++) {
-    const p0 = points[(i - 1 + n) % n];
-    const p1 = points[i];
-    const p2 = points[(i + 1) % n];
-    const p3 = points[(i + 2) % n];
-    const c1x = p1.x + (p2.x - p0.x) / 6;
-    const c1y = p1.y + (p2.y - p0.y) / 6;
-    const c2x = p2.x - (p3.x - p1.x) / 6;
-    const c2y = p2.y - (p3.y - p1.y) / 6;
-    d += ` C ${c1x.toFixed(1)} ${c1y.toFixed(1)}, ${c2x.toFixed(1)} ${c2y.toFixed(1)}, ${p2.x.toFixed(1)} ${p2.y.toFixed(1)}`;
-  }
-  return `${d} Z`;
-}
-
-function shortName(name) {
-  const s = String(name || '');
-  if (s.length <= 16) return s;
-  const parts = s.trim().split(/\s+/).filter(Boolean);
-  if (parts.length < 2) return `${s.slice(0, 15)}…`;
-  return `${parts[0]} ${parts[parts.length - 1].charAt(0)}.`;
-}
-
-function useIsMobile() {
-  const [mobile, setMobile] = useState(false);
-  useEffect(() => {
-    const check = () => setMobile(window.innerWidth < 768);
-    check();
-    window.addEventListener('resize', check);
-    return () => window.removeEventListener('resize', check);
-  }, []);
-  return mobile;
-}
-
-export default function BridgeRing({ connections = [], degree2 = [], onSelect, userName = 'You', userImage = null }) {
-  const containerRef = useRef(null);
-  const svgRef = useRef(null);
-  const offsetRef = useRef(0);
-  const tweenRef = useRef(null);
-  const interactedRef = useRef(false);
-  const cbRef = useRef({ onSelect });
-  const [size, setSize] = useState({ w: 0, h: 0 });
-  const [selectedId, setSelectedId] = useState(null);
-  // The dial holds twelve. A thirteenth bridge used to be silently unreachable;
-  // this is the window's start into the full sorted list.
-  const [ringStart, setRingStart] = useState(0);
-  const isMobile = useIsMobile();
-
-  useEffect(() => { cbRef.current = { onSelect }; }, [onSelect]);
-
-  // The dial is about circles you have actually mapped, so bridges with a known
-  // 2nd degree come first. Without any, it still renders your strongest people
-  // rather than an empty ring that reads as broken.
-  const { bridges, clusters } = useMemo(() => {
-    const byBridge = new Map();
-    for (const c of degree2) {
-      const key = c.source_connection_id;
-      if (!key) continue;
-      const list = byBridge.get(key);
-      if (list) list.push(c);
-      else byBridge.set(key, [c]);
-    }
-    const withCircle = connections
-      .filter((c) => byBridge.has(c.id))
-      .sort((a, b) => (Number(b.circle_power) || 0) - (Number(a.circle_power) || 0));
-    const chosen = withCircle.length
-      ? withCircle
-      : [...connections].sort((a, b) => (Number(b.power_score) || 0) - (Number(a.power_score) || 0));
-    return { bridges: chosen, clusters: byBridge };
-  }, [connections, degree2]);
-
-  // Depend on content, not array identity — the parent rebuilds these arrays on
-  // every render, and rebuilding the dial mid-drag would fight the pointer.
-  const signature = useMemo(
-    () => `${bridges.map((b) => b.id).join(',')}|${degree2.length}|${ringStart}`,
-    [bridges, degree2, ringStart]
-  );
-  const dataRef = useRef({ bridges, clusters });
-  useEffect(() => { dataRef.current = { bridges, clusters }; }, [bridges, clusters]);
-
-  useEffect(() => {
-    if (!selectedId && bridges.length) setSelectedId(bridges[0].id);
-  }, [selectedId, bridges]);
-
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return undefined;
-    // Synchronous first measure — first paint must not wait on ResizeObserver.
-    const measure = () => {
-      const rect = el.getBoundingClientRect();
-      setSize((prev) => {
-        const w = Math.round(rect.width);
-        const h = Math.round(rect.height);
-        return prev.w === w && prev.h === h ? prev : { w, h };
-      });
-    };
-    measure();
-    const ro = new ResizeObserver(measure);
-    ro.observe(el);
-    window.addEventListener('resize', measure);
-    return () => {
-      ro.disconnect();
-      window.removeEventListener('resize', measure);
-    };
-  }, []);
-
-  useEffect(() => {
-    const svgEl = svgRef.current;
-    const { w, h } = size;
-    if (!svgEl || w < 80 || h < 80) return undefined;
-    const { bridges: ringAll, clusters: clusterMap } = dataRef.current;
-    const total = ringAll.length;
-    if (total === 0) return undefined;
-    // Ring geometry first — the capacity below is derived from it.
-    const baseR = isMobile ? 150 : 230;
-    const panelW = isMobile ? 0 : 372;
-    const bandBase = isMobile ? 56 : 70;
-    const bandGap = isMobile ? 32 : 40;
-    const bandSpan = bandBase + 2 * bandGap;
-    const R = Math.max(90, Math.min(baseR, (h - bandSpan - 84) / 2, (w - panelW) / 2 - 56));
-    const cx = isMobile ? w / 2 : Math.max(R + 60, (w - panelW) / 2);
-    const cy = Math.max(R + bandSpan + 38, Math.min(h - R - 46, h * (isMobile ? 0.42 : 0.55)));
-
-    // Capacity comes from the ring, not from a number someone picked.
-    //
-    // A hard cap at twelve meant a network with thirty-nine S-tier bridges paged
-    // four times to prove they existed, and a hard switch to "dense" made
-    // fourteen bridges tiny when they would have fit at full size. Both are the
-    // same mistake: a threshold standing in for a measurement.
-    //
-    // Fit as many as the circumference allows at the smallest readable size,
-    // then let the node size scale back up when there is room to spare.
-    const capacity = Math.max(
-      MAX_BRIDGES,
-      Math.floor((2 * Math.PI * R) / (DENSE_NODE_R * 2 + DENSE_GAP))
-    );
-
-    // Discrete pages, not a sliding wrap: a window that wraps produced labels
-    // like "13-24 of 14", which is not a range anyone can hold in their head.
-    const pageCount = Math.max(1, Math.ceil(total / capacity));
-    const page = ((ringStart % pageCount) + pageCount) % pageCount;
-    const start = page * capacity;
-    const ring = total > capacity ? ringAll.slice(start, start + capacity) : ringAll;
-    const n = ring.length;
-    if (n === 0) return undefined;
-
-    const svg = select(svgEl);
-    svg.selectAll('*').remove();
-    svg.attr('viewBox', `0 0 ${w} ${h}`);
-    svgEl.style.cursor = 'grab';
-
-    const step = (Math.PI * 2) / n;
-    const slot = (i) => TOP + i * step;
-
-    // Arc length between neighbours decides both size and whether names fit.
-    const spacing = (2 * Math.PI * R) / Math.max(1, n);
-    const nodeR = Math.max(DENSE_NODE_R, Math.min(26, spacing / 2.6));
-    // A name plus a circle-power figure needs roughly this much room; below it,
-    // only the selected bridge is labelled rather than overlapping every name.
-    const labelsFit = spacing > 70;
-    let selIndex = ring.findIndex((b) => b.id === selectedId);
-    if (selIndex < 0) selIndex = 0;
-    const selected = ring[selIndex];
-
-    const defs = svg.append('defs');
-    defs.append('filter').attr('id', 'bridge-cloud-blur')
-      .attr('x', '-40%').attr('y', '-40%').attr('width', '180%').attr('height', '180%')
-      .append('feGaussianBlur').attr('stdDeviation', 5);
-    const nebula = defs.append('radialGradient').attr('id', 'bridge-nebula')
-      .attr('cx', '50%').attr('cy', '50%').attr('r', '50%');
-    nebula.append('stop').attr('offset', '0%').attr('stop-color', 'currentColor').attr('stop-opacity', 0.22);
-    nebula.append('stop').attr('offset', '60%').attr('stop-color', 'currentColor').attr('stop-opacity', 0.06);
-    nebula.append('stop').attr('offset', '100%').attr('stop-color', 'currentColor').attr('stop-opacity', 0);
-
-    // Initials always render; an image draws on top and hides itself on error,
-    // so a dead avatar is never a broken-image glyph.
-    function avatar(g, opts) {
-      g.append('circle').attr('r', opts.r).attr('fill', opts.fill)
-        .attr('stroke', 'rgba(255,255,255,0.25)').attr('stroke-width', 1);
-      if (opts.showInitials) {
-        g.append('text').attr('text-anchor', 'middle').attr('dy', '0.35em')
-          .attr('font-size', Math.max(6.5, opts.r * 0.72)).attr('font-weight', 700)
-          .attr('fill', opts.textFill ?? 'rgba(8,10,25,0.92)')
-          .attr('pointer-events', 'none').text(initialsFor(opts.name));
-      }
-      if (opts.imageUrl) {
-        const clipId = `bridgering-clip-${String(opts.key).replace(/[^\w-]/g, '_')}`;
-        defs.append('clipPath').attr('id', clipId).append('circle').attr('r', opts.r);
-        g.append('image').attr('href', opts.imageUrl)
-          .attr('x', -opts.r).attr('y', -opts.r)
-          .attr('width', opts.r * 2).attr('height', opts.r * 2)
-          .attr('clip-path', `url(#${clipId})`)
-          .attr('preserveAspectRatio', 'xMidYMid slice')
-          .attr('pointer-events', 'none')
-          .on('error', (event) => { select(event.currentTarget).attr('display', 'none'); });
-      }
-    }
-
-    // ---- static furniture -------------------------------------------------
-    svg.append('circle').attr('cx', cx).attr('cy', cy).attr('r', R)
-      .attr('fill', 'none').attr('stroke', 'rgba(255,255,255,0.06)')
-      .attr('stroke-width', 1.5).attr('stroke-dasharray', '2 7');
-
-    const centerLine = svg.append('line').attr('x1', cx).attr('y1', cy)
-      .attr('stroke', 'rgba(255,255,255,0.15)').attr('stroke-width', 1);
-
-    // ---- the selected bridge's circle, fanned from the top ---------------
-    const clusterOuter = svg.append('g').attr('transform', `translate(${cx}, ${cy - R})`);
-    const clusterInner = clusterOuter.append('g')
-      .attr('transform', 'scale(0.88)').style('opacity', 0)
-      .style('transition', 'opacity 260ms ease');
-
-    let scaleRaf = null;
-    let scaleTimeout = null;
-    const setClusterScale = (s) => clusterInner.attr('transform', `scale(${s})`);
-    function tweenClusterScale(from, to, ms) {
-      if (scaleRaf !== null) cancelAnimationFrame(scaleRaf);
-      if (scaleTimeout !== null) clearTimeout(scaleTimeout);
-      const t0 = performance.now();
-      const frame = (t) => {
-        const p = Math.min(1, (t - t0) / ms);
-        const e = 1 - Math.pow(1 - p, 3);
-        setClusterScale(from + (to - from) * e);
-        if (p < 1) scaleRaf = requestAnimationFrame(frame);
-        else scaleRaf = null;
-      };
-      scaleRaf = requestAnimationFrame(frame);
-      // No animation frames arrive in a hidden tab; land the final scale anyway
-      // rather than leaving the circle stuck at its entry size.
-      scaleTimeout = setTimeout(() => { setClusterScale(to); scaleTimeout = null; }, ms + 120);
-    }
-    function hideCluster() { clusterInner.style('opacity', 0); setClusterScale(0.92); }
-    function showCluster() {
-      clusterInner.style('opacity', 1);
-      // Each node carries its own transition delay — flipping opacity here is
-      // what produces the node-by-node "scan" reveal.
-      clusterInner.selectAll('.cluster-node, .cluster-chip').style('opacity', 1);
-      tweenClusterScale(0.9, 1, 300);
-    }
-
-    let suppressClick = false;
-
-    const clusterAll = clusterMap.get(selected.id) ?? [];
-    const clusterNodes = [...clusterAll]
-      .sort((a, b) => (Number(b.power_score) || 0) - (Number(a.power_score) || 0))
-      .slice(0, MAX_CLUSTER_NODES);
-
-    if (clusterNodes.length > 0) {
-      const bandCount = clusterNodes.length <= 6 ? 2 : 3;
-      const spread = (100 * Math.PI) / 180;
-      const perBand = Array.from({ length: bandCount }, () => []);
-      clusterNodes.forEach((_, i) => perBand[i % bandCount].push(i));
-      const placed = [];
-      perBand.forEach((idxs, band) => {
-        const rb = R + bandBase + band * bandGap;
-        idxs.forEach((nodeIdx, j) => {
-          const a = idxs.length === 1 ? TOP : TOP - spread / 2 + (spread * j) / (idxs.length - 1);
-          const c = clusterNodes[nodeIdx];
-          placed.push({
-            c,
-            x: rb * Math.cos(a),
-            y: rb * Math.sin(a) + R,
-            r: Math.max(5, Math.min(9, 5 + ((Number(c.power_score) || 0) / 13) * 4)),
-          });
-        });
-      });
-
-      // Deformable boundary: padded convex hull, smoothed and softly blurred.
-      const padPoints = [];
-      placed.forEach((p) => {
-        for (let s = 0; s < 8; s++) {
-          const a = (s / 8) * Math.PI * 2;
-          padPoints.push({
-            x: p.x + (p.r + HULL_PAD_PX) * Math.cos(a),
-            y: p.y + (p.r + HULL_PAD_PX) * Math.sin(a),
-          });
-        }
-      });
-      const boundary = catmullRomClosed(convexHull(padPoints));
-      const tierColor = TIER_COLORS[selected.tier] || TIER_COLORS.D;
-
-      const cx0 = placed.reduce((s, p) => s + p.x, 0) / placed.length;
-      const cy0 = placed.reduce((s, p) => s + p.y, 0) / placed.length;
-      const nebulaR = Math.max(...placed.map((p) => Math.hypot(p.x - cx0, p.y - cy0))) + 40;
-      clusterInner.append('circle').attr('cx', cx0).attr('cy', cy0).attr('r', nebulaR)
-        .style('color', tierColor).attr('fill', 'url(#bridge-nebula)');
-
-      if (boundary) {
-        clusterInner.append('path').attr('d', boundary).attr('fill', tierColor)
-          .attr('fill-opacity', 0.07).attr('filter', 'url(#bridge-cloud-blur)');
-        clusterInner.append('path').attr('d', boundary).attr('fill', 'none')
-          .attr('stroke', tierColor).attr('stroke-opacity', 0.2).attr('stroke-width', 1);
-      }
-
-      placed.forEach((p) => {
-        clusterInner.append('line').attr('x1', 0).attr('y1', 0).attr('x2', p.x).attr('y2', p.y)
-          .attr('stroke', 'rgba(255,255,255,0.06)').attr('stroke-width', 1);
-      });
-
-      placed.forEach((p, i) => {
-        const g = clusterInner.append('g').attr('class', 'cluster-node')
-          .attr('transform', `translate(${p.x}, ${p.y})`)
-          .style('cursor', 'pointer').style('opacity', 0)
-          .style('transition', `opacity 200ms ease ${i * 16}ms`);
-        avatar(g, {
-          key: `c-${p.c.id}`, r: p.r,
-          fill: TIER_COLORS[p.c.tier] || TIER_COLORS.D,
-          name: p.c.name, imageUrl: p.c.profile_image_url, showInitials: p.r >= 8,
-        });
-        g.append('title').text(p.c.headline ? `${p.c.name} — ${p.c.headline}` : p.c.name);
-        g.on('click', (event) => {
-          event.stopPropagation();
-          if (suppressClick) { suppressClick = false; return; }
-          cbRef.current.onSelect?.(p.c);
-        });
-      });
-
-      const chipY = Math.min(...placed.map((p) => p.y - p.r)) - 22;
-      const sCount = selected.circle_s_count ?? 0;
-      const aCount = selected.circle_a_count ?? 0;
-      // Say so when there is more than fits. A silent cap looks like a small
-      // circle rather than a truncated one.
-      const shown = placed.length < clusterAll.length
-        ? `showing ${placed.length} of ${clusterAll.length}`
-        : `${placed.length} people`;
-      const label = selected.is_catalyst
-        ? `⚡ catalyst circle · ${shown}`
-        : `circle unlocked · ${shown} · ${sCount}S ${aCount}A`;
-      const chip = clusterInner.append('g').attr('class', 'cluster-chip')
-        .attr('transform', `translate(${cx0}, ${chipY})`)
-        .style('opacity', 0)
-        .style('transition', `opacity 240ms ease ${placed.length * 16 + 80}ms`);
-      const chipText = chip.append('text').attr('text-anchor', 'middle').attr('dy', '0.35em')
-        .attr('font-size', 11).attr('font-weight', 600)
-        .attr('fill', selected.is_catalyst ? TIER_COLORS.S : '#e2e8f0')
-        .text(label);
-      const tw = (chipText.node()?.getComputedTextLength() ?? label.length * 6) + 20;
-      chip.insert('rect', 'text')
-        .attr('x', -tw / 2).attr('y', -11).attr('width', tw).attr('height', 22).attr('rx', 11)
-        .attr('fill', 'rgba(10,10,25,0.75)')
-        .attr('stroke', selected.is_catalyst ? TIER_COLORS.S : 'rgba(255,255,255,0.15)')
-        .attr('stroke-opacity', selected.is_catalyst ? 0.6 : 1)
-        .attr('stroke-width', 1);
-    }
-
-    // ---- bridge nodes on the dial ----------------------------------------
-    const bridgesG = svg.append('g');
-    const bridgeGroups = ring.map((b, i) => {
-      // Power still shows through as size, but bounded by what the ring can hold.
-      const r = labelsFit
-        ? Math.min(nodeR, 14 + (Number(b.power_score) || 0))
-        : nodeR + (i === selIndex ? 4 : 0);
-      const isSel = i === selIndex;
-      const g = bridgesG.append('g').style('cursor', 'pointer').attr('opacity', isSel ? 1 : 0.6);
-      if (b.is_catalyst) {
-        g.append('circle').attr('r', r + 4).attr('fill', 'none')
-          .attr('stroke', TIER_COLORS.S).attr('stroke-opacity', 0.85).attr('stroke-width', 1.5);
-      }
-      if (isSel) {
-        g.append('circle').attr('r', r + (b.is_catalyst ? 8 : 5)).attr('fill', 'none')
-          .attr('stroke', 'rgba(255,255,255,0.35)').attr('stroke-width', 1);
-      }
-      avatar(g, {
-        key: `b-${b.id}`, r, fill: TIER_COLORS[b.tier] || TIER_COLORS.D,
-        name: b.name, imageUrl: b.profile_image_url, showInitials: true,
-      });
-      // When the ring is tight, only the selection is named — forty labels on a
-      // circle is not a readable dial, it is a wall of text.
-      if (!labelsFit && !isSel) return g;
-      const labels = g.append('g')
-        .attr('opacity', isSel ? 1 : isMobile ? 0.15 : 0.7)
-        .attr('pointer-events', 'none');
-      labels.append('text').attr('text-anchor', 'middle').attr('y', r + 15)
-        .attr('font-size', 11).attr('font-weight', isSel ? 700 : 500)
-        .attr('fill', isSel ? '#f8fafc' : '#94a3b8').text(shortName(b.name));
-      labels.append('text').attr('text-anchor', 'middle').attr('y', r + 28)
-        .attr('font-size', 9.5).attr('fill', TIER_COLORS[b.tier] || TIER_COLORS.D)
-        .attr('fill-opacity', 0.9)
-        .text(`${(Number(b.circle_power) || 0).toFixed(1)} circle power`);
-      g.append('title').text(b.headline ? `${b.name} — ${b.headline}` : b.name);
-      g.on('click', (event) => {
-        event.stopPropagation();
-        if (suppressClick) { suppressClick = false; return; }
-        fadeHint();
-        rotateToSlot(i);
-      });
-      return g;
-    });
-
-    // ---- you, fixed at the centre ----------------------------------------
-    const centerG = svg.append('g').attr('transform', `translate(${cx}, ${cy})`);
-    const uR = isMobile ? 22 : 28;
-    centerG.append('circle').attr('r', uR + 6).attr('fill', 'none')
-      .attr('stroke', 'rgba(255,255,255,0.08)').attr('stroke-width', 1);
-    avatar(centerG, {
-      key: 'user', r: uR, fill: '#1c1c42', textFill: '#e2e8f0',
-      name: userName, imageUrl: userImage, showInitials: true,
-    });
-    centerG.append('text').attr('text-anchor', 'middle').attr('y', uR + 17)
-      .attr('font-size', 11).attr('font-weight', 600).attr('fill', '#cbd5e1')
-      .text(shortName(userName));
-    centerG.append('text').attr('text-anchor', 'middle').attr('y', uR + 30)
-      .attr('font-size', 9).attr('fill', '#64748b').text('you');
-
-    // ---- affordance, fades after the first interaction --------------------
-    // A visible pager.
-    //
-    // The dial holds twelve, sorted by circle power — which skews hard to your
-    // strongest people, so lower tiers never appeared on the first page while
-    // the tier filter beside it was counting every bridge. Chain view shows all
-    // of them, so the two disagreed and only this one was lying. Shift+arrow
-    // already paged, but nothing said so.
-    if (total > MAX_BRIDGES) {
-      const pagerY = Math.max(20, cy - R - (isMobile ? 96 : 118));
-      const first = start + 1;
-      const last = start + n;   // n is the real page size, short on the last page
-      const tiersHere = [...new Set(ring.map((b) => b.tier).filter(Boolean))]
-        .sort((a, b) => 'SABCD'.indexOf(a) - 'SABCD'.indexOf(b));
-
-      const pager = svg.append('g').attr('transform', `translate(${cx}, ${pagerY})`);
-
-      pager.append('text')
-        .attr('text-anchor', 'middle')
-        .attr('font-size', 10.5)
-        .attr('fill', 'rgba(255,255,255,0.4)')
-        .attr('letter-spacing', '0.06em')
-        .attr('pointer-events', 'none')
-        .text(pageCount > 1
-          ? `${first}\u2013${last} of ${total} \u00b7 page ${page + 1}/${pageCount} \u00b7 by circle power`
-          : `all ${total} bridges \u00b7 by circle power`);
-
-      // Which tiers you are actually looking at, so a page of all-S is obvious.
-      pager.append('text')
-        .attr('y', 15)
-        .attr('text-anchor', 'middle')
-        .attr('font-size', 10)
-        .attr('pointer-events', 'none')
-        .selectAll('tspan')
-        .data(tiersHere)
-        .join('tspan')
-        .attr('dx', (d, i) => (i ? 7 : 0))
-        .attr('fill', (d) => TIER_COLORS[d] || TIER_COLORS.D)
-        .text((d) => d);
-
-      const arrow = (dx, dir, glyph) => {
-        const g = pager.append('g')
-          .attr('transform', `translate(${dx}, 0)`)
-          .style('cursor', 'pointer');
-        g.append('circle').attr('r', 11).attr('fill', 'rgba(255,255,255,0.06)')
-          .attr('stroke', 'rgba(255,255,255,0.14)').attr('stroke-width', 1);
-        g.append('text').attr('text-anchor', 'middle').attr('dy', '0.34em')
-          .attr('font-size', 12).attr('fill', '#cbd5e1')
-          .attr('pointer-events', 'none').text(glyph);
-        g.append('title').text(dir > 0 ? 'Next bridges' : 'Previous bridges');
-        g.on('click', (event) => {
-          event.stopPropagation();
-          suppressClick = true;
-          setRingStart((v) => v + dir);
-        });
-      };
-      if (pageCount > 1) {
-        arrow(-(isMobile ? 92 : 118), -1, '\u2039');
-        arrow(isMobile ? 92 : 118, 1, '\u203a');
-      }
-    }
-
-    const hint = interactedRef.current ? null : svg.append('text')
-      .attr('x', cx)
-      .attr('y', Math.min(isMobile ? h * 0.54 - 12 : h - 12, cy + R + (isMobile ? 42 : 54)))
-      .attr('text-anchor', 'middle').attr('font-size', 11)
-      .attr('fill', 'rgba(255,255,255,0.3)').attr('letter-spacing', '0.08em')
-      .attr('pointer-events', 'none').style('transition', 'opacity 600ms ease')
-      .text('drag to rotate · release to snap');
-
-    function fadeHint() {
-      if (interactedRef.current) return;
-      interactedRef.current = true;
-      hint?.style('opacity', 0);
-    }
-
-    // ---- rotation core ----------------------------------------------------
-    function layout() {
-      const off = offsetRef.current;
-      bridgeGroups.forEach((g, i) => {
-        const a = slot(i) + off;
-        g.attr('transform', `translate(${cx + R * Math.cos(a)}, ${cy + R * Math.sin(a)})`);
-      });
-      const sa = slot(selIndex) + off;
-      centerLine.attr('x2', cx + R * Math.cos(sa)).attr('y2', cy + R * Math.sin(sa));
-    }
-
-    let tweenTimeout = null;
-
-    function cancelTween() {
-      if (tweenRef.current !== null) {
-        cancelAnimationFrame(tweenRef.current);
-        tweenRef.current = null;
-      }
-      if (tweenTimeout !== null) {
-        clearTimeout(tweenTimeout);
-        tweenTimeout = null;
-      }
-    }
-
-    function tweenTo(target, done) {
-      cancelTween();
-      const from = offsetRef.current;
-      const delta = normalizeAngle(target - from);
-      const t0 = performance.now();
-      let settled = false;
-      const finish = () => {
-        if (settled) return;
-        settled = true;
-        cancelTween();
-        offsetRef.current = from + delta;
-        layout();
-        done?.();
-      };
-      const frame = (t) => {
-        const p = Math.min(1, (t - t0) / SNAP_MS);
-        const e = 1 - Math.pow(1 - p, 3);
-        offsetRef.current = from + delta * e;
-        layout();
-        if (p < 1) tweenRef.current = requestAnimationFrame(frame);
-        else { tweenRef.current = null; finish(); }
-      };
-      tweenRef.current = requestAnimationFrame(frame);
-      // The animation rides on requestAnimationFrame, which does not run in a
-      // hidden or background tab — and the SELECTION is committed in the
-      // callback. Without this, clicking a bridge in a background tab changes
-      // nothing at all. Land the state even when no frame ever arrives.
-      tweenTimeout = setTimeout(finish, SNAP_MS + 120);
-    }
-
-    function rotateToSlot(i) {
-      const target = offsetRef.current + normalizeAngle(TOP - slot(i) - offsetRef.current);
-      const bridge = ring[i];
-      const id = bridge.id;
-      if (id !== selectedId) hideCluster();
-      tweenTo(target, () => {
-        // The dial owns which bridge is at the top; the rest of the app owns
-        // showing who that is. Before this, clicking a bridge rotated it and
-        // told nobody, which reads exactly like the click doing nothing.
-        cbRef.current.onSelect?.(bridge);
-        if (id !== selectedId) setSelectedId(id);
-        else showCluster();
-      });
-    }
-
-    // ---- pointer handling (mouse + touch) ---------------------------------
-    let dragging = false;
-    let moved = false;
-    let startX = 0;
-    let startY = 0;
-    let lastPointerAngle = 0;
-
-    const svgPoint = (e) => {
-      const rect = svgEl.getBoundingClientRect();
-      return {
-        x: rect.width > 0 ? ((e.clientX - rect.left) / rect.width) * w : 0,
-        y: rect.height > 0 ? ((e.clientY - rect.top) / rect.height) * h : 0,
-      };
-    };
-
-    function onPointerDown(e) {
-      if (e.pointerType === 'mouse' && e.button !== 0) return;
-      cancelTween();
-      dragging = true;
-      moved = false;
-      suppressClick = false;
-      startX = e.clientX;
-      startY = e.clientY;
-      const p = svgPoint(e);
-      lastPointerAngle = Math.atan2(p.y - cy, p.x - cx);
-      try { svgEl.setPointerCapture(e.pointerId); } catch { /* best effort */ }
-    }
-
-    function onPointerMove(e) {
-      if (!dragging) return;
-      if (!moved) {
-        if (Math.hypot(e.clientX - startX, e.clientY - startY) < CLICK_SLOP_PX) return;
-        moved = true;
-        suppressClick = true;
-        svgEl.style.cursor = 'grabbing';
-        hideCluster();
-        fadeHint();
-      }
-      const p = svgPoint(e);
-      const ang = Math.atan2(p.y - cy, p.x - cx);
-      offsetRef.current += normalizeAngle(ang - lastPointerAngle);
-      lastPointerAngle = ang;
-      layout();   // 1:1 while the pointer is down; snapping happens on release
-    }
-
-    function onPointerUp(e) {
-      if (!dragging) return;
-      dragging = false;
-      svgEl.style.cursor = 'grab';
-      try { svgEl.releasePointerCapture(e.pointerId); } catch { /* already released */ }
-      if (!moved) return;
-      let best = 0;
-      let bestDist = Infinity;
-      for (let i = 0; i < n; i++) {
-        const d = Math.abs(normalizeAngle(slot(i) + offsetRef.current - TOP));
-        if (d < bestDist) { bestDist = d; best = i; }
-      }
-      rotateToSlot(best);
-    }
-
-    function onSvgClick() {
-      if (suppressClick) { suppressClick = false; return; }
-      cbRef.current.onSelect?.(null);
-    }
-
-    // The dial must be operable without a pointer.
-    function onKeyDown(e) {
-      let delta = 0;
-      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') delta = 1;
-      else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') delta = -1;
-      else return;
-      e.preventDefault();
-      fadeHint();
-      // Shift pages the window through the full list; plain arrows move within
-      // the twelve currently on the dial.
-      if (e.shiftKey && pageCount > 1) {
-        setRingStart((v) => v + delta);
-        return;
-      }
-      rotateToSlot((selIndex + delta + n) % n);
-    }
-
-    svgEl.addEventListener('pointerdown', onPointerDown);
-    svgEl.addEventListener('pointermove', onPointerMove);
-    svgEl.addEventListener('pointerup', onPointerUp);
-    svgEl.addEventListener('pointercancel', onPointerUp);
-    svgEl.addEventListener('click', onSvgClick);
-    svgEl.addEventListener('keydown', onKeyDown);
-
-    // Canonical offset puts the selected bridge exactly at the top slot.
-    offsetRef.current = normalizeAngle(-selIndex * step);
-    layout();
-
-    // Double rAF so the hidden state paints before the transition begins —
-    // with a timeout behind it, because a background tab gets no frames and the
-    // circle would simply never appear.
-    const fadeRafs = [];
-    let revealed = false;
-    const reveal = () => { if (revealed) return; revealed = true; showCluster(); };
-    fadeRafs.push(requestAnimationFrame(() => {
-      fadeRafs.push(requestAnimationFrame(reveal));
-    }));
-    const revealTimeout = setTimeout(reveal, 200);
-
-    return () => {
-      cancelTween();
-      if (scaleRaf !== null) cancelAnimationFrame(scaleRaf);
-      if (scaleTimeout !== null) clearTimeout(scaleTimeout);
-      clearTimeout(revealTimeout);
-      fadeRafs.forEach((id) => cancelAnimationFrame(id));
-      svgEl.removeEventListener('pointerdown', onPointerDown);
-      svgEl.removeEventListener('pointermove', onPointerMove);
-      svgEl.removeEventListener('pointerup', onPointerUp);
-      svgEl.removeEventListener('pointercancel', onPointerUp);
-      svgEl.removeEventListener('click', onSvgClick);
-      svgEl.removeEventListener('keydown', onKeyDown);
-      svg.selectAll('*').remove();
-    };
-  }, [signature, selectedId, ringStart, isMobile, size, userName, userImage]);
-
-  return (
-    <div
-      ref={containerRef}
-      // The view area is a flex column, so a percentage height resolves
-      // against nothing and collapses to zero. Flex into the space instead,
-      // the way the other views do.
-      style={{ position: 'relative', flex: 1, minHeight: 0, width: '100%' }}
-    >
-      <svg
-        ref={svgRef}
-        tabIndex={0}
-        role="application"
-        aria-label="Bridge dial. Drag to rotate, or use the arrow keys to select the previous or next bridge; the selected bridge sits at the top with their known circle fanned above."
-        style={{ height: '100%', width: '100%', userSelect: 'none', touchAction: 'none', borderRadius: 12, outline: 'none' }}
-      />
-    </div>
-  );
-}