@cognivo/components 0.8.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-result-panel.js","sources":["../../../src/components/ai-result-panel/ai-result-panel.ts"],"sourcesContent":["/**\n * @element ai-result-panel\n * Collapsible AI analysis panel with tabbed views (Summary, Data, Sources).\n *\n * @fires {CustomEvent<{format: string}>} ai-result-export\n * @fires {CustomEvent<{content: string}>} ai-result-copy\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\ninterface Driver { factor: string; impact: number; }\ninterface Source { title: string; url?: string; excerpt?: string; }\n\n@customElement('ai-result-panel')\nexport class AiResultPanel extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n\n    .panel {\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      overflow: hidden;\n    }\n\n    /* ── Header ── */\n    .header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      cursor: pointer;\n    }\n    .header-left { display: flex; align-items: center; gap: var(--cg-spacing-8); }\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n    .confidence {\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    .collapse-icon {\n      color: var(--cg-color-input-text-placeholder);\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .collapse-icon svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); display: block; }\n    .panel.collapsed .collapse-icon { transform: rotate(-90deg); }\n\n    .header-actions { display: flex; gap: var(--cg-spacing-4); }\n    .header-btn {\n      background: none;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-input-text-placeholder);\n      border-radius: var(--cg-border-radius-50);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      font-family: inherit;\n      transition:\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .header-btn:hover { color: var(--cg-color-surface-base-text); border-color: var(--cg-color-input-border-hover); }\n    .header-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .header-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n\n    /* ── Body ── */\n    .body { padding: 0 var(--cg-spacing-20) var(--cg-spacing-20); }\n    .panel.collapsed .body { display: none; }\n\n    /* ── Tabs ── */\n    .tabs {\n      display: flex;\n      margin-bottom: var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .tab {\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\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      background: none;\n      border: none;\n      border-bottom: var(--cg-border-width-100) solid transparent;\n      cursor: pointer;\n      font-family: inherit;\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .tab:hover { color: var(--cg-color-surface-base-text); }\n    .tab.active {\n      color: var(--cg-color-surface-base-text);\n      border-bottom-color: var(--cg-color-action-primary-background-default);\n    }\n    .tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n\n    /* ── Explanation ── */\n    .explanation {\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-16);\n      padding-bottom: var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n\n    /* ── Bullets ── */\n    .bullets {\n      list-style: none;\n      padding: 0;\n      margin: 0 0 var(--cg-spacing-16);\n      padding-bottom: var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n    .bullet {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--cg-spacing-8);\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    }\n    .bullet-dot {\n      width: var(--cg-spacing-4);\n      height: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-primary-background-default);\n      flex-shrink: 0;\n      margin-top: var(--cg-spacing-8);\n    }\n\n    /* ── Drivers ── */\n    .drivers-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .drivers-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    .sort-btn {\n      background: none;\n      border: none;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      cursor: pointer;\n      font-family: inherit;\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n    }\n    .sort-btn:hover { color: var(--cg-color-surface-base-text); }\n    .sort-btn svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n\n    .drivers {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n    .driver {\n      padding: var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-overlay-dark-subtle);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .driver-top {\n      display: flex;\n      justify-content: space-between;\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .driver-name {\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    .driver-value {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .driver-value.positive { color: var(--cg-color-status-success-text-default); }\n    .driver-value.negative { color: var(--cg-color-status-error-text-default); }\n\n    .driver-bar {\n      height: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-container-background);\n      overflow: hidden;\n    }\n    .driver-fill {\n      height: 100%;\n      border-radius: var(--cg-border-radius-full);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    .driver-fill.positive { background: var(--cg-color-status-success-text-default); }\n    .driver-fill.negative { background: var(--cg-color-status-error-text-default); }\n\n    /* ── Sources ── */\n    .source-item {\n      padding: var(--cg-spacing-12) 0;\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .source-item:last-child { border-bottom: none; }\n    .source-title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      text-decoration: none;\n    }\n    .source-title:hover { text-decoration: underline; }\n    .source-excerpt {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-4);\n      line-height: var(--cg-line-height-normal);\n    }\n\n    /* ── Data table ── */\n    .data-table {\n      width: 100%;\n      border-collapse: collapse;\n      font-size: var(--cg-font-size-xs);\n    }\n    .data-table th {\n      text-align: left;\n      padding: var(--cg-spacing-8);\n      color: var(--cg-color-input-text-placeholder);\n      font-weight: var(--cg-font-weight-medium);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .data-table td {\n      padding: var(--cg-spacing-8);\n      color: var(--cg-color-surface-base-text);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n\n    /* ── Streaming ── */\n    .streaming-indicator { padding: var(--cg-spacing-12) 0; }\n\n    .empty {\n      text-align: center;\n      padding: var(--cg-spacing-24);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n    }\n  `];\n\n  @property() override title = 'AI Analysis';\n  @property() explanation = '';\n  @property({ type: Array }) bullets: string[] = [];\n  @property({ type: Array }) drivers: Driver[] = [];\n  @property({ type: Number }) confidence = 0;\n  @property({ type: Boolean }) collapsible = false;\n  @property({ type: Array }) sources: Source[] = [];\n  @property({ type: Array }) data: Record<string, unknown>[] = [];\n  @property({ type: Boolean }) streaming = false;\n\n  @state() private _collapsed = false;\n  @state() private _activeTab: 'summary' | 'data' | 'sources' = 'summary';\n  @state() private _sortAsc = false;\n\n  private get _sortedDrivers(): Driver[] {\n    return [...this.drivers].sort((a, b) => this._sortAsc ? a.impact - b.impact : b.impact - a.impact);\n  }\n\n  private _toggleCollapse() { if (this.collapsible) this._collapsed = !this._collapsed; }\n\n  private _handleExport(format: string) {\n    this.dispatchEvent(new CustomEvent('ai-result-export', { bubbles: true, composed: true, detail: { format, title: this.title, explanation: this.explanation, bullets: this.bullets, drivers: this.drivers } }));\n  }\n\n  private _handleCopy() {\n    const text = `${this.title}\\n\\n${this.explanation}\\n\\n${this.bullets.map(b => `• ${b}`).join('\\n')}`;\n    navigator.clipboard?.writeText(text);\n    this.dispatchEvent(new CustomEvent('ai-result-copy', { bubbles: true, composed: true, detail: { content: text } }));\n  }\n\n  private _renderSummary() {\n    return html`\n      ${this.explanation ? html`<div class=\"explanation\">${this.explanation}</div>` : nothing}\n\n      ${this.bullets.length > 0 ? html`\n        <ul class=\"bullets\" role=\"list\">\n          ${this.bullets.map(b => html`<li class=\"bullet\"><span class=\"bullet-dot\"></span>${b}</li>`)}\n        </ul>\n      ` : nothing}\n\n      ${this.drivers.length > 0 ? html`\n        <div class=\"drivers-header\">\n          <span class=\"drivers-label\">Impact Drivers</span>\n          <button class=\"sort-btn\" @click=${() => { this._sortAsc = !this._sortAsc; }}>\n            Sort\n            ${this._sortAsc\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              : 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          </button>\n        </div>\n        <div class=\"drivers\">\n          ${this._sortedDrivers.map(d => html`\n            <div class=\"driver\">\n              <div class=\"driver-top\">\n                <span class=\"driver-name\">${d.factor}</span>\n                <span class=\"driver-value ${d.impact >= 0 ? 'positive' : 'negative'}\">${d.impact >= 0 ? '+' : ''}${d.impact}%</span>\n              </div>\n              <div class=\"driver-bar\">\n                <div class=\"driver-fill ${d.impact >= 0 ? 'positive' : 'negative'}\" style=\"width:${Math.min(Math.abs(d.impact), 100)}%\"></div>\n              </div>\n            </div>\n          `)}\n        </div>\n      ` : nothing}\n    `;\n  }\n\n  private _renderData() {\n    if (!this.data.length || !this.data[0]) return html`<div class=\"empty\">No data available</div>`;\n    const keys = Object.keys(this.data[0]);\n    return html`\n      <table class=\"data-table\">\n        <thead><tr>${keys.map(k => html`<th>${k}</th>`)}</tr></thead>\n        <tbody>${this.data.map(row => html`<tr>${keys.map(k => html`<td>${String(row[k] ?? '')}</td>`)}</tr>`)}</tbody>\n      </table>\n    `;\n  }\n\n  private _renderSources() {\n    if (!this.sources.length) return html`<div class=\"empty\">No sources available</div>`;\n    return html`${this.sources.map(s => html`\n      <div class=\"source-item\">\n        ${s.url ? html`<a class=\"source-title\" href=\"${s.url}\" target=\"_blank\" rel=\"noopener\">${s.title}</a>` : html`<span class=\"source-title\">${s.title}</span>`}\n        ${s.excerpt ? html`<div class=\"source-excerpt\">${s.excerpt}</div>` : nothing}\n      </div>\n    `)}`;\n  }\n\n  override render() {\n    if (!this.explanation && !this.streaming) {\n      return html`<div class=\"panel\"><div class=\"empty\">No results yet.</div></div>`;\n    }\n\n    const hasTabs = this.data.length > 0 || this.sources.length > 0;\n\n    return html`\n      <div class=\"panel ${this._collapsed ? 'collapsed' : ''}\" role=\"region\" aria-label=\"${this.title}\">\n        <div class=\"header\"\n          role=${this.collapsible ? 'button' : 'heading'}\n          tabindex=${this.collapsible ? '0' : '-1'}\n          aria-expanded=${this.collapsible ? String(!this._collapsed) : nothing}\n          @click=${this._toggleCollapse}\n          @keydown=${(e: KeyboardEvent) => { if (this.collapsible && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); this._toggleCollapse(); } }}>\n          <div class=\"header-left\">\n            ${this.collapsible ? html`<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>` : nothing}\n            <span class=\"title\">${this.title}</span>\n            ${this.confidence > 0 ? html`<span class=\"confidence\">${this.confidence}%</span>` : nothing}\n          </div>\n          <div class=\"header-actions\" @click=${(e: Event) => e.stopPropagation()}>\n            <button class=\"header-btn\" @click=${this._handleCopy}>Copy</button>\n            <button class=\"header-btn\" @click=${() => this._handleExport('json')}>Export</button>\n          </div>\n        </div>\n\n        <div class=\"body\">\n          ${this.streaming ? html`<div class=\"streaming-indicator\"><ai-thinking text=\"Analyzing\" shimmer delay=\"0\"></ai-thinking></div>` : nothing}\n\n          ${hasTabs ? html`\n            <div class=\"tabs\">\n              <button class=\"tab ${this._activeTab === 'summary' ? 'active' : ''}\" @click=${() => this._activeTab = 'summary'}>Summary</button>\n              ${this.data.length > 0 ? html`<button class=\"tab ${this._activeTab === 'data' ? 'active' : ''}\" @click=${() => this._activeTab = 'data'}>Data</button>` : nothing}\n              ${this.sources.length > 0 ? html`<button class=\"tab ${this._activeTab === 'sources' ? 'active' : ''}\" @click=${() => this._activeTab = 'sources'}>Sources</button>` : nothing}\n            </div>\n          ` : nothing}\n\n          ${this._activeTab === 'summary' ? this._renderSummary() : nothing}\n          ${this._activeTab === 'data' ? this._renderData() : nothing}\n          ${this._activeTab === 'sources' ? this._renderSources() : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiResultPanel","LitElement","a","b","format","text","html","nothing","d","keys","k","row","s","hasTabs","e","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-reveal-animation/ai-reveal-animation.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+type RevealType = 'fade' | 'slide-up' | 'scale' | 'flip';
+export declare class AiRevealAnimation extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Animation type */
+    type: RevealType;
+    /** Delay before animation starts (ms) */
+    delay: number;
+    /** Animation duration (ms) */
+    duration: number;
+    /** Trigger visibility / animation */
+    visible: boolean;
+    private _done;
+    private _animAbort?;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _onAnimEnd;
+    private _checkReducedMotion;
+    connectedCallback(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-reveal-animation': AiRevealAnimation;
+    }
+}
+export {};
+//# sourceMappingURL=ai-reveal-animation.d.ts.map

package/dist/components/ai-reveal-animation/ai-reveal-animation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-reveal-animation.d.ts","sourceRoot":"","sources":["../../../src/components/ai-reveal-animation/ai-reveal-animation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,KAAK,UAAU,GAAG,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,CAAC;AAEzD,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BA+DnB;IAEH,qBAAqB;IACO,IAAI,EAAE,UAAU,CAAU;IAEtD,yCAAyC;IACb,KAAK,SAAK;IAEtC,8BAA8B;IACF,QAAQ,SAAO;IAE3C,qCAAqC;IACR,OAAO,UAAS;IAEpC,OAAO,CAAC,KAAK,CAAS;IAC/B,OAAO,CAAC,UAAU,CAAC,CAAkB;IAE5B,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAiB9C,OAAO,CAAC,UAAU,CAUhB;IAEF,OAAO,CAAC,mBAAmB;IAIlB,iBAAiB;IAcjB,MAAM;CAmBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,qBAAqB,EAAE,iBAAiB,CAAC;KAC1C;CACF"}

package/dist/components/ai-reveal-animation/ai-reveal-animation.js

@@ -0,0 +1,146 @@
+import { css as c, LitElement as d, html as m } from "lit";
+import { property as s, state as v, customElement as h } from "lit/decorators.js";
+import { h as f, r as u } from "../../chunks/premium.css-9I4kHrsl.js";
+var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (e, a, n, o) => {
+  for (var r = o > 1 ? void 0 : o ? b(a, n) : a, l = e.length - 1, p; l >= 0; l--)
+    (p = e[l]) && (r = (o ? p(a, n, r) : p(r)) || r);
+  return o && r && y(a, n, r), r;
+};
+let t = class extends d {
+  constructor() {
+    super(...arguments), this.type = "fade", this.delay = 0, this.duration = 400, this.visible = !1, this._done = !1, this._onAnimEnd = () => {
+      this._done = !0;
+      const e = this.shadowRoot?.querySelector(".wrapper");
+      e && (e.style.willChange = "auto"), this.dispatchEvent(new CustomEvent("ai-reveal-complete", {
+        bubbles: !0,
+        composed: !0
+      }));
+    };
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._animAbort?.abort();
+  }
+  updated(e) {
+    if (e.has("visible") && this.visible) {
+      this._done = !1, this._animAbort?.abort(), this._animAbort = new AbortController();
+      const a = this.shadowRoot?.querySelector(".wrapper");
+      a && a.addEventListener("animationend", this._onAnimEnd, { once: !0, signal: this._animAbort.signal });
+    }
+    e.has("visible") && !this.visible && (this._done = !1, this._animAbort?.abort());
+  }
+  _checkReducedMotion() {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.visible && this._checkReducedMotion() && (this._done = !0, requestAnimationFrame(() => {
+      this.dispatchEvent(new CustomEvent("ai-reveal-complete", {
+        bubbles: !0,
+        composed: !0
+      }));
+    }));
+  }
+  render() {
+    const e = [
+      "wrapper",
+      this.type,
+      this.visible ? "visible" : "",
+      this._done ? "done" : ""
+    ].filter(Boolean).join(" ");
+    return m`
+      <div
+        class=${e}
+        style="--_duration: ${this.duration}ms; --_delay: ${this.delay}ms;"
+        role="presentation"
+        aria-hidden=${!this.visible && !this._done ? "true" : "false"}
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+t.styles = [f, u, c`
+
+    .wrapper {
+      opacity: 0;
+      will-change: transform, opacity;
+    }
+
+    /* ── Initial hidden states ── */
+    .wrapper.fade { opacity: 0; }
+    .wrapper.slide-up {
+      opacity: 0;
+      transform: translateY(var(--cg-spacing-24);
+    }
+    .wrapper.scale {
+      opacity: 0;
+      transform: scale(0.85);
+    }
+    .wrapper.flip {
+      opacity: 0;
+      transform: perspective(600px) rotateX(-15deg);
+    }
+
+    /* ── Visible / animated states ── */
+    .wrapper.visible.fade {
+      animation: reveal-fade var(--_duration) var(--_delay) ease both;
+    }
+    .wrapper.visible.slide-up {
+      animation: reveal-slide-up var(--_duration) var(--_delay) var(--cg-transition-easing-materialize) both;
+    }
+    .wrapper.visible.scale {
+      animation: reveal-scale var(--_duration) var(--_delay) var(--cg-transition-easing-materialize) both;
+    }
+    .wrapper.visible.flip {
+      animation: reveal-flip var(--_duration) var(--_delay) var(--cg-transition-easing-materialize) both;
+    }
+
+    /* ── Completed ── */
+    .wrapper.done {
+      opacity: 1;
+      transform: none;
+      animation: none;
+    }
+
+    @keyframes reveal-fade {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
+
+    @keyframes reveal-slide-up {
+      from { opacity: 0; transform: translateY(var(--cg-spacing-24); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+
+    @keyframes reveal-scale {
+      from { opacity: 0; transform: scale(0.85); }
+      to   { opacity: 1; transform: scale(1); }
+    }
+
+    @keyframes reveal-flip {
+      from { opacity: 0; transform: perspective(600px) rotateX(-15deg); }
+      to   { opacity: 1; transform: perspective(600px) rotateX(0deg); }
+    }
+
+  `];
+i([
+  s({ type: String })
+], t.prototype, "type", 2);
+i([
+  s({ type: Number })
+], t.prototype, "delay", 2);
+i([
+  s({ type: Number })
+], t.prototype, "duration", 2);
+i([
+  s({ type: Boolean })
+], t.prototype, "visible", 2);
+i([
+  v()
+], t.prototype, "_done", 2);
+t = i([
+  h("ai-reveal-animation")
+], t);
+export {
+  t as AiRevealAnimation
+};
+//# sourceMappingURL=ai-reveal-animation.js.map

package/dist/components/ai-reveal-animation/ai-reveal-animation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-reveal-animation.js","sources":["../../../src/components/ai-reveal-animation/ai-reveal-animation.ts"],"sourcesContent":["/**\n * @element ai-reveal-animation\n * Entrance animation wrapper that reveals slotted content with fade,\n * slide-up, scale, or flip animations. Respects prefers-reduced-motion\n * and dispatches a completion event.\n *\n * @example\n * ```html\n * <ai-reveal-animation type=\"slide-up\" delay=\"200\" duration=\"500\" visible>\n *   <ai-result-panel title=\"Results\"></ai-result-panel>\n * </ai-reveal-animation>\n * ```\n *\n * @prop {'fade'|'slide-up'|'scale'|'flip'} type - Animation type (default 'fade')\n * @prop {number} delay - Delay before animation starts in ms (default 0)\n * @prop {number} duration - Animation duration in ms (default 400)\n * @prop {boolean} visible - Trigger the reveal animation\n *\n * @fires ai-reveal-complete - When the animation finishes\n *\n * @slot - Content to reveal\n */\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\ntype RevealType = 'fade' | 'slide-up' | 'scale' | 'flip';\n\n@customElement('ai-reveal-animation')\nexport class AiRevealAnimation extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n\n    .wrapper {\n      opacity: 0;\n      will-change: transform, opacity;\n    }\n\n    /* ── Initial hidden states ── */\n    .wrapper.fade { opacity: 0; }\n    .wrapper.slide-up {\n      opacity: 0;\n      transform: translateY(var(--cg-spacing-24);\n    }\n    .wrapper.scale {\n      opacity: 0;\n      transform: scale(0.85);\n    }\n    .wrapper.flip {\n      opacity: 0;\n      transform: perspective(600px) rotateX(-15deg);\n    }\n\n    /* ── Visible / animated states ── */\n    .wrapper.visible.fade {\n      animation: reveal-fade var(--_duration) var(--_delay) ease both;\n    }\n    .wrapper.visible.slide-up {\n      animation: reveal-slide-up var(--_duration) var(--_delay) var(--cg-transition-easing-materialize) both;\n    }\n    .wrapper.visible.scale {\n      animation: reveal-scale var(--_duration) var(--_delay) var(--cg-transition-easing-materialize) both;\n    }\n    .wrapper.visible.flip {\n      animation: reveal-flip var(--_duration) var(--_delay) var(--cg-transition-easing-materialize) both;\n    }\n\n    /* ── Completed ── */\n    .wrapper.done {\n      opacity: 1;\n      transform: none;\n      animation: none;\n    }\n\n    @keyframes reveal-fade {\n      from { opacity: 0; }\n      to   { opacity: 1; }\n    }\n\n    @keyframes reveal-slide-up {\n      from { opacity: 0; transform: translateY(var(--cg-spacing-24); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n\n    @keyframes reveal-scale {\n      from { opacity: 0; transform: scale(0.85); }\n      to   { opacity: 1; transform: scale(1); }\n    }\n\n    @keyframes reveal-flip {\n      from { opacity: 0; transform: perspective(600px) rotateX(-15deg); }\n      to   { opacity: 1; transform: perspective(600px) rotateX(0deg); }\n    }\n\n  `];\n\n  /** Animation type */\n  @property({ type: String }) type: RevealType = 'fade';\n\n  /** Delay before animation starts (ms) */\n  @property({ type: Number }) delay = 0;\n\n  /** Animation duration (ms) */\n  @property({ type: Number }) duration = 400;\n\n  /** Trigger visibility / animation */\n  @property({ type: Boolean }) visible = false;\n\n  @state() private _done = false;\n  private _animAbort?: AbortController;\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._animAbort?.abort();\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('visible') && this.visible) {\n      this._done = false;\n      // Clean up previous listener\n      this._animAbort?.abort();\n      this._animAbort = new AbortController();\n      const wrapper = this.shadowRoot?.querySelector('.wrapper');\n      if (wrapper) {\n        wrapper.addEventListener('animationend', this._onAnimEnd, { once: true, signal: this._animAbort.signal });\n      }\n    }\n    if (changed.has('visible') && !this.visible) {\n      this._done = false;\n      this._animAbort?.abort();\n    }\n  }\n\n  private _onAnimEnd = () => {\n    this._done = true;\n    // Release will-change after animation completes\n    const wrapper = this.shadowRoot?.querySelector('.wrapper') as HTMLElement | null;\n    if (wrapper) {\n      wrapper.style.willChange = 'auto';\n    }\n    this.dispatchEvent(new CustomEvent('ai-reveal-complete', {\n      bubbles: true, composed: true,\n    }));\n  };\n\n  private _checkReducedMotion(): boolean {\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // If reduced motion and visible, mark done immediately\n    if (this.visible && this._checkReducedMotion()) {\n      this._done = true;\n      // Dispatch async so listeners can attach\n      requestAnimationFrame(() => {\n        this.dispatchEvent(new CustomEvent('ai-reveal-complete', {\n          bubbles: true, composed: true,\n        }));\n      });\n    }\n  }\n\n  override render() {\n    const classes = [\n      'wrapper',\n      this.type,\n      this.visible ? 'visible' : '',\n      this._done ? 'done' : '',\n    ].filter(Boolean).join(' ');\n\n    return html`\n      <div\n        class=${classes}\n        style=\"--_duration: ${this.duration}ms; --_delay: ${this.delay}ms;\"\n        role=\"presentation\"\n        aria-hidden=${!this.visible && !this._done ? 'true' : 'false'}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-reveal-animation': AiRevealAnimation;\n  }\n}\n"],"names":["AiRevealAnimation","LitElement","wrapper","changed","classes","html","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-reward-signal/ai-reward-signal.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+export declare class AiRewardSignal extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    score: number;
+    maxScore: number;
+    trend: 'up' | 'down' | 'stable';
+    history: number[];
+    label: string;
+    description: string;
+    private get _percent();
+    private get _trendArrow();
+    private _sparklinePath;
+    private _onDetail;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-reward-signal': AiRewardSignal;
+    }
+}
+//# sourceMappingURL=ai-reward-signal.d.ts.map

package/dist/components/ai-reward-signal/ai-reward-signal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-reward-signal.d.ts","sourceRoot":"","sources":["../../../src/components/ai-reward-signal/ai-reward-signal.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAgB,MAAM,4BA0HnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7C,KAAK,SAAK;IACV,QAAQ,SAAO;IACf,KAAK,EAAE,IAAI,GAAG,MAAM,GAAG,QAAQ,CAAY;IACvC,OAAO,EAAE,MAAM,EAAE,CAAM;IAC3B,KAAK,SAAM;IACX,WAAW,SAAM;IAE7C,OAAO,KAAK,QAAQ,GAGnB;IAED,OAAO,KAAK,WAAW,GAMtB;IAED,OAAO,CAAC,cAAc;IAqBtB,OAAO,CAAC,SAAS;IAOR,MAAM;CAsChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,kBAAkB,EAAE,cAAc,CAAC;KACpC;CACF"}

package/dist/components/ai-reward-signal/ai-reward-signal.js

@@ -0,0 +1,231 @@
+import { css as x, LitElement as y, nothing as h, html as p } from "lit";
+import { property as n, customElement as w } from "lit/decorators.js";
+import { h as k, r as $ } from "../../chunks/premium.css-9I4kHrsl.js";
+var _ = Object.defineProperty, S = Object.getOwnPropertyDescriptor, s = (t, r, a, i) => {
+  for (var o = i > 1 ? void 0 : i ? S(r, a) : r, c = t.length - 1, d; c >= 0; c--)
+    (d = t[c]) && (o = (i ? d(r, a, o) : d(o)) || o);
+  return i && o && _(r, a, o), o;
+};
+let e = class extends y {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.score = 0, this.maxScore = 100, this.trend = "stable", this.history = [], this.label = "", this.description = "";
+  }
+  get _percent() {
+    return this.maxScore <= 0 ? 0 : Math.min(100, Math.max(0, this.score / this.maxScore * 100));
+  }
+  get _trendArrow() {
+    switch (this.trend) {
+      case "up":
+        return "↑";
+      case "down":
+        return "↓";
+      default:
+        return "→";
+    }
+  }
+  _sparklinePath() {
+    if (this.history.length < 2) return { line: "", area: "" };
+    const t = 200, r = 40, a = 2, i = Math.min(...this.history), c = Math.max(...this.history) - i || 1, d = (t - a * 2) / (this.history.length - 1), l = this.history.map((g, u) => ({
+      x: a + u * d,
+      y: r - a - (g - i) / c * (r - a * 2)
+    })), v = l.map((g, u) => `${u === 0 ? "M" : "L"}${g.x},${g.y}`).join(" "), b = l[l.length - 1], f = l[0], m = `${v} L${b.x},${r} L${f.x},${r} Z`;
+    return { line: v, area: m };
+  }
+  _onDetail() {
+    this.dispatchEvent(new CustomEvent("ai-reward-detail", {
+      detail: { score: this.score, trend: this.trend },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    const t = this._sparklinePath();
+    return p`
+      <div class="container" role="button" tabindex="0"
+        aria-label="${this.label}: ${this.score} of ${this.maxScore}, trend ${this.trend}"
+        @click=${this._onDetail}
+        @keydown=${(r) => {
+      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._onDetail());
+    }}>
+
+        <div class="top-row">
+          <div class="score-section">
+            <span class="score">${this.score}</span>
+            <span class="max-score">/ ${this.maxScore}</span>
+          </div>
+          <span class="trend ${this.trend}">
+            <span>${this._trendArrow}</span>
+            ${this.trend}
+          </span>
+        </div>
+
+        <div class="progress-track" role="progressbar" aria-valuenow=${this._percent} aria-valuemin="0" aria-valuemax="100">
+          <div class="progress-fill" style="width:${this._percent}%"></div>
+        </div>
+
+        ${t.line ? p`
+          <div class="sparkline">
+            <svg viewBox="0 0 200 40" preserveAspectRatio="none" aria-hidden="true">
+              <path class="spark-area" d="${t.area}" />
+              <path class="spark-line" d="${t.line}" />
+            </svg>
+          </div>
+        ` : h}
+
+        ${this.label ? p`<div class="label">${this.label}</div>` : h}
+        ${this.description ? p`<div class="description">${this.description}</div>` : h}
+      </div>
+    `;
+  }
+};
+e.styles = [k, $, x`
+    .container {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-200);
+      padding: var(--cg-spacing-20);
+      color: var(--cg-color-surface-base-text);
+      cursor: pointer;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .container:hover {
+      border-color: var(--cg-color-input-border-hover);
+    }
+    .container:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 2px var(--cg-color-surface-base-background),
+        0 0 0 4px var(--cg-color-focus-ring);
+    }
+
+    .top-row {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: var(--cg-spacing-16);
+    }
+
+    .score-section {
+      display: flex;
+      align-items: baseline;
+      gap: var(--cg-spacing-8);
+    }
+    .score {
+      font-size: var(--cg-font-size-3xl);
+      font-weight: var(--cg-font-weight-extrabold);
+      line-height: 1;
+      color: var(--cg-color-surface-base-text);
+    }
+    .max-score {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-input-text-placeholder);
+    }
+
+    .trend {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+    }
+    .trend.up {
+      background: var(--cg-color-status-success-background-default);
+      color: var(--cg-color-status-success-text-default);
+    }
+    .trend.down {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+    }
+    .trend.stable {
+      background: var(--cg-overlay-dark-subtle);
+      color: var(--cg-color-input-text-placeholder);
+    }
+
+    /* ── Progress bar ── */
+    .progress-track {
+      height: var(--cg-spacing-6);
+      background: var(--cg-color-surface-cards-divider);
+      border-radius: var(--cg-border-radius-50);
+      overflow: hidden;
+      margin-bottom: var(--cg-spacing-16);
+    }
+    .progress-fill {
+      height: 100%;
+      border-radius: var(--cg-border-radius-50);
+      background: var(--cg-color-action-primary-background-default);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+
+    /* ── Sparkline ── */
+    .sparkline { margin-bottom: var(--cg-spacing-16); }
+    .sparkline svg {
+      width: 100%;
+      height: var(--cg-spacing-40);
+      display: block;
+    }
+    .spark-line {
+      fill: none;
+      stroke: var(--cg-color-action-primary-background-default);
+      stroke-width: 1.5;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+    .spark-area {
+      fill: var(--cg-overlay-accent-subtle);
+    }
+
+    /* ── Labels ── */
+    .label {
+      font-size: var(--cg-font-size-base);
+      font-weight: var(--cg-font-weight-semibold);
+      margin-bottom: var(--cg-spacing-4);
+    }
+    .description {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-input-text-placeholder);
+      line-height: var(--cg-line-height-relaxed);
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) .container { border-radius: 0; }
+    :host([rounded="sm"]) .container { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .container { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .container { border-radius: var(--cg-border-radius-200); }
+
+    @media (prefers-reduced-motion: reduce) {
+      .container { transition: none; }
+      .progress-fill { transition: none; }
+    }
+  `];
+s([
+  n({ reflect: !0 })
+], e.prototype, "rounded", 2);
+s([
+  n({ type: Number })
+], e.prototype, "score", 2);
+s([
+  n({ type: Number })
+], e.prototype, "maxScore", 2);
+s([
+  n({ type: String })
+], e.prototype, "trend", 2);
+s([
+  n({ attribute: !1 })
+], e.prototype, "history", 2);
+s([
+  n({ type: String })
+], e.prototype, "label", 2);
+s([
+  n({ type: String })
+], e.prototype, "description", 2);
+e = s([
+  w("ai-reward-signal")
+], e);
+export {
+  e as AiRewardSignal
+};
+//# sourceMappingURL=ai-reward-signal.js.map

package/dist/components/ai-reward-signal/ai-reward-signal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-reward-signal.js","sources":["../../../src/components/ai-reward-signal/ai-reward-signal.ts"],"sourcesContent":["/**\n * @element ai-reward-signal\n * Reward/engagement signal card with score display, trend indicator, sparkline, and progress bar.\n *\n * @example\n * ```html\n * <ai-reward-signal\n *   score=\"78\" maxScore=\"100\" trend=\"up\" label=\"Engagement\"\n *   .history=${[45,52,48,60,65,72,78]}\n * ></ai-reward-signal>\n * ```\n *\n * @fires {CustomEvent<{score, trend}>} ai-reward-detail - Detail requested\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n@customElement('ai-reward-signal')\nexport class AiRewardSignal extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .container {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-200);\n      padding: var(--cg-spacing-20);\n      color: var(--cg-color-surface-base-text);\n      cursor: pointer;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .container:hover {\n      border-color: var(--cg-color-input-border-hover);\n    }\n    .container:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 2px var(--cg-color-surface-base-background),\n        0 0 0 4px var(--cg-color-focus-ring);\n    }\n\n    .top-row {\n      display: flex;\n      align-items: flex-start;\n      justify-content: space-between;\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    .score-section {\n      display: flex;\n      align-items: baseline;\n      gap: var(--cg-spacing-8);\n    }\n    .score {\n      font-size: var(--cg-font-size-3xl);\n      font-weight: var(--cg-font-weight-extrabold);\n      line-height: 1;\n      color: var(--cg-color-surface-base-text);\n    }\n    .max-score {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    .trend {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n    }\n    .trend.up {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n    }\n    .trend.down {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n    .trend.stable {\n      background: var(--cg-overlay-dark-subtle);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* ── Progress bar ── */\n    .progress-track {\n      height: var(--cg-spacing-6);\n      background: var(--cg-color-surface-cards-divider);\n      border-radius: var(--cg-border-radius-50);\n      overflow: hidden;\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .progress-fill {\n      height: 100%;\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-action-primary-background-default);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    /* ── Sparkline ── */\n    .sparkline { margin-bottom: var(--cg-spacing-16); }\n    .sparkline svg {\n      width: 100%;\n      height: var(--cg-spacing-40);\n      display: block;\n    }\n    .spark-line {\n      fill: none;\n      stroke: var(--cg-color-action-primary-background-default);\n      stroke-width: 1.5;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n    }\n    .spark-area {\n      fill: var(--cg-overlay-accent-subtle);\n    }\n\n    /* ── Labels ── */\n    .label {\n      font-size: var(--cg-font-size-base);\n      font-weight: var(--cg-font-weight-semibold);\n      margin-bottom: var(--cg-spacing-4);\n    }\n    .description {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-placeholder);\n      line-height: var(--cg-line-height-relaxed);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .container { border-radius: 0; }\n    :host([rounded=\"sm\"]) .container { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .container { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .container { border-radius: var(--cg-border-radius-200); }\n\n    @media (prefers-reduced-motion: reduce) {\n      .container { transition: none; }\n      .progress-fill { transition: none; }\n    }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Number }) score = 0;\n  @property({ type: Number }) maxScore = 100;\n  @property({ type: String }) trend: 'up' | 'down' | 'stable' = 'stable';\n  @property({ attribute: false }) history: number[] = [];\n  @property({ type: String }) label = '';\n  @property({ type: String }) description = '';\n\n  private get _percent(): number {\n    if (this.maxScore <= 0) return 0;\n    return Math.min(100, Math.max(0, (this.score / this.maxScore) * 100));\n  }\n\n  private get _trendArrow(): string {\n    switch (this.trend) {\n      case 'up': return '\\u2191';\n      case 'down': return '\\u2193';\n      default: return '\\u2192';\n    }\n  }\n\n  private _sparklinePath(): { line: string; area: string } {\n    if (this.history.length < 2) return { line: '', area: '' };\n    const w = 200, h = 40, pad = 2;\n    const min = Math.min(...this.history);\n    const max = Math.max(...this.history);\n    const range = max - min || 1;\n    const step = (w - pad * 2) / (this.history.length - 1);\n\n    const points = this.history.map((v, i) => ({\n      x: pad + i * step,\n      y: h - pad - ((v - min) / range) * (h - pad * 2),\n    }));\n\n    const line = points.map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x},${p.y}`).join(' ');\n    const last = points[points.length - 1]!;\n    const first = points[0]!;\n    const area = `${line} L${last.x},${h} L${first.x},${h} Z`;\n\n    return { line, area };\n  }\n\n  private _onDetail() {\n    this.dispatchEvent(new CustomEvent('ai-reward-detail', {\n      detail: { score: this.score, trend: this.trend },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  override render() {\n    const spark = this._sparklinePath();\n\n    return html`\n      <div class=\"container\" role=\"button\" tabindex=\"0\"\n        aria-label=\"${this.label}: ${this.score} of ${this.maxScore}, trend ${this.trend}\"\n        @click=${this._onDetail}\n        @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._onDetail(); } }}>\n\n        <div class=\"top-row\">\n          <div class=\"score-section\">\n            <span class=\"score\">${this.score}</span>\n            <span class=\"max-score\">/ ${this.maxScore}</span>\n          </div>\n          <span class=\"trend ${this.trend}\">\n            <span>${this._trendArrow}</span>\n            ${this.trend}\n          </span>\n        </div>\n\n        <div class=\"progress-track\" role=\"progressbar\" aria-valuenow=${this._percent} aria-valuemin=\"0\" aria-valuemax=\"100\">\n          <div class=\"progress-fill\" style=\"width:${this._percent}%\"></div>\n        </div>\n\n        ${spark.line ? html`\n          <div class=\"sparkline\">\n            <svg viewBox=\"0 0 200 40\" preserveAspectRatio=\"none\" aria-hidden=\"true\">\n              <path class=\"spark-area\" d=\"${spark.area}\" />\n              <path class=\"spark-line\" d=\"${spark.line}\" />\n            </svg>\n          </div>\n        ` : nothing}\n\n        ${this.label ? html`<div class=\"label\">${this.label}</div>` : nothing}\n        ${this.description ? html`<div class=\"description\">${this.description}</div>` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-reward-signal': AiRewardSignal;\n  }\n}\n"],"names":["AiRewardSignal","LitElement","w","h","pad","min","range","step","points","v","i","line","p","last","first","area","spark","html","e","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-rich-message/ai-rich-message.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+interface CardRef {
+    type: string;
+    data: unknown;
+}
+interface ActionRef {
+    label: string;
+    id: string;
+}
+export declare class AiRichMessage extends LitElement {
+    static styles: import('lit').CSSResult[];
+    role: 'user' | 'assistant' | 'system';
+    text: string;
+    cards: CardRef[];
+    avatar: string;
+    timestamp: string;
+    actions: ActionRef[];
+    private _dispatch;
+    private _handleAction;
+    private _avatarFallback;
+    private _renderAvatar;
+    private _renderText;
+    private _cardAbort?;
+    disconnectedCallback(): void;
+    /** Allowlist of known component tag names that can be created as cards. */
+    private static _allowedCardTypes;
+    private _isValidCardType;
+    private _renderCards;
+    private _renderActions;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-rich-message': AiRichMessage;
+    }
+}
+export {};
+//# sourceMappingURL=ai-rich-message.d.ts.map

package/dist/components/ai-rich-message/ai-rich-message.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-rich-message.d.ts","sourceRoot":"","sources":["../../../src/components/ai-rich-message/ai-rich-message.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,UAAU,OAAO;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;CACf;AAED,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BA0InB;IAEkC,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAe;IAC7D,IAAI,SAAM;IACN,KAAK,EAAE,OAAO,EAAE,CAAM;IAC1B,MAAM,SAAM;IACZ,SAAS,SAAM;IACX,OAAO,EAAE,SAAS,EAAE,CAAM;IAE1D,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,UAAU,CAAC,CAAkB;IAE5B,oBAAoB;IAK7B,2EAA2E;IAC3E,OAAO,CAAC,MAAM,CAAC,iBAAiB,CAK7B;IAEH,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,YAAY;IAgCpB,OAAO,CAAC,cAAc;IAeb,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}