@cognivo/components 0.8.0

package/dist/components/ai-copy-button/ai-copy-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-copy-button.js","sources":["../../../src/components/ai-copy-button/ai-copy-button.ts"],"sourcesContent":["/**\n * @element ai-copy-button\n * One-click clipboard copy with animated confirmation state and three display variants.\n *\n * @example\n * ```html\n * <ai-copy-button value=\"sk-abc123...\" label=\"Copy API Key\"></ai-copy-button>\n * <ai-copy-button value=\"hello world\" variant=\"icon-only\"></ai-copy-button>\n * ```\n *\n * @fires {CustomEvent<{value: string}>} ai-copy-success - Content copied to clipboard\n * @fires {CustomEvent<{error: string}>} ai-copy-error - Clipboard write failed\n *\n * @cssprop [--cg-color-accent=#dfff61] - Focus ring and copied-state text color\n */\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBase, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-copy-button')\nexport class AiCopyButton extends LitElement {\n  static override styles = [hostBase, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn 200ms var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .copy-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      font-family: inherit;\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      border: none;\n      border-radius: var(--cg-border-radius-100);\n      transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default), color var(--cg-transition-duration-default) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      white-space: nowrap;\n    }\n    .copy-btn:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .copy-btn:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    /* Default variant */\n    :host([variant=\"default\"]) .copy-btn {\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n      font-size: var(--cg-font-size-sm);\n      background: var(--cg-overlay-dark-subtle);\n      color: var(--cg-color-input-text-placeholder);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    :host([variant=\"default\"]) .copy-btn:hover {\n      background: var(--cg-overlay-dark-strong);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* Minimal variant */\n    :host([variant=\"minimal\"]) .copy-btn {\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      background: none;\n      color: var(--cg-color-input-text-placeholder);\n    }\n    :host([variant=\"minimal\"]) .copy-btn:hover {\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* Icon-only variant */\n    :host([variant=\"icon-only\"]) .copy-btn {\n      padding: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-sm);\n      background: none;\n      color: var(--cg-color-input-text-placeholder);\n      line-height: 1;\n    }\n    :host([variant=\"icon-only\"]) .copy-btn:hover {\n      color: var(--cg-color-surface-base-text);\n    }\n    :host([variant=\"icon-only\"]) .label-text {\n      display: none;\n    }\n\n    /* Copied (success) state */\n    .copy-btn[data-copied=\"true\"] {\n      color: var(--cg-color-status-success-text) !important;\n    }\n\n    /* Error state */\n    .copy-btn[data-error=\"true\"] {\n      color: var(--cg-color-status-error-text) !important;\n      animation: error-shake var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    @keyframes error-shake {\n      0%, 100% { transform: translateX(0); }\n      20% { transform: translateX(-3px); }\n      40% { transform: translateX(3px); }\n      60% { transform: translateX(-2px); }\n      80% { transform: translateX(2px); }\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .copy-btn[data-error=\"true\"] {\n        animation: none;\n      }\n    }\n\n    /* Disabled state */\n    .copy-btn:disabled {\n      opacity: 0.5;\n      cursor: var(--cg-cursor-not-allowed);\n      pointer-events: none;\n    }\n\n    .icon {\n      display: inline-flex;\n      font-size: inherit;\n      line-height: 1;\n    }\n  `];\n  @property({ type: String }) value = '';\n  @property({ type: String }) label = 'Copy';\n  @property({ type: String, reflect: true }) variant: 'default' | 'minimal' | 'icon-only' = 'default';\n  @property({ type: Number }) timeout = 2000;\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  @state() private _copied = false;\n  @state() private _error = false;\n\n  private _timer: ReturnType<typeof setTimeout> | null = null;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._timer) clearTimeout(this._timer);\n  }\n\n  private async _handleCopy(): Promise<void> {\n    if (!this.value || this.disabled) return;\n    try {\n      if (navigator.clipboard) {\n        await navigator.clipboard.writeText(this.value);\n      } else {\n        // Fallback for non-secure contexts\n        const ta = document.createElement('textarea');\n        ta.value = this.value;\n        ta.style.position = 'fixed';\n        ta.style.opacity = '0';\n        document.body.appendChild(ta);\n        ta.select();\n        document.execCommand('copy');\n        document.body.removeChild(ta);\n      }\n      this._copied = true;\n      this.dispatchEvent(new CustomEvent('ai-copy-success', {\n        detail: { value: this.value },\n        bubbles: true,\n        composed: true,\n      }));\n\n      if (this._timer) clearTimeout(this._timer);\n      this._timer = setTimeout(() => {\n        this._copied = false;\n        this._timer = null;\n      }, this.timeout);\n    } catch (err) {\n      this._error = true;\n      this.dispatchEvent(new CustomEvent('ai-copy-error', {\n        detail: { error: err instanceof Error ? err.message : 'Copy failed' },\n        bubbles: true,\n        composed: true,\n      }));\n\n      if (this._timer) clearTimeout(this._timer);\n      this._timer = setTimeout(() => {\n        this._error = false;\n        this._timer = null;\n      }, this.timeout);\n    }\n  }\n\n  private get _icon(): string {\n    if (this._error) return '\\u2717';\n    return this._copied ? '\\u2713' : '\\u2398';\n  }\n\n  private get _displayLabel(): string {\n    if (this._error) return 'Failed';\n    return this._copied ? 'Copied!' : this.label;\n  }\n\n  override render() {\n    return html`\n      <button\n        class=\"copy-btn\"\n        ?disabled=${this.disabled}\n        data-copied=${this._copied ? 'true' : 'false'}\n        data-error=${this._error ? 'true' : 'false'}\n        aria-label=${this._displayLabel}\n        aria-disabled=${this.disabled ? 'true' : 'false'}\n        @click=${this._handleCopy}\n      >\n        <span class=\"icon\">${this._icon}</span>\n        <span class=\"label-text\">${this._displayLabel}</span>\n      </button>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-copy-button': AiCopyButton;\n  }\n}\n"],"names":["AiCopyButton","LitElement","ta","err","html","hostBase","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-cost-dashboard/ai-cost-dashboard.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+interface CostEntry {
+    date: string;
+    model: string;
+    inputTokens: number;
+    outputTokens: number;
+    cost: number;
+}
+export declare class AiCostDashboard extends LitElement {
+    static styles: import('lit').CSSResult[];
+    entries: CostEntry[];
+    budget: number;
+    period: string;
+    private get _totalCost();
+    private get _totalTokens();
+    private get _modelBreakdown();
+    private get _dailyTrend();
+    private _budgetPercent;
+    private _handleEntryClick;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-cost-dashboard': AiCostDashboard;
+    }
+}
+export {};
+//# sourceMappingURL=ai-cost-dashboard.d.ts.map

package/dist/components/ai-cost-dashboard/ai-cost-dashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-cost-dashboard.d.ts","sourceRoot":"","sources":["../../../src/components/ai-cost-dashboard/ai-cost-dashboard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,UAAU,SAAS;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BAmMnB;IACwB,OAAO,EAAE,SAAS,EAAE,CAAM;IACzB,MAAM,SAAK;IACX,MAAM,SAAM;IAExC,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,YAAY,GAEvB;IAED,OAAO,KAAK,eAAe,GAQ1B;IAED,OAAO,KAAK,WAAW,GAQtB;IAED,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,iBAAiB;IAQhB,MAAM;CAgFhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/components/ai-cost-dashboard/ai-cost-dashboard.js

@@ -0,0 +1,328 @@
+import { css as v, LitElement as p, html as d, nothing as l } from "lit";
+import { property as g, customElement as u } from "lit/decorators.js";
+import { h as b, r as h, f } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (r, t, e, i) => {
+  for (var o = i > 1 ? void 0 : i ? w(t, e) : t, a = r.length - 1, s; a >= 0; a--)
+    (s = r[a]) && (o = (i ? s(t, e, o) : s(o)) || o);
+  return i && o && m(t, e, o), o;
+};
+let c = class extends p {
+  constructor() {
+    super(...arguments), this.entries = [], this.budget = 0, this.period = "";
+  }
+  get _totalCost() {
+    return this.entries.reduce((r, t) => r + t.cost, 0);
+  }
+  get _totalTokens() {
+    return this.entries.reduce((r, t) => r + t.inputTokens + t.outputTokens, 0);
+  }
+  get _modelBreakdown() {
+    const r = /* @__PURE__ */ new Map();
+    for (const t of this.entries)
+      r.set(t.model, (r.get(t.model) || 0) + t.cost);
+    return [...r.entries()].map(([t, e]) => ({ model: t, cost: e })).sort((t, e) => e.cost - t.cost);
+  }
+  get _dailyTrend() {
+    const r = /* @__PURE__ */ new Map();
+    for (const t of this.entries)
+      r.set(t.date, (r.get(t.date) || 0) + t.cost);
+    return [...r.entries()].map(([t, e]) => ({ date: t, cost: e })).sort((t, e) => t.date.localeCompare(e.date));
+  }
+  _budgetPercent() {
+    return this.budget <= 0 ? 0 : Math.min(this._totalCost / this.budget * 100, 100);
+  }
+  _handleEntryClick(r) {
+    this.dispatchEvent(new CustomEvent("ai-cost-entry-click", {
+      detail: r,
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    if (!this.entries.length)
+      return d`<div class="container"><div class="empty-state">No cost data available</div></div>`;
+    const r = this._budgetPercent(), t = r > 90 ? "danger" : r > 70 ? "warn" : "", e = Math.max(...this._modelBreakdown.map((a) => a.cost), 0.01), i = this._dailyTrend, o = Math.max(...i.map((a) => a.cost), 0.01);
+    return d`
+      <div class="container" role="region" aria-label="AI cost dashboard">
+        <div class="header">
+          <span class="title">Cost Overview</span>
+          ${this.period ? d`<span class="period">${this.period}</span>` : l}
+        </div>
+
+        <div class="summary">
+          <div class="stat-card">
+            <div class="stat-label">Total Cost</div>
+            <div class="stat-value ${t}">$${this._totalCost.toFixed(2)}</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-label">Total Tokens</div>
+            <div class="stat-value">${this._totalTokens.toLocaleString()}</div>
+          </div>
+          <div class="stat-card">
+            <div class="stat-label">Models Used</div>
+            <div class="stat-value">${this._modelBreakdown.length}</div>
+          </div>
+        </div>
+
+        ${this.budget > 0 ? d`
+          <div class="budget-section">
+            <div class="budget-header">
+              <span>Budget: $${this.budget.toFixed(2)}</span>
+              <span>${r.toFixed(0)}% used</span>
+            </div>
+            <div class="budget-track" role="progressbar" aria-valuenow=${r} aria-valuemin="0" aria-valuemax="100" aria-label="Budget usage">
+              <div class="budget-fill ${t}" style="width:${r}%"></div>
+            </div>
+          </div>
+        ` : l}
+
+        <div class="breakdown-title">Per-Model Breakdown</div>
+        ${this._modelBreakdown.map((a) => d`
+          <div
+            class="model-row"
+            role="button"
+            tabindex="0"
+            aria-label="${a.model}: $${a.cost.toFixed(2)}"
+            @click=${() => this._handleEntryClick({ model: a.model, cost: a.cost })}
+            @keydown=${(s) => {
+      (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this._handleEntryClick({ model: a.model, cost: a.cost }));
+    }}
+          >
+            <span class="model-name">${a.model}</span>
+            <div class="model-bar-track">
+              <div class="model-bar-fill" style="width:${(a.cost / e * 100).toFixed(1)}%"></div>
+            </div>
+            <span class="model-cost">$${a.cost.toFixed(2)}</span>
+          </div>
+        `)}
+
+        ${i.length > 1 ? d`
+          <div class="trend-section">
+            <div class="trend-title">Daily Trend</div>
+            <div class="trend-chart" role="img" aria-label="Daily cost trend chart">
+              ${i.map((a) => d`
+                <div
+                  class="trend-bar"
+                  style="height:${Math.max(a.cost / o * 100, 4)}%"
+                  title="${a.date}: $${a.cost.toFixed(2)}"
+                ></div>
+              `)}
+            </div>
+          </div>
+        ` : l}
+      </div>
+    `;
+  }
+};
+c.styles = [b, h, f, v`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    :host([hidden]) { display: none; }
+
+    .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);
+    }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: baseline;
+      padding-bottom: var(--cg-spacing-16);
+      margin-bottom: var(--cg-spacing-16);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+
+    .title {
+      font-size: var(--cg-font-size-base);
+      font-weight: var(--cg-font-weight-bold);
+    }
+
+    .period {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+    }
+
+    /* ── Summary cards ── */
+    .summary {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: var(--cg-spacing-8);
+      margin-bottom: var(--cg-spacing-16);
+    }
+
+    .stat-card {
+      background: var(--cg-color-surface-base-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      border-radius: var(--cg-border-radius-100);
+      padding: var(--cg-spacing-12);
+    }
+
+    .stat-label {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      margin-bottom: var(--cg-spacing-4);
+    }
+
+    .stat-value {
+      font-size: var(--cg-font-size-lg);
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .stat-value.warn { color: var(--cg-color-status-warning-text); }
+    .stat-value.danger { color: var(--cg-color-status-error-text-default); }
+
+    /* ── Budget bar ── */
+    .budget-section {
+      margin-bottom: var(--cg-spacing-16);
+    }
+
+    .budget-header {
+      display: flex;
+      justify-content: space-between;
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      margin-bottom: var(--cg-spacing-6);
+    }
+
+    .budget-track {
+      height: var(--cg-spacing-8);
+      background: var(--cg-color-surface-cards-divider);
+      border-radius: var(--cg-border-radius-100);
+      overflow: hidden;
+    }
+
+    .budget-fill {
+      height: 100%;
+      border-radius: var(--cg-border-radius-100);
+      background: var(--cg-color-action-primary-background-default);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+    .budget-fill.warn { background: var(--cg-color-status-warning-text); }
+    .budget-fill.danger { background: var(--cg-color-status-error-text-default); }
+
+    /* ── Model breakdown ── */
+    .breakdown-title {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-input-text-placeholder);
+      margin-bottom: var(--cg-spacing-12);
+      padding-top: var(--cg-spacing-16);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+
+    .model-row {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      cursor: pointer;
+      padding: var(--cg-spacing-8) 0;
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .model-row:last-of-type { border-bottom: none; }
+    .model-row:hover { opacity: 0.85; }
+    .model-row:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .model-row:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    .model-name {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-base-text);
+      min-width: var(--cg-spacing-96);
+      flex-shrink: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .model-bar-track {
+      flex: 1;
+      height: var(--cg-spacing-6);
+      background: var(--cg-color-surface-cards-divider);
+      border-radius: var(--cg-border-radius-100);
+      overflow: hidden;
+    }
+
+    .model-bar-fill {
+      height: 100%;
+      border-radius: var(--cg-border-radius-100);
+      background: var(--cg-color-action-primary-background-default);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+
+    .model-cost {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      min-width: var(--cg-spacing-56);
+      text-align: right;
+      flex-shrink: 0;
+    }
+
+    /* ── Mini trend chart ── */
+    .trend-section {
+      margin-top: var(--cg-spacing-16);
+      padding-top: var(--cg-spacing-16);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+
+    .trend-title {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-input-text-placeholder);
+      margin-bottom: var(--cg-spacing-12);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+
+    .trend-chart {
+      display: flex;
+      align-items: flex-end;
+      gap: var(--cg-spacing-3);
+      height: var(--cg-spacing-48);
+    }
+
+    .trend-bar {
+      flex: 1;
+      background: var(--cg-color-action-primary-background-default);
+      border-radius: var(--cg-border-radius-50) var(--cg-border-radius-50) 0 0;
+      min-height: var(--cg-spacing-2);
+      transition: height var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+      opacity: 0.7;
+    }
+    .trend-bar:hover {
+      opacity: 1;
+    }
+
+    .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;
+    }
+  `];
+n([
+  g({ type: Array })
+], c.prototype, "entries", 2);
+n([
+  g({ type: Number })
+], c.prototype, "budget", 2);
+n([
+  g({ type: String })
+], c.prototype, "period", 2);
+c = n([
+  u("ai-cost-dashboard")
+], c);
+export {
+  c as AiCostDashboard
+};
+//# sourceMappingURL=ai-cost-dashboard.js.map

package/dist/components/ai-cost-dashboard/ai-cost-dashboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-cost-dashboard.js","sources":["../../../src/components/ai-cost-dashboard/ai-cost-dashboard.ts"],"sourcesContent":["/**\n * @element ai-cost-dashboard\n * Aggregate AI cost dashboard with summary cards, budget bar, per-model breakdown, and daily trend chart.\n *\n * @example\n * ```html\n * <ai-cost-dashboard\n *   .entries=${[{date:'2024-03-15', model:'gpt-4o', inputTokens:50000, outputTokens:12000, cost:0.42}]}\n *   budget=\"50\"\n *   period=\"March 2024\"\n * ></ai-cost-dashboard>\n * ```\n *\n * @fires {CustomEvent<{model: string, cost: number}>} ai-cost-entry-click - Model row 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 CostEntry {\n  date: string;\n  model: string;\n  inputTokens: number;\n  outputTokens: number;\n  cost: number;\n}\n\n@customElement('ai-cost-dashboard')\nexport class AiCostDashboard extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    :host([hidden]) { display: none; }\n\n    .container {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-200);\n      padding: var(--cg-spacing-20);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .header {\n      display: flex;\n      justify-content: space-between;\n      align-items: baseline;\n      padding-bottom: var(--cg-spacing-16);\n      margin-bottom: var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n\n    .title {\n      font-size: var(--cg-font-size-base);\n      font-weight: var(--cg-font-weight-bold);\n    }\n\n    .period {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* ── Summary cards ── */\n    .summary {\n      display: grid;\n      grid-template-columns: repeat(3, 1fr);\n      gap: var(--cg-spacing-8);\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    .stat-card {\n      background: var(--cg-color-surface-base-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-12);\n    }\n\n    .stat-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-4);\n    }\n\n    .stat-value {\n      font-size: var(--cg-font-size-lg);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .stat-value.warn { color: var(--cg-color-status-warning-text); }\n    .stat-value.danger { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Budget bar ── */\n    .budget-section {\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    .budget-header {\n      display: flex;\n      justify-content: space-between;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-6);\n    }\n\n    .budget-track {\n      height: var(--cg-spacing-8);\n      background: var(--cg-color-surface-cards-divider);\n      border-radius: var(--cg-border-radius-100);\n      overflow: hidden;\n    }\n\n    .budget-fill {\n      height: 100%;\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-action-primary-background-default);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    .budget-fill.warn { background: var(--cg-color-status-warning-text); }\n    .budget-fill.danger { background: var(--cg-color-status-error-text-default); }\n\n    /* ── Model breakdown ── */\n    .breakdown-title {\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      margin-bottom: var(--cg-spacing-12);\n      padding-top: var(--cg-spacing-16);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n\n    .model-row {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      cursor: pointer;\n      padding: var(--cg-spacing-8) 0;\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .model-row:last-of-type { border-bottom: none; }\n    .model-row:hover { opacity: 0.85; }\n    .model-row:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .model-row:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    .model-name {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-base-text);\n      min-width: var(--cg-spacing-96);\n      flex-shrink: 0;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .model-bar-track {\n      flex: 1;\n      height: var(--cg-spacing-6);\n      background: var(--cg-color-surface-cards-divider);\n      border-radius: var(--cg-border-radius-100);\n      overflow: hidden;\n    }\n\n    .model-bar-fill {\n      height: 100%;\n      border-radius: var(--cg-border-radius-100);\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    .model-cost {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      min-width: var(--cg-spacing-56);\n      text-align: right;\n      flex-shrink: 0;\n    }\n\n    /* ── Mini trend chart ── */\n    .trend-section {\n      margin-top: var(--cg-spacing-16);\n      padding-top: var(--cg-spacing-16);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n\n    .trend-title {\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      margin-bottom: var(--cg-spacing-12);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n\n    .trend-chart {\n      display: flex;\n      align-items: flex-end;\n      gap: var(--cg-spacing-3);\n      height: var(--cg-spacing-48);\n    }\n\n    .trend-bar {\n      flex: 1;\n      background: var(--cg-color-action-primary-background-default);\n      border-radius: var(--cg-border-radius-50) var(--cg-border-radius-50) 0 0;\n      min-height: var(--cg-spacing-2);\n      transition: height var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n      opacity: 0.7;\n    }\n    .trend-bar:hover {\n      opacity: 1;\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: CostEntry[] = [];\n  @property({ type: Number }) budget = 0;\n  @property({ type: String }) period = '';\n\n  private get _totalCost(): number {\n    return this.entries.reduce((sum, e) => sum + e.cost, 0);\n  }\n\n  private get _totalTokens(): number {\n    return this.entries.reduce((sum, e) => sum + e.inputTokens + e.outputTokens, 0);\n  }\n\n  private get _modelBreakdown(): { model: string; cost: number }[] {\n    const map = new Map<string, number>();\n    for (const e of this.entries) {\n      map.set(e.model, (map.get(e.model) || 0) + e.cost);\n    }\n    return [...map.entries()]\n      .map(([model, cost]) => ({ model, cost }))\n      .sort((a, b) => b.cost - a.cost);\n  }\n\n  private get _dailyTrend(): { date: string; cost: number }[] {\n    const map = new Map<string, number>();\n    for (const e of this.entries) {\n      map.set(e.date, (map.get(e.date) || 0) + e.cost);\n    }\n    return [...map.entries()]\n      .map(([date, cost]) => ({ date, cost }))\n      .sort((a, b) => a.date.localeCompare(b.date));\n  }\n\n  private _budgetPercent(): number {\n    if (this.budget <= 0) return 0;\n    return Math.min((this._totalCost / this.budget) * 100, 100);\n  }\n\n  private _handleEntryClick(detail: Record<string, unknown>) {\n    this.dispatchEvent(new CustomEvent('ai-cost-entry-click', {\n      detail,\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\">No cost data available</div></div>`;\n    }\n\n    const bp = this._budgetPercent();\n    const budgetClass = bp > 90 ? 'danger' : bp > 70 ? 'warn' : '';\n    const maxModelCost = Math.max(...this._modelBreakdown.map(m => m.cost), 0.01);\n    const trend = this._dailyTrend;\n    const maxDailyCost = Math.max(...trend.map(t => t.cost), 0.01);\n\n    return html`\n      <div class=\"container\" role=\"region\" aria-label=\"AI cost dashboard\">\n        <div class=\"header\">\n          <span class=\"title\">Cost Overview</span>\n          ${this.period ? html`<span class=\"period\">${this.period}</span>` : nothing}\n        </div>\n\n        <div class=\"summary\">\n          <div class=\"stat-card\">\n            <div class=\"stat-label\">Total Cost</div>\n            <div class=\"stat-value ${budgetClass}\">$${this._totalCost.toFixed(2)}</div>\n          </div>\n          <div class=\"stat-card\">\n            <div class=\"stat-label\">Total Tokens</div>\n            <div class=\"stat-value\">${this._totalTokens.toLocaleString()}</div>\n          </div>\n          <div class=\"stat-card\">\n            <div class=\"stat-label\">Models Used</div>\n            <div class=\"stat-value\">${this._modelBreakdown.length}</div>\n          </div>\n        </div>\n\n        ${this.budget > 0 ? html`\n          <div class=\"budget-section\">\n            <div class=\"budget-header\">\n              <span>Budget: $${this.budget.toFixed(2)}</span>\n              <span>${bp.toFixed(0)}% used</span>\n            </div>\n            <div class=\"budget-track\" role=\"progressbar\" aria-valuenow=${bp} aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Budget usage\">\n              <div class=\"budget-fill ${budgetClass}\" style=\"width:${bp}%\"></div>\n            </div>\n          </div>\n        ` : nothing}\n\n        <div class=\"breakdown-title\">Per-Model Breakdown</div>\n        ${this._modelBreakdown.map(m => html`\n          <div\n            class=\"model-row\"\n            role=\"button\"\n            tabindex=\"0\"\n            aria-label=\"${m.model}: $${m.cost.toFixed(2)}\"\n            @click=${() => this._handleEntryClick({ model: m.model, cost: m.cost })}\n            @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleEntryClick({ model: m.model, cost: m.cost }); } }}\n          >\n            <span class=\"model-name\">${m.model}</span>\n            <div class=\"model-bar-track\">\n              <div class=\"model-bar-fill\" style=\"width:${(m.cost / maxModelCost * 100).toFixed(1)}%\"></div>\n            </div>\n            <span class=\"model-cost\">$${m.cost.toFixed(2)}</span>\n          </div>\n        `)}\n\n        ${trend.length > 1 ? html`\n          <div class=\"trend-section\">\n            <div class=\"trend-title\">Daily Trend</div>\n            <div class=\"trend-chart\" role=\"img\" aria-label=\"Daily cost trend chart\">\n              ${trend.map(t => html`\n                <div\n                  class=\"trend-bar\"\n                  style=\"height:${Math.max((t.cost / maxDailyCost * 100), 4)}%\"\n                  title=\"${t.date}: $${t.cost.toFixed(2)}\"\n                ></div>\n              `)}\n            </div>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-cost-dashboard': AiCostDashboard;\n  }\n}\n"],"names":["AiCostDashboard","LitElement","sum","e","map","model","cost","a","b","date","detail","html","bp","budgetClass","maxModelCost","m","trend","maxDailyCost","t","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -0,0 +1,50 @@
+import { LitElement } from 'lit';
+interface DataField {
+    label: string;
+    value: string | number;
+    type?: 'text' | 'currency' | 'date' | 'status' | 'badge' | 'link' | 'number' | 'percent';
+    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    url?: string;
+    copyable?: boolean;
+}
+interface CardAction {
+    id: string;
+    label: string;
+    variant?: 'primary' | 'secondary' | 'danger';
+    icon?: string;
+    disabled?: boolean;
+}
+export declare class AiDataCard extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Card title */
+    title: string;
+    /** Subtitle text */
+    subtitle: string;
+    /** Header icon (emoji or text) */
+    icon: string;
+    /** Header status badge */
+    headerStatus: '' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    /** Header status label */
+    headerStatusLabel: string;
+    /** Data fields (key-value rows) */
+    fields: DataField[];
+    /** Action buttons in footer */
+    actions: CardAction[];
+    /** Compact display mode */
+    compact: boolean;
+    /** Loading skeleton */
+    loading: boolean;
+    /** Highlighted border */
+    highlighted: boolean;
+    private _copiedField;
+    private _copyTimer?;
+    disconnectedCallback(): void;
+    private _sanitizeUrl;
+    private _handleAction;
+    private _handleRowClick;
+    private _handleCopy;
+    private _renderValue;
+    render(): import('lit').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=ai-data-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-data-card.d.ts","sourceRoot":"","sources":["../../../src/components/ai-data-card/ai-data-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,2BAA2B,CAAC;AACnC,OAAO,yBAAyB,CAAC;AAEjC,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,CAAC;IACzF,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC;IAC9D,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAmKnB;IACH,iBAAiB;IACoB,KAAK,EAAE,MAAM,CAAM;IAExD,oBAAoB;IACQ,QAAQ,EAAE,MAAM,CAAM;IAElD,kCAAkC;IACN,IAAI,EAAE,MAAM,CAAM;IAE9C,0BAA0B;IACE,YAAY,EAAE,EAAE,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAM;IAEzG,0BAA0B;IACE,iBAAiB,EAAE,MAAM,CAAM;IAE3D,mCAAmC;IACR,MAAM,EAAE,SAAS,EAAE,CAAM;IAEpD,+BAA+B;IACJ,OAAO,EAAE,UAAU,EAAE,CAAM;IAEtD,2BAA2B;IACiB,OAAO,EAAE,OAAO,CAAS;IAErE,uBAAuB;IACM,OAAO,EAAE,OAAO,CAAS;IAEtD,yBAAyB;IACI,WAAW,EAAE,OAAO,CAAS;IAE1D,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,UAAU,CAAC,CAAgC;IAE1C,oBAAoB;IAK7B,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,eAAe;YAOT,WAAW;IAsBzB,OAAO,CAAC,YAAY;IA2BX,MAAM;CAuFhB"}