@adia-ai/web-components 0.0.1

package/components/drawer/drawer.yaml

@@ -0,0 +1,366 @@
+# 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: AdiaDrawer
+tag: drawer-ui
+component: Drawer
+category: container
+version: 1
+description: >-
+  Slide-out panel anchored to a viewport edge. Uses native <dialog> for focus trap,
+  Escape dismiss, and ::backdrop. Panel is a flex column that scrolls as a whole — the
+  header and footer stick to the top/bottom of the panel when the body overflows.
+  Authors can compose content with either card-n-style bare tags (<header>, <section>,
+  <footer>) or explicit [slot="header|body|footer"] attributes; multiple <section>
+  siblings are allowed and stack in author order between the sticky header and footer.
+  The header activates a card-n-aligned 3-column grid (icon | heading+description |
+  action+close) when any direct [slot="icon|heading|description|action"] child is
+  present.
+props:
+  open:
+    description: Controls visibility. When false, backdrop and panel are removed from DOM.
+    type: boolean
+    default: false
+    reflect: true
+  permanent:
+    description: When true, hide close button and suppress backdrop/Escape dismiss
+    type: boolean
+    default: false
+  side:
+    description: Anchor side
+    type: string
+    default: right
+    enum:
+      - left
+      - right
+      - top
+      - bottom
+  size:
+    description: Panel width/height
+    type: string
+    default: md
+    enum:
+      - sm
+      - md
+      - lg
+  text:
+    description: Title text displayed in the drawer header
+    type: string
+    default: ""
+events:
+  close:
+    description: Fired when the drawer is dismissed via close button or backdrop click
+slots:
+  backdrop:
+    description: Scrim overlay behind the drawer (stamped by the component).
+  panel:
+    description: Sliding panel container (stamped by the component).
+  header:
+    description: >-
+      Title bar — pinned to the top of the panel via position:sticky. Accepts either
+      a bare <header> tag or [slot="header"]. When any direct child has
+      [slot="icon|heading|description|action"], the header activates a card-n-aligned
+      3-column grid; otherwise renders as a block with the close button appended.
+  body:
+    description: >-
+      Scrollable content region. Accepts one or more bare <section> tags or
+      [slot="body"] elements; multi-section stacks are mounted in author order and
+      share the panel's scroll context. [bleed] removes section padding; [padding]
+      adds a canvas-scrim background for hero regions.
+  footer:
+    description: >-
+      Optional sticky action row pinned to the bottom of the panel. Only mounted if
+      the author supplies a bare <footer> tag or [slot="footer"]. Inner
+      [slot="description"] + [slot="action"] triggers space-between layout, matching
+      card-ui footer semantics.
+  close:
+    description: >-
+      Close button inside the header — stamped automatically unless [permanent].
+      Participates in the header's action-column grid via the :is([slot="action"],
+      [slot="close"]) union selector.
+  icon:
+    description: >-
+      Direct child of <header> — placed in column 1 of the card-ui grid. Spans two
+      rows when a [slot="description"] sibling is present so the icon aligns with the
+      heading.
+  heading:
+    description: >-
+      Direct child of <header> — grid row 1. Also accepts bare <h1>-<h6> tags.
+      Renders as a flex container, so inline badges/metadata sit alongside the title.
+      If the drawer has a [text] attribute and no author-supplied heading, a
+      <span slot="heading" data-stamped> is stamped with the text value.
+  description:
+    description: >-
+      Direct child of <header> — grid row 2, spans the heading + action columns.
+      Also accepts bare <p> / <small> tags.
+  action:
+    description: >-
+      Direct child of <header> — placed in the grid's last column alongside the
+      stamped close button. Flex container for badge + button combinations.
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: drawer-panel
+    description: Card with a trigger button that opens a Drawer side panel containing a form with inputs
+      and actions.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "card-hdr",
+            "card-body",
+            "drawer"
+          ]
+        },
+        {
+          "id": "card-hdr",
+          "component": "Header",
+          "slots": {
+            "heading": "Projects",
+            "description": "Manage your active projects.",
+            "action": "trigger-btn"
+          }
+        },
+        {
+          "id": "trigger-btn",
+          "component": "Button",
+          "attrs": {
+            "variant": "primary",
+            "icon": "plus",
+            "triggers": "drawer"
+          },
+          "content": "New Project"
+        },
+        {
+          "id": "card-body",
+          "component": "Section",
+          "children": [
+            "empty"
+          ]
+        },
+        {
+          "id": "empty",
+          "component": "EmptyState",
+          "attrs": {
+            "icon": "folder",
+            "heading": "No projects yet",
+            "description": "Create your first project to get started."
+          }
+        },
+        {
+          "id": "drawer",
+          "component": "Drawer",
+          "attrs": {
+            "side": "right",
+            "title": "Create Project"
+          },
+          "children": [
+            "drawer-hdr",
+            "drawer-body",
+            "drawer-ftr"
+          ]
+        },
+        {
+          "id": "drawer-hdr",
+          "component": "Header",
+          "slots": {
+            "heading": "New Project",
+            "description": "Fill in the details to create a new project."
+          }
+        },
+        {
+          "id": "drawer-body",
+          "component": "Section",
+          "children": [
+            "drawer-form"
+          ]
+        },
+        {
+          "id": "drawer-form",
+          "component": "Column",
+          "attrs": {
+            "gap": "md"
+          },
+          "children": [
+            "field-name",
+            "field-desc",
+            "field-category",
+            "field-visibility"
+          ]
+        },
+        {
+          "id": "field-name",
+          "component": "Input",
+          "attrs": {
+            "label": "Project Name",
+            "placeholder": "My Awesome Project",
+            "required": true
+          }
+        },
+        {
+          "id": "field-desc",
+          "component": "TextArea",
+          "attrs": {
+            "label": "Description",
+            "placeholder": "Describe your project...",
+            "rows": 4
+          }
+        },
+        {
+          "id": "field-category",
+          "component": "Select",
+          "attrs": {
+            "label": "Category",
+            "placeholder": "Select a category",
+            "options": [
+              {
+                "label": "Web Application",
+                "value": "web"
+              },
+              {
+                "label": "Mobile App",
+                "value": "mobile"
+              },
+              {
+                "label": "API Service",
+                "value": "api"
+              },
+              {
+                "label": "Library",
+                "value": "library"
+              }
+            ]
+          }
+        },
+        {
+          "id": "field-visibility",
+          "component": "Select",
+          "attrs": {
+            "label": "Visibility",
+            "placeholder": "Select visibility",
+            "options": [
+              {
+                "label": "Public",
+                "value": "public"
+              },
+              {
+                "label": "Private",
+                "value": "private"
+              },
+              {
+                "label": "Team Only",
+                "value": "team"
+              }
+            ]
+          }
+        },
+        {
+          "id": "drawer-ftr",
+          "component": "Footer",
+          "children": [
+            "drawer-actions"
+          ]
+        },
+        {
+          "id": "drawer-actions",
+          "component": "Row",
+          "attrs": {
+            "gap": "sm"
+          },
+          "children": [
+            "cancel-btn",
+            "create-btn"
+          ]
+        },
+        {
+          "id": "cancel-btn",
+          "component": "Button",
+          "attrs": {
+            "variant": "outline"
+          },
+          "content": "Cancel"
+        },
+        {
+          "id": "create-btn",
+          "component": "Button",
+          "attrs": {
+            "variant": "primary"
+          },
+          "content": "Create Project"
+        }
+      ]
+keywords:
+  - drawer
+  - popup
+  - modal
+  - dialog
+  - panel
+  - hamburger
+  - sidebar
+  - layout
+  - collapse
+  - expand
+synonyms:
+  collapse:
+    - accordion
+    - faq
+    - drawer
+  dialog:
+    - drawer
+    - alert
+    - popover
+    - panel
+  drawer:
+    - drawer
+    - sidebar
+    - panel
+  expand:
+    - accordion
+    - faq
+    - drawer
+  hamburger:
+    - nav
+    - menu
+    - sidebar
+    - drawer
+  layout:
+    - split
+    - sidebar
+    - drawer
+    - tabs
+    - divider
+    - bleed
+  modal:
+    - drawer
+    - alert
+    - popover
+    - panel
+  panel:
+    - tabs
+    - drawer
+    - panel
+    - split
+  popup:
+    - toast
+    - notification
+    - alert
+    - popover
+    - drawer
+  sidebar:
+    - sidebar
+    - nav
+    - drawer
+related:
+  - button
+  - empty-state
+  - input
+  - text-area
+  - select

package/components/embed/embed.a2ui.json

@@ -0,0 +1,150 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Embed.json",
+  "title": "Embed",
+  "description": "Responsive sandboxed iframe wrapper.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "aspect": {
+      "description": "CSS aspect-ratio (e.g. 16/9)",
+      "type": "string",
+      "default": ""
+    },
+    "component": {
+      "const": "Embed"
+    },
+    "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%"
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "agent",
+    "events": {},
+    "examples": [
+      {
+        "description": "Card wrapping an embedded iframe for video or map content with a descriptive header.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"body\",\n      \"caption-sec\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"slots\": {\n      \"heading\": \"Product Demo\",\n      \"description\": \"Watch a 3-minute walkthrough of our core features.\"\n    }\n  },\n  {\n    \"id\": \"body\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"video\"\n    ]\n  },\n  {\n    \"id\": \"video\",\n    \"component\": \"Embed\",\n    \"attrs\": {\n      \"src\": \"https://www.youtube.com/embed/dQw4w9WgXcQ\",\n      \"type\": \"video\",\n      \"aspectRatio\": \"16:9\",\n      \"title\": \"Product demo video\",\n      \"allowFullscreen\": true\n    }\n  },\n  {\n    \"id\": \"caption-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"caption\"\n    ]\n  },\n  {\n    \"id\": \"caption\",\n    \"component\": \"Text\",\n    \"attrs\": {\n      \"variant\": \"caption\",\n      \"muted\": true\n    },\n    \"content\": \"Duration: 3:24 · Last updated January 2025\"\n  }\n]",
+        "name": "embed-content"
+      },
+      {
+        "description": "Video player with embed area, seek slider, and playback controls.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"vid\",\n      \"controls\"\n    ]\n  },\n  {\n    \"id\": \"vid\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"embed\"\n    ]\n  },\n  {\n    \"id\": \"embed\",\n    \"component\": \"Embed\",\n    \"src\": \"https://example.com/video\",\n    \"aspect\": \"16/9\"\n  },\n  {\n    \"id\": \"controls\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"seek\",\n      \"btns\"\n    ]\n  },\n  {\n    \"id\": \"seek\",\n    \"component\": \"Slider\",\n    \"value\": 25,\n    \"max\": 100\n  },\n  {\n    \"id\": \"btns\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"play\",\n      \"vol\",\n      \"time\"\n    ],\n    \"justify\": \"between\",\n    \"align\": \"center\"\n  },\n  {\n    \"id\": \"play\",\n    \"component\": \"Button\",\n    \"icon\": \"play\",\n    \"variant\": \"ghost\"\n  },\n  {\n    \"id\": \"vol\",\n    \"component\": \"Button\",\n    \"icon\": \"speaker-high\",\n    \"variant\": \"ghost\"\n  },\n  {\n    \"id\": \"time\",\n    \"component\": \"Text\",\n    \"variant\": \"caption\",\n    \"textContent\": \"2:30 / 10:00\"\n  }\n]",
+        "name": "video-player"
+      }
+    ],
+    "keywords": [
+      "embed",
+      "media",
+      "video",
+      "youtube",
+      "vimeo",
+      "stream",
+      "integration",
+      "iframe",
+      "widget",
+      "third-party"
+    ],
+    "name": "AdiaEmbed",
+    "related": [
+      "slider",
+      "button"
+    ],
+    "slots": {
+      "iframe": {
+        "description": "Sandboxed <iframe> element (allow-scripts allow-same-origin)"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "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"
+      ]
+    },
+    "tag": "embed-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/embed/embed.css

@@ -0,0 +1,28 @@
+@scope (embed-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --embed-bg:      var(--a-bg-muted);
+    --embed-radius:  var(--a-radius-md);
+    --embed-border:  var(--a-border-subtle);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: block;
+    overflow: hidden;
+    border-radius: var(--embed-radius);
+    border: 1px solid var(--embed-border);
+    background: var(--embed-bg);
+    position: relative;
+  }
+
+  iframe {
+    display: block;
+    width: 100%;
+    border: none;
+  }
+
+  :scope[aspect] iframe {
+    height: 100%;
+  }
+}

package/components/embed/embed.js

@@ -0,0 +1,63 @@
+/**
+ * <embed-ui src="https://example.com" height="400" aspect="16/9"></embed-ui>
+ *
+ * Responsive sandboxed iframe wrapper.
+ *
+ * Properties:
+ *   src    — iframe URL
+ *   height — iframe height (default '400')
+ *   width  — iframe width (default '100%')
+ *   aspect — optional CSS aspect-ratio (e.g. '16/9')
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaEmbed extends AdiaElement {
+  static properties = {
+    src:    { type: String,  default: '', reflect: true },
+    height: { type: String,  default: '400', reflect: true },
+    width:  { type: String,  default: '100%', reflect: true },
+    aspect: { type: String,  default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  #iframe = null;
+
+  connected() {
+    if (!this.#iframe) {
+      this.#iframe = document.createElement('iframe');
+      this.#iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin');
+      this.#iframe.setAttribute('loading', 'lazy');
+      this.#iframe.setAttribute('allowfullscreen', '');
+      this.appendChild(this.#iframe);
+    }
+  }
+
+  render() {
+    if (!this.#iframe) return;
+
+    if (this.src) this.#iframe.src = this.src;
+
+    if (this.aspect) {
+      this.style.aspectRatio = this.aspect;
+      this.#iframe.style.width = '100%';
+      this.#iframe.style.height = '100%';
+      this.style.width = this.width;
+      this.style.height = '';
+    } else {
+      this.style.aspectRatio = '';
+      this.#iframe.style.width = '100%';
+      this.#iframe.style.height = this.height.match(/^\d+$/) ? `${this.height}px` : this.height;
+      this.style.width = this.width;
+      this.style.height = '';
+    }
+  }
+
+  disconnected() {
+    this.#iframe = null;
+  }
+}
+customElements.define('embed-ui', AdiaEmbed);
+
+export { AdiaEmbed };