six-degrees 0.5.0 → 0.6.0

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

@@ -10,7 +10,7 @@
 
 import { useState, useSyncExternalStore } from 'react';
 import {
-  LAB_DEFAULTS, CLUSTERS, ORBIT, layoutOf, labNow, setLab, watchLab,
+  LAB_DEFAULTS, CLUSTERS, ORBIT, LAYOUT_LOOKS, layoutOf, labNow, setLab, watchLab,
   clockNow, setClock, watchClock, play, pause, stopReplay,
   layoutsNow, watchLayouts, saveLayout, applyLayout, forgetLayout, milestones,
 } from '../../lib/galaxy-lab';
@@ -21,16 +21,20 @@ const noLayouts = [];
 
 const DAY = 86400000;
 
+// Obsidian's four forces, by its names, saying what each does to a network
+// (Blake, 2026-10-03: "give the obsidian adjustments making sense to our data
+// sets"), then our own two: the tier rings, and Orbit.
 const FORCES = [
-  { key: 'gravity', label: 'Gravity', min: 0, max: 3, step: 0.01, fmt: (v) => v.toFixed(2), hint: 'Pulls every dot in towards you.' },
-  { key: 'rings', label: 'Rings', min: 0, max: 5, step: 0.05, fmt: (v) => `${v.toFixed(2)}×`, hint: 'How hard each tier holds its ring. At 0 the Galaxy finds its own shape.' },
-  { key: 'push', label: 'Push', min: 0, max: 300, step: 1, fmt: (v) => String(v), hint: 'How hard dots push each other apart.' },
-  { key: 'pull', label: 'Pull', min: 0, max: 15, step: 0.05, fmt: (v) => `${v.toFixed(2)}×`, hint: 'How hard each person pulls the people who came through them.' },
-  { key: 'distance', label: 'Distance', min: 0.05, max: 6, step: 0.05, fmt: (v) => `${v.toFixed(2)}×`, hint: 'How far out those people sit.' },
+  { key: 'gravity', label: 'Center force', min: 0, max: 3, step: 0.01, fmt: (v) => v.toFixed(2), hint: 'Pulls everyone in towards you. Higher keeps the whole network a tighter, rounder disc.' },
+  { key: 'push', label: 'Repel force', min: 0, max: 300, step: 1, fmt: (v) => String(v), hint: 'How hard people push each other apart: the space between clusters.' },
+  { key: 'pull', label: 'Link force', min: 0, max: 15, step: 0.05, fmt: (v) => `${v.toFixed(2)}×`, hint: 'How tightly a line holds: your connections to you, a circle to its connection, and someone in several circles to each of them.' },
+  { key: 'distance', label: 'Link distance', min: 0.05, max: 6, step: 0.05, fmt: (v) => `${v.toFixed(2)}×`, hint: 'How long the lines are: how far a circle sits from its connection, and your connections from you.' },
+  { key: 'rings', label: 'Rings', min: 0, max: 5, step: 0.05, fmt: (v) => `${v.toFixed(2)}×`, hint: 'How hard each tier holds its ring round you. At 0 the network finds its own shape.' },
 ];
+const ORBIT_SLIDER = { key: 'orbit', label: 'Orbit', min: 0, max: 5, step: 0.05, fmt: (v) => (v ? `${v.toFixed(2)}×` : 'still'), hint: 'Sets the whole map turning round you, every circle with it, so nothing loses its shape. 0 holds still.' };
 const DISPLAY = [
-  { key: 'dotSize', label: 'Dot size', min: 0.2, max: 8, step: 0.05, fmt: (v) => `${v.toFixed(2)}×` },
-  { key: 'lines', label: 'Lines', min: 0, max: 20, step: 0.1, fmt: (v) => `${v.toFixed(1)}×` },
+  { key: 'dotSize', label: 'Node size', min: 0.2, max: 8, step: 0.05, fmt: (v) => `${v.toFixed(2)}×` },
+  { key: 'lines', label: 'Link thickness', min: 0, max: 20, step: 0.1, fmt: (v) => `${v.toFixed(1)}×` },
 ];
 
 const heading = { fontSize: 9, fontWeight: 700, color: '#555', letterSpacing: 1, margin: '12px 0 6px', textTransform: 'uppercase' };
@@ -78,6 +82,15 @@ export function NamesSwitch() {
   );
 }
 
+// Reduce Motion, the computer's accessibility setting: Orbit holds still under it.
+const MOTION = '(prefers-reduced-motion: reduce)';
+const reducedMotion = () => window.matchMedia?.(MOTION).matches ?? false;
+const subscribeMotion = (f) => {
+  const m = window.matchMedia?.(MOTION);
+  m?.addEventListener('change', f);
+  return () => m?.removeEventListener('change', f);
+};
+
 const month = (t) => new Date(t).toLocaleDateString(undefined, { month: 'short', year: 'numeric' });
 
 export default function GalaxyLab() {
@@ -99,6 +112,14 @@ export default function GalaxyLab() {
   };
   const canReplay = clock.min != null && clock.max != null && clock.max > clock.min;
   const preset = layoutOf(lab);
+  const fit = () => setClock({ fit: clockNow().fit + 1 });
+  // A layout: its forces and its look, then everyone on screen once it settles.
+  const pickLayout = (v) => {
+    const forces = v === 'rings' ? { ...Object.fromEntries(FORCES.map((f) => [f.key, LAB_DEFAULTS[f.key]])), sizeBy: 'power' } : v === 'orbit' ? ORBIT : CLUSTERS;
+    setLab({ ...forces, ...LAYOUT_LOOKS[v] });
+    fit();
+  };
+  const still = useSyncExternalStore(subscribeMotion, reducedMotion, () => false);
 
   return (
     <div style={{ marginBottom: 18, borderTop: '1px solid rgba(255,255,255,0.06)', paddingTop: 12 }}>
@@ -128,23 +149,32 @@ export default function GalaxyLab() {
           <Choice
             value={preset}
             options={[['rings', 'Rings'], ['orbit', 'Orbit'], ['clusters', 'Clusters']]}
-            onPick={(v) => setLab(v === 'rings' ? { ...Object.fromEntries(FORCES.map((f) => [f.key, LAB_DEFAULTS[f.key]])), sizeBy: 'power' } : v === 'orbit' ? ORBIT : CLUSTERS)}
+            onPick={pickLayout}
           />
           <div style={{ ...small, marginBottom: 6 }}>
             {preset === 'clusters'
-              ? 'No rings: each connection pulls their circle round them, and a dot grows with everyone behind it.'
+              ? 'As Obsidian draws notes: each connection with a scanned circle is a hub, its circle round it, and everyone sized by their lines. Someone in several circles sits between those hubs, linked to each.'
               : preset === 'orbit'
                 ? 'Each tier on its own orbit, S nearest you, with each connection’s circle tucked in behind them. Drag a bridge and its circle follows.'
                 : 'Drag a dot to see what it pulls with it. Try Rings at 0 and Pull up.'}
           </div>
 
+          <button onClick={fit} title="Zoom so everyone on the map is on screen" style={{
+            width: '100%', padding: '5px 10px', marginBottom: 4, borderRadius: 6, fontSize: 11, fontWeight: 600, cursor: 'pointer',
+            border: '1px solid rgba(255,255,255,0.1)', background: 'rgba(255,255,255,0.04)', color: '#aab',
+          }}>⤢ Fit everyone on screen</button>
+
           <div style={heading}>Forces</div>
           {FORCES.map((f) => <Slider key={f.key} spec={f} value={lab[f.key]} />)}
+          <Slider spec={ORBIT_SLIDER} value={lab.orbit} />
+          {still && lab.orbit > 0 && (
+            <div style={{ ...small, marginTop: -4, marginBottom: 8 }}>Reduce Motion is on in your computer&rsquo;s settings, so the map holds still.</div>
+          )}
 
           <div style={heading}>Display</div>
           {DISPLAY.map((f) => <Slider key={f.key} spec={f} value={lab[f.key]} />)}
           <div style={{ fontSize: 11, color: '#aab', marginBottom: 4 }}>Size dots by</div>
-          <Choice value={lab.sizeBy} options={[['power', 'Power score'], ['reach', 'Who hangs off them']]} onPick={(v) => setLab({ sizeBy: v })} />
+          <Choice value={lab.sizeBy} options={[['power', 'Power score'], ['links', 'Links'], ['reach', 'Who hangs off them']]} onPick={(v) => setLab({ sizeBy: v })} />
           <div style={{ fontSize: 11, color: '#aab', marginBottom: 4 }}>Colour by</div>
           <Choice
             value={lab.colourBy}
@@ -162,7 +192,8 @@ export default function GalaxyLab() {
             </div>
           )}
           <div style={{ fontSize: 11, color: '#aab', marginBottom: 4 }}>Which names{lab.labels ? '' : ' (Names is off)'}</div>
-          <Choice value={lab.names === 'all' ? 'all' : 'key'} options={[['key', 'S + catalysts'], ['all', 'All 1st']]} onPick={(v) => setLab({ names: v })} />
+          <Choice value={lab.names === 'all' ? 'all' : 'key'} options={[['key', 'Hubs, S, catalysts'], ['all', 'All 1st']]} onPick={(v) => setLab({ names: v })} />
+          <div style={{ ...small, marginTop: -4, marginBottom: 8 }}>Zoomed out, only the hubs keep their names.</div>
           <label style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 11, color: '#aab', cursor: 'pointer' }}>
             <input type="checkbox" checked={lab.branch} onChange={(e) => setLab({ branch: e.target.checked })} style={{ accentColor: '#3498DB' }} />
             Light up a branch on hover

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { localPhoto } from '../../lib/photos';
+import { TIER_COLORS } from '../../lib/themes';
 
-const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 const TIERS = ['S', 'A', 'B', 'C', 'D'];
 
 export default function GridView({ connections, degree2 = [], onSelect, mode }) {
@@ -25,7 +25,7 @@ export default function GridView({ connections, degree2 = [], onSelect, mode })
     }).filter(Boolean).sort((a, b) => (b.sCount * 3 + b.aCount * 2 + b.total) - (a.sCount * 3 + a.aCount * 2 + a.total));
 
     return (
-      <div style={{ flex: 1, overflow: 'auto', padding: 20, background: '#0a0a1a' }}>
+      <div style={{ flex: 1, overflow: 'auto', padding: 20, background: 'var(--sd-page)' }}>
         <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))', gap: 12, maxWidth: 1200, margin: '0 auto' }}>
           {clusters.map(cl => (
             <div key={cl.bridge.id} onClick={() => onSelect && onSelect(cl.bridge)}
@@ -71,7 +71,7 @@ export default function GridView({ connections, degree2 = [], onSelect, mode })
                     width: 22, height: 22, borderRadius: '50%', fontSize: 8, fontWeight: 700,
                     background: localPhoto(m.profile_image_url) ? 'transparent' : (TIER_COLORS[m.tier] || '#333'),
                     color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    border: '2px solid #0a0a1a', marginLeft: i > 0 ? -6 : 0, position: 'relative', zIndex: 8 - i,
+                    border: '2px solid var(--sd-bg)', marginLeft: i > 0 ? -6 : 0, position: 'relative', zIndex: 8 - i,
                     overflow: 'hidden',
                   }}>
                     {localPhoto(m.profile_image_url) ? (
@@ -101,7 +101,7 @@ export default function GridView({ connections, degree2 = [], onSelect, mode })
   });
 
   return (
-    <div style={{ flex: 1, overflow: 'auto', padding: 20, background: '#0a0a1a' }}>
+    <div style={{ flex: 1, overflow: 'auto', padding: 20, background: 'var(--sd-page)' }}>
       <div style={{ maxWidth: 1200, margin: '0 auto' }}>
         {TIERS.map(tier => {
           const people = tierGroups[tier];

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

@@ -8,9 +8,10 @@
 
 import { useState } from 'react';
 import { limitQuestion, limitNote, SAFE_LIMITS } from '../../lib/search-risk';
+import { TIER_COLORS as THEME_TIERS } from '../../lib/themes';
 
 const LINE = '1px solid rgba(255,255,255,0.1)';
-const TIER = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
+const TIER = THEME_TIERS;   // the theme's dot colours (lib/themes.js)
 const DAILY = [25, 50, 100, 200, 500];
 const MONTHLY = [100, 250, 500, 1000, 0];
 const PROFILES = [10, 25, 50, 100];

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

@@ -1,8 +1,8 @@
 'use client';
 
 import { localPhoto } from '../../lib/photos';
+import { TIER_COLORS } from '../../lib/themes';
 
-const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 
 export default function ListView({ connections, degree2 = [], onSelect, mode }) {
   const isDegreesMode = mode === 'degrees';
@@ -26,7 +26,7 @@ export default function ListView({ connections, degree2 = [], onSelect, mode })
     }).filter(Boolean).sort((a, b) => b.value - a.value);
 
     return (
-      <div style={{ flex: 1, overflow: 'auto', padding: '16px 24px', background: '#0a0a1a' }}>
+      <div style={{ flex: 1, overflow: 'auto', padding: '16px 24px', background: 'var(--sd-page)' }}>
         <div style={{ maxWidth: 800, margin: '0 auto' }}>
           {/* Table header */}
           <div style={{
@@ -92,7 +92,7 @@ export default function ListView({ connections, degree2 = [], onSelect, mode })
   const maxScore = parseFloat(sorted[0]?.power_score) || 10;
 
   return (
-    <div style={{ flex: 1, overflow: 'auto', padding: '16px 24px', background: '#0a0a1a' }}>
+    <div style={{ flex: 1, overflow: 'auto', padding: '16px 24px', background: 'var(--sd-page)' }}>
       <div style={{ maxWidth: 800, margin: '0 auto' }}>
         {/* Table header */}
         <div style={{

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

@@ -8,8 +8,9 @@
 
 import Avatar from './Avatar';
 import { noteSubject } from '../../lib/notifications';
+import { TIER_COLORS as THEME_TIERS } from '../../lib/themes';
 
-const TIER = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
+const TIER = THEME_TIERS;   // the theme's dot colours (lib/themes.js)
 const VALUE = {
   S: 'S-tier: one of the most valuable people in your network to know.',
   A: 'A-tier: a strong person to know.',

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

@@ -16,8 +16,8 @@ export default function OnboardingGate({ children }) {
   return (
     <div style={{
       minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
-      background: '#0a0a1a', color: '#fff', padding: 24, textAlign: 'center',
-      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+      background: 'var(--sd-page)', color: '#fff', padding: 24, textAlign: 'center',
+      fontFamily: 'var(--sd-font)',
     }}>
       {!ready ? (
         <div style={{ fontSize: 18, fontWeight: 600 }}>Loading…</div>

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

@@ -12,8 +12,9 @@ import Link from 'next/link';
 import { buildQuest, XP_SEND, STAGE_SIZE } from '../../lib/quest';
 import { initialsFor } from '../../lib/tiers';
 import { localPhoto } from '../../lib/photos';
+import { TIER_COLORS as THEME_TIERS } from '../../lib/themes';
 
-const TIER = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
+const TIER = THEME_TIERS;   // the theme's dot colours (lib/themes.js)
 const LINE = '1px solid rgba(255,255,255,0.1)';
 
 function Face({ person, size = 36, ring }) {

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

@@ -25,8 +25,9 @@ import {
   buildCompanyIndex, companyLinks, companyOf, getSeniority, industryOf, industryByKey,
   INDUSTRIES, UNKNOWN_INDUSTRY, waysInto, isSenior,
 } from '../../lib/companies';
+import { TIER_COLORS as THEME_TIERS } from '../../lib/themes';
 
-const TIER = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
+const TIER = THEME_TIERS;   // the theme's dot colours (lib/themes.js)
 const LINE = '1px solid rgba(255,255,255,0.1)';
 const MAX_BUBBLES = 140;
 const ALL_INDUSTRIES = [...INDUSTRIES, UNKNOWN_INDUSTRY];
@@ -88,7 +89,7 @@ export function SidePanel({ open, onToggle, children }) {
   return (
     <aside style={{
       width: 300, flexShrink: 0, height: '100%', overflowY: 'auto', boxSizing: 'border-box', padding: '16px 14px',
-      borderRight: '1px solid rgba(52,152,219,0.15)', background: 'rgba(10,15,30,0.65)', fontSize: 13,
+      borderRight: '1px solid rgba(52,152,219,0.15)', background: 'var(--sd-panel)', fontSize: 13,
     }}>
       <button type="button" onClick={onToggle} style={{
         display: 'flex', alignItems: 'center', gap: 6, width: '100%', marginBottom: 14, padding: '6px 12px', borderRadius: 6, cursor: 'pointer',

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

@@ -22,8 +22,9 @@ import { useLivePhysics, HeatDefs, HeatGlow, PHYSICS_OFF } from './MapControls';
 import { makeGrid, shows, gridCounts } from '../../lib/tier-grid';
 import { heatBy, heatColour } from '../../lib/galaxy-lab';
 import { clusterStrength } from '../../lib/map-heat';
+import { TIER_COLORS as THEME_TIERS } from '../../lib/themes';
 
-const TIER = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
+const TIER = THEME_TIERS;   // the theme's dot colours (lib/themes.js)
 const LINE = '1px solid rgba(255,255,255,0.1)';
 const UNSCANNED = '#3a3f55';
 const MAX_BUBBLES = 400;

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

@@ -2,8 +2,8 @@
 
 import { useState } from 'react';
 import { localPhoto } from '../../lib/photos';
+import { TIER_COLORS } from '../../lib/themes';
 
-const TIER_COLORS = { S: '#FFD700', A: '#9B59B6', B: '#3498DB', C: '#95A5A6', D: '#BDC3C7' };
 const TIERS = ['S', 'A', 'B', 'C', 'D'];
 
 // Pyramid View — S-tier crown at top, tiers cascade down
@@ -33,7 +33,7 @@ export default function RingsView({ connections, degree2 = [], onSelect, mode })
     const nodeSize = { S: 36, A: 28, B: 22, C: 16, D: 12 };
 
     return (
-      <div style={{ flex: 1, overflow: 'auto', background: '#0a0a1a', padding: '20px 10px' }}>
+      <div style={{ flex: 1, overflow: 'auto', background: 'var(--sd-page)', padding: '20px 10px' }}>
         <div style={{ maxWidth: 1200, margin: '0 auto' }}>
           {clusters.map((cl, ci) => {
             // Group D2 by tier
@@ -163,7 +163,7 @@ export default function RingsView({ connections, degree2 = [], onSelect, mode })
   const nodeSize = { S: 44, A: 34, B: 26, C: 20, D: 16 };
 
   return (
-    <div style={{ flex: 1, overflow: 'auto', background: '#0a0a1a', padding: '20px 10px' }}>
+    <div style={{ flex: 1, overflow: 'auto', background: 'var(--sd-page)', padding: '20px 10px' }}>
       <div style={{ maxWidth: 1200, margin: '0 auto' }}>
         {TIERS.map((tier, tierIdx) => {
           const people = tierGroups[tier];

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

@@ -0,0 +1,85 @@
+'use client';
+
+// Dots along the header's bottom line while a scan runs: one for each page the
+// scanner reads, collecting from the left (Blake, 2026-10-03: "for every page
+// it collects then small dots start collecting on the left side of the line on
+// the lower header line giving that active feel"). The map's own colours, in
+// the order of the name's gradient: gold, purple, blue. The newest one glows;
+// a pulsing seed sits at the start until the first page is in. It's on every
+// tab, since the header is, and a click opens the Scan page.
+//
+// The count comes from the server (app/api/scraper/route.js counts "Page N..."
+// lines, and each fifty of your own connections list), so every tab and window
+// shows the same trail. A few seconds after the scan ends, it fades away.
+
+import { useEffect, useRef, useState } from 'react';
+import Link from 'next/link';
+import useScanner from './useScanner';
+
+const COLOURS = ['#FFD700', '#9B59B6', '#3498DB'];
+const STEP = 9;        // a dot and its gap
+const LINGER_MS = 4000;
+
+const CSS = `
+@keyframes trail-in { from { transform: scale(0); opacity: 0; } }
+@keyframes trail-pulse { 0%, 100% { opacity: 0.45; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.25); } }
+.scan-trail { transition: opacity 1.2s ease; }
+.scan-trail .dot { animation: trail-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3); }
+.scan-trail .dot.newest { box-shadow: 0 0 6px 1px currentColor; }
+.scan-trail .seed { animation: trail-pulse 1.4s ease-in-out infinite; }
+@media (prefers-reduced-motion: reduce) {
+  .scan-trail .dot, .scan-trail .seed { animation: none; }
+  .scan-trail { transition: none; }
+}`;
+
+/** @param {{ inset: number }} props  how far in from each side the header's padding puts the line's content */
+export default function ScanTrail({ inset }) {
+  const scan = useScanner();
+  const boxRef = useRef(null);
+  const [room, setRoom] = useState(60);
+  // What it last showed, kept on screen a moment after the scan ends: set as
+  // the scan's answer changes (during render, as React has it for state that
+  // follows a prop), and cleared by a timer once it stops.
+  const [shown, setShown] = useState({ on: false, pages: 0, label: '' });
+  const live = scan.running && !scan.pending;
+  const label = scan.target?.name ? `Scanning ${scan.target.name}` : 'Scanning';
+  if (live && (!shown.on || shown.pages !== (scan.pages || 0) || shown.label !== label)) {
+    setShown({ on: true, pages: scan.pages || 0, label });
+  }
+  useEffect(() => {
+    if (live || !shown.on) return undefined;
+    const timer = setTimeout(() => setShown((s) => ({ ...s, on: false })), LINGER_MS);
+    return () => clearTimeout(timer);
+  }, [live, shown.on]);
+
+  useEffect(() => {
+    const el = boxRef.current;
+    if (!el) return undefined;
+    const ro = new ResizeObserver(() => setRoom(Math.max(8, Math.floor(el.clientWidth / STEP) - 4)));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+
+  const { pages } = shown;
+  // As many as fit; past that, the oldest give way and a count says how many more.
+  const first = Math.max(0, pages - room);
+  const dots = [];
+  for (let i = first; i < pages; i++) dots.push(i);
+  const title = `${shown.label}: ${pages === 0 ? 'starting' : `${pages.toLocaleString('en-US')} page${pages === 1 ? '' : 's'} read`}. Open the Scan page`;
+  return (
+    <div ref={boxRef} aria-hidden={!shown.on} style={{ position: 'absolute', left: inset, right: inset, bottom: -4, height: 7, pointerEvents: 'none' }}>
+      <style>{CSS}</style>
+      <Link href="/setup" title={title} tabIndex={shown.on ? 0 : -1} className="scan-trail" style={{
+        position: 'absolute', left: 0, top: 0, height: 7, display: 'flex', alignItems: 'center', gap: STEP - 5,
+        pointerEvents: shown.on ? 'auto' : 'none', opacity: shown.on ? 1 : 0, textDecoration: 'none',
+      }}>
+        {first > 0 && <span style={{ fontSize: 9, fontWeight: 700, color: '#889', marginRight: 2, fontVariantNumeric: 'tabular-nums' }}>+{first.toLocaleString('en-US')}</span>}
+        {dots.map((i) => {
+          const c = COLOURS[i % COLOURS.length];
+          return <span key={i} className={`dot${i === pages - 1 ? ' newest' : ''}`} style={{ width: 5, height: 5, borderRadius: '50%', background: c, color: c, flexShrink: 0 }} />;
+        })}
+        {shown.on && <span className="seed" style={{ width: 5, height: 5, borderRadius: '50%', background: '#00ff88', flexShrink: 0 }} />}
+      </Link>
+    </div>
+  );
+}