@adia-ai/web-components 0.4.5 → 0.4.7

package/components/pane/pane.yaml

@@ -1,5 +1,3 @@
-# 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: UIPane
 tag: pane-ui
@@ -9,192 +7,94 @@ version: 1
 description: Collapsible, resizable panel.
 props:
   collapsed:
-    description: "Component property: collapsed."
+    description: 'Component property: collapsed.'
     type: boolean
     default: false
   maxWidth:
-    description: "Component property: maxWidth."
+    description: 'Component property: maxWidth.'
     type: number
     default: 9999
     attribute: max-width
   minWidth:
-    description: "Component property: minWidth."
+    description: 'Component property: minWidth.'
     type: number
     default: 200
     attribute: min-width
   resizable:
-    description: "Component property: resizable."
+    description: 'Component property: resizable.'
     type: boolean
     default: false
   side:
-    description: |
-      Opts a pane into horizontal-sibling chrome: suppresses the default
+    description: 'Opts a pane into horizontal-sibling chrome: suppresses the default
+
       four-sided border and moves the resize grabber to the inner edge
+
       (right edge for `leading`, left edge for `trailing`). Also flips the
+
       resize-drag direction so `trailing` panes grow when dragged leftward.
+
       Unset keeps the pane-intrinsic chrome (full border, right-edge
+
       grabber when resizable).
+
+      '
     type: string
-    default: ""
-    enum: ["", leading, trailing]
+    default: ''
+    enum:
+    - ''
+    - leading
+    - trailing
     reflect: true
 events: {}
 slots:
   header:
     description: Auto-created header element with label text and toggle arrow
 states:
-  - name: idle
-    description: Default, ready for interaction.
+- name: idle
+  description: Default, ready for interaction.
 traits: []
 tokens: {}
 a2ui:
   rules: []
 anti_patterns: []
 examples:
-  - name: markdown-editor
-    description: Split pane with TextArea for editing markdown on the left and a preview card on the right.
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Row",
-          "children": [
-            "left",
-            "right"
-          ]
-        },
-        {
-          "id": "left",
-          "component": "Pane",
-          "resizable": true,
-          "width": "50%",
-          "children": [
-            "editor-card"
-          ]
-        },
-        {
-          "id": "editor-card",
-          "component": "Card",
-          "children": [
-            "ed-hdr",
-            "ed-sec"
-          ]
-        },
-        {
-          "id": "ed-hdr",
-          "component": "Header",
-          "children": [
-            "ed-title"
-          ]
-        },
-        {
-          "id": "ed-title",
-          "component": "Text",
-          "slot": "heading",
-          "textContent": "Editor"
-        },
-        {
-          "id": "ed-sec",
-          "component": "Section",
-          "children": [
-            "textarea"
-          ]
-        },
-        {
-          "id": "textarea",
-          "component": "TextArea",
-          "placeholder": "Write your markdown here...",
-          "rows": 20
-        },
-        {
-          "id": "right",
-          "component": "Pane",
-          "resizable": true,
-          "width": "50%",
-          "children": [
-            "preview-card"
-          ]
-        },
-        {
-          "id": "preview-card",
-          "component": "Card",
-          "children": [
-            "pv-hdr",
-            "pv-sec"
-          ]
-        },
-        {
-          "id": "pv-hdr",
-          "component": "Header",
-          "children": [
-            "pv-title"
-          ]
-        },
-        {
-          "id": "pv-title",
-          "component": "Text",
-          "slot": "heading",
-          "textContent": "Preview"
-        },
-        {
-          "id": "pv-sec",
-          "component": "Section",
-          "children": [
-            "preview-text"
-          ]
-        },
-        {
-          "id": "preview-text",
-          "component": "Text",
-          "variant": "body",
-          "textContent": "Rendered markdown will appear here..."
-        }
-      ]
-  - name: split-pane
-    description: Row with two resizable Pane components for left/right panel layout.
-    a2ui: >-
-      [
-        {
-          "id": "root",
-          "component": "Row",
-          "children": [
-            "left",
-            "right"
-          ]
-        },
-        {
-          "id": "left",
-          "component": "Pane",
-          "resizable": true,
-          "width": "50%",
-          "children": [
-            "ltxt"
-          ]
-        },
-        {
-          "id": "ltxt",
-          "component": "Text",
-          "variant": "body",
-          "textContent": "Left panel content"
-        },
-        {
-          "id": "right",
-          "component": "Pane",
-          "resizable": true,
-          "width": "50%",
-          "children": [
-            "rtxt"
-          ]
-        },
-        {
-          "id": "rtxt",
-          "component": "Text",
-          "variant": "body",
-          "textContent": "Right panel content"
-        }
-      ]
+- name: markdown-editor
+  description: Split pane with TextArea for editing markdown on the left and a preview card on the right.
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"left\",\n      \"right\"\
+    \n    ]\n  },\n  {\n    \"id\": \"left\",\n    \"component\": \"Pane\",\n    \"resizable\": true,\n    \"width\": \"50%\"\
+    ,\n    \"children\": [\n      \"editor-card\"\n    ]\n  },\n  {\n    \"id\": \"editor-card\",\n    \"component\": \"Card\"\
+    ,\n    \"children\": [\n      \"ed-hdr\",\n      \"ed-sec\"\n    ]\n  },\n  {\n    \"id\": \"ed-hdr\",\n    \"component\"\
+    : \"Header\",\n    \"children\": [\n      \"ed-title\"\n    ]\n  },\n  {\n    \"id\": \"ed-title\",\n    \"component\"\
+    : \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Editor\"\n  },\n  {\n    \"id\": \"ed-sec\",\n    \"component\"\
+    : \"Section\",\n    \"children\": [\n      \"textarea\"\n    ]\n  },\n  {\n    \"id\": \"textarea\",\n    \"component\"\
+    : \"TextArea\",\n    \"placeholder\": \"Write your markdown here...\",\n    \"rows\": 20\n  },\n  {\n    \"id\": \"right\"\
+    ,\n    \"component\": \"Pane\",\n    \"resizable\": true,\n    \"width\": \"50%\",\n    \"children\": [\n      \"preview-card\"\
+    \n    ]\n  },\n  {\n    \"id\": \"preview-card\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"pv-hdr\"\
+    ,\n      \"pv-sec\"\n    ]\n  },\n  {\n    \"id\": \"pv-hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n\
+    \      \"pv-title\"\n    ]\n  },\n  {\n    \"id\": \"pv-title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\"\
+    ,\n    \"textContent\": \"Preview\"\n  },\n  {\n    \"id\": \"pv-sec\",\n    \"component\": \"Section\",\n    \"children\"\
+    : [\n      \"preview-text\"\n    ]\n  },\n  {\n    \"id\": \"preview-text\",\n    \"component\": \"Text\",\n    \"variant\"\
+    : \"body\",\n    \"textContent\": \"Rendered markdown will appear here...\"\n  }\n]"
+- name: split-pane
+  description: Row with two resizable Pane components for left/right panel layout.
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"left\",\n      \"right\"\
+    \n    ]\n  },\n  {\n    \"id\": \"left\",\n    \"component\": \"Pane\",\n    \"resizable\": true,\n    \"width\": \"50%\"\
+    ,\n    \"children\": [\n      \"ltxt\"\n    ]\n  },\n  {\n    \"id\": \"ltxt\",\n    \"component\": \"Text\",\n    \"\
+    variant\": \"body\",\n    \"textContent\": \"Left panel content\"\n  },\n  {\n    \"id\": \"right\",\n    \"component\"\
+    : \"Pane\",\n    \"resizable\": true,\n    \"width\": \"50%\",\n    \"children\": [\n      \"rtxt\"\n    ]\n  },\n  {\n\
+    \    \"id\": \"rtxt\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Right panel content\"\
+    \n  }\n]"
 keywords:
-  - pane
-synonyms: {}
+- pane
+synonyms:
+  tags:
+  - split-pane
+  - side-panel
+  - resizable-panel
+  - detail-pane
+  - list-pane
+  - context-pane
+  - Panel
+  - Pane
 related:
-  - text-area
+- text-area

package/components/pipeline-status/class.js

@@ -0,0 +1,189 @@
+/**
+ * Non-side-effect class export for `<pipeline-status-ui>`.
+ *
+ * Importing this file gives you the class(es) without auto-registering the tag.
+ * Useful for test isolation, subclassing with tag-name override, or selective
+ * composition.
+ *
+ * The auto-register path stays at `@adia-ai/web-components/components/pipeline-status`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+import { UIElement } 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
+ *   status  : String — 'idle' | 'active' | 'completed' | 'error'. Set to
+ *                       'completed' to render the final state and collapse
+ *                       the history log.
+ */
+
+const STAGE_LABELS = {
+  interpret: 'Interpreting',
+  analyze: 'Analyzing',
+  plan: 'Planning',
+  generate: 'Generating',
+  validate: 'Validating',
+  render: 'Rendering',
+};
+
+export class UIPipelineStatus extends UIElement {
+  static properties = {
+    stage:   { type: String, default: '', reflect: true },
+    message: { type: String, default: '', reflect: true },
+    // `status` is the canonical stage-progress shape (matches timeline-item-ui,
+    // stepper-item-ui, agent-reasoning-ui).
+    status:  { type: String, default: 'idle', 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.status === 'completed') {
+      // 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.status === 'completed') {
+      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;
+  }
+}

package/components/pipeline-status/pipeline-status.a2ui.json

@@ -81,7 +81,13 @@
         "name": "idle"
       }
     ],
-    "synonyms": {},
+    "synonyms": {
+      "tags": [
+        "job-status",
+        "deploy-status",
+        "pipeline-indicator"
+      ]
+    },
     "tag": "pipeline-status-ui",
     "tokens": {},
     "traits": [],

package/components/pipeline-status/pipeline-status.d.ts

@@ -0,0 +1,21 @@
+/**
+ * `<pipeline-status-ui>` — <pipeline-status-ui> — Single updating pipeline status indicator.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/pipeline-status
+ *
+ * Type declarations generated by scripts/build/dts-codegen.mjs from
+ * the component's `.a2ui.json` sidecar. Edit the source `.yaml`,
+ * run `npm run components`, then `npm run codegen:dts` to regenerate;
+ * or hand-author this file fully if rich event types are needed.
+ */
+
+import { UIElement } from '../../core/element.js';
+
+export class UIPipelineStatus extends UIElement {
+  /** Component property: complete. */
+  complete: boolean;
+  /** Component property: message. */
+  message: string;
+  /** Component property: stage. */
+  stage: string;
+}

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

@@ -1,180 +1,17 @@
-import { UIElement } from '../../core/element.js';
-
 /**
- * <pipeline-status-ui> — Single updating pipeline status indicator.
+ * `<pipeline-status-ui>` — auto-registers the tag on import.
+ *
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Shows the current stage with a message. Completed stages collapse into
- * an expandable history log. Auto-collapses when the pipeline finishes.
+ *   import { UIPipelineStatus } from '@adia-ai/web-components/components/pipeline-status/class';
  *
- * Properties:
- *   stage   : String — current stage name (interpret, analyze, plan, generate, validate, render)
- *   message : String — current stage description
- *   status  : String — 'idle' | 'active' | 'completed' | 'error'. Set to
- *                       'completed' to render the final state and collapse
- *                       the history log.
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-const STAGE_LABELS = {
-  interpret: 'Interpreting',
-  analyze: 'Analyzing',
-  plan: 'Planning',
-  generate: 'Generating',
-  validate: 'Validating',
-  render: 'Rendering',
-};
-
-class UIPipelineStatus extends UIElement {
-  static properties = {
-    stage:   { type: String, default: '', reflect: true },
-    message: { type: String, default: '', reflect: true },
-    // `status` is the canonical stage-progress shape (matches timeline-item-ui,
-    // stepper-item-ui, agent-reasoning-ui).
-    status:  { type: String, default: 'idle', 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.status === 'completed') {
-      // 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.status === 'completed') {
-      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;
-  }
-}
+import { defineIfFree } from '../../core/register.js';
+import { UIPipelineStatus } from './class.js';
 
-customElements.define('pipeline-status-ui', UIPipelineStatus);
+defineIfFree('pipeline-status-ui', UIPipelineStatus);
 
 export { UIPipelineStatus };