six-degrees 0.5.0 → 0.6.0

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

@@ -2,8 +2,9 @@
 
 import { initialsFor } from '../../lib/tiers';
 import { localPhoto } from '../../lib/photos';
+import { TIER_COLORS as THEME_TIERS } from '../../lib/themes';
 
-const FALLBACK = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
+const FALLBACK = THEME_TIERS;   // the theme's dot colours (lib/themes.js)
 
 // A round face with a tier-coloured ring.
 //

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

@@ -42,8 +42,8 @@ import { keyFor, score } from '../../lib/separation';
 import { hasRequest } from '../../lib/requests-client';
 import { watchScanner, scannerNow, isCircleScan } from '../../lib/scraper-client';
 import useRequests from './useRequests';
+import { TIER_COLORS } from '../../lib/themes';
 
-const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 const DEGREE_COLORS = { 1: '#FFD700', 2: '#FF6B35', 3: '#3498DB', 4: '#9B59B6', 5: '#00ff88', 6: '#ff5050' };
 const TIER_RANK = { S: 0, A: 1, B: 2, C: 3, D: 4 };
 const GREEN = '#00ff88';
@@ -309,7 +309,7 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
   // === ONE CIRCLE: a bridge's, or anyone's in it, opened in place ===
   if (focused) {
     return (
-      <div ref={containerRef} style={{ flex: 1, background: '#0a0a1a', position: 'relative', overflow: 'hidden' }}>
+      <div ref={containerRef} style={{ flex: 1, background: 'var(--sd-page)', position: 'relative', overflow: 'hidden' }}>
         <CircleFocus
           key={trail.map((r) => r.id).join('>')}
           trail={trail} index={index} reach={reach} dims={dims} requests={requests}
@@ -329,7 +329,7 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
   const hovBridge = hovered ? bridgePos.find(b => b.id === hovered) : null;
 
   return (
-    <div ref={containerRef} style={{ flex: 1, background: '#0a0a1a', position: 'relative', overflow: 'hidden' }}>
+    <div ref={containerRef} style={{ flex: 1, background: 'var(--sd-page)', position: 'relative', overflow: 'hidden' }}>
       <svg width={dims.w} height={dims.h}>
       <g transform={`translate(${cx * (1 - zoom)}, ${cy * (1 - zoom)}) scale(${zoom})`}>
         {/* A guide line for every ring of bridges */}
@@ -390,7 +390,7 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
               {/* How many in their circle are waiting for a scan: a small outlined number, top right */}
               {ready > 0 && (
                 <g pointerEvents="none">
-                  <circle cx={b.x + 14} cy={b.y - 14} r={6} fill="#0a0a1a" stroke={GREEN} strokeWidth={1.2} />
+                  <circle cx={b.x + 14} cy={b.y - 14} r={6} fill="var(--sd-bg)" stroke={GREEN} strokeWidth={1.2} />
                   <text x={b.x + 14} y={b.y - 11.4} textAnchor="middle" fill={GREEN} fontSize={ready > 9 ? 6 : 7} fontWeight={800}>{ready > 99 ? '99+' : ready}</text>
                 </g>
               )}
@@ -408,7 +408,7 @@ export default function ChainView({ connections, degree2 = [], onSelect, userNam
         })}
 
         {/* Center: YOU */}
-        <circle cx={cx} cy={cy} r={22} fill="#0a0a1a" stroke="#FFD700" strokeWidth={3} />
+        <circle cx={cx} cy={cy} r={22} fill="var(--sd-bg)" stroke="#FFD700" strokeWidth={3} />
         <text x={cx} y={cy + 4} textAnchor="middle" fill="#FFD700" fontSize={11} fontWeight={800}>
           {userName?.split(' ')[0] || 'YOU'}
         </text>
@@ -693,7 +693,7 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
           {(f.reached || (roomy && row.tier === 'S')) && (
             <text x={p.x} y={above ? p.y - r - 4 / k : p.y + r + 10 / k} textAnchor="middle" fontSize={8.5 / k} fontWeight={f.reached ? 700 : 400}
               fill={f.reached === 'hidden' ? '#999' : f.reached ? GREEN : '#aaa'} pointerEvents="none"
-              stroke="#0a0a1a" strokeWidth={2.4 / k} paintOrder="stroke">
+              stroke="var(--sd-bg)" strokeWidth={2.4 / k} paintOrder="stroke">
               {firstName(row)}
             </text>
           )}
@@ -810,7 +810,7 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
             return (
               <g key={'lk-' + row.id} transform={`translate(${p.x} ${p.y})`} pointerEvents="none"
                 opacity={litLinks && !lit ? 0.45 : 1}>
-                <circle r={c.radius} fill="#0a0a1a" fillOpacity={0.9} stroke={color} strokeOpacity={lit ? 0.7 : 0.25} strokeWidth={1 / k} />
+                <circle r={c.radius} fill="var(--sd-bg)" fillOpacity={0.9} stroke={color} strokeOpacity={lit ? 0.7 : 0.25} strokeWidth={1 / k} />
                 {/* Their people, each joined to the middle of the cluster */}
                 {clusterPaths(c).map(([tier, { spokes }]) => (
                   <path key={'s' + tier} d={spokes} fill="none" stroke={TIER_COLORS[tier] || '#555'}
@@ -819,14 +819,14 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
                 {clusterPaths(c).map(([tier, { dots: d }]) => (
                   <path key={tier} d={d} fill={TIER_COLORS[tier] || '#555'} fillOpacity={lit ? 1 : 0.9} />
                 ))}
-                <circle r={LINK_HUB} fill={color} stroke={hovLink === j ? '#fff' : '#0a0a1a'} strokeWidth={1.5} />
+                <circle r={LINK_HUB} fill={color} stroke={hovLink === j ? '#fff' : 'var(--sd-bg)'} strokeWidth={1.5} />
                 {row.id === scanningId && (
                   <circle r={c.radius + 4} fill="none" stroke={DEGREE_COLORS[3]} strokeWidth={1 / k} strokeDasharray={`${3 / k} ${2 / k}`} />
                 )}
                 <text y={c.radius + 12 / k} textAnchor="middle" fill="#fff" fontSize={10 / k} fontWeight={700}
-                  stroke="#0a0a1a" strokeWidth={2.4 / k} paintOrder="stroke">{firstName(row)}’s circle</text>
+                  stroke="var(--sd-bg)" strokeWidth={2.4 / k} paintOrder="stroke">{firstName(row)}’s circle</text>
                 <text y={c.radius + 23 / k} textAnchor="middle" fill={color} fontSize={8 / k}
-                  stroke="#0a0a1a" strokeWidth={2.4 / k} paintOrder="stroke">
+                  stroke="var(--sd-bg)" strokeWidth={2.4 / k} paintOrder="stroke">
                   {c.people.length.toLocaleString('en-US')} · {ordinal(depth + link.step + 1)} degree
                 </text>
               </g>
@@ -871,7 +871,7 @@ function CircleFocus({ trail, index, reach, dims, requests, scanningId, still, c
           )}
           {/* The person in the middle, with the halo if their own circle is ready to scan */}
           {reachState(person, reach) === 'ready' && <Halo x={0} y={0} r={40} still={still} />}
-          <circle r={28} fill="#0a0a1a" stroke={TIER_COLORS[person.tier] || '#888'} strokeWidth={hover === 'center' ? 4 : 3} filter="url(#focusGlow)" />
+          <circle r={28} fill="var(--sd-bg)" stroke={TIER_COLORS[person.tier] || '#888'} strokeWidth={hover === 'center' ? 4 : 3} filter="url(#focusGlow)" />
           {localPhoto(person.profile_image_url) ? (
             <>
               <clipPath id="focus-clip"><circle r={24} /></clipPath>
@@ -1077,7 +1077,7 @@ function EmptyCircle({ person, depth, reach, requests, scanning, canScan, onSele
   return (
     <div role="status" style={{
       position: 'absolute', left: '50%', top, transform: 'translateX(-50%)', width: 'min(360px, calc(100% - 32px))',
-      background: 'rgba(10,10,26,0.94)', border: `1px solid ${state === 'hidden' ? 'rgba(255,255,255,0.12)' : 'rgba(0,255,136,0.25)'}`,
+      background: 'color-mix(in srgb, var(--sd-bg) 94%, transparent)', border: `1px solid ${state === 'hidden' ? 'rgba(255,255,255,0.12)' : 'rgba(0,255,136,0.25)'}`,
       borderRadius: 12, padding: '14px 16px', textAlign: 'center',
     }}>
       <div style={{ fontSize: 13, fontWeight: 800, color: state === 'hidden' ? '#aaa' : '#fff', marginBottom: 6 }}>

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

@@ -3,6 +3,7 @@
 import { useState, useEffect } from 'react';
 import GalaxyLab, { NamesSwitch } from './GalaxyLab';
 import { TIERS, GRID_DEGREES, showing, showingIn, toggleCell, toggleTier, toggleDegree, showAllTiers } from '../../lib/tier-grid';
+import { TIER_COLORS } from '../../lib/themes';
 
 function useIsMobile() {
   const [m, setM] = useState(false);
@@ -10,7 +11,6 @@ function useIsMobile() {
   return m;
 }
 
-const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 
 
 const DEGREE_NAMES = ['', '1st', '2nd', '3rd', '4th', '5th', '6th'];
@@ -18,7 +18,8 @@ const DEGREE_NAMES = ['', '1st', '2nd', '3rd', '4th', '5th', '6th'];
 const DEGREE_IS = {
   network: { 1: 'your connections', 2: 'people in a scanned circle', 3: 'people found by a company scan' },
   degrees: { 1: 'your bridges', 2: 'people in their circles' },
-  paths: { 1: 'your connections', 2: 'people in a scanned circle', 3: 'people found by a company scan' },
+  separation: { 2: 'the people Separation ranks' },
+  paths:{ 1: 'your connections', 2: 'people in a scanned circle', 3: 'people found by a company scan' },
 };
 
 /**
@@ -31,6 +32,11 @@ export function TierGrid({ grid, counts, onChange, mode, isMobile }) {
   const dot = isMobile ? 21 : 23;
   const anyAt = (d) => TIERS.some((t) => (counts[t]?.[d] || 0) > 0);
   const what = (d) => DEGREE_IS[mode]?.[d];
+  // Separation: your connections are the ways in, and all of them stay, whatever their tier.
+  const waysIn = mode === 'separation';
+  const emptyTitle = (d, t) => (waysIn && d === 1
+    ? 'Every connection stays a way in here, whatever their tier: the tiers choose who is ranked'
+    : `No ${t ? `${t}-Tier ` : 'one '}at ${DEGREE_NAMES[d]} degree yet`);
   return (
     <div style={{ marginBottom: 18 }}>
       <div style={{ display: 'flex', alignItems: 'center', marginBottom: 6 }}>
@@ -44,7 +50,7 @@ export function TierGrid({ grid, counts, onChange, mode, isMobile }) {
             const on = any && TIERS.every((t) => grid.hidden.includes(t) || !(counts[t]?.[d] > 0) || grid.degrees[t].includes(d));
             return (
               <button key={d} type="button" disabled={!any} aria-pressed={on}
-                title={any ? `${DEGREE_NAMES[d]} degree${what(d) ? `: ${what(d)}` : ''}. Tap to ${on ? 'hide' : 'show'} it for every tier` : `Nobody at ${DEGREE_NAMES[d]} degree yet`}
+                title={any ? `${DEGREE_NAMES[d]} degree${what(d) ? `: ${what(d)}` : ''}. Tap to ${on ? 'hide' : 'show'} it for every tier` : emptyTitle(d)}
                 onClick={() => onChange(toggleDegree(grid, d, counts))}
                 style={{
                   width: dot, height: 18, padding: 0, border: 'none', background: 'none', cursor: any ? 'pointer' : 'default',
@@ -87,14 +93,14 @@ export function TierGrid({ grid, counts, onChange, mode, isMobile }) {
                       aria-label={`${t}-Tier at ${DEGREE_NAMES[d]} degree`}
                       title={people
                         ? `${people.toLocaleString('en-US')} ${t}-Tier at ${DEGREE_NAMES[d]} degree. Tap to ${on ? 'hide' : 'show'} them`
-                        : `No ${t}-Tier at ${DEGREE_NAMES[d]} degree yet`}
+                        : emptyTitle(d, t)}
                       onClick={() => onChange(toggleCell(grid, t, d, counts))}
                       style={{
                         width: dot, height: dot, padding: 0, borderRadius: '50%', boxSizing: 'border-box',
                         cursor: people ? 'pointer' : 'default', fontSize: 10, fontWeight: 800, lineHeight: 1,
-                        border: !people ? '1px dashed rgba(255,255,255,0.1)' : on ? `1.5px solid ${color}` : `1.5px solid ${color}70`,
-                        background: on ? color : 'transparent',
-                        color: !people ? 'rgba(255,255,255,0.12)' : on ? '#0a0a1a' : `${color}b0`,
+                        border: waysIn && d === 1 ? `1px solid ${color}40` : !people ? '1px dashed rgba(255,255,255,0.1)' : on ? `1.5px solid ${color}` : `1.5px solid ${color}70`,
+                        background: on ? color : waysIn && d === 1 ? `${color}1f` : 'transparent',
+                        color: waysIn && d === 1 ? `${color}90` : !people ? 'rgba(255,255,255,0.12)' : on ? '#0a0a1a' : `${color}b0`,
                         opacity: off && people ? 0.45 : 1,
                       }}>
                       {d}
@@ -112,7 +118,9 @@ export function TierGrid({ grid, counts, onChange, mode, isMobile }) {
 
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 8 }}>
         <div style={{ fontSize: 10, color: '#667', lineHeight: 1.4 }}>
-          Tap a tier to hide it, or a dot to show that degree.
+          {waysIn
+            ? 'Tap a tier to leave it out of the ranking. Every connection stays a way in.'
+            : 'Tap a tier to hide it, or a dot to show that degree.'}
         </div>
         <div style={{ fontSize: 10.5, color: '#889', whiteSpace: 'nowrap', marginLeft: 8 }}>
           {total.toLocaleString('en-US')} showing
@@ -130,7 +138,7 @@ export function TierGrid({ grid, counts, onChange, mode, isMobile }) {
 
 export default function FilterPanel({ collapsed, onToggle, mode, visualMode, grid, gridCounts = {}, onGridChange }) {
   const isMobile = useIsMobile();
-  const isDegreesMode = mode === 'degrees';
+  const isDegreesMode = mode === 'degrees' || mode === 'separation';
 
   if (collapsed) {
     return (
@@ -168,8 +176,8 @@ export default function FilterPanel({ collapsed, onToggle, mode, visualMode, gri
         borderRight: '1px solid rgba(52,152,219,0.15)',
         padding: isMobile ? '12px 10px' : '16px 14px',
         overflowY: 'auto', overflowX: 'hidden',
-        background: isMobile ? 'rgba(10,15,30,0.98)' : 'rgba(10,15,30,0.65)', fontSize: 13,
-        backdropFilter: 'blur(24px) saturate(1.4)', WebkitBackdropFilter: 'blur(24px) saturate(1.4)',
+        background: isMobile ? 'rgba(10,15,30,0.98)' : 'var(--sd-panel)', fontSize: 13,
+        backdropFilter: 'var(--sd-panel-blur)', WebkitBackdropFilter: 'var(--sd-panel-blur)',
         boxShadow: 'inset 0 0 60px rgba(52,152,219,0.04), 4px 0 24px rgba(0,0,0,0.3)',
       }}>
         {/* Close button */}
@@ -186,7 +194,7 @@ export default function FilterPanel({ collapsed, onToggle, mode, visualMode, gri
         </button>
 
         {/* Which tiers, at which degrees: the same grid in Network Circle and in Degrees */}
-        <TierGrid grid={grid} counts={gridCounts} onChange={onGridChange} mode={isDegreesMode ? 'degrees' : 'network'} isMobile={isMobile} />
+        <TierGrid grid={grid} counts={gridCounts} onChange={onGridChange} mode={mode} isMobile={isMobile} />
 
         {/* Network Circle's Galaxy: the physics that lays it out is what this panel is for. */}
         {!isDegreesMode && visualMode === 'galaxy' && (isMobile ? <NamesSwitch /> : <GalaxyLab />)}

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

@@ -6,8 +6,10 @@ import { localPhoto } from '../../lib/photos';
 import { recentre } from '../../lib/galaxy';
 import { reachIndex, readyByCircle, scanBars } from '../../lib/reach';
 import { ringSegments, RING } from '../../lib/dot-rings';
-import { LAB_DEFAULTS, labNow, watchLab, effectiveLab, clockNow, watchClock, setClock, stopReplay, bornTimes, reachCounts, colourScheme, findMatches, loadSocial, chapterAt, heatColour } from '../../lib/galaxy-lab';
+import { LAB_DEFAULTS, FORCE_KEYS, labNow, watchLab, effectiveLab, clockNow, watchClock, setClock, stopReplay, bornTimes, reachCounts, colourScheme, findMatches, loadSocial, chapterAt, heatColour } from '../../lib/galaxy-lab';
 import { registerGalaxy } from '../../lib/galaxy-export';
+import { MAP_LOOK } from '../../lib/themes';
+import { keyFor, routeIndex } from '../../lib/separation';
 
 // Connection fields are attacker-reachable: /api/ingest and /api/update-images
 // accept writes, and a page on any other site can POST to this app on localhost.
@@ -63,6 +65,8 @@ const RING_CSS = `
 .lab-focus .dot-rings, .lab-focus .catalyst-ring { opacity: 0.15; }
 .lab-find .gn:not(.found), .lab-find .gl:not(.found) { opacity: 0.07; }
 .lab-find .gn.found { stroke: #fff; stroke-width: 2px; }
+.far text:not(.hub) { opacity: 0; }
+@media (prefers-reduced-motion: no-preference) { .far text, g:not(.far) > text { transition: opacity 0.25s; } }
 @keyframes lab-pop { from { opacity: 0; } }
 @media (prefers-reduced-motion: no-preference) { .lab-pop .gn, .lab-pop .gl { animation: lab-pop 0.5s ease-out; } }
 @media (prefers-reduced-motion: reduce) {
@@ -84,6 +88,10 @@ export default function ForceGraph({ connections, onSelect, tierColors, focusNod
     }
     return out;
   }, [connections, fullDegree1, fullDegree2, scanNotes]);
+  // Every circle each person two steps away is in, from every circle scanned:
+  // the Galaxy links them to each of those connections, not only the one their
+  // row came through, so a shared person sits between the hubs they join.
+  const routes = useMemo(() => routeIndex(fullDegree2 || []), [fullDegree2]);
   const svgRef = useRef(null);
   const ringRef = useRef(null);
   const sceneRef = useRef(null);  // The scene on screen: { resize, select }
@@ -108,6 +116,7 @@ export default function ForceGraph({ connections, onSelect, tierColors, focusNod
     const c = clockNow();
     sceneRef.current?.setTime(c.at);
     sceneRef.current?.setFind(c.find, c.fly);
+    sceneRef.current?.setFit(c.fit);
   }), []);
   useEffect(() => () => stopReplay(), []);
 
@@ -179,7 +188,7 @@ export default function ForceGraph({ connections, onSelect, tierColors, focusNod
     const saved = transform ? recentre(transform, setFor, size) : null;
 
     const select = (d) => onSelectRef.current?.(d);
-    const scene = renderNetworkMode(svg, ringRef.current, size, connections, select, tierColors, focusNodeRef, saved, viewRef, userName, marks, effectiveLab(labRef.current), stampRef.current, schemeRef.current);
+    const scene = renderNetworkMode(svg, ringRef.current, size, connections, select, tierColors, focusNodeRef, saved, viewRef, userName, marks, effectiveLab(labRef.current), stampRef.current, schemeRef.current, routes);
     sceneRef.current = scene;
     scene.select(selectedIdRef.current);
     setClock({ min: scene.range.min, max: scene.range.max, of: scene.range.of });
@@ -200,6 +209,7 @@ export default function ForceGraph({ connections, onSelect, tierColors, focusNod
       // the same nodes, so they fought each other and the graph shook.
       // Refreshing made it worse because nothing ever stopped the old ones.
       scene.simulation.stop();
+      scene.dispose();
       unregister();
       // And any glide or fly-to still under way, which would otherwise go on
       // moving the next scene's view. viewRef already holds where it was going.
@@ -211,12 +221,12 @@ export default function ForceGraph({ connections, onSelect, tierColors, focusNod
     // why onSelect is not a dependency. The size is read through sizeRef: a new
     // size re-fits the view rather than rebuilding.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [connections, tierColors, measured, marks]);
+  }, [connections, tierColors, measured, marks, routes]);
 
   return (
     <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
       <style>{RING_CSS}</style>
-      <svg ref={svgRef} width={dimensions?.width ?? 800} height={dimensions?.height ?? 600} style={{ background: '#0a0a1a' }} />
+      <svg ref={svgRef} width={dimensions?.width ?? 800} height={dimensions?.height ?? 600} style={{ background: 'transparent' }} />
       {/* The selection ring. The scene places it over the selected dot. */}
       <div ref={ringRef} className="galaxy-ring" style={{
         position: 'absolute', left: 0, top: 0, display: 'none',
@@ -272,7 +282,7 @@ function easeRadius(el, r) {
 // Graph coordinates put you at 0,0, whatever the size of the box; the zoom
 // transform places that in the box. So a new size only moves the view, and a
 // rebuild can start from the view as it was.
-function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, focusNodeRef, savedTransform, viewRef, userName, marks = new Map(), lab = LAB_DEFAULTS, stamp = null, scheme = null) {
+function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, focusNodeRef, savedTransform, viewRef, userName, marks = new Map(), lab = LAB_DEFAULTS, stamp = null, scheme = null, routes = new Map()) {
   let colourOf = scheme?.of ?? ((d) => tierColors[d.tier] || '#666');
   const centerNode = {
     id: CENTER_ID, name: userName || 'You', tier: 'center', degree: 0,
@@ -323,6 +333,30 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
     const via = parentOf.get(c.id) ?? CENTER_ID;
     return { source: via, target: c.id, near: via !== CENTER_ID };
   });
+  // Every other way in, for someone two steps away who is in more than one
+  // circle on screen: a line to each of those connections too, so they sit
+  // between the hubs they join and tie them together, as a note linked from
+  // two others does in Obsidian. After the first lines, so links[i] stays
+  // connections[i] for the replay.
+  const alsoVia = new Map();   // id → the other connections they're reached through
+  for (const n of nodes) {
+    if (n.degree !== 2 || !parentOf.has(n.id)) continue;
+    const ways = routes.get(keyFor(n));
+    if (!ways || ways.size < 2) continue;
+    const others = [...ways].filter((id) => id != null && id !== parentOf.get(n.id) && drawnD1.has(id));
+    if (others.length) alsoVia.set(n.id, others);
+  }
+  for (const [id, others] of alsoVia) for (const via of others) links.push({ source: via, target: id, near: true, also: true });
+  // How many lines meet at each dot (Size by → Links, as Obsidian sizes a note),
+  // and who has a circle on screen (a hub).
+  const linkCount = new Map();
+  for (const l of links) {
+    linkCount.set(l.source, (linkCount.get(l.source) || 0) + 1);
+    linkCount.set(l.target, (linkCount.get(l.target) || 0) + 1);
+  }
+  const hubs = new Set(parentOf.values());
+  const circleOf = new Map();   // hub → how many hang off them
+  for (const p of parentOf.values()) circleOf.set(p, (circleOf.get(p) || 0) + 1);
 
   const tierRadius = (tier) => {
     switch (tier) { case 'S': return 150; case 'A': return 250; case 'B': return 350; case 'C': return 450; default: return 520; }
@@ -352,7 +386,11 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   const reach = reachCounts(nodes, parentOf);
 
   const nodeRadius = (d) => {
-    if (d.id === CENTER_ID) return 18;
+    if (d.id === CENTER_ID) return L.sizeBy === 'links' ? 24 : 18;
+    // Sized by links, a dot grows with the lines that meet at it: a connection
+    // with a scanned circle is a big hub, someone in three circles a little
+    // bigger than someone in one.
+    if (L.sizeBy === 'links') return Math.min(44, 3.5 + 2.1 * Math.sqrt(linkCount.get(d.id) || 1)) * L.dotSize;
     // Sized by reach, a dot grows with everyone who hangs off it: a 2nd-degree
     // person with a full circle behind them next to one with nobody.
     if (L.sizeBy === 'reach') return Math.min(28, 2.5 + 1.6 * Math.sqrt(reach.get(d.id) || 0)) * L.dotSize;
@@ -397,9 +435,13 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   // through re-fits the destination, and a rebuild starts from it, rather than
   // from a point along the way.
   let heading = null;
-  const zoomBehavior = d3.zoom().scaleExtent([0.3, 4]).on('zoom', (e) => {
+  // Names fade out zoomed out, as Obsidian's text does, all but the hubs'.
+  let labelsG = null;
+  const FAR = 0.85;
+  const zoomBehavior = d3.zoom().scaleExtent([0.1, 4]).on('zoom', (e) => {
     g.attr('transform', e.transform);
     viewRef.current = { transform: heading ?? e.transform, size: box };
+    labelsG?.classed('far', e.transform.k < FAR);
     placeRing();
   });
   svg.call(zoomBehavior);
@@ -490,14 +532,28 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   // Each force is today's value times its slider in the lab (1 when it's off).
   const linkBase = isMobileGraph ? 0 : layered ? 0.06 : 0.1;
   const radialBase = layered ? 0.45 : 0.3;
-  const linkDistance = d => (d.near ? Math.max(40, radiusOf(d.target) - radiusOf(d.source)) : radiusOf(d.target)) * L.distance;
+  const linkDistance = (d) => {
+    const base = (d.near ? Math.max(40, radiusOf(d.target) - radiusOf(d.source)) : radiusOf(d.target)) * L.distance;
+    if (L.sizeBy !== 'links') return base;
+    // Sized by links a hub is big, so its circle starts at its edge rather than
+    // under it; and a hub sits as far from you as its circle is wide, so the
+    // circles go round you like petals instead of piling up in the middle.
+    const petal = d.source.id === CENTER_ID ? 7 * Math.sqrt(circleOf.get(d.target.id) || 0) : 0;
+    return base + nodeRadius(d.source) + nodeRadius(d.target) + petal;
+  };
   const charge = d => (d.id === CENTER_ID ? -20 : -1) * L.push;
+  // The center force pulls you, your connections and every hub; someone in a
+  // circle mostly follows their hub, so each circle holds together round it
+  // rather than being drawn into one even disc with all the others.
+  const gravity = d => 0.15 * L.gravity * (hubs.has(d.id) ? 0.5 : d.degree >= 2 ? 0.2 : 1);
+  // Thicker lines show more of themselves too, so a cluster's links read at a distance.
+  const lineOpacity = () => Math.min(0.45, 0.1 + 0.05 * L.lines);
   const simulation = d3.forceSimulation(nodes)
     .force('link', d3.forceLink(links).id(d => d.id).distance(linkDistance).strength(Math.min(1, linkBase * L.pull)))
     .force('charge', d3.forceManyBody().strength(isMobileGraph ? 0 : charge))
     .force('center', isMobileGraph ? null : d3.forceCenter(0, 0))
-    .force('gravityX', isMobileGraph ? null : d3.forceX(0).strength(0.15 * L.gravity))
-    .force('gravityY', isMobileGraph ? null : d3.forceY(0).strength(0.15 * L.gravity))
+    .force('gravityX', isMobileGraph ? null : d3.forceX(0).strength(gravity))
+    .force('gravityY', isMobileGraph ? null : d3.forceY(0).strength(gravity))
     .force('collision', isMobileGraph ? null : d3.forceCollide().radius(d => nodeRadius(d) + 2))
     .force('radial', isMobileGraph ? null : d3.forceRadial(d => d.id === CENTER_ID ? 0 : radiusOf(d), 0, 0).strength(radialBase * L.rings));
   guidesG?.attr('opacity', Math.min(1, L.rings));
@@ -538,10 +594,12 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   // forceLink has already swapped each link's ids for the nodes themselves, so
   // the colour is one step away. It used to search every node for every link:
   // about 1.8 s at 30,000 people.
+  // The theme says whether a line takes the colour of the person it leads to, or one colour for all (lib/themes.js).
+  const lineColour = (d) => (MAP_LOOK.lines === 'one' ? MAP_LOOK.line : colourOf(d.target) || '#333');
   const link = g.append('g').selectAll('line').data(links).join('line')
     .attr('class', 'gl')
-    .attr('stroke', d => colourOf(d.target) || '#333')
-    .attr('stroke-opacity', 0.15).attr('stroke-width', 0.5 * L.lines);
+    .attr('stroke', lineColour)
+    .attr('stroke-opacity', lineOpacity()).attr('stroke-width', 0.5 * L.lines);
 
   // Catalyst outer glow rings (rendered behind the nodes)
   // A catalyst is the green outline on their dot (design C, with the scan
@@ -593,7 +651,7 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   const node = g.append('g').selectAll('circle').data(nodes).join('circle')
     .attr('class', 'gn')
     .attr('r', nodeRadius)
-    .attr('fill', d => d.id === CENTER_ID ? '#fff' : colourOf(d))
+    .attr('fill', d => d.id === CENTER_ID ? MAP_LOOK.you : colourOf(d))
     .attr('fill-opacity', d => (d.degree >= 3 ? 0.55 : d.degree === 2 ? 0.75 : 1))
     .attr('stroke', d => {
       if (d.id === CENTER_ID) return '#FFD700';
@@ -688,15 +746,17 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   const labelled = (n) => {
     if (findHit && findHit.size <= 40 && findHit.has(n.id)) return true;
     if (!L.labels) return false;
-    return n.id === CENTER_ID || (n.degree === 1 && (L.names === 'all' || n.tier === 'S' || n.is_catalyst));
+    return n.id === CENTER_ID || (n.degree === 1 && (L.names === 'all' || n.tier === 'S' || n.is_catalyst || hubs.has(n.id)));
   };
-  const labelsG = g.append('g');
+  labelsG = g.append('g').classed('far', d3.zoomTransform(svg.node()).k < FAR);
   let labels = labelsG.selectAll('text');
   const drawLabels = () => {
     labels = labelsG.selectAll('text').data(nodes.filter(labelled), d => d.id).join('text')
       .text(d => d.is_catalyst && d.tier !== 'S' ? d.name + ' ⚡' : d.name)
-      .attr('font-size', d => d.id === CENTER_ID ? 14 : 10)
-      .attr('font-weight', d => d.id === CENTER_ID ? 700 : 500)
+      .attr('class', d => (d.id === CENTER_ID || hubs.has(d.id) ? 'hub' : null))
+      // A hub's name grows with its dot, so it still reads with everyone on screen.
+      .attr('font-size', d => d.id === CENTER_ID ? 14 : hubs.has(d.id) ? Math.max(12, Math.min(22, nodeRadius(d) * 0.5)) : 10)
+      .attr('font-weight', d => d.id === CENTER_ID || hubs.has(d.id) ? 700 : 500)
       .attr('fill', d => {
         if (d.id === CENTER_ID) return '#fff';
         if (d.is_catalyst) return '#00ff88';
@@ -710,7 +770,7 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
 
   const catalystRings = g.selectAll('.catalyst-ring');
 
-  simulation.on('tick', () => {
+  const paint = () => {
     link.attr('x1', d => d.source.x).attr('y1', d => d.source.y).attr('x2', d => d.target.x).attr('y2', d => d.target.y);
     node.attr('cx', d => d.x).attr('cy', d => d.y);
     catalystRings.attr('cx', d => d.x).attr('cy', d => d.y);
@@ -718,8 +778,77 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
     labels.attr('x', d => d.x).attr('y', d => d.y);
     if (heatFn) heatDots.attr('cx', d => d.x).attr('cy', d => d.y);
     placeRing();
+  };
+  let tickedAt = 0;
+  simulation.on('tick', () => {
+    tickedAt = performance.now();
+    paint();
+    if (fitArmed && simulation.alpha() < SETTLED) { fitArmed = false; fitView(); }
   });
 
+  // Fit: everyone on screen, once the layout has settled (a layout picked in
+  // the lab, or its Fit button). Asked for through the clock's `fit` count.
+  const SETTLED = 0.06;
+  let fitArmed = false;
+  let lastFit = clockNow().fit;
+  const fitView = () => {
+    let x0 = Infinity, y0 = Infinity, x1 = -Infinity, y1 = -Infinity;
+    nodes.forEach((n, i) => {
+      if (!shown[i]) return;
+      const r = nodeRadius(n);
+      x0 = Math.min(x0, n.x - r); y0 = Math.min(y0, n.y - r); x1 = Math.max(x1, n.x + r); y1 = Math.max(y1, n.y + r);
+    });
+    if (!Number.isFinite(x0) || !box.width || !box.height) return;
+    const k = Math.max(0.1, Math.min(2, Math.min(box.width / (x1 - x0 + 80), box.height / (y1 - y0 + 80))));
+    moveView(d3.zoomIdentity.translate(box.width / 2 - ((x0 + x1) / 2) * k, box.height / 2 - ((y0 + y1) / 2) * k).scale(k), 750);
+  };
+  let fitCheck = null;
+  const setFit = (fit) => {
+    if (fit === lastFit) return;
+    lastFit = fit;
+    fitArmed = true;
+    // A layout just picked restarts the forces a moment later; a settled one fits now.
+    clearTimeout(fitCheck);
+    fitCheck = setTimeout(() => {
+      if (fitArmed && simulation.alpha() < SETTLED && performance.now() - tickedAt > 100) { fitArmed = false; fitView(); }
+    }, 150);
+  };
+
+  // Orbit (the lab's slider): the whole map turns round you, everyone at once,
+  // so nothing moves against anything else and the layout keeps its shape
+  // (each circle spinning on its own hub was tried: while the forces were still
+  // settling it dragged every circle off its hub). Moved in place every frame
+  // rather than by the forces, so it costs a repaint; a big network repaints
+  // every second or third frame, at the same speed. Never with Reduce Motion,
+  // nor on a phone (whose layout has no physics).
+  const every = nodes.length > 12000 ? 3 : nodes.length > 3000 ? 2 : 1;
+  let orbitTimer = null;
+  let lastT = 0;
+  let frame = 0;
+  const turn = (elapsed) => {
+    if (++frame % every) return;
+    const dt = Math.min(0.1, (elapsed - lastT) / 1000);
+    lastT = elapsed;
+    if (dt <= 0) return;
+    const a = 0.1 * L.orbit * dt;   // radians this frame
+    const c = Math.cos(a), sn = Math.sin(a);
+    for (const n of nodes) {
+      if (n.fx != null) continue;   // you, and anyone being dragged
+      const { x, y } = n;
+      n.x = x * c - y * sn;
+      n.y = x * sn + y * c;
+      // Its momentum turns with it, or while the forces settle it drifts the old way.
+      if (n.vx) { const vx = n.vx; n.vx = vx * c - n.vy * sn; n.vy = vx * sn + n.vy * c; }
+    }
+    // While the forces run, their tick paints.
+    if (performance.now() - tickedAt > 50) paint();
+  };
+  const setOrbit = () => {
+    const on = !isMobileGraph && L.orbit > 0 && !reducedMotion();
+    if (on && !orbitTimer) { lastT = 0; frame = 0; orbitTimer = d3.timer(turn); }
+    if (!on && orbitTimer) { orbitTimer.stop(); orbitTimer = null; }
+  };
+
   // A slider moved: change the running layout in place and let it settle again.
   const setLab = (next) => {
     if (isMobileGraph) {
@@ -736,16 +865,17 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
       simulation.force('collision').radius(d => nodeRadius(d) + 2);
       if (ringNode) select(ringNode.id);
     }
-    if (prev.lines !== L.lines) link.attr('stroke-width', 0.5 * L.lines);
+    if (prev.lines !== L.lines) link.attr('stroke-width', 0.5 * L.lines).attr('stroke-opacity', lineOpacity());
     if (sized || prev.names !== L.names || prev.labels !== L.labels) { drawLabels(); showBorn(); }
     if (!L.on || !L.branch) g.classed('lab-focus', false);
     g.classed('lab-pop', L.on && nodes.length < 5000);
-    const forces = ['gravity', 'rings', 'push', 'pull', 'distance'].some(k => prev[k] !== L[k]);
+    if (prev.orbit !== L.orbit) setOrbit();
+    const forces = FORCE_KEYS.some(k => prev[k] !== L[k]);
     if (!forces && !sized) return;
     simulation.force('link').distance(linkDistance).strength(Math.min(1, linkBase * L.pull));
     simulation.force('charge').strength(charge);
-    simulation.force('gravityX').strength(0.15 * L.gravity);
-    simulation.force('gravityY').strength(0.15 * L.gravity);
+    simulation.force('gravityX').strength(gravity);
+    simulation.force('gravityY').strength(gravity);
     simulation.force('radial').strength(radialBase * L.rings);
     guidesG?.attr('opacity', Math.min(1, L.rings));
     simulation.alpha(Math.max(simulation.alpha(), 0.5)).restart();
@@ -762,6 +892,7 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
   dotRings.each(function (d) { extraEls.set(d.id, [this]); });
   catalystRings.each(function (d) { extraEls.set(d.id, [...(extraEls.get(d.id) || []), this]); });
   const shown = new Uint8Array(nodes.length).fill(1);
+  const idxOf = new Map(nodes.map((n, i) => [n.id, i]));
   const d1 = nodes.filter(n => n.degree === 1);
   const dated = d1.map(n => bornById.get(n.id)).filter(Number.isFinite);
   const range = { min: dated.length ? dated.reduce((m, t) => Math.min(m, t)) : null, max: dated.length ? dated.reduce((m, t) => Math.max(m, t)) : null, of: d1.length };
@@ -786,6 +917,11 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
       if (linkEls[i - 1]) linkEls[i - 1].style.display = display;
       for (const el of extraEls.get(nodes[i].id) || []) el.style.display = display;
     }
+    // A line to another way in shows while both its ends do.
+    for (let j = connections.length; j < links.length; j++) {
+      const vis = shown[idxOf.get(links[j].source.id)] && shown[idxOf.get(links[j].target.id)];
+      linkEls[j].style.display = vis ? '' : 'none';
+    }
     showBorn();
     if (!stamp) return;
     stamp.style.display = at == null ? 'none' : 'block';
@@ -801,8 +937,8 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
     colourOf = next.of;
     heatFn = next.heat || null;
     drawHeat();
-    node.attr('fill', d => d.id === CENTER_ID ? '#fff' : colourOf(d));
-    link.attr('stroke', d => colourOf(d.target) || '#333');
+    node.attr('fill', d => d.id === CENTER_ID ? MAP_LOOK.you : colourOf(d));
+    link.attr('stroke', lineColour);
     drawLabels();
     showBorn();
     if (ringNode) select(ringNode.id);
@@ -836,7 +972,9 @@ function renderNetworkMode(svg, ring, box, connections, onSelect, tierColors, fo
     }
   };
 
-  return { simulation, resize, select, setLab, setTime, setColours, setFind, range };
+  setOrbit();
+  const dispose = () => { orbitTimer?.stop(); orbitTimer = null; clearTimeout(fitCheck); };
+  return { simulation, resize, select, setLab, setTime, setColours, setFind, setFit, dispose, range };
 }
 
 function setupDrag(node, simulation, fixedId) {