@adia-ai/web-components 0.0.1

package/components/inspector/inspector.js

@@ -0,0 +1,133 @@
+import { AdiaElement } from '@core/element.js';
+import { registry } from '../../a2ui/registry.js';
+import '../tabs/tabs.js';
+import '../tabs/tab.js';
+import '../code/code.js';
+
+/**
+ * <inspector-ui> — Developer tools pane for inspecting A2UI state.
+ *
+ * Composes <tabs-ui> with four panes:
+ *   Catalog  — A2UI registry type-to-tag mapping
+ *   Surface  — current surface schema (JSON)
+ *   Messages — message log
+ *   Code     — rendered HTML
+ *
+ * Usage (declarative — initial surface payload):
+ *   <inspector-ui>
+ *     { "hello": "world" }
+ *   </inspector-ui>
+ *
+ * Usage (imperative):
+ *   const inspector = document.querySelector('inspector-ui');
+ *   inspector.update(schema, messages);
+ *   inspector.setHTML(renderedHTML);
+ *
+ * Attributes:
+ *   value — active tab: 'catalog' | 'surface' | 'messages' | 'code'
+ *           (default: 'surface')
+ */
+class AdiaInspector extends AdiaElement {
+  static properties = {
+    value: { type: String, default: 'surface', reflect: true },
+  };
+
+  static template = () => null;
+
+  #tabs = null;
+  #panes = {};
+
+  connected() {
+    const declarative = this.textContent?.trim() || '';
+    this.innerHTML = '';
+    this.#build(declarative);
+  }
+
+  disconnected() {
+    this.#tabs?.removeEventListener('change', this.#onChange);
+    this.#tabs = null;
+    this.#panes = {};
+  }
+
+  render() {
+    if (this.#tabs && this.#tabs.getAttribute('value') !== this.value) {
+      this.#tabs.setAttribute('value', this.value);
+    }
+  }
+
+  #onChange = (e) => {
+    if (e.detail?.value && e.detail.value !== this.value) {
+      this.value = e.detail.value;
+    }
+  };
+
+  #build(initialSurface) {
+    const catalogText = [...registry.entries()]
+      .map(([type, tag]) => `${type} → <${tag}>`)
+      .join('\n');
+
+    this.#tabs = document.createElement('tabs-ui');
+    this.#tabs.setAttribute('value', this.value || 'surface');
+    this.#tabs.addEventListener('change', this.#onChange);
+
+    this.#addPane('catalog', `Catalog (${registry.size})`, catalogText);
+    this.#addPane('surface', 'Surface', initialSurface || '{}', { language: 'json' });
+    this.#addPane('messages', 'Messages', '(no messages)');
+    this.#addPane('code', 'Code', '(empty)', { language: 'html', lineNumbers: true });
+
+    this.appendChild(this.#tabs);
+  }
+
+  #addPane(value, text, body, opts = {}) {
+    const tab = document.createElement('tab-ui');
+    tab.setAttribute('value', value);
+    tab.setAttribute('text', text);
+
+    const pane = document.createElement('code-ui');
+    if (opts.language) pane.setAttribute('language', opts.language);
+    if (opts.lineNumbers) pane.setAttribute('line-numbers', '');
+    pane.setAttribute('text', body);
+
+    tab.appendChild(pane);
+    this.#tabs.appendChild(tab);
+    this.#panes[value] = pane;
+  }
+
+  /**
+   * Refresh the surface state and message log.
+   * @param {object} schema — surface schema object (JSON-serializable)
+   * @param {object[]} messages — array of A2UI messages
+   */
+  update(schema, messages) {
+    if (this.#panes.surface) {
+      this.#panes.surface.setAttribute('text', JSON.stringify(schema, null, 2));
+    }
+    if (this.#panes.messages) {
+      const log = Array.isArray(messages) && messages.length
+        ? messages
+            .map((m, i) => `${i + 1}. ${m.type || m.messageType || 'unknown'}${m.surfaceId ? ` [${m.surfaceId}]` : ''}`)
+            .join('\n')
+        : '(no messages)';
+      this.#panes.messages.setAttribute('text', log);
+    }
+    const msgTab = this.#tabs?.querySelector('tab-ui[value="messages"]');
+    if (msgTab) {
+      const count = Array.isArray(messages) ? messages.length : 0;
+      msgTab.setAttribute('text', `Messages (${count})`);
+    }
+  }
+
+  /**
+   * Update the Code tab.
+   * @param {string} html — HTML string to display
+   */
+  setHTML(html) {
+    if (this.#panes.code) {
+      this.#panes.code.setAttribute('text', html || '(empty)');
+    }
+  }
+}
+
+customElements.define('inspector-ui', AdiaInspector);
+
+export { AdiaInspector };

package/components/inspector/inspector.yaml

@@ -0,0 +1,58 @@
+# 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: AdiaInspector
+tag: inspector-ui
+component: Inspector
+category: agent
+version: 1
+description: Developer tools pane for inspecting A2UI state.
+props:
+  value:
+    description: Active tab. One of 'catalog', 'surface', 'messages', 'code'.
+    type: string
+    default: surface
+  active:
+    description: Active tab (alias for `value`, accepts same enum).
+    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-inspector
+    description: Basic Inspector usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "Inspector"
+        }
+      ]
+keywords:
+  - inspector
+synonyms: {}
+related: []

package/components/kbd/kbd.a2ui.json

@@ -0,0 +1,96 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Kbd.json",
+  "title": "Kbd",
+  "description": "Keyboard key cap. Purely decorative, content from innerHTML.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Kbd"
+    },
+    "size": {
+      "description": "Size variant",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "events": {},
+    "examples": [
+      {
+        "description": "Card displaying a grid of keyboard shortcut rows with key badges and descriptions.",
+        "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      \"title\"\n    ]\n  },\n  {\n    \"id\": \"title\",\n    \"component\": \"Text\",\n    \"slot\": \"heading\",\n    \"textContent\": \"Keyboard Shortcuts\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"grid\"\n    ]\n  },\n  {\n    \"id\": \"grid\",\n    \"component\": \"Grid\",\n    \"columns\": 1,\n    \"gap\": \"2\",\n    \"children\": [\n      \"r1\",\n      \"r2\",\n      \"r3\",\n      \"r4\",\n      \"r5\",\n      \"r6\"\n    ]\n  },\n  {\n    \"id\": \"r1\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"k1\",\n      \"d1\"\n    ]\n  },\n  {\n    \"id\": \"k1\",\n    \"component\": \"Kbd\",\n    \"text\": \"Ctrl+K\"\n  },\n  {\n    \"id\": \"d1\",\n    \"component\": \"Text\",\n    \"textContent\": \"Open command palette\"\n  },\n  {\n    \"id\": \"r2\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"k2\",\n      \"d2\"\n    ]\n  },\n  {\n    \"id\": \"k2\",\n    \"component\": \"Kbd\",\n    \"text\": \"Ctrl+S\"\n  },\n  {\n    \"id\": \"d2\",\n    \"component\": \"Text\",\n    \"textContent\": \"Save current file\"\n  },\n  {\n    \"id\": \"r3\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"k3\",\n      \"d3\"\n    ]\n  },\n  {\n    \"id\": \"k3\",\n    \"component\": \"Kbd\",\n    \"text\": \"Ctrl+Z\"\n  },\n  {\n    \"id\": \"d3\",\n    \"component\": \"Text\",\n    \"textContent\": \"Undo last action\"\n  },\n  {\n    \"id\": \"r4\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"k4\",\n      \"d4\"\n    ]\n  },\n  {\n    \"id\": \"k4\",\n    \"component\": \"Kbd\",\n    \"text\": \"Ctrl+Shift+P\"\n  },\n  {\n    \"id\": \"d4\",\n    \"component\": \"Text\",\n    \"textContent\": \"Toggle preview\"\n  },\n  {\n    \"id\": \"r5\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"k5\",\n      \"d5\"\n    ]\n  },\n  {\n    \"id\": \"k5\",\n    \"component\": \"Kbd\",\n    \"text\": \"Ctrl+N\"\n  },\n  {\n    \"id\": \"d5\",\n    \"component\": \"Text\",\n    \"textContent\": \"Create new document\"\n  },\n  {\n    \"id\": \"r6\",\n    \"component\": \"Row\",\n    \"children\": [\n      \"k6\",\n      \"d6\"\n    ]\n  },\n  {\n    \"id\": \"k6\",\n    \"component\": \"Kbd\",\n    \"text\": \"Esc\"\n  },\n  {\n    \"id\": \"d6\",\n    \"component\": \"Text\",\n    \"textContent\": \"Close dialog\"\n  }\n]",
+        "name": "kbd-shortcuts"
+      }
+    ],
+    "keywords": [
+      "kbd",
+      "command",
+      "shortcut",
+      "hotkey",
+      "keyboard",
+      "keybinding"
+    ],
+    "name": "AdiaKbd",
+    "related": [
+      "grid"
+    ],
+    "slots": {
+      "default": {
+        "description": "Key label text"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "command": [
+        "command",
+        "palette",
+        "kbd",
+        "shortcut"
+      ],
+      "hotkey": [
+        "kbd",
+        "shortcut",
+        "command"
+      ],
+      "keybinding": [
+        "kbd",
+        "shortcut",
+        "command"
+      ],
+      "keyboard": [
+        "kbd",
+        "shortcut",
+        "command"
+      ],
+      "shortcut": [
+        "kbd",
+        "shortcut",
+        "command"
+      ]
+    },
+    "tag": "kbd-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/kbd/kbd.css

@@ -0,0 +1,62 @@
+@scope (kbd-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --kbd-bg:        var(--a-bg-muted);
+    --kbd-fg:        var(--a-fg);
+    --kbd-border:    var(--a-border-subtle);
+    --kbd-radius:    var(--a-radius-sm);
+    --kbd-font:      var(--a-font-family-code);
+
+    /* Size — defaults to md */
+    --kbd-font-size: var(--a-ui-sm);
+    --kbd-height:    1.25rem;
+    --kbd-min-width: 1.25rem;
+    --kbd-px:        var(--a-space-1);
+    --kbd-weight:    var(--a-weight-medium);
+
+    /* Size: sm */
+    --kbd-font-size-sm: var(--a-ui-tiny);
+    --kbd-height-sm:    1rem;
+    --kbd-min-width-sm: 1rem;
+
+    /* Size: lg */
+    --kbd-font-size-lg: var(--a-ui-sm);
+    --kbd-height-lg:    1.5rem;
+    --kbd-min-width-lg: 1.5rem;
+  }
+
+  :scope {
+    /* ── Base ── */
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: var(--kbd-min-width);
+    height: var(--kbd-height);
+    padding-inline: var(--kbd-px);
+    font-family: var(--kbd-font);
+    font-size: var(--kbd-font-size);
+    font-weight: var(--kbd-weight);
+    line-height: 1;
+    color: var(--kbd-fg);
+    background: var(--kbd-bg);
+    border: 1px solid var(--kbd-border);
+    border-bottom-width: 2px;
+    border-radius: var(--kbd-radius);
+    vertical-align: middle;
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  /* Sizes */
+  :scope[size="sm"] {
+    --kbd-font-size: var(--kbd-font-size-sm);
+    --kbd-height:    var(--kbd-height-sm);
+    --kbd-min-width: var(--kbd-min-width-sm);
+  }
+  :scope[size="lg"] {
+    --kbd-font-size: var(--kbd-font-size-lg);
+    --kbd-height:    var(--kbd-height-lg);
+    --kbd-min-width: var(--kbd-min-width-lg);
+  }
+}

package/components/kbd/kbd.js

@@ -0,0 +1,24 @@
+/**
+ * <kbd-ui>⌘</kbd-ui><kbd-ui>K</kbd-ui>
+ * <kbd-ui>Ctrl+C</kbd-ui>
+ *
+ * Keyboard key cap. Purely decorative — content comes from innerHTML.
+ * Em-relative sizing so it scales with surrounding text.
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaKbd extends AdiaElement {
+  static properties = {
+    size: { type: String, default: '', reflect: true },
+  };
+
+  static template = () => null;
+
+  connected() {
+    this.setAttribute('role', 'presentation');
+  }
+}
+customElements.define('kbd-ui', AdiaKbd);
+
+export { AdiaKbd };

package/components/kbd/kbd.yaml

@@ -0,0 +1,213 @@
+# 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: AdiaKbd
+tag: kbd-ui
+component: Kbd
+category: display
+version: 1
+description: Keyboard key cap. Purely decorative, content from innerHTML.
+props:
+  size:
+    description: Size variant
+    type: string
+    default: ""
+events: {}
+slots:
+  default:
+    description: Key label text
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: kbd-shortcuts
+    description: Card displaying a grid of keyboard shortcut rows with key badges and descriptions.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "sec"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "children": [
+            "title"
+          ]
+        },
+        {
+          "id": "title",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Keyboard Shortcuts"
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "grid"
+          ]
+        },
+        {
+          "id": "grid",
+          "component": "Grid",
+          "columns": 1,
+          "gap": "2",
+          "children": [
+            "r1",
+            "r2",
+            "r3",
+            "r4",
+            "r5",
+            "r6"
+          ]
+        },
+        {
+          "id": "r1",
+          "component": "Row",
+          "children": [
+            "k1",
+            "d1"
+          ]
+        },
+        {
+          "id": "k1",
+          "component": "Kbd",
+          "text": "Ctrl+K"
+        },
+        {
+          "id": "d1",
+          "component": "Text",
+          "textContent": "Open command palette"
+        },
+        {
+          "id": "r2",
+          "component": "Row",
+          "children": [
+            "k2",
+            "d2"
+          ]
+        },
+        {
+          "id": "k2",
+          "component": "Kbd",
+          "text": "Ctrl+S"
+        },
+        {
+          "id": "d2",
+          "component": "Text",
+          "textContent": "Save current file"
+        },
+        {
+          "id": "r3",
+          "component": "Row",
+          "children": [
+            "k3",
+            "d3"
+          ]
+        },
+        {
+          "id": "k3",
+          "component": "Kbd",
+          "text": "Ctrl+Z"
+        },
+        {
+          "id": "d3",
+          "component": "Text",
+          "textContent": "Undo last action"
+        },
+        {
+          "id": "r4",
+          "component": "Row",
+          "children": [
+            "k4",
+            "d4"
+          ]
+        },
+        {
+          "id": "k4",
+          "component": "Kbd",
+          "text": "Ctrl+Shift+P"
+        },
+        {
+          "id": "d4",
+          "component": "Text",
+          "textContent": "Toggle preview"
+        },
+        {
+          "id": "r5",
+          "component": "Row",
+          "children": [
+            "k5",
+            "d5"
+          ]
+        },
+        {
+          "id": "k5",
+          "component": "Kbd",
+          "text": "Ctrl+N"
+        },
+        {
+          "id": "d5",
+          "component": "Text",
+          "textContent": "Create new document"
+        },
+        {
+          "id": "r6",
+          "component": "Row",
+          "children": [
+            "k6",
+            "d6"
+          ]
+        },
+        {
+          "id": "k6",
+          "component": "Kbd",
+          "text": "Esc"
+        },
+        {
+          "id": "d6",
+          "component": "Text",
+          "textContent": "Close dialog"
+        }
+      ]
+keywords:
+  - kbd
+  - command
+  - shortcut
+  - hotkey
+  - keyboard
+  - keybinding
+synonyms:
+  command:
+    - command
+    - palette
+    - kbd
+    - shortcut
+  hotkey:
+    - kbd
+    - shortcut
+    - command
+  keybinding:
+    - kbd
+    - shortcut
+    - command
+  keyboard:
+    - kbd
+    - shortcut
+    - command
+  shortcut:
+    - kbd
+    - shortcut
+    - command
+related:
+  - grid