spec-gen-cli 1.1.0 → 1.2.0

package/src/viewer/components/FilterBar.jsx

@@ -1,12 +1,12 @@
-function FToggle({ active, onChange, label, badge, activeColor = '#7c6af7' }) {
+function FToggle({ active, onChange, label, badge, activeColor = 'var(--ac-primary)' }) {
   return (
     <button
       onClick={() => onChange(!active)}
       style={{
         background: active ? `${activeColor}1a` : 'transparent',
-        border: `1px solid ${active ? activeColor : '#1a1f38'}`,
+        border: `1px solid ${active ? activeColor : 'var(--bd-muted)'}`,
         borderRadius: 4,
-        color: active ? activeColor : '#3a3f5c',
+        color: active ? activeColor : 'var(--tx-ghost)',
         padding: '2px 8px',
         cursor: 'pointer',
         fontSize: 9,
@@ -20,10 +20,10 @@ function FToggle({ active, onChange, label, badge, activeColor = '#7c6af7' }) {
       {badge !== undefined && (
         <span
           style={{
-            background: '#0d0f22',
+            background: 'var(--bg-input)',
             borderRadius: 3,
             padding: '0 4px',
-            color: '#3a3f5c',
+            color: 'var(--tx-ghost)',
             fontSize: 8,
           }}
         >
@@ -49,13 +49,13 @@ export function FilterBar({ filters, setFilters, stats, clusterNames }) {
         gap: 10,
         flexWrap: 'wrap',
         padding: '7px 18px',
-        borderBottom: '1px solid #0f1224',
-        background: '#07091a',
+        borderBottom: '1px solid var(--bd-faint)',
+        background: 'var(--bg-base)',
         flexShrink: 0,
         fontSize: 9,
       }}
     >
-      <span style={{ color: '#2a2f4a', letterSpacing: '0.08em', fontWeight: 700 }}>FILTERS</span>
+      <span style={{ color: 'var(--tx-faint)', letterSpacing: '0.08em', fontWeight: 700 }}>FILTERS</span>
 
       <FToggle
         active={filters.hideOrphans}
@@ -74,7 +74,7 @@ export function FilterBar({ filters, setFilters, stats, clusterNames }) {
       />
 
       <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-        <span style={{ color: '#2a2f4a' }}>{'Score >='}</span>
+        <span style={{ color: 'var(--tx-faint)' }}>Score ≥</span>
         <input
           type="range"
           min={0}
@@ -82,20 +82,20 @@ export function FilterBar({ filters, setFilters, stats, clusterNames }) {
           step={5}
           value={filters.minScore}
           onChange={(e) => setFilters((f) => ({ ...f, minScore: +e.target.value }))}
-          style={{ width: 72, accentColor: '#7c6af7' }}
+          style={{ width: 72, accentColor: 'var(--ac-primary)' }}
         />
-        <span style={{ color: '#7c6af7', minWidth: 16 }}>{filters.minScore}</span>
+        <span style={{ color: 'var(--ac-primary)', minWidth: 16 }}>{filters.minScore}</span>
       </div>
 
       <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-        <span style={{ color: '#2a2f4a' }}>Top</span>
+        <span style={{ color: 'var(--tx-faint)' }}>Top</span>
         <select
           value={filters.topN}
           onChange={(e) => setFilters((f) => ({ ...f, topN: +e.target.value }))}
           style={{
-            background: '#0d0f22',
-            border: '1px solid #1a1f38',
-            color: '#c8cde8',
+            background: 'var(--bg-input)',
+            border: '1px solid var(--bd-muted)',
+            color: 'var(--tx-primary)',
             borderRadius: 4,
             padding: '2px 5px',
             fontSize: 9,
@@ -108,18 +108,18 @@ export function FilterBar({ filters, setFilters, stats, clusterNames }) {
             </option>
           ))}
         </select>
-        <span style={{ color: '#2a2f4a' }}>nodes</span>
+        <span style={{ color: 'var(--tx-faint)' }}>nodes</span>
       </div>
 
       <div style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
-        <span style={{ color: '#2a2f4a' }}>Cluster</span>
+        <span style={{ color: 'var(--tx-faint)' }}>Cluster</span>
         <select
           value={filters.cluster}
           onChange={(e) => setFilters((f) => ({ ...f, cluster: e.target.value }))}
           style={{
-            background: '#0d0f22',
-            border: '1px solid #1a1f38',
-            color: '#c8cde8',
+            background: 'var(--bg-input)',
+            border: '1px solid var(--bd-muted)',
+            color: 'var(--tx-primary)',
             borderRadius: 4,
             padding: '2px 5px',
             fontSize: 9,
@@ -149,9 +149,9 @@ export function FilterBar({ filters, setFilters, stats, clusterNames }) {
           }
           style={{
             background: 'none',
-            border: '1px solid #2a2f4a',
+            border: '1px solid var(--tx-faint)',
             borderRadius: 4,
-            color: '#3a3f5c',
+            color: 'var(--tx-ghost)',
             padding: '2px 7px',
             cursor: 'pointer',
             fontSize: 9,
@@ -162,13 +162,13 @@ export function FilterBar({ filters, setFilters, stats, clusterNames }) {
         </button>
       )}
 
-      <div style={{ marginLeft: 'auto', color: '#2a2f4a', display: 'flex', gap: 8 }}>
+      <div style={{ marginLeft: 'auto', color: 'var(--tx-faint)', display: 'flex', gap: 8 }}>
         <span>
-          <span style={{ color: '#7c6af7' }}>{stats.visible}</span>/
-          <span style={{ color: '#3a4060' }}>{stats.total}</span> nodes
+          <span style={{ color: 'var(--ac-primary)' }}>{stats.visible}</span>/
+          <span style={{ color: 'var(--tx-dim)' }}>{stats.total}</span> nodes
         </span>
         <span>
-          <span style={{ color: '#3ecfcf' }}>{stats.visibleEdges}</span> edges
+          <span style={{ color: 'var(--ac-teal)' }}>{stats.visibleEdges}</span> edges
         </span>
         {stats.orphanCount > 0 && !filters.hideOrphans && (
           <span style={{ color: '#f77c6a66' }}>{stats.orphanCount} orphans</span>

package/src/viewer/components/FlatGraph.jsx

@@ -12,6 +12,7 @@ export function FlatGraph({
   onSelect,
   refactorOnly,
   linkedIds,
+  noGlow,
 }) {
   const posRef = useRef(null);
   const prevKey = useRef(null);
@@ -68,16 +69,16 @@ export function FlatGraph({
     >
       <defs>
         <marker id="arr" markerWidth="6" markerHeight="6" refX="5" refY="2.5" orient="auto">
-          <path d="M0,0 L0,5 L6,2.5z" fill="#1e2340" />
+          <path d="M0,0 L0,5 L6,2.5z" style={{ fill: 'var(--ac-arrow)' }} />
         </marker>
         <marker id="arr-sel" markerWidth="6" markerHeight="6" refX="5" refY="2.5" orient="auto">
-          <path d="M0,0 L0,5 L6,2.5z" fill="#7c6af7" />
+          <path d="M0,0 L0,5 L6,2.5z" style={{ fill: 'var(--ac-primary)' }} />
         </marker>
         <marker id="arr-aff" markerWidth="6" markerHeight="6" refX="5" refY="2.5" orient="auto">
           <path d="M0,0 L0,5 L6,2.5z" fill="#f77c6a" />
         </marker>
         <marker id="arr-type" markerWidth="6" markerHeight="6" refX="5" refY="2.5" orient="auto">
-          <path d="M0,0 L0,5 L6,2.5z" fill="#2a2f5a" />
+          <path d="M0,0 L0,5 L6,2.5z" style={{ fill: 'var(--ac-edge-type)' }} />
         </marker>
         <filter id="glow">
           <feGaussianBlur stdDeviation="4" result="b" />
@@ -110,6 +111,7 @@ export function FlatGraph({
           const cy = pts.reduce((s, p) => s + p.y, 0) / pts.length;
           const r =
             Math.max(...pts.map((p) => Math.sqrt((p.x - cx) ** 2 + (p.y - cy) ** 2)), 20) + 28;
+          const clusterName = cn[0]?.cluster?.name ?? cid;
           return (
             <ellipse
               key={cid}
@@ -117,11 +119,13 @@ export function FlatGraph({
               cy={cy}
               rx={r}
               ry={r * 0.85}
-              fill={`${color}07`}
-              stroke={`${color}18`}
+              fill={noGlow ? 'none' : `${color}07`}
+              stroke={`${color}${noGlow ? '40' : '18'}`}
               strokeWidth={1}
               strokeDasharray="5 3"
-            />
+            >
+              <title>{clusterName} — {cn.length} file{cn.length !== 1 ? 's' : ''}</title>
+            </ellipse>
           );
         })}
 
@@ -138,6 +142,8 @@ export function FlatGraph({
             nr = 18;
           const isSel = e.source === selectedId || e.target === selectedId;
           const isAff = affectedIds.includes(e.target) && e.source === selectedId;
+          const isDimEdge = focusedIds.length > 0 && !isSel &&
+            !focusedIds.includes(e.source) && !focusedIds.includes(e.target);
           return (
             <line
               key={e.id}
@@ -145,9 +151,9 @@ export function FlatGraph({
               y1={s.y + ny * nr}
               x2={t.x - nx * (nr + 5)}
               y2={t.y - ny * (nr + 5)}
-              stroke={isSel ? '#7c6af7' : isAff ? '#f77c6a' : e.isType ? '#252a4a' : '#181c36'}
+              stroke={isSel ? 'var(--ac-primary)' : isAff ? '#f77c6a' : e.isType ? 'var(--ac-edge-type)' : 'var(--bd-edge)'}
               strokeWidth={isSel ? 1.5 : isAff ? 1.2 : 0.8}
-              strokeOpacity={isSel ? 0.9 : isAff ? 0.7 : e.isType ? 0.35 : 0.55}
+              strokeOpacity={isDimEdge ? 0.08 : isSel ? 0.9 : isAff ? 0.7 : e.isType ? 0.35 : 0.55}
               strokeDasharray={e.isType ? '4 2' : undefined}
               markerEnd={
                 isSel
@@ -189,8 +195,9 @@ export function FlatGraph({
               }}
               style={{ cursor: 'pointer' }}
               opacity={isDim ? 0.08 : isZeroScore ? 0.18 : 1}
-              filter={isSel ? 'url(#glow)' : isAff ? 'url(#glow-aff)' : undefined}
+              filter={noGlow ? undefined : isSel ? 'url(#glow)' : isAff ? 'url(#glow-aff)' : undefined}
             >
+              <title>{n.label}{n.path ? `\n${n.path}` : ''}</title>
               <circle
                 r={r + 4}
                 fill="none"
@@ -209,8 +216,8 @@ export function FlatGraph({
               )}
               <circle
                 r={r}
-                fill={isSel ? `${col}1a` : isAff ? `${col}0d` : '#0b0d1e'}
-                stroke={isSel ? col : isAff ? col : '#1c2038'}
+                fill={isSel ? `${col}1a` : isAff ? `${col}0d` : 'var(--bg-node)'}
+                stroke={isSel ? col : isAff ? col : 'var(--bd-edge)'}
                 strokeWidth={isSel ? 2.5 : isAff ? 2 : 0.8}
               />
               {n.isEntry && (
@@ -228,7 +235,7 @@ export function FlatGraph({
                 dominantBaseline="middle"
                 fontSize={7}
                 fontWeight={isSel ? 700 : 400}
-                fill={isSel ? '#fff' : isAff ? col : '#5a6090'}
+                fill={isSel ? 'var(--tx-node-sel)' : isAff ? col : 'var(--tx-node)'}
                 fontFamily="'JetBrains Mono',monospace"
                 style={{ pointerEvents: 'none' }}
               >
@@ -257,11 +264,11 @@ export function FlatGraph({
           style={{
             fontSize: 8,
             padding: '2px 6px',
-            background: '#0d0f22',
-            border: `1px solid ${transform.x !== 0 || transform.y !== 0 || transform.k !== 1 ? '#7c6af7' : '#1a1f38'}`,
+            background: 'var(--bg-input)',
+            border: `1px solid ${transform.x !== 0 || transform.y !== 0 || transform.k !== 1 ? 'var(--ac-primary)' : 'var(--bd-muted)'}`,
             borderRadius: 4,
             color:
-              transform.x !== 0 || transform.y !== 0 || transform.k !== 1 ? '#7c6af7' : '#2a2f4a',
+              transform.x !== 0 || transform.y !== 0 || transform.k !== 1 ? 'var(--ac-primary)' : 'var(--tx-faint)',
             cursor: 'pointer',
             fontFamily: "'JetBrains Mono',monospace",
             letterSpacing: '0.05em',

package/src/viewer/components/MicroComponents.jsx

@@ -1,6 +1,6 @@
 export function Hint({ children }) {
   return (
-    <div style={{ fontSize: 10, color: '#2a2f4a', lineHeight: 1.8, marginTop: 4 }}>{children}</div>
+    <div style={{ fontSize: 10, color: 'var(--tx-faint)', lineHeight: 1.8, marginTop: 4 }}>{children}</div>
   );
 }
 
@@ -9,7 +9,7 @@ export function SL({ children }) {
     <div
       style={{
         fontSize: 8,
-        color: '#3a3f5c',
+        color: 'var(--tx-ghost)',
         letterSpacing: '0.08em',
         marginTop: 12,
         marginBottom: 5,
@@ -29,11 +29,11 @@ export function Row({ label, value }) {
         justifyContent: 'space-between',
         alignItems: 'center',
         padding: '3px 0',
-        borderBottom: '1px solid #0e1025',
+        borderBottom: '1px solid var(--bd-dim)',
       }}
     >
-      <span style={{ fontSize: 9, color: '#3a4070' }}>{label}</span>
-      <span style={{ fontSize: 9, color: '#8890b0' }}>{value}</span>
+      <span style={{ fontSize: 9, color: 'var(--tx-dim)' }}>{label}</span>
+      <span style={{ fontSize: 9, color: 'var(--tx-secondary)' }}>{value}</span>
     </div>
   );
 }
@@ -58,20 +58,22 @@ export function Chip({ color, children }) {
 
 export function KindBadge({ kind }) {
   const map = {
-    class: ['#a78bfa', '#1a1060'],
-    function: ['#4ecdc4', '#00301a'],
-    interface: ['#60a5fa', '#001a30'],
-    type: ['#f472b6', '#2a0a20'],
-    enum: ['#f5c518', '#2a1a00'],
+    class:     '#a78bfa',
+    function:  '#4ecdc4',
+    interface: '#60a5fa',
+    type:      '#f472b6',
+    enum:      '#f5c518',
+    const:     '#fb923c',
   };
-  const [c, bg] = map[kind] || ['#64748b', '#1a1a2a'];
+  const c = map[kind] || '#64748b';
   return (
     <span
       style={{
         fontSize: 7,
         padding: '1px 5px',
         borderRadius: 3,
-        background: bg,
+        background: `${c}18`,
+        border: `1px solid ${c}45`,
         color: c,
         minWidth: 44,
         textAlign: 'center',

package/src/viewer/utils/constants.js

@@ -14,6 +14,23 @@ export const CLUSTER_PALETTE = [
   '#ffb347',
 ];
 
+/** Darker variant of CLUSTER_PALETTE for light backgrounds — same hues, lower luminance. */
+export const CLUSTER_PALETTE_LIGHT = [
+  '#4a34d4',
+  '#0e8f8f',
+  '#c0412a',
+  '#1a9e50',
+  '#c08010',
+  '#b82090',
+  '#1a6ec0',
+  '#6e9800',
+  '#b05010',
+  '#4040c0',
+  '#c01060',
+  '#007a60',
+  '#b07000',
+];
+
 export const EXT_COLOR = {
   '.ts': '#4ecdc4',
   '.tsx': '#3ecfcf',

package/src/viewer/utils/graph-helpers.js

@@ -1,4 +1,6 @@
 import { CLUSTER_PALETTE } from './constants.js';
+export { CLUSTER_PALETTE } from './constants.js';
+export { CLUSTER_PALETTE_LIGHT } from './constants.js';
 
 export function parseSpecRequirements(mdText) {
   const reqs = {};
@@ -39,7 +41,7 @@ export function normalizePath(p) {
   return (p || '').replace(/\\/g, '/').replace(/^\/+/, '');
 }
 
-export function parseGraph(raw) {
+export function parseGraph(raw, palette = CLUSTER_PALETTE) {
   const clusterByNode = {};
   (raw.clusters || []).forEach((cl, ci) => {
     cl.files.forEach((fid) => {
@@ -47,7 +49,7 @@ export function parseGraph(raw) {
         name: cl.name,
         index: ci,
         id: cl.id,
-        color: CLUSTER_PALETTE[ci % CLUSTER_PALETTE.length],
+        color: palette[ci % palette.length],
       };
     });
   });
@@ -83,13 +85,15 @@ export function parseGraph(raw) {
     id: cl.id,
     name: cl.name,
     files: cl.files,
-    color: CLUSTER_PALETTE[ci % CLUSTER_PALETTE.length],
+    color: palette[ci % palette.length],
   }));
 
   return {
     nodes,
     edges,
     clusters,
+    structuralClusters: raw.structuralClusters || [],
+    directoryClusters: raw.directoryClusters || [],
     statistics: raw.statistics || {},
     rankings: raw.rankings || {},
   };

package/src/viewer/utils/graph-helpers.test.ts

@@ -0,0 +1,39 @@
+import { parseGraph } from './graph-helpers.js';
+
+describe('parseGraph', () => {
+  it('should parse structuralClusters and directoryClusters from raw data', () => {
+    const raw = {
+      nodes: [],
+      edges: [],
+      clusters: [],
+      structuralClusters: [
+        { id: 'cluster1', name: 'Structural Cluster 1', files: ['file1.js'], color: '#ff0000' },
+      ],
+      directoryClusters: [
+        { id: 'dir1', name: 'Directory Cluster 1', files: ['dir/file.js'], color: '#00ff00' },
+      ],
+      statistics: {},
+      rankings: {},
+    };
+
+    const result = parseGraph(raw);
+
+    expect(result.structuralClusters).toEqual(raw.structuralClusters);
+    expect(result.directoryClusters).toEqual(raw.directoryClusters);
+  });
+
+  it('should provide empty arrays for missing structuralClusters and directoryClusters', () => {
+    const raw = {
+      nodes: [],
+      edges: [],
+      clusters: [],
+      statistics: {},
+      rankings: {},
+    };
+
+    const result = parseGraph(raw);
+
+    expect(result.structuralClusters).toEqual([]);
+    expect(result.directoryClusters).toEqual([]);
+  });
+});

package/src/viewer/utils/themes.js

@@ -0,0 +1,170 @@
+/**
+ * Viewer themes — each theme is a map of CSS custom properties.
+ *
+ * The root <div> of InteractiveGraphViewer applies `theme.vars` as inline style,
+ * making all CSS variables available to every descendant via `var(--xxx)`.
+ */
+
+export const THEMES = {
+  space: {
+    label: '⬡ space',
+    vars: {
+      '--bg-base':         '#07091a',
+      '--bg-panel':        '#080a1c',
+      '--bg-raised':       '#0e1028',
+      '--bg-input':        '#0d0f22',
+      '--bg-hover':        '#131630',
+      '--bg-select':       '#181b38',
+      '--bg-deep':         '#080b1e',
+      '--bg-node':         '#0b0d1e',
+      '--bd-faint':        '#0f1224',
+      '--bd-muted':        '#1a1f38',
+      '--bd-dim':          '#0e1025',
+      '--bd-edge':         '#181c36',
+      '--tx-primary':      '#c8cde8',
+      '--tx-secondary':    '#8890b0',
+      '--tx-bright':       '#e0e4f0',
+      '--tx-muted':        '#6a70a0',
+      '--tx-dim':          '#3a4060',
+      '--tx-faint':        '#2a2f4a',
+      '--tx-ghost':        '#3a3f5c',
+      '--tx-node':         '#5a6090',
+      '--tx-node-sel':     '#ffffff',
+      '--ac-primary':      '#7c6af7',
+      '--ac-teal':         '#3ecfcf',
+      '--ac-edge-type':    '#252a4a',
+      '--ac-arrow':        '#1e2340',
+      '--ac-cluster-arr':  '#2a3060',
+    },
+  },
+
+  terminal: {
+    label: '▶ terminal',
+    vars: {
+      '--bg-base':         '#010d01',
+      '--bg-panel':        '#020e02',
+      '--bg-raised':       '#061206',
+      '--bg-input':        '#041004',
+      '--bg-hover':        '#0a1a0a',
+      '--bg-select':       '#0d200d',
+      '--bg-deep':         '#030e03',
+      '--bg-node':         '#040f04',
+      '--bd-faint':        '#071807',
+      '--bd-muted':        '#0f2f0f',
+      '--bd-dim':          '#061806',
+      '--bd-edge':         '#0d200d',
+      '--tx-primary':      '#80ee80',
+      '--tx-secondary':    '#50a050',
+      '--tx-bright':       '#c0ffc0',
+      '--tx-muted':        '#408040',
+      '--tx-dim':          '#285028',
+      '--tx-faint':        '#1a3a1a',
+      '--tx-ghost':        '#204020',
+      '--tx-node':         '#40704a',
+      '--tx-node-sel':     '#c0ffc0',
+      '--ac-primary':      '#4ade80',
+      '--ac-teal':         '#00d4aa',
+      '--ac-edge-type':    '#103020',
+      '--ac-arrow':        '#0d2010',
+      '--ac-cluster-arr':  '#143820',
+    },
+  },
+
+  midnight: {
+    label: '◈ midnight',
+    vars: {
+      '--bg-base':         '#000000',
+      '--bg-panel':        '#050505',
+      '--bg-raised':       '#0a0a0a',
+      '--bg-input':        '#080808',
+      '--bg-hover':        '#111111',
+      '--bg-select':       '#161616',
+      '--bg-deep':         '#060606',
+      '--bg-node':         '#090909',
+      '--bd-faint':        '#0e0e0e',
+      '--bd-muted':        '#1c1c1c',
+      '--bd-dim':          '#0c0c0c',
+      '--bd-edge':         '#141414',
+      '--tx-primary':      '#00d4e8',
+      '--tx-secondary':    '#007a88',
+      '--tx-bright':       '#80eeff',
+      '--tx-muted':        '#005060',
+      '--tx-dim':          '#003040',
+      '--tx-faint':        '#001a20',
+      '--tx-ghost':        '#002530',
+      '--tx-node':         '#004558',
+      '--tx-node-sel':     '#80eeff',
+      '--ac-primary':      '#00e5ff',
+      '--ac-teal':         '#00ff88',
+      '--ac-edge-type':    '#001828',
+      '--ac-arrow':        '#001020',
+      '--ac-cluster-arr':  '#001e30',
+    },
+  },
+
+  warm: {
+    label: '☀ warm',
+    vars: {
+      '--bg-base':         '#1c1711',
+      '--bg-panel':        '#221e17',
+      '--bg-raised':       '#2a2318',
+      '--bg-input':        '#261f14',
+      '--bg-hover':        '#302818',
+      '--bg-select':       '#38301e',
+      '--bg-deep':         '#201b11',
+      '--bg-node':         '#201a0e',
+      '--bd-faint':        '#2a2218',
+      '--bd-muted':        '#3a3020',
+      '--bd-dim':          '#281f14',
+      '--bd-edge':         '#302810',
+      '--tx-primary':      '#d4c59a',
+      '--tx-secondary':    '#9a8060',
+      '--tx-bright':       '#ede0c0',
+      '--tx-muted':        '#806840',
+      '--tx-dim':          '#605038',
+      '--tx-faint':        '#483820',
+      '--tx-ghost':        '#504030',
+      '--tx-node':         '#706040',
+      '--tx-node-sel':     '#ede0c0',
+      '--ac-primary':      '#e8a020',
+      '--ac-teal':         '#50b060',
+      '--ac-edge-type':    '#382808',
+      '--ac-arrow':        '#302408',
+      '--ac-cluster-arr':  '#402808',
+    },
+  },
+  light: {
+    label: '○ light',
+    vars: {
+      '--bg-base':         '#f4f5f9',
+      '--bg-panel':        '#eef0f6',
+      '--bg-raised':       '#ffffff',
+      '--bg-input':        '#ffffff',
+      '--bg-hover':        '#e8eaf2',
+      '--bg-select':       '#dde0ef',
+      '--bg-deep':         '#f0f1f8',
+      '--bg-node':         '#f8f9fd',
+      '--bd-faint':        '#dde0ec',
+      '--bd-muted':        '#8890c8',
+      '--bd-dim':          '#d0d4e8',
+      '--bd-edge':         '#6870b0',
+      '--tx-primary':      '#1a1c2e',
+      '--tx-secondary':    '#3a3f60',
+      '--tx-bright':       '#0a0c1a',
+      '--tx-muted':        '#505580',
+      '--tx-dim':          '#7880a8',
+      '--tx-faint':        '#9098b8',
+      '--tx-ghost':        '#a8aec8',
+      '--tx-node':         '#1a1f40',
+      '--tx-node-sel':     '#0a0c1a',
+      '--ac-primary':      '#5b4de0',
+      '--ac-teal':         '#0e9e9e',
+      '--ac-edge-type':    '#8890c8',
+      '--ac-arrow':        '#6870b0',
+      '--ac-cluster-arr':  '#5b4de0',
+    },
+  },
+};
+
+export const THEME_KEYS = Object.keys(THEMES);
+export const DEFAULT_THEME = 'space';