@adia-ai/web-components 0.0.1

package/components/row/row.css

@@ -0,0 +1,51 @@
+@scope (row-ui) {
+  :where(:scope) {
+    --row-gap:     var(--a-gap-md);
+    --row-justify: flex-start;
+    --row-align:   center;
+    --row-drag-bg-active: var(--a-accent-muted);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    gap: var(--row-gap);
+    justify-content: var(--row-justify);
+    align-items: var(--row-align);
+    text-align: inherit;
+  }
+
+  /* ── Draggable ── */
+  :scope[draggable] {
+    cursor: grab;
+    user-select: none;
+  }
+
+  :scope[draggable]:active,
+  :scope[draggable][data-draggable-dragging] {
+    cursor: grabbing;
+    background: var(--row-drag-bg-active);
+  }
+
+  /* Justify */
+  :scope[justify="start"]         { --row-justify: flex-start; }
+  :scope[justify="center"]        { --row-justify: center; }
+  :scope[justify="end"]           { --row-justify: flex-end; }
+  :scope[justify="between"]       { --row-justify: space-between; }
+  :scope[justify="space-between"] { --row-justify: space-between; }
+  :scope[justify="space-around"]  { --row-justify: space-around; }
+
+  /* Align */
+  :scope[align="start"]    { --row-align: flex-start; }
+  :scope[align="center"]   { --row-align: center; }
+  :scope[align="end"]      { --row-align: flex-end; }
+  :scope[align="stretch"]  { --row-align: stretch; }
+  :scope[align="baseline"] { --row-align: baseline; }
+
+  /* Wrap */
+  :scope[wrap] { flex-wrap: wrap; }
+
+  /* Grow */
+  :scope[grow] { flex: 1; min-width: 0; }
+}

package/components/row/row.js

@@ -0,0 +1,39 @@
+/**
+ * row-ui — Flex row layout primitive.
+ *
+ * <row-ui gap="sm" justify="space-between" wrap>...</row-ui>
+ * <row-ui draggable>...</row-ui>   wires the draggable trait, emits drag-end
+ */
+
+import { AdiaElement } from '@core/element.js';
+import { draggable } from '@traits/draggable.js';
+
+class AdiaRow extends AdiaElement {
+  static properties = {
+    justify:   { type: String,  default: 'start',  reflect: true },
+    align:     { type: String,  default: 'center', reflect: true },
+    gap:       { type: String,  default: 'md',     reflect: true },
+    wrap:      { type: Boolean, default: false,    reflect: true },
+    draggable: { type: Boolean, default: false,    reflect: true },
+  };
+  static template = () => null;
+
+  #dragAttached = false;
+
+  connected() {
+    if (this.draggable && !this.#dragAttached) {
+      this.addTrait(draggable);
+      this.#dragAttached = true;
+    }
+  }
+
+  updated(changed) {
+    if (changed.has('draggable') && this.draggable && !this.#dragAttached) {
+      this.addTrait(draggable);
+      this.#dragAttached = true;
+    }
+  }
+}
+customElements.define('row-ui', AdiaRow);
+
+export { AdiaRow };

package/components/row/row.yaml

@@ -0,0 +1,358 @@
+# 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: AdiaRow
+tag: row-ui
+component: Row
+category: layout
+version: 1
+description: Flex row layout primitive.
+props:
+  align:
+    description: Align items
+    type: string
+    default: center
+  variant:
+    description: Visual variant — default, bordered, muted, separator.
+    type: string
+    default: default
+  draggable:
+    description: Enables drag handle + cursor:grab. Wires the draggable trait; dispatches drag-end.
+    type: boolean
+    default: false
+    reflect: true
+  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
+  wrap:
+    description: Enable flex wrap
+    type: boolean
+    default: false
+events:
+  drag-end:
+    description: "Fired when a drag completes."
+slots:
+  default:
+    description: "Default slot — primary child content."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: chat-interface
+    description: Chat interface with message bubbles containing avatar and text pairs, plus an input footer.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec",
+            "ftr"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Chat"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "messages"
+          ]
+        },
+        {
+          "id": "messages",
+          "component": "Column",
+          "gap": "3",
+          "children": [
+            "msg1",
+            "msg2",
+            "msg3",
+            "msg4"
+          ]
+        },
+        {
+          "id": "msg1",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "a1",
+            "t1"
+          ]
+        },
+        {
+          "id": "a1",
+          "component": "Avatar",
+          "name": "User",
+          "size": "sm"
+        },
+        {
+          "id": "t1",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Hello! Can you help me with something?"
+        },
+        {
+          "id": "msg2",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "a2",
+            "t2"
+          ]
+        },
+        {
+          "id": "a2",
+          "component": "Avatar",
+          "name": "Assistant",
+          "size": "sm"
+        },
+        {
+          "id": "t2",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Of course! I'd be happy to help. What do you need?"
+        },
+        {
+          "id": "msg3",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "a3",
+            "t3"
+          ]
+        },
+        {
+          "id": "a3",
+          "component": "Avatar",
+          "name": "User",
+          "size": "sm"
+        },
+        {
+          "id": "t3",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "I need to build a dashboard layout."
+        },
+        {
+          "id": "msg4",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "a4",
+            "t4"
+          ]
+        },
+        {
+          "id": "a4",
+          "component": "Avatar",
+          "name": "Assistant",
+          "size": "sm"
+        },
+        {
+          "id": "t4",
+          "component": "Text",
+          "variant": "body",
+          "textContent": "Great choice! Let me suggest some patterns for that."
+        },
+        {
+          "id": "ftr",
+          "component": "Footer",
+          "children": [
+            "input-row"
+          ]
+        },
+        {
+          "id": "input-row",
+          "component": "Row",
+          "gap": "2",
+          "children": [
+            "chat-input",
+            "send-btn"
+          ]
+        },
+        {
+          "id": "chat-input",
+          "component": "Input",
+          "placeholder": "Type a message..."
+        },
+        {
+          "id": "send-btn",
+          "component": "Button",
+          "text": "Send",
+          "icon": "send",
+          "variant": "primary"
+        }
+      ]
+  - 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"
+        }
+      ]
+keywords:
+  - row
+synonyms: {}
+related:
+  - avatar
+  - input
+  - button
+  - badge
+  - grid

package/components/search/search.a2ui.json

@@ -0,0 +1,186 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Search.json",
+  "title": "Search",
+  "description": "Search input with magnifying-glass icon, clear button, and debounced search event.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "required": {
+      "description": "Marks as required",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Search"
+    },
+    "debounce": {
+      "description": "Debounce delay in ms before search event fires",
+      "type": "number",
+      "default": 300
+    },
+    "disabled": {
+      "description": "Disables interaction",
+      "type": "boolean",
+      "default": false
+    },
+    "icon": {
+      "description": "Leading icon name. Defaults to search (magnifying glass).",
+      "type": "string",
+      "default": "search"
+    },
+    "name": {
+      "description": "Form field name",
+      "type": "string",
+      "default": ""
+    },
+    "placeholder": {
+      "description": "Placeholder text",
+      "type": "string",
+      "default": "Search..."
+    },
+    "value": {
+      "description": "Current search query",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "input",
+    "events": {
+      "clear": {
+        "description": "Fired when the clear button is clicked"
+      },
+      "input": {
+        "description": "Fired on each input change during typing."
+      },
+      "search": {
+        "description": "Debounced CustomEvent with detail.query containing the search string"
+      }
+    },
+    "examples": [
+      {
+        "description": "Basic Search 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\": \"Search\",\n    \"name\": \"search\",\n    \"placeholder\": \"Enter search...\",\n    \"value\": \"\"\n  }\n]",
+        "name": "basic-search"
+      }
+    ],
+    "keywords": [
+      "search",
+      "marketplace",
+      "find",
+      "lookup",
+      "autocomplete",
+      "typeahead",
+      "spotlight",
+      "omnibar",
+      "combobox"
+    ],
+    "name": "AdiaSearch",
+    "related": [],
+    "slots": {
+      "clear": {
+        "description": "Clear button (shown when value is non-empty)"
+      },
+      "input": {
+        "description": "Native search input element"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      },
+      {
+        "description": "Non-interactive; dimmed.",
+        "attribute": "disabled",
+        "name": "disabled"
+      }
+    ],
+    "synonyms": {
+      "autocomplete": [
+        "search",
+        "command",
+        "palette",
+        "tag"
+      ],
+      "combobox": [
+        "search",
+        "command",
+        "select"
+      ],
+      "find": [
+        "search",
+        "filter",
+        "command"
+      ],
+      "lookup": [
+        "search",
+        "filter",
+        "command"
+      ],
+      "marketplace": [
+        "product",
+        "pricing",
+        "card",
+        "image",
+        "grid",
+        "search",
+        "filter"
+      ],
+      "omnibar": [
+        "command",
+        "palette",
+        "search"
+      ],
+      "search": [
+        "search",
+        "filter",
+        "command",
+        "palette"
+      ],
+      "spotlight": [
+        "command",
+        "palette",
+        "search"
+      ],
+      "typeahead": [
+        "search",
+        "command",
+        "palette"
+      ]
+    },
+    "tag": "search-ui",
+    "tokens": {
+      "--search-background": {
+        "description": "Input background color"
+      },
+      "--search-border-color": {
+        "description": "Input border color"
+      },
+      "--search-font-size": {
+        "description": "Input font size"
+      },
+      "--search-foreground": {
+        "description": "Input text color"
+      },
+      "--search-radius": {
+        "description": "Input border radius"
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/search/search.css

@@ -0,0 +1,28 @@
+@scope (search-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --search-radius:      var(--a-radius);
+    --search-duration:    var(--a-duration-fast);
+    --search-easing:      var(--a-easing);
+  }
+
+  :scope {
+    display: block;
+  }
+
+  /* Hide clear icon when empty */
+  :scope[value=""] [slot="suffix"],
+  :scope:not([value]) [slot="suffix"] {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  [slot="suffix"] {
+    transition: opacity var(--search-duration) var(--search-easing);
+  }
+
+  /* Override input-ui radius to pill for search */
+  input-ui {
+    --input-radius: var(--search-radius);
+  }
+}