@cognivo/components 0.8.0

package/dist/components/ai-cache-indicator/ai-cache-indicator.js

@@ -0,0 +1,314 @@
+import { css as u, LitElement as h, nothing as c, html as i } from "lit";
+import { property as r, customElement as p } from "lit/decorators.js";
+import { h as v, r as f, f as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-button/cg-button.js";
+var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, e = (a, o, n, l) => {
+  for (var s = l > 1 ? void 0 : l ? w(o, n) : o, d = a.length - 1, g; d >= 0; d--)
+    (g = a[d]) && (s = (l ? g(o, n, s) : g(s)) || s);
+  return l && s && m(o, n, s), s;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.status = "disabled", this.hitRate = 0, this.latencySaved = "", this.cacheAge = "", this.tokensCached = 0, this.costSaved = "", this.showDetails = !1;
+  }
+  get _hitRateTier() {
+    return this.hitRate < 50 ? "tier-low" : this.hitRate < 80 ? "tier-mid" : "tier-high";
+  }
+  _formatTokens(a) {
+    return a >= 1e6 ? `${(a / 1e6).toFixed(1)}M` : a >= 1e3 ? `${(a / 1e3).toFixed(1)}K` : `${a}`;
+  }
+  _toggleDetails() {
+    this.showDetails = !this.showDetails, this.dispatchEvent(new CustomEvent("ai-cache-detail", {
+      detail: { status: this.status, hitRate: this.hitRate },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _onClear(a) {
+    const o = a.currentTarget;
+    this.dispatchEvent(new CustomEvent("ai-cache-clear", {
+      bubbles: !0,
+      composed: !0
+    })), this.clearAction && o.runAction(() => this.clearAction()).catch(() => {
+    });
+  }
+  render() {
+    const a = Math.min(100, Math.max(0, this.hitRate));
+    return i`
+      <div class="wrapper">
+        <button
+          class="pill"
+          type="button"
+          @click=${this._toggleDetails}
+          aria-expanded=${this.showDetails ? "true" : "false"}
+          aria-label="Cache status: ${this.status}. ${this.showDetails ? "Hide" : "Show"} details."
+        >
+          <span class="dot ${this.status}" aria-hidden="true"></span>
+          <span class="status-text">${this.status}</span>
+          ${this.latencySaved && this.status === "hit" ? i`<span class="latency">−${this.latencySaved}</span>` : c}
+          <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="m6 9 6 6 6-6"/>
+          </svg>
+        </button>
+
+        ${this.showDetails ? i`
+          <div class="detail-card" role="region" aria-label="Cache details">
+            <div class="detail-row">
+              <span class="detail-label">Hit rate</span>
+              <span class="detail-value">${this.hitRate}%</span>
+            </div>
+            <div
+              class="rate-bar-track"
+              role="progressbar"
+              aria-valuenow=${this.hitRate}
+              aria-valuemin="0"
+              aria-valuemax="100"
+              aria-label="Cache hit rate"
+            >
+              <div class="rate-bar-fill ${this._hitRateTier}" style="width: ${a}%"></div>
+            </div>
+
+            ${this.latencySaved ? i`
+              <div class="detail-row">
+                <span class="detail-label">Latency saved</span>
+                <span class="detail-value success">${this.latencySaved}</span>
+              </div>
+            ` : c}
+
+            ${this.costSaved ? i`
+              <div class="detail-row">
+                <span class="detail-label">Cost saved</span>
+                <span class="detail-value success">${this.costSaved}</span>
+              </div>
+            ` : c}
+
+            ${this.tokensCached > 0 ? i`
+              <div class="detail-row">
+                <span class="detail-label">Tokens cached</span>
+                <span class="detail-value">${this._formatTokens(this.tokensCached)}</span>
+              </div>
+            ` : c}
+
+            ${this.cacheAge ? i`
+              <div class="detail-row">
+                <span class="detail-label">Cache age</span>
+                <span class="detail-value">${this.cacheAge}</span>
+              </div>
+            ` : c}
+
+            <hr class="divider" aria-hidden="true" />
+
+            <span class="clear-slot">
+              <cg-button
+                variant="secondary"
+                size="sm"
+                type="danger"
+                full
+                success-message="Cache cleared"
+                error-message="Clear failed"
+                @click=${this._onClear}
+              >Clear cache</cg-button>
+            </span>
+          </div>
+        ` : c}
+      </div>
+    `;
+  }
+};
+t.styles = [v, f, b, u`
+    :host {
+      display: inline-flex;
+    }
+    :host([hidden]) { display: none; }
+
+    /* ── Pill ── */
+    .pill {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      min-height: var(--cg-spacing-32);
+      padding: var(--cg-spacing-6) var(--cg-spacing-12);
+      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-full);
+      cursor: pointer;
+      font-family: inherit;
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .pill:hover {
+      border-color: var(--cg-color-surface-cards-border-strong);
+    }
+    .pill:active {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .pill:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    /* Extends pointer hit area so the small pill still meets 44px target. */
+    .pill::before {
+      content: '';
+      position: absolute;
+      inset: calc(-1 * var(--cg-spacing-6));
+    }
+
+    /* ── Status dot ── */
+    .dot {
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      flex-shrink: 0;
+    }
+    .dot.hit       { background: var(--cg-color-status-success-text-default); }
+    .dot.miss      { background: var(--cg-color-status-error-text-default); }
+    .dot.stale     { background: var(--cg-color-status-warning-text-default); }
+    .dot.disabled  { background: var(--cg-color-input-text-placeholder); }
+    .dot.loading   { background: var(--cg-color-status-info-text-default); }
+
+    /* Pulse on loading + hit so the indicator feels alive. ease-in-out
+       gives a symmetric breath; ease-default (=ease) had a fast-out
+       slow-in cadence that felt off-beat. */
+    .dot.loading,
+    .dot.hit {
+      animation: cg-cache-pulse 2s var(--cg-transition-easing-ease-in-out) infinite;
+    }
+    @keyframes cg-cache-pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50%      { opacity: 0.55; transform: scale(0.82); }
+    }
+
+    .status-text {
+      font-weight: var(--cg-font-weight-semibold);
+      text-transform: capitalize;
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .latency {
+      color: var(--cg-color-status-success-text-default);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .chevron {
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      color: var(--cg-color-input-text-placeholder);
+      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring);
+      margin-left: auto;
+      flex-shrink: 0;
+    }
+    :host([show-details]) .chevron { transform: rotate(180deg); }
+
+    /* ── Detail card ── */
+    .detail-card {
+      margin-top: var(--cg-spacing-8);
+      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-150);
+      box-shadow: var(--cg-elevation-1);
+      padding: var(--cg-spacing-16);
+      color: var(--cg-color-surface-base-text);
+      /* Spring easing gives a slight overshoot — feels responsive instead
+         of just sliding in. */
+      animation: cg-cache-detail-pop var(--cg-transition-duration-default) var(--cg-transition-easing-spring) both;
+      min-width: 260px;
+      transform-origin: top left;
+    }
+    @keyframes cg-cache-detail-pop {
+      from { opacity: 0; transform: translateY(-4px) scale(0.98); }
+      to   { opacity: 1; transform: translateY(0) scale(1); }
+    }
+
+    .detail-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: var(--cg-spacing-6) 0;
+      gap: var(--cg-spacing-12);
+    }
+    .detail-row + .detail-row { margin-top: var(--cg-spacing-2); }
+
+    .detail-label {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+    }
+
+    .detail-value {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      font-variant-numeric: tabular-nums;
+    }
+    .detail-value.success { color: var(--cg-color-status-success-text-default); }
+
+    /* ── Hit-rate bar — color-tiered by value ── */
+    .rate-bar-track {
+      height: var(--cg-spacing-6);
+      background: var(--cg-color-surface-cards-divider);
+      border-radius: var(--cg-border-radius-50);
+      overflow: hidden;
+      margin-top: var(--cg-spacing-8);
+    }
+    .rate-bar-fill {
+      height: 100%;
+      border-radius: var(--cg-border-radius-50);
+      transition:
+        width var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out),
+        background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .rate-bar-fill.tier-low  { background: var(--cg-color-status-error-text-default); }
+    .rate-bar-fill.tier-mid  { background: var(--cg-color-status-warning-text-default); }
+    .rate-bar-fill.tier-high { background: var(--cg-color-status-success-text-default); }
+
+    .divider {
+      height: var(--cg-border-width-50);
+      background: var(--cg-color-surface-cards-divider);
+      margin: var(--cg-spacing-12) 0;
+      border: none;
+    }
+
+    /* The Clear button is composed from <cg-button>, so we don't
+       maintain pill/border/focus styles here. The wrapper just gives
+       it full width inside the detail card. */
+    .clear-slot { width: 100%; display: block; }
+    .clear-slot cg-button { width: 100%; }
+
+    .wrapper {
+      display: inline-flex;
+      flex-direction: column;
+    }
+  `];
+e([
+  r({ type: String })
+], t.prototype, "status", 2);
+e([
+  r({ type: Number, attribute: "hit-rate" })
+], t.prototype, "hitRate", 2);
+e([
+  r({ type: String, attribute: "latency-saved" })
+], t.prototype, "latencySaved", 2);
+e([
+  r({ type: String, attribute: "cache-age" })
+], t.prototype, "cacheAge", 2);
+e([
+  r({ type: Number, attribute: "tokens-cached" })
+], t.prototype, "tokensCached", 2);
+e([
+  r({ type: String, attribute: "cost-saved" })
+], t.prototype, "costSaved", 2);
+e([
+  r({ type: Boolean, attribute: "show-details", reflect: !0 })
+], t.prototype, "showDetails", 2);
+e([
+  r({ attribute: !1 })
+], t.prototype, "clearAction", 2);
+t = e([
+  p("ai-cache-indicator")
+], t);
+export {
+  t as AiCacheIndicator
+};
+//# sourceMappingURL=ai-cache-indicator.js.map

package/dist/components/ai-cache-indicator/ai-cache-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-cache-indicator.js","sources":["../../../src/components/ai-cache-indicator/ai-cache-indicator.ts"],"sourcesContent":["/**\n * @element ai-cache-indicator\n * Compact inline cache-status pill with an expandable detail card.\n *\n * Shows the current cache state (hit/miss/stale/disabled/loading) as a\n * colored dot, optional latency-saved on hits, and on click reveals a\n * detail card with hit-rate bar (color-tiered), cost saved, tokens cached,\n * and a \"Clear Cache\" button. Mirrors the metrics surfaced by OpenAI's\n * `cached_tokens` / Anthropic's `cache_read_input_tokens` so consumers can\n * map provider responses 1:1.\n *\n * @example\n * ```html\n * <ai-cache-indicator\n *   status=\"hit\"\n *   hit-rate=\"87\"\n *   latency-saved=\"240 ms\"\n *   cache-age=\"2 min ago\"\n *   tokens-cached=\"2400\"\n *   cost-saved=\"$0.04\"\n * ></ai-cache-indicator>\n * ```\n *\n * @fires {CustomEvent} ai-cache-clear - Clear Cache clicked\n * @fires {CustomEvent<{status, hitRate}>} ai-cache-detail - Detail panel toggled\n *\n * @cssprop [--cg-color-surface-cards-background] - Pill background\n * @cssprop [--cg-color-status-success-text-default] - Hit dot + bar high-tier color\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n// Dogfood: clear-cache action uses our own <cg-button> instead of a native\n// <button>. Free press-scale, focus ring, type=\"danger\" styling, and\n// runAction() async lifecycle if the consumer wires one up via clearAction.\nimport '../cg-button/cg-button.js';\nimport type { CgButton } from '../cg-button/cg-button.js';\n\n@customElement('ai-cache-indicator')\nexport class AiCacheIndicator extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      display: inline-flex;\n    }\n    :host([hidden]) { display: none; }\n\n    /* ── Pill ── */\n    .pill {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      min-height: var(--cg-spacing-32);\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\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-full);\n      cursor: pointer;\n      font-family: inherit;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .pill:hover {\n      border-color: var(--cg-color-surface-cards-border-strong);\n    }\n    .pill:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .pill:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    /* Extends pointer hit area so the small pill still meets 44px target. */\n    .pill::before {\n      content: '';\n      position: absolute;\n      inset: calc(-1 * var(--cg-spacing-6));\n    }\n\n    /* ── Status dot ── */\n    .dot {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      flex-shrink: 0;\n    }\n    .dot.hit       { background: var(--cg-color-status-success-text-default); }\n    .dot.miss      { background: var(--cg-color-status-error-text-default); }\n    .dot.stale     { background: var(--cg-color-status-warning-text-default); }\n    .dot.disabled  { background: var(--cg-color-input-text-placeholder); }\n    .dot.loading   { background: var(--cg-color-status-info-text-default); }\n\n    /* Pulse on loading + hit so the indicator feels alive. ease-in-out\n       gives a symmetric breath; ease-default (=ease) had a fast-out\n       slow-in cadence that felt off-beat. */\n    .dot.loading,\n    .dot.hit {\n      animation: cg-cache-pulse 2s var(--cg-transition-easing-ease-in-out) infinite;\n    }\n    @keyframes cg-cache-pulse {\n      0%, 100% { opacity: 1; transform: scale(1); }\n      50%      { opacity: 0.55; transform: scale(0.82); }\n    }\n\n    .status-text {\n      font-weight: var(--cg-font-weight-semibold);\n      text-transform: capitalize;\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .latency {\n      color: var(--cg-color-status-success-text-default);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .chevron {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      color: var(--cg-color-input-text-placeholder);\n      transition: transform var(--cg-transition-duration-default) var(--cg-transition-easing-spring);\n      margin-left: auto;\n      flex-shrink: 0;\n    }\n    :host([show-details]) .chevron { transform: rotate(180deg); }\n\n    /* ── Detail card ── */\n    .detail-card {\n      margin-top: var(--cg-spacing-8);\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-150);\n      box-shadow: var(--cg-elevation-1);\n      padding: var(--cg-spacing-16);\n      color: var(--cg-color-surface-base-text);\n      /* Spring easing gives a slight overshoot — feels responsive instead\n         of just sliding in. */\n      animation: cg-cache-detail-pop var(--cg-transition-duration-default) var(--cg-transition-easing-spring) both;\n      min-width: 260px;\n      transform-origin: top left;\n    }\n    @keyframes cg-cache-detail-pop {\n      from { opacity: 0; transform: translateY(-4px) scale(0.98); }\n      to   { opacity: 1; transform: translateY(0) scale(1); }\n    }\n\n    .detail-row {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: var(--cg-spacing-6) 0;\n      gap: var(--cg-spacing-12);\n    }\n    .detail-row + .detail-row { margin-top: var(--cg-spacing-2); }\n\n    .detail-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    .detail-value {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      font-variant-numeric: tabular-nums;\n    }\n    .detail-value.success { color: var(--cg-color-status-success-text-default); }\n\n    /* ── Hit-rate bar — color-tiered by value ── */\n    .rate-bar-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-top: var(--cg-spacing-8);\n    }\n    .rate-bar-fill {\n      height: 100%;\n      border-radius: var(--cg-border-radius-50);\n      transition:\n        width var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out),\n        background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .rate-bar-fill.tier-low  { background: var(--cg-color-status-error-text-default); }\n    .rate-bar-fill.tier-mid  { background: var(--cg-color-status-warning-text-default); }\n    .rate-bar-fill.tier-high { background: var(--cg-color-status-success-text-default); }\n\n    .divider {\n      height: var(--cg-border-width-50);\n      background: var(--cg-color-surface-cards-divider);\n      margin: var(--cg-spacing-12) 0;\n      border: none;\n    }\n\n    /* The Clear button is composed from <cg-button>, so we don't\n       maintain pill/border/focus styles here. The wrapper just gives\n       it full width inside the detail card. */\n    .clear-slot { width: 100%; display: block; }\n    .clear-slot cg-button { width: 100%; }\n\n    .wrapper {\n      display: inline-flex;\n      flex-direction: column;\n    }\n  `];\n\n  @property({ type: String }) status: 'hit' | 'miss' | 'stale' | 'disabled' | 'loading' = 'disabled';\n  @property({ type: Number, attribute: 'hit-rate' }) hitRate = 0;\n  @property({ type: String, attribute: 'latency-saved' }) latencySaved = '';\n  @property({ type: String, attribute: 'cache-age' }) cacheAge = '';\n  /** Optional: tokens served from cache. Surfaces OpenAI's cached_tokens / Anthropic's cache_read_input_tokens. */\n  @property({ type: Number, attribute: 'tokens-cached' }) tokensCached = 0;\n  /** Optional: dollar cost saved, formatted by the consumer (e.g. \"$0.04\"). */\n  @property({ type: String, attribute: 'cost-saved' }) costSaved = '';\n  @property({ type: Boolean, attribute: 'show-details', reflect: true }) showDetails = false;\n  /**\n   * Optional async clear handler. When provided, the Clear button uses\n   * cg-button.runAction() so the user gets a spinner → ✓ / × pop on the\n   * same button instead of a plain click. Without this prop we just fire\n   * `ai-cache-clear` and let the consumer manage state.\n   */\n  @property({ attribute: false }) clearAction?: () => Promise<void>;\n\n  private get _hitRateTier(): 'tier-low' | 'tier-mid' | 'tier-high' {\n    if (this.hitRate < 50) return 'tier-low';\n    if (this.hitRate < 80) return 'tier-mid';\n    return 'tier-high';\n  }\n\n  private _formatTokens(n: number): string {\n    if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;\n    if (n >= 1000) return `${(n / 1000).toFixed(1)}K`;\n    return `${n}`;\n  }\n\n  private _toggleDetails(): void {\n    this.showDetails = !this.showDetails;\n    this.dispatchEvent(new CustomEvent('ai-cache-detail', {\n      detail: { status: this.status, hitRate: this.hitRate },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _onClear(e: Event): void {\n    const btn = e.currentTarget as CgButton;\n    this.dispatchEvent(new CustomEvent('ai-cache-clear', {\n      bubbles: true, composed: true,\n    }));\n    if (this.clearAction) {\n      btn.runAction(() => this.clearAction!()).catch(() => {\n        /* runAction re-throws so callers can chain; we already showed\n           the error pop on the button — swallow here. */\n      });\n    }\n  }\n\n  override render() {\n    const clamped = Math.min(100, Math.max(0, this.hitRate));\n\n    return html`\n      <div class=\"wrapper\">\n        <button\n          class=\"pill\"\n          type=\"button\"\n          @click=${this._toggleDetails}\n          aria-expanded=${this.showDetails ? 'true' : 'false'}\n          aria-label=\"Cache status: ${this.status}. ${this.showDetails ? 'Hide' : 'Show'} details.\"\n        >\n          <span class=\"dot ${this.status}\" aria-hidden=\"true\"></span>\n          <span class=\"status-text\">${this.status}</span>\n          ${this.latencySaved && this.status === 'hit' ? html`<span class=\"latency\">−${this.latencySaved}</span>` : nothing}\n          <svg class=\"chevron\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n            <path d=\"m6 9 6 6 6-6\"/>\n          </svg>\n        </button>\n\n        ${this.showDetails ? html`\n          <div class=\"detail-card\" role=\"region\" aria-label=\"Cache details\">\n            <div class=\"detail-row\">\n              <span class=\"detail-label\">Hit rate</span>\n              <span class=\"detail-value\">${this.hitRate}%</span>\n            </div>\n            <div\n              class=\"rate-bar-track\"\n              role=\"progressbar\"\n              aria-valuenow=${this.hitRate}\n              aria-valuemin=\"0\"\n              aria-valuemax=\"100\"\n              aria-label=\"Cache hit rate\"\n            >\n              <div class=\"rate-bar-fill ${this._hitRateTier}\" style=\"width: ${clamped}%\"></div>\n            </div>\n\n            ${this.latencySaved ? html`\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Latency saved</span>\n                <span class=\"detail-value success\">${this.latencySaved}</span>\n              </div>\n            ` : nothing}\n\n            ${this.costSaved ? html`\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Cost saved</span>\n                <span class=\"detail-value success\">${this.costSaved}</span>\n              </div>\n            ` : nothing}\n\n            ${this.tokensCached > 0 ? html`\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Tokens cached</span>\n                <span class=\"detail-value\">${this._formatTokens(this.tokensCached)}</span>\n              </div>\n            ` : nothing}\n\n            ${this.cacheAge ? html`\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Cache age</span>\n                <span class=\"detail-value\">${this.cacheAge}</span>\n              </div>\n            ` : nothing}\n\n            <hr class=\"divider\" aria-hidden=\"true\" />\n\n            <span class=\"clear-slot\">\n              <cg-button\n                variant=\"secondary\"\n                size=\"sm\"\n                type=\"danger\"\n                full\n                success-message=\"Cache cleared\"\n                error-message=\"Clear failed\"\n                @click=${this._onClear}\n              >Clear cache</cg-button>\n            </span>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-cache-indicator': AiCacheIndicator;\n  }\n}\n"],"names":["AiCacheIndicator","LitElement","n","e","btn","clamped","html","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-capture-flow/ai-capture-flow.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+type Step = 'upload' | 'preview' | 'processing' | 'complete' | 'error';
+export declare class AiCaptureFlow extends LitElement {
+    static styles: import('lit').CSSResult[];
+    step: Step;
+    accept: string;
+    previewUrl: string;
+    result: string;
+    progress: number;
+    heading: string;
+    private _dragOver;
+    private _dispatch;
+    private _onDragOver;
+    private _onDragLeave;
+    private _onDrop;
+    private _onFileInput;
+    private _triggerFileInput;
+    private _stepIndex;
+    private _renderSteps;
+    private _renderUpload;
+    private _renderPreview;
+    private _renderProcessing;
+    private _renderComplete;
+    private _renderError;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-capture-flow': AiCaptureFlow;
+    }
+}
+export {};
+//# sourceMappingURL=ai-capture-flow.d.ts.map

package/dist/components/ai-capture-flow/ai-capture-flow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-capture-flow.d.ts","sourceRoot":"","sources":["../../../src/components/ai-capture-flow/ai-capture-flow.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,KAAK,IAAI,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,GAAG,UAAU,GAAG,OAAO,CAAC;AAGvE,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAkLnB;IACyB,IAAI,EAAE,IAAI,CAAY;IACtB,MAAM,SAAoB;IAC1B,UAAU,SAAM;IAChB,MAAM,SAAM;IACZ,QAAQ,SAAK;IACb,OAAO,SAAa;IAEvC,OAAO,CAAC,SAAS,CAAS;IAEnC,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAEpB,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,iBAAiB;IAIzB,OAAO,CAAC,UAAU;IAKlB,OAAO,CAAC,YAAY;IAkBpB,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,cAAc;IActB,OAAO,CAAC,iBAAiB;IAYzB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,YAAY;IAYX,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}