@cognivo/components 0.8.0

package/dist/components/ai-source-graph/ai-source-graph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-source-graph.js","sources":["../../../src/components/ai-source-graph/ai-source-graph.ts"],"sourcesContent":["/**\n * @element ai-source-graph\n * Source attribution panel showing which knowledge sources contributed to an\n * AI response — Perplexity/ChatGPT-style numbered list with type badges,\n * weight bars, expandable excerpts, and inline footnote references.\n *\n * @example\n * ```html\n * <ai-source-graph\n *   .sources=${[\n *     { id: 's1', title: 'API Docs', type: 'doc', weight: 0.8, url: '#', excerpt: 'Rate limits...' },\n *     { id: 's2', title: 'Stack Overflow', type: 'web', weight: 0.4 }\n *   ]}\n * ></ai-source-graph>\n * ```\n *\n * @fires {CustomEvent<{id, title, type, weight}>} ai-source-click - Source clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\ninterface SourceNode {\n  id: string;\n  title: string;\n  type: 'doc' | 'web' | 'database' | 'api';\n  weight: number;\n  url?: string;\n  excerpt?: string;\n}\n\nconst TYPE_BADGE = 'accent';\n\n@customElement('ai-source-graph')\nexport class AiSourceGraph extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;\n    }\n\n    .panel {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      overflow: hidden;\n    }\n\n    /* ── Header ── */\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .header-title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n      flex: 1;\n    }\n    .source-count {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* ── Source list ── */\n    .sources {\n      display: flex;\n      flex-direction: column;\n    }\n\n    .source {\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-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      cursor: pointer;\n      transition:\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .source:last-child { border-bottom: none; }\n    .source:hover { background: var(--cg-overlay-dark-subtle); }\n    .source:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 2px var(--cg-color-focus-ring);\n    }\n\n    /* Footnote number */\n    .footnote {\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n      font-family: var(--cg-font-family-mono);\n    }\n\n    /* Source content */\n    .source-body { flex: 1; min-width: 0; }\n    .source-top {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n    .source-title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-tight);\n    }\n    .source-title a {\n      color: inherit;\n      text-decoration: none;\n    }\n    .source-title a:hover { text-decoration: underline; }\n\n    /* Weight bar */\n    .weight-area {\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      margin-left: auto;\n    }\n    .weight-bar {\n      width: var(--cg-spacing-48);\n      height: var(--cg-spacing-4);\n      background: var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-full);\n      overflow: hidden;\n    }\n    .weight-fill {\n      height: 100%;\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-primary-background-default);\n      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .weight-label {\n      font-size: var(--cg-font-size-xs);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-input-text-placeholder);\n      min-width: var(--cg-spacing-32);\n      text-align: right;\n    }\n\n    /* Excerpt */\n    .excerpt {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      line-height: var(--cg-line-height-normal);\n      margin-top: var(--cg-spacing-4);\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n    .source.expanded .excerpt {\n      -webkit-line-clamp: unset;\n      display: block;\n    }\n\n    .empty {\n      text-align: center;\n      padding: var(--cg-spacing-32);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .panel { border-radius: 0; }\n    :host([rounded=\"sm\"]) .panel { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .panel { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .panel { border-radius: var(--cg-border-radius-150); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Array }) sources: SourceNode[] = [];\n\n  @state() private _expandedId: string = '';\n\n  private _handleSourceClick(source: SourceNode) {\n    this._expandedId = this._expandedId === source.id ? '' : source.id;\n    this.dispatchEvent(new CustomEvent('ai-source-click', {\n      bubbles: true, composed: true,\n      detail: { id: source.id, title: source.title, type: source.type, weight: source.weight },\n    }));\n  }\n\n  override render() {\n    if (this.sources.length === 0) {\n      return html`<div class=\"panel\"><div class=\"empty\">No sources</div></div>`;\n    }\n\n    const sorted = [...this.sources].sort((a, b) => b.weight - a.weight);\n\n    return html`\n      <div class=\"panel\" role=\"list\" aria-label=\"Source attribution\">\n        <div class=\"header\">\n          <span class=\"header-title\">Sources</span>\n          <span class=\"source-count\">${this.sources.length}</span>\n        </div>\n        <div class=\"sources\">\n          ${sorted.map((s, i) => {\n            const isExpanded = s.id === this._expandedId;\n            return html`\n              <div class=\"source ${isExpanded ? 'expanded' : ''}\"\n                role=\"listitem\" tabindex=\"0\"\n                @click=${() => this._handleSourceClick(s)}\n                @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleSourceClick(s); } }}>\n                <span class=\"footnote\">${i + 1}</span>\n                <div class=\"source-body\">\n                  <div class=\"source-top\">\n                    <span class=\"source-title\">\n                      ${s.url ? html`<a href=${s.url} target=\"_blank\" rel=\"noopener\" @click=${(e: Event) => e.stopPropagation()}>${s.title}</a>` : s.title}\n                    </span>\n                    <cg-badge variant=${TYPE_BADGE} label=${s.type} size=\"sm\" rounded=\"full\"></cg-badge>\n                  </div>\n                  ${s.excerpt ? html`<div class=\"excerpt\">${s.excerpt}</div>` : nothing}\n                </div>\n                <div class=\"weight-area\">\n                  <div class=\"weight-bar\"><div class=\"weight-fill\" style=\"width: ${Math.round(s.weight * 100)}%\"></div></div>\n                  <span class=\"weight-label\">${Math.round(s.weight * 100)}%</span>\n                </div>\n              </div>\n            `;\n          })}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["TYPE_BADGE","AiSourceGraph","LitElement","source","html","sorted","a","b","s","i","isExpanded","e","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-status-page/ai-status-page.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+export interface StatusHistoryDay {
+    date: string;
+    status: 'operational' | 'degraded' | 'down' | 'maintenance';
+    incidents?: number;
+}
+export interface StatusService {
+    name: string;
+    status: 'operational' | 'degraded' | 'down' | 'maintenance';
+    latency?: number;
+    uptime?: number;
+    history?: StatusHistoryDay[];
+}
+export declare class AiStatusPage extends LitElement {
+    static styles: import('lit').CSSResult[];
+    services: StatusService[];
+    lastUpdated?: string | number | Date;
+    private _hasIncident;
+    private _onIncidentSlotChange;
+    private _overallStatus;
+    private _overallText;
+    private _statusLabel;
+    private _relativeTime;
+    private _handleClick;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-status-page': AiStatusPage;
+    }
+}
+//# sourceMappingURL=ai-status-page.d.ts.map

package/dist/components/ai-status-page/ai-status-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-status-page.d.ts","sourceRoot":"","sources":["../../../src/components/ai-status-page/ai-status-page.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,yBAAyB,CAAC;AAEjC,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,CAAC;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,aAAa,GAAG,UAAU,GAAG,MAAM,GAAG,aAAa,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC9B;AAED,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BA0LnB;IAEwB,QAAQ,EAAE,aAAa,EAAE,CAAM;IACjB,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAErE,OAAO,CAAC,YAAY,CAAS;IAEtC,OAAO,CAAC,qBAAqB;IAQ7B,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,YAAY;IAOX,MAAM;CA0DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/components/ai-status-page/ai-status-page.js

@@ -0,0 +1,304 @@
+import { css as u, LitElement as p, nothing as n, html as s } from "lit";
+import { property as g, state as v, customElement as h } from "lit/decorators.js";
+import { h as m, r as f, f as y } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-card/cg-card.js";
+import "../cg-text/cg-text.js";
+import "../cg-stack/cg-stack.js";
+var b = Object.defineProperty, x = Object.getOwnPropertyDescriptor, c = (t, i, r, a) => {
+  for (var e = a > 1 ? void 0 : a ? x(i, r) : i, o = t.length - 1, d; o >= 0; o--)
+    (d = t[o]) && (e = (a ? d(i, r, e) : d(e)) || e);
+  return a && e && b(i, r, e), e;
+};
+let l = class extends p {
+  constructor() {
+    super(...arguments), this.services = [], this._hasIncident = !1;
+  }
+  _onIncidentSlotChange(t) {
+    const i = t.target;
+    this._hasIncident = i.assignedNodes({ flatten: !0 }).some((r) => r.nodeType === Node.TEXT_NODE ? (r.textContent ?? "").trim().length > 0 : r.nodeType === Node.ELEMENT_NODE);
+  }
+  _overallStatus() {
+    return this.services.some((t) => t.status === "down") ? "down" : this.services.some((t) => t.status === "degraded") ? "degraded" : this.services.some((t) => t.status === "maintenance") ? "maintenance" : "operational";
+  }
+  _overallText(t) {
+    return {
+      operational: "All systems operational",
+      degraded: "Partial system degradation",
+      down: "Major outage in progress",
+      maintenance: "Scheduled maintenance"
+    }[t];
+  }
+  _statusLabel(t) {
+    return { operational: "Operational", degraded: "Degraded", down: "Down", maintenance: "Maintenance" }[t] ?? t;
+  }
+  _relativeTime(t) {
+    if (!t) return "";
+    const i = t instanceof Date ? t : new Date(t), r = Math.max(0, Date.now() - i.getTime()), a = Math.floor(r / 1e3);
+    if (a < 60) return `Updated ${a}s ago`;
+    const e = Math.floor(a / 60);
+    if (e < 60) return `Updated ${e}m ago`;
+    const o = Math.floor(e / 60);
+    return o < 24 ? `Updated ${o}h ago` : `Updated ${Math.floor(o / 24)}d ago`;
+  }
+  _handleClick(t) {
+    this.dispatchEvent(new CustomEvent("ai-status-service-click", {
+      detail: { service: t },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    const t = this._overallStatus(), i = this._overallText(t), r = this._relativeTime(this.lastUpdated);
+    return s`
+      <cg-card variant="elevated" padding="lg" rounded="lg" role="region" aria-label="System status">
+        <div class="sr-only" aria-live="polite" aria-atomic="true">${i}</div>
+
+        <div slot="header" class="header-row">
+          <cg-text as="h3" size="md" weight="bold">System Status</cg-text>
+          ${r ? s`<cg-text size="xs" color="muted">${r}</cg-text>` : n}
+        </div>
+
+        <div class="incident-banner ${this._hasIncident ? "has-content" : ""}">
+          <slot name="active-incident" @slotchange=${this._onIncidentSlotChange}></slot>
+        </div>
+
+        <div class="overall">
+          <span class="overall-dot dot-${t}" aria-hidden="true"></span>
+          <cg-text class="overall-text" size="md" weight="bold">${i}</cg-text>
+          ${t !== "operational" ? s`<span class="pill pill-${t}">${this._statusLabel(t)}</span>` : n}
+        </div>
+
+        <div class="service-list" role="list" aria-label="Service status list">
+          ${this.services.map((a) => s`
+            <button
+              class="service-item"
+              role="listitem"
+              aria-label="${a.name}: ${this._statusLabel(a.status)}"
+              @click=${() => this._handleClick(a)}
+            >
+              <div class="service-row">
+                <span class="service-dot dot-${a.status}" aria-hidden="true"></span>
+                <cg-text class="service-name" size="sm" weight="medium">${a.name}</cg-text>
+                <div class="service-meta">
+                  ${a.latency != null ? s`<span class="latency">${a.latency}ms</span>` : n}
+                  ${a.uptime != null ? s`<span class="uptime">${a.uptime}%</span>` : n}
+                  ${a.status !== "operational" ? s`<span class="pill pill-${a.status}">${this._statusLabel(a.status)}</span>` : n}
+                </div>
+              </div>
+              ${a.history && a.history.length > 0 ? s`
+                <div class="history" aria-label="${a.history.length}-day uptime history">
+                  ${a.history.map((e) => s`
+                    <span class="history-day day-${e.status}" title="${e.date}: ${this._statusLabel(e.status)}${e.incidents ? ` (${e.incidents} incidents)` : ""}"></span>
+                  `)}
+                </div>
+              ` : n}
+            </button>
+          `)}
+        </div>
+      </cg-card>
+    `;
+  }
+};
+l.styles = [m, f, y, u`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      display: block;
+    }
+    :host([hidden]) { display: none; }
+
+    cg-card { display: block; }
+
+    /* ── Header (title + last-updated) ── */
+    .header-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--cg-spacing-12);
+      width: 100%;
+    }
+
+    /* ── Active-incident banner: only rendered when slotted ── */
+    .incident-banner {
+      display: none;
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      border-radius: var(--cg-border-radius-100);
+      background: var(--cg-color-status-error-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);
+      color: var(--cg-color-status-error-text-default);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      margin-bottom: var(--cg-spacing-16);
+    }
+    .incident-banner.has-content { display: block; }
+
+    /* ── Overall row: minimal — dot + text + outlined pill, no colored fill ── */
+    .overall {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-12) 0;
+      margin-bottom: var(--cg-spacing-8);
+    }
+
+    .overall-dot {
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      flex-shrink: 0;
+    }
+
+    .overall-text { flex: 1; }
+
+    /* ── Status dots (small, no animation, color-only) ── */
+    .dot-operational  { background: var(--cg-color-status-success-text-default); }
+    .dot-degraded     { background: var(--cg-color-status-warning-text-default); }
+    .dot-down         { background: var(--cg-color-status-error-text-default); }
+    .dot-maintenance  { background: var(--cg-color-status-info-text-default); }
+
+    /* ── Status pills: outlined, text-color only — quiet ── */
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      font-size: 10px;
+      font-weight: var(--cg-font-weight-bold);
+      letter-spacing: var(--cg-letter-spacing-wide);
+      text-transform: uppercase;
+      background: transparent;
+      border: var(--cg-border-width-50) solid currentColor;
+      flex-shrink: 0;
+    }
+    .pill-operational  { color: var(--cg-color-status-success-text-default); }
+    .pill-degraded     { color: var(--cg-color-status-warning-text-default); }
+    .pill-down         { color: var(--cg-color-status-error-text-default); }
+    .pill-maintenance  { color: var(--cg-color-status-info-text-default); }
+
+    /* ── Service rows: subtle hairline dividers, no heavy gaps ── */
+    .service-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    .service-item + .service-item {
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+
+    .service-item {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+      min-height: var(--cg-spacing-48);
+      padding: var(--cg-spacing-12) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-100);
+      cursor: pointer;
+      border: none;
+      background: transparent;
+      width: 100%;
+      text-align: left;
+      font-family: inherit;
+      color: inherit;
+      transition:
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .service-item:hover {
+      background: var(--cg-color-action-secondary-background-hover);
+    }
+    .service-item:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .service-item:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    .service-row {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      width: 100%;
+    }
+
+    .service-dot {
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      flex-shrink: 0;
+    }
+
+    .service-name {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .service-meta {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      flex-shrink: 0;
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-xs);
+      font-variant-numeric: tabular-nums;
+    }
+
+    .service-meta .latency,
+    .service-meta .uptime { white-space: nowrap; }
+
+    /* ── 90-day uptime history bars: muted by default, vivid only on incident days ── */
+    .history {
+      display: flex;
+      gap: 1px;
+      align-items: stretch;
+      height: var(--cg-spacing-12);
+      padding-left: var(--cg-spacing-20);
+    }
+    .history-day {
+      flex: 1;
+      min-width: 2px;
+      max-width: var(--cg-spacing-4);
+      border-radius: var(--cg-border-radius-50);
+      background: var(--cg-color-surface-cards-border);
+      opacity: 0.7;
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .history-day:hover { opacity: 1; transform: scaleY(1.2); }
+    /* Operational days: muted, recede into background */
+    .history-day.day-operational  {
+      background: var(--cg-color-status-success-text-default);
+      opacity: 0.35;
+    }
+    .history-day.day-operational:hover { opacity: 0.6; }
+    /* Incident days: full opacity, eye locks on */
+    .history-day.day-degraded     { background: var(--cg-color-status-warning-text-default); opacity: 1; }
+    .history-day.day-down         { background: var(--cg-color-status-error-text-default); opacity: 1; }
+    .history-day.day-maintenance  { background: var(--cg-color-status-info-text-default); opacity: 0.7; }
+
+    /* sr-only live region */
+    .sr-only {
+      position: absolute;
+      width: 1px; height: 1px;
+      padding: 0; margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+  `];
+c([
+  g({ type: Array })
+], l.prototype, "services", 2);
+c([
+  g({ attribute: "last-updated" })
+], l.prototype, "lastUpdated", 2);
+c([
+  v()
+], l.prototype, "_hasIncident", 2);
+l = c([
+  h("ai-status-page")
+], l);
+export {
+  l as AiStatusPage
+};
+//# sourceMappingURL=ai-status-page.js.map

package/dist/components/ai-status-page/ai-status-page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-status-page.js","sources":["../../../src/components/ai-status-page/ai-status-page.ts"],"sourcesContent":["/**\n * @element ai-status-page\n * Service health dashboard built from design-system primitives (cg-card, cg-text, cg-stack).\n * Vercel/Linear-style minimal aesthetic: muted history bars, text-only status pills,\n * no colored blocks fighting for attention. The dot + history strip carry the color.\n *\n * @example\n * ```html\n * <ai-status-page .services=${[\n *   { name: 'Chat API', status: 'operational', latency: 120, uptime: 99.98,\n *     history: [{ date: '2026-04-01', status: 'operational' }, ...] }\n * ]} last-updated=${Date.now()}></ai-status-page>\n * ```\n *\n * @prop {StatusService[]} services - Service entries with name, status, latency, uptime, history\n * @prop {Date|number|string} lastUpdated - Timestamp; rendered as relative time\n *\n * @slot active-incident - Banner shown above the overall row when an incident is active\n *\n * @fires {CustomEvent<{service: StatusService}>} ai-status-service-click - Service row clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-card/cg-card.js';\nimport '../cg-text/cg-text.js';\nimport '../cg-stack/cg-stack.js';\n\nexport interface StatusHistoryDay {\n  date: string;\n  status: 'operational' | 'degraded' | 'down' | 'maintenance';\n  incidents?: number;\n}\n\nexport interface StatusService {\n  name: string;\n  status: 'operational' | 'degraded' | 'down' | 'maintenance';\n  latency?: number;\n  uptime?: number;\n  history?: StatusHistoryDay[];\n}\n\n@customElement('ai-status-page')\nexport class AiStatusPage extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      display: block;\n    }\n    :host([hidden]) { display: none; }\n\n    cg-card { display: block; }\n\n    /* ── Header (title + last-updated) ── */\n    .header-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-12);\n      width: 100%;\n    }\n\n    /* ── Active-incident banner: only rendered when slotted ── */\n    .incident-banner {\n      display: none;\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-status-error-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);\n      color: var(--cg-color-status-error-text-default);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .incident-banner.has-content { display: block; }\n\n    /* ── Overall row: minimal — dot + text + outlined pill, no colored fill ── */\n    .overall {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) 0;\n      margin-bottom: var(--cg-spacing-8);\n    }\n\n    .overall-dot {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      flex-shrink: 0;\n    }\n\n    .overall-text { flex: 1; }\n\n    /* ── Status dots (small, no animation, color-only) ── */\n    .dot-operational  { background: var(--cg-color-status-success-text-default); }\n    .dot-degraded     { background: var(--cg-color-status-warning-text-default); }\n    .dot-down         { background: var(--cg-color-status-error-text-default); }\n    .dot-maintenance  { background: var(--cg-color-status-info-text-default); }\n\n    /* ── Status pills: outlined, text-color only — quiet ── */\n    .pill {\n      display: inline-flex;\n      align-items: center;\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      font-size: 10px;\n      font-weight: var(--cg-font-weight-bold);\n      letter-spacing: var(--cg-letter-spacing-wide);\n      text-transform: uppercase;\n      background: transparent;\n      border: var(--cg-border-width-50) solid currentColor;\n      flex-shrink: 0;\n    }\n    .pill-operational  { color: var(--cg-color-status-success-text-default); }\n    .pill-degraded     { color: var(--cg-color-status-warning-text-default); }\n    .pill-down         { color: var(--cg-color-status-error-text-default); }\n    .pill-maintenance  { color: var(--cg-color-status-info-text-default); }\n\n    /* ── Service rows: subtle hairline dividers, no heavy gaps ── */\n    .service-list {\n      display: flex;\n      flex-direction: column;\n      gap: 0;\n    }\n\n    .service-item + .service-item {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n\n    .service-item {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n      min-height: var(--cg-spacing-48);\n      padding: var(--cg-spacing-12) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      border: none;\n      background: transparent;\n      width: 100%;\n      text-align: left;\n      font-family: inherit;\n      color: inherit;\n      transition:\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .service-item:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n    }\n    .service-item:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .service-item:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    .service-row {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      width: 100%;\n    }\n\n    .service-dot {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      flex-shrink: 0;\n    }\n\n    .service-name {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .service-meta {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      flex-shrink: 0;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-xs);\n      font-variant-numeric: tabular-nums;\n    }\n\n    .service-meta .latency,\n    .service-meta .uptime { white-space: nowrap; }\n\n    /* ── 90-day uptime history bars: muted by default, vivid only on incident days ── */\n    .history {\n      display: flex;\n      gap: 1px;\n      align-items: stretch;\n      height: var(--cg-spacing-12);\n      padding-left: var(--cg-spacing-20);\n    }\n    .history-day {\n      flex: 1;\n      min-width: 2px;\n      max-width: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-surface-cards-border);\n      opacity: 0.7;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .history-day:hover { opacity: 1; transform: scaleY(1.2); }\n    /* Operational days: muted, recede into background */\n    .history-day.day-operational  {\n      background: var(--cg-color-status-success-text-default);\n      opacity: 0.35;\n    }\n    .history-day.day-operational:hover { opacity: 0.6; }\n    /* Incident days: full opacity, eye locks on */\n    .history-day.day-degraded     { background: var(--cg-color-status-warning-text-default); opacity: 1; }\n    .history-day.day-down         { background: var(--cg-color-status-error-text-default); opacity: 1; }\n    .history-day.day-maintenance  { background: var(--cg-color-status-info-text-default); opacity: 0.7; }\n\n    /* sr-only live region */\n    .sr-only {\n      position: absolute;\n      width: 1px; height: 1px;\n      padding: 0; margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n  `];\n\n  @property({ type: Array }) services: StatusService[] = [];\n  @property({ attribute: 'last-updated' }) lastUpdated?: string | number | Date;\n\n  @state() private _hasIncident = false;\n\n  private _onIncidentSlotChange(e: Event) {\n    const slot = e.target as HTMLSlotElement;\n    this._hasIncident = slot.assignedNodes({ flatten: true }).some(n => {\n      if (n.nodeType === Node.TEXT_NODE) return (n.textContent ?? '').trim().length > 0;\n      return n.nodeType === Node.ELEMENT_NODE;\n    });\n  }\n\n  private _overallStatus(): StatusService['status'] {\n    if (this.services.some(s => s.status === 'down')) return 'down';\n    if (this.services.some(s => s.status === 'degraded')) return 'degraded';\n    if (this.services.some(s => s.status === 'maintenance')) return 'maintenance';\n    return 'operational';\n  }\n\n  private _overallText(status: StatusService['status']): string {\n    return ({\n      operational: 'All systems operational',\n      degraded: 'Partial system degradation',\n      down: 'Major outage in progress',\n      maintenance: 'Scheduled maintenance',\n    } as Record<string, string>)[status]!;\n  }\n\n  private _statusLabel(s: string): string {\n    return ({ operational: 'Operational', degraded: 'Degraded', down: 'Down', maintenance: 'Maintenance' } as Record<string, string>)[s] ?? s;\n  }\n\n  private _relativeTime(ts: string | number | Date | undefined): string {\n    if (!ts) return '';\n    const d = ts instanceof Date ? ts : new Date(ts);\n    const diff = Math.max(0, Date.now() - d.getTime());\n    const sec = Math.floor(diff / 1000);\n    if (sec < 60) return `Updated ${sec}s ago`;\n    const min = Math.floor(sec / 60);\n    if (min < 60) return `Updated ${min}m ago`;\n    const hr = Math.floor(min / 60);\n    if (hr < 24) return `Updated ${hr}h ago`;\n    return `Updated ${Math.floor(hr / 24)}d ago`;\n  }\n\n  private _handleClick(service: StatusService) {\n    this.dispatchEvent(new CustomEvent('ai-status-service-click', {\n      detail: { service },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  override render() {\n    const overall = this._overallStatus();\n    const overallText = this._overallText(overall);\n    const updated = this._relativeTime(this.lastUpdated);\n\n    return html`\n      <cg-card variant=\"elevated\" padding=\"lg\" rounded=\"lg\" role=\"region\" aria-label=\"System status\">\n        <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">${overallText}</div>\n\n        <div slot=\"header\" class=\"header-row\">\n          <cg-text as=\"h3\" size=\"md\" weight=\"bold\">System Status</cg-text>\n          ${updated ? html`<cg-text size=\"xs\" color=\"muted\">${updated}</cg-text>` : nothing}\n        </div>\n\n        <div class=\"incident-banner ${this._hasIncident ? 'has-content' : ''}\">\n          <slot name=\"active-incident\" @slotchange=${this._onIncidentSlotChange}></slot>\n        </div>\n\n        <div class=\"overall\">\n          <span class=\"overall-dot dot-${overall}\" aria-hidden=\"true\"></span>\n          <cg-text class=\"overall-text\" size=\"md\" weight=\"bold\">${overallText}</cg-text>\n          ${overall !== 'operational'\n            ? html`<span class=\"pill pill-${overall}\">${this._statusLabel(overall)}</span>`\n            : nothing}\n        </div>\n\n        <div class=\"service-list\" role=\"list\" aria-label=\"Service status list\">\n          ${this.services.map(svc => html`\n            <button\n              class=\"service-item\"\n              role=\"listitem\"\n              aria-label=\"${svc.name}: ${this._statusLabel(svc.status)}\"\n              @click=${() => this._handleClick(svc)}\n            >\n              <div class=\"service-row\">\n                <span class=\"service-dot dot-${svc.status}\" aria-hidden=\"true\"></span>\n                <cg-text class=\"service-name\" size=\"sm\" weight=\"medium\">${svc.name}</cg-text>\n                <div class=\"service-meta\">\n                  ${svc.latency != null ? html`<span class=\"latency\">${svc.latency}ms</span>` : nothing}\n                  ${svc.uptime != null ? html`<span class=\"uptime\">${svc.uptime}%</span>` : nothing}\n                  ${svc.status !== 'operational'\n                    ? html`<span class=\"pill pill-${svc.status}\">${this._statusLabel(svc.status)}</span>`\n                    : nothing}\n                </div>\n              </div>\n              ${svc.history && svc.history.length > 0 ? html`\n                <div class=\"history\" aria-label=\"${svc.history.length}-day uptime history\">\n                  ${svc.history.map(d => html`\n                    <span class=\"history-day day-${d.status}\" title=\"${d.date}: ${this._statusLabel(d.status)}${d.incidents ? ` (${d.incidents} incidents)` : ''}\"></span>\n                  `)}\n                </div>\n              ` : nothing}\n            </button>\n          `)}\n        </div>\n      </cg-card>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-status-page': AiStatusPage;\n  }\n}\n"],"names":["AiStatusPage","LitElement","e","slot","n","s","status","ts","d","diff","sec","min","hr","service","overall","overallText","updated","html","nothing","svc","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;;;;AA2CO,IAAMA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GA6LsB,KAAA,WAA4B,CAAA,GAG9C,KAAQ,eAAe;AAAA,EAAA;AAAA,EAExB,sBAAsBC,GAAU;AACtC,UAAMC,IAAOD,EAAE;AACf,SAAK,eAAeC,EAAK,cAAc,EAAE,SAAS,IAAM,EAAE,KAAK,CAAAC,MACzDA,EAAE,aAAa,KAAK,aAAmBA,EAAE,eAAe,IAAI,KAAA,EAAO,SAAS,IACzEA,EAAE,aAAa,KAAK,YAC5B;AAAA,EACH;AAAA,EAEQ,iBAA0C;AAChD,WAAI,KAAK,SAAS,KAAK,CAAAC,MAAKA,EAAE,WAAW,MAAM,IAAU,SACrD,KAAK,SAAS,KAAK,CAAAA,MAAKA,EAAE,WAAW,UAAU,IAAU,aACzD,KAAK,SAAS,KAAK,CAAAA,MAAKA,EAAE,WAAW,aAAa,IAAU,gBACzD;AAAA,EACT;AAAA,EAEQ,aAAaC,GAAyC;AAC5D,WAAQ;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,IAAA,EACcA,CAAM;AAAA,EACrC;AAAA,EAEQ,aAAaD,GAAmB;AACtC,WAAQ,EAAE,aAAa,eAAe,UAAU,YAAY,MAAM,QAAQ,aAAa,gBAA2CA,CAAC,KAAKA;AAAA,EAC1I;AAAA,EAEQ,cAAcE,GAAgD;AACpE,QAAI,CAACA,EAAI,QAAO;AAChB,UAAMC,IAAID,aAAc,OAAOA,IAAK,IAAI,KAAKA,CAAE,GACzCE,IAAO,KAAK,IAAI,GAAG,KAAK,IAAA,IAAQD,EAAE,SAAS,GAC3CE,IAAM,KAAK,MAAMD,IAAO,GAAI;AAClC,QAAIC,IAAM,GAAI,QAAO,WAAWA,CAAG;AACnC,UAAMC,IAAM,KAAK,MAAMD,IAAM,EAAE;AAC/B,QAAIC,IAAM,GAAI,QAAO,WAAWA,CAAG;AACnC,UAAMC,IAAK,KAAK,MAAMD,IAAM,EAAE;AAC9B,WAAIC,IAAK,KAAW,WAAWA,CAAE,UAC1B,WAAW,KAAK,MAAMA,IAAK,EAAE,CAAC;AAAA,EACvC;AAAA,EAEQ,aAAaC,GAAwB;AAC3C,SAAK,cAAc,IAAI,YAAY,2BAA2B;AAAA,MAC5D,QAAQ,EAAE,SAAAA,EAAA;AAAA,MACV,SAAS;AAAA,MAAM,UAAU;AAAA,IAAA,CAC1B,CAAC;AAAA,EACJ;AAAA,EAES,SAAS;AAChB,UAAMC,IAAU,KAAK,eAAA,GACfC,IAAc,KAAK,aAAaD,CAAO,GACvCE,IAAU,KAAK,cAAc,KAAK,WAAW;AAEnD,WAAOC;AAAA;AAAA,qEAE0DF,CAAW;AAAA;AAAA;AAAA;AAAA,YAIpEC,IAAUC,qCAAwCD,CAAO,eAAeE,CAAO;AAAA;AAAA;AAAA,sCAGrD,KAAK,eAAe,gBAAgB,EAAE;AAAA,qDACvB,KAAK,qBAAqB;AAAA;AAAA;AAAA;AAAA,yCAItCJ,CAAO;AAAA,kEACkBC,CAAW;AAAA,YACjED,MAAY,gBACVG,2BAA8BH,CAAO,KAAK,KAAK,aAAaA,CAAO,CAAC,YACpEI,CAAO;AAAA;AAAA;AAAA;AAAA,YAIT,KAAK,SAAS,IAAI,CAAAC,MAAOF;AAAA;AAAA;AAAA;AAAA,4BAITE,EAAI,IAAI,KAAK,KAAK,aAAaA,EAAI,MAAM,CAAC;AAAA,uBAC/C,MAAM,KAAK,aAAaA,CAAG,CAAC;AAAA;AAAA;AAAA,+CAGJA,EAAI,MAAM;AAAA,0EACiBA,EAAI,IAAI;AAAA;AAAA,oBAE9DA,EAAI,WAAW,OAAOF,0BAA6BE,EAAI,OAAO,cAAcD,CAAO;AAAA,oBACnFC,EAAI,UAAU,OAAOF,yBAA4BE,EAAI,MAAM,aAAaD,CAAO;AAAA,oBAC/EC,EAAI,WAAW,gBACbF,2BAA8BE,EAAI,MAAM,KAAK,KAAK,aAAaA,EAAI,MAAM,CAAC,YAC1ED,CAAO;AAAA;AAAA;AAAA,gBAGbC,EAAI,WAAWA,EAAI,QAAQ,SAAS,IAAIF;AAAA,mDACLE,EAAI,QAAQ,MAAM;AAAA,oBACjDA,EAAI,QAAQ,IAAI,CAAAX,MAAKS;AAAA,mDACUT,EAAE,MAAM,YAAYA,EAAE,IAAI,KAAK,KAAK,aAAaA,EAAE,MAAM,CAAC,GAAGA,EAAE,YAAY,KAAKA,EAAE,SAAS,gBAAgB,EAAE;AAAA,mBAC7I,CAAC;AAAA;AAAA,kBAEFU,CAAO;AAAA;AAAA,WAEd,CAAC;AAAA;AAAA;AAAA;AAAA,EAIV;AACF;AA5SalB,EACK,SAAS,CAACoB,GAAWC,GAAeC,GAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0LzE;AAE0BC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GA7LdzB,EA6LgB,WAAA,YAAA,CAAA;AACcwB,EAAA;AAAA,EAAxCC,EAAS,EAAE,WAAW,eAAA,CAAgB;AAAA,GA9L5BzB,EA8L8B,WAAA,eAAA,CAAA;AAExBwB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAhMI1B,EAgMM,WAAA,gBAAA,CAAA;AAhMNA,IAANwB,EAAA;AAAA,EADNG,EAAc,gBAAgB;AAAA,GAClB3B,CAAA;"}

package/dist/components/ai-streaming-text/ai-streaming-text.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+export declare class AiStreamingText extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Content to display */
+    content: string;
+    /** Is currently streaming */
+    streaming: boolean;
+    /** Render as markdown */
+    markdown: boolean;
+    /** Append text (for streaming) */
+    appendText(text: string): void;
+    /** Mark streaming as complete */
+    complete(): void;
+    /** Reset content */
+    reset(): void;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-streaming-text': AiStreamingText;
+    }
+}
+//# sourceMappingURL=ai-streaming-text.d.ts.map

package/dist/components/ai-streaming-text/ai-streaming-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-streaming-text.d.ts","sourceRoot":"","sources":["../../../src/components/ai-streaming-text/ai-streaming-text.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,+BAA+B,CAAC;AAEvC,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BAqBnB;IAEH,yBAAyB;IACG,OAAO,EAAE,MAAM,CAAM;IAEjD,6BAA6B;IACA,SAAS,EAAE,OAAO,CAAS;IAExD,yBAAyB;IACI,QAAQ,EAAE,OAAO,CAAQ;IAEtD,kCAAkC;IAClC,UAAU,CAAC,IAAI,EAAE,MAAM;IASvB,iCAAiC;IACjC,QAAQ;IAQR,oBAAoB;IACpB,KAAK;IAKI,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/components/ai-streaming-text/ai-streaming-text.js

@@ -0,0 +1,80 @@
+import { css as m, LitElement as h, html as a } from "lit";
+import { property as p, customElement as d } from "lit/decorators.js";
+import { h as u, r as g, f } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-markdown/cg-markdown.js";
+var v = Object.defineProperty, w = Object.getOwnPropertyDescriptor, i = (t, s, o, r) => {
+  for (var e = r > 1 ? void 0 : r ? w(s, o) : s, c = t.length - 1, l; c >= 0; c--)
+    (l = t[c]) && (e = (r ? l(s, o, e) : l(e)) || e);
+  return r && e && v(s, o, e), e;
+};
+let n = class extends h {
+  constructor() {
+    super(...arguments), this.content = "", this.streaming = !1, this.markdown = !0;
+  }
+  /** Append text (for streaming) */
+  appendText(t) {
+    this.content += t, this.streaming = !0, this.dispatchEvent(new CustomEvent("ai-streaming-chunk", {
+      bubbles: !0,
+      composed: !0,
+      detail: { chunk: t, total: this.content }
+    }));
+  }
+  /** Mark streaming as complete */
+  complete() {
+    this.streaming = !1, this.dispatchEvent(new CustomEvent("ai-streaming-complete", {
+      bubbles: !0,
+      composed: !0,
+      detail: { content: this.content }
+    }));
+  }
+  /** Reset content */
+  reset() {
+    this.content = "", this.streaming = !1;
+  }
+  render() {
+    const t = !this.content && !this.streaming;
+    return a`
+      <div class="container" role="status" aria-live="polite" aria-busy=${this.streaming ? "true" : "false"}>
+        ${t ? a`<span class="empty">Waiting for content...</span>` : this.markdown ? a`<cg-markdown .text=${this.content}></cg-markdown>` : a`<span class="plain">${this.content}</span>`}
+      </div>
+    `;
+  }
+};
+n.styles = [u, g, f, m`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    .container {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-relaxed);
+      word-wrap: break-word;
+    }
+
+    .empty {
+      color: var(--cg-color-input-text-placeholder);
+      font-style: italic;
+    }
+
+    /* Plain-text fallback when markdown is disabled */
+    .plain {
+      white-space: pre-wrap;
+    }
+  `];
+i([
+  p({ type: String })
+], n.prototype, "content", 2);
+i([
+  p({ type: Boolean })
+], n.prototype, "streaming", 2);
+i([
+  p({ type: Boolean })
+], n.prototype, "markdown", 2);
+n = i([
+  d("ai-streaming-text")
+], n);
+export {
+  n as AiStreamingText
+};
+//# sourceMappingURL=ai-streaming-text.js.map

package/dist/components/ai-streaming-text/ai-streaming-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-streaming-text.js","sources":["../../../src/components/ai-streaming-text/ai-streaming-text.ts"],"sourcesContent":["/**\n * @element ai-streaming-text\n * Token-by-token text renderer that delegates markdown rendering to\n * <cg-markdown> for consistency with non-streaming messages. Use the\n * `appendText()` method to stream content incrementally and `complete()`\n * to finish. Call `reset()` to clear.\n *\n * @example\n * ```html\n * <ai-streaming-text content=\"Hello **world**\" streaming markdown></ai-streaming-text>\n * ```\n *\n * @prop {string} content - Current text content\n * @prop {boolean} streaming - Whether content is actively streaming\n * @prop {boolean} markdown - Render as markdown (default true)\n *\n * @method appendText(text: string) - Append a text chunk and set streaming=true\n * @method complete() - Mark streaming as finished\n * @method reset() - Clear all content\n *\n * @fires {CustomEvent<{chunk: string, total: string}>} ai-streaming-chunk - On each appended chunk\n * @fires {CustomEvent<{content: string}>} ai-streaming-complete - When streaming completes\n */\nimport { LitElement, html, css } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-markdown/cg-markdown.js';\n\n@customElement('ai-streaming-text')\nexport class AiStreamingText extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .container {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-relaxed);\n      word-wrap: break-word;\n    }\n\n    .empty {\n      color: var(--cg-color-input-text-placeholder);\n      font-style: italic;\n    }\n\n    /* Plain-text fallback when markdown is disabled */\n    .plain {\n      white-space: pre-wrap;\n    }\n  `];\n\n  /** Content to display */\n  @property({ type: String }) content: string = '';\n\n  /** Is currently streaming */\n  @property({ type: Boolean }) streaming: boolean = false;\n\n  /** Render as markdown */\n  @property({ type: Boolean }) markdown: boolean = true;\n\n  /** Append text (for streaming) */\n  appendText(text: string) {\n    this.content += text;\n    this.streaming = true;\n    this.dispatchEvent(new CustomEvent('ai-streaming-chunk', {\n      bubbles: true, composed: true,\n      detail: { chunk: text, total: this.content },\n    }));\n  }\n\n  /** Mark streaming as complete */\n  complete() {\n    this.streaming = false;\n    this.dispatchEvent(new CustomEvent('ai-streaming-complete', {\n      bubbles: true, composed: true,\n      detail: { content: this.content },\n    }));\n  }\n\n  /** Reset content */\n  reset() {\n    this.content = '';\n    this.streaming = false;\n  }\n\n  override render() {\n    const isEmpty = !this.content && !this.streaming;\n    // Always render the live region so screen readers catch the first streamed chunk.\n    return html`\n      <div class=\"container\" role=\"status\" aria-live=\"polite\" aria-busy=${this.streaming ? 'true' : 'false'}>\n        ${isEmpty\n          ? html`<span class=\"empty\">Waiting for content...</span>`\n          : this.markdown\n            ? html`<cg-markdown .text=${this.content}></cg-markdown>`\n            : html`<span class=\"plain\">${this.content}</span>`}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-streaming-text': AiStreamingText;\n  }\n}\n"],"names":["AiStreamingText","LitElement","text","isEmpty","html","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;;AA6BO,IAAMA,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAyBuB,KAAA,UAAkB,IAGjB,KAAA,YAAqB,IAGrB,KAAA,WAAoB;AAAA,EAAA;AAAA;AAAA,EAGjD,WAAWC,GAAc;AACvB,SAAK,WAAWA,GAChB,KAAK,YAAY,IACjB,KAAK,cAAc,IAAI,YAAY,sBAAsB;AAAA,MACvD,SAAS;AAAA,MAAM,UAAU;AAAA,MACzB,QAAQ,EAAE,OAAOA,GAAM,OAAO,KAAK,QAAA;AAAA,IAAQ,CAC5C,CAAC;AAAA,EACJ;AAAA;AAAA,EAGA,WAAW;AACT,SAAK,YAAY,IACjB,KAAK,cAAc,IAAI,YAAY,yBAAyB;AAAA,MAC1D,SAAS;AAAA,MAAM,UAAU;AAAA,MACzB,QAAQ,EAAE,SAAS,KAAK,QAAA;AAAA,IAAQ,CACjC,CAAC;AAAA,EACJ;AAAA;AAAA,EAGA,QAAQ;AACN,SAAK,UAAU,IACf,KAAK,YAAY;AAAA,EACnB;AAAA,EAES,SAAS;AAChB,UAAMC,IAAU,CAAC,KAAK,WAAW,CAAC,KAAK;AAEvC,WAAOC;AAAA,0EAC+D,KAAK,YAAY,SAAS,OAAO;AAAA,UACjGD,IACEC,uDACA,KAAK,WACHA,uBAA0B,KAAK,OAAO,oBACtCA,wBAA2B,KAAK,OAAO,SAAS;AAAA;AAAA;AAAA,EAG5D;AACF;AAvEaJ,EACK,SAAS,CAACK,GAAWC,GAAeC,GAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAqBzE;AAG2BC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzBfV,EAyBiB,WAAA,WAAA,CAAA;AAGCS,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA5BhBV,EA4BkB,WAAA,aAAA,CAAA;AAGAS,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA/BhBV,EA+BkB,WAAA,YAAA,CAAA;AA/BlBA,IAANS,EAAA;AAAA,EADNE,EAAc,mBAAmB;AAAA,GACrBX,CAAA;"}

package/dist/components/ai-test-runner/ai-test-runner.d.ts

@@ -0,0 +1,37 @@
+import { LitElement } from 'lit';
+export interface TestEntry {
+    name: string;
+    status: 'pass' | 'fail' | 'running' | 'pending';
+    duration?: number;
+    expected?: string;
+    actual?: string;
+    score?: number;
+}
+export declare class AiTestRunner extends LitElement {
+    static styles: import('lit').CSSResult[];
+    tests: TestEntry[];
+    title: string;
+    private _expanded;
+    private _filter;
+    private _countByStatus;
+    private get _passCount();
+    private get _failCount();
+    private get _runningCount();
+    private get _pendingCount();
+    /** Sum of test.duration (skipping undefined). */
+    private get _totalDuration();
+    /** Average of defined `score` values; null if no scores present. */
+    private get _avgScore();
+    private _formatDuration;
+    private get _visibleTests();
+    private _toggle;
+    private _runAll;
+    private _statusIcon;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-test-runner': AiTestRunner;
+    }
+}
+//# sourceMappingURL=ai-test-runner.d.ts.map

package/dist/components/ai-test-runner/ai-test-runner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-test-runner.d.ts","sourceRoot":"","sources":["../../../src/components/ai-test-runner/ai-test-runner.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,UAAU,EAA2B,MAAM,KAAK,CAAC;AAG1D,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,6BAA6B,CAAC;AAErC,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAID,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BA2OnB;IAEwB,KAAK,EAAE,SAAS,EAAE,CAAM;IACd,KAAK,SAAkB;IAEnD,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,OAAO,CAAmB;IAI3C,OAAO,CAAC,cAAc;IAGtB,OAAO,KAAK,UAAU,GAA0C;IAChE,OAAO,KAAK,UAAU,GAA0C;IAChE,OAAO,KAAK,aAAa,GAA6C;IACtE,OAAO,KAAK,aAAa,GAA6C;IAEtE,iDAAiD;IACjD,OAAO,KAAK,cAAc,GAEzB;IAED,oEAAoE;IACpE,OAAO,KAAK,SAAS,GAKpB;IAED,OAAO,CAAC,eAAe;IAQvB,OAAO,KAAK,aAAa,GAIxB;IAID,OAAO,CAAC,OAAO;IAUf,OAAO,CAAC,OAAO;IASf,OAAO,CAAC,WAAW;IAaV,MAAM;CA8HhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}