@adia-ai/web-components 0.0.11 → 0.0.12

package/components/calendar-picker/calendar-picker.css

@@ -19,7 +19,8 @@
     --calendar-picker-trigger-fg:             var(--a-ui-text-subtle);
     --calendar-picker-trigger-border:         var(--a-ui-border);
     --calendar-picker-trigger-border-hover:   var(--a-ui-border-hover);
-    --calendar-picker-trigger-border-focus:   var(--a-ui-border-active);
+    --calendar-picker-trigger-focus-ring:     var(--a-focus-ring);
+    --calendar-picker-trigger-focus-ring-invalid: var(--a-focus-ring-invalid);
     --calendar-picker-trigger-placeholder-fg: var(--a-ui-text-placeholder);
     --calendar-picker-trigger-fg-disabled:    var(--a-ui-text-disabled);
 
@@ -138,7 +139,12 @@
 
   :scope:focus-visible { outline: none; }
   :scope:focus-visible [slot="trigger"] {
-    border-color: var(--calendar-picker-trigger-border-focus);
+    /* Canonical ring via L3 token (see semantics.css FOCUS block). */
+    box-shadow: var(--calendar-picker-trigger-focus-ring);
+  }
+  :scope[aria-invalid="true"]:focus-visible [slot="trigger"],
+  :scope[error]:focus-visible [slot="trigger"] {
+    box-shadow: var(--calendar-picker-trigger-focus-ring-invalid);
   }
 
   [slot="display"] {

package/components/chat/chat-input.css

@@ -11,10 +11,18 @@
     /* ── Colors ── */
     --chat-input-bg:              var(--a-canvas-0);
     --chat-input-border:          var(--a-border-subtle);
-    --chat-input-border-focus:    var(--a-fg);
     --chat-input-caret-color:     var(--a-fg-subtle);
     --chat-input-border-disabled: var(--a-border-subtle);
 
+    /* Canonical focus ring — chat-input is a *nested-control host*.
+       See semantics.css FOCUS block + the nested-control pattern
+       note below. The inner textarea-ui suppresses its own ring
+       inside this @scope; the host paints the ring via
+       :focus-within so it wraps BOTH the editable area and the
+       toolbar as a single affordance. */
+    --chat-input-focus-ring:         var(--a-focus-ring);
+    --chat-input-focus-ring-invalid: var(--a-focus-ring-invalid);
+
     /* ── Image preview ── */
     --chat-input-image-size:      3rem;                /* 48px at d=1 */
     --chat-input-image-radius:    var(--a-radius-sm);
@@ -42,11 +50,30 @@
     border: 1px solid var(--chat-input-border);
     border-radius: var(--chat-input-radius);
     background: var(--chat-input-bg);
-    transition: border-color var(--chat-input-duration) var(--chat-input-easing);
   }
 
-  :scope:has(textarea-ui :focus) {
-    border-color: var(--chat-input-border-focus);
+  /* ── Nested-control focus pattern ────────────────────────────────────
+     chat-input-ui is a composite whose "primary surface" is the
+     combined textarea + toolbar, not the textarea alone. Focus should
+     wrap the whole composite, not just the inner input. Two rules
+     enforce that:
+
+       1. `:scope:focus-within` paints the canonical ring around the
+          composite via box-shadow (matches every other form control).
+       2. The inner textarea-ui's own focus treatments are suppressed
+          inside this @scope — the host owns the affordance.
+
+     The @scope block's containment is the signal: no data attribute
+     or explicit opt-in required. Any future composite that wants the
+     same pattern drops its inner control(s) into its @scope and
+     suppresses their focus rules with equivalent rules below.
+     ─────────────────────────────────────────────────────────────── */
+  :scope:focus-within {
+    box-shadow: var(--chat-input-focus-ring);
+  }
+  :scope[aria-invalid="true"]:focus-within,
+  :scope[error]:focus-within {
+    box-shadow: var(--chat-input-focus-ring-invalid);
   }
 
   /* Textarea: no border/bg of its own — container handles it. The
@@ -66,7 +93,16 @@
     padding: var(--chat-input-textarea-pt) var(--chat-input-textarea-px) 0;
   }
 
-  textarea-ui [slot="text"]:focus {
+  /* Suppress the nested textarea-ui's own focus ring — the host (this
+     scope) owns the affordance. Required because textarea.css's default
+     rule paints a ring via box-shadow; without this override, the
+     composite would show both the host's outer ring AND the inner
+     control's ring simultaneously.
+
+     textarea.css's rule is `:scope:not([disabled]) [slot="text"]:focus`
+     with specificity (0,4,0); we need to beat that — using the same
+     `:not([disabled])` guard on the host lifts ours to (0,4,1). */
+  :scope textarea-ui:not([disabled]) [slot="text"]:focus {
     border: none;
     box-shadow: none;
   }

package/components/code/code.css

@@ -24,6 +24,39 @@
     /* ── Transition ── */
     --code-duration:    var(--a-duration-fast);
     --code-easing:      var(--a-easing);
+
+    /* ── Editor chrome (CodeMirror 6) ──
+       Active only when `[language]` triggers the CM mount. Still safe
+       to emit in read-only mode; unused until `.cm-editor` is in the
+       DOM. See docs/specs/code-editor.md §6. */
+    --code-gutter-bg:        var(--a-bg-subtle);
+    --code-gutter-fg:        var(--a-fg-muted);
+    --code-active-line-bg:   color-mix(in oklch, var(--a-accent-muted) 40%, transparent);
+    --code-selection-bg:     color-mix(in oklch, var(--a-accent-muted) 60%, transparent);
+    --code-selection-match:  color-mix(in oklch, var(--a-accent-muted) 30%, transparent);
+    --code-cursor:           var(--a-accent-strong);
+    --code-focus-ring:       var(--a-focus-ring);
+
+    /* ── Syntax highlight tokens ──
+       Map Lezer/CodeMirror highlight tag names to AdiaUI semantic
+       tokens. Overridable per-instance by setting `--code-tok-*` on
+       any ancestor. See docs/specs/code-editor.md §6.3 for the tag →
+       class → role map. */
+    --code-tok-comment:      var(--a-fg-subtle);
+    --code-tok-keyword:      var(--a-accent-strong);
+    --code-tok-string:       var(--a-success-strong);
+    --code-tok-number:       var(--a-info-strong);
+    --code-tok-boolean:      var(--a-info-strong);
+    --code-tok-operator:     var(--a-fg);
+    --code-tok-punctuation:  var(--a-fg-muted);
+    --code-tok-function:     var(--a-brand-strong);
+    --code-tok-variable:     var(--a-fg);
+    --code-tok-type:         var(--a-warning-strong);
+    --code-tok-property:     var(--a-fg);
+    --code-tok-tag:          var(--a-accent-strong);
+    --code-tok-attribute:    var(--a-warning-strong);
+    --code-tok-url:          var(--a-info-strong);
+    --code-tok-invalid:      var(--a-danger-strong);
   }
 
   /* ── Block (default) ── */
@@ -132,4 +165,117 @@
     font-size: 0.9em;
     overflow: visible;
   }
+
+  /* ── Bare mode — no chrome ──
+     Strips border, background, radius, and padding. Header is hidden
+     via #stampBlock (it's never added in bare). Used by the A2UI Editor
+     and any pane-level context where <code-ui> is framed by a parent
+     surface and should not carry its own. Height flows from the parent
+     container, so CM's internal scroll handles overflow. */
+  :scope[bare] {
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    overflow: visible;
+    height: 100%;
+  }
+  :scope[bare] > pre {
+    padding: 0;
+    height: 100%;
+  }
+  :scope[bare] > [data-cm-mount] {
+    height: 100%;
+  }
+  :scope[bare] .cm-editor {
+    height: 100%;
+  }
+  :scope[bare] .cm-scroller {
+    padding: 0;
+  }
+  :scope[bare] .cm-gutters {
+    background: transparent;
+  }
+
+  /* ── CodeMirror mount ──
+     `<code-ui>` inserts `<div data-cm-mount>` in place of `<pre><code>`
+     when `[language]` triggers the CM lazy-load. Styles below apply to
+     the CodeMirror DOM that CM renders inside that mount.
+
+     Selector discipline: `.cm-*` classes are CodeMirror's; `.tok-*`
+     classes come from our `adiaHighlightStyle` (see core/_cm-theme.js).
+     CM's CSS-in-JS stylesheets load first + at lower specificity, so
+     these rules override without !important. */
+
+  > [data-cm-mount] {
+    display: block;
+    overflow: hidden;
+  }
+
+  :scope .cm-editor {
+    background: transparent;
+    color: var(--code-fg);
+    font-family: var(--code-font);
+    font-size: var(--code-font-size);
+    line-height: 1.5;
+  }
+
+  :scope .cm-scroller {
+    font-family: inherit;
+    line-height: inherit;
+    padding: var(--code-py) var(--code-px);
+  }
+
+  :scope .cm-content {
+    padding: 0;
+    caret-color: var(--code-cursor);
+  }
+
+  :scope .cm-editor.cm-focused {
+    outline: 2px solid var(--code-focus-ring);
+    outline-offset: -2px;
+  }
+
+  :scope .cm-gutters {
+    background: var(--code-gutter-bg);
+    color: var(--code-gutter-fg);
+    border-right: 1px solid var(--code-border);
+  }
+
+  :scope .cm-activeLine {
+    background: var(--code-active-line-bg);
+  }
+  :scope .cm-activeLineGutter {
+    background: var(--code-active-line-bg);
+    color: var(--code-fg);
+  }
+
+  :scope .cm-selectionBackground,
+  :scope ::selection {
+    background: var(--code-selection-bg);
+  }
+
+  :scope .cm-selectionMatch {
+    background: var(--code-selection-match);
+  }
+
+  :scope .cm-cursor {
+    border-left-color: var(--code-cursor);
+  }
+
+  /* Syntax highlight — one rule per token role (see core/_cm-theme.js) */
+  :scope .tok-comment     { color: var(--code-tok-comment); font-style: italic; }
+  :scope .tok-keyword     { color: var(--code-tok-keyword); font-weight: 500; }
+  :scope .tok-string      { color: var(--code-tok-string); }
+  :scope .tok-number      { color: var(--code-tok-number); }
+  :scope .tok-boolean     { color: var(--code-tok-boolean); }
+  :scope .tok-operator    { color: var(--code-tok-operator); }
+  :scope .tok-punctuation { color: var(--code-tok-punctuation); }
+  :scope .tok-function    { color: var(--code-tok-function); }
+  :scope .tok-variable    { color: var(--code-tok-variable); }
+  :scope .tok-type        { color: var(--code-tok-type); font-weight: 500; }
+  :scope .tok-property    { color: var(--code-tok-property); }
+  :scope .tok-tag         { color: var(--code-tok-tag); }
+  :scope .tok-attribute   { color: var(--code-tok-attribute); }
+  :scope .tok-url         { color: var(--code-tok-url); text-decoration: underline; }
+  :scope .tok-invalid     { color: var(--code-tok-invalid); text-decoration: wavy underline; }
 }

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('../../core/code-editor-bundle.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;
+        }
       }
     }
   }