six-degrees 0.6.0 → 0.8.0

package/.next/standalone/app/components/insights/parts.js

@@ -0,0 +1,239 @@
+'use client';
+
+// The small pieces the Insights tab is built from: tier chips with their
+// letter on them (C and D are two greys too close to tell apart by colour),
+// rarity tags, the 1st / 2nd chip, the person cell, cards and the line under
+// a number that says where it came from. Colours are the look's own: the
+// theme's dot colours (lib/themes.js TIER_COLORS, a live object) and the
+// --sd-* variables, so a light look reads as well as the dark ones.
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import Avatar from '../Avatar';
+import { TIER_COLORS, luminance } from '../../../lib/themes';
+import { RARITY } from '../../../lib/rarity';
+import { roleLine } from '../../../lib/insights-board';
+import { markRequested } from '../../../lib/requests-client';
+import ConnectChoice, { secondaryLook } from '../AutoConnect';
+
+export const fmt = (n) => Number(n || 0).toLocaleString('en-US');
+export const one = (x) => (Math.round(Number(x || 0) * 10) / 10).toFixed(1);
+export const pc = (x) => `${Math.round(Number(x) || 0)}%`;
+export const RARITY_BY_KEY = Object.fromEntries(RARITY.map((r) => [r.key, r]));
+export const LINE = 'rgba(var(--sd-ink, 255, 255, 255), 0.08)';
+export const SOFT_LINE = 'rgba(var(--sd-ink, 255, 255, 255), 0.05)';
+export const CARD_BG = 'rgba(var(--sd-ink, 255, 255, 255), 0.035)';
+
+export function useIsMobile() {
+  const [m, setM] = useState(false);
+  useEffect(() => {
+    const check = () => setM(window.innerWidth < 768);
+    check();
+    window.addEventListener('resize', check);
+    return () => window.removeEventListener('resize', check);
+  }, []);
+  return m;
+}
+
+/** Black or white, whichever reads on a colour. */
+export function inkOn(hex) {
+  try { return luminance(hex) > 0.36 ? '#000' : '#fff'; } catch { return '#000'; }
+}
+export const tierColor = (tier) => TIER_COLORS[tier] || '#888888';
+
+/** A tier as a filled chip with its letter. */
+export function TierChip({ tier, size = 20 }) {
+  if (!tier) return null;
+  const c = tierColor(tier);
+  return (
+    <span aria-label={`${tier} tier`} style={{
+      display: 'inline-flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0,
+      minWidth: size, height: size, padding: '0 4px', borderRadius: Math.round(size / 4),
+      background: c, color: inkOn(c), fontSize: Math.round(size * 0.56), fontWeight: 800, lineHeight: 1,
+    }}>{tier}</span>
+  );
+}
+
+/** "1st" or "2nd". */
+export function DegreeChip({ degree }) {
+  const first = degree === 1;
+  return (
+    <span style={{
+      fontSize: 10.5, fontWeight: 700, padding: '2px 6px', borderRadius: 4, letterSpacing: 0.2, flexShrink: 0, whiteSpace: 'nowrap',
+      background: first ? 'rgba(0,255,136,0.1)' : 'rgba(255,107,53,0.1)',
+      border: `1px solid ${first ? 'rgba(0,255,136,0.3)' : 'rgba(255,107,53,0.3)'}`,
+      color: first ? 'var(--sd-green, #7dffc0)' : 'var(--sd-orange, #ffab8a)',
+    }}>{first ? '1st' : '2nd'}</span>
+  );
+}
+
+/** How rare the way in is, and the count: "+" where it's the ways your scans saw (a floor). */
+export function RarityTag({ rarity, count = true, small = false }) {
+  if (!rarity) return null;
+  const r = RARITY_BY_KEY[rarity.key];
+  const title = rarity.from === 'linkedin'
+    ? `${fmt(rarity.count)} mutual connection${rarity.count === 1 ? '' : 's'}, LinkedIn’s own count`
+    : `${fmt(rarity.count)} way${rarity.count === 1 ? '' : 's'} in seen in your scans, which can only go up`;
+  return (
+    <span title={title} style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: small ? 11 : 11.5, color: 'var(--sd-fg-2, #b8c4c4)', whiteSpace: 'nowrap' }}>
+      <i className="sd-dot-html" style={{ width: 8, height: 8, borderRadius: '50%', background: r.color, flexShrink: 0 }} />
+      {r.label}
+      {count && <span style={{ color: 'var(--sd-fg-4, #6f7a88)', fontSize: 10.5 }}>{fmt(rarity.count)}{rarity.from === 'linkedin' ? '' : '+'}</span>}
+    </span>
+  );
+}
+
+/** Face, name, tier and the role their score is built on. */
+export function PersonCell({ row, size = 34, chip = true, sub }) {
+  const { title, company } = roleLine(row);
+  return (
+    <span style={{ display: 'flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
+      <Avatar person={row} size={size} tierColors={TIER_COLORS} />
+      <span style={{ display: 'flex', flexDirection: 'column', minWidth: 0 }}>
+        <b style={{ fontSize: 13.5, fontWeight: 650, color: 'var(--sd-fg-1, #fff)', ...ELLIPSIS }}>{row?.name || 'Someone'}</b>
+        <span style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11.5, color: 'var(--sd-fg-3, #8b9a9a)', minWidth: 0 }}>
+          {chip && <TierChip tier={row?.tier} size={15} />}
+          <span style={ELLIPSIS}>{sub ?? [title, company].filter(Boolean).join(' · ')}</span>
+        </span>
+      </span>
+    </span>
+  );
+}
+
+export const ELLIPSIS = { whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0 };
+
+/** The page's title, in the tab's own colours (plain ink on Analyst, which takes gradients off). */
+export const TITLE = {
+  margin: 0, fontSize: 34, fontWeight: 850, letterSpacing: -0.6, lineHeight: 1.1,
+  background: 'linear-gradient(135deg, var(--sd-gold, #FFD700) 10%, var(--sd-orange, #FF6B35) 60%, var(--sd-purple, #9B59B6))',
+  WebkitBackgroundClip: 'text', backgroundClip: 'text', WebkitTextFillColor: 'transparent',
+};
+
+/** A board's title and the one line under it. */
+export function Hero({ title, children, isMobile, right }) {
+  return (
+    <div style={{ display: 'flex', flexDirection: isMobile ? 'column' : 'row', justifyContent: 'space-between', alignItems: isMobile ? 'stretch' : 'flex-end', gap: isMobile ? 10 : 24, marginBottom: 16 }}>
+      <div style={{ minWidth: 0 }}>
+        <h1 style={{ ...TITLE, fontSize: isMobile ? 27 : 34 }}>{title}</h1>
+        <p style={{ margin: '5px 0 0', color: 'var(--sd-fg-2, #b8c4c4)', fontSize: isMobile ? 13 : 14, lineHeight: 1.45 }}>{children}</p>
+      </div>
+      {right}
+    </div>
+  );
+}
+
+/** A card, as the rail and the boards draw them. */
+export function Card({ children, style, dashed = false, id }) {
+  return (
+    <section id={id} style={{
+      border: dashed ? '1px dashed rgba(255,215,0,0.35)' : `1px solid ${LINE}`, borderRadius: 14,
+      background: dashed ? 'rgba(255,215,0,0.04)' : CARD_BG, padding: '13px 14px 10px', minWidth: 0, ...style,
+    }}>{children}</section>
+  );
+}
+
+/** A card's title, its line under it, and a link to its board. */
+export function CardHead({ title, sub, more, onMore }) {
+  return (
+    <>
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8 }}>
+        <h3 style={{ margin: 0, fontSize: 14, fontWeight: 750, color: 'var(--sd-fg-1, #fff)' }}>{title}</h3>
+        {more && <button type="button" onClick={onMore} style={LINK_BTN}>{more}</button>}
+      </div>
+      {sub && <div style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #8b9a9a)', margin: '2px 0 6px', lineHeight: 1.4 }}>{sub}</div>}
+    </>
+  );
+}
+
+export const LINK_BTN = { background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontSize: 11.5, color: 'var(--sd-blue, #3498DB)', whiteSpace: 'nowrap', fontWeight: 600 };
+
+/** Where a number came from, under it. */
+export function Src({ children, style }) {
+  if (!children) return null;
+  return <div style={{ fontSize: 11, color: 'var(--sd-fg-4, #6f7a88)', lineHeight: 1.5, marginTop: 6, ...style }}>{children}</div>;
+}
+
+/** A row in a rail card: rank, who, and a number on the right with what it counts. */
+export function MiniRow({ rank, left, value, valueColor, label, first }) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '6px 0', borderTop: first ? 'none' : `1px solid ${SOFT_LINE}` }}>
+      {rank != null && <span style={{ width: 14, fontSize: 11.5, color: 'var(--sd-fg-4, #6f7a88)', fontWeight: 700, flexShrink: 0 }}>{rank}</span>}
+      <span style={{ flex: 1, minWidth: 0 }}>{left}</span>
+      <span style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', textAlign: 'right', flexShrink: 0 }}>
+        <b style={{ fontSize: 15, fontWeight: 800, color: valueColor || 'var(--sd-fg-1, #fff)', fontVariantNumeric: 'tabular-nums' }}>{value}</b>
+        {label && <span style={{ fontSize: 10, color: 'var(--sd-fg-4, #6f7a88)', whiteSpace: 'nowrap' }}>{label}</span>}
+      </span>
+    </div>
+  );
+}
+
+/** A board that needs circles, on a network with none yet. */
+export function NeedsCircles({ source, compact = false }) {
+  const csv = source === 'csv';
+  return (
+    <div style={{ fontSize: compact ? 12 : 13, color: 'var(--sd-fg-2, #b8c4c4)', lineHeight: 1.5, padding: compact ? '4px 0 6px' : '6px 0' }}>
+      {csv
+        ? 'A CSV import is your connections only: LinkedIn’s export has no circles. Scan your own network to see who stands behind your connections.'
+        : 'Scan a few circles to see who stands behind your connections.'}
+      {!csv && source === 'own' && <> <Link href="/setup" style={{ color: 'var(--sd-green, #00ff88)', fontWeight: 700, textDecoration: 'none', whiteSpace: 'nowrap' }}>Open Scan →</Link></>}
+    </div>
+  );
+}
+
+const ACT = {
+  display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, padding: '6px 11px',
+  borderRadius: 7, whiteSpace: 'nowrap', textDecoration: 'none', cursor: 'pointer', flexShrink: 0,
+};
+const OUTLINE = { ...ACT, color: 'var(--sd-blue, #3498DB)', border: '1px solid rgba(52,152,219,0.4)', background: 'rgba(52,152,219,0.06)' };
+
+/** Their circle in Bridge Chains: the link every page uses (/?chain=<id>). */
+export function OpenCircle({ id, compact }) {
+  return <Link href={`/?chain=${encodeURIComponent(id)}`} style={{ ...OUTLINE, ...(compact ? { padding: '4px 8px', fontSize: 11 } : null) }}>Open circle</Link>;
+}
+
+/** The Scan page's "Scan one circle" for them (/setup?scan=<id>): it says the cost and asks first. */
+export function ScanCircle({ id, compact }) {
+  return <Link href={`/setup?scan=${encodeURIComponent(id)}`} style={{ ...OUTLINE, ...(compact ? { padding: '4px 8px', fontSize: 11 } : null) }} title="Opens the Scan page with them picked: it says what the scan costs and starts nothing until you press it">Scan circle</Link>;
+}
+
+/**
+ * Ask: what the person card's Connect does. Their LinkedIn profile opens in
+ * a new tab to send the request there, and it's marked sent through the
+ * connection who is your best way in (lib/requests-client.js), everywhere at once.
+ * On your own network Auto stands first, the better pick, and Ask steps back
+ * to an outline beside it, as everywhere else Connect is offered
+ * (components/AutoConnect.js; Blake, 2026-10-03: "wherever its available").
+ */
+export function AskButton({ row, bridgeId, asked, compact, canAuto = false }) {
+  if (asked) {
+    return <span title="A request is marked sent. The next check of your own connections notices when they accept." style={{ ...ACT, cursor: 'default', color: 'var(--sd-fg-4, #6f7a88)', border: `1px dashed ${LINE}`, ...(compact ? { padding: '4px 8px', fontSize: 11 } : null) }}>Asked</span>;
+  }
+  if (!row?.profile_url) return null;
+  const size = compact ? { padding: '4px 9px', fontSize: 11 } : null;
+  const ask = (second) => (
+    <a href={row.profile_url} target="_blank" rel="noopener noreferrer"
+      title="Opens their LinkedIn profile in a new tab to send the request there, and marks it sent here"
+      onClick={() => { markRequested(row, { bridgeId }).catch(() => {}); }}
+      style={second
+        ? { ...ACT, ...secondaryLook(compact ? 'row' : 'table'), ...size }
+        : { ...ACT, color: '#000', border: 'none', background: 'linear-gradient(135deg, #FF6B35, #FFD700)', ...size }}>
+      Ask
+    </a>
+  );
+  return <ConnectChoice person={row} canAuto={canAuto} size={compact ? 'row' : 'table'} connect={ask} />;
+}
+
+/** A horizontal bar made of parts: [{ value, color, label? }] over `max`. */
+export function Bars({ parts, max, height = 14, gap = 2 }) {
+  const total = Math.max(1, max || parts.reduce((t, p) => t + p.value, 0));
+  return (
+    <span style={{ display: 'flex', gap, height, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', borderRadius: 4, overflow: 'hidden', minWidth: 0, flex: 1 }}>
+      {parts.filter((p) => p.value > 0).map((p, i) => (
+        <span key={i} title={p.title} style={{
+          width: `${(100 * p.value) / total}%`, background: p.color, display: 'flex', alignItems: 'center', justifyContent: 'center',
+          fontSize: 10, fontWeight: 800, color: inkOn(p.ink || '#888888'), overflow: 'hidden', whiteSpace: 'nowrap',
+        }}>{p.label && (100 * p.value) / total >= 5 ? p.label : ''}</span>
+      ))}
+    </span>
+  );
+}

package/.next/standalone/app/components/settings/AppearanceSection.js

@@ -10,21 +10,23 @@
 
 import { useState, useSyncExternalStore } from 'react';
 import { Section, Body } from '../ui';
-import { THEMES, BACKDROPS, FONTS, TIER_KEYS, resolveTheme, presetOf, encodeTheme, decodeTheme } from '../../../lib/themes';
+import { THEMES, BACKDROPS, FONTS, BUTTONS, DOTS, TIER_KEYS, resolveTheme, presetOf, encodeTheme, decodeTheme, isLight } from '../../../lib/themes';
 import { themeNow, serverTheme, setTheme, watchTheme } from '../../../lib/theme-store';
 
 const BACKDROP_LABEL = { none: 'Plain', stars: 'Stars', grid: 'Grid', glow: 'Glow', horizon: 'Horizon' };
 const FONT_LABEL = { system: 'System', rounded: 'Rounded', mono: 'Mono', serif: 'Serif' };
 const TIER_NAME = { S: 'S tier', A: 'A tier', B: 'B tier', C: 'C tier', D: 'D tier' };
+const BUTTON_LABEL = { soft: 'Soft', flat: 'Flat', square: 'Square', frosted: 'Frosted glass', neon: 'Neon', bold: 'Bold outline' };
+const DOT_LABEL = { solid: 'Solid', droplet: 'Glass droplets', flat: 'Flat, like Obsidian', glow: 'Glowing', plain: 'Plain, outlined' };
 
-const label = { fontSize: 11, fontWeight: 700, color: '#778', letterSpacing: 0.6, textTransform: 'uppercase', margin: '16px 0 8px' };
+const label = { fontSize: 11, fontWeight: 700, color: 'var(--sd-fg-4, #778)', letterSpacing: 0.6, textTransform: 'uppercase', margin: '16px 0 8px' };
 
 /** A small map in a theme's colours: you, a ring of tiers, their circles, the backdrop behind. */
 export function ThemePreview({ theme, width = 168, height = 96 }) {
   const t = theme;
   const cx = width * 0.58;
   const cy = height / 2;
-  const id = `p-${t.id}-${t.customised ? 'c' : 'p'}`;
+  const id = `p-${t.id}-${t.customised ? 'c' : 'p'}-${t.dots}`;
   const glass = Math.min(1, Math.max(0, t.glass));
   const ring = TIER_KEYS.map((k, i) => {
     const a = -Math.PI / 2 + (i * 2 * Math.PI) / TIER_KEYS.length;
@@ -38,10 +40,18 @@ export function ThemePreview({ theme, width = 168, height = 96 }) {
         <radialGradient id={`${id}-glow`}><stop offset="0" stopColor={t.bg2} stopOpacity="0.8" /><stop offset="1" stopColor={t.bg2} stopOpacity="0" /></radialGradient>
         <radialGradient id={`${id}-glow2`}><stop offset="0" stopColor={t.accent} stopOpacity="0.55" /><stop offset="1" stopColor={t.accent} stopOpacity="0" /></radialGradient>
         <linearGradient id={`${id}-sun`} x1="0" y1="0" x2="0" y2="1"><stop offset="0.45" stopColor={t.bg2} stopOpacity="0" /><stop offset="1" stopColor={t.bg2} stopOpacity="0.45" /></linearGradient>
+        {/* The look's dots: a drop of glass, or a glow (lib/themes.js DOTS) */}
+        {TIER_KEYS.map((k) => (
+          <radialGradient key={k} id={`${id}-drop-${k}`} fx="34%" fy="30%">
+            <stop offset="0" stopColor="#fff" stopOpacity="0.95" /><stop offset="0.25" stopColor={t.tiers[k]} stopOpacity="0.9" />
+            <stop offset="0.75" stopColor={t.tiers[k]} stopOpacity="0.5" /><stop offset="1" stopColor={t.tiers[k]} stopOpacity="0.15" />
+          </radialGradient>
+        ))}
+        <filter id={`${id}-glow`} x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.6" result="b" /><feMerge><feMergeNode in="b" /><feMergeNode in="SourceGraphic" /></feMerge></filter>
       </defs>
       <rect width={width} height={height} fill={t.bg} />
       {t.backdrop === 'stars' && (
-        <g fill="#fff">
+        <g fill="var(--sd-fg-1, #fff)">
           <circle cx={width * 0.8} cy={height * 0.2} r={28} fill={`url(#${id}-glow)`} />
           {[[12, 10], [40, 70], [150, 14], [128, 80], [24, 44], [96, 8], [70, 88], [158, 52]].map(([x, y]) => <circle key={`${x}-${y}`} cx={x} cy={y} r={0.8} opacity={0.85} />)}
         </g>
@@ -67,7 +77,7 @@ export function ThemePreview({ theme, width = 168, height = 96 }) {
       )}
       {/* The filter panel, as see-through as the theme's glass */}
       <rect x={0} y={0} width={width * 0.24} height={height} fill={t.panel} fillOpacity={0.92 - 0.82 * glass} />
-      <rect x={width * 0.24} y={0} width={0.75} height={height} fill="#fff" fillOpacity={0.12} />
+      <rect x={width * 0.24} y={0} width={0.75} height={height} fill="var(--sd-fg-1, #fff)" fillOpacity={0.12} />
       {[0, 1, 2, 3, 4].map((i) => <rect key={i} x={6} y={12 + i * 14} width={width * 0.24 - 12} height={6} rx={3} fill={t.tiers[TIER_KEYS[i]]} fillOpacity={0.55} />)}
       {/* The map */}
       {ring.map((p) => <line key={`l${p.k}`} x1={cx} y1={cy} x2={p.x} y2={p.y} stroke={line(p.k)} strokeOpacity={0.55} strokeWidth={0.8} />)}
@@ -82,7 +92,13 @@ export function ThemePreview({ theme, width = 168, height = 96 }) {
           </g>
         );
       }))}
-      {ring.map((p) => <circle key={`d${p.k}`} cx={p.x} cy={p.y} r={p.k === 'S' ? 4.5 : 3.6} fill={t.tiers[p.k]} />)}
+      <g filter={t.dots === 'glow' ? `url(#${id}-glow)` : undefined}>
+        {ring.map((p) => (
+          <circle key={`d${p.k}`} cx={p.x} cy={p.y} r={p.k === 'S' ? 4.5 : 3.6}
+            fill={t.dots === 'droplet' ? `url(#${id}-drop-${p.k})` : t.tiers[p.k]}
+            stroke={t.dots === 'droplet' ? t.tiers[p.k] : t.dots === 'plain' ? '#2b2b2b' : 'none'} strokeOpacity={t.dots === 'plain' ? 0.75 : 0.5} strokeWidth={0.6} />
+        ))}
+      </g>
       <circle cx={cx} cy={cy} r={5.5} fill={t.you} stroke={t.accent} strokeWidth={1.2} />
     </svg>
   );
@@ -90,9 +106,9 @@ export function ThemePreview({ theme, width = 168, height = 96 }) {
 
 function Swatch({ name, value, onChange, title }) {
   return (
-    <label title={title || name} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px 6px 6px', borderRadius: 8, background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', cursor: 'pointer' }}>
+    <label title={title || name} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px 6px 6px', borderRadius: 8, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)', cursor: 'pointer' }}>
       <input type="color" value={value} onChange={(e) => onChange(e.target.value)} style={{ width: 28, height: 28, padding: 0, border: 'none', borderRadius: 6, background: 'none', cursor: 'pointer' }} />
-      <span style={{ fontSize: 12.5, color: '#cdd' }}>{name}</span>
+      <span style={{ fontSize: 12.5, color: 'var(--sd-fg-2, #cdd)' }}>{name}</span>
     </label>
   );
 }
@@ -103,9 +119,9 @@ function Pick({ options, value, onPick }) {
       {options.map(([v, text]) => (
         <button key={v} type="button" aria-pressed={value === v} onClick={() => onPick(v)} style={{
           padding: '6px 12px', borderRadius: 8, fontSize: 12.5, fontWeight: 600, cursor: 'pointer',
-          border: value === v ? '1px solid var(--sd-accent)' : '1px solid rgba(255,255,255,0.1)',
-          background: value === v ? 'color-mix(in srgb, var(--sd-accent) 18%, transparent)' : 'rgba(255,255,255,0.03)',
-          color: value === v ? '#fff' : '#99a',
+          border: value === v ? '1px solid var(--sd-accent)' : '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)',
+          background: value === v ? 'color-mix(in srgb, var(--sd-accent) 18%, transparent)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
+          color: value === v ? 'var(--sd-fg-1, #fff)' : 'var(--sd-fg-3, #99a)',
         }}>{text}</button>
       ))}
     </div>
@@ -135,6 +151,7 @@ export default function AppearanceSection() {
   return (
     <Section id="appearance" title="Appearance" intro="How the whole app looks: pick one of ours, then make it yours. It changes as you go, and stays in this browser.">
       <div style={label}>Looks</div>
+      <Body style={{ marginTop: -4, marginBottom: 10, fontSize: 12.5 }}>Daylight, Paper and Analyst are light; the rest are dark. Each has its own buttons and its own way of drawing the map&rsquo;s dots.</Body>
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(190px, 1fr))', gap: 10 }}>
         {THEMES.map((p) => {
           const on = choice.base === p.id;
@@ -143,34 +160,34 @@ export default function AppearanceSection() {
             <button key={p.id} type="button" aria-pressed={on} onClick={() => setTheme({ base: p.id, custom: {} })}
               title={on && theme.customised ? `${p.name}, with your changes. Click to go back to plain ${p.name}.` : p.blurb}
               style={{
-                textAlign: 'left', padding: 8, borderRadius: 12, cursor: 'pointer', color: '#fff',
-                border: on ? '2px solid var(--sd-accent)' : '1px solid rgba(255,255,255,0.1)',
-                background: on ? 'color-mix(in srgb, var(--sd-accent) 10%, transparent)' : 'rgba(255,255,255,0.03)',
+                textAlign: 'left', padding: 8, borderRadius: 12, cursor: 'pointer', color: 'var(--sd-fg-1, #fff)',
+                border: on ? '2px solid var(--sd-accent)' : '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.1)',
+                background: on ? 'color-mix(in srgb, var(--sd-accent) 10%, transparent)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
               }}>
               <ThemePreview theme={shown} width={172} height={96} />
               <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, margin: '8px 2px 2px' }}>
                 <span style={{ fontSize: 13.5, fontWeight: 700 }}>{p.name}</span>
                 {on && theme.customised && <span style={{ fontSize: 10.5, fontWeight: 700, color: 'var(--sd-accent)' }}>yours</span>}
               </div>
-              <div style={{ fontSize: 11.5, color: '#889', lineHeight: 1.4, margin: '0 2px' }}>{p.blurb}</div>
+              <div style={{ fontSize: 11.5, color: 'var(--sd-fg-3, #889)', lineHeight: 1.4, margin: '0 2px' }}>{p.blurb}</div>
             </button>
           );
         })}
       </div>
 
-      <div style={{ marginTop: 22, padding: '4px 16px 16px', borderRadius: 12, border: '1px solid rgba(255,255,255,0.08)', background: 'rgba(255,255,255,0.02)' }}>
+      <div style={{ marginTop: 22, padding: '4px 16px 16px', borderRadius: 12, border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.08)', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.02)' }}>
         <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, flexWrap: 'wrap' }}>
           <div style={{ ...label, flex: 1 }}>Make it yours{theme.customised ? '' : `: starting from ${presetOf(choice.base).name}`}</div>
           {theme.customised && (
             <button type="button" onClick={() => setTheme({ base: choice.base, custom: {} })} style={{
-              padding: '4px 10px', borderRadius: 8, fontSize: 11.5, cursor: 'pointer', border: '1px solid rgba(255,255,255,0.12)', background: 'none', color: '#aab',
+              padding: '4px 10px', borderRadius: 8, fontSize: 11.5, cursor: 'pointer', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.12)', background: 'none', color: 'var(--sd-fg-3, #aab)',
             }}>Back to plain {presetOf(choice.base).name}</button>
           )}
         </div>
 
         <div style={label}>Background</div>
         <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 10 }}>
-          <Swatch name="Colour" value={theme.bg} onChange={(v) => change({ bg: v })} title="Behind everything" />
+          <Swatch name={isLight(theme) ? 'Colour (light)' : 'Colour'} value={theme.bg} onChange={(v) => change({ bg: v })} title="Behind everything. A light colour makes the whole look light: dark words, dark borders" />
           <Swatch name="Second colour" value={theme.bg2} onChange={(v) => change({ bg2: v })} title="The backdrop's: the nebula, the grid, the glow or the sunset" />
           <Swatch name="Accent" value={theme.accent} onChange={(v) => change({ accent: v })} title="What's picked, and the backdrop's glow" />
         </div>
@@ -188,14 +205,20 @@ export default function AppearanceSection() {
           {theme.lines === 'one' && <Swatch name="Line colour" value={theme.line} onChange={(v) => change({ line: v })} />}
         </div>
 
+        <div style={label}>Buttons</div>
+        <Pick value={theme.buttons} options={BUTTONS.map((b) => [b, BUTTON_LABEL[b]])} onPick={(v) => change({ buttons: v })} />
+
+        <div style={label}>Dots on the map</div>
+        <Pick value={theme.dots} options={DOTS.map((d) => [d, DOT_LABEL[d]])} onPick={(v) => change({ dots: v })} />
+
         <div style={label}>Panels</div>
         <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 14 }}>
           <Swatch name="Tint" value={theme.panel} onChange={(v) => change({ panel: v })} title="The side panels' colour" />
-          <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5, color: '#cdd' }}>
+          <label style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5, color: 'var(--sd-fg-2, #cdd)' }}>
             Glass
             <input type="range" min={0} max={100} value={Math.round(theme.glass * 100)} onChange={(e) => change({ glass: Number(e.target.value) / 100 })}
               style={{ width: 160, accentColor: 'var(--sd-accent)' }} />
-            <span style={{ color: '#889', fontVariantNumeric: 'tabular-nums', width: 34 }}>{Math.round(theme.glass * 100)}%</span>
+            <span style={{ color: 'var(--sd-fg-3, #889)', fontVariantNumeric: 'tabular-nums', width: 34 }}>{Math.round(theme.glass * 100)}%</span>
           </label>
         </div>
 
@@ -206,18 +229,18 @@ export default function AppearanceSection() {
         <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
           <button type="button" onClick={copy} style={{
             padding: '7px 14px', borderRadius: 8, fontSize: 12.5, fontWeight: 700, cursor: 'pointer',
-            border: '1px solid var(--sd-accent)', background: 'color-mix(in srgb, var(--sd-accent) 16%, transparent)', color: '#fff',
+            border: '1px solid var(--sd-accent)', background: 'color-mix(in srgb, var(--sd-accent) 16%, transparent)', color: 'var(--sd-fg-1, #fff)',
           }}>Copy theme code</button>
           <input value={code} onChange={(e) => setCode(e.target.value)} placeholder="Paste a theme code (sd-theme:…)" spellCheck={false}
             onKeyDown={(e) => { if (e.key === 'Enter') paste(); }}
-            style={{ flex: '1 1 220px', minWidth: 0, padding: '7px 10px', borderRadius: 8, fontSize: 12, fontFamily: 'ui-monospace, Menlo, monospace', border: '1px solid rgba(255,255,255,0.12)', background: 'rgba(0,0,0,0.25)', color: '#dde' }} />
+            style={{ flex: '1 1 220px', minWidth: 0, padding: '7px 10px', borderRadius: 8, fontSize: 12, fontFamily: 'ui-monospace, Menlo, monospace', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.12)', background: 'rgba(var(--sd-shade, 0, 0, 0), 0.25)', color: 'var(--sd-fg-1, #dde)' }} />
           <button type="button" onClick={paste} disabled={!code.trim()} style={{
             padding: '7px 14px', borderRadius: 8, fontSize: 12.5, fontWeight: 600, cursor: code.trim() ? 'pointer' : 'default',
-            border: '1px solid rgba(255,255,255,0.12)', background: 'rgba(255,255,255,0.04)', color: code.trim() ? '#dde' : '#667',
+            border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.12)', background: 'rgba(var(--sd-ink, 255, 255, 255), 0.04)', color: code.trim() ? 'var(--sd-fg-1, #dde)' : 'var(--sd-fg-4, #667)',
           }}>Use it</button>
         </div>
         {note && <Body style={{ fontSize: 12, marginTop: 8 }}>{note}</Body>}
-        <Body style={{ fontSize: 11.5, color: '#667', marginTop: 8 }}>
+        <Body style={{ fontSize: 11.5, color: 'var(--sd-fg-4, #667)', marginTop: 8 }}>
           A code holds colours and choices only, nothing about your network.
         </Body>
       </div>