@cognivo/components 0.8.0

package/dist/components/ai-usage-meter/ai-usage-meter.js

@@ -0,0 +1,286 @@
+import { css as _, LitElement as w, html as g, nothing as v } from "lit";
+import { property as d, state as p, customElement as x } from "lit/decorators.js";
+import { a as b, r as y, f as $ } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-card/cg-card.js";
+import "../cg-text/cg-text.js";
+import "../cg-button/cg-button.js";
+var P = Object.defineProperty, z = Object.getOwnPropertyDescriptor, o = (t, i, r, a) => {
+  for (var e = a > 1 ? void 0 : a ? z(i, r) : i, n = t.length - 1, c; n >= 0; n--)
+    (c = t[n]) && (e = (a ? c(i, r, e) : c(e)) || e);
+  return a && e && P(i, r, e), e;
+};
+let s = class extends w {
+  constructor() {
+    super(...arguments), this.used = 0, this.limit = 100, this.label = "Usage", this.unit = "requests", this.resetDate = "", this.size = "default", this._animatedPct = 0, this._animatedUsed = 0, this._resetText = "", this._announcement = "", this._lastTier = null, this._animFrame = null, this._countdownInterval = null;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._startCountUp(), this._updateResetText();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._animFrame && cancelAnimationFrame(this._animFrame), this._countdownInterval && clearInterval(this._countdownInterval);
+  }
+  updated(t) {
+    (t.has("used") || t.has("limit")) && (this._startCountUp(), this._maybeAnnounceThreshold()), t.has("resetDate") && this._updateResetText();
+  }
+  _startCountUp() {
+    this._animFrame && cancelAnimationFrame(this._animFrame);
+    const t = this._targetPct(), i = this.used;
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) {
+      this._animatedPct = t, this._animatedUsed = i;
+      return;
+    }
+    const a = 700, e = this._animatedPct, n = this._animatedUsed, c = performance.now(), u = (l) => 1 - Math.pow(1 - l, 3), h = (l) => {
+      const m = Math.min(1, (l - c) / a), f = u(m);
+      this._animatedPct = e + (t - e) * f, this._animatedUsed = Math.round(n + (i - n) * f), m < 1 && (this._animFrame = requestAnimationFrame(h));
+    };
+    this._animFrame = requestAnimationFrame(h);
+  }
+  _targetPct() {
+    return this.limit > 0 ? Math.min(100, this.used / this.limit * 100) : 0;
+  }
+  _tier(t) {
+    return t >= 90 ? "danger" : t >= 75 ? "warning" : "normal";
+  }
+  _maybeAnnounceThreshold() {
+    const t = this._tier(this._targetPct());
+    if (this._lastTier && t !== this._lastTier) {
+      const i = {
+        normal: `${this.label} usage back below 75%.`,
+        warning: `${this.label} usage above 75%.`,
+        danger: `${this.label} usage above 90% — approaching limit.`
+      };
+      this._announcement = i[t], this.dispatchEvent(new CustomEvent("ai-usage-threshold", {
+        detail: { tier: t },
+        bubbles: !0,
+        composed: !0
+      }));
+    }
+    this._lastTier = t;
+  }
+  _updateResetText() {
+    if (this._countdownInterval && (clearInterval(this._countdownInterval), this._countdownInterval = null), !this.resetDate) {
+      this._resetText = "";
+      return;
+    }
+    const t = Date.parse(this.resetDate);
+    if (Number.isNaN(t)) {
+      this._resetText = `Resets ${this.resetDate}`;
+      return;
+    }
+    const i = () => {
+      const r = t - Date.now();
+      if (r <= 0) {
+        this._resetText = "Resetting…";
+        return;
+      }
+      const a = 1440 * 60 * 1e3;
+      if (r >= a)
+        this._resetText = `Resets ${new Date(t).toLocaleDateString(void 0, { month: "short", day: "numeric" })}`;
+      else {
+        const e = Math.floor(r / 36e5), n = Math.floor(r % 36e5 / 6e4);
+        this._resetText = e > 0 ? `Resets in ${e}h ${n}m` : `Resets in ${n}m`;
+      }
+    };
+    i(), t - Date.now() < 1440 * 60 * 1e3 && (this._countdownInterval = window.setInterval(i, 3e4));
+  }
+  _emit(t) {
+    this.dispatchEvent(new CustomEvent(t, { bubbles: !0, composed: !0 }));
+  }
+  render() {
+    const t = this._targetPct(), i = Math.round(this._animatedPct), r = this._tier(t), a = 42, e = 2 * Math.PI * a, n = e - this._animatedPct / 100 * e, c = `${this.used.toLocaleString()} of ${this.limit.toLocaleString()} ${this.unit}, ${Math.round(t)} percent`, u = t >= 80, h = g`
+      <div class="ring-wrapper">
+        <svg class="ring" viewBox="0 0 100 100" aria-hidden="true">
+          <circle class="ring-bg" cx="50" cy="50" r=${a} />
+          <circle
+            class="ring-fill ${r}"
+            cx="50" cy="50" r=${a}
+            stroke-dasharray=${e}
+            stroke-dashoffset=${n}
+          />
+        </svg>
+        <div class="ring-text">
+          <cg-text size="${this.size === "lg" ? "2xl" : "xl"}" weight="bold">${i}%</cg-text>
+          <cg-text size="xs" color="muted" style="text-transform:uppercase;letter-spacing:var(--cg-letter-spacing-wide);">used</cg-text>
+        </div>
+      </div>
+    `, l = g`
+      <div class="sr-only" aria-live="polite" aria-atomic="true">${this._announcement}</div>
+      <div class="meter"
+        role="progressbar"
+        aria-label="${this.label}"
+        aria-valuemin="0"
+        aria-valuemax=${this.limit}
+        aria-valuenow=${this.used}
+        aria-valuetext=${c}
+      >
+        ${h}
+        <div class="info">
+          <cg-text size="sm" weight="semibold">${this.label}</cg-text>
+          <cg-text size="xs" color="muted">${this._animatedUsed.toLocaleString()} / ${this.limit.toLocaleString()} ${this.unit}</cg-text>
+          ${this._resetText ? g`<cg-text size="xs" color="muted">${this._resetText}</cg-text>` : v}
+        </div>
+        ${u ? g`
+          <div class="cta-wrap">
+            <slot name="cta">
+              <cg-button variant="primary" size="sm" @click=${() => this._emit("ai-usage-upgrade")}>
+                Upgrade Plan
+              </cg-button>
+            </slot>
+          </div>
+        ` : v}
+      </div>
+    `;
+    return this.size === "compact" ? g`${l}` : g`
+      <cg-card>
+        ${l}
+      </cg-card>
+    `;
+  }
+};
+s.styles = [b, y, $, _`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      display: inline-block;
+    }
+    :host([hidden]) { display: none; }
+
+    /* ── Default layout: ring centered, info + CTA below ── */
+    .meter {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      min-width: var(--cg-spacing-192);
+    }
+
+    .ring-wrapper {
+      position: relative;
+      width: var(--cg-spacing-96);
+      height: var(--cg-spacing-96);
+    }
+    svg.ring {
+      transform: rotate(-90deg);
+      width: 100%;
+      height: 100%;
+      overflow: visible; /* allow danger pulse glow to extend past viewBox */
+    }
+    .ring-bg {
+      fill: none;
+      stroke: var(--cg-color-surface-cards-border);
+      stroke-width: 8;
+    }
+    .ring-fill {
+      fill: none;
+      stroke-width: 8;
+      stroke-linecap: round;
+      transition:
+        stroke-dashoffset var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out),
+        stroke var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+    .ring-fill.normal  { stroke: var(--cg-color-action-primary-background-default); }
+    .ring-fill.warning { stroke: var(--cg-color-status-warning-text-default); }
+    .ring-fill.danger  { stroke: var(--cg-color-status-error-text-default); }
+
+    /* Pulse on danger tier (>90% usage) — subtle attention draw */
+    @keyframes usage-pulse {
+      0%, 100% { filter: drop-shadow(0 0 0 transparent); opacity: 1; }
+      50%      { filter: drop-shadow(0 0 var(--cg-spacing-8) var(--cg-color-status-error-text-default)); opacity: 0.85; }
+    }
+    .ring-fill.danger {
+      animation: usage-pulse 2s var(--cg-transition-easing-ease-out) infinite;
+    }
+
+    .ring-text {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--cg-spacing-2);
+    }
+
+    .info {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      gap: var(--cg-spacing-4);
+    }
+
+    .cta-wrap { width: 100%; display: flex; justify-content: center; }
+
+    /* ── Compact variant: 24px chip for nav-bars / IDE status bars ── */
+    :host([size="compact"]) .meter {
+      flex-direction: row;
+      gap: var(--cg-spacing-8);
+      min-width: 0;
+      align-items: center;
+    }
+    :host([size="compact"]) .ring-wrapper {
+      width: var(--cg-spacing-24);
+      height: var(--cg-spacing-24);
+    }
+    :host([size="compact"]) .ring-bg,
+    :host([size="compact"]) .ring-fill { stroke-width: 3; }
+    :host([size="compact"]) .ring-text,
+    :host([size="compact"]) .info,
+    :host([size="compact"]) .cta-wrap { display: none; }
+
+    /* ── Large variant: 144px hero ring for billing/quota pages ── */
+    :host([size="lg"]) .ring-wrapper {
+      width: var(--cg-spacing-128);
+      height: var(--cg-spacing-128);
+    }
+    :host([size="lg"]) .ring-bg,
+    :host([size="lg"]) .ring-fill { stroke-width: 6; }
+    :host([size="lg"]) .meter { min-width: var(--cg-spacing-256); gap: var(--cg-spacing-16); }
+
+    /* sr-only live region */
+    .sr-only {
+      position: absolute;
+      width: 1px; height: 1px;
+      padding: 0; margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+  `];
+o([
+  d({ type: Number })
+], s.prototype, "used", 2);
+o([
+  d({ type: Number })
+], s.prototype, "limit", 2);
+o([
+  d({ type: String })
+], s.prototype, "label", 2);
+o([
+  d({ type: String })
+], s.prototype, "unit", 2);
+o([
+  d({ type: String, attribute: "reset-date" })
+], s.prototype, "resetDate", 2);
+o([
+  d({ reflect: !0 })
+], s.prototype, "size", 2);
+o([
+  p()
+], s.prototype, "_animatedPct", 2);
+o([
+  p()
+], s.prototype, "_animatedUsed", 2);
+o([
+  p()
+], s.prototype, "_resetText", 2);
+o([
+  p()
+], s.prototype, "_announcement", 2);
+s = o([
+  x("ai-usage-meter")
+], s);
+export {
+  s as AiUsageMeter
+};
+//# sourceMappingURL=ai-usage-meter.js.map

package/dist/components/ai-usage-meter/ai-usage-meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-usage-meter.js","sources":["../../../src/components/ai-usage-meter/ai-usage-meter.ts"],"sourcesContent":["/**\n * @element ai-usage-meter\n * Quota / rate-limit ring meter built from design-system primitives (cg-card, cg-text, cg-button).\n * Step color thresholds at 75% (warning) and 90% (danger), animated count-up on mount,\n * relative countdown for sub-24h resets, threshold-crossing aria-live announcements,\n * and a compact 24px chip variant for in-IDE/nav-bar usage indicators.\n *\n * @example\n * ```html\n * <ai-usage-meter used=\"8500\" limit=\"10000\" label=\"API Calls\" unit=\"requests\"\n *   reset-date=\"2026-05-01T00:00:00Z\"></ai-usage-meter>\n * ```\n *\n * @prop {number} used - Current usage count\n * @prop {number} limit - Maximum quota (default 100)\n * @prop {string} label - Metric label (default 'Usage')\n * @prop {string} unit - Unit label (default 'requests')\n * @prop {string} resetDate - ISO date / human string for when quota resets\n * @prop {'default'|'compact'} size - Layout variant\n *\n * @slot cta - Override for the upgrade CTA (rendered only when usage ≥ 80%)\n *\n * @fires ai-usage-upgrade - Upgrade CTA clicked\n * @fires {CustomEvent<{tier: 'normal'|'warning'|'danger'}>} ai-usage-threshold - Crossed a threshold\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBase, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-card/cg-card.js';\nimport '../cg-text/cg-text.js';\nimport '../cg-button/cg-button.js';\n\ntype Tier = 'normal' | 'warning' | 'danger';\n\n@customElement('ai-usage-meter')\nexport class AiUsageMeter extends LitElement {\n  static override styles = [hostBase, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      display: inline-block;\n    }\n    :host([hidden]) { display: none; }\n\n    /* ── Default layout: ring centered, info + CTA below ── */\n    .meter {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      min-width: var(--cg-spacing-192);\n    }\n\n    .ring-wrapper {\n      position: relative;\n      width: var(--cg-spacing-96);\n      height: var(--cg-spacing-96);\n    }\n    svg.ring {\n      transform: rotate(-90deg);\n      width: 100%;\n      height: 100%;\n      overflow: visible; /* allow danger pulse glow to extend past viewBox */\n    }\n    .ring-bg {\n      fill: none;\n      stroke: var(--cg-color-surface-cards-border);\n      stroke-width: 8;\n    }\n    .ring-fill {\n      fill: none;\n      stroke-width: 8;\n      stroke-linecap: round;\n      transition:\n        stroke-dashoffset var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out),\n        stroke var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    .ring-fill.normal  { stroke: var(--cg-color-action-primary-background-default); }\n    .ring-fill.warning { stroke: var(--cg-color-status-warning-text-default); }\n    .ring-fill.danger  { stroke: var(--cg-color-status-error-text-default); }\n\n    /* Pulse on danger tier (>90% usage) — subtle attention draw */\n    @keyframes usage-pulse {\n      0%, 100% { filter: drop-shadow(0 0 0 transparent); opacity: 1; }\n      50%      { filter: drop-shadow(0 0 var(--cg-spacing-8) var(--cg-color-status-error-text-default)); opacity: 0.85; }\n    }\n    .ring-fill.danger {\n      animation: usage-pulse 2s var(--cg-transition-easing-ease-out) infinite;\n    }\n\n    .ring-text {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: var(--cg-spacing-2);\n    }\n\n    .info {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      text-align: center;\n      gap: var(--cg-spacing-4);\n    }\n\n    .cta-wrap { width: 100%; display: flex; justify-content: center; }\n\n    /* ── Compact variant: 24px chip for nav-bars / IDE status bars ── */\n    :host([size=\"compact\"]) .meter {\n      flex-direction: row;\n      gap: var(--cg-spacing-8);\n      min-width: 0;\n      align-items: center;\n    }\n    :host([size=\"compact\"]) .ring-wrapper {\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n    }\n    :host([size=\"compact\"]) .ring-bg,\n    :host([size=\"compact\"]) .ring-fill { stroke-width: 3; }\n    :host([size=\"compact\"]) .ring-text,\n    :host([size=\"compact\"]) .info,\n    :host([size=\"compact\"]) .cta-wrap { display: none; }\n\n    /* ── Large variant: 144px hero ring for billing/quota pages ── */\n    :host([size=\"lg\"]) .ring-wrapper {\n      width: var(--cg-spacing-128);\n      height: var(--cg-spacing-128);\n    }\n    :host([size=\"lg\"]) .ring-bg,\n    :host([size=\"lg\"]) .ring-fill { stroke-width: 6; }\n    :host([size=\"lg\"]) .meter { min-width: var(--cg-spacing-256); gap: var(--cg-spacing-16); }\n\n    /* sr-only live region */\n    .sr-only {\n      position: absolute;\n      width: 1px; height: 1px;\n      padding: 0; margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n  `];\n\n  @property({ type: Number }) used = 0;\n  @property({ type: Number }) limit = 100;\n  @property({ type: String }) label = 'Usage';\n  @property({ type: String }) unit = 'requests';\n  @property({ type: String, attribute: 'reset-date' }) resetDate = '';\n  @property({ reflect: true }) size: 'default' | 'compact' | 'lg' = 'default';\n\n  @state() private _animatedPct = 0;\n  @state() private _animatedUsed = 0;\n  @state() private _resetText = '';\n  @state() private _announcement = '';\n\n  private _lastTier: Tier | null = null;\n  private _animFrame: number | null = null;\n  private _countdownInterval: number | null = null;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._startCountUp();\n    this._updateResetText();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._animFrame) cancelAnimationFrame(this._animFrame);\n    if (this._countdownInterval) clearInterval(this._countdownInterval);\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('used') || changed.has('limit')) {\n      this._startCountUp();\n      this._maybeAnnounceThreshold();\n    }\n    if (changed.has('resetDate')) {\n      this._updateResetText();\n    }\n  }\n\n  private _startCountUp() {\n    if (this._animFrame) cancelAnimationFrame(this._animFrame);\n    const targetPct = this._targetPct();\n    const targetUsed = this.used;\n    const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;\n    if (reduce) {\n      this._animatedPct = targetPct;\n      this._animatedUsed = targetUsed;\n      return;\n    }\n    const duration = 700;\n    const startPct = this._animatedPct;\n    const startUsed = this._animatedUsed;\n    const start = performance.now();\n    const ease = (t: number) => 1 - Math.pow(1 - t, 3);\n    const tick = (now: number) => {\n      const t = Math.min(1, (now - start) / duration);\n      const k = ease(t);\n      this._animatedPct = startPct + (targetPct - startPct) * k;\n      this._animatedUsed = Math.round(startUsed + (targetUsed - startUsed) * k);\n      if (t < 1) this._animFrame = requestAnimationFrame(tick);\n    };\n    this._animFrame = requestAnimationFrame(tick);\n  }\n\n  private _targetPct(): number {\n    return this.limit > 0 ? Math.min(100, (this.used / this.limit) * 100) : 0;\n  }\n\n  private _tier(pct: number): Tier {\n    if (pct >= 90) return 'danger';\n    if (pct >= 75) return 'warning';\n    return 'normal';\n  }\n\n  private _maybeAnnounceThreshold() {\n    const tier = this._tier(this._targetPct());\n    if (this._lastTier && tier !== this._lastTier) {\n      const msg: Record<Tier, string> = {\n        normal: `${this.label} usage back below 75%.`,\n        warning: `${this.label} usage above 75%.`,\n        danger: `${this.label} usage above 90% — approaching limit.`,\n      };\n      this._announcement = msg[tier];\n      this.dispatchEvent(new CustomEvent('ai-usage-threshold', {\n        detail: { tier },\n        bubbles: true, composed: true,\n      }));\n    }\n    this._lastTier = tier;\n  }\n\n  private _updateResetText() {\n    if (this._countdownInterval) {\n      clearInterval(this._countdownInterval);\n      this._countdownInterval = null;\n    }\n    if (!this.resetDate) {\n      this._resetText = '';\n      return;\n    }\n    const ts = Date.parse(this.resetDate);\n    if (Number.isNaN(ts)) {\n      this._resetText = `Resets ${this.resetDate}`;\n      return;\n    }\n    const tick = () => {\n      const diffMs = ts - Date.now();\n      if (diffMs <= 0) {\n        this._resetText = 'Resetting…';\n        return;\n      }\n      const oneDay = 24 * 60 * 60 * 1000;\n      if (diffMs >= oneDay) {\n        this._resetText = `Resets ${new Date(ts).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}`;\n      } else {\n        const h = Math.floor(diffMs / 3600000);\n        const m = Math.floor((diffMs % 3600000) / 60000);\n        this._resetText = h > 0 ? `Resets in ${h}h ${m}m` : `Resets in ${m}m`;\n      }\n    };\n    tick();\n    if (ts - Date.now() < 24 * 60 * 60 * 1000) {\n      this._countdownInterval = window.setInterval(tick, 30000);\n    }\n  }\n\n  private _emit(name: string) {\n    this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true }));\n  }\n\n  override render() {\n    const targetPct = this._targetPct();\n    const displayPct = Math.round(this._animatedPct);\n    const tier = this._tier(targetPct);\n    const radius = 42;\n    const circumference = 2 * Math.PI * radius;\n    const offset = circumference - (this._animatedPct / 100) * circumference;\n    const valueText = `${this.used.toLocaleString()} of ${this.limit.toLocaleString()} ${this.unit}, ${Math.round(targetPct)} percent`;\n    const showCta = targetPct >= 80;\n\n    const ring = html`\n      <div class=\"ring-wrapper\">\n        <svg class=\"ring\" viewBox=\"0 0 100 100\" aria-hidden=\"true\">\n          <circle class=\"ring-bg\" cx=\"50\" cy=\"50\" r=${radius} />\n          <circle\n            class=\"ring-fill ${tier}\"\n            cx=\"50\" cy=\"50\" r=${radius}\n            stroke-dasharray=${circumference}\n            stroke-dashoffset=${offset}\n          />\n        </svg>\n        <div class=\"ring-text\">\n          <cg-text size=\"${this.size === 'lg' ? '2xl' : 'xl'}\" weight=\"bold\">${displayPct}%</cg-text>\n          <cg-text size=\"xs\" color=\"muted\" style=\"text-transform:uppercase;letter-spacing:var(--cg-letter-spacing-wide);\">used</cg-text>\n        </div>\n      </div>\n    `;\n\n    const meterBody = html`\n      <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">${this._announcement}</div>\n      <div class=\"meter\"\n        role=\"progressbar\"\n        aria-label=\"${this.label}\"\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.limit}\n        aria-valuenow=${this.used}\n        aria-valuetext=${valueText}\n      >\n        ${ring}\n        <div class=\"info\">\n          <cg-text size=\"sm\" weight=\"semibold\">${this.label}</cg-text>\n          <cg-text size=\"xs\" color=\"muted\">${this._animatedUsed.toLocaleString()} / ${this.limit.toLocaleString()} ${this.unit}</cg-text>\n          ${this._resetText ? html`<cg-text size=\"xs\" color=\"muted\">${this._resetText}</cg-text>` : nothing}\n        </div>\n        ${showCta ? html`\n          <div class=\"cta-wrap\">\n            <slot name=\"cta\">\n              <cg-button variant=\"primary\" size=\"sm\" @click=${() => this._emit('ai-usage-upgrade')}>\n                Upgrade Plan\n              </cg-button>\n            </slot>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n\n    if (this.size === 'compact') {\n      return html`${meterBody}`;\n    }\n\n    // Use cg-card with design-system defaults (variant=\"elevated\", padding=\"md\",\n    // rounded=\"lg\" all resolve to the cg-card defaults). This gives the standard\n    // surface-cards-background + elevation-1 shadow + radius-200 from the system.\n    return html`\n      <cg-card>\n        ${meterBody}\n      </cg-card>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-usage-meter': AiUsageMeter;\n  }\n}\n"],"names":["AiUsageMeter","LitElement","changed","targetPct","targetUsed","duration","startPct","startUsed","start","ease","t","tick","now","k","pct","tier","msg","ts","diffMs","oneDay","h","m","name","displayPct","radius","circumference","offset","valueText","showCta","ring","html","meterBody","nothing","hostBase","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-validation-checklist/ai-validation-checklist.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+export type Severity = 'critical' | 'high' | 'medium' | 'low' | 'info';
+export interface ValidationCheck {
+    id: string;
+    label: string;
+    description?: string;
+    status: 'pending' | 'running' | 'pass' | 'fail' | 'warning' | 'skipped';
+    /** Optional severity classification — drives the colored side bar + badge. */
+    severity?: Severity;
+    /** Optional 0-100 score; renders as X% next to the status icon. */
+    score?: number;
+}
+export declare class AiValidationChecklist extends LitElement {
+    static styles: import('lit').CSSResult[];
+    checks: ValidationCheck[];
+    title: string;
+    loading: boolean;
+    /** Last-emitted "all settled" signature, used to avoid duplicate complete events. */
+    private _lastCompleteSig;
+    updated(changed: Map<string, unknown>): void;
+    /** All checks settled = no running and no pending. Fires `ai-validation-complete`
+        once per settle (deduped via signature). */
+    private _maybeFireComplete;
+    private get _stats();
+    private _onRun;
+    private _onItemClick;
+    private _statusIcon;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-validation-checklist': AiValidationChecklist;
+    }
+}
+//# sourceMappingURL=ai-validation-checklist.d.ts.map

package/dist/components/ai-validation-checklist/ai-validation-checklist.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-validation-checklist.d.ts","sourceRoot":"","sources":["../../../src/components/ai-validation-checklist/ai-validation-checklist.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AAErC,MAAM,MAAM,QAAQ,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,MAAM,CAAC;AAEvE,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IACxE,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAUD,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,4BAyLnB;IAE6B,MAAM,EAAE,eAAe,EAAE,CAAM;IAC1B,KAAK,SAAgB;IAC7B,OAAO,UAAS;IAE7C,qFAAqF;IAC5E,OAAO,CAAC,gBAAgB,CAAM;IAE9B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAIrD;mDAC+C;IAC/C,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,KAAK,MAAM,GASjB;IAID,OAAO,CAAC,MAAM;IAOd,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,WAAW;IAiBV,MAAM;CAgFhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,yBAAyB,EAAE,qBAAqB,CAAC;KAClD;CACF"}