project-graph-mcp 2.2.6 → 2.3.0

package/vendor/symbiote-node/shapes/SVGShape.js

@@ -0,0 +1,494 @@
+/**
+ * SVGShape — universal shape from any SVG path
+ *
+ * Uses SVGPathElement.getPointAtLength() for dynamic connector placement.
+ * Any SVG icon path can become a node shape — the outer contour defines
+ * the visual fill and connector positions are computed along the perimeter.
+ *
+ * Port placement strategy:
+ *   - Inputs placed on left portion of path perimeter
+ *   - Outputs placed on right portion of path perimeter
+ *   - Connector angle = normal from center → edge point
+ *   - Aspect ratio of original SVG is preserved (xMidYMid meet)
+ *
+ * @module symbiote-node/shapes/SVGShape
+ */
+
+import { NodeShape } from './NodeShape.js';
+
+/**
+ * Offscreen SVG namespace for path computation
+ * @type {SVGSVGElement|null}
+ */
+let _offscreenSVG = null;
+
+/**
+ * Get or create an offscreen SVG element for path calculations
+ * @returns {SVGSVGElement}
+ */
+function getOffscreenSVG() {
+  if (_offscreenSVG) return _offscreenSVG;
+  if (typeof document === 'undefined') return null;
+  _offscreenSVG = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+  _offscreenSVG.style.position = 'absolute';
+  _offscreenSVG.style.width = '0';
+  _offscreenSVG.style.height = '0';
+  _offscreenSVG.style.overflow = 'hidden';
+  document.body.appendChild(_offscreenSVG);
+  return _offscreenSVG;
+}
+
+/**
+ * Compute scaling params for viewBox → element mapping
+ * Preserves aspect ratio (equivalent to SVG preserveAspectRatio="xMidYMid meet")
+ *
+ * @param {number[]} vb - [x, y, w, h] viewBox
+ * @param {{ width: number, height: number }} size - element size
+ * @returns {{ scale: number, offsetX: number, offsetY: number }}
+ */
+function computeMapping(vb, size) {
+  const [vx, vy, vw, vh] = vb;
+  const scale = Math.min(size.width / vw, size.height / vh);
+  const renderedW = vw * scale;
+  const renderedH = vh * scale;
+  return {
+    scale,
+    offsetX: (size.width - renderedW) / 2 - vx * scale,
+    offsetY: (size.height - renderedH) / 2 - vy * scale,
+  };
+}
+
+export class SVGShape extends NodeShape {
+  /** @type {string} */
+  name;
+
+  /** @type {string} - SVG path d attribute */
+  pathData;
+
+  /** @type {string} - viewBox of original SVG */
+  viewBox;
+
+  /** @type {number[]} - parsed viewBox [x, y, w, h] */
+  #vb;
+
+  /** @type {boolean} - whether shape has standard header */
+  #header;
+
+  /** @type {{ minWidth: number, minHeight: number }} */
+  #minSize;
+
+  /** @type {Map<string, {x:number,y:number,angle:number}>} - position cache */
+  #posCache = new Map();
+
+  /**
+   * @param {string} name - Shape identifier
+   * @param {object} options
+   * @param {string} options.pathData - SVG path d attribute
+   * @param {string} [options.viewBox='0 0 24 24'] - Original SVG viewBox
+   * @param {boolean} [options.header=false] - Show header/controls
+   * @param {{ minWidth?: number, minHeight?: number }} [options.minSize]
+   */
+  constructor(name, { pathData, viewBox = '0 0 24 24', header = false, minSize = {} }) {
+    super();
+    this.name = name;
+    this.pathData = pathData;
+    this.viewBox = viewBox;
+    this.#vb = viewBox.split(' ').map(Number);
+    this.#header = header;
+    this.#minSize = {
+      minWidth: minSize.minWidth || 100,
+      minHeight: minSize.minHeight || 100,
+    };
+  }
+
+  /**
+   * Scale a point from viewBox coordinates to element pixel coordinates
+   * Uses aspect-ratio-preserving mapping (xMidYMid meet)
+   *
+   * @param {number} px - x in viewBox
+   * @param {number} py - y in viewBox
+   * @param {{ width: number, height: number }} size - element size
+   * @returns {{ x: number, y: number }}
+   */
+  #scalePoint(px, py, size) {
+    const { scale, offsetX, offsetY } = computeMapping(this.#vb, size);
+    return {
+      x: px * scale + offsetX,
+      y: py * scale + offsetY,
+    };
+  }
+
+  /**
+   * Get center of SVG shape in viewBox coordinates
+   * @returns {{ x: number, y: number }}
+   */
+  #getCenter() {
+    const [vx, vy, vw, vh] = this.#vb;
+    return { x: vx + vw / 2, y: vy + vh / 2 };
+  }
+
+  /**
+   * Get a path element for computations (uses offscreen SVG)
+   * @returns {SVGPathElement|null}
+   */
+  #getPathElement() {
+    const svg = getOffscreenSVG();
+    if (!svg) return null;
+    let pathEl = svg.querySelector(`[data-shape="${this.name}"]`);
+    if (!pathEl) {
+      pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      pathEl.setAttribute('d', this.pathData);
+      pathEl.setAttribute('data-shape', this.name);
+      svg.appendChild(pathEl);
+    }
+    return pathEl;
+  }
+
+  /**
+   * Find the point on the SVG path that a ray from center at a given angle hits.
+   * Uses dense sampling along the path perimeter and finds the point
+   * whose angle from center best matches the target angle.
+   *
+   * @param {number} targetAngle - angle in radians from center
+   * @param {SVGPathElement} pathEl
+   * @returns {{ x: number, y: number }} - point in viewBox coordinates
+   */
+  #findPointAtAngle(targetAngle, pathEl) {
+    const totalLen = pathEl.getTotalLength();
+    const center = this.#getCenter();
+
+    // Phase 1: coarse scan (128 samples)
+    let bestDist = Infinity;
+    let bestLen = 0;
+    const COARSE = 128;
+
+    for (let i = 0; i <= COARSE; i++) {
+      const len = (totalLen * i) / COARSE;
+      const pt = pathEl.getPointAtLength(len);
+      const angle = Math.atan2(pt.y - center.y, pt.x - center.x);
+      let diff = Math.abs(angle - targetAngle);
+      if (diff > Math.PI) diff = 2 * Math.PI - diff;
+      if (diff < bestDist) {
+        bestDist = diff;
+        bestLen = len;
+      }
+    }
+
+    // Phase 2: refine with binary-like search around bestLen
+    const searchRadius = totalLen / COARSE;
+    const FINE = 32;
+    const startLen = Math.max(0, bestLen - searchRadius);
+    const endLen = Math.min(totalLen, bestLen + searchRadius);
+
+    for (let i = 0; i <= FINE; i++) {
+      const len = startLen + ((endLen - startLen) * i) / FINE;
+      const pt = pathEl.getPointAtLength(len);
+      const angle = Math.atan2(pt.y - center.y, pt.x - center.x);
+      let diff = Math.abs(angle - targetAngle);
+      if (diff > Math.PI) diff = 2 * Math.PI - diff;
+      if (diff < bestDist) {
+        bestDist = diff;
+        bestLen = len;
+      }
+    }
+
+    return pathEl.getPointAtLength(bestLen);
+  }
+
+  /**
+   * Get socket position on the shape outline.
+   * Results are cached — same params always return same position.
+   *
+   * @param {'input'|'output'} side
+   * @param {number} index - ordinal index of this port
+   * @param {number} total - total ports on this side
+   * @param {{ width: number, height: number }} size - node dimensions
+   * @returns {{ x: number, y: number, angle: number }}
+   */
+  getSocketPosition(side, index, total, size) {
+    // Cache key: position depends on side, index, total, and element size
+    const key = `${side}|${index}|${total}|${size.width}|${size.height}`;
+    if (this.#posCache.has(key)) return this.#posCache.get(key);
+
+    const pathEl = this.#getPathElement();
+
+    if (!pathEl) {
+      const y = size.height * (index + 1) / (total + 1);
+      const result = side === 'input'
+        ? { x: 0, y, angle: 180 }
+        : { x: size.width, y, angle: 0 };
+      this.#posCache.set(key, result);
+      return result;
+    }
+
+    // Distribute ports along the relevant side of the path perimeter
+    const centerAngle = side === 'input' ? Math.PI : 0;
+    const arcSpan = Math.PI * 0.6; // 108° spread
+    let targetAngle;
+
+    if (total === 1) {
+      targetAngle = centerAngle;
+    } else {
+      const startAngle = centerAngle - arcSpan / 2;
+      const step = arcSpan / (total - 1);
+      targetAngle = startAngle + step * index;
+    }
+
+    const pt = this.#findPointAtAngle(targetAngle, pathEl);
+    const scaled = this.#scalePoint(pt.x, pt.y, size);
+
+    // Compute outward surface normal (same as getEdgePoint)
+    const totalLen = pathEl.getTotalLength();
+    const center = this.#getCenter();
+    let bestLen = 0, bestDist = Infinity;
+    const SCAN = 128;
+    for (let i = 0; i <= SCAN; i++) {
+      const len = (totalLen * i) / SCAN;
+      const p = pathEl.getPointAtLength(len);
+      const dist = (p.x - pt.x) ** 2 + (p.y - pt.y) ** 2;
+      if (dist < bestDist) { bestDist = dist; bestLen = len; }
+    }
+    const delta = 0.5;
+    const prevPt = pathEl.getPointAtLength(Math.max(0, bestLen - delta));
+    const nextPt = pathEl.getPointAtLength(Math.min(totalLen, bestLen + delta));
+    const tx = nextPt.x - prevPt.x, ty = nextPt.y - prevPt.y;
+    let nx = -ty, ny = tx;
+    const radX = pt.x - center.x, radY = pt.y - center.y;
+    if (nx * radX + ny * radY < 0) { nx = ty; ny = -tx; }
+    const angleDeg = Math.atan2(ny, nx) * 180 / Math.PI;
+
+    const result = { x: scaled.x, y: scaled.y, angle: angleDeg };
+    this.#posCache.set(key, result);
+    return result;
+  }
+
+  /**
+   * Get edge point at a specific angle (direction toward target node).
+   * Used for dynamic connectors that slide along the perimeter.
+   *
+   * @param {number} angle - angle in radians from center to target
+   * @param {{ width: number, height: number }} size - element dimensions
+   * @returns {{ x: number, y: number, angle: number }}
+   */
+  getEdgePoint(angle, size) {
+    // Round to 3 decimal places (~0.06° precision, invisible jitter)
+    const rounded = Math.round(angle * 1000) / 1000;
+    const key = `edge|${rounded}|${size.width}|${size.height}`;
+    if (this.#posCache.has(key)) return this.#posCache.get(key);
+
+    const pathEl = this.#getPathElement();
+    if (!pathEl) {
+      const cx = size.width / 2;
+      const cy = size.height / 2;
+      return { x: cx + Math.cos(angle) * cx, y: cy + Math.sin(angle) * cy, angle: angle * 180 / Math.PI };
+    }
+
+    const pt = this.#findPointAtAngle(angle, pathEl);
+    const scaled = this.#scalePoint(pt.x, pt.y, size);
+
+    // Compute outward surface normal (perpendicular to edge), NOT radial angle.
+    // For polygons, the radial angle varies across a flat edge,
+    // but the surface normal is constant — this gives correct perpendicular stubs.
+    const totalLen = pathEl.getTotalLength();
+    const center = this.#getCenter();
+
+    // Find the path length for this point (re-use findPointAtAngle's logic)
+    let bestLen = 0, bestDist = Infinity;
+    const SCAN = 128;
+    for (let i = 0; i <= SCAN; i++) {
+      const len = (totalLen * i) / SCAN;
+      const p = pathEl.getPointAtLength(len);
+      const dist = (p.x - pt.x) ** 2 + (p.y - pt.y) ** 2;
+      if (dist < bestDist) { bestDist = dist; bestLen = len; }
+    }
+
+    // Sample neighbors to get tangent vector
+    const delta = 0.5; // small step along path
+    const prevLen = Math.max(0, bestLen - delta);
+    const nextLen = Math.min(totalLen, bestLen + delta);
+    const prevPt = pathEl.getPointAtLength(prevLen);
+    const nextPt = pathEl.getPointAtLength(nextLen);
+
+    // Tangent = direction along edge
+    const tx = nextPt.x - prevPt.x;
+    const ty = nextPt.y - prevPt.y;
+
+    // Normal = tangent rotated 90° (two candidates: +90° and -90°)
+    // Pick the one pointing outward (away from center)
+    let nx = -ty, ny = tx; // candidate 1: rotate -90°
+    const radX = pt.x - center.x;
+    const radY = pt.y - center.y;
+    // Dot product with radial vector — if negative, flip
+    if (nx * radX + ny * radY < 0) {
+      nx = ty; ny = -tx; // candidate 2: rotate +90°
+    }
+
+    const angleDeg = Math.atan2(ny, nx) * 180 / Math.PI;
+
+    const result = { x: scaled.x, y: scaled.y, angle: angleDeg };
+
+    // Bounded cache: evict oldest when exceeding 360 entries
+    if (this.#posCache.size > 360) {
+      const first = this.#posCache.keys().next().value;
+      this.#posCache.delete(first);
+    }
+    this.#posCache.set(key, result);
+    return result;
+  }
+
+  /**
+   * Get a pin position on a specific side of the shape.
+   * 
+   * Side-based placement: pins are placed along a side edge (top/right/bottom/left).
+   * The position within the side is controlled by t (0 = start, 1 = end).
+   * 
+   * @param {'top'|'right'|'bottom'|'left'} side - which side to place pin on
+   * @param {number} t - position along the side (0..1), 0.5 = center
+   * @param {{ width: number, height: number }} size - element dimensions
+   * @returns {{ x: number, y: number, angle: number }} - angle is outward normal in degrees
+   */
+  getSidePosition(side, t, size) {
+    const key = `side|${side}|${(t * 100) | 0}|${size.width}|${size.height}`;
+    if (this.#posCache.has(key)) return this.#posCache.get(key);
+
+    // Outward normal angles for each side (screen coords: Y down)
+    const NORMALS = { top: -90, right: 0, bottom: 90, left: 180 };
+    const angleDeg = NORMALS[side];
+
+    // For shapes with pathData: sample points on the side's angular range
+    // and interpolate along the edge
+    const pathEl = this.#getPathElement();
+    if (pathEl) {
+      // Angular ranges for each side (radians, screen coords)
+      // Generous ranges that cover the flat + diagonal edges
+      const RANGES = {
+        right:  { from: -Math.PI / 4,     to: Math.PI / 4 },
+        bottom: { from: Math.PI / 4,      to: 3 * Math.PI / 4 },
+        left:   { from: 3 * Math.PI / 4,  to: 5 * Math.PI / 4 },
+        top:    { from: -3 * Math.PI / 4, to: -Math.PI / 4 },
+      };
+
+      const range = RANGES[side];
+      // Use side-level caching for points to prevent SVG DOM explosion
+      const sideKey = `sidepts|${side}|${size.width}|${size.height}`;
+      let sidePoints;
+      
+      if (this.#posCache.has(sideKey)) {
+        sidePoints = this.#posCache.get(sideKey);
+      } else {
+        sidePoints = [];
+        const SAMPLES = 16;
+        for (let i = 0; i <= SAMPLES; i++) {
+          const a = range.from + (range.to - range.from) * (i / SAMPLES);
+          const pt = this.#findPointAtAngle(a, pathEl);
+          const sp = this.#scalePoint(pt.x, pt.y, size);
+          sidePoints.push(sp);
+        }
+        this.#posCache.set(sideKey, sidePoints);
+      }
+
+      // Use inset range (20%-80%) to avoid placing on corners
+      const MARGIN = 0.2;
+      const effectiveT = MARGIN + t * (1 - 2 * MARGIN);
+      const idx = effectiveT * (sidePoints.length - 1);
+      const lo = Math.floor(idx);
+      const hi = Math.min(lo + 1, sidePoints.length - 1);
+      const frac = idx - lo;
+
+      const x = sidePoints[lo].x + (sidePoints[hi].x - sidePoints[lo].x) * frac;
+      const y = sidePoints[lo].y + (sidePoints[hi].y - sidePoints[lo].y) * frac;
+
+      const result = { x, y, angle: angleDeg };
+      this.#posCache.set(key, result);
+      return result;
+    }
+
+    // Fallback for shapes without path: rectangle approximation
+    let x, y;
+    switch (side) {
+      case 'top':    x = size.width * (0.2 + t * 0.6); y = 0; break;
+      case 'right':  x = size.width; y = size.height * (0.2 + t * 0.6); break;
+      case 'bottom': x = size.width * (0.2 + t * 0.6); y = size.height; break;
+      case 'left':   x = 0; y = size.height * (0.2 + t * 0.6); break;
+    }
+
+    const result = { x, y, angle: angleDeg };
+    this.#posCache.set(key, result);
+    return result;
+  }
+
+  getClipPath(size) {
+    return null; // We use SVG background layer instead of clip-path
+  }
+
+  getOutlinePath(size) {
+    return this.pathData;
+  }
+
+  getBorderRadius() {
+    return '0';
+  }
+
+  get hasHeader() {
+    return this.#header;
+  }
+
+  get hasControls() {
+    return this.#header;
+  }
+
+  getMinSize() {
+    return this.#minSize;
+  }
+}
+
+// --- Preset SVG shapes (Material Symbols paths) ---
+
+/**
+ * Register an SVG shape from a path string
+ * @param {string} name
+ * @param {string} pathData - SVG d attribute
+ * @param {object} [options]
+ */
+export function createSVGShape(name, pathData, options = {}) {
+  return new SVGShape(name, { pathData, ...options });
+}
+
+// Common icon paths from Material Symbols (24x24 viewBox)
+export const SVG_PRESETS = {
+  // Hexagon
+  hexagon: 'M12 2L22 8.5V15.5L12 22L2 15.5V8.5Z',
+
+  // Pentagon
+  pentagon: 'M12 2L22 9.27L18.18 21H5.82L2 9.27Z',
+
+  // Star (5-pointed)
+  star: 'M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26Z',
+
+  // Cloud
+  cloud: 'M19.35 10.04A7.49 7.49 0 0012 4C9.11 4 6.6 5.64 5.35 8.04A5.994 5.994 0 000 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z',
+
+  // Shield
+  shield: 'M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z',
+
+  // Octagon
+  octagon: 'M7.86 2H16.14L22 7.86V16.14L16.14 22H7.86L2 16.14V7.86Z',
+
+  // Parallelogram
+  parallelogram: 'M6 2H22L18 22H2Z',
+
+  // Trapezoid
+  trapezoid: 'M4 22H20L23 2H1Z',
+
+  // Cylinder (approximation)
+  cylinder: 'M4 6C4 4 8 2 12 2S20 4 20 6V18C20 20 16 22 12 22S4 20 4 18Z',
+
+  // Database
+  database: 'M12 3C7.58 3 4 4.79 4 7V17C4 19.21 7.59 21 12 21S20 19.21 20 17V7C20 4.79 16.42 3 12 3Z',
+
+  // Lightning bolt
+  bolt: 'M7 2V13H10V22L17 10H13L17 2Z',
+
+  // Heart
+  heart: 'M12 21.35L10.55 20.03C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3C9.24 3 10.91 3.81 12 5.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5C22 12.28 18.6 15.36 13.45 20.04L12 21.35Z',
+};

package/vendor/symbiote-node/shapes/index.js

@@ -0,0 +1,53 @@
+/**
+ * Shape registry — maps shape names to implementations
+ * @module symbiote-node/shapes/index
+ */
+
+import { NodeShape } from './NodeShape.js';
+import { RectShape } from './RectShape.js';
+import { PillShape } from './PillShape.js';
+import { CircleShape } from './CircleShape.js';
+import { DiamondShape } from './DiamondShape.js';
+import { CommentShape } from './CommentShape.js';
+import { SVGShape, createSVGShape, SVG_PRESETS } from './SVGShape.js';
+
+/** @type {Map<string, NodeShape>} */
+const registry = new Map();
+
+// Register built-in shapes
+const RECT = new RectShape();
+const PILL = new PillShape();
+const CIRCLE = new CircleShape();
+const DIAMOND = new DiamondShape();
+const COMMENT = new CommentShape();
+
+registry.set('rect', RECT);
+registry.set('pill', PILL);
+registry.set('circle', CIRCLE);
+registry.set('diamond', DIAMOND);
+registry.set('comment', COMMENT);
+
+// Register SVG preset shapes
+for (const [name, pathData] of Object.entries(SVG_PRESETS)) {
+  registry.set(name, createSVGShape(name, pathData));
+}
+
+/**
+ * Get shape by name
+ * @param {string} name
+ * @returns {NodeShape}
+ */
+export function getShape(name) {
+  return registry.get(name) || RECT;
+}
+
+/**
+ * Register custom shape
+ * @param {string} name
+ * @param {NodeShape} shape
+ */
+export function registerShape(name, shape) {
+  registry.set(name, shape);
+}
+
+export { NodeShape, RectShape, PillShape, CircleShape, DiamondShape, CommentShape, SVGShape, createSVGShape, SVG_PRESETS };

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

@@ -0,0 +1,32 @@
+/**
+ * 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
+ */
+
+// Re-export all built-in palettes
+export { DARK_PALETTE } from './dark.js';
+export { LIGHT_PALETTE } from './light.js';
+export { SYNTHWAVE_PALETTE } from './synthwave.js';
+export { GREY_PALETTE } from './grey.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/vendor/symbiote-node/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 const MODERN_SKIN = {
+  name: 'modern',
+  geometry: {
+    // === Spacing scale (atomic — AI changes these) ===
+    '--sn-space-xs': '4px',
+    '--sn-space-sm': '8px',
+    '--sn-space-md': '12px',
+    '--sn-space-lg': '16px',
+    '--sn-space-xl': '24px',
+
+    // === Semantic geometry (references scale) ===
+    '--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',
+
+    // === Typography ===
+    '--sn-font': "'Inter', sans-serif",
+    '--sn-font-size': '13px',
+
+    // === Shadow geometry (color comes from Palette) ===
+    '--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 const COMPACT_SKIN = {
+  name: 'compact',
+  geometry: {
+    // === Spacing scale ===
+    '--sn-space-xs': '3px',
+    '--sn-space-sm': '5px',
+    '--sn-space-md': '8px',
+    '--sn-space-lg': '12px',
+    '--sn-space-xl': '16px',
+
+    // === Semantic geometry ===
+    '--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',
+
+    // === Typography ===
+    '--sn-font': "'Inter', sans-serif",
+    '--sn-font-size': '12px',
+
+    // === Shadow geometry ===
+    '--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 const ROUNDED_SKIN = {
+  name: 'rounded',
+  geometry: {
+    // === Spacing scale ===
+    '--sn-space-xs': '5px',
+    '--sn-space-sm': '10px',
+    '--sn-space-md': '14px',
+    '--sn-space-lg': '20px',
+    '--sn-space-xl': '28px',
+
+    // === Semantic geometry ===
+    '--sn-node-radius': 'var(--sn-space-lg)',       // larger radius for "rounded" feel
+    '--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',
+
+    // === Typography ===
+    '--sn-font': "'Space Grotesk', sans-serif",
+    '--sn-font-size': '14px',
+
+    // === Shadow geometry ===
+    '--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);
+  }
+}