@adia-ai/web-components 0.0.1

package/components/pane/pane.css

@@ -0,0 +1,166 @@
+@scope (pane-ui) {
+  /* Tokens — :where() for zero specificity so consumers can override */
+  :where(:scope) {
+    --pane-bg:              var(--a-bg);
+    --pane-border:          var(--a-border-subtle);
+    --pane-radius:          var(--a-radius-lg);
+    /* Component-intrinsic measurement; no --a-space-* equivalent */
+    --pane-bar-height:      36px;
+    --pane-header-px:       var(--a-space-3);
+    --pane-header-py:       var(--a-space-2);
+    --pane-header-fg:       var(--a-fg);
+    --pane-header-size:     var(--a-ui-size);
+    --pane-header-weight:   var(--a-weight-medium);
+    --pane-section-px:      var(--a-space-3);
+    --pane-section-py:      var(--a-space-2);
+    --pane-section-header-fg: var(--a-fg-muted);
+    --pane-section-header-size: var(--a-ui-tiny);
+    --pane-footer-px:       var(--a-space-3);
+    --pane-footer-py:       var(--a-space-2);
+    --pane-col-gap:         var(--a-space-3);
+    /* Component-intrinsic measurement; no --a-space-* equivalent */
+    --pane-resize-width:    4px;
+    --pane-resize-fg:       var(--a-border);
+    --pane-resize-fg-hover: var(--a-fg-muted);
+
+    /* ── Spacing ── */
+    --pane-gap-sm:          var(--a-space-2);
+    --pane-gap-xs:          var(--a-space-1);
+
+    /* ── Header interaction ── */
+    --pane-header-bg-hover: var(--a-bg-subtle);
+    --pane-chevron-fg:      var(--a-fg-muted);
+
+    /* ── Section header ── */
+    --pane-section-header-weight: var(--a-weight-medium);
+
+    /* ── Resize active ── */
+    --pane-resize-fg-active: var(--a-fg-subtle);
+
+    /* ── Transitions ── */
+    --pane-duration:        var(--a-duration-fast);
+    --pane-easing:          var(--a-easing);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    background: var(--pane-bg);
+    border: 1px solid var(--pane-border);
+    /*border-radius: var(--pane-radius);*/
+    overflow: hidden;
+  }
+
+  /* ── Pane header ── */
+  > header {
+    display: flex;
+    align-items: center;
+    gap: var(--pane-gap-sm);
+    min-height: var(--pane-bar-height);
+    padding: var(--pane-header-py) var(--pane-header-px);
+    font-size: var(--pane-header-size);
+    font-weight: var(--pane-header-weight);
+    color: var(--pane-header-fg);
+    cursor: pointer;
+    user-select: none;
+    border-bottom: 1px solid var(--pane-border);
+    transition: background var(--pane-duration) var(--pane-easing);
+  }
+
+  > header:hover {
+    background: var(--pane-header-bg-hover);
+  }
+
+  /* Collapse indicator — stamped by JS as icon-ui */
+  > header > [slot="chevron"] {
+    --a-icon-size: 0.5rem;
+    flex-shrink: 0;
+    margin-inline-start: auto;
+    color: var(--pane-chevron-fg);
+    transition: transform var(--pane-duration) var(--pane-easing);
+    transform: rotate(90deg);
+  }
+
+  :scope[collapsed] > header > [slot="chevron"] {
+    transform: rotate(0deg);
+  }
+
+  /* ── Sections ── */
+  > section {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    scrollbar-width: none;
+    padding: var(--pane-section-py) var(--pane-section-px);
+  }
+
+  > section::-webkit-scrollbar {
+    display: none;
+  }
+
+  /* Section header */
+  > section > header {
+    font-size: var(--pane-section-header-size);
+    color: var(--pane-section-header-fg);
+    padding-bottom: var(--pane-gap-xs);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    font-weight: var(--pane-section-header-weight);
+  }
+
+  /* Section divider between sections */
+  > section + section {
+    border-top: 1px solid var(--pane-border);
+  }
+
+  /* Column layout */
+  [data-col] {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--pane-col-gap);
+  }
+
+  /* ── Footer ── */
+  > footer {
+    min-height: var(--pane-bar-height);
+    display: flex;
+    align-items: center;
+    padding: var(--pane-footer-py) var(--pane-footer-px);
+    border-top: 1px solid var(--pane-border);
+  }
+
+  /* ── Collapsed state ── */
+  :scope[collapsed] > section,
+  :scope[collapsed] > footer {
+    display: none;
+  }
+
+  :scope[collapsed] > header {
+    border-bottom: none;
+  }
+
+  /* ── Resize handle ── */
+  [slot="resize"] {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: var(--pane-resize-width);
+    cursor: col-resize;
+    background: transparent;
+    transition: background var(--pane-duration) var(--pane-easing);
+    z-index: 1;
+  }
+
+  [slot="resize"]:hover {
+    background: var(--pane-resize-fg-hover);
+  }
+
+  :scope[data-resizing] [slot="resize"] {
+    background: var(--pane-resize-fg-active);
+  }
+}

package/components/pane/pane.js

@@ -0,0 +1,140 @@
+/**
+ * <pane-ui> — Collapsible, resizable panel.
+ *
+ * Structure:
+ *   <pane-ui>
+ *     <header>Pane Title</header>
+ *     <section>
+ *       <header>Section Title</header>
+ *       <div data-col>
+ *         ...content...
+ *       </div>
+ *     </section>
+ *     <section>...</section>
+ *     <footer>...</footer>
+ *   </pane-ui>
+ *
+ * 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)
+ *
+ * JS API:
+ *   pane.collapsed = true/false
+ *   pane.toggle()
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaPane extends AdiaElement {
+  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 },
+  };
+
+  static template = () => null;
+
+  #resizeEl = null;
+  #dragging = false;
+  #startX = 0;
+  #startW = 0;
+  #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 ──
+
+  #onResizeDown = (e) => {
+    e.preventDefault();
+    this.#dragging = true;
+    this.#startX = e.clientX;
+    this.#startW = this.getBoundingClientRect().width;
+    this.setAttribute('data-resizing', '');
+    document.addEventListener('pointermove', this.#onResizeMove);
+    document.addEventListener('pointerup', this.#onResizeUp, { once: true });
+  };
+
+  #onResizeMove = (e) => {
+    if (!this.#dragging) return;
+    const dx = e.clientX - this.#startX;
+    const w = Math.max(this.minWidth, Math.min(this.maxWidth, this.#startW + dx));
+    this.style.width = `${w}px`;
+  };
+
+  #onResizeUp = () => {
+    this.#dragging = false;
+    this.removeAttribute('data-resizing');
+    document.removeEventListener('pointermove', this.#onResizeMove);
+  };
+
+  disconnected() {
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('keydown', this.#onKey);
+    this.#resizeEl?.removeEventListener('pointerdown', this.#onResizeDown);
+    document.removeEventListener('pointermove', this.#onResizeMove);
+    this.#bound = false;
+  }
+}
+customElements.define('pane-ui', AdiaPane);
+
+export { AdiaPane };

package/components/pane/pane.yaml

@@ -0,0 +1,197 @@
+# 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: AdiaPane
+tag: pane-ui
+component: Pane
+category: layout
+version: 1
+description: Collapsible, resizable panel.
+props:
+  collapsed:
+    description: "Component property: collapsed."
+    type: boolean
+    default: false
+  maxWidth:
+    description: "Component property: maxWidth."
+    type: number
+    default: 9999
+    attribute: max-width
+  minWidth:
+    description: "Component property: minWidth."
+    type: number
+    default: 200
+    attribute: min-width
+  open:
+    description: Controls whether the panel content is visible
+    type: boolean
+    default: false
+    reflect: true
+  resizable:
+    description: "Component property: resizable."
+    type: boolean
+    default: false
+  text:
+    description: Text displayed in the header
+    type: string
+    default: ""
+events: {}
+slots:
+  header:
+    description: Auto-created header element with label text and toggle arrow
+states:
+  - 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"
+        }
+      ]
+keywords:
+  - pane
+synonyms: {}
+related:
+  - text-area

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

@@ -0,0 +1,90 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/PipelineStatus.json",
+  "title": "PipelineStatus",
+  "description": "<pipeline-status-ui> — Single updating pipeline status indicator.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "complete": {
+      "description": "Component property: complete.",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "PipelineStatus"
+    },
+    "message": {
+      "description": "Component property: message.",
+      "type": "string",
+      "default": ""
+    },
+    "stage": {
+      "description": "Component property: stage.",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "agent",
+    "events": {},
+    "examples": [
+      {
+        "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": "basic-pipeline-status"
+      },
+      {
+        "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": "stage"
+      },
+      {
+        "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": "message"
+      },
+      {
+        "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]",
+        "name": "complete"
+      }
+    ],
+    "keywords": [
+      "pipelinestatus",
+      "pipeline-status",
+      "pipeline",
+      "status"
+    ],
+    "name": "AdiaPipelineStatus",
+    "related": [],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "pipeline-status-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}