@cognivo/components 0.8.0

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

@@ -0,0 +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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"}

package/dist/components/ai-alert-card/ai-alert-card.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+type Urgency = 'info' | 'warning' | 'urgent' | 'critical';
+export declare class AiAlertCard extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    title: string;
+    message: string;
+    urgency: Urgency;
+    deadline: string;
+    actionLabel: string;
+    dismissible: boolean;
+    private _dismissing;
+    private _urgencyIcon;
+    private _handleAction;
+    private _handleDismiss;
+    private _handleKeyDown;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-alert-card': AiAlertCard;
+    }
+}
+export {};
+//# sourceMappingURL=ai-alert-card.d.ts.map

package/dist/components/ai-alert-card/ai-alert-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-alert-card.d.ts","sourceRoot":"","sources":["../../../src/components/ai-alert-card/ai-alert-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,KAAK,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE1D,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAwHnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IAC7C,KAAK,SAAM;IACpB,OAAO,SAAM;IACb,OAAO,EAAE,OAAO,CAAU;IAC1B,QAAQ,SAAM;IACd,WAAW,SAAM;IAChB,WAAW,UAAQ;IAEvC,OAAO,CAAC,WAAW,CAAS;IAErC,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,cAAc;IAStB,OAAO,CAAC,cAAc;IAOb,MAAM;CAgDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,WAAW,CAAC;KAC9B;CACF"}

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

@@ -0,0 +1,235 @@
+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";
+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);
+  return n && i && w(o, d, i), i;
+};
+let r = class extends h {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.title = "", this.message = "", this.urgency = "info", this.deadline = "", this.actionLabel = "", this.dismissible = !0, this._dismissing = !1;
+  }
+  _urgencyIcon() {
+    return this.urgency === "info" ? e`<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>` : this.urgency === "warning" ? e`<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>` : this.urgency === "urgent" ? e`<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>` : e`<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>`;
+  }
+  _handleAction() {
+    this.dispatchEvent(new CustomEvent("ai-alert-action", {
+      bubbles: !0,
+      composed: !0,
+      detail: { title: this.title, urgency: this.urgency }
+    }));
+  }
+  _handleDismiss() {
+    this._dismissing = !0, this.dispatchEvent(new CustomEvent("ai-alert-dismiss", {
+      bubbles: !0,
+      composed: !0,
+      detail: { title: this.title }
+    })), setTimeout(() => {
+      this._dismissing = !1, this.remove();
+    }, 250);
+  }
+  _handleKeyDown(s) {
+    s.key === "Escape" && this.dismissible && (s.preventDefault(), this._handleDismiss());
+  }
+  render() {
+    return e`
+      <div
+        class="card ${this.urgency} ${this._dismissing ? "dismissing" : ""}"
+        role="alert"
+        aria-label="${this.urgency} alert: ${this.title}"
+        tabindex="0"
+        @keydown=${this._handleKeyDown}
+      >
+        <span class="icon ${this.urgency}" aria-hidden="true">${this._urgencyIcon()}</span>
+
+        <div class="body">
+          <div class="header">
+            <span class="title">${this.title}</span>
+            ${this.deadline ? e`
+              <span class="deadline" aria-label="Deadline: ${this.deadline}">
+                <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>
+                ${this.deadline}
+              </span>
+            ` : c}
+          </div>
+
+          ${this.message ? e`<div class="message">${this.message}</div>` : c}
+
+          ${this.actionLabel ? e`
+            <cg-button
+              variant=${this.urgency === "critical" ? "primary" : "secondary"}
+              size="sm"
+              type=${this.urgency === "urgent" || this.urgency === "critical" ? "danger" : "normal"}
+              @click=${this._handleAction}
+              label="${this.actionLabel}"
+            >${this.actionLabel}</cg-button>
+          ` : c}
+        </div>
+
+        ${this.dismissible ? e`
+          <cg-button
+            class="dismiss"
+            variant="tertiary"
+            size="sm"
+            rounded="full"
+            label="Dismiss alert"
+            @click=${this._handleDismiss}
+          ><cg-icon name="close" size="xs"></cg-icon></cg-button>
+        ` : c}
+      </div>
+    `;
+  }
+};
+r.styles = [f, m, b, y, u`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    .card {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-200);
+      padding: var(--cg-spacing-16) var(--cg-spacing-16) var(--cg-spacing-16) var(--cg-spacing-20);
+      display: flex;
+      align-items: flex-start;
+      gap: var(--cg-spacing-12);
+      position: relative;
+      border-left: var(--cg-border-width-200) 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);
+    }
+    .card:hover {
+      transform: translateY(-1px);
+      box-shadow: var(--cg-elevation-2);
+    }
+
+    /* ── Urgency left border ── */
+    .card.info    { border-left-color: var(--cg-color-status-info-text-default); }
+    .card.warning { border-left-color: var(--cg-color-status-warning-text-default); }
+    .card.urgent  { border-left-color: var(--cg-color-status-error-border-default); }
+    .card:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 2px var(--cg-color-surface-base-background),
+        0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .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;
+    }
+
+    /* ── Dismiss exit ── */
+    @keyframes alertExit {
+      from { opacity: 1; transform: translateY(0); }
+      to { opacity: 0; transform: translateY(-8px) scale(0.97); }
+    }
+    .card.dismissing {
+      animation: alertExit var(--cg-transition-duration-default) var(--cg-transition-easing-ease-in) forwards;
+      pointer-events: none;
+    }
+
+    /* ── Icon ── */
+    .icon {
+      font-size: var(--cg-font-size-xl);
+      flex-shrink: 0;
+      margin-top: var(--cg-spacing-2);
+    }
+    .icon.info    { color: var(--cg-color-status-info-text-default); }
+    .icon.warning { color: var(--cg-color-status-warning-text-default); }
+    .icon.urgent  { color: var(--cg-color-status-error-border-default); }
+    .icon.critical { color: var(--cg-color-status-error-text-default); }
+
+    /* ── Body ── */
+    .body { flex: 1; min-width: 0; }
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      margin-bottom: var(--cg-spacing-6);
+    }
+    .title {
+      font-size: var(--cg-font-size-base);
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text);
+    }
+    .deadline {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      background: var(--cg-overlay-dark-subtle);
+      color: var(--cg-color-surface-base-text);
+      white-space: nowrap;
+    }
+
+    .message {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-input-text-placeholder);
+      line-height: var(--cg-line-height-normal);
+      padding-bottom: var(--cg-spacing-12);
+      margin-bottom: var(--cg-spacing-12);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+
+    /* ── Dismiss (positioned cg-button) ── */
+    .dismiss {
+      position: absolute;
+      top: var(--cg-spacing-8);
+      right: var(--cg-spacing-8);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .card:hover { transform: none; }
+      .card.critical { animation: none; }
+      .card.dismissing { animation: none; opacity: 0; }
+    }
+
+    @keyframes pulse-glow {
+      0%, 100% { border-left-color: var(--cg-color-status-error-text-default); }
+      50% { border-left-color: var(--cg-color-status-error-border-default); }
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) .card { border-radius: 0; }
+    :host([rounded="sm"]) .card { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .card { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .card { border-radius: var(--cg-border-radius-200); }
+    :host([rounded="full"]) .card { border-radius: var(--cg-border-radius-full); }
+  `];
+t([
+  a({ reflect: !0 })
+], r.prototype, "rounded", 2);
+t([
+  a({ type: String })
+], r.prototype, "title", 2);
+t([
+  a({ type: String })
+], r.prototype, "message", 2);
+t([
+  a({ type: String })
+], r.prototype, "urgency", 2);
+t([
+  a({ type: String })
+], r.prototype, "deadline", 2);
+t([
+  a({ type: String })
+], r.prototype, "actionLabel", 2);
+t([
+  a({ type: Boolean })
+], r.prototype, "dismissible", 2);
+t([
+  v()
+], r.prototype, "_dismissing", 2);
+r = t([
+  p("ai-alert-card")
+], r);
+export {
+  r as AiAlertCard
+};
+//# sourceMappingURL=ai-alert-card.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+export interface AnalyticsSeries {
+    name: string;
+    color: string;
+    data: {
+        x: string;
+        y: number;
+    }[];
+}
+export declare class AiAnalyticsChart extends LitElement {
+    static styles: import('lit').CSSResult[];
+    series: AnalyticsSeries[];
+    title: string;
+    yLabel: string;
+    height: number;
+    private _hover;
+    private _width;
+    private _ro?;
+    connectedCallback(): void;
+    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>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-analytics-chart': AiAnalyticsChart;
+    }
+}
+//# sourceMappingURL=ai-analytics-chart.d.ts.map

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

@@ -0,0 +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"}