project-graph-mcp 2.2.6 → 2.3.1

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

@@ -0,0 +1,84 @@
+/**
+ * Theme — JSON-driven CSS token system for node graph styling
+ *
+ * Applies design tokens as CSS custom properties on a target element.
+ * Themes are plain objects — AI can generate them on the fly.
+ *
+ * @module symbiote-node/themes/Theme
+ */
+
+/**
+ * @typedef {Object} ThemeDefinition
+ * @property {string} name - Theme identifier
+ * @property {Object<string, string>} tokens - CSS custom property key-value pairs
+ */
+
+// Re-export all built-in themes
+export { DARK_DEFAULT } from './dark.js';
+export { LIGHT_CLEAN } from './light.js';
+export { SYNTHWAVE } from './synthwave.js';
+export { GREY_NEUTRAL } from './grey.js';
+export { NEON_GLOW } from './neon.js';
+
+/**
+ * Mapping from layout global tokens to symbiote-node tokens.
+ * Layout module uses --bg-*, --text-* format; this bridges them.
+ * @type {Object<string, string>}
+ */
+const LAYOUT_TOKEN_MAP = {
+  '--bg-panel': '--sn-node-bg',
+  '--bg-deeper': '--sn-bg',
+  '--bg-header': '--sn-node-header-bg',
+  '--bg-hover': '--sn-node-hover',
+  '--bg-popup': '--sn-ctx-bg',
+  '--text-main': '--sn-text',
+  '--text-dim': '--sn-text-dim',
+  '--text-muted': '--sn-text-dim',
+  '--layout-border': '--sn-node-border',
+  '--layout-highlight': '--sn-node-selected',
+  '--border-popup': '--sn-ctx-border',
+  '--accent': '--sn-node-selected',
+  '--font-main': '--sn-font',
+};
+
+/**
+ * Apply a theme to a DOM element
+ * @param {HTMLElement} element
+ * @param {ThemeDefinition} theme
+ */
+export function applyTheme(element, theme) {
+  for (const [key, value] of Object.entries(theme.tokens)) {
+    element.style.setProperty(key, value);
+  }
+  // Bridge: derive global layout tokens from --sn-* values
+  for (const [layoutToken, snToken] of Object.entries(LAYOUT_TOKEN_MAP)) {
+    const value = theme.tokens[snToken];
+    if (value) {
+      element.style.setProperty(layoutToken, value);
+    }
+  }
+  // Extra CSS: inject theme-specific style overrides
+  if (theme.extraCSS) {
+    const existing = element.querySelector('style[data-theme]');
+    if (existing) existing.remove();
+    const style = document.createElement('style');
+    style.setAttribute('data-theme', theme.name || 'custom');
+    style.textContent = theme.extraCSS;
+    element.prepend(style);
+  }
+}
+
+/**
+ * Extract current theme tokens from an element
+ * @param {HTMLElement} element
+ * @param {ThemeDefinition} reference - reference theme for token keys
+ * @returns {ThemeDefinition}
+ */
+export function extractTheme(element, reference) {
+  const tokens = {};
+  const computed = getComputedStyle(element);
+  for (const key of Object.keys(reference.tokens)) {
+    tokens[key] = computed.getPropertyValue(key).trim() || reference.tokens[key];
+  }
+  return { name: 'extracted', tokens };
+}

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

@@ -0,0 +1,137 @@
+/**
+ * Carbon — professional dark theme for code analysis
+ *
+ * Deep neutral greys with blue accent. Zero-saturation base
+ * for maximum readability. Matches studio-grade tooling aesthetic.
+ *
+ * @module symbiote-node/themes/carbon
+ */
+
+/** @type {import('./Theme.js').ThemeDefinition} */
+export const CARBON = {
+  name: 'carbon',
+  tokens: {
+    // === Atomic tokens ===
+
+    // Hues
+    '--sn-hue-base': '0',
+    '--sn-hue-accent': '218',
+    '--sn-hue-success': '122',
+    '--sn-hue-warning': '36',
+    '--sn-hue-danger': '4',
+    '--sn-hue-data': '265',
+
+    // Saturation levels (achromatic base, vivid accents)
+    '--sn-sat': '0%',
+    '--sn-sat-vivid': '55%',
+    '--sn-sat-muted': '0%',
+
+    // Lightness levels
+    '--sn-lit-bg': '10%',       // #1a1a1a
+    '--sn-lit-surface': '13%',  // #222222
+    '--sn-lit-border': '17%',   // ~#2b2b2b
+    '--sn-lit-hover': '27%',    // #444444
+    '--sn-lit-text': '94%',     // #f0f0f0
+    '--sn-lit-text-dim': '60%', // #999999
+    '--sn-lit-accent': '63%',   // blue accent
+
+    // Alpha levels
+    '--sn-alpha-overlay': '0.95',
+    '--sn-alpha-subtle': '0.15',
+    '--sn-alpha-faint': '0.06',
+
+    // Semantic state colors
+    '--sn-danger-color': '#f44336',
+    '--sn-success-color': '#4caf50',
+    '--sn-warning-color': '#ff9800',
+
+    // === Composed tokens ===
+
+    // Canvas
+    '--sn-bg': '#1a1a1a',
+    '--sn-grid-dot': 'rgba(255, 255, 255, 0.06)',
+    '--sn-grid-size': '20px',
+
+    // Node / Panels
+    '--sn-node-bg': '#222222',
+    '--sn-node-border': 'rgba(255, 255, 255, 0.1)',
+    '--sn-node-radius': '6px',
+    '--sn-node-shadow': '0 2px 8px rgba(0, 0, 0, 0.4)',
+    '--sn-shadow-color': 'rgba(0, 0, 0, 0.4)',
+    '--sn-node-header-bg': '#222222',
+    '--sn-node-selected': '#4c8bf5',
+    '--sn-node-hover': '#444444',
+
+    // Typography
+    '--sn-font': "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+    '--sn-text': '#f0f0f0',
+    '--sn-text-dim': '#999999',
+
+    // Sockets
+    '--sn-socket-size': '12px',
+    '--sn-socket-border-width': '2px',
+
+    // Connections
+    '--sn-conn-color': '#4c8bf5',
+    '--sn-conn-width': '2',
+    '--sn-conn-selected': '#f44336',
+
+    // Category accent colors
+    '--sn-cat-server': '#4c8bf5',
+    '--sn-cat-instance': '#4caf50',
+    '--sn-cat-control': '#ff9800',
+    '--sn-cat-data': '#9c27b0',
+    '--sn-cat-default': '#666666',
+
+    // Context menu
+    '--sn-ctx-bg': '#2a2a2a',
+    '--sn-ctx-border': 'rgba(255, 255, 255, 0.1)',
+    '--sn-ctx-color': '#f0f0f0',
+    '--sn-ctx-hover': 'rgba(76, 139, 245, 0.15)',
+
+    // Comments
+    '--sn-comment-bg': 'rgba(255, 255, 255, 0.04)',
+    '--sn-comment-border': 'rgba(255, 255, 255, 0.08)',
+    '--sn-comment-radius': '4px',
+
+    // Toolbar
+    '--sn-toolbar-bg': 'rgba(34, 34, 34, 0.95)',
+    '--sn-toolbar-border': 'rgba(255, 255, 255, 0.08)',
+    '--sn-toolbar-color': '#999999',
+    '--sn-toolbar-hover': 'rgba(76, 139, 245, 0.18)',
+    '--sn-toolbar-active': '#f0f0f0',
+    '--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.4',
+  },
+};
+
+/** @type {import('./Palette.js').PaletteDefinition} */
+export const CARBON_PALETTE = {
+  name: 'carbon',
+  colors: {
+    '--sn-hue-base': '0',
+    '--sn-hue-accent': '218',
+    '--sn-hue-success': '122',
+    '--sn-hue-warning': '36',
+    '--sn-hue-danger': '4',
+    '--sn-hue-data': '265',
+    '--sn-sat': '0%',
+    '--sn-sat-vivid': '55%',
+    '--sn-sat-muted': '0%',
+    '--sn-lit-bg': '10%',
+    '--sn-lit-surface': '13%',
+    '--sn-lit-border': '17%',
+    '--sn-lit-hover': '27%',
+    '--sn-lit-text': '94%',
+    '--sn-lit-text-dim': '60%',
+    '--sn-lit-accent': '63%',
+    '--sn-alpha-overlay': '0.95',
+    '--sn-alpha-subtle': '0.15',
+    '--sn-alpha-faint': '0.06',
+  },
+};

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

@@ -0,0 +1,137 @@
+/**
+ * Dark Default — deep navy theme with blue accents
+ *
+ * Built on atomic HSL tokens: change a hue value and entire
+ * palette rebuilds harmoniously. AI-agent friendly.
+ *
+ * @module symbiote-node/themes/dark
+ */
+
+/** @type {import('./Theme.js').ThemeDefinition} */
+export const DARK_DEFAULT = {
+  name: 'dark-default',
+  tokens: {
+    // === Atomic tokens (AI changes these) ===
+
+    // Hues
+    '--sn-hue-base': '230',
+    '--sn-hue-accent': '215',
+    '--sn-hue-success': '142',
+    '--sn-hue-warning': '43',
+    '--sn-hue-danger': '0',
+    '--sn-hue-data': '262',
+
+    // Saturation levels
+    '--sn-sat': '30%',
+    '--sn-sat-vivid': '60%',
+    '--sn-sat-muted': '15%',
+
+    // Lightness levels
+    '--sn-lit-bg': '12%',
+    '--sn-lit-surface': '18%',
+    '--sn-lit-border': '22%',
+    '--sn-lit-hover': '28%',
+    '--sn-lit-text': '89%',
+    '--sn-lit-text-dim': '63%',
+    '--sn-lit-accent': '65%',
+
+    // Alpha levels
+    '--sn-alpha-overlay': '0.92',
+    '--sn-alpha-subtle': '0.15',
+    '--sn-alpha-faint': '0.06',
+
+    // 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 (auto from atomics) ===
+
+    // Canvas
+    '--sn-bg': 'hsl(var(--sn-hue-base), var(--sn-sat), var(--sn-lit-bg))',
+    '--sn-grid-dot': 'hsla(0, 0%, 100%, var(--sn-alpha-faint))',
+    '--sn-grid-size': '20px',
+
+    // 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': '10px',
+    '--sn-node-shadow': '0 4px 16px rgba(0, 0, 0, 0.3)',
+    '--sn-shadow-color': 'rgba(0, 0, 0, 0.3)',
+    '--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), 15%)',
+
+    // Typography
+    '--sn-font': "'Inter', sans-serif",
+    '--sn-text': 'hsl(var(--sn-hue-base), 15%, var(--sn-lit-text))',
+    '--sn-text-dim': 'hsl(var(--sn-hue-base), 15%, 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), var(--sn-lit-accent))',
+    '--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), var(--sn-lit-accent))',
+    '--sn-cat-default': 'hsl(0, 0%, var(--sn-lit-text-dim))',
+
+    // Context menu
+    '--sn-ctx-bg': 'hsl(var(--sn-hue-base), var(--sn-sat), 15%)',
+    '--sn-ctx-border': 'hsl(var(--sn-hue-base), var(--sn-sat-muted), var(--sn-lit-hover))',
+    '--sn-ctx-color': 'hsl(0, 0%, 88%)',
+    '--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%, 100%, 0.05)',
+    '--sn-comment-border': 'hsla(0, 0%, 100%, 0.1)',
+    '--sn-comment-radius': '6px',
+
+    // Toolbar
+    '--sn-toolbar-bg': 'hsla(var(--sn-hue-base), var(--sn-sat), var(--sn-lit-surface), var(--sn-alpha-overlay))',
+    '--sn-toolbar-border': 'hsla(0, 0%, 100%, 0.1)',
+    '--sn-toolbar-color': 'hsl(var(--sn-hue-base), 12%, 77%)',
+    '--sn-toolbar-hover': 'hsla(var(--sn-hue-accent), var(--sn-sat-vivid), var(--sn-lit-accent), 0.2)',
+    '--sn-toolbar-active': 'hsl(0, 0%, 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), var(--sn-sat-vivid), var(--sn-lit-accent))',
+
+    // Shape fill/stroke (inherits node tokens, per-shape override possible)
+    '--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 DARK_PALETTE = {
+  name: 'dark',
+  colors: {
+    '--sn-hue-base': '230',
+    '--sn-hue-accent': '215',
+    '--sn-hue-success': '142',
+    '--sn-hue-warning': '43',
+    '--sn-hue-danger': '0',
+    '--sn-hue-data': '262',
+    '--sn-sat': '30%',
+    '--sn-sat-vivid': '60%',
+    '--sn-sat-muted': '15%',
+    '--sn-lit-bg': '12%',
+    '--sn-lit-surface': '18%',
+    '--sn-lit-border': '22%',
+    '--sn-lit-hover': '28%',
+    '--sn-lit-text': '89%',
+    '--sn-lit-text-dim': '63%',
+    '--sn-lit-accent': '65%',
+    '--sn-alpha-overlay': '0.92',
+    '--sn-alpha-subtle': '0.15',
+    '--sn-alpha-faint': '0.06',
+  },
+};

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

@@ -0,0 +1,138 @@
+/**
+ * E-Book — warm paper reading theme
+ *
+ * Inspired by e-reader displays: warm cream background,
+ * high-contrast dark text, minimal UI chrome, serif-influenced typography.
+ * Optimized for long reading sessions and code exploration.
+ *
+ * @module symbiote-node/themes/ebook
+ */
+
+/** @type {import('./Theme.js').ThemeDefinition} */
+export const EBOOK = {
+  name: 'ebook',
+  tokens: {
+    // === Atomic tokens ===
+
+    // Hues — warm, muted palette
+    '--sn-hue-base': '35',
+    '--sn-hue-accent': '210',
+    '--sn-hue-success': '150',
+    '--sn-hue-warning': '38',
+    '--sn-hue-danger': '4',
+    '--sn-hue-data': '250',
+
+    // Saturation — deliberately low for reading comfort
+    '--sn-sat': '20%',
+    '--sn-sat-vivid': '55%',
+    '--sn-sat-muted': '12%',
+
+    // Lightness — warm paper tones
+    '--sn-lit-bg': '93%',
+    '--sn-lit-surface': '97%',
+    '--sn-lit-border': '82%',
+    '--sn-lit-hover': '89%',
+    '--sn-lit-text': '15%',
+    '--sn-lit-text-dim': '42%',
+    '--sn-lit-accent': '42%',
+
+    // Alpha
+    '--sn-alpha-overlay': '0.96',
+    '--sn-alpha-subtle': '0.08',
+    '--sn-alpha-faint': '0.06',
+
+    // Semantic state colors
+    '--sn-danger-color': 'hsl(var(--sn-hue-danger), var(--sn-sat-vivid), 48%)',
+    '--sn-success-color': 'hsl(var(--sn-hue-success), var(--sn-sat-vivid), 38%)',
+    '--sn-warning-color': 'hsl(var(--sn-hue-warning), var(--sn-sat-vivid), 42%)',
+
+    // === Composed tokens ===
+
+    // Canvas — warm cream paper
+    '--sn-bg': 'hsl(37, 30%, 91%)',
+    '--sn-grid-dot': 'hsla(35, 15%, 50%, 0.12)',
+    '--sn-grid-size': '20px',
+
+    // Node — slightly lighter paper surface
+    '--sn-node-bg': 'hsl(40, 33%, 96%)',
+    '--sn-node-border': 'hsl(35, 18%, 80%)',
+    '--sn-node-radius': '8px',
+    '--sn-node-shadow': '0 1px 4px rgba(100, 80, 40, 0.08)',
+    '--sn-shadow-color': 'rgba(100, 80, 40, 0.1)',
+    '--sn-node-selected': 'hsl(var(--sn-hue-accent), var(--sn-sat-vivid), var(--sn-lit-accent))',
+    '--sn-node-hover': 'hsl(36, 22%, 88%)',
+    '--sn-node-header-bg': 'hsl(37, 25%, 93%)',
+
+    // Typography — serif-influenced, ink-dark
+    '--sn-font': "'Georgia', 'Palatino', 'Times New Roman', serif",
+    '--sn-text': 'hsl(30, 15%, 18%)',
+    '--sn-text-dim': 'hsl(30, 10%, 45%)',
+
+    // Sockets
+    '--sn-socket-size': '12px',
+    '--sn-socket-border-width': '2px',
+
+    // Connections — subdued ink blue
+    '--sn-conn-color': 'hsl(210, 40%, 50%)',
+    '--sn-conn-width': '1.5',
+    '--sn-conn-selected': 'hsl(4, 55%, 50%)',
+
+    // Categories — muted, book-like accents
+    '--sn-cat-server': 'hsl(210, 45%, 45%)',
+    '--sn-cat-instance': 'hsl(150, 40%, 38%)',
+    '--sn-cat-control': 'hsl(35, 50%, 45%)',
+    '--sn-cat-data': 'hsl(250, 35%, 50%)',
+    '--sn-cat-default': 'hsl(30, 8%, 48%)',
+
+    // Context menu
+    '--sn-ctx-bg': 'hsl(40, 30%, 96%)',
+    '--sn-ctx-border': 'hsl(35, 15%, 82%)',
+    '--sn-ctx-color': 'hsl(30, 12%, 20%)',
+    '--sn-ctx-hover': 'hsla(210, 40%, 50%, 0.08)',
+
+    // Comments — faded parchment
+    '--sn-comment-bg': 'hsla(38, 25%, 85%, 0.3)',
+    '--sn-comment-border': 'hsla(35, 20%, 70%, 0.2)',
+    '--sn-comment-radius': '4px',
+
+    // Toolbar
+    '--sn-toolbar-bg': 'hsla(40, 30%, 95%, var(--sn-alpha-overlay))',
+    '--sn-toolbar-border': 'hsla(35, 15%, 70%, 0.25)',
+    '--sn-toolbar-color': 'hsl(30, 10%, 35%)',
+    '--sn-toolbar-hover': 'hsla(210, 40%, 50%, 0.1)',
+    '--sn-toolbar-active': 'hsl(30, 12%, 20%)',
+    '--sn-toolbar-danger': 'hsla(4, 55%, 50%, 0.1)',
+    '--sn-toolbar-danger-color': 'hsl(4, 55%, 50%)',
+
+    // Shape
+    '--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 EBOOK_PALETTE = {
+  name: 'ebook',
+  colors: {
+    '--sn-hue-base': '35',
+    '--sn-hue-accent': '210',
+    '--sn-hue-success': '150',
+    '--sn-hue-warning': '38',
+    '--sn-hue-danger': '4',
+    '--sn-hue-data': '250',
+    '--sn-sat': '20%',
+    '--sn-sat-vivid': '55%',
+    '--sn-sat-muted': '12%',
+    '--sn-lit-bg': '93%',
+    '--sn-lit-surface': '97%',
+    '--sn-lit-border': '82%',
+    '--sn-lit-hover': '89%',
+    '--sn-lit-text': '15%',
+    '--sn-lit-text-dim': '42%',
+    '--sn-lit-accent': '42%',
+    '--sn-alpha-overlay': '0.96',
+    '--sn-alpha-subtle': '0.08',
+    '--sn-alpha-faint': '0.06',
+  },
+};

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

@@ -0,0 +1,137 @@
+/**
+ * Grey Neutral — professional muted grey theme
+ *
+ * Zero saturation base (achromatic). All variation through
+ * lightness only. Category accents retain color.
+ *
+ * @module symbiote-node/themes/grey
+ */
+
+/** @type {import('./Theme.js').ThemeDefinition} */
+export const GREY_NEUTRAL = {
+  name: 'grey-neutral',
+  tokens: {
+    // === Atomic tokens ===
+
+    // Hues (base is neutral — sat=0 makes hue irrelevant)
+    '--sn-hue-base': '0',
+    '--sn-hue-accent': '207',
+    '--sn-hue-success': '136',
+    '--sn-hue-warning': '40',
+    '--sn-hue-danger': '7',
+    '--sn-hue-data': '265',
+
+    // Saturation levels (achromatic base)
+    '--sn-sat': '0%',
+    '--sn-sat-vivid': '50%',
+    '--sn-sat-muted': '0%',
+
+    // Lightness levels
+    '--sn-lit-bg': '18%',
+    '--sn-lit-surface': '24%',
+    '--sn-lit-border': '33%',
+    '--sn-lit-hover': '29%',
+    '--sn-lit-text': '83%',
+    '--sn-lit-text-dim': '63%',
+    '--sn-lit-accent': '65%',
+
+    // Alpha levels
+    '--sn-alpha-overlay': '0.94',
+    '--sn-alpha-subtle': '0.15',
+    '--sn-alpha-faint': '0.1',
+
+    // 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 (auto from atomics) ===
+
+    // Canvas
+    '--sn-bg': 'hsl(var(--sn-hue-base), var(--sn-sat), var(--sn-lit-bg))',
+    '--sn-grid-dot': 'hsla(0, 0%, 100%, var(--sn-alpha-faint))',
+    '--sn-grid-size': '20px',
+
+    // 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), var(--sn-lit-border))',
+    '--sn-node-radius': '6px',
+    '--sn-node-shadow': '0 2px 8px rgba(0, 0, 0, 0.4)',
+    '--sn-shadow-color': 'rgba(0, 0, 0, 0.4)',
+    '--sn-node-header-bg': 'hsl(var(--sn-hue-base), var(--sn-sat), 20%)',
+    '--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), var(--sn-lit-hover))',
+
+    // Typography
+    '--sn-font': "'Inter', sans-serif",
+    '--sn-text': 'hsl(0, 0%, var(--sn-lit-text))',
+    '--sn-text-dim': 'hsl(0, 0%, var(--sn-lit-text-dim))',
+
+    // Sockets
+    '--sn-socket-size': '12px',
+    '--sn-socket-border-width': '2px',
+
+    // Connections
+    '--sn-conn-color': 'hsl(0, 0%, 54%)',
+    '--sn-conn-width': '2',
+    '--sn-conn-selected': 'hsl(var(--sn-hue-danger), var(--sn-sat-vivid), 60%)',
+
+    // Category accent colors (retain color in grey theme)
+    '--sn-cat-server': 'hsl(var(--sn-hue-accent), var(--sn-sat-vivid), 68%)',
+    '--sn-cat-instance': 'hsl(var(--sn-hue-success), var(--sn-sat-vivid), 58%)',
+    '--sn-cat-control': 'hsl(var(--sn-hue-warning), var(--sn-sat-vivid), 60%)',
+    '--sn-cat-data': 'hsl(var(--sn-hue-data), var(--sn-sat-vivid), 68%)',
+    '--sn-cat-default': 'hsl(0, 0%, 60%)',
+
+    // Context menu
+    '--sn-ctx-bg': 'hsl(0, 0%, 22%)',
+    '--sn-ctx-border': 'hsl(0, 0%, var(--sn-lit-border))',
+    '--sn-ctx-color': 'hsl(0, 0%, 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%, 100%, 0.04)',
+    '--sn-comment-border': 'hsla(0, 0%, 100%, 0.08)',
+    '--sn-comment-radius': '4px',
+
+    // Toolbar
+    '--sn-toolbar-bg': 'hsla(0, 0%, 22%, var(--sn-alpha-overlay))',
+    '--sn-toolbar-border': 'hsla(0, 0%, 100%, 0.08)',
+    '--sn-toolbar-color': 'hsl(0, 0%, 67%)',
+    '--sn-toolbar-hover': 'hsla(var(--sn-hue-accent), var(--sn-sat-vivid), var(--sn-lit-accent), 0.18)',
+    '--sn-toolbar-active': 'hsl(0, 0%, var(--sn-lit-text))',
+    '--sn-toolbar-danger': 'hsla(var(--sn-hue-danger), var(--sn-sat-vivid), 60%, 0.22)',
+    '--sn-toolbar-danger-color': 'hsl(var(--sn-hue-danger), var(--sn-sat-vivid), 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 GREY_PALETTE = {
+  name: 'grey',
+  colors: {
+    '--sn-hue-base': '0',
+    '--sn-hue-accent': '207',
+    '--sn-hue-success': '136',
+    '--sn-hue-warning': '40',
+    '--sn-hue-danger': '7',
+    '--sn-hue-data': '265',
+    '--sn-sat': '0%',
+    '--sn-sat-vivid': '50%',
+    '--sn-sat-muted': '0%',
+    '--sn-lit-bg': '18%',
+    '--sn-lit-surface': '24%',
+    '--sn-lit-border': '33%',
+    '--sn-lit-hover': '29%',
+    '--sn-lit-text': '83%',
+    '--sn-lit-text-dim': '63%',
+    '--sn-lit-accent': '65%',
+    '--sn-alpha-overlay': '0.94',
+    '--sn-alpha-subtle': '0.15',
+    '--sn-alpha-faint': '0.1',
+  },
+};