@cognivo/components 0.8.0 → 0.8.2

package/dist/components/ai-confidence-slider/ai-confidence-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-confidence-slider.js","sources":["../../../src/components/ai-confidence-slider/ai-confidence-slider.ts"],"sourcesContent":["/**\n * @element ai-confidence-slider\n * Gradient range slider for setting confidence thresholds with presets and distribution histogram.\n *\n * @example\n * ```html\n * <ai-confidence-slider\n *   value=\"70\"\n *   resultCount=\"42\" totalCount=\"100\"\n *   .distribution=${[2,5,8,12,20,30,15,6,1,1]}\n * ></ai-confidence-slider>\n * ```\n *\n * @fires {CustomEvent<{value: number}>} ai-confidence-change - Slider value changed or preset clicked\n *\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Slider thumb border, value badge highlight, active preset\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-confidence-slider')\nexport class AiConfidenceSlider extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n\n    .container {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      padding: var(--cg-spacing-20) var(--cg-spacing-24);\n    }\n\n    .header {\n      display: flex; justify-content: space-between; align-items: center;\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .label {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-bold); color: var(--cg-color-input-text-placeholder);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .count {\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-base-text);\n    }\n    .count-highlight {\n      font-weight: var(--cg-font-weight-bold); color: var(--cg-color-surface-base-text);\n    }\n\n    /* Slider */\n    .slider-row { position: relative; margin-bottom: var(--cg-spacing-8); }\n\n    input[type=\"range\"] {\n      -webkit-appearance: none;\n      width: 100%;\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-50);\n      background: linear-gradient(90deg, var(--cg-color-status-error-text-default) 0%, var(--cg-color-status-warning-text-default) 50%, var(--cg-color-status-success-text-default) 100%);\n      outline: none;\n    }\n    input[type=\"range\"]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-base-text);\n      border: var(--cg-spacing-2) solid var(--cg-color-surface-cards-background);\n      cursor: pointer;\n    }\n    input[type=\"range\"]:focus-visible::-webkit-slider-thumb {\n      outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    /* Firefox */\n    input[type=\"range\"]::-moz-range-thumb {\n      width: var(--cg-spacing-16); height: var(--cg-spacing-16); border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-base-text);\n      border: var(--cg-spacing-2) solid var(--cg-color-surface-cards-background);\n      cursor: pointer;\n    }\n    input[type=\"range\"]:focus-visible::-moz-range-thumb {\n      outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    input[type=\"range\"]::-moz-range-track {\n      height: var(--cg-spacing-6); border-radius: var(--cg-border-radius-50);\n      background: linear-gradient(90deg, var(--cg-color-status-error-text-default) 0%, var(--cg-color-status-warning-text-default) 50%, var(--cg-color-status-success-text-default) 100%);\n    }\n\n    .value-badge {\n      position: absolute;\n      top: calc(-1 * var(--cg-spacing-24));\n      left: var(--thumb-pos, 50%);\n      transform: translateX(-50%);\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-bold);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8); border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-surface-cards-background);\n      color: var(--cg-color-surface-base-text);\n      pointer-events: none;\n      z-index: 1;\n    }\n\n    /* Presets */\n    .presets {\n      display: flex; gap: var(--cg-spacing-6); margin-bottom: var(--cg-spacing-8);\n    }\n    .preset-btn {\n      flex: 1; padding: var(--cg-spacing-4) 0; border-radius: var(--cg-component-card-radius);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: none; color: var(--cg-color-input-text-placeholder);\n      font: inherit; font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer; transition: opacity var(--cg-transition-duration-fast); text-align: center;\n    }\n    .preset-btn:hover { border-color: var(--cg-color-input-border-hover); color: var(--cg-color-surface-base-text); }\n    .preset-btn:focus-visible {\n      outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .preset-btn.active { border-color: var(--cg-color-surface-base-text); color: var(--cg-color-surface-base-text); background: var(--cg-overlay-accent-subtle); }\n\n    /* Distribution */\n    .distribution {\n      display: flex; align-items: flex-end; gap: var(--cg-spacing-1); height: var(--cg-spacing-32);\n      padding-top: var(--cg-spacing-8); border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .dist-bar {\n      flex: 1; border-radius: var(--cg-spacing-2) var(--cg-spacing-2) 0 0; min-height: var(--cg-spacing-2);\n      transition: opacity var(--cg-transition-duration-fast);\n    }\n    .dist-bar.below { opacity: 0.2; }\n  `];\n  @property({ type: Number }) value: number = 50;\n  @property({ type: Number }) min: number = 0;\n  @property({ type: Number }) max: number = 100;\n  @property({ type: Number }) resultCount: number = 0;\n  @property({ type: Number }) totalCount: number = 0;\n  @property({ type: Array }) distribution: number[] = [];\n\n  private _presets = [\n    { label: 'Low (30%)', value: 30 },\n    { label: 'Medium (60%)', value: 60 },\n    { label: 'High (80%)', value: 80 },\n  ];\n\n  private _handleChange(e: Event) {\n    this.value = Number((e.target as HTMLInputElement).value);\n    this.dispatchEvent(new CustomEvent('ai-confidence-change', {\n      bubbles: true, composed: true,\n      detail: { value: this.value },\n    }));\n  }\n\n  private _setPreset(val: number) {\n    this.value = val;\n    this.dispatchEvent(new CustomEvent('ai-confidence-change', {\n      bubbles: true, composed: true,\n      detail: { value: this.value },\n    }));\n  }\n\n  private _getBarColor(index: number, total: number): string {\n    const pct = (index / total) * 100;\n    if (pct < 30) return 'var(--cg-color-status-error-text-default)';\n    if (pct < 60) return 'var(--cg-color-status-warning-text-default)';\n    return 'var(--cg-color-status-success-text-default)';\n  }\n\n  override render() {\n    const thumbPos = ((this.value - this.min) / (this.max - this.min)) * 100;\n\n    return html`\n      <div class=\"container\" role=\"group\" aria-label=\"Confidence threshold\">\n        <div class=\"header\">\n          <span class=\"label\">Confidence Threshold</span>\n          ${this.totalCount > 0 ? html`\n            <span class=\"count\">\n              Showing <span class=\"count-highlight\">${this.resultCount}</span> of ${this.totalCount}\n            </span>\n          ` : nothing}\n        </div>\n\n        <div class=\"slider-row\" style=\"--thumb-pos: ${thumbPos}%;\">\n          <div class=\"value-badge\">${this.value}%</div>\n          <input type=\"range\" .value=${String(this.value)}\n            min=\"${this.min}\" max=\"${this.max}\"\n            @input=${this._handleChange}\n            aria-label=\"Minimum confidence: ${this.value}%\"\n            aria-valuemin=\"${this.min}\" aria-valuemax=\"${this.max}\" aria-valuenow=\"${this.value}\" />\n        </div>\n\n        <div class=\"presets\">\n          ${this._presets.map(p => html`\n            <button class=\"preset-btn ${this.value === p.value ? 'active' : ''}\"\n              aria-label=${`Set confidence to ${p.value}%`}\n              aria-pressed=${this.value === p.value ? 'true' : 'false'}\n              @click=${() => this._setPreset(p.value)}>${p.label}</button>\n          `)}\n        </div>\n\n        ${this.distribution.length > 0 ? (() => {\n          const maxVal = Math.max(...this.distribution, 1);\n          return html`\n          <div class=\"distribution\" aria-hidden=\"true\">\n            ${this.distribution.map((v, i) => {\n              const h = (v / maxVal) * 32;\n              const pct = (i / this.distribution.length) * 100;\n              const isBelow = pct < this.value;\n              return html`<div class=\"dist-bar ${isBelow ? 'below' : ''}\"\n                style=\"height: ${Math.max(h, 2)}px; background: ${this._getBarColor(i, this.distribution.length)};\"></div>`;\n            })}\n          </div>\n        `;})() : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiConfidenceSlider","LitElement","e","val","index","total","pct","thumbPos","html","nothing","p","maxVal","v","h","isBelow","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-confidence-slider.js","sources":["../../../src/components/ai-confidence-slider/ai-confidence-slider.ts"],"sourcesContent":["/**\n * @element ai-confidence-slider\n * Gradient range slider for setting confidence thresholds with presets and distribution histogram.\n *\n * @example\n * ```html\n * <ai-confidence-slider\n *   value=\"70\"\n *   resultCount=\"42\" totalCount=\"100\"\n *   .distribution=${[2,5,8,12,20,30,15,6,1,1]}\n * ></ai-confidence-slider>\n * ```\n *\n * @fires {CustomEvent<{value: number}>} ai-confidence-change - Slider value changed or preset clicked\n *\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Slider thumb border, value badge highlight, active preset\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-confidence-slider')\nexport class AiConfidenceSlider extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n\n    .container {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      padding: var(--cg-spacing-20) var(--cg-spacing-24);\n    }\n\n    .header {\n      display: flex; justify-content: space-between; align-items: center;\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .label {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-bold); color: var(--cg-color-input-text-placeholder);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .count {\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-base-text);\n    }\n    .count-highlight {\n      font-weight: var(--cg-font-weight-bold); color: var(--cg-color-surface-base-text);\n    }\n\n    /* Slider */\n    .slider-row { position: relative; margin-bottom: var(--cg-spacing-8); }\n\n    input[type=\"range\"] {\n      -webkit-appearance: none;\n      width: 100%;\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-50);\n      background: linear-gradient(90deg, var(--cg-color-status-error-text-default) 0%, var(--cg-color-status-warning-text-default) 50%, var(--cg-color-status-success-text-default) 100%);\n      outline: none;\n    }\n    input[type=\"range\"]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-slider-thumb-background);\n      border: var(--cg-spacing-2) solid var(--cg-color-slider-thumb-border);\n      cursor: pointer;\n    }\n    input[type=\"range\"]:focus-visible::-webkit-slider-thumb {\n      outline: none; box-shadow: 0 0 0 3px var(--cg-color-focus-ring);\n    }\n    /* Firefox */\n    input[type=\"range\"]::-moz-range-thumb {\n      width: var(--cg-spacing-16); height: var(--cg-spacing-16); border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-slider-thumb-background);\n      border: var(--cg-spacing-2) solid var(--cg-color-slider-thumb-border);\n      cursor: pointer;\n    }\n    input[type=\"range\"]:focus-visible::-moz-range-thumb {\n      outline: none; box-shadow: 0 0 0 3px var(--cg-color-focus-ring);\n    }\n    input[type=\"range\"]::-moz-range-track {\n      height: var(--cg-spacing-6); border-radius: var(--cg-border-radius-50);\n      background: linear-gradient(90deg, var(--cg-color-status-error-text-default) 0%, var(--cg-color-status-warning-text-default) 50%, var(--cg-color-status-success-text-default) 100%);\n    }\n\n    .value-badge {\n      position: absolute;\n      top: calc(-1 * var(--cg-spacing-24));\n      left: var(--thumb-pos, 50%);\n      transform: translateX(-50%);\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-bold);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8); border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-surface-cards-background);\n      color: var(--cg-color-surface-base-text);\n      pointer-events: none;\n      z-index: 1;\n    }\n\n    /* Presets */\n    .presets {\n      display: flex; gap: var(--cg-spacing-6); margin-bottom: var(--cg-spacing-8);\n    }\n    .preset-btn {\n      flex: 1; padding: var(--cg-spacing-4) 0; border-radius: var(--cg-component-card-radius);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: none; color: var(--cg-color-input-text-placeholder);\n      font: inherit; font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer; transition: opacity var(--cg-transition-duration-fast); text-align: center;\n    }\n    .preset-btn:hover { border-color: var(--cg-color-input-border-hover); color: var(--cg-color-surface-base-text); }\n    .preset-btn:focus-visible {\n      outline: none; box-shadow: 0 0 0 3px var(--cg-color-focus-ring);\n    }\n    .preset-btn.active { border-color: var(--cg-color-surface-base-text); color: var(--cg-color-surface-base-text); background: var(--cg-overlay-accent-subtle); }\n\n    /* Distribution */\n    .distribution {\n      display: flex; align-items: flex-end; gap: var(--cg-spacing-1); height: var(--cg-spacing-32);\n      padding-top: var(--cg-spacing-8); border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .dist-bar {\n      flex: 1; border-radius: var(--cg-spacing-2) var(--cg-spacing-2) 0 0; min-height: var(--cg-spacing-2);\n      transition: opacity var(--cg-transition-duration-fast);\n    }\n    .dist-bar.below { opacity: 0.2; }\n  `];\n  @property({ type: Number }) value: number = 50;\n  @property({ type: Number }) min: number = 0;\n  @property({ type: Number }) max: number = 100;\n  @property({ type: Number }) resultCount: number = 0;\n  @property({ type: Number }) totalCount: number = 0;\n  @property({ type: Array }) distribution: number[] = [];\n\n  private _presets = [\n    { label: 'Low (30%)', value: 30 },\n    { label: 'Medium (60%)', value: 60 },\n    { label: 'High (80%)', value: 80 },\n  ];\n\n  private _handleChange(e: Event) {\n    this.value = Number((e.target as HTMLInputElement).value);\n    this.dispatchEvent(new CustomEvent('ai-confidence-change', {\n      bubbles: true, composed: true,\n      detail: { value: this.value },\n    }));\n  }\n\n  private _setPreset(val: number) {\n    this.value = val;\n    this.dispatchEvent(new CustomEvent('ai-confidence-change', {\n      bubbles: true, composed: true,\n      detail: { value: this.value },\n    }));\n  }\n\n  private _getBarColor(index: number, total: number): string {\n    const pct = (index / total) * 100;\n    if (pct < 30) return 'var(--cg-color-status-error-text-default)';\n    if (pct < 60) return 'var(--cg-color-status-warning-text-default)';\n    return 'var(--cg-color-status-success-text-default)';\n  }\n\n  override render() {\n    const thumbPos = ((this.value - this.min) / (this.max - this.min)) * 100;\n\n    return html`\n      <div class=\"container\" role=\"group\" aria-label=\"Confidence threshold\">\n        <div class=\"header\">\n          <span class=\"label\">Confidence Threshold</span>\n          ${this.totalCount > 0 ? html`\n            <span class=\"count\">\n              Showing <span class=\"count-highlight\">${this.resultCount}</span> of ${this.totalCount}\n            </span>\n          ` : nothing}\n        </div>\n\n        <div class=\"slider-row\" style=\"--thumb-pos: ${thumbPos}%;\">\n          <div class=\"value-badge\">${this.value}%</div>\n          <input type=\"range\" .value=${String(this.value)}\n            min=\"${this.min}\" max=\"${this.max}\"\n            @input=${this._handleChange}\n            aria-label=\"Minimum confidence: ${this.value}%\"\n            aria-valuemin=\"${this.min}\" aria-valuemax=\"${this.max}\" aria-valuenow=\"${this.value}\" />\n        </div>\n\n        <div class=\"presets\">\n          ${this._presets.map(p => html`\n            <button class=\"preset-btn ${this.value === p.value ? 'active' : ''}\"\n              aria-label=${`Set confidence to ${p.value}%`}\n              aria-pressed=${this.value === p.value ? 'true' : 'false'}\n              @click=${() => this._setPreset(p.value)}>${p.label}</button>\n          `)}\n        </div>\n\n        ${this.distribution.length > 0 ? (() => {\n          const maxVal = Math.max(...this.distribution, 1);\n          return html`\n          <div class=\"distribution\" aria-hidden=\"true\">\n            ${this.distribution.map((v, i) => {\n              const h = (v / maxVal) * 32;\n              const pct = (i / this.distribution.length) * 100;\n              const isBelow = pct < this.value;\n              return html`<div class=\"dist-bar ${isBelow ? 'below' : ''}\"\n                style=\"height: ${Math.max(h, 2)}px; background: ${this._getBarColor(i, this.distribution.length)};\"></div>`;\n            })}\n          </div>\n        `;})() : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiConfidenceSlider","LitElement","val","index","total","pct","thumbPos","html","nothing","p","maxVal","v","h","isBelow","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-consent-manager/ai-consent-manager.js

@@ -1,6 +1,6 @@
 import { css as p, LitElement as h, nothing as g, html as n } from "lit";
 import { property as o, customElement as v } from "lit/decorators.js";
-import { h as u, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as u, r as m } from "../../chunks/premium.css-DHekUEUt.js";
 var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, c = (e, s, r, t) => {
   for (var i = t > 1 ? void 0 : t ? b(s, r) : s, l = e.length - 1, d; l >= 0; l--)
     (d = e[l]) && (i = (t ? d(s, r, i) : d(i)) || i);
@@ -115,7 +115,7 @@ a.styles = [u, m, p`
       display: flex; align-items: center; gap: var(--cg-spacing-6);
     }
     .item-description {
-      font-size: var(--cg-font-size-xs);
+      font-size: var(--cg-font-size-sm);
       color: var(--cg-color-surface-container-outlined);
       line-height: var(--cg-line-height-snug);
       margin-top: var(--cg-spacing-2);

package/dist/components/ai-consent-manager/ai-consent-manager.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-consent-manager.js","sources":["../../../src/components/ai-consent-manager/ai-consent-manager.ts"],"sourcesContent":["/**\n * @element ai-consent-manager\n * Consent management with grouped toggles, required items, and Accept/Reject/Save actions.\n *\n * @fires {CustomEvent<{id: string, checked: boolean}>} ai-consent-change\n * @fires {CustomEvent<{consents: Record<string, boolean>}>} ai-consent-save\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface ConsentItem {\n  id: string;\n  label: string;\n  description: string;\n  required?: boolean;\n  checked?: boolean;\n  category?: string;\n}\n\n@customElement('ai-consent-manager')\nexport class AiConsentManager extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .panel {\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      overflow: hidden;\n    }\n\n    .header {\n      display: flex; align-items: center; gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n    }\n    .header-icon {\n      width: var(--cg-spacing-20); height: var(--cg-spacing-20);\n      color: var(--cg-color-surface-base-text); flex-shrink: 0;\n    }\n    .header-title {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .category-label {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n      padding: var(--cg-spacing-12) var(--cg-spacing-20) var(--cg-spacing-4);\n    }\n\n    .items { padding: var(--cg-spacing-8) var(--cg-spacing-20); }\n\n    .item {\n      display: flex; align-items: flex-start; gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) 0;\n    }\n\n    .item-content { flex: 1; min-width: 0; }\n    .item-label {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      display: flex; align-items: center; gap: var(--cg-spacing-6);\n    }\n    .item-description {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n      margin-top: var(--cg-spacing-2);\n    }\n\n    /* ── Switch alignment ── */\n    .item cg-switch {\n      flex-shrink: 0;\n      margin-top: var(--cg-spacing-2);\n    }\n\n    /* ── Footer ── */\n    .footer {\n      display: flex; align-items: center; gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-20) var(--cg-spacing-16);\n      flex-wrap: wrap;\n    }\n    .footer-spacer { flex: 1; }\n\n    /* ── Rounded ── */\n    :host([rounded=\"none\"]) .panel { border-radius: 0; }\n    :host([rounded=\"sm\"]) .panel { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .panel { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .panel { border-radius: var(--cg-border-radius-150); }\n\n  `];\n\n  @property({ type: Array }) consents: ConsentItem[] = [];\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property() override title = 'Consent Settings';\n  @property() acceptAllLabel = 'Accept All';\n  @property() rejectAllLabel = 'Reject All';\n  @property() saveLabel = 'Save Preferences';\n\n  private _toggleConsent(id: string, required: boolean) {\n    if (required) return;\n    this.consents = this.consents.map(c => c.id === id ? { ...c, checked: !c.checked } : c);\n    const item = this.consents.find(c => c.id === id);\n    this.dispatchEvent(new CustomEvent('ai-consent-change', { bubbles: true, composed: true, detail: { id, checked: item?.checked ?? false } }));\n    this.requestUpdate();\n  }\n\n  private _acceptAll() {\n    this.consents = this.consents.map(c => ({ ...c, checked: true }));\n    this.requestUpdate();\n    this._save();\n  }\n\n  private _rejectAll() {\n    this.consents = this.consents.map(c => c.required ? c : { ...c, checked: false });\n    this.requestUpdate();\n    this._save();\n  }\n\n  private _save() {\n    const result: Record<string, boolean> = {};\n    for (const c of this.consents) result[c.id] = c.checked ?? false;\n    this.dispatchEvent(new CustomEvent('ai-consent-save', { bubbles: true, composed: true, detail: { consents: result } }));\n  }\n\n  private _getCategories(): string[] {\n    return [...new Set(this.consents.map(c => c.category || ''))];\n  }\n\n  private _renderItem(c: ConsentItem) {\n    return html`\n      <div class=\"item\">\n        <div class=\"item-content\">\n          <div class=\"item-label\">\n            ${c.label}\n            ${c.required ? html`<cg-badge label=\"Required\" variant=\"warning\" size=\"sm\"></cg-badge>` : nothing}\n          </div>\n          <div class=\"item-description\">${c.description}</div>\n        </div>\n        <cg-switch\n          ?checked=${c.checked || c.required}\n          ?disabled=${c.required}\n          @cg-change=${() => this._toggleConsent(c.id, !!c.required)}\n        ></cg-switch>\n      </div>\n    `;\n  }\n\n  override render() {\n    if (!this.consents.length) return nothing;\n    const categories = this._getCategories();\n    const hasCategories = categories.length > 1 || (categories.length === 1 && categories[0] !== '');\n\n    return html`\n      <div class=\"panel\" role=\"region\" aria-label=\"${this.title}\">\n        <div class=\"header\">\n          <svg class=\"header-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/></svg>\n          <span class=\"header-title\">${this.title}</span>\n        </div>\n\n        ${hasCategories\n          ? categories.map(cat => html`\n              ${cat ? html`<div class=\"category-label\">${cat}</div>` : nothing}\n              <div class=\"items\">${this.consents.filter(c => (c.category || '') === cat).map(c => this._renderItem(c))}</div>\n            `)\n          : html`<div class=\"items\">${this.consents.map(c => this._renderItem(c))}</div>`}\n\n        <div class=\"footer\">\n          <cg-button variant=\"tertiary\" size=\"sm\" @click=${this._rejectAll}>${this.rejectAllLabel}</cg-button>\n          <cg-button variant=\"secondary\" size=\"sm\" @click=${this._acceptAll}>${this.acceptAllLabel}</cg-button>\n          <span class=\"footer-spacer\"></span>\n          <cg-button variant=\"primary\" size=\"sm\" @click=${this._save}>${this.saveLabel}</cg-button>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiConsentManager","LitElement","id","required","c","item","result","html","nothing","categories","hasCategories","cat","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-consent-manager.js","sources":["../../../src/components/ai-consent-manager/ai-consent-manager.ts"],"sourcesContent":["/**\n * @element ai-consent-manager\n * Consent management with grouped toggles, required items, and Accept/Reject/Save actions.\n *\n * @fires {CustomEvent<{id: string, checked: boolean}>} ai-consent-change\n * @fires {CustomEvent<{consents: Record<string, boolean>}>} ai-consent-save\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface ConsentItem {\n  id: string;\n  label: string;\n  description: string;\n  required?: boolean;\n  checked?: boolean;\n  category?: string;\n}\n\n@customElement('ai-consent-manager')\nexport class AiConsentManager extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .panel {\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      overflow: hidden;\n    }\n\n    .header {\n      display: flex; align-items: center; gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n    }\n    .header-icon {\n      width: var(--cg-spacing-20); height: var(--cg-spacing-20);\n      color: var(--cg-color-surface-base-text); flex-shrink: 0;\n    }\n    .header-title {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .category-label {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n      padding: var(--cg-spacing-12) var(--cg-spacing-20) var(--cg-spacing-4);\n    }\n\n    .items { padding: var(--cg-spacing-8) var(--cg-spacing-20); }\n\n    .item {\n      display: flex; align-items: flex-start; gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) 0;\n    }\n\n    .item-content { flex: 1; min-width: 0; }\n    .item-label {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      display: flex; align-items: center; gap: var(--cg-spacing-6);\n    }\n    .item-description {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n      margin-top: var(--cg-spacing-2);\n    }\n\n    /* ── Switch alignment ── */\n    .item cg-switch {\n      flex-shrink: 0;\n      margin-top: var(--cg-spacing-2);\n    }\n\n    /* ── Footer ── */\n    .footer {\n      display: flex; align-items: center; gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-20) var(--cg-spacing-16);\n      flex-wrap: wrap;\n    }\n    .footer-spacer { flex: 1; }\n\n    /* ── Rounded ── */\n    :host([rounded=\"none\"]) .panel { border-radius: 0; }\n    :host([rounded=\"sm\"]) .panel { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .panel { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .panel { border-radius: var(--cg-border-radius-150); }\n\n  `];\n\n  @property({ type: Array }) consents: ConsentItem[] = [];\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property() override title = 'Consent Settings';\n  @property() acceptAllLabel = 'Accept All';\n  @property() rejectAllLabel = 'Reject All';\n  @property() saveLabel = 'Save Preferences';\n\n  private _toggleConsent(id: string, required: boolean) {\n    if (required) return;\n    this.consents = this.consents.map(c => c.id === id ? { ...c, checked: !c.checked } : c);\n    const item = this.consents.find(c => c.id === id);\n    this.dispatchEvent(new CustomEvent('ai-consent-change', { bubbles: true, composed: true, detail: { id, checked: item?.checked ?? false } }));\n    this.requestUpdate();\n  }\n\n  private _acceptAll() {\n    this.consents = this.consents.map(c => ({ ...c, checked: true }));\n    this.requestUpdate();\n    this._save();\n  }\n\n  private _rejectAll() {\n    this.consents = this.consents.map(c => c.required ? c : { ...c, checked: false });\n    this.requestUpdate();\n    this._save();\n  }\n\n  private _save() {\n    const result: Record<string, boolean> = {};\n    for (const c of this.consents) result[c.id] = c.checked ?? false;\n    this.dispatchEvent(new CustomEvent('ai-consent-save', { bubbles: true, composed: true, detail: { consents: result } }));\n  }\n\n  private _getCategories(): string[] {\n    return [...new Set(this.consents.map(c => c.category || ''))];\n  }\n\n  private _renderItem(c: ConsentItem) {\n    return html`\n      <div class=\"item\">\n        <div class=\"item-content\">\n          <div class=\"item-label\">\n            ${c.label}\n            ${c.required ? html`<cg-badge label=\"Required\" variant=\"warning\" size=\"sm\"></cg-badge>` : nothing}\n          </div>\n          <div class=\"item-description\">${c.description}</div>\n        </div>\n        <cg-switch\n          ?checked=${c.checked || c.required}\n          ?disabled=${c.required}\n          @cg-change=${() => this._toggleConsent(c.id, !!c.required)}\n        ></cg-switch>\n      </div>\n    `;\n  }\n\n  override render() {\n    if (!this.consents.length) return nothing;\n    const categories = this._getCategories();\n    const hasCategories = categories.length > 1 || (categories.length === 1 && categories[0] !== '');\n\n    return html`\n      <div class=\"panel\" role=\"region\" aria-label=\"${this.title}\">\n        <div class=\"header\">\n          <svg class=\"header-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/></svg>\n          <span class=\"header-title\">${this.title}</span>\n        </div>\n\n        ${hasCategories\n          ? categories.map(cat => html`\n              ${cat ? html`<div class=\"category-label\">${cat}</div>` : nothing}\n              <div class=\"items\">${this.consents.filter(c => (c.category || '') === cat).map(c => this._renderItem(c))}</div>\n            `)\n          : html`<div class=\"items\">${this.consents.map(c => this._renderItem(c))}</div>`}\n\n        <div class=\"footer\">\n          <cg-button variant=\"tertiary\" size=\"sm\" @click=${this._rejectAll}>${this.rejectAllLabel}</cg-button>\n          <cg-button variant=\"secondary\" size=\"sm\" @click=${this._acceptAll}>${this.acceptAllLabel}</cg-button>\n          <span class=\"footer-spacer\"></span>\n          <cg-button variant=\"primary\" size=\"sm\" @click=${this._save}>${this.saveLabel}</cg-button>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiConsentManager","LitElement","id","required","c","item","result","html","nothing","categories","hasCategories","cat","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-context-window/ai-context-window.js

@@ -1,10 +1,10 @@
 import { css as u, LitElement as v, nothing as g, html as i } from "lit";
 import { property as c, customElement as h } from "lit/decorators.js";
-import { h as p, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
-var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (t, r, a, o) => {
-  for (var e = o > 1 ? void 0 : o ? b(r, a) : r, d = t.length - 1, l; d >= 0; d--)
-    (l = t[d]) && (e = (o ? l(r, a, e) : l(e)) || e);
-  return o && e && m(r, a, e), e;
+import { h as p, r as f } from "../../chunks/premium.css-DHekUEUt.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (r, t, a, o) => {
+  for (var e = o > 1 ? void 0 : o ? b(t, a) : t, d = r.length - 1, l; d >= 0; d--)
+    (l = r[d]) && (e = (o ? l(t, a, e) : l(e)) || e);
+  return o && e && m(t, a, e), e;
 };
 let s = class extends v {
   constructor() {
@@ -17,7 +17,7 @@ let s = class extends v {
     ];
   }
   get _usedTokens() {
-    return this.segments.reduce((t, r) => t + r.tokens, 0);
+    return this.segments.reduce((r, t) => r + t.tokens, 0);
   }
   get _usagePercent() {
     return this.total > 0 ? this._usedTokens / this.total * 100 : 0;
@@ -25,12 +25,12 @@ let s = class extends v {
   get _statusClass() {
     return this._usagePercent >= 95 ? "danger" : this._usagePercent >= 80 ? "warning" : "";
   }
-  _formatTokens(t) {
-    return t >= 1e3 ? `${(t / 1e3).toFixed(1)}k` : String(t);
+  _formatTokens(r) {
+    return r >= 1e3 ? `${(r / 1e3).toFixed(1)}k` : String(r);
   }
   render() {
     if (this.total <= 0) return g;
-    const t = Math.max(0, this.total - this._usedTokens);
+    const r = Math.max(0, this.total - this._usedTokens);
     return i`
       <div class="container" role="figure" aria-label="Context window: ${this._formatTokens(this._usedTokens)} of ${this._formatTokens(this.total)} tokens">
         <div class="header">
@@ -42,32 +42,32 @@ let s = class extends v {
         </div>
 
         <div class="bar">
-          ${this.segments.map((r, a) => {
-      const o = r.tokens / this.total * 100, e = r.color || this._defaultColors[a % this._defaultColors.length];
+          ${this.segments.map((t, a) => {
+      const o = t.tokens / this.total * 100, e = t.color || this._defaultColors[a % this._defaultColors.length];
       return i`
               <div class="segment"
                 style="width: ${o}%; background: ${e};"
-                data-tooltip="${r.label}: ${this._formatTokens(r.tokens)}"
-                @click=${() => this.dispatchEvent(new CustomEvent("ai-context-segment-click", { bubbles: !0, composed: !0, detail: { label: r.label, tokens: r.tokens } }))}></div>
+                data-tooltip="${t.label}: ${this._formatTokens(t.tokens)}"
+                @click=${() => this.dispatchEvent(new CustomEvent("ai-context-segment-click", { bubbles: !0, composed: !0, detail: { label: t.label, tokens: t.tokens } }))}></div>
             `;
     })}
         </div>
 
         <div class="legend">
-          ${this.segments.map((r, a) => {
-      const o = r.color || this._defaultColors[a % this._defaultColors.length];
+          ${this.segments.map((t, a) => {
+      const o = t.color || this._defaultColors[a % this._defaultColors.length];
       return i`
               <div class="legend-item">
                 <div class="legend-dot" style="background: ${o};"></div>
-                <span>${r.label}</span>
-                <span class="legend-tokens">${this._formatTokens(r.tokens)}</span>
+                <span>${t.label}</span>
+                <span class="legend-tokens">${this._formatTokens(t.tokens)}</span>
               </div>
             `;
     })}
           <div class="legend-item">
             <div class="legend-dot" style="background: var(--cg-color-surface-cards-border);"></div>
             <span>Free</span>
-            <span class="legend-tokens">${this._formatTokens(t)}</span>
+            <span class="legend-tokens">${this._formatTokens(r)}</span>
           </div>
         </div>
 
@@ -168,7 +168,7 @@ s.styles = [p, f, u`
       font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);
     }
     .cache-icon {
-      color: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-ai-cached-text);
       width: var(--cg-spacing-12); height: var(--cg-spacing-12);
       display: flex;
     }

package/dist/components/ai-context-window/ai-context-window.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-context-window.js","sources":["../../../src/components/ai-context-window/ai-context-window.ts"],"sourcesContent":["/**\n * @element ai-context-window\n * Token budget bar showing context window usage with color segments and cache indicator.\n *\n * @fires {CustomEvent<{label: string, tokens: number}>} ai-context-segment-click\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface ContextSegment {\n  label: string;\n  tokens: number;\n  color?: string;\n}\n\n@customElement('ai-context-window')\nexport class AiContextWindow extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .container {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      padding: var(--cg-spacing-24);\n    }\n\n    .header {\n      display: flex; justify-content: space-between; align-items: center;\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .title {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .total {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .total.warning { color: var(--cg-color-status-warning-text-default); }\n    .total.danger { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Segmented bar ── */\n    .bar {\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-cards-border);\n      display: flex;\n      overflow: hidden;\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .segment {\n      height: 100%;\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n      cursor: pointer;\n      position: relative;\n    }\n    .segment:first-child { border-radius: var(--cg-border-radius-full) 0 0 var(--cg-border-radius-full); }\n    .segment:last-child { border-radius: 0 var(--cg-border-radius-full) var(--cg-border-radius-full) 0; }\n    .segment:hover { opacity: 0.8; }\n\n    /* Tooltip */\n    .segment:hover::after {\n      content: attr(data-tooltip);\n      position: absolute;\n      bottom: calc(100% + var(--cg-spacing-6));\n      left: 50%;\n      transform: translateX(-50%);\n      background: var(--cg-color-tooltip-background);\n      color: var(--cg-color-tooltip-text);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-100);\n      font-size: var(--cg-font-size-xs);\n      white-space: nowrap;\n      z-index: 10;\n      pointer-events: none;\n    }\n\n    /* ── Legend ── */\n    .legend {\n      display: flex; gap: var(--cg-spacing-20); flex-wrap: wrap;\n    }\n    .legend-item {\n      display: flex; align-items: center; gap: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);\n    }\n    .legend-dot {\n      width: var(--cg-spacing-8); height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full); flex-shrink: 0;\n    }\n    .legend-tokens {\n      font-family: var(--cg-font-family-mono);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* ── Cache ── */\n    .cache-row {\n      display: flex; align-items: center; gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-12); padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);\n    }\n    .cache-icon {\n      color: var(--cg-color-action-primary-background-default);\n      width: var(--cg-spacing-12); height: var(--cg-spacing-12);\n      display: flex;\n    }\n    .cache-icon svg { width: 100%; height: 100%; }\n\n    /* ── Rounded ── */\n    :host([rounded=\"none\"]) .container { border-radius: 0; }\n    :host([rounded=\"sm\"]) .container { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .container { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .container { border-radius: var(--cg-border-radius-150); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Number }) total = 128000;\n  @property({ type: Array }) segments: ContextSegment[] = [];\n  @property({ type: Number }) cached = 0;\n\n  private _defaultColors = [\n    'var(--cg-color-action-primary-background-default)',\n    'var(--cg-color-status-info-text-default)',\n    'var(--cg-color-status-warning-text-default)',\n    'var(--cg-color-status-success-text-default)',\n    'var(--cg-color-status-error-text-default)',\n  ];\n\n  private get _usedTokens(): number {\n    return this.segments.reduce((sum, s) => sum + s.tokens, 0);\n  }\n\n  private get _usagePercent(): number {\n    return this.total > 0 ? (this._usedTokens / this.total) * 100 : 0;\n  }\n\n  private get _statusClass(): string {\n    if (this._usagePercent >= 95) return 'danger';\n    if (this._usagePercent >= 80) return 'warning';\n    return '';\n  }\n\n  private _formatTokens(n: number): string {\n    if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;\n    return String(n);\n  }\n\n  override render() {\n    if (this.total <= 0) return nothing;\n    const remaining = Math.max(0, this.total - this._usedTokens);\n\n    return html`\n      <div class=\"container\" role=\"figure\" aria-label=\"Context window: ${this._formatTokens(this._usedTokens)} of ${this._formatTokens(this.total)} tokens\">\n        <div class=\"header\">\n          <span class=\"title\">Context Window</span>\n          <span class=\"total ${this._statusClass}\">\n            ${this._formatTokens(this._usedTokens)} / ${this._formatTokens(this.total)}\n            (${Math.round(this._usagePercent)}%)\n          </span>\n        </div>\n\n        <div class=\"bar\">\n          ${this.segments.map((seg, i) => {\n            const pct = (seg.tokens / this.total) * 100;\n            const color = seg.color || this._defaultColors[i % this._defaultColors.length];\n            return html`\n              <div class=\"segment\"\n                style=\"width: ${pct}%; background: ${color};\"\n                data-tooltip=\"${seg.label}: ${this._formatTokens(seg.tokens)}\"\n                @click=${() => this.dispatchEvent(new CustomEvent('ai-context-segment-click', { bubbles: true, composed: true, detail: { label: seg.label, tokens: seg.tokens } }))}></div>\n            `;\n          })}\n        </div>\n\n        <div class=\"legend\">\n          ${this.segments.map((seg, i) => {\n            const color = seg.color || this._defaultColors[i % this._defaultColors.length];\n            return html`\n              <div class=\"legend-item\">\n                <div class=\"legend-dot\" style=\"background: ${color};\"></div>\n                <span>${seg.label}</span>\n                <span class=\"legend-tokens\">${this._formatTokens(seg.tokens)}</span>\n              </div>\n            `;\n          })}\n          <div class=\"legend-item\">\n            <div class=\"legend-dot\" style=\"background: var(--cg-color-surface-cards-border);\"></div>\n            <span>Free</span>\n            <span class=\"legend-tokens\">${this._formatTokens(remaining)}</span>\n          </div>\n        </div>\n\n        ${this.cached > 0 ? html`\n          <div class=\"cache-row\">\n            <span class=\"cache-icon\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"/></svg></span>\n            <span>${this._formatTokens(this.cached)} cached</span>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiContextWindow","LitElement","sum","s","n","nothing","remaining","html","seg","i","pct","color","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-context-window.js","sources":["../../../src/components/ai-context-window/ai-context-window.ts"],"sourcesContent":["/**\n * @element ai-context-window\n * Token budget bar showing context window usage with color segments and cache indicator.\n *\n * @fires {CustomEvent<{label: string, tokens: number}>} ai-context-segment-click\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface ContextSegment {\n  label: string;\n  tokens: number;\n  color?: string;\n}\n\n@customElement('ai-context-window')\nexport class AiContextWindow extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .container {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      padding: var(--cg-spacing-24);\n    }\n\n    .header {\n      display: flex; justify-content: space-between; align-items: center;\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .title {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .total {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .total.warning { color: var(--cg-color-status-warning-text-default); }\n    .total.danger { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Segmented bar ── */\n    .bar {\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-cards-border);\n      display: flex;\n      overflow: hidden;\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .segment {\n      height: 100%;\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n      cursor: pointer;\n      position: relative;\n    }\n    .segment:first-child { border-radius: var(--cg-border-radius-full) 0 0 var(--cg-border-radius-full); }\n    .segment:last-child { border-radius: 0 var(--cg-border-radius-full) var(--cg-border-radius-full) 0; }\n    .segment:hover { opacity: 0.8; }\n\n    /* Tooltip */\n    .segment:hover::after {\n      content: attr(data-tooltip);\n      position: absolute;\n      bottom: calc(100% + var(--cg-spacing-6));\n      left: 50%;\n      transform: translateX(-50%);\n      background: var(--cg-color-tooltip-background);\n      color: var(--cg-color-tooltip-text);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-100);\n      font-size: var(--cg-font-size-xs);\n      white-space: nowrap;\n      z-index: 10;\n      pointer-events: none;\n    }\n\n    /* ── Legend ── */\n    .legend {\n      display: flex; gap: var(--cg-spacing-20); flex-wrap: wrap;\n    }\n    .legend-item {\n      display: flex; align-items: center; gap: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);\n    }\n    .legend-dot {\n      width: var(--cg-spacing-8); height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full); flex-shrink: 0;\n    }\n    .legend-tokens {\n      font-family: var(--cg-font-family-mono);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* ── Cache ── */\n    .cache-row {\n      display: flex; align-items: center; gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-12); padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);\n    }\n    .cache-icon {\n      color: var(--cg-color-ai-cached-text);\n      width: var(--cg-spacing-12); height: var(--cg-spacing-12);\n      display: flex;\n    }\n    .cache-icon svg { width: 100%; height: 100%; }\n\n    /* ── Rounded ── */\n    :host([rounded=\"none\"]) .container { border-radius: 0; }\n    :host([rounded=\"sm\"]) .container { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .container { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .container { border-radius: var(--cg-border-radius-150); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Number }) total = 128000;\n  @property({ type: Array }) segments: ContextSegment[] = [];\n  @property({ type: Number }) cached = 0;\n\n  private _defaultColors = [\n    'var(--cg-color-action-primary-background-default)',\n    'var(--cg-color-status-info-text-default)',\n    'var(--cg-color-status-warning-text-default)',\n    'var(--cg-color-status-success-text-default)',\n    'var(--cg-color-status-error-text-default)',\n  ];\n\n  private get _usedTokens(): number {\n    return this.segments.reduce((sum, s) => sum + s.tokens, 0);\n  }\n\n  private get _usagePercent(): number {\n    return this.total > 0 ? (this._usedTokens / this.total) * 100 : 0;\n  }\n\n  private get _statusClass(): string {\n    if (this._usagePercent >= 95) return 'danger';\n    if (this._usagePercent >= 80) return 'warning';\n    return '';\n  }\n\n  private _formatTokens(n: number): string {\n    if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;\n    return String(n);\n  }\n\n  override render() {\n    if (this.total <= 0) return nothing;\n    const remaining = Math.max(0, this.total - this._usedTokens);\n\n    return html`\n      <div class=\"container\" role=\"figure\" aria-label=\"Context window: ${this._formatTokens(this._usedTokens)} of ${this._formatTokens(this.total)} tokens\">\n        <div class=\"header\">\n          <span class=\"title\">Context Window</span>\n          <span class=\"total ${this._statusClass}\">\n            ${this._formatTokens(this._usedTokens)} / ${this._formatTokens(this.total)}\n            (${Math.round(this._usagePercent)}%)\n          </span>\n        </div>\n\n        <div class=\"bar\">\n          ${this.segments.map((seg, i) => {\n            const pct = (seg.tokens / this.total) * 100;\n            const color = seg.color || this._defaultColors[i % this._defaultColors.length];\n            return html`\n              <div class=\"segment\"\n                style=\"width: ${pct}%; background: ${color};\"\n                data-tooltip=\"${seg.label}: ${this._formatTokens(seg.tokens)}\"\n                @click=${() => this.dispatchEvent(new CustomEvent('ai-context-segment-click', { bubbles: true, composed: true, detail: { label: seg.label, tokens: seg.tokens } }))}></div>\n            `;\n          })}\n        </div>\n\n        <div class=\"legend\">\n          ${this.segments.map((seg, i) => {\n            const color = seg.color || this._defaultColors[i % this._defaultColors.length];\n            return html`\n              <div class=\"legend-item\">\n                <div class=\"legend-dot\" style=\"background: ${color};\"></div>\n                <span>${seg.label}</span>\n                <span class=\"legend-tokens\">${this._formatTokens(seg.tokens)}</span>\n              </div>\n            `;\n          })}\n          <div class=\"legend-item\">\n            <div class=\"legend-dot\" style=\"background: var(--cg-color-surface-cards-border);\"></div>\n            <span>Free</span>\n            <span class=\"legend-tokens\">${this._formatTokens(remaining)}</span>\n          </div>\n        </div>\n\n        ${this.cached > 0 ? html`\n          <div class=\"cache-row\">\n            <span class=\"cache-icon\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"/></svg></span>\n            <span>${this._formatTokens(this.cached)} cached</span>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiContextWindow","LitElement","sum","s","n","nothing","remaining","html","seg","i","pct","color","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { css as p, LitElement as u, html as h } from "lit";
 import { property as o, state as d, customElement as v } from "lit/decorators.js";
-import { a as f, r as m, f as g } from "../../chunks/premium.css-9I4kHrsl.js";
+import { a as f, r as m, f as g } from "../../chunks/premium.css-DHekUEUt.js";
 var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, i, n, s) => {
   for (var a = s > 1 ? void 0 : s ? y(i, n) : i, c = t.length - 1, l; c >= 0; c--)
     (l = t[c]) && (a = (s ? l(i, n, a) : l(a)) || a);
@@ -104,7 +104,7 @@ e.styles = [f, m, g, p`
     /* Minimal variant */
     :host([variant="minimal"]) .copy-btn {
       padding: var(--cg-spacing-4) var(--cg-spacing-8);
-      font-size: var(--cg-font-size-xs);
+      font-size: var(--cg-font-size-sm);
       background: none;
       color: var(--cg-color-input-text-placeholder);
     }
@@ -129,12 +129,12 @@ e.styles = [f, m, g, p`
 
     /* Copied (success) state */
     .copy-btn[data-copied="true"] {
-      color: var(--cg-color-status-success-text) !important;
+      color: var(--cg-color-status-success-text-default) !important;
     }
 
     /* Error state */
     .copy-btn[data-error="true"] {
-      color: var(--cg-color-status-error-text) !important;
+      color: var(--cg-color-status-error-text-default) !important;
       animation: error-shake var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
     }
     @keyframes error-shake {

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

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

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

@@ -1,10 +1,10 @@
 import { css as v, LitElement as p, html as d, nothing as l } from "lit";
 import { property as g, customElement as u } from "lit/decorators.js";
-import { h as b, r as h, f } from "../../chunks/premium.css-9I4kHrsl.js";
-var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (r, t, e, i) => {
-  for (var o = i > 1 ? void 0 : i ? w(t, e) : t, a = r.length - 1, s; a >= 0; a--)
-    (s = r[a]) && (o = (i ? s(t, e, o) : s(o)) || o);
-  return i && o && m(t, e, o), o;
+import { h as b, r as h, f } from "../../chunks/premium.css-DHekUEUt.js";
+var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (r, t, e, s) => {
+  for (var o = s > 1 ? void 0 : s ? w(t, e) : t, a = r.length - 1, i; a >= 0; a--)
+    (i = r[a]) && (o = (s ? i(t, e, o) : i(o)) || o);
+  return s && o && m(t, e, o), o;
 };
 let c = class extends p {
   constructor() {
@@ -41,7 +41,7 @@ let c = class extends p {
   render() {
     if (!this.entries.length)
       return d`<div class="container"><div class="empty-state">No cost data available</div></div>`;
-    const r = this._budgetPercent(), t = r > 90 ? "danger" : r > 70 ? "warn" : "", e = Math.max(...this._modelBreakdown.map((a) => a.cost), 0.01), i = this._dailyTrend, o = Math.max(...i.map((a) => a.cost), 0.01);
+    const r = this._budgetPercent(), t = r > 90 ? "danger" : r > 70 ? "warn" : "", e = Math.max(...this._modelBreakdown.map((a) => a.cost), 0.01), s = this._dailyTrend, o = Math.max(...s.map((a) => a.cost), 0.01);
     return d`
       <div class="container" role="region" aria-label="AI cost dashboard">
         <div class="header">
@@ -84,8 +84,8 @@ let c = class extends p {
             tabindex="0"
             aria-label="${a.model}: $${a.cost.toFixed(2)}"
             @click=${() => this._handleEntryClick({ model: a.model, cost: a.cost })}
-            @keydown=${(s) => {
-      (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this._handleEntryClick({ model: a.model, cost: a.cost }));
+            @keydown=${(i) => {
+      (i.key === "Enter" || i.key === " ") && (i.preventDefault(), this._handleEntryClick({ model: a.model, cost: a.cost }));
     }}
           >
             <span class="model-name">${a.model}</span>
@@ -96,11 +96,11 @@ let c = class extends p {
           </div>
         `)}
 
-        ${i.length > 1 ? d`
+        ${s.length > 1 ? d`
           <div class="trend-section">
             <div class="trend-title">Daily Trend</div>
             <div class="trend-chart" role="img" aria-label="Daily cost trend chart">
-              ${i.map((a) => d`
+              ${s.map((a) => d`
                 <div
                   class="trend-bar"
                   style="height:${Math.max(a.cost / o * 100, 4)}%"
@@ -174,7 +174,7 @@ c.styles = [b, h, f, v`
       color: var(--cg-color-surface-base-text);
     }
 
-    .stat-value.warn { color: var(--cg-color-status-warning-text); }
+    .stat-value.warn { color: var(--cg-color-status-warning-text-default); }
     .stat-value.danger { color: var(--cg-color-status-error-text-default); }
 
     /* ── Budget bar ── */
@@ -203,7 +203,7 @@ c.styles = [b, h, f, v`
       background: var(--cg-color-action-primary-background-default);
       transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
     }
-    .budget-fill.warn { background: var(--cg-color-status-warning-text); }
+    .budget-fill.warn { background: var(--cg-color-status-warning-text-default); }
     .budget-fill.danger { background: var(--cg-color-status-error-text-default); }
 
     /* ── Model breakdown ── */
@@ -287,7 +287,7 @@ c.styles = [b, h, f, v`
     .trend-chart {
       display: flex;
       align-items: flex-end;
-      gap: var(--cg-spacing-3);
+      gap: var(--cg-spacing-2);
       height: var(--cg-spacing-48);
     }
 
@@ -305,7 +305,7 @@ c.styles = [b, h, f, v`
 
     .empty-state {
       text-align: center;
-      color: var(--cg-color-input-border-hover);
+      color: var(--cg-color-empty-state-text-secondary);
       font-size: var(--cg-font-size-sm);
       padding: var(--cg-spacing-24) 0;
     }

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

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

package/dist/components/ai-data-card/ai-data-card.js

@@ -1,6 +1,6 @@
 import { css as p, LitElement as v, html as t, nothing as n } from "lit";
 import { property as o, customElement as h } from "lit/decorators.js";
-import { h as u, r as b, f as m, b as f } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as u, r as b, f as m, b as f } from "../../chunks/premium.css-DHekUEUt.js";
 import "../cg-button/cg-button.js";
 import "../cg-badge/cg-badge.js";
 var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, i = (e, a, r, l) => {
@@ -315,7 +315,7 @@ s.styles = [u, b, m, f, p`
       padding: var(--cg-spacing-24);
       text-align: center;
       color: var(--cg-color-input-text-placeholder);
-      font-size: var(--cg-font-size-xs);
+      font-size: var(--cg-font-size-sm);
     }
 
   `];