@adia-ai/web-components 0.0.1

package/components/icon/icon.yaml

@@ -0,0 +1,233 @@
+# 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: AdiaIcon
+tag: icon-ui
+component: Icon
+category: display
+version: 1
+description: SVG icon from the icon registry. Renders inline SVG from getIcon().
+props:
+  name:
+    description: Icon name from registry
+    type: string
+    default: ""
+  label:
+    description: Accessible label. Sets role=img and aria-label.
+    type: string
+    default: ""
+  size:
+    description: >-
+      Icon size. Accepts the named scale (xs/sm/md/lg/xl) or a pixel value
+      as a string ("12", "16", "24", "32", "48"). Overrides --a-icon-size.
+    type: string
+    default: ""
+events: {}
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: command-palette
+    description: Command palette card with search input and a list of command options.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "search"
+          ]
+        },
+        {
+          "id": "search",
+          "component": "Input",
+          "placeholder": "Type a command or search...",
+          "icon": "search"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "options"
+          ]
+        },
+        {
+          "id": "options",
+          "component": "Column",
+          "gap": "1",
+          "children": [
+            "opt1",
+            "opt2",
+            "opt3",
+            "opt4",
+            "opt5"
+          ]
+        },
+        {
+          "id": "opt1",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i1",
+            "l1"
+          ]
+        },
+        {
+          "id": "i1",
+          "component": "Icon",
+          "name": "file"
+        },
+        {
+          "id": "l1",
+          "component": "Text",
+          "textContent": "Open File"
+        },
+        {
+          "id": "opt2",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i2",
+            "l2"
+          ]
+        },
+        {
+          "id": "i2",
+          "component": "Icon",
+          "name": "gear"
+        },
+        {
+          "id": "l2",
+          "component": "Text",
+          "textContent": "Settings"
+        },
+        {
+          "id": "opt3",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i3",
+            "l3"
+          ]
+        },
+        {
+          "id": "i3",
+          "component": "Icon",
+          "name": "palette"
+        },
+        {
+          "id": "l3",
+          "component": "Text",
+          "textContent": "Change Theme"
+        },
+        {
+          "id": "opt4",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i4",
+            "l4"
+          ]
+        },
+        {
+          "id": "i4",
+          "component": "Icon",
+          "name": "users"
+        },
+        {
+          "id": "l4",
+          "component": "Text",
+          "textContent": "Manage Users"
+        },
+        {
+          "id": "opt5",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "i5",
+            "l5"
+          ]
+        },
+        {
+          "id": "i5",
+          "component": "Icon",
+          "name": "sign-out"
+        },
+        {
+          "id": "l5",
+          "component": "Text",
+          "textContent": "Sign Out"
+        }
+      ]
+  - name: empty-state
+    description: Empty state component with icon, heading, description, and call-to-action button.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "EmptyState",
+          "children": [
+            "content"
+          ]
+        },
+        {
+          "id": "content",
+          "component": "Column",
+          "align": "center",
+          "gap": "3",
+          "children": [
+            "icon",
+            "heading",
+            "desc",
+            "cta"
+          ]
+        },
+        {
+          "id": "icon",
+          "component": "Icon",
+          "name": "inbox",
+          "size": "xl"
+        },
+        {
+          "id": "heading",
+          "component": "Text",
+          "variant": "heading",
+          "textContent": "No items yet"
+        },
+        {
+          "id": "desc",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Get started by creating your first item. It only takes a moment."
+        },
+        {
+          "id": "cta",
+          "component": "Button",
+          "text": "Create Item",
+          "icon": "plus",
+          "variant": "primary"
+        }
+      ]
+keywords:
+  - icon
+synonyms: {}
+related:
+  - input
+  - empty-state
+  - button
+  - badge
+  - slider

package/components/image/image.a2ui.json

@@ -0,0 +1,261 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Image.json",
+  "title": "Image",
+  "description": "Lazy-loading image with skeleton fallback. Shows skeleton while loading, falls back on error.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "alt": {
+      "description": "Alt text for the image.",
+      "type": "string",
+      "default": ""
+    },
+    "aspect": {
+      "description": "Aspect ratio preset — sets the intrinsic aspect-ratio CSS property.",
+      "type": "string",
+      "enum": [
+        "",
+        "1/1",
+        "3/2",
+        "4/3",
+        "16/9",
+        "21/9",
+        "2/3",
+        "3/4",
+        "9/16"
+      ],
+      "default": ""
+    },
+    "component": {
+      "const": "Image"
+    },
+    "fallback": {
+      "description": "Fallback image URL on error",
+      "type": "string",
+      "default": ""
+    },
+    "fit": {
+      "description": "Object-fit mode",
+      "type": "string",
+      "enum": [
+        "cover",
+        "contain",
+        "fill",
+        "none"
+      ],
+      "default": "cover"
+    },
+    "height": {
+      "description": "CSS height",
+      "type": "string",
+      "default": ""
+    },
+    "lazy": {
+      "description": "Enables native lazy loading.",
+      "type": "boolean",
+      "default": false
+    },
+    "radius": {
+      "description": "Border radius token",
+      "type": "string",
+      "enum": [
+        "sm",
+        "md",
+        "lg",
+        "full"
+      ],
+      "default": ""
+    },
+    "src": {
+      "description": "Image source URL.",
+      "type": "string",
+      "default": ""
+    },
+    "width": {
+      "description": "CSS width",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "events": {},
+    "examples": [
+      {
+        "description": "Design system settings page with brand header, photo upload section, bleed/margin controls, and approval workflow.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"photo-sec\",\n      \"settings-sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"hdr-title\",\n      \"hdr-desc\"\n    ]\n  },\n  {\n    \"id\": \"hdr-title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Bleed Design Settings\",\n    \"variant\": \"section\"\n  },\n  {\n    \"id\": \"hdr-desc\",\n    \"component\": \"Text\",\n    \"slot\": \"description\",\n    \"textContent\": \"Configure bleed margins, upload artwork, and preview before approval.\",\n    \"variant\": \"body\"\n  },\n  {\n    \"id\": \"photo-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"photo-col\"\n    ]\n  },\n  {\n    \"id\": \"photo-col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"photo-label\",\n      \"photo-img\",\n      \"photo-btn\"\n    ],\n    \"gap\": \"3\"\n  },\n  {\n    \"id\": \"photo-label\",\n    \"component\": \"Text\",\n    \"textContent\": \"Artwork Upload\",\n    \"variant\": \"label\"\n  },\n  {\n    \"id\": \"photo-img\",\n    \"component\": \"Image\",\n    \"src\": \"https://picsum.photos/400/200\",\n    \"aspect\": \"2/1\"\n  },\n  {\n    \"id\": \"photo-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Upload Photo\",\n    \"variant\": \"secondary\"\n  },\n  {\n    \"id\": \"settings-sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"settings-col\"\n    ]\n  },\n  {\n    \"id\": \"settings-col\",\n    \"component\": \"Column\",\n    \"children\": [\n      \"bleed-mode\",\n      \"bleed-margin\",\n      \"bleed-unit\",\n      \"approved\"\n    ],\n    \"gap\": \"4\"\n  },\n  {\n    \"id\": \"bleed-mode\",\n    \"component\": \"Select\",\n    \"label\": \"Bleed Mode\",\n    \"name\": \"bleed-mode\",\n    \"placeholder\": \"Select mode...\"\n  },\n  {\n    \"id\": \"bleed-margin\",\n    \"component\": \"Input\",\n    \"label\": \"Bleed Margin\",\n    \"name\": \"bleed-margin\",\n    \"type\": \"number\",\n    \"placeholder\": \"e.g. 3\"\n  },\n  {\n    \"id\": \"bleed-unit\",\n    \"component\": \"Select\",\n    \"label\": \"Unit\",\n    \"name\": \"bleed-unit\",\n    \"placeholder\": \"mm\"\n  },\n  {\n    \"id\": \"approved\",\n    \"component\": \"CheckBox\",\n    \"label\": \"Approved for production\",\n    \"name\": \"approved\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"preview-btn\",\n      \"apply-btn\"\n    ]\n  },\n  {\n    \"id\": \"preview-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Preview\",\n    \"variant\": \"secondary\"\n  },\n  {\n    \"id\": \"apply-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Apply\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "bleed-design-settings"
+      },
+      {
+        "description": "Image upload card with drag-and-drop zone and a 3-column preview grid of placeholder image cards. Footer holds cancel and upload action buttons.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\",\n      \"ftr\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"title\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"variant\": \"section\",\n    \"textContent\": \"Upload Images\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"col\"\n    ]\n  },\n  {\n    \"id\": \"col\",\n    \"component\": \"Column\",\n    \"gap\": \"4\",\n    \"children\": [\n      \"uploader\",\n      \"preview-grid\"\n    ]\n  },\n  {\n    \"id\": \"uploader\",\n    \"component\": \"Upload\",\n    \"accept\": \"image/*\",\n    \"multiple\": true,\n    \"hint\": \"Drag images here or click to browse\"\n  },\n  {\n    \"id\": \"preview-grid\",\n    \"component\": \"Grid\",\n    \"columns\": \"3\",\n    \"gap\": \"3\",\n    \"children\": [\n      \"preview-1\",\n      \"preview-2\",\n      \"preview-3\"\n    ]\n  },\n  {\n    \"id\": \"preview-1\",\n    \"component\": \"Card\",\n    \"variant\": \"outlined\",\n    \"children\": [\n      \"img-1\"\n    ]\n  },\n  {\n    \"id\": \"img-1\",\n    \"component\": \"Image\",\n    \"src\": \"\",\n    \"alt\": \"Preview 1\",\n    \"height\": \"120px\",\n    \"fit\": \"cover\",\n    \"radius\": \"sm\"\n  },\n  {\n    \"id\": \"preview-2\",\n    \"component\": \"Card\",\n    \"variant\": \"outlined\",\n    \"children\": [\n      \"img-2\"\n    ]\n  },\n  {\n    \"id\": \"img-2\",\n    \"component\": \"Image\",\n    \"src\": \"\",\n    \"alt\": \"Preview 2\",\n    \"height\": \"120px\",\n    \"fit\": \"cover\",\n    \"radius\": \"sm\"\n  },\n  {\n    \"id\": \"preview-3\",\n    \"component\": \"Card\",\n    \"variant\": \"outlined\",\n    \"children\": [\n      \"img-3\"\n    ]\n  },\n  {\n    \"id\": \"img-3\",\n    \"component\": \"Image\",\n    \"src\": \"\",\n    \"alt\": \"Preview 3\",\n    \"height\": \"120px\",\n    \"fit\": \"cover\",\n    \"radius\": \"sm\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"ftr-actions\"\n    ]\n  },\n  {\n    \"id\": \"ftr-actions\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"cancel-btn\",\n      \"upload-btn\"\n    ]\n  },\n  {\n    \"id\": \"cancel-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Cancel\",\n    \"variant\": \"ghost\"\n  },\n  {\n    \"id\": \"upload-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Upload\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "file-upload-gallery"
+      }
+    ],
+    "keywords": [
+      "image",
+      "ecommerce",
+      "store",
+      "marketplace",
+      "catalog",
+      "grid",
+      "upload",
+      "attach",
+      "dropzone",
+      "photos",
+      "pictures",
+      "gallery",
+      "portfolio",
+      "lightbox",
+      "media",
+      "instagram",
+      "assets"
+    ],
+    "name": "AdiaImage",
+    "related": [
+      "button",
+      "select",
+      "input",
+      "check-box",
+      "upload"
+    ],
+    "slots": {
+      "img": {
+        "description": "Stamped <img> element"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "assets": [
+        "data",
+        "table",
+        "file",
+        "image",
+        "gallery"
+      ],
+      "attach": [
+        "file",
+        "upload",
+        "image"
+      ],
+      "catalog": [
+        "product",
+        "card",
+        "image",
+        "grid",
+        "inventory"
+      ],
+      "dropzone": [
+        "file",
+        "upload",
+        "image",
+        "import"
+      ],
+      "ecommerce": [
+        "product",
+        "pricing",
+        "inventory",
+        "card",
+        "image",
+        "grid"
+      ],
+      "gallery": [
+        "image",
+        "gallery",
+        "card",
+        "grid"
+      ],
+      "grid": [
+        "table",
+        "data",
+        "card",
+        "image",
+        "feature",
+        "grid"
+      ],
+      "instagram": [
+        "social",
+        "post",
+        "image",
+        "gallery"
+      ],
+      "lightbox": [
+        "image",
+        "gallery",
+        "caption"
+      ],
+      "marketplace": [
+        "product",
+        "pricing",
+        "card",
+        "image",
+        "grid",
+        "search",
+        "filter"
+      ],
+      "media": [
+        "image",
+        "video",
+        "music",
+        "player",
+        "gallery",
+        "embed"
+      ],
+      "photos": [
+        "image",
+        "gallery",
+        "card",
+        "grid"
+      ],
+      "pictures": [
+        "image",
+        "gallery",
+        "card",
+        "grid"
+      ],
+      "portfolio": [
+        "image",
+        "gallery",
+        "card",
+        "grid",
+        "feature"
+      ],
+      "store": [
+        "product",
+        "pricing",
+        "inventory",
+        "card",
+        "image"
+      ],
+      "upload": [
+        "file",
+        "upload",
+        "image",
+        "import",
+        "data"
+      ]
+    },
+    "tag": "image-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/image/image.css

@@ -0,0 +1,76 @@
+@scope (image-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --image-radius: 0;
+
+    /* ── Colors ── */
+    --image-bg:       var(--a-bg-muted);
+
+    /* ── Transition ── */
+    --image-duration: var(--a-duration);
+    --image-easing:   var(--a-easing);
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    background: var(--image-bg);
+    border-radius: var(--image-radius);
+  }
+
+  /* ── Image ── */
+  [slot="image"] {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity var(--image-duration) var(--image-easing);
+  }
+
+  :scope[data-loaded] [slot="image"] {
+    opacity: 1;
+  }
+
+  /* ── Fit variants ── */
+  :scope[fit="cover"]   [slot="image"] { object-fit: cover; }
+  :scope[fit="contain"] [slot="image"] { object-fit: contain; }
+  :scope[fit="fill"]    [slot="image"] { object-fit: fill; }
+  :scope[fit="none"]    [slot="image"] { object-fit: none; }
+
+  /* ── Skeleton placeholder ── */
+  [slot="skeleton"] {
+    position: absolute;
+    inset: 0;
+    transition: opacity var(--image-duration) var(--image-easing);
+  }
+
+  :scope[data-loaded] [slot="skeleton"] {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  /* ── Radius variants ── */
+  :scope[radius="sm"]   { --image-radius: var(--a-radius-sm); }
+  :scope[radius="md"]   { --image-radius: var(--a-radius-md); }
+  :scope[radius="lg"]   { --image-radius: var(--a-radius-lg); }
+  :scope[radius="full"] { --image-radius: var(--a-radius-full); }
+
+  /* ── Size mode — fills the container.
+     Layout-changing attribute; sanctioned in component-token-contract.md. */
+  :scope[size="full"] {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* ── Raw — strips chrome (background + radius) for edge-to-edge rendering.
+     Comes after radius variants so it overrides them by source order. */
+  :scope[raw] {
+    --image-bg: transparent;
+    --image-radius: 0;
+  }
+}

package/components/image/image.js

@@ -0,0 +1,102 @@
+/**
+ * <image-ui src="/photo.jpg" alt="Photo" width="300" height="200"></image-ui>
+ * <image-ui src="/avatar.jpg" fit="cover" radius="full"></image-ui>
+ * <image-ui src="/hero.jpg" size="full"></image-ui>
+ * <image-ui src="/pixel.png" raw></image-ui>
+ *
+ * Lazy-loading image with skeleton fallback.
+ * Shows skeleton-ui while loading, swaps to img on load.
+ * Falls back to fallback URL or keeps skeleton on error.
+ *
+ * Size:   full (fills container width and height)
+ * Radius: sm, md, lg, full
+ * Fit:    cover (default), contain, fill, none
+ * Raw:    strips chrome (no background, no radius) for edge-to-edge rendering
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaImage extends AdiaElement {
+  static properties = {
+    src:      { type: String,  default: '',      reflect: true },
+    alt:      { type: String,  default: '',      reflect: true },
+    width:    { type: String,  default: '',      reflect: true },
+    height:   { type: String,  default: '',      reflect: true },
+    size:     { type: String,  default: '',      reflect: true },
+    fit:      { type: String,  default: 'cover', reflect: true },
+    radius:   { type: String,  default: '',      reflect: true },
+    raw:      { type: Boolean, default: false,   reflect: true },
+    fallback: { type: String,  default: '',      reflect: true },
+  };
+
+  static template = () => null;
+
+  #img = null;
+  #skeleton = null;
+
+  connected() {
+    this.#skeleton = this.querySelector(':scope > [slot="skeleton"]');
+    if (!this.#skeleton) {
+      this.#skeleton = document.createElement('skeleton-ui');
+      this.#skeleton.setAttribute('slot', 'skeleton');
+      this.#skeleton.setAttribute('width', '100%');
+      this.#skeleton.setAttribute('height', '100%');
+      this.appendChild(this.#skeleton);
+    }
+
+    this.#img = this.querySelector(':scope > [slot="image"]');
+    if (!this.#img) {
+      this.#img = document.createElement('img');
+      this.#img.setAttribute('slot', 'image');
+      this.#img.loading = 'lazy';
+      this.appendChild(this.#img);
+    }
+    this.#img.addEventListener('load', this.#onLoad);
+    this.#img.addEventListener('error', this.#onError);
+
+    this.#applySize();
+  }
+
+  render() {
+    if (!this.#img) return;
+
+    if (this.#img.getAttribute('src') !== this.src) {
+      this.removeAttribute('data-loaded');
+      this.removeAttribute('data-error');
+      this.#img.src = this.src || '';
+    }
+
+    this.#img.alt = this.alt || '';
+    this.#applySize();
+  }
+
+  #applySize() {
+    if (this.width)  this.style.width  = this.width;
+    if (this.height) this.style.height = this.height;
+  }
+
+  #onLoad = () => {
+    this.setAttribute('data-loaded', '');
+    this.removeAttribute('data-error');
+  };
+
+  #onError = () => {
+    if (this.fallback && this.#img.src !== this.fallback) {
+      this.#img.src = this.fallback;
+    } else {
+      this.setAttribute('data-error', '');
+    }
+  };
+
+  disconnected() {
+    if (this.#img) {
+      this.#img.removeEventListener('load', this.#onLoad);
+      this.#img.removeEventListener('error', this.#onError);
+    }
+    this.#img = null;
+    this.#skeleton = null;
+  }
+}
+customElements.define('image-ui', AdiaImage);
+
+export { AdiaImage };