@adia-ai/web-components 0.0.1

package/components/embed/embed.yaml

@@ -0,0 +1,224 @@
+# 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: AdiaEmbed
+tag: embed-ui
+component: Embed
+category: agent
+version: 1
+description: Responsive sandboxed iframe wrapper.
+props:
+  aspect:
+    description: CSS aspect-ratio (e.g. 16/9)
+    type: string
+    default: ""
+  height:
+    description: Iframe height. Plain numbers treated as pixels.
+    type: string
+    default: "400"
+  src:
+    description: URL to load in the iframe
+    type: string
+    default: ""
+  width:
+    description: Iframe width. Any CSS width value.
+    type: string
+    default: 100%
+events: {}
+slots:
+  iframe:
+    description: Sandboxed <iframe> element (allow-scripts allow-same-origin)
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: embed-content
+    description: Card wrapping an embedded iframe for video or map content with a descriptive header.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "body",
+            "caption-sec"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "slots": {
+            "heading": "Product Demo",
+            "description": "Watch a 3-minute walkthrough of our core features."
+          }
+        },
+        {
+          "id": "body",
+          "component": "Section",
+          "children": [
+            "video"
+          ]
+        },
+        {
+          "id": "video",
+          "component": "Embed",
+          "attrs": {
+            "src": "https://www.youtube.com/embed/dQw4w9WgXcQ",
+            "type": "video",
+            "aspectRatio": "16:9",
+            "title": "Product demo video",
+            "allowFullscreen": true
+          }
+        },
+        {
+          "id": "caption-sec",
+          "component": "Section",
+          "children": [
+            "caption"
+          ]
+        },
+        {
+          "id": "caption",
+          "component": "Text",
+          "attrs": {
+            "variant": "caption",
+            "muted": true
+          },
+          "content": "Duration: 3:24 · Last updated January 2025"
+        }
+      ]
+  - name: video-player
+    description: Video player with embed area, seek slider, and playback controls.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "vid",
+            "controls"
+          ]
+        },
+        {
+          "id": "vid",
+          "component": "Section",
+          "children": [
+            "embed"
+          ]
+        },
+        {
+          "id": "embed",
+          "component": "Embed",
+          "src": "https://example.com/video",
+          "aspect": "16/9"
+        },
+        {
+          "id": "controls",
+          "component": "Section",
+          "children": [
+            "seek",
+            "btns"
+          ]
+        },
+        {
+          "id": "seek",
+          "component": "Slider",
+          "value": 25,
+          "max": 100
+        },
+        {
+          "id": "btns",
+          "component": "Row",
+          "children": [
+            "play",
+            "vol",
+            "time"
+          ],
+          "justify": "between",
+          "align": "center"
+        },
+        {
+          "id": "play",
+          "component": "Button",
+          "icon": "play",
+          "variant": "ghost"
+        },
+        {
+          "id": "vol",
+          "component": "Button",
+          "icon": "speaker-high",
+          "variant": "ghost"
+        },
+        {
+          "id": "time",
+          "component": "Text",
+          "variant": "caption",
+          "textContent": "2:30 / 10:00"
+        }
+      ]
+keywords:
+  - embed
+  - media
+  - video
+  - youtube
+  - vimeo
+  - stream
+  - integration
+  - iframe
+  - widget
+  - third-party
+synonyms:
+  embed:
+    - embed
+    - content
+    - video
+    - iframe
+  iframe:
+    - embed
+    - content
+  integration:
+    - api
+    - key
+    - embed
+    - data
+    - import
+  media:
+    - image
+    - video
+    - music
+    - player
+    - gallery
+    - embed
+  stream:
+    - video
+    - player
+    - streaming
+    - embed
+  third-party:
+    - embed
+    - content
+  video:
+    - video
+    - player
+    - embed
+  vimeo:
+    - video
+    - player
+    - embed
+  widget:
+    - embed
+    - weather
+    - widget
+  youtube:
+    - video
+    - player
+    - embed
+related:
+  - slider
+  - button

package/components/empty-state/empty-state.a2ui.json

@@ -0,0 +1,133 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/EmptyState.json",
+  "title": "EmptyState",
+  "description": "Placeholder for empty views with icon, heading, description, and action slot.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "description": {
+      "description": "Secondary descriptive text below the heading",
+      "type": "string",
+      "default": ""
+    },
+    "component": {
+      "const": "EmptyState"
+    },
+    "heading": {
+      "description": "Primary heading text. Uses 'heading' instead of 'title' to avoid native tooltip.",
+      "type": "string",
+      "default": ""
+    },
+    "icon": {
+      "description": "Icon name displayed above the heading",
+      "type": "string",
+      "default": ""
+    },
+    "variant": {
+      "description": "Semantic variant — colors the icon and sets the border tone (default, info, success, warning, danger).",
+      "type": "string",
+      "enum": [
+        "default",
+        "info",
+        "success",
+        "warning",
+        "danger",
+        "muted"
+      ],
+      "default": "default"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "events": {},
+    "examples": [
+      {
+        "description": "Empty state component with icon, heading, description, and call-to-action button.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"EmptyState\",\n    \"children\": [\n      \"content\"\n    ]\n  },\n  {\n    \"id\": \"content\",\n    \"component\": \"Column\",\n    \"align\": \"center\",\n    \"gap\": \"3\",\n    \"children\": [\n      \"icon\",\n      \"heading\",\n      \"desc\",\n      \"cta\"\n    ]\n  },\n  {\n    \"id\": \"icon\",\n    \"component\": \"Icon\",\n    \"name\": \"inbox\",\n    \"size\": \"xl\"\n  },\n  {\n    \"id\": \"heading\",\n    \"component\": \"Text\",\n    \"variant\": \"heading\",\n    \"textContent\": \"No items yet\"\n  },\n  {\n    \"id\": \"desc\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Get started by creating your first item. It only takes a moment.\"\n  },\n  {\n    \"id\": \"cta\",\n    \"component\": \"Button\",\n    \"text\": \"Create Item\",\n    \"icon\": \"plus\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "empty-state"
+      },
+      {
+        "description": "Card with a trigger button that opens a Drawer side panel containing a form with inputs and actions.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"card-hdr\",\n      \"card-body\",\n      \"drawer\"\n    ]\n  },\n  {\n    \"id\": \"card-hdr\",\n    \"component\": \"Header\",\n    \"slots\": {\n      \"heading\": \"Projects\",\n      \"description\": \"Manage your active projects.\",\n      \"action\": \"trigger-btn\"\n    }\n  },\n  {\n    \"id\": \"trigger-btn\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"primary\",\n      \"icon\": \"plus\",\n      \"triggers\": \"drawer\"\n    },\n    \"content\": \"New Project\"\n  },\n  {\n    \"id\": \"card-body\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"empty\"\n    ]\n  },\n  {\n    \"id\": \"empty\",\n    \"component\": \"EmptyState\",\n    \"attrs\": {\n      \"icon\": \"folder\",\n      \"heading\": \"No projects yet\",\n      \"description\": \"Create your first project to get started.\"\n    }\n  },\n  {\n    \"id\": \"drawer\",\n    \"component\": \"Drawer\",\n    \"attrs\": {\n      \"side\": \"right\",\n      \"title\": \"Create Project\"\n    },\n    \"children\": [\n      \"drawer-hdr\",\n      \"drawer-body\",\n      \"drawer-ftr\"\n    ]\n  },\n  {\n    \"id\": \"drawer-hdr\",\n    \"component\": \"Header\",\n    \"slots\": {\n      \"heading\": \"New Project\",\n      \"description\": \"Fill in the details to create a new project.\"\n    }\n  },\n  {\n    \"id\": \"drawer-body\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"drawer-form\"\n    ]\n  },\n  {\n    \"id\": \"drawer-form\",\n    \"component\": \"Column\",\n    \"attrs\": {\n      \"gap\": \"md\"\n    },\n    \"children\": [\n      \"field-name\",\n      \"field-desc\",\n      \"field-category\",\n      \"field-visibility\"\n    ]\n  },\n  {\n    \"id\": \"field-name\",\n    \"component\": \"Input\",\n    \"attrs\": {\n      \"label\": \"Project Name\",\n      \"placeholder\": \"My Awesome Project\",\n      \"required\": true\n    }\n  },\n  {\n    \"id\": \"field-desc\",\n    \"component\": \"TextArea\",\n    \"attrs\": {\n      \"label\": \"Description\",\n      \"placeholder\": \"Describe your project...\",\n      \"rows\": 4\n    }\n  },\n  {\n    \"id\": \"field-category\",\n    \"component\": \"Select\",\n    \"attrs\": {\n      \"label\": \"Category\",\n      \"placeholder\": \"Select a category\",\n      \"options\": [\n        {\n          \"label\": \"Web Application\",\n          \"value\": \"web\"\n        },\n        {\n          \"label\": \"Mobile App\",\n          \"value\": \"mobile\"\n        },\n        {\n          \"label\": \"API Service\",\n          \"value\": \"api\"\n        },\n        {\n          \"label\": \"Library\",\n          \"value\": \"library\"\n        }\n      ]\n    }\n  },\n  {\n    \"id\": \"field-visibility\",\n    \"component\": \"Select\",\n    \"attrs\": {\n      \"label\": \"Visibility\",\n      \"placeholder\": \"Select visibility\",\n      \"options\": [\n        {\n          \"label\": \"Public\",\n          \"value\": \"public\"\n        },\n        {\n          \"label\": \"Private\",\n          \"value\": \"private\"\n        },\n        {\n          \"label\": \"Team Only\",\n          \"value\": \"team\"\n        }\n      ]\n    }\n  },\n  {\n    \"id\": \"drawer-ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"drawer-actions\"\n    ]\n  },\n  {\n    \"id\": \"drawer-actions\",\n    \"component\": \"Row\",\n    \"attrs\": {\n      \"gap\": \"sm\"\n    },\n    \"children\": [\n      \"cancel-btn\",\n      \"create-btn\"\n    ]\n  },\n  {\n    \"id\": \"cancel-btn\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"outline\"\n    },\n    \"content\": \"Cancel\"\n  },\n  {\n    \"id\": \"create-btn\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"primary\"\n    },\n    \"content\": \"Create Project\"\n  }\n]",
+        "name": "drawer-panel"
+      }
+    ],
+    "keywords": [
+      "emptystate",
+      "empty-state",
+      "empty",
+      "state"
+    ],
+    "name": "AdiaEmptyState",
+    "related": [
+      "button",
+      "drawer",
+      "input",
+      "text-area",
+      "select"
+    ],
+    "slots": {
+      "action": {
+        "description": "User-provided action element (e.g. button) displayed below the description"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "empty-state-ui",
+    "tokens": {
+      "--empty-state-action-mt": {
+        "description": "Top margin for the action slot"
+      },
+      "--empty-state-desc-fg": {
+        "description": "Description text color"
+      },
+      "--empty-state-desc-size": {
+        "description": "Description font size"
+      },
+      "--empty-state-gap": {
+        "description": "Gap between stacked elements"
+      },
+      "--empty-state-heading-fg": {
+        "description": "Heading text color"
+      },
+      "--empty-state-heading-size": {
+        "description": "Heading font size"
+      },
+      "--empty-state-heading-weight": {
+        "description": "Heading font weight"
+      },
+      "--empty-state-icon-fg": {
+        "description": "Icon color"
+      },
+      "--empty-state-icon-size": {
+        "description": "Icon size"
+      },
+      "--empty-state-px": {
+        "description": "Horizontal padding"
+      },
+      "--empty-state-py": {
+        "description": "Vertical padding"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/empty-state/empty-state.css

@@ -0,0 +1,58 @@
+@scope (empty-state-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --empty-state-px:             var(--a-space-6);
+    --empty-state-py:             var(--a-space-8);
+    --empty-state-gap:            var(--a-space-2);
+    --empty-state-action-mt:      var(--a-space-2);
+    --empty-state-icon-size:      3rem;
+
+    /* ── Colors ── */
+    --empty-state-icon-fg:        var(--a-fg-muted);
+    --empty-state-heading-fg:     var(--a-fg);
+    --empty-state-desc-fg:        var(--a-fg-muted);
+
+    /* ── Typography ── */
+    --empty-state-heading-size:   var(--a-ui-lg);
+    --empty-state-heading-weight: var(--a-weight-medium);
+    --empty-state-desc-size:      var(--a-ui-size);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: var(--empty-state-py) var(--empty-state-px);
+    gap: var(--empty-state-gap);
+  }
+
+  /* ── Icon ── */
+  [slot="icon"] {
+    font-size: var(--empty-state-icon-size);
+    color: var(--empty-state-icon-fg);
+  }
+
+  /* ── Heading ── */
+  [slot="heading"] {
+    font-size: var(--empty-state-heading-size);
+    font-weight: var(--empty-state-heading-weight);
+    color: var(--empty-state-heading-fg);
+    line-height: 1.3;
+  }
+
+  /* ── Description ── */
+  [slot="description"] {
+    font-size: var(--empty-state-desc-size);
+    color: var(--empty-state-desc-fg);
+    line-height: 1.5;
+    max-width: 36ch;
+  }
+
+  /* ── Action slot ── */
+  [slot="action"] {
+    margin-top: var(--empty-state-action-mt);
+  }
+}

package/components/empty-state/empty-state.js

@@ -0,0 +1,87 @@
+/**
+ * <empty-state-ui icon="magnifying-glass" heading="No results" description="Try adjusting your search.">
+ *   <button-ui slot="action" text="Clear filters" variant="outline"></button-ui>
+ * </empty-state-ui>
+ *
+ * Placeholder for empty views — icon, heading, description, and action slot.
+ * The action slot is user-provided (not stamped by the component).
+ *
+ * Note: Uses 'heading' attribute instead of 'title' to avoid native tooltip.
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaEmptyState extends AdiaElement {
+  static properties = {
+    icon:        { type: String, default: '', reflect: true },
+    heading:     { type: String, default: '', reflect: true },
+    description: { type: String, default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  #iconEl = null;
+  #headingEl = null;
+  #descEl = null;
+
+  connected() {
+    this.#iconEl = this.querySelector(':scope > [slot="icon"]');
+    if (!this.#iconEl) {
+      this.#iconEl = document.createElement('icon-ui');
+      this.#iconEl.setAttribute('slot', 'icon');
+      this.#iconEl.setAttribute('size', 'lg');
+      this.insertBefore(this.#iconEl, this.firstChild);
+    }
+
+    this.#headingEl = this.querySelector(':scope > [slot="heading"]');
+    if (!this.#headingEl) {
+      this.#headingEl = document.createElement('span');
+      this.#headingEl.setAttribute('slot', 'heading');
+      this.insertBefore(this.#headingEl, this.querySelector('[slot="action"]'));
+    }
+
+    this.#descEl = this.querySelector(':scope > [slot="description"]');
+    if (!this.#descEl) {
+      this.#descEl = document.createElement('span');
+      this.#descEl.setAttribute('slot', 'description');
+      this.insertBefore(this.#descEl, this.querySelector('[slot="action"]'));
+    }
+  }
+
+  render() {
+    if (!this.#iconEl) return;
+
+    // Icon
+    if (this.icon) {
+      this.#iconEl.setAttribute('name', this.icon);
+      this.#iconEl.hidden = false;
+    } else {
+      this.#iconEl.hidden = true;
+    }
+
+    // Heading
+    if (this.heading) {
+      this.#headingEl.textContent = this.heading;
+      this.#headingEl.hidden = false;
+    } else {
+      this.#headingEl.hidden = true;
+    }
+
+    // Description
+    if (this.description) {
+      this.#descEl.textContent = this.description;
+      this.#descEl.hidden = false;
+    } else {
+      this.#descEl.hidden = true;
+    }
+  }
+
+  disconnected() {
+    this.#iconEl = null;
+    this.#headingEl = null;
+    this.#descEl = null;
+  }
+}
+customElements.define('empty-state-ui', AdiaEmptyState);
+
+export { AdiaEmptyState };