@adia-ai/web-components 0.0.1

package/components/grid/grid.yaml

@@ -0,0 +1,577 @@
+# 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: AdiaGrid
+tag: grid-ui
+component: Grid
+category: layout
+version: 1
+description: >-
+  CSS grid layout primitive. Supports [columns="1..6"] for equal columns,
+  [columns="auto-fill"|"auto-fit"] for responsive density, and a per-child
+  [span="2..6"|"full"] attribute for asymmetric layouts. Compose a 2:1 split as
+  columns="3" + the wide child span="2"; compose a 3:2 split as columns="5" +
+  span="3" + span="2". Never set grid-template-columns via inline style — use the
+  span attribute on children instead.
+props:
+  columnGap:
+    description: Column gap override
+    type: string
+    default: ""
+    attribute: column-gap
+  columns:
+    description: Number of columns or grid-template-columns
+    type: string
+    default: "3"
+  cols:
+    description: Alias for `columns` — accepted for back-compat.
+    type: string
+    default: ""
+  gap:
+    description: Grid gap
+    type: string
+    default: md
+  rowGap:
+    description: Row gap override
+    type: string
+    default: ""
+    attribute: row-gap
+events: {}
+slots:
+  default:
+    description: "Default slot — primary child content."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules:
+    - >-
+      For asymmetric column ratios, use [columns="N"] plus [span="M"] on the child
+      that should be wider. Never set grid-template-columns via style — it bypasses
+      the component API and reads as a local hack.
+    - >-
+      Canonical ratios: 1:1 → columns="2"; 2:1 → columns="3" + span="2";
+      3:1 → columns="4" + span="3"; 3:2 → columns="5" + span="3"+"2";
+      4:1 → columns="5" + span="4". Round unusual ratios (e.g. 7:5) to 3:2.
+    - >-
+      The default (no columns attribute) gives equal auto-columns flowing in a
+      single row. Prefer the explicit numeric attribute for dashboard rows so the
+      layout is predictable when items wrap.
+anti_patterns: []
+examples:
+  - name: chart-dashboard
+    description: Dashboard with KPI stat grid and two chart cards.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Column",
+          "children": [
+            "header-row",
+            "kpi-grid",
+            "chart-grid"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "header-row",
+          "component": "Row",
+          "children": [
+            "dash-title",
+            "dash-actions"
+          ]
+        },
+        {
+          "id": "dash-title",
+          "component": "Text",
+          "textContent": "Dashboard",
+          "variant": "title"
+        },
+        {
+          "id": "dash-actions",
+          "component": "Row",
+          "children": [
+            "export-btn"
+          ],
+          "gap": "2"
+        },
+        {
+          "id": "export-btn",
+          "component": "Button",
+          "text": "Export",
+          "variant": "outline",
+          "size": "sm",
+          "icon": "download"
+        },
+        {
+          "id": "kpi-grid",
+          "component": "Grid",
+          "children": [
+            "k1",
+            "k2",
+            "k3",
+            "k4"
+          ],
+          "columns": "4"
+        },
+        {
+          "id": "k1",
+          "component": "Card",
+          "children": [
+            "k1h",
+            "k1s"
+          ]
+        },
+        {
+          "id": "k1h",
+          "component": "Header",
+          "children": [
+            "k1l"
+          ]
+        },
+        {
+          "id": "k1l",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Revenue",
+          "variant": "label"
+        },
+        {
+          "id": "k1s",
+          "component": "Section",
+          "children": [
+            "k1v",
+            "k1b"
+          ]
+        },
+        {
+          "id": "k1v",
+          "component": "Text",
+          "textContent": "$48.2k",
+          "variant": "title"
+        },
+        {
+          "id": "k1b",
+          "component": "Badge",
+          "text": "+12.5%",
+          "variant": "success",
+          "size": "sm"
+        },
+        {
+          "id": "k2",
+          "component": "Card",
+          "children": [
+            "k2h",
+            "k2s"
+          ]
+        },
+        {
+          "id": "k2h",
+          "component": "Header",
+          "children": [
+            "k2l"
+          ]
+        },
+        {
+          "id": "k2l",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Users",
+          "variant": "label"
+        },
+        {
+          "id": "k2s",
+          "component": "Section",
+          "children": [
+            "k2v",
+            "k2b"
+          ]
+        },
+        {
+          "id": "k2v",
+          "component": "Text",
+          "textContent": "2,340",
+          "variant": "title"
+        },
+        {
+          "id": "k2b",
+          "component": "Badge",
+          "text": "+8%",
+          "variant": "success",
+          "size": "sm"
+        },
+        {
+          "id": "k3",
+          "component": "Card",
+          "children": [
+            "k3h",
+            "k3s"
+          ]
+        },
+        {
+          "id": "k3h",
+          "component": "Header",
+          "children": [
+            "k3l"
+          ]
+        },
+        {
+          "id": "k3l",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Bounce",
+          "variant": "label"
+        },
+        {
+          "id": "k3s",
+          "component": "Section",
+          "children": [
+            "k3v",
+            "k3b"
+          ]
+        },
+        {
+          "id": "k3v",
+          "component": "Text",
+          "textContent": "24.3%",
+          "variant": "title"
+        },
+        {
+          "id": "k3b",
+          "component": "Badge",
+          "text": "-3.1%",
+          "variant": "danger",
+          "size": "sm"
+        },
+        {
+          "id": "k4",
+          "component": "Card",
+          "children": [
+            "k4h",
+            "k4s"
+          ]
+        },
+        {
+          "id": "k4h",
+          "component": "Header",
+          "children": [
+            "k4l"
+          ]
+        },
+        {
+          "id": "k4l",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Session",
+          "variant": "label"
+        },
+        {
+          "id": "k4s",
+          "component": "Section",
+          "children": [
+            "k4v",
+            "k4b"
+          ]
+        },
+        {
+          "id": "k4v",
+          "component": "Text",
+          "textContent": "4m 23s",
+          "variant": "title"
+        },
+        {
+          "id": "k4b",
+          "component": "Badge",
+          "text": "+15s",
+          "variant": "info",
+          "size": "sm"
+        },
+        {
+          "id": "chart-grid",
+          "component": "Grid",
+          "children": [
+            "ch1",
+            "ch2"
+          ],
+          "columns": "2"
+        },
+        {
+          "id": "ch1",
+          "component": "Card",
+          "children": [
+            "ch1h",
+            "ch1s"
+          ]
+        },
+        {
+          "id": "ch1h",
+          "component": "Header",
+          "children": [
+            "ch1t"
+          ]
+        },
+        {
+          "id": "ch1t",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Revenue",
+          "variant": "section"
+        },
+        {
+          "id": "ch1s",
+          "component": "Section",
+          "children": [
+            "ch1-chart"
+          ]
+        },
+        {
+          "id": "ch1-chart",
+          "component": "Chart",
+          "type": "bar",
+          "x": "month",
+          "y": "revenue"
+        },
+        {
+          "id": "ch2",
+          "component": "Card",
+          "children": [
+            "ch2h",
+            "ch2s"
+          ]
+        },
+        {
+          "id": "ch2h",
+          "component": "Header",
+          "children": [
+            "ch2t"
+          ]
+        },
+        {
+          "id": "ch2t",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Users",
+          "variant": "section"
+        },
+        {
+          "id": "ch2s",
+          "component": "Section",
+          "children": [
+            "ch2-chart"
+          ]
+        },
+        {
+          "id": "ch2-chart",
+          "component": "Chart",
+          "type": "line",
+          "x": "month",
+          "y": "users"
+        }
+      ]
+  - name: dashboard
+    description: Two-column dashboard with quick actions (buttons) and system status (progress bars).
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Grid",
+          "children": [
+            "c1",
+            "c2"
+          ],
+          "columns": "2"
+        },
+        {
+          "id": "c1",
+          "component": "Card",
+          "children": [
+            "c1h",
+            "c1s"
+          ]
+        },
+        {
+          "id": "c1h",
+          "component": "Header",
+          "children": [
+            "c1t"
+          ]
+        },
+        {
+          "id": "c1t",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Quick Actions",
+          "variant": "section"
+        },
+        {
+          "id": "c1s",
+          "component": "Section",
+          "children": [
+            "c1col"
+          ]
+        },
+        {
+          "id": "c1col",
+          "component": "Column",
+          "children": [
+            "b1",
+            "b2",
+            "b3"
+          ]
+        },
+        {
+          "id": "b1",
+          "component": "Button",
+          "text": "New Project",
+          "variant": "solid",
+          "iconLeading": "plus"
+        },
+        {
+          "id": "b2",
+          "component": "Button",
+          "text": "Invite Member",
+          "variant": "outline",
+          "iconLeading": "users"
+        },
+        {
+          "id": "b3",
+          "component": "Button",
+          "text": "View Reports",
+          "variant": "ghost",
+          "iconLeading": "chart"
+        },
+        {
+          "id": "c2",
+          "component": "Card",
+          "children": [
+            "c2h",
+            "c2s"
+          ]
+        },
+        {
+          "id": "c2h",
+          "component": "Header",
+          "children": [
+            "c2t"
+          ]
+        },
+        {
+          "id": "c2t",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "System Status",
+          "variant": "section"
+        },
+        {
+          "id": "c2s",
+          "component": "Section",
+          "children": [
+            "c2col"
+          ]
+        },
+        {
+          "id": "c2col",
+          "component": "Column",
+          "children": [
+            "p1",
+            "p2",
+            "p3"
+          ]
+        },
+        {
+          "id": "p1",
+          "component": "Progress",
+          "value": "92",
+          "label": "CPU"
+        },
+        {
+          "id": "p2",
+          "component": "Progress",
+          "value": "67",
+          "label": "Memory"
+        },
+        {
+          "id": "p3",
+          "component": "Progress",
+          "value": "34",
+          "label": "Disk"
+        }
+      ]
+keywords:
+  - grid
+  - ecommerce
+  - marketplace
+  - catalog
+  - columns
+  - photos
+  - pictures
+  - gallery
+  - portfolio
+  - responsive
+synonyms:
+  catalog:
+    - product
+    - card
+    - image
+    - grid
+    - inventory
+  columns:
+    - split
+    - grid
+    - table
+  ecommerce:
+    - product
+    - pricing
+    - inventory
+    - card
+    - image
+    - grid
+  gallery:
+    - image
+    - gallery
+    - card
+    - grid
+  grid:
+    - table
+    - data
+    - card
+    - image
+    - feature
+    - grid
+  marketplace:
+    - product
+    - pricing
+    - card
+    - image
+    - grid
+    - search
+    - filter
+  photos:
+    - image
+    - gallery
+    - card
+    - grid
+  pictures:
+    - image
+    - gallery
+    - card
+    - grid
+  portfolio:
+    - image
+    - gallery
+    - card
+    - grid
+    - feature
+  responsive:
+    - split
+    - sidebar
+    - grid
+    - card
+related:
+  - button
+  - badge
+  - chart
+  - progress
+  - color-picker

package/components/header/header.a2ui.json

@@ -0,0 +1,76 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Header.json",
+  "title": "Header",
+  "description": "Card header. Contains heading text and optional action slot.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Header"
+    },
+    "padding": {
+      "description": "Bare attribute — enables default header padding. Card's own `padding` prop sets scale.",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "container",
+    "events": {},
+    "examples": [
+      {
+        "description": "Chat interface with message bubbles containing avatar and text pairs, plus an input footer.",
+        "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    \"textContent\": \"Chat\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"messages\"\n    ]\n  },\n  {\n    \"id\": \"messages\",\n    \"component\": \"Column\",\n    \"gap\": \"3\",\n    \"children\": [\n      \"msg1\",\n      \"msg2\",\n      \"msg3\",\n      \"msg4\"\n    ]\n  },\n  {\n    \"id\": \"msg1\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a1\",\n      \"t1\"\n    ]\n  },\n  {\n    \"id\": \"a1\",\n    \"component\": \"Avatar\",\n    \"name\": \"User\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t1\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Hello! Can you help me with something?\"\n  },\n  {\n    \"id\": \"msg2\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a2\",\n      \"t2\"\n    ]\n  },\n  {\n    \"id\": \"a2\",\n    \"component\": \"Avatar\",\n    \"name\": \"Assistant\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t2\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Of course! I'd be happy to help. What do you need?\"\n  },\n  {\n    \"id\": \"msg3\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a3\",\n      \"t3\"\n    ]\n  },\n  {\n    \"id\": \"a3\",\n    \"component\": \"Avatar\",\n    \"name\": \"User\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t3\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"I need to build a dashboard layout.\"\n  },\n  {\n    \"id\": \"msg4\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"a4\",\n      \"t4\"\n    ]\n  },\n  {\n    \"id\": \"a4\",\n    \"component\": \"Avatar\",\n    \"name\": \"Assistant\",\n    \"size\": \"sm\"\n  },\n  {\n    \"id\": \"t4\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Great choice! Let me suggest some patterns for that.\"\n  },\n  {\n    \"id\": \"ftr\",\n    \"component\": \"Footer\",\n    \"children\": [\n      \"input-row\"\n    ]\n  },\n  {\n    \"id\": \"input-row\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"chat-input\",\n      \"send-btn\"\n    ]\n  },\n  {\n    \"id\": \"chat-input\",\n    \"component\": \"Input\",\n    \"placeholder\": \"Type a message...\"\n  },\n  {\n    \"id\": \"send-btn\",\n    \"component\": \"Button\",\n    \"text\": \"Send\",\n    \"icon\": \"send\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "chat-interface"
+      },
+      {
+        "description": "Command palette card with search input and a list of command options.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"search\"\n    ]\n  },\n  {\n    \"id\": \"search\",\n    \"component\": \"Input\",\n    \"placeholder\": \"Type a command or search...\",\n    \"icon\": \"search\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"options\"\n    ]\n  },\n  {\n    \"id\": \"options\",\n    \"component\": \"Column\",\n    \"gap\": \"1\",\n    \"children\": [\n      \"opt1\",\n      \"opt2\",\n      \"opt3\",\n      \"opt4\",\n      \"opt5\"\n    ]\n  },\n  {\n    \"id\": \"opt1\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i1\",\n      \"l1\"\n    ]\n  },\n  {\n    \"id\": \"i1\",\n    \"component\": \"Icon\",\n    \"name\": \"file\"\n  },\n  {\n    \"id\": \"l1\",\n    \"component\": \"Text\",\n    \"textContent\": \"Open File\"\n  },\n  {\n    \"id\": \"opt2\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i2\",\n      \"l2\"\n    ]\n  },\n  {\n    \"id\": \"i2\",\n    \"component\": \"Icon\",\n    \"name\": \"gear\"\n  },\n  {\n    \"id\": \"l2\",\n    \"component\": \"Text\",\n    \"textContent\": \"Settings\"\n  },\n  {\n    \"id\": \"opt3\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i3\",\n      \"l3\"\n    ]\n  },\n  {\n    \"id\": \"i3\",\n    \"component\": \"Icon\",\n    \"name\": \"palette\"\n  },\n  {\n    \"id\": \"l3\",\n    \"component\": \"Text\",\n    \"textContent\": \"Change Theme\"\n  },\n  {\n    \"id\": \"opt4\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i4\",\n      \"l4\"\n    ]\n  },\n  {\n    \"id\": \"i4\",\n    \"component\": \"Icon\",\n    \"name\": \"users\"\n  },\n  {\n    \"id\": \"l4\",\n    \"component\": \"Text\",\n    \"textContent\": \"Manage Users\"\n  },\n  {\n    \"id\": \"opt5\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i5\",\n      \"l5\"\n    ]\n  },\n  {\n    \"id\": \"i5\",\n    \"component\": \"Icon\",\n    \"name\": \"sign-out\"\n  },\n  {\n    \"id\": \"l5\",\n    \"component\": \"Text\",\n    \"textContent\": \"Sign Out\"\n  }\n]",
+        "name": "command-palette"
+      }
+    ],
+    "keywords": [
+      "header"
+    ],
+    "name": "AdiaHeader",
+    "related": [
+      "avatar",
+      "input",
+      "button",
+      "skeleton",
+      "alert"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      },
+      "action": {
+        "description": "Action region — buttons or badges on the right."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "header-n",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}