@adia-ai/web-components 0.0.1

package/components/calendar-picker/calendar-picker.yaml

@@ -0,0 +1,243 @@
+# 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: AdiaCalendarPicker
+tag: calendar-picker-ui
+component: CalendarPicker
+category: input
+version: 1
+description: Date picker with trigger button and popover calendar grid. Form-associated.
+props:
+  name:
+    description: Form field name
+    type: string
+    default: ""
+  required:
+    description: Required for validation
+    type: boolean
+    default: false
+    reflect: true
+  disabled:
+    description: Disables interaction
+    type: boolean
+    default: false
+    reflect: true
+  format:
+    description: Display format for the selected date
+    type: string
+    default: short
+    enum:
+      - short
+      - long
+      - iso
+  label:
+    description: Label text displayed above the trigger
+    type: string
+    default: ""
+  max:
+    description: Maximum selectable date in ISO format (YYYY-MM-DD)
+    type: string
+    default: ""
+  min:
+    description: Minimum selectable date in ISO format (YYYY-MM-DD)
+    type: string
+    default: ""
+  open:
+    description: Whether the calendar popover is open
+    type: boolean
+    default: false
+    reflect: true
+  placeholder:
+    description: Placeholder text when no date is selected
+    type: string
+    default: Select date...
+  value:
+    description: Selected date (ISO string)
+    type: string
+    default: ""
+events:
+  change:
+    description: Fired when a date is selected
+slots:
+  calendar:
+    description: Popover container for the month grid
+  label:
+    description: Label element above the trigger
+  trigger:
+    description: Combobox button that opens the calendar popover
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: date-picker
+    description: Date and time picker form with calendar picker and time selects.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "col"
+          ]
+        },
+        {
+          "id": "col",
+          "component": "Column",
+          "children": [
+            "name",
+            "cal",
+            "btn"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "name",
+          "component": "Input",
+          "label": "Event Name"
+        },
+        {
+          "id": "cal",
+          "component": "CalendarPicker",
+          "label": "Date"
+        },
+        {
+          "id": "btn",
+          "component": "Button",
+          "text": "Schedule",
+          "variant": "primary"
+        }
+      ]
+  - name: date-range-picker
+    description: Date range selection form with start/end calendar pickers, quick-pick badges, and apply button.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Select Dates",
+          "variant": "section"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "fields"
+          ]
+        },
+        {
+          "id": "fields",
+          "component": "Column",
+          "children": [
+            "calendars-row",
+            "quick-picks"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "calendars-row",
+          "component": "Row",
+          "children": [
+            "start-cal",
+            "end-cal"
+          ],
+          "gap": "3"
+        },
+        {
+          "id": "start-cal",
+          "component": "CalendarPicker",
+          "label": "Start Date",
+          "name": "startDate"
+        },
+        {
+          "id": "end-cal",
+          "component": "CalendarPicker",
+          "label": "End Date",
+          "name": "endDate"
+        },
+        {
+          "id": "quick-picks",
+          "component": "Row",
+          "children": [
+            "pick-today",
+            "pick-week",
+            "pick-month",
+            "pick-quarter"
+          ],
+          "gap": "2"
+        },
+        {
+          "id": "pick-today",
+          "component": "Badge",
+          "textContent": "Today"
+        },
+        {
+          "id": "pick-week",
+          "component": "Badge",
+          "textContent": "This Week"
+        },
+        {
+          "id": "pick-month",
+          "component": "Badge",
+          "textContent": "This Month"
+        },
+        {
+          "id": "pick-quarter",
+          "component": "Badge",
+          "textContent": "This Quarter"
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "apply-btn"
+          ]
+        },
+        {
+          "id": "apply-btn",
+          "component": "Button",
+          "text": "Apply",
+          "variant": "primary"
+        }
+      ]
+keywords:
+  - calendarpicker
+  - calendar-picker
+  - calendar
+  - picker
+synonyms: {}
+related:
+  - input
+  - button
+  - badge

package/components/canvas/canvas.a2ui.json

@@ -0,0 +1,75 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Canvas.json",
+  "title": "Canvas",
+  "description": "A2UI rendering surface.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "theme": {
+      "description": "Component property: theme.",
+      "type": "string",
+      "default": ""
+    },
+    "component": {
+      "const": "Canvas"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "agent",
+    "events": {
+      "canvas-interaction": {
+        "description": "Fired on canvas-interaction."
+      },
+      "change": {
+        "description": "Fired when the value changes (on blur for inputs, on selection for pickers)."
+      },
+      "click": {
+        "description": "Fired on pointer click."
+      },
+      "input": {
+        "description": "Fired on each input change during typing."
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic Canvas 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\": \"Canvas\"\n  }\n]",
+        "name": "basic-canvas"
+      }
+    ],
+    "keywords": [
+      "canvas"
+    ],
+    "name": "AdiaCanvas",
+    "related": [],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "canvas-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/canvas/canvas.css

@@ -0,0 +1,52 @@
+@scope (canvas-ui) {
+
+  /* ═══════════════════════════════════════════════════════
+     TOKENS
+     ═══════════════════════════════════════════════════════ */
+
+  :where(:scope) {
+    --canvas-bg:              var(--a-canvas-0);
+    --canvas-fg:              var(--a-fg);
+    --canvas-font-family:     var(--a-font-family);
+    --canvas-inset:           var(--a-space-2);
+    --canvas-surface-bg:      var(--a-bg);
+    --canvas-surface-max:     56rem;
+  }
+
+  /* ═══════════════════════════════════════════════════════
+     CANVAS HOST
+     ═══════════════════════════════════════════════════════ */
+
+  :scope {
+    box-sizing:          border-box;
+    display:             flex;
+    flex-direction:      column;
+    min-height:          0;
+    height:              100%;
+    background:          var(--canvas-bg);
+    color:               var(--canvas-fg);
+    font-family:         var(--canvas-font-family);
+  }
+
+  /* ═══════════════════════════════════════════════════════
+     SURFACE (a2ui-root area)
+     ═══════════════════════════════════════════════════════ */
+
+  [data-canvas-surface] {
+    flex:                1;
+    display:             flex;
+    align-items:         center;
+    justify-content:     center;
+    overflow:            auto;
+    padding:             var(--canvas-inset);
+    min-height:          0;
+    background:          var(--canvas-surface-bg);
+  }
+
+  [data-canvas-surface] > a2ui-root,
+  [data-canvas-surface] > theme-ui {
+    display:             block;
+    width:               100%;
+    max-width:           var(--canvas-surface-max);
+  }
+}

package/components/canvas/canvas.js

@@ -0,0 +1,179 @@
+import { AdiaElement } from '@core/element.js';
+import '../../a2ui/root.js';
+
+/**
+ * <canvas-ui> — A2UI rendering surface.
+ *
+ * Wrapper mode. Wraps an a2ui-root for rendering generated components.
+ * Consumer-owns-LLM: fires interaction events, never calls fetch.
+ *
+ * Events:
+ *   canvas-interaction — user interacts with rendered components.
+ *     Detail: { type, targetTag, targetId, value }
+ */
+export class AdiaCanvas extends AdiaElement {
+  static properties = {
+    theme: { type: String, default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  #bound = false;
+  #rootEl = null;
+  #rootContainer = null;
+  #history = [];     // P7: version stack (A2UI message arrays)
+  #historyIndex = -1;
+  static MAX_HISTORY = 10;
+
+  #onKeydown = (e) => {
+    if (e.target.closest('input, textarea, [contenteditable]')) return;
+    if (!this.contains(document.activeElement) && document.activeElement !== document.body) return;
+  };
+
+  #onClick = (e) => {
+    if (!this.#rootEl?.contains(e.target)) return;
+    this.#emitInteraction('click', e.target);
+  };
+
+  #onChange = (e) => {
+    if (!this.#rootEl?.contains(e.target)) return;
+    this.#emitInteraction('change', e.target);
+  };
+
+  #onInput = (e) => {
+    if (!this.#rootEl?.contains(e.target)) return;
+    this.#emitInteraction('input', e.target);
+  };
+
+  #onRetry = (e) => {
+    // Re-dispatch as canvas-interaction with type='retry' for uniform handling
+    this.dispatchEvent(new CustomEvent('canvas-interaction', {
+      bubbles: true,
+      detail: {
+        type: 'retry',
+        targetTag: 'button-ui',
+        targetId: 'retry',
+        value: '',
+        ...e.detail,
+      },
+    }));
+  };
+
+  connected() {
+    document.addEventListener('keydown', this.#onKeydown);
+    this.addEventListener('click', this.#onClick);
+    this.addEventListener('change', this.#onChange);
+    this.addEventListener('input', this.#onInput);
+    // Forward a2ui-retry from wired error cards so consumers can retry generation
+    this.addEventListener('a2ui-retry', this.#onRetry);
+  }
+
+  disconnected() {
+    document.removeEventListener('keydown', this.#onKeydown);
+    this.removeEventListener('click', this.#onClick);
+    this.removeEventListener('change', this.#onChange);
+    this.removeEventListener('input', this.#onInput);
+    this.removeEventListener('a2ui-retry', this.#onRetry);
+    this.#rootEl = null;
+    this.#rootContainer = null;
+    this.#bound = false;
+  }
+
+  render() {
+    if (this.#bound) return;
+    this.#bound = true;
+
+    this.#rootContainer = document.createElement('div');
+    this.#rootContainer.setAttribute('data-canvas-surface', '');
+
+    this.#rootEl = document.createElement('a2ui-root');
+
+    if (this.theme) {
+      const themeEl = document.createElement('theme-n');
+      themeEl.setAttribute('preset', this.theme);
+      themeEl.appendChild(this.#rootEl);
+      this.#rootContainer.appendChild(themeEl);
+    } else {
+      this.#rootContainer.appendChild(this.#rootEl);
+    }
+
+    this.appendChild(this.#rootContainer);
+  }
+
+  // ── Public API ──
+
+  /** Process a single A2UI message. */
+  process(message) {
+    this.#rootEl?.process(message);
+  }
+
+  /** Process an array of A2UI messages. */
+  processAll(messages) {
+    if (!this.#rootEl) return;
+    for (const msg of messages) this.#rootEl.process(msg);
+  }
+
+  /** Reset the canvas. */
+  reset() {
+    this.#rootEl?.reset();
+  }
+
+  /** Return formatted innerHTML of the a2ui-root. */
+  getHTML() {
+    return this.#rootEl?.innerHTML ?? '';
+  }
+
+  /** Snapshot current state to history stack. */
+  pushVersion(messages) {
+    // Truncate forward history if we're not at the end
+    if (this.#historyIndex < this.#history.length - 1) {
+      this.#history = this.#history.slice(0, this.#historyIndex + 1);
+    }
+    this.#history.push(messages ? [...messages] : []);
+    if (this.#history.length > AdiaCanvas.MAX_HISTORY) this.#history.shift();
+    this.#historyIndex = this.#history.length - 1;
+  }
+
+  /** Go back one version. Returns false if already at oldest. */
+  back() {
+    if (this.#historyIndex <= 0) return false;
+    this.#historyIndex--;
+    this.#restoreVersion();
+    return true;
+  }
+
+  /** Go forward one version. Returns false if already at newest. */
+  forward() {
+    if (this.#historyIndex >= this.#history.length - 1) return false;
+    this.#historyIndex++;
+    this.#restoreVersion();
+    return true;
+  }
+
+  get historyLength() { return this.#history.length; }
+  get historyIndex() { return this.#historyIndex; }
+
+  #restoreVersion() {
+    const messages = this.#history[this.#historyIndex];
+    this.#rootEl?.reset();
+    if (messages) {
+      for (const msg of messages) this.#rootEl?.process(msg);
+    }
+  }
+
+  // ── Private ──
+
+  #emitInteraction(type, target) {
+    this.dispatchEvent(new CustomEvent('canvas-interaction', {
+      bubbles: true,
+      detail: {
+        type,
+        targetTag: target.localName,
+        targetId: target.id || '',
+        value: target.value ?? target.getAttribute('text') ?? '',
+      },
+    }));
+  }
+}
+
+customElements.define('canvas-ui', AdiaCanvas);

package/components/canvas/canvas.yaml

@@ -0,0 +1,62 @@
+# 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: AdiaCanvas
+tag: canvas-ui
+component: Canvas
+category: agent
+version: 1
+description: A2UI rendering surface.
+props:
+  theme:
+    description: "Component property: theme."
+    type: string
+    default: ""
+events:
+  canvas-interaction:
+    description: "Fired on canvas-interaction."
+  change:
+    description: "Fired when the value changes (on blur for inputs, on selection for pickers)."
+  click:
+    description: "Fired on pointer click."
+  input:
+    description: "Fired on each input change during typing."
+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-canvas
+    description: Basic Canvas usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "Canvas"
+        }
+      ]
+keywords:
+  - canvas
+synonyms: {}
+related: []