six-degrees 0.6.0 → 0.7.0

package/lib/scraper-client.js

@@ -8,6 +8,7 @@
 // Now they all call this, which talks to /api/scraper on the app itself.
 
 import { runningNow } from './scan-state.js';
+import { CHROME_REFUSAL } from './scanner-setup.js';
 
 export async function scraperStatus() {
   const r = await fetch('/api/scraper');
@@ -88,9 +89,10 @@ export function notReadyMessage(status) {
   if (!c.dependencies) {
     // With no Python and nothing to download for this computer, Scan can't help yet.
     if (!c.python && !c.download) return 'No Python 3.10 to 3.14 is installed on this machine.';
-    return 'The scanner is not set up yet — open Scan to set it up.';
+    return 'The scanner is not set up yet. Open Scan to set it up.';
   }
-  if (!c.chrome) return 'Google Chrome is not installed.';
+  // The words the Scan page and the server use (lib/scanner-setup.js).
+  if (!c.chrome) return CHROME_REFUSAL;
   return null;
 }
 
@@ -121,7 +123,7 @@ const QUIET_MS = 5000;
 /** Before the first answer, and on the server, where nothing is asked. */
 export const SCANNER_UNKNOWN = Object.freeze({
   known: false, running: false, pending: false, action: null, target: null,
-  startedAt: null, progress: null, pages: 0, log: [], finished: [],
+  startedAt: null, progress: null, pages: 0, found: [], log: [], finished: [],
 });
 
 const listeners = new Set();
@@ -165,6 +167,7 @@ function take(s) {
     startedAt: running ? s.startedAt ?? null : null,
     progress: running ? s.progress ?? null : null,
     pages: running ? Number(s.pages) || 0 : 0,   // pages read so far (app/api/scraper/route.js)
+    found: running && Array.isArray(s.found) ? s.found.map(Number).filter(Number.isFinite) : [],   // people each page found
     budget: running ? s.budget ?? null : null,
     log: running && Array.isArray(s.log) ? s.log : [],
     finished,
@@ -271,6 +274,17 @@ export function isCircleScan(job) {
   return Boolean(job?.target) && ['bridge', 'rescrape', 'resume'].includes(job.action);
 }
 
+/**
+ * Does this job add people to circles on the map while it runs: one person's
+ * circle, or a batch of them (Map 2nd degree, every paused list)? The map
+ * looks again every so often while one does, with Bridge Chains open
+ * (app/page.js NetworkRefresh), so the Scan page's "Watch it fill in" shows
+ * the circle filling in, not as it was when the page opened.
+ */
+export function fillsCircles(job) {
+  return isCircleScan(job) || ['auto-bridge', 'auto-bridge-retry', 'resume-all'].includes(job?.action);
+}
+
 /**
  * Is this job, running or finished, a read of this person's circle? By id when
  * both have one: two connections can share a name. Else by name.

package/lib/search-risk.js

@@ -28,10 +28,14 @@ export function limitQuestion(from = {}, to = {}) {
   return null;
 }
 
-/** The note under the picker while the budget is risky; null when it isn't. */
-export function limitNote({ daily, monthly } = {}) {
+/**
+ * The note under the picker while the budget is risky; null when it isn't.
+ * `restriction: false` leaves out the 373 sentence, for Settings → LinkedIn
+ * usage when its own warning has just said it (lib/usage.js warningParts).
+ */
+export function limitNote({ daily, monthly } = {}, { restriction = true } = {}) {
   if (!riskyLimits({ daily, monthly })) return null;
-  const parts = [`A real account was restricted after ${RESTRICTED_AT} searches in 24 hours.`];
+  const parts = restriction ? [`A real account was restricted after ${RESTRICTED_AT} searches in 24 hours.`] : [];
   if (riskyDaily(daily)) parts.push(`${daily} a day can use up a free account's month in a day or two.`);
   if (monthly === 0) parts.push('With no monthly cap, nothing but the daily budget stops a long run.');
   return parts.join(' ');

package/lib/settings-client.js

@@ -1,17 +1,19 @@
 // Saving settings from the browser: POST /api/settings with only the settings
 // that change (lib/settings.js keeps the rest as stored). Scores → Your sector
 // and Tiers save through it, and so does the Scan page's question about your
-// field before the first scan (app/components/FieldStep.js).
+// field before the first scan (app/components/FieldStep.js), and the look and
+// the Galaxy's saved layouts (lib/synced-setting.js).
 
 /**
+ * `keepalive` lets a save sent as the page goes away still arrive.
  * @returns { settings, effects, error }: `settings` as saved, also when the
  *   save landed but the work it set in motion failed (lib/settings-effects.js);
  *   `effects` what that work reported; `error` a message fit to show, or null.
  */
-export async function saveSettings(patch) {
+export async function saveSettings(patch, { keepalive = false } = {}) {
   try {
     const r = await fetch('/api/settings', {
-      method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ settings: patch }),
+      method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ settings: patch }), keepalive,
     });
     const d = await r.json();
     return { settings: d.settings || null, effects: d.effects || null, error: r.ok ? null : d.error || 'Could not save.' };

package/lib/settings.js

@@ -13,6 +13,9 @@
 import { SECTOR_FOCUS_SETTING, FIELD_ASKED_SETTING } from './sector-focus.js';
 import { TIER_SCALE_SETTING } from './scoring.js';
 import { TITLE_RANKING_SETTING } from './title-ranking.js';
+import { SCAN_RISK_SETTING } from './scan-risk.js';
+import { THEME_SETTING } from './themes.js';
+import { GALAXY_LAYOUTS_SETTING } from './galaxy-layouts.js';
 
 export const SETTINGS = {
   // Scores → Your sector: industries whose companies count for more (lib/sector-focus.js).
@@ -23,6 +26,13 @@ export const SETTINGS = {
   tierScale: TIER_SCALE_SETTING,
   // Scores → Titles: how much each kind of title counts, and roles you're looking for (lib/title-ranking.js).
   titleRanking: TITLE_RANKING_SETTING,
+  // The Scan page's "I understand" before the first scan: when it was given (lib/scan-risk.js).
+  scanRiskAccepted: SCAN_RISK_SETTING,
+  // Settings → Appearance: the look (lib/themes.js). Here so it travels with a
+  // backup or a restore; the browser keeps a copy to paint with first (lib/theme-store.js).
+  theme: THEME_SETTING,
+  // The Galaxy's saved layouts (lib/galaxy-layouts.js), here for the same reason.
+  galaxyLayouts: GALAXY_LAYOUTS_SETTING,
 };
 
 const KEY = 'settings';

package/lib/social-store.js

@@ -14,8 +14,9 @@
 //
 // Two files so that turning Keep my messages off, or Forget it, deletes the
 // words by deleting one file, and so the everyday file the Galaxy and the
-// Social tab read stays small however many messages there are. "Save a copy of my network" carries
-// them when its Social box is ticked (lib/data-folder.js SOCIAL_FILE).
+// Social tab read stays small however many messages there are. "Export backup file…" carries
+// them when its Social box is ticked (lib/data-folder.js SOCIAL_FILE); the backups Six Degrees
+// makes by itself never do, so deleting them here deletes them everywhere (lib/backups.js).
 
 import { readFileSync, writeFileSync, renameSync, rmSync, statSync } from 'node:fs';
 import path from 'node:path';

package/lib/synced-setting.js

@@ -0,0 +1,46 @@
+// A choice kept with the network (lib/settings.js), so it travels with a
+// backup, an export and a restore, while the browser keeps a copy of it to
+// read before the page paints (the look) or before the server answers. The
+// look and the Galaxy's saved layouts work this way (lib/theme-store.js,
+// lib/galaxy-lab.js). No imports: pure, so the tests can pin it.
+
+/**
+ * What to use once the server has answered, and whether to save the browser's
+ * copy to it.
+ *
+ * - The server has one (`saved`): it wins. A restore or an import brings its
+ *   own look, and another window of the app (the Mac app and a browser tab
+ *   keep separate copies) may have changed it.
+ * - The server has none (null: never saved on this network, as for everyone
+ *   before this was kept there): the browser's copy stands, and is saved once,
+ *   unless it is only the default.
+ *
+ * @returns {{ use, save: boolean, changed: boolean }}
+ */
+export function reconcileSaved({ saved, cached, isDefault, same }) {
+  if (saved === null || saved === undefined) return { use: cached, save: !isDefault(cached), changed: false };
+  return { use: saved, save: false, changed: !same(saved, cached) };
+}
+
+/**
+ * Save at most once per `wait` ms, the last value winning: a colour picker
+ * changes the look many times a second while it's dragged. `flush()` sends a
+ * waiting save now (the page is going away: otherwise the network's older
+ * value would win when it opens again). `save(value, { now })` is told which.
+ */
+export function laterSaver(save, wait = 400) {
+  let timer = null;
+  let next;
+  const send = (now) => {
+    clearTimeout(timer);
+    timer = null;
+    Promise.resolve(save(next, { now })).catch(() => { /* kept in this browser; saved with the next change */ });
+  };
+  const later = (value) => {
+    next = value;
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => send(false), wait);
+  };
+  later.flush = () => { if (timer) send(true); };
+  return later;
+}

package/lib/theme-store.js

@@ -1,13 +1,17 @@
-// The theme in use, in this browser (lib/themes.js has what a theme is). Read
-// once when the page loads, before anything draws, so the dots, your dot and
-// the map's lines come out in its colours; changed from Settings → Appearance.
+// The theme in use (lib/themes.js has what a theme is). Read once when the
+// page loads, before anything draws, so the dots, your dot and the map's lines
+// come out in its colours; changed from Settings → Appearance.
 //
-// Kept in localStorage, like the Galaxy's sliders: a look belongs to the
-// screen it's on. The CSS variables are kept beside it, ready made, for the
-// script in app/layout.js that puts them on the page before it paints, so a
-// theme never flashes the standard colours first.
+// Saved with the network's settings (lib/settings.js 'theme'), so a backup, an
+// export or a restore carries the look with it. localStorage keeps a copy, the
+// one read before the page paints: the CSS variables are kept beside it, ready
+// made, for the script in app/layout.js that puts them on the page first, so a
+// theme never flashes the standard colours. Once the server answers
+// (app/components/ThemeLoader.js), its look wins (lib/synced-setting.js).
 
-import { cleanTheme, resolveTheme, themeVars, themeAttrs, TIER_COLORS, MAP_LOOK } from './themes.js';
+import { cleanTheme, resolveTheme, themeVars, themeAttrs, isLight, TIER_COLORS, MAP_LOOK } from './themes.js';
+import { saveSettings } from './settings-client.js';
+import { reconcileSaved, laterSaver } from './synced-setting.js';
 
 const KEY = 'six-degrees-theme';
 export const VARS_KEY = 'six-degrees-theme-vars';
@@ -24,12 +28,16 @@ function read() {
 function apply(next) {
   const theme = resolveTheme(next);
   Object.assign(TIER_COLORS, theme.tiers);
-  Object.assign(MAP_LOOK, { you: theme.you, lines: theme.lines, line: theme.line, bg: theme.bg });
+  const light = isLight(theme);
+  Object.assign(MAP_LOOK, { you: theme.you, lines: theme.lines, line: theme.line, bg: theme.bg, dots: theme.dots, light, text: light ? '#11141c' : '#ffffff' });
   if (typeof document === 'undefined') return;
   const vars = themeVars(next);
   const root = document.documentElement;
+  // A light look's words and borders go when a dark one comes: they fall back to the dark values.
+  for (const k of [...root.style]) if (k.startsWith('--sd-') && !(k in vars)) root.style.removeProperty(k);
   for (const [k, v] of Object.entries(vars)) root.style.setProperty(k, v);
   Object.assign(root.dataset, themeAttrs(next));
+  root.style.colorScheme = light ? 'light' : 'dark';
   try { localStorage.setItem(VARS_KEY, JSON.stringify({ vars, attrs: themeAttrs(next) })); } catch { /* it's applied anyway */ }
 }
 
@@ -48,13 +56,37 @@ if (typeof window !== 'undefined') {
 export const themeNow = () => choice;
 export const serverTheme = () => DEFAULT;
 
-export function setTheme(next) {
+const same = (a, b) => JSON.stringify(cleanTheme(a)) === JSON.stringify(cleanTheme(b));
+const saveLater = laterSaver((theme, { now }) => saveSettings({ theme }, { keepalive: now }));
+// A look picked just before a reload is saved on the way out, or the
+// network's older one would replace it as the page opens again.
+if (typeof window !== 'undefined') window.addEventListener('pagehide', () => saveLater.flush());
+
+function choose(next) {
   choice = cleanTheme(next);
   try { localStorage.setItem(KEY, JSON.stringify(choice)); } catch { /* this visit only */ }
   apply(choice);
   listeners.forEach((f) => f());
 }
 
+export function setTheme(next) {
+  choose(next);
+  saveLater(choice);
+}
+
+/**
+ * The look saved with the network (GET /api/settings 'theme'), once the page
+ * has it: it replaces this browser's copy, or, when the network has none yet,
+ * this browser's look is saved to it once.
+ */
+export function adoptSavedTheme(saved) {
+  const { use: next, save, changed } = reconcileSaved({
+    saved: saved == null ? null : cleanTheme(saved), cached: choice, isDefault: (t) => same(t, DEFAULT), same,
+  });
+  if (save) saveSettings({ theme: choice });
+  if (changed) choose(next);
+}
+
 export function watchTheme(f) {
   listeners.add(f);
   return () => listeners.delete(f);

package/lib/themes.js

@@ -10,8 +10,18 @@
 // (app/globals.css, html[data-backdrop]), and the dot colours the map draws with
 // (TIER_COLORS, a live object every view reads).
 //
-// Every theme is dark underneath, so the text, which is light everywhere, reads
-// on all of them: a theme changes what's behind it, not the words.
+// Dark or light is the background's own: a look whose background is light
+// (Daylight, Paper, or any colour you pick) turns the words, borders and
+// raised surfaces dark (lightTokens). The app's colours are CSS variables
+// whose fallbacks are the dark values they always had, so a dark look sets
+// none of them and draws exactly as before (Blake, 2026-10-03: "id like a
+// light mode").
+//
+// A look also has a way of drawing buttons (`buttons`, app/globals.css
+// html[data-buttons]) and the map's dots (`dots`, app/components/ForceGraph.js):
+// soft, flat, square, frosted, neon or bold; solid, droplet, flat, glow or plain
+// (Blake: "buttons look the same … like apple glass it will look like blurred
+// droplets and then for the obsidian it looks like obsidian with the nodes").
 //
 // What arrives from storage or a pasted theme code is untrusted: cleanTheme
 // keeps only #rrggbb colours, the listed choices and numbers in range, so
@@ -25,6 +35,8 @@ export const FONTS = {
   serif: 'ui-serif, "New York", Georgia, "Times New Roman", serif',
 };
 export const LINE_MODES = ['tier', 'one'];
+export const BUTTONS = ['soft', 'flat', 'square', 'frosted', 'neon', 'bold'];
+export const DOTS = ['solid', 'droplet', 'flat', 'glow', 'plain'];
 
 /**
  * A theme. `bg` is the colour behind everything, `bg2` the second colour of its
@@ -37,46 +49,68 @@ export const STANDARD = Object.freeze({
   id: 'standard', name: 'Standard', blurb: 'The original: deep navy, gold, purple and blue.',
   bg: '#0a0a1a', bg2: '#1a1440', backdrop: 'none', panel: '#0a0f1e', glass: 0.35, accent: '#3498db',
   tiers: Object.freeze({ S: '#ffd700', A: '#9b59b6', B: '#3498db', C: '#95a5a6', D: '#bdc3c7' }),
-  you: '#ffffff', lines: 'tier', line: '#5a6274', font: 'system',
+  you: '#ffffff', lines: 'tier', line: '#5a6274', font: 'system', buttons: 'soft', dots: 'solid',
 });
 
 export const THEMES = Object.freeze([
   STANDARD,
+  Object.freeze({
+    id: 'daylight', name: 'Daylight', blurb: 'Light, designed for it: white panels, ink text, deeper dots that read on white.',
+    bg: '#f4f6fb', bg2: '#dfe5f2', backdrop: 'none', panel: '#ffffff', glass: 0.25, accent: '#2563eb',
+    tiers: Object.freeze({ S: '#d99a00', A: '#8e44ad', B: '#2f80ed', C: '#6b7a86', D: '#a4afba' }),
+    you: '#111827', lines: 'tier', line: '#c5cbd8', font: 'system', buttons: 'soft', dots: 'solid',
+  }),
+  Object.freeze({
+    id: 'paper', name: 'Paper', blurb: 'Warm off-white and ink, like a printed chart. Flat, quiet, easy on the eyes.',
+    bg: '#f6f1e7', bg2: '#e6dcc8', backdrop: 'grid', panel: '#fbf8f1', glass: 0, accent: '#b4532a',
+    tiers: Object.freeze({ S: '#b7791f', A: '#7b4fa0', B: '#2c6e9b', C: '#7d8a80', D: '#b0a99a' }),
+    you: '#2b2118', lines: 'one', line: '#cbbfa8', font: 'serif', buttons: 'flat', dots: 'flat',
+  }),
   Object.freeze({
     id: 'contrast', name: 'High contrast', blurb: 'Pure black, the brightest dots, solid panels. Easiest to read.',
     bg: '#000000', bg2: '#000000', backdrop: 'none', panel: '#000000', glass: 0, accent: '#4cc9f0',
     tiers: Object.freeze({ S: '#ffe500', A: '#d08bff', B: '#4cc9f0', C: '#e6e6e6', D: '#ffffff' }),
-    you: '#ffffff', lines: 'tier', line: '#8a8a8a', font: 'system',
+    you: '#ffffff', lines: 'tier', line: '#8a8a8a', font: 'system', buttons: 'bold', dots: 'solid',
+    fg: Object.freeze(['#ffffff', '#f2f2f2', '#d9d9d9', '#bdbdbd', '#a0a0a0']), ink: '255, 255, 255',
   }),
   Object.freeze({
     id: 'obsidian', name: 'Obsidian', blurb: 'Graphite and violet, grey links: the note-taking app’s graph.',
     bg: '#1e1e1e', bg2: '#262626', backdrop: 'none', panel: '#262626', glass: 0.1, accent: '#8a7cf7',
     tiers: Object.freeze({ S: '#e0c25a', A: '#a88bfa', B: '#7aa2f7', C: '#9aa0a6', D: '#c7c7c7' }),
-    you: '#a88bfa', lines: 'one', line: '#5c5c5c', font: 'system',
+    you: '#a88bfa', lines: 'one', line: '#5c5c5c', font: 'system', buttons: 'flat', dots: 'flat',
+    fg: Object.freeze(['#dcddde', '#bababa', '#999999', '#777777', '#5c5c5c']), ink: '220, 221, 222',
   }),
   Object.freeze({
     id: 'glass', name: 'Glass', blurb: 'Frosted panels over slow colour: a heads-up display, see-through.',
-    bg: '#0b1020', bg2: '#5b21b6', backdrop: 'glow', panel: '#ffffff', glass: 0.9, accent: '#7dd3fc',
+    bg: '#0b1020', bg2: '#5b21b6', backdrop: 'glow', panel: '#12121e', glass: 0.9, accent: '#7dd3fc',
     tiers: Object.freeze({ S: '#fde68a', A: '#f0abfc', B: '#7dd3fc', C: '#cbd5e1', D: '#e2e8f0' }),
-    you: '#ffffff', lines: 'tier', line: '#94a3b8', font: 'rounded',
+    you: '#ffffff', lines: 'tier', line: '#94a3b8', font: 'rounded', buttons: 'frosted', dots: 'droplet',
+    fg: Object.freeze(['#ffffff', '#f1f4ff', '#cdd3e6', '#adb4cb', '#929ab2']), ink: '255, 255, 255',
   }),
   Object.freeze({
-    id: 'analyst', name: 'Analyst', blurb: 'A data terminal: a grid, monospace, colour-blind-safe dots.',
-    bg: '#0d1117', bg2: '#161b22', backdrop: 'grid', panel: '#161b22', glass: 0, accent: '#58a6ff',
-    tiers: Object.freeze({ S: '#e69f00', A: '#cc79a7', B: '#56b4e9', C: '#009e73', D: '#8b949e' }),
-    you: '#f0f6fc', lines: 'one', line: '#30363d', font: 'mono',
+    // An analysis tool's look (Blake, 2026-10-03: "the bare white background
+    // with the flat purely data based look that makes it feel less cluttered
+    // and more about the numbers"): a white canvas, flat grey panels, plain
+    // outlined dots in a colour-blind-safe palette (Okabe–Ito), black labels,
+    // thin grey lines, and nothing decorative (app/globals.css html[data-theme="analyst"]).
+    id: 'analyst', name: 'Analyst', blurb: 'A bare white canvas and flat panels: plain dots, black labels, just the network and its numbers.',
+    bg: '#ffffff', bg2: '#e8e8e8', backdrop: 'none', panel: '#f4f4f4', glass: 0, accent: '#2b6cb0',
+    tiers: Object.freeze({ S: '#d55e00', A: '#0072b2', B: '#009e73', C: '#cc79a7', D: '#8c8c8c' }),
+    you: '#111111', lines: 'one', line: '#9a9a9a', font: 'system', buttons: 'square', dots: 'plain',
   }),
   Object.freeze({
     id: 'space', name: 'Space', blurb: 'Your network as a star chart: deep black, a nebula, stars behind it all.',
     bg: '#04050d', bg2: '#2b1055', backdrop: 'stars', panel: '#0b0d1f', glass: 0.5, accent: '#a78bfa',
     tiers: Object.freeze({ S: '#ffd166', A: '#c77dff', B: '#4cc9f0', C: '#adb5bd', D: '#6c757d' }),
-    you: '#ffffff', lines: 'tier', line: '#3a3f5c', font: 'system',
+    you: '#ffffff', lines: 'tier', line: '#3a3f5c', font: 'system', buttons: 'soft', dots: 'glow',
+    fg: Object.freeze(['#eef2ff', '#cdd5f0', '#9aa5c4', '#76809e', '#565f7c']), ink: '205, 218, 255',
   }),
   Object.freeze({
     id: 'synthwave', name: 'Synthwave', blurb: 'Neon on a purple horizon. For the larpers.',
     bg: '#1a0b2e', bg2: '#ff2a6d', backdrop: 'horizon', panel: '#24103f', glass: 0.4, accent: '#ff2a6d',
     tiers: Object.freeze({ S: '#ffe66d', A: '#ff2a6d', B: '#05d9e8', C: '#d1f7ff', D: '#8c7aa9' }),
-    you: '#ffffff', lines: 'tier', line: '#7a3b9e', font: 'rounded',
+    you: '#ffffff', lines: 'tier', line: '#7a3b9e', font: 'rounded', buttons: 'neon', dots: 'glow',
+    fg: Object.freeze(['#fff5ff', '#ecdcff', '#c6aae4', '#9e83c2', '#7b649f']), ink: '255, 220, 255',
   }),
 ]);
 
@@ -110,11 +144,27 @@ export function cleanTheme(raw) {
   if (BACKDROPS.includes(c.backdrop)) custom.backdrop = c.backdrop;
   if (Object.hasOwn(FONTS, c.font ?? '')) custom.font = c.font;
   if (LINE_MODES.includes(c.lines)) custom.lines = c.lines;
+  if (BUTTONS.includes(c.buttons)) custom.buttons = c.buttons;
+  if (DOTS.includes(c.dots)) custom.dots = c.dots;
   const glass = Number(c.glass);
   if (c.glass != null && Number.isFinite(glass)) custom.glass = Math.round(Math.min(1, Math.max(0, glass)) * 100) / 100;
   return { base, custom };
 }
 
+/**
+ * In lib/settings.js, so the look travels with a backup, an export and a
+ * restore. null until a look is saved on this network: the browser's own
+ * choice then stands and is saved once (lib/theme-store.js).
+ */
+export const THEME_SETTING = {
+  default: null,
+  parse(value) {
+    if (value === null) return null;
+    if (!value || typeof value !== 'object' || Array.isArray(value)) throw new Error('A look is a preset with your own changes on top.');
+    return cleanTheme(value);
+  },
+};
+
 /** The theme a choice comes to: its preset with your changes on top. */
 export function resolveTheme(choice) {
   const { base, custom } = cleanTheme(choice);
@@ -131,6 +181,34 @@ export function resolveTheme(choice) {
 const rgb = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
 const rgba = (hex, a) => `rgba(${rgb(hex).join(', ')}, ${a})`;
 
+/** a, moved t of the way to b. */
+const mix = (a, b, t) => `#${rgb(a).map((v, i) => Math.round(v + (rgb(b)[i] - v) * t).toString(16).padStart(2, '0')).join('')}`;
+
+/** How light a colour is, 0 to 1 (relative luminance). */
+export function luminance(hex) {
+  const lin = (c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+  const [r, g, b] = rgb(hex).map((v) => lin(v / 255));
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/** A light look: its background is light, whatever it's called. */
+export const isLight = (theme) => luminance(theme.bg) > 0.45;
+
+/**
+ * What a light look puts on top of the dark defaults: the overlays that raise a
+ * surface or draw a border turn to ink, the panels' dark wash to white, the
+ * words to five steps of ink, and the app's own colours to deeper shades that
+ * read as words on a light page (gold text on white disappears).
+ */
+function lightTokens() {
+  return {
+    '--sd-ink': '18, 22, 40',
+    '--sd-shade': '255, 255, 255',
+    '--sd-fg-1': '#11141c', '--sd-fg-2': '#2e3442', '--sd-fg-3': '#545b6b', '--sd-fg-4': '#747b8b', '--sd-fg-5': '#9aa0ad',
+    '--sd-gold': '#9a6b00', '--sd-blue': '#1f63b3', '--sd-orange': '#c2410c', '--sd-green': '#0b7a47',
+    '--sd-purple': '#6d3fa8', '--sd-cyan': '#0e7490', '--sd-coral': '#c2410c', '--sd-red': '#c0392b',
+  };
+}
+
 /**
  * The CSS variables a choice sets on the page. Every value is built here from
  * cleaned colours and numbers, never copied from what was saved.
@@ -138,25 +216,37 @@ const rgba = (hex, a) => `rgba(${rgb(hex).join(', ')}, ${a})`;
 export function themeVars(choice) {
   const t = resolveTheme(choice);
   const glass = Math.min(1, Math.max(0, Number(t.glass) || 0));
+  const preset = presetOf(t.id);
   return {
     '--sd-bg': t.bg,
     '--sd-bg2': t.bg2,
     '--sd-accent': t.accent,
-    // The side panels: the theme's tint, more see-through and more blurred the more glass.
-    '--sd-panel': rgba(t.panel, Math.round((0.92 - 0.82 * glass) * 100) / 100),
-    '--sd-panel-blur': `blur(${Math.round(8 + 28 * glass)}px) saturate(${(1 + 0.6 * glass).toFixed(2)})`,
-    // The header: clear, or frosted on a glass theme.
-    '--sd-header': glass >= 0.6 ? rgba(t.panel, 0.06) : 'transparent',
-    '--sd-header-blur': glass >= 0.6 ? 'blur(18px) saturate(1.4)' : 'none',
+    // The side panels: the theme's tint, more see-through and more blurred the
+    // more glass. Never clearer than about 40%: a panel full of words is
+    // Apple's "regular" glass, which keeps them readable, not the clear kind.
+    '--sd-panel': rgba(t.panel, Math.round((0.92 - 0.55 * glass) * 100) / 100),
+    '--sd-panel-blur': `blur(${Math.round(8 + 18 * glass)}px) saturate(${(1 + 0.9 * glass).toFixed(2)})`,
+    // The header: clear, or glass on a glass theme.
+    '--sd-header': glass >= 0.6 ? rgba(t.panel, 0.22) : 'transparent',
+    '--sd-header-blur': glass >= 0.6 ? 'blur(20px) saturate(1.8)' : 'none',
+    // A dark look's own words and overlays: Obsidian's greys, GitHub's for
+    // Analyst, brighter "vibrant" ones on Glass (lib/themes.js presets).
+    ...(!isLight(t) && preset.fg ? Object.fromEntries(preset.fg.map((c, i) => [`--sd-fg-${i + 1}`, c])) : {}),
+    ...(!isLight(t) && preset.ink ? { '--sd-ink': preset.ink } : {}),
     '--sd-font': FONTS[t.font] || FONTS.system,
     '--sd-tier-s': t.tiers.S, '--sd-tier-a': t.tiers.A, '--sd-tier-b': t.tiers.B, '--sd-tier-c': t.tiers.C, '--sd-tier-d': t.tiers.D,
+    ...(isLight(t) ? lightTokens() : {}),
+    // Cards, pickers, tooltips and the notch, in the look's own colour (Standard keeps the navy they always had).
+    ...(t.id === 'standard' && !t.customised ? {} : isLight(t)
+      ? { '--sd-surface': 'rgba(255, 255, 255, 0.97)', '--sd-card': '#ffffff' }
+      : { '--sd-surface': rgba(mix(t.bg, '#ffffff', 0.06), glass >= 0.6 ? 0.82 : 0.96), '--sd-card': mix(t.bg, '#ffffff', 0.08) }),
   };
 }
 
 /** What the html element carries for the stylesheet: the theme and its backdrop. */
 export function themeAttrs(choice) {
   const t = resolveTheme(choice);
-  return { theme: t.id, backdrop: t.backdrop };
+  return { theme: t.id, backdrop: t.backdrop, mode: isLight(t) ? 'light' : 'dark', buttons: t.buttons, dots: t.dots };
 }
 
 // A theme code to share: the choice as base64 JSON, behind a short prefix.
@@ -183,4 +273,4 @@ export function decodeTheme(code) {
 // it stay as they are. On the server it holds Standard's.
 export const TIER_COLORS = { ...STANDARD.tiers };
 // The rest of what the map draws from a theme: your dot, and its lines.
-export const MAP_LOOK = { you: STANDARD.you, lines: STANDARD.lines, line: STANDARD.line, bg: STANDARD.bg };
+export const MAP_LOOK = { you: STANDARD.you, lines: STANDARD.lines, line: STANDARD.line, bg: STANDARD.bg, dots: STANDARD.dots, light: false, text: '#ffffff' };