@adia-ai/web-components 0.0.1

package/components/noodles/noodles.a2ui.json

@@ -0,0 +1,145 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Noodles.json",
+  "title": "Noodles",
+  "description": "SVG connection lines (noodles) between children with declared ports. Supports bezier, step, and straight curves.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "animated": {
+      "description": "Flowing dash animation on noodles",
+      "type": "boolean",
+      "default": false
+    },
+    "color": {
+      "description": "Noodle stroke color. Defaults to --a-accent",
+      "type": "string",
+      "default": ""
+    },
+    "component": {
+      "const": "Noodles"
+    },
+    "curve": {
+      "description": "Noodle curve style",
+      "type": "string",
+      "enum": [
+        "bezier",
+        "step",
+        "straight"
+      ],
+      "default": "bezier"
+    },
+    "disabled": {
+      "description": "Disable the controller. Noodles render as dashed muted lines",
+      "type": "boolean",
+      "default": false
+    },
+    "editable": {
+      "description": "Allow interactive creation/deletion of connections via drag",
+      "type": "boolean",
+      "default": false
+    },
+    "port-size": {
+      "description": "Port indicator dot size in pixels",
+      "type": "number",
+      "default": 10
+    },
+    "portSize": {
+      "description": "Port indicator size",
+      "type": "number",
+      "default": 10
+    },
+    "readonly": {
+      "description": "View-only mode; disables drag/edit while keeping connections visible",
+      "type": "boolean",
+      "default": false
+    },
+    "show-ports": {
+      "description": "Show port indicator dots. Defaults to true when editable",
+      "type": "boolean",
+      "default": false
+    },
+    "showPorts": {
+      "description": "Show port indicators",
+      "type": "boolean",
+      "default": false
+    },
+    "stroke-width": {
+      "description": "Stroke width in pixels",
+      "type": "number",
+      "default": 2
+    },
+    "strokeWidth": {
+      "description": "Line stroke width",
+      "type": "number",
+      "default": 2
+    },
+    "tension": {
+      "description": "Bezier control point distance (0-1). Higher = wider curves",
+      "type": "number",
+      "default": 0.5
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "agent",
+    "events": {
+      "noodle-connect": {
+        "description": "Fired when a connection is created. detail: { id, from, to, fromPort, toPort }"
+      },
+      "noodle-disconnect": {
+        "description": "Fired when a connection is removed. detail: { id, from, to, fromPort, toPort }"
+      },
+      "noodle-drag": {
+        "description": "Fired during drag-to-connect. detail: { from, fromPort, x, y, reconnect }"
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic Noodles usage",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"comp\"\n    ]\n  },\n  {\n    \"id\": \"comp\",\n    \"component\": \"Noodles\"\n  }\n]",
+        "name": "basic-noodles"
+      }
+    ],
+    "keywords": [
+      "noodles"
+    ],
+    "name": "AdiaNoodles",
+    "related": [],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "synonyms": {},
+    "tag": "noodles-ui",
+    "tokens": {
+      "--noodles-duration": {
+        "description": "Transition duration for noodle animations"
+      },
+      "--noodles-easing": {
+        "description": "Easing function for noodle animations"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/noodles/noodles.css

@@ -0,0 +1,118 @@
+@scope (noodles-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --noodles-duration:             var(--a-duration-fast);
+    --noodles-easing:               var(--a-easing);
+    --noodles-stroke:               var(--a-accent-bg);
+    /* Component-intrinsic visual constants; no --a-space-* equivalent */
+    --noodles-stroke-width:         2px;
+    --noodles-stroke-readonly:      var(--a-fg-muted);
+    /* Component-intrinsic visual constants; no --a-space-* equivalent */
+    --noodles-port-size:            10px;
+    --noodles-port-bg:              var(--a-accent-bg);
+    --noodles-port-border:          var(--a-bg);
+    --noodles-port-hover-ring:      0 0 0 3px var(--a-bg-muted);
+    --noodles-port-drop-scale:      1.4;
+    --noodles-port-drag-opacity:    0.4;
+    --noodles-dash-length:          8;
+    --noodles-dash-gap:             4;
+    --noodles-anim-speed:           0.6s;
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: block;
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+  }
+
+  /* ── SVG overlay ── */
+  :scope > svg[data-noodle-svg] {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+    overflow: visible;
+  }
+
+  :scope > svg[data-noodle-svg] path {
+    fill: none;
+    stroke: var(--noodles-stroke);
+    stroke-width: var(--noodles-stroke-width);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    transition:
+      stroke var(--noodles-duration) var(--noodles-easing),
+      stroke-dasharray var(--noodles-duration) var(--noodles-easing);
+  }
+
+  /* ── State: readonly ── */
+  :scope[readonly] > svg[data-noodle-svg] path {
+    stroke: var(--noodles-stroke-readonly);
+    stroke-dasharray: 6 4;
+  }
+
+  /* ── State: animated ── */
+  :scope[animated] > svg[data-noodle-svg] path {
+    stroke-dasharray: var(--noodles-dash-length) var(--noodles-dash-gap);
+    animation: noodle-march var(--noodles-anim-speed) linear infinite;
+  }
+
+  @keyframes noodle-march {
+    to {
+      stroke-dashoffset: -20;
+    }
+  }
+
+  /* ── Port indicators ── */
+  [data-noodle-port-indicator] {
+    position: absolute;
+    width: var(--noodles-port-size);
+    height: var(--noodles-port-size);
+    border-radius: 50%;
+    background: var(--noodles-port-bg);
+    border: 2px solid var(--noodles-port-border);
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    cursor: crosshair;
+    pointer-events: auto;
+    transition:
+      transform var(--noodles-duration) var(--noodles-easing),
+      opacity var(--noodles-duration) var(--noodles-easing),
+      box-shadow var(--noodles-duration) var(--noodles-easing);
+  }
+
+  [data-noodle-port-indicator]:hover {
+    box-shadow: var(--noodles-port-hover-ring);
+  }
+
+  /* ── State: drop ready ── */
+  [data-noodle-drop-ready] {
+    transform: translate(-50%, -50%) scale(var(--noodles-port-drop-scale));
+  }
+
+  /* ── State: dragging ── */
+  [data-noodle-dragging] {
+    opacity: var(--noodles-port-drag-opacity);
+  }
+
+  /* ── State: readonly ports ── */
+  :scope[readonly] [data-noodle-port-indicator] {
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* ── State: ports hidden ── */
+  :scope:not([show-ports]) [data-noodle-port-indicator] {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :scope[show-ports] [data-noodle-port-indicator] {
+    opacity: 1;
+  }
+}