@adia-ai/web-components 0.4.6 → 0.4.8

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 };

package/components/pipeline-status/pipeline-status.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: UIPipelineStatus
 tag: pipeline-status-ui
@@ -9,91 +7,55 @@ version: 1
 description: <pipeline-status-ui> — Single updating pipeline status indicator.
 props:
   complete:
-    description: "Component property: complete."
+    description: 'Component property: complete.'
     type: boolean
     default: false
   message:
-    description: "Component property: message."
+    description: 'Component property: message.'
     type: string
-    default: ""
+    default: ''
   stage:
-    description: "Component property: stage."
+    description: 'Component property: stage.'
     type: string
-    default: ""
+    default: ''
 events: {}
 slots:
   default:
-    description: "Default slot — primary child content."
+    description: Default slot — primary child content.
 states:
-  - name: idle
-    description: Default, ready for interaction.
+- 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
-        }
-      ]
+- name: basic-pipeline-status
+  description: Basic PipelineStatus 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\": \"PipelineStatus\"\n  }\n]"
+- name: stage
+  description: Pipeline status with a prominent stage label for the current step.
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"PipelineStatus\",\n    \"stage\": \"Building catalog\",\n   \
+    \ \"message\": \"Reading 100 patterns from disk...\"\n  }\n]"
+- name: message
+  description: Pipeline status with a secondary progress message updated as the stage advances.
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"PipelineStatus\",\n    \"stage\": \"Running evals\",\n    \"\
+    message\": \"32 / 100 intents scored...\"\n  }\n]"
+- name: complete
+  description: Pipeline status marked complete; indicator switches to success state.
+  a2ui: "[\n  {\n    \"id\": \"root\",\n    \"component\": \"PipelineStatus\",\n    \"stage\": \"Done\",\n    \"message\"\
+    : \"All 100 intents passed\",\n    \"complete\": true\n  }\n]"
 keywords:
-  - pipelinestatus
-  - pipeline-status
-  - pipeline
-  - status
-synonyms: {}
+- pipelinestatus
+- pipeline-status
+- pipeline
+- status
+synonyms:
+  tags:
+  - job-status
+  - deploy-status
+  - pipeline-indicator
 related: []

package/components/popover/class.js

@@ -0,0 +1,194 @@
+/**
+ * Non-side-effect class export for `<popover-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/popover`
+ * (which imports this file + calls `defineIfFree()`).
+ *
+ * @see ../../USAGE.md#registration--auto-vs-explicit
+ */
+
+/**
+ * <popover-ui trigger="click" placement="bottom-start">
+ *   <button-ui slot="trigger" text="Open"></button-ui>
+ *   <div slot="content">Popover content here</div>
+ * </popover-ui>
+ *
+ * Built on the web platform:
+ *   • Popover API — content has popover="manual"; showPopover() promotes it
+ *     to the top layer (no z-index, no overflow clipping, ESC bubbling handled).
+ *   • CSS Anchor Positioning — used natively when supported, JS fallback otherwise
+ *     (see @core/anchor.js).
+ *
+ * Triggers: click | hover | manual. ESC closes click/manual popovers.
+ */
+
+import { UIElement } from '../../core/element.js';
+import { anchorPopover } from '../../core/anchor.js';
+
+const HOVER_CLOSE_DELAY = 120;
+
+export class UIPopover extends UIElement {
+  static properties = {
+    placement: { type: String,  default: 'bottom', reflect: true },
+    gap:       { type: Number,  default: 4, reflect: true },
+    open:      { type: Boolean, default: false, reflect: true },
+    trigger:   { type: String,  default: 'click', reflect: true },
+  };
+
+  static template = () => null;
+
+  #anchorCleanup = null;
+  #bound = false;
+  #hoverTimer = null;
+  #content = null;
+  #rafId = null;
+
+  connected() {
+    const content = this.querySelector('[slot="content"]');
+    if (content) {
+      if (!content.hasAttribute('popover')) content.setAttribute('popover', 'manual');
+      // Sync state when the browser toggles the popover (e.g. light-dismiss, ESC on auto, programmatic).
+      content.addEventListener('toggle', this.#onToggle);
+      this.#content = content;
+    }
+
+    if (!this.#bound) {
+      this.#bound = true;
+
+      if (this.trigger === 'click') {
+        this.addEventListener('click', this.#onClick);
+      }
+
+      if (this.trigger === 'hover') {
+        this.addEventListener('pointerenter', this.#onEnter);
+        this.addEventListener('pointerleave', this.#onLeave);
+        // Also let the pointer cross into the content without closing.
+        if (content) {
+          content.addEventListener('pointerenter', this.#onEnter);
+          content.addEventListener('pointerleave', this.#onLeave);
+        }
+      }
+    }
+  }
+
+  render() {
+    if (this.open) this.#show();
+    else this.#hide();
+  }
+
+  // ── Public API ──
+  show()   { this.open = true; }
+  hide()   { this.open = false; }
+  toggle() { this.open = !this.open; }
+
+  // ── Internal ──
+
+  #show() {
+    const trigger = this.querySelector('[slot="trigger"]');
+    const content = this.#content ?? this.querySelector('[slot="content"]');
+    if (!trigger || !content) return;
+
+    if (!content.matches(':popover-open')) {
+      // try/catch covers test envs (happy-dom) without the API. Known iOS
+      // Safari quirks at the supported floor (light-dismiss broken on
+      // 17.0–18.2, virtual-keyboard-on-input persists past 18.3) are
+      // documented in docs/BROWSER-COMPAT.md §3a.
+      try { content.showPopover(); } catch { /* popover API unavailable — anchor positioning still runs */ }
+    }
+
+    this.#anchorCleanup?.();
+    this.#anchorCleanup = anchorPopover(trigger, content, {
+      placement: this.placement,
+      gap: this.gap,
+    });
+
+    if (this.trigger === 'click' || this.trigger === 'manual') {
+      // Defer to next frame so the opening click doesn't trigger outside-dismiss.
+      this.#rafId = requestAnimationFrame(() => {
+        this.#rafId = null;
+        document.addEventListener('pointerdown', this.#onOutside);
+        document.addEventListener('keydown', this.#onKey);
+      });
+    }
+  }
+
+  #hide() {
+    this.#anchorCleanup?.();
+    this.#anchorCleanup = null;
+
+    const content = this.#content ?? this.querySelector('[slot="content"]');
+    if (content?.matches(':popover-open')) {
+      try { content.hidePopover(); } catch { /* popover API unavailable */ }
+    }
+
+    if (this.#rafId != null) {
+      cancelAnimationFrame(this.#rafId);
+      this.#rafId = null;
+    }
+    document.removeEventListener('pointerdown', this.#onOutside);
+    document.removeEventListener('keydown', this.#onKey);
+  }
+
+  // ── Events ──
+
+  #onClick = (e) => {
+    const trigger = this.querySelector('[slot="trigger"]');
+    if (trigger && (e.target === trigger || trigger.contains(e.target))) {
+      this.open = !this.open;
+    }
+  };
+
+  #onOutside = (e) => {
+    if (!this.open) return;
+    const content = this.#content;
+    // Click inside host or inside the (top-layer) content: keep open.
+    if (this.contains(e.target) || content?.contains(e.target)) return;
+    this.open = false;
+  };
+
+  #onKey = (e) => {
+    if (e.key === 'Escape' && this.open) {
+      e.stopPropagation();
+      this.open = false;
+    }
+  };
+
+  #onEnter = () => {
+    clearTimeout(this.#hoverTimer);
+    this.open = true;
+  };
+
+  #onLeave = () => {
+    clearTimeout(this.#hoverTimer);
+    this.#hoverTimer = setTimeout(() => { this.open = false; }, HOVER_CLOSE_DELAY);
+  };
+
+  #onToggle = (e) => {
+    // Reflect browser-driven state changes (e.g. popover-auto light-dismiss).
+    const nowOpen = e.newState === 'open';
+    if (nowOpen !== this.open) this.open = nowOpen;
+  };
+
+  disconnected() {
+    clearTimeout(this.#hoverTimer);
+    this.#hide();
+    if (this.trigger === 'click') {
+      this.removeEventListener('click', this.#onClick);
+    }
+    if (this.trigger === 'hover') {
+      this.removeEventListener('pointerenter', this.#onEnter);
+      this.removeEventListener('pointerleave', this.#onLeave);
+      if (this.#content) {
+        this.#content.removeEventListener('pointerenter', this.#onEnter);
+        this.#content.removeEventListener('pointerleave', this.#onLeave);
+      }
+    }
+    this.#content?.removeEventListener('toggle', this.#onToggle);
+    this.#content = null;
+    this.#bound = false;
+  }
+}

package/components/popover/popover.a2ui.json

@@ -59,6 +59,7 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "container",
+    "composes": [],
     "events": {},
     "examples": [
       {

package/components/popover/popover.d.ts

@@ -0,0 +1,24 @@
+/**
+ * `<popover-ui>` — Popover using Popover API + CSS Anchor Positioning. Triggers: click, hover, manual.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/popover
+ *
+ * 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 UIPopover extends UIElement {
+  /** Pixel offset between the anchor and the popover */
+  gap: number;
+  /** Controls visibility via showPopover()/hidePopover() */
+  open: boolean;
+  /** Popover placement */
+  placement: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+  /** Trigger mode */
+  trigger: 'click' | 'hover' | 'manual';
+}