six-degrees 0.6.0 → 0.8.0

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

@@ -35,16 +35,16 @@ export default function StaleServerBanner() {
     >
       <span>
         You have newer code on disk ({info.sha}) than this server is running ({info.bootSha}).
-        Restart it to see the changes — <code style={{
-          background: 'rgba(0,0,0,0.16)', padding: '1px 6px', borderRadius: 4,
+        Restart it to see the changes: <code style={{
+          background: 'rgba(var(--sd-shade, 0, 0, 0), 0.16)', padding: '1px 6px', borderRadius: 4,
         }}>Ctrl-C</code> in the terminal, then <code style={{
-          background: 'rgba(0,0,0,0.16)', padding: '1px 6px', borderRadius: 4,
+          background: 'rgba(var(--sd-shade, 0, 0, 0), 0.16)', padding: '1px 6px', borderRadius: 4,
         }}>npm run dev</code>.
       </span>
       <button
         onClick={() => setInfo(null)}
         style={{
-          border: 'none', background: 'rgba(0,0,0,0.18)', color: '#1a1200',
+          border: 'none', background: 'rgba(var(--sd-shade, 0, 0, 0), 0.18)', color: '#1a1200',
           borderRadius: 6, padding: '3px 10px', fontWeight: 700, cursor: 'pointer',
         }}
       >Dismiss</button>

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

@@ -60,27 +60,27 @@ export default function TheirCircle({ person, connections = [], degree2 = [], ti
         <Label>Their circle</Label>
         {guess ? (
           <>
-            <div style={{ fontSize: 11.5, color: '#d8ccb0', lineHeight: 1.5, marginBottom: canScan ? 9 : 0 }}>
-              <b style={{ color: '#FFD700' }}>Their score is a guess.</b> {guess.reason}
+            <div style={{ fontSize: 11.5, color: 'var(--sd-fg-2, #d8ccb0)', lineHeight: 1.5, marginBottom: canScan ? 9 : 0 }}>
+              <b style={{ color: 'var(--sd-gold, #FFD700)' }}>Their score is a guess.</b> {guess.reason}
               {canScan && <> Scanning {first}&apos;s circle shows who you can reach through them, and a strong
                 circle adds up to +2 to their score.</>}
             </div>
             {canScan && (
               <button type="button" onClick={toScanBox} style={{
                 width: '100%', padding: '8px 10px', borderRadius: 8, cursor: 'pointer', fontSize: 12, fontWeight: 700,
-                border: '1px solid rgba(255,215,0,0.4)', background: 'rgba(255,215,0,0.08)', color: '#FFD700',
+                border: '1px solid rgba(255,215,0,0.4)', background: 'rgba(255,215,0,0.08)', color: 'var(--sd-gold, #FFD700)',
               }}>
                 Scan their circle ↓
               </button>
             )}
           </>
         ) : canScan ? (
-          <div style={{ fontSize: 11, color: '#999', lineHeight: 1.5 }}>
+          <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #999)', lineHeight: 1.5 }}>
             Not scanned yet. Scan {first}&apos;s circle below to see who they know, and
             everyone you reach through them after that.
           </div>
         ) : (
-          <div style={{ fontSize: 11, color: '#999', lineHeight: 1.5 }}>Not scanned.</div>
+          <div style={{ fontSize: 11, color: 'var(--sd-fg-3, #999)', lineHeight: 1.5 }}>Not scanned.</div>
         )}
       </div>
     );
@@ -99,7 +99,7 @@ export default function TheirCircle({ person, connections = [], degree2 = [], ti
     />
   );
   const note = (
-    <div style={{ fontSize: 9.5, color: '#777', lineHeight: 1.45, marginTop: 6 }}>
+    <div style={{ fontSize: 9.5, color: 'var(--sd-fg-4, #777)', lineHeight: 1.45, marginTop: 6 }}>
       Rarity is how many mutual connections lead to someone. It never changes a score.{' '}
       {fromLinkedIn
         ? 'LinkedIn’s own count where a scan saved it; otherwise the ways in from your scans.'
@@ -146,7 +146,7 @@ function RingMap({ person, rings, facts, filter, tierColors, size, labels = fals
       role="img" aria-label={`${person.name}'s circle, ${rings.length} ${rings.length === 1 ? 'ring' : 'rings'}`}>
       {layout.rings.map((ring) => (
         <g key={ring.degree}>
-          <circle cx={c.x} cy={c.y} r={ring.radius} fill="none" stroke="rgba(255,255,255,0.07)" strokeWidth={0.6 * k} />
+          <circle cx={c.x} cy={c.y} r={ring.radius} fill="none" stroke="rgba(var(--sd-ink, 255, 255, 255), 0.07)" strokeWidth={0.6 * k} />
           <text x={c.x} y={c.y - ring.radius - ring.dotR - 3 * k} textAnchor="middle" fontSize={6.5 * k} fill="#666" fontWeight={700}>
             D{ring.degree}
           </text>
@@ -173,19 +173,19 @@ function RingMap({ person, rings, facts, filter, tierColors, size, labels = fals
               <circle cx={it.x} cy={it.y} r={r * 1.25} fill="none" stroke={color} strokeWidth={Math.max(0.5, r * 0.45)}
                 strokeDasharray={`${Math.max(0.6, r * 0.55)} ${Math.max(0.5, r * 0.45)}`} />
             ) : (
-              <circle cx={it.x} cy={it.y} r={r} fill={color}
+              <circle className="sd-dot" cx={it.x} cy={it.y} r={r} fill={color}
                 stroke={it.state === 'connected' ? GREEN : 'none'} strokeWidth={Math.max(0.6, r * 0.3)} />
             )}
             {labels && it.state === 'connected' && (
-              <text x={it.x} y={it.y - r - 3} textAnchor="middle" fontSize={9} fill={GREEN} fontWeight={700}>
+              <text x={it.x} y={it.y - r - 3} textAnchor="middle" fontSize={9} fill="var(--sd-green, #00ff88)" fontWeight={700}>
                 {String(it.row.name || '').split(' ')[0]}
               </text>
             )}
           </g>
         );
       }))}
-      <circle cx={c.x} cy={c.y} r={7 * k} fill={tierColors[person.tier] || '#888'} stroke="#fff" strokeWidth={0.8 * k} />
-      <text x={c.x} y={c.y + 2.4 * k} textAnchor="middle" fontSize={6.5 * k} fontWeight={800} fill={person.tier === 'S' ? '#000' : '#fff'}>
+      <circle className="sd-dot" cx={c.x} cy={c.y} r={7 * k} fill={tierColors[person.tier] || 'var(--sd-fg-3, #888)'} stroke="#fff" strokeWidth={0.8 * k} />
+      <text x={c.x} y={c.y + 2.4 * k} textAnchor="middle" fontSize={6.5 * k} fontWeight={800} fill={person.tier === 'S' ? '#000' : 'var(--sd-fg-1, #fff)'}>
         {String(person.name || '?').charAt(0)}
       </text>
     </svg>
@@ -194,11 +194,11 @@ function RingMap({ person, rings, facts, filter, tierColors, size, labels = fals
 
 function RingCounts({ rings, totals, shown }) {
   return (
-    <div style={{ fontSize: 10.5, color: '#aaa', marginTop: 6, lineHeight: 1.5 }}>
+    <div style={{ fontSize: 10.5, color: 'var(--sd-fg-3, #aaa)', marginTop: 6, lineHeight: 1.5 }}>
       {rings.map((r) => `D${r.degree} ${r.people.length.toLocaleString('en-US')}`).join(' · ')}
       {totals.connected > 0 && <span style={{ color: GREEN }}> · you added {totals.connected}</span>}
-      {totals.requested > 0 && <span style={{ color: '#FFD700' }}> · {totals.requested} {totals.requested === 1 ? 'request' : 'requests'} out</span>}
-      {shown != null && <span style={{ color: '#fff' }}> · {shown.toLocaleString('en-US')} shown</span>}
+      {totals.requested > 0 && <span style={{ color: 'var(--sd-gold, #FFD700)' }}> · {totals.requested} {totals.requested === 1 ? 'request' : 'requests'} out</span>}
+      {shown != null && <span style={{ color: 'var(--sd-fg-1, #fff)' }}> · {shown.toLocaleString('en-US')} shown</span>}
     </div>
   );
 }
@@ -206,8 +206,8 @@ function RingCounts({ rings, totals, shown }) {
 function Filters({ tierColors, byTier, byRarity, tiers, rarities, onTier, onRarity, onClear }) {
   const chip = (on, color) => ({
     height: 22, padding: '0 7px', borderRadius: 11, cursor: 'pointer', fontSize: 10, fontWeight: 700,
-    whiteSpace: 'nowrap', border: `1px solid ${on ? color : 'rgba(255,255,255,0.1)'}`,
-    background: on ? `${color}22` : 'rgba(255,255,255,0.03)', color: on ? color : '#999',
+    whiteSpace: 'nowrap', border: `1px solid ${on ? color : 'rgba(var(--sd-ink, 255, 255, 255), 0.1)'}`,
+    background: on ? `${color}22` : 'rgba(var(--sd-ink, 255, 255, 255), 0.03)', color: on ? color : 'var(--sd-fg-3, #999)',
   });
   return (
     <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 5 }}>
@@ -240,8 +240,8 @@ function Legend() {
     <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, marginRight: 12, whiteSpace: 'nowrap' }}>{swatch}{text}</span>
   );
   return (
-    <div style={{ fontSize: 10.5, color: '#999', marginTop: 8, lineHeight: 1.8 }}>
-      {item(<svg width="10" height="10"><circle cx="5" cy="5" r="4" fill="#FFD700" /></svg>, 'colour = tier')}
+    <div style={{ fontSize: 10.5, color: 'var(--sd-fg-3, #999)', marginTop: 8, lineHeight: 1.8 }}>
+      {item(<svg width="10" height="10"><circle cx="5" cy="5" r="4" fill="var(--sd-fg-2, #FFD700)" /></svg>, 'colour = tier')}
       {item(<svg width="12" height="12"><circle cx="6" cy="6" r="4" fill="#9B59B6" stroke={GREEN} strokeWidth="1.5" /></svg>, 'you added them')}
       {item(<svg width="12" height="12"><circle cx="6" cy="6" r="4.2" fill="none" stroke="#3498DB" strokeWidth="1.4" strokeDasharray="2 1.6" /></svg>, 'request sent')}
     </div>
@@ -260,18 +260,18 @@ function Enlarged({ title, onClose, children }) {
   }, [onClose]);
   return createPortal(
     <div role="dialog" aria-modal="true" aria-label={title} onClick={onClose} style={{
-      position: 'fixed', inset: 0, zIndex: 300, background: 'rgba(0,0,0,0.78)',
+      position: 'fixed', inset: 0, zIndex: 300, background: 'rgba(var(--sd-shade, 0, 0, 0), 0.78)',
       display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 16,
     }}>
       <div onClick={(e) => e.stopPropagation()} style={{
         width: 'min(720px, 100%)', maxHeight: '100%', overflowY: 'auto', boxSizing: 'border-box',
-        background: '#0f0c05', border: '1px solid rgba(255,215,0,0.18)', borderRadius: 14, padding: 16,
+        background: 'var(--sd-surface, #0f0c05)', border: '1px solid rgba(255,215,0,0.18)', borderRadius: 14, padding: 16,
       }}>
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 8 }}>
-          <div style={{ fontSize: 14, fontWeight: 800, color: '#fff' }}>{title}</div>
+          <div style={{ fontSize: 14, fontWeight: 800, color: 'var(--sd-fg-1, #fff)' }}>{title}</div>
           <button type="button" onClick={onClose} style={{ ...linkButton, fontSize: 12 }}>Close ✕</button>
         </div>
-        <div style={{ fontSize: 10.5, color: '#888', marginBottom: 8 }}>Click a dot to open that person.</div>
+        <div style={{ fontSize: 10.5, color: 'var(--sd-fg-3, #888)', marginBottom: 8 }}>Click a dot to open that person.</div>
         {children}
       </div>
     </div>,
@@ -290,12 +290,12 @@ function toScanBox() {
 }
 
 function Label({ children }) {
-  return <div style={{ fontSize: 10, fontWeight: 700, color: '#FF6B35', letterSpacing: 1, textTransform: 'uppercase', marginBottom: 6 }}>{children}</div>;
+  return <div style={{ fontSize: 10, fontWeight: 700, color: 'var(--sd-orange, #FF6B35)', letterSpacing: 1, textTransform: 'uppercase', marginBottom: 6 }}>{children}</div>;
 }
 
 const box = {
-  background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.07)',
+  background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)', border: '1px solid rgba(var(--sd-ink, 255, 255, 255), 0.07)',
   borderRadius: 10, padding: 10, marginBottom: 16,
 };
-const rowLabel = { fontSize: 9, color: '#666', textTransform: 'uppercase', letterSpacing: 0.5, width: 38, flexShrink: 0 };
-const linkButton = { background: 'none', border: 'none', color: '#888', fontSize: 10.5, fontWeight: 600, cursor: 'pointer', padding: 0 };
+const rowLabel = { fontSize: 9, color: 'var(--sd-fg-4, #666)', textTransform: 'uppercase', letterSpacing: 0.5, width: 38, flexShrink: 0 };
+const linkButton = { background: 'none', border: 'none', color: 'var(--sd-fg-3, #888)', fontSize: 10.5, fontWeight: 600, cursor: 'pointer', padding: 0 };

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

@@ -0,0 +1,42 @@
+// The SVG filters a look's dots use on every map but the Galaxy (which paints
+// its own, for thousands of dots): app/globals.css applies them to `.sd-dot`
+// under html[data-dots]. Any colour works, since they light the dot's own shape.
+//
+//   #sd-droplet  a drop of glass: lit from the top left (a specular highlight
+//                on the dot's own shape), a little see-through, with a bright rim
+//   #sd-glow     a soft light round the dot in its own colour
+//
+// Rendered once, in the layout, as a hidden <svg>.
+
+export default function ThemeDefs() {
+  return (
+    <svg width="0" height="0" aria-hidden="true" focusable="false" style={{ position: 'absolute', width: 0, height: 0, pointerEvents: 'none' }}>
+      <defs>
+        <filter id="sd-droplet" x="-30%" y="-30%" width="160%" height="160%" colorInterpolationFilters="sRGB">
+          <feGaussianBlur in="SourceAlpha" stdDeviation="1.4" result="soft" />
+          <feSpecularLighting in="soft" surfaceScale="4" specularConstant="1.15" specularExponent="24" lightingColor="#ffffff" result="light">
+            <feDistantLight azimuth="225" elevation="52" />
+          </feSpecularLighting>
+          <feComposite in="light" in2="SourceAlpha" operator="in" result="shine" />
+          <feComponentTransfer in="SourceGraphic" result="clear"><feFuncA type="linear" slope="0.72" /></feComponentTransfer>
+          <feMorphology in="SourceAlpha" operator="erode" radius="0.8" result="inner" />
+          <feComposite in="SourceAlpha" in2="inner" operator="out" result="edge" />
+          <feFlood floodColor="#ffffff" floodOpacity="0.55" />
+          <feComposite in2="edge" operator="in" result="rim" />
+          <feMerge>
+            <feMergeNode in="clear" />
+            <feMergeNode in="shine" />
+            <feMergeNode in="rim" />
+          </feMerge>
+        </filter>
+        <filter id="sd-glow" x="-80%" y="-80%" width="260%" height="260%" colorInterpolationFilters="sRGB">
+          <feGaussianBlur in="SourceGraphic" stdDeviation="2.4" result="b" />
+          <feMerge>
+            <feMergeNode in="b" />
+            <feMergeNode in="SourceGraphic" />
+          </feMerge>
+        </filter>
+      </defs>
+    </svg>
+  );
+}

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

@@ -2,8 +2,27 @@
 
 // Loads the theme store on every page (lib/theme-store.js), which applies the
 // theme in use before anything draws. It renders nothing.
-import '../../lib/theme-store';
+//
+// Then it asks the server once for the choices kept with the network (the
+// look, the Galaxy's saved layouts: lib/settings.js), which win over this
+// browser's copy of them: a restore or an import brings its own
+// (lib/synced-setting.js). The layouts' code loads only then.
+import { useEffect } from 'react';
+import { adoptSavedTheme } from '../../lib/theme-store';
 
 export default function ThemeLoader() {
+  useEffect(() => {
+    let live = true;
+    fetch('/api/settings', { cache: 'no-store' })
+      .then((r) => (r.ok ? r.json() : null))
+      .then(async (d) => {
+        if (!live || !d?.settings) return;
+        adoptSavedTheme(d.settings.theme);
+        const { adoptSavedLayouts } = await import('../../lib/galaxy-lab');
+        if (live) adoptSavedLayouts(d.settings.galaxyLayouts);
+      })
+      .catch(() => { /* no server (the sample, a static page): this browser's copy stands */ });
+    return () => { live = false; };
+  }, []);
   return null;
 }

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

@@ -75,25 +75,25 @@ function GitUpdates({ local }) {
       {done ? (
         <>
           <Body>
-            Updated to <Mono>{done.sha}</Mono> — “{done.subject}”.
+            Updated to <Mono>{done.sha}</Mono>: “{done.subject}”.
           </Body>
-          <Body style={{ color: done.needsRestart ? '#FFD700' : undefined }}>
+          <Body style={{ color: done.needsRestart ? 'var(--sd-gold, #FFD700)' : undefined }}>
             {done.needsRestart
-              ? 'Stop the app in your terminal and start it again — this update changed how it starts.'
+              ? 'Stop the app in your terminal and start it again: this update changed how it starts.'
               : 'The page will pick up most changes on its own. Restart the app if anything looks odd.'}
           </Body>
         </>
       ) : (
         <>
           <Body>
-            You are on <Mono>{local.sha}</Mono> — “{local.subject}”.
+            You are on <Mono>{local.sha}</Mono>: “{local.subject}”.
           </Body>
 
           {result && result.behind === 0 && <Status tone="ok">You&rsquo;re up to date.</Status>}
 
           {result && result.behind > 0 && (
             <>
-              <Body style={{ color: '#00ff88' }}>
+              <Body style={{ color: 'var(--sd-green, #00ff88)' }}>
                 {result.behind} update{result.behind === 1 ? '' : 's'} available.
               </Body>
               <pre style={pre}>{result.commits.join('\n')}</pre>
@@ -103,7 +103,7 @@ function GitUpdates({ local }) {
           {result?.dirty?.length > 0 && (
             <Body>
               Changed files here:{' '}
-              <Mono>{result.dirty.join(', ')}</Mono>. Commit or discard them first — this
+              <Mono>{result.dirty.join(', ')}</Mono>. Commit or discard them first: this
               will not throw away your work.
             </Body>
           )}
@@ -121,10 +121,10 @@ function GitUpdates({ local }) {
         </>
       )}
 
-      {error && <Body style={{ color: '#ff7676' }}>{error}</Body>}
+      {error && <Body style={{ color: 'var(--sd-red, #ff7676)' }}>{error}</Body>}
 
-      <Body style={{ fontSize: 12, color: '#667', marginTop: 12 }}>
-        Nothing is checked automatically and nothing about you is sent — this runs the
+      <Body style={{ fontSize: 12, color: 'var(--sd-fg-4, #667)', marginTop: 12 }}>
+        Nothing is checked automatically and nothing about you is sent: this runs the
         same <Mono>git fetch</Mono> and <Mono>git pull</Mono> you would type yourself.
       </Body>
     </Section>
@@ -262,7 +262,7 @@ function InstalledUpdates({ local }) {
       setCopied(true);
       setTimeout(() => setCopied(false), 1600);
     } catch {
-      setError('Could not copy — select the line and copy it by hand.');
+      setError('Could not copy. Select the line and copy it by hand.');
     }
   }
 
@@ -303,13 +303,13 @@ function InstalledUpdates({ local }) {
           {result?.latest && !result.newer && (
             <Status tone="ok">
               You&rsquo;re up to date: {result.latest.version} is the newest version.
-              {checkedAt && <span style={{ color: '#8b9a9a' }}> Checked at {checkedAt.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}.</span>}
+              {checkedAt && <span style={{ color: 'var(--sd-fg-3, #8b9a9a)' }}> Checked at {checkedAt.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' })}.</span>}
             </Status>
           )}
 
           {result?.newer && (
             <>
-              <Body style={{ color: '#00ff88' }}>Version {result.latest.version} is available.</Body>
+              <Body style={{ color: 'var(--sd-green, #00ff88)' }}>Version {result.latest.version} is available.</Body>
               {canInstall && (
                 <>
                   <Body>
@@ -376,15 +376,15 @@ function InstalledUpdates({ local }) {
         </>
       )}
 
-      {error && <Body style={{ color: '#ff7676' }}>{error}</Body>}
+      {error && <Body style={{ color: 'var(--sd-red, #ff7676)' }}>{error}</Body>}
 
-      <Body style={{ fontSize: 12, color: '#667', marginTop: 12 }}>
+      <Body style={{ fontSize: 12, color: 'var(--sd-fg-4, #667)', marginTop: 12 }}>
         Nothing is checked automatically. The button asks GitHub for the newest version
         number, and nothing about you is sent.
         {mac && ' Only a second click, Install and restart, downloads the new version.'}
       </Body>
       {local.testReleases && (
-        <Body style={{ fontSize: 12, color: '#FFD700', marginTop: 6 }}>
+        <Body style={{ fontSize: 12, color: 'var(--sd-gold, #FFD700)', marginTop: 6 }}>
           Test mode: releases are read from <Mono>{local.testReleases}</Mono> on this computer, not from GitHub.
         </Body>
       )}
@@ -424,10 +424,10 @@ function Progress({ job, restarting, slow, onCancel }) {
           : 'Preparing the new version…';
   return (
     <div role="status" aria-live="polite" style={{ marginTop: 12 }}>
-      <Body style={{ color: '#e8e8ee' }}>{text}</Body>
+      <Body style={{ color: 'var(--sd-fg-1, #e8e8ee)' }}>{text}</Body>
       {job.phase === 'downloading' && pct !== null && (
         <div role="progressbar" aria-valuemin={0} aria-valuemax={100} aria-valuenow={pct} aria-label="Download"
-          style={{ height: 6, borderRadius: 3, background: 'rgba(255,255,255,0.08)', marginTop: 10, overflow: 'hidden', maxWidth: 420 }}>
+          style={{ height: 6, borderRadius: 3, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.08)', marginTop: 10, overflow: 'hidden', maxWidth: 420 }}>
           <div style={{ width: `${pct}%`, height: '100%', background: 'linear-gradient(90deg, #9B59B6, #3498DB)', transition: 'width 0.4s ease' }} />
         </div>
       )}
@@ -448,9 +448,9 @@ function LastUpdate({ report }) {
   const when = new Date(report.at).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' });
   return (
     <Status tone={report.tone === 'ok' ? 'ok' : 'bad'}>
-      {report.text} <span style={{ color: '#8b9a9a' }}>({when})</span>
+      {report.text} <span style={{ color: 'var(--sd-fg-3, #8b9a9a)' }}>({when})</span>
       {report.tone === 'ok' && report.previous && (
-        <span style={{ display: 'block', fontSize: 12.5, color: '#8b9a9a', marginTop: 4 }}>
+        <span style={{ display: 'block', fontSize: 12.5, color: 'var(--sd-fg-3, #8b9a9a)', marginTop: 4 }}>
           A copy of the version you had is kept in <Mono>{report.previous}</Mono> until the next update.
           To go back to it, open that file and drag the app it gives you into your Applications folder.
         </span>
@@ -462,7 +462,7 @@ function LastUpdate({ report }) {
 function WhatChanged({ url }) {
   if (!url) return null;
   return (
-    <a href={url} target="_blank" rel="noreferrer" style={{ color: '#3498DB', fontSize: 13.5 }}>
+    <a href={url} target="_blank" rel="noreferrer" style={{ color: 'var(--sd-blue, #3498DB)', fontSize: 13.5 }}>
       What changed →
     </a>
   );
@@ -475,8 +475,8 @@ function Row({ children }) {
 }
 
 const pre = {
-  background: 'rgba(0,0,0,0.45)', border: LINE, borderRadius: 8, padding: 12,
-  margin: '8px 0 0', fontSize: 12, lineHeight: 1.7, color: '#b9c6c6',
+  background: 'rgba(var(--sd-shade, 0, 0, 0), 0.45)', border: LINE, borderRadius: 8, padding: 12,
+  margin: '8px 0 0', fontSize: 12, lineHeight: 1.7, color: 'var(--sd-fg-2, #b9c6c6)',
   fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
   whiteSpace: 'pre-wrap', maxHeight: 180, overflow: 'auto',
 };

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

@@ -3,7 +3,7 @@
 import { createContext, useContext, useState, useEffect } from 'react';
 import { getUserId, getUserName, setUser, hasUser } from '../../lib/user';
 import { IS_DEMO, DEMO_USER } from '../../lib/demo';
-import { hasCsvNetwork, CSV_USER } from '../../lib/csv';
+import { csvNetworkSource, CSV_USER } from '../../lib/csv';
 
 const UserContext = createContext({
   userId: null, userName: null, userProfile: null, ready: false,
@@ -33,18 +33,6 @@ export default function UserProvider({ children }) {
       setReady(true);
       return;
     }
-    // An imported CSV is a local, account-free session: adopt a local identity
-    // so the app opens straight into their network with no /api/users call.
-    if (hasCsvNetwork()) {
-      setUserId(CSV_USER.id);
-      setUserName(CSV_USER.name);
-      setUserProfile({
-        name: CSV_USER.name, headline: 'Imported from your LinkedIn CSV',
-        role: '', company: '', industry: '', sectors: [], goals: [], linkedin_url: '',
-      });
-      setReady(true);
-      return;
-    }
     // Who "you" are is decided by the server, from the data: the profile that
     // owns the network, or a new one on a fresh install (lib/profile.js).
     //
@@ -64,8 +52,7 @@ export default function UserProvider({ children }) {
       goals: u.goals || [],
       linkedin_url: u.linkedin_url || '',
     });
-
-    fetch('/api/users?me=1')
+    const ownProfile = () => fetch('/api/users?me=1')
       .then((r) => r.json())
       .then((data) => {
         const me = data.user;
@@ -83,6 +70,26 @@ export default function UserProvider({ children }) {
         }
       })
       .finally(() => setReady(true));
+
+    // A CSV import (kept in the data folder) or the sample open in this window
+    // is account-free: adopt a local identity so the app opens straight into
+    // it, with no /api/users call and no profile made for it.
+    let off = false;
+    csvNetworkSource().then((source) => {
+      if (off) return;
+      if (!source) {
+        ownProfile();
+        return;
+      }
+      setUserId(CSV_USER.id);
+      setUserName(CSV_USER.name);
+      setUserProfile({
+        name: CSV_USER.name, headline: 'Imported from your LinkedIn CSV',
+        role: '', company: '', industry: '', sectors: [], goals: [], linkedin_url: '',
+      });
+      setReady(true);
+    });
+    return () => { off = true; };
   }, []);
 
   const login = (id, name) => {