@adia-ai/web-components 0.0.1

package/components/stepper/stepper.js

@@ -0,0 +1,118 @@
+/**
+ * <stepper-ui> — Wizard / process stepper.
+ *
+ * Split out of the old <timeline-ui mode="steps">. Where timeline-ui is for
+ * event/progress logs with per-item state, stepper-ui is a wizard: the parent
+ * `step` index drives all children (numbered circles, auto-checkmark on the
+ * ones before it, active ring on the current).
+ *
+ * Usage:
+ *   <stepper-ui step="1">
+ *     <stepper-item-ui text="Account"></stepper-item-ui>
+ *     <stepper-item-ui text="Details"></stepper-item-ui>
+ *     <stepper-item-ui text="Review"></stepper-item-ui>
+ *   </stepper-ui>
+ *
+ *   el.next(); el.prev(); el.goTo(2);
+ *
+ * Attributes:
+ *   step        — current step index (0-based)
+ *   orientation — horizontal (default) | vertical
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaStepper extends AdiaElement {
+  static properties = {
+    step:        { type: Number, default: 0,            reflect: true },
+    orientation: { type: String, default: 'horizontal', reflect: true },
+  };
+
+  static template = () => null;
+
+  render() {
+    const items = [...this.querySelectorAll('stepper-item-ui')];
+
+    // Mark last item — the connector line hides on the last one
+    for (const item of items) item.removeAttribute('data-last');
+    const last = items[items.length - 1];
+    if (last) last.setAttribute('data-last', '');
+
+    // Parent drives child state via step index
+    items.forEach((item, i) => {
+      item.setAttribute('data-index', i);
+      if (i < this.step) {
+        item.setAttribute('completed', '');
+        item.removeAttribute('active');
+      } else if (i === this.step) {
+        item.removeAttribute('completed');
+        item.setAttribute('active', '');
+      } else {
+        item.removeAttribute('completed');
+        item.removeAttribute('active');
+      }
+    });
+  }
+
+  next() {
+    const count = this.querySelectorAll('stepper-item-ui').length;
+    if (this.step < count - 1) this.step++;
+  }
+
+  prev() {
+    if (this.step > 0) this.step--;
+  }
+
+  goTo(index) {
+    const max = this.querySelectorAll('stepper-item-ui').length - 1;
+    this.step = Math.max(0, Math.min(index, max));
+  }
+}
+
+customElements.define('stepper-ui', AdiaStepper);
+
+// ── Item ───────────────────────────────────────────────────────
+
+class AdiaStepperItem extends AdiaElement {
+  static properties = {
+    text:        { type: String,  default: '', reflect: true },
+    description: { type: String,  default: '', reflect: true },
+    icon:        { type: String,  default: '', reflect: true },
+    completed:   { type: Boolean, default: false, reflect: true },
+    active:      { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    if (!this.querySelector('[slot="label"]')) {
+      this.innerHTML = `
+        <span slot="label"></span>
+        <span slot="description"></span>
+      `;
+    }
+  }
+
+  render() {
+    const label = this.querySelector('[slot="label"]');
+    const desc = this.querySelector('[slot="description"]');
+    if (label) label.textContent = this.text;
+    if (desc) desc.textContent = this.description;
+
+    if (this.icon) {
+      let iconEl = this.querySelector('[slot="icon"]');
+      if (!iconEl) {
+        iconEl = document.createElement('icon-ui');
+        iconEl.setAttribute('slot', 'icon');
+        this.prepend(iconEl);
+      }
+      iconEl.setAttribute('name', this.icon);
+    } else {
+      this.querySelector('[slot="icon"]')?.remove();
+    }
+  }
+}
+
+customElements.define('stepper-item-ui', AdiaStepperItem);
+
+export { AdiaStepper, AdiaStepperItem };

package/components/stepper/stepper.yaml

@@ -0,0 +1,73 @@
+# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaStepper
+tag: stepper-ui
+component: Stepper
+category: navigation
+version: 1
+description: Wizard / process stepper — parent step index drives numbered children.
+props:
+  orientation:
+    description: horizontal | vertical
+    type: string
+    default: horizontal
+  step:
+    description: Current step index (0-based).
+    type: number
+    default: 0
+events: {}
+slots:
+  default:
+    description: "Default slot — primary child content."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic
+    description: Three-step wizard
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Stepper",
+          "step": 1,
+          "children": [
+            "s1",
+            "s2",
+            "s3"
+          ]
+        },
+        {
+          "id": "s1",
+          "component": "StepperItem",
+          "text": "Account"
+        },
+        {
+          "id": "s2",
+          "component": "StepperItem",
+          "text": "Details"
+        },
+        {
+          "id": "s3",
+          "component": "StepperItem",
+          "text": "Review"
+        }
+      ]
+keywords:
+  - stepper
+  - wizard
+  - steps
+  - process
+  - onboarding
+  - multi-step
+synonyms:
+  timeline-ui mode=steps: stepper-ui
+related:
+  - timeline-ui
+  - progress-ui

package/components/stream/stream.a2ui.json

@@ -0,0 +1,98 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Stream.json",
+  "title": "Stream",
+  "description": "Renders an AsyncIterable<string> as streaming text. Used for LLM output and real-time logs.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Stream"
+    },
+    "hide-cursor": {
+      "description": "When true, suppress the blinking cursor during active streaming",
+      "type": "boolean",
+      "default": false
+    },
+    "pace": {
+      "description": "Milliseconds between character renders. 0 = real-time.",
+      "type": "number",
+      "default": 0
+    },
+    "streaming": {
+      "description": "Read-only reflected state, true while stream is active",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "agent",
+    "events": {
+      "stream-end": {
+        "description": "Fired when stream completes naturally"
+      },
+      "stream-error": {
+        "description": "Fired on stream error, detail: { error }"
+      },
+      "stream-start": {
+        "description": "Fired when streaming begins"
+      }
+    },
+    "examples": [
+      {
+        "description": "AI streaming text response in a chat card.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"stream\"\n    ]\n  },\n  {\n    \"id\": \"stream\",\n    \"component\": \"Stream\",\n    \"children\": [\n      \"txt\"\n    ]\n  },\n  {\n    \"id\": \"txt\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Generating response...\"\n  }\n]",
+        "name": "streaming-response"
+      }
+    ],
+    "keywords": [
+      "stream"
+    ],
+    "name": "AdiaStream",
+    "related": [],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "stream-ui",
+    "tokens": {
+      "--stream-color": {
+        "description": "Text color"
+      },
+      "--stream-cursor-color": {
+        "description": "Blinking cursor color"
+      },
+      "--stream-font-family": {
+        "description": "Font family"
+      },
+      "--stream-font-size": {
+        "description": "Font size"
+      },
+      "--stream-line-height": {
+        "description": "Line height"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/stream/stream.css

@@ -0,0 +1,37 @@
+@scope (stream-ui) {
+  :where(:scope) {
+    --stream-fg:              var(--a-fg);
+    --stream-font-size:       var(--a-body-size);
+    --stream-font-family:     var(--a-font-family);
+    --stream-leading:         var(--a-body-leading);
+    --stream-cursor-color:    var(--a-accent-bg);
+    --stream-blink-duration:  0.6s;
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: block;
+    color: var(--stream-fg);
+    font-family: var(--stream-font-family);
+    font-size: var(--stream-font-size);
+    line-height: var(--stream-leading);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  /* Blinking cursor during stream (default; suppress with [hide-cursor]) */
+  :scope[streaming]:not([hide-cursor])::after {
+    content: '▊';
+    color: var(--stream-cursor-color);
+    animation: _stream-blink var(--stream-blink-duration) step-end infinite;
+    margin-left: 1px;
+  }
+
+  :scope:not([streaming])::after {
+    content: none;
+  }
+}
+
+@keyframes _stream-blink {
+  50% { opacity: 0; }
+}

package/components/stream/stream.js

@@ -0,0 +1,99 @@
+/**
+ * <stream-ui></stream-ui>
+ * el.tokens = asyncIterable; // starts streaming
+ *
+ * Renders an AsyncIterable<string> as streaming text.
+ * Used for agent prose, LLM output, real-time logs.
+ *
+ * Props (attributes):
+ *   pace:        ms between character renders (default: 0, real-time)
+ *   hide-cursor: hide the blinking cursor during stream (default: false — cursor visible)
+ *
+ * Props (JS only):
+ *   .tokens: AsyncIterable<string> — the stream source
+ *
+ * Events:
+ *   stream-start  — streaming begins
+ *   stream-end    — stream completed
+ *   stream-error  — stream error (detail: { error })
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaStream extends AdiaElement {
+  static properties = {
+    pace:       { type: Number,  default: 0,     reflect: true },
+    hideCursor: { type: Boolean, default: false, reflect: true, attribute: 'hide-cursor' },
+    streaming:  { type: Boolean, default: false, reflect: true },
+  };
+
+  #tokens = null;
+  #abortCtrl = null;
+  #buffer = '';
+
+  get tokens() { return this.#tokens; }
+  set tokens(iterable) {
+    this.#tokens = iterable;
+    if (iterable) this.#startStream(iterable);
+  }
+
+  static template = () => null;
+
+  async #startStream(iterable) {
+    this.#abortCtrl?.abort();
+    this.#abortCtrl = new AbortController();
+    const signal = this.#abortCtrl.signal;
+
+    this.#buffer = '';
+    this.textContent = '';
+    this.streaming = true;
+    this.dispatchEvent(new Event('stream-start', { bubbles: true }));
+
+    try {
+      for await (const token of iterable) {
+        if (signal.aborted) break;
+        this.#buffer += token;
+
+        if (this.pace > 0) {
+          for (const char of token) {
+            if (signal.aborted) break;
+            this.textContent += char;
+            await new Promise(r => setTimeout(r, this.pace));
+          }
+        } else {
+          this.textContent = this.#buffer;
+        }
+      }
+    } catch (err) {
+      if (!signal.aborted) {
+        this.dispatchEvent(new CustomEvent('stream-error', {
+          bubbles: true,
+          detail: { error: err },
+        }));
+      }
+    }
+
+    if (!signal.aborted) {
+      this.streaming = false;
+      this.dispatchEvent(new Event('stream-end', { bubbles: true }));
+    }
+  }
+
+  stop() {
+    this.#abortCtrl?.abort();
+    this.streaming = false;
+  }
+
+  clear() {
+    this.stop();
+    this.#buffer = '';
+    this.textContent = '';
+  }
+
+  disconnected() {
+    this.stop();
+  }
+}
+customElements.define('stream-ui', AdiaStream);
+
+export { AdiaStream };

package/components/stream/stream.yaml

@@ -0,0 +1,87 @@
+# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaStream
+tag: stream-ui
+component: Stream
+category: agent
+version: 1
+description: Renders an AsyncIterable<string> as streaming text. Used for LLM output and real-time logs.
+props:
+  hide-cursor:
+    description: When true, suppress the blinking cursor during active streaming
+    type: boolean
+    default: false
+  pace:
+    description: Milliseconds between character renders. 0 = real-time.
+    type: number
+    default: 0
+  streaming:
+    description: Read-only reflected state, true while stream is active
+    type: boolean
+    default: false
+events:
+  stream-end:
+    description: Fired when stream completes naturally
+  stream-error:
+    description: "Fired on stream error, detail: { error }"
+  stream-start:
+    description: Fired when streaming begins
+slots:
+  default:
+    description: "Default slot — primary child content."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens:
+  --stream-color:
+    description: Text color
+  --stream-cursor-color:
+    description: Blinking cursor color
+  --stream-font-family:
+    description: Font family
+  --stream-font-size:
+    description: Font size
+  --stream-line-height:
+    description: Line height
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: streaming-response
+    description: AI streaming text response in a chat card.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "stream"
+          ]
+        },
+        {
+          "id": "stream",
+          "component": "Stream",
+          "children": [
+            "txt"
+          ]
+        },
+        {
+          "id": "txt",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Generating response..."
+        }
+      ]
+keywords:
+  - stream
+synonyms: {}
+related: []

package/components/swiper/swiper.a2ui.json

@@ -0,0 +1,140 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Swiper.json",
+  "title": "Swiper",
+  "description": "CSS-first carousel with scroll-snap. Supports autoplay, loop, peek, and native scroll markers.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "autoplay": {
+      "description": "Enable auto-advance",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Swiper"
+    },
+    "gap": {
+      "description": "Gap between slides (token: sm, md, lg)",
+      "type": "string",
+      "default": ""
+    },
+    "interval": {
+      "description": "Autoplay interval in ms",
+      "type": "number",
+      "default": 5000
+    },
+    "loop": {
+      "description": "Infinite loop",
+      "type": "boolean",
+      "default": false
+    },
+    "peek": {
+      "description": "Show peek of adjacent slides",
+      "type": "boolean",
+      "default": false
+    },
+    "slides-per-view": {
+      "description": "Number of visible slides",
+      "type": "string",
+      "default": ""
+    },
+    "slidesPerView": {
+      "description": "Number of slides visible at once. Accepts \"1\", \"2\", \"3\", or \"auto\".",
+      "type": "string",
+      "default": "1"
+    },
+    "snap": {
+      "description": "Scroll-snap alignment — start, center, end, or none.",
+      "type": "string",
+      "enum": [
+        "start",
+        "center",
+        "end",
+        "none"
+      ],
+      "default": "start"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {
+      "autoplay-pause": {
+        "description": "Fired on autoplay-pause."
+      },
+      "autoplay-resume": {
+        "description": "Fired on autoplay-resume."
+      },
+      "slide-change": {
+        "description": "Fired on slide-change."
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic image carousel with 3 slides",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"variant\": \"section\",\n    \"textContent\": \"Photo Gallery\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"carousel\"\n    ]\n  },\n  {\n    \"id\": \"carousel\",\n    \"component\": \"Swiper\",\n    \"children\": [\n      \"s1\",\n      \"s2\",\n      \"s3\"\n    ],\n    \"gap\": \"md\"\n  },\n  {\n    \"id\": \"s1\",\n    \"component\": \"Image\",\n    \"src\": \"/images/photo-1.jpg\",\n    \"alt\": \"Mountain landscape\"\n  },\n  {\n    \"id\": \"s2\",\n    \"component\": \"Image\",\n    \"src\": \"/images/photo-2.jpg\",\n    \"alt\": \"Ocean sunset\"\n  },\n  {\n    \"id\": \"s3\",\n    \"component\": \"Image\",\n    \"src\": \"/images/photo-3.jpg\",\n    \"alt\": \"Forest trail\"\n  }\n]",
+        "name": "image-carousel"
+      },
+      {
+        "description": "Product cards in a peek carousel with autoplay",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Swiper\",\n    \"children\": [\n      \"p1\",\n      \"p2\",\n      \"p3\"\n    ],\n    \"peek\": true,\n    \"slides-per-view\": \"3\",\n    \"gap\": \"md\",\n    \"autoplay\": true,\n    \"interval\": \"5000\"\n  },\n  {\n    \"id\": \"p1\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"p1-sec\"\n    ]\n  },\n  {\n    \"id\": \"p1-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"p1-img\",\n      \"p1-name\",\n      \"p1-price\"\n    ]\n  },\n  {\n    \"id\": \"p1-img\",\n    \"component\": \"Image\",\n    \"src\": \"/images/product-1.jpg\",\n    \"alt\": \"Wireless headphones\"\n  },\n  {\n    \"id\": \"p1-name\",\n    \"component\": \"Text\",\n    \"variant\": \"label\",\n    \"textContent\": \"Wireless Headphones\"\n  },\n  {\n    \"id\": \"p1-price\",\n    \"component\": \"Text\",\n    \"variant\": \"metric\",\n    \"textContent\": \"$79.99\"\n  },\n  {\n    \"id\": \"p2\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"p2-sec\"\n    ]\n  },\n  {\n    \"id\": \"p2-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"p2-img\",\n      \"p2-name\",\n      \"p2-price\"\n    ]\n  },\n  {\n    \"id\": \"p2-img\",\n    \"component\": \"Image\",\n    \"src\": \"/images/product-2.jpg\",\n    \"alt\": \"Smart watch\"\n  },\n  {\n    \"id\": \"p2-name\",\n    \"component\": \"Text\",\n    \"variant\": \"label\",\n    \"textContent\": \"Smart Watch\"\n  },\n  {\n    \"id\": \"p2-price\",\n    \"component\": \"Text\",\n    \"variant\": \"metric\",\n    \"textContent\": \"$199.99\"\n  },\n  {\n    \"id\": \"p3\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"p3-sec\"\n    ]\n  },\n  {\n    \"id\": \"p3-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"p3-img\",\n      \"p3-name\",\n      \"p3-price\"\n    ]\n  },\n  {\n    \"id\": \"p3-img\",\n    \"component\": \"Image\",\n    \"src\": \"/images/product-3.jpg\",\n    \"alt\": \"Bluetooth speaker\"\n  },\n  {\n    \"id\": \"p3-name\",\n    \"component\": \"Text\",\n    \"variant\": \"label\",\n    \"textContent\": \"Bluetooth Speaker\"\n  },\n  {\n    \"id\": \"p3-price\",\n    \"component\": \"Text\",\n    \"variant\": \"metric\",\n    \"textContent\": \"$49.99\"\n  }\n]",
+        "name": "product-showcase"
+      }
+    ],
+    "keywords": [
+      "carousel",
+      "slider",
+      "slideshow",
+      "slides",
+      "gallery",
+      "banner",
+      "swiper"
+    ],
+    "name": "AdiaSwiper",
+    "related": [
+      "image-gallery",
+      "hero-section",
+      "product-card"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "carousel": [
+        "swiper",
+        "slide",
+        "gallery",
+        "banner"
+      ],
+      "slideshow": [
+        "swiper",
+        "carousel",
+        "slide"
+      ]
+    },
+    "tag": "swiper-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}