@cognivo/components 0.8.0

package/dist/components/ai-batch-progress/ai-batch-progress.js

@@ -0,0 +1,334 @@
+import { css as u, LitElement as p, nothing as r, html as s } from "lit";
+import { property as o, customElement as v } from "lit/decorators.js";
+import { h as b, r as h, p as f, f as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (c, i, l, n) => {
+  for (var a = n > 1 ? void 0 : n ? y(i, l) : i, d = c.length - 1, g; d >= 0; d--)
+    (g = c[d]) && (a = (n ? g(i, l, a) : g(a)) || a);
+  return n && a && x(i, l, a), a;
+};
+let t = class extends p {
+  constructor() {
+    super(...arguments), this.total = 0, this.completed = 0, this.failed = 0, this.heading = "Batch Job", this.status = "running";
+  }
+  get _pending() {
+    return Math.max(0, this.total - this.completed - this.failed);
+  }
+  get _percent() {
+    return this.total <= 0 ? 0 : Math.round((this.completed + this.failed) / this.total * 100);
+  }
+  get _successPercent() {
+    return this.total <= 0 ? 0 : this.completed / this.total * 100;
+  }
+  get _failPercent() {
+    return this.total <= 0 ? 0 : this.failed / this.total * 100;
+  }
+  _dispatch(c) {
+    this.dispatchEvent(new CustomEvent(c, {
+      detail: { total: this.total, completed: this.completed, failed: this.failed, status: this.status },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    return s`
+      <div class="container" role="region" aria-label="${this.heading} progress">
+        <div class="header">
+          <span class="title">
+            ${this.status === "running" ? s`<span class="pulse-dot" aria-hidden="true"></span>` : r}
+            ${this.heading}
+          </span>
+          <span class="status-badge ${this.status}">${this.status}</span>
+        </div>
+
+        <div class="stats">
+          <div class="stat">
+            <span class="stat-label">Completed</span>
+            <span class="stat-value success">${this.completed}</span>
+          </div>
+          <div class="stat">
+            <span class="stat-label">Failed</span>
+            <span class="stat-value fail">${this.failed}</span>
+          </div>
+          <div class="stat">
+            <span class="stat-label">Pending</span>
+            <span class="stat-value pending">${this._pending}</span>
+          </div>
+          <div class="stat">
+            <span class="stat-label">Total</span>
+            <span class="stat-value">${this.total}</span>
+          </div>
+        </div>
+
+        <div class="progress-section">
+          <div class="progress-header">
+            <span>Progress</span>
+            <span class="progress-percent">${this._percent}%</span>
+          </div>
+          <div
+            class="progress-track"
+            role="progressbar"
+            aria-valuenow=${this._percent}
+            aria-valuemin="0"
+            aria-valuemax="100"
+            aria-label="Batch progress: ${this._percent}%"
+          >
+            <div class="progress-success" style="width:${this._successPercent}%"></div>
+            <div class="progress-fail" style="width:${this._failPercent}%"></div>
+          </div>
+          ${this.status === "running" && this._pending > 0 ? s`
+            <div class="eta">
+              ~${this._pending} items remaining
+            </div>
+          ` : r}
+        </div>
+
+        <div class="actions">
+          ${this.status === "running" ? s`
+            <button
+              class="action-btn pause"
+              @click=${() => this._dispatch("ai-batch-pause")}
+              aria-label="Pause batch job"
+              tabindex="0"
+            >Pause</button>
+            <button
+              class="action-btn cancel"
+              @click=${() => this._dispatch("ai-batch-cancel")}
+              aria-label="Cancel batch job"
+              tabindex="0"
+            >Cancel</button>
+          ` : r}
+          ${this.status === "paused" ? s`
+            <button
+              class="action-btn retry"
+              @click=${() => this._dispatch("ai-batch-retry")}
+              aria-label="Resume batch job"
+              tabindex="0"
+            >Resume</button>
+            <button
+              class="action-btn cancel"
+              @click=${() => this._dispatch("ai-batch-cancel")}
+              aria-label="Cancel batch job"
+              tabindex="0"
+            >Cancel</button>
+          ` : r}
+          ${this.status === "failed" ? s`
+            <button
+              class="action-btn retry"
+              @click=${() => this._dispatch("ai-batch-retry")}
+              aria-label="Retry failed items"
+              tabindex="0"
+            >Retry Failed</button>
+          ` : r}
+          ${this.status === "complete" ? s`
+            <span class="complete-text">All items processed</span>
+          ` : r}
+        </div>
+      </div>
+    `;
+  }
+};
+t.styles = [b, h, f, m, u`
+    :host {
+      animation: fadeSlideIn 200ms var(--cg-transition-easing-ease-out) both;
+    }
+    :host([hidden]) { display: none; }
+
+    .container {
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      padding: var(--cg-spacing-16);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--cg-spacing-12);
+    }
+
+    .title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+
+    .status-badge {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      padding: var(--cg-spacing-3) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-100);
+    }
+    .status-badge.running {
+      background: var(--cg-color-status-info-background-default);
+      color: var(--cg-color-status-info-text-default);
+    }
+    .status-badge.complete {
+      background: var(--cg-color-status-success-background-default);
+      color: var(--cg-color-status-success-text-default);
+    }
+    .status-badge.failed {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+    }
+    .status-badge.paused {
+      background: var(--cg-color-status-warning-background-default);
+      color: var(--cg-color-status-warning-text);
+    }
+
+    /* ── Stats row ── */
+    .stats {
+      display: flex;
+      gap: var(--cg-spacing-16);
+      margin-bottom: var(--cg-spacing-12);
+    }
+
+    .stat {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-2);
+    }
+
+    .stat-label {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+    }
+
+    .stat-value {
+      font-size: var(--cg-font-size-base);
+      font-weight: var(--cg-font-weight-bold);
+    }
+    .stat-value.success { color: var(--cg-color-status-success-text-default); }
+    .stat-value.fail { color: var(--cg-color-status-error-text-default); }
+    .stat-value.pending { color: var(--cg-color-input-text-placeholder); }
+
+    /* ── Progress bar ── */
+    .progress-section {
+      margin-bottom: var(--cg-spacing-12);
+    }
+
+    .progress-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);
+    }
+
+    .progress-percent {
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .progress-track {
+      height: 10px;
+      background: var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-50);
+      overflow: hidden;
+      display: flex;
+    }
+
+    .progress-success {
+      height: 100%;
+      background: var(--cg-color-status-success-text-default);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+
+    .progress-fail {
+      height: 100%;
+      background: var(--cg-color-status-error-text-default);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+
+    /* ── Pulse animation for running ── */
+    .pulse-dot {
+      display: inline-block;
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      border-radius: 50%;
+      background: var(--cg-color-status-info-text-default);
+      margin-right: var(--cg-spacing-6);
+      animation: pulse 1.5s infinite;
+    }
+
+    .eta {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-border-hover);
+      margin-top: var(--cg-spacing-6);
+    }
+
+    /* ── Actions ── */
+    .actions {
+      display: flex;
+      gap: var(--cg-spacing-8);
+      margin-top: var(--cg-spacing-16);
+      padding-top: var(--cg-spacing-12);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+
+    .action-btn {
+      background: transparent;
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-100);
+      cursor: pointer;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .action-btn:hover {
+      border-color: var(--cg-color-surface-cards-border);
+      color: var(--cg-color-surface-base-text);
+    }
+    .action-btn:focus-visible {
+      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
+    }
+
+    .action-btn.pause:hover { border-color: var(--cg-color-status-warning-text); color: var(--cg-color-status-warning-text); }
+    .action-btn.cancel:hover { border-color: var(--cg-color-status-error-text-default); color: var(--cg-color-status-error-text-default); }
+    .action-btn.retry {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-surface-container-background);
+      border-color: var(--cg-color-surface-base-text);
+    }
+    .action-btn.retry:hover { filter: brightness(0.9); }
+
+    .complete-text {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-status-success-text-default);
+    }
+
+    /* Reduced motion: stop pulse animation, show static dot */
+    @media (prefers-reduced-motion: reduce) {
+      .pulse-dot {
+        animation: none !important;
+        opacity: 1;
+      }
+    }
+  `];
+e([
+  o({ type: Number })
+], t.prototype, "total", 2);
+e([
+  o({ type: Number })
+], t.prototype, "completed", 2);
+e([
+  o({ type: Number })
+], t.prototype, "failed", 2);
+e([
+  o({ type: String })
+], t.prototype, "heading", 2);
+e([
+  o({ type: String })
+], t.prototype, "status", 2);
+t = e([
+  v("ai-batch-progress")
+], t);
+export {
+  t as AiBatchProgress
+};
+//# sourceMappingURL=ai-batch-progress.js.map

package/dist/components/ai-batch-progress/ai-batch-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-batch-progress.js","sources":["../../../src/components/ai-batch-progress/ai-batch-progress.ts"],"sourcesContent":["/**\n * @element ai-batch-progress\n * Batch job progress tracker with segmented success/fail bar, stats, and pause/cancel/retry controls.\n *\n * @example\n * ```html\n * <ai-batch-progress\n *   total=\"500\" completed=\"312\" failed=\"8\"\n *   heading=\"Embedding Generation\"\n *   status=\"running\"\n * ></ai-batch-progress>\n * ```\n *\n * @fires {CustomEvent<{total, completed, failed, status}>} ai-batch-pause - Pause clicked\n * @fires {CustomEvent<{total, completed, failed, status}>} ai-batch-cancel - Cancel clicked\n * @fires {CustomEvent<{total, completed, failed, status}>} ai-batch-retry - Retry/Resume clicked\n *\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Accent for percentage text\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, pulseKeyframes, fadeSlideInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-batch-progress')\nexport class AiBatchProgress extends LitElement {\n  static override styles = [hostBlock, reducedMotion, pulseKeyframes, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn 200ms var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .container {\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      padding: var(--cg-spacing-16);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .status-badge {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      padding: var(--cg-spacing-3) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-100);\n    }\n    .status-badge.running {\n      background: var(--cg-color-status-info-background-default);\n      color: var(--cg-color-status-info-text-default);\n    }\n    .status-badge.complete {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n    }\n    .status-badge.failed {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n    .status-badge.paused {\n      background: var(--cg-color-status-warning-background-default);\n      color: var(--cg-color-status-warning-text);\n    }\n\n    /* ── Stats row ── */\n    .stats {\n      display: flex;\n      gap: var(--cg-spacing-16);\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .stat {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n    }\n\n    .stat-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    .stat-value {\n      font-size: var(--cg-font-size-base);\n      font-weight: var(--cg-font-weight-bold);\n    }\n    .stat-value.success { color: var(--cg-color-status-success-text-default); }\n    .stat-value.fail { color: var(--cg-color-status-error-text-default); }\n    .stat-value.pending { color: var(--cg-color-input-text-placeholder); }\n\n    /* ── Progress bar ── */\n    .progress-section {\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .progress-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    .progress-percent {\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .progress-track {\n      height: 10px;\n      background: var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-50);\n      overflow: hidden;\n      display: flex;\n    }\n\n    .progress-success {\n      height: 100%;\n      background: var(--cg-color-status-success-text-default);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    .progress-fail {\n      height: 100%;\n      background: var(--cg-color-status-error-text-default);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    /* ── Pulse animation for running ── */\n    .pulse-dot {\n      display: inline-block;\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: 50%;\n      background: var(--cg-color-status-info-text-default);\n      margin-right: var(--cg-spacing-6);\n      animation: pulse 1.5s infinite;\n    }\n\n    .eta {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-border-hover);\n      margin-top: var(--cg-spacing-6);\n    }\n\n    /* ── Actions ── */\n    .actions {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-16);\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n\n    .action-btn {\n      background: transparent;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .action-btn:hover {\n      border-color: var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-base-text);\n    }\n    .action-btn:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .action-btn.pause:hover { border-color: var(--cg-color-status-warning-text); color: var(--cg-color-status-warning-text); }\n    .action-btn.cancel:hover { border-color: var(--cg-color-status-error-text-default); color: var(--cg-color-status-error-text-default); }\n    .action-btn.retry {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-container-background);\n      border-color: var(--cg-color-surface-base-text);\n    }\n    .action-btn.retry:hover { filter: brightness(0.9); }\n\n    .complete-text {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-status-success-text-default);\n    }\n\n    /* Reduced motion: stop pulse animation, show static dot */\n    @media (prefers-reduced-motion: reduce) {\n      .pulse-dot {\n        animation: none !important;\n        opacity: 1;\n      }\n    }\n  `];\n  @property({ type: Number }) total = 0;\n  @property({ type: Number }) completed = 0;\n  @property({ type: Number }) failed = 0;\n  @property({ type: String }) heading = 'Batch Job';\n  @property({ type: String }) status: 'running' | 'complete' | 'failed' | 'paused' = 'running';\n\n  private get _pending(): number {\n    return Math.max(0, this.total - this.completed - this.failed);\n  }\n\n  private get _percent(): number {\n    if (this.total <= 0) return 0;\n    return Math.round(((this.completed + this.failed) / this.total) * 100);\n  }\n\n  private get _successPercent(): number {\n    if (this.total <= 0) return 0;\n    return (this.completed / this.total) * 100;\n  }\n\n  private get _failPercent(): number {\n    if (this.total <= 0) return 0;\n    return (this.failed / this.total) * 100;\n  }\n\n  private _dispatch(eventName: string) {\n    this.dispatchEvent(new CustomEvent(eventName, {\n      detail: { total: this.total, completed: this.completed, failed: this.failed, status: this.status },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    return html`\n      <div class=\"container\" role=\"region\" aria-label=\"${this.heading} progress\">\n        <div class=\"header\">\n          <span class=\"title\">\n            ${this.status === 'running' ? html`<span class=\"pulse-dot\" aria-hidden=\"true\"></span>` : nothing}\n            ${this.heading}\n          </span>\n          <span class=\"status-badge ${this.status}\">${this.status}</span>\n        </div>\n\n        <div class=\"stats\">\n          <div class=\"stat\">\n            <span class=\"stat-label\">Completed</span>\n            <span class=\"stat-value success\">${this.completed}</span>\n          </div>\n          <div class=\"stat\">\n            <span class=\"stat-label\">Failed</span>\n            <span class=\"stat-value fail\">${this.failed}</span>\n          </div>\n          <div class=\"stat\">\n            <span class=\"stat-label\">Pending</span>\n            <span class=\"stat-value pending\">${this._pending}</span>\n          </div>\n          <div class=\"stat\">\n            <span class=\"stat-label\">Total</span>\n            <span class=\"stat-value\">${this.total}</span>\n          </div>\n        </div>\n\n        <div class=\"progress-section\">\n          <div class=\"progress-header\">\n            <span>Progress</span>\n            <span class=\"progress-percent\">${this._percent}%</span>\n          </div>\n          <div\n            class=\"progress-track\"\n            role=\"progressbar\"\n            aria-valuenow=${this._percent}\n            aria-valuemin=\"0\"\n            aria-valuemax=\"100\"\n            aria-label=\"Batch progress: ${this._percent}%\"\n          >\n            <div class=\"progress-success\" style=\"width:${this._successPercent}%\"></div>\n            <div class=\"progress-fail\" style=\"width:${this._failPercent}%\"></div>\n          </div>\n          ${this.status === 'running' && this._pending > 0 ? html`\n            <div class=\"eta\">\n              ~${this._pending} items remaining\n            </div>\n          ` : nothing}\n        </div>\n\n        <div class=\"actions\">\n          ${this.status === 'running' ? html`\n            <button\n              class=\"action-btn pause\"\n              @click=${() => this._dispatch('ai-batch-pause')}\n              aria-label=\"Pause batch job\"\n              tabindex=\"0\"\n            >Pause</button>\n            <button\n              class=\"action-btn cancel\"\n              @click=${() => this._dispatch('ai-batch-cancel')}\n              aria-label=\"Cancel batch job\"\n              tabindex=\"0\"\n            >Cancel</button>\n          ` : nothing}\n          ${this.status === 'paused' ? html`\n            <button\n              class=\"action-btn retry\"\n              @click=${() => this._dispatch('ai-batch-retry')}\n              aria-label=\"Resume batch job\"\n              tabindex=\"0\"\n            >Resume</button>\n            <button\n              class=\"action-btn cancel\"\n              @click=${() => this._dispatch('ai-batch-cancel')}\n              aria-label=\"Cancel batch job\"\n              tabindex=\"0\"\n            >Cancel</button>\n          ` : nothing}\n          ${this.status === 'failed' ? html`\n            <button\n              class=\"action-btn retry\"\n              @click=${() => this._dispatch('ai-batch-retry')}\n              aria-label=\"Retry failed items\"\n              tabindex=\"0\"\n            >Retry Failed</button>\n          ` : nothing}\n          ${this.status === 'complete' ? html`\n            <span class=\"complete-text\">All items processed</span>\n          ` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-batch-progress': AiBatchProgress;\n  }\n}\n"],"names":["AiBatchProgress","LitElement","eventName","html","nothing","hostBlock","reducedMotion","pulseKeyframes","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-cache-indicator/ai-cache-indicator.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+export declare class AiCacheIndicator extends LitElement {
+    static styles: import('lit').CSSResult[];
+    status: 'hit' | 'miss' | 'stale' | 'disabled' | 'loading';
+    hitRate: number;
+    latencySaved: string;
+    cacheAge: string;
+    /** Optional: tokens served from cache. Surfaces OpenAI's cached_tokens / Anthropic's cache_read_input_tokens. */
+    tokensCached: number;
+    /** Optional: dollar cost saved, formatted by the consumer (e.g. "$0.04"). */
+    costSaved: string;
+    showDetails: boolean;
+    /**
+     * Optional async clear handler. When provided, the Clear button uses
+     * cg-button.runAction() so the user gets a spinner → ✓ / × pop on the
+     * same button instead of a plain click. Without this prop we just fire
+     * `ai-cache-clear` and let the consumer manage state.
+     */
+    clearAction?: () => Promise<void>;
+    private get _hitRateTier();
+    private _formatTokens;
+    private _toggleDetails;
+    private _onClear;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-cache-indicator': AiCacheIndicator;
+    }
+}
+//# sourceMappingURL=ai-cache-indicator.d.ts.map

package/dist/components/ai-cache-indicator/ai-cache-indicator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-cache-indicator.d.ts","sourceRoot":"","sources":["../../../src/components/ai-cache-indicator/ai-cache-indicator.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAMrD,OAAO,2BAA2B,CAAC;AAGnC,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAqKnB;IAEyB,MAAM,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAc;IAChD,OAAO,SAAK;IACP,YAAY,SAAM;IACtB,QAAQ,SAAM;IAClE,iHAAiH;IACzD,YAAY,SAAK;IACzE,6EAA6E;IACxB,SAAS,SAAM;IACG,WAAW,UAAS;IAC3F;;;;;OAKG;IAC6B,WAAW,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAElE,OAAO,KAAK,YAAY,GAIvB;IAED,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,QAAQ;IAaP,MAAM;CAmFhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}