@adia-ai/web-components 0.0.12 → 0.0.14

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
 
@@ -15,7 +15,7 @@ A2UI protocol messages into live DOM.
 <link rel="stylesheet" href="node_modules/@adia-ai/web-components/index.css" />
 
 <script type="module">
-  import '@adia-ai/web-components';   // registers every *-n tag
+  import '@adia-ai/web-components';   // registers every *-ui tag
 </script>
 
 <card-ui>
@@ -59,7 +59,7 @@ web-components/
 │   │                                        with @adia-ai/a2ui-utils)
 │   └── index.js                           — registers all patterns
 │
-├── traits/         — 40 composable behaviors via defineTrait()
+├── traits/         — 42 composable behaviors via defineTrait()
 │                     (pressable, focusTrap, confetti, resizable, …)
 │
 ├── a2ui/           — deprecation shim for one release
@@ -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/card/card.css

@@ -323,6 +323,35 @@
     margin: 0;
   }
 
+  /* Footer heading — trend-stat line (symmetric with header's [slot="heading"]).
+     Used for chart trend-footer patterns like "Trending up by 5.2% this month".
+     Paired with [slot="description"] for a "Jan – Mar 2024" period caption. */
+  > footer > [slot="heading"] {
+    font-size: var(--card-font-size);
+    font-weight: var(--a-weight-medium);
+    color: var(--card-heading-fg);
+    line-height: 1.3;
+    margin: 0;
+    flex: 0 0 auto;
+  }
+
+  /* Footer with heading + description = column stack, heading on top. The
+     existing flex-row layout becomes a flex-column when a heading is present,
+     so the trend line and period caption stack naturally. */
+  > footer:has(> [slot="heading"]) {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--a-space-0-5);
+  }
+
+  > footer:has(> [slot="heading"])[justify="end"] {
+    align-items: flex-end;
+  }
+
+  > footer:has(> [slot="heading"])[justify="center"] {
+    align-items: center;
+  }
+
   > footer [slot="action"] {
     margin-inline-start: auto;
     display: flex;

package/components/chart/chart.a2ui.json

@@ -2,7 +2,7 @@
   "$schema": "https://json-schema.org/draft/2020-12/schema",
   "$id": "https://adiaui.dev/a2ui/v0_9/components/Chart.json",
   "title": "Chart",
-  "description": "Declarative SVG chart supporting bar, line, pie, donut, radar, sparkline, stacked-bar, grouped-bar, and multi-line types.",
+  "description": "Declarative SVG chart supporting 18 types: bar, line, pie, donut, radar, sparkline, segments, area, scatter, radial-bar, gauge, stacked-bar, grouped-bar, multi-line, funnel, treemap, sankey, and composed.",
   "type": "object",
   "allOf": [
     {
@@ -14,7 +14,7 @@
   ],
   "properties": {
     "type": {
-      "description": "Chart type. Only 'bar' is built-in.",
+      "description": "Chart type. All 18 enum values have dedicated render paths in chart.js.",
       "type": "string",
       "enum": [
         "bar",
@@ -23,14 +23,23 @@
         "donut",
         "radar",
         "sparkline",
+        "segments",
+        "area",
+        "scatter",
+        "radial-bar",
+        "gauge",
         "stacked-bar",
         "grouped-bar",
-        "multi-line"
+        "multi-line",
+        "funnel",
+        "treemap",
+        "sankey",
+        "composed"
       ],
       "default": "bar"
     },
     "aspect": {
-      "description": "Aspect ratio",
+      "description": "DEPRECATED (OD-CHART-02). Parents should size the chart directly (width/height on the enclosing card or container). Still honored for back-compat; emits a one-shot console.warn per instance when set.",
       "type": "string",
       "enum": [
         "std",
@@ -55,8 +64,19 @@
     "component": {
       "const": "Chart"
     },
+    "format": {
+      "description": "Number-format mode applied to axis labels + value overlays + donut total + gauge value + treemap value + funnel value + internal tooltip. `abbr` is the legacy 1.2K / 3M format; `decimal` fixes 2 decimals; `currency` prefixes via `--chart-currency-prefix` token (default \"$\"); `percent` multiplies × 100 and adds a % suffix.",
+      "type": "string",
+      "enum": [
+        "abbr",
+        "decimal",
+        "currency",
+        "percent"
+      ],
+      "default": "abbr"
+    },
     "heading": {
-      "description": "Chart heading text rendered above the canvas.",
+      "description": "DEPRECATED (OD-CHART-02). Place chart titles in an enclosing card-ui's `<header><span slot=\"heading\">...</span></header>` instead. Still honored for back-compat; emits a one-shot console.warn per instance when set. Used as the chart's `aria-label` when no explicit label is provided.",
       "type": "string",
       "default": ""
     },
@@ -113,7 +133,17 @@
   "x-adiaui": {
     "anti_patterns": [],
     "category": "agent",
-    "events": {},
+    "events": {
+      "chart-hover": {
+        "description": "Fires when the pointer enters a datum (bar / dot / slice). Detail includes {label, value, pct, series, slot, pointerX, pointerY}. Only re-fires when the hovered datum changes — moving inside the same datum is quiet."
+      },
+      "chart-leave": {
+        "description": "Fires when the pointer leaves the plot area or a previously-hovered datum with no new one entering."
+      },
+      "chart-select": {
+        "description": "Fires on click of a datum with the same detail shape as chart-hover."
+      }
+    },
     "examples": [
       {
         "description": "Dashboard with KPI stat grid and two chart cards.",
@@ -158,12 +188,19 @@
       },
       "canvas": {
         "description": "Chart rendering area"
+      },
+      "empty": {
+        "description": "Shown in place of the SVG when `.data` is empty or missing. Typically an `<empty-state-ui>` with icon + heading + description + optional action. Visibility is CSS-toggled via `[data-has-data]` on the host — authors don't need to manage it imperatively."
       }
     },
     "states": [
       {
         "description": "Default, ready for interaction.",
         "name": "idle"
+      },
+      {
+        "description": "No data — the empty slot (if provided) is rendered; otherwise the chart area renders nothing. Host carries [data-has-data] only when data is present.",
+        "name": "empty"
       }
     ],
     "synonyms": {

package/components/chart/chart.css

@@ -3,6 +3,15 @@
     /* ── Tokens ── */
     --chart-font:           var(--a-font-family);
     --chart-font-size:      var(--a-ui-sm);
+    /* NOTE — `--chart-currency-prefix` is intentionally NOT declared here.
+       Declaring a default at `:where(:scope)` would shadow ancestor values
+       via the cascade (the child's explicit declaration wins over an
+       inherited ancestor value, regardless of specificity). Instead,
+       chart.js's `#fmtValue()` falls back to `'$'` when the computed
+       value is empty — so ancestors can set `--chart-currency-prefix: "€"`
+       and the chart inherits that value naturally. To register the
+       default formally (and enable transitions), add an `@property` rule
+       at `:root` in a global stylesheet. */
     --chart-fg:             var(--a-fg);
     --chart-bar:            var(--a-accent);
     --chart-bar-hover:      var(--a-accent-bg-hover);
@@ -69,6 +78,29 @@
     position: relative;
     container-type: inline-size;
     container-name: chart;
+    /* Suppress default focus ring — we paint our own via [data-a11y-focused]
+       below so the ring only shows when the chart has a focused datum
+       (keyboard-only indicator, not just "the chart is tabindex=0"). */
+    outline: none;
+  }
+
+  /* OD-CHART-06 — keyboard a11y focus ring. Painted on the host when a
+     datum is focused via keyboard. Uses the canonical --a-focus-ring
+     recipe so it matches every other focusable primitive. */
+  :scope[data-a11y-focused]:focus-visible {
+    box-shadow: var(--a-focus-ring);
+    border-radius: var(--a-radius-sm);
+  }
+
+  /* Per-datum focus indicator — marks the currently-focused datum
+     via a data-a11y-focus attr set by chart.js on keyboard nav.
+     SVG paintable elements can't take box-shadow, so use a stroke
+     + drop-shadow filter to approximate a ring. */
+  [data-a11y-focus] {
+    stroke: var(--a-focus-color);
+    stroke-width: 2;
+    paint-order: stroke fill;
+    filter: drop-shadow(0 0 2px var(--a-focus-color));
   }
 
   /* Title + legend are fixed-height siblings; SVG gets the remaining
@@ -76,6 +108,19 @@
      inside the max-height envelope instead of pushing the legend out. */
   [data-chart-heading] { flex: 0 0 auto; }
   [data-legend]      { flex: 0 0 auto; }
+
+  /* Empty-state slot — author places <empty-state-ui slot="empty"> inside
+     chart-ui. CSS toggles visibility on [data-has-data] (set by chart.js
+     when .data is non-empty). No data ⇒ empty-state visible; data ⇒ hidden. */
+  > [slot="empty"] { display: none; }
+  :scope:not([data-has-data]) > [slot="empty"] {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    justify-content: center;
+    min-height: 0;
+  }
+
   :scope > div:not([data-chart-heading]):not([data-legend]) {
     flex: 1 1 auto;
     min-height: 0;
@@ -354,6 +399,15 @@
     font-family: var(--chart-font);
   }
 
+  /* Container query — the chart element provides `container-type: inline-size`
+     + `container-name: chart` (above). Hide the internal legend at small
+     widths where the rows would dominate the chart visual. Consumers who
+     want a legend at small sizes should place an external chart-legend-ui
+     adjacent in a larger container. */
+  @container chart (max-width: 200px) {
+    [data-legend] { display: none; }
+  }
+
   [data-legend-item] {
     display: flex;
     flex-direction: row;
@@ -379,6 +433,176 @@
   [data-legend-dot][data-slice="8"] { background: var(--chart-8); }
   [data-legend-dot][data-slice="9"] { background: var(--chart-9); }
 
+  /* ── Area chart ──
+     Reuses #renderLine() but emphasizes the filled region. Overrides the
+     default `[data-area]` opacity of 0.15 (line-chart aesthetic) to 0.35
+     so the fill becomes the dominant visual. The `--chart-area-fill-opacity`
+     token is the knob for consumers to tune; bump for more presence, dial
+     down for subtler. */
+  :scope[type="area"] {
+    --chart-area-fill-opacity: 0.35;
+  }
+  :scope[type="area"] [data-area] {
+    fill: var(--chart-line);
+    opacity: var(--chart-area-fill-opacity);
+    stroke: none;
+  }
+  :scope[type="area"] [data-line] {
+    stroke-width: var(--chart-line-width);
+  }
+
+  /* ── Scatter ──
+     Only dots emitted (no line/area paths). Dots are slightly larger than
+     line-chart dots by default for readability. */
+  :scope[type="scatter"] [data-dot][data-scatter] {
+    fill: var(--chart-dot);
+    stroke: var(--chart-dot-stroke);
+    stroke-width: 1.5;
+  }
+
+  /* ── Radial bar ──
+     Concentric rings — each ring stroked with bandwidth. Track is the
+     faint backing, filled arc is accent. Stroke-linecap:round in the path
+     gives rounded end-caps on the arcs. */
+  [data-radial-track] {
+    stroke: var(--a-border-subtle);
+    fill: none;
+  }
+  [data-radial-bar] {
+    stroke: var(--chart-bar);
+  }
+  [data-radial-bar][data-slice="0"] { stroke: var(--chart-0); }
+  [data-radial-bar][data-slice="1"] { stroke: var(--chart-1); }
+  [data-radial-bar][data-slice="2"] { stroke: var(--chart-2); }
+  [data-radial-bar][data-slice="3"] { stroke: var(--chart-3); }
+  [data-radial-bar][data-slice="4"] { stroke: var(--chart-4); }
+  [data-radial-bar][data-slice="5"] { stroke: var(--chart-5); }
+  [data-radial-bar][data-slice="6"] { stroke: var(--chart-6); }
+  [data-radial-bar][data-slice="7"] { stroke: var(--chart-7); }
+  [data-radial-bar][data-slice="8"] { stroke: var(--chart-8); }
+  [data-radial-bar][data-slice="9"] { stroke: var(--chart-9); }
+
+  /* ── Gauge ──
+     Half-donut — track is faint backing, fill reads as primary accent. */
+  :scope[type="gauge"] [data-radial-track] {
+    fill: var(--a-border-subtle);
+    stroke: none;
+  }
+  :scope[type="gauge"] [data-gauge-fill] {
+    fill: var(--chart-bar);
+    stroke: none;
+  }
+  [data-gauge-value] {
+    font-weight: var(--a-weight-semibold);
+    fill: var(--chart-fg);
+  }
+  [data-gauge-max] {
+    fill: var(--chart-label);
+    font-family: var(--chart-font);
+  }
+
+  /* ── Funnel ──
+     Stages stacked top-to-bottom. Trapezoid paths carry data-slice so
+     the data palette colors each stage. Labels live outside the
+     funnel body — left (stage name) and right (value + drop %). */
+  [data-funnel-stage] {
+    fill: var(--chart-bar);
+  }
+  [data-funnel-stage][data-slice="0"] { fill: var(--chart-0); }
+  [data-funnel-stage][data-slice="1"] { fill: var(--chart-1); }
+  [data-funnel-stage][data-slice="2"] { fill: var(--chart-2); }
+  [data-funnel-stage][data-slice="3"] { fill: var(--chart-3); }
+  [data-funnel-stage][data-slice="4"] { fill: var(--chart-4); }
+  [data-funnel-stage][data-slice="5"] { fill: var(--chart-5); }
+  [data-funnel-stage][data-slice="6"] { fill: var(--chart-6); }
+  [data-funnel-stage][data-slice="7"] { fill: var(--chart-7); }
+  [data-funnel-stage][data-slice="8"] { fill: var(--chart-8); }
+  [data-funnel-stage][data-slice="9"] { fill: var(--chart-9); }
+
+  [data-funnel-label] {
+    fill: var(--chart-fg);
+    font-weight: var(--a-weight-medium);
+  }
+  [data-funnel-value] {
+    fill: var(--chart-fg);
+    font-weight: var(--a-weight-semibold);
+  }
+  [data-funnel-drop] {
+    fill: var(--chart-label);
+  }
+
+  /* ── Treemap ──
+     Flat tiles — each rect filled by the data palette. Labels +
+     values appear only on tiles large enough to fit them (size
+     check done in JS). Rounded corners pick up the standard
+     --a-radius via #resolveRadius(). */
+  [data-treemap-tile] {
+    stroke: var(--chart-dot-stroke);
+    stroke-width: 0;
+  }
+  [data-treemap-tile][data-slice="0"] { fill: var(--chart-0); }
+  [data-treemap-tile][data-slice="1"] { fill: var(--chart-1); }
+  [data-treemap-tile][data-slice="2"] { fill: var(--chart-2); }
+  [data-treemap-tile][data-slice="3"] { fill: var(--chart-3); }
+  [data-treemap-tile][data-slice="4"] { fill: var(--chart-4); }
+  [data-treemap-tile][data-slice="5"] { fill: var(--chart-5); }
+  [data-treemap-tile][data-slice="6"] { fill: var(--chart-6); }
+  [data-treemap-tile][data-slice="7"] { fill: var(--chart-7); }
+  [data-treemap-tile][data-slice="8"] { fill: var(--chart-8); }
+  [data-treemap-tile][data-slice="9"] { fill: var(--chart-9); }
+
+  [data-treemap-label] {
+    fill: var(--a-canvas-0);
+    font-weight: var(--a-weight-semibold);
+  }
+  [data-treemap-value] {
+    fill: var(--a-canvas-0);
+    opacity: 0.85;
+  }
+
+  /* ── Sankey ──
+     Left + right column nodes, curved bezier flows between. Flow
+     bands render semi-transparent so overlapping routes remain
+     distinguishable. Nodes adopt the data palette. */
+  [data-sankey-node] {
+    fill: var(--chart-bar);
+  }
+  [data-sankey-node][data-slice="0"] { fill: var(--chart-0); }
+  [data-sankey-node][data-slice="1"] { fill: var(--chart-1); }
+  [data-sankey-node][data-slice="2"] { fill: var(--chart-2); }
+  [data-sankey-node][data-slice="3"] { fill: var(--chart-3); }
+  [data-sankey-node][data-slice="4"] { fill: var(--chart-4); }
+  [data-sankey-node][data-slice="5"] { fill: var(--chart-5); }
+  [data-sankey-node][data-slice="6"] { fill: var(--chart-6); }
+  [data-sankey-node][data-slice="7"] { fill: var(--chart-7); }
+  [data-sankey-node][data-slice="8"] { fill: var(--chart-8); }
+  [data-sankey-node][data-slice="9"] { fill: var(--chart-9); }
+
+  [data-sankey-link] {
+    fill: var(--a-fg-subtle);
+    opacity: 0.35;
+  }
+  [data-sankey-link]:hover {
+    opacity: 0.6;
+  }
+  [data-sankey-label] {
+    fill: var(--chart-fg);
+    font-weight: var(--a-weight-medium);
+  }
+
+  /* ── Composed (bar + line overlay) ──
+     The bar uses slot 0 + the line uses slot 1 by default via the
+     --color-{key} injection in chart.js. CSS here just makes sure
+     the line reads over the bar visually — the line's data-line
+     element already picks up existing [data-line] styling. */
+  :scope[type="composed"] [data-line] {
+    stroke-width: calc(var(--chart-line-width) + 1);
+  }
+  :scope[type="composed"] [data-dot] {
+    stroke: var(--chart-dot-stroke);
+    stroke-width: 2;
+  }
+
   /* ── Sparkline container ──
      When host has explicit height, fill it; otherwise give a sensible
      default of 2rem so the sparkline still has room to breathe. */