project-graph-mcp 2.2.6 → 2.3.0

package/vendor/symbiote-node/themes/light.js

@@ -0,0 +1,137 @@
+/**
+ * Light Clean — bright minimal theme
+ *
+ * Inverted lightness values: bg=95%, surface=100%, text=15%.
+ * Same atomic HSL structure as dark theme.
+ *
+ * @module symbiote-node/themes/light
+ */
+
+/** @type {import('./Theme.js').ThemeDefinition} */
+export const LIGHT_CLEAN = {
+  name: 'light-clean',
+  tokens: {
+    // === Atomic tokens ===
+
+    // Hues
+    '--sn-hue-base': '220',
+    '--sn-hue-accent': '217',
+    '--sn-hue-success': '142',
+    '--sn-hue-warning': '38',
+    '--sn-hue-danger': '0',
+    '--sn-hue-data': '262',
+
+    // Saturation levels
+    '--sn-sat': '14%',
+    '--sn-sat-vivid': '60%',
+    '--sn-sat-muted': '8%',
+
+    // Lightness levels (inverted for light theme)
+    '--sn-lit-bg': '95%',
+    '--sn-lit-surface': '100%',
+    '--sn-lit-border': '78%',
+    '--sn-lit-hover': '90%',
+    '--sn-lit-text': '15%',
+    '--sn-lit-text-dim': '45%',
+    '--sn-lit-accent': '50%',
+
+    // Alpha levels
+    '--sn-alpha-overlay': '0.95',
+    '--sn-alpha-subtle': '0.1',
+    '--sn-alpha-faint': '0.12',
+
+    // Semantic state colors (composed from atomics)
+    '--sn-danger-color': 'hsl(var(--sn-hue-danger), var(--sn-sat-vivid), var(--sn-lit-accent))',
+    '--sn-success-color': 'hsl(var(--sn-hue-success), var(--sn-sat-vivid), var(--sn-lit-accent))',
+    '--sn-warning-color': 'hsl(var(--sn-hue-warning), var(--sn-sat-vivid), var(--sn-lit-accent))',
+
+    // === Composed tokens ===
+
+    // Canvas
+    '--sn-bg': 'hsl(var(--sn-hue-base), var(--sn-sat), var(--sn-lit-bg))',
+    '--sn-grid-dot': 'hsla(0, 0%, 0%, var(--sn-alpha-faint))',
+    '--sn-grid-size': '20px',
+
+    // Node
+    '--sn-node-bg': 'hsl(0, 0%, var(--sn-lit-surface))',
+    '--sn-node-border': 'hsl(var(--sn-hue-base), var(--sn-sat-muted), var(--sn-lit-border))',
+    '--sn-node-radius': '10px',
+    '--sn-node-shadow': '0 2px 8px rgba(0, 0, 0, 0.08)',
+    '--sn-shadow-color': 'rgba(0, 0, 0, 0.12)',
+    '--sn-node-selected': 'hsl(var(--sn-hue-accent), var(--sn-sat-vivid), var(--sn-lit-accent))',
+    '--sn-node-hover': 'hsl(var(--sn-hue-base), var(--sn-sat-muted), var(--sn-lit-hover))',
+    '--sn-node-header-bg': 'hsl(var(--sn-hue-base), var(--sn-sat-muted), 96%)',
+
+    // Typography
+    '--sn-font': "'Inter', sans-serif",
+    '--sn-text': 'hsl(var(--sn-hue-base), 10%, var(--sn-lit-text))',
+    '--sn-text-dim': 'hsl(var(--sn-hue-base), 8%, var(--sn-lit-text-dim))',
+
+    // Sockets
+    '--sn-socket-size': '12px',
+    '--sn-socket-border-width': '2px',
+
+    // Connections
+    '--sn-conn-color': 'hsl(var(--sn-hue-accent), var(--sn-sat-vivid), var(--sn-lit-accent))',
+    '--sn-conn-width': '2',
+    '--sn-conn-selected': 'hsl(var(--sn-hue-danger), var(--sn-sat-vivid), var(--sn-lit-accent))',
+
+    // Category accent colors
+    '--sn-cat-server': 'hsl(var(--sn-hue-accent), var(--sn-sat-vivid), var(--sn-lit-accent))',
+    '--sn-cat-instance': 'hsl(var(--sn-hue-success), var(--sn-sat-vivid), 45%)',
+    '--sn-cat-control': 'hsl(var(--sn-hue-warning), var(--sn-sat-vivid), var(--sn-lit-accent))',
+    '--sn-cat-data': 'hsl(var(--sn-hue-data), var(--sn-sat-vivid), 55%)',
+    '--sn-cat-default': 'hsl(0, 0%, var(--sn-lit-text-dim))',
+
+    // Context menu
+    '--sn-ctx-bg': 'hsl(0, 0%, var(--sn-lit-surface))',
+    '--sn-ctx-border': 'hsl(var(--sn-hue-base), var(--sn-sat-muted), var(--sn-lit-hover))',
+    '--sn-ctx-color': 'hsl(var(--sn-hue-base), 10%, var(--sn-lit-text))',
+    '--sn-ctx-hover': 'hsla(var(--sn-hue-accent), var(--sn-sat-vivid), var(--sn-lit-accent), var(--sn-alpha-subtle))',
+
+    // Comments
+    '--sn-comment-bg': 'hsla(0, 0%, 0%, 0.03)',
+    '--sn-comment-border': 'hsla(0, 0%, 0%, 0.08)',
+    '--sn-comment-radius': '6px',
+
+    // Toolbar
+    '--sn-toolbar-bg': 'hsla(0, 0%, var(--sn-lit-surface), var(--sn-alpha-overlay))',
+    '--sn-toolbar-border': 'hsla(0, 0%, 0%, 0.1)',
+    '--sn-toolbar-color': 'hsl(var(--sn-hue-base), 8%, 35%)',
+    '--sn-toolbar-hover': 'hsla(var(--sn-hue-accent), var(--sn-sat-vivid), var(--sn-lit-accent), 0.12)',
+    '--sn-toolbar-active': 'hsl(var(--sn-hue-base), 10%, var(--sn-lit-text))',
+    '--sn-toolbar-danger': 'hsla(var(--sn-hue-danger), var(--sn-sat-vivid), var(--sn-lit-accent), 0.15)',
+    '--sn-toolbar-danger-color': 'hsl(var(--sn-hue-danger), var(--sn-sat-vivid), var(--sn-lit-accent))',
+
+    // Shape fill/stroke
+    '--sn-shape-fill': 'var(--sn-node-bg)',
+    '--sn-shape-stroke': 'var(--sn-node-border)',
+    '--sn-shape-stroke-width': '1.0',
+  },
+};
+
+/** @type {import('./Palette.js').PaletteDefinition} */
+export const LIGHT_PALETTE = {
+  name: 'light',
+  colors: {
+    '--sn-hue-base': '220',
+    '--sn-hue-accent': '217',
+    '--sn-hue-success': '142',
+    '--sn-hue-warning': '38',
+    '--sn-hue-danger': '0',
+    '--sn-hue-data': '262',
+    '--sn-sat': '14%',
+    '--sn-sat-vivid': '60%',
+    '--sn-sat-muted': '8%',
+    '--sn-lit-bg': '95%',
+    '--sn-lit-surface': '100%',
+    '--sn-lit-border': '78%',
+    '--sn-lit-hover': '90%',
+    '--sn-lit-text': '15%',
+    '--sn-lit-text-dim': '45%',
+    '--sn-lit-accent': '50%',
+    '--sn-alpha-overlay': '0.95',
+    '--sn-alpha-subtle': '0.1',
+    '--sn-alpha-faint': '0.12',
+  },
+};

package/vendor/symbiote-node/themes/neon.js

@@ -0,0 +1,138 @@
+/**
+ * Neon Glow — electric neon theme with luminous edges
+ *
+ * Deep black base (hue 230) with electric cyan accent (185).
+ * All borders and shapes emit visible glow via elevated alpha
+ * and vivid saturation. Designed for maximum visual impact.
+ *
+ * @module symbiote-node/themes/neon
+ */
+
+/** @type {import('./Theme.js').ThemeDefinition} */
+export const NEON_GLOW = {
+  name: 'neon-glow',
+  tokens: {
+    // === Atomic tokens ===
+
+    // Hues
+    '--sn-hue-base': '230',
+    '--sn-hue-accent': '185',
+    '--sn-hue-success': '150',
+    '--sn-hue-warning': '50',
+    '--sn-hue-danger': '355',
+    '--sn-hue-data': '280',
+
+    // Saturation levels (high neon saturation)
+    '--sn-sat': '30%',
+    '--sn-sat-vivid': '100%',
+    '--sn-sat-muted': '15%',
+
+    // Lightness levels (very dark base)
+    '--sn-lit-bg': '4%',
+    '--sn-lit-surface': '8%',
+    '--sn-lit-border': '22%',
+    '--sn-lit-hover': '14%',
+    '--sn-lit-text': '90%',
+    '--sn-lit-text-dim': '55%',
+    '--sn-lit-accent': '60%',
+
+    // Alpha levels
+    '--sn-alpha-overlay': '0.94',
+    '--sn-alpha-subtle': '0.2',
+    '--sn-alpha-faint': '0.06',
+
+    // Semantic state colors
+    '--sn-danger-color': 'hsl(var(--sn-hue-danger), var(--sn-sat-vivid), var(--sn-lit-accent))',
+    '--sn-success-color': 'hsl(var(--sn-hue-success), var(--sn-sat-vivid), var(--sn-lit-accent))',
+    '--sn-warning-color': 'hsl(var(--sn-hue-warning), var(--sn-sat-vivid), var(--sn-lit-accent))',
+
+    // === Composed tokens ===
+
+    // Canvas — near-black with cyan grid glow
+    '--sn-bg': 'hsl(var(--sn-hue-base), var(--sn-sat), var(--sn-lit-bg))',
+    '--sn-grid-dot': 'hsla(var(--sn-hue-accent), var(--sn-sat-vivid), 50%, 0.12)',
+    '--sn-grid-size': '22px',
+
+    // Node — dark glass with neon edge glow
+    '--sn-node-bg': 'hsla(var(--sn-hue-base), var(--sn-sat), var(--sn-lit-surface), 0.9)',
+    '--sn-node-border': 'hsl(var(--sn-hue-accent), 60%, 30%)',
+    '--sn-node-radius': '8px',
+    '--sn-node-shadow': '0 0 12px hsla(var(--sn-hue-accent), var(--sn-sat-vivid), 50%, 0.15), 0 4px 16px rgba(0, 0, 0, 0.5)',
+    '--sn-shadow-color': 'hsla(var(--sn-hue-accent), var(--sn-sat-vivid), 50%, 0.15)',
+    '--sn-node-selected': 'hsl(var(--sn-hue-accent), var(--sn-sat-vivid), 55%)',
+    '--sn-node-hover': 'hsl(var(--sn-hue-base), 25%, var(--sn-lit-hover))',
+    '--sn-node-header-bg': 'hsla(var(--sn-hue-accent), 40%, 10%, 0.6)',
+
+    // Typography
+    '--sn-font': "'JetBrains Mono', 'Fira Code', monospace",
+    '--sn-text': 'hsl(var(--sn-hue-accent), 20%, var(--sn-lit-text))',
+    '--sn-text-dim': 'hsl(var(--sn-hue-accent), 15%, var(--sn-lit-text-dim))',
+
+    // Sockets
+    '--sn-socket-size': '12px',
+    '--sn-socket-border-width': '2px',
+
+    // Connections — bright neon wires
+    '--sn-conn-color': 'hsl(var(--sn-hue-accent), var(--sn-sat-vivid), 55%)',
+    '--sn-conn-width': '2',
+    '--sn-conn-selected': 'hsl(var(--sn-hue-danger), var(--sn-sat-vivid), 60%)',
+
+    // Category accent colors (electric neon palette)
+    '--sn-cat-server': 'hsl(var(--sn-hue-accent), var(--sn-sat-vivid), 55%)',
+    '--sn-cat-instance': 'hsl(var(--sn-hue-success), var(--sn-sat-vivid), 55%)',
+    '--sn-cat-control': 'hsl(var(--sn-hue-warning), var(--sn-sat-vivid), 55%)',
+    '--sn-cat-data': 'hsl(var(--sn-hue-data), var(--sn-sat-vivid), 65%)',
+    '--sn-cat-default': 'hsl(var(--sn-hue-accent), 30%, 45%)',
+
+    // Context menu
+    '--sn-ctx-bg': 'hsla(var(--sn-hue-base), var(--sn-sat), 6%, 0.96)',
+    '--sn-ctx-border': 'hsl(var(--sn-hue-accent), 50%, 25%)',
+    '--sn-ctx-color': 'hsl(var(--sn-hue-accent), 20%, var(--sn-lit-text))',
+    '--sn-ctx-hover': 'hsla(var(--sn-hue-accent), var(--sn-sat-vivid), 50%, 0.15)',
+
+    // Comments
+    '--sn-comment-bg': 'hsla(var(--sn-hue-accent), 80%, 50%, 0.04)',
+    '--sn-comment-border': 'hsla(var(--sn-hue-accent), 80%, 50%, 0.12)',
+    '--sn-comment-radius': '6px',
+
+    // Toolbar — dark glass with neon edge
+    '--sn-toolbar-bg': 'hsla(var(--sn-hue-base), var(--sn-sat), 6%, var(--sn-alpha-overlay))',
+    '--sn-toolbar-border': 'hsla(var(--sn-hue-accent), 80%, 50%, 0.25)',
+    '--sn-toolbar-color': 'hsl(var(--sn-hue-accent), 25%, 60%)',
+    '--sn-toolbar-hover': 'hsla(var(--sn-hue-accent), var(--sn-sat-vivid), 50%, 0.18)',
+    '--sn-toolbar-active': 'hsl(var(--sn-hue-accent), 40%, var(--sn-lit-text))',
+    '--sn-toolbar-danger': 'hsla(var(--sn-hue-danger), var(--sn-sat-vivid), var(--sn-lit-accent), 0.2)',
+    '--sn-toolbar-danger-color': 'hsl(var(--sn-hue-danger), var(--sn-sat-vivid), 60%)',
+
+    // Shape fill/stroke — neon stroke glow
+    '--sn-shape-fill': 'var(--sn-node-bg)',
+    '--sn-shape-stroke': 'hsl(var(--sn-hue-accent), 60%, 35%)',
+    '--sn-shape-stroke-width': '0.5',
+  },
+};
+
+/** @type {import('./Palette.js').PaletteDefinition} */
+export const NEON_PALETTE = {
+  name: 'neon',
+  colors: {
+    '--sn-hue-base': '230',
+    '--sn-hue-accent': '185',
+    '--sn-hue-success': '150',
+    '--sn-hue-warning': '50',
+    '--sn-hue-danger': '355',
+    '--sn-hue-data': '280',
+    '--sn-sat': '30%',
+    '--sn-sat-vivid': '100%',
+    '--sn-sat-muted': '15%',
+    '--sn-lit-bg': '4%',
+    '--sn-lit-surface': '8%',
+    '--sn-lit-border': '22%',
+    '--sn-lit-hover': '14%',
+    '--sn-lit-text': '90%',
+    '--sn-lit-text-dim': '55%',
+    '--sn-lit-accent': '60%',
+    '--sn-alpha-overlay': '0.94',
+    '--sn-alpha-subtle': '0.2',
+    '--sn-alpha-faint': '0.06',
+  },
+};

package/vendor/symbiote-node/themes/pcb.js

@@ -0,0 +1,273 @@
+/**
+ * PCB Dark — Carbon-based theme with circuit board node styling
+ *
+ * Extends the Carbon neutral dark palette with PCB-inspired node shapes:
+ * - IC chip rectangles with notch markers
+ * - Copper-tinted traces for import connections
+ * - Pin indicators on sockets
+ * - CPU hub styling for high-connectivity nodes
+ *
+ * Background/surface/text colors match the global Carbon dashboard.
+ *
+ * @module symbiote-node/themes/pcb
+ */
+
+/** @type {import('./Theme.js').ThemeDefinition} */
+export const PCB_DARK = {
+  name: 'pcb-dark',
+  tokens: {
+    // === Base: Carbon dark palette ===
+
+    // Canvas
+    '--sn-bg': '#1a1a1a',
+    '--sn-grid-dot': 'rgba(255, 255, 255, 0.04)',
+    '--sn-grid-size': '20px',
+
+    // Node / Panels — Carbon surfaces (keep default geometry)
+    '--sn-node-bg': '#222222',
+    '--sn-node-border': 'rgba(255, 255, 255, 0.12)',
+    '--sn-node-shadow': '0 1px 4px rgba(0, 0, 0, 0.5)',
+    '--sn-shadow-color': 'rgba(0, 0, 0, 0.5)',
+    '--sn-node-header-bg': '#252525',
+    '--sn-node-selected': '#d4a04a',
+    '--sn-node-hover': '#2d2d2d',
+
+    // Typography — keep default (Inter)
+    '--sn-text': '#e0e0e0',
+    '--sn-text-dim': '#888888',
+
+    // Sockets — pin style
+    '--sn-socket-size': '10px',
+    '--sn-socket-border-width': '2px',
+
+    // Connections — copper traces with square caps (PCB)
+    '--sn-conn-color': '#c87533',
+    '--sn-conn-width': '1.5',
+    '--sn-conn-selected': '#d4a04a',
+    '--sn-conn-linecap': 'square',
+    '--sn-conn-linejoin': 'miter',
+
+    // Connection dots — solder pads
+    '--sn-conn-dot-fill': '#c87533',
+    '--sn-conn-dot-stroke': '#222222',
+    '--sn-conn-dot-stroke-width': '1',
+    '--sn-conn-dot-r': '3.5',
+
+    // Frames — subdued zones
+    '--sn-frame-border-style': 'dashed',
+    '--sn-frame-border-width': '1px',
+    '--sn-frame-radius': '6px',
+
+    // Category accent colors
+    '--sn-cat-server': '#c87533',      // copper — server/routing
+    '--sn-cat-instance': '#4caf50',    // green — active
+    '--sn-cat-control': '#d4a04a',     // gold — control/hub
+    '--sn-cat-data': '#5c8dbf',        // cool blue — data flow
+    '--sn-cat-default': '#555555',     // neutral
+    // Codebase-specific categories
+    '--sn-cat-directory': '#f0b840',   // amber — folder
+    '--sn-cat-file': '#5cb8ff',        // sky blue — JS file
+    '--sn-cat-function': '#4ade80',    // green — function
+    '--sn-cat-class': '#a78bfa',       // purple — class
+    '--sn-cat-module': '#ff6b9d',      // pink — entry/index
+    '--sn-cat-asset': '#8b8b8b',        // gray — non-source asset (.css, .html, .json, .md)
+
+    // Context menu — matches Carbon
+    '--sn-ctx-bg': '#2a2a2a',
+    '--sn-ctx-border': 'rgba(255, 255, 255, 0.1)',
+    '--sn-ctx-color': '#e0e0e0',
+    '--sn-ctx-hover': 'rgba(200, 117, 51, 0.15)',
+
+    // Comments
+    '--sn-comment-bg': 'rgba(255, 255, 255, 0.03)',
+    '--sn-comment-border': 'rgba(255, 255, 255, 0.06)',
+    '--sn-comment-radius': '2px',
+
+    // Toolbar — Carbon base with copper accent
+    '--sn-toolbar-bg': 'rgba(34, 34, 34, 0.95)',
+    '--sn-toolbar-border': 'rgba(255, 255, 255, 0.08)',
+    '--sn-toolbar-color': '#888888',
+    '--sn-toolbar-hover': 'rgba(200, 117, 51, 0.18)',
+    '--sn-toolbar-active': '#e0e0e0',
+    '--sn-toolbar-danger': 'rgba(244, 67, 54, 0.22)',
+    '--sn-toolbar-danger-color': '#f44336',
+
+    // Shape fill/stroke
+    '--sn-shape-fill': 'var(--sn-node-bg)',
+    '--sn-shape-stroke': 'var(--sn-node-border)',
+    '--sn-shape-stroke-width': '0.5',
+
+    // Semantic state
+    '--sn-danger-color': '#f44336',
+    '--sn-success-color': '#4caf50',
+    '--sn-warning-color': '#ff9800',
+
+    // Atomic hue tokens
+    '--sn-hue-base': '0',
+    '--sn-hue-accent': '28',
+    '--sn-hue-success': '122',
+    '--sn-hue-warning': '36',
+    '--sn-hue-danger': '4',
+    '--sn-hue-data': '210',
+    '--sn-sat': '0%',
+    '--sn-sat-vivid': '50%',
+    '--sn-sat-muted': '0%',
+    '--sn-lit-bg': '10%',
+    '--sn-lit-surface': '13%',
+    '--sn-lit-border': '17%',
+    '--sn-lit-hover': '18%',
+    '--sn-lit-text': '88%',
+    '--sn-lit-text-dim': '53%',
+    '--sn-lit-accent': '55%',
+    '--sn-alpha-overlay': '0.95',
+    '--sn-alpha-subtle': '0.12',
+    '--sn-alpha-faint': '0.04',
+  },
+
+  // PCB-specific CSS that can't be expressed as tokens
+  // (pseudo-elements, structural selectors, behavioral modes)
+  extraCSS: `
+    /* ── IC Chip Decorations (SVG shape nodes only) ── */
+
+    /* Hide Material icons only on SVG shape nodes (they use watermarks) */
+    graph-node[data-svg-shape] .sn-node-icon {
+      display: none;
+    }
+    graph-node[data-svg-shape] .sn-shape-watermark {
+      display: none;
+    }
+
+    /* IC chip notch marker — SVG shape nodes only */
+    graph-node[data-svg-shape]::before {
+      content: '';
+      position: absolute;
+      top: -1.5px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 16px;
+      height: 4px;
+      background: var(--sn-bg, #1a1a1a);
+      border-radius: 0 0 4px 4px;
+      border: 1px solid var(--sn-node-border, rgba(255,255,255,0.12));
+      border-top: none;
+      z-index: 1;
+    }
+
+    /* Pin markers on node sides — SVG shape nodes only */
+    graph-node[data-svg-shape]::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: -5px;
+      width: 4px;
+      height: 4px;
+      background: var(--sn-conn-color, #c87533);
+      border-radius: 50%;
+      transform: translateY(-50%);
+      box-shadow: calc(100% + 6px) 0 0 0 var(--sn-conn-color, #c87533);
+    }
+
+    /* ── Label Visibility Modes ── */
+
+    /* SVG shape label positioning */
+    graph-node[data-svg-shape] .sn-node-header {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      background: transparent;
+      border: none;
+      border-radius: 0;
+      border-bottom: none;
+      padding: 4px 10px;
+      white-space: nowrap;
+      opacity: 1;
+      pointer-events: none;
+      z-index: 1;
+      font-size: 11px;
+      letter-spacing: 0.3px;
+      transition: opacity 0.2s ease-in-out;
+    }
+
+    /* HOVER MODE */
+    node-canvas[data-label-mode="hover"] graph-node[data-svg-shape] .sn-node-header {
+      opacity: 0;
+    }
+    node-canvas[data-label-mode="hover"] graph-node[data-svg-shape]:hover .sn-node-header,
+    node-canvas[data-label-mode="hover"] graph-node[data-svg-shape][data-selected] .sn-node-header,
+    node-canvas[data-label-mode="hover"] graph-node[data-svg-shape][data-neighbor-focused] .sn-node-header {
+      opacity: 1;
+    }
+
+    /* FOCUS MODE */
+    node-canvas[data-label-mode="focus"] graph-node[data-svg-shape] .sn-node-header {
+      opacity: 0;
+    }
+    node-canvas[data-label-mode="focus"] graph-node[data-svg-shape][data-selected] .sn-node-header,
+    node-canvas[data-label-mode="focus"] graph-node[data-svg-shape][data-neighbor-focused] .sn-node-header {
+      opacity: 1;
+    }
+
+    /* ALWAYS: selected always visible */
+    graph-node[data-svg-shape][data-selected] .sn-node-header {
+      opacity: 1 !important;
+    }
+
+    /* ── Connection Focus States ── */
+
+    /* Selected node connections — full opacity, gold, thick */
+    .sn-conn-path[data-active-conn] {
+      opacity: 1 !important;
+      stroke-width: 2.5 !important;
+      stroke: var(--sn-node-selected, #d4a04a) !important;
+    }
+
+    /* Dim non-active connections when a node is selected */
+    .sn-conn-path[data-dimmed] {
+      opacity: 0.3 !important;
+    }
+
+    /* LOD: at low zoom, hide connections but keep active visible */
+    [data-lod-dimmed] .sn-conn-path,
+    [data-lod-dimmed] .sn-conn-arrow {
+      visibility: hidden;
+    }
+    [data-lod-dimmed] .sn-conn-path[data-active-conn],
+    [data-lod-dimmed] .sn-conn-arrow[data-active-conn] {
+      visibility: visible;
+      opacity: 1 !important;
+    }
+
+    /* ── Compact SVG Shape Sizing ── */
+    graph-node[data-svg-shape] {
+      min-width: 100px;
+      min-height: 60px;
+    }
+
+    /* Label styling */
+    graph-node .sn-node-label {
+      font-weight: 500;
+      text-shadow: 0 1px 3px rgba(0,0,0,0.6);
+    }
+
+    /* CPU hub (shield shape) — larger, gold accent labels */
+    graph-node[node-shape="shield"] .sn-node-label {
+      font-size: 11px;
+      font-weight: 700;
+      color: var(--sn-cat-control, #d4a04a);
+    }
+
+    /* Via connections: cross-directory dashed traces */
+    .sn-conn-path[data-via] {
+      stroke-dasharray: 6 3;
+      opacity: 0.7;
+    }
+
+    /* Frame label styling override for PCB silkscreen look */
+    graph-frame .sn-frame-label {
+      text-transform: uppercase;
+      letter-spacing: 1px;
+      opacity: 0.6;
+    }
+  `,
+};

package/vendor/symbiote-node/themes/synthwave.js

@@ -0,0 +1,137 @@
+/**
+ * Synthwave — neon retrowave theme
+ *
+ * High saturation (60%), purple base hue (270).
+ * Neon accents with vivid category colors.
+ *
+ * @module symbiote-node/themes/synthwave
+ */
+
+/** @type {import('./Theme.js').ThemeDefinition} */
+export const SYNTHWAVE = {
+  name: 'synthwave',
+  tokens: {
+    // === Atomic tokens ===
+
+    // Hues
+    '--sn-hue-base': '270',
+    '--sn-hue-accent': '300',
+    '--sn-hue-success': '180',
+    '--sn-hue-warning': '60',
+    '--sn-hue-danger': '0',
+    '--sn-hue-data': '300',
+
+    // Saturation levels (vivid neon)
+    '--sn-sat': '45%',
+    '--sn-sat-vivid': '100%',
+    '--sn-sat-muted': '25%',
+
+    // Lightness levels
+    '--sn-lit-bg': '6%',
+    '--sn-lit-surface': '12%',
+    '--sn-lit-border': '25%',
+    '--sn-lit-hover': '32%',
+    '--sn-lit-text': '88%',
+    '--sn-lit-text-dim': '48%',
+    '--sn-lit-accent': '55%',
+
+    // Alpha levels
+    '--sn-alpha-overlay': '0.92',
+    '--sn-alpha-subtle': '0.2',
+    '--sn-alpha-faint': '0.08',
+
+    // Semantic state colors (composed from atomics)
+    '--sn-danger-color': 'hsl(var(--sn-hue-danger), var(--sn-sat-vivid), var(--sn-lit-accent))',
+    '--sn-success-color': 'hsl(var(--sn-hue-success), var(--sn-sat-vivid), var(--sn-lit-accent))',
+    '--sn-warning-color': 'hsl(var(--sn-hue-warning), var(--sn-sat-vivid), var(--sn-lit-accent))',
+
+    // === Composed tokens ===
+
+    // Canvas
+    '--sn-bg': 'hsl(var(--sn-hue-base), var(--sn-sat), var(--sn-lit-bg))',
+    '--sn-grid-dot': 'hsla(var(--sn-hue-accent), var(--sn-sat-vivid), 50%, var(--sn-alpha-faint))',
+    '--sn-grid-size': '24px',
+
+    // Node
+    '--sn-node-bg': 'hsl(var(--sn-hue-base), var(--sn-sat), var(--sn-lit-surface))',
+    '--sn-node-border': 'hsl(var(--sn-hue-base), var(--sn-sat-muted), var(--sn-lit-border))',
+    '--sn-node-radius': '12px',
+    '--sn-node-shadow': '0 4px 20px hsla(var(--sn-hue-base), var(--sn-sat-vivid), 50%, 0.2)',
+    '--sn-shadow-color': 'hsla(var(--sn-hue-base), var(--sn-sat-vivid), 50%, 0.2)',
+    '--sn-node-selected': 'hsl(var(--sn-hue-accent), var(--sn-sat-vivid), 50%)',
+    '--sn-node-hover': 'hsl(var(--sn-hue-base), var(--sn-sat-muted), var(--sn-lit-hover))',
+    '--sn-node-header-bg': 'hsl(var(--sn-hue-base), var(--sn-sat), 9%)',
+
+    // Typography
+    '--sn-font': "'Space Grotesk', sans-serif",
+    '--sn-text': 'hsl(var(--sn-hue-base), 30%, var(--sn-lit-text))',
+    '--sn-text-dim': 'hsl(var(--sn-hue-base), 20%, var(--sn-lit-text-dim))',
+
+    // Sockets
+    '--sn-socket-size': '14px',
+    '--sn-socket-border-width': '2px',
+
+    // Connections
+    '--sn-conn-color': 'hsl(var(--sn-hue-accent), var(--sn-sat-vivid), 50%)',
+    '--sn-conn-width': '2.5',
+    '--sn-conn-selected': 'hsl(var(--sn-hue-success), var(--sn-sat-vivid), 50%)',
+
+    // Category accent colors (neon)
+    '--sn-cat-server': 'hsl(340, 100%, 70%)',
+    '--sn-cat-instance': 'hsl(var(--sn-hue-success), var(--sn-sat-vivid), 50%)',
+    '--sn-cat-control': 'hsl(var(--sn-hue-warning), var(--sn-sat-vivid), 50%)',
+    '--sn-cat-data': 'hsl(var(--sn-hue-data), var(--sn-sat-vivid), 50%)',
+    '--sn-cat-default': 'hsl(var(--sn-hue-base), 20%, var(--sn-lit-text-dim))',
+
+    // Context menu
+    '--sn-ctx-bg': 'hsl(var(--sn-hue-base), var(--sn-sat), var(--sn-lit-surface))',
+    '--sn-ctx-border': 'hsl(var(--sn-hue-base), var(--sn-sat-muted), var(--sn-lit-border))',
+    '--sn-ctx-color': 'hsl(var(--sn-hue-base), 30%, var(--sn-lit-text))',
+    '--sn-ctx-hover': 'hsla(var(--sn-hue-accent), var(--sn-sat-vivid), 50%, var(--sn-alpha-subtle))',
+
+    // Comments
+    '--sn-comment-bg': 'hsla(var(--sn-hue-accent), var(--sn-sat-vivid), 50%, 0.05)',
+    '--sn-comment-border': 'hsla(var(--sn-hue-accent), var(--sn-sat-vivid), 50%, 0.15)',
+    '--sn-comment-radius': '8px',
+
+    // Toolbar
+    '--sn-toolbar-bg': 'hsla(var(--sn-hue-base), var(--sn-sat), var(--sn-lit-surface), var(--sn-alpha-overlay))',
+    '--sn-toolbar-border': 'hsla(var(--sn-hue-accent), var(--sn-sat-vivid), 50%, 0.2)',
+    '--sn-toolbar-color': 'hsl(var(--sn-hue-base), 20%, 70%)',
+    '--sn-toolbar-hover': 'hsla(var(--sn-hue-accent), var(--sn-sat-vivid), 50%, 0.2)',
+    '--sn-toolbar-active': 'hsl(var(--sn-hue-base), 30%, var(--sn-lit-text))',
+    '--sn-toolbar-danger': 'hsla(var(--sn-hue-danger), var(--sn-sat-vivid), var(--sn-lit-accent), 0.25)',
+    '--sn-toolbar-danger-color': 'hsl(var(--sn-hue-danger), 80%, 60%)',
+
+    // Shape fill/stroke
+    '--sn-shape-fill': 'var(--sn-node-bg)',
+    '--sn-shape-stroke': 'var(--sn-node-border)',
+    '--sn-shape-stroke-width': '0.4',
+  },
+};
+
+/** @type {import('./Palette.js').PaletteDefinition} */
+export const SYNTHWAVE_PALETTE = {
+  name: 'synthwave',
+  colors: {
+    '--sn-hue-base': '270',
+    '--sn-hue-accent': '300',
+    '--sn-hue-success': '180',
+    '--sn-hue-warning': '60',
+    '--sn-hue-danger': '0',
+    '--sn-hue-data': '300',
+    '--sn-sat': '45%',
+    '--sn-sat-vivid': '100%',
+    '--sn-sat-muted': '25%',
+    '--sn-lit-bg': '6%',
+    '--sn-lit-surface': '12%',
+    '--sn-lit-border': '25%',
+    '--sn-lit-hover': '32%',
+    '--sn-lit-text': '88%',
+    '--sn-lit-text-dim': '48%',
+    '--sn-lit-accent': '55%',
+    '--sn-alpha-overlay': '0.92',
+    '--sn-alpha-subtle': '0.2',
+    '--sn-alpha-faint': '0.08',
+  },
+};