symbiote-ui 0.3.0-alpha.4

package/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 let PCB_DARK = {
+  name: 'pcb-dark',
+  tokens: {
+
+
+    '--sn-bg': '#1a1a1a',
+    '--sn-grid-dot': 'rgba(255, 255, 255, 0.04)',
+    '--sn-grid-size': '20px',
+
+
+    '--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',
+
+
+    '--sn-font': "'Inter', sans-serif",
+    '--sn-text': '#e0e0e0',
+    '--sn-text-dim': '#888888',
+
+
+    '--sn-socket-size': '10px',
+    '--sn-socket-border-width': '2px',
+
+
+    '--sn-conn-color': '#c87533',
+    '--sn-conn-width': '1.5',
+    '--sn-conn-selected': '#d4a04a',
+    '--sn-conn-linecap': 'square',
+    '--sn-conn-linejoin': 'miter',
+
+
+    '--sn-conn-dot-fill': '#c87533',
+    '--sn-conn-dot-stroke': '#222222',
+    '--sn-conn-dot-stroke-width': 'var(--sn-socket-border-width)',
+    '--sn-conn-dot-r': 'calc((var(--sn-socket-size) + var(--sn-conn-dot-stroke-width)) / 2)',
+
+
+    '--sn-frame-border-style': 'dashed',
+    '--sn-frame-border-width': '1px',
+    '--sn-frame-radius': '6px',
+
+
+    '--sn-cat-server': '#c87533',
+    '--sn-cat-instance': '#4caf50',
+    '--sn-cat-control': '#d4a04a',
+    '--sn-cat-data': '#5c8dbf',
+    '--sn-cat-default': '#555555',
+    '--sn-subgraph-accent': 'var(--sn-cat-data)',
+
+    '--sn-cat-directory': '#f0b840',
+    '--sn-cat-file': '#5cb8ff',
+    '--sn-cat-function': '#4ade80',
+    '--sn-cat-class': '#a78bfa',
+    '--sn-cat-module': '#ff6b9d',
+    '--sn-cat-asset': '#8b8b8b',
+
+
+    '--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)',
+
+
+    '--sn-comment-bg': 'rgba(255, 255, 255, 0.03)',
+    '--sn-comment-border': 'rgba(255, 255, 255, 0.06)',
+    '--sn-comment-radius': '2px',
+
+
+    '--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',
+
+
+    '--sn-shape-fill': 'var(--sn-node-bg)',
+    '--sn-shape-stroke': 'var(--sn-node-border)',
+    '--sn-shape-stroke-width': '0.5',
+
+
+    '--sn-danger-color': '#f44336',
+    '--sn-success-color': '#4caf50',
+    '--sn-warning-color': '#ff9800',
+
+
+    '--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',
+  },
+
+
+  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/themes/synthwave.js

@@ -0,0 +1,138 @@
+/**
+ * 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 let SYNTHWAVE = {
+  name: 'synthwave',
+  tokens: {
+
+
+    '--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',
+
+
+    '--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))',
+
+
+    '--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',
+
+
+    '--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%)',
+
+
+    '--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))',
+
+
+    '--sn-socket-size': '14px',
+    '--sn-socket-border-width': '2px',
+
+
+    '--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%)',
+
+
+    '--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))',
+    '--sn-subgraph-accent': 'var(--sn-cat-data)',
+
+
+    '--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))',
+
+
+    '--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',
+
+
+    '--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%)',
+
+
+    '--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 let 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',
+  },
+};

package/tokens/base.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://design-tokens.github.io/community-group/format/",
+  "color": {
+    "background": { "$type": "color", "$value": "var(--sn-bg)" },
+    "surface": { "$type": "color", "$value": "var(--sn-node-bg)" },
+    "border": { "$type": "color", "$value": "var(--sn-node-border)" },
+    "text": { "$type": "color", "$value": "var(--sn-text)" },
+    "textDim": { "$type": "color", "$value": "var(--sn-text-dim)" },
+    "accent": { "$type": "color", "$value": "var(--sn-node-selected)" },
+    "success": { "$type": "color", "$value": "var(--sn-success-color)" },
+    "warning": { "$type": "color", "$value": "var(--sn-warning-color)" },
+    "danger": { "$type": "color", "$value": "var(--sn-danger-color)" }
+  },
+  "size": {
+    "grid": { "$type": "dimension", "$value": "var(--sn-grid-size)" },
+    "socket": { "$type": "dimension", "$value": "var(--sn-socket-size)" },
+    "socketBorder": { "$type": "dimension", "$value": "var(--sn-socket-border-width)" }
+  },
+  "radius": {
+    "node": { "$type": "dimension", "$value": "var(--sn-node-radius)" },
+    "comment": { "$type": "dimension", "$value": "var(--sn-comment-radius)" }
+  },
+  "shadow": {
+    "node": { "$type": "shadow", "$value": "var(--sn-node-shadow)" }
+  },
+  "font": {
+    "family": { "$type": "fontFamily", "$value": "var(--sn-font)" }
+  }
+}

package/tokens/themes/carbon.json

@@ -0,0 +1,11 @@
+{
+  "name": "carbon",
+  "extends": "../base.json",
+  "color": {
+    "background": { "$type": "color", "$value": "hsl(220, 13%, 9%)" },
+    "surface": { "$type": "color", "$value": "hsl(220, 13%, 14%)" },
+    "border": { "$type": "color", "$value": "hsl(220, 10%, 24%)" },
+    "text": { "$type": "color", "$value": "hsl(210, 16%, 92%)" },
+    "accent": { "$type": "color", "$value": "hsl(196, 100%, 55%)" }
+  }
+}

package/tokens/themes/dark.json

@@ -0,0 +1,12 @@
+{
+  "name": "dark",
+  "extends": "../base.json",
+  "color": {
+    "background": { "$type": "color", "$value": "hsl(230, 30%, 12%)" },
+    "surface": { "$type": "color", "$value": "hsl(230, 30%, 18%)" },
+    "border": { "$type": "color", "$value": "hsl(230, 15%, 22%)" },
+    "text": { "$type": "color", "$value": "hsl(230, 15%, 89%)" },
+    "textDim": { "$type": "color", "$value": "hsl(230, 15%, 63%)" },
+    "accent": { "$type": "color", "$value": "hsl(215, 60%, 65%)" }
+  }
+}