@cognivo/components 0.8.0

package/dist/components/ai-accessibility-report/ai-accessibility-report.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-accessibility-report.js","sources":["../../../src/components/ai-accessibility-report/ai-accessibility-report.ts"],"sourcesContent":["/**\n * @element ai-accessibility-report\n * WCAG compliance report with score circle, severity breakdown, and expandable\n * issue list with optional \"How to fix\" suggestions per issue. Modeled after\n * Lighthouse / axe DevTools / Accessibility Insights.\n *\n * @example\n * ```html\n * <ai-accessibility-report\n *   .issues=${[{rule:'color-contrast', level:'AA', severity:'error',\n *               description:'Low contrast ratio', fix:'Increase contrast to at least 4.5:1'}]}\n *   score=\"72\"\n *   title=\"Page Audit\"\n * ></ai-accessibility-report>\n * ```\n *\n * @fires {CustomEvent<{issue: A11yIssue, index: number}>} ai-a11y-issue-click - Issue row clicked/expanded\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-card/cg-card.js';\nimport '../cg-icon/cg-icon.js';\n\nexport interface A11yIssue {\n  rule: string;\n  level: 'A' | 'AA' | 'AAA';\n  severity: 'error' | 'warning' | 'info';\n  element?: string;\n  description: string;\n  /** Optional fix suggestion (axe DevTools / Lighthouse pattern) */\n  fix?: string;\n}\n\n@customElement('ai-accessibility-report')\nexport class AiAccessibilityReport extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      display: block;\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-16);\n      padding-bottom: var(--cg-spacing-12);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    .score-circle {\n      position: relative;\n      width: var(--cg-spacing-64);\n      height: var(--cg-spacing-64);\n      flex-shrink: 0;\n    }\n\n    .score-circle svg {\n      width: var(--cg-spacing-64);\n      height: var(--cg-spacing-64);\n      transform: rotate(-90deg);\n    }\n\n    .score-bg {\n      fill: none;\n      stroke: var(--cg-color-surface-cards-border);\n      stroke-width: 5;\n    }\n\n    .score-fg {\n      fill: none;\n      stroke-width: 5;\n      stroke-linecap: round;\n      transition: stroke-dashoffset var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    .score-text {\n      position: absolute;\n      inset: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: var(--cg-font-size-lg);\n      font-weight: var(--cg-font-weight-bold);\n    }\n\n    .header-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      margin: 0 0 var(--cg-spacing-4) 0;\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .pass-count {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      margin: 0 0 var(--cg-spacing-6) 0;\n    }\n\n    .breakdown {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-12);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    .breakdown-item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n    }\n\n    .sev-dot {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n    }\n\n    .sev-error { background: var(--cg-color-status-error-text-default); }\n    .sev-warning { background: var(--cg-color-status-warning-text-default); }\n    .sev-info { background: var(--cg-color-status-info-text-default); }\n\n    .issue-list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-6);\n    }\n\n    .issue-item {\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      overflow: hidden;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .issue-item:hover {\n      border-color: var(--cg-color-surface-cards-hover-border);\n    }\n\n    .issue-header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      cursor: pointer;\n      background: transparent;\n      border: none;\n      color: inherit;\n      width: 100%;\n      font-family: inherit;\n      font-size: var(--cg-font-size-sm);\n      text-align: left;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .issue-header:hover {\n      background: var(--cg-color-surface-cards-hover-background);\n    }\n    .issue-header:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .issue-header:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 var(--cg-border-width-100) var(--cg-color-focus-ring);\n    }\n\n    .sev-icon {\n      flex-shrink: 0;\n      display: inline-flex;\n      align-items: center;\n    }\n    .sev-icon-error { color: var(--cg-color-status-error-text-default); }\n    .sev-icon-warning { color: var(--cg-color-status-warning-text-default); }\n    .sev-icon-info { color: var(--cg-color-status-info-text-default); }\n\n    .issue-rule {\n      flex: 1;\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .chevron {\n      color: var(--cg-color-surface-container-outlined);\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .issue-header[aria-expanded=\"true\"] .chevron {\n      transform: rotate(180deg);\n    }\n\n    .level-badge {\n      display: inline-flex;\n      padding: var(--cg-spacing-2) var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-50);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      flex-shrink: 0;\n    }\n    .level-A {\n      background: var(--cg-color-status-info-background-default);\n      color: var(--cg-color-status-info-text-default);\n    }\n    .level-AA {\n      background: var(--cg-color-status-warning-background-default);\n      color: var(--cg-color-status-warning-text-default);\n    }\n    .level-AAA {\n      background: var(--cg-overlay-accent-subtle);\n      color: var(--cg-color-accent-text);\n    }\n\n    .issue-details {\n      padding: var(--cg-spacing-8) var(--cg-spacing-12) var(--cg-spacing-12) var(--cg-spacing-32);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xs);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    .issue-desc {\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-normal);\n    }\n\n    .issue-element {\n      display: inline-block;\n      align-self: flex-start;\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      background: var(--cg-color-action-tertiary-background-hover);\n      border-radius: var(--cg-border-radius-50);\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-base-text);\n      word-break: break-all;\n    }\n\n    .issue-fix {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-6) var(--cg-spacing-8);\n      background: var(--cg-overlay-accent-subtle);\n      border: var(--cg-border-width-50) solid var(--cg-overlay-accent-strong);\n      border-radius: var(--cg-border-radius-50);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-normal);\n    }\n    .issue-fix-label {\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-accent-text);\n      flex-shrink: 0;\n    }\n\n    .empty {\n      text-align: center;\n      padding: var(--cg-spacing-24);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n    .empty cg-icon {\n      color: var(--cg-color-status-success-text-default);\n    }\n  `];\n\n  @property({ type: Array }) issues: A11yIssue[] = [];\n  @property({ type: Number }) score = 0;\n  @property({ type: String }) override title = 'Accessibility Report';\n  /** Total checks run (for \"X of Y passed\" display). Defaults to issues.length when 0. */\n  @property({ type: Number, attribute: 'total-checks' }) totalChecks = 0;\n\n  @state() private _expanded = new Set<number>();\n\n  private get _errorCount() { return this.issues.filter(i => i.severity === 'error').length; }\n  private get _warningCount() { return this.issues.filter(i => i.severity === 'warning').length; }\n  private get _infoCount() { return this.issues.filter(i => i.severity === 'info').length; }\n\n  private _getScoreColor(): string {\n    if (this.score >= 90) return 'var(--cg-color-status-success-text-default)';\n    if (this.score >= 70) return 'var(--cg-color-status-warning-text-default)';\n    if (this.score >= 50) return 'var(--cg-color-status-warning-text-default)';\n    return 'var(--cg-color-status-error-text-default)';\n  }\n\n  private _toggle(idx: number): void {\n    const next = new Set(this._expanded);\n    if (next.has(idx)) next.delete(idx); else next.add(idx);\n    this._expanded = next;\n  }\n\n  private _onClick(issue: A11yIssue, idx: number): void {\n    this._toggle(idx);\n    this.dispatchEvent(new CustomEvent('ai-a11y-issue-click', {\n      bubbles: true, composed: true,\n      detail: { issue, index: idx },\n    }));\n  }\n\n  private _sevIcon(severity: string) {\n    const map: Record<string, string> = {\n      error: 'error',\n      warning: 'warning',\n      info: 'info',\n    };\n    const cls = `sev-icon sev-icon-${severity}`;\n    return html`<span class=${cls} aria-hidden=\"true\"><cg-icon name=\"${map[severity] ?? 'info'}\" size=\"sm\"></cg-icon></span>`;\n  }\n\n  override render() {\n    const circumference = 2 * Math.PI * 27;\n    const offset = circumference - (this.score / 100) * circumference;\n    const scoreColor = this._getScoreColor();\n    const total = this.totalChecks > 0 ? this.totalChecks : this.issues.length;\n    const passed = Math.max(0, total - this.issues.length);\n\n    return html`\n      <cg-card>\n        <div class=\"header\">\n          <div class=\"score-circle\" role=\"meter\" aria-valuenow=${this.score}\n               aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Accessibility score ${this.score} out of 100\">\n            <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n              <circle class=\"score-bg\" cx=\"32\" cy=\"32\" r=\"27\" />\n              <circle class=\"score-fg\" cx=\"32\" cy=\"32\" r=\"27\"\n                      stroke=\"${scoreColor}\"\n                      stroke-dasharray=\"${circumference}\"\n                      stroke-dashoffset=\"${offset}\" />\n            </svg>\n            <div class=\"score-text\" style=\"color:${scoreColor}\">${this.score}</div>\n          </div>\n          <div class=\"header-info\">\n            <h3 class=\"title\">${this.title}</h3>\n            ${total > 0 ? html`\n              <p class=\"pass-count\">${passed} of ${total} checks passed</p>\n            ` : nothing}\n            <div class=\"breakdown\">\n              <span class=\"breakdown-item\">\n                <span class=\"sev-dot sev-error\"></span> ${this._errorCount} ${this._errorCount === 1 ? 'error' : 'errors'}\n              </span>\n              <span class=\"breakdown-item\">\n                <span class=\"sev-dot sev-warning\"></span> ${this._warningCount} ${this._warningCount === 1 ? 'warning' : 'warnings'}\n              </span>\n              <span class=\"breakdown-item\">\n                <span class=\"sev-dot sev-info\"></span> ${this._infoCount} info\n              </span>\n            </div>\n          </div>\n        </div>\n        ${this.issues.length === 0 ? html`\n          <div class=\"empty\" role=\"status\">\n            <cg-icon name=\"success\" size=\"lg\"></cg-icon>\n            <span>No accessibility issues found.</span>\n          </div>\n        ` : html`\n          <div class=\"issue-list\" role=\"list\" aria-label=\"Accessibility issues\">\n            ${this.issues.map((issue, i) => html`\n              <div class=\"issue-item\" role=\"listitem\">\n                <button class=\"issue-header\"\n                        @click=${() => this._onClick(issue, i)}\n                        aria-expanded=${this._expanded.has(i) ? 'true' : 'false'}>\n                  ${this._sevIcon(issue.severity)}\n                  <span class=\"issue-rule\">${issue.rule}</span>\n                  <span class=\"level-badge level-${issue.level}\">WCAG ${issue.level}</span>\n                  <cg-icon class=\"chevron\" name=\"chevron-down\" size=\"xs\"></cg-icon>\n                </button>\n                ${this._expanded.has(i) ? html`\n                  <div class=\"issue-details\">\n                    <div class=\"issue-desc\">${issue.description}</div>\n                    ${issue.element ? html`\n                      <code class=\"issue-element\">${issue.element}</code>\n                    ` : nothing}\n                    ${issue.fix ? html`\n                      <div class=\"issue-fix\">\n                        <span class=\"issue-fix-label\">Fix:</span>\n                        <span>${issue.fix}</span>\n                      </div>\n                    ` : nothing}\n                  </div>\n                ` : nothing}\n              </div>\n            `)}\n          </div>\n        `}\n      </cg-card>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-accessibility-report': AiAccessibilityReport;\n  }\n}\n"],"names":["AiAccessibilityReport","LitElement","i","idx","next","issue","severity","map","cls","html","circumference","offset","scoreColor","total","passed","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-action-preview/ai-action-preview.d.ts

@@ -0,0 +1,32 @@
+import { LitElement } from 'lit';
+type Severity = 'low' | 'medium' | 'high' | 'critical';
+export declare class AiActionPreview extends LitElement {
+    static styles: import('lit').CSSResult[];
+    heading: string;
+    description: string;
+    action: string;
+    severity: Severity;
+    details: Record<string, string>;
+    confirmLabel: string;
+    cancelLabel: string;
+    countdown: number;
+    private _remaining;
+    private _timer?;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _clearTimer;
+    private _startCountdown;
+    private _confirmed;
+    private _handleConfirm;
+    private _handleCancel;
+    private _severityIcon;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-action-preview': AiActionPreview;
+    }
+}
+export {};
+//# sourceMappingURL=ai-action-preview.d.ts.map

package/dist/components/ai-action-preview/ai-action-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-action-preview.d.ts","sourceRoot":"","sources":["../../../src/components/ai-action-preview/ai-action-preview.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,KAAK,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;AAEvD,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BA6JnB;IACyB,OAAO,SAAM;IACb,WAAW,SAAM;IACjB,MAAM,SAAM;IACZ,QAAQ,EAAE,QAAQ,CAAS;IACvB,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IACzC,YAAY,SAAa;IACzB,WAAW,SAAY;IACvB,SAAS,SAAK;IAEjC,OAAO,CAAC,UAAU,CAAK;IAChC,OAAO,CAAC,MAAM,CAAC,CAA6C;IAEnD,iBAAiB;IAKjB,oBAAoB;IAKpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAI9C,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,eAAe;IAcvB,OAAO,CAAC,UAAU,CAAS;IAE3B,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAOZ,MAAM;CAmDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF"}

package/dist/components/ai-action-preview/ai-action-preview.js

@@ -0,0 +1,295 @@
+import { css as u, LitElement as v, nothing as g, html as s } from "lit";
+import { property as a, state as p, customElement as f } from "lit/decorators.js";
+import { h as b, r as h, p as m, f as y } from "../../chunks/premium.css-9I4kHrsl.js";
+var w = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, t = (e, o, c, n) => {
+  for (var i = n > 1 ? void 0 : n ? _(o, c) : o, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (i = (n ? d(o, c, i) : d(i)) || i);
+  return n && i && w(o, c, i), i;
+};
+let r = class extends v {
+  constructor() {
+    super(...arguments), this.heading = "", this.description = "", this.action = "", this.severity = "low", this.details = {}, this.confirmLabel = "Confirm", this.cancelLabel = "Cancel", this.countdown = 0, this._remaining = 0, this._confirmed = !1;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._startCountdown();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._clearTimer();
+  }
+  updated(e) {
+    e.has("countdown") && this._startCountdown();
+  }
+  _clearTimer() {
+    this._timer !== void 0 && (clearInterval(this._timer), this._timer = void 0);
+  }
+  _startCountdown() {
+    this._clearTimer(), this.countdown > 0 && (this._remaining = this.countdown, this._timer = setInterval(() => {
+      this._remaining--, this._remaining <= 0 && (this._clearTimer(), this._handleConfirm());
+    }, 1e3));
+  }
+  _handleConfirm() {
+    this._confirmed || (this._confirmed = !0, this._clearTimer(), this.dispatchEvent(new CustomEvent("ai-action-confirm", {
+      bubbles: !0,
+      composed: !0,
+      detail: { action: this.action, details: this.details }
+    })));
+  }
+  _handleCancel() {
+    this._clearTimer(), this.dispatchEvent(new CustomEvent("ai-action-cancel", {
+      bubbles: !0,
+      composed: !0,
+      detail: { action: this.action }
+    }));
+  }
+  _severityIcon() {
+    return {
+      low: "✓",
+      medium: "⚠",
+      high: "⚠",
+      critical: "✖"
+    }[this.severity];
+  }
+  render() {
+    const e = Object.entries(this.details);
+    return s`
+      <div
+        class="card ${this.severity === "critical" ? "critical" : ""}"
+        role="alertdialog"
+        aria-label="Action preview: ${this.heading}"
+        tabindex="0"
+      >
+        <div class="header">
+          <span class="title">${this.heading}</span>
+          <span class="severity ${this.severity}" aria-label="Severity: ${this.severity}">
+            <span aria-hidden="true">${this._severityIcon()}</span>
+            ${this.severity}
+          </span>
+        </div>
+
+        ${this.description ? s`<div class="description">${this.description}</div>` : g}
+
+        ${e.length > 0 ? s`
+          <div class="details" role="list" aria-label="Action details">
+            ${e.map(([o, c]) => s`
+              <div class="detail-row" role="listitem">
+                <span class="detail-key">${o}</span>
+                <span class="detail-value">${c}</span>
+              </div>
+            `)}
+          </div>
+        ` : g}
+
+        ${this._remaining > 0 ? s`
+          <div class="countdown" aria-live="polite">
+            Auto-confirming in <span class="countdown-num">${this._remaining}s</span>
+          </div>
+        ` : g}
+
+        <div class="actions">
+          <button
+            class="btn-cancel"
+            @click=${this._handleCancel}
+            aria-label="${this.cancelLabel}"
+          >${this.cancelLabel}</button>
+          <button
+            class="btn-confirm ${this.severity === "critical" ? "critical" : ""}"
+            @click=${this._handleConfirm}
+            aria-label="${this.confirmLabel}"
+          >${this.confirmLabel}</button>
+        </div>
+      </div>
+    `;
+  }
+};
+r.styles = [b, h, m, y, u`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+
+    .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);
+      position: relative;
+      overflow: hidden;
+    }
+    .card.critical {
+      border-color: var(--cg-color-status-error-text-default);
+      animation: pulse-border 2s ease-in-out infinite;
+    }
+
+    /* ── Header ── */
+    .header {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      margin-bottom: var(--cg-spacing-16);
+    }
+    .title {
+      font-size: var(--cg-font-size-base);
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text);
+      flex: 1;
+    }
+
+    /* ── Severity badge ── */
+    .severity {
+      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-bold);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+    .severity.low {
+      background: var(--cg-color-status-success-background-default);
+      color: var(--cg-color-status-success-text-default);
+    }
+    .severity.medium {
+      background: var(--cg-color-status-warning-background-default);
+      color: var(--cg-color-status-warning-text-default);
+    }
+    .severity.high {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-chart-5);
+    }
+    .severity.critical {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+    }
+
+    /* ── Description ── */
+    .description {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-input-text-placeholder);
+      line-height: 1.5;
+      margin-bottom: var(--cg-spacing-16);
+    }
+
+    /* ── Details key-value list ── */
+    .details {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+      margin-bottom: var(--cg-spacing-16);
+      padding: var(--cg-spacing-12);
+      background: var(--cg-color-surface-base-background);
+      border-radius: var(--cg-border-radius-100);
+    }
+    .detail-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: var(--cg-font-size-sm);
+    }
+    .detail-key {
+      color: var(--cg-color-input-text-placeholder);
+      font-weight: var(--cg-font-weight-medium);
+    }
+    .detail-value {
+      color: var(--cg-color-surface-base-text);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+
+    /* ── Countdown ── */
+    .countdown {
+      text-align: center;
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      margin-bottom: var(--cg-spacing-12);
+    }
+    .countdown-num {
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    /* ── Actions ── */
+    .actions {
+      padding-top: var(--cg-spacing-12);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      display: flex;
+      gap: var(--cg-spacing-8);
+    }
+    button {
+      flex: 1;
+      padding: var(--cg-spacing-8) var(--cg-spacing-16);
+      border-radius: var(--cg-border-radius-100);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      cursor: pointer;
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+                  color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+                  filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+                  transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      border: none;
+    }
+    button:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    button:active {
+      transform: scale(0.97);
+    }
+    .btn-cancel {
+      background: var(--cg-color-surface-container-background);
+      color: var(--cg-color-surface-base-text);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    .btn-cancel:hover { background: var(--cg-color-surface-cards-border); }
+    .btn-confirm {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-surface-base-background);
+    }
+    .btn-confirm:hover { filter: brightness(0.9); }
+    .btn-confirm.critical {
+      background: var(--cg-color-status-error-text-default);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .card.critical { animation: none; }
+    }
+
+    @keyframes pulse-border {
+      0%, 100% { border-color: var(--cg-color-status-error-text-default); }
+      50% { border-color: var(--cg-color-status-error-border-default); }
+    }
+  `];
+t([
+  a({ type: String })
+], r.prototype, "heading", 2);
+t([
+  a({ type: String })
+], r.prototype, "description", 2);
+t([
+  a({ type: String })
+], r.prototype, "action", 2);
+t([
+  a({ type: String })
+], r.prototype, "severity", 2);
+t([
+  a({ attribute: !1 })
+], r.prototype, "details", 2);
+t([
+  a({ type: String })
+], r.prototype, "confirmLabel", 2);
+t([
+  a({ type: String })
+], r.prototype, "cancelLabel", 2);
+t([
+  a({ type: Number })
+], r.prototype, "countdown", 2);
+t([
+  p()
+], r.prototype, "_remaining", 2);
+r = t([
+  f("ai-action-preview")
+], r);
+export {
+  r as AiActionPreview
+};
+//# sourceMappingURL=ai-action-preview.js.map

package/dist/components/ai-action-preview/ai-action-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-action-preview.js","sources":["../../../src/components/ai-action-preview/ai-action-preview.ts"],"sourcesContent":["/**\n * @element ai-action-preview\n * Confirmation card for dangerous or irreversible AI actions with severity badge and optional countdown.\n *\n * @example\n * ```html\n * <ai-action-preview\n *   heading=\"Delete training data\"\n *   severity=\"critical\"\n *   .details=${{Dataset: 'prod-v2', Rows: '14,200'}}\n *   countdown=\"10\"\n * ></ai-action-preview>\n * ```\n *\n * @fires {CustomEvent<{action: string, details: Record<string,string>}>} ai-action-confirm - User confirmed\n * @fires {CustomEvent<{action: string}>} ai-action-cancel - User cancelled\n *\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Confirm button and focus ring color\n * @cssprop [--cg-red-400=#f87171] - Critical severity border and pulse\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, pulseKeyframes, fadeSlideInKeyframes } from '../../styles/index.js';\n\ntype Severity = 'low' | 'medium' | 'high' | 'critical';\n\n@customElement('ai-action-preview')\nexport class AiActionPreview extends LitElement {\n  static override styles = [hostBlock, reducedMotion, pulseKeyframes, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\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);\n      position: relative;\n      overflow: hidden;\n    }\n    .card.critical {\n      border-color: var(--cg-color-status-error-text-default);\n      animation: pulse-border 2s ease-in-out infinite;\n    }\n\n    /* ── Header ── */\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      margin-bottom: var(--cg-spacing-16);\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      flex: 1;\n    }\n\n    /* ── Severity badge ── */\n    .severity {\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-bold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .severity.low {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n    }\n    .severity.medium {\n      background: var(--cg-color-status-warning-background-default);\n      color: var(--cg-color-status-warning-text-default);\n    }\n    .severity.high {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-chart-5);\n    }\n    .severity.critical {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    /* ── Description ── */\n    .description {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-placeholder);\n      line-height: 1.5;\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    /* ── Details key-value list ── */\n    .details {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n      margin-bottom: var(--cg-spacing-16);\n      padding: var(--cg-spacing-12);\n      background: var(--cg-color-surface-base-background);\n      border-radius: var(--cg-border-radius-100);\n    }\n    .detail-row {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      font-size: var(--cg-font-size-sm);\n    }\n    .detail-key {\n      color: var(--cg-color-input-text-placeholder);\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .detail-value {\n      color: var(--cg-color-surface-base-text);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    /* ── Countdown ── */\n    .countdown {\n      text-align: center;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .countdown-num {\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* ── Actions ── */\n    .actions {\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      display: flex;\n      gap: var(--cg-spacing-8);\n    }\n    button {\n      flex: 1;\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer;\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n                  color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n                  filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n                  transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      border: none;\n    }\n    button:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    button:active {\n      transform: scale(0.97);\n    }\n    .btn-cancel {\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-surface-base-text);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .btn-cancel:hover { background: var(--cg-color-surface-cards-border); }\n    .btn-confirm {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-base-background);\n    }\n    .btn-confirm:hover { filter: brightness(0.9); }\n    .btn-confirm.critical {\n      background: var(--cg-color-status-error-text-default);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .card.critical { animation: none; }\n    }\n\n    @keyframes pulse-border {\n      0%, 100% { border-color: var(--cg-color-status-error-text-default); }\n      50% { border-color: var(--cg-color-status-error-border-default); }\n    }\n  `];\n  @property({ type: String }) heading = '';\n  @property({ type: String }) description = '';\n  @property({ type: String }) action = '';\n  @property({ type: String }) severity: Severity = 'low';\n  @property({ attribute: false }) details: Record<string, string> = {};\n  @property({ type: String }) confirmLabel = 'Confirm';\n  @property({ type: String }) cancelLabel = 'Cancel';\n  @property({ type: Number }) countdown = 0;\n\n  @state() private _remaining = 0;\n  private _timer?: ReturnType<typeof setInterval> | undefined;\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this._startCountdown();\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._clearTimer();\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('countdown')) this._startCountdown();\n  }\n\n  private _clearTimer() {\n    if (this._timer !== undefined) { clearInterval(this._timer); this._timer = undefined; }\n  }\n\n  private _startCountdown() {\n    this._clearTimer();\n    if (this.countdown > 0) {\n      this._remaining = this.countdown;\n      this._timer = setInterval(() => {\n        this._remaining--;\n        if (this._remaining <= 0) {\n          this._clearTimer();\n          this._handleConfirm();\n        }\n      }, 1000);\n    }\n  }\n\n  private _confirmed = false;\n\n  private _handleConfirm() {\n    if (this._confirmed) return; // Guard double-fire\n    this._confirmed = true;\n    this._clearTimer();\n    this.dispatchEvent(new CustomEvent('ai-action-confirm', {\n      bubbles: true, composed: true,\n      detail: { action: this.action, details: this.details },\n    }));\n  }\n\n  private _handleCancel() {\n    this._clearTimer();\n    this.dispatchEvent(new CustomEvent('ai-action-cancel', {\n      bubbles: true, composed: true,\n      detail: { action: this.action },\n    }));\n  }\n\n  private _severityIcon(): string {\n    const icons: Record<Severity, string> = {\n      low: '\\u2713', medium: '\\u26A0', high: '\\u26A0', critical: '\\u2716',\n    };\n    return icons[this.severity];\n  }\n\n  override render() {\n    const entries = Object.entries(this.details);\n    return html`\n      <div\n        class=\"card ${this.severity === 'critical' ? 'critical' : ''}\"\n        role=\"alertdialog\"\n        aria-label=\"Action preview: ${this.heading}\"\n        tabindex=\"0\"\n      >\n        <div class=\"header\">\n          <span class=\"title\">${this.heading}</span>\n          <span class=\"severity ${this.severity}\" aria-label=\"Severity: ${this.severity}\">\n            <span aria-hidden=\"true\">${this._severityIcon()}</span>\n            ${this.severity}\n          </span>\n        </div>\n\n        ${this.description ? html`<div class=\"description\">${this.description}</div>` : nothing}\n\n        ${entries.length > 0 ? html`\n          <div class=\"details\" role=\"list\" aria-label=\"Action details\">\n            ${entries.map(([k, v]) => html`\n              <div class=\"detail-row\" role=\"listitem\">\n                <span class=\"detail-key\">${k}</span>\n                <span class=\"detail-value\">${v}</span>\n              </div>\n            `)}\n          </div>\n        ` : nothing}\n\n        ${this._remaining > 0 ? html`\n          <div class=\"countdown\" aria-live=\"polite\">\n            Auto-confirming in <span class=\"countdown-num\">${this._remaining}s</span>\n          </div>\n        ` : nothing}\n\n        <div class=\"actions\">\n          <button\n            class=\"btn-cancel\"\n            @click=${this._handleCancel}\n            aria-label=\"${this.cancelLabel}\"\n          >${this.cancelLabel}</button>\n          <button\n            class=\"btn-confirm ${this.severity === 'critical' ? 'critical' : ''}\"\n            @click=${this._handleConfirm}\n            aria-label=\"${this.confirmLabel}\"\n          >${this.confirmLabel}</button>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-action-preview': AiActionPreview;\n  }\n}\n"],"names":["AiActionPreview","LitElement","changed","entries","html","nothing","k","v","hostBlock","reducedMotion","pulseKeyframes","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+type AgentStatus = 'idle' | 'thinking' | 'acting' | 'done' | 'error';
+export declare class AiAgentCard extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    name: string;
+    role: string;
+    status: AgentStatus;
+    task: string;
+    handoffChain: string[];
+    capabilities: string[];
+    private _handlePause;
+    private _handleCancel;
+    private _currentStepIndex;
+    render(): import('lit').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=ai-agent-card.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-agent-card.d.ts","sourceRoot":"","sources":["../../../src/components/ai-agent-card/ai-agent-card.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,KAAK,WAAW,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AAUrE,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAwJnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACtD,IAAI,EAAE,MAAM,CAAW;IACd,IAAI,EAAE,MAAM,CAAM;IAC3B,MAAM,EAAE,WAAW,CAAU;IAC7B,IAAI,EAAE,MAAM,CAAM;IACnB,YAAY,EAAE,MAAM,EAAE,CAAM;IAC5B,YAAY,EAAE,MAAM,EAAE,CAAM;IAEvD,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,iBAAiB;IAIhB,MAAM;CA+DhB"}