@adia-ai/web-components 0.0.1

package/components/heatmap/heatmap.js

@@ -0,0 +1,246 @@
+/**
+ * <heatmap-ui> — Grid-based heatmap / density / day-grid visualization.
+ *
+ * Attributes:
+ *   type         — 'day-grid' | 'matrix' | 'density'   (default 'matrix')
+ *   rows         — Number                              (default 7)
+ *   cols         — Number                              (default 12)
+ *   scale        — 'linear' | 'log' | 'quantile'       (default 'linear')
+ *   data         — JSON string OR .data property [{ r, c, v, label? }]
+ *   legend       — Boolean                              (default true)
+ *   color-scheme — 'accent' | 'success' | 'warning' | 'data-ramp'  (default 'data-ramp')
+ *   start-date   — ISO date (for day-grid to label months)
+ *   aspect       — 'square' | 'wide'                   (default 'wide')
+ *
+ * Events:
+ *   cell-hover  — { detail: { r, c, v, label } }
+ *   cell-click  — { detail: { r, c, v, label } }
+ *
+ * Slots:
+ *   title — optional header title
+ */
+
+import { AdiaElement } from '@core/element.js';
+
+const MONTHS = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+
+class AdiaHeatmap extends AdiaElement {
+  static properties = {
+    type:        { type: String,  default: 'matrix',    reflect: true },
+    rows:        { type: Number,  default: 7,           reflect: true },
+    cols:        { type: Number,  default: 12,          reflect: true },
+    scale:       { type: String,  default: 'linear',    reflect: true },
+    legend:      { type: Boolean, default: true,        reflect: true },
+    colorScheme: { type: String,  default: 'data-ramp', reflect: true, attribute: 'color-scheme' },
+    startDate:   { type: String,  default: '',          reflect: true, attribute: 'start-date' },
+    aspect:      { type: String,  default: 'wide',      reflect: true },
+  };
+
+  static template = () => null;
+
+  #data = [];
+  #bound = false;
+
+  set data(arr) {
+    if (typeof arr === 'string') {
+      try { arr = JSON.parse(arr); } catch { arr = []; }
+    }
+    this.#data = Array.isArray(arr) ? arr : [];
+    this.#requestRender();
+  }
+
+  get data() { return this.#data; }
+
+  connected() {
+    this.setAttribute('role', 'img');
+    // Parse data attribute if present
+    const raw = this.getAttribute('data');
+    if (raw && !this.#data.length) {
+      try { this.#data = JSON.parse(raw); } catch { /* ignore */ }
+    }
+    if (!this.#bound) {
+      this.#bound = true;
+      this.addEventListener('pointerover', this.#onHover);
+      this.addEventListener('click', this.#onClick);
+    }
+  }
+
+  disconnected() {
+    this.removeEventListener('pointerover', this.#onHover);
+    this.removeEventListener('click', this.#onClick);
+    this.#bound = false;
+  }
+
+  #raf = null;
+  #requestRender() {
+    if (!this.isConnected || this.#raf) return;
+    this.#raf = requestAnimationFrame(() => {
+      this.#raf = null;
+      this.render();
+    });
+  }
+
+  // ── Bucket value to 0..4 based on scale + data min/max ──
+
+  #buckets() {
+    const values = this.#data.map((d) => Number(d.v) || 0);
+    if (!values.length) return (_) => 0;
+    let min = Math.min(...values);
+    let max = Math.max(...values);
+    if (min === max) return (_) => 4;
+    const scale = this.scale;
+    if (scale === 'log') {
+      const lo = Math.log(Math.max(1, min));
+      const hi = Math.log(Math.max(1, max));
+      return (v) => {
+        const l = Math.log(Math.max(1, Number(v) || 0));
+        const t = (l - lo) / (hi - lo);
+        return Math.min(4, Math.max(0, Math.round(t * 4)));
+      };
+    }
+    if (scale === 'quantile') {
+      const sorted = [...values].sort((a, b) => a - b);
+      const q = (p) => sorted[Math.floor(p * (sorted.length - 1))];
+      const breaks = [q(0.2), q(0.4), q(0.6), q(0.8)];
+      return (v) => {
+        const n = Number(v) || 0;
+        if (n <= breaks[0]) return 0;
+        if (n <= breaks[1]) return 1;
+        if (n <= breaks[2]) return 2;
+        if (n <= breaks[3]) return 3;
+        return 4;
+      };
+    }
+    // linear
+    return (v) => {
+      const n = Number(v) || 0;
+      const t = (n - min) / (max - min);
+      return Math.min(4, Math.max(0, Math.round(t * 4)));
+    };
+  }
+
+  render() {
+    const rows = Math.max(1, this.rows || 7);
+    const cols = Math.max(1, this.cols || 12);
+
+    // Build a map for fast lookup
+    const map = new Map();
+    for (const d of this.#data) {
+      if (d && d.r != null && d.c != null) map.set(`${d.r},${d.c}`, d);
+    }
+    const bucketOf = this.#buckets();
+
+    // ── Outer host layout: clear everything except <title> slot ──
+    // Keep only slotted title children if present.
+    const title = this.querySelector(':scope > [slot="title"]');
+    this.replaceChildren();
+    if (title) this.appendChild(title);
+
+    // ── Optional month-labels row (day-grid mode) ──
+    if (this.type === 'day-grid' && this.startDate) {
+      const labels = document.createElement('div');
+      labels.setAttribute('data-months', '');
+      const start = new Date(this.startDate);
+      if (!Number.isNaN(start.getTime())) {
+        // For day-grid: rows=7 (days of week), cols=weeks. Label months at column
+        // positions where the 1st of the month falls.
+        const marks = [];
+        for (let c = 0; c < cols; c++) {
+          const d = new Date(start);
+          d.setDate(d.getDate() + c * 7);
+          if (c === 0 || d.getDate() <= 7) {
+            marks.push({ col: c, label: MONTHS[d.getMonth()] });
+          }
+        }
+        for (const m of marks) {
+          const span = document.createElement('span');
+          span.setAttribute('data-month-label', '');
+          span.style.gridColumn = String(m.col + 1);
+          span.textContent = m.label;
+          labels.appendChild(span);
+        }
+      }
+      labels.style.gridTemplateColumns = `repeat(${cols}, minmax(0, 1fr))`;
+      this.appendChild(labels);
+    }
+
+    // ── Grid of cells ──
+    const grid = document.createElement('div');
+    grid.setAttribute('data-grid', '');
+    grid.style.gridTemplateColumns = `repeat(${cols}, minmax(0, 1fr))`;
+    grid.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
+    for (let r = 0; r < rows; r++) {
+      for (let c = 0; c < cols; c++) {
+        const d = map.get(`${r},${c}`);
+        const cell = document.createElement('div');
+        cell.setAttribute('data-cell', '');
+        cell.setAttribute('role', 'gridcell');
+        cell.dataset.r = String(r);
+        cell.dataset.c = String(c);
+        if (d != null) {
+          const v = Number(d.v) || 0;
+          const bucket = bucketOf(v);
+          cell.dataset.bucket = String(bucket);
+          cell.dataset.v = String(v);
+          if (d.label) cell.setAttribute('aria-label', d.label);
+        } else {
+          cell.dataset.empty = '';
+        }
+        grid.appendChild(cell);
+      }
+    }
+    this.appendChild(grid);
+
+    // ── Legend ──
+    if (this.legend) {
+      const legend = document.createElement('div');
+      legend.setAttribute('data-legend', '');
+      const less = document.createElement('span');
+      less.setAttribute('data-legend-label', '');
+      less.textContent = 'Less';
+      legend.appendChild(less);
+      for (let i = 0; i < 5; i++) {
+        const swatch = document.createElement('span');
+        swatch.setAttribute('data-legend-swatch', '');
+        swatch.dataset.bucket = String(i);
+        legend.appendChild(swatch);
+      }
+      const more = document.createElement('span');
+      more.setAttribute('data-legend-label', '');
+      more.textContent = 'More';
+      legend.appendChild(more);
+      this.appendChild(legend);
+    }
+  }
+
+  #findCell(target) {
+    return target?.closest?.('[data-cell]');
+  }
+
+  #onHover = (e) => {
+    const cell = this.#findCell(e.target);
+    if (!cell || !cell.dataset.v) return;
+    const r = Number(cell.dataset.r);
+    const c = Number(cell.dataset.c);
+    const v = Number(cell.dataset.v);
+    const label = cell.getAttribute('aria-label') || '';
+    this.dispatchEvent(new CustomEvent('cell-hover', {
+      detail: { r, c, v, label }, bubbles: true,
+    }));
+  };
+
+  #onClick = (e) => {
+    const cell = this.#findCell(e.target);
+    if (!cell || !cell.dataset.v) return;
+    const r = Number(cell.dataset.r);
+    const c = Number(cell.dataset.c);
+    const v = Number(cell.dataset.v);
+    const label = cell.getAttribute('aria-label') || '';
+    this.dispatchEvent(new CustomEvent('cell-click', {
+      detail: { r, c, v, label }, bubbles: true,
+    }));
+  };
+}
+
+customElements.define('heatmap-ui', AdiaHeatmap);
+export { AdiaHeatmap };

package/components/heatmap/heatmap.yaml

@@ -0,0 +1,131 @@
+# 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: AdiaHeatmap
+tag: heatmap-ui
+component: Heatmap
+category: data-display
+version: 1
+description: Grid heatmap with 5-bucket data ramp — supports day-grid (GitHub contributions),
+  matrix, and density modes.
+props:
+  type:
+    description: Heatmap type
+    type: string
+    default: matrix
+    enum:
+      - day-grid
+      - matrix
+      - density
+  aspect:
+    description: Aspect ratio
+    type: string
+    default: wide
+    enum:
+      - square
+      - wide
+  colorScheme:
+    description: Color ramp
+    type: string
+    default: data-ramp
+    enum:
+      - accent
+      - success
+      - warning
+      - data-ramp
+    attribute: color-scheme
+  cols:
+    description: Column count
+    type: number
+    default: 12
+  legend:
+    description: Show Less/More legend strip
+    type: boolean
+    default: true
+  rows:
+    description: Row count
+    type: number
+    default: 7
+  scale:
+    description: Value-to-bucket scale
+    type: string
+    default: linear
+    enum:
+      - linear
+      - log
+      - quantile
+  startDate:
+    description: ISO start date; labels months in day-grid mode
+    type: string
+    default: ""
+    attribute: start-date
+events:
+  cell-click:
+    description: "Fired on cell-click."
+  cell-hover:
+    description: "Fired on cell-hover."
+slots:
+  title:
+    description: "Child content region for the `title` slot."
+states:
+  - name: idle
+    description: Default, ready for interaction.
+traits: []
+tokens: {}
+a2ui:
+  rules: []
+anti_patterns: []
+examples:
+  - name: basic-heatmap
+    description: Basic 7x12 matrix heatmap with random data.
+    a2ui: >-
+      [
+        {
+          "id": "root",
+          "component": "Card",
+          "children": [
+            "sec"
+          ]
+        },
+        {
+          "id": "sec",
+          "component": "Section",
+          "children": [
+            "hm"
+          ]
+        },
+        {
+          "id": "hm",
+          "component": "Heatmap",
+          "type": "matrix",
+          "rows": 7,
+          "cols": 12,
+          "legend": true,
+          "colorScheme": "data-ramp"
+        }
+      ]
+keywords:
+  - heatmap
+  - heat-map
+  - density
+  - matrix
+  - contribution
+  - calendar
+  - grid
+  - intensity
+  - activity
+synonyms:
+  activity:
+    - heatmap
+    - calendar
+    - contribution
+  contribution:
+    - heatmap
+    - calendar
+    - activity
+  density:
+    - heatmap
+    - matrix
+related:
+  - chart
+  - calendar-picker

package/components/icon/icon.a2ui.json

@@ -0,0 +1,79 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://adiaui.dev/a2ui/v0_9/components/Icon.json",
+  "title": "Icon",
+  "description": "SVG icon from the icon registry. Renders inline SVG from getIcon().",
+  "type": "object",
+  "allOf": [
+    {
+      "$ref": "common_types.json#/$defs/ComponentCommon"
+    },
+    {
+      "$ref": "common_types.json#/$defs/CatalogComponentCommon"
+    }
+  ],
+  "properties": {
+    "component": {
+      "const": "Icon"
+    },
+    "label": {
+      "description": "Accessible label. Sets role=img and aria-label.",
+      "type": "string",
+      "default": ""
+    },
+    "name": {
+      "description": "Icon name from registry",
+      "type": "string",
+      "default": ""
+    },
+    "size": {
+      "description": "Icon size. Accepts the named scale (xs/sm/md/lg/xl) or a pixel value as a string (\"12\", \"16\", \"24\", \"32\", \"48\"). Overrides --a-icon-size.",
+      "type": "string",
+      "default": ""
+    }
+  },
+  "required": [
+    "component"
+  ],
+  "unevaluatedProperties": false,
+  "x-adiaui": {
+    "anti_patterns": [],
+    "category": "display",
+    "events": {},
+    "examples": [
+      {
+        "description": "Command palette card with search input and a list of command options.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"Card\",\n    \"children\": [\n      \"hdr\",\n      \"sec\"\n    ]\n  },\n  {\n    \"id\": \"hdr\",\n    \"component\": \"Header\",\n    \"children\": [\n      \"search\"\n    ]\n  },\n  {\n    \"id\": \"search\",\n    \"component\": \"Input\",\n    \"placeholder\": \"Type a command or search...\",\n    \"icon\": \"search\"\n  },\n  {\n    \"id\": \"sec\",\n    \"component\": \"Section\",\n    \"children\": [\n      \"options\"\n    ]\n  },\n  {\n    \"id\": \"options\",\n    \"component\": \"Column\",\n    \"gap\": \"1\",\n    \"children\": [\n      \"opt1\",\n      \"opt2\",\n      \"opt3\",\n      \"opt4\",\n      \"opt5\"\n    ]\n  },\n  {\n    \"id\": \"opt1\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i1\",\n      \"l1\"\n    ]\n  },\n  {\n    \"id\": \"i1\",\n    \"component\": \"Icon\",\n    \"name\": \"file\"\n  },\n  {\n    \"id\": \"l1\",\n    \"component\": \"Text\",\n    \"textContent\": \"Open File\"\n  },\n  {\n    \"id\": \"opt2\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i2\",\n      \"l2\"\n    ]\n  },\n  {\n    \"id\": \"i2\",\n    \"component\": \"Icon\",\n    \"name\": \"gear\"\n  },\n  {\n    \"id\": \"l2\",\n    \"component\": \"Text\",\n    \"textContent\": \"Settings\"\n  },\n  {\n    \"id\": \"opt3\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i3\",\n      \"l3\"\n    ]\n  },\n  {\n    \"id\": \"i3\",\n    \"component\": \"Icon\",\n    \"name\": \"palette\"\n  },\n  {\n    \"id\": \"l3\",\n    \"component\": \"Text\",\n    \"textContent\": \"Change Theme\"\n  },\n  {\n    \"id\": \"opt4\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i4\",\n      \"l4\"\n    ]\n  },\n  {\n    \"id\": \"i4\",\n    \"component\": \"Icon\",\n    \"name\": \"users\"\n  },\n  {\n    \"id\": \"l4\",\n    \"component\": \"Text\",\n    \"textContent\": \"Manage Users\"\n  },\n  {\n    \"id\": \"opt5\",\n    \"component\": \"Row\",\n    \"gap\": \"2\",\n    \"children\": [\n      \"i5\",\n      \"l5\"\n    ]\n  },\n  {\n    \"id\": \"i5\",\n    \"component\": \"Icon\",\n    \"name\": \"sign-out\"\n  },\n  {\n    \"id\": \"l5\",\n    \"component\": \"Text\",\n    \"textContent\": \"Sign Out\"\n  }\n]",
+        "name": "command-palette"
+      },
+      {
+        "description": "Empty state component with icon, heading, description, and call-to-action button.",
+        "a2ui": "[\n  {\n    \"id\": \"root\",\n    \"component\": \"EmptyState\",\n    \"children\": [\n      \"content\"\n    ]\n  },\n  {\n    \"id\": \"content\",\n    \"component\": \"Column\",\n    \"align\": \"center\",\n    \"gap\": \"3\",\n    \"children\": [\n      \"icon\",\n      \"heading\",\n      \"desc\",\n      \"cta\"\n    ]\n  },\n  {\n    \"id\": \"icon\",\n    \"component\": \"Icon\",\n    \"name\": \"inbox\",\n    \"size\": \"xl\"\n  },\n  {\n    \"id\": \"heading\",\n    \"component\": \"Text\",\n    \"variant\": \"heading\",\n    \"textContent\": \"No items yet\"\n  },\n  {\n    \"id\": \"desc\",\n    \"component\": \"Text\",\n    \"variant\": \"body\",\n    \"textContent\": \"Get started by creating your first item. It only takes a moment.\"\n  },\n  {\n    \"id\": \"cta\",\n    \"component\": \"Button\",\n    \"text\": \"Create Item\",\n    \"icon\": \"plus\",\n    \"variant\": \"primary\"\n  }\n]",
+        "name": "empty-state"
+      }
+    ],
+    "keywords": [
+      "icon"
+    ],
+    "name": "AdiaIcon",
+    "related": [
+      "input",
+      "empty-state",
+      "button",
+      "badge",
+      "slider"
+    ],
+    "slots": {},
+    "states": [
+      {
+        "description": "Default, ready for interaction.",
+        "name": "idle"
+      }
+    ],
+    "synonyms": {},
+    "tag": "icon-ui",
+    "tokens": {},
+    "traits": [],
+    "version": 1
+  }
+}

package/components/icon/icon.css

@@ -0,0 +1,20 @@
+@scope (icon-ui) {
+  :where(:scope) {
+    --icon-size: var(--a-icon-size, calc(1em + 0.125rem));
+  }
+
+  :scope {
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--icon-size);
+    height: var(--icon-size);
+    flex-shrink: 0;
+    line-height: 0;
+  }
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}

package/components/icon/icon.js

@@ -0,0 +1,26 @@
+import { AdiaElement, signal, html } from '@core/element.js';
+import { getIcon } from '@core/icons.js';
+
+class AdiaIcon extends AdiaElement {
+  static properties = {
+    name:   { type: String, default: '',        reflect: true },
+    size:   { type: String, default: '',        reflect: true },
+    label:  { type: String, default: '',        reflect: true },
+    /** regular | thin | light | bold | fill | duotone */
+    weight: { type: String, default: 'regular', reflect: true },
+  };
+
+  connected() {
+    this.setAttribute('role', this.label ? 'img' : 'presentation');
+    if (!this.label) this.setAttribute('aria-hidden', 'true');
+  }
+
+  render() {
+    if (this.label) this.setAttribute('aria-label', this.label);
+    const svg = getIcon(this.name, this.weight || 'regular');
+    if (svg && this.innerHTML !== svg) this.innerHTML = svg;
+  }
+}
+customElements.define('icon-ui', AdiaIcon);
+
+export { AdiaIcon };