@adia-ai/web-components 0.0.1

package/components/chart/chart.yaml

@@ -0,0 +1,540 @@
+# Generated by scripts/migrate-yamls-to-v1.mjs — migrated to v1 contract.
+# Edit this file; run `npm run build:components` to regenerate a2ui.json.
+$schema: ../../../../scripts/schemas/component.yaml.schema.json
+name: AdiaChart
+tag: chart-ui
+component: Chart
+category: agent
+version: 1
+description: Declarative SVG chart supporting bar, line, pie, donut, radar, sparkline, stacked-bar,
+  grouped-bar, and multi-line types.
+props:
+  type:
+    description: Chart type. Only 'bar' is built-in.
+    type: string
+    default: bar
+    enum:
+      - bar
+      - line
+      - pie
+      - donut
+      - radar
+      - sparkline
+      - stacked-bar
+      - grouped-bar
+      - multi-line
+  aspect:
+    description: Aspect ratio
+    type: string
+    default: wide
+    enum:
+      - wide
+      - square
+      - tall
+  color:
+    description: Color scheme
+    type: string
+    default: ""
+    enum:
+      - accent
+      - success
+      - warning
+      - danger
+      - info
+  hideAverage:
+    description: When true, suppress the overlaid average line
+    type: boolean
+    default: false
+    attribute: hide-average
+  hideGrid:
+    description: Hide gridlines
+    type: boolean
+    default: false
+    attribute: hide-grid
+  hideValues:
+    description: Hide value labels
+    type: boolean
+    default: false
+    attribute: hide-values
+  radius:
+    description: Bar corner radius
+    type: number
+    default: 4
+  size:
+    description: Chart size
+    type: string
+    default: ""
+    enum:
+      - sm
+      - md
+      - lg
+  smooth:
+    description: Line smoothing factor
+    type: number
+    default: 0.4
+  title:
+    description: Chart title above the canvas
+    type: string
+    default: ""
+  x:
+    description: Data key for x-axis (category) values
+    type: string
+    default: ""
+  y:
+    description: Y-axis key(s), comma-separated for multi-series
+    type: string
+    default: ""
+events: {}
+slots:
+  canvas:
+    description: Chart rendering area
+  title:
+    description: Chart title element
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: chart-dashboard
+    description: Dashboard with KPI stat grid and two chart cards.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Column",
+          "children": [
+            "header-row",
+            "kpi-grid",
+            "chart-grid"
+          ],
+          "gap": "4"
+        },
+        {
+          "id": "header-row",
+          "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": [
+            "k1h",
+            "k1s"
+          ]
+        },
+        {
+          "id": "k1h",
+          "component": "Header",
+          "children": [
+            "k1l"
+          ]
+        },
+        {
+          "id": "k1l",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Revenue",
+          "variant": "label"
+        },
+        {
+          "id": "k1s",
+          "component": "Section",
+          "children": [
+            "k1v",
+            "k1b"
+          ]
+        },
+        {
+          "id": "k1v",
+          "component": "Text",
+          "textContent": "$48.2k",
+          "variant": "title"
+        },
+        {
+          "id": "k1b",
+          "component": "Badge",
+          "text": "+12.5%",
+          "variant": "success",
+          "size": "sm"
+        },
+        {
+          "id": "k2",
+          "component": "Card",
+          "children": [
+            "k2h",
+            "k2s"
+          ]
+        },
+        {
+          "id": "k2h",
+          "component": "Header",
+          "children": [
+            "k2l"
+          ]
+        },
+        {
+          "id": "k2l",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Users",
+          "variant": "label"
+        },
+        {
+          "id": "k2s",
+          "component": "Section",
+          "children": [
+            "k2v",
+            "k2b"
+          ]
+        },
+        {
+          "id": "k2v",
+          "component": "Text",
+          "textContent": "2,340",
+          "variant": "title"
+        },
+        {
+          "id": "k2b",
+          "component": "Badge",
+          "text": "+8%",
+          "variant": "success",
+          "size": "sm"
+        },
+        {
+          "id": "k3",
+          "component": "Card",
+          "children": [
+            "k3h",
+            "k3s"
+          ]
+        },
+        {
+          "id": "k3h",
+          "component": "Header",
+          "children": [
+            "k3l"
+          ]
+        },
+        {
+          "id": "k3l",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Bounce",
+          "variant": "label"
+        },
+        {
+          "id": "k3s",
+          "component": "Section",
+          "children": [
+            "k3v",
+            "k3b"
+          ]
+        },
+        {
+          "id": "k3v",
+          "component": "Text",
+          "textContent": "24.3%",
+          "variant": "title"
+        },
+        {
+          "id": "k3b",
+          "component": "Badge",
+          "text": "-3.1%",
+          "variant": "danger",
+          "size": "sm"
+        },
+        {
+          "id": "k4",
+          "component": "Card",
+          "children": [
+            "k4h",
+            "k4s"
+          ]
+        },
+        {
+          "id": "k4h",
+          "component": "Header",
+          "children": [
+            "k4l"
+          ]
+        },
+        {
+          "id": "k4l",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Session",
+          "variant": "label"
+        },
+        {
+          "id": "k4s",
+          "component": "Section",
+          "children": [
+            "k4v",
+            "k4b"
+          ]
+        },
+        {
+          "id": "k4v",
+          "component": "Text",
+          "textContent": "4m 23s",
+          "variant": "title"
+        },
+        {
+          "id": "k4b",
+          "component": "Badge",
+          "text": "+15s",
+          "variant": "info",
+          "size": "sm"
+        },
+        {
+          "id": "chart-grid",
+          "component": "Grid",
+          "children": [
+            "ch1",
+            "ch2"
+          ],
+          "columns": "2"
+        },
+        {
+          "id": "ch1",
+          "component": "Card",
+          "children": [
+            "ch1h",
+            "ch1s"
+          ]
+        },
+        {
+          "id": "ch1h",
+          "component": "Header",
+          "children": [
+            "ch1t"
+          ]
+        },
+        {
+          "id": "ch1t",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Revenue",
+          "variant": "section"
+        },
+        {
+          "id": "ch1s",
+          "component": "Section",
+          "children": [
+            "ch1-chart"
+          ]
+        },
+        {
+          "id": "ch1-chart",
+          "component": "Chart",
+          "type": "bar",
+          "x": "month",
+          "y": "revenue"
+        },
+        {
+          "id": "ch2",
+          "component": "Card",
+          "children": [
+            "ch2h",
+            "ch2s"
+          ]
+        },
+        {
+          "id": "ch2h",
+          "component": "Header",
+          "children": [
+            "ch2t"
+          ]
+        },
+        {
+          "id": "ch2t",
+          "component": "Text",
+          "slot": "heading",
+          "textContent": "Users",
+          "variant": "section"
+        },
+        {
+          "id": "ch2s",
+          "component": "Section",
+          "children": [
+            "ch2-chart"
+          ]
+        },
+        {
+          "id": "ch2-chart",
+          "component": "Chart",
+          "type": "line",
+          "x": "month",
+          "y": "users"
+        }
+      ]
+keywords:
+  - chart
+  - stats
+  - statistics
+  - kpi
+  - figures
+  - analytics
+  - reporting
+  - insights
+  - monitor
+  - monitoring
+  - telemetry
+  - observability
+  - performance
+  - graph
+  - visualization
+  - plot
+  - diagram
+  - histogram
+  - pie
+  - bar-chart
+  - line-chart
+  - crm
+  - poll
+synonyms:
+  analytics:
+    - chart
+    - dashboard
+    - metric
+    - stat
+    - leaderboard
+  bar-chart:
+    - chart
+    - dashboard
+  crm:
+    - dashboard
+    - table
+    - data
+    - user
+    - profile
+    - chart
+  diagram:
+    - chart
+    - dashboard
+  figures:
+    - stat
+    - metric
+    - chart
+  graph:
+    - chart
+    - dashboard
+  histogram:
+    - chart
+    - dashboard
+  insights:
+    - chart
+    - dashboard
+    - metric
+    - stat
+  kpi:
+    - stat
+    - metric
+    - dashboard
+    - chart
+  line-chart:
+    - chart
+    - dashboard
+  monitor:
+    - dashboard
+    - metric
+    - stat
+    - chart
+    - progress
+  monitoring:
+    - dashboard
+    - metric
+    - stat
+    - chart
+    - progress
+  observability:
+    - dashboard
+    - metric
+    - chart
+    - stat
+  performance:
+    - dashboard
+    - metric
+    - chart
+    - stat
+    - progress
+  pie:
+    - chart
+    - dashboard
+  plot:
+    - chart
+    - dashboard
+  poll:
+    - form
+    - radio
+    - chart
+  reporting:
+    - chart
+    - dashboard
+    - metric
+    - stat
+    - table
+    - data
+  statistics:
+    - stat
+    - metric
+    - dashboard
+    - chart
+  stats:
+    - stat
+    - metric
+    - dashboard
+    - chart
+  telemetry:
+    - dashboard
+    - metric
+    - chart
+    - stat
+  visualization:
+    - chart
+    - dashboard
+    - metric
+related:
+  - button
+  - grid
+  - badge

package/components/chat/chat-input.css

@@ -0,0 +1,141 @@
+@scope (chat-input-ui) {
+  :where(:scope) {
+    /* ── Layout ── */
+    --chat-input-radius:          var(--a-radius-lg);
+    --chat-input-textarea-px:     var(--a-space-3);
+    --chat-input-textarea-pt:     var(--a-space-3);
+    --chat-input-toolbar:         var(--a-space-2);
+    --chat-input-toolbar-py:      var(--a-space-1);
+    --chat-input-toolbar-gap:     var(--a-space-1);
+
+    /* ── 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);
+
+    /* ── Image preview ── */
+    --chat-input-image-size:      3rem;                /* 48px at d=1 */
+    --chat-input-image-radius:    var(--a-radius-sm);
+    --chat-input-image-border:    var(--a-border-subtle);
+    --chat-input-preview-gap:     var(--a-space-2);
+    --chat-input-preview-py:      var(--a-space-2);
+
+    /* ── Preview remove button ── */
+    --chat-input-remove-size:     var(--a-space-4);
+    --chat-input-remove-offset:   var(--a-space-1);
+    --chat-input-remove-bg:       var(--a-fg-muted);
+    --chat-input-remove-fg:       var(--a-bg);
+    --chat-input-remove-font:     var(--a-ui-tiny);
+
+    /* ── Transition ── */
+    --chat-input-duration:        var(--a-duration);
+    --chat-input-easing:          var(--a-easing);
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    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);
+  }
+
+  /* Textarea: no border/bg of its own — container handles it */
+  textarea-ui [slot="text"] {
+    border: none;
+    background: transparent;
+    border-radius: 0;
+    box-shadow: none;
+    max-height: 8rem;
+    /*min-height: var(--a-size-md);*/
+    padding: var(--chat-input-textarea-pt) var(--chat-input-textarea-px) 0;
+  }
+
+  textarea-ui [slot="text"]:focus {
+    border: none;
+    box-shadow: none;
+  }
+
+  /* Toolbar */
+  [slot="toolbar"] {
+    display: flex;
+    align-items: center;
+    gap: var(--chat-input-toolbar-gap);
+    padding: var(--chat-input-toolbar);
+  }
+
+  /* Model picker */
+  [slot="model"] [slot="caret"] {
+    width: 0.75em;
+    height: 0.75em;
+    color: var(--chat-input-caret-color);
+  }
+
+  /* Attach button */
+  [slot="attach"] {
+    flex-shrink: 0;
+  }
+
+  /* Send button — pushed to the end */
+  [slot="send"] {
+    margin-inline-start: auto;
+  }
+
+  /* Image preview strip */
+  [slot="preview"] {
+    display: flex;
+    gap: var(--chat-input-preview-gap);
+    padding: var(--chat-input-preview-py) var(--chat-input-textarea-px);
+    overflow-x: auto;
+  }
+
+  [slot="preview"][hidden] { display: none; }
+
+  [slot="preview"] [data-preview-item] {
+    position: relative;
+    flex-shrink: 0;
+  }
+
+  [slot="preview"] img {
+    width: var(--chat-input-image-size);
+    height: var(--chat-input-image-size);
+    object-fit: cover;
+    border-radius: var(--chat-input-image-radius);
+    border: 1px solid var(--chat-input-image-border);
+  }
+
+  [slot="preview"] [data-preview-remove] {
+    position: absolute;
+    top: calc(-1 * var(--chat-input-remove-offset));
+    right: calc(-1 * var(--chat-input-remove-offset));
+    width: var(--chat-input-remove-size);
+    height: var(--chat-input-remove-size);
+    border-radius: 50%;
+    border: none;
+    background: var(--chat-input-remove-bg);
+    color: var(--chat-input-remove-fg);
+    font-size: var(--chat-input-remove-font);
+    line-height: 1;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+  }
+
+  /* Disabled / streaming */
+  :scope[disabled] {
+    background: transparent;
+    border-color: var(--chat-input-border-disabled);
+    pointer-events: none;
+  }
+}