@cognivo/components 0.8.0

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

@@ -0,0 +1,371 @@
+import { css as h, LitElement as u, html as t, nothing as s } from "lit";
+import { property as i, state as p, customElement as v } from "lit/decorators.js";
+import { h as m, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (e, o, c, l) => {
+  for (var n = l > 1 ? void 0 : l ? y(o, c) : o, g = e.length - 1, d; g >= 0; g--)
+    (d = e[g]) && (n = (l ? d(o, c, n) : d(n)) || n);
+  return l && n && b(o, c, n), n;
+};
+let a = class extends u {
+  constructor() {
+    super(...arguments), this.text = "Thinking", this.variant = "dots", this.size = "md", this.shimmer = !1, this.stages = [], this.cancelable = !1, this.tools = [], this.progress = -1, this.delay = 200, this._visible = !1, this._stageIndex = 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.delay > 0 ? (this._visible = !1, this._delayTimer = setTimeout(() => {
+      this._visible = !0;
+    }, this.delay)) : this._visible = !0, this._startStages();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._delayTimer && clearTimeout(this._delayTimer), this._stageTimer && clearInterval(this._stageTimer);
+  }
+  updated(e) {
+    e.has("stages") && (this._stageIndex = 0, this._startStages());
+  }
+  _startStages() {
+    this._stageTimer && clearInterval(this._stageTimer), this.stages.length > 1 && (this._stageTimer = setInterval(() => {
+      this._stageIndex = (this._stageIndex + 1) % this.stages.length, this.dispatchEvent(new CustomEvent("ai-thinking-stage-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { stage: this.stages[this._stageIndex], index: this._stageIndex }
+      }));
+    }, 2500));
+  }
+  _handleCancel() {
+    this.dispatchEvent(new CustomEvent("ai-thinking-cancel", { bubbles: !0, composed: !0 }));
+  }
+  get _displayText() {
+    return this.stages.length > 0 ? this.stages[this._stageIndex] : this.text;
+  }
+  _humanizeTool(e) {
+    return {
+      web_search: "Searching the web",
+      code_execution: "Running code",
+      database: "Querying database",
+      file_search: "Searching files",
+      calculator: "Calculating",
+      image_generation: "Generating image"
+    }[e] || e.replace(/_/g, " ").replace(/\b\w/g, (c) => c.toUpperCase());
+  }
+  _renderToolIcon(e) {
+    return e === "complete" ? t`<cg-icon name="check" size="xs"></cg-icon>` : e === "error" ? t`<cg-icon name="x" size="xs"></cg-icon>` : t`<span class="tool-icon-ring" aria-hidden="true"></span>`;
+  }
+  render() {
+    return this._visible ? t`
+      <div class="container ${this.shimmer ? "shimmer" : ""}" role="status" aria-live="polite" aria-label="${this._displayText}">
+
+        ${this.variant === "skeleton" ? t`
+          <div class="skeleton">
+            <div class="skeleton-line"></div>
+            <div class="skeleton-line"></div>
+            <div class="skeleton-line"></div>
+          </div>
+        ` : s}
+
+        ${this.variant === "spinner" ? t`
+          <div class="ring" aria-hidden="true"></div>
+          <span class="text">${this._displayText}</span>
+        ` : s}
+
+        ${this.variant === "shimmer" ? t`
+          <span class="text">${this._displayText}</span>
+        ` : s}
+
+        ${this.variant === "dots" ? t`
+          <span class="text">${this._displayText}</span>
+          <span class="dots" aria-hidden="true">
+            <span class="dot"></span>
+            <span class="dot"></span>
+            <span class="dot"></span>
+          </span>
+        ` : s}
+
+        ${this.cancelable ? t`
+          <button class="cancel" @click=${this._handleCancel} aria-label="Cancel">Cancel</button>
+        ` : s}
+
+        ${this.progress >= 0 ? t`
+          <div class="progress-bar" role="progressbar" aria-valuenow="${this.progress}" aria-valuemin="0" aria-valuemax="100">
+            <div class="progress-fill" style="width: ${Math.min(this.progress, 100)}%"></div>
+          </div>
+        ` : s}
+
+        ${this.tools.length > 0 ? t`
+          <div class="tools">
+            ${this.tools.map((e) => t`
+              <div class="tool ${e.status}">
+                <span class="tool-icon">${this._renderToolIcon(e.status)}</span>
+                <span>${this._humanizeTool(e.name)}</span>
+              </div>
+            `)}
+          </div>
+        ` : s}
+      </div>
+    ` : s;
+  }
+};
+a.styles = [m, f, h`
+    :host([hidden]) { display: none; }
+
+    /* ── Materialize entrance ── */
+    .container {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-16);
+      width: 100%;
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      padding: var(--cg-spacing-16) var(--cg-spacing-20);
+      animation: materialize 0.7s var(--cg-transition-easing-materialize) both;
+    }
+    :host([size="sm"]) .container {
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      gap: var(--cg-spacing-12);
+    }
+    :host([size="lg"]) .container {
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--cg-spacing-16);
+      padding: var(--cg-spacing-20) var(--cg-spacing-24);
+    }
+
+    @keyframes materialize {
+      from { opacity: 0; transform: translateY(var(--cg-spacing-24)); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+
+    /* ── Text ── */
+    .text {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-container-outlined);
+      white-space: nowrap;
+    }
+    :host([size="sm"]) .text { font-size: var(--cg-font-size-xs); }
+    :host([size="lg"]) .text { font-size: var(--cg-font-size-base); }
+
+    /* ── Shimmer variant — standalone text, no container ── */
+    :host([variant="shimmer"]) .container {
+      background: transparent;
+      border: none;
+      padding: 0;
+      animation: none;
+    }
+
+    /* ── Shimmer text effect — continuous ── */
+    .shimmer .text,
+    :host([variant="shimmer"]) .text {
+      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%
+      );
+      background-size: 300% 100%;
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation: textSweep 1.8s ease-in-out infinite;
+    }
+
+    @keyframes textSweep {
+      0% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+
+    /* ── Dots variant — 3 pulsing dots after text ── */
+    .dots {
+      display: inline-flex;
+      gap: var(--cg-spacing-4);
+      align-items: center;
+    }
+    .dot {
+      width: var(--cg-spacing-4);
+      height: var(--cg-spacing-4);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-action-primary-background-default);
+      animation: dotPulse 1.4s ease-in-out infinite;
+    }
+    .dot:nth-child(2) { animation-delay: 0.16s; }
+    .dot:nth-child(3) { animation-delay: 0.32s; }
+
+    @keyframes dotPulse {
+      0%, 80%, 100% { opacity: 0.25; transform: scale(0.75); }
+      40% { opacity: 1; transform: scale(1); }
+    }
+
+    /* ── Spinner variant (ring) ── */
+    .ring {
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);
+      border-top-color: var(--cg-color-loading-spinner-primary);
+      border-radius: var(--cg-border-radius-full);
+      animation: spin 0.8s linear infinite;
+      flex-shrink: 0;
+    }
+    :host([size="sm"]) .ring { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }
+    :host([size="lg"]) .ring { width: var(--cg-spacing-20); height: var(--cg-spacing-20); }
+
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* ── Skeleton variant ── */
+    .skeleton {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-12);
+      width: 100%;
+    }
+    .skeleton-line {
+      height: var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-50);
+      background: var(--cg-color-surface-cards-border);
+      position: relative;
+      overflow: hidden;
+    }
+    .skeleton-line::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: linear-gradient(90deg, transparent 25%, var(--cg-overlay-accent-subtle) 50%, transparent 75%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s linear infinite;
+    }
+    .skeleton-line:nth-child(1) { width: 85%; }
+    .skeleton-line:nth-child(2) { width: 70%; }
+    .skeleton-line:nth-child(3) { width: 55%; }
+    :host([size="sm"]) .skeleton-line { height: var(--cg-spacing-8); }
+    :host([size="lg"]) .skeleton-line { height: var(--cg-spacing-16); }
+
+    @keyframes shimmer {
+      0% { background-position: 200% 0; }
+      100% { background-position: -200% 0; }
+    }
+
+    /* ── Progress bar ── */
+    .progress-bar {
+      width: 100%;
+      height: var(--cg-spacing-4);
+      background: var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-full);
+      overflow: hidden;
+    }
+    .progress-fill {
+      height: 100%;
+      background: var(--cg-color-action-primary-background-default);
+      border-radius: var(--cg-border-radius-full);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+
+    /* ── Tools ── */
+    .tools {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--cg-spacing-8);
+    }
+    .tool {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      border-radius: var(--cg-border-radius-100);
+      background: var(--cg-color-surface-cards-background);
+      color: var(--cg-color-surface-container-outlined);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      animation: materialize var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;
+    }
+    .tool-icon {
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .tool.loading .tool-icon { animation: spin 0.8s linear infinite; }
+    .tool.complete { color: var(--cg-color-status-success-text-default); border-color: var(--cg-color-status-success-border-default); }
+    .tool.error { color: var(--cg-color-status-error-text-default); border-color: var(--cg-color-status-error-border-default); }
+
+    /* Inline loading ring inside tool-icon slot */
+    .tool-icon-ring {
+      width: 100%;
+      height: 100%;
+      border: var(--cg-border-width-75) solid currentColor;
+      border-top-color: transparent;
+      border-radius: var(--cg-border-radius-full);
+      display: block;
+    }
+
+    /* ── Cancel button ── */
+    .cancel {
+      background: transparent;
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      color: var(--cg-color-surface-container-outlined);
+      border-radius: var(--cg-border-radius-100);
+      padding: var(--cg-spacing-6) var(--cg-spacing-16);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      cursor: pointer;
+      font-family: inherit;
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      margin-left: auto;
+      flex-shrink: 0;
+    }
+    .cancel:hover {
+      color: var(--cg-color-status-error-text-default);
+      border-color: var(--cg-color-status-error-text-default);
+      background: var(--cg-color-status-error-background-default);
+    }
+    .cancel:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .container { animation: none; }
+      .dot, .ring, .skeleton-line::after, .tool.loading .tool-icon { animation: none; }
+      .shimmer .text { animation: none; -webkit-text-fill-color: currentColor; }
+      .dot { opacity: 0.6; }
+    }
+  `];
+r([
+  i({ type: String })
+], a.prototype, "text", 2);
+r([
+  i({ type: String, reflect: !0 })
+], a.prototype, "variant", 2);
+r([
+  i({ type: String, reflect: !0 })
+], a.prototype, "size", 2);
+r([
+  i({ type: Boolean })
+], a.prototype, "shimmer", 2);
+r([
+  i({ type: Array })
+], a.prototype, "stages", 2);
+r([
+  i({ type: Boolean })
+], a.prototype, "cancelable", 2);
+r([
+  i({ type: Array })
+], a.prototype, "tools", 2);
+r([
+  i({ type: Number })
+], a.prototype, "progress", 2);
+r([
+  i({ type: Number })
+], a.prototype, "delay", 2);
+r([
+  p()
+], a.prototype, "_visible", 2);
+r([
+  p()
+], a.prototype, "_stageIndex", 2);
+a = r([
+  v("ai-thinking")
+], a);
+export {
+  a as AiThinking
+};
+//# sourceMappingURL=ai-thinking.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-thinking.js","sources":["../../../src/components/ai-thinking/ai-thinking.ts"],"sourcesContent":["/**\n * @element ai-thinking\n * AI loading indicator with dots, spinner, or skeleton variants.\n * Card materializes in with slide-up + fade. Animations loop continuously.\n *\n * @fires ai-thinking-cancel - When cancel button is clicked\n * @fires {CustomEvent<{stage: string, index: number}>} ai-thinking-stage-change - When stage cycles\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, 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-thinking')\nexport class AiThinking extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host([hidden]) { display: none; }\n\n    /* ── Materialize entrance ── */\n    .container {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-16);\n      width: 100%;\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      animation: materialize 0.7s var(--cg-transition-easing-materialize) both;\n    }\n    :host([size=\"sm\"]) .container {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      gap: var(--cg-spacing-12);\n    }\n    :host([size=\"lg\"]) .container {\n      flex-direction: column;\n      align-items: stretch;\n      gap: var(--cg-spacing-16);\n      padding: var(--cg-spacing-20) var(--cg-spacing-24);\n    }\n\n    @keyframes materialize {\n      from { opacity: 0; transform: translateY(var(--cg-spacing-24)); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n\n    /* ── Text ── */\n    .text {\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      white-space: nowrap;\n    }\n    :host([size=\"sm\"]) .text { font-size: var(--cg-font-size-xs); }\n    :host([size=\"lg\"]) .text { font-size: var(--cg-font-size-base); }\n\n    /* ── Shimmer variant — standalone text, no container ── */\n    :host([variant=\"shimmer\"]) .container {\n      background: transparent;\n      border: none;\n      padding: 0;\n      animation: none;\n    }\n\n    /* ── Shimmer text effect — continuous ── */\n    .shimmer .text,\n    :host([variant=\"shimmer\"]) .text {\n      background: linear-gradient(\n        110deg,\n        var(--cg-color-surface-container-outlined) 35%,\n        var(--cg-color-surface-base-text) 50%,\n        var(--cg-color-surface-container-outlined) 65%\n      );\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 ease-in-out infinite;\n    }\n\n    @keyframes textSweep {\n      0% { background-position: 100% 50%; }\n      100% { background-position: 0% 50%; }\n    }\n\n    /* ── Dots variant — 3 pulsing dots after text ── */\n    .dots {\n      display: inline-flex;\n      gap: var(--cg-spacing-4);\n      align-items: center;\n    }\n    .dot {\n      width: var(--cg-spacing-4);\n      height: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-primary-background-default);\n      animation: dotPulse 1.4s ease-in-out infinite;\n    }\n    .dot:nth-child(2) { animation-delay: 0.16s; }\n    .dot:nth-child(3) { animation-delay: 0.32s; }\n\n    @keyframes dotPulse {\n      0%, 80%, 100% { opacity: 0.25; transform: scale(0.75); }\n      40% { opacity: 1; transform: scale(1); }\n    }\n\n    /* ── Spinner variant (ring) ── */\n    .ring {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\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      flex-shrink: 0;\n    }\n    :host([size=\"sm\"]) .ring { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n    :host([size=\"lg\"]) .ring { width: var(--cg-spacing-20); height: var(--cg-spacing-20); }\n\n    @keyframes spin { to { transform: rotate(360deg); } }\n\n    /* ── Skeleton variant ── */\n    .skeleton {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n      width: 100%;\n    }\n    .skeleton-line {\n      height: var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-surface-cards-border);\n      position: relative;\n      overflow: hidden;\n    }\n    .skeleton-line::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(90deg, transparent 25%, var(--cg-overlay-accent-subtle) 50%, transparent 75%);\n      background-size: 200% 100%;\n      animation: shimmer 1.5s linear infinite;\n    }\n    .skeleton-line:nth-child(1) { width: 85%; }\n    .skeleton-line:nth-child(2) { width: 70%; }\n    .skeleton-line:nth-child(3) { width: 55%; }\n    :host([size=\"sm\"]) .skeleton-line { height: var(--cg-spacing-8); }\n    :host([size=\"lg\"]) .skeleton-line { height: var(--cg-spacing-16); }\n\n    @keyframes shimmer {\n      0% { background-position: 200% 0; }\n      100% { background-position: -200% 0; }\n    }\n\n    /* ── Progress bar ── */\n    .progress-bar {\n      width: 100%;\n      height: var(--cg-spacing-4);\n      background: var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-full);\n      overflow: hidden;\n    }\n    .progress-fill {\n      height: 100%;\n      background: var(--cg-color-action-primary-background-default);\n      border-radius: var(--cg-border-radius-full);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    /* ── Tools ── */\n    .tools {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-8);\n    }\n    .tool {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      border-radius: var(--cg-border-radius-100);\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      animation: materialize var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;\n    }\n    .tool-icon {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n    .tool.loading .tool-icon { animation: spin 0.8s linear infinite; }\n    .tool.complete { color: var(--cg-color-status-success-text-default); border-color: var(--cg-color-status-success-border-default); }\n    .tool.error { color: var(--cg-color-status-error-text-default); border-color: var(--cg-color-status-error-border-default); }\n\n    /* Inline loading ring inside tool-icon slot */\n    .tool-icon-ring {\n      width: 100%;\n      height: 100%;\n      border: var(--cg-border-width-75) solid currentColor;\n      border-top-color: transparent;\n      border-radius: var(--cg-border-radius-full);\n      display: block;\n    }\n\n    /* ── Cancel button ── */\n    .cancel {\n      background: transparent;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-container-outlined);\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-6) var(--cg-spacing-16);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      font-family: inherit;\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      margin-left: auto;\n      flex-shrink: 0;\n    }\n    .cancel:hover {\n      color: var(--cg-color-status-error-text-default);\n      border-color: var(--cg-color-status-error-text-default);\n      background: var(--cg-color-status-error-background-default);\n    }\n    .cancel: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      .container { animation: none; }\n      .dot, .ring, .skeleton-line::after, .tool.loading .tool-icon { animation: none; }\n      .shimmer .text { animation: none; -webkit-text-fill-color: currentColor; }\n      .dot { opacity: 0.6; }\n    }\n  `];\n\n  @property({ type: String }) text = 'Thinking';\n  @property({ type: String, reflect: true }) variant: 'dots' | 'spinner' | 'skeleton' | 'shimmer' = 'dots';\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Boolean }) shimmer = false;\n  @property({ type: Array }) stages: string[] = [];\n  @property({ type: Boolean }) cancelable = false;\n  @property({ type: Array }) tools: ToolCall[] = [];\n  @property({ type: Number }) progress = -1;\n  @property({ type: Number }) delay = 200;\n\n  @state() private _visible = false;\n  @state() private _stageIndex = 0;\n  private _delayTimer?: ReturnType<typeof setTimeout>;\n  private _stageTimer?: ReturnType<typeof setInterval>;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (this.delay > 0) {\n      this._visible = false;\n      this._delayTimer = setTimeout(() => { this._visible = true; }, this.delay);\n    } else {\n      this._visible = true;\n    }\n    this._startStages();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._delayTimer) clearTimeout(this._delayTimer);\n    if (this._stageTimer) clearInterval(this._stageTimer);\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('stages')) {\n      this._stageIndex = 0;\n      this._startStages();\n    }\n  }\n\n  private _startStages() {\n    if (this._stageTimer) clearInterval(this._stageTimer);\n    if (this.stages.length > 1) {\n      this._stageTimer = setInterval(() => {\n        this._stageIndex = (this._stageIndex + 1) % this.stages.length;\n        this.dispatchEvent(new CustomEvent('ai-thinking-stage-change', {\n          bubbles: true, composed: true,\n          detail: { stage: this.stages[this._stageIndex], index: this._stageIndex },\n        }));\n      }, 2500);\n    }\n  }\n\n  private _handleCancel() {\n    this.dispatchEvent(new CustomEvent('ai-thinking-cancel', { bubbles: true, composed: true }));\n  }\n\n  private get _displayText(): string {\n    if (this.stages.length > 0) return this.stages[this._stageIndex]!;\n    return this.text;\n  }\n\n  private _humanizeTool(name: string): string {\n    const map: Record<string, string> = {\n      web_search: 'Searching the web',\n      code_execution: 'Running code',\n      database: 'Querying database',\n      file_search: 'Searching files',\n      calculator: 'Calculating',\n      image_generation: 'Generating image',\n    };\n    return map[name] || name.replace(/_/g, ' ').replace(/\\b\\w/g, c => c.toUpperCase());\n  }\n\n  private _renderToolIcon(status: string) {\n    if (status === 'complete') return html`<cg-icon name=\"check\" size=\"xs\"></cg-icon>`;\n    if (status === 'error') return html`<cg-icon name=\"x\" size=\"xs\"></cg-icon>`;\n    return html`<span class=\"tool-icon-ring\" aria-hidden=\"true\"></span>`;\n  }\n\n  override render() {\n    if (!this._visible) return nothing;\n\n    return html`\n      <div class=\"container ${this.shimmer ? 'shimmer' : ''}\" role=\"status\" aria-live=\"polite\" aria-label=\"${this._displayText}\">\n\n        ${this.variant === 'skeleton' ? html`\n          <div class=\"skeleton\">\n            <div class=\"skeleton-line\"></div>\n            <div class=\"skeleton-line\"></div>\n            <div class=\"skeleton-line\"></div>\n          </div>\n        ` : nothing}\n\n        ${this.variant === 'spinner' ? html`\n          <div class=\"ring\" aria-hidden=\"true\"></div>\n          <span class=\"text\">${this._displayText}</span>\n        ` : nothing}\n\n        ${this.variant === 'shimmer' ? html`\n          <span class=\"text\">${this._displayText}</span>\n        ` : nothing}\n\n        ${this.variant === 'dots' ? html`\n          <span class=\"text\">${this._displayText}</span>\n          <span class=\"dots\" aria-hidden=\"true\">\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n            <span class=\"dot\"></span>\n          </span>\n        ` : nothing}\n\n        ${this.cancelable ? html`\n          <button class=\"cancel\" @click=${this._handleCancel} aria-label=\"Cancel\">Cancel</button>\n        ` : nothing}\n\n        ${this.progress >= 0 ? html`\n          <div class=\"progress-bar\" role=\"progressbar\" aria-valuenow=\"${this.progress}\" aria-valuemin=\"0\" aria-valuemax=\"100\">\n            <div class=\"progress-fill\" style=\"width: ${Math.min(this.progress, 100)}%\"></div>\n          </div>\n        ` : nothing}\n\n        ${this.tools.length > 0 ? html`\n          <div class=\"tools\">\n            ${this.tools.map(t => html`\n              <div class=\"tool ${t.status}\">\n                <span class=\"tool-icon\">${this._renderToolIcon(t.status)}</span>\n                <span>${this._humanizeTool(t.name)}</span>\n              </div>\n            `)}\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiThinking","LitElement","changed","name","status","html","nothing","t","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-timeline/ai-timeline.d.ts

@@ -0,0 +1,28 @@
+import { LitElement, nothing } from 'lit';
+export interface TimelineStep {
+    label: string;
+    status: 'pending' | 'active' | 'complete' | 'error';
+    type?: 'llm' | 'tool' | 'retrieval' | 'human' | 'default';
+    detail?: string;
+    duration?: number;
+    tools?: string[];
+    tokens?: {
+        input?: number;
+        output?: number;
+    };
+    children?: TimelineStep[];
+}
+export declare class AiTimeline extends LitElement {
+    static styles: import('lit').CSSResult[];
+    steps: TimelineStep[];
+    compact: boolean;
+    private _expandedIndex;
+    private _getIcon;
+    private _formatDuration;
+    private _formatTokens;
+    private _handleStepClick;
+    private _getMaxDuration;
+    private _renderStep;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}
+//# sourceMappingURL=ai-timeline.d.ts.map

package/dist/components/ai-timeline/ai-timeline.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-timeline.d.ts","sourceRoot":"","sources":["../../../src/components/ai-timeline/ai-timeline.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;IACpD,IAAI,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,WAAW,GAAG,OAAO,GAAG,SAAS,CAAC;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,MAAM,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAC;CAC3B;AAED,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAkQnB;IAEwB,KAAK,EAAE,YAAY,EAAE,CAAM;IACV,OAAO,UAAS;IAE5D,OAAO,CAAC,cAAc,CAAM;IAE5B,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,gBAAgB;IASxB,OAAO,CAAC,eAAe;IAIvB,OAAO,CAAC,WAAW;IASV,MAAM;CAiEhB"}