@cognivo/components 0.8.0 → 0.8.2

package/dist/components/ai-timeline/ai-timeline.js

@@ -1,6 +1,6 @@
 import { css as p, LitElement as u, html as r, nothing as o } from "lit";
 import { property as g, customElement as v } from "lit/decorators.js";
-import { h as f, r as h } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as f, r as h } from "../../chunks/premium.css-DHekUEUt.js";
 var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, d = (t, a, i, e) => {
   for (var n = e > 1 ? void 0 : e ? b(a, i) : a, s = t.length - 1, l; s >= 0; s--)
     (l = t[s]) && (n = (e ? l(a, i, n) : l(n)) || n);
@@ -175,7 +175,7 @@ c.styles = [f, h, p`
       border: var(--cg-border-width-100) solid var(--cg-color-action-primary-background-default);
       color: var(--cg-color-action-primary-background-default);
       box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
-      animation: ringPulse 2s ease-in-out infinite;
+      animation: ringPulse 2s var(--cg-transition-easing-ease-in-out) infinite;
     }
     .dot.complete {
       background: var(--cg-color-status-success-background-default);

package/dist/components/ai-timeline/ai-timeline.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-timeline.js","sources":["../../../src/components/ai-timeline/ai-timeline.ts"],"sourcesContent":["/**\n * @element ai-timeline\n * Vertical execution timeline for AI agents. Shows steps with status indicators,\n * duration bars, tool tags, token metadata, nested sub-steps, and expandable details.\n *\n * @fires {CustomEvent<{index: number, step: TimelineStep}>} ai-timeline-step-click - When a step is clicked\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 TimelineStep {\n  label: string;\n  status: 'pending' | 'active' | 'complete' | 'error';\n  type?: 'llm' | 'tool' | 'retrieval' | 'human' | 'default';\n  detail?: string;\n  duration?: number;\n  tools?: string[];\n  tokens?: { input?: number; output?: number };\n  children?: TimelineStep[];\n}\n\n@customElement('ai-timeline')\nexport class AiTimeline extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .timeline {\n      display: flex;\n      flex-direction: column;\n    }\n\n    /* ── Step row ── */\n    .step {\n      display: flex;\n      gap: var(--cg-spacing-16);\n      padding: var(--cg-spacing-16);\n      position: relative;\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-100);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      animation: stepIn var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;\n      animation-delay: calc(var(--step-index, 0) * 50ms);\n    }\n    .step:hover { background: var(--cg-overlay-dark-subtle); }\n\n    @keyframes stepIn {\n      from { opacity: 0; transform: translateX(calc(-1 * var(--cg-spacing-6))); }\n      to { opacity: 1; transform: translateX(0); }\n    }\n\n    /* ── Connecting line ── */\n    .line-col {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      flex-shrink: 0;\n      width: var(--cg-spacing-24);\n    }\n\n    .dot {\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      border-radius: var(--cg-border-radius-full);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .dot svg {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n    }\n\n    .line {\n      flex: 1;\n      width: var(--cg-border-width-50);\n      background: var(--cg-color-surface-base-divider);\n      min-height: var(--cg-spacing-8);\n    }\n    .step:last-child .line { display: none; }\n    .step.complete .line {\n      background: var(--cg-color-status-success-text-default);\n      opacity: 0.25;\n    }\n\n    /* ── Dot states ── */\n    .dot.pending {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .dot.active {\n      background: var(--cg-overlay-accent-strong);\n      border: var(--cg-border-width-100) solid var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-background-default);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n      animation: ringPulse 2s ease-in-out infinite;\n    }\n    .dot.complete {\n      background: var(--cg-color-status-success-background-default);\n      border: var(--cg-border-width-100) solid var(--cg-color-status-success-text-default);\n      color: var(--cg-color-status-success-text-default);\n    }\n    .dot.complete svg {\n      animation: checkPop var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;\n    }\n    .dot.error {\n      background: var(--cg-color-status-error-background-default);\n      border: var(--cg-border-width-100) solid var(--cg-color-status-error-text-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    @keyframes ringPulse {\n      0%, 100% { box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n      50% { box-shadow: 0 0 0 6px transparent; }\n    }\n    @keyframes checkPop {\n      from { transform: scale(0); }\n      50% { transform: scale(1.2); }\n      to { transform: scale(1); }\n    }\n\n    /* ── Content ── */\n    .content {\n      flex: 1;\n      min-width: 0;\n      padding-top: var(--cg-spacing-2);\n      padding-bottom: var(--cg-spacing-12);\n    }\n\n    .step-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-12);\n    }\n    .step-label {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-snug);\n    }\n    .step.pending .step-label {\n      color: var(--cg-color-surface-container-outlined);\n      opacity: 0.5;\n    }\n    .step.complete .step-label {\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .step.error .step-label {\n      color: var(--cg-color-status-error-text-default);\n    }\n    .step.active .step-label {\n      background: linear-gradient(110deg, var(--cg-color-surface-base-text) 35%, var(--cg-color-action-primary-background-default) 50%, var(--cg-color-surface-base-text) 65%);\n      background-size: 300% 100%;\n      background-clip: text;\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      animation: textSweep 1.8s var(--cg-transition-easing-default) infinite;\n    }\n    @keyframes textSweep {\n      0% { background-position: 100% 50%; }\n      100% { background-position: 0% 50%; }\n    }\n\n    .step-duration {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      font-family: var(--cg-font-family-mono);\n      white-space: nowrap;\n    }\n\n    /* ── Duration bar ── */\n    .duration-bar {\n      height: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-cards-border);\n      margin-top: var(--cg-spacing-8);\n      overflow: hidden;\n    }\n    .duration-fill {\n      height: 100%;\n      border-radius: var(--cg-border-radius-full);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    .step.complete .duration-fill { background: var(--cg-color-status-success-text-default); opacity: 0.6; }\n    .step.active .duration-fill { background: var(--cg-color-action-primary-background-default); animation: indeterminate 1.5s linear infinite; }\n    .step.error .duration-fill { background: var(--cg-color-status-error-text-default); opacity: 0.6; }\n\n    @keyframes indeterminate {\n      0% { transform: translateX(-100%); width: 40%; }\n      50% { transform: translateX(100%); width: 40%; }\n      100% { transform: translateX(300%); width: 40%; }\n    }\n\n    /* ── Token metadata ── */\n    .meta {\n      display: flex;\n      gap: var(--cg-spacing-16);\n      margin-top: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .meta-item {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n    }\n    .meta-label { opacity: 0.6; }\n\n    /* ── Tool tags ── */\n    .tools {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-8);\n      flex-wrap: wrap;\n    }\n    .tool-tag {\n      font-size: var(--cg-font-size-xs);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-cards-background);\n      color: var(--cg-color-surface-container-outlined);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-family: var(--cg-font-family-mono);\n    }\n\n    /* ── Detail panel ── */\n    .detail {\n      margin-top: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      background: var(--cg-color-surface-base-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      font-size: var(--cg-font-size-xs);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-relaxed);\n      white-space: pre-wrap;\n      max-height: var(--cg-spacing-96);\n      overflow-y: auto;\n    }\n\n    /* ── Nested children ── */\n    .children {\n      margin-top: var(--cg-spacing-8);\n    }\n    .children .step {\n      padding: var(--cg-spacing-4) var(--cg-spacing-4);\n      animation: none;\n    }\n    .children .dot { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }\n    .children .dot svg { width: var(--cg-spacing-8); height: var(--cg-spacing-8); }\n    .children .line { min-height: var(--cg-spacing-4); }\n    .children .step-label { font-size: var(--cg-font-size-xs); }\n    .children .line-col { width: var(--cg-spacing-16); }\n    .children .content { padding-bottom: var(--cg-spacing-2); }\n\n    /* ── Compact ── */\n    :host([compact]) .step { padding: var(--cg-spacing-4) var(--cg-spacing-6); }\n    :host([compact]) .dot { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }\n    :host([compact]) .dot svg { width: var(--cg-spacing-8); height: var(--cg-spacing-8); }\n    :host([compact]) .line-col { width: var(--cg-spacing-16); }\n    :host([compact]) .step-label { font-size: var(--cg-font-size-xs); }\n    :host([compact]) .detail,\n    :host([compact]) .tools,\n    :host([compact]) .meta,\n    :host([compact]) .children,\n    :host([compact]) .duration-bar { display: none; }\n\n    .step:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .step { animation: none; }\n      .dot.active { animation: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n      .dot.complete svg { animation: none; }\n      .step.active .duration-fill { animation: none; width: 50%; }\n      .step.active .step-label { animation: none; -webkit-text-fill-color: currentColor; }\n    }\n  `];\n\n  @property({ type: Array }) steps: TimelineStep[] = [];\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  private _expandedIndex = -1;\n\n  private _getIcon(status: string) {\n    if (status === 'complete') return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>`;\n    if (status === 'error') return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`;\n    if (status === 'active') return html`<svg viewBox=\"0 0 8 8\"><circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"currentColor\"/></svg>`;\n    return html`<svg viewBox=\"0 0 8 8\"><circle cx=\"4\" cy=\"4\" r=\"2.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\"/></svg>`;\n  }\n\n  private _formatDuration(ms?: number): string {\n    if (!ms) return '';\n    if (ms < 1000) return `${ms}ms`;\n    return `${(ms / 1000).toFixed(1)}s`;\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  private _handleStepClick(index: number) {\n    this._expandedIndex = this._expandedIndex === index ? -1 : index;\n    this.requestUpdate();\n    this.dispatchEvent(new CustomEvent('ai-timeline-step-click', {\n      bubbles: true, composed: true,\n      detail: { index, step: this.steps[index] },\n    }));\n  }\n\n  private _getMaxDuration(): number {\n    return Math.max(...this.steps.map(s => s.duration || 0), 1);\n  }\n\n  private _renderStep(step: TimelineStep, isLast: boolean) {\n    return html`\n      <div class=\"line-col\">\n        <div class=\"dot ${step.status}\" aria-hidden=\"true\">${this._getIcon(step.status)}</div>\n        ${!isLast ? html`<div class=\"line\"></div>` : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    if (this.steps.length === 0) return nothing;\n    const maxDuration = this._getMaxDuration();\n\n    return html`\n      <div class=\"timeline\" role=\"list\" aria-label=\"Execution timeline\">\n        ${this.steps.map((step, i) => html`\n          <div class=\"step ${step.status}\" role=\"listitem\" style=\"--step-index: ${i}\"\n            aria-current=\"${step.status === 'active' ? 'step' : nothing}\"\n            tabindex=\"0\"\n            @click=${() => this._handleStepClick(i)}\n            @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleStepClick(i); } }}>\n\n            ${this._renderStep(step, i === this.steps.length - 1)}\n\n            <div class=\"content\">\n              <div class=\"step-header\">\n                <span class=\"step-label\">${step.label}</span>\n                ${step.duration ? html`<span class=\"step-duration\">${this._formatDuration(step.duration)}</span>` : nothing}\n              </div>\n\n              ${step.duration || step.status === 'active' ? html`\n                <div class=\"duration-bar\">\n                  <div class=\"duration-fill\" style=\"width: ${step.status === 'active' ? '100' : Math.round((step.duration || 0) / maxDuration * 100)}%\"></div>\n                </div>\n              ` : nothing}\n\n              ${step.tokens ? html`\n                <div class=\"meta\">\n                  ${step.tokens.input ? html`<span class=\"meta-item\"><span class=\"meta-label\">in</span> ${this._formatTokens(step.tokens.input)}</span>` : nothing}\n                  ${step.tokens.output ? html`<span class=\"meta-item\"><span class=\"meta-label\">out</span> ${this._formatTokens(step.tokens.output)}</span>` : nothing}\n                </div>\n              ` : nothing}\n\n              ${step.tools && step.tools.length > 0 ? html`\n                <div class=\"tools\">\n                  ${step.tools.map(t => html`<span class=\"tool-tag\">${t}</span>`)}\n                </div>\n              ` : nothing}\n\n              ${this._expandedIndex === i && step.detail ? html`\n                <div class=\"detail\">${step.detail}</div>\n              ` : nothing}\n\n              ${step.children && step.children.length > 0 ? html`\n                <div class=\"children\">\n                  ${step.children.map((child, ci) => html`\n                    <div class=\"step ${child.status}\">\n                      ${this._renderStep(child, ci === step.children!.length - 1)}\n                      <div class=\"content\">\n                        <div class=\"step-header\">\n                          <span class=\"step-label\">${child.label}</span>\n                          ${child.duration ? html`<span class=\"step-duration\">${this._formatDuration(child.duration)}</span>` : nothing}\n                        </div>\n                      </div>\n                    </div>\n                  `)}\n                </div>\n              ` : nothing}\n            </div>\n          </div>\n        `)}\n      </div>\n    `;\n  }\n}\n"],"names":["AiTimeline","LitElement","status","html","ms","n","index","s","step","isLast","nothing","maxDuration","t","child","ci","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-timeline.js","sources":["../../../src/components/ai-timeline/ai-timeline.ts"],"sourcesContent":["/**\n * @element ai-timeline\n * Vertical execution timeline for AI agents. Shows steps with status indicators,\n * duration bars, tool tags, token metadata, nested sub-steps, and expandable details.\n *\n * @fires {CustomEvent<{index: number, step: TimelineStep}>} ai-timeline-step-click - When a step is clicked\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 TimelineStep {\n  label: string;\n  status: 'pending' | 'active' | 'complete' | 'error';\n  type?: 'llm' | 'tool' | 'retrieval' | 'human' | 'default';\n  detail?: string;\n  duration?: number;\n  tools?: string[];\n  tokens?: { input?: number; output?: number };\n  children?: TimelineStep[];\n}\n\n@customElement('ai-timeline')\nexport class AiTimeline extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .timeline {\n      display: flex;\n      flex-direction: column;\n    }\n\n    /* ── Step row ── */\n    .step {\n      display: flex;\n      gap: var(--cg-spacing-16);\n      padding: var(--cg-spacing-16);\n      position: relative;\n      cursor: pointer;\n      border-radius: var(--cg-border-radius-100);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      animation: stepIn var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;\n      animation-delay: calc(var(--step-index, 0) * 50ms);\n    }\n    .step:hover { background: var(--cg-overlay-dark-subtle); }\n\n    @keyframes stepIn {\n      from { opacity: 0; transform: translateX(calc(-1 * var(--cg-spacing-6))); }\n      to { opacity: 1; transform: translateX(0); }\n    }\n\n    /* ── Connecting line ── */\n    .line-col {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      flex-shrink: 0;\n      width: var(--cg-spacing-24);\n    }\n\n    .dot {\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      border-radius: var(--cg-border-radius-full);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .dot svg {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n    }\n\n    .line {\n      flex: 1;\n      width: var(--cg-border-width-50);\n      background: var(--cg-color-surface-base-divider);\n      min-height: var(--cg-spacing-8);\n    }\n    .step:last-child .line { display: none; }\n    .step.complete .line {\n      background: var(--cg-color-status-success-text-default);\n      opacity: 0.25;\n    }\n\n    /* ── Dot states ── */\n    .dot.pending {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .dot.active {\n      background: var(--cg-overlay-accent-strong);\n      border: var(--cg-border-width-100) solid var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-background-default);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n      animation: ringPulse 2s var(--cg-transition-easing-ease-in-out) infinite;\n    }\n    .dot.complete {\n      background: var(--cg-color-status-success-background-default);\n      border: var(--cg-border-width-100) solid var(--cg-color-status-success-text-default);\n      color: var(--cg-color-status-success-text-default);\n    }\n    .dot.complete svg {\n      animation: checkPop var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;\n    }\n    .dot.error {\n      background: var(--cg-color-status-error-background-default);\n      border: var(--cg-border-width-100) solid var(--cg-color-status-error-text-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    @keyframes ringPulse {\n      0%, 100% { box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n      50% { box-shadow: 0 0 0 6px transparent; }\n    }\n    @keyframes checkPop {\n      from { transform: scale(0); }\n      50% { transform: scale(1.2); }\n      to { transform: scale(1); }\n    }\n\n    /* ── Content ── */\n    .content {\n      flex: 1;\n      min-width: 0;\n      padding-top: var(--cg-spacing-2);\n      padding-bottom: var(--cg-spacing-12);\n    }\n\n    .step-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-12);\n    }\n    .step-label {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-snug);\n    }\n    .step.pending .step-label {\n      color: var(--cg-color-surface-container-outlined);\n      opacity: 0.5;\n    }\n    .step.complete .step-label {\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .step.error .step-label {\n      color: var(--cg-color-status-error-text-default);\n    }\n    .step.active .step-label {\n      background: linear-gradient(110deg, var(--cg-color-surface-base-text) 35%, var(--cg-color-action-primary-background-default) 50%, var(--cg-color-surface-base-text) 65%);\n      background-size: 300% 100%;\n      background-clip: text;\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      animation: textSweep 1.8s var(--cg-transition-easing-default) infinite;\n    }\n    @keyframes textSweep {\n      0% { background-position: 100% 50%; }\n      100% { background-position: 0% 50%; }\n    }\n\n    .step-duration {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      font-family: var(--cg-font-family-mono);\n      white-space: nowrap;\n    }\n\n    /* ── Duration bar ── */\n    .duration-bar {\n      height: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-cards-border);\n      margin-top: var(--cg-spacing-8);\n      overflow: hidden;\n    }\n    .duration-fill {\n      height: 100%;\n      border-radius: var(--cg-border-radius-full);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    .step.complete .duration-fill { background: var(--cg-color-status-success-text-default); opacity: 0.6; }\n    .step.active .duration-fill { background: var(--cg-color-action-primary-background-default); animation: indeterminate 1.5s linear infinite; }\n    .step.error .duration-fill { background: var(--cg-color-status-error-text-default); opacity: 0.6; }\n\n    @keyframes indeterminate {\n      0% { transform: translateX(-100%); width: 40%; }\n      50% { transform: translateX(100%); width: 40%; }\n      100% { transform: translateX(300%); width: 40%; }\n    }\n\n    /* ── Token metadata ── */\n    .meta {\n      display: flex;\n      gap: var(--cg-spacing-16);\n      margin-top: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .meta-item {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n    }\n    .meta-label { opacity: 0.6; }\n\n    /* ── Tool tags ── */\n    .tools {\n      display: flex;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-8);\n      flex-wrap: wrap;\n    }\n    .tool-tag {\n      font-size: var(--cg-font-size-xs);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-cards-background);\n      color: var(--cg-color-surface-container-outlined);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-family: var(--cg-font-family-mono);\n    }\n\n    /* ── Detail panel ── */\n    .detail {\n      margin-top: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      background: var(--cg-color-surface-base-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      font-size: var(--cg-font-size-xs);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-relaxed);\n      white-space: pre-wrap;\n      max-height: var(--cg-spacing-96);\n      overflow-y: auto;\n    }\n\n    /* ── Nested children ── */\n    .children {\n      margin-top: var(--cg-spacing-8);\n    }\n    .children .step {\n      padding: var(--cg-spacing-4) var(--cg-spacing-4);\n      animation: none;\n    }\n    .children .dot { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }\n    .children .dot svg { width: var(--cg-spacing-8); height: var(--cg-spacing-8); }\n    .children .line { min-height: var(--cg-spacing-4); }\n    .children .step-label { font-size: var(--cg-font-size-xs); }\n    .children .line-col { width: var(--cg-spacing-16); }\n    .children .content { padding-bottom: var(--cg-spacing-2); }\n\n    /* ── Compact ── */\n    :host([compact]) .step { padding: var(--cg-spacing-4) var(--cg-spacing-6); }\n    :host([compact]) .dot { width: var(--cg-spacing-16); height: var(--cg-spacing-16); }\n    :host([compact]) .dot svg { width: var(--cg-spacing-8); height: var(--cg-spacing-8); }\n    :host([compact]) .line-col { width: var(--cg-spacing-16); }\n    :host([compact]) .step-label { font-size: var(--cg-font-size-xs); }\n    :host([compact]) .detail,\n    :host([compact]) .tools,\n    :host([compact]) .meta,\n    :host([compact]) .children,\n    :host([compact]) .duration-bar { display: none; }\n\n    .step:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .step { animation: none; }\n      .dot.active { animation: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n      .dot.complete svg { animation: none; }\n      .step.active .duration-fill { animation: none; width: 50%; }\n      .step.active .step-label { animation: none; -webkit-text-fill-color: currentColor; }\n    }\n  `];\n\n  @property({ type: Array }) steps: TimelineStep[] = [];\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  private _expandedIndex = -1;\n\n  private _getIcon(status: string) {\n    if (status === 'complete') return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>`;\n    if (status === 'error') return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`;\n    if (status === 'active') return html`<svg viewBox=\"0 0 8 8\"><circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"currentColor\"/></svg>`;\n    return html`<svg viewBox=\"0 0 8 8\"><circle cx=\"4\" cy=\"4\" r=\"2.5\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1\"/></svg>`;\n  }\n\n  private _formatDuration(ms?: number): string {\n    if (!ms) return '';\n    if (ms < 1000) return `${ms}ms`;\n    return `${(ms / 1000).toFixed(1)}s`;\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  private _handleStepClick(index: number) {\n    this._expandedIndex = this._expandedIndex === index ? -1 : index;\n    this.requestUpdate();\n    this.dispatchEvent(new CustomEvent('ai-timeline-step-click', {\n      bubbles: true, composed: true,\n      detail: { index, step: this.steps[index] },\n    }));\n  }\n\n  private _getMaxDuration(): number {\n    return Math.max(...this.steps.map(s => s.duration || 0), 1);\n  }\n\n  private _renderStep(step: TimelineStep, isLast: boolean) {\n    return html`\n      <div class=\"line-col\">\n        <div class=\"dot ${step.status}\" aria-hidden=\"true\">${this._getIcon(step.status)}</div>\n        ${!isLast ? html`<div class=\"line\"></div>` : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    if (this.steps.length === 0) return nothing;\n    const maxDuration = this._getMaxDuration();\n\n    return html`\n      <div class=\"timeline\" role=\"list\" aria-label=\"Execution timeline\">\n        ${this.steps.map((step, i) => html`\n          <div class=\"step ${step.status}\" role=\"listitem\" style=\"--step-index: ${i}\"\n            aria-current=\"${step.status === 'active' ? 'step' : nothing}\"\n            tabindex=\"0\"\n            @click=${() => this._handleStepClick(i)}\n            @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleStepClick(i); } }}>\n\n            ${this._renderStep(step, i === this.steps.length - 1)}\n\n            <div class=\"content\">\n              <div class=\"step-header\">\n                <span class=\"step-label\">${step.label}</span>\n                ${step.duration ? html`<span class=\"step-duration\">${this._formatDuration(step.duration)}</span>` : nothing}\n              </div>\n\n              ${step.duration || step.status === 'active' ? html`\n                <div class=\"duration-bar\">\n                  <div class=\"duration-fill\" style=\"width: ${step.status === 'active' ? '100' : Math.round((step.duration || 0) / maxDuration * 100)}%\"></div>\n                </div>\n              ` : nothing}\n\n              ${step.tokens ? html`\n                <div class=\"meta\">\n                  ${step.tokens.input ? html`<span class=\"meta-item\"><span class=\"meta-label\">in</span> ${this._formatTokens(step.tokens.input)}</span>` : nothing}\n                  ${step.tokens.output ? html`<span class=\"meta-item\"><span class=\"meta-label\">out</span> ${this._formatTokens(step.tokens.output)}</span>` : nothing}\n                </div>\n              ` : nothing}\n\n              ${step.tools && step.tools.length > 0 ? html`\n                <div class=\"tools\">\n                  ${step.tools.map(t => html`<span class=\"tool-tag\">${t}</span>`)}\n                </div>\n              ` : nothing}\n\n              ${this._expandedIndex === i && step.detail ? html`\n                <div class=\"detail\">${step.detail}</div>\n              ` : nothing}\n\n              ${step.children && step.children.length > 0 ? html`\n                <div class=\"children\">\n                  ${step.children.map((child, ci) => html`\n                    <div class=\"step ${child.status}\">\n                      ${this._renderStep(child, ci === step.children!.length - 1)}\n                      <div class=\"content\">\n                        <div class=\"step-header\">\n                          <span class=\"step-label\">${child.label}</span>\n                          ${child.duration ? html`<span class=\"step-duration\">${this._formatDuration(child.duration)}</span>` : nothing}\n                        </div>\n                      </div>\n                    </div>\n                  `)}\n                </div>\n              ` : nothing}\n            </div>\n          </div>\n        `)}\n      </div>\n    `;\n  }\n}\n"],"names":["AiTimeline","LitElement","status","html","ms","n","index","s","step","isLast","nothing","maxDuration","t","child","ci","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-token-tracker/ai-token-tracker.js

@@ -1,6 +1,6 @@
 import { css as u, LitElement as p, html as i, nothing as g } from "lit";
 import { property as r, customElement as v } from "lit/decorators.js";
-import { h as b, r as f, f as h } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as b, r as f, f as h } from "../../chunks/premium.css-DHekUEUt.js";
 var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, e = (s, o, n, c) => {
   for (var a = c > 1 ? void 0 : c ? y(o, n) : o, l = s.length - 1, d; l >= 0; l--)
     (d = s[l]) && (a = (c ? d(o, n, a) : d(a)) || a);
@@ -101,7 +101,7 @@ t.styles = [b, f, h, u`
       border-radius: var(--cg-border-radius-100);
       background: var(--cg-color-surface-container-background);
       border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
-      font-size: var(--cg-font-size-xs);
+      font-size: var(--cg-font-size-sm);
       font-family: var(--cg-font-family-mono);
       color: var(--cg-color-input-text-placeholder);
       cursor: pointer;
@@ -202,7 +202,7 @@ t.styles = [b, f, h, u`
 
     :focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 var(--cg-focus-ring-width) var(--cg-overlay-accent-strong);
     }
   `];
 e([

package/dist/components/ai-token-tracker/ai-token-tracker.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-token-tracker.js","sources":["../../../src/components/ai-token-tracker/ai-token-tracker.ts"],"sourcesContent":["/**\n * @element ai-token-tracker\n * LLM token usage and cost display with compact (inline badge) and\n * detailed (card with metrics grid) modes. Shows input/output tokens,\n * cost, latency bar, model badge, and optional budget progress bar.\n *\n * @example\n * ```html\n * <ai-token-tracker mode=\"compact\" inputTokens=\"1200\" outputTokens=\"340\" cost=\"0.0042\" latency=\"890\"></ai-token-tracker>\n * <ai-token-tracker mode=\"detailed\" inputTokens=\"1200\" outputTokens=\"340\" cost=\"0.0042\"\n *   latency=\"890\" model=\"gpt-4\" budget=\"1.00\"></ai-token-tracker>\n * ```\n *\n * @prop {number} inputTokens - Input token count\n * @prop {number} outputTokens - Output token count\n * @prop {number} cost - Cost in dollars\n * @prop {number} latency - Response latency in ms\n * @prop {string} model - Model name for the badge\n * @prop {number} budget - Max cost budget (shows progress bar when > 0)\n * @prop {'compact'|'detailed'} mode - Display mode (default 'compact')\n *\n * @fires {CustomEvent} ai-token-click - When the compact badge is clicked\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-token-tracker')\nexport class AiTokenTracker 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\n    /* Compact mode */\n    .compact {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xs);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-input-text-placeholder);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .compact:hover { border-color: var(--cg-color-input-border-hover); }\n    .compact:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .compact .sep { color: var(--cg-color-surface-cards-border); }\n    .compact .tokens { color: var(--cg-color-surface-base-text); font-weight: var(--cg-font-weight-bold); }\n    .compact .cost-val { color: var(--cg-color-status-success-text-default); }\n    .compact .latency-val { color: var(--cg-color-input-text-placeholder); }\n\n    /* Detailed mode */\n    .detailed {\n      padding: var(--cg-spacing-20);\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      min-width: 320px;\n    }\n\n    .detail-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .detail-title {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-input-text-placeholder);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .model-badge {\n      font-size: var(--cg-font-size-xs);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-overlay-accent-subtle);\n      color: var(--cg-color-surface-base-text);\n      font-weight: var(--cg-font-weight-medium);\n    }\n\n    .metrics {\n      display: flex;\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .metric {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n      padding: 0 var(--cg-spacing-16);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .metric:first-child { padding-left: 0; }\n    .metric:last-child { border-right: none; padding-right: 0; }\n    .metric-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .metric-value {\n      font-size: var(--cg-font-size-lg);\n      font-weight: var(--cg-font-weight-semibold);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-base-text);\n      letter-spacing: var(--cg-letter-spacing-tight);\n    }\n    .metric-value.green { color: var(--cg-color-status-success-text-default); }\n\n    /* Budget */\n    .budget {\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .budget-header {\n      display: flex;\n      justify-content: space-between;\n      font-size: var(--cg-font-size-xs);\n      margin-bottom: var(--cg-spacing-6);\n    }\n    .budget-label { color: var(--cg-color-input-text-placeholder); }\n    .budget-value { color: var(--cg-color-surface-base-text); font-weight: var(--cg-font-weight-semibold); }\n    .budget-bar {\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-spacing-4);\n      background: var(--cg-color-surface-container-background);\n      overflow: hidden;\n    }\n    .budget-fill {\n      height: 100%;\n      border-radius: var(--cg-spacing-4);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    .budget-fill.ok { background: var(--cg-color-status-success-text-default); }\n    .budget-fill.warning { background: var(--cg-color-status-warning-text-default); }\n    .budget-fill.danger { background: var(--cg-color-status-error-text-default); }\n\n    :focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n  `];\n\n  @property({ type: Number }) inputTokens: number = 0;\n  @property({ type: Number }) outputTokens: number = 0;\n  @property({ type: Number }) cost: number = 0;\n  @property({ type: Number }) latency: number = 0; // ms\n  @property({ type: String }) model: string = '';\n  @property({ type: Number }) budget: number = 0; // max cost\n  @property({ type: String }) mode: 'compact' | 'detailed' = 'compact';\n\n  private get _totalTokens() { return this.inputTokens + this.outputTokens; }\n  private get _costStr() { return this.cost > 0 ? `$${this.cost.toFixed(4)}` : '$0'; }\n  private get _latencyStr() {\n    if (this.latency < 1000) return `${this.latency}ms`;\n    return `${(this.latency / 1000).toFixed(1)}s`;\n  }\n  private get _latencyClass() {\n    if (this.latency < 1000) return 'fast';\n    if (this.latency < 3000) return 'medium';\n    return 'slow';\n  }\n  private get _budgetPct() {\n    if (this.budget <= 0) return 0;\n    return Math.min((this.cost / this.budget) * 100, 100);\n  }\n  private get _budgetClass() {\n    const pct = this._budgetPct;\n    if (pct < 60) return 'ok';\n    if (pct < 85) return 'warning';\n    return 'danger';\n  }\n\n  private _handleClick() {\n    this.dispatchEvent(new CustomEvent('ai-token-click', {\n      bubbles: true, composed: true,\n      detail: { inputTokens: this.inputTokens, outputTokens: this.outputTokens, cost: this.cost, latency: this.latency, model: this.model },\n    }));\n  }\n\n  override render() {\n    if (this.mode === 'compact') {\n      return html`\n        <div class=\"compact\" role=\"status\" aria-live=\"polite\" aria-label=\"Token usage: ${this._totalTokens} tokens, ${this._costStr}, ${this._latencyStr}\"\n          @click=${this._handleClick}>\n          <span class=\"tokens\">${this._totalTokens.toLocaleString()}</span> tokens\n          <span class=\"sep\">·</span>\n          <span class=\"cost-val\">${this._costStr}</span>\n          <span class=\"sep\">·</span>\n          <span class=\"latency-val\">${this._latencyStr}</span>\n        </div>\n      `;\n    }\n\n    return html`\n      <div class=\"detailed\" role=\"status\" aria-live=\"polite\" aria-label=\"Token usage details\">\n        <div class=\"detail-header\">\n          <span class=\"detail-title\">Usage</span>\n          ${this.model ? html`<span class=\"model-badge\">${this.model}</span>` : nothing}\n        </div>\n\n        <div class=\"metrics\">\n          <div class=\"metric\">\n            <span class=\"metric-label\">Input</span>\n            <span class=\"metric-value\">${this.inputTokens.toLocaleString()}</span>\n          </div>\n          <div class=\"metric\">\n            <span class=\"metric-label\">Output</span>\n            <span class=\"metric-value\">${this.outputTokens.toLocaleString()}</span>\n          </div>\n          <div class=\"metric\">\n            <span class=\"metric-label\">Cost</span>\n            <span class=\"metric-value green\">${this._costStr}</span>\n          </div>\n          <div class=\"metric\">\n            <span class=\"metric-label\">Latency</span>\n            <span class=\"metric-value\">${this._latencyStr}</span>\n          </div>\n        </div>\n\n        ${this.budget > 0 ? html`\n          <div class=\"budget\">\n            <div class=\"budget-header\">\n              <span class=\"budget-label\">Budget</span>\n              <span class=\"budget-value\">${this._costStr} / $${this.budget.toFixed(2)}</span>\n            </div>\n            <div class=\"budget-bar\">\n              <div class=\"budget-fill ${this._budgetClass}\" style=\"width: ${this._budgetPct}%\"></div>\n            </div>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiTokenTracker","LitElement","pct","html","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-token-tracker.js","sources":["../../../src/components/ai-token-tracker/ai-token-tracker.ts"],"sourcesContent":["/**\n * @element ai-token-tracker\n * LLM token usage and cost display with compact (inline badge) and\n * detailed (card with metrics grid) modes. Shows input/output tokens,\n * cost, latency bar, model badge, and optional budget progress bar.\n *\n * @example\n * ```html\n * <ai-token-tracker mode=\"compact\" inputTokens=\"1200\" outputTokens=\"340\" cost=\"0.0042\" latency=\"890\"></ai-token-tracker>\n * <ai-token-tracker mode=\"detailed\" inputTokens=\"1200\" outputTokens=\"340\" cost=\"0.0042\"\n *   latency=\"890\" model=\"gpt-4\" budget=\"1.00\"></ai-token-tracker>\n * ```\n *\n * @prop {number} inputTokens - Input token count\n * @prop {number} outputTokens - Output token count\n * @prop {number} cost - Cost in dollars\n * @prop {number} latency - Response latency in ms\n * @prop {string} model - Model name for the badge\n * @prop {number} budget - Max cost budget (shows progress bar when > 0)\n * @prop {'compact'|'detailed'} mode - Display mode (default 'compact')\n *\n * @fires {CustomEvent} ai-token-click - When the compact badge is clicked\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-token-tracker')\nexport class AiTokenTracker 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\n    /* Compact mode */\n    .compact {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-sm);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-input-text-placeholder);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .compact:hover { border-color: var(--cg-color-input-border-hover); }\n    .compact:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .compact .sep { color: var(--cg-color-surface-cards-border); }\n    .compact .tokens { color: var(--cg-color-surface-base-text); font-weight: var(--cg-font-weight-bold); }\n    .compact .cost-val { color: var(--cg-color-status-success-text-default); }\n    .compact .latency-val { color: var(--cg-color-input-text-placeholder); }\n\n    /* Detailed mode */\n    .detailed {\n      padding: var(--cg-spacing-20);\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      min-width: 320px;\n    }\n\n    .detail-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .detail-title {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-input-text-placeholder);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .model-badge {\n      font-size: var(--cg-font-size-xs);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-overlay-accent-subtle);\n      color: var(--cg-color-surface-base-text);\n      font-weight: var(--cg-font-weight-medium);\n    }\n\n    .metrics {\n      display: flex;\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .metric {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n      padding: 0 var(--cg-spacing-16);\n      border-right: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .metric:first-child { padding-left: 0; }\n    .metric:last-child { border-right: none; padding-right: 0; }\n    .metric-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .metric-value {\n      font-size: var(--cg-font-size-lg);\n      font-weight: var(--cg-font-weight-semibold);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-base-text);\n      letter-spacing: var(--cg-letter-spacing-tight);\n    }\n    .metric-value.green { color: var(--cg-color-status-success-text-default); }\n\n    /* Budget */\n    .budget {\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .budget-header {\n      display: flex;\n      justify-content: space-between;\n      font-size: var(--cg-font-size-xs);\n      margin-bottom: var(--cg-spacing-6);\n    }\n    .budget-label { color: var(--cg-color-input-text-placeholder); }\n    .budget-value { color: var(--cg-color-surface-base-text); font-weight: var(--cg-font-weight-semibold); }\n    .budget-bar {\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-spacing-4);\n      background: var(--cg-color-surface-container-background);\n      overflow: hidden;\n    }\n    .budget-fill {\n      height: 100%;\n      border-radius: var(--cg-spacing-4);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n    .budget-fill.ok { background: var(--cg-color-status-success-text-default); }\n    .budget-fill.warning { background: var(--cg-color-status-warning-text-default); }\n    .budget-fill.danger { background: var(--cg-color-status-error-text-default); }\n\n    :focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-focus-ring-width) var(--cg-overlay-accent-strong);\n    }\n  `];\n\n  @property({ type: Number }) inputTokens: number = 0;\n  @property({ type: Number }) outputTokens: number = 0;\n  @property({ type: Number }) cost: number = 0;\n  @property({ type: Number }) latency: number = 0; // ms\n  @property({ type: String }) model: string = '';\n  @property({ type: Number }) budget: number = 0; // max cost\n  @property({ type: String }) mode: 'compact' | 'detailed' = 'compact';\n\n  private get _totalTokens() { return this.inputTokens + this.outputTokens; }\n  private get _costStr() { return this.cost > 0 ? `$${this.cost.toFixed(4)}` : '$0'; }\n  private get _latencyStr() {\n    if (this.latency < 1000) return `${this.latency}ms`;\n    return `${(this.latency / 1000).toFixed(1)}s`;\n  }\n  private get _latencyClass() {\n    if (this.latency < 1000) return 'fast';\n    if (this.latency < 3000) return 'medium';\n    return 'slow';\n  }\n  private get _budgetPct() {\n    if (this.budget <= 0) return 0;\n    return Math.min((this.cost / this.budget) * 100, 100);\n  }\n  private get _budgetClass() {\n    const pct = this._budgetPct;\n    if (pct < 60) return 'ok';\n    if (pct < 85) return 'warning';\n    return 'danger';\n  }\n\n  private _handleClick() {\n    this.dispatchEvent(new CustomEvent('ai-token-click', {\n      bubbles: true, composed: true,\n      detail: { inputTokens: this.inputTokens, outputTokens: this.outputTokens, cost: this.cost, latency: this.latency, model: this.model },\n    }));\n  }\n\n  override render() {\n    if (this.mode === 'compact') {\n      return html`\n        <div class=\"compact\" role=\"status\" aria-live=\"polite\" aria-label=\"Token usage: ${this._totalTokens} tokens, ${this._costStr}, ${this._latencyStr}\"\n          @click=${this._handleClick}>\n          <span class=\"tokens\">${this._totalTokens.toLocaleString()}</span> tokens\n          <span class=\"sep\">·</span>\n          <span class=\"cost-val\">${this._costStr}</span>\n          <span class=\"sep\">·</span>\n          <span class=\"latency-val\">${this._latencyStr}</span>\n        </div>\n      `;\n    }\n\n    return html`\n      <div class=\"detailed\" role=\"status\" aria-live=\"polite\" aria-label=\"Token usage details\">\n        <div class=\"detail-header\">\n          <span class=\"detail-title\">Usage</span>\n          ${this.model ? html`<span class=\"model-badge\">${this.model}</span>` : nothing}\n        </div>\n\n        <div class=\"metrics\">\n          <div class=\"metric\">\n            <span class=\"metric-label\">Input</span>\n            <span class=\"metric-value\">${this.inputTokens.toLocaleString()}</span>\n          </div>\n          <div class=\"metric\">\n            <span class=\"metric-label\">Output</span>\n            <span class=\"metric-value\">${this.outputTokens.toLocaleString()}</span>\n          </div>\n          <div class=\"metric\">\n            <span class=\"metric-label\">Cost</span>\n            <span class=\"metric-value green\">${this._costStr}</span>\n          </div>\n          <div class=\"metric\">\n            <span class=\"metric-label\">Latency</span>\n            <span class=\"metric-value\">${this._latencyStr}</span>\n          </div>\n        </div>\n\n        ${this.budget > 0 ? html`\n          <div class=\"budget\">\n            <div class=\"budget-header\">\n              <span class=\"budget-label\">Budget</span>\n              <span class=\"budget-value\">${this._costStr} / $${this.budget.toFixed(2)}</span>\n            </div>\n            <div class=\"budget-bar\">\n              <div class=\"budget-fill ${this._budgetClass}\" style=\"width: ${this._budgetPct}%\"></div>\n            </div>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiTokenTracker","LitElement","pct","html","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-tool-card-resolver/ai-tool-card-resolver.js

@@ -1,12 +1,12 @@
 import { css as h, LitElement as g, html as l } from "lit";
-import { property as n, state as v, customElement as u } from "lit/decorators.js";
-import { h as f, r as p, b, f as m } from "../../chunks/premium.css-9I4kHrsl.js";
-var _ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, s = (r, e, a, o) => {
-  for (var i = o > 1 ? void 0 : o ? k(e, a) : e, c = r.length - 1, d; c >= 0; c--)
-    (d = r[c]) && (i = (o ? d(e, a, i) : d(i)) || i);
-  return o && i && _(e, a, i), i;
+import { property as n, state as v, customElement as f } from "lit/decorators.js";
+import { h as u, r as p, b, f as m } from "../../chunks/premium.css-DHekUEUt.js";
+var _ = Object.defineProperty, k = Object.getOwnPropertyDescriptor, s = (r, e, a, t) => {
+  for (var i = t > 1 ? void 0 : t ? k(e, a) : e, c = r.length - 1, d; c >= 0; c--)
+    (d = r[c]) && (i = (t ? d(e, a, i) : d(i)) || i);
+  return t && i && _(e, a, i), i;
 };
-let t = class extends g {
+let o = class extends g {
   constructor() {
     super(...arguments), this.toolName = "", this.toolData = null, this.registry = {}, this.loading = !1, this._error = "", this._cachedEl = null, this._cachedKey = "";
   }
@@ -29,11 +29,11 @@ let t = class extends g {
     this._abortController?.abort(), this._abortController = new AbortController();
     try {
       const a = document.createElement(r);
-      return a.data = this.toolData, a.toolData = this.toolData, a.addEventListener("ai-tool-card-action", ((o) => {
+      return a.data = this.toolData, a.toolData = this.toolData, a.addEventListener("ai-tool-card-action", ((t) => {
         this._dispatch("ai-tool-card-action", {
           toolName: this.toolName,
-          action: o.detail?.action,
-          data: o.detail?.data
+          action: t.detail?.action,
+          data: t.detail?.data
         });
       }), { signal: this._abortController.signal }), this._cachedEl = a, this._cachedKey = e, a;
     } catch (a) {
@@ -96,7 +96,7 @@ let t = class extends g {
     return e ? l`<div class="resolved">${e}</div>` : this._error ? this._renderError() : this._renderFallback();
   }
 };
-t.styles = [f, p, b, m, h`
+o.styles = [u, p, b, m, h`
     :host {
       animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
@@ -165,7 +165,7 @@ t.styles = [f, p, b, m, h`
       overflow-x: auto;
       white-space: pre-wrap;
       word-break: break-all;
-      max-height: var(300px);
+      max-height: var(--cg-spacing-256);
       overflow-y: auto;
     }
 
@@ -177,13 +177,13 @@ t.styles = [f, p, b, m, h`
       gap: var(--cg-spacing-8);
     }
     .error-icon {
-      color: var(--cg-color-status-error-text-default);
+      color: var(--cg-color-ai-error-text);
       font-size: var(--cg-font-size-base);
       flex-shrink: 0;
     }
     .error-text {
       font-size: var(--cg-font-size-sm);
-      color: var(--cg-color-status-error-text-default);
+      color: var(--cg-color-ai-error-text);
     }
 
     /* ── Resolved component host ── */
@@ -203,23 +203,23 @@ t.styles = [f, p, b, m, h`
   `];
 s([
   n({ type: String })
-], t.prototype, "toolName", 2);
+], o.prototype, "toolName", 2);
 s([
   n({ attribute: !1 })
-], t.prototype, "toolData", 2);
+], o.prototype, "toolData", 2);
 s([
   n({ attribute: !1 })
-], t.prototype, "registry", 2);
+], o.prototype, "registry", 2);
 s([
   n({ type: Boolean })
-], t.prototype, "loading", 2);
+], o.prototype, "loading", 2);
 s([
   v()
-], t.prototype, "_error", 2);
-t = s([
-  u("ai-tool-card-resolver")
-], t);
+], o.prototype, "_error", 2);
+o = s([
+  f("ai-tool-card-resolver")
+], o);
 export {
-  t as AiToolCardResolver
+  o as AiToolCardResolver
 };
 //# sourceMappingURL=ai-tool-card-resolver.js.map

package/dist/components/ai-tool-card-resolver/ai-tool-card-resolver.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-tool-card-resolver.js","sources":["../../../src/components/ai-tool-card-resolver/ai-tool-card-resolver.ts"],"sourcesContent":["/**\n * @element ai-tool-card-resolver\n * Dynamic card renderer that maps tool call names to registered web\n * components via a registry. Shows a loading skeleton while resolving,\n * falls back to raw JSON display if no match, and includes an error\n * boundary if the resolved component throws.\n *\n * @example\n * ```html\n * <ai-tool-card-resolver\n *   toolName=\"invoice\"\n *   .toolData=${{ id: 'INV-001', total: 250 }}\n *   .registry=${{ invoice: 'app-invoice-card', chart: 'app-chart-card' }}\n * ></ai-tool-card-resolver>\n * ```\n *\n * @prop {string} toolName - Tool call name to resolve (e.g. 'invoice')\n * @prop {unknown} toolData - Data passed to the resolved component\n * @prop {Record<string, string>} registry - Map of tool names to component tag names\n * @prop {boolean} loading - Force loading skeleton display\n *\n * @fires {CustomEvent<{toolName: string, action: string}>} ai-tool-card-action - Proxied from resolved component\n * @fires {CustomEvent<{toolName: string, error: string}>} ai-tool-card-error - When resolution fails\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, shimmerKeyframes, fadeSlideInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-tool-card-resolver')\nexport class AiToolCardResolver extends LitElement {\n  static override styles = [hostBlock, reducedMotion, shimmerKeyframes, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .card {\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      overflow: hidden;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .card:hover {\n      border-color: var(--cg-color-input-border-hover);\n    }\n\n    /* ── Loading skeleton ── */\n    .skeleton {\n      padding: var(--cg-spacing-16);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n    .skeleton-line {\n      height: var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      background: linear-gradient(\n        90deg,\n        var(--cg-color-surface-container-background) 25%,\n        var(--cg-color-surface-cards-border) 50%,\n        var(--cg-color-surface-container-background) 75%\n      );\n      background-size: 200% 100%;\n      animation: shimmer 1.5s linear infinite;\n    }\n    .skeleton-line:nth-child(1) { width: 60%; }\n    .skeleton-line:nth-child(2) { width: 90%; }\n    .skeleton-line:nth-child(3) { width: 75%; }\n\n    /* ── Fallback (raw JSON) ── */\n    .fallback {\n      padding: var(--cg-spacing-16);\n    }\n    .fallback-header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .fallback-icon {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n    }\n    .fallback-title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n    .fallback-json {\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-xs);\n      line-height: 1.5;\n      color: var(--cg-color-input-text-placeholder);\n      background: var(--cg-color-surface-base-background);\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-12);\n      overflow-x: auto;\n      white-space: pre-wrap;\n      word-break: break-all;\n      max-height: var(300px);\n      overflow-y: auto;\n    }\n\n    /* ── Error state ── */\n    .error {\n      padding: var(--cg-spacing-16);\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n    .error-icon {\n      color: var(--cg-color-status-error-text-default);\n      font-size: var(--cg-font-size-base);\n      flex-shrink: 0;\n    }\n    .error-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    /* ── Resolved component host ── */\n    .resolved {\n      padding: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host { animation: none; }\n      .skeleton-line { animation: none; }\n    }\n\n    :focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n  `];\n\n  /** Tool call name, e.g. \"invoice\" or \"search_results\" */\n  @property({ type: String }) toolName = '';\n\n  /** The tool's output data (passed as property to resolved component) */\n  @property({ attribute: false }) toolData: unknown = null;\n\n  /** Registry mapping tool names to component tag names */\n  @property({ attribute: false }) registry: Record<string, string> = {};\n\n  /** Show loading skeleton */\n  @property({ type: Boolean }) loading = false;\n\n  @state() private _error = '';\n\n  /** Cached resolved element keyed by toolName + tag */\n  private _cachedEl: HTMLElement | null = null;\n  private _cachedKey = '';\n\n  private _dispatch(name: string, detail: unknown) {\n    this.dispatchEvent(new CustomEvent(name, {\n      bubbles: true, composed: true, detail,\n    }));\n  }\n\n  private _abortController?: AbortController;\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._abortController?.abort();\n  }\n\n  private _resolveComponent(): HTMLElement | null {\n    const tag = this.registry[this.toolName];\n    if (!tag) return null;\n\n    const cacheKey = `${this.toolName}::${tag}`;\n\n    // Return cached element if key matches, just update data\n    if (this._cachedEl && this._cachedKey === cacheKey) {\n      (this._cachedEl as unknown as Record<string, unknown>)['data'] = this.toolData;\n      (this._cachedEl as unknown as Record<string, unknown>)['toolData'] = this.toolData;\n      return this._cachedEl;\n    }\n\n    // Clean up previous listeners\n    this._abortController?.abort();\n    this._abortController = new AbortController();\n\n    try {\n      const el = document.createElement(tag);\n      (el as unknown as Record<string, unknown>)['data'] = this.toolData;\n      (el as unknown as Record<string, unknown>)['toolData'] = this.toolData;\n      el.addEventListener('ai-tool-card-action', ((e: CustomEvent) => {\n        this._dispatch('ai-tool-card-action', {\n          toolName: this.toolName, action: e.detail?.action, data: e.detail?.data,\n        });\n      }) as EventListener, { signal: this._abortController.signal });\n\n      // Cache the element\n      this._cachedEl = el;\n      this._cachedKey = cacheKey;\n\n      return el;\n    } catch (err) {\n      this._error = err instanceof Error ? err.message : 'Component failed to render';\n      this._dispatch('ai-tool-card-error', {\n        toolName: this.toolName, error: this._error,\n      });\n      return null;\n    }\n  }\n\n  private _renderLoading() {\n    return html`\n      <div class=\"skeleton\" role=\"status\" aria-label=\"Loading tool card\">\n        <div class=\"skeleton-line\"></div>\n        <div class=\"skeleton-line\"></div>\n        <div class=\"skeleton-line\"></div>\n      </div>\n    `;\n  }\n\n  private _renderFallback() {\n    let jsonStr = '';\n    try {\n      jsonStr = JSON.stringify(this.toolData, null, 2);\n    } catch {\n      jsonStr = String(this.toolData);\n    }\n    return html`\n      <div class=\"fallback\">\n        <div class=\"fallback-header\">\n          <span class=\"fallback-icon\" aria-hidden=\"true\">&#9881;</span>\n          <span class=\"fallback-title\">${this.toolName || 'Tool Result'}</span>\n        </div>\n        <div class=\"fallback-json\" role=\"log\">${jsonStr}</div>\n      </div>\n    `;\n  }\n\n  private _renderError() {\n    return html`\n      <div class=\"error\" role=\"alert\">\n        <span class=\"error-icon\" aria-hidden=\"true\">&#9888;</span>\n        <span class=\"error-text\">Error resolving \"${this.toolName}\": ${this._error}</span>\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"card\"\n        role=\"region\"\n        aria-label=\"Tool card: ${this.toolName || 'unknown'}\"\n        tabindex=\"0\"\n      >\n        ${this.loading ? this._renderLoading()\n          : this._error ? this._renderError()\n          : this._renderResolved()}\n      </div>\n    `;\n  }\n\n  private _renderResolved() {\n    if (!this.toolName) return this._renderFallback();\n\n    const tag = this.registry[this.toolName];\n    if (!tag) return this._renderFallback();\n\n    const el = this._resolveComponent();\n    if (!el) return this._error ? this._renderError() : this._renderFallback();\n\n    return html`<div class=\"resolved\">${el}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-tool-card-resolver': AiToolCardResolver;\n  }\n}\n"],"names":["AiToolCardResolver","LitElement","name","detail","tag","cacheKey","el","e","err","html","jsonStr","hostBlock","reducedMotion","shimmerKeyframes","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-tool-card-resolver.js","sources":["../../../src/components/ai-tool-card-resolver/ai-tool-card-resolver.ts"],"sourcesContent":["/**\n * @element ai-tool-card-resolver\n * Dynamic card renderer that maps tool call names to registered web\n * components via a registry. Shows a loading skeleton while resolving,\n * falls back to raw JSON display if no match, and includes an error\n * boundary if the resolved component throws.\n *\n * @example\n * ```html\n * <ai-tool-card-resolver\n *   toolName=\"invoice\"\n *   .toolData=${{ id: 'INV-001', total: 250 }}\n *   .registry=${{ invoice: 'app-invoice-card', chart: 'app-chart-card' }}\n * ></ai-tool-card-resolver>\n * ```\n *\n * @prop {string} toolName - Tool call name to resolve (e.g. 'invoice')\n * @prop {unknown} toolData - Data passed to the resolved component\n * @prop {Record<string, string>} registry - Map of tool names to component tag names\n * @prop {boolean} loading - Force loading skeleton display\n *\n * @fires {CustomEvent<{toolName: string, action: string}>} ai-tool-card-action - Proxied from resolved component\n * @fires {CustomEvent<{toolName: string, error: string}>} ai-tool-card-error - When resolution fails\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, shimmerKeyframes, fadeSlideInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-tool-card-resolver')\nexport class AiToolCardResolver extends LitElement {\n  static override styles = [hostBlock, reducedMotion, shimmerKeyframes, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .card {\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      overflow: hidden;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .card:hover {\n      border-color: var(--cg-color-input-border-hover);\n    }\n\n    /* ── Loading skeleton ── */\n    .skeleton {\n      padding: var(--cg-spacing-16);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n    .skeleton-line {\n      height: var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      background: linear-gradient(\n        90deg,\n        var(--cg-color-surface-container-background) 25%,\n        var(--cg-color-surface-cards-border) 50%,\n        var(--cg-color-surface-container-background) 75%\n      );\n      background-size: 200% 100%;\n      animation: shimmer 1.5s linear infinite;\n    }\n    .skeleton-line:nth-child(1) { width: 60%; }\n    .skeleton-line:nth-child(2) { width: 90%; }\n    .skeleton-line:nth-child(3) { width: 75%; }\n\n    /* ── Fallback (raw JSON) ── */\n    .fallback {\n      padding: var(--cg-spacing-16);\n    }\n    .fallback-header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .fallback-icon {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n    }\n    .fallback-title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n    .fallback-json {\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-xs);\n      line-height: 1.5;\n      color: var(--cg-color-input-text-placeholder);\n      background: var(--cg-color-surface-base-background);\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-12);\n      overflow-x: auto;\n      white-space: pre-wrap;\n      word-break: break-all;\n      max-height: var(--cg-spacing-256);\n      overflow-y: auto;\n    }\n\n    /* ── Error state ── */\n    .error {\n      padding: var(--cg-spacing-16);\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n    .error-icon {\n      color: var(--cg-color-ai-error-text);\n      font-size: var(--cg-font-size-base);\n      flex-shrink: 0;\n    }\n    .error-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-ai-error-text);\n    }\n\n    /* ── Resolved component host ── */\n    .resolved {\n      padding: 0;\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host { animation: none; }\n      .skeleton-line { animation: none; }\n    }\n\n    :focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n  `];\n\n  /** Tool call name, e.g. \"invoice\" or \"search_results\" */\n  @property({ type: String }) toolName = '';\n\n  /** The tool's output data (passed as property to resolved component) */\n  @property({ attribute: false }) toolData: unknown = null;\n\n  /** Registry mapping tool names to component tag names */\n  @property({ attribute: false }) registry: Record<string, string> = {};\n\n  /** Show loading skeleton */\n  @property({ type: Boolean }) loading = false;\n\n  @state() private _error = '';\n\n  /** Cached resolved element keyed by toolName + tag */\n  private _cachedEl: HTMLElement | null = null;\n  private _cachedKey = '';\n\n  private _dispatch(name: string, detail: unknown) {\n    this.dispatchEvent(new CustomEvent(name, {\n      bubbles: true, composed: true, detail,\n    }));\n  }\n\n  private _abortController?: AbortController;\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._abortController?.abort();\n  }\n\n  private _resolveComponent(): HTMLElement | null {\n    const tag = this.registry[this.toolName];\n    if (!tag) return null;\n\n    const cacheKey = `${this.toolName}::${tag}`;\n\n    // Return cached element if key matches, just update data\n    if (this._cachedEl && this._cachedKey === cacheKey) {\n      (this._cachedEl as unknown as Record<string, unknown>)['data'] = this.toolData;\n      (this._cachedEl as unknown as Record<string, unknown>)['toolData'] = this.toolData;\n      return this._cachedEl;\n    }\n\n    // Clean up previous listeners\n    this._abortController?.abort();\n    this._abortController = new AbortController();\n\n    try {\n      const el = document.createElement(tag);\n      (el as unknown as Record<string, unknown>)['data'] = this.toolData;\n      (el as unknown as Record<string, unknown>)['toolData'] = this.toolData;\n      el.addEventListener('ai-tool-card-action', ((e: CustomEvent) => {\n        this._dispatch('ai-tool-card-action', {\n          toolName: this.toolName, action: e.detail?.action, data: e.detail?.data,\n        });\n      }) as EventListener, { signal: this._abortController.signal });\n\n      // Cache the element\n      this._cachedEl = el;\n      this._cachedKey = cacheKey;\n\n      return el;\n    } catch (err) {\n      this._error = err instanceof Error ? err.message : 'Component failed to render';\n      this._dispatch('ai-tool-card-error', {\n        toolName: this.toolName, error: this._error,\n      });\n      return null;\n    }\n  }\n\n  private _renderLoading() {\n    return html`\n      <div class=\"skeleton\" role=\"status\" aria-label=\"Loading tool card\">\n        <div class=\"skeleton-line\"></div>\n        <div class=\"skeleton-line\"></div>\n        <div class=\"skeleton-line\"></div>\n      </div>\n    `;\n  }\n\n  private _renderFallback() {\n    let jsonStr = '';\n    try {\n      jsonStr = JSON.stringify(this.toolData, null, 2);\n    } catch {\n      jsonStr = String(this.toolData);\n    }\n    return html`\n      <div class=\"fallback\">\n        <div class=\"fallback-header\">\n          <span class=\"fallback-icon\" aria-hidden=\"true\">&#9881;</span>\n          <span class=\"fallback-title\">${this.toolName || 'Tool Result'}</span>\n        </div>\n        <div class=\"fallback-json\" role=\"log\">${jsonStr}</div>\n      </div>\n    `;\n  }\n\n  private _renderError() {\n    return html`\n      <div class=\"error\" role=\"alert\">\n        <span class=\"error-icon\" aria-hidden=\"true\">&#9888;</span>\n        <span class=\"error-text\">Error resolving \"${this.toolName}\": ${this._error}</span>\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"card\"\n        role=\"region\"\n        aria-label=\"Tool card: ${this.toolName || 'unknown'}\"\n        tabindex=\"0\"\n      >\n        ${this.loading ? this._renderLoading()\n          : this._error ? this._renderError()\n          : this._renderResolved()}\n      </div>\n    `;\n  }\n\n  private _renderResolved() {\n    if (!this.toolName) return this._renderFallback();\n\n    const tag = this.registry[this.toolName];\n    if (!tag) return this._renderFallback();\n\n    const el = this._resolveComponent();\n    if (!el) return this._error ? this._renderError() : this._renderFallback();\n\n    return html`<div class=\"resolved\">${el}</div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-tool-card-resolver': AiToolCardResolver;\n  }\n}\n"],"names":["AiToolCardResolver","LitElement","name","detail","tag","cacheKey","el","e","err","html","jsonStr","hostBlock","reducedMotion","shimmerKeyframes","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { css as p, LitElement as u, html as t, nothing as d } from "lit";
 import { property as g, customElement as v } from "lit/decorators.js";
-import { h as f, r as h } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as f, r as h } from "../../chunks/premium.css-DHekUEUt.js";
 var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, l = (r, e, o, i) => {
   for (var a = i > 1 ? void 0 : i ? b(e, o) : e, s = r.length - 1, c; s >= 0; s--)
     (c = r[s]) && (a = (i ? c(e, o, a) : c(a)) || a);
@@ -74,7 +74,7 @@ n.styles = [f, h, p`
       border-radius: var(--cg-border-radius-100);
       background: var(--cg-color-surface-cards-background);
       border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
-      font-size: var(--cg-font-size-xs);
+      font-size: var(--cg-font-size-sm);
       font-weight: var(--cg-font-weight-medium);
       color: var(--cg-color-surface-container-outlined);
       cursor: pointer;
@@ -146,7 +146,7 @@ n.styles = [f, h, p`
       background: var(--cg-color-surface-base-background);
       border-radius: var(--cg-border-radius-100);
       border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
-      font-size: var(--cg-font-size-xs);
+      font-size: var(--cg-font-size-sm);
       font-family: var(--cg-font-family-mono);
       color: var(--cg-color-surface-container-outlined);
       line-height: var(--cg-line-height-relaxed);

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

@@ -1 +1 @@
-{"version":3,"file":"ai-tool-indicator.js","sources":["../../../src/components/ai-tool-indicator/ai-tool-indicator.ts"],"sourcesContent":["/**\n * @element ai-tool-indicator\n * Displays LLM tool/function call progress with humanized names,\n * spinner/check/error icons, and expandable result panels.\n *\n * @fires {CustomEvent<{index: number, tool: ToolCall}>} ai-tool-click - When a tool row is clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\ninterface ToolCall {\n  name: string;\n  status: 'loading' | 'complete' | 'error';\n  result?: string;\n}\n\n@customElement('ai-tool-indicator')\nexport class AiToolIndicator extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .tools {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    .tool {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      animation: slideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n      animation-delay: calc(var(--tool-index, 0) * 60ms);\n    }\n    .tool:hover {\n      border-color: var(--cg-color-surface-cards-hover-border);\n      background: var(--cg-color-surface-cards-hover-background);\n    }\n\n    @keyframes slideIn {\n      from { opacity: 0; transform: translateX(calc(-1 * var(--cg-spacing-8))); }\n      to { opacity: 1; transform: translateX(0); }\n    }\n\n    /* Status icon */\n    .status-icon {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    /* Spinner */\n    .spinner {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);\n      border-top-color: var(--cg-color-loading-spinner-primary);\n      border-radius: var(--cg-border-radius-full);\n      animation: spin 0.8s linear infinite;\n    }\n    @keyframes spin { to { transform: rotate(360deg); } }\n\n    .check svg, .error-icon svg {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n    }\n    .check { color: var(--cg-color-status-success-text-default); display: flex; }\n    .error-icon { color: var(--cg-color-status-error-text-default); display: flex; }\n\n    /* Tool name */\n    .tool-name { flex: 1; }\n    .tool.complete .tool-name { color: var(--cg-color-surface-base-text); }\n    .tool.error .tool-name { color: var(--cg-color-status-error-text-default); }\n\n    /* Loading shimmer on tool name */\n    .tool.loading .tool-name {\n      background: linear-gradient(110deg, var(--cg-color-surface-container-outlined) 35%, var(--cg-color-surface-base-text) 50%, var(--cg-color-surface-container-outlined) 65%);\n      background-size: 300% 100%;\n      background-clip: text;\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      animation: textSweep 1.8s var(--cg-transition-easing-default) infinite;\n    }\n    @keyframes textSweep {\n      0% { background-position: 100% 50%; }\n      100% { background-position: 0% 50%; }\n    }\n\n    /* Expanded result */\n    .result {\n      margin-top: var(--cg-spacing-4);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      background: var(--cg-color-surface-base-background);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xs);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-relaxed);\n      white-space: pre-wrap;\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    /* Compact mode */\n    :host([compact]) .tools { flex-direction: row; flex-wrap: wrap; }\n    :host([compact]) .tool { padding: var(--cg-spacing-6) var(--cg-spacing-12); }\n    :host([compact]) .result { display: none; }\n\n    .tool:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .spinner { animation: none; }\n      .tool { animation: none; }\n      .tool.loading .tool-name { animation: none; -webkit-text-fill-color: currentColor; }\n    }\n  `];\n\n  @property({ type: Array }) tools: ToolCall[] = [];\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  private _expandedIndex = -1;\n\n  private _humanize(name: string): string {\n    const map: Record<string, string> = {\n      web_search: 'Searching the web',\n      search: 'Searching',\n      code_execution: 'Running code',\n      code_interpreter: 'Running code',\n      database: 'Querying database',\n      database_query: 'Querying database',\n      file_search: 'Searching files',\n      file_read: 'Reading file',\n      calculator: 'Calculating',\n      image_generation: 'Generating image',\n      browser: 'Browsing',\n      retrieval: 'Retrieving data',\n      api_call: 'Calling API',\n    };\n    return map[name] || name.replace(/_/g, ' ').replace(/\\b\\w/g, c => c.toUpperCase());\n  }\n\n  private _handleClick(index: number) {\n    this._expandedIndex = this._expandedIndex === index ? -1 : index;\n    this.requestUpdate();\n    this.dispatchEvent(new CustomEvent('ai-tool-click', {\n      bubbles: true, composed: true,\n      detail: { index, tool: this.tools[index] },\n    }));\n  }\n\n  private _renderStatusIcon(status: string) {\n    if (status === 'complete') return html`<span class=\"check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg></span>`;\n    if (status === 'error') return html`<span class=\"error-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg></span>`;\n    return html`<div class=\"spinner\"></div>`;\n  }\n\n  override render() {\n    if (this.tools.length === 0) return nothing;\n\n    return html`\n      <div class=\"tools\" role=\"status\" aria-label=\"Tool calls\">\n        ${this.tools.map((t, i) => html`\n          <div class=\"tool ${t.status}\" style=\"--tool-index: ${i}\"\n            role=\"button\" tabindex=\"0\"\n            aria-label=\"${this._humanize(t.name)} — ${t.status}\"\n            @click=${() => this._handleClick(i)}\n            @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleClick(i); } }}>\n            <span class=\"status-icon\">${this._renderStatusIcon(t.status)}</span>\n            <span class=\"tool-name\">${this._humanize(t.name)}</span>\n          </div>\n          ${!this.compact && this._expandedIndex === i && t.result ? html`\n            <div class=\"result\">${t.result}</div>\n          ` : nothing}\n        `)}\n      </div>\n    `;\n  }\n}\n"],"names":["AiToolIndicator","LitElement","name","c","index","status","html","nothing","t","i","e","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-tool-indicator.js","sources":["../../../src/components/ai-tool-indicator/ai-tool-indicator.ts"],"sourcesContent":["/**\n * @element ai-tool-indicator\n * Displays LLM tool/function call progress with humanized names,\n * spinner/check/error icons, and expandable result panels.\n *\n * @fires {CustomEvent<{index: number, tool: ToolCall}>} ai-tool-click - When a tool row is clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\ninterface ToolCall {\n  name: string;\n  status: 'loading' | 'complete' | 'error';\n  result?: string;\n}\n\n@customElement('ai-tool-indicator')\nexport class AiToolIndicator extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .tools {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    .tool {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      animation: slideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n      animation-delay: calc(var(--tool-index, 0) * 60ms);\n    }\n    .tool:hover {\n      border-color: var(--cg-color-surface-cards-hover-border);\n      background: var(--cg-color-surface-cards-hover-background);\n    }\n\n    @keyframes slideIn {\n      from { opacity: 0; transform: translateX(calc(-1 * var(--cg-spacing-8))); }\n      to { opacity: 1; transform: translateX(0); }\n    }\n\n    /* Status icon */\n    .status-icon {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    /* Spinner */\n    .spinner {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);\n      border-top-color: var(--cg-color-loading-spinner-primary);\n      border-radius: var(--cg-border-radius-full);\n      animation: spin 0.8s linear infinite;\n    }\n    @keyframes spin { to { transform: rotate(360deg); } }\n\n    .check svg, .error-icon svg {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n    }\n    .check { color: var(--cg-color-status-success-text-default); display: flex; }\n    .error-icon { color: var(--cg-color-status-error-text-default); display: flex; }\n\n    /* Tool name */\n    .tool-name { flex: 1; }\n    .tool.complete .tool-name { color: var(--cg-color-surface-base-text); }\n    .tool.error .tool-name { color: var(--cg-color-status-error-text-default); }\n\n    /* Loading shimmer on tool name */\n    .tool.loading .tool-name {\n      background: linear-gradient(110deg, var(--cg-color-surface-container-outlined) 35%, var(--cg-color-surface-base-text) 50%, var(--cg-color-surface-container-outlined) 65%);\n      background-size: 300% 100%;\n      background-clip: text;\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      animation: textSweep 1.8s var(--cg-transition-easing-default) infinite;\n    }\n    @keyframes textSweep {\n      0% { background-position: 100% 50%; }\n      100% { background-position: 0% 50%; }\n    }\n\n    /* Expanded result */\n    .result {\n      margin-top: var(--cg-spacing-4);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      background: var(--cg-color-surface-base-background);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-sm);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-relaxed);\n      white-space: pre-wrap;\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    /* Compact mode */\n    :host([compact]) .tools { flex-direction: row; flex-wrap: wrap; }\n    :host([compact]) .tool { padding: var(--cg-spacing-6) var(--cg-spacing-12); }\n    :host([compact]) .result { display: none; }\n\n    .tool:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .spinner { animation: none; }\n      .tool { animation: none; }\n      .tool.loading .tool-name { animation: none; -webkit-text-fill-color: currentColor; }\n    }\n  `];\n\n  @property({ type: Array }) tools: ToolCall[] = [];\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  private _expandedIndex = -1;\n\n  private _humanize(name: string): string {\n    const map: Record<string, string> = {\n      web_search: 'Searching the web',\n      search: 'Searching',\n      code_execution: 'Running code',\n      code_interpreter: 'Running code',\n      database: 'Querying database',\n      database_query: 'Querying database',\n      file_search: 'Searching files',\n      file_read: 'Reading file',\n      calculator: 'Calculating',\n      image_generation: 'Generating image',\n      browser: 'Browsing',\n      retrieval: 'Retrieving data',\n      api_call: 'Calling API',\n    };\n    return map[name] || name.replace(/_/g, ' ').replace(/\\b\\w/g, c => c.toUpperCase());\n  }\n\n  private _handleClick(index: number) {\n    this._expandedIndex = this._expandedIndex === index ? -1 : index;\n    this.requestUpdate();\n    this.dispatchEvent(new CustomEvent('ai-tool-click', {\n      bubbles: true, composed: true,\n      detail: { index, tool: this.tools[index] },\n    }));\n  }\n\n  private _renderStatusIcon(status: string) {\n    if (status === 'complete') return html`<span class=\"check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg></span>`;\n    if (status === 'error') return html`<span class=\"error-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg></span>`;\n    return html`<div class=\"spinner\"></div>`;\n  }\n\n  override render() {\n    if (this.tools.length === 0) return nothing;\n\n    return html`\n      <div class=\"tools\" role=\"status\" aria-label=\"Tool calls\">\n        ${this.tools.map((t, i) => html`\n          <div class=\"tool ${t.status}\" style=\"--tool-index: ${i}\"\n            role=\"button\" tabindex=\"0\"\n            aria-label=\"${this._humanize(t.name)} — ${t.status}\"\n            @click=${() => this._handleClick(i)}\n            @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleClick(i); } }}>\n            <span class=\"status-icon\">${this._renderStatusIcon(t.status)}</span>\n            <span class=\"tool-name\">${this._humanize(t.name)}</span>\n          </div>\n          ${!this.compact && this._expandedIndex === i && t.result ? html`\n            <div class=\"result\">${t.result}</div>\n          ` : nothing}\n        `)}\n      </div>\n    `;\n  }\n}\n"],"names":["AiToolIndicator","LitElement","name","c","index","status","html","nothing","t","i","e","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-transform-slider/ai-transform-slider.js

@@ -1,6 +1,6 @@
 import { css as g, LitElement as h, html as c } from "lit";
 import { property as n, state as p, query as f, customElement as u } from "lit/decorators.js";
-import { h as v, r as b, g as m } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as v, r as b, i as m } from "../../chunks/premium.css-DHekUEUt.js";
 var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (t, r, i, s) => {
   for (var o = s > 1 ? void 0 : s ? w(r, i) : r, d = t.length - 1, l; d >= 0; d--)
     (l = t[d]) && (o = (s ? l(r, i, o) : l(o)) || o);

package/dist/components/ai-translation-panel/ai-translation-panel.js

@@ -1,6 +1,6 @@
 import { css as p, LitElement as u, nothing as g, html as c } from "lit";
 import { property as o, state as v, customElement as h } from "lit/decorators.js";
-import { h as b, r as f, g as m } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as b, r as f, i as m } from "../../chunks/premium.css-DHekUEUt.js";
 var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, i, e, s) => {
   for (var n = s > 1 ? void 0 : s ? y(i, e) : i, l = t.length - 1, d; l >= 0; l--)
     (d = t[l]) && (n = (s ? d(i, e, n) : d(n)) || n);
@@ -273,7 +273,7 @@ a.styles = [b, f, m, p`
     }
     .alt-item:hover {
       border-color: var(--cg-color-input-border-hover);
-      background: var(--cg-overlay-dark-subtle);
+      background: var(--cg-color-surface-cards-hover-background);
     }
     .alt-item:active { transform: scale(var(--cg-interaction-press-scale)); }
     .alt-item:focus-visible {

package/dist/components/ai-translation-panel/ai-translation-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-translation-panel.js","sources":["../../../src/components/ai-translation-panel/ai-translation-panel.ts"],"sourcesContent":["/**\n * @element ai-translation-panel\n * Split-pane translation interface with language selectors, confidence badge,\n * alternative translations, and copy buttons.\n *\n * Uses cg-button for actions, cg-badge for confidence display.\n *\n * @example\n * ```html\n * <ai-translation-panel\n *   sourceText=\"Hello, how are you?\"\n *   targetText=\"Hola, como estas?\"\n *   sourceLang=\"en\"\n *   targetLang=\"es\"\n *   confidence=\"0.92\"\n *   .alternatives=${[{ text: 'Hola, que tal?', confidence: 0.85 }]}\n * ></ai-translation-panel>\n * ```\n *\n * @fires {CustomEvent<{sourceText, sourceLang, targetLang}>} ai-translation-request - Translation requested\n * @fires {CustomEvent<{text, confidence}>} ai-translation-select-alt - Alternative selected\n * @fires {CustomEvent<{text, side}>} ai-translation-copy - Text copied\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeInKeyframes } from '../../styles/index.js';\n\ninterface TranslationAlternative {\n  text: string;\n  confidence: number;\n}\n\n@customElement('ai-translation-panel')\nexport class AiTranslationPanel extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeInKeyframes, css`\n    :host {\n      animation: fadeIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n\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-200);\n      overflow: hidden;\n    }\n\n    /* ── Header ── */\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .header-icon {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      color: var(--cg-color-surface-base-text);\n      flex-shrink: 0;\n    }\n    .header-title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n      flex: 1;\n    }\n\n    /* ── Split panes ── */\n    .panes {\n      display: grid;\n      grid-template-columns: 1fr auto 1fr;\n    }\n    .pane {\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n    }\n    .divider {\n      width: var(--cg-border-width-50);\n      background: var(--cg-color-surface-cards-divider);\n    }\n\n    .pane-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-8);\n    }\n    /* Lang selector sizing */\n    .lang-select {\n      min-width: var(--cg-spacing-96);\n    }\n\n    /* ── Text areas ── */\n    .text-area {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-relaxed);\n      min-height: var(--cg-spacing-80);\n      word-break: break-word;\n    }\n    .text-area.muted {\n      color: var(--cg-color-input-text-placeholder);\n      font-style: italic;\n    }\n\n    /* ── Loading dots ── */\n    .loading-dots {\n      display: flex;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-8) 0;\n    }\n    .loading-dots span {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-primary-background-default);\n      opacity: 0.4;\n      animation: dotPulse 1s ease infinite;\n    }\n    .loading-dots span:nth-child(2) { animation-delay: 0.15s; }\n    .loading-dots span:nth-child(3) { animation-delay: 0.3s; }\n    @keyframes dotPulse { 50% { opacity: 1; } }\n\n    /* ── Alternatives ── */\n    .alternatives {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      padding: var(--cg-spacing-12) var(--cg-spacing-20);\n    }\n    .alt-label {\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      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .alt-list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-6);\n    }\n    .alt-item {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .alt-item:hover {\n      border-color: var(--cg-color-input-border-hover);\n      background: var(--cg-overlay-dark-subtle);\n    }\n    .alt-item:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .alt-item:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 2px var(--cg-color-surface-base-background),\n        0 0 0 4px var(--cg-color-focus-ring);\n    }\n    .alt-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n    }\n    .alt-conf {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      white-space: nowrap;\n    }\n\n    /* ── Translate bar ── */\n    .translate-bar {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      padding: var(--cg-spacing-12) var(--cg-spacing-20);\n      display: flex;\n      justify-content: flex-end;\n    }\n\n    /* ── Rounded variants ── */\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-200); }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host { animation: none; }\n      .loading-dots span { animation: none; opacity: 0.6; }\n    }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: String }) sourceText: string = '';\n  @property({ type: String }) targetText: string = '';\n  @property({ type: String }) sourceLang: string = 'en';\n  @property({ type: String }) targetLang: string = 'es';\n  @property({ type: Boolean }) loading: boolean = false;\n  @property({ type: Number }) confidence: number = 0;\n  @property({ type: Array }) alternatives: TranslationAlternative[] = [];\n\n  @state() private _copiedSide: 'source' | 'target' | null = null;\n\n  private _languages = [\n    { code: 'en', label: 'English' },\n    { code: 'es', label: 'Spanish' },\n    { code: 'fr', label: 'French' },\n    { code: 'de', label: 'German' },\n    { code: 'pt', label: 'Portuguese' },\n    { code: 'it', label: 'Italian' },\n    { code: 'ja', label: 'Japanese' },\n    { code: 'ko', label: 'Korean' },\n    { code: 'zh', label: 'Chinese' },\n  ];\n\n  private _requestTranslation() {\n    this.dispatchEvent(new CustomEvent('ai-translation-request', {\n      bubbles: true, composed: true,\n      detail: { sourceText: this.sourceText, sourceLang: this.sourceLang, targetLang: this.targetLang },\n    }));\n  }\n\n  private _selectAlt(alt: TranslationAlternative) {\n    this.dispatchEvent(new CustomEvent('ai-translation-select-alt', {\n      bubbles: true, composed: true,\n      detail: { text: alt.text, confidence: alt.confidence },\n    }));\n  }\n\n  private _copy(text: string, side: 'source' | 'target') {\n    navigator.clipboard?.writeText(text);\n    this._copiedSide = side;\n    setTimeout(() => { this._copiedSide = null; }, 2000);\n    this.dispatchEvent(new CustomEvent('ai-translation-copy', {\n      bubbles: true, composed: true,\n      detail: { text, side },\n    }));\n  }\n\n  override render() {\n    const confPct = Math.round(this.confidence * 100);\n    const isLow = this.confidence > 0 && this.confidence < 0.7;\n\n    return html`\n      <div class=\"panel\" role=\"region\" aria-label=\"Translation\">\n        <div class=\"header\">\n          <svg class=\"header-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 8l6 10\"/><path d=\"M4 14h8\"/><path d=\"M2 5h8\"/><path d=\"M7 2v3\"/><path d=\"M22 22l-5-10-5 10\"/><path d=\"M14 18h6\"/></svg>\n          <span class=\"header-title\">Translation</span>\n          ${this.confidence > 0 ? html`\n            <cg-badge\n              variant=${isLow ? 'warning' : 'success'}\n              label=\"${confPct}% confidence\"\n              size=\"sm\"\n              rounded=\"full\"\n            ></cg-badge>\n          ` : nothing}\n        </div>\n\n        <div class=\"panes\">\n          <div class=\"pane\">\n            <div class=\"pane-header\">\n              <cg-select class=\"lang-select\"\n                size=\"sm\"\n                label=\"Source\"\n                .options=${this._languages.map(l => ({ value: l.code, label: l.label }))}\n                .value=${this.sourceLang}\n                @cg-change=${(e: CustomEvent) => { this.sourceLang = e.detail.value; }}\n              ></cg-select>\n              <cg-button variant=\"tertiary\" size=\"sm\"\n                status=${this._copiedSide === 'source' ? 'success' : 'idle'}\n                label=\"Copy source text\"\n                @click=${() => this._copy(this.sourceText, 'source')}>\n                <cg-icon slot=\"prefix\" name=${this._copiedSide === 'source' ? 'check' : 'copy'} size=\"xs\"></cg-icon>\n                ${this._copiedSide === 'source' ? 'Copied' : 'Copy'}\n              </cg-button>\n            </div>\n            <div class=\"text-area ${!this.sourceText ? 'muted' : ''}\">\n              ${this.sourceText || 'Enter text to translate...'}\n            </div>\n          </div>\n\n          <div class=\"divider\" aria-hidden=\"true\"></div>\n\n          <div class=\"pane\">\n            <div class=\"pane-header\">\n              <cg-select class=\"lang-select\"\n                size=\"sm\"\n                label=\"Target\"\n                .options=${this._languages.map(l => ({ value: l.code, label: l.label }))}\n                .value=${this.targetLang}\n                @cg-change=${(e: CustomEvent) => { this.targetLang = e.detail.value; }}\n              ></cg-select>\n              <cg-button variant=\"tertiary\" size=\"sm\"\n                status=${this._copiedSide === 'target' ? 'success' : 'idle'}\n                label=\"Copy translation\"\n                @click=${() => this._copy(this.targetText, 'target')}>\n                <cg-icon slot=\"prefix\" name=${this._copiedSide === 'target' ? 'check' : 'copy'} size=\"xs\"></cg-icon>\n                ${this._copiedSide === 'target' ? 'Copied' : 'Copy'}\n              </cg-button>\n            </div>\n            ${this.loading ? html`\n              <div class=\"loading-dots\" role=\"status\" aria-label=\"Translating\">\n                <span></span><span></span><span></span>\n              </div>\n            ` : html`\n              <div class=\"text-area ${!this.targetText ? 'muted' : ''}\">\n                ${this.targetText || 'Translation will appear here...'}\n              </div>\n            `}\n          </div>\n        </div>\n\n        ${this.alternatives.length > 0 ? html`\n          <div class=\"alternatives\">\n            <div class=\"alt-label\">Alternative translations</div>\n            <div class=\"alt-list\" role=\"listbox\" aria-label=\"Alternative translations\">\n              ${this.alternatives.map(alt => html`\n                <div class=\"alt-item\" tabindex=\"0\" role=\"option\"\n                  @click=${() => this._selectAlt(alt)}\n                  @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._selectAlt(alt); } }}>\n                  <span class=\"alt-text\">${alt.text}</span>\n                  <span class=\"alt-conf\">${Math.round(alt.confidence * 100)}%</span>\n                </div>\n              `)}\n            </div>\n          </div>\n        ` : nothing}\n\n        <div class=\"translate-bar\">\n          <cg-button variant=\"primary\" size=\"sm\"\n            ?disabled=${this.loading || !this.sourceText}\n            ?loading=${this.loading}\n            @click=${this._requestTranslation}>\n            ${this.loading ? 'Translating...' : 'Translate'}\n          </cg-button>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiTranslationPanel","LitElement","alt","text","side","confPct","isLow","html","nothing","l","e","hostBlock","reducedMotion","fadeInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-translation-panel.js","sources":["../../../src/components/ai-translation-panel/ai-translation-panel.ts"],"sourcesContent":["/**\n * @element ai-translation-panel\n * Split-pane translation interface with language selectors, confidence badge,\n * alternative translations, and copy buttons.\n *\n * Uses cg-button for actions, cg-badge for confidence display.\n *\n * @example\n * ```html\n * <ai-translation-panel\n *   sourceText=\"Hello, how are you?\"\n *   targetText=\"Hola, como estas?\"\n *   sourceLang=\"en\"\n *   targetLang=\"es\"\n *   confidence=\"0.92\"\n *   .alternatives=${[{ text: 'Hola, que tal?', confidence: 0.85 }]}\n * ></ai-translation-panel>\n * ```\n *\n * @fires {CustomEvent<{sourceText, sourceLang, targetLang}>} ai-translation-request - Translation requested\n * @fires {CustomEvent<{text, confidence}>} ai-translation-select-alt - Alternative selected\n * @fires {CustomEvent<{text, side}>} ai-translation-copy - Text copied\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeInKeyframes } from '../../styles/index.js';\n\ninterface TranslationAlternative {\n  text: string;\n  confidence: number;\n}\n\n@customElement('ai-translation-panel')\nexport class AiTranslationPanel extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeInKeyframes, css`\n    :host {\n      animation: fadeIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n\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-200);\n      overflow: hidden;\n    }\n\n    /* ── Header ── */\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .header-icon {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      color: var(--cg-color-surface-base-text);\n      flex-shrink: 0;\n    }\n    .header-title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n      flex: 1;\n    }\n\n    /* ── Split panes ── */\n    .panes {\n      display: grid;\n      grid-template-columns: 1fr auto 1fr;\n    }\n    .pane {\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n    }\n    .divider {\n      width: var(--cg-border-width-50);\n      background: var(--cg-color-surface-cards-divider);\n    }\n\n    .pane-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-8);\n    }\n    /* Lang selector sizing */\n    .lang-select {\n      min-width: var(--cg-spacing-96);\n    }\n\n    /* ── Text areas ── */\n    .text-area {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-relaxed);\n      min-height: var(--cg-spacing-80);\n      word-break: break-word;\n    }\n    .text-area.muted {\n      color: var(--cg-color-input-text-placeholder);\n      font-style: italic;\n    }\n\n    /* ── Loading dots ── */\n    .loading-dots {\n      display: flex;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-8) 0;\n    }\n    .loading-dots span {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-primary-background-default);\n      opacity: 0.4;\n      animation: dotPulse 1s ease infinite;\n    }\n    .loading-dots span:nth-child(2) { animation-delay: 0.15s; }\n    .loading-dots span:nth-child(3) { animation-delay: 0.3s; }\n    @keyframes dotPulse { 50% { opacity: 1; } }\n\n    /* ── Alternatives ── */\n    .alternatives {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      padding: var(--cg-spacing-12) var(--cg-spacing-20);\n    }\n    .alt-label {\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      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .alt-list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-6);\n    }\n    .alt-item {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .alt-item:hover {\n      border-color: var(--cg-color-input-border-hover);\n      background: var(--cg-color-surface-cards-hover-background);\n    }\n    .alt-item:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .alt-item:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 2px var(--cg-color-surface-base-background),\n        0 0 0 4px var(--cg-color-focus-ring);\n    }\n    .alt-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n    }\n    .alt-conf {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      white-space: nowrap;\n    }\n\n    /* ── Translate bar ── */\n    .translate-bar {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      padding: var(--cg-spacing-12) var(--cg-spacing-20);\n      display: flex;\n      justify-content: flex-end;\n    }\n\n    /* ── Rounded variants ── */\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-200); }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host { animation: none; }\n      .loading-dots span { animation: none; opacity: 0.6; }\n    }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: String }) sourceText: string = '';\n  @property({ type: String }) targetText: string = '';\n  @property({ type: String }) sourceLang: string = 'en';\n  @property({ type: String }) targetLang: string = 'es';\n  @property({ type: Boolean }) loading: boolean = false;\n  @property({ type: Number }) confidence: number = 0;\n  @property({ type: Array }) alternatives: TranslationAlternative[] = [];\n\n  @state() private _copiedSide: 'source' | 'target' | null = null;\n\n  private _languages = [\n    { code: 'en', label: 'English' },\n    { code: 'es', label: 'Spanish' },\n    { code: 'fr', label: 'French' },\n    { code: 'de', label: 'German' },\n    { code: 'pt', label: 'Portuguese' },\n    { code: 'it', label: 'Italian' },\n    { code: 'ja', label: 'Japanese' },\n    { code: 'ko', label: 'Korean' },\n    { code: 'zh', label: 'Chinese' },\n  ];\n\n  private _requestTranslation() {\n    this.dispatchEvent(new CustomEvent('ai-translation-request', {\n      bubbles: true, composed: true,\n      detail: { sourceText: this.sourceText, sourceLang: this.sourceLang, targetLang: this.targetLang },\n    }));\n  }\n\n  private _selectAlt(alt: TranslationAlternative) {\n    this.dispatchEvent(new CustomEvent('ai-translation-select-alt', {\n      bubbles: true, composed: true,\n      detail: { text: alt.text, confidence: alt.confidence },\n    }));\n  }\n\n  private _copy(text: string, side: 'source' | 'target') {\n    navigator.clipboard?.writeText(text);\n    this._copiedSide = side;\n    setTimeout(() => { this._copiedSide = null; }, 2000);\n    this.dispatchEvent(new CustomEvent('ai-translation-copy', {\n      bubbles: true, composed: true,\n      detail: { text, side },\n    }));\n  }\n\n  override render() {\n    const confPct = Math.round(this.confidence * 100);\n    const isLow = this.confidence > 0 && this.confidence < 0.7;\n\n    return html`\n      <div class=\"panel\" role=\"region\" aria-label=\"Translation\">\n        <div class=\"header\">\n          <svg class=\"header-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 8l6 10\"/><path d=\"M4 14h8\"/><path d=\"M2 5h8\"/><path d=\"M7 2v3\"/><path d=\"M22 22l-5-10-5 10\"/><path d=\"M14 18h6\"/></svg>\n          <span class=\"header-title\">Translation</span>\n          ${this.confidence > 0 ? html`\n            <cg-badge\n              variant=${isLow ? 'warning' : 'success'}\n              label=\"${confPct}% confidence\"\n              size=\"sm\"\n              rounded=\"full\"\n            ></cg-badge>\n          ` : nothing}\n        </div>\n\n        <div class=\"panes\">\n          <div class=\"pane\">\n            <div class=\"pane-header\">\n              <cg-select class=\"lang-select\"\n                size=\"sm\"\n                label=\"Source\"\n                .options=${this._languages.map(l => ({ value: l.code, label: l.label }))}\n                .value=${this.sourceLang}\n                @cg-change=${(e: CustomEvent) => { this.sourceLang = e.detail.value; }}\n              ></cg-select>\n              <cg-button variant=\"tertiary\" size=\"sm\"\n                status=${this._copiedSide === 'source' ? 'success' : 'idle'}\n                label=\"Copy source text\"\n                @click=${() => this._copy(this.sourceText, 'source')}>\n                <cg-icon slot=\"prefix\" name=${this._copiedSide === 'source' ? 'check' : 'copy'} size=\"xs\"></cg-icon>\n                ${this._copiedSide === 'source' ? 'Copied' : 'Copy'}\n              </cg-button>\n            </div>\n            <div class=\"text-area ${!this.sourceText ? 'muted' : ''}\">\n              ${this.sourceText || 'Enter text to translate...'}\n            </div>\n          </div>\n\n          <div class=\"divider\" aria-hidden=\"true\"></div>\n\n          <div class=\"pane\">\n            <div class=\"pane-header\">\n              <cg-select class=\"lang-select\"\n                size=\"sm\"\n                label=\"Target\"\n                .options=${this._languages.map(l => ({ value: l.code, label: l.label }))}\n                .value=${this.targetLang}\n                @cg-change=${(e: CustomEvent) => { this.targetLang = e.detail.value; }}\n              ></cg-select>\n              <cg-button variant=\"tertiary\" size=\"sm\"\n                status=${this._copiedSide === 'target' ? 'success' : 'idle'}\n                label=\"Copy translation\"\n                @click=${() => this._copy(this.targetText, 'target')}>\n                <cg-icon slot=\"prefix\" name=${this._copiedSide === 'target' ? 'check' : 'copy'} size=\"xs\"></cg-icon>\n                ${this._copiedSide === 'target' ? 'Copied' : 'Copy'}\n              </cg-button>\n            </div>\n            ${this.loading ? html`\n              <div class=\"loading-dots\" role=\"status\" aria-label=\"Translating\">\n                <span></span><span></span><span></span>\n              </div>\n            ` : html`\n              <div class=\"text-area ${!this.targetText ? 'muted' : ''}\">\n                ${this.targetText || 'Translation will appear here...'}\n              </div>\n            `}\n          </div>\n        </div>\n\n        ${this.alternatives.length > 0 ? html`\n          <div class=\"alternatives\">\n            <div class=\"alt-label\">Alternative translations</div>\n            <div class=\"alt-list\" role=\"listbox\" aria-label=\"Alternative translations\">\n              ${this.alternatives.map(alt => html`\n                <div class=\"alt-item\" tabindex=\"0\" role=\"option\"\n                  @click=${() => this._selectAlt(alt)}\n                  @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._selectAlt(alt); } }}>\n                  <span class=\"alt-text\">${alt.text}</span>\n                  <span class=\"alt-conf\">${Math.round(alt.confidence * 100)}%</span>\n                </div>\n              `)}\n            </div>\n          </div>\n        ` : nothing}\n\n        <div class=\"translate-bar\">\n          <cg-button variant=\"primary\" size=\"sm\"\n            ?disabled=${this.loading || !this.sourceText}\n            ?loading=${this.loading}\n            @click=${this._requestTranslation}>\n            ${this.loading ? 'Translating...' : 'Translate'}\n          </cg-button>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiTranslationPanel","LitElement","alt","text","side","confPct","isLow","html","nothing","l","e","hostBlock","reducedMotion","fadeInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { css as _, LitElement as w, html as g, nothing as v } from "lit";
 import { property as d, state as p, customElement as x } from "lit/decorators.js";
-import { a as b, r as y, f as $ } from "../../chunks/premium.css-9I4kHrsl.js";
+import { a as b, r as y, f as $ } from "../../chunks/premium.css-DHekUEUt.js";
 import "../cg-card/cg-card.js";
 import "../cg-text/cg-text.js";
 import "../cg-button/cg-button.js";