@cognivo/components 0.8.0

package/dist/components/ai-heatmap/ai-heatmap.js

@@ -0,0 +1,250 @@
+import { css as _, LitElement as y, html as b, nothing as f, svg as v } from "lit";
+import { property as u, state as w, customElement as C } from "lit/decorators.js";
+import { h as M, r as L, f as z } from "../../chunks/premium.css-9I4kHrsl.js";
+var k = Object.defineProperty, S = Object.getOwnPropertyDescriptor, d = (a, e, t, r) => {
+  for (var o = r > 1 ? void 0 : r ? S(e, t) : e, g = a.length - 1, h; g >= 0; g--)
+    (h = a[g]) && (o = (r ? h(e, t, o) : h(o)) || o);
+  return r && o && k(e, t, o), o;
+};
+let l = class extends y {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.data = [], this.rowLabels = [], this.colLabels = [], this.colorScale = "sequential", this.showValues = !0, this.title = "", this._tooltip = null, this._cellSize = 40, this._labelMarginLeft = 80, this._labelMarginTop = 40;
+  }
+  get _flatValues() {
+    return this.data.flat();
+  }
+  get _min() {
+    return Math.min(...this._flatValues);
+  }
+  get _max() {
+    return Math.max(...this._flatValues);
+  }
+  /**
+   * Compute cell fill color algorithmically.
+   * Uses hardcoded RGB values because heatmap gradients must be computed per-value —
+   * CSS custom properties can't be interpolated numerically in JS.
+   * Dark neutral: rgb(39,39,42) matches --cg-gray-800 (#27272a).
+   */
+  _getColor(a) {
+    if (this.colorScale === "diverging") {
+      const h = Math.max(Math.abs(this._min), Math.abs(this._max));
+      if (h === 0) return "rgb(39, 39, 42)";
+      const i = Math.max(-1, Math.min(1, a / h));
+      if (i < 0) {
+        const p = -i, m = Math.round(39 + 209 * p), $ = Math.round(39 + 74 * p), x = Math.round(42 + 71 * p);
+        return `rgb(${m}, ${$}, ${x})`;
+      }
+      const s = Math.round(39 + 35 * i), n = Math.round(39 + 183 * i), c = Math.round(42 + 86 * i);
+      return `rgb(${s}, ${n}, ${c})`;
+    }
+    const e = this._max - this._min || 1, t = (a - this._min) / e, r = Math.round(39 + 184 * t), o = Math.round(39 + 216 * t), g = Math.round(46 + 51 * t);
+    return `rgb(${r}, ${o}, ${g})`;
+  }
+  /** Contrast text color — dark on bright cells, light on dark cells. */
+  _getTextColor(a) {
+    const e = this._max - this._min || 1;
+    return (a - this._min) / e > 0.6 ? "rgb(0, 0, 0)" : "rgb(250, 250, 250)";
+  }
+  _handleCellClick(a, e) {
+    this.dispatchEvent(new CustomEvent("ai-heatmap-cell-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: {
+        row: a,
+        col: e,
+        rowLabel: this.rowLabels[a] || `Row ${a}`,
+        colLabel: this.colLabels[e] || `Col ${e}`,
+        value: this.data[a][e]
+      }
+    }));
+  }
+  _handleCellHover(a, e, t) {
+    const r = a.target.getBoundingClientRect(), o = this.getBoundingClientRect();
+    this._tooltip = {
+      x: r.left - o.left + r.width / 2,
+      y: r.top - o.top - 8,
+      row: this.rowLabels[e] || `Row ${e}`,
+      col: this.colLabels[t] || `Col ${t}`,
+      value: this.data[e][t]
+    };
+  }
+  _handleCellLeave() {
+    this._tooltip = null;
+  }
+  render() {
+    if (this.data.length === 0)
+      return b`<div class="container"><div class="empty">No data provided</div></div>`;
+    const a = this.data.length, e = this.data[0]?.length || 0, t = this._cellSize, r = this._labelMarginLeft, o = this._labelMarginTop, g = r + e * t, h = o + a * t;
+    return b`
+      <div class="container">
+        ${this.title ? b`<div class="title">${this.title}</div>` : f}
+
+        <svg width="${g}" height="${h}" role="grid" aria-label=${`${this.title || "Heatmap"}: ${this.data.length} rows by ${this.data[0]?.length ?? 0} columns`}>
+          <!-- Column labels -->
+          ${this.colLabels.map((i, s) => v`
+            <text class="axis-label" x="${r + s * t + t / 2}" y="${o - 8}"
+              text-anchor="middle" font-size="10">${i}</text>
+          `)}
+
+          <!-- Row labels -->
+          ${this.rowLabels.map((i, s) => v`
+            <text class="axis-label" x="${r - 8}" y="${o + s * t + t / 2 + 4}"
+              text-anchor="end" font-size="10">${i}</text>
+          `)}
+
+          <!-- Cells -->
+          ${this.data.map((i, s) => i.map((n, c) => v`
+            <rect class="cell" tabindex="0" role="gridcell"
+              aria-label="${this.rowLabels[s] || `Row ${s}`}, ${this.colLabels[c] || `Col ${c}`}: ${n}"
+              x="${r + c * t}" y="${o + s * t}"
+              width="${t - 1}" height="${t - 1}" rx="3"
+              fill="${this._getColor(n)}"
+              @click=${() => this._handleCellClick(s, c)}
+              @mouseenter=${(p) => this._handleCellHover(p, s, c)}
+              @mouseleave=${this._handleCellLeave}
+              @keydown=${(p) => {
+      p.key === "Enter" && this._handleCellClick(s, c);
+    }}
+            ></rect>
+            ${this.showValues ? v`
+              <text class="cell-text" x="${r + c * t + t / 2}" y="${o + s * t + t / 2 + 4}"
+                text-anchor="middle" font-size="10" fill="${this._getTextColor(n)}">${typeof n == "number" && !Number.isInteger(n) ? n.toFixed(1) : n}</text>
+            ` : f}
+          `))}
+        </svg>
+
+        ${this._tooltip ? b`
+          <div class="tooltip" style="left: ${this._tooltip.x}px; top: ${this._tooltip.y}px; transform: translateX(-50%) translateY(-100%);">
+            <span class="tooltip-row">${this._tooltip.row} × ${this._tooltip.col}</span>
+            <span class="tooltip-value">${this._tooltip.value}</span>
+          </div>
+        ` : f}
+
+        <div class="legend" aria-hidden="true">
+          <span>${this._min}</span>
+          <div class="legend-bar" style="background: linear-gradient(90deg, ${this._getColor(this._min)}, ${this._getColor(this._max)});"></div>
+          <span>${this._max}</span>
+        </div>
+      </div>
+    `;
+  }
+};
+l.styles = [M, L, z, _`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;
+    }
+
+    .container {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      padding: var(--cg-spacing-16);
+      overflow: auto;
+      position: relative;
+    }
+
+    .title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+      margin-bottom: var(--cg-spacing-12);
+    }
+
+    svg { display: block; }
+
+    .cell {
+      cursor: pointer;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .cell:hover { opacity: 0.85; stroke: var(--cg-color-surface-base-text); stroke-width: 1.5; }
+    .cell:focus-visible {
+      outline: none;
+      stroke: var(--cg-color-focus-ring);
+      stroke-width: 2;
+    }
+
+    .cell-text {
+      font-family: var(--cg-font-family-mono);
+      pointer-events: none;
+    }
+
+    .axis-label {
+      font-size: var(--cg-font-size-xs);
+      fill: var(--cg-color-input-text-placeholder);
+    }
+
+    /* Tooltip */
+    .tooltip {
+      position: absolute;
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      padding: var(--cg-spacing-6) var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-base-text);
+      pointer-events: none;
+      z-index: 10;
+      white-space: nowrap;
+    }
+    .tooltip-row { display: block; }
+    .tooltip-value { font-weight: var(--cg-font-weight-bold); color: var(--cg-color-surface-base-text); }
+
+    /* Legend */
+    .legend {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      margin-top: var(--cg-spacing-12);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+    }
+    .legend-bar {
+      height: var(--cg-spacing-8);
+      width: var(--cg-spacing-80);
+      border-radius: var(--cg-border-radius-50);
+    }
+
+    .empty {
+      text-align: center;
+      padding: var(--cg-spacing-24);
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-sm);
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) .container { border-radius: 0; }
+    :host([rounded="sm"]) .container { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .container { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .container { border-radius: var(--cg-border-radius-150); }
+  `];
+d([
+  u({ reflect: !0 })
+], l.prototype, "rounded", 2);
+d([
+  u({ type: Array })
+], l.prototype, "data", 2);
+d([
+  u({ type: Array })
+], l.prototype, "rowLabels", 2);
+d([
+  u({ type: Array })
+], l.prototype, "colLabels", 2);
+d([
+  u({ type: String })
+], l.prototype, "colorScale", 2);
+d([
+  u({ type: Boolean })
+], l.prototype, "showValues", 2);
+d([
+  u({ type: String })
+], l.prototype, "title", 2);
+d([
+  w()
+], l.prototype, "_tooltip", 2);
+l = d([
+  C("ai-heatmap")
+], l);
+export {
+  l as AiHeatmap
+};
+//# sourceMappingURL=ai-heatmap.js.map

package/dist/components/ai-heatmap/ai-heatmap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-heatmap.js","sources":["../../../src/components/ai-heatmap/ai-heatmap.ts"],"sourcesContent":["/**\n * @element ai-heatmap\n * SVG matrix heatmap for confusion matrices, correlations, or feature importance with hover tooltips.\n *\n * @example\n * ```html\n * <ai-heatmap\n *   title=\"Confusion Matrix\"\n *   .data=${[[45,5],[3,47]]}\n *   .rowLabels=${['Cat','Dog']}\n *   .colLabels=${['Pred Cat','Pred Dog']}\n *   colorScale=\"sequential\"\n *   showValues\n * ></ai-heatmap>\n * ```\n *\n * @fires {CustomEvent<{row, col, value}>} ai-heatmap-cell-click - Cell clicked\n */\nimport { LitElement, html, css, svg, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-heatmap')\nexport class AiHeatmap extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;\n    }\n\n    .container {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      padding: var(--cg-spacing-16);\n      overflow: auto;\n      position: relative;\n    }\n\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    svg { display: block; }\n\n    .cell {\n      cursor: pointer;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .cell:hover { opacity: 0.85; stroke: var(--cg-color-surface-base-text); stroke-width: 1.5; }\n    .cell:focus-visible {\n      outline: none;\n      stroke: var(--cg-color-focus-ring);\n      stroke-width: 2;\n    }\n\n    .cell-text {\n      font-family: var(--cg-font-family-mono);\n      pointer-events: none;\n    }\n\n    .axis-label {\n      font-size: var(--cg-font-size-xs);\n      fill: var(--cg-color-input-text-placeholder);\n    }\n\n    /* Tooltip */\n    .tooltip {\n      position: absolute;\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-6) var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-base-text);\n      pointer-events: none;\n      z-index: 10;\n      white-space: nowrap;\n    }\n    .tooltip-row { display: block; }\n    .tooltip-value { font-weight: var(--cg-font-weight-bold); color: var(--cg-color-surface-base-text); }\n\n    /* Legend */\n    .legend {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-12);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .legend-bar {\n      height: var(--cg-spacing-8);\n      width: var(--cg-spacing-80);\n      border-radius: var(--cg-border-radius-50);\n    }\n\n    .empty {\n      text-align: center;\n      padding: var(--cg-spacing-24);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .container { border-radius: 0; }\n    :host([rounded=\"sm\"]) .container { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .container { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .container { border-radius: var(--cg-border-radius-150); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  /** 2D data array (rows × cols) */\n  @property({ type: Array }) data: number[][] = [];\n  /** Row labels */\n  @property({ type: Array }) rowLabels: string[] = [];\n  /** Column labels */\n  @property({ type: Array }) colLabels: string[] = [];\n  /** Color scale: sequential (min→max) or diverging (neg→zero→pos) */\n  @property({ type: String }) colorScale: 'sequential' | 'diverging' = 'sequential';\n  /** Show values in cells */\n  @property({ type: Boolean }) showValues: boolean = true;\n  /** Title */\n  @property({ type: String }) override title: string = '';\n\n  @state() private _tooltip: { x: number; y: number; row: string; col: string; value: number } | null = null;\n\n  private _cellSize = 40;\n  private _labelMarginLeft = 80;\n  private _labelMarginTop = 40;\n\n  private get _flatValues(): number[] {\n    return this.data.flat();\n  }\n\n  private get _min(): number { return Math.min(...this._flatValues); }\n  private get _max(): number { return Math.max(...this._flatValues); }\n\n  /**\n   * Compute cell fill color algorithmically.\n   * Uses hardcoded RGB values because heatmap gradients must be computed per-value —\n   * CSS custom properties can't be interpolated numerically in JS.\n   * Dark neutral: rgb(39,39,42) matches --cg-gray-800 (#27272a).\n   */\n  private _getColor(value: number): string {\n    if (this.colorScale === 'diverging') {\n      const absMax = Math.max(Math.abs(this._min), Math.abs(this._max));\n      if (absMax === 0) return 'rgb(39, 39, 42)';\n      const t = Math.max(-1, Math.min(1, value / absMax));\n      if (t < 0) {\n        const s = -t;\n        const r = Math.round(39 + (248 - 39) * s);\n        const g = Math.round(39 + (113 - 39) * s);\n        const b = Math.round(42 + (113 - 42) * s);\n        return `rgb(${r}, ${g}, ${b})`;\n      }\n      const r = Math.round(39 + (74 - 39) * t);\n      const g = Math.round(39 + (222 - 39) * t);\n      const b = Math.round(42 + (128 - 42) * t);\n      return `rgb(${r}, ${g}, ${b})`;\n    }\n\n    // Sequential: dark → lime (matches --cg-brand-ai-accent range)\n    const range = this._max - this._min || 1;\n    const t = (value - this._min) / range;\n    const r = Math.round(39 + (223 - 39) * t);\n    const g = Math.round(39 + (255 - 39) * t);\n    const b = Math.round(46 + (97 - 46) * t);\n    return `rgb(${r}, ${g}, ${b})`;\n  }\n\n  /** Contrast text color — dark on bright cells, light on dark cells. */\n  private _getTextColor(value: number): string {\n    const range = this._max - this._min || 1;\n    const t = (value - this._min) / range;\n    return t > 0.6 ? 'rgb(0, 0, 0)' : 'rgb(250, 250, 250)';\n  }\n\n  private _handleCellClick(row: number, col: number) {\n    this.dispatchEvent(new CustomEvent('ai-heatmap-cell-click', {\n      bubbles: true, composed: true,\n      detail: {\n        row, col,\n        rowLabel: this.rowLabels[row] || `Row ${row}`,\n        colLabel: this.colLabels[col] || `Col ${col}`,\n        value: this.data[row]![col]!,\n      },\n    }));\n  }\n\n  private _handleCellHover(e: MouseEvent, row: number, col: number) {\n    const rect = (e.target as SVGElement).getBoundingClientRect();\n    const hostRect = this.getBoundingClientRect();\n    this._tooltip = {\n      x: rect.left - hostRect.left + rect.width / 2,\n      y: rect.top - hostRect.top - 8,\n      row: this.rowLabels[row] || `Row ${row}`,\n      col: this.colLabels[col] || `Col ${col}`,\n      value: this.data[row]![col]!,\n    };\n  }\n\n  private _handleCellLeave() { this._tooltip = null; }\n\n  override render() {\n    if (this.data.length === 0) {\n      return html`<div class=\"container\"><div class=\"empty\">No data provided</div></div>`;\n    }\n\n    const rows = this.data.length;\n    const cols = this.data[0]?.length || 0;\n    const cs = this._cellSize;\n    const ml = this._labelMarginLeft;\n    const mt = this._labelMarginTop;\n    const svgW = ml + cols * cs;\n    const svgH = mt + rows * cs;\n\n    return html`\n      <div class=\"container\">\n        ${this.title ? html`<div class=\"title\">${this.title}</div>` : nothing}\n\n        <svg width=\"${svgW}\" height=\"${svgH}\" role=\"grid\" aria-label=${`${this.title || 'Heatmap'}: ${this.data.length} rows by ${this.data[0]?.length ?? 0} columns`}>\n          <!-- Column labels -->\n          ${this.colLabels.map((label, i) => svg`\n            <text class=\"axis-label\" x=\"${ml + i * cs + cs / 2}\" y=\"${mt - 8}\"\n              text-anchor=\"middle\" font-size=\"10\">${label}</text>\n          `)}\n\n          <!-- Row labels -->\n          ${this.rowLabels.map((label, i) => svg`\n            <text class=\"axis-label\" x=\"${ml - 8}\" y=\"${mt + i * cs + cs / 2 + 4}\"\n              text-anchor=\"end\" font-size=\"10\">${label}</text>\n          `)}\n\n          <!-- Cells -->\n          ${this.data.map((row, ri) => row.map((val, ci) => svg`\n            <rect class=\"cell\" tabindex=\"0\" role=\"gridcell\"\n              aria-label=\"${this.rowLabels[ri] || `Row ${ri}`}, ${this.colLabels[ci] || `Col ${ci}`}: ${val}\"\n              x=\"${ml + ci * cs}\" y=\"${mt + ri * cs}\"\n              width=\"${cs - 1}\" height=\"${cs - 1}\" rx=\"3\"\n              fill=\"${this._getColor(val)}\"\n              @click=${() => this._handleCellClick(ri, ci)}\n              @mouseenter=${(e: MouseEvent) => this._handleCellHover(e, ri, ci)}\n              @mouseleave=${this._handleCellLeave}\n              @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter') this._handleCellClick(ri, ci); }}\n            ></rect>\n            ${this.showValues ? svg`\n              <text class=\"cell-text\" x=\"${ml + ci * cs + cs / 2}\" y=\"${mt + ri * cs + cs / 2 + 4}\"\n                text-anchor=\"middle\" font-size=\"10\" fill=\"${this._getTextColor(val)}\">${typeof val === 'number' && !Number.isInteger(val) ? val.toFixed(1) : val}</text>\n            ` : nothing}\n          `))}\n        </svg>\n\n        ${this._tooltip ? html`\n          <div class=\"tooltip\" style=\"left: ${this._tooltip.x}px; top: ${this._tooltip.y}px; transform: translateX(-50%) translateY(-100%);\">\n            <span class=\"tooltip-row\">${this._tooltip.row} × ${this._tooltip.col}</span>\n            <span class=\"tooltip-value\">${this._tooltip.value}</span>\n          </div>\n        ` : nothing}\n\n        <div class=\"legend\" aria-hidden=\"true\">\n          <span>${this._min}</span>\n          <div class=\"legend-bar\" style=\"background: linear-gradient(90deg, ${this._getColor(this._min)}, ${this._getColor(this._max)});\"></div>\n          <span>${this._max}</span>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiHeatmap","LitElement","value","absMax","t","s","r","g","b","range","row","col","e","rect","hostRect","html","rows","cols","cs","ml","mt","svgW","svgH","nothing","label","i","svg","ri","val","ci","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-insight-card/ai-insight-card.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, nothing } from 'lit';
+interface Source {
+    title: string;
+    url?: string;
+    relevance?: number;
+}
+export declare class AiInsightCard extends LitElement {
+    static styles: import('lit').CSSResult[];
+    type: 'explanation' | 'forecast' | 'anomaly' | 'optimization' | 'classification';
+    text: string;
+    confidence: number;
+    timestamp: string;
+    expandable: boolean;
+    expanded: boolean;
+    sources: Source[];
+    status: 'new' | 'read' | 'dismissed' | '';
+    loading: boolean;
+    selected: boolean;
+    private _getIconName;
+    private _handleClick;
+    private _handleDismiss;
+    private _handleBookmark;
+    private _handleKeyDown;
+    private _relevanceClass;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}
+export {};
+//# sourceMappingURL=ai-insight-card.d.ts.map

package/dist/components/ai-insight-card/ai-insight-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-insight-card.d.ts","sourceRoot":"","sources":["../../../src/components/ai-insight-card/ai-insight-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AACH,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,UAAU,MAAM;IACd,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAgMnB;IAES,IAAI,EAAE,aAAa,GAAG,UAAU,GAAG,SAAS,GAAG,cAAc,GAAG,gBAAgB,CAAiB;IACjG,IAAI,SAAM;IACM,UAAU,SAAK;IAC/B,SAAS,SAAM;IACE,UAAU,UAAS;IACnB,QAAQ,UAAS;IACnB,OAAO,EAAE,MAAM,EAAE,CAAM;IACtC,MAAM,EAAE,KAAK,GAAG,MAAM,GAAG,WAAW,GAAG,EAAE,CAAM;IAC9B,OAAO,UAAS;IAChB,QAAQ,UAAS;IAE9C,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,eAAe;IAKd,MAAM;CAyDhB"}

package/dist/components/ai-insight-card/ai-insight-card.js

@@ -0,0 +1,319 @@
+import { css as u, LitElement as p, html as t, nothing as o } from "lit";
+import { property as i, customElement as v } from "lit/decorators.js";
+import { h, r as b, b as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, r = (e, c, d, n) => {
+  for (var s = n > 1 ? void 0 : n ? x(c, d) : c, l = e.length - 1, g; l >= 0; l--)
+    (g = e[l]) && (s = (n ? g(c, d, s) : g(s)) || s);
+  return n && s && m(c, d, s), s;
+};
+let a = class extends p {
+  constructor() {
+    super(...arguments), this.type = "explanation", this.text = "", this.confidence = 0, this.timestamp = "", this.expandable = !1, this.expanded = !1, this.sources = [], this.status = "", this.loading = !1, this.selected = !1;
+  }
+  _getIconName() {
+    return {
+      explanation: "info",
+      forecast: "chart",
+      anomaly: "warning",
+      optimization: "sparkle",
+      classification: "filter"
+    }[this.type] || "info";
+  }
+  _handleClick() {
+    this.expandable && (this.expanded = !this.expanded, this.dispatchEvent(new CustomEvent("ai-insight-expand", { bubbles: !0, composed: !0, detail: { expanded: this.expanded, type: this.type } }))), this.dispatchEvent(new CustomEvent("ai-insight-click", { bubbles: !0, composed: !0, detail: { type: this.type, text: this.text, confidence: this.confidence } }));
+  }
+  _handleDismiss(e) {
+    e.stopPropagation(), this.dispatchEvent(new CustomEvent("ai-insight-dismiss", { bubbles: !0, composed: !0, detail: { type: this.type, text: this.text } }));
+  }
+  _handleBookmark(e) {
+    e.stopPropagation(), this.dispatchEvent(new CustomEvent("ai-insight-bookmark", { bubbles: !0, composed: !0, detail: { type: this.type, text: this.text } }));
+  }
+  _handleKeyDown(e) {
+    (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._handleClick());
+  }
+  _relevanceClass(e) {
+    return e ? e >= 0.7 ? "high" : e >= 0.4 ? "medium" : "low" : "low";
+  }
+  render() {
+    return this.loading ? t`
+        <div class="skeleton" aria-label="Loading insight">
+          <div class="skel-icon"></div>
+          <div class="skel-lines"><div class="skel-line"></div><div class="skel-line"></div><div class="skel-line"></div></div>
+        </div>
+      ` : this.text ? t`
+      <div class="card ${this.expanded ? "expanded" : ""} ${this.selected ? "selected" : ""}"
+        role="article" tabindex="0" aria-label="${this.type} insight"
+        aria-expanded=${this.expandable ? String(this.expanded) : o}
+        @click=${this._handleClick} @keydown=${this._handleKeyDown}>
+
+        ${this.status && this.status !== "dismissed" ? t`<div class="status-dot ${this.status}" aria-hidden="true"></div>` : o}
+
+        <div class="actions">
+          <cg-button variant="tertiary" size="sm" rounded="full" label="Bookmark" @click=${this._handleBookmark}>
+            <cg-icon name="star" size="xs"></cg-icon>
+          </cg-button>
+          <cg-button variant="tertiary" size="sm" rounded="full" label="Dismiss" @click=${this._handleDismiss}>
+            <cg-icon name="close" size="xs"></cg-icon>
+          </cg-button>
+        </div>
+
+        <div class="icon-area ${this.type}" aria-hidden="true"><cg-icon name="${this._getIconName()}" size="sm"></cg-icon></div>
+
+        <div class="content">
+          <div class="type-label">${this.type}</div>
+          <div class="insight-text">${this.text}</div>
+
+          <div class="meta">
+            ${this.confidence > 0 ? t`<span class="confidence">${Math.round(this.confidence * 100)}%</span>` : o}
+            ${this.confidence > 0 && this.timestamp ? t`<span class="meta-dot"></span>` : o}
+            ${this.timestamp ? t`<span>${this.timestamp}</span>` : o}
+            ${(this.confidence > 0 || this.timestamp) && this.sources.length > 0 ? t`<span class="meta-dot"></span>` : o}
+            ${this.sources.length > 0 ? t`<span>${this.sources.length} source${this.sources.length > 1 ? "s" : ""}</span>` : o}
+          </div>
+
+          ${this.expanded && this.sources.length > 0 ? t`
+            <div class="detail">
+              <div class="sources-label">Sources</div>
+              ${this.sources.map((e) => t`
+                <div class="source">
+                  <div class="source-dot ${this._relevanceClass(e.relevance)}"></div>
+                  ${e.url ? t`<a href="${e.url}" target="_blank" rel="noopener">${e.title}</a>` : t`<span>${e.title}</span>`}
+                </div>
+              `)}
+            </div>
+          ` : o}
+        </div>
+      </div>
+    ` : o;
+  }
+};
+a.styles = [h, b, f, u`
+    :host { display: block; }
+
+    .card {
+      display: flex;
+      gap: var(--cg-spacing-16);
+      padding: var(--cg-spacing-20);
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      cursor: pointer;
+      position: relative;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .card:hover {
+      border-color: var(--cg-color-surface-cards-hover-border);
+      transform: translateY(-1px);
+    }
+    .card:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .card:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .card:focus-within .actions { opacity: 1; }
+    .card.selected {
+      border-color: var(--cg-color-action-primary-background-default);
+      background: var(--cg-overlay-accent-subtle);
+    }
+
+    /* ── Status dot ── */
+    .status-dot {
+      position: absolute;
+      top: var(--cg-spacing-12);
+      right: var(--cg-spacing-12);
+      width: var(--cg-spacing-6);
+      height: var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+    }
+    .status-dot.new { background: var(--cg-color-action-primary-background-default); }
+    .status-dot.read { background: var(--cg-color-input-text-placeholder); }
+
+    /* ── Icon ── */
+    .icon-area {
+      width: var(--cg-spacing-40);
+      height: var(--cg-spacing-40);
+      border-radius: var(--cg-border-radius-full);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .icon-area svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }
+    .icon-area.explanation { background: var(--cg-color-status-info-background-default); border: var(--cg-border-width-50) solid var(--cg-color-status-info-border-default); color: var(--cg-color-status-info-text-default); }
+    .icon-area.forecast { background: var(--cg-overlay-accent-light); border: var(--cg-border-width-50) solid var(--cg-overlay-accent-medium); color: var(--cg-color-surface-base-text); }
+    .icon-area.anomaly { background: var(--cg-color-status-error-background-default); border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default); color: var(--cg-color-status-error-text-default); }
+    .icon-area.optimization { background: var(--cg-color-status-warning-background-default); border: var(--cg-border-width-50) solid var(--cg-color-status-warning-border-default); color: var(--cg-color-status-warning-text-default); }
+    .icon-area.classification { background: var(--cg-color-status-success-background-default); border: var(--cg-border-width-50) solid var(--cg-color-status-success-border-default); color: var(--cg-color-status-success-text-default); }
+
+    .content { flex: 1; min-width: 0; }
+
+    .type-label {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      color: var(--cg-color-input-text-placeholder);
+      margin-bottom: var(--cg-spacing-4);
+    }
+
+    .insight-text {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-normal);
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .card.expanded .insight-text {
+      -webkit-line-clamp: unset;
+      display: block;
+    }
+
+    /* ── Meta row ── */
+    .meta {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      margin-top: var(--cg-spacing-12);
+      padding-top: var(--cg-spacing-8);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+    }
+    .meta-dot {
+      width: var(--cg-spacing-2);
+      height: var(--cg-spacing-2);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-input-text-placeholder);
+    }
+    .confidence { font-weight: var(--cg-font-weight-medium); }
+
+    /* ── Expanded detail ── */
+    .detail {
+      margin-top: var(--cg-spacing-12);
+      padding-top: var(--cg-spacing-12);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      animation: detailReveal var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+    @keyframes detailReveal {
+      from { opacity: 0; transform: translateY(-4px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .sources-label {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-input-text-placeholder);
+      margin-bottom: var(--cg-spacing-8);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+    .source {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      padding: var(--cg-spacing-4) 0;
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+    }
+    .source a {
+      color: var(--cg-color-surface-base-text);
+      text-decoration: none;
+      font-weight: var(--cg-font-weight-medium);
+    }
+    .source a:hover { text-decoration: underline; }
+    .source a:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      border-radius: var(--cg-border-radius-50);
+    }
+    .source-dot { width: var(--cg-spacing-4); height: var(--cg-spacing-4); border-radius: var(--cg-border-radius-full); flex-shrink: 0; }
+    .source-dot.high { background: var(--cg-color-status-success-text-default); }
+    .source-dot.medium { background: var(--cg-color-status-warning-text-default); }
+    .source-dot.low { background: var(--cg-color-input-text-placeholder); }
+
+    /* ── Action buttons ── */
+    .actions {
+      display: flex;
+      gap: var(--cg-spacing-4);
+      position: absolute;
+      top: var(--cg-spacing-8);
+      right: var(--cg-spacing-8);
+      opacity: 0;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .card:hover .actions { opacity: 1; }
+
+    /* ── Skeleton ── */
+    .skeleton {
+      display: flex;
+      gap: var(--cg-spacing-16);
+      padding: var(--cg-spacing-20);
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+    }
+    .skel-icon {
+      width: var(--cg-spacing-40); height: var(--cg-spacing-40);
+      border-radius: var(--cg-border-radius-50);
+      background: linear-gradient(90deg, var(--cg-color-surface-container-background) 25%, var(--cg-color-surface-container-border) 50%, var(--cg-color-surface-container-background) 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s linear infinite;
+    }
+    .skel-lines { flex: 1; display: flex; flex-direction: column; gap: var(--cg-spacing-8); }
+    .skel-line {
+      height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-50);
+      background: linear-gradient(90deg, var(--cg-color-surface-container-background) 25%, var(--cg-color-surface-container-border) 50%, var(--cg-color-surface-container-background) 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s linear infinite;
+    }
+    .skel-line:nth-child(1) { width: 40%; }
+    .skel-line:nth-child(2) { width: 90%; }
+    .skel-line:nth-child(3) { width: 60%; }
+
+    @media (prefers-reduced-motion: reduce) {
+      .card:hover { transform: none; }
+      .detail { animation: none; }
+    }
+  `];
+r([
+  i()
+], a.prototype, "type", 2);
+r([
+  i()
+], a.prototype, "text", 2);
+r([
+  i({ type: Number })
+], a.prototype, "confidence", 2);
+r([
+  i()
+], a.prototype, "timestamp", 2);
+r([
+  i({ type: Boolean })
+], a.prototype, "expandable", 2);
+r([
+  i({ type: Boolean })
+], a.prototype, "expanded", 2);
+r([
+  i({ type: Array })
+], a.prototype, "sources", 2);
+r([
+  i()
+], a.prototype, "status", 2);
+r([
+  i({ type: Boolean })
+], a.prototype, "loading", 2);
+r([
+  i({ type: Boolean })
+], a.prototype, "selected", 2);
+a = r([
+  v("ai-insight-card")
+], a);
+export {
+  a as AiInsightCard
+};
+//# sourceMappingURL=ai-insight-card.js.map