@cognivo/components 0.8.0

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

@@ -0,0 +1,292 @@
+import { css as l, LitElement as p, html as i, nothing as v } from "lit";
+import { property as u, state as b, customElement as f } from "lit/decorators.js";
+import { h, r as m, f as x } from "../../chunks/premium.css-9I4kHrsl.js";
+var y = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (a, t, c, o) => {
+  for (var r = o > 1 ? void 0 : o ? k(t, c) : t, e = a.length - 1, s; e >= 0; e--)
+    (s = a[e]) && (r = (o ? s(t, c, r) : s(r)) || r);
+  return o && r && y(t, c, r), r;
+};
+const g = {
+  model: "type-model",
+  prompt: "type-prompt",
+  config: "type-config",
+  data: "type-data"
+};
+let n = class extends p {
+  constructor() {
+    super(...arguments), this.entries = [], this._expandedSet = /* @__PURE__ */ new Set();
+  }
+  _toggle(a) {
+    this._expandedSet.has(a) ? this._expandedSet.delete(a) : this._expandedSet.add(a), this.requestUpdate();
+  }
+  _handleClick(a) {
+    this.dispatchEvent(new CustomEvent("ai-changelog-entry-click", {
+      detail: { version: a.version, type: a.type, date: a.date },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _handleRollback(a, t) {
+    a.stopPropagation(), this.dispatchEvent(new CustomEvent("ai-changelog-rollback", {
+      detail: { version: t.version, type: t.type },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    return this.entries.length ? i`
+      <div class="container" role="region" aria-label="Changelog">
+        <div class="header">Changelog</div>
+
+        <div class="timeline" role="list" aria-label="Version history">
+          ${this.entries.map((a, t) => {
+      const c = `${a.version}-${t}`, o = this._expandedSet.has(c), r = g[a.type] || g.config;
+      return i`
+              <div class="entry" role="listitem">
+                <div class="entry-dot ${r}" aria-hidden="true"></div>
+                <div
+                  class="entry-card"
+                  tabindex="0"
+                  aria-label="Version ${a.version}, ${a.type} change on ${a.date}"
+                  @click=${() => this._handleClick(a)}
+                  @keydown=${(e) => {
+        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._handleClick(a));
+      }}
+                >
+                  <div class="entry-top">
+                    <span class="version">${a.version}</span>
+                    <span
+                      class="type-badge ${r}"
+                    >${a.type}</span>
+                  </div>
+
+                  <div class="entry-meta">
+                    <span>${a.date}</span>
+                    ${a.author ? i`<span>${a.author}</span>` : v}
+                  </div>
+
+                  <div class="changes-preview ${o ? "expanded" : ""}">
+                    ${a.changes}
+                  </div>
+
+                  <button
+                    class="expand-toggle"
+                    @click=${(e) => {
+        e.stopPropagation(), this._toggle(c);
+      }}
+                    aria-expanded=${o ? "true" : "false"}
+                    aria-label=${o ? "Collapse details" : "Expand details"}
+                    tabindex="0"
+                  >${o ? "Show less" : "Show more"}</button>
+
+                  <div class="entry-actions">
+                    <button
+                      class="rollback-btn"
+                      @click=${(e) => this._handleRollback(e, a)}
+                      aria-label="Rollback to version ${a.version}"
+                      tabindex="0"
+                    >Rollback</button>
+                  </div>
+                </div>
+              </div>
+            `;
+    })}
+        </div>
+      </div>
+    ` : i`<div class="container"><div class="empty-state" role="status">No changelog entries</div></div>`;
+  }
+};
+n.styles = [h, m, x, l`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+    :host([hidden]) { display: none; }
+
+    .container {
+      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-150);
+      padding: var(--cg-spacing-16);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .header {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      margin-bottom: var(--cg-spacing-16);
+    }
+
+    .timeline {
+      position: relative;
+      padding-left: var(--cg-spacing-20);
+    }
+
+    .timeline::before {
+      content: '';
+      position: absolute;
+      left: var(--cg-spacing-6);
+      top: var(--cg-spacing-4);
+      bottom: var(--cg-spacing-4);
+      width: var(--cg-spacing-2);
+      background: var(--cg-color-surface-cards-border);
+    }
+
+    .entry {
+      position: relative;
+      margin-bottom: var(--cg-spacing-12);
+    }
+
+    .entry-dot {
+      position: absolute;
+      left: calc(-1 * var(--cg-spacing-20);
+      top: var(--cg-spacing-6);
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      border-radius: 50%;
+      background: var(--cg-color-surface-cards-border);
+      border: var(--cg-border-width-100) solid var(--cg-color-surface-container-background);
+      z-index: 1;
+    }
+
+    .entry-card {
+      background: var(--cg-color-surface-base-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-12);
+      cursor: pointer;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .entry-card:hover { border-color: var(--cg-color-surface-cards-border); }
+    .entry-card:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .entry-card:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    .entry-top {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      flex-wrap: wrap;
+    }
+
+    .version {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .type-badge {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-50);
+    }
+    .type-badge.type-model {
+      background: var(--cg-color-status-info-background-default);
+      color: var(--cg-color-status-info-text-default);
+    }
+    .type-badge.type-prompt {
+      background: var(--cg-overlay-accent-subtle);
+      color: var(--cg-color-surface-base-text);
+    }
+    .type-badge.type-config {
+      background: var(--cg-overlay-accent-light);
+      color: var(--cg-color-chart-7);
+    }
+    .type-badge.type-data {
+      background: var(--cg-color-status-success-background-default);
+      color: var(--cg-color-status-success-text-default);
+    }
+
+    .entry-dot.type-model { background: var(--cg-color-status-info-text-default); }
+    .entry-dot.type-prompt { background: var(--cg-color-action-primary-background-default); }
+    .entry-dot.type-config { background: var(--cg-color-chart-7); }
+    .entry-dot.type-data { background: var(--cg-color-status-success-text-default); }
+
+    .entry-meta {
+      display: flex;
+      gap: var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-border-hover);
+      margin-top: var(--cg-spacing-4);
+    }
+
+    .changes-preview {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      margin-top: var(--cg-spacing-6);
+      line-height: 1.5;
+      overflow: hidden;
+      max-height: var(--cg-spacing-40);
+      transition: max-height var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .changes-preview.expanded {
+      max-height: var(--_ai-changelog-expanded-max-height, 500px);
+    }
+
+    .expand-toggle {
+      background: transparent;
+      border: none;
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-xs);
+      cursor: pointer;
+      padding: var(--cg-spacing-4) 0;
+      margin-top: var(--cg-spacing-4);
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .expand-toggle:hover { color: var(--cg-color-surface-base-text); }
+    .expand-toggle:focus-visible {
+      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
+    }
+
+    .entry-actions {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: var(--cg-spacing-8);
+    }
+
+    .rollback-btn {
+      background: transparent;
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-100);
+      cursor: pointer;
+      transition: border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default), color var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .rollback-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .rollback-btn:hover {
+      border-color: var(--cg-color-status-warning-text);
+      color: var(--cg-color-status-warning-text);
+    }
+    .rollback-btn:focus-visible {
+      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
+    }
+
+    .empty-state {
+      text-align: center;
+      color: var(--cg-color-input-border-hover);
+      font-size: var(--cg-font-size-sm);
+      padding: var(--cg-spacing-24) 0;
+    }
+  `];
+d([
+  u({ type: Array })
+], n.prototype, "entries", 2);
+d([
+  b()
+], n.prototype, "_expandedSet", 2);
+n = d([
+  f("ai-changelog")
+], n);
+export {
+  n as AiChangelog
+};
+//# sourceMappingURL=ai-changelog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-changelog.js","sources":["../../../src/components/ai-changelog/ai-changelog.ts"],"sourcesContent":["/**\n * @element ai-changelog\n * Timeline-style version history feed with type badges, expandable details, and rollback buttons.\n *\n * @example\n * ```html\n * <ai-changelog .entries=${[\n *   {version:'v2.1', date:'2024-03-15', type:'model', changes:'Upgraded to GPT-4o', author:'ops'},\n *   {version:'v2.0', date:'2024-03-01', type:'prompt', changes:'Revised system prompt'}\n * ]}></ai-changelog>\n * ```\n *\n * @fires {CustomEvent<{version, type, date}>} ai-changelog-entry-click - Entry card clicked\n * @fires {CustomEvent<{version, type}>} ai-changelog-rollback - Rollback button clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\ninterface ChangelogEntry {\n  version: string;\n  date: string;\n  author?: string;\n  changes: string;\n  type: 'model' | 'prompt' | 'config' | 'data';\n}\n\nconst TYPE_CSS_CLASS: Record<string, string> = {\n  model: 'type-model',\n  prompt: 'type-prompt',\n  config: 'type-config',\n  data: 'type-data',\n};\n\n@customElement('ai-changelog')\nexport class AiChangelog extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .container {\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-150);\n      padding: var(--cg-spacing-16);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .header {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    .timeline {\n      position: relative;\n      padding-left: var(--cg-spacing-20);\n    }\n\n    .timeline::before {\n      content: '';\n      position: absolute;\n      left: var(--cg-spacing-6);\n      top: var(--cg-spacing-4);\n      bottom: var(--cg-spacing-4);\n      width: var(--cg-spacing-2);\n      background: var(--cg-color-surface-cards-border);\n    }\n\n    .entry {\n      position: relative;\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .entry-dot {\n      position: absolute;\n      left: calc(-1 * var(--cg-spacing-20);\n      top: var(--cg-spacing-6);\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: 50%;\n      background: var(--cg-color-surface-cards-border);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-container-background);\n      z-index: 1;\n    }\n\n    .entry-card {\n      background: var(--cg-color-surface-base-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-12);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .entry-card:hover { border-color: var(--cg-color-surface-cards-border); }\n    .entry-card:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .entry-card:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    .entry-top {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      flex-wrap: wrap;\n    }\n\n    .version {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .type-badge {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n    }\n    .type-badge.type-model {\n      background: var(--cg-color-status-info-background-default);\n      color: var(--cg-color-status-info-text-default);\n    }\n    .type-badge.type-prompt {\n      background: var(--cg-overlay-accent-subtle);\n      color: var(--cg-color-surface-base-text);\n    }\n    .type-badge.type-config {\n      background: var(--cg-overlay-accent-light);\n      color: var(--cg-color-chart-7);\n    }\n    .type-badge.type-data {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n    }\n\n    .entry-dot.type-model { background: var(--cg-color-status-info-text-default); }\n    .entry-dot.type-prompt { background: var(--cg-color-action-primary-background-default); }\n    .entry-dot.type-config { background: var(--cg-color-chart-7); }\n    .entry-dot.type-data { background: var(--cg-color-status-success-text-default); }\n\n    .entry-meta {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-border-hover);\n      margin-top: var(--cg-spacing-4);\n    }\n\n    .changes-preview {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-6);\n      line-height: 1.5;\n      overflow: hidden;\n      max-height: var(--cg-spacing-40);\n      transition: max-height var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .changes-preview.expanded {\n      max-height: var(--_ai-changelog-expanded-max-height, 500px);\n    }\n\n    .expand-toggle {\n      background: transparent;\n      border: none;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      cursor: pointer;\n      padding: var(--cg-spacing-4) 0;\n      margin-top: var(--cg-spacing-4);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .expand-toggle:hover { color: var(--cg-color-surface-base-text); }\n    .expand-toggle:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .entry-actions {\n      display: flex;\n      justify-content: flex-end;\n      margin-top: var(--cg-spacing-8);\n    }\n\n    .rollback-btn {\n      background: transparent;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default), color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .rollback-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .rollback-btn:hover {\n      border-color: var(--cg-color-status-warning-text);\n      color: var(--cg-color-status-warning-text);\n    }\n    .rollback-btn:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .empty-state {\n      text-align: center;\n      color: var(--cg-color-input-border-hover);\n      font-size: var(--cg-font-size-sm);\n      padding: var(--cg-spacing-24) 0;\n    }\n  `];\n  @property({ type: Array }) entries: ChangelogEntry[] = [];\n\n  @state() private _expandedSet = new Set<string>();\n\n  private _toggle(id: string) {\n    if (this._expandedSet.has(id)) {\n      this._expandedSet.delete(id);\n    } else {\n      this._expandedSet.add(id);\n    }\n    this.requestUpdate();\n  }\n\n  private _handleClick(entry: ChangelogEntry) {\n    this.dispatchEvent(new CustomEvent('ai-changelog-entry-click', {\n      detail: { version: entry.version, type: entry.type, date: entry.date },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleRollback(e: Event, entry: ChangelogEntry) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-changelog-rollback', {\n      detail: { version: entry.version, type: entry.type },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    if (!this.entries.length) {\n      return html`<div class=\"container\"><div class=\"empty-state\" role=\"status\">No changelog entries</div></div>`;\n    }\n\n    return html`\n      <div class=\"container\" role=\"region\" aria-label=\"Changelog\">\n        <div class=\"header\">Changelog</div>\n\n        <div class=\"timeline\" role=\"list\" aria-label=\"Version history\">\n          ${this.entries.map((entry, i) => {\n            const id = `${entry.version}-${i}`;\n            const expanded = this._expandedSet.has(id);\n            const typeCls = TYPE_CSS_CLASS[entry.type] || TYPE_CSS_CLASS.config;\n\n            return html`\n              <div class=\"entry\" role=\"listitem\">\n                <div class=\"entry-dot ${typeCls}\" aria-hidden=\"true\"></div>\n                <div\n                  class=\"entry-card\"\n                  tabindex=\"0\"\n                  aria-label=\"Version ${entry.version}, ${entry.type} change on ${entry.date}\"\n                  @click=${() => this._handleClick(entry)}\n                  @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleClick(entry); } }}\n                >\n                  <div class=\"entry-top\">\n                    <span class=\"version\">${entry.version}</span>\n                    <span\n                      class=\"type-badge ${typeCls}\"\n                    >${entry.type}</span>\n                  </div>\n\n                  <div class=\"entry-meta\">\n                    <span>${entry.date}</span>\n                    ${entry.author ? html`<span>${entry.author}</span>` : nothing}\n                  </div>\n\n                  <div class=\"changes-preview ${expanded ? 'expanded' : ''}\">\n                    ${entry.changes}\n                  </div>\n\n                  <button\n                    class=\"expand-toggle\"\n                    @click=${(e: Event) => { e.stopPropagation(); this._toggle(id); }}\n                    aria-expanded=${expanded ? 'true' : 'false'}\n                    aria-label=${expanded ? 'Collapse details' : 'Expand details'}\n                    tabindex=\"0\"\n                  >${expanded ? 'Show less' : 'Show more'}</button>\n\n                  <div class=\"entry-actions\">\n                    <button\n                      class=\"rollback-btn\"\n                      @click=${(e: Event) => this._handleRollback(e, entry)}\n                      aria-label=\"Rollback to version ${entry.version}\"\n                      tabindex=\"0\"\n                    >Rollback</button>\n                  </div>\n                </div>\n              </div>\n            `;\n          })}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-changelog': AiChangelog;\n  }\n}\n"],"names":["TYPE_CSS_CLASS","AiChangelog","LitElement","id","entry","e","html","i","expanded","typeCls","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;AA2BA,MAAMA,IAAyC;AAAA,EAC7C,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,MAAM;AACR;AAGO,IAAMC,IAAN,cAA0BC,EAAW;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAsLsB,KAAA,UAA4B,CAAA,GAE9C,KAAQ,mCAAmB,IAAA;AAAA,EAAY;AAAA,EAExC,QAAQC,GAAY;AAC1B,IAAI,KAAK,aAAa,IAAIA,CAAE,IAC1B,KAAK,aAAa,OAAOA,CAAE,IAE3B,KAAK,aAAa,IAAIA,CAAE,GAE1B,KAAK,cAAA;AAAA,EACP;AAAA,EAEQ,aAAaC,GAAuB;AAC1C,SAAK,cAAc,IAAI,YAAY,4BAA4B;AAAA,MAC7D,QAAQ,EAAE,SAASA,EAAM,SAAS,MAAMA,EAAM,MAAM,MAAMA,EAAM,KAAA;AAAA,MAChE,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAEQ,gBAAgBC,GAAUD,GAAuB;AACvD,IAAAC,EAAE,gBAAA,GACF,KAAK,cAAc,IAAI,YAAY,yBAAyB;AAAA,MAC1D,QAAQ,EAAE,SAASD,EAAM,SAAS,MAAMA,EAAM,KAAA;AAAA,MAC9C,SAAS;AAAA,MACT,UAAU;AAAA,IAAA,CACX,CAAC;AAAA,EACJ;AAAA,EAES,SAAS;AAChB,WAAK,KAAK,QAAQ,SAIXE;AAAA;AAAA;AAAA;AAAA;AAAA,YAKC,KAAK,QAAQ,IAAI,CAACF,GAAOG,MAAM;AAC/B,YAAMJ,IAAK,GAAGC,EAAM,OAAO,IAAIG,CAAC,IAC1BC,IAAW,KAAK,aAAa,IAAIL,CAAE,GACnCM,IAAUT,EAAeI,EAAM,IAAI,KAAKJ,EAAe;AAE7D,aAAOM;AAAA;AAAA,wCAEqBG,CAAO;AAAA;AAAA;AAAA;AAAA,wCAIPL,EAAM,OAAO,KAAKA,EAAM,IAAI,cAAcA,EAAM,IAAI;AAAA,2BACjE,MAAM,KAAK,aAAaA,CAAK,CAAC;AAAA,6BAC5B,CAAC,MAAqB;AAAE,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SAAO,EAAE,eAAA,GAAkB,KAAK,aAAaA,CAAK;AAAA,MAAK,CAAC;AAAA;AAAA;AAAA,4CAGpGA,EAAM,OAAO;AAAA;AAAA,0CAEfK,CAAO;AAAA,uBAC1BL,EAAM,IAAI;AAAA;AAAA;AAAA;AAAA,4BAILA,EAAM,IAAI;AAAA,sBAChBA,EAAM,SAASE,UAAaF,EAAM,MAAM,YAAYM,CAAO;AAAA;AAAA;AAAA,gDAGjCF,IAAW,aAAa,EAAE;AAAA,sBACpDJ,EAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,6BAKN,CAAC,MAAa;AAAE,UAAE,gBAAA,GAAmB,KAAK,QAAQD,CAAE;AAAA,MAAG,CAAC;AAAA,oCACjDK,IAAW,SAAS,OAAO;AAAA,iCAC9BA,IAAW,qBAAqB,gBAAgB;AAAA;AAAA,qBAE5DA,IAAW,cAAc,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,+BAK1B,CAAC,MAAa,KAAK,gBAAgB,GAAGJ,CAAK,CAAC;AAAA,wDACnBA,EAAM,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAO3D,CAAC,CAAC;AAAA;AAAA;AAAA,QA1DCE;AAAA,EA8DX;AACF;AArRaL,EACK,SAAS,CAACU,GAAWC,GAAeC,GAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAoLzE;AAC0BC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAtLdf,EAsLgB,WAAA,WAAA,CAAA;AAEVc,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAxLIhB,EAwLM,WAAA,gBAAA,CAAA;AAxLNA,IAANc,EAAA;AAAA,EADNG,EAAc,cAAc;AAAA,GAChBjB,CAAA;"}

package/dist/components/ai-chart-summary/ai-chart-summary.d.ts

@@ -0,0 +1,30 @@
+import { LitElement, nothing } from 'lit';
+interface Trend {
+    label: string;
+    direction: 'up' | 'down' | 'neutral';
+    value: string;
+}
+export declare class AiChartSummary extends LitElement {
+    static styles: import('lit').CSSResult[];
+    summary: string;
+    trends: Trend[];
+    collapsible: boolean;
+    confidence: number;
+    type: 'summary' | 'anomaly' | 'forecast' | 'comparison';
+    compact: boolean;
+    loading: boolean;
+    timeRange: string;
+    private _collapsed;
+    private _toggle;
+    private _handleTrendClick;
+    private _handleRefresh;
+    private _trendIcon;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-chart-summary': AiChartSummary;
+    }
+}
+export {};
+//# sourceMappingURL=ai-chart-summary.d.ts.map

package/dist/components/ai-chart-summary/ai-chart-summary.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-chart-summary.d.ts","sourceRoot":"","sources":["../../../src/components/ai-chart-summary/ai-chart-summary.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAGrD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,+CAA+C,CAAC;AAEvD,UAAU,KAAK;IACb,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BAmInB;IAES,OAAO,SAAM;IACE,MAAM,EAAE,KAAK,EAAE,CAAM;IACnB,WAAW,UAAS;IACrB,UAAU,SAAK;IAC/B,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAa;IACpC,OAAO,UAAS;IAC/B,OAAO,UAAS;IACjC,SAAS,SAAM;IAElB,OAAO,CAAC,UAAU,CAAS;IAEpC,OAAO,CAAC,OAAO;IAKf,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,UAAU;IAMT,MAAM;CA+EhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

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

@@ -0,0 +1,269 @@
+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;
+};
+let r = class extends h {
+  constructor() {
+    super(...arguments), this.summary = "", this.trends = [], this.collapsible = !1, this.confidence = 0, this.type = "summary", this.compact = !1, this.loading = !1, this.timeRange = "", this._collapsed = !1;
+  }
+  _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 }));
+  }
+  _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`
+        <div class="card">
+          <div class="header">
+            <span class="ai-dot"></span>
+            <span class="header-label">AI Insight</span>
+          </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">
+        <div class="header">
+          <span class="ai-dot" aria-hidden="true"></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}
+          </div>
+        </div>
+
+        <div class="summary-text">${this.summary}</div>
+
+        ${this.trends.length > 0 ? s`
+          <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}"
+              >
+                <span class="trend-header">
+                  <cg-icon name="${this._trendIcon(e.direction)}" size="xs" aria-hidden="true"></cg-icon>
+                  ${e.label}
+                </span>
+                <span class="trend-value">${e.value}</span>
+              </button>
+            `)}
+          </div>
+        ` : c}
+
+        ${t ? s`
+          <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}
+          </div>
+        ` : c}
+      </div>
+    `;
+  }
+};
+r.styles = [m, f, b, p`
+    :host { display: block; }
+
+    .card {
+      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);
+      padding: var(--cg-spacing-20) var(--cg-spacing-24);
+    }
+
+    /* ── Header ── */
+    .header {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      margin-bottom: var(--cg-spacing-16);
+    }
+    .ai-dot {
+      width: var(--cg-spacing-6);
+      height: var(--cg-spacing-6);
+      background: var(--cg-color-accent-text);
+      border-radius: var(--cg-border-radius-full);
+      flex-shrink: 0;
+    }
+    .header-label {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-input-text-placeholder);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+    .header-right {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+    }
+    .time-range {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+    }
+
+    /* ── Summary text ── */
+    .summary-text {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-cards-text);
+      line-height: var(--cg-line-height-normal);
+      margin-bottom: var(--cg-spacing-20);
+    }
+
+    /* ── Trends ── */
+    .trends {
+      display: flex;
+      flex-wrap: wrap;
+      margin-bottom: var(--cg-spacing-16);
+    }
+    .trend {
+      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);
+    }
+    .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-header {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      font-weight: var(--cg-font-weight-medium);
+    }
+    .trend-value {
+      font-size: var(--cg-font-size-lg);
+      font-weight: var(--cg-font-weight-semibold);
+      letter-spacing: var(--cg-letter-spacing-tight);
+    }
+    .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); }
+
+    /* ── Footer metadata ── */
+    .footer {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding-top: var(--cg-spacing-12);
+      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);
+    }
+    .type-tag {
+      text-transform: capitalize;
+    }
+
+    /* ── Collapsed ── */
+    .collapsed .summary-text,
+    .collapsed .trends,
+    .collapsed .footer { display: none; }
+
+    /* ── Compact ── */
+    :host([compact]) .card { padding: var(--cg-spacing-12); }
+    :host([compact]) .summary-text { display: none; }
+    :host([compact]) .header { margin-bottom: var(--cg-spacing-8); }
+
+    /* ── Loading ── */
+    .skel {
+      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 { height: var(--cg-spacing-12); margin-bottom: var(--cg-spacing-8); }
+    .skel-line.short { width: 80%; }
+    .skel-line.shorter { width: 50%; }
+  `];
+a([
+  i()
+], r.prototype, "summary", 2);
+a([
+  i({ type: Array })
+], r.prototype, "trends", 2);
+a([
+  i({ type: Boolean })
+], r.prototype, "collapsible", 2);
+a([
+  i({ type: Number })
+], r.prototype, "confidence", 2);
+a([
+  i()
+], r.prototype, "type", 2);
+a([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "compact", 2);
+a([
+  i({ type: Boolean })
+], r.prototype, "loading", 2);
+a([
+  i()
+], r.prototype, "timeRange", 2);
+a([
+  u()
+], r.prototype, "_collapsed", 2);
+r = a([
+  v("ai-chart-summary")
+], r);
+export {
+  r as AiChartSummary
+};
+//# sourceMappingURL=ai-chart-summary.js.map

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

@@ -0,0 +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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"}