@cognivo/components 0.8.0 → 0.8.2

package/dist/components/ai-chart-summary/ai-chart-summary.js

@@ -1,13 +1,10 @@
-import { css as p, LitElement as h, html as s, nothing as c } from "lit";
-import { property as i, state as u, customElement as v } from "lit/decorators.js";
-import { h as m, r as f, b } from "../../chunks/premium.css-9I4kHrsl.js";
-import "../cg-icon/cg-icon.js";
-import "../cg-button/cg-button.js";
-import "../ai-confidence-badge/ai-confidence-badge.js";
-var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, a = (t, e, l, n) => {
-  for (var o = n > 1 ? void 0 : n ? x(e, l) : e, d = t.length - 1, g; d >= 0; d--)
-    (g = t[d]) && (o = (n ? g(e, l, o) : g(o)) || o);
-  return n && o && y(e, l, o), o;
+import { css as g, LitElement as h, html as e, nothing as s } from "lit";
+import { property as o, state as v, customElement as u } from "lit/decorators.js";
+import { h as m, r as f, b } from "../../chunks/premium.css-DHekUEUt.js";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, t = (n, a, l, c) => {
+  for (var i = c > 1 ? void 0 : c ? x(a, l) : a, d = n.length - 1, p; d >= 0; d--)
+    (p = n[d]) && (i = (c ? p(a, l, i) : p(i)) || i);
+  return c && i && y(a, l, i), i;
 };
 let r = class extends h {
   constructor() {
@@ -16,92 +13,77 @@ let r = class extends h {
   _toggle() {
     this._collapsed = !this._collapsed, this.dispatchEvent(new CustomEvent("ai-summary-toggle", { bubbles: !0, composed: !0, detail: { collapsed: this._collapsed } }));
   }
-  _handleTrendClick(t) {
-    this.dispatchEvent(new CustomEvent("ai-summary-trend-click", { bubbles: !0, composed: !0, detail: t }));
+  _handleTrendClick(n) {
+    this.dispatchEvent(new CustomEvent("ai-summary-trend-click", { bubbles: !0, composed: !0, detail: n }));
   }
   _handleRefresh() {
     this.dispatchEvent(new CustomEvent("ai-summary-refresh", { bubbles: !0, composed: !0 }));
   }
-  _trendIcon(t) {
-    return t === "up" ? "arrow-up" : t === "down" ? "arrow-down" : "minus";
-  }
   render() {
     if (this.loading)
-      return s`
+      return e`
         <div class="card">
           <div class="header">
             <span class="ai-dot"></span>
             <span class="header-label">AI Insight</span>
           </div>
+          <div class="skel skel-line" style="width:100%"></div>
+          <div class="skel skel-line"></div>
           <div class="skel skel-line"></div>
-          <div class="skel skel-line short"></div>
-          <div class="skel skel-line shorter"></div>
         </div>
       `;
-    if (!this.summary) return c;
-    const t = this.confidence > 0 || this.type !== "summary";
-    return s`
-      <div class="card ${this._collapsed ? "collapsed" : ""}" aria-label="AI chart insight">
+    if (!this.summary) return s;
+    const n = this.confidence > 0 || this.type !== "summary";
+    return e`
+      <div class="card ${this._collapsed ? "collapsed" : ""}" role="complementary" aria-label="AI chart insight">
         <div class="header">
-          <span class="ai-dot" aria-hidden="true"></span>
+          <span class="ai-dot"></span>
           <span class="header-label">AI Insight</span>
           <div class="header-right">
-            ${this.timeRange ? s`<span class="time-range">${this.timeRange}</span>` : c}
-            <cg-button variant="tertiary" size="sm" @click=${this._handleRefresh} aria-label="Refresh insight">
-              <cg-icon name="refresh" size="xs"></cg-icon>
-            </cg-button>
-            ${this.collapsible ? s`
-              <cg-button
-                variant="tertiary"
-                size="sm"
-                @click=${this._toggle}
-                aria-expanded="${!this._collapsed}"
-                aria-label="${this._collapsed ? "Expand insight" : "Collapse insight"}"
-              >
-                <cg-icon name="${this._collapsed ? "chevron-down" : "chevron-up"}" size="xs"></cg-icon>
-              </cg-button>
-            ` : c}
+            ${this.timeRange ? e`<span class="time-range">${this.timeRange}</span>` : s}
+            <button class="icon-btn" @click=${this._handleRefresh} aria-label="Refresh">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 4v6h-6"/><path d="M1 20v-6h6"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/></svg>
+            </button>
+            ${this.collapsible ? e`
+              <button class="icon-btn" @click=${this._toggle} aria-expanded="${!this._collapsed}" aria-label="${this._collapsed ? "Expand" : "Collapse"}">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+                  <path d="${this._collapsed ? "M6 9l6 6 6-6" : "M18 15l-6-6-6 6"}"/>
+                </svg>
+              </button>
+            ` : s}
           </div>
         </div>
 
         <div class="summary-text">${this.summary}</div>
 
-        ${this.trends.length > 0 ? s`
+        ${this.trends.length > 0 ? e`
           <div class="trends">
-            ${this.trends.map((e) => s`
-              <button
-                type="button"
-                class="trend ${e.direction}"
-                @click=${() => this._handleTrendClick(e)}
-                aria-label="${e.label}: ${e.value}"
-              >
+            ${this.trends.map((a) => e`
+              <span class="trend ${a.direction}" @click=${() => this._handleTrendClick(a)} role="button" tabindex="0">
                 <span class="trend-header">
-                  <cg-icon name="${this._trendIcon(e.direction)}" size="xs" aria-hidden="true"></cg-icon>
-                  ${e.label}
+                  <span class="trend-icon" aria-hidden="true">
+                    ${a.direction === "up" ? e`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M12 19V5m-7 7l7-7 7 7"/></svg>` : a.direction === "down" ? e`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"><path d="M12 5v14m7-7l-7 7-7-7"/></svg>` : e`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M5 12h14"/></svg>`}
+                  </span>
+                  ${a.label}
                 </span>
-                <span class="trend-value">${e.value}</span>
-              </button>
+                <span class="trend-value">${a.value}</span>
+              </span>
             `)}
           </div>
-        ` : c}
+        ` : s}
 
-        ${t ? s`
+        ${n ? e`
           <div class="footer">
-            ${this.confidence > 0 ? s`
-              <ai-confidence-badge
-                .score=${this.confidence}
-                size="sm"
-                show-percentage
-              ></ai-confidence-badge>
-            ` : c}
-            ${this.type !== "summary" ? s`<span class="type-tag">${this.type}</span>` : c}
+            ${this.confidence > 0 ? e`<span class="confidence">${Math.round(this.confidence * 100)}% confidence</span>` : s}
+            ${this.confidence > 0 && this.type !== "summary" ? e`<span class="dot-sep"></span>` : s}
+            ${this.type !== "summary" ? e`<span class="type-tag">${this.type}</span>` : s}
           </div>
-        ` : c}
+        ` : s}
       </div>
     `;
   }
 };
-r.styles = [m, f, b, p`
+r.styles = [m, f, b, g`
     :host { display: block; }
 
     .card {
@@ -127,7 +109,7 @@ r.styles = [m, f, b, p`
     }
     .header-label {
       font-size: var(--cg-font-size-xs);
-      font-weight: var(--cg-font-weight-semibold);
+      font-weight: var(--cg-font-weight-medium);
       color: var(--cg-color-input-text-placeholder);
       text-transform: uppercase;
       letter-spacing: var(--cg-letter-spacing-wide);
@@ -142,11 +124,28 @@ r.styles = [m, f, b, p`
       font-size: var(--cg-font-size-xs);
       color: var(--cg-color-input-text-placeholder);
     }
+    .icon-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-24);
+      height: var(--cg-spacing-24);
+      border: none;
+      background: transparent;
+      color: var(--cg-color-input-text-placeholder);
+      border-radius: var(--cg-border-radius-50);
+      cursor: pointer;
+      padding: 0;
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .icon-btn:hover { color: var(--cg-color-surface-base-text); }
+    .icon-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .icon-btn svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }
 
     /* ── Summary text ── */
     .summary-text {
       font-size: var(--cg-font-size-sm);
-      color: var(--cg-color-surface-cards-text);
+      color: var(--cg-color-surface-base-text);
       line-height: var(--cg-line-height-normal);
       margin-bottom: var(--cg-spacing-20);
     }
@@ -161,26 +160,13 @@ r.styles = [m, f, b, p`
       display: flex;
       flex-direction: column;
       gap: var(--cg-spacing-2);
-      padding: var(--cg-spacing-2) var(--cg-spacing-20);
-      border: none;
-      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
-      background: transparent;
-      color: inherit;
-      font: inherit;
-      text-align: left;
       cursor: pointer;
-      border-radius: var(--cg-border-radius-50);
-      transition:
-        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
-        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      padding: 0 var(--cg-spacing-20);
+      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
     }
     .trend:first-child { padding-left: 0; }
     .trend:last-child { border-right: none; padding-right: 0; }
-    .trend:hover { background: var(--cg-color-action-tertiary-background-hover); }
-    .trend:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-color-focus-ring);
-    }
+    .trend:hover { opacity: 0.8; }
     .trend-header {
       display: flex;
       align-items: center;
@@ -196,7 +182,8 @@ r.styles = [m, f, b, p`
     }
     .trend.up .trend-value { color: var(--cg-color-status-success-text-default); }
     .trend.down .trend-value { color: var(--cg-color-status-error-text-default); }
-    .trend.neutral .trend-value { color: var(--cg-color-surface-cards-text); }
+    .trend.neutral .trend-value { color: var(--cg-color-surface-base-text); }
+    .trend-icon svg { width: 10px; height: 10px; display: block; }
 
     /* ── Footer metadata ── */
     .footer {
@@ -208,6 +195,16 @@ r.styles = [m, f, b, p`
       font-size: var(--cg-font-size-xs);
       color: var(--cg-color-input-text-placeholder);
     }
+    .confidence {
+      font-weight: var(--cg-font-weight-medium);
+    }
+    .dot-sep {
+      width: var(--cg-spacing-2);
+      height: var(--cg-spacing-2);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-input-text-placeholder);
+      flex-shrink: 0;
+    }
     .type-tag {
       text-transform: capitalize;
     }
@@ -230,38 +227,38 @@ r.styles = [m, f, b, p`
       animation: shimmer 1.5s linear infinite;
     }
     .skel-line { height: var(--cg-spacing-12); margin-bottom: var(--cg-spacing-8); }
-    .skel-line.short { width: 80%; }
-    .skel-line.shorter { width: 50%; }
+    .skel-line:nth-child(2) { width: 80%; }
+    .skel-line:nth-child(3) { width: 50%; }
   `];
-a([
-  i()
+t([
+  o()
 ], r.prototype, "summary", 2);
-a([
-  i({ type: Array })
+t([
+  o({ type: Array })
 ], r.prototype, "trends", 2);
-a([
-  i({ type: Boolean })
+t([
+  o({ type: Boolean })
 ], r.prototype, "collapsible", 2);
-a([
-  i({ type: Number })
+t([
+  o({ type: Number })
 ], r.prototype, "confidence", 2);
-a([
-  i()
+t([
+  o()
 ], r.prototype, "type", 2);
-a([
-  i({ type: Boolean, reflect: !0 })
+t([
+  o({ type: Boolean, reflect: !0 })
 ], r.prototype, "compact", 2);
-a([
-  i({ type: Boolean })
+t([
+  o({ type: Boolean })
 ], r.prototype, "loading", 2);
-a([
-  i()
+t([
+  o()
 ], r.prototype, "timeRange", 2);
-a([
-  u()
+t([
+  v()
 ], r.prototype, "_collapsed", 2);
-r = a([
-  v("ai-chart-summary")
+r = t([
+  u("ai-chart-summary")
 ], r);
 export {
   r as AiChartSummary

package/dist/components/ai-chart-summary/ai-chart-summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-chart-summary.js","sources":["../../../src/components/ai-chart-summary/ai-chart-summary.ts"],"sourcesContent":["/**\n * @element ai-chart-summary\n * AI-generated chart insight card — summary text, trend chips, and a\n * confidence footer. Designed for dashboard \"insight cards\" that sit\n * next to a chart.\n *\n * Dogfooded primitives: <cg-button>, <cg-icon>, <ai-confidence-badge>.\n *\n * @fires {CustomEvent<{collapsed: boolean}>} ai-summary-toggle\n * @fires {CustomEvent<{label, direction, value}>} ai-summary-trend-click\n * @fires {CustomEvent} ai-summary-refresh\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, shimmerKeyframes } from '../../styles/index.js';\nimport '../cg-icon/cg-icon.js';\nimport '../cg-button/cg-button.js';\nimport '../ai-confidence-badge/ai-confidence-badge.js';\n\ninterface Trend {\n  label: string;\n  direction: 'up' | 'down' | 'neutral';\n  value: string;\n}\n\n@customElement('ai-chart-summary')\nexport class AiChartSummary extends LitElement {\n  static override styles = [hostBlock, reducedMotion, shimmerKeyframes, css`\n    :host { display: block; }\n\n    .card {\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-component-card-radius);\n      padding: var(--cg-spacing-20) var(--cg-spacing-24);\n    }\n\n    /* ── Header ── */\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .ai-dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      background: var(--cg-color-accent-text);\n      border-radius: var(--cg-border-radius-full);\n      flex-shrink: 0;\n    }\n    .header-label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-input-text-placeholder);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .header-right {\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n    .time-range {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* ── Summary text ── */\n    .summary-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-cards-text);\n      line-height: var(--cg-line-height-normal);\n      margin-bottom: var(--cg-spacing-20);\n    }\n\n    /* ── Trends ── */\n    .trends {\n      display: flex;\n      flex-wrap: wrap;\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .trend {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n      padding: var(--cg-spacing-2) var(--cg-spacing-20);\n      border: none;\n      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: transparent;\n      color: inherit;\n      font: inherit;\n      text-align: left;\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-50);\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .trend:first-child { padding-left: 0; }\n    .trend:last-child { border-right: none; padding-right: 0; }\n    .trend:hover { background: var(--cg-color-action-tertiary-background-hover); }\n    .trend:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-color-focus-ring);\n    }\n    .trend-header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .trend-value {\n      font-size: var(--cg-font-size-lg);\n      font-weight: var(--cg-font-weight-semibold);\n      letter-spacing: var(--cg-letter-spacing-tight);\n    }\n    .trend.up .trend-value { color: var(--cg-color-status-success-text-default); }\n    .trend.down .trend-value { color: var(--cg-color-status-error-text-default); }\n    .trend.neutral .trend-value { color: var(--cg-color-surface-cards-text); }\n\n    /* ── Footer metadata ── */\n    .footer {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .type-tag {\n      text-transform: capitalize;\n    }\n\n    /* ── Collapsed ── */\n    .collapsed .summary-text,\n    .collapsed .trends,\n    .collapsed .footer { display: none; }\n\n    /* ── Compact ── */\n    :host([compact]) .card { padding: var(--cg-spacing-12); }\n    :host([compact]) .summary-text { display: none; }\n    :host([compact]) .header { margin-bottom: var(--cg-spacing-8); }\n\n    /* ── Loading ── */\n    .skel {\n      border-radius: var(--cg-border-radius-50);\n      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%);\n      background-size: 200% 100%;\n      animation: shimmer 1.5s linear infinite;\n    }\n    .skel-line { height: var(--cg-spacing-12); margin-bottom: var(--cg-spacing-8); }\n    .skel-line.short { width: 80%; }\n    .skel-line.shorter { width: 50%; }\n  `];\n\n  @property() summary = '';\n  @property({ type: Array }) trends: Trend[] = [];\n  @property({ type: Boolean }) collapsible = false;\n  @property({ type: Number }) confidence = 0;\n  @property() type: 'summary' | 'anomaly' | 'forecast' | 'comparison' = 'summary';\n  @property({ type: Boolean, reflect: true }) compact = false;\n  @property({ type: Boolean }) loading = false;\n  @property() timeRange = '';\n\n  @state() private _collapsed = false;\n\n  private _toggle() {\n    this._collapsed = !this._collapsed;\n    this.dispatchEvent(new CustomEvent('ai-summary-toggle', { bubbles: true, composed: true, detail: { collapsed: this._collapsed } }));\n  }\n\n  private _handleTrendClick(trend: Trend) {\n    this.dispatchEvent(new CustomEvent('ai-summary-trend-click', { bubbles: true, composed: true, detail: trend }));\n  }\n\n  private _handleRefresh() {\n    this.dispatchEvent(new CustomEvent('ai-summary-refresh', { bubbles: true, composed: true }));\n  }\n\n  private _trendIcon(direction: Trend['direction']) {\n    if (direction === 'up') return 'arrow-up';\n    if (direction === 'down') return 'arrow-down';\n    return 'minus';\n  }\n\n  override render() {\n    if (this.loading) {\n      return html`\n        <div class=\"card\">\n          <div class=\"header\">\n            <span class=\"ai-dot\"></span>\n            <span class=\"header-label\">AI Insight</span>\n          </div>\n          <div class=\"skel skel-line\"></div>\n          <div class=\"skel skel-line short\"></div>\n          <div class=\"skel skel-line shorter\"></div>\n        </div>\n      `;\n    }\n\n    if (!this.summary) return nothing;\n\n    const hasFooter = this.confidence > 0 || this.type !== 'summary';\n\n    return html`\n      <div class=\"card ${this._collapsed ? 'collapsed' : ''}\" aria-label=\"AI chart insight\">\n        <div class=\"header\">\n          <span class=\"ai-dot\" aria-hidden=\"true\"></span>\n          <span class=\"header-label\">AI Insight</span>\n          <div class=\"header-right\">\n            ${this.timeRange ? html`<span class=\"time-range\">${this.timeRange}</span>` : nothing}\n            <cg-button variant=\"tertiary\" size=\"sm\" @click=${this._handleRefresh} aria-label=\"Refresh insight\">\n              <cg-icon name=\"refresh\" size=\"xs\"></cg-icon>\n            </cg-button>\n            ${this.collapsible ? html`\n              <cg-button\n                variant=\"tertiary\"\n                size=\"sm\"\n                @click=${this._toggle}\n                aria-expanded=\"${!this._collapsed}\"\n                aria-label=\"${this._collapsed ? 'Expand insight' : 'Collapse insight'}\"\n              >\n                <cg-icon name=\"${this._collapsed ? 'chevron-down' : 'chevron-up'}\" size=\"xs\"></cg-icon>\n              </cg-button>\n            ` : nothing}\n          </div>\n        </div>\n\n        <div class=\"summary-text\">${this.summary}</div>\n\n        ${this.trends.length > 0 ? html`\n          <div class=\"trends\">\n            ${this.trends.map(t => html`\n              <button\n                type=\"button\"\n                class=\"trend ${t.direction}\"\n                @click=${() => this._handleTrendClick(t)}\n                aria-label=\"${t.label}: ${t.value}\"\n              >\n                <span class=\"trend-header\">\n                  <cg-icon name=\"${this._trendIcon(t.direction)}\" size=\"xs\" aria-hidden=\"true\"></cg-icon>\n                  ${t.label}\n                </span>\n                <span class=\"trend-value\">${t.value}</span>\n              </button>\n            `)}\n          </div>\n        ` : nothing}\n\n        ${hasFooter ? html`\n          <div class=\"footer\">\n            ${this.confidence > 0 ? html`\n              <ai-confidence-badge\n                .score=${this.confidence}\n                size=\"sm\"\n                show-percentage\n              ></ai-confidence-badge>\n            ` : nothing}\n            ${this.type !== 'summary' ? html`<span class=\"type-tag\">${this.type}</span>` : nothing}\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-chart-summary': AiChartSummary;\n  }\n}\n"],"names":["AiChartSummary","LitElement","trend","direction","html","nothing","hasFooter","t","hostBlock","reducedMotion","shimmerKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-chart-summary.js","sources":["../../../src/components/ai-chart-summary/ai-chart-summary.ts"],"sourcesContent":["/**\n * @element ai-chart-summary\n * AI-generated chart insight — clean card with summary, trends, and metadata.\n *\n * @fires {CustomEvent<{collapsed: boolean}>} ai-summary-toggle\n * @fires {CustomEvent<{label, direction, value}>} ai-summary-trend-click\n * @fires {CustomEvent} ai-summary-refresh\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, shimmerKeyframes } from '../../styles/index.js';\n\ninterface Trend {\n  label: string;\n  direction: 'up' | 'down' | 'neutral';\n  value: string;\n}\n\n@customElement('ai-chart-summary')\nexport class AiChartSummary extends LitElement {\n  static override styles = [hostBlock, reducedMotion, shimmerKeyframes, css`\n    :host { display: block; }\n\n    .card {\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-component-card-radius);\n      padding: var(--cg-spacing-20) var(--cg-spacing-24);\n    }\n\n    /* ── Header ── */\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .ai-dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      background: var(--cg-color-accent-text);\n      border-radius: var(--cg-border-radius-full);\n      flex-shrink: 0;\n    }\n    .header-label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-input-text-placeholder);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .header-right {\n      margin-left: auto;\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n    .time-range {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .icon-btn {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      border: none;\n      background: transparent;\n      color: var(--cg-color-input-text-placeholder);\n      border-radius: var(--cg-border-radius-50);\n      cursor: pointer;\n      padding: 0;\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .icon-btn:hover { color: var(--cg-color-surface-base-text); }\n    .icon-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .icon-btn svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n\n    /* ── Summary text ── */\n    .summary-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-normal);\n      margin-bottom: var(--cg-spacing-20);\n    }\n\n    /* ── Trends ── */\n    .trends {\n      display: flex;\n      flex-wrap: wrap;\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .trend {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n      cursor: pointer;\n      padding: 0 var(--cg-spacing-20);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .trend:first-child { padding-left: 0; }\n    .trend:last-child { border-right: none; padding-right: 0; }\n    .trend:hover { opacity: 0.8; }\n    .trend-header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .trend-value {\n      font-size: var(--cg-font-size-lg);\n      font-weight: var(--cg-font-weight-semibold);\n      letter-spacing: var(--cg-letter-spacing-tight);\n    }\n    .trend.up .trend-value { color: var(--cg-color-status-success-text-default); }\n    .trend.down .trend-value { color: var(--cg-color-status-error-text-default); }\n    .trend.neutral .trend-value { color: var(--cg-color-surface-base-text); }\n    .trend-icon svg { width: 10px; height: 10px; display: block; }\n\n    /* ── Footer metadata ── */\n    .footer {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .confidence {\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .dot-sep {\n      width: var(--cg-spacing-2);\n      height: var(--cg-spacing-2);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-input-text-placeholder);\n      flex-shrink: 0;\n    }\n    .type-tag {\n      text-transform: capitalize;\n    }\n\n    /* ── Collapsed ── */\n    .collapsed .summary-text,\n    .collapsed .trends,\n    .collapsed .footer { display: none; }\n\n    /* ── Compact ── */\n    :host([compact]) .card { padding: var(--cg-spacing-12); }\n    :host([compact]) .summary-text { display: none; }\n    :host([compact]) .header { margin-bottom: var(--cg-spacing-8); }\n\n    /* ── Loading ── */\n    .skel {\n      border-radius: var(--cg-border-radius-50);\n      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%);\n      background-size: 200% 100%;\n      animation: shimmer 1.5s linear infinite;\n    }\n    .skel-line { height: var(--cg-spacing-12); margin-bottom: var(--cg-spacing-8); }\n    .skel-line:nth-child(2) { width: 80%; }\n    .skel-line:nth-child(3) { width: 50%; }\n  `];\n\n  @property() summary = '';\n  @property({ type: Array }) trends: Trend[] = [];\n  @property({ type: Boolean }) collapsible = false;\n  @property({ type: Number }) confidence = 0;\n  @property() type: 'summary' | 'anomaly' | 'forecast' | 'comparison' = 'summary';\n  @property({ type: Boolean, reflect: true }) compact = false;\n  @property({ type: Boolean }) loading = false;\n  @property() timeRange = '';\n\n  @state() private _collapsed = false;\n\n  private _toggle() {\n    this._collapsed = !this._collapsed;\n    this.dispatchEvent(new CustomEvent('ai-summary-toggle', { bubbles: true, composed: true, detail: { collapsed: this._collapsed } }));\n  }\n\n  private _handleTrendClick(trend: Trend) {\n    this.dispatchEvent(new CustomEvent('ai-summary-trend-click', { bubbles: true, composed: true, detail: trend }));\n  }\n\n  private _handleRefresh() {\n    this.dispatchEvent(new CustomEvent('ai-summary-refresh', { bubbles: true, composed: true }));\n  }\n\n  override render() {\n    if (this.loading) {\n      return html`\n        <div class=\"card\">\n          <div class=\"header\">\n            <span class=\"ai-dot\"></span>\n            <span class=\"header-label\">AI Insight</span>\n          </div>\n          <div class=\"skel skel-line\" style=\"width:100%\"></div>\n          <div class=\"skel skel-line\"></div>\n          <div class=\"skel skel-line\"></div>\n        </div>\n      `;\n    }\n\n    if (!this.summary) return nothing;\n\n    const hasFooter = this.confidence > 0 || this.type !== 'summary';\n\n    return html`\n      <div class=\"card ${this._collapsed ? 'collapsed' : ''}\" role=\"complementary\" aria-label=\"AI chart insight\">\n        <div class=\"header\">\n          <span class=\"ai-dot\"></span>\n          <span class=\"header-label\">AI Insight</span>\n          <div class=\"header-right\">\n            ${this.timeRange ? html`<span class=\"time-range\">${this.timeRange}</span>` : nothing}\n            <button class=\"icon-btn\" @click=${this._handleRefresh} aria-label=\"Refresh\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M23 4v6h-6\"/><path d=\"M1 20v-6h6\"/><path d=\"M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15\"/></svg>\n            </button>\n            ${this.collapsible ? html`\n              <button class=\"icon-btn\" @click=${this._toggle} aria-expanded=\"${!this._collapsed}\" aria-label=\"${this._collapsed ? 'Expand' : 'Collapse'}\">\n                <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\">\n                  <path d=\"${this._collapsed ? 'M6 9l6 6 6-6' : 'M18 15l-6-6-6 6'}\"/>\n                </svg>\n              </button>\n            ` : nothing}\n          </div>\n        </div>\n\n        <div class=\"summary-text\">${this.summary}</div>\n\n        ${this.trends.length > 0 ? html`\n          <div class=\"trends\">\n            ${this.trends.map(t => html`\n              <span class=\"trend ${t.direction}\" @click=${() => this._handleTrendClick(t)} role=\"button\" tabindex=\"0\">\n                <span class=\"trend-header\">\n                  <span class=\"trend-icon\" aria-hidden=\"true\">\n                    ${t.direction === 'up'\n                      ? html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"><path d=\"M12 19V5m-7 7l7-7 7 7\"/></svg>`\n                      : t.direction === 'down'\n                      ? html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"><path d=\"M12 5v14m7-7l-7 7-7-7\"/></svg>`\n                      : html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M5 12h14\"/></svg>`}\n                  </span>\n                  ${t.label}\n                </span>\n                <span class=\"trend-value\">${t.value}</span>\n              </span>\n            `)}\n          </div>\n        ` : nothing}\n\n        ${hasFooter ? html`\n          <div class=\"footer\">\n            ${this.confidence > 0 ? html`<span class=\"confidence\">${Math.round(this.confidence * 100)}% confidence</span>` : nothing}\n            ${this.confidence > 0 && this.type !== 'summary' ? html`<span class=\"dot-sep\"></span>` : nothing}\n            ${this.type !== 'summary' ? html`<span class=\"type-tag\">${this.type}</span>` : nothing}\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiChartSummary","LitElement","trend","html","nothing","hasFooter","t","hostBlock","reducedMotion","shimmerKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-chat/ai-chat.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-chat.d.ts","sourceRoot":"","sources":["../../../src/components/ai-chat/ai-chat.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,KAAK,EAAE,QAAQ,EAAyC,MAAM,eAAe,CAAC;AAgBrF,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BA+NnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7C,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAQ;IAClC,WAAW,EAAE,OAAO,EAAE,CAAM;IAC1B,WAAW,EAAE,OAAO,CAAQ;IAC5B,aAAa,EAAE,OAAO,CAAQ;IAC/B,cAAc,EAAE,MAAM,CAA6B;IACnD,WAAW,EAAE,MAAM,CAAuB;IAC1C,WAAW,EAAE,MAAM,CAAO;IACtD,mFAAmF;IACvD,MAAM,EAAE,MAAM,CAAU;IACpD,sFAAsF;IACzD,YAAY,EAAE,OAAO,CAAS;IAC3D,4DAA4D;IAC/B,SAAS,EAAE,OAAO,CAAS;IACxD,4CAA4C;IAChB,aAAa,EAAE,MAAM,CAAW;IAEnD,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,cAAc,CAAkB;IACxC,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,UAAU,CAAgB;IAClC,OAAO,CAAC,iBAAiB,CAAc;IAE5B,OAAO,CAAC,WAAW,CAAkB;IAEzD,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,YAAY,CAAkC;IACtD,OAAO,CAAC,eAAe,CAA4C;IAEnE,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW;IAwDnB,OAAO,CAAC,UAAU;IAQT,oBAAoB;IAc7B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,aAAa;IAMrB,gDAAgD;IAChD,OAAO,CAAC,aAAa;IAOrB,4DAA4D;IAC5D,OAAO,CAAC,aAAa;IAMrB,gEAAgE;IAChE,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM;IAaxD,yBAAyB;IACzB,aAAa;YAMC,YAAY;YAqEZ,iBAAiB;YA8BjB,cAAc;IAoC5B,gGAAgG;IAChG,cAAc,CAAC,KAAK,EAAE,MAAM;IAyB5B,yBAAyB;IACzB,cAAc,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE;IAoBnC,sCAAsC;IACtC,kBAAkB,IAAI,MAAM;IAO5B,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,cAAc;IAOb,MAAM;CAgJhB"}
+{"version":3,"file":"ai-chat.d.ts","sourceRoot":"","sources":["../../../src/components/ai-chat/ai-chat.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,KAAK,EAAE,QAAQ,EAAyC,MAAM,eAAe,CAAC;AAgBrF,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,4BAqOnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7C,QAAQ,EAAE,QAAQ,GAAG,IAAI,CAAQ;IAClC,WAAW,EAAE,OAAO,EAAE,CAAM;IAC1B,WAAW,EAAE,OAAO,CAAQ;IAC5B,aAAa,EAAE,OAAO,CAAQ;IAC/B,cAAc,EAAE,MAAM,CAA6B;IACnD,WAAW,EAAE,MAAM,CAAuB;IAC1C,WAAW,EAAE,MAAM,CAAO;IACtD,mFAAmF;IACvD,MAAM,EAAE,MAAM,CAAU;IACpD,sFAAsF;IACzD,YAAY,EAAE,OAAO,CAAS;IAC3D,4DAA4D;IAC/B,SAAS,EAAE,OAAO,CAAS;IACxD,4CAA4C;IAChB,aAAa,EAAE,MAAM,CAAW;IAEnD,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,WAAW,CAAkB;IACrC,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,cAAc,CAAkB;IACxC,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,UAAU,CAAgB;IAClC,OAAO,CAAC,iBAAiB,CAAc;IAE5B,OAAO,CAAC,WAAW,CAAkB;IAEzD,OAAO,CAAC,WAAW,CAAa;IAChC,OAAO,CAAC,gBAAgB,CAAgC;IACxD,OAAO,CAAC,YAAY,CAAkC;IACtD,OAAO,CAAC,eAAe,CAA4C;IAEnE,OAAO,CAAC,MAAM;IAId,OAAO,CAAC,qBAAqB;IAK7B,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW;IAwDnB,OAAO,CAAC,UAAU;IAQT,oBAAoB;IAc7B,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,aAAa;IAMrB,gDAAgD;IAChD,OAAO,CAAC,aAAa;IAOrB,4DAA4D;IAC5D,OAAO,CAAC,aAAa;IAMrB,gEAAgE;IAChE,UAAU,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,MAAM;IAaxD,yBAAyB;IACzB,aAAa;YAMC,YAAY;YAqEZ,iBAAiB;YA8BjB,cAAc;IAoC5B,gGAAgG;IAChG,cAAc,CAAC,KAAK,EAAE,MAAM;IAyB5B,yBAAyB;IACzB,cAAc,CAAC,SAAS,CAAC,EAAE,MAAM,EAAE;IAoBnC,sCAAsC;IACtC,kBAAkB,IAAI,MAAM;IAO5B,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,WAAW;IAYnB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,WAAW;IAOnB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,cAAc;IAOb,MAAM;CAgJhB"}

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

@@ -1,6 +1,6 @@
 import { css as p, LitElement as u, html as n, nothing as d } from "lit";
 import { property as g, state as h, query as m, customElement as v } from "lit/decorators.js";
-import { h as _, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as b, r as _ } from "../../chunks/premium.css-DHekUEUt.js";
 var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (t, e, i, s) => {
   for (var r = s > 1 ? void 0 : s ? y(e, i) : e, c = t.length - 1, l; c >= 0; c--)
     (l = t[c]) && (r = (s ? l(e, i, r) : l(r)) || r);
@@ -405,7 +405,7 @@ let a = class extends u {
       `;
   }
 };
-a.styles = [_, b, p`
+a.styles = [b, _, p`
     .chat {
       display: flex;
       flex-direction: column;
@@ -473,7 +473,7 @@ a.styles = [_, b, p`
       display: inline-block;
       width: var(--cg-spacing-2);
       height: var(--cg-spacing-16);
-      background: var(--cg-color-action-primary-background-default);
+      background: var(--cg-color-ai-streaming-background);
       margin-left: var(--cg-spacing-1);
       vertical-align: text-bottom;
       animation: blink 1s step-end infinite;
@@ -580,6 +580,12 @@ a.styles = [_, b, p`
     .send-btn:hover:not(:disabled) {
       background: var(--cg-color-action-primary-background-hover);
     }
+    /* Themeable disabled fill instead of dimming the action color to an unreadable smudge. */
+    .send-btn:disabled {
+      opacity: 1;
+      background: var(--cg-color-action-primary-background-disable);
+      color: var(--cg-color-action-primary-text-disable);
+    }
 
     .mic-btn {
       background: transparent;