@cognivo/components 0.8.0 → 0.8.2

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

@@ -1,21 +1,14 @@
-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;
+import { css as v, LitElement as u, nothing as c, html as e } from "lit";
+import { property as s, customElement as h } from "lit/decorators.js";
+import { h as p, r as b, f } from "../../chunks/premium.css-DHekUEUt.js";
+var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, r = (g, i, l, o) => {
+  for (var t = o > 1 ? void 0 : o ? w(i, l) : i, n = g.length - 1, d; n >= 0; n--)
+    (d = g[n]) && (t = (o ? d(i, l, t) : d(t)) || t);
+  return o && t && m(i, l, t), t;
 };
-let t = class extends h {
+let a = class extends u {
   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}`;
+    super(...arguments), this.status = "disabled", this.hitRate = 0, this.latencySaved = "", this.cacheAge = "", this.showDetails = !1;
   }
   _toggleDetails() {
     this.showDetails = !this.showDetails, this.dispatchEvent(new CustomEvent("ai-cache-detail", {
@@ -24,203 +17,112 @@ let t = class extends h {
       composed: !0
     }));
   }
-  _onClear(a) {
-    const o = a.currentTarget;
+  _onClear() {
     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`
+    return e`
       <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."
+          aria-expanded=${this.showDetails}
+          aria-label="Cache status: ${this.status}"
         >
-          <span class="dot ${this.status}" aria-hidden="true"></span>
+          <span class="dot ${this.status}"></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>
+          ${this.latencySaved && this.status === "hit" ? e`<span>${this.latencySaved}</span>` : c}
         </button>
 
-        ${this.showDetails ? i`
+        ${this.showDetails ? e`
           <div class="detail-card" role="region" aria-label="Cache details">
             <div class="detail-row">
-              <span class="detail-label">Hit rate</span>
+              <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 class="rate-bar-track" role="progressbar" aria-valuenow=${this.hitRate} aria-valuemin="0" aria-valuemax="100">
+              <div class="rate-bar-fill" style="width:${Math.min(100, Math.max(0, this.hitRate))}%"></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>
+            ${this.latencySaved ? e`
+              <div class="detail-row" style="margin-top:var(--cg-spacing-8);">
+                <span class="detail-label">Latency Saved</span>
+                <span class="detail-value" style="color:var(--cg-color-status-success-text-default)">${this.latencySaved}</span>
               </div>
             ` : c}
 
-            ${this.cacheAge ? i`
+            ${this.cacheAge ? e`
               <div class="detail-row">
-                <span class="detail-label">Cache age</span>
+                <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 class="divider"></div>
+            <button class="clear-btn" @click=${this._onClear} aria-label="Clear cache">Clear Cache</button>
           </div>
         ` : c}
       </div>
     `;
   }
 };
-t.styles = [v, f, b, u`
+a.styles = [p, b, f, v`
     :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);
+      gap: var(--cg-spacing-6);
+      padding: var(--cg-spacing-4) 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;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
       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));
+      border-color: var(--cg-color-surface-cards-border);
     }
     .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); }
-    }
+    .dot.hit { background: var(--cg-color-ai-cached-text); }
+    .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); }
 
     .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);
+      border-radius: var(--cg-border-radius-200);
       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); }
+      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+      min-width: var(--cg-spacing-256);
     }
 
     .detail-row {
@@ -228,9 +130,7 @@ t.styles = [v, f, b, u`
       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);
@@ -240,75 +140,80 @@ t.styles = [v, f, b, u`
     .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 ── */
+    /* ── Hit rate bar ── */
     .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);
+      margin-top: var(--cg-spacing-6);
     }
+
     .rate-bar-fill {
       height: 100%;
+      background: var(--cg-color-ai-cached-text);
       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);
+      transition: width var(--cg-transition-duration-slow) 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%; }
+    .clear-btn {
+      width: 100%;
+      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);
+      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);
+    }
+    .clear-btn:hover {
+      border-color: var(--cg-color-status-error-text-default);
+      color: var(--cg-color-status-error-text-default);
+    }
+    .clear-btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .detail-card { animation: none; }
+    }
 
     .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);
+r([
+  s({ type: String })
+], a.prototype, "status", 2);
+r([
+  s({ type: Number })
+], a.prototype, "hitRate", 2);
+r([
+  s({ type: String })
+], a.prototype, "latencySaved", 2);
+r([
+  s({ type: String })
+], a.prototype, "cacheAge", 2);
+r([
+  s({ type: Boolean })
+], a.prototype, "showDetails", 2);
+a = r([
+  h("ai-cache-indicator")
+], a);
 export {
-  t as AiCacheIndicator
+  a as AiCacheIndicator
 };
 //# sourceMappingURL=ai-cache-indicator.js.map

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

@@ -1 +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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"}
+{"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 indicator with optional expanded detail card.\n *\n * @example\n * ```html\n * <ai-cache-indicator status=\"hit\" hitRate=\"87\" latencySaved=\"240ms\" cacheAge=\"2m ago\"></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-brand-ai-accent=#dfff61] - Accent for hit rate bar\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.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      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-4) 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      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .pill:hover {\n      border-color: var(--cg-color-surface-cards-border);\n    }\n    .pill:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\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-ai-cached-text); }\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    .status-text {\n      font-weight: var(--cg-font-weight-semibold);\n      text-transform: capitalize;\n    }\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-200);\n      padding: var(--cg-spacing-16);\n      color: var(--cg-color-surface-base-text);\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n      min-width: var(--cg-spacing-256);\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    }\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    }\n\n    /* ── Hit rate bar ── */\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-6);\n    }\n\n    .rate-bar-fill {\n      height: 100%;\n      background: var(--cg-color-ai-cached-text);\n      border-radius: var(--cg-border-radius-50);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\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    }\n\n    .clear-btn {\n      width: 100%;\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);\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),\n                  color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .clear-btn:hover {\n      border-color: var(--cg-color-status-error-text-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n    .clear-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .detail-card { animation: none; }\n    }\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 }) hitRate = 0;\n  @property({ type: String }) latencySaved = '';\n  @property({ type: String }) cacheAge = '';\n  @property({ type: Boolean }) showDetails = false;\n\n  private _toggleDetails() {\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() {\n    this.dispatchEvent(new CustomEvent('ai-cache-clear', {\n      bubbles: true, composed: true,\n    }));\n  }\n\n  override render() {\n    return html`\n      <div class=\"wrapper\">\n        <button\n          class=\"pill\"\n          @click=${this._toggleDetails}\n          aria-expanded=${this.showDetails}\n          aria-label=\"Cache status: ${this.status}\"\n        >\n          <span class=\"dot ${this.status}\"></span>\n          <span class=\"status-text\">${this.status}</span>\n          ${this.latencySaved && this.status === 'hit' ? html`<span>${this.latencySaved}</span>` : nothing}\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 class=\"rate-bar-track\" role=\"progressbar\" aria-valuenow=${this.hitRate} aria-valuemin=\"0\" aria-valuemax=\"100\">\n              <div class=\"rate-bar-fill\" style=\"width:${Math.min(100, Math.max(0, this.hitRate))}%\"></div>\n            </div>\n\n            ${this.latencySaved ? html`\n              <div class=\"detail-row\" style=\"margin-top:var(--cg-spacing-8);\">\n                <span class=\"detail-label\">Latency Saved</span>\n                <span class=\"detail-value\" style=\"color:var(--cg-color-status-success-text-default)\">${this.latencySaved}</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            <div class=\"divider\"></div>\n            <button class=\"clear-btn\" @click=${this._onClear} aria-label=\"Clear cache\">Clear Cache</button>\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","html","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-capture-flow/ai-capture-flow.js

@@ -1,13 +1,13 @@
-import { css as p, LitElement as u, nothing as g, html as t } from "lit";
-import { property as n, state as v, customElement as f } from "lit/decorators.js";
-import { h as b, r as h, f as m } from "../../chunks/premium.css-9I4kHrsl.js";
+import { css as p, LitElement as v, nothing as g, html as t } from "lit";
+import { property as n, state as u, customElement as f } from "lit/decorators.js";
+import { h, r as b, f as m } from "../../chunks/premium.css-DHekUEUt.js";
 var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (r, e, s, a) => {
   for (var o = a > 1 ? void 0 : a ? y(e, s) : e, d = r.length - 1, l; d >= 0; d--)
     (l = r[d]) && (o = (a ? l(e, s, o) : l(o)) || o);
   return a && o && w(e, s, o), o;
 };
-const x = ["upload", "preview", "processing", "complete"];
-let i = class extends u {
+const _ = ["upload", "preview", "processing", "complete"];
+let i = class extends v {
   constructor() {
     super(...arguments), this.step = "upload", this.accept = ".pdf,.jpg,.png", this.previewUrl = "", this.result = "", this.progress = 0, this.heading = "Capture", this._dragOver = !1;
   }
@@ -33,7 +33,7 @@ let i = class extends u {
     this.shadowRoot?.querySelector("#file-input")?.click();
   }
   _stepIndex() {
-    return this.step === "error" ? -1 : x.indexOf(this.step);
+    return this.step === "error" ? -1 : _.indexOf(this.step);
   }
   _renderSteps() {
     const r = this._stepIndex();
@@ -127,9 +127,9 @@ let i = class extends u {
     `;
   }
 };
-i.styles = [b, h, m, p`
+i.styles = [h, b, m, p`
     :host {
-      animation: fadeSlideIn 200ms var(--cg-transition-easing-ease-out) both;
+      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
     }
 
     .card {
@@ -180,7 +180,7 @@ i.styles = [b, h, m, p`
     }
     .step-line {
       flex: 1;
-      height: 2px;
+      height: var(--cg-spacing-2);
       background: var(--cg-color-surface-container-background);
       transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default);
     }
@@ -188,7 +188,7 @@ i.styles = [b, h, m, p`
 
     /* ── Upload zone ── */
     .upload-zone {
-      border: 2px dashed var(--cg-color-surface-cards-border);
+      border: var(--cg-border-width-100) dashed var(--cg-color-surface-cards-border);
       border-radius: var(--cg-border-radius-100);
       padding: var(--cg-spacing-24) var(--cg-spacing-16);
       text-align: center;
@@ -200,14 +200,14 @@ i.styles = [b, h, m, p`
       background: var(--cg-overlay-accent-subtle);
     }
     .upload-zone:focus-visible {
-      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);
       outline-offset: var(--cg-outline-offset-default);
     }
     .upload-icon { font-size: var(--cg-font-size-3xl); margin-bottom: var(--cg-spacing-8); }
     .upload-text {
       font-size: var(--cg-font-size-sm);
       color: var(--cg-color-input-text-placeholder);
-      line-height: 1.5;
+      line-height: var(--cg-line-height-normal);
     }
     .upload-hint {
       font-size: var(--cg-font-size-xs);
@@ -220,7 +220,7 @@ i.styles = [b, h, m, p`
     .preview { text-align: center; }
     .preview-img {
       max-width: 100%;
-      max-height: var(240px);
+      max-height: var(--cg-spacing-256);
       border-radius: var(--cg-border-radius-100);
       border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
       margin-bottom: var(--cg-spacing-16);
@@ -238,14 +238,14 @@ i.styles = [b, h, m, p`
       width: 100%;
       height: var(--cg-spacing-6);
       background: var(--cg-color-surface-container-background);
-      border-radius: var(--cg-border-radius-25);
+      border-radius: var(--cg-border-radius-50);
       overflow: hidden;
       margin-bottom: var(--cg-spacing-8);
     }
     .progress-fill {
       height: 100%;
       background: var(--cg-color-action-primary-background-default);
-      border-radius: var(--cg-border-radius-25);
+      border-radius: var(--cg-border-radius-50);
       transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
     }
     .progress-pct {
@@ -259,19 +259,19 @@ i.styles = [b, h, m, p`
     .result-icon {
       font-size: var(--cg-font-size-2xl);
       margin-bottom: var(--cg-spacing-8);
-      color: var(--cg-color-status-success-text-default);
+      color: var(--cg-color-ai-complete-text);
     }
     .result-text {
       font-size: var(--cg-font-size-sm);
       color: var(--cg-color-surface-base-text);
-      line-height: 1.5;
+      line-height: var(--cg-line-height-normal);
       margin-bottom: var(--cg-spacing-16);
       white-space: pre-wrap;
     }
 
     /* ── Error ── */
-    .error-icon { color: var(--cg-color-status-error-text-default); }
-    .error-text { color: var(--cg-color-status-error-text-default); }
+    .error-icon { color: var(--cg-color-ai-error-text); }
+    .error-text { color: var(--cg-color-ai-error-text); }
 
     /* ── Buttons ── */
     .btn-row {
@@ -291,7 +291,7 @@ i.styles = [b, h, m, p`
       transition: filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
     .btn-row button:focus-visible {
-      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);
       outline-offset: var(--cg-outline-offset-default);
     }
     .btn-primary {
@@ -325,7 +325,7 @@ c([
   n({ type: String })
 ], i.prototype, "heading", 2);
 c([
-  v()
+  u()
 ], i.prototype, "_dragOver", 2);
 i = c([
   f("ai-capture-flow")