@cognivo/components 0.8.0

package/dist/components/ai-error-boundary/ai-error-boundary.js

@@ -0,0 +1,212 @@
+import { css as v, LitElement as p, nothing as a, html as o } from "lit";
+import { property as c, state as u, customElement as h } from "lit/decorators.js";
+import { h as b, r as f, f as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, t = (i, s, d, n) => {
+  for (var e = n > 1 ? void 0 : n ? w(s, d) : s, l = i.length - 1, g; l >= 0; l--)
+    (g = i[l]) && (e = (n ? g(s, d, e) : g(e)) || e);
+  return n && e && y(s, d, e), e;
+};
+let r = class extends p {
+  constructor() {
+    super(...arguments), this.error = "", this.code = "", this.retryable = !0, this.details = "", this._showDetails = !1;
+  }
+  _emit(i) {
+    this.dispatchEvent(new CustomEvent(i, { bubbles: !0, composed: !0 }));
+  }
+  render() {
+    return this.error ? o`
+      <div class="error-card" role="alert" aria-live="assertive">
+        <div class="header">
+          <span class="icon" aria-hidden="true"><svg width="16" height="16" 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></span>
+          <div class="header-content">
+            <div class="title-row">
+              <span class="title">Something went wrong</span>
+              ${this.code ? o`<span class="code-badge">${this.code}</span>` : a}
+            </div>
+            <div class="message">${this.error}</div>
+
+            ${this.details ? o`
+              <button
+                class="details-toggle"
+                aria-expanded=${this._showDetails}
+                @click=${() => {
+      this._showDetails = !this._showDetails;
+    }}
+              >${this._showDetails ? "Hide details" : "Show details"}</button>
+              ${this._showDetails ? o`<div class="details">${this.details}</div>` : a}
+            ` : a}
+          </div>
+        </div>
+
+        <div class="actions">
+          ${this.retryable ? o`
+            <button class="btn retry-btn" @click=${() => this._emit("ai-error-retry")}>
+              Retry
+            </button>
+          ` : a}
+          <button class="btn dismiss-btn" @click=${() => this._emit("ai-error-dismiss")}>
+            Dismiss
+          </button>
+        </div>
+      </div>
+    ` : a;
+  }
+};
+r.styles = [b, f, m, v`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+    :host([hidden]) { display: none; }
+
+    .error-card {
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);
+      border-radius: var(--cg-border-radius-150);
+      padding: var(--cg-spacing-16);
+    }
+
+    .header {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--cg-spacing-12);
+      margin-bottom: var(--cg-spacing-12);
+    }
+
+    .icon {
+      font-size: var(--cg-font-size-2xl);
+      flex-shrink: 0;
+      line-height: 1;
+    }
+
+    .header-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .title-row {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      flex-wrap: wrap;
+    }
+
+    .title {
+      color: var(--cg-color-status-error-text-default);
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-bold);
+    }
+
+    .code-badge {
+      display: inline-block;
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-50);
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      font-family: var(--cg-font-family-mono);
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+
+    .message {
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-relaxed);
+      margin-top: var(--cg-spacing-6);
+    }
+
+    .details-toggle {
+      background: none;
+      border: none;
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-xs);
+      cursor: pointer;
+      padding: var(--cg-spacing-4) 0;
+      margin-top: var(--cg-spacing-8);
+      font-family: inherit;
+      text-decoration: underline;
+      text-underline-offset: var(--cg-spacing-2);
+    }
+    .details-toggle:hover { color: var(--cg-color-surface-base-text); }
+    .details-toggle:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      border-radius: var(--cg-border-radius-50);
+    }
+
+    .details {
+      margin-top: var(--cg-spacing-8);
+      padding: var(--cg-spacing-12);
+      background: var(--cg-color-code-background);
+      border-radius: var(--cg-border-radius-100);
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-xs);
+      font-family: var(--cg-font-family-mono);
+      line-height: var(--cg-line-height-relaxed);
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .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);
+      margin-top: var(--cg-spacing-16);
+    }
+
+    .btn {
+      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;
+      border: none;
+      font-family: inherit;
+      transition: filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .btn:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }
+    .btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .btn:disabled {
+      opacity: 0.4;
+      cursor: default;
+    }
+
+    .retry-btn {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+    }
+    .retry-btn:hover:not(:disabled) { filter: brightness(1.1); }
+
+    .dismiss-btn {
+      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);
+    }
+    .dismiss-btn:hover:not(:disabled) { filter: brightness(1.2); }
+  `];
+t([
+  c({ type: String })
+], r.prototype, "error", 2);
+t([
+  c({ type: String })
+], r.prototype, "code", 2);
+t([
+  c({ type: Boolean })
+], r.prototype, "retryable", 2);
+t([
+  c({ type: String })
+], r.prototype, "details", 2);
+t([
+  u()
+], r.prototype, "_showDetails", 2);
+r = t([
+  h("ai-error-boundary")
+], r);
+export {
+  r as AiErrorBoundary
+};
+//# sourceMappingURL=ai-error-boundary.js.map

package/dist/components/ai-error-boundary/ai-error-boundary.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-error-boundary.js","sources":["../../../src/components/ai-error-boundary/ai-error-boundary.ts"],"sourcesContent":["/**\n * @element ai-error-boundary\n * Error display card for AI failures with error code badge, expandable details, retry, and dismiss.\n *\n * @example\n * ```html\n * <ai-error-boundary\n *   error=\"Model returned an empty response\"\n *   code=\"ERR_EMPTY_RESPONSE\"\n *   details=\"Request ID: abc-123, latency: 4200ms\"\n *   retryable\n * ></ai-error-boundary>\n * ```\n *\n * @fires {CustomEvent} ai-error-retry - Retry button clicked\n * @fires {CustomEvent} ai-error-dismiss - Dismiss button 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\n@customElement('ai-error-boundary')\nexport class AiErrorBoundary extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .error-card {\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);\n      border-radius: var(--cg-border-radius-150);\n      padding: var(--cg-spacing-16);\n    }\n\n    .header {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--cg-spacing-12);\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .icon {\n      font-size: var(--cg-font-size-2xl);\n      flex-shrink: 0;\n      line-height: 1;\n    }\n\n    .header-content {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .title-row {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      flex-wrap: wrap;\n    }\n\n    .title {\n      color: var(--cg-color-status-error-text-default);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-bold);\n    }\n\n    .code-badge {\n      display: inline-block;\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      font-family: var(--cg-font-family-mono);\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n\n    .message {\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-relaxed);\n      margin-top: var(--cg-spacing-6);\n    }\n\n    .details-toggle {\n      background: none;\n      border: none;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-xs);\n      cursor: pointer;\n      padding: var(--cg-spacing-4) 0;\n      margin-top: var(--cg-spacing-8);\n      font-family: inherit;\n      text-decoration: underline;\n      text-underline-offset: var(--cg-spacing-2);\n    }\n    .details-toggle:hover { color: var(--cg-color-surface-base-text); }\n    .details-toggle:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n      border-radius: var(--cg-border-radius-50);\n    }\n\n    .details {\n      margin-top: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12);\n      background: var(--cg-color-code-background);\n      border-radius: var(--cg-border-radius-100);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-xs);\n      font-family: var(--cg-font-family-mono);\n      line-height: var(--cg-line-height-relaxed);\n      white-space: pre-wrap;\n      word-break: break-word;\n    }\n\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      margin-top: var(--cg-spacing-16);\n    }\n\n    .btn {\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      border: none;\n      font-family: inherit;\n      transition: filter var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .btn:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }\n    .btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .btn:disabled {\n      opacity: 0.4;\n      cursor: default;\n    }\n\n    .retry-btn {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n    }\n    .retry-btn:hover:not(:disabled) { filter: brightness(1.1); }\n\n    .dismiss-btn {\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    .dismiss-btn:hover:not(:disabled) { filter: brightness(1.2); }\n  `];\n  @property({ type: String }) error = '';\n  @property({ type: String }) code = '';\n  @property({ type: Boolean }) retryable = true;\n  @property({ type: String }) details = '';\n\n  @state() private _showDetails = false;\n\n  private _emit(name: string) {\n    this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true }));\n  }\n\n  override render() {\n    if (!this.error) return nothing;\n\n    return html`\n      <div class=\"error-card\" role=\"alert\" aria-live=\"assertive\">\n        <div class=\"header\">\n          <span class=\"icon\" aria-hidden=\"true\"><svg width=\"16\" height=\"16\" 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></span>\n          <div class=\"header-content\">\n            <div class=\"title-row\">\n              <span class=\"title\">Something went wrong</span>\n              ${this.code ? html`<span class=\"code-badge\">${this.code}</span>` : nothing}\n            </div>\n            <div class=\"message\">${this.error}</div>\n\n            ${this.details ? html`\n              <button\n                class=\"details-toggle\"\n                aria-expanded=${this._showDetails}\n                @click=${() => { this._showDetails = !this._showDetails; }}\n              >${this._showDetails ? 'Hide details' : 'Show details'}</button>\n              ${this._showDetails ? html`<div class=\"details\">${this.details}</div>` : nothing}\n            ` : nothing}\n          </div>\n        </div>\n\n        <div class=\"actions\">\n          ${this.retryable ? html`\n            <button class=\"btn retry-btn\" @click=${() => this._emit('ai-error-retry')}>\n              Retry\n            </button>\n          ` : nothing}\n          <button class=\"btn dismiss-btn\" @click=${() => this._emit('ai-error-dismiss')}>\n            Dismiss\n          </button>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-error-boundary': AiErrorBoundary;\n  }\n}\n"],"names":["AiErrorBoundary","LitElement","name","html","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;AAsBO,IAAMA,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAyIuB,KAAA,QAAQ,IACR,KAAA,OAAO,IACN,KAAA,YAAY,IACb,KAAA,UAAU,IAE7B,KAAQ,eAAe;AAAA,EAAA;AAAA,EAExB,MAAMC,GAAc;AAC1B,SAAK,cAAc,IAAI,YAAYA,GAAM,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EAC7E;AAAA,EAES,SAAS;AAChB,WAAK,KAAK,QAEHC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAOK,KAAK,OAAOA,6BAAgC,KAAK,IAAI,YAAYC,CAAO;AAAA;AAAA,mCAErD,KAAK,KAAK;AAAA;AAAA,cAE/B,KAAK,UAAUD;AAAA;AAAA;AAAA,gCAGG,KAAK,YAAY;AAAA,yBACxB,MAAM;AAAE,WAAK,eAAe,CAAC,KAAK;AAAA,IAAc,CAAC;AAAA,iBACzD,KAAK,eAAe,iBAAiB,cAAc;AAAA,gBACpD,KAAK,eAAeA,yBAA4B,KAAK,OAAO,WAAWC,CAAO;AAAA,gBAC9EA,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,YAKX,KAAK,YAAYD;AAAA,mDACsB,MAAM,KAAK,MAAM,gBAAgB,CAAC;AAAA;AAAA;AAAA,cAGvEC,CAAO;AAAA,mDAC8B,MAAM,KAAK,MAAM,kBAAkB,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,QA9B3DA;AAAA,EAoC1B;AACF;AA1LaJ,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;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,GAuIzE;AAC2BC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzIfV,EAyIiB,WAAA,SAAA,CAAA;AACAS,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1IfV,EA0IiB,WAAA,QAAA,CAAA;AACCS,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA3IhBV,EA2IkB,WAAA,aAAA,CAAA;AACDS,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5IfV,EA4IiB,WAAA,WAAA,CAAA;AAEXS,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA9IIX,EA8IM,WAAA,gBAAA,CAAA;AA9INA,IAANS,EAAA;AAAA,EADNG,EAAc,mBAAmB;AAAA,GACrBZ,CAAA;"}

package/dist/components/ai-eval-scorecard/ai-eval-scorecard.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+export interface EvalScore {
+    metric: string;
+    value: number;
+    max?: number;
+    explanation?: string;
+}
+export declare class AiEvalScorecard extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    scores: EvalScore[];
+    grade: string;
+    title: string;
+    comparison: Record<string, number> | null;
+    private _expandedMetric;
+    private _avgScore;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=ai-eval-scorecard.d.ts.map

package/dist/components/ai-eval-scorecard/ai-eval-scorecard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-eval-scorecard.d.ts","sourceRoot":"","sources":["../../../src/components/ai-eval-scorecard/ai-eval-scorecard.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,SAAS;IACxB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BAmHnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC9C,MAAM,EAAE,SAAS,EAAE,CAAM;IACxC,KAAK,SAAM;IACF,KAAK,SAAgB;IACd,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI,CAAQ;IAEpE,OAAO,CAAC,eAAe,CAAM;IAEtC,OAAO,CAAC,SAAS;IAKR,MAAM;CA2ChB"}

package/dist/components/ai-eval-scorecard/ai-eval-scorecard.js

@@ -0,0 +1,199 @@
+import { css as v, LitElement as u, html as c, nothing as g } from "lit";
+import { property as d, state as p, customElement as f } from "lit/decorators.js";
+import { h, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (r, a, s, t) => {
+  for (var e = t > 1 ? void 0 : t ? x(a, s) : a, n = r.length - 1, l; n >= 0; n--)
+    (l = r[n]) && (e = (t ? l(a, s, e) : l(e)) || e);
+  return t && e && b(a, s, e), e;
+};
+let o = class extends u {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.scores = [], this.grade = "", this.title = "Evaluation", this.comparison = null, this._expandedMetric = "";
+  }
+  _avgScore() {
+    return this.scores.length ? Math.round(this.scores.reduce((r, a) => r + a.value / (a.max || 100) * 100, 0) / this.scores.length) : 0;
+  }
+  render() {
+    return this.scores.length ? c`
+      <div class="card" role="figure" aria-label="${this.title}${this.grade ? ": " + this.grade : ""}">
+        <div class="header">
+          <div class="header-left">
+            <span class="header-title">${this.title}</span>
+            <span class="header-subtitle">${this.scores.length} metrics · ${this._avgScore()}% avg</span>
+          </div>
+          ${this.grade ? c`<span class="grade-badge ${this.grade.charAt(0)}"><span class="grade-dot"></span>${this.grade}</span>` : g}
+        </div>
+
+        <div class="scores">
+          ${this.scores.map((r) => {
+      const a = r.max || 100, s = Math.min(r.value / a * 100, 100), t = this.comparison?.[r.metric];
+      return c`
+              <div class="metric" tabindex="0" role="button"
+                @click=${() => {
+        this._expandedMetric = this._expandedMetric === r.metric ? "" : r.metric, this.dispatchEvent(new CustomEvent("ai-eval-metric-click", { bubbles: !0, composed: !0, detail: { metric: r.metric } }));
+      }}
+                @keydown=${(e) => {
+        (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._expandedMetric = this._expandedMetric === r.metric ? "" : r.metric);
+      }}>
+                <div class="metric-top">
+                  <span class="metric-label">${r.metric}</span>
+                  <span class="metric-value">${r.value}</span>
+                  ${t !== void 0 ? c`
+                    <span class="metric-delta ${t >= 0 ? "delta-up" : "delta-down"}">${t >= 0 ? "+" : ""}${t}</span>
+                  ` : g}
+                </div>
+                <div class="metric-bar">
+                  <div class="metric-fill" style="width: ${s}%"></div>
+                </div>
+                ${this._expandedMetric === r.metric && r.explanation ? c`
+                  <div class="metric-explanation">${r.explanation}</div>
+                ` : g}
+              </div>
+            `;
+    })}
+        </div>
+      </div>
+    ` : c`<div class="card"><div class="empty">No evaluation data</div></div>`;
+  }
+};
+o.styles = [h, m, v`
+    :host {
+      min-width: 320px;
+    }
+
+    .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-150);
+      overflow: hidden;
+    }
+
+    /* ── Header ── */
+    .header {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: var(--cg-spacing-20) var(--cg-spacing-24);
+    }
+    .header-left {
+      display: flex; flex-direction: column; gap: var(--cg-spacing-2);
+    }
+    .header-title {
+      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+    .header-subtitle {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+    }
+
+    /* Grade — small filled dot + letter */
+    .grade-badge {
+      display: inline-flex; align-items: center; gap: var(--cg-spacing-6);
+      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-bold);
+      font-family: var(--cg-font-family-mono);
+      flex-shrink: 0;
+    }
+    .grade-dot {
+      width: var(--cg-spacing-8); height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+    }
+    .grade-badge.A .grade-dot, .grade-badge.B .grade-dot { background: var(--cg-color-status-success-text-default); }
+    .grade-badge.C .grade-dot, .grade-badge.D .grade-dot { background: var(--cg-color-status-warning-text-default); }
+    .grade-badge.F .grade-dot { background: var(--cg-color-status-error-text-default); }
+    .grade-badge.A, .grade-badge.B { color: var(--cg-color-status-success-text-default); }
+    .grade-badge.C, .grade-badge.D { color: var(--cg-color-status-warning-text-default); }
+    .grade-badge.F { color: var(--cg-color-status-error-text-default); }
+
+    /* ── Metric list ── */
+    .scores {
+      padding: var(--cg-spacing-4) var(--cg-spacing-16) var(--cg-spacing-16);
+    }
+
+    .metric {
+      padding: var(--cg-spacing-16) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid transparent;
+      cursor: pointer;
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .metric:hover { background: var(--cg-overlay-dark-subtle); border-color: var(--cg-color-surface-cards-border); }
+    .metric:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+
+    /* Top row: label + value + delta */
+    .metric-top {
+      display: flex; align-items: center; gap: var(--cg-spacing-12);
+      margin-bottom: var(--cg-spacing-8);
+    }
+    .metric-label {
+      flex: 1;
+      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+    }
+    .metric-value {
+      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);
+      font-family: var(--cg-font-family-mono);
+      color: var(--cg-color-surface-base-text);
+    }
+    .metric-delta {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);
+      font-family: var(--cg-font-family-mono);
+    }
+    .delta-up { color: var(--cg-color-status-success-text-default); }
+    .delta-down { color: var(--cg-color-status-error-text-default); }
+
+    /* Bar underneath */
+    .metric-bar {
+      height: var(--cg-spacing-4); border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-cards-border); overflow: hidden;
+    }
+    .metric-fill {
+      height: 100%; border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-action-primary-background-default);
+      opacity: 0.6;
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+
+    /* Explanation */
+    .metric-explanation {
+      margin-top: var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      line-height: var(--cg-line-height-snug);
+    }
+
+    .empty {
+      padding: var(--cg-spacing-48) var(--cg-spacing-24);
+      text-align: center; color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+    }
+
+    /* ── Rounded ── */
+    :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-150); }
+  `];
+i([
+  d({ reflect: !0 })
+], o.prototype, "rounded", 2);
+i([
+  d({ type: Array })
+], o.prototype, "scores", 2);
+i([
+  d()
+], o.prototype, "grade", 2);
+i([
+  d()
+], o.prototype, "title", 2);
+i([
+  d({ type: Object })
+], o.prototype, "comparison", 2);
+i([
+  p()
+], o.prototype, "_expandedMetric", 2);
+o = i([
+  f("ai-eval-scorecard")
+], o);
+export {
+  o as AiEvalScorecard
+};
+//# sourceMappingURL=ai-eval-scorecard.js.map

package/dist/components/ai-eval-scorecard/ai-eval-scorecard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-eval-scorecard.js","sources":["../../../src/components/ai-eval-scorecard/ai-eval-scorecard.ts"],"sourcesContent":["/**\n * @element ai-eval-scorecard\n * LLM evaluation scorecard with metric rows, grade badge, deltas, and expandable explanations.\n *\n * @fires {CustomEvent<{metric: string}>} ai-eval-metric-click\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface EvalScore {\n  metric: string;\n  value: number;\n  max?: number;\n  explanation?: string;\n}\n\n@customElement('ai-eval-scorecard')\nexport class AiEvalScorecard extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host {\n      min-width: 320px;\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-150);\n      overflow: hidden;\n    }\n\n    /* ── Header ── */\n    .header {\n      display: flex; align-items: center; justify-content: space-between;\n      padding: var(--cg-spacing-20) var(--cg-spacing-24);\n    }\n    .header-left {\n      display: flex; flex-direction: column; gap: var(--cg-spacing-2);\n    }\n    .header-title {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n    .header-subtitle {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    /* Grade — small filled dot + letter */\n    .grade-badge {\n      display: inline-flex; align-items: center; gap: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-bold);\n      font-family: var(--cg-font-family-mono);\n      flex-shrink: 0;\n    }\n    .grade-dot {\n      width: var(--cg-spacing-8); height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n    }\n    .grade-badge.A .grade-dot, .grade-badge.B .grade-dot { background: var(--cg-color-status-success-text-default); }\n    .grade-badge.C .grade-dot, .grade-badge.D .grade-dot { background: var(--cg-color-status-warning-text-default); }\n    .grade-badge.F .grade-dot { background: var(--cg-color-status-error-text-default); }\n    .grade-badge.A, .grade-badge.B { color: var(--cg-color-status-success-text-default); }\n    .grade-badge.C, .grade-badge.D { color: var(--cg-color-status-warning-text-default); }\n    .grade-badge.F { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Metric list ── */\n    .scores {\n      padding: var(--cg-spacing-4) var(--cg-spacing-16) var(--cg-spacing-16);\n    }\n\n    .metric {\n      padding: var(--cg-spacing-16) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid transparent;\n      cursor: pointer;\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .metric:hover { background: var(--cg-overlay-dark-subtle); border-color: var(--cg-color-surface-cards-border); }\n    .metric:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n\n    /* Top row: label + value + delta */\n    .metric-top {\n      display: flex; align-items: center; gap: var(--cg-spacing-12);\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .metric-label {\n      flex: 1;\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n    }\n    .metric-value {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-base-text);\n    }\n    .metric-delta {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n      font-family: var(--cg-font-family-mono);\n    }\n    .delta-up { color: var(--cg-color-status-success-text-default); }\n    .delta-down { color: var(--cg-color-status-error-text-default); }\n\n    /* Bar underneath */\n    .metric-bar {\n      height: var(--cg-spacing-4); border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-cards-border); overflow: hidden;\n    }\n    .metric-fill {\n      height: 100%; border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-primary-background-default);\n      opacity: 0.6;\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    /* Explanation */\n    .metric-explanation {\n      margin-top: var(--cg-spacing-8);\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    }\n\n    .empty {\n      padding: var(--cg-spacing-48) var(--cg-spacing-24);\n      text-align: center; color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    /* ── Rounded ── */\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-150); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Array }) scores: EvalScore[] = [];\n  @property() grade = '';\n  @property() override title = 'Evaluation';\n  @property({ type: Object }) comparison: Record<string, number> | null = null;\n\n  @state() private _expandedMetric = '';\n\n  private _avgScore(): number {\n    if (!this.scores.length) return 0;\n    return Math.round(this.scores.reduce((s, sc) => s + (sc.value / (sc.max || 100)) * 100, 0) / this.scores.length);\n  }\n\n  override render() {\n    if (!this.scores.length) return html`<div class=\"card\"><div class=\"empty\">No evaluation data</div></div>`;\n\n    return html`\n      <div class=\"card\" role=\"figure\" aria-label=\"${this.title}${this.grade ? ': ' + this.grade : ''}\">\n        <div class=\"header\">\n          <div class=\"header-left\">\n            <span class=\"header-title\">${this.title}</span>\n            <span class=\"header-subtitle\">${this.scores.length} metrics · ${this._avgScore()}% avg</span>\n          </div>\n          ${this.grade ? html`<span class=\"grade-badge ${this.grade.charAt(0)}\"><span class=\"grade-dot\"></span>${this.grade}</span>` : nothing}\n        </div>\n\n        <div class=\"scores\">\n          ${this.scores.map(s => {\n            const max = s.max || 100;\n            const pct = Math.min((s.value / max) * 100, 100);\n            const delta = this.comparison?.[s.metric];\n\n            return html`\n              <div class=\"metric\" tabindex=\"0\" role=\"button\"\n                @click=${() => { this._expandedMetric = this._expandedMetric === s.metric ? '' : s.metric; this.dispatchEvent(new CustomEvent('ai-eval-metric-click', { bubbles: true, composed: true, detail: { metric: s.metric } })); }}\n                @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._expandedMetric = this._expandedMetric === s.metric ? '' : s.metric; } }}>\n                <div class=\"metric-top\">\n                  <span class=\"metric-label\">${s.metric}</span>\n                  <span class=\"metric-value\">${s.value}</span>\n                  ${delta !== undefined ? html`\n                    <span class=\"metric-delta ${delta >= 0 ? 'delta-up' : 'delta-down'}\">${delta >= 0 ? '+' : ''}${delta}</span>\n                  ` : nothing}\n                </div>\n                <div class=\"metric-bar\">\n                  <div class=\"metric-fill\" style=\"width: ${pct}%\"></div>\n                </div>\n                ${this._expandedMetric === s.metric && s.explanation ? html`\n                  <div class=\"metric-explanation\">${s.explanation}</div>\n                ` : nothing}\n              </div>\n            `;\n          })}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiEvalScorecard","LitElement","s","sc","html","nothing","max","pct","delta","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;AAkBO,IAAMA,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAsHwB,KAAA,UAAuC,MACzC,KAAA,SAAsB,CAAA,GACrC,KAAA,QAAQ,IACR,KAAS,QAAQ,cACD,KAAA,aAA4C,MAE/D,KAAQ,kBAAkB;AAAA,EAAA;AAAA,EAE3B,YAAoB;AAC1B,WAAK,KAAK,OAAO,SACV,KAAK,MAAM,KAAK,OAAO,OAAO,CAACC,GAAGC,MAAOD,IAAKC,EAAG,SAASA,EAAG,OAAO,OAAQ,KAAK,CAAC,IAAI,KAAK,OAAO,MAAM,IAD/E;AAAA,EAElC;AAAA,EAES,SAAS;AAChB,WAAK,KAAK,OAAO,SAEVC;AAAA,oDACyC,KAAK,KAAK,GAAG,KAAK,QAAQ,OAAO,KAAK,QAAQ,EAAE;AAAA;AAAA;AAAA,yCAG3D,KAAK,KAAK;AAAA,4CACP,KAAK,OAAO,MAAM,cAAc,KAAK,WAAW;AAAA;AAAA,YAEhF,KAAK,QAAQA,6BAAgC,KAAK,MAAM,OAAO,CAAC,CAAC,oCAAoC,KAAK,KAAK,YAAYC,CAAO;AAAA;AAAA;AAAA;AAAA,YAIlI,KAAK,OAAO,IAAI,CAAAH,MAAK;AACrB,YAAMI,IAAMJ,EAAE,OAAO,KACfK,IAAM,KAAK,IAAKL,EAAE,QAAQI,IAAO,KAAK,GAAG,GACzCE,IAAQ,KAAK,aAAaN,EAAE,MAAM;AAExC,aAAOE;AAAA;AAAA,yBAEM,MAAM;AAAE,aAAK,kBAAkB,KAAK,oBAAoBF,EAAE,SAAS,KAAKA,EAAE,QAAQ,KAAK,cAAc,IAAI,YAAY,wBAAwB,EAAE,SAAS,IAAM,UAAU,IAAM,QAAQ,EAAE,QAAQA,EAAE,OAAA,EAAO,CAAG,CAAC;AAAA,MAAG,CAAC;AAAA,2BAC/M,CAAC,MAAqB;AAAE,SAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SAAO,EAAE,eAAA,GAAkB,KAAK,kBAAkB,KAAK,oBAAoBA,EAAE,SAAS,KAAKA,EAAE;AAAA,MAAU,CAAC;AAAA;AAAA,+CAE/IA,EAAE,MAAM;AAAA,+CACRA,EAAE,KAAK;AAAA,oBAClCM,MAAU,SAAYJ;AAAA,gDACMI,KAAS,IAAI,aAAa,YAAY,KAAKA,KAAS,IAAI,MAAM,EAAE,GAAGA,CAAK;AAAA,sBAClGH,CAAO;AAAA;AAAA;AAAA,2DAG8BE,CAAG;AAAA;AAAA,kBAE5C,KAAK,oBAAoBL,EAAE,UAAUA,EAAE,cAAcE;AAAA,oDACnBF,EAAE,WAAW;AAAA,oBAC7CG,CAAO;AAAA;AAAA;AAAA,IAGjB,CAAC,CAAC;AAAA;AAAA;AAAA,QArCwBD;AAAA,EAyClC;AACF;AA9KaJ,EACK,SAAS,CAACS,GAAWC,GAAeC;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,GAmHnD;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GAtHhBb,EAsHkB,WAAA,WAAA,CAAA;AACFY,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAvHdb,EAuHgB,WAAA,UAAA,CAAA;AACfY,EAAA;AAAA,EAAXC,EAAA;AAAS,GAxHCb,EAwHC,WAAA,SAAA,CAAA;AACSY,EAAA;AAAA,EAApBC,EAAA;AAAS,GAzHCb,EAyHU,WAAA,SAAA,CAAA;AACOY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1Hfb,EA0HiB,WAAA,cAAA,CAAA;AAEXY,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA5HId,EA4HM,WAAA,mBAAA,CAAA;AA5HNA,IAANY,EAAA;AAAA,EADNG,EAAc,mBAAmB;AAAA,GACrBf,CAAA;"}

package/dist/components/ai-feature-flag/ai-feature-flag.d.ts

@@ -0,0 +1,43 @@
+import { LitElement } from 'lit';
+export type FeatureFlagType = 'release' | 'experiment' | 'kill-switch' | 'operational';
+export interface FeatureFlag {
+    id: string;
+    name: string;
+    description: string;
+    enabled: boolean;
+    /** Optional flag classification — drives badge color. */
+    type?: FeatureFlagType;
+    /** Per-flag environment label (overrides the panel's environment). */
+    environment?: string;
+    /** Rollout percentage 0-100. Renders a mini bar + label when set. */
+    rollout?: number;
+    /** ISO date or epoch ms — rendered as relative time. */
+    lastModified?: string | number;
+    /** Toggle-pending state. */
+    loading?: boolean;
+    /** Locked / read-only flag. */
+    disabled?: boolean;
+}
+export declare class AiFeatureFlag extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    flags: FeatureFlag[];
+    environment: string;
+    private _search;
+    private get _filtered();
+    private get _enabled();
+    private get _disabled();
+    private _rolloutClass;
+    private _relativeTime;
+    private _onSearch;
+    private _onToggle;
+    private _onClick;
+    private _renderFlag;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-feature-flag': AiFeatureFlag;
+    }
+}
+//# sourceMappingURL=ai-feature-flag.d.ts.map

package/dist/components/ai-feature-flag/ai-feature-flag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-feature-flag.d.ts","sourceRoot":"","sources":["../../../src/components/ai-feature-flag/ai-feature-flag.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,2BAA2B,CAAC;AACnC,OAAO,2BAA2B,CAAC;AAEnC,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,YAAY,GAAG,aAAa,GAAG,aAAa,CAAC;AAEvF,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,OAAO,CAAC;IACjB,yDAAyD;IACzD,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,sEAAsE;IACtE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,wDAAwD;IACxD,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,4BAA4B;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AASD,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BA+QnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IACvD,KAAK,EAAE,WAAW,EAAE,CAAM;IACzB,WAAW,SAAgB;IAE9C,OAAO,CAAC,OAAO,CAAM;IAI9B,OAAO,KAAK,SAAS,GAQpB;IAED,OAAO,KAAK,QAAQ,GAAoD;IACxE,OAAO,KAAK,SAAS,GAAqD;IAE1E,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,QAAQ;IAUhB,OAAO,CAAC,WAAW;IA8DV,MAAM;CA0ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}