@adia-ai/web-components 0.0.1

package/components/check/check.yaml

@@ -0,0 +1,109 @@
+# 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: AdiaCheck
+tag: check-ui
+component: Check
+category: layout
+version: 1
+description: Checkbox. The host IS the control.
+props:
+  name:
+    description: Form field name
+    type: string
+    default: ""
+  required:
+    description: Marks as required
+    type: boolean
+    default: false
+    reflect: true
+  checked:
+    description: Whether the checkbox is checked
+    type: boolean
+    default: false
+    reflect: true
+  disabled:
+    description: Disables the checkbox
+    type: boolean
+    default: false
+    reflect: true
+  hint:
+    description: Help text below the label
+    type: string
+    default: ""
+  indeterminate:
+    description: Indeterminate state (dash indicator). Cleared on toggle.
+    type: boolean
+    default: false
+  label:
+    description: Label text beside the checkbox
+    type: string
+    default: ""
+  value:
+    description: Form value (submitted as 'on' when checked)
+    type: string
+    default: ""
+events:
+  change:
+    description: Fired when checked state changes
+slots:
+  box:
+    description: Visual checkbox indicator
+  hint:
+    description: Help text below the label
+  label:
+    description: Label text beside the checkbox
+states:
+  - name: idle
+    description: Default, ready for interaction.
+  - name: disabled
+    description: Non-interactive; dimmed.
+    attribute: disabled
+traits: []
+tokens:
+  --check-box-background:
+    description: Unchecked background
+  --check-box-border-color:
+    description: Unchecked border color
+  --check-box-radius:
+    description: Checkbox border radius
+  --check-box-size:
+    description: Checkbox indicator size
+  --check-checked-background:
+    description: Checked/indeterminate background
+  --check-checked-border-color:
+    description: Checked/indeterminate border
+  --check-checked-foreground:
+    description: Checkmark/dash color
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-check
+    description: Basic Check usage
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "comp"
+          ]
+        },
+        {
+          "id": "comp",
+          "component": "Check",
+          "label": "Example Check"
+        }
+      ]
+keywords:
+  - check
+synonyms: {}
+related: []

package/components/code/code.a2ui.json

@@ -0,0 +1,153 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Code.json",
+  "title": "Code",
+  "description": "Inline or block code display with optional language label and copy button.",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Code"
+    },
+    "inline": {
+      "description": "Inline code (vs block)",
+      "type": "boolean",
+      "default": false
+    },
+    "language": {
+      "description": "Language hint for syntax highlighting",
+      "type": "string",
+      "default": ""
+    },
+    "lineNumbers": {
+      "description": "Show line number gutter alongside the code",
+      "type": "boolean",
+      "default": false
+    },
+    "text": {
+      "description": "Code text content",
+      "type": "string",
+      "default": ""
+    },
+    "wrap": {
+      "description": "Enable word wrapping",
+      "type": "boolean",
+      "default": false
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "events": {
+      "copy": {
+        "description": "Fired when text is copied to clipboard"
+      }
+    },
+    "examples": [
+      {
+        "description": "Code display block with syntax highlighting, language label, and a copy-to-clipboard button.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"body\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"slots\": {\n      \"heading\": \"Example\",\n      \"action\": \"copy-btn\"\n    },\n    \"children\": [\n      \"lang-badge\"\n    ]\n  },\n  {\n    \"id\": \"lang-badge\",\n    \"component\": \"Badge\",\n    \"attrs\": {\n      \"variant\": \"default\"\n    },\n    \"content\": \"TypeScript\"\n  },\n  {\n    \"id\": \"copy-btn\",\n    \"component\": \"Button\",\n    \"attrs\": {\n      \"variant\": \"ghost\",\n      \"icon\": \"copy\",\n      \"size\": \"sm\",\n      \"aria-label\": \"Copy code\"\n    }\n  },\n  {\n    \"id\": \"body\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"code\"\n    ]\n  },\n  {\n    \"id\": \"code\",\n    \"component\": \"Code\",\n    \"attrs\": {\n      \"language\": \"typescript\",\n      \"showLineNumbers\": true\n    },\n    \"content\": \"import { render } from '@a2ui/core';\\n\\nconst App = () => {\\n  return render({\\n    component: 'Card',\\n    children: ['Hello, world!']\\n  });\\n};\"\n  }\n]",
+        "name": "code-block"
+      }
+    ],
+    "keywords": [
+      "code",
+      "snippet",
+      "syntax",
+      "programming",
+      "ide",
+      "terminal",
+      "editor",
+      "document",
+      "api",
+      "developer"
+    ],
+    "name": "AdiaCode",
+    "related": [
+      "badge",
+      "button"
+    ],
+    "slots": {
+      "default": {
+        "description": "Raw text fallback when the text property is not set"
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "api": [
+        "api",
+        "key",
+        "table",
+        "code"
+      ],
+      "code": [
+        "code",
+        "block",
+        "markdown",
+        "editor"
+      ],
+      "developer": [
+        "api",
+        "key",
+        "code",
+        "block"
+      ],
+      "document": [
+        "markdown",
+        "editor",
+        "code"
+      ],
+      "editor": [
+        "markdown",
+        "editor",
+        "code",
+        "block"
+      ],
+      "ide": [
+        "code",
+        "block",
+        "markdown",
+        "editor",
+        "split"
+      ],
+      "programming": [
+        "code",
+        "block",
+        "markdown"
+      ],
+      "snippet": [
+        "code",
+        "block"
+      ],
+      "syntax": [
+        "code",
+        "block"
+      ],
+      "terminal": [
+        "code",
+        "block",
+        "command"
+      ]
+    },
+    "tag": "code-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/code/code.css

@@ -0,0 +1,133 @@
+@scope (code-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --code-px:          var(--a-space-3);
+    --code-py:          var(--a-space-2);
+    --code-radius:      var(--a-radius-md);
+    --code-radius-sm:   var(--a-radius-sm);
+    --code-copy-px:     var(--a-space-1);
+
+    /* ── Colors ── */
+    --code-bg:          var(--a-bg-muted);
+    --code-fg:          var(--a-fg);
+    --code-border:      var(--a-border-subtle);
+    --code-header-bg:   var(--a-bg-subtle);
+    --code-header-fg:   var(--a-fg-muted);
+    --code-copy-hover-bg: var(--a-bg-muted);
+    --code-copy-hover-fg: var(--a-fg);
+
+    /* ── Typography ── */
+    --code-font:        var(--a-font-family-code);
+    --code-font-size:   var(--a-ui-sm);
+    --code-header-font: var(--a-ui-sm);
+
+    /* ── Transition ── */
+    --code-duration:    var(--a-duration-fast);
+    --code-easing:      var(--a-easing);
+  }
+
+  /* ── Block (default) ── */
+  :scope {
+    box-sizing: border-box;
+    display: block;
+    border: 1px solid var(--code-border);
+    border-radius: var(--code-radius);
+    overflow: hidden;
+    background: var(--code-bg);
+    color: var(--code-fg);
+    font-family: var(--code-font);
+    font-size: var(--code-font-size);
+  }
+
+  /* Header — chrome band above the code block */
+  > header {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--code-py) var(--code-px);
+    background: var(--code-header-bg);
+    border-bottom: 1px solid var(--code-border);
+    font-size: var(--code-header-font);
+    color: var(--code-header-fg);
+  }
+
+  > header [slot="label"] {
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  /* Copy button — ghost style */
+  > header [slot="copy"] {
+    all: unset;
+    cursor: pointer;
+    font-size: var(--code-header-font);
+    color: var(--code-header-fg);
+    padding: 2px var(--code-copy-px);
+    border-radius: var(--code-radius-sm);
+    transition:
+      background var(--code-duration) var(--code-easing),
+      color var(--code-duration) var(--code-easing);
+  }
+  > header [slot="copy"]:hover {
+    background: var(--code-copy-hover-bg);
+    color: var(--code-copy-hover-fg);
+  }
+
+  /* Pre > Code — reset any ambient page styling (margins, borders,
+     radii, backgrounds) so the <code-ui> chrome is the single source
+     of visual framing. */
+  > pre {
+    margin: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    padding: var(--code-py) var(--code-px);
+    overflow-x: auto;
+    font-family: var(--code-font);
+    font-size: var(--code-font-size);
+    line-height: 1.5;
+    scrollbar-width: none;
+  }
+  > pre::-webkit-scrollbar {
+    display: none;
+  }
+
+  > pre > code {
+    margin: 0;
+    padding: 0;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+  }
+
+  /* Footer — optional chrome band below the code block
+     (line counts, byte size, language family, etc.) */
+  > footer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--code-py) var(--code-px);
+    background: var(--code-header-bg);
+    border-top: 1px solid var(--code-border);
+    font-size: var(--code-header-font);
+    color: var(--code-header-fg);
+  }
+
+  /* ── Inline ── */
+  :scope[inline] {
+    display: inline;
+    padding: 0.1em 0.4em;
+    background: var(--code-bg);
+    border: none;
+    border-radius: var(--code-radius-sm);
+    font-family: var(--code-font);
+    font-size: 0.9em;
+    overflow: visible;
+  }
+}

package/components/code/code.js

@@ -0,0 +1,114 @@
+/**
+ * <code-ui language="js">const x = 42;</code-ui>
+ * <code-ui language="css" inline>color: red</code-ui>
+ * <code-ui language="json" text='{ "hello": "world" }'></code-ui>
+ *
+ * Inline or block code display with optional language label and copy button.
+ * The body comes from (a) declarative children, or (b) the `text` attribute —
+ * the `text` path is reactive, so setting `code.setAttribute('text', newText)`
+ * updates the rendered code in place.
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+class AdiaCode extends AdiaElement {
+  static properties = {
+    language:     { type: String,  default: '', reflect: true },
+    inline:       { type: Boolean, default: false, reflect: true },
+    text:         { type: String,  default: '', reflect: true },
+    lineNumbers:  { type: Boolean, default: false, reflect: true, attribute: 'line-numbers' },
+  };
+
+  static template = () => null;
+
+  #copyBtn = null;
+  #copyTimer = null;
+
+  #onCopyClick = () => this.#copy();
+
+  connected() {
+    if (!this.inline && !this.querySelector(':scope > pre')) {
+      this.#stampBlock();
+    }
+    this.#copyBtn = this.querySelector(':scope > header [slot="copy"]');
+    if (this.#copyBtn) {
+      this.#copyBtn.addEventListener('click', this.#onCopyClick);
+    }
+  }
+
+  disconnected() {
+    if (this.#copyTimer != null) {
+      clearTimeout(this.#copyTimer);
+      this.#copyTimer = null;
+    }
+    if (this.#copyBtn) {
+      this.#copyBtn.removeEventListener('click', this.#onCopyClick);
+      this.#copyBtn = null;
+    }
+  }
+
+  #stampBlock() {
+    // Prefer the `text` attribute when present; otherwise read the authored
+    // textContent. Either way, the block is rebuilt from semantic elements
+    // so whitespace in source HTML doesn't leak into the rendered <code>.
+    const raw = (this.text || this.textContent || '').trim();
+    this.textContent = '';
+
+    // Header — semantic <header> with labelled children
+    const header = document.createElement('header');
+
+    const label = document.createElement('span');
+    label.setAttribute('slot', 'label');
+    label.textContent = this.language || 'code';
+    header.appendChild(label);
+
+    const copyBtn = document.createElement('div');
+    copyBtn.setAttribute('role', 'button');
+    copyBtn.setAttribute('tabindex', '0');
+    copyBtn.setAttribute('slot', 'copy');
+    copyBtn.textContent = 'Copy';
+    header.appendChild(copyBtn);
+
+    // Pre > Code — direct semantic elements, no slot attr
+    const pre = document.createElement('pre');
+    const code = document.createElement('code');
+    code.textContent = raw;
+    pre.appendChild(code);
+
+    this.appendChild(header);
+    this.appendChild(pre);
+  }
+
+  #copy() {
+    const code = this.querySelector(':scope > pre > code');
+    if (!code) return;
+    navigator.clipboard.writeText(code.textContent).then(() => {
+      const btn = this.querySelector(':scope > header [slot="copy"]');
+      if (!btn) return;
+      const prev = btn.textContent;
+      btn.textContent = 'Copied!';
+      if (this.#copyTimer != null) clearTimeout(this.#copyTimer);
+      this.#copyTimer = setTimeout(() => {
+        this.#copyTimer = null;
+        btn.textContent = prev;
+      }, 1500);
+    });
+  }
+
+  render() {
+    const label = this.querySelector(':scope > header [slot="label"]');
+    if (label && this.language) label.textContent = this.language;
+
+    // Keep the rendered code in sync with the reactive `text` property so
+    // callers can drive updates via setAttribute('text', ...).
+    if (!this.inline) {
+      const code = this.querySelector(':scope > pre > code');
+      if (code && code.textContent !== this.text && this.text !== '') {
+        code.textContent = this.text;
+      }
+    }
+  }
+}
+customElements.define('code-ui', AdiaCode);
+
+export { AdiaCode };

package/components/code/code.yaml

@@ -0,0 +1,163 @@
+# 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: AdiaCode
+tag: code-ui
+component: Code
+category: display
+version: 1
+description: Inline or block code display with optional language label and copy button.
+props:
+  inline:
+    description: Inline code (vs block)
+    type: boolean
+    default: false
+  language:
+    description: Language hint for syntax highlighting
+    type: string
+    default: ""
+  lineNumbers:
+    description: Show line number gutter alongside the code
+    type: boolean
+    default: false
+    attribute: line-numbers
+  text:
+    description: Code text content
+    type: string
+    default: ""
+  wrap:
+    description: Enable word wrapping
+    type: boolean
+    default: false
+events:
+  copy:
+    description: Fired when text is copied to clipboard
+slots:
+  default:
+    description: Raw text fallback when the text property is not set
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: code-block
+    description: Code display block with syntax highlighting, language label, and a copy-to-clipboard button.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "hdr",
+            "body"
+          ]
+        },
+        {
+          "id": "hdr",
+          "component": "Header",
+          "slots": {
+            "heading": "Example",
+            "action": "copy-btn"
+          },
+          "children": [
+            "lang-badge"
+          ]
+        },
+        {
+          "id": "lang-badge",
+          "component": "Badge",
+          "attrs": {
+            "variant": "default"
+          },
+          "content": "TypeScript"
+        },
+        {
+          "id": "copy-btn",
+          "component": "Button",
+          "attrs": {
+            "variant": "ghost",
+            "icon": "copy",
+            "size": "sm",
+            "aria-label": "Copy code"
+          }
+        },
+        {
+          "id": "body",
+          "component": "Section",
+          "children": [
+            "code"
+          ]
+        },
+        {
+          "id": "code",
+          "component": "Code",
+          "attrs": {
+            "language": "typescript",
+            "showLineNumbers": true
+          },
+          "content": "import { render } from '@a2ui/core';\n\nconst App = () => {\n  return render({\n    component: 'Card',\n    children: ['Hello, world!']\n  });\n};"
+        }
+      ]
+keywords:
+  - code
+  - snippet
+  - syntax
+  - programming
+  - ide
+  - terminal
+  - editor
+  - document
+  - api
+  - developer
+synonyms:
+  api:
+    - api
+    - key
+    - table
+    - code
+  code:
+    - code
+    - block
+    - markdown
+    - editor
+  developer:
+    - api
+    - key
+    - code
+    - block
+  document:
+    - markdown
+    - editor
+    - code
+  editor:
+    - markdown
+    - editor
+    - code
+    - block
+  ide:
+    - code
+    - block
+    - markdown
+    - editor
+    - split
+  programming:
+    - code
+    - block
+    - markdown
+  snippet:
+    - code
+    - block
+  syntax:
+    - code
+    - block
+  terminal:
+    - code
+    - block
+    - command
+related:
+  - badge
+  - button