@cognivo/components 0.8.0 → 0.8.2

package/dist/components/ai-agent-steps/ai-agent-steps.js

@@ -1,89 +1,61 @@
-import { css as u, LitElement as v, html as n, svg as i, nothing as c } from "lit";
-import { property as p, customElement as h } from "lit/decorators.js";
-import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
-var m = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (t, e, o, a) => {
-  for (var r = a > 1 ? void 0 : a ? k(e, o) : e, l = t.length - 1, g; l >= 0; l--)
-    (g = t[l]) && (r = (a ? g(e, o, r) : g(r)) || r);
-  return a && r && m(e, o, r), r;
+import { css as d, LitElement as u, html as a, nothing as g } from "lit";
+import { property as p, customElement as v } from "lit/decorators.js";
+import { h, r as m } from "../../chunks/premium.css-DHekUEUt.js";
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, l = (e, t, i, s) => {
+  for (var r = s > 1 ? void 0 : s ? b(t, i) : t, n = e.length - 1, c; n >= 0; n--)
+    (c = e[n]) && (r = (s ? c(t, i, r) : c(r)) || r);
+  return s && r && f(t, i, r), r;
 };
-let s = class extends v {
+let o = class extends u {
   constructor() {
     super(...arguments), this.steps = [], this.contained = !1;
   }
-  // ─── Helpers ────────────────────────────────────────────────────────────
-  _isInteractive(t) {
-    return t.status === "complete" || t.status === "error";
-  }
-  _formatDuration(t) {
-    return t < 1e3 ? `${Math.round(t)} ms` : t < 6e4 ? `${(t / 1e3).toFixed(1)} s` : `${Math.floor(t / 6e4)}m ${Math.round(t % 6e4 / 1e3)}s`;
-  }
-  _handleStepClick(t) {
-    const e = this.steps[t];
-    !e || !this._isInteractive(e) || this.dispatchEvent(new CustomEvent("ai-step-click", {
-      detail: { index: t, step: e },
+  _handleStepClick(e) {
+    this.steps[e]?.status === "complete" && this.dispatchEvent(new CustomEvent("ai-step-click", {
+      detail: { index: e },
       bubbles: !0,
       composed: !0
     }));
   }
-  // ─── Status / kind icons ────────────────────────────────────────────────
-  _renderStatusIcon(t) {
-    return t.status === "loading" ? n`<div class="spinner"></div>` : t.status === "pending" ? i`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="8"/></svg>` : t.status === "error" ? i`<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>` : this._renderKindIcon(t.kind);
-  }
-  _renderKindIcon(t) {
-    switch (t) {
-      case "tool":
-        return i`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a4 4 0 1 1 5 5l-9 9-5 1 1-5z"/></svg>`;
-      case "retrieval":
-        return i`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="4" width="13" height="14" rx="2"/><path d="M3 8v11a2 2 0 0 0 2 2h11"/></svg>`;
-      case "decision":
-        return i`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="3" r="2"/><circle cx="6" cy="21" r="2"/><circle cx="18" cy="6" r="2"/><path d="M6 5v14M6 12c6 0 6-6 12-6"/></svg>`;
-      case "llm":
-        return i`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z"/></svg>`;
+  _renderStatusIcon(e) {
+    switch (e) {
+      case "complete":
+        return a`<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>`;
+      case "error":
+        return a`<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>`;
+      case "loading":
+        return a`<div class="spinner"></div>`;
       default:
-        return i`<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>`;
+        return a`<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="8"/></svg>`;
     }
   }
   render() {
-    return this.steps.length === 0 ? c : n`
+    return this.steps.length === 0 ? g : a`
       <div class="steps" role="list" aria-label="Agent steps">
-        ${this.steps.map((t, e) => {
-      const o = this._isInteractive(t), a = `step ${t.status} ${o ? "is-interactive" : ""}`, r = n`
-            <span class="status-icon ${t.status}" aria-hidden="true">
-              ${this._renderStatusIcon(t)}
+        ${this.steps.map((e, t) => a`
+          <div
+            class="step ${e.status}"
+            role="listitem"
+            style="--step-index: ${t}"
+            @click=${() => this._handleStepClick(t)}
+          >
+            <span class="status-icon ${e.status}">
+              ${this._renderStatusIcon(e.status)}
             </span>
             <div class="step-body">
-              <div class="step-label-row">
-                <span class="step-label">${t.label}</span>
-                ${t.duration != null && t.status !== "pending" ? n`
-                  <span class="step-duration">${this._formatDuration(t.duration)}</span>
-                ` : c}
-              </div>
-              ${t.detail ? n`<span class="step-detail">${t.detail}</span>` : c}
+              <span class="step-label">${e.label}</span>
+              ${e.detail ? a`<span class="step-detail">${e.detail}</span>` : g}
             </div>
-          `;
-      return o ? n`
-              <button
-                class=${a}
-                type="button"
-                role="listitem"
-                style="--step-index: ${e}"
-                @click=${() => this._handleStepClick(e)}
-              >${r}</button>
-            ` : n`
-            <div
-              class=${a}
-              role="listitem"
-              aria-current=${t.status === "loading" ? "step" : c}
-              style="--step-index: ${e}"
-            >${r}</div>
-          `;
-    })}
+          </div>
+        `)}
       </div>
     `;
   }
 };
-s.styles = [f, b, u`
-    :host { display: block; }
+o.styles = [h, m, d`
+    :host {
+      display: block;
+    }
 
     .steps {
       display: flex;
@@ -91,36 +63,20 @@ s.styles = [f, b, u`
       gap: var(--cg-spacing-2);
     }
 
-    /* ── Step row (interactive when clickable) ── */
+    /* ── Step row ── */
     .step {
       display: flex;
       align-items: flex-start;
       gap: var(--cg-spacing-12);
       padding: var(--cg-spacing-12) var(--cg-spacing-16);
       border-radius: var(--cg-border-radius-100);
-      background: transparent;
-      border: none;
-      width: 100%;
-      text-align: left;
-      font: inherit;
-      color: inherit;
       animation: stepIn var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;
       animation-delay: calc(var(--step-index, 0) * 60ms);
-      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
 
-    /* Interactive: only complete + error steps are clickable. */
-    .step.is-interactive { cursor: pointer; }
-    .step.is-interactive:hover { background: var(--cg-color-action-tertiary-background-hover); }
-    .step.is-interactive:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
-    }
-    button.step { display: flex; }
-
     @keyframes stepIn {
       from { opacity: 0; transform: translateX(calc(-1 * var(--cg-spacing-8))); }
-      to   { opacity: 1; transform: translateX(0); }
+      to { opacity: 1; transform: translateX(0); }
     }
 
     /* ── Status icon ── */
@@ -134,6 +90,7 @@ s.styles = [f, b, u`
       margin-top: var(--cg-spacing-1);
     }
 
+    /* Pending — empty circle */
     .status-icon.pending {
       color: var(--cg-color-surface-container-outlined);
     }
@@ -143,8 +100,9 @@ s.styles = [f, b, u`
       opacity: 0.4;
     }
 
+    /* Loading — spinning ring */
     .status-icon.loading {
-      color: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-ai-thinking-text);
     }
     .status-icon.loading .spinner {
       width: var(--cg-spacing-16);
@@ -155,19 +113,26 @@ s.styles = [f, b, u`
       animation: spin 0.8s linear infinite;
     }
 
-    .status-icon.complete { color: var(--cg-color-status-success-text-default); }
+    /* Complete — checkmark */
+    .status-icon.complete {
+      color: var(--cg-color-ai-complete-text);
+    }
     .status-icon.complete svg {
       width: var(--cg-spacing-16);
       height: var(--cg-spacing-16);
       animation: checkPop var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;
     }
+
     @keyframes checkPop {
       from { transform: scale(0); }
-      50%  { transform: scale(1.2); }
-      to   { transform: scale(1); }
+      50% { transform: scale(1.2); }
+      to { transform: scale(1); }
     }
 
-    .status-icon.error { color: var(--cg-color-status-error-text-default); }
+    /* Error — X icon */
+    .status-icon.error {
+      color: var(--cg-color-ai-error-text);
+    }
     .status-icon.error svg {
       width: var(--cg-spacing-16);
       height: var(--cg-spacing-16);
@@ -180,35 +145,26 @@ s.styles = [f, b, u`
       padding-top: var(--cg-spacing-2);
     }
 
-    .step-label-row {
-      display: flex;
-      align-items: baseline;
-      gap: var(--cg-spacing-8);
-    }
-
     .step-label {
       font-size: var(--cg-font-size-sm);
       font-weight: var(--cg-font-weight-medium);
       line-height: var(--cg-line-height-snug);
-      flex: 1;
-      min-width: 0;
-    }
-
-    .step-duration {
-      flex-shrink: 0;
-      font-size: var(--cg-font-size-xs);
-      color: var(--cg-color-surface-container-outlined);
-      font-variant-numeric: tabular-nums;
     }
 
     /* Status-based label colors */
-    .step.pending .step-label  {
+    .step.pending .step-label {
       color: var(--cg-color-surface-container-outlined);
       opacity: 0.5;
     }
-    .step.loading .step-label  { color: var(--cg-color-surface-base-text); }
-    .step.complete .step-label { color: var(--cg-color-surface-container-outlined); }
-    .step.error .step-label    { color: var(--cg-color-status-error-text-default); }
+    .step.loading .step-label {
+      color: var(--cg-color-surface-base-text);
+    }
+    .step.complete .step-label {
+      color: var(--cg-color-surface-container-outlined);
+    }
+    .step.error .step-label {
+      color: var(--cg-color-ai-error-text);
+    }
 
     .step-detail {
       font-size: var(--cg-font-size-xs);
@@ -217,14 +173,12 @@ s.styles = [f, b, u`
       margin-top: var(--cg-spacing-2);
     }
 
-    /* Loading step shimmer — accent-text for the highlight is the
-       semantic match (the text is being highlighted, not given a
-       background). */
+    /* Loading step shimmer on label */
     .step.loading .step-label {
       background: linear-gradient(
         110deg,
         var(--cg-color-surface-base-text) 35%,
-        var(--cg-color-accent-text) 50%,
+        var(--cg-color-ai-streaming-text) 50%,
         var(--cg-color-surface-base-text) 65%
       );
       background-size: 300% 100%;
@@ -233,32 +187,27 @@ s.styles = [f, b, u`
       -webkit-text-fill-color: transparent;
       animation: textSweep 1.8s var(--cg-transition-easing-default) infinite;
     }
+
     @keyframes textSweep {
-      0%   { background-position: 100% 50%; }
+      0% { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
     }
 
-    /* ── Connecting line between steps ──
-       Centered under the icon column. Icon left edge sits at
-       padding-left (spacing-16); icon width is spacing-20, so its
-       horizontal center is padding-left + (icon-width / 2) =
-       spacing-16 + spacing-20 / 2. (spacing-10 does NOT exist in the
-       scale — building the half-icon math via calc with real tokens.)
-       Top: padding-top (12) + icon margin-top (1) + icon-height (20)
-       + 2 px gap before the line begins. */
-    .step:not(:last-child) { position: relative; }
+    /* ── Connecting line between steps ── */
+    .step:not(:last-child) {
+      position: relative;
+    }
     .step:not(:last-child)::after {
       content: '';
       position: absolute;
-      left: calc(var(--cg-spacing-16) + var(--cg-spacing-20) / 2);
-      top: calc(var(--cg-spacing-12) + var(--cg-spacing-1) + var(--cg-spacing-20) + var(--cg-spacing-2));
+      left: var(--cg-spacing-16);
+      top: var(--cg-spacing-32);
       bottom: calc(-1 * var(--cg-spacing-2));
       width: var(--cg-border-width-50);
-      background: var(--cg-color-surface-cards-divider);
-      transform: translateX(calc(-1 * var(--cg-border-width-50) / 2));
+      background: var(--cg-color-surface-base-divider);
     }
     .step.complete:not(:last-child)::after {
-      background: var(--cg-color-status-success-text-default);
+      background: var(--cg-color-ai-complete-text);
       opacity: 0.3;
     }
 
@@ -276,22 +225,19 @@ s.styles = [f, b, u`
       .step { animation: none; }
       .status-icon.loading .spinner { animation: none; }
       .status-icon.complete svg { animation: none; }
-      .step.loading .step-label {
-        animation: none;
-        -webkit-text-fill-color: currentColor;
-      }
+      .step.loading .step-label { animation: none; -webkit-text-fill-color: currentColor; }
     }
   `];
-d([
+l([
   p({ type: Array })
-], s.prototype, "steps", 2);
-d([
+], o.prototype, "steps", 2);
+l([
   p({ type: Boolean, reflect: !0 })
-], s.prototype, "contained", 2);
-s = d([
-  h("ai-agent-steps")
-], s);
+], o.prototype, "contained", 2);
+o = l([
+  v("ai-agent-steps")
+], o);
 export {
-  s as AiAgentSteps
+  o as AiAgentSteps
 };
 //# sourceMappingURL=ai-agent-steps.js.map

package/dist/components/ai-agent-steps/ai-agent-steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-agent-steps.js","sources":["../../../src/components/ai-agent-steps/ai-agent-steps.ts"],"sourcesContent":["import { LitElement, html, css, nothing, svg } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Optional classification used to pick the completed-step icon. */\nexport type StepKind = 'llm' | 'tool' | 'retrieval' | 'decision';\n\n/** Step definition for ai-agent-steps. */\nexport interface AgentStep {\n  label: string;\n  status: 'pending' | 'loading' | 'complete' | 'error';\n  detail?: string;\n  /** Optional duration in ms — rendered right-aligned for completed steps. */\n  duration?: number;\n  /** Optional step kind — drives the icon for completed steps. */\n  kind?: StepKind;\n}\n\n/**\n * <ai-agent-steps> — Live agent task feed. Status icons (pending / running /\n * complete / error), shimmering label on the active step, connecting thread\n * line under the icons, optional per-step duration and kind (LLM call / tool\n * call / retrieval / decision). Modeled on LangGraph / Langfuse trace\n * viewers and the Cursor / Claude Code agent step lists.\n *\n * @example\n * ```html\n * <ai-agent-steps\n *   .steps=${[\n *     { label: 'Search the web',     status: 'complete', duration: 1240, kind: 'tool' },\n *     { label: 'Read 3 results',     status: 'complete', duration: 880,  kind: 'retrieval' },\n *     { label: 'Analyse content',    status: 'loading' },\n *     { label: 'Generate summary',   status: 'pending',  kind: 'llm' },\n *   ]}\n * ></ai-agent-steps>\n * ```\n *\n * @fires {CustomEvent<{index: number, step: AgentStep}>} ai-step-click - Completed/errored step activated\n */\n@customElement('ai-agent-steps')\nexport class AiAgentSteps extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n\n    .steps {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n    }\n\n    /* ── Step row (interactive when clickable) ── */\n    .step {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      background: transparent;\n      border: none;\n      width: 100%;\n      text-align: left;\n      font: inherit;\n      color: inherit;\n      animation: stepIn var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;\n      animation-delay: calc(var(--step-index, 0) * 60ms);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    /* Interactive: only complete + error steps are clickable. */\n    .step.is-interactive { cursor: pointer; }\n    .step.is-interactive:hover { background: var(--cg-color-action-tertiary-background-hover); }\n    .step.is-interactive:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    button.step { display: flex; }\n\n    @keyframes stepIn {\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-20);\n      height: var(--cg-spacing-20);\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-top: var(--cg-spacing-1);\n    }\n\n    .status-icon.pending {\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .status-icon.pending svg {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      opacity: 0.4;\n    }\n\n    .status-icon.loading {\n      color: var(--cg-color-action-primary-background-default);\n    }\n    .status-icon.loading .spinner {\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    }\n\n    .status-icon.complete { color: var(--cg-color-status-success-text-default); }\n    .status-icon.complete svg {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      animation: checkPop var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;\n    }\n    @keyframes checkPop {\n      from { transform: scale(0); }\n      50%  { transform: scale(1.2); }\n      to   { transform: scale(1); }\n    }\n\n    .status-icon.error { color: var(--cg-color-status-error-text-default); }\n    .status-icon.error svg {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n    }\n\n    /* ── Step text ── */\n    .step-body {\n      flex: 1;\n      min-width: 0;\n      padding-top: var(--cg-spacing-2);\n    }\n\n    .step-label-row {\n      display: flex;\n      align-items: baseline;\n      gap: var(--cg-spacing-8);\n    }\n\n    .step-label {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      line-height: var(--cg-line-height-snug);\n      flex: 1;\n      min-width: 0;\n    }\n\n    .step-duration {\n      flex-shrink: 0;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* Status-based label colors */\n    .step.pending .step-label  {\n      color: var(--cg-color-surface-container-outlined);\n      opacity: 0.5;\n    }\n    .step.loading .step-label  { color: var(--cg-color-surface-base-text); }\n    .step.complete .step-label { color: var(--cg-color-surface-container-outlined); }\n    .step.error .step-label    { color: var(--cg-color-status-error-text-default); }\n\n    .step-detail {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n      margin-top: var(--cg-spacing-2);\n    }\n\n    /* Loading step shimmer — accent-text for the highlight is the\n       semantic match (the text is being highlighted, not given a\n       background). */\n    .step.loading .step-label {\n      background: linear-gradient(\n        110deg,\n        var(--cg-color-surface-base-text) 35%,\n        var(--cg-color-accent-text) 50%,\n        var(--cg-color-surface-base-text) 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 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    /* ── Connecting line between steps ──\n       Centered under the icon column. Icon left edge sits at\n       padding-left (spacing-16); icon width is spacing-20, so its\n       horizontal center is padding-left + (icon-width / 2) =\n       spacing-16 + spacing-20 / 2. (spacing-10 does NOT exist in the\n       scale — building the half-icon math via calc with real tokens.)\n       Top: padding-top (12) + icon margin-top (1) + icon-height (20)\n       + 2 px gap before the line begins. */\n    .step:not(:last-child) { position: relative; }\n    .step:not(:last-child)::after {\n      content: '';\n      position: absolute;\n      left: calc(var(--cg-spacing-16) + var(--cg-spacing-20) / 2);\n      top: calc(var(--cg-spacing-12) + var(--cg-spacing-1) + var(--cg-spacing-20) + var(--cg-spacing-2));\n      bottom: calc(-1 * var(--cg-spacing-2));\n      width: var(--cg-border-width-50);\n      background: var(--cg-color-surface-cards-divider);\n      transform: translateX(calc(-1 * var(--cg-border-width-50) / 2));\n    }\n    .step.complete:not(:last-child)::after {\n      background: var(--cg-color-status-success-text-default);\n      opacity: 0.3;\n    }\n\n    /* ── Contained variant ── */\n    :host([contained]) {\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      background: var(--cg-color-surface-cards-background);\n      padding: var(--cg-spacing-16);\n    }\n\n    @keyframes spin { to { transform: rotate(360deg); } }\n\n    @media (prefers-reduced-motion: reduce) {\n      .step { animation: none; }\n      .status-icon.loading .spinner { animation: none; }\n      .status-icon.complete svg { animation: none; }\n      .step.loading .step-label {\n        animation: none;\n        -webkit-text-fill-color: currentColor;\n      }\n    }\n  `];\n\n  /** Steps array — each with label, status, optional detail / duration / kind. */\n  @property({ type: Array }) steps: AgentStep[] = [];\n\n  /** Wrap in a card container. */\n  @property({ type: Boolean, reflect: true }) contained = false;\n\n  // ─── Helpers ────────────────────────────────────────────────────────────\n\n  private _isInteractive(step: AgentStep): boolean {\n    return step.status === 'complete' || step.status === 'error';\n  }\n\n  private _formatDuration(ms: number): string {\n    if (ms < 1000) return `${Math.round(ms)} ms`;\n    if (ms < 60_000) return `${(ms / 1000).toFixed(1)} s`;\n    return `${Math.floor(ms / 60_000)}m ${Math.round((ms % 60_000) / 1000)}s`;\n  }\n\n  private _handleStepClick(index: number): void {\n    const step = this.steps[index];\n    if (!step || !this._isInteractive(step)) return;\n    this.dispatchEvent(new CustomEvent('ai-step-click', {\n      detail: { index, step },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  // ─── Status / kind icons ────────────────────────────────────────────────\n\n  private _renderStatusIcon(step: AgentStep) {\n    if (step.status === 'loading') {\n      return html`<div class=\"spinner\"></div>`;\n    }\n    if (step.status === 'pending') {\n      return svg`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"12\" r=\"8\"/></svg>`;\n    }\n    if (step.status === 'error') {\n      return svg`<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    }\n    // Complete — pick a kind-specific icon when provided.\n    return this._renderKindIcon(step.kind);\n  }\n\n  private _renderKindIcon(kind?: StepKind) {\n    switch (kind) {\n      case 'tool':\n        // Wrench\n        return svg`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14.7 6.3a4 4 0 1 1 5 5l-9 9-5 1 1-5z\"/></svg>`;\n      case 'retrieval':\n        // Stack of docs\n        return svg`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"6\" y=\"4\" width=\"13\" height=\"14\" rx=\"2\"/><path d=\"M3 8v11a2 2 0 0 0 2 2h11\"/></svg>`;\n      case 'decision':\n        // Branch fork\n        return svg`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><circle cx=\"6\" cy=\"3\" r=\"2\"/><circle cx=\"6\" cy=\"21\" r=\"2\"/><circle cx=\"18\" cy=\"6\" r=\"2\"/><path d=\"M6 5v14M6 12c6 0 6-6 12-6\"/></svg>`;\n      case 'llm':\n        // Sparkle\n        return svg`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 3l1.8 5.4L19 10l-5.2 1.6L12 17l-1.8-5.4L5 10l5.2-1.6z\"/></svg>`;\n      default:\n        // Default check mark\n        return svg`<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    }\n  }\n\n  override render() {\n    if (this.steps.length === 0) return nothing;\n\n    return html`\n      <div class=\"steps\" role=\"list\" aria-label=\"Agent steps\">\n        ${this.steps.map((step, i) => {\n          const interactive = this._isInteractive(step);\n          const classes = `step ${step.status} ${interactive ? 'is-interactive' : ''}`;\n\n          const body = html`\n            <span class=\"status-icon ${step.status}\" aria-hidden=\"true\">\n              ${this._renderStatusIcon(step)}\n            </span>\n            <div class=\"step-body\">\n              <div class=\"step-label-row\">\n                <span class=\"step-label\">${step.label}</span>\n                ${step.duration != null && step.status !== 'pending' ? html`\n                  <span class=\"step-duration\">${this._formatDuration(step.duration)}</span>\n                ` : nothing}\n              </div>\n              ${step.detail ? html`<span class=\"step-detail\">${step.detail}</span>` : nothing}\n            </div>\n          `;\n\n          // Interactive rows are real <button>s for native focus + Enter/Space.\n          // Non-interactive rows stay as <div>s so they don't pollute the tab order.\n          if (interactive) {\n            return html`\n              <button\n                class=${classes}\n                type=\"button\"\n                role=\"listitem\"\n                style=\"--step-index: ${i}\"\n                @click=${() => this._handleStepClick(i)}\n              >${body}</button>\n            `;\n          }\n          return html`\n            <div\n              class=${classes}\n              role=\"listitem\"\n              aria-current=${step.status === 'loading' ? 'step' : nothing}\n              style=\"--step-index: ${i}\"\n            >${body}</div>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'ai-agent-steps': AiAgentSteps; }\n}\n"],"names":["AiAgentSteps","LitElement","step","ms","index","html","svg","kind","nothing","i","interactive","classes","body","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-agent-steps.js","sources":["../../../src/components/ai-agent-steps/ai-agent-steps.ts"],"sourcesContent":["import { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\n/** Step definition for ai-agent-steps. */\nexport interface AgentStep {\n  label: string;\n  status: 'pending' | 'loading' | 'complete' | 'error';\n  detail?: string;\n}\n\n/**\n * <ai-agent-steps> — Live task feed showing AI agent operations in progress.\n *\n * @example\n * ```html\n * <ai-agent-steps\n *   .steps=${[\n *     { label: 'Searching the web', status: 'complete' },\n *     { label: 'Reading 3 results', status: 'complete' },\n *     { label: 'Analyzing content', status: 'loading' },\n *     { label: 'Generating summary', status: 'pending' },\n *   ]}\n * ></ai-agent-steps>\n * ```\n *\n * @fires {CustomEvent<{index: number}>} ai-step-click - When a completed step is clicked\n */\n@customElement('ai-agent-steps')\nexport class AiAgentSteps extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      display: block;\n    }\n\n    .steps {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n    }\n\n    /* ── Step row ── */\n    .step {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      animation: stepIn var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;\n      animation-delay: calc(var(--step-index, 0) * 60ms);\n    }\n\n    @keyframes stepIn {\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-20);\n      height: var(--cg-spacing-20);\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      margin-top: var(--cg-spacing-1);\n    }\n\n    /* Pending — empty circle */\n    .status-icon.pending {\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .status-icon.pending svg {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      opacity: 0.4;\n    }\n\n    /* Loading — spinning ring */\n    .status-icon.loading {\n      color: var(--cg-color-ai-thinking-text);\n    }\n    .status-icon.loading .spinner {\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    }\n\n    /* Complete — checkmark */\n    .status-icon.complete {\n      color: var(--cg-color-ai-complete-text);\n    }\n    .status-icon.complete svg {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      animation: checkPop var(--cg-transition-duration-slow) var(--cg-transition-easing-ease-out) both;\n    }\n\n    @keyframes checkPop {\n      from { transform: scale(0); }\n      50% { transform: scale(1.2); }\n      to { transform: scale(1); }\n    }\n\n    /* Error — X icon */\n    .status-icon.error {\n      color: var(--cg-color-ai-error-text);\n    }\n    .status-icon.error svg {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n    }\n\n    /* ── Step text ── */\n    .step-body {\n      flex: 1;\n      min-width: 0;\n      padding-top: var(--cg-spacing-2);\n    }\n\n    .step-label {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    /* Status-based label colors */\n    .step.pending .step-label {\n      color: var(--cg-color-surface-container-outlined);\n      opacity: 0.5;\n    }\n    .step.loading .step-label {\n      color: var(--cg-color-surface-base-text);\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-ai-error-text);\n    }\n\n    .step-detail {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n      margin-top: var(--cg-spacing-2);\n    }\n\n    /* Loading step shimmer on label */\n    .step.loading .step-label {\n      background: linear-gradient(\n        110deg,\n        var(--cg-color-surface-base-text) 35%,\n        var(--cg-color-ai-streaming-text) 50%,\n        var(--cg-color-surface-base-text) 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 var(--cg-transition-easing-default) infinite;\n    }\n\n    @keyframes textSweep {\n      0% { background-position: 100% 50%; }\n      100% { background-position: 0% 50%; }\n    }\n\n    /* ── Connecting line between steps ── */\n    .step:not(:last-child) {\n      position: relative;\n    }\n    .step:not(:last-child)::after {\n      content: '';\n      position: absolute;\n      left: var(--cg-spacing-16);\n      top: var(--cg-spacing-32);\n      bottom: calc(-1 * var(--cg-spacing-2));\n      width: var(--cg-border-width-50);\n      background: var(--cg-color-surface-base-divider);\n    }\n    .step.complete:not(:last-child)::after {\n      background: var(--cg-color-ai-complete-text);\n      opacity: 0.3;\n    }\n\n    /* ── Contained variant ── */\n    :host([contained]) {\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      background: var(--cg-color-surface-cards-background);\n      padding: var(--cg-spacing-16);\n    }\n\n    @keyframes spin { to { transform: rotate(360deg); } }\n\n    @media (prefers-reduced-motion: reduce) {\n      .step { animation: none; }\n      .status-icon.loading .spinner { animation: none; }\n      .status-icon.complete svg { animation: none; }\n      .step.loading .step-label { animation: none; -webkit-text-fill-color: currentColor; }\n    }\n  `];\n\n  /** Steps array — each with label, status, and optional detail */\n  @property({ type: Array }) steps: AgentStep[] = [];\n\n  /** Wrap in a card container */\n  @property({ type: Boolean, reflect: true }) contained = false;\n\n  private _handleStepClick(index: number) {\n    if (this.steps[index]?.status === 'complete') {\n      this.dispatchEvent(new CustomEvent('ai-step-click', {\n        detail: { index },\n        bubbles: true,\n        composed: true,\n      }));\n    }\n  }\n\n  private _renderStatusIcon(status: string) {\n    switch (status) {\n      case 'complete':\n        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      case 'error':\n        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      case 'loading':\n        return html`<div class=\"spinner\"></div>`;\n      default: // pending\n        return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><circle cx=\"12\" cy=\"12\" r=\"8\"/></svg>`;\n    }\n  }\n\n  override render() {\n    if (this.steps.length === 0) return nothing;\n\n    return html`\n      <div class=\"steps\" role=\"list\" aria-label=\"Agent steps\">\n        ${this.steps.map((step, i) => html`\n          <div\n            class=\"step ${step.status}\"\n            role=\"listitem\"\n            style=\"--step-index: ${i}\"\n            @click=${() => this._handleStepClick(i)}\n          >\n            <span class=\"status-icon ${step.status}\">\n              ${this._renderStatusIcon(step.status)}\n            </span>\n            <div class=\"step-body\">\n              <span class=\"step-label\">${step.label}</span>\n              ${step.detail ? html`<span class=\"step-detail\">${step.detail}</span>` : nothing}\n            </div>\n          </div>\n        `)}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap { 'ai-agent-steps': AiAgentSteps; }\n}\n"],"names":["AiAgentSteps","LitElement","index","status","html","nothing","step","i","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { css as u, LitElement as h, html as e, nothing as c } from "lit";
 import { property as a, state as v, customElement as p } from "lit/decorators.js";
-import { h as f, r as m, f as b, p as y } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as f, r as m, f as b, p as y } from "../../chunks/premium.css-DHekUEUt.js";
 var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, t = (s, o, d, n) => {
   for (var i = n > 1 ? void 0 : n ? x(o, d) : o, l = s.length - 1, g; l >= 0; l--)
     (g = s[l]) && (i = (n ? g(o, d, i) : g(i)) || i);
@@ -95,7 +95,7 @@ r.styles = [f, m, b, y, u`
       align-items: flex-start;
       gap: var(--cg-spacing-12);
       position: relative;
-      border-left: var(--cg-border-width-200) solid transparent;
+      border-left: var(--cg-border-width-300) solid transparent;
       transition:
         box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
         transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
@@ -113,11 +113,11 @@ r.styles = [f, m, b, y, u`
       outline: none;
       box-shadow:
         0 0 0 2px var(--cg-color-surface-base-background),
-        0 0 0 3px var(--cg-overlay-accent-strong);
+        0 0 0 3px var(--cg-color-focus-ring);
     }
     .card.critical {
       border-left-color: var(--cg-color-status-error-text-default);
-      animation: pulse-glow var(--cg-transition-duration-slower) var(--cg-transition-easing-default) infinite;
+      animation: pulse-glow var(--cg-transition-duration-slow) var(--cg-transition-easing-default) infinite;
     }
 
     /* ── Dismiss exit ── */
@@ -170,7 +170,7 @@ r.styles = [f, m, b, y, u`
 
     .message {
       font-size: var(--cg-font-size-sm);
-      color: var(--cg-color-input-text-placeholder);
+      color: var(--cg-color-surface-cards-subtle);
       line-height: var(--cg-line-height-normal);
       padding-bottom: var(--cg-spacing-12);
       margin-bottom: var(--cg-spacing-12);

package/dist/components/ai-alert-card/ai-alert-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-alert-card.js","sources":["../../../src/components/ai-alert-card/ai-alert-card.ts"],"sourcesContent":["/**\n * @element ai-alert-card\n * Priority alert card with urgency-colored border, deadline badge, action button, and dismissal.\n *\n * @example\n * ```html\n * <ai-alert-card\n *   title=\"Token budget exceeded\"\n *   urgency=\"urgent\"\n *   message=\"Context window is at 98% capacity.\"\n *   deadline=\"2h remaining\"\n *   actionLabel=\"Truncate\"\n * ></ai-alert-card>\n * ```\n *\n * @fires {CustomEvent<{title: string, urgency: string}>} ai-alert-action - Action button clicked\n * @fires {CustomEvent<{title: string}>} ai-alert-dismiss - Dismiss button clicked\n *\n * @cssprop --cg-color-status-error-text-default - Critical urgency pulse and border\n * @cssprop --cg-color-focus-ring - Focus ring color\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes, pulseKeyframes } from '../../styles/index.js';\n\ntype Urgency = 'info' | 'warning' | 'urgent' | 'critical';\n\n@customElement('ai-alert-card')\nexport class AiAlertCard extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, pulseKeyframes, 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      padding: var(--cg-spacing-16) var(--cg-spacing-16) var(--cg-spacing-16) var(--cg-spacing-20);\n      display: flex;\n      align-items: flex-start;\n      gap: var(--cg-spacing-12);\n      position: relative;\n      border-left: var(--cg-border-width-200) solid transparent;\n      transition:\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .card:hover {\n      transform: translateY(-1px);\n      box-shadow: var(--cg-elevation-2);\n    }\n\n    /* ── Urgency left border ── */\n    .card.info    { border-left-color: var(--cg-color-status-info-text-default); }\n    .card.warning { border-left-color: var(--cg-color-status-warning-text-default); }\n    .card.urgent  { border-left-color: var(--cg-color-status-error-border-default); }\n    .card:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 2px var(--cg-color-surface-base-background),\n        0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .card.critical {\n      border-left-color: var(--cg-color-status-error-text-default);\n      animation: pulse-glow var(--cg-transition-duration-slower) var(--cg-transition-easing-default) infinite;\n    }\n\n    /* ── Dismiss exit ── */\n    @keyframes alertExit {\n      from { opacity: 1; transform: translateY(0); }\n      to { opacity: 0; transform: translateY(-8px) scale(0.97); }\n    }\n    .card.dismissing {\n      animation: alertExit var(--cg-transition-duration-default) var(--cg-transition-easing-ease-in) forwards;\n      pointer-events: none;\n    }\n\n    /* ── Icon ── */\n    .icon {\n      font-size: var(--cg-font-size-xl);\n      flex-shrink: 0;\n      margin-top: var(--cg-spacing-2);\n    }\n    .icon.info    { color: var(--cg-color-status-info-text-default); }\n    .icon.warning { color: var(--cg-color-status-warning-text-default); }\n    .icon.urgent  { color: var(--cg-color-status-error-border-default); }\n    .icon.critical { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Body ── */\n    .body { flex: 1; min-width: 0; }\n\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      margin-bottom: var(--cg-spacing-6);\n    }\n    .title {\n      font-size: var(--cg-font-size-base);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n    }\n    .deadline {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      background: var(--cg-overlay-dark-subtle);\n      color: var(--cg-color-surface-base-text);\n      white-space: nowrap;\n    }\n\n    .message {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-placeholder);\n      line-height: var(--cg-line-height-normal);\n      padding-bottom: var(--cg-spacing-12);\n      margin-bottom: var(--cg-spacing-12);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n\n    /* ── Dismiss (positioned cg-button) ── */\n    .dismiss {\n      position: absolute;\n      top: var(--cg-spacing-8);\n      right: var(--cg-spacing-8);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .card:hover { transform: none; }\n      .card.critical { animation: none; }\n      .card.dismissing { animation: none; opacity: 0; }\n    }\n\n    @keyframes pulse-glow {\n      0%, 100% { border-left-color: var(--cg-color-status-error-text-default); }\n      50% { border-left-color: var(--cg-color-status-error-border-default); }\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .card { border-radius: 0; }\n    :host([rounded=\"sm\"]) .card { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .card { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .card { border-radius: var(--cg-border-radius-200); }\n    :host([rounded=\"full\"]) .card { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: String }) override title = '';\n  @property({ type: String }) message = '';\n  @property({ type: String }) urgency: Urgency = 'info';\n  @property({ type: String }) deadline = '';\n  @property({ type: String }) actionLabel = '';\n  @property({ type: Boolean }) dismissible = true;\n\n  @state() private _dismissing = false;\n\n  private _urgencyIcon(): unknown {\n    if (this.urgency === 'info') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4m0-4h.01\"/></svg>`;\n    if (this.urgency === 'warning') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\"/></svg>`;\n    if (this.urgency === 'urgent') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"/></svg>`;\n    return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`;\n  }\n\n  private _handleAction() {\n    this.dispatchEvent(new CustomEvent('ai-alert-action', {\n      bubbles: true, composed: true,\n      detail: { title: this.title, urgency: this.urgency },\n    }));\n  }\n\n  private _handleDismiss() {\n    this._dismissing = true;\n    this.dispatchEvent(new CustomEvent('ai-alert-dismiss', {\n      bubbles: true, composed: true,\n      detail: { title: this.title },\n    }));\n    setTimeout(() => { this._dismissing = false; this.remove(); }, 250);\n  }\n\n  private _handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Escape' && this.dismissible) {\n      e.preventDefault();\n      this._handleDismiss();\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"card ${this.urgency} ${this._dismissing ? 'dismissing' : ''}\"\n        role=\"alert\"\n        aria-label=\"${this.urgency} alert: ${this.title}\"\n        tabindex=\"0\"\n        @keydown=${this._handleKeyDown}\n      >\n        <span class=\"icon ${this.urgency}\" aria-hidden=\"true\">${this._urgencyIcon()}</span>\n\n        <div class=\"body\">\n          <div class=\"header\">\n            <span class=\"title\">${this.title}</span>\n            ${this.deadline ? html`\n              <span class=\"deadline\" aria-label=\"Deadline: ${this.deadline}\">\n                <span aria-hidden=\"true\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span>\n                ${this.deadline}\n              </span>\n            ` : nothing}\n          </div>\n\n          ${this.message ? html`<div class=\"message\">${this.message}</div>` : nothing}\n\n          ${this.actionLabel ? html`\n            <cg-button\n              variant=${this.urgency === 'critical' ? 'primary' : 'secondary'}\n              size=\"sm\"\n              type=${this.urgency === 'urgent' || this.urgency === 'critical' ? 'danger' : 'normal'}\n              @click=${this._handleAction}\n              label=\"${this.actionLabel}\"\n            >${this.actionLabel}</cg-button>\n          ` : nothing}\n        </div>\n\n        ${this.dismissible ? html`\n          <cg-button\n            class=\"dismiss\"\n            variant=\"tertiary\"\n            size=\"sm\"\n            rounded=\"full\"\n            label=\"Dismiss alert\"\n            @click=${this._handleDismiss}\n          ><cg-icon name=\"close\" size=\"xs\"></cg-icon></cg-button>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-alert-card': AiAlertCard;\n  }\n}\n"],"names":["AiAlertCard","LitElement","html","e","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","pulseKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-alert-card.js","sources":["../../../src/components/ai-alert-card/ai-alert-card.ts"],"sourcesContent":["/**\n * @element ai-alert-card\n * Priority alert card with urgency-colored border, deadline badge, action button, and dismissal.\n *\n * @example\n * ```html\n * <ai-alert-card\n *   title=\"Token budget exceeded\"\n *   urgency=\"urgent\"\n *   message=\"Context window is at 98% capacity.\"\n *   deadline=\"2h remaining\"\n *   actionLabel=\"Truncate\"\n * ></ai-alert-card>\n * ```\n *\n * @fires {CustomEvent<{title: string, urgency: string}>} ai-alert-action - Action button clicked\n * @fires {CustomEvent<{title: string}>} ai-alert-dismiss - Dismiss button clicked\n *\n * @cssprop --cg-color-status-error-text-default - Critical urgency pulse and border\n * @cssprop --cg-color-focus-ring - Focus ring color\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes, pulseKeyframes } from '../../styles/index.js';\n\ntype Urgency = 'info' | 'warning' | 'urgent' | 'critical';\n\n@customElement('ai-alert-card')\nexport class AiAlertCard extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, pulseKeyframes, 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      padding: var(--cg-spacing-16) var(--cg-spacing-16) var(--cg-spacing-16) var(--cg-spacing-20);\n      display: flex;\n      align-items: flex-start;\n      gap: var(--cg-spacing-12);\n      position: relative;\n      border-left: var(--cg-border-width-300) solid transparent;\n      transition:\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .card:hover {\n      transform: translateY(-1px);\n      box-shadow: var(--cg-elevation-2);\n    }\n\n    /* ── Urgency left border ── */\n    .card.info    { border-left-color: var(--cg-color-status-info-text-default); }\n    .card.warning { border-left-color: var(--cg-color-status-warning-text-default); }\n    .card.urgent  { border-left-color: var(--cg-color-status-error-border-default); }\n    .card:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 2px var(--cg-color-surface-base-background),\n        0 0 0 3px var(--cg-color-focus-ring);\n    }\n    .card.critical {\n      border-left-color: var(--cg-color-status-error-text-default);\n      animation: pulse-glow var(--cg-transition-duration-slow) var(--cg-transition-easing-default) infinite;\n    }\n\n    /* ── Dismiss exit ── */\n    @keyframes alertExit {\n      from { opacity: 1; transform: translateY(0); }\n      to { opacity: 0; transform: translateY(-8px) scale(0.97); }\n    }\n    .card.dismissing {\n      animation: alertExit var(--cg-transition-duration-default) var(--cg-transition-easing-ease-in) forwards;\n      pointer-events: none;\n    }\n\n    /* ── Icon ── */\n    .icon {\n      font-size: var(--cg-font-size-xl);\n      flex-shrink: 0;\n      margin-top: var(--cg-spacing-2);\n    }\n    .icon.info    { color: var(--cg-color-status-info-text-default); }\n    .icon.warning { color: var(--cg-color-status-warning-text-default); }\n    .icon.urgent  { color: var(--cg-color-status-error-border-default); }\n    .icon.critical { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Body ── */\n    .body { flex: 1; min-width: 0; }\n\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      margin-bottom: var(--cg-spacing-6);\n    }\n    .title {\n      font-size: var(--cg-font-size-base);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n    }\n    .deadline {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      background: var(--cg-overlay-dark-subtle);\n      color: var(--cg-color-surface-base-text);\n      white-space: nowrap;\n    }\n\n    .message {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-cards-subtle);\n      line-height: var(--cg-line-height-normal);\n      padding-bottom: var(--cg-spacing-12);\n      margin-bottom: var(--cg-spacing-12);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n\n    /* ── Dismiss (positioned cg-button) ── */\n    .dismiss {\n      position: absolute;\n      top: var(--cg-spacing-8);\n      right: var(--cg-spacing-8);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .card:hover { transform: none; }\n      .card.critical { animation: none; }\n      .card.dismissing { animation: none; opacity: 0; }\n    }\n\n    @keyframes pulse-glow {\n      0%, 100% { border-left-color: var(--cg-color-status-error-text-default); }\n      50% { border-left-color: var(--cg-color-status-error-border-default); }\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .card { border-radius: 0; }\n    :host([rounded=\"sm\"]) .card { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .card { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .card { border-radius: var(--cg-border-radius-200); }\n    :host([rounded=\"full\"]) .card { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: String }) override title = '';\n  @property({ type: String }) message = '';\n  @property({ type: String }) urgency: Urgency = 'info';\n  @property({ type: String }) deadline = '';\n  @property({ type: String }) actionLabel = '';\n  @property({ type: Boolean }) dismissible = true;\n\n  @state() private _dismissing = false;\n\n  private _urgencyIcon(): unknown {\n    if (this.urgency === 'info') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M12 16v-4m0-4h.01\"/></svg>`;\n    if (this.urgency === 'warning') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\"/></svg>`;\n    if (this.urgency === 'urgent') return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"/></svg>`;\n    return html`<svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`;\n  }\n\n  private _handleAction() {\n    this.dispatchEvent(new CustomEvent('ai-alert-action', {\n      bubbles: true, composed: true,\n      detail: { title: this.title, urgency: this.urgency },\n    }));\n  }\n\n  private _handleDismiss() {\n    this._dismissing = true;\n    this.dispatchEvent(new CustomEvent('ai-alert-dismiss', {\n      bubbles: true, composed: true,\n      detail: { title: this.title },\n    }));\n    setTimeout(() => { this._dismissing = false; this.remove(); }, 250);\n  }\n\n  private _handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Escape' && this.dismissible) {\n      e.preventDefault();\n      this._handleDismiss();\n    }\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"card ${this.urgency} ${this._dismissing ? 'dismissing' : ''}\"\n        role=\"alert\"\n        aria-label=\"${this.urgency} alert: ${this.title}\"\n        tabindex=\"0\"\n        @keydown=${this._handleKeyDown}\n      >\n        <span class=\"icon ${this.urgency}\" aria-hidden=\"true\">${this._urgencyIcon()}</span>\n\n        <div class=\"body\">\n          <div class=\"header\">\n            <span class=\"title\">${this.title}</span>\n            ${this.deadline ? html`\n              <span class=\"deadline\" aria-label=\"Deadline: ${this.deadline}\">\n                <span aria-hidden=\"true\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><polyline points=\"12 6 12 12 16 14\"/></svg></span>\n                ${this.deadline}\n              </span>\n            ` : nothing}\n          </div>\n\n          ${this.message ? html`<div class=\"message\">${this.message}</div>` : nothing}\n\n          ${this.actionLabel ? html`\n            <cg-button\n              variant=${this.urgency === 'critical' ? 'primary' : 'secondary'}\n              size=\"sm\"\n              type=${this.urgency === 'urgent' || this.urgency === 'critical' ? 'danger' : 'normal'}\n              @click=${this._handleAction}\n              label=\"${this.actionLabel}\"\n            >${this.actionLabel}</cg-button>\n          ` : nothing}\n        </div>\n\n        ${this.dismissible ? html`\n          <cg-button\n            class=\"dismiss\"\n            variant=\"tertiary\"\n            size=\"sm\"\n            rounded=\"full\"\n            label=\"Dismiss alert\"\n            @click=${this._handleDismiss}\n          ><cg-icon name=\"close\" size=\"xs\"></cg-icon></cg-button>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-alert-card': AiAlertCard;\n  }\n}\n"],"names":["AiAlertCard","LitElement","html","e","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","pulseKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-analytics-chart/ai-analytics-chart.d.ts

@@ -20,25 +20,12 @@ export declare class AiAnalyticsChart extends LitElement {
     disconnectedCallback(): void;
     private get _margin();
     private get _allY();
-    /**
-     * X-axis values in the order the consumer passed them. Set's insertion order
-     * is preserved, so points appear in the order of the first series. Sorting
-     * alphabetically (the previous behavior) breaks any non-alphabetic axis —
-     * e.g. days of the week ended up Fri, Mon, Sat, Sun, Thu, Tue, Wed and lines
-     * zig-zagged between non-adjacent days.
-     */
     private get _allX();
     private get _yMin();
     private get _yMax();
     private _scaleX;
     private _scaleY;
     private _buildPath;
-    /** Closed area under the line for the gradient fill. */
-    private _buildArea;
-    /** Stable id-safe slug for a series name (used by SVG gradient refs). */
-    private _seriesId;
-    /** Format a y-tick value: integer for ranges ≥ 10, one decimal otherwise. */
-    private _formatTick;
     private _onPointHover;
     private _onMouseLeave;
     render(): import('lit').TemplateResult<1>;

package/dist/components/ai-analytics-chart/ai-analytics-chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-analytics-chart.d.ts","sourceRoot":"","sources":["../../../src/components/ai-analytics-chart/ai-analytics-chart.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAI1D,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAClC;AAWD,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAiInB;IACwB,MAAM,EAAE,eAAe,EAAE,CAAM;IACrB,KAAK,SAAM;IACpB,MAAM,SAAM;IACZ,MAAM,SAAO;IAEhC,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,MAAM,CAAO;IAE9B,OAAO,CAAC,GAAG,CAAC,CAAiB;IAEpB,iBAAiB,IAAI,IAAI;IAWzB,oBAAoB,IAAI,IAAI;IAKrC,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,KAAK,GAEhB;IAED;;;;;;OAMG;IACH,OAAO,KAAK,KAAK,GAIhB;IAED,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,UAAU;IAQlB,wDAAwD;IACxD,OAAO,CAAC,UAAU;IAUlB,yEAAyE;IACzE,OAAO,CAAC,SAAS;IAIjB,6EAA6E;IAC7E,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,aAAa;IAIZ,MAAM;CAsFhB;AAgCD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}
+{"version":3,"file":"ai-analytics-chart.d.ts","sourceRoot":"","sources":["../../../src/components/ai-analytics-chart/ai-analytics-chart.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAClC;AAWD,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BA0HnB;IACwB,MAAM,EAAE,eAAe,EAAE,CAAM;IACrB,KAAK,SAAM;IACpB,MAAM,SAAM;IACZ,MAAM,SAAO;IAEhC,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,MAAM,CAAO;IAE9B,OAAO,CAAC,GAAG,CAAC,CAAiB;IAEpB,iBAAiB,IAAI,IAAI;IAWzB,oBAAoB,IAAI,IAAI;IAKrC,OAAO,KAAK,OAAO,GAElB;IAED,OAAO,KAAK,KAAK,GAEhB;IAED,OAAO,KAAK,KAAK,GAIhB;IAED,OAAO,KAAK,KAAK,GAAyC;IAC1D,OAAO,KAAK,KAAK,GAAyC;IAE1D,OAAO,CAAC,OAAO;IAQf,OAAO,CAAC,OAAO;IAOf,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,aAAa;IAmBrB,OAAO,CAAC,aAAa;IAIZ,MAAM;CAyEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,gBAAgB,CAAC;KACxC;CACF"}