symbiote-ui 0.3.0-alpha.4

package/schemas/project-transaction-v1.json

@@ -0,0 +1,114 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://rnd-pro.github.io/symbiote-node/schemas/project-transaction-v1.json",
+  "title": "Symbiote Project Transaction",
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["version", "id", "operations"],
+  "properties": {
+    "version": { "const": "project-transaction-v1" },
+    "id": { "type": "string", "minLength": 1 },
+    "targetProject": { "type": "string" },
+    "operations": {
+      "type": "array",
+      "items": { "$ref": "#/$defs/operation" },
+      "minItems": 1
+    },
+    "metadata": {
+      "type": "object",
+      "additionalProperties": true
+    }
+  },
+  "$defs": {
+    "operation": {
+      "oneOf": [
+        { "$ref": "#/$defs/graphAddNodeOperation" },
+        { "$ref": "#/$defs/graphAddEdgeOperation" },
+        { "$ref": "#/$defs/layoutAddPanelOperation" },
+        { "$ref": "#/$defs/layoutSetRootOperation" },
+        { "$ref": "#/$defs/layoutUpdateNodeOperation" },
+        { "$ref": "#/$defs/themeSetModifierOperation" }
+      ]
+    },
+    "graphAddNodeOperation": {
+      "type": "object",
+      "additionalProperties": true,
+      "required": ["type", "graph", "node"],
+      "properties": {
+        "type": { "const": "graph.addNode" },
+        "graph": { "type": "string", "minLength": 1 },
+        "node": { "$ref": "graph-model-v1.json#/$defs/node" }
+      }
+    },
+    "graphAddEdgeOperation": {
+      "type": "object",
+      "additionalProperties": true,
+      "required": ["type", "graph", "edge"],
+      "properties": {
+        "type": { "const": "graph.addEdge" },
+        "graph": { "type": "string", "minLength": 1 },
+        "edge": { "$ref": "graph-model-v1.json#/$defs/edge" }
+      }
+    },
+    "layoutAddPanelOperation": {
+      "type": "object",
+      "additionalProperties": true,
+      "required": ["type", "layout", "panel"],
+      "properties": {
+        "type": { "const": "layout.addPanel" },
+        "layout": { "type": "string", "minLength": 1 },
+        "parentId": { "type": "string", "minLength": 1 },
+        "panel": { "$ref": "runtime-ui-v1.json#/$defs/node" }
+      }
+    },
+    "layoutSetRootOperation": {
+      "type": "object",
+      "additionalProperties": true,
+      "required": ["type", "layout", "root"],
+      "properties": {
+        "type": { "const": "layout.setRoot" },
+        "layout": { "type": "string", "minLength": 1 },
+        "root": { "$ref": "runtime-ui-v1.json#/$defs/node" }
+      }
+    },
+    "layoutUpdateNodeOperation": {
+      "type": "object",
+      "additionalProperties": true,
+      "required": ["type", "layout", "nodeId", "patch"],
+      "properties": {
+        "type": { "const": "layout.updateNode" },
+        "layout": { "type": "string", "minLength": 1 },
+        "nodeId": { "type": "string", "minLength": 1 },
+        "patch": {
+          "type": "object",
+          "additionalProperties": false,
+          "minProperties": 1,
+          "properties": {
+            "layout": {
+              "type": "object",
+              "additionalProperties": false,
+              "minProperties": 1,
+              "properties": {
+                "rect": { "type": "object", "additionalProperties": true },
+                "weight": { "type": "number" }
+              }
+            },
+            "props": { "type": "object", "additionalProperties": true },
+            "attrs": { "type": "object", "additionalProperties": true }
+          }
+        }
+      }
+    },
+    "themeSetModifierOperation": {
+      "type": "object",
+      "additionalProperties": true,
+      "required": ["type", "theme", "name", "value"],
+      "properties": {
+        "type": { "const": "theme.setModifier" },
+        "theme": { "type": "string", "minLength": 1 },
+        "name": { "type": "string", "minLength": 1 },
+        "value": { "type": ["number", "string", "boolean"] }
+      }
+    }
+  }
+}

package/schemas/runtime-ui-v1.json

@@ -0,0 +1,80 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://rnd-pro.github.io/symbiote-node/schemas/runtime-ui-v1.json",
+  "title": "Symbiote Node Runtime UI Tree",
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["version", "root"],
+  "properties": {
+    "version": { "const": "runtime-ui-v1" },
+    "metadata": { "type": "object", "additionalProperties": true },
+    "componentRegistries": {
+      "type": "array",
+      "items": { "$ref": "#/$defs/componentRegistry" },
+      "uniqueItems": true
+    },
+    "theme": { "$ref": "#/$defs/themeRef" },
+    "root": { "$ref": "#/$defs/node" }
+  },
+  "$defs": {
+    "componentRegistry": {
+      "type": "object",
+      "additionalProperties": true,
+      "required": ["id"],
+      "properties": {
+        "id": { "type": "string", "minLength": 1 },
+        "provider": { "type": "string", "minLength": 1 },
+        "schema": { "type": "string", "minLength": 1 }
+      }
+    },
+    "themeRef": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "name": { "type": "string" },
+        "overrides": { "type": "object", "additionalProperties": { "type": "string" } }
+      }
+    },
+    "node": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["component"],
+      "properties": {
+        "id": { "type": "string" },
+        "component": { "type": "string", "minLength": 1 },
+        "componentRegistry": { "type": "string", "minLength": 1 },
+        "props": { "type": "object", "additionalProperties": true },
+        "attrs": { "type": "object", "additionalProperties": { "type": ["string", "number", "boolean"] } },
+        "layout": { "$ref": "#/$defs/layout" },
+        "bindings": { "type": "object", "additionalProperties": { "type": "string" } },
+        "events": { "type": "object", "additionalProperties": { "type": "string" } },
+        "theme": { "$ref": "#/$defs/themeRef" },
+        "children": {
+          "type": "array",
+          "items": { "$ref": "#/$defs/node" }
+        }
+      }
+    },
+    "layout": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "direction": { "enum": ["horizontal", "vertical"] },
+        "weight": { "type": "number", "minimum": 0 },
+        "rect": { "$ref": "#/$defs/relativeRect" },
+        "area": { "type": "string", "minLength": 1 }
+      }
+    },
+    "relativeRect": {
+      "type": "object",
+      "additionalProperties": false,
+      "required": ["x", "y", "width", "height"],
+      "properties": {
+        "x": { "type": "number", "minimum": 0, "maximum": 1 },
+        "y": { "type": "number", "minimum": 0, "maximum": 1 },
+        "width": { "type": "number", "minimum": 0, "maximum": 1 },
+        "height": { "type": "number", "minimum": 0, "maximum": 1 }
+      }
+    }
+  }
+}

package/schemas/theme-rule-block-v1.json

@@ -0,0 +1,73 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://rnd-pro.github.io/symbiote-node/schemas/theme-rule-block-v1.json",
+  "title": "Symbiote Node Theme Rule Block",
+  "type": "object",
+  "additionalProperties": false,
+  "required": ["name", "kind", "description"],
+  "properties": {
+    "name": { "type": "string", "minLength": 1 },
+    "theme": { "type": "string", "minLength": 1 },
+    "kind": {
+      "enum": [
+        "source-accent",
+        "color-cascade",
+        "geometry-cascade",
+        "typography-cascade",
+        "motion-effects",
+        "semantic-alias",
+        "component-alias"
+      ]
+    },
+    "description": { "type": "string", "minLength": 1 },
+    "parameters": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": ["name", "type", "description"],
+        "properties": {
+          "name": { "type": "string", "minLength": 1 },
+          "type": { "type": "string", "minLength": 1 },
+          "description": { "type": "string", "minLength": 1 },
+          "default": { "type": "string" },
+          "unit": { "type": "string" }
+        }
+      }
+    },
+    "inputs": {
+      "type": "array",
+      "items": { "type": "string", "minLength": 1 },
+      "uniqueItems": true
+    },
+    "outputs": {
+      "type": "array",
+      "items": { "type": "string", "minLength": 1 },
+      "uniqueItems": true
+    },
+    "formula": { "type": "string" },
+    "derivations": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": ["output", "expression"],
+        "properties": {
+          "output": { "type": "string", "minLength": 1 },
+          "inputs": {
+            "type": "array",
+            "items": { "type": "string", "minLength": 1 },
+            "uniqueItems": true
+          },
+          "expression": { "type": "string", "minLength": 1 },
+          "description": { "type": "string" }
+        }
+      }
+    },
+    "appliesTo": {
+      "type": "array",
+      "items": { "type": "string", "minLength": 1 },
+      "uniqueItems": true
+    }
+  }
+}

package/shapes/CircleShape.js

@@ -0,0 +1,79 @@
+/**
+ * CircleShape — circular hub node
+ *
+ * Sockets distributed around the perimeter of a circle.
+ * Inputs on left semicircle, outputs on right semicircle.
+ *
+ * @module symbiote-node/shapes/CircleShape
+ */
+
+import { NodeShape } from './NodeShape.js';
+
+export class CircleShape extends NodeShape {
+  name = 'circle';
+
+  getSocketPosition(side, index, total, { width, height }) {
+    let r = Math.min(width, height) / 2;
+    let cx = width / 2;
+    let cy = height / 2;
+
+
+    let arcSpan = Math.PI * 0.8;
+    let centerAngle = side === 'input' ? Math.PI : 0;
+    let startAngle = centerAngle - arcSpan / 2;
+    let step = total > 1 ? arcSpan / (total - 1) : 0;
+    let angle = startAngle + step * index;
+
+    return {
+      x: cx + r * Math.cos(angle),
+      y: cy + r * Math.sin(angle),
+      angle: (angle * 180) / Math.PI,
+    };
+  }
+
+  /**
+   * Get pin position on a specific side of the circle.
+   * Pins follow an arc in the corresponding quadrant.
+   *
+   * @param {'top'|'right'|'bottom'|'left'} side
+   * @param {number} t - position along the side (0..1)
+   * @param {{ width: number, height: number }} size
+   * @returns {{ x: number, y: number, angle: number }}
+   */
+  getSidePosition(side, t, size) {
+    let r = Math.min(size.width, size.height) / 2;
+    let cx = size.width / 2;
+    let cy = size.height / 2;
+
+
+    const CENTERS = { right: 0, bottom: Math.PI / 2, left: Math.PI, top: -Math.PI / 2 };
+    const ARC = Math.PI * 0.8;
+    const MARGIN = 0.2;
+    let effectiveT = MARGIN + t * (1 - 2 * MARGIN);
+
+    let center = CENTERS[side];
+    let a = center - ARC / 2 + ARC * effectiveT;
+
+    return {
+      x: cx + r * Math.cos(a),
+      y: cy + r * Math.sin(a),
+      angle: (a * 180) / Math.PI,
+    };
+  }
+
+  getBorderRadius() {
+    return '50%';
+  }
+
+  get hasHeader() {
+    return false;
+  }
+
+  get hasControls() {
+    return false;
+  }
+
+  getMinSize() {
+    return { minWidth: 80, minHeight: 80 };
+  }
+}

package/shapes/CommentShape.js

@@ -0,0 +1,35 @@
+/**
+ * CommentShape — wide annotation banner node
+ *
+ * No sockets, no header, no controls.
+ * Just text content with semi-transparent background.
+ * Used for annotations and documentation on the canvas.
+ *
+ * @module symbiote-node/shapes/CommentShape
+ */
+
+import { NodeShape } from './NodeShape.js';
+
+export class CommentShape extends NodeShape {
+  name = 'comment';
+
+  getSocketPosition() {
+    return { x: 0, y: 0, angle: 0 };
+  }
+
+  getBorderRadius() {
+    return 'var(--sn-comment-radius, 6px)';
+  }
+
+  get hasHeader() {
+    return false;
+  }
+
+  get hasControls() {
+    return false;
+  }
+
+  getMinSize() {
+    return { minWidth: 200, minHeight: 40 };
+  }
+}

package/shapes/DiamondShape.js

@@ -0,0 +1,130 @@
+/**
+ * DiamondShape — condition/decision rhombus node
+ *
+ * Input at top vertex, outputs distributed along bottom edges.
+ * Classic if/else, switch/case pattern.
+ *
+ * @module symbiote-node/shapes/DiamondShape
+ */
+
+import { NodeShape } from './NodeShape.js';
+
+export class DiamondShape extends NodeShape {
+  name = 'diamond';
+
+  getSocketPosition(side, index, total, { width, height }) {
+    let cx = width / 2;
+    let cy = height / 2;
+
+    if (side === 'input') {
+
+      if (total === 1) {
+        return { x: cx, y: 0, angle: 270 };
+      }
+
+      let t = (index + 1) / (total + 1);
+      return {
+        x: cx * (1 - t),
+        y: cy * t,
+        angle: 225 + 90 * (index / (total - 1)),
+      };
+    }
+
+
+    if (total === 1) {
+      return { x: cx, y: height, angle: 90 };
+    }
+    if (total === 2) {
+
+      return index === 0
+        ? { x: cx * 0.35, y: cy + cy * 0.65, angle: 225 }
+        : { x: width - cx * 0.35, y: cy + cy * 0.65, angle: 315 };
+    }
+
+    let t = (index + 1) / (total + 1);
+    return {
+      x: t < 0.5 ? cx * (1 - 2 * t) : cx + cx * (2 * t - 1),
+      y: t < 0.5 ? cy + cy * 2 * t : cy + cy * (2 - 2 * t),
+      angle: 135 + 90 * (index / (total - 1)),
+    };
+  }
+
+  /**
+   * Get pin position on a specific side of the diamond.
+   * Each side maps to two diagonal edges meeting at that cardinal vertex.
+   *
+   * @param {'top'|'right'|'bottom'|'left'} side
+   * @param {number} t - position along the side (0..1)
+   * @param {{ width: number, height: number }} size
+   * @returns {{ x: number, y: number, angle: number }}
+   */
+  getSidePosition(side, t, size) {
+    let cx = size.width / 2;
+    let cy = size.height / 2;
+    const NORMALS = { top: -90, right: 0, bottom: 90, left: 180 };
+    const MARGIN = 0.2;
+    let effectiveT = MARGIN + t * (1 - 2 * MARGIN);
+
+
+    let vertices = {
+      top: [
+        { x: 0, y: cy },
+        { x: cx, y: 0 },
+        { x: size.width, y: cy },
+      ],
+      right: [
+        { x: cx, y: 0 },
+        { x: size.width, y: cy },
+        { x: cx, y: size.height },
+      ],
+      bottom: [
+        { x: 0, y: cy },
+        { x: cx, y: size.height },
+        { x: size.width, y: cy },
+      ],
+      left: [
+        { x: cx, y: 0 },
+        { x: 0, y: cy },
+        { x: cx, y: size.height },
+      ],
+    };
+
+    let [p0, p1, p2] = vertices[side];
+
+
+    let x, y;
+    if (effectiveT <= 0.5) {
+      let segT = effectiveT * 2;
+      x = p0.x + (p1.x - p0.x) * segT;
+      y = p0.y + (p1.y - p0.y) * segT;
+    } else {
+      let segT = (effectiveT - 0.5) * 2;
+      x = p1.x + (p2.x - p1.x) * segT;
+      y = p1.y + (p2.y - p1.y) * segT;
+    }
+
+    return { x, y, angle: NORMALS[side] };
+  }
+
+  getBorderRadius() {
+    return '0';
+  }
+
+  getClipPath({ width, height }) {
+    let cx = width / 2;
+    let cy = height / 2;
+    return `polygon(${cx}px 0, ${width}px ${cy}px, ${cx}px ${height}px, 0 ${cy}px)`;
+  }
+
+  get hasHeader() {
+    return false;
+  }
+
+  get hasControls() {
+    return false;
+  }
+
+  getMinSize() {
+    return { minWidth: 100, minHeight: 100 };
+  }
+}

package/shapes/NodeShape.js

@@ -0,0 +1,79 @@
+/**
+ * NodeShape — abstract base class for node geometry
+ *
+ * Defines socket placement strategy and outline path for any node shape.
+ * Each shape determines WHERE sockets appear and at WHAT ANGLE
+ * connections should exit/enter.
+ *
+ * @module symbiote-node/shapes/NodeShape
+ */
+
+export class NodeShape {
+  /** @type {string} */
+  name = 'base';
+
+  /**
+   * Get socket position on the shape outline
+   * @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 }}
+   *   x, y are relative to node top-left corner
+   *   angle is in degrees: 0 = right, 90 = down, 180 = left, 270 = up
+   */
+  getSocketPosition(_side, _index, _total, _size) {
+    throw new Error('getSocketPosition must be implemented');
+  }
+
+  /**
+   * Get SVG outline path for the shape
+   * @param {{ width: number, height: number }} _size
+   * @returns {string} SVG path d attribute
+   */
+  getOutlinePath(_size) {
+    return '';
+  }
+
+  /**
+   * CSS border-radius value for the shape
+   * @param {{ width: number, height: number }} _size
+   * @returns {string}
+   */
+  getBorderRadius(_size) {
+    return 'var(--sn-node-radius)';
+  }
+
+  /**
+   * Whether this shape uses standard header+body layout
+   * @returns {boolean}
+   */
+  get hasHeader() {
+    return true;
+  }
+
+  /**
+   * Whether this shape supports embedded controls
+   * @returns {boolean}
+   */
+  get hasControls() {
+    return true;
+  }
+
+  /**
+   * CSS clip-path for non-rectangular shapes
+   * @param {{ width: number, height: number }} _size
+   * @returns {string|null} null = no clip
+   */
+  getClipPath(_size) {
+    return null;
+  }
+
+  /**
+   * Minimum node dimensions for this shape
+   * @returns {{ minWidth: number, minHeight: number }}
+   */
+  getMinSize() {
+    return { minWidth: 180, minHeight: 60 };
+  }
+}

package/shapes/PillShape.js

@@ -0,0 +1,91 @@
+/**
+ * PillShape — compact horizontal pill node
+ *
+ * Small node with rounded ends, label centered, 1 input left, 1 output right.
+ * No header, no controls. Ideal for simple operations (multiply, add, etc.)
+ *
+ * @module symbiote-node/shapes/PillShape
+ */
+
+import { NodeShape } from './NodeShape.js';
+
+export class PillShape extends NodeShape {
+  name = 'pill';
+
+  getSocketPosition(side, index, total, { width, height }) {
+    let r = height / 2;
+    if (total <= 1) {
+      return {
+        x: side === 'input' ? 0 : width,
+        y: height / 2,
+        angle: side === 'input' ? 180 : 0,
+      };
+    }
+
+
+    let arcAngle = Math.PI * 0.6;
+    let startAngle = side === 'input' ? Math.PI - arcAngle / 2 : -arcAngle / 2;
+    let step = arcAngle / (total - 1);
+    let a = startAngle + step * index;
+
+    let cx = side === 'input' ? r : width - r;
+    return {
+      x: cx + r * Math.cos(a),
+      y: height / 2 + r * Math.sin(a),
+      angle: (a * 180) / Math.PI,
+    };
+  }
+
+  /**
+   * Get pin position on a specific side of the pill.
+   * Left/right follow the rounded semicircle arc.
+   * Top/bottom follow the flat straight edge.
+   *
+   * @param {'top'|'right'|'bottom'|'left'} side
+   * @param {number} t - position along the side (0..1)
+   * @param {{ width: number, height: number }} size
+   * @returns {{ x: number, y: number, angle: number }}
+   */
+  getSidePosition(side, t, size) {
+    const NORMALS = { top: -90, right: 0, bottom: 90, left: 180 };
+    const MARGIN = 0.2;
+    let effectiveT = MARGIN + t * (1 - 2 * MARGIN);
+    let r = size.height / 2;
+
+    if (side === 'top' || side === 'bottom') {
+
+      let x = r + effectiveT * (size.width - 2 * r);
+      let y = side === 'top' ? 0 : size.height;
+      return { x, y, angle: NORMALS[side] };
+    }
+
+
+    let arcSpan = Math.PI * 0.8;
+    let cx = side === 'left' ? r : size.width - r;
+    let centerAngle = side === 'left' ? Math.PI : 0;
+    let startAngle = centerAngle - arcSpan / 2;
+    let a = startAngle + arcSpan * effectiveT;
+
+    return {
+      x: cx + r * Math.cos(a),
+      y: size.height / 2 + r * Math.sin(a),
+      angle: (a * 180) / Math.PI,
+    };
+  }
+
+  getBorderRadius({ height }) {
+    return `${height / 2}px`;
+  }
+
+  get hasHeader() {
+    return false;
+  }
+
+  get hasControls() {
+    return false;
+  }
+
+  getMinSize() {
+    return { minWidth: 100, minHeight: 40 };
+  }
+}