@adia-ai/web-components 0.4.6 → 0.4.8

package/components/pane/pane.js

@@ -1,176 +1,17 @@
 /**
- * <pane-ui> — Collapsible, resizable panel.
+ * `<pane-ui>` — auto-registers the tag on import.
  *
- * Structure:
- *   <pane-ui>
- *     <header>Pane Title</header>
- *     <section>
- *       <header>Section Title</header>
- *       <div data-col>
- *         ...content...
- *       </div>
- *     </section>
- *     <section>...</section>
- *     <footer>...</footer>
- *   </pane-ui>
+ * For non-side-effect class import (test isolation, tag override), use
+ * the `class` subpath:
  *
- * Attributes:
- *   collapsed    — boolean, hides content and footer
- *   resizable    — boolean, enables drag-to-resize (width)
- *   min-width    — minimum width when resizing (default: 200)
- *   max-width    — maximum width when resizing (default: 600)
- *   side         — 'leading' | 'trailing' | '' (default). When set, the
- *                  pane is treated as a horizontal sibling: the default
- *                  four-sided border is suppressed, only the inner-edge
- *                  border is drawn, the resize grabber moves to that
- *                  inner edge, and the resize-drag direction flips so
- *                  trailing panes grow when dragged leftward.
+ *   import { UIPane } from '@adia-ai/web-components/components/pane/class';
  *
- * JS API:
- *   pane.collapsed = true/false
- *   pane.toggle()
+ * @see ../../USAGE.md#registration--auto-vs-explicit
  */
 
-import { UIElement } from '../../core/element.js';
+import { defineIfFree } from '../../core/register.js';
+import { UIPane } from './class.js';
 
-class UIPane extends UIElement {
-  static properties = {
-    collapsed:  { type: Boolean, default: false, reflect: true },
-    resizable:  { type: Boolean, default: false, reflect: true },
-    minWidth:   { type: Number,  default: 200, attribute: 'min-width', reflect: true },
-    maxWidth:   { type: Number,  default: 9999, attribute: 'max-width', reflect: true },
-    side:       { type: String,  default: '', reflect: true },
-  };
-
-  static template = () => null;
-
-  #resizeEl = null;
-  #dragging = false;
-  #startX = 0;
-  #startW = 0;
-  #pointerId = null;
-  #prevDocCursor = '';
-  #bound = false;
-
-  connected() {
-    if (!this.#bound) {
-      this.#bound = true;
-
-      // Click on pane header toggles collapse
-      this.addEventListener('click', this.#onClick);
-      this.addEventListener('keydown', this.#onKey);
-    }
-
-    // Stamp resize handle if resizable and not present
-    if (this.resizable && !this.querySelector('[slot="resize"]')) {
-      this.#resizeEl = document.createElement('div');
-      this.#resizeEl.setAttribute('slot', 'resize');
-      this.appendChild(this.#resizeEl);
-    }
-
-    if (this.#resizeEl || this.resizable) {
-      this.#resizeEl = this.#resizeEl || this.querySelector('[slot="resize"]');
-      this.#resizeEl?.addEventListener('pointerdown', this.#onResizeDown);
-    }
-  }
-
-  render() {
-    const header = this.querySelector(':scope > header');
-    if (header) {
-      header.setAttribute('role', 'button');
-      header.setAttribute('tabindex', '0');
-      header.setAttribute('aria-expanded', String(!this.collapsed));
-
-      // Stamp chevron icon if not present
-      if (!header.querySelector('[slot="chevron"]')) {
-        const chevron = document.createElement('icon-ui');
-        chevron.setAttribute('slot', 'chevron');
-        chevron.setAttribute('name', 'caret-right');
-        header.append(chevron);
-      }
-    }
-  }
-
-  toggle() {
-    this.collapsed = !this.collapsed;
-    this.dispatchEvent(new Event('toggle', { bubbles: true }));
-  }
-
-  #onClick = (e) => {
-    const header = this.querySelector(':scope > header');
-    if (header && (e.target === header || header.contains(e.target))) {
-      this.toggle();
-    }
-  };
-
-  #onKey = (e) => {
-    if (e.target !== this.querySelector(':scope > header')) return;
-    if (e.key === 'Enter' || e.key === ' ') {
-      e.preventDefault();
-      this.toggle();
-    }
-  };
-
-  // ── Resize ──
-  //
-  // Pointer capture + handle-level listeners (not document-level): keeps
-  // pointer events flowing to the grabber even when the cursor races past
-  // it, and works under touch. Cursor is locked at the documentElement
-  // level so it stays `col-resize` across the whole viewport during drag,
-  // not just over the 4px handle. CSS bypasses any width transition while
-  // `[data-resizing]` is set, so resizes track the pointer 1:1.
-
-  #onResizeDown = (e) => {
-    if (!e.isPrimary) return;
-    e.preventDefault();
-    this.#dragging = true;
-    this.#startX = e.clientX;
-    this.#startW = this.getBoundingClientRect().width;
-    this.#pointerId = e.pointerId;
-    this.setAttribute('data-resizing', '');
-
-    try { this.#resizeEl.setPointerCapture(e.pointerId); } catch {}
-    this.#resizeEl.addEventListener('pointermove', this.#onResizeMove);
-    this.#resizeEl.addEventListener('pointerup', this.#onResizeUp, { once: true });
-    this.#resizeEl.addEventListener('pointercancel', this.#onResizeUp, { once: true });
-
-    this.#prevDocCursor = document.documentElement.style.cursor;
-    document.documentElement.style.cursor = 'col-resize';
-  };
-
-  #onResizeMove = (e) => {
-    if (!this.#dragging) return;
-    // For a trailing pane the grabber sits on the LEFT edge but the pane
-    // is anchored on the RIGHT side of its flex row — dragging leftward
-    // should GROW the pane (grabber moves further left = more width),
-    // not shrink it. Negate dx in that case.
-    const sign = this.side === 'trailing' ? -1 : 1;
-    const dx = (e.clientX - this.#startX) * sign;
-    const w = Math.max(this.minWidth, Math.min(this.maxWidth, this.#startW + dx));
-    this.style.width = `${w}px`;
-  };
-
-  #onResizeUp = () => {
-    if (!this.#dragging) return;
-    this.#dragging = false;
-    this.removeAttribute('data-resizing');
-    try { this.#resizeEl?.releasePointerCapture(this.#pointerId); } catch {}
-    this.#pointerId = null;
-    this.#resizeEl?.removeEventListener('pointermove', this.#onResizeMove);
-    document.documentElement.style.cursor = this.#prevDocCursor;
-  };
-
-  disconnected() {
-    this.removeEventListener('click', this.#onClick);
-    this.removeEventListener('keydown', this.#onKey);
-    this.#resizeEl?.removeEventListener('pointerdown', this.#onResizeDown);
-    this.#resizeEl?.removeEventListener('pointermove', this.#onResizeMove);
-    if (this.#dragging) {
-      document.documentElement.style.cursor = this.#prevDocCursor;
-    }
-    this.#bound = false;
-  }
-}
-customElements.define('pane-ui', UIPane);
+defineIfFree('pane-ui', UIPane);
 
 export { UIPane };

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
@@ -7,194 +5,102 @@ component: Pane
 category: layout
 version: 1
 description: Collapsible, resizable panel.
+# Per ADR-0027 — primitives that programmatically create other primitives
+# do NOT auto-import them. Consumer (or demo shell) must explicitly import.
+composes:
+  - icon-ui
 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: {}
+events:
+  toggle:
+    description: Fired when the pane's collapsed state flips (via button press, keyboard, or programmatic toggle()). Bubbles.
 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

@@ -39,6 +39,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "agent",
+    "composes": [],
     "events": {},
     "examples": [
       {
@@ -81,7 +82,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,22 @@
+/**
+ * `<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 build:components`, then `npm run codegen:dts` to
+ * regenerate; or hand-author this file fully if rich event types are
+ * needed beyond what the yaml `events:` block can express.
+ */
+
+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;
+}