@adia-ai/a2ui-corpus 0.4.6 → 0.4.8

package/patterns/data/chart-dashboard.yaml

@@ -1,48 +0,0 @@
-# Generated by scripts/generate-yaml-scaffolds.mjs
-# Narrative doc — JSON sibling remains the canonical machine source.
-# Fill in TODO sections by hand.
-
-$schema: ../../../../../scripts/schemas/pattern.yaml.schema.json
-name: chart-dashboard
-domain: data
-version: 1
-description: Dashboard with KPI stat grid and two chart cards.
-tags:
-  purpose:
-    - visualization
-    - data-display
-  complexity: complex
-  layout: single-column
-  interaction: []
-keywords:
-  - chart
-  - graph
-  - analytics
-  - report
-  - data
-  - sales
-related:
-  - dashboard
-  - stat-cards
-  - metrics
-use-cases:
-  - "TODO: primary use case"
-  - "TODO: secondary use case"
-variants:
-  - name: TODO
-    description: "TODO: variant description"
-wiring-intent:
-  summary: Static pattern (no interactive wiring).
-  controllers: []
-  actions: []
-components:
-  - Column
-  - Row
-  - Text
-  - Button
-  - Grid
-  - Card
-  - Header
-  - Section
-  - Badge
-  - Chart

package/patterns/data/chart-grid-with-kpis.json

@@ -1,314 +0,0 @@
-{
-  "$schema": "../_schema.json",
-  "name": "chart-grid-with-kpis",
-  "version": 1,
-  "domain": "data",
-  "description": "Dashboard with a 4-column KPI stat-with-sparkline row on top and a 2-column grid of chart cards with trend footers below. Modernized version of chart-dashboard using the Phase 1+3 primitives.",
-  "tags": {
-    "purpose": [
-      "visualization",
-      "data-display",
-      "dashboard"
-    ],
-    "complexity": "complex",
-    "layout": "grid",
-    "interaction": []
-  },
-  "keywords": [
-    "dashboard",
-    "chart",
-    "kpi",
-    "stats",
-    "sparkline",
-    "trend",
-    "analytics",
-    "reporting"
-  ],
-  "related": [
-    "chart-dashboard",
-    "stat-with-sparkline",
-    "chart-card-with-trend-footer",
-    "chart-with-filter-pills",
-    "metrics"
-  ],
-  "template": [
-    {
-      "id": "root",
-      "component": "Column",
-      "children": [
-        "dash-header",
-        "kpi-grid",
-        "chart-grid"
-      ],
-      "gap": "4"
-    },
-    {
-      "id": "dash-header",
-      "component": "Row",
-      "children": [
-        "dash-title",
-        "dash-actions"
-      ]
-    },
-    {
-      "id": "dash-title",
-      "component": "Text",
-      "textContent": "Dashboard",
-      "variant": "title"
-    },
-    {
-      "id": "dash-actions",
-      "component": "Row",
-      "children": [
-        "export-btn"
-      ],
-      "gap": "2"
-    },
-    {
-      "id": "export-btn",
-      "component": "Button",
-      "text": "Export",
-      "variant": "outline",
-      "size": "sm",
-      "icon": "download"
-    },
-    {
-      "id": "kpi-grid",
-      "component": "Grid",
-      "children": [
-        "k1",
-        "k2",
-        "k3",
-        "k4"
-      ],
-      "columns": "4"
-    },
-    {
-      "id": "k1",
-      "component": "Card",
-      "children": ["k1s"]
-    },
-    {
-      "id": "k1s",
-      "component": "Section",
-      "children": ["k1stat"]
-    },
-    {
-      "id": "k1stat",
-      "component": "Stat",
-      "label": "Revenue",
-      "value": "$48.2k",
-      "change": "+12.5%",
-      "trend": "up",
-      "children": ["k1spark"]
-    },
-    {
-      "id": "k1spark",
-      "component": "Chart",
-      "slot": "chart",
-      "type": "sparkline",
-      "x": "month",
-      "y": "revenue"
-    },
-    {
-      "id": "k2",
-      "component": "Card",
-      "children": ["k2s"]
-    },
-    {
-      "id": "k2s",
-      "component": "Section",
-      "children": ["k2stat"]
-    },
-    {
-      "id": "k2stat",
-      "component": "Stat",
-      "label": "Users",
-      "value": "2,340",
-      "change": "+8%",
-      "trend": "up",
-      "children": ["k2spark"]
-    },
-    {
-      "id": "k2spark",
-      "component": "Chart",
-      "slot": "chart",
-      "type": "sparkline",
-      "x": "month",
-      "y": "users"
-    },
-    {
-      "id": "k3",
-      "component": "Card",
-      "children": ["k3s"]
-    },
-    {
-      "id": "k3s",
-      "component": "Section",
-      "children": ["k3stat"]
-    },
-    {
-      "id": "k3stat",
-      "component": "Stat",
-      "label": "Bounce",
-      "value": "24.3%",
-      "change": "-3.1%",
-      "trend": "down",
-      "children": ["k3spark"]
-    },
-    {
-      "id": "k3spark",
-      "component": "Chart",
-      "slot": "chart",
-      "type": "sparkline",
-      "x": "month",
-      "y": "bounce"
-    },
-    {
-      "id": "k4",
-      "component": "Card",
-      "children": ["k4s"]
-    },
-    {
-      "id": "k4s",
-      "component": "Section",
-      "children": ["k4stat"]
-    },
-    {
-      "id": "k4stat",
-      "component": "Stat",
-      "label": "Session",
-      "value": "4m 23s",
-      "change": "+15s",
-      "trend": "up",
-      "children": ["k4spark"]
-    },
-    {
-      "id": "k4spark",
-      "component": "Chart",
-      "slot": "chart",
-      "type": "sparkline",
-      "x": "month",
-      "y": "session"
-    },
-    {
-      "id": "chart-grid",
-      "component": "Grid",
-      "children": [
-        "ch1",
-        "ch2"
-      ],
-      "columns": "2"
-    },
-    {
-      "id": "ch1",
-      "component": "Card",
-      "children": ["ch1h", "ch1s", "ch1f"]
-    },
-    {
-      "id": "ch1h",
-      "component": "Header",
-      "children": ["ch1t", "ch1d"]
-    },
-    {
-      "id": "ch1t",
-      "component": "Text",
-      "slot": "heading",
-      "textContent": "Revenue",
-      "variant": "section"
-    },
-    {
-      "id": "ch1d",
-      "component": "Text",
-      "slot": "description",
-      "textContent": "Last 3 months",
-      "variant": "caption"
-    },
-    {
-      "id": "ch1s",
-      "component": "Section",
-      "children": ["ch1-chart"]
-    },
-    {
-      "id": "ch1-chart",
-      "component": "Chart",
-      "type": "area",
-      "x": "month",
-      "y": "revenue"
-    },
-    {
-      "id": "ch1f",
-      "component": "Footer",
-      "children": ["ch1ft", "ch1fd"]
-    },
-    {
-      "id": "ch1ft",
-      "component": "Text",
-      "slot": "heading",
-      "textContent": "Trending up by 5.2% this month",
-      "variant": "body"
-    },
-    {
-      "id": "ch1fd",
-      "component": "Text",
-      "slot": "description",
-      "textContent": "January – March 2024",
-      "variant": "caption"
-    },
-    {
-      "id": "ch2",
-      "component": "Card",
-      "children": ["ch2h", "ch2s", "ch2f"]
-    },
-    {
-      "id": "ch2h",
-      "component": "Header",
-      "children": ["ch2t", "ch2d"]
-    },
-    {
-      "id": "ch2t",
-      "component": "Text",
-      "slot": "heading",
-      "textContent": "Users",
-      "variant": "section"
-    },
-    {
-      "id": "ch2d",
-      "component": "Text",
-      "slot": "description",
-      "textContent": "Daily active users",
-      "variant": "caption"
-    },
-    {
-      "id": "ch2s",
-      "component": "Section",
-      "children": ["ch2-chart"]
-    },
-    {
-      "id": "ch2-chart",
-      "component": "Chart",
-      "type": "line",
-      "x": "month",
-      "y": "users"
-    },
-    {
-      "id": "ch2f",
-      "component": "Footer",
-      "children": ["ch2ft", "ch2fd"]
-    },
-    {
-      "id": "ch2ft",
-      "component": "Text",
-      "slot": "heading",
-      "textContent": "2,340 daily users",
-      "variant": "body"
-    },
-    {
-      "id": "ch2fd",
-      "component": "Text",
-      "slot": "description",
-      "textContent": "Up 8% vs last quarter",
-      "variant": "caption"
-    }
-  ]
-}

package/patterns/data/chart-grid-with-kpis.yaml

@@ -1,63 +0,0 @@
-$schema: ../../../../../scripts/schemas/pattern.yaml.schema.json
-name: chart-grid-with-kpis
-domain: data
-version: 1
-description: >-
-  Dashboard with a 4-column KPI row (stat-with-sparkline each) on top and a
-  2-column grid of chart cards with trend footers below. Modernized version
-  of chart-dashboard that uses the Phase 1 (footer heading slot) and Phase 3
-  (stat chart slot) primitives.
-tags:
-  purpose:
-    - visualization
-    - data-display
-    - dashboard
-  complexity: complex
-  layout: grid
-  interaction: []
-keywords:
-  - dashboard
-  - chart
-  - kpi
-  - stats
-  - sparkline
-  - trend
-  - analytics
-  - reporting
-related:
-  - chart-dashboard
-  - stat-with-sparkline
-  - chart-card-with-trend-footer
-  - chart-with-filter-pills
-  - metrics
-use-cases:
-  - Admin/executive dashboards with KPIs + chart cards at a glance.
-  - SaaS analytics pages — revenue / users / bounce / session cards + trend charts.
-  - Marketing dashboards where each KPI card shows a sparkline and each chart card carries a trend caption.
-variants:
-  - name: filter-pills
-    description: >-
-      Add `Segmented` pills to chart card headers (slot="action") per the
-      chart-with-filter-pills pattern for time-range selection.
-  - name: narrower-kpi-row
-    description: >-
-      Set `columns: "3"` or `"2"` on `kpi-grid` when only 2-3 KPIs matter.
-wiring-intent:
-  summary: >-
-    Static pattern. Typical integration wires each Stat's value + its
-    sparkline's .data from the same controller; each chart card receives
-    its `.data` + trend narrative from the same source.
-  controllers: []
-  actions: []
-components:
-  - Column
-  - Row
-  - Grid
-  - Card
-  - Header
-  - Section
-  - Footer
-  - Text
-  - Button
-  - Stat
-  - Chart

package/patterns/data/chart-with-filter-pills.json

@@ -1,127 +0,0 @@
-{
-  "$schema": "../_schema.json",
-  "name": "chart-with-filter-pills",
-  "version": 1,
-  "domain": "data",
-  "description": "Chart in a card with a time-range pill selector in the header's action slot. The pills are a Segmented control (single-select) that drives the data window.",
-  "tags": {
-    "purpose": [
-      "visualization",
-      "data-display",
-      "filtering"
-    ],
-    "complexity": "composed",
-    "layout": "single-column",
-    "interaction": [
-      "filter",
-      "time-range"
-    ]
-  },
-  "keywords": [
-    "chart",
-    "filter",
-    "pills",
-    "time-range",
-    "segmented",
-    "analytics",
-    "dashboard"
-  ],
-  "related": [
-    "chart-card-with-trend-footer",
-    "chart-dashboard",
-    "metrics"
-  ],
-  "template": [
-    {
-      "id": "root",
-      "component": "Card",
-      "children": [
-        "rc-header",
-        "rc-body"
-      ]
-    },
-    {
-      "id": "rc-header",
-      "component": "Header",
-      "children": [
-        "rc-title",
-        "rc-filter"
-      ]
-    },
-    {
-      "id": "rc-title",
-      "component": "Text",
-      "slot": "heading",
-      "textContent": "Revenue",
-      "variant": "section"
-    },
-    {
-      "id": "rc-filter",
-      "component": "Segmented",
-      "slot": "action",
-      "value": "1m",
-      "children": [
-        "f-1w",
-        "f-2w",
-        "f-1m",
-        "f-3m"
-      ]
-    },
-    {
-      "id": "f-1w",
-      "component": "Segment",
-      "text": "1w",
-      "value": "1w"
-    },
-    {
-      "id": "f-2w",
-      "component": "Segment",
-      "text": "2w",
-      "value": "2w"
-    },
-    {
-      "id": "f-1m",
-      "component": "Segment",
-      "text": "1m",
-      "value": "1m"
-    },
-    {
-      "id": "f-3m",
-      "component": "Segment",
-      "text": "3m",
-      "value": "3m"
-    },
-    {
-      "id": "rc-body",
-      "component": "Section",
-      "children": [
-        "rc-chart"
-      ]
-    },
-    {
-      "id": "rc-chart",
-      "component": "Chart",
-      "type": "line",
-      "x": "date",
-      "y": "revenue"
-    }
-  ],
-  "actions": [
-    {
-      "event": { "event": "change", "target": "rc-filter" },
-      "handler": "update-data-model",
-      "config": {
-        "path": "filters.range",
-        "value": "{{event.value}}"
-      }
-    },
-    {
-      "event": { "event": "change", "target": "rc-filter" },
-      "handler": "fetch-resource",
-      "config": {
-        "uri": "api://metrics/revenue?range={{event.value}}",
-        "target": "rc-chart.data"
-      }
-    }
-  ]
-}

package/patterns/data/chart-with-filter-pills.yaml

@@ -1,76 +0,0 @@
-$schema: ../../../../../scripts/schemas/pattern.yaml.schema.json
-name: chart-with-filter-pills
-domain: data
-version: 1
-description: >-
-  Chart in a card with a time-range pill selector in the header's `action`
-  slot. The pills are a `Segmented` control (single-select of `Segment`
-  children) that drives the data window. Value changes are wired via A2UI
-  action binding to the chart's .data replacement.
-tags:
-  purpose:
-    - visualization
-    - data-display
-    - filtering
-  complexity: composed
-  layout: single-column
-  interaction:
-    - filter
-    - time-range
-keywords:
-  - chart
-  - filter
-  - pills
-  - time-range
-  - segmented
-  - analytics
-  - dashboard
-related:
-  - chart-card-with-trend-footer
-  - chart-dashboard
-  - metrics
-use-cases:
-  - Revenue / user / signup charts with 1w / 2w / 1m / 3m range pills.
-  - Analytics cards where the range toggle drives a server-side data refresh.
-  - Metric cards in a SaaS dashboard with standard Last 7d / 30d / 90d pills.
-variants:
-  - name: toggle-group
-    description: >-
-      Swap `Segmented` for `ToggleGroup` when users need to multi-select
-      (e.g., comparing multiple ranges or series).
-  - name: dropdown
-    description: >-
-      Swap the pill row for a `Select` component when the range set grows
-      beyond ~5 options.
-wiring-intent:
-  summary: >-
-    Segmented's change event drives two A2UI actions: (1) update the
-    data model's `filters.range` path so other surfaces can react to
-    the same selection, and (2) fetch the range-scoped metric series
-    and replace the chart's `.data`. Both actions target the same
-    event (`change` on `rc-filter`) so they fire in registration
-    order — model update first, then fetch. Canonical shapes are
-    carried in the JSON's top-level `actions` array (see the pattern
-    file) so the wiring is self-documenting for authors copying the
-    composition.
-  controllers:
-    - range-filter
-  actions:
-    - event: rc-filter.change
-      handler: update-data-model
-      config:
-        path: filters.range
-        value: event.value
-    - event: rc-filter.change
-      handler: fetch-resource
-      config:
-        uri: 'api://metrics/revenue?range={{event.value}}'
-        target: rc-chart.data
-components:
-  - Card
-  - Header
-  - Section
-  - Chart
-  - Text
-  - Segmented
-  - Segment