@adia-ai/web-components 0.0.1

package/components/pipeline-status/pipeline-status.css

@@ -0,0 +1,162 @@
+@scope (pipeline-status-ui) {
+
+  /* ─────────────────────────────────────────────
+     Block 1 — TOKENS
+     ───────────────────────────────────────────── */
+  :where(:scope) {
+    /* Layout */
+    --pipeline-status-gap:             var(--a-space-1);
+    --pipeline-status-column-gap:      var(--a-space-1);
+    --pipeline-status-py:              var(--a-space-2);
+    --pipeline-status-px:              var(--a-space-2);
+    --pipeline-status-current-min-h:   1.5em;
+    --pipeline-status-history-pt:      var(--a-space-1);
+    --pipeline-status-history-pad-y:   var(--a-space-0);
+    --pipeline-status-log-pt:          var(--a-space-1);
+    --pipeline-status-log-gap:         var(--a-space-0);
+
+    /* Dot sizing (aliased to spacing tokens to avoid raw px ≥ 3) */
+    --pipeline-status-dot-size:        var(--a-space-2);    /*  8px at d=1 */
+    --pipeline-status-log-dot-size:    var(--a-space-1-5);  /*  6px at d=1 */
+
+    /* Typography */
+    --pipeline-status-font-family:     var(--a-font-family);
+    --pipeline-status-font-size:       var(--a-ui-sm);
+    --pipeline-status-history-size:    var(--a-ui-tiny);
+    --pipeline-status-log-size:        var(--a-ui-tiny);
+    --pipeline-status-label-weight:    var(--a-weight-medium);
+
+    /* Colors — keep aliases referenced via semantic tokens */
+    --pipeline-status-fg:              var(--a-fg-subtle);
+    --pipeline-status-label-fg:        var(--a-fg);
+    --pipeline-status-msg-fg:          var(--a-fg-subtle);
+    --pipeline-status-history-fg:      var(--a-fg-subtle);
+    --pipeline-status-log-fg:          var(--a-fg-subtle);
+
+    --pipeline-status-dot-bg:          var(--a-border);
+    --pipeline-status-dot-bg-active:   var(--a-accent);
+    --pipeline-status-dot-bg-complete: var(--a-success);
+
+    --pipeline-status-history-border:  var(--a-border-subtle);
+    --pipeline-status-border-thin:     1px;
+
+    /* Motion */
+    --pipeline-status-duration:        var(--a-duration);
+    --pipeline-status-easing:          var(--a-easing);
+    /* Infinite-pulse durations don't map to motion scale */
+    --pipeline-status-pulse-duration:  1.2s;
+    --pipeline-status-pulse-easing:    ease-in-out;
+
+    /* Variant targets */
+    --pipeline-status-complete-fg:     var(--a-success);
+    --pipeline-status-complete-border: var(--a-success);
+  }
+
+  /* ─────────────────────────────────────────────
+     Block 2 — BASE styles (tokens only)
+     ───────────────────────────────────────────── */
+  :scope {
+    display:             block;
+    font-family:         var(--pipeline-status-font-family);
+    font-size:           var(--pipeline-status-font-size);
+    color:               var(--pipeline-status-fg);
+  }
+
+  [data-pipeline-status] {
+    display:             flex;
+    flex-direction:      column;
+    gap:                 var(--pipeline-status-gap);
+    padding:             var(--pipeline-status-py) var(--pipeline-status-px);
+  }
+
+  /* Current stage */
+  [data-pipeline-current] {
+    display:             flex;
+    align-items:         center;
+    gap:                 var(--pipeline-status-column-gap);
+    min-height:          var(--pipeline-status-current-min-h);
+  }
+
+  [data-pipeline-label] {
+    font-weight:         var(--pipeline-status-label-weight);
+    color:               var(--pipeline-status-label-fg);
+  }
+
+  [data-pipeline-msg] {
+    color:               var(--pipeline-status-msg-fg);
+  }
+
+  /* Dot indicator */
+  [data-pipeline-dot] {
+    flex-shrink:         0;
+    width:               var(--pipeline-status-dot-size);
+    height:              var(--pipeline-status-dot-size);
+    border-radius:       50%;
+    background:          var(--pipeline-status-dot-bg);
+    transition:          background var(--pipeline-status-duration) var(--pipeline-status-easing);
+  }
+
+  [data-pipeline-dot="active"] {
+    animation:           pipeline-pulse var(--pipeline-status-pulse-duration) var(--pipeline-status-pulse-easing) infinite;
+  }
+
+  [data-pipeline-dot="complete"] {
+    animation:           none;
+  }
+
+  @keyframes pipeline-pulse {
+    0%, 100% { opacity: 1; }
+    50%      { opacity: 0.4; }
+  }
+
+  /* Complete state — override tokens only */
+  :scope[complete] {
+    --pipeline-status-label-fg:       var(--pipeline-status-complete-fg);
+    --pipeline-status-history-border: var(--pipeline-status-complete-border);
+  }
+
+  /* History (expandable) */
+  [data-pipeline-history] {
+    border-top:          var(--pipeline-status-border-thin) solid var(--pipeline-status-history-border);
+    padding-top:         var(--pipeline-status-history-pt);
+  }
+
+  [data-pipeline-history][hidden] {
+    display:             none;
+  }
+
+  [data-pipeline-history] summary {
+    cursor:              pointer;
+    font-size:           var(--pipeline-status-history-size);
+    color:               var(--pipeline-status-history-fg);
+    user-select:         none;
+    padding:             var(--pipeline-status-history-pad-y) 0;
+  }
+
+  [data-pipeline-history] summary::marker {
+    color:               var(--pipeline-status-history-fg);
+  }
+
+  /* Log list */
+  [data-pipeline-log] {
+    list-style:          none;
+    margin:              0;
+    padding:             var(--pipeline-status-log-pt) 0 0 0;
+    display:             flex;
+    flex-direction:      column;
+    gap:                 var(--pipeline-status-log-gap);
+  }
+
+  [data-pipeline-log] li {
+    display:             flex;
+    align-items:         center;
+    gap:                 var(--pipeline-status-column-gap);
+    font-size:           var(--pipeline-status-log-size);
+    color:               var(--pipeline-status-log-fg);
+  }
+
+  [data-pipeline-log] [data-pipeline-dot] {
+    width:               var(--pipeline-status-log-dot-size);
+    height:              var(--pipeline-status-log-dot-size);
+  }
+}

package/components/pipeline-status/pipeline-status.js

@@ -0,0 +1,176 @@
+import { AdiaElement } from '@core/element.js';
+
+/**
+ * <pipeline-status-ui> — Single updating pipeline status indicator.
+ *
+ * Shows the current stage with a message. Completed stages collapse into
+ * an expandable history log. Auto-collapses when the pipeline finishes.
+ *
+ * Properties:
+ *   stage    : String  — current stage name (interpret, analyze, plan, generate, validate, render)
+ *   message  : String  — current stage description
+ *   complete : Boolean — when true, shows final state and collapses history
+ */
+
+const STAGE_LABELS = {
+  interpret: 'Interpreting',
+  analyze: 'Analyzing',
+  plan: 'Planning',
+  generate: 'Generating',
+  validate: 'Validating',
+  render: 'Rendering',
+};
+
+class AdiaPipelineStatus extends AdiaElement {
+  static properties = {
+    stage: { type: String, default: '', reflect: true },
+    message: { type: String, default: '', reflect: true },
+    complete: { type: Boolean, default: false, reflect: true },
+  };
+
+  static template = () => null;
+
+  #history = [];
+  #bound = false;
+  #containerEl = null;
+  #currentEl = null;
+  #dotEl = null;
+  #labelEl = null;
+  #msgEl = null;
+  #detailsEl = null;
+  #summaryEl = null;
+  #logEl = null;
+  #prevStage = '';
+  #prevMessage = '';
+
+  connected() {
+    this.setAttribute('role', 'status');
+    this.setAttribute('aria-label', 'Pipeline status');
+  }
+
+  render() {
+    if (!this.#bound) {
+      this.#bound = true;
+      this.#buildDOM();
+    }
+
+    this.#update();
+  }
+
+  #buildDOM() {
+    this.#containerEl = document.createElement('div');
+    this.#containerEl.setAttribute('data-pipeline-status', '');
+
+    // Current stage row
+    this.#currentEl = document.createElement('div');
+    this.#currentEl.setAttribute('data-pipeline-current', '');
+
+    this.#dotEl = document.createElement('span');
+    this.#dotEl.setAttribute('data-pipeline-dot', '');
+
+    this.#labelEl = document.createElement('span');
+    this.#labelEl.setAttribute('data-pipeline-label', '');
+
+    this.#msgEl = document.createElement('span');
+    this.#msgEl.setAttribute('data-pipeline-msg', '');
+
+    this.#currentEl.append(this.#dotEl, this.#labelEl, this.#msgEl);
+
+    // History (expandable)
+    this.#detailsEl = document.createElement('details');
+    this.#detailsEl.setAttribute('data-pipeline-history', '');
+    this.#detailsEl.hidden = true;
+
+    this.#summaryEl = document.createElement('summary');
+    this.#detailsEl.appendChild(this.#summaryEl);
+
+    this.#logEl = document.createElement('ol');
+    this.#logEl.setAttribute('data-pipeline-log', '');
+    this.#detailsEl.appendChild(this.#logEl);
+
+    this.#containerEl.append(this.#currentEl, this.#detailsEl);
+    this.appendChild(this.#containerEl);
+  }
+
+  #update() {
+    const { stage, message } = this;
+
+    if (this.complete) {
+      // Move current to history if not already
+      if (this.#prevStage && this.#prevStage !== this.#history[this.#history.length - 1]?.stage) {
+        this.#pushHistory(this.#prevStage, this.#prevMessage);
+      }
+      // Final state
+      this.#dotEl.setAttribute('data-pipeline-dot', 'complete');
+      this.#labelEl.textContent = 'Complete';
+      this.#msgEl.textContent = '';
+      this.#updateHistoryUI();
+      return;
+    }
+
+    // Stage transition: push previous to history
+    if (stage && stage !== this.#prevStage && this.#prevStage) {
+      this.#pushHistory(this.#prevStage, this.#prevMessage);
+    }
+
+    // Update current
+    const label = STAGE_LABELS[stage] || stage;
+    this.#dotEl.setAttribute('data-pipeline-dot', 'active');
+    this.#dotEl.setAttribute('data-stage', stage);
+    this.#labelEl.textContent = label;
+    this.#msgEl.textContent = message ? `— ${message}` : '';
+
+    this.#prevStage = stage;
+    this.#prevMessage = message;
+
+    this.#updateHistoryUI();
+  }
+
+  #pushHistory(stage, message) {
+    this.#history.push({ stage, message, timestamp: Date.now() });
+  }
+
+  #updateHistoryUI() {
+    if (this.#history.length === 0) {
+      this.#detailsEl.hidden = true;
+      return;
+    }
+
+    this.#detailsEl.hidden = false;
+    this.#summaryEl.textContent = `${this.#history.length} step${this.#history.length > 1 ? 's' : ''} completed`;
+
+    // Rebuild log
+    this.#logEl.innerHTML = '';
+    for (const entry of this.#history) {
+      const li = document.createElement('li');
+      const dot = document.createElement('span');
+      dot.setAttribute('data-pipeline-dot', 'complete');
+      const text = document.createElement('span');
+      const label = STAGE_LABELS[entry.stage] || entry.stage;
+      text.textContent = entry.message ? `${label} — ${entry.message}` : label;
+      li.append(dot, text);
+      this.#logEl.appendChild(li);
+    }
+
+    // Auto-close when complete
+    if (this.complete) {
+      this.#detailsEl.removeAttribute('open');
+    }
+  }
+
+  disconnected() {
+    this.#containerEl = null;
+    this.#currentEl = null;
+    this.#dotEl = null;
+    this.#labelEl = null;
+    this.#msgEl = null;
+    this.#detailsEl = null;
+    this.#summaryEl = null;
+    this.#logEl = null;
+    this.#bound = false;
+  }
+}
+
+customElements.define('pipeline-status-ui', AdiaPipelineStatus);
+
+export { AdiaPipelineStatus };

package/components/pipeline-status/pipeline-status.yaml

@@ -0,0 +1,99 @@
+# 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: AdiaPipelineStatus
+tag: pipeline-status-ui
+component: PipelineStatus
+category: agent
+version: 1
+description: <pipeline-status-ui> — Single updating pipeline status indicator.
+props:
+  complete:
+    description: "Component property: complete."
+    type: boolean
+    default: false
+  message:
+    description: "Component property: message."
+    type: string
+    default: ""
+  stage:
+    description: "Component property: stage."
+    type: string
+    default: ""
+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-pipeline-status
+    description: Basic PipelineStatus usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "PipelineStatus"
+        }
+      ]
+  - name: stage
+    description: Pipeline status with a prominent stage label for the current step.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "PipelineStatus",
+          "stage": "Building catalog",
+          "message": "Reading 100 patterns from disk..."
+        }
+      ]
+  - name: message
+    description: Pipeline status with a secondary progress message updated as the stage advances.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "PipelineStatus",
+          "stage": "Running evals",
+          "message": "32 / 100 intents scored..."
+        }
+      ]
+  - name: complete
+    description: Pipeline status marked complete; indicator switches to success state.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "PipelineStatus",
+          "stage": "Done",
+          "message": "All 100 intents passed",
+          "complete": true
+        }
+      ]
+keywords:
+  - pipelinestatus
+  - pipeline-status
+  - pipeline
+  - status
+synonyms: {}
+related: []

package/components/popover/popover.a2ui.json

@@ -0,0 +1,181 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Popover.json",
+  "title": "Popover",
+  "description": "Popover using Popover API + CSS Anchor Positioning. Triggers: click, hover, manual.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "type": {
+      "description": "'auto' dismisses on outside click, 'manual' requires explicit close",
+      "type": "string",
+      "enum": [
+        "auto",
+        "manual"
+      ],
+      "default": "auto"
+    },
+    "anchor": {
+      "description": "ID of the anchor element to position relative to",
+      "type": "string",
+      "default": ""
+    },
+    "component": {
+      "const": "Popover"
+    },
+    "gap": {
+      "description": "Pixel offset between the anchor and the popover",
+      "type": "number",
+      "default": 4
+    },
+    "open": {
+      "description": "Controls visibility via showPopover()/hidePopover()",
+      "type": "boolean",
+      "default": false
+    },
+    "placement": {
+      "description": "Popover placement",
+      "type": "string",
+      "enum": [
+        "top",
+        "bottom",
+        "left",
+        "right",
+        "top-start",
+        "top-end",
+        "bottom-start",
+        "bottom-end"
+      ],
+      "default": "bottom"
+    },
+    "trigger": {
+      "description": "Trigger mode",
+      "type": "string",
+      "enum": [
+        "click",
+        "hover",
+        "manual"
+      ],
+      "default": "click"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {},
+    "examples": [
+      {
+        "description": "Popover component demo showing a trigger button that opens a floating content panel with text.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"pop\"\n    ]\n  },\n  {\n    \"id\": \"pop\",\n    \"component\": \"Popover\",\n    \"trigger\": \"click\",\n    \"placement\": \"bottom\",\n    \"children\": [\n      \"trigger\",\n      \"content\"\n    ]\n  },\n  {\n    \"id\": \"trigger\",\n    \"component\": \"Button\",\n    \"slot\": \"trigger\",\n    \"text\": \"Open Popover\",\n    \"variant\": \"outline\"\n  },\n  {\n    \"id\": \"content\",\n    \"component\": \"Text\",\n    \"slot\": \"content\",\n    \"textContent\": \"This is the popover content. It can contain any elements.\"\n  }\n]",
+        "name": "popover-demo"
+      },
+      {
+        "description": "Button that triggers a Popover containing a list of menu action items.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Popover\",\n    \"attrs\": {\n      \"placement\": \"bottom-end\"\n    },\n    \"children\": [\n      \"trigger\",\n      \"menu-content\"\n    ]\n  },\n  {\n    \"id\": \"trigger\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"outline\",\n      \"icon\": \"more-horizontal\",\n      \"aria-label\": \"More actions\"\n    }\n  },\n  {\n    \"id\": \"menu-content\",\n    \"component\": \"Column\",\n    \"attrs\": {\n      \"gap\": \"xs\",\n      \"padding\": \"sm\"\n    },\n    \"children\": [\n      \"menu-edit\",\n      \"menu-duplicate\",\n      \"menu-share\",\n      \"menu-div\",\n      \"menu-delete\"\n    ]\n  },\n  {\n    \"id\": \"menu-edit\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"ghost\",\n      \"icon\": \"edit\",\n      \"full\": true,\n      \"align\": \"start\"\n    },\n    \"content\": \"Edit\"\n  },\n  {\n    \"id\": \"menu-duplicate\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"ghost\",\n      \"icon\": \"copy\",\n      \"full\": true,\n      \"align\": \"start\"\n    },\n    \"content\": \"Duplicate\"\n  },\n  {\n    \"id\": \"menu-share\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"ghost\",\n      \"icon\": \"share\",\n      \"full\": true,\n      \"align\": \"start\"\n    },\n    \"content\": \"Share\"\n  },\n  {\n    \"id\": \"menu-div\",\n    \"component\": \"Divider\"\n  },\n  {\n    \"id\": \"menu-delete\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"danger\",\n      \"icon\": \"trash\",\n      \"full\": true,\n      \"align\": \"start\"\n    },\n    \"content\": \"Delete\"\n  }\n]",
+        "name": "popover-menu"
+      }
+    ],
+    "keywords": [
+      "popover",
+      "popup",
+      "modal",
+      "dialog",
+      "menu",
+      "dropdown",
+      "actions",
+      "tooltip",
+      "hint",
+      "context-menu",
+      "right-click"
+    ],
+    "name": "AdiaPopover",
+    "related": [
+      "button",
+      "divider"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "actions": [
+        "toolbar",
+        "button",
+        "popover"
+      ],
+      "context-menu": [
+        "popover",
+        "menu"
+      ],
+      "dialog": [
+        "drawer",
+        "alert",
+        "popover",
+        "panel"
+      ],
+      "dropdown": [
+        "popover",
+        "menu",
+        "select",
+        "form"
+      ],
+      "hint": [
+        "tooltip",
+        "button",
+        "popover"
+      ],
+      "menu": [
+        "nav",
+        "sidebar",
+        "popover",
+        "menu",
+        "command"
+      ],
+      "modal": [
+        "drawer",
+        "alert",
+        "popover",
+        "panel"
+      ],
+      "popover": [
+        "popover",
+        "menu",
+        "tooltip"
+      ],
+      "popup": [
+        "toast",
+        "notification",
+        "alert",
+        "popover",
+        "drawer"
+      ],
+      "right-click": [
+        "popover",
+        "menu"
+      ],
+      "tooltip": [
+        "tooltip",
+        "button",
+        "popover"
+      ]
+    },
+    "tag": "popover-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/popover/popover.css

@@ -0,0 +1,57 @@
+@scope (popover-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --popover-px:      var(--a-space-3);
+    --popover-py:      var(--a-space-2);
+    --popover-radius:  var(--a-radius-lg);
+
+    /* ── Colors ── */
+    --popover-bg:      var(--a-bg-subtle);
+    --popover-border:  var(--a-border-subtle);
+    --popover-shadow:  var(--a-shadow-lg);
+    --popover-fg:      var(--a-fg);
+
+    /* ── Typography ── */
+    --popover-font:    var(--a-font-family);
+    --popover-font-size: var(--a-ui-size);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: inline-flex;
+    position: relative;
+  }
+
+  [slot="trigger"] {
+    display: inline-flex;
+  }
+
+  /* Content is a popover="manual" element — Popover API hides it.
+     When open, anchorPopover positions it fixed to viewport.
+     !important guards against inline display styles from user content
+     (e.g. style="display: flex" on the slot). */
+  [slot="content"]:not(:popover-open) {
+    display: none !important;
+  }
+
+  [slot="content"] {
+    box-sizing: border-box;
+    margin: 0;
+    padding: var(--popover-py) var(--popover-px);
+    background: var(--popover-bg);
+    border: 1px solid var(--popover-border);
+    border-radius: var(--popover-radius);
+    box-shadow: var(--popover-shadow);
+    font-family: var(--popover-font);
+    font-size: var(--popover-font-size);
+    color: var(--popover-fg);
+    max-height: calc(100vh - 3rem);
+    overflow-y: auto;
+  }
+
+  /* Collapse default margins on the first/last block child so the
+     content sits snug inside --popover-py (no phantom extra space
+     below <p>, <h*>, etc.). */
+  [slot="content"] > :first-child { margin-block-start: 0; }
+  [slot="content"] > :last-child  { margin-block-end:   0; }
+}