symbiote-ui 0.3.0-alpha.4

package/surface/Card/Card.css.js

@@ -0,0 +1,57 @@
+export default /*css*/ `
+sn-card {
+  display: block;
+  box-sizing: border-box;
+  min-width: 0;
+  padding: var(--sn-card-padding);
+  margin-block-end: var(--sn-card-margin-block-end);
+  border: 1px solid var(--sn-card-border);
+  border-radius: var(--sn-card-radius);
+  background: var(--sn-card-bg);
+  color: var(--sn-text);
+  font-family: var(--sn-font);
+}
+
+sn-card[hidden] {
+  display: none !important;
+}
+
+sn-card[interactive] {
+  cursor: pointer;
+  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
+}
+
+sn-card[interactive]:hover {
+  border-color: var(--sn-card-hover-border);
+  background: var(--sn-card-hover-bg);
+}
+
+sn-card[variant="flat"] {
+  padding: 0;
+  margin-block-end: 0;
+  border-color: transparent;
+  background: transparent;
+}
+
+sn-card[variant="panel"] {
+  background: var(--sn-panel-bg);
+}
+
+sn-card [slot="title"],
+sn-card .sn-card-title {
+  display: block;
+  margin-block-end: var(--sn-card-title-margin-block-end);
+  color: var(--sn-card-title-color);
+  font-size: var(--sn-card-title-size);
+  font-weight: var(--sn-card-title-weight);
+  text-transform: uppercase;
+}
+
+sn-card [slot="footer"] {
+  display: flex;
+  gap: var(--sn-card-footer-gap);
+  margin-block-start: var(--sn-card-footer-margin-block-start);
+  padding-block-start: var(--sn-card-footer-padding-block-start);
+  border-block-start: 1px solid var(--sn-card-border);
+}
+`;

package/surface/Card/Card.js

@@ -0,0 +1,17 @@
+import Symbiote from '@symbiotejs/symbiote';
+import { slotProcessor } from '@symbiotejs/symbiote/core/slotProcessor.js';
+import template from './Card.tpl.js';
+import css from './Card.css.js';
+
+export class SurfaceCard extends Symbiote {
+  constructor() {
+    super();
+    this.templateProcessors.add(slotProcessor);
+  }
+}
+
+SurfaceCard.template = template;
+SurfaceCard.rootStyles = css;
+SurfaceCard.reg('sn-card');
+
+export default SurfaceCard;

package/surface/Card/Card.tpl.js

@@ -0,0 +1,3 @@
+import { html } from '@symbiotejs/symbiote';
+
+export default html`<slot></slot>`;

package/themes/Palette.js

@@ -0,0 +1,30 @@
+/**
+ * Palette — color-only design tokens
+ *
+ * Contains only chromatic properties: backgrounds, text colors,
+ * accents, category colors, connection colors.
+ * Separated from geometry (Skin) for independent swapping.
+ *
+ * @module symbiote-node/themes/Palette
+ */
+
+/**
+ * @typedef {Object} PaletteDefinition
+ * @property {string} name
+ * @property {Object<string, string>} colors
+ */
+
+
+export { DEFAULT_PROVIDER_PALETTE } from './default-provider.js';
+export { DEFAULT_PROVIDER_PALETTE as DEFAULT_PALETTE } from './default-provider.js';
+
+/**
+ * Apply palette to element
+ * @param {HTMLElement} element
+ * @param {PaletteDefinition} palette
+ */
+export function applyPalette(element, palette) {
+  for (const [key, value] of Object.entries(palette.colors)) {
+    element.style.setProperty(key, value);
+  }
+}

package/themes/Skin.js

@@ -0,0 +1,113 @@
+/**
+ * Skin — geometry-only design tokens
+ *
+ * Built on a T-shirt spacing scale: change the scale values and all
+ * semantic tokens (radius, sockets, grid) update harmoniously.
+ * Shadow is split into geometry (here) and color (from Palette).
+ *
+ * @module symbiote-node/themes/Skin
+ */
+
+/**
+ * @typedef {Object} SkinDefinition
+ * @property {string} name
+ * @property {Object<string, string>} geometry
+ */
+
+/** @type {SkinDefinition} */
+export let MODERN_SKIN = {
+  name: 'modern',
+  geometry: {
+
+    '--sn-space-xs': '4px',
+    '--sn-space-sm': '8px',
+    '--sn-space-md': '12px',
+    '--sn-space-lg': '16px',
+    '--sn-space-xl': '24px',
+
+
+    '--sn-node-radius': 'var(--sn-space-md)',
+    '--sn-comment-radius': 'var(--sn-space-sm)',
+    '--sn-socket-size': 'var(--sn-space-md)',
+    '--sn-socket-border-width': '2px',
+    '--sn-grid-size': 'var(--sn-space-xl)',
+    '--sn-conn-width': '2',
+
+
+    '--sn-font': "'Inter', sans-serif",
+    '--sn-font-size': '13px',
+
+
+    '--sn-shadow-geometry': '0 4px 16px',
+    '--sn-node-shadow': 'var(--sn-shadow-geometry) var(--sn-shadow-color, rgba(0, 0, 0, 0.3))',
+  },
+};
+
+/** @type {SkinDefinition} */
+export let COMPACT_SKIN = {
+  name: 'compact',
+  geometry: {
+
+    '--sn-space-xs': '3px',
+    '--sn-space-sm': '5px',
+    '--sn-space-md': '8px',
+    '--sn-space-lg': '12px',
+    '--sn-space-xl': '16px',
+
+
+    '--sn-node-radius': 'var(--sn-space-md)',
+    '--sn-comment-radius': 'var(--sn-space-sm)',
+    '--sn-socket-size': 'var(--sn-space-md)',
+    '--sn-socket-border-width': '1.5px',
+    '--sn-grid-size': 'var(--sn-space-xl)',
+    '--sn-conn-width': '1.5',
+
+
+    '--sn-font': "'Inter', sans-serif",
+    '--sn-font-size': '12px',
+
+
+    '--sn-shadow-geometry': '0 2px 8px',
+    '--sn-node-shadow': 'var(--sn-shadow-geometry) var(--sn-shadow-color, rgba(0, 0, 0, 0.2))',
+  },
+};
+
+/** @type {SkinDefinition} */
+export let ROUNDED_SKIN = {
+  name: 'rounded',
+  geometry: {
+
+    '--sn-space-xs': '5px',
+    '--sn-space-sm': '10px',
+    '--sn-space-md': '14px',
+    '--sn-space-lg': '20px',
+    '--sn-space-xl': '28px',
+
+
+    '--sn-node-radius': 'var(--sn-space-lg)',
+    '--sn-comment-radius': 'var(--sn-space-md)',
+    '--sn-socket-size': 'var(--sn-space-md)',
+    '--sn-socket-border-width': '2.5px',
+    '--sn-grid-size': 'var(--sn-space-xl)',
+    '--sn-conn-width': '2.5',
+
+
+    '--sn-font': "'Space Grotesk', sans-serif",
+    '--sn-font-size': '14px',
+
+
+    '--sn-shadow-geometry': '0 6px 24px',
+    '--sn-node-shadow': 'var(--sn-shadow-geometry) var(--sn-shadow-color, rgba(0, 0, 0, 0.25))',
+  },
+};
+
+/**
+ * Apply skin to element
+ * @param {HTMLElement} element
+ * @param {SkinDefinition} skin
+ */
+export function applySkin(element, skin) {
+  for (const [key, value] of Object.entries(skin.geometry)) {
+    element.style.setProperty(key, value);
+  }
+}

package/themes/Theme.js

@@ -0,0 +1,82 @@
+/**
+ * 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
+ */
+
+
+export { DEFAULT_PROVIDER_THEME } from './default-provider.js';
+export { DEFAULT_PROVIDER_THEME as DEFAULT_THEME } from './default-provider.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',
+  '--layout-gap-bg': '--sn-layout-gap-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-layout-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);
+  }
+
+  for (const [layoutToken, snToken] of Object.entries(LAYOUT_TOKEN_MAP)) {
+    let value = theme.tokens[snToken];
+    if (value) {
+      element.style.setProperty(layoutToken, value);
+    }
+  }
+
+  if (theme.extraCSS) {
+    let existing = element.querySelector('style[data-theme]');
+    if (existing) existing.remove();
+    let 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) {
+  let tokens = {};
+  let 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/themes/carbon.js

@@ -0,0 +1,135 @@
+/**
+ * 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 let CARBON = {
+  name: 'carbon',
+  tokens: {
+
+
+    '--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',
+
+
+    '--sn-danger-color': '#f44336',
+    '--sn-success-color': '#4caf50',
+    '--sn-warning-color': '#ff9800',
+
+
+    '--sn-bg': '#1a1a1a',
+    '--sn-grid-dot': 'rgba(255, 255, 255, 0.06)',
+    '--sn-grid-size': '20px',
+
+
+    '--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',
+
+
+    '--sn-font': "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+    '--sn-text': '#f0f0f0',
+    '--sn-text-dim': '#999999',
+
+
+    '--sn-socket-size': '12px',
+    '--sn-socket-border-width': '2px',
+
+
+    '--sn-conn-color': '#4c8bf5',
+    '--sn-conn-width': '2',
+    '--sn-conn-selected': '#f44336',
+
+
+    '--sn-cat-server': '#4c8bf5',
+    '--sn-cat-instance': '#4caf50',
+    '--sn-cat-control': '#ff9800',
+    '--sn-cat-data': '#9c27b0',
+    '--sn-cat-default': '#666666',
+    '--sn-subgraph-accent': 'var(--sn-cat-data)',
+
+
+    '--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)',
+
+
+    '--sn-comment-bg': 'rgba(255, 255, 255, 0.04)',
+    '--sn-comment-border': 'rgba(255, 255, 255, 0.08)',
+    '--sn-comment-radius': '4px',
+
+
+    '--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',
+
+
+    '--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 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/themes/dark.js

@@ -0,0 +1,140 @@
+/**
+ * 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 let DARK_DEFAULT = {
+  name: 'dark-default',
+  tokens: {
+
+
+    '--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',
+
+
+    '--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(0, 0%, 100%, var(--sn-alpha-faint))',
+    '--sn-grid-size': '20px',
+
+
+    '--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%)',
+
+
+    '--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))',
+
+
+    '--sn-socket-size': '12px',
+    '--sn-socket-border-width': '2px',
+
+
+    '--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))',
+
+
+    '--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))',
+    '--sn-subgraph-accent': 'var(--sn-cat-data)',
+
+
+    '--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))',
+
+
+    '--sn-comment-bg': 'hsla(0, 0%, 100%, 0.05)',
+    '--sn-comment-border': 'hsla(0, 0%, 100%, 0.1)',
+    '--sn-comment-radius': '6px',
+
+
+    '--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))',
+
+
+    '--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 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',
+  },
+};