@adia-ai/web-components 0.0.1

package/components/rating/rating.yaml

@@ -0,0 +1,74 @@
+# 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: AdiaRating
+tag: rating-ui
+component: Rating
+category: form
+version: 1
+description: Pictorial discrete rating (stars by default) with optional half-step precision.
+  Supports keyboard, mouse hover preview, and form participation.
+props:
+  name:
+    description: Form participation — field name when submitted
+    type: string
+    default: ""
+  allowHalf:
+    description: Enable 0.5-step precision on click/hover
+    type: boolean
+    default: false
+    attribute: allow-half
+  icon:
+    description: Phosphor icon name for each symbol (e.g. star, heart, thumbs-up)
+    type: string
+    default: star
+  max:
+    description: Number of rating symbols
+    type: number
+    default: 5
+  readonly:
+    description: Display-only — disables interaction but remains readable
+    type: boolean
+    default: false
+    reflect: true
+  size:
+    description: Symbol size
+    type: string
+    default: md
+    enum:
+      - sm
+      - md
+      - lg
+  value:
+    description: Current rating value (0..max, supports 0.5 steps when allowHalf)
+    type: number
+    default: 0
+events:
+  "[object Object]":
+    description: "Fired on [object Object]."
+slots: {}
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples: []
+keywords:
+  - rating
+  - stars
+  - review
+  - feedback
+  - score
+  - vote
+  - heart
+  - like
+synonyms:
+  rating:
+    - rating
+    - star rating
+    - review score
+    - feedback rating
+related: []

package/components/richtext/richtext.a2ui.json

@@ -0,0 +1,82 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Richtext.json",
+  "title": "Richtext",
+  "description": "Renders markdown to styled HTML.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Richtext"
+    },
+    "markdown": {
+      "description": "Component property: markdown.",
+      "type": "string",
+      "default": ""
+    },
+    "src": {
+      "description": "Source URL (image, iframe, etc.).",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "forms",
+    "events": {},
+    "examples": [
+      {
+        "description": "Basic Richtext 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\": \"Richtext\",\n    \"src\": \"/images/example.jpg\"\n  }\n]",
+        "name": "basic-richtext"
+      },
+      {
+        "description": "Inline markdown text rendered to styled HTML via the markdown attribute.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Richtext\",\n    \"markdown\": \"# Hello world\\n\\nWelcome to **AdiaUI**. This paragraph was parsed from markdown:\\n\\n- Lists\\n- Render\\n- Cleanly\\n\\n`inline code` and [links](https://example.com) work too.\"\n  }\n]",
+        "name": "markdown"
+      },
+      {
+        "description": "Fetch a remote markdown file via src and render it; useful for docs pages.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Richtext\",\n    \"src\": \"/README.md\"\n  }\n]",
+        "name": "src"
+      },
+      {
+        "description": "Richtext with fenced code blocks; whitespace preserved and monospace styling applied.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Richtext\",\n    \"markdown\": \"## Example\\n\\n```js\\nfunction greet(name) {\\n  return `Hello, ${name}!`;\\n}\\n```\\n\\nInline `code` also works.\"\n  }\n]",
+        "name": "code-blocks"
+      }
+    ],
+    "keywords": [
+      "richtext"
+    ],
+    "name": "AdiaRichtext",
+    "related": [],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "richtext-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/richtext/richtext.css

@@ -0,0 +1,225 @@
+/* ═══════════════════════════════════════════════════════════════
+   RICHTEXT-N — Markdown → styled HTML renderer
+   ═══════════════════════════════════════════════════════════════ */
+
+@scope (richtext-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    /* Optimal reading measure; not on spatial scale */
+    --richtext-max-width:      720px;
+    --richtext-px:             var(--a-space-6);
+    --richtext-py:             var(--a-space-8);
+
+    /* ── Colors ── */
+    --richtext-bg:             var(--a-canvas-0);
+    --richtext-fg:             var(--a-fg);
+    --richtext-fg-muted:       var(--a-fg-muted);
+    --richtext-fg-subtle:      var(--a-fg-subtle);
+    --richtext-code-bg:        var(--a-canvas-2);
+    --richtext-border:         var(--a-border-subtle);
+    --richtext-link:           var(--a-accent-bg);
+    --richtext-link-hover:     var(--a-accent);
+
+    /* ── Typography ── */
+    --richtext-font:           var(--a-font-family);
+    --richtext-font-code:      var(--a-font-family-code);
+    --richtext-body-size:      var(--a-body-size);
+    --richtext-body-leading:   var(--a-body-leading);
+    --richtext-code-size:      var(--a-ui-sm);
+
+    /* ── Heading typography ── */
+    --richtext-h1-size:        var(--a-heading-size);
+    --richtext-h1-weight:      var(--a-weight-bold);
+    --richtext-h1-leading:     var(--a-heading-leading);
+    --richtext-h2-size:        var(--a-section-size);
+    --richtext-h2-weight:      var(--a-section-weight);
+    --richtext-h2-leading:     var(--a-section-leading);
+    --richtext-h3-size:        var(--a-subsection-size);
+    --richtext-h3-weight:      var(--a-subsection-weight);
+    --richtext-h4-weight:      var(--a-weight-semibold);
+
+    /* ── Heading rhythm ── */
+    --richtext-h1-margin-bottom: var(--a-space-2);
+    --richtext-h2-margin-top:    var(--a-space-8);
+    --richtext-h2-margin-bottom: var(--a-space-3);
+    --richtext-h2-pad-bottom:    var(--a-space-2);
+    --richtext-h3-margin-top:    var(--a-space-6);
+    --richtext-h3-margin-bottom: var(--a-space-2);
+    --richtext-h4-margin-top:    var(--a-space-4);
+    --richtext-h4-margin-bottom: var(--a-space-1);
+
+    /* ── Block rhythm ── */
+    --richtext-p-margin-bottom:  var(--a-space-3);
+    --richtext-block-my:         var(--a-space-3);
+
+    /* ── Inline code ── */
+    --richtext-code-radius:      var(--a-radius-sm);
+
+    /* ── Code block ── */
+    --richtext-pre-radius:       var(--a-radius-md);
+    --richtext-pre-inset:        var(--a-space-3);
+    --richtext-pre-my:           var(--a-space-3);
+
+    /* ── Lists ── */
+    --richtext-list-my:          var(--a-space-2);
+    --richtext-list-indent:      var(--a-space-6);
+    --richtext-li-margin-bottom: var(--a-space-1);
+
+    /* ── Tables ── */
+    --richtext-table-my:         var(--a-space-3);
+    --richtext-th-py:            var(--a-space-2);
+    --richtext-th-px:            var(--a-space-3);
+    --richtext-th-weight:        var(--a-weight-semibold);
+
+    /* ── HR ── */
+    --richtext-hr-my:            var(--a-space-6);
+
+    /* ── Strong ── */
+    --richtext-strong-weight:    var(--a-weight-semibold);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background: var(--richtext-bg);
+    color: var(--richtext-fg);
+    font-family: var(--richtext-font);
+    overflow-y: auto;
+  }
+
+  /* ── Body container ── */
+
+  [data-richtext-body] {
+    box-sizing: border-box;
+    width: 100%;
+    max-width: var(--richtext-max-width);
+    padding: var(--richtext-py) var(--richtext-px);
+  }
+
+  /* ── Headings ── */
+
+  [data-richtext-body] h1 {
+    font-size: var(--richtext-h1-size);
+    font-weight: var(--richtext-h1-weight);
+    line-height: var(--richtext-h1-leading);
+    margin: 0 0 var(--richtext-h1-margin-bottom);
+  }
+
+  [data-richtext-body] h2 {
+    font-size: var(--richtext-h2-size);
+    font-weight: var(--richtext-h2-weight);
+    line-height: var(--richtext-h2-leading);
+    margin: var(--richtext-h2-margin-top) 0 var(--richtext-h2-margin-bottom);
+    padding-bottom: var(--richtext-h2-pad-bottom);
+    border-bottom: 1px solid var(--richtext-border);
+  }
+
+  [data-richtext-body] h3 {
+    font-size: var(--richtext-h3-size);
+    font-weight: var(--richtext-h3-weight);
+    margin: var(--richtext-h3-margin-top) 0 var(--richtext-h3-margin-bottom);
+  }
+
+  [data-richtext-body] h4 {
+    font-size: var(--richtext-body-size);
+    font-weight: var(--richtext-h4-weight);
+    margin: var(--richtext-h4-margin-top) 0 var(--richtext-h4-margin-bottom);
+  }
+
+  /* ── Body text ── */
+
+  [data-richtext-body] p {
+    font-size: var(--richtext-body-size);
+    line-height: var(--richtext-body-leading);
+    margin: 0 0 var(--richtext-p-margin-bottom);
+  }
+
+  [data-richtext-body] h2 + p,
+  [data-richtext-body] h3 + p {
+    color: var(--richtext-fg-subtle);
+  }
+
+  /* ── Code ── */
+
+  [data-richtext-body] code {
+    background: var(--richtext-code-bg);
+    padding: 0.1em 0.35em;
+    border-radius: var(--richtext-code-radius);
+    font-family: var(--richtext-font-code);
+    font-size: 0.875em;
+  }
+
+  [data-richtext-body] pre {
+    background: var(--richtext-code-bg);
+    border: 1px solid var(--richtext-border);
+    border-radius: var(--richtext-pre-radius);
+    padding: var(--richtext-pre-inset);
+    overflow-x: auto;
+    font-size: var(--richtext-code-size);
+    line-height: 1.5;
+    margin: var(--richtext-pre-my) 0;
+  }
+
+  [data-richtext-body] pre code {
+    background: none;
+    padding: 0;
+    font-size: inherit;
+  }
+
+  /* ── Lists ── */
+
+  [data-richtext-body] ul,
+  [data-richtext-body] ol {
+    margin: var(--richtext-list-my) 0;
+    padding-left: var(--richtext-list-indent);
+  }
+
+  [data-richtext-body] li {
+    margin-bottom: var(--richtext-li-margin-bottom);
+  }
+
+  /* ── Tables ── */
+
+  [data-richtext-body] table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: var(--richtext-table-my) 0;
+    font-size: var(--richtext-body-size);
+  }
+
+  [data-richtext-body] th,
+  [data-richtext-body] td {
+    text-align: left;
+    padding: var(--richtext-th-py) var(--richtext-th-px);
+    border-bottom: 1px solid var(--richtext-border);
+  }
+
+  [data-richtext-body] th {
+    font-weight: var(--richtext-th-weight);
+    color: var(--richtext-fg-muted);
+    font-size: var(--richtext-code-size);
+  }
+
+  /* ── Misc ── */
+
+  [data-richtext-body] hr {
+    border: none;
+    border-top: 1px solid var(--richtext-border);
+    margin: var(--richtext-hr-my) 0;
+  }
+
+  [data-richtext-body] strong { font-weight: var(--richtext-strong-weight); }
+  [data-richtext-body] em { font-style: italic; }
+
+  [data-richtext-body] a {
+    color: var(--richtext-link);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  [data-richtext-body] a:hover {
+    color: var(--richtext-link-hover);
+  }
+}

package/components/richtext/richtext.js

@@ -0,0 +1,74 @@
+import { AdiaElement } from '@core/element.js';
+import { renderMarkdown } from '@core/markdown.js';
+
+/**
+ * <richtext-ui> — Renders markdown to styled HTML.
+ *
+ * Takes markdown as a `src` URL (fetched) or `markdown` property (inline),
+ * converts it to HTML, and displays it with prose-appropriate typography.
+ *
+ * Usage:
+ *   <richtext-ui src="/docs/readme.md"></richtext-ui>
+ *   <richtext-ui markdown="# Hello\nSome **bold** text."></richtext-ui>
+ *
+ * Programmatic:
+ *   const el = document.querySelector('richtext-ui');
+ *   el.markdown = '# Title\nParagraph text.';
+ */
+class AdiaRichText extends AdiaElement {
+  static properties = {
+    src:      { type: String, default: '', reflect: true },
+    markdown: { type: String, default: '' },
+  };
+
+  static template = () => null;
+
+  #bodyEl = null;
+  #lastSrc = '';
+  #lastMd = '';
+
+  connected() {
+    if (!this.#bodyEl) {
+      this.#bodyEl = document.createElement('div');
+      this.#bodyEl.setAttribute('data-richtext-body', '');
+      this.appendChild(this.#bodyEl);
+    }
+  }
+
+  render() {
+    // Fetch from URL
+    if (this.src && this.src !== this.#lastSrc) {
+      this.#lastSrc = this.src;
+      this.#lastMd = '';
+      this.#load();
+      return;
+    }
+
+    // Inline markdown
+    if (this.markdown && this.markdown !== this.#lastMd) {
+      this.#lastMd = this.markdown;
+      this.#lastSrc = '';
+      this.#bodyEl.innerHTML = renderMarkdown(this.markdown);
+    }
+  }
+
+  async #load() {
+    try {
+      const res = await fetch(this.src);
+      if (!this.isConnected) return;
+      if (!res.ok) {
+        this.#bodyEl.innerHTML = `<p>Failed to load: ${this.src}</p>`;
+        return;
+      }
+      const md = await res.text();
+      if (!this.isConnected) return;
+      this.#bodyEl.innerHTML = renderMarkdown(md);
+    } catch (e) {
+      if (!this.isConnected) return;
+      this.#bodyEl.innerHTML = `<p>Error: ${e.message}</p>`;
+    }
+  }
+}
+
+customElements.define('richtext-ui', AdiaRichText);
+export { AdiaRichText };

package/components/richtext/richtext.yaml

@@ -0,0 +1,89 @@
+# 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: AdiaRichtext
+tag: richtext-ui
+component: Richtext
+category: forms
+version: 1
+description: Renders markdown to styled HTML.
+props:
+  markdown:
+    description: "Component property: markdown."
+    type: string
+    default: ""
+  src:
+    description: "Source URL (image, iframe, etc.)."
+    type: string
+    default: ""
+events: {}
+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-richtext
+    description: Basic Richtext usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "Richtext",
+          "src": "/images/example.jpg"
+        }
+      ]
+  - name: markdown
+    description: Inline markdown text rendered to styled HTML via the markdown attribute.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Richtext",
+          "markdown": "# Hello world\n\nWelcome to **AdiaUI**. This paragraph was parsed from markdown:\n\n- Lists\n- Render\n- Cleanly\n\n`inline code` and [links](https://example.com) work too."
+        }
+      ]
+  - name: src
+    description: Fetch a remote markdown file via src and render it; useful for docs pages.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Richtext",
+          "src": "/README.md"
+        }
+      ]
+  - name: code-blocks
+    description: Richtext with fenced code blocks; whitespace preserved and monospace styling applied.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Richtext",
+          "markdown": "## Example\n\n```js\nfunction greet(name) {\n  return `Hello, ${name}!`;\n}\n```\n\nInline `code` also works."
+        }
+      ]
+keywords:
+  - richtext
+synonyms: {}
+related: []

package/components/row/row.a2ui.json

@@ -0,0 +1,102 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Row.json",
+  "title": "Row",
+  "description": "Flex row layout primitive.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "align": {
+      "description": "Align items",
+      "type": "string",
+      "default": "center"
+    },
+    "component": {
+      "const": "Row"
+    },
+    "draggable": {
+      "description": "Enables drag handle + cursor:grab. Wires the draggable trait; dispatches drag-end.",
+      "type": "boolean",
+      "default": false
+    },
+    "gap": {
+      "description": "Gap between children. Accepts either the named scale (xs/sm/md/lg/xl) or a numeric rung on the spacing scale (\"1\"…\"16\").",
+      "type": "string",
+      "default": "md"
+    },
+    "justify": {
+      "description": "Justify content",
+      "type": "string",
+      "default": "start"
+    },
+    "variant": {
+      "description": "Visual variant — default, bordered, muted, separator.",
+      "type": "string",
+      "default": "default"
+    },
+    "wrap": {
+      "description": "Enable flex wrap",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "layout",
+    "events": {
+      "drag-end": {
+        "description": "Fired when a drag completes."
+      }
+    },
+    "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": [
+      "row"
+    ],
+    "name": "AdiaRow",
+    "related": [
+      "avatar",
+      "input",
+      "button",
+      "badge",
+      "grid"
+    ],
+    "slots": {
+      "default": {
+        "description": "Default slot — primary child content."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "row-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}