@cognivo/components 0.8.0

package/dist/components/ai-reasoning-tree/ai-reasoning-tree.js

@@ -0,0 +1,180 @@
+import { css as p, LitElement as h, nothing as d, html as s } from "lit";
+import { property as i, customElement as v } from "lit/decorators.js";
+import { h as u, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (t, e, o, c) => {
+  for (var a = c > 1 ? void 0 : c ? m(e, o) : e, g = t.length - 1, l; g >= 0; g--)
+    (l = t[g]) && (a = (c ? l(e, o, a) : l(a)) || a);
+  return c && a && b(e, o, a), a;
+};
+let r = class extends h {
+  constructor() {
+    super(...arguments), this.nodes = [], this.highlightPath = [], this.label = "Thinking", this.collapsed = !0, this.variant = "minimal";
+  }
+  _count(t) {
+    let e = 0;
+    for (const o of t)
+      e++, o.children && (e += this._count(o.children));
+    return e;
+  }
+  _renderNodes(t) {
+    return t.map((e) => s`
+      <div class="step ${this.highlightPath.includes(e.id) ? "highlighted" : ""}"
+        @click=${() => this.dispatchEvent(new CustomEvent("ai-reasoning-node-click", { bubbles: !0, composed: !0, detail: { id: e.id, type: e.type, content: e.content } }))}>
+        <span class="dot ${e.type}"></span>
+        <span class="step-text">${e.content}</span>
+        ${e.confidence ? s`<span class="conf">${Math.round(e.confidence * 100)}%</span>` : d}
+      </div>
+      ${e.children?.length ? s`<div class="children">${this._renderNodes(e.children)}</div>` : d}
+    `);
+  }
+  render() {
+    if (!this.nodes.length) return d;
+    const t = this._count(this.nodes);
+    return s`
+      <div class="reasoning">
+        <button class="toggle" @click=${() => {
+      this.collapsed = !this.collapsed;
+    }} aria-expanded=${!this.collapsed}>
+          <svg class="chevron" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
+          <span>${this.label}</span>
+          <span class="toggle-count">${t} step${t !== 1 ? "s" : ""}</span>
+        </button>
+        ${this.collapsed ? d : s`<div class="steps">${this._renderNodes(this.nodes)}</div>`}
+      </div>
+    `;
+  }
+};
+r.styles = [u, f, p`
+
+    /* ── Minimal variant (default) — Claude-style ── */
+    .reasoning {
+      border-left: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);
+      padding-left: var(--cg-spacing-20);
+    }
+
+    /* ── Contained variant — DeepSeek-style ── */
+    :host([variant="contained"]) .reasoning {
+      border-left: none;
+      padding-left: 0;
+      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-12);
+    }
+    :host([variant="contained"]) .toggle {
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+    }
+    :host([variant="contained"]) .steps {
+      padding: 0 var(--cg-spacing-16) var(--cg-spacing-16);
+    }
+
+    /* ── Toggle ── */
+    .toggle {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-8) 0;
+      cursor: pointer;
+      background: none;
+      border: none;
+      font: inherit;
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      width: 100%;
+      text-align: left;
+    }
+    .toggle:hover { color: var(--cg-color-surface-base-text); }
+    .toggle:focus-visible {
+      outline: none;
+      border-radius: var(--cg-border-radius-50);
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    .chevron {
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      flex-shrink: 0;
+      opacity: 0.5;
+    }
+    :host(:not([collapsed])) .chevron { transform: rotate(90deg); }
+
+    .toggle-count {
+      font-size: var(--cg-font-size-xs);
+      opacity: 0.5;
+      margin-left: auto;
+    }
+
+    /* ── Steps ── */
+    .steps {
+      display: flex;
+      flex-direction: column;
+      padding: var(--cg-spacing-6) 0 var(--cg-spacing-12);
+    }
+
+    .step {
+      display: flex;
+      align-items: baseline;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-12) var(--cg-spacing-12);
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-relaxed);
+      border-radius: var(--cg-border-radius-50);
+      cursor: default;
+      opacity: 0.8;
+    }
+    .step:hover { background: var(--cg-overlay-dark-subtle); }
+
+    .dot {
+      width: var(--cg-spacing-6);
+      height: var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+      flex-shrink: 0;
+      margin-top: var(--cg-spacing-6);
+    }
+    .dot.thought { background: var(--cg-color-action-primary-background-default); opacity: 0.7; }
+    .dot.action { background: var(--cg-color-status-info-text-default); opacity: 0.7; }
+    .dot.observation { background: var(--cg-color-status-warning-text-default); opacity: 0.7; }
+    .dot.conclusion { background: var(--cg-color-status-success-text-default); opacity: 0.7; }
+
+    .step-text { flex: 1; }
+
+    .conf {
+      font-size: var(--cg-font-size-xs);
+      font-family: var(--cg-font-family-mono);
+      opacity: 0.4;
+      flex-shrink: 0;
+    }
+
+    .children { padding-left: var(--cg-spacing-20); }
+
+    .step.highlighted { background: var(--cg-overlay-accent-subtle); }
+
+    @media (prefers-reduced-motion: reduce) {
+      .chevron { transition: none; }
+    }
+  `];
+n([
+  i({ type: Array })
+], r.prototype, "nodes", 2);
+n([
+  i({ type: Array })
+], r.prototype, "highlightPath", 2);
+n([
+  i()
+], r.prototype, "label", 2);
+n([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "collapsed", 2);
+n([
+  i({ reflect: !0 })
+], r.prototype, "variant", 2);
+r = n([
+  v("ai-reasoning-tree")
+], r);
+export {
+  r as AiReasoningTree
+};
+//# sourceMappingURL=ai-reasoning-tree.js.map

package/dist/components/ai-reasoning-tree/ai-reasoning-tree.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-reasoning-tree.js","sources":["../../../src/components/ai-reasoning-tree/ai-reasoning-tree.ts"],"sourcesContent":["/**\n * @element ai-reasoning-tree\n * Collapsible AI chain-of-thought display. Two variants:\n * - minimal (Claude-style): left border, no background\n * - contained (DeepSeek-style): subtle background card\n *\n * @fires {CustomEvent<{id: string, type: string, content: string}>} ai-reasoning-node-click\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface ReasoningNode {\n  id: string;\n  type: 'thought' | 'action' | 'observation' | 'conclusion';\n  content: string;\n  confidence?: number;\n  children?: ReasoningNode[];\n}\n\n@customElement('ai-reasoning-tree')\nexport class AiReasoningTree extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n\n    /* ── Minimal variant (default) — Claude-style ── */\n    .reasoning {\n      border-left: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);\n      padding-left: var(--cg-spacing-20);\n    }\n\n    /* ── Contained variant — DeepSeek-style ── */\n    :host([variant=\"contained\"]) .reasoning {\n      border-left: none;\n      padding-left: 0;\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-12);\n    }\n    :host([variant=\"contained\"]) .toggle {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n    }\n    :host([variant=\"contained\"]) .steps {\n      padding: 0 var(--cg-spacing-16) var(--cg-spacing-16);\n    }\n\n    /* ── Toggle ── */\n    .toggle {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-8) 0;\n      cursor: pointer;\n      background: none;\n      border: none;\n      font: inherit;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      width: 100%;\n      text-align: left;\n    }\n    .toggle:hover { color: var(--cg-color-surface-base-text); }\n    .toggle:focus-visible {\n      outline: none;\n      border-radius: var(--cg-border-radius-50);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    .chevron {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      flex-shrink: 0;\n      opacity: 0.5;\n    }\n    :host(:not([collapsed])) .chevron { transform: rotate(90deg); }\n\n    .toggle-count {\n      font-size: var(--cg-font-size-xs);\n      opacity: 0.5;\n      margin-left: auto;\n    }\n\n    /* ── Steps ── */\n    .steps {\n      display: flex;\n      flex-direction: column;\n      padding: var(--cg-spacing-6) 0 var(--cg-spacing-12);\n    }\n\n    .step {\n      display: flex;\n      align-items: baseline;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-12);\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-relaxed);\n      border-radius: var(--cg-border-radius-50);\n      cursor: default;\n      opacity: 0.8;\n    }\n    .step:hover { background: var(--cg-overlay-dark-subtle); }\n\n    .dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      flex-shrink: 0;\n      margin-top: var(--cg-spacing-6);\n    }\n    .dot.thought { background: var(--cg-color-action-primary-background-default); opacity: 0.7; }\n    .dot.action { background: var(--cg-color-status-info-text-default); opacity: 0.7; }\n    .dot.observation { background: var(--cg-color-status-warning-text-default); opacity: 0.7; }\n    .dot.conclusion { background: var(--cg-color-status-success-text-default); opacity: 0.7; }\n\n    .step-text { flex: 1; }\n\n    .conf {\n      font-size: var(--cg-font-size-xs);\n      font-family: var(--cg-font-family-mono);\n      opacity: 0.4;\n      flex-shrink: 0;\n    }\n\n    .children { padding-left: var(--cg-spacing-20); }\n\n    .step.highlighted { background: var(--cg-overlay-accent-subtle); }\n\n    @media (prefers-reduced-motion: reduce) {\n      .chevron { transition: none; }\n    }\n  `];\n\n  @property({ type: Array }) nodes: ReasoningNode[] = [];\n  @property({ type: Array }) highlightPath: string[] = [];\n  @property() label = 'Thinking';\n  @property({ type: Boolean, reflect: true }) collapsed = true;\n  @property({ reflect: true }) variant: 'minimal' | 'contained' = 'minimal';\n\n  private _count(nodes: ReasoningNode[]): number {\n    let c = 0;\n    for (const n of nodes) { c++; if (n.children) c += this._count(n.children); }\n    return c;\n  }\n\n  private _renderNodes(nodes: ReasoningNode[]): unknown {\n    return nodes.map(n => html`\n      <div class=\"step ${this.highlightPath.includes(n.id) ? 'highlighted' : ''}\"\n        @click=${() => this.dispatchEvent(new CustomEvent('ai-reasoning-node-click', { bubbles: true, composed: true, detail: { id: n.id, type: n.type, content: n.content } }))}>\n        <span class=\"dot ${n.type}\"></span>\n        <span class=\"step-text\">${n.content}</span>\n        ${n.confidence ? html`<span class=\"conf\">${Math.round(n.confidence * 100)}%</span>` : nothing}\n      </div>\n      ${n.children?.length ? html`<div class=\"children\">${this._renderNodes(n.children)}</div>` : nothing}\n    `);\n  }\n\n  override render() {\n    if (!this.nodes.length) return nothing;\n    const total = this._count(this.nodes);\n\n    return html`\n      <div class=\"reasoning\">\n        <button class=\"toggle\" @click=${() => { this.collapsed = !this.collapsed; }} aria-expanded=${!this.collapsed}>\n          <svg class=\"chevron\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"/></svg>\n          <span>${this.label}</span>\n          <span class=\"toggle-count\">${total} step${total !== 1 ? 's' : ''}</span>\n        </button>\n        ${!this.collapsed ? html`<div class=\"steps\">${this._renderNodes(this.nodes)}</div>` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiReasoningTree","LitElement","nodes","c","n","html","nothing","total","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAqBO,IAAMA,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAkHsB,KAAA,QAAyB,CAAA,GACzB,KAAA,gBAA0B,CAAA,GACzC,KAAA,QAAQ,YACwB,KAAA,YAAY,IAC3B,KAAA,UAAmC;AAAA,EAAA;AAAA,EAExD,OAAOC,GAAgC;AAC7C,QAAIC,IAAI;AACR,eAAWC,KAAKF;AAAS,MAAAC,KAASC,EAAE,aAAUD,KAAK,KAAK,OAAOC,EAAE,QAAQ;AACzE,WAAOD;AAAA,EACT;AAAA,EAEQ,aAAaD,GAAiC;AACpD,WAAOA,EAAM,IAAI,CAAAE,MAAKC;AAAA,yBACD,KAAK,cAAc,SAASD,EAAE,EAAE,IAAI,gBAAgB,EAAE;AAAA,iBAC9D,MAAM,KAAK,cAAc,IAAI,YAAY,2BAA2B,EAAE,SAAS,IAAM,UAAU,IAAM,QAAQ,EAAE,IAAIA,EAAE,IAAI,MAAMA,EAAE,MAAM,SAASA,EAAE,UAAQ,CAAG,CAAC,CAAC;AAAA,2BACrJA,EAAE,IAAI;AAAA,kCACCA,EAAE,OAAO;AAAA,UACjCA,EAAE,aAAaC,uBAA0B,KAAK,MAAMD,EAAE,aAAa,GAAG,CAAC,aAAaE,CAAO;AAAA;AAAA,QAE7FF,EAAE,UAAU,SAASC,0BAA6B,KAAK,aAAaD,EAAE,QAAQ,CAAC,WAAWE,CAAO;AAAA,KACpG;AAAA,EACH;AAAA,EAES,SAAS;AAChB,QAAI,CAAC,KAAK,MAAM,OAAQ,QAAOA;AAC/B,UAAMC,IAAQ,KAAK,OAAO,KAAK,KAAK;AAEpC,WAAOF;AAAA;AAAA,wCAE6B,MAAM;AAAE,WAAK,YAAY,CAAC,KAAK;AAAA,IAAW,CAAC,kBAAkB,CAAC,KAAK,SAAS;AAAA;AAAA,kBAElG,KAAK,KAAK;AAAA,uCACWE,CAAK,QAAQA,MAAU,IAAI,MAAM,EAAE;AAAA;AAAA,UAE/D,KAAK,YAA8ED,IAAlED,uBAA0B,KAAK,aAAa,KAAK,KAAK,CAAC,QAAkB;AAAA;AAAA;AAAA,EAGnG;AACF;AAzJaL,EACK,SAAS,CAACQ,GAAWC,GAAeC;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,GA+GnD;AAE0BC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAlHdZ,EAkHgB,WAAA,SAAA,CAAA;AACAW,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAnHdZ,EAmHgB,WAAA,iBAAA,CAAA;AACfW,EAAA;AAAA,EAAXC,EAAA;AAAS,GApHCZ,EAoHC,WAAA,SAAA,CAAA;AACgCW,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArH/BZ,EAqHiC,WAAA,aAAA,CAAA;AACfW,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAtHhBZ,EAsHkB,WAAA,WAAA,CAAA;AAtHlBA,IAANW,EAAA;AAAA,EADNE,EAAc,mBAAmB;AAAA,GACrBb,CAAA;"}

package/dist/components/ai-result-panel/ai-result-panel.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+interface Driver {
+    factor: string;
+    impact: number;
+}
+interface Source {
+    title: string;
+    url?: string;
+    excerpt?: string;
+}
+export declare class AiResultPanel extends LitElement {
+    static styles: import('lit').CSSResult[];
+    title: string;
+    explanation: string;
+    bullets: string[];
+    drivers: Driver[];
+    confidence: number;
+    collapsible: boolean;
+    sources: Source[];
+    data: Record<string, unknown>[];
+    streaming: boolean;
+    private _collapsed;
+    private _activeTab;
+    private _sortAsc;
+    private get _sortedDrivers();
+    private _toggleCollapse;
+    private _handleExport;
+    private _handleCopy;
+    private _renderSummary;
+    private _renderData;
+    private _renderSources;
+    render(): import('lit').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=ai-result-panel.d.ts.map

package/dist/components/ai-result-panel/ai-result-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-result-panel.d.ts","sourceRoot":"","sources":["../../../src/components/ai-result-panel/ai-result-panel.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,UAAU,MAAM;IAAG,MAAM,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;CAAE;AACpD,UAAU,MAAM;IAAG,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,CAAC;CAAE;AAEnE,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAgPnB;IAEkB,KAAK,SAAiB;IAC/B,WAAW,SAAM;IACF,OAAO,EAAE,MAAM,EAAE,CAAM;IACvB,OAAO,EAAE,MAAM,EAAE,CAAM;IACtB,UAAU,SAAK;IACd,WAAW,UAAS;IACtB,OAAO,EAAE,MAAM,EAAE,CAAM;IACvB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAAE,CAAM;IACnC,SAAS,UAAS;IAEtC,OAAO,CAAC,UAAU,CAAS;IAC3B,OAAO,CAAC,UAAU,CAA6C;IAC/D,OAAO,CAAC,QAAQ,CAAS;IAElC,OAAO,KAAK,cAAc,GAEzB;IAED,OAAO,CAAC,eAAe;IAEvB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,cAAc;IAqCtB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,cAAc;IAUb,MAAM;CA4ChB"}

package/dist/components/ai-result-panel/ai-result-panel.js

@@ -0,0 +1,412 @@
+import { css as p, LitElement as h, nothing as o, html as e } from "lit";
+import { property as s, state as v, customElement as u } from "lit/decorators.js";
+import { h as b, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (t, r, l, n) => {
+  for (var c = n > 1 ? void 0 : n ? x(r, l) : r, d = t.length - 1, g; d >= 0; d--)
+    (g = t[d]) && (c = (n ? g(r, l, c) : g(c)) || c);
+  return n && c && m(r, l, c), c;
+};
+let a = class extends h {
+  constructor() {
+    super(...arguments), this.title = "AI Analysis", this.explanation = "", this.bullets = [], this.drivers = [], this.confidence = 0, this.collapsible = !1, this.sources = [], this.data = [], this.streaming = !1, this._collapsed = !1, this._activeTab = "summary", this._sortAsc = !1;
+  }
+  get _sortedDrivers() {
+    return [...this.drivers].sort((t, r) => this._sortAsc ? t.impact - r.impact : r.impact - t.impact);
+  }
+  _toggleCollapse() {
+    this.collapsible && (this._collapsed = !this._collapsed);
+  }
+  _handleExport(t) {
+    this.dispatchEvent(new CustomEvent("ai-result-export", { bubbles: !0, composed: !0, detail: { format: t, title: this.title, explanation: this.explanation, bullets: this.bullets, drivers: this.drivers } }));
+  }
+  _handleCopy() {
+    const t = `${this.title}
+
+${this.explanation}
+
+${this.bullets.map((r) => `• ${r}`).join(`
+`)}`;
+    navigator.clipboard?.writeText(t), this.dispatchEvent(new CustomEvent("ai-result-copy", { bubbles: !0, composed: !0, detail: { content: t } }));
+  }
+  _renderSummary() {
+    return e`
+      ${this.explanation ? e`<div class="explanation">${this.explanation}</div>` : o}
+
+      ${this.bullets.length > 0 ? e`
+        <ul class="bullets" role="list">
+          ${this.bullets.map((t) => e`<li class="bullet"><span class="bullet-dot"></span>${t}</li>`)}
+        </ul>
+      ` : o}
+
+      ${this.drivers.length > 0 ? e`
+        <div class="drivers-header">
+          <span class="drivers-label">Impact Drivers</span>
+          <button class="sort-btn" @click=${() => {
+      this._sortAsc = !this._sortAsc;
+    }}>
+            Sort
+            ${this._sortAsc ? 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>` : 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>`}
+          </button>
+        </div>
+        <div class="drivers">
+          ${this._sortedDrivers.map((t) => e`
+            <div class="driver">
+              <div class="driver-top">
+                <span class="driver-name">${t.factor}</span>
+                <span class="driver-value ${t.impact >= 0 ? "positive" : "negative"}">${t.impact >= 0 ? "+" : ""}${t.impact}%</span>
+              </div>
+              <div class="driver-bar">
+                <div class="driver-fill ${t.impact >= 0 ? "positive" : "negative"}" style="width:${Math.min(Math.abs(t.impact), 100)}%"></div>
+              </div>
+            </div>
+          `)}
+        </div>
+      ` : o}
+    `;
+  }
+  _renderData() {
+    if (!this.data.length || !this.data[0]) return e`<div class="empty">No data available</div>`;
+    const t = Object.keys(this.data[0]);
+    return e`
+      <table class="data-table">
+        <thead><tr>${t.map((r) => e`<th>${r}</th>`)}</tr></thead>
+        <tbody>${this.data.map((r) => e`<tr>${t.map((l) => e`<td>${String(r[l] ?? "")}</td>`)}</tr>`)}</tbody>
+      </table>
+    `;
+  }
+  _renderSources() {
+    return this.sources.length ? e`${this.sources.map((t) => e`
+      <div class="source-item">
+        ${t.url ? e`<a class="source-title" href="${t.url}" target="_blank" rel="noopener">${t.title}</a>` : e`<span class="source-title">${t.title}</span>`}
+        ${t.excerpt ? e`<div class="source-excerpt">${t.excerpt}</div>` : o}
+      </div>
+    `)}` : e`<div class="empty">No sources available</div>`;
+  }
+  render() {
+    if (!this.explanation && !this.streaming)
+      return e`<div class="panel"><div class="empty">No results yet.</div></div>`;
+    const t = this.data.length > 0 || this.sources.length > 0;
+    return e`
+      <div class="panel ${this._collapsed ? "collapsed" : ""}" role="region" aria-label="${this.title}">
+        <div class="header"
+          role=${this.collapsible ? "button" : "heading"}
+          tabindex=${this.collapsible ? "0" : "-1"}
+          aria-expanded=${this.collapsible ? String(!this._collapsed) : o}
+          @click=${this._toggleCollapse}
+          @keydown=${(r) => {
+      this.collapsible && (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._toggleCollapse());
+    }}>
+          <div class="header-left">
+            ${this.collapsible ? e`<span class="collapse-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg></span>` : o}
+            <span class="title">${this.title}</span>
+            ${this.confidence > 0 ? e`<span class="confidence">${this.confidence}%</span>` : o}
+          </div>
+          <div class="header-actions" @click=${(r) => r.stopPropagation()}>
+            <button class="header-btn" @click=${this._handleCopy}>Copy</button>
+            <button class="header-btn" @click=${() => this._handleExport("json")}>Export</button>
+          </div>
+        </div>
+
+        <div class="body">
+          ${this.streaming ? e`<div class="streaming-indicator"><ai-thinking text="Analyzing" shimmer delay="0"></ai-thinking></div>` : o}
+
+          ${t ? e`
+            <div class="tabs">
+              <button class="tab ${this._activeTab === "summary" ? "active" : ""}" @click=${() => this._activeTab = "summary"}>Summary</button>
+              ${this.data.length > 0 ? e`<button class="tab ${this._activeTab === "data" ? "active" : ""}" @click=${() => this._activeTab = "data"}>Data</button>` : o}
+              ${this.sources.length > 0 ? e`<button class="tab ${this._activeTab === "sources" ? "active" : ""}" @click=${() => this._activeTab = "sources"}>Sources</button>` : o}
+            </div>
+          ` : o}
+
+          ${this._activeTab === "summary" ? this._renderSummary() : o}
+          ${this._activeTab === "data" ? this._renderData() : o}
+          ${this._activeTab === "sources" ? this._renderSources() : o}
+        </div>
+      </div>
+    `;
+  }
+};
+a.styles = [b, f, p`
+    :host { display: block; }
+
+    .panel {
+      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);
+      overflow: hidden;
+    }
+
+    /* ── Header ── */
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: var(--cg-spacing-16) var(--cg-spacing-20);
+      cursor: pointer;
+    }
+    .header-left { display: flex; align-items: center; gap: var(--cg-spacing-8); }
+    .title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+    .confidence {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      font-weight: var(--cg-font-weight-medium);
+    }
+    .collapse-icon {
+      color: var(--cg-color-input-text-placeholder);
+      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .collapse-icon svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); display: block; }
+    .panel.collapsed .collapse-icon { transform: rotate(-90deg); }
+
+    .header-actions { display: flex; gap: var(--cg-spacing-4); }
+    .header-btn {
+      background: none;
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      color: var(--cg-color-input-text-placeholder);
+      border-radius: var(--cg-border-radius-50);
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      cursor: pointer;
+      font-family: inherit;
+      transition:
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .header-btn:hover { color: var(--cg-color-surface-base-text); border-color: var(--cg-color-input-border-hover); }
+    .header-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .header-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+
+    /* ── Body ── */
+    .body { padding: 0 var(--cg-spacing-20) var(--cg-spacing-20); }
+    .panel.collapsed .body { display: none; }
+
+    /* ── Tabs ── */
+    .tabs {
+      display: flex;
+      margin-bottom: var(--cg-spacing-16);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    .tab {
+      padding: var(--cg-spacing-8) var(--cg-spacing-16);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-input-text-placeholder);
+      background: none;
+      border: none;
+      border-bottom: var(--cg-border-width-100) solid transparent;
+      cursor: pointer;
+      font-family: inherit;
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .tab:hover { color: var(--cg-color-surface-base-text); }
+    .tab.active {
+      color: var(--cg-color-surface-base-text);
+      border-bottom-color: var(--cg-color-action-primary-background-default);
+    }
+    .tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+
+    /* ── Explanation ── */
+    .explanation {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-normal);
+      margin-bottom: var(--cg-spacing-16);
+      padding-bottom: var(--cg-spacing-16);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+
+    /* ── Bullets ── */
+    .bullets {
+      list-style: none;
+      padding: 0;
+      margin: 0 0 var(--cg-spacing-16);
+      padding-bottom: var(--cg-spacing-16);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+    }
+    .bullet {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--cg-spacing-8);
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-normal);
+    }
+    .bullet-dot {
+      width: var(--cg-spacing-4);
+      height: var(--cg-spacing-4);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-action-primary-background-default);
+      flex-shrink: 0;
+      margin-top: var(--cg-spacing-8);
+    }
+
+    /* ── Drivers ── */
+    .drivers-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: var(--cg-spacing-12);
+    }
+    .drivers-label {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-input-text-placeholder);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+    .sort-btn {
+      background: none;
+      border: none;
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-xs);
+      cursor: pointer;
+      font-family: inherit;
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+    }
+    .sort-btn:hover { color: var(--cg-color-surface-base-text); }
+    .sort-btn svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }
+
+    .drivers {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+    }
+    .driver {
+      padding: var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-50);
+      background: var(--cg-overlay-dark-subtle);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    .driver-top {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: var(--cg-spacing-8);
+    }
+    .driver-name {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      font-weight: var(--cg-font-weight-medium);
+    }
+    .driver-value {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+    .driver-value.positive { color: var(--cg-color-status-success-text-default); }
+    .driver-value.negative { color: var(--cg-color-status-error-text-default); }
+
+    .driver-bar {
+      height: var(--cg-spacing-4);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-container-background);
+      overflow: hidden;
+    }
+    .driver-fill {
+      height: 100%;
+      border-radius: var(--cg-border-radius-full);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+    .driver-fill.positive { background: var(--cg-color-status-success-text-default); }
+    .driver-fill.negative { background: var(--cg-color-status-error-text-default); }
+
+    /* ── Sources ── */
+    .source-item {
+      padding: var(--cg-spacing-12) 0;
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    .source-item:last-child { border-bottom: none; }
+    .source-title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+      text-decoration: none;
+    }
+    .source-title:hover { text-decoration: underline; }
+    .source-excerpt {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      margin-top: var(--cg-spacing-4);
+      line-height: var(--cg-line-height-normal);
+    }
+
+    /* ── Data table ── */
+    .data-table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: var(--cg-font-size-xs);
+    }
+    .data-table th {
+      text-align: left;
+      padding: var(--cg-spacing-8);
+      color: var(--cg-color-input-text-placeholder);
+      font-weight: var(--cg-font-weight-medium);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    .data-table td {
+      padding: var(--cg-spacing-8);
+      color: var(--cg-color-surface-base-text);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+
+    /* ── Streaming ── */
+    .streaming-indicator { padding: var(--cg-spacing-12) 0; }
+
+    .empty {
+      text-align: center;
+      padding: var(--cg-spacing-24);
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-sm);
+    }
+  `];
+i([
+  s()
+], a.prototype, "title", 2);
+i([
+  s()
+], a.prototype, "explanation", 2);
+i([
+  s({ type: Array })
+], a.prototype, "bullets", 2);
+i([
+  s({ type: Array })
+], a.prototype, "drivers", 2);
+i([
+  s({ type: Number })
+], a.prototype, "confidence", 2);
+i([
+  s({ type: Boolean })
+], a.prototype, "collapsible", 2);
+i([
+  s({ type: Array })
+], a.prototype, "sources", 2);
+i([
+  s({ type: Array })
+], a.prototype, "data", 2);
+i([
+  s({ type: Boolean })
+], a.prototype, "streaming", 2);
+i([
+  v()
+], a.prototype, "_collapsed", 2);
+i([
+  v()
+], a.prototype, "_activeTab", 2);
+i([
+  v()
+], a.prototype, "_sortAsc", 2);
+a = i([
+  u("ai-result-panel")
+], a);
+export {
+  a as AiResultPanel
+};
+//# sourceMappingURL=ai-result-panel.js.map