@adia-ai/web-components 0.0.11 → 0.0.13

package/README.md

@@ -5,9 +5,9 @@ elements**, a reactive core, a trait system, and a renderer that turns
 A2UI protocol messages into live DOM.
 
 > This package ships UI atoms only. The generation pipeline lives in
-> [`@adia-ai/gen-ui`](../gen-ui); the pattern corpus in
-> [`@adia-ai/gen-ui-training`](../gen-ui-training); the MCP server in
-> [`@adia-ai/gen-ui-mcp`](../gen-ui-mcp).
+> [`@adia-ai/a2ui-compose`](../a2ui/compose); the pattern corpus in
+> [`@adia-ai/a2ui-corpus`](../a2ui/corpus); the MCP server in
+> [`@adia-ai/a2ui-mcp`](../a2ui/mcp).
 
 ## Quick start
 
@@ -80,7 +80,7 @@ web-components/
 Build + dev utilities (including `build-a2ui-data.mjs`, `qa-training.mjs`,
 `a2ui-to-html.cjs`, `mcp-call.cjs`, `mcp-pipeline.cjs`, `screenshot.cjs`)
 live at the repo-root `scripts/` directory rather than inside this
-package — they span the monorepo (MCP server, gen-ui-training data,
+package — they span the monorepo (MCP server, a2ui-corpus data,
 component catalog) and aren't scoped to web-components alone.
 
 ## Component contract
@@ -165,7 +165,7 @@ output is robust to name drift.
 npm run build:components    # regenerate all .a2ui.json from YAML
 ```
 
-The build also writes `packages/gen-ui-training/catalog-a2ui_0_9.json` and
+The build also writes `packages/a2ui/corpus/catalog-a2ui_0_9.json` and
 `catalog-a2ui_0_9_rules.txt` — the flat-file catalog the MCP server and
 generation engine consume.
 
@@ -189,11 +189,11 @@ Each is a CSS-variable override; no class toggles, no re-imports.
 ## Dependency direction
 
 ```
-gen-ui  ──reads──>  gen-ui-training  ←─reads──  web-components
-gen-ui-mcp  ──reads──>  gen-ui, gen-ui-training
+a2ui-compose  ──reads──>  a2ui-corpus  ←─reads──  web-components
+a2ui-mcp      ──reads──>  a2ui-compose, a2ui-corpus
 ```
 
-Web-components never imports from gen-ui or gen-ui-mcp. The A2UI renderer
+Web-components never imports from a2ui-compose or a2ui-mcp. The A2UI renderer
 consumes a protocol, not a generator — anything that emits valid A2UI
 messages drives it.
 

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-editor.js

@@ -0,0 +1,103 @@
+/**
+ * code-editor — CodeMirror 6 runtime bundled for <code-ui>.
+ *
+ * Single file for the whole integration: CM core re-exports, the AdiaUI
+ * base theme + highlight style, the per-language lazy-load map, and the
+ * load-timeout helper. `code.js` does `import('./code-editor.js')` once
+ * per element mount.
+ *
+ * Styling contract: `EditorView.theme()` can't emit CSS custom properties
+ * (per CodeMirror docs), so the base theme below is structural-only.
+ * Every color, padding, border, and syntax-token style lives in
+ * `code.css` under `@scope (code-ui)`. See SPEC-CODE-EDITOR-001 §6.
+ *
+ * In Vite dev, the bare-specifier imports resolve through node_modules.
+ * In production, `scripts/build-site.mjs` runs esbuild with
+ * `splitting: true` on this file; each `languages[…]()` dynamic import
+ * becomes its own chunk, lazy-loaded on first use.
+ */
+
+import {
+  EditorState, EditorSelection, Compartment, StateEffect,
+} from '@codemirror/state';
+import {
+  EditorView,
+  lineNumbers, highlightActiveLine, highlightActiveLineGutter,
+  placeholder, drawSelection, keymap,
+} from '@codemirror/view';
+import {
+  defaultKeymap, history, historyKeymap, indentWithTab,
+} from '@codemirror/commands';
+import {
+  HighlightStyle, syntaxHighlighting, LanguageSupport, defaultHighlightStyle,
+} from '@codemirror/language';
+import { tags as t } from '@lezer/highlight';
+
+// ── Base theme (structural only — colors live in code.css) ───────────
+
+export const adiaBaseTheme = EditorView.theme({
+  '&':           { fontFamily: 'inherit', fontSize: 'inherit', color: 'inherit', backgroundColor: 'transparent' },
+  '.cm-content': { padding: '0', caretColor: 'inherit' },
+  '.cm-focused': { outline: 'none' },
+});
+
+// ── Syntax highlight (class-based so CSS owns the colors) ────────────
+
+export const adiaHighlightStyle = HighlightStyle.define([
+  { tag: [t.comment, t.lineComment, t.blockComment, t.docComment],                 class: 'tok-comment' },
+  { tag: [t.keyword, t.controlKeyword, t.modifier, t.operatorKeyword],             class: 'tok-keyword' },
+  { tag: [t.string, t.character, t.regexp, t.escape, t.special(t.string)],         class: 'tok-string' },
+  { tag: [t.number, t.integer, t.float],                                           class: 'tok-number' },
+  { tag: [t.bool, t.null, t.atom],                                                 class: 'tok-boolean' },
+  { tag: [t.operator, t.logicOperator, t.arithmeticOperator, t.compareOperator,
+          t.updateOperator, t.definitionOperator],                                 class: 'tok-operator' },
+  { tag: [t.punctuation, t.bracket, t.paren, t.brace, t.squareBracket,
+          t.angleBracket, t.separator],                                            class: 'tok-punctuation' },
+  { tag: [t.function(t.variableName), t.function(t.propertyName), t.macroName],    class: 'tok-function' },
+  { tag: [t.variableName, t.local(t.variableName), t.self],                        class: 'tok-variable' },
+  { tag: [t.typeName, t.className, t.namespace],                                   class: 'tok-type' },
+  { tag: [t.propertyName, t.labelName, t.definition(t.variableName)],              class: 'tok-property' },
+  { tag: [t.tagName, t.heading, t.contentSeparator],                               class: 'tok-tag' },
+  { tag: [t.attributeName, t.attributeValue],                                      class: 'tok-attribute' },
+  { tag: [t.url, t.link],                                                          class: 'tok-url' },
+  { tag: [t.invalid, t.deleted],                                                   class: 'tok-invalid' },
+]);
+
+// ── Per-language lazy loaders ────────────────────────────────────────
+
+export const languages = {
+  json:       () => import('@codemirror/lang-json').then((m) => ({ extension: m.json() })),
+  html:       () => import('@codemirror/lang-html').then((m) => ({ extension: m.html() })),
+  javascript: () => import('@codemirror/lang-javascript').then((m) => ({ extension: m.javascript({ jsx: false, typescript: false }) })),
+  css:        () => import('@codemirror/lang-css').then((m) => ({ extension: m.css() })),
+  markdown:   () => import('@codemirror/lang-markdown').then((m) => ({ extension: m.markdown() })),
+  yaml:       () => import('@codemirror/lang-yaml').then((m) => ({ extension: m.yaml() })),
+};
+
+// ── Load helper ──────────────────────────────────────────────────────
+
+/** 10s ceiling on any single dynamic import. Per SPEC-CODE-EDITOR-001 §7.4. */
+export const LOAD_TIMEOUT_MS = 10_000;
+
+export function importWithTimeout(loader, label) {
+  return Promise.race([
+    loader(),
+    new Promise((_, reject) =>
+      setTimeout(
+        () => reject(new Error(`code-editor: ${label} load timed out after ${LOAD_TIMEOUT_MS}ms`)),
+        LOAD_TIMEOUT_MS,
+      ),
+    ),
+  ]);
+}
+
+// ── Re-exports (so code.js gets everything from one import) ─────────
+
+export {
+  EditorState, EditorSelection, Compartment, StateEffect,
+  EditorView,
+  lineNumbers, highlightActiveLine, highlightActiveLineGutter,
+  placeholder, drawSelection, keymap,
+  defaultKeymap, history, historyKeymap, indentWithTab,
+  HighlightStyle, syntaxHighlighting, LanguageSupport, defaultHighlightStyle,
+};

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; }
 }