@adia-ai/web-components 0.0.13 → 0.0.15

package/README.md

@@ -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>
@@ -42,7 +42,9 @@ web-components/
 │   ├── provider.js      global provider registration + router-ui
 │   ├── anchor.js        popover + anchor-positioning
 │   ├── markdown.js      lightweight markdown renderer
-│   └── transport.js     SSE / streaming helpers for LLM adapters
+│   ├── transport.js     SSE / streaming helpers for LLM adapters
+│   └── data-stream.js   `data-stream-*` attribute trait (HTTP/SSE/WS,
+│                        signal-backed, refcounted shared transports)
 │
 ├── components/     — 80 *-ui custom elements
 │   └── <tag>/
@@ -59,7 +61,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
@@ -159,6 +161,46 @@ Accepts the four A2UI message kinds: `updateComponents`,
 normalizes LLM-emitted aliases (e.g. `Carousel` → `swiper-ui`) so generated
 output is robust to name drift.
 
+## Data streaming via `data-stream-*` attributes
+
+Any element with a settable `.data` property — chart-ui, table-ui,
+heatmap-ui, stat-ui, list-ui, etc. — can be fed from a backing
+source via attributes alone. No per-component opt-in:
+
+```html
+<!-- HTTP one-shot fetch, JSON -->
+<chart-ui type="area" x="month" y="revenue"
+          data-stream-src="/api/revenue?range=3m"
+          data-stream-path="data"></chart-ui>
+
+<!-- HTTP polling every 5s -->
+<table-ui sortable striped
+          data-stream-src="/api/orders"
+          data-stream-interval="5000"></table-ui>
+
+<!-- Server-Sent Events, append on each message -->
+<heatmap-ui type="matrix" rows="7" cols="52"
+            data-stream-src="/sse/activity"
+            data-stream-mode="sse"
+            data-stream-merge="append"></heatmap-ui>
+
+<!-- Spread a multi-property response onto the element -->
+<stat-ui data-stream-src="/api/kpi"
+         data-stream-target="*"></stat-ui>
+```
+
+Modes: HTTP (one-shot or polling), `sse` (`EventSource`), `ws`
+(`WebSocket`). Formats: `json` (default), `csv`, `tsv`, `jsonl`,
+`text` — auto-detected from URL extension or content-type. Two
+elements with attribute-identical streams share one transport
+(refcounted, signal-backed); explicit `data-stream-id` lets
+unrelated configs share intentionally. Programmatic access via
+the `streams` registry export from `core/data-stream.js`.
+
+Implementation: `core/data-stream.js` (~360 lines). Full
+attribute table + live demos:
+[`/site/components/chart#data-stream`](./site/pages/components/chart/index.html).
+
 ## Build
 
 ```bash

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. */