@adia-ai/web-components 0.0.11 → 0.0.13

package/components/code/code.js

@@ -3,30 +3,61 @@
  * <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.
+ * 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.
+ *
+ * When `[language]` names a supported language (see SUPPORTED_LANGUAGES),
+ * CodeMirror 6 is lazy-loaded and mounted in place of `<pre><code>` for
+ * syntax-highlighted read-only rendering. Phase 1 ships read-only only;
+ * `[editable]` lands in phase 2 (see docs/specs/code-editor.md §12).
  */
 
 import { AdiaElement } from '../../core/element.js';
 
+const SUPPORTED_LANGUAGES = new Set([
+  'json', 'html', 'javascript', 'js', 'css', 'markdown', 'md', 'yaml', 'yml',
+]);
+
+// Normalize common language aliases to their canonical pack name.
+const LANGUAGE_ALIAS = {
+  js: 'javascript',
+  md: 'markdown',
+  yml: 'yaml',
+};
+
+function canonicalLanguage(name) {
+  if (!name) return '';
+  const lower = String(name).toLowerCase();
+  return LANGUAGE_ALIAS[lower] ?? lower;
+}
+
 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' },
+    editable:     { type: Boolean, default: false, reflect: true },
+    bare:         { type: Boolean, default: false, reflect: true },
+    placeholder:  { type: String,  default: '', reflect: true },
   };
 
   static template = () => null;
 
   #copyBtn = null;
   #copyTimer = null;
+  #cmView = null;               // EditorView instance when mounted
+  #mountGen = 0;                // bumps on every connect/disconnect — guards against stale mounts
+  #pendingMount = false;        // true while bundle/lang pack is loading
+  #focusSnapshot = null;        // doc text captured on focus; used to diff for `change` event
 
   #onCopyClick = () => this.#copy();
 
   connected() {
+    this.#mountGen += 1;
+
     if (!this.inline && !this.querySelector(':scope > pre')) {
       this.#stampBlock();
     }
@@ -34,9 +65,20 @@ class AdiaCode extends AdiaElement {
     if (this.#copyBtn) {
       this.#copyBtn.addEventListener('click', this.#onCopyClick);
     }
+
+    // Mount CodeMirror when the language is supported OR the element is
+    // editable (editable plain-text is still useful). Inline instances
+    // stay on the static <code> path. Mount failures leave the static
+    // fallback in place — it's already visible.
+    const lang = canonicalLanguage(this.language);
+    const shouldMount = !this.inline && (SUPPORTED_LANGUAGES.has(lang) || this.editable);
+    if (shouldMount) {
+      this.#mountEditor();
+    }
   }
 
   disconnected() {
+    this.#mountGen += 1;     // invalidate any in-flight mounts
     if (this.#copyTimer != null) {
       clearTimeout(this.#copyTimer);
       this.#copyTimer = null;
@@ -45,6 +87,10 @@ class AdiaCode extends AdiaElement {
       this.#copyBtn.removeEventListener('click', this.#onCopyClick);
       this.#copyBtn = null;
     }
+    if (this.#cmView) {
+      this.#cmView.destroy();
+      this.#cmView = null;
+    }
   }
 
   #stampBlock() {
@@ -54,20 +100,26 @@ class AdiaCode extends AdiaElement {
     const raw = (this.text || this.textContent || '').trim();
     this.textContent = '';
 
-    // Header — semantic <header> with labelled children
-    const header = document.createElement('header');
+    // Header — omitted in [bare] mode. Consumers that need zero chrome
+    // (the A2UI Editor's Schema + DOM views, an embedded editable surface
+    // in a pane, etc.) set [bare] to opt out.
+    if (!this.bare) {
+      const header = document.createElement('header');
 
-    const label = document.createElement('span');
-    label.setAttribute('slot', 'label');
-    label.textContent = this.language || 'code';
-    header.appendChild(label);
+      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);
+      const copyBtn = document.createElement('div');
+      copyBtn.setAttribute('role', 'button');
+      copyBtn.setAttribute('tabindex', '0');
+      copyBtn.setAttribute('slot', 'copy');
+      copyBtn.textContent = 'Copy';
+      header.appendChild(copyBtn);
+
+      this.appendChild(header);
+    }
 
     // Pre > Code — direct semantic elements, no slot attr
     const pre = document.createElement('pre');
@@ -75,14 +127,147 @@ class AdiaCode extends AdiaElement {
     code.textContent = raw;
     pre.appendChild(code);
 
-    this.appendChild(header);
     this.appendChild(pre);
   }
 
-  #copy() {
+  async #mountEditor() {
+    if (this.#pendingMount || this.#cmView) return;
+    const gen = this.#mountGen;
+    const lang = canonicalLanguage(this.language);
+    this.#pendingMount = true;
+
+    try {
+      const bundle = await import('./code-editor.js');
+
+      // Load the language pack with a timeout. If it fails, continue with
+      // core-only (editor still renders; no syntax highlight). Emit an
+      // event so consumers can observe.
+      let extension = null;
+      try {
+        const mod = await bundle.importWithTimeout(bundle.languages[lang], `lang-${lang}`);
+        extension = mod?.extension ?? null;
+      } catch (err) {
+        this.dispatchEvent(new CustomEvent('language-load-error', {
+          bubbles: true, detail: { phase: 'language', language: lang, error: err },
+        }));
+      }
+
+      // Stale — component was disconnected (or reconnected elsewhere) while
+      // we were loading. Discard.
+      if (gen !== this.#mountGen || !this.isConnected) return;
+
+      this.#attachEditor(bundle, extension);
+    } catch (err) {
+      this.dispatchEvent(new CustomEvent('language-load-error', {
+        bubbles: true, detail: { phase: 'core', error: err },
+      }));
+      // Fallback <pre><code> stays visible — nothing to revert.
+      console.warn('[code-ui] CodeMirror failed to load; staying on static fallback.', err);
+    } finally {
+      this.#pendingMount = false;
+    }
+  }
+
+  #attachEditor(bundle, languageExtension) {
+    const {
+      EditorState, EditorView,
+      lineNumbers,
+      placeholder,
+      syntaxHighlighting,
+      history, historyKeymap, defaultKeymap, indentWithTab,
+      keymap,
+      adiaBaseTheme, adiaHighlightStyle,
+    } = bundle;
+
+    // Replace <pre><code> with a mount target. Keep <header> where it is.
+    const pre = this.querySelector(':scope > pre');
+    const prior = pre ? pre.querySelector('code')?.textContent ?? '' : '';
+    const initial = this.text || prior || '';
+
+    const mount = document.createElement('div');
+    mount.setAttribute('data-cm-mount', '');
+    if (pre) pre.replaceWith(mount);
+    else this.appendChild(mount);
+
+    const extensions = [
+      adiaBaseTheme,
+      syntaxHighlighting(adiaHighlightStyle),
+    ];
+
+    if (this.editable) {
+      extensions.push(
+        history(),
+        keymap.of([
+          { key: 'Mod-s', run: (v) => { this.#emitSave(v); return true; } },
+          ...defaultKeymap,
+          ...historyKeymap,
+          indentWithTab,
+        ]),
+        EditorView.updateListener.of((update) => {
+          if (!update.docChanged) return;
+          this.dispatchEvent(new CustomEvent('input', {
+            bubbles: true,
+            detail: { value: update.state.doc.toString() },
+          }));
+        }),
+        EditorView.domEventHandlers({
+          focus: (_, view) => {
+            this.#focusSnapshot = view.state.doc.toString();
+            return false;
+          },
+          blur: (_, view) => {
+            const current = view.state.doc.toString();
+            if (this.#focusSnapshot !== null && current !== this.#focusSnapshot) {
+              this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                detail: { value: current },
+              }));
+            }
+            this.#focusSnapshot = null;
+            return false;
+          },
+        }),
+      );
+    } else {
+      extensions.push(EditorView.editable.of(false));
+      extensions.push(EditorState.readOnly.of(true));
+    }
+
+    if (languageExtension) extensions.push(languageExtension);
+    if (this.lineNumbers) extensions.push(lineNumbers());
+    if (this.placeholder) extensions.push(placeholder(this.placeholder));
+
+    this.#cmView = new EditorView({
+      parent: mount,
+      state: EditorState.create({ doc: initial, extensions }),
+    });
+  }
+
+  #emitSave(view) {
+    this.dispatchEvent(new CustomEvent('save', {
+      bubbles: true, cancelable: true,
+      detail: { value: view.state.doc.toString() },
+    }));
+  }
+
+  /** Live buffer. Reads from CodeMirror when mounted, else the static <code>. */
+  get value() {
+    if (this.#cmView) return this.#cmView.state.doc.toString();
     const code = this.querySelector(':scope > pre > code');
-    if (!code) return;
-    navigator.clipboard.writeText(code.textContent).then(() => {
+    return code?.textContent ?? this.text ?? '';
+  }
+
+  /** Convenience setter — identical to `text` but matches the form-control idiom. */
+  set value(v) {
+    this.text = String(v ?? '');
+  }
+
+  #copy() {
+    const text = this.#cmView
+      ? this.#cmView.state.doc.toString()
+      : (this.querySelector(':scope > pre > code')?.textContent ?? '');
+    if (!text) return;
+    navigator.clipboard.writeText(text).then(() => {
       const btn = this.querySelector(':scope > header [slot="copy"]');
       if (!btn) return;
       const prev = btn.textContent;
@@ -101,10 +286,22 @@ class AdiaCode extends AdiaElement {
 
     // 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;
+    if (!this.inline && this.text !== '') {
+      if (this.#cmView) {
+        // Don't clobber in-flight edits while the editor has keyboard focus.
+        // Callers that want to force-replace can blur the editor first.
+        if (this.editable && this.#cmView.hasFocus) return;
+        const current = this.#cmView.state.doc.toString();
+        if (current !== this.text) {
+          this.#cmView.dispatch({
+            changes: { from: 0, to: current.length, insert: this.text },
+          });
+        }
+      } else {
+        const code = this.querySelector(':scope > pre > code');
+        if (code && code.textContent !== this.text) {
+          code.textContent = this.text;
+        }
       }
     }
   }

package/components/field/field.a2ui.json

@@ -0,0 +1,149 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Field.json",
+  "title": "Field",
+  "description": "Labeled field wrapper. Composes a <label for=\"…\"> with a form control (input-ui, select-ui, textarea-ui, etc.) placed in the default slot, plus optional [slot=\"trailing\"] and [slot=\"action\"] regions. Auto-mints an id on the slotted control when missing so clicking the label focuses the control — an accessibility upgrade over setting label=\"…\" on the control directly, which has no [for] binding. Two layouts — stacked (default) and inline (the `inline` mode attribute collapses everything to a single row).",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "required": {
+      "description": "Renders a \"*\" marker on the label. Does not itself enforce validation — the slotted control's own `required` attr does that; this is a visual signal only.",
+      "type": "boolean",
+      "default": false
+    },
+    "component": {
+      "const": "Field"
+    },
+    "error": {
+      "description": "Validation error message rendered below the control in danger style. Takes precedence over `hint` in the same row, and carries role=\"alert\" so screen readers announce changes.",
+      "type": "string",
+      "default": ""
+    },
+    "hint": {
+      "description": "Help text rendered below the control in caption style. Wired into the slotted control's aria-describedby so screen readers announce it. Suppressed when `error` is set.",
+      "type": "string",
+      "default": ""
+    },
+    "inline": {
+      "description": "Lay out label, trailing, control, and action on a single row instead of the stacked default (mode attribute — changes grid geometry, not tokens). Hint/error still render on their own row below.",
+      "type": "boolean",
+      "default": false
+    },
+    "label": {
+      "description": "Label text rendered in the label row.",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "form",
+    "events": {},
+    "examples": [
+      {
+        "description": "A simple stacked email field with a trailing \"Required\" hint and a clear-button action adjacent to the input.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Field\",\n    \"label\": \"Email\",\n    \"children\": [\"email\", \"hint\", \"clear\"]\n  },\n  { \"id\": \"email\", \"component\": \"Input\", \"type\": \"email\", \"value\": \"you@example.com\" },\n  { \"id\": \"hint\",  \"component\": \"Text\",  \"slot\": \"trailing\", \"text\": \"Required\" },\n  { \"id\": \"clear\", \"component\": \"Button\", \"slot\": \"action\", \"icon\": \"x\", \"variant\": \"ghost\" }\n]",
+        "name": "stacked-email-field"
+      },
+      {
+        "description": "An inline search field — label beside the input, with a trailing keyboard-shortcut hint.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Field\",\n    \"label\": \"Search\",\n    \"inline\": true,\n    \"children\": [\"q\", \"kbd\"]\n  },\n  { \"id\": \"q\",   \"component\": \"Input\", \"type\": \"search\", \"placeholder\": \"Type…\" },\n  { \"id\": \"kbd\", \"component\": \"Kbd\",   \"slot\": \"trailing\", \"text\": \"⌘K\" }\n]",
+        "name": "inline-search-field"
+      }
+    ],
+    "keywords": [
+      "field",
+      "form",
+      "label",
+      "input",
+      "wrapper"
+    ],
+    "name": "AdiaField",
+    "related": [
+      "input",
+      "select",
+      "textarea",
+      "check",
+      "radio",
+      "switch",
+      "slider"
+    ],
+    "slots": {
+      "default": {
+        "description": "The form control — input-ui, select-ui, textarea-ui, check-ui, switch-ui, radio-ui, slider-ui, etc. Auto-id'd for the label's [for] binding."
+      },
+      "action": {
+        "description": "Button adjacent to the control for inline actions (clear, reset, help popover)."
+      },
+      "trailing": {
+        "description": "Secondary text or badge aligned with the label in the stacked layout (right-aligned) or between label and control in the inline layout."
+      }
+    },
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {
+      "form": [
+        "field",
+        "label",
+        "input"
+      ],
+      "label": [
+        "field",
+        "form"
+      ]
+    },
+    "tag": "field-ui",
+    "tokens": {
+      "--field-error-color": {
+        "description": "Error text color (also drives the required-marker color)."
+      },
+      "--field-error-size": {
+        "description": "Error text size."
+      },
+      "--field-gap": {
+        "description": "Gap between rows/cells of the field grid."
+      },
+      "--field-hint-color": {
+        "description": "Hint text color."
+      },
+      "--field-hint-size": {
+        "description": "Hint text size."
+      },
+      "--field-label-color": {
+        "description": "Label foreground color."
+      },
+      "--field-label-size": {
+        "description": "Label font size."
+      },
+      "--field-label-weight": {
+        "description": "Label font weight."
+      },
+      "--field-required-color": {
+        "description": "Color of the `*` required marker on the label."
+      },
+      "--field-trailing-color": {
+        "description": "Trailing text color."
+      },
+      "--field-trailing-size": {
+        "description": "Trailing text size."
+      }
+    },
+    "traits": [],
+    "version": 1
+  }
+}

package/components/field/field.css

@@ -0,0 +1,111 @@
+@scope (field-ui) {
+  :where(:scope) {
+    /* ── Tokens ── */
+    --field-gap:             var(--a-space-2);
+    --field-label-color:     var(--a-fg);
+    --field-label-size:      var(--a-ui-sm);
+    --field-label-weight:    var(--a-weight-medium);
+    --field-required-color:  var(--a-danger);
+    --field-trailing-color:  var(--a-fg-subtle);
+    --field-trailing-size:   var(--a-ui-tiny);
+    --field-hint-color:      var(--a-fg-muted);
+    --field-hint-size:       var(--a-ui-tiny);
+    --field-error-color:     var(--a-danger);
+    --field-error-size:      var(--a-ui-tiny);
+  }
+
+  /* ── Base — stacked: three flex rows stacked vertically.
+       Each row is its own flex container so `trailing` and `action`
+       size independently (the previous single-grid shared column 2
+       across rows and made them co-sized). ── */
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    gap: var(--field-gap);
+  }
+
+  :scope > [data-row] {
+    display: flex;
+    align-items: center;
+    gap: var(--field-gap);
+    min-width: 0;
+  }
+
+  /* label-row — label grows, trailing auto-sizes and right-aligns. */
+  :scope > [data-row="label"] > [data-field-label] {
+    flex: 1 1 auto;
+    color: var(--field-label-color);
+    font-size: var(--field-label-size);
+    font-weight: var(--field-label-weight);
+    cursor: pointer;
+    min-width: 0;
+  }
+  :scope > [data-row="label"] > [data-field-label] > [data-field-required] {
+    color: var(--field-required-color);
+    margin-inline-start: 0.15em;
+    font-weight: var(--a-weight-bold);
+  }
+  :scope > [data-row="label"] > [slot="trailing"] {
+    flex: 0 0 auto;
+    color: var(--field-trailing-color);
+    font-size: var(--field-trailing-size);
+  }
+
+  /* control-row — control grows, action auto-sizes. */
+  :scope > [data-row="control"] > :not([slot="action"]) {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+  :scope > [data-row="control"] > [slot="action"] {
+    flex: 0 0 auto;
+  }
+
+  /* message-row — hint or error; collapsed via [hidden] when both empty. */
+  :scope > [data-row="message"] > [data-field-hint] {
+    color: var(--field-hint-color);
+    font-size: var(--field-hint-size);
+    line-height: 1.3;
+  }
+  :scope > [data-row="message"] > [data-field-error] {
+    color: var(--field-error-color);
+    font-size: var(--field-error-size);
+    line-height: 1.3;
+    font-weight: var(--a-weight-medium);
+  }
+
+  /* Hide the whole label-row when there's no label AND no trailing —
+     prevents an empty row stealing vertical gap. */
+  :scope:not([label]) > [data-row="label"] > [data-field-label] {
+    display: none;
+  }
+  :scope:not([label]) > [data-row="label"]:not(:has(> [slot="trailing"])) {
+    display: none;
+  }
+
+  /* ── Mode: inline — flatten label-row + control-row into a single
+       grid row. `display: contents` promotes the row wrappers' children
+       directly to :scope's grid, keeping per-cell independence. The
+       message-row stays a block row below. ── */
+  :scope[inline] {
+    display: grid;
+    grid-template-columns: auto auto 1fr auto;
+    grid-template-rows: auto auto;
+    gap: var(--field-gap);
+    align-items: center;
+  }
+  :scope[inline] > [data-row="label"],
+  :scope[inline] > [data-row="control"] {
+    display: contents;
+  }
+  :scope[inline] > [data-row="label"] > [data-field-label]        { grid-column: 1; grid-row: 1; justify-self: start; }
+  :scope[inline] > [data-row="label"] > [slot="trailing"]         { grid-column: 2; grid-row: 1; justify-self: start; }
+  :scope[inline] > [data-row="control"] > :not([slot="action"])   { grid-column: 3; grid-row: 1; }
+  :scope[inline] > [data-row="control"] > [slot="action"]         { grid-column: 4; grid-row: 1; justify-self: end; }
+  :scope[inline] > [data-row="message"] {
+    grid-column: 1 / -1;
+    grid-row: 2;
+    display: flex;
+    gap: var(--field-gap);
+  }
+}