six-degrees 0.6.0 → 0.8.0

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

@@ -76,7 +76,7 @@ export default function SectorPicker({ sectors, onChange, disabled, suggest }) {
     return (
       <Chip key={key} color={sectorByKey(key).color} on={on} blocked={!on && full} disabled={disabled} title={title}
         onClick={() => toggle(key)}>
-        {label}{note && <span style={{ fontWeight: 400, color: on ? '#dfe7e7' : '#8b9a9a' }}>{note}</span>}
+        {label}{note && <span style={{ fontWeight: 400, color: on ? 'var(--sd-fg-1, #dfe7e7)' : 'var(--sd-fg-3, #8b9a9a)' }}>{note}</span>}
       </Chip>
     );
   };
@@ -84,17 +84,17 @@ export default function SectorPicker({ sectors, onChange, disabled, suggest }) {
   return (
     <>
       <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 6 }}>
-        <span style={{ fontSize: 13, color: '#8b9a9a' }}>Your picks ({sectors.length} of {MAX_SECTORS}):</span>
-        {!sectors.length && <span style={{ fontSize: 13, color: '#667' }}>none yet</span>}
+        <span style={{ fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)' }}>Your picks ({sectors.length} of {MAX_SECTORS}):</span>
+        {!sectors.length && <span style={{ fontSize: 13, color: 'var(--sd-fg-4, #667)' }}>none yet</span>}
         {sectors.map((k) => {
           const s = sectorByKey(k);
           return (
             <button key={k} type="button" disabled={disabled} onClick={() => toggle(k)} aria-label={`Remove ${s.label}`}
               style={{
                 display: 'flex', alignItems: 'center', gap: 6, padding: '4px 10px', borderRadius: 999, fontSize: 12.5,
-                fontWeight: 600, color: '#fff', background: `${s.color}33`, border: `1px solid ${s.color}`, cursor: 'pointer',
+                fontWeight: 600, color: 'var(--sd-fg-1, #fff)', background: `${s.color}33`, border: `1px solid ${s.color}`, cursor: 'pointer',
               }}>
-              {s.label} <span aria-hidden="true" style={{ color: '#cfd8d8' }}>×</span>
+              {s.label} <span aria-hidden="true" style={{ color: 'var(--sd-fg-2, #cfd8d8)' }}>×</span>
             </button>
           );
         })}
@@ -102,7 +102,7 @@ export default function SectorPicker({ sectors, onChange, disabled, suggest }) {
 
       {suggest && <Suggestions state={suggest} chip={chip} />}
 
-      <label htmlFor="sector-search" style={{ display: 'block', fontSize: 13, color: '#8b9a9a', margin: '16px 0 6px' }}>
+      <label htmlFor="sector-search" style={{ display: 'block', fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)', margin: '16px 0 6px' }}>
         Find a sector
       </label>
       <div style={{ display: 'flex', gap: 8 }}>
@@ -110,8 +110,8 @@ export default function SectorPicker({ sectors, onChange, disabled, suggest }) {
           placeholder="Try dentist, bakery or Stripe"
           autoComplete="off" spellCheck={false}
           style={{
-            flex: 1, minWidth: 0, padding: '8px 12px', borderRadius: 7, fontSize: 14, color: '#fff',
-            background: 'rgba(255,255,255,0.05)', border: LINE, outline: 'none',
+            flex: 1, minWidth: 0, padding: '8px 12px', borderRadius: 7, fontSize: 14, color: 'var(--sd-fg-1, #fff)',
+            background: 'rgba(var(--sd-ink, 255, 255, 255), 0.05)', border: LINE, outline: 'none',
           }} />
         {query && <Btn onClick={() => setQuery('')}>Clear</Btn>}
       </div>
@@ -142,7 +142,7 @@ export default function SectorPicker({ sectors, onChange, disabled, suggest }) {
                   {chip(g.key, g.label, { title: 'The whole industry: companies its sectors place, or whose name or the well-known list says so' })}
                   <button type="button" aria-expanded={isOpen} aria-controls={`sectors-${g.key}`} onClick={() => flip(g.key)}
                     style={{
-                      padding: '4px 6px', fontSize: 12.5, color: inside ? '#9fd3ff' : '#8b9a9a', background: 'none', border: 'none',
+                      padding: '4px 6px', fontSize: 12.5, color: inside ? 'var(--sd-fg-2, #9fd3ff)' : 'var(--sd-fg-3, #8b9a9a)', background: 'none', border: 'none',
                       cursor: 'pointer',
                     }}>
                     {isOpen ? '▾' : '▸'} {plural(inIndustry.length, 'sector')}{inside ? ` · ${inside} picked` : ''}
@@ -171,8 +171,8 @@ function Chip({ color, on, blocked, disabled, title, onClick, children }) {
       style={{
         display: 'flex', alignItems: 'center', gap: 7, padding: '6px 12px', borderRadius: 999, maxWidth: '100%',
         fontSize: 12.5, fontWeight: 600, textAlign: 'left', cursor: blocked ? 'not-allowed' : 'pointer',
-        color: on ? '#fff' : blocked ? '#556' : '#b8c4c4',
-        background: on ? `${color}33` : 'rgba(255,255,255,0.04)',
+        color: on ? 'var(--sd-fg-1, #fff)' : blocked ? 'var(--sd-fg-5, #556)' : 'var(--sd-fg-2, #b8c4c4)',
+        background: on ? `${color}33` : 'rgba(var(--sd-ink, 255, 255, 255), 0.04)',
         border: on ? `1px solid ${color}` : LINE,
       }}>
       <span style={{ width: 8, height: 8, borderRadius: '50%', background: color, opacity: blocked ? 0.4 : 1, flexShrink: 0 }} />
@@ -190,7 +190,7 @@ function Suggestions({ state, chip }) {
   if (!state.list.length) return <Body style={note}>None of the list&rsquo;s sectors stands out among the people you&rsquo;ve scanned yet.</Body>;
   return (
     <div style={{ marginTop: 14 }}>
-      <div style={{ fontSize: 13, color: '#8b9a9a', marginBottom: 6 }}>Suggested from your network</div>
+      <div style={{ fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)', marginBottom: 6 }}>Suggested from your network</div>
       <div role="group" aria-label="Suggested from your network" style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
         {state.list.map((s) => chip(s.key, s.label, {
           note: `: ${plural(s.people, 'person', 'people')} at ${plural(s.companies, 'company', 'companies')}`,

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

@@ -51,16 +51,15 @@ export default function SectorSection({ onSaved } = {}) {
   const [result, setResult] = useState(null);
   const [loadError, setLoadError] = useState(null);
   const [suggest, setSuggest] = useState({ loading: true });
-  // A CSV import or the sample network held in this window. This section only
-  // renders in the browser (the page waits in OnboardingGate), so reading
-  // sessionStorage here can't disagree with a server render.
-  const [onScreen] = useState(() => (typeof window === 'undefined' ? null : csvNetworkSource()));
+  // A CSV import or the sample network open instead of yours.
+  const [onScreen, setOnScreen] = useState(null);
   const timer = useRef(null);
   const ticket = useRef(0);
   const jumped = useRef(false);
 
   useEffect(() => {
     let off = false;
+    csvNetworkSource().then((source) => { if (!off) setOnScreen(source); });
     fetch('/api/settings')
       .then((r) => r.json().then((d) => (r.ok ? d : Promise.reject(new Error(d.error || 'Could not load your sector.')))))
       .then((d) => {
@@ -154,13 +153,13 @@ export default function SectorSection({ onSaved } = {}) {
             suggest={suggest} />
 
           <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 8, marginTop: 14 }}>
-            <span style={{ fontSize: 13, color: '#8b9a9a' }}>How much:</span>
+            <span style={{ fontSize: 13, color: 'var(--sd-fg-3, #8b9a9a)' }}>How much:</span>
             {Object.keys(SECTOR_BONUS).map((s) => (
               <button key={s} type="button" aria-pressed={draft.strength === s} disabled={saving}
                 onClick={() => change({ ...draft, strength: s })}
                 style={{
                   padding: '5px 12px', borderRadius: 7, fontSize: 12.5, fontWeight: 600, cursor: 'pointer',
-                  color: draft.strength === s ? '#fff' : '#8b9a9a',
+                  color: draft.strength === s ? 'var(--sd-fg-1, #fff)' : 'var(--sd-fg-3, #8b9a9a)',
                   background: draft.strength === s ? 'rgba(52,152,219,0.25)' : 'transparent', border: LINE,
                 }}>
                 {STRENGTH_LABEL[s]} · +{SECTOR_BONUS[s]}
@@ -183,9 +182,9 @@ export default function SectorSection({ onSaved } = {}) {
           </div>
           {result && <Status tone={result.tone}>{result.text}</Status>}
 
-          <ul style={{ margin: '16px 0 0', paddingLeft: 18, fontSize: 12.5, color: '#778', lineHeight: 1.7 }}>
+          <ul style={{ margin: '16px 0 0', paddingLeft: 18, fontSize: 12.5, color: 'var(--sd-fg-4, #778)', lineHeight: 1.7 }}>
             <li>Tiers rank how reachable someone is through your network, not the people themselves.</li>
-            <li>A company score you set on <a href="#companies" style={{ color: '#3498DB' }}>Company scores</a>, below, always wins. Your sector never changes it.</li>
+            <li>A company score you set on <a href="#companies" style={{ color: 'var(--sd-blue, #3498DB)' }}>Company scores</a>, below, always wins. Your sector never changes it.</li>
             <li>If you scan highest tier first, people in your sectors come up sooner. Scanning newest first, the default, doesn&rsquo;t go by tier.</li>
             <li>
               An industry includes its sectors. It counts a company in any of its sectors (Healthcare &amp; Biotech counts a
@@ -204,8 +203,8 @@ export default function SectorSection({ onSaved } = {}) {
               Staffing, Smith CPA), and so does a kind of firm in a headline (staffing agency, law firm, SaaS).
             </li>
             {onScreen && (
-              <li style={{ color: '#FFD700' }}>
-                {onScreen === 'sample' ? 'The sample network' : 'The CSV import'} open in this window isn&rsquo;t changed by this, and
+              <li style={{ color: 'var(--sd-gold, #FFD700)' }}>
+                {onScreen === 'sample' ? 'The sample network open in this window' : 'The CSV import you have open'} isn&rsquo;t changed by this, and
                 isn&rsquo;t counted in the suggestions. Your sector applies to networks you&rsquo;ve scanned.
               </li>
             )}
@@ -233,7 +232,7 @@ function savedLine(focus, effect) {
 function Preview({ preview, draft }) {
   if (!preview) return null;
   if (preview.key !== focusFingerprint(draft)) return null;
-  const box = { marginTop: 12, padding: '10px 14px', borderRadius: 8, fontSize: 13, lineHeight: 1.6, border: LINE, background: 'rgba(255,255,255,0.03)', color: '#cfd8d8' };
+  const box = { marginTop: 12, padding: '10px 14px', borderRadius: 8, fontSize: 13, lineHeight: 1.6, border: LINE, background: 'rgba(var(--sd-ink, 255, 255, 255), 0.03)', color: 'var(--sd-fg-2, #cfd8d8)' };
   if (preview.loading) return <div style={box} aria-live="polite">Working out what would change…</div>;
   if (preview.error) return <Status tone="bad">{preview.error}</Status>;
   if (!preview.scored) {
@@ -247,13 +246,13 @@ function Preview({ preview, draft }) {
   return (
     <div style={box} aria-live="polite">
       <div>
-        <b style={{ color: '#fff' }}>If you save:</b> {cos ? `${cos}.` : 'No company changes score.'} {tierLine(preview.up, preview.down, false)}
+        <b style={{ color: 'var(--sd-fg-1, #fff)' }}>If you save:</b> {cos ? `${cos}.` : 'No company changes score.'} {tierLine(preview.up, preview.down, false)}
       </div>
       {preview.examples?.length > 0 && (
         <div style={{ marginTop: 6, display: 'flex', flexWrap: 'wrap', gap: '4px 12px', fontSize: 12.5 }}>
           {preview.examples.map((e, n) => (
             <span key={n} title={e.company || undefined}>
-              {e.name}{e.degree ? <span style={{ color: '#667' }}> ({DEGREE[e.degree] || `${e.degree}th`})</span> : null}{' '}
+              {e.name}{e.degree ? <span style={{ color: 'var(--sd-fg-4, #667)' }}> ({DEGREE[e.degree] || `${e.degree}th`})</span> : null}{' '}
               <b style={{ color: TIER_COLORS_CLASSIC[e.from] || '#889' }}>{e.from || '–'}</b>
               {' → '}
               <b style={{ color: TIER_COLORS_CLASSIC[e.to] || '#889' }}>{e.to}</b>
@@ -262,7 +261,7 @@ function Preview({ preview, draft }) {
         </div>
       )}
       {preview.companyExamples?.length > 0 && (
-        <div style={{ marginTop: 4, fontSize: 12, color: '#8b9a9a' }}>
+        <div style={{ marginTop: 4, fontSize: 12, color: 'var(--sd-fg-3, #8b9a9a)' }}>
           {preview.companyExamples.slice(0, 3).map((c) => `${c.name} ${c.from} → ${c.to}`).join(' · ')}
         </div>
       )}

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

@@ -35,14 +35,14 @@ export default function TierSection({ onSaved } = {}) {
   const [saving, setSaving] = useState(false);
   const [result, setResult] = useState(null);
   const [loadError, setLoadError] = useState(null);
-  // A CSV import or the sample network held in this window: neither is changed
-  // by this (a CSV is always graded on its own curve; the sample keeps its
-  // tiers). This section only renders in the browser (OnboardingGate), so
-  // reading sessionStorage here can't disagree with a server render.
-  const [onScreen] = useState(() => (typeof window === 'undefined' ? null : csvNetworkSource()));
+  // A CSV import or the sample network open instead of yours: neither is
+  // changed by this (a CSV is always graded on its own curve; the sample keeps
+  // its tiers).
+  const [onScreen, setOnScreen] = useState(null);
 
   useEffect(() => {
     let off = false;
+    csvNetworkSource().then((source) => { if (!off) setOnScreen(source); });
     fetch('/api/settings')
       .then((r) => r.json().then((d) => (r.ok ? d : Promise.reject(new Error(d.error || 'Could not load how tiers are graded.')))))
       .then((d) => { if (!off) setSaved(d.settings?.tierScale || 'curve'); })
@@ -74,8 +74,8 @@ export default function TierSection({ onSaved } = {}) {
             const on = saved === o.key;
             return (
               <button key={o.key} type="button" role="radio" aria-checked={on} disabled={saving} onClick={() => choose(o.key)} style={{
-                textAlign: 'left', padding: '12px 14px', borderRadius: 8, cursor: saving ? 'wait' : on ? 'default' : 'pointer', color: '#fff',
-                background: on ? 'rgba(155,89,182,0.14)' : 'rgba(255,255,255,0.03)',
+                textAlign: 'left', padding: '12px 14px', borderRadius: 8, cursor: saving ? 'wait' : on ? 'default' : 'pointer', color: 'var(--sd-fg-1, #fff)',
+                background: on ? 'rgba(155,89,182,0.14)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.03)',
                 border: on ? '1px solid rgba(155,89,182,0.6)' : LINE,
               }}>
                 <div style={{ fontSize: 14, fontWeight: 650 }}>{on ? '● ' : '○ '}{o.label}{o.key === 'curve' ? ' (recommended)' : ''}</div>
@@ -86,10 +86,10 @@ export default function TierSection({ onSaved } = {}) {
         </div>
       )}
       {onScreen && (
-        <Body style={{ color: '#FFD700', marginTop: 10 }}>
+        <Body style={{ color: 'var(--sd-gold, #FFD700)', marginTop: 10 }}>
           {onScreen === 'sample'
             ? 'The sample network open in this window keeps its own tiers (they’re the same either way).'
-            : 'The CSV import open in this window is always graded on its own curve.'}{' '}
+            : 'The CSV import you have open is always graded on its own curve.'}{' '}
           This applies to networks you&rsquo;ve scanned.
         </Body>
       )}

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

@@ -17,7 +17,7 @@ const POINTS = [10, 9.5, 9, 8.5, 8, 7.5, 7, 6.5, 6, 5.5, 5, 4.5, 4, 3, 2, 1, 0];
 const plural = (n, one, many) => `${n.toLocaleString()} ${n === 1 ? one : many}`;
 const select = {
   padding: '5px 8px', borderRadius: 6, fontSize: 12.5, cursor: 'pointer',
-  border: LINE, background: 'rgba(0,0,0,0.3)', color: '#fff',
+  border: LINE, background: 'rgba(var(--sd-shade, 0, 0, 0), 0.3)', color: 'var(--sd-fg-1, #fff)',
 };
 
 export default function TitleSection({ onSaved } = {}) {
@@ -87,7 +87,7 @@ export default function TitleSection({ onSaved } = {}) {
           <button key={p.key} type="button" onClick={() => pick(p)} aria-pressed={preset === p.key} title={p.note} style={{
             padding: '6px 12px', borderRadius: 16, fontSize: 12.5, fontWeight: 650, cursor: 'pointer',
             border: preset === p.key ? '1px solid rgba(155,89,182,0.7)' : LINE,
-            background: preset === p.key ? 'rgba(155,89,182,0.16)' : 'rgba(255,255,255,0.03)', color: preset === p.key ? '#fff' : '#bbb',
+            background: preset === p.key ? 'rgba(155,89,182,0.16)' : 'rgba(var(--sd-ink, 255, 255, 255), 0.03)', color: preset === p.key ? 'var(--sd-fg-1, #fff)' : 'var(--sd-fg-2, #bbb)',
           }}>{p.label}</button>
         ))}
       </div>
@@ -100,26 +100,26 @@ export default function TitleSection({ onSaved } = {}) {
         {RANKED_LEVELS.map((key) => {
           const mine = draft.points?.[key] != null;
           return [
-            <div key={`${key}-l`} style={{ fontSize: 13, color: mine ? '#fff' : '#ccc', fontWeight: mine ? 700 : 500 }}>{LEVELS[key].label}</div>,
+            <div key={`${key}-l`} style={{ fontSize: 13, color: mine ? 'var(--sd-fg-1, #fff)' : 'var(--sd-fg-2, #ccc)', fontWeight: mine ? 700 : 500 }}>{LEVELS[key].label}</div>,
             <select key={`${key}-s`} aria-label={`Points for ${LEVELS[key].label}`} value={pointsOf(key)} onChange={(e) => setPoints(key, Number(e.target.value))}
               style={{ ...select, borderColor: mine ? 'rgba(155,89,182,0.7)' : undefined }}>
               {POINTS.map((p) => <option key={p} value={p}>{p}</option>)}
             </select>,
-            <div key={`${key}-d`} style={{ fontSize: 11, color: '#667', minWidth: 70 }}>
-              {mine ? <button type="button" onClick={() => setPoints(key, LEVELS[key].points)} style={{ background: 'none', border: 'none', color: '#9b9bd0', cursor: 'pointer', fontSize: 11, padding: 0 }}>back to {LEVELS[key].points}</button> : 'as it comes'}
+            <div key={`${key}-d`} style={{ fontSize: 11, color: 'var(--sd-fg-4, #667)', minWidth: 70 }}>
+              {mine ? <button type="button" onClick={() => setPoints(key, LEVELS[key].points)} style={{ background: 'none', border: 'none', color: 'var(--sd-fg-3, #9b9bd0)', cursor: 'pointer', fontSize: 11, padding: 0 }}>back to {LEVELS[key].points}</button> : 'as it comes'}
             </div>,
           ];
         })}
       </div>
 
       {/* Roles you're looking for */}
-      <div style={{ marginTop: 18, fontSize: 13.5, fontWeight: 700, color: '#eee' }}>Roles you&rsquo;re looking for</div>
+      <div style={{ marginTop: 18, fontSize: 13.5, fontWeight: 700, color: 'var(--sd-fg-1, #eee)' }}>Roles you&rsquo;re looking for</div>
       <Body style={{ margin: '4px 0 10px' }}>
         Anyone whose title has these words counts what you give them, whatever their level: for outbound to one role, or hiring for it. &ldquo;Account executive&rdquo; at 10 puts every account executive you can reach near the top.
       </Body>
       <form onSubmit={(e) => { e.preventDefault(); addRole(); }} style={{ display: 'flex', gap: 8, flexWrap: 'wrap', alignItems: 'center' }}>
         <input ref={roleBox} value={role} onChange={(e) => setRole(e.target.value)} placeholder="e.g. head of growth, recruiter, founder"
-          maxLength={60} style={{ flex: '1 1 220px', padding: '7px 10px', borderRadius: 6, fontSize: 13, border: LINE, background: 'rgba(0,0,0,0.3)', color: '#fff' }} />
+          maxLength={60} style={{ flex: '1 1 220px', padding: '7px 10px', borderRadius: 6, fontSize: 13, border: LINE, background: 'rgba(var(--sd-shade, 0, 0, 0), 0.3)', color: 'var(--sd-fg-1, #fff)' }} />
         <select aria-label="Points for this role" value={rolePoints} onChange={(e) => setRolePoints(Number(e.target.value))} style={select}>
           {POINTS.map((p) => <option key={p} value={p}>{p}</option>)}
         </select>
@@ -130,10 +130,10 @@ export default function TitleSection({ onSaved } = {}) {
           {draft.roles.map((r) => (
             <span key={r.text} style={{
               display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 6px 4px 11px', borderRadius: 14, fontSize: 12.5,
-              border: '1px solid rgba(155,89,182,0.5)', background: 'rgba(155,89,182,0.12)', color: '#eee',
+              border: '1px solid rgba(155,89,182,0.5)', background: 'rgba(155,89,182,0.12)', color: 'var(--sd-fg-1, #eee)',
             }}>
-              {r.text} <b style={{ color: '#d2b4ff' }}>{r.points}</b>
-              <button type="button" onClick={() => dropRole(r.text)} aria-label={`Remove ${r.text}`} style={{ background: 'none', border: 'none', color: '#aaa', cursor: 'pointer', fontSize: 13 }}>✕</button>
+              {r.text} <b style={{ color: 'var(--sd-fg-2, #d2b4ff)' }}>{r.points}</b>
+              <button type="button" onClick={() => dropRole(r.text)} aria-label={`Remove ${r.text}`} style={{ background: 'none', border: 'none', color: 'var(--sd-fg-3, #aaa)', cursor: 'pointer', fontSize: 13 }}>✕</button>
             </span>
           ))}
         </div>
@@ -141,7 +141,7 @@ export default function TitleSection({ onSaved } = {}) {
 
       <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginTop: 16 }}>
         <Btn primary onClick={save} disabled={!dirty || saving}>{saving ? 'Rescoring…' : 'Save and rescore'}</Btn>
-        {dirty && <span style={{ fontSize: 12, color: '#999' }}>Not saved yet. Saving rescores everyone.</span>}
+        {dirty && <span style={{ fontSize: 12, color: 'var(--sd-fg-3, #999)' }}>Not saved yet. Saving rescores everyone.</span>}
       </div>
       {result && <Status tone={result.tone}>{result.text}</Status>}
     </Section>