@cognivo/components 0.8.0

package/dist/components/ai-model-comparison/ai-model-comparison.js

@@ -0,0 +1,321 @@
+import { css as v, LitElement as b, nothing as n, html as t } from "lit";
+import { property as g, customElement as f } from "lit/decorators.js";
+import { h as p, r as h, f as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, l = (e, r, s, c) => {
+  for (var a = c > 1 ? void 0 : c ? y(r, s) : r, o = e.length - 1, i; o >= 0; o--)
+    (i = e[o]) && (a = (c ? i(r, s, a) : i(a)) || a);
+  return c && a && w(r, s, a), a;
+};
+let d = class extends b {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.models = [];
+  }
+  _getMetrics() {
+    const e = /* @__PURE__ */ new Set();
+    for (const r of this.models)
+      for (const s of Object.keys(r.scores)) e.add(s);
+    return Array.from(e);
+  }
+  _bestScore(e) {
+    return Math.max(...this.models.map((r) => r.scores[e] ?? 0));
+  }
+  _scoreTier(e, r) {
+    return e === r && this.models.length > 1 ? "best" : e >= 80 ? "high" : e >= 50 ? "mid" : "low";
+  }
+  _formatCtx(e) {
+    return e >= 1e6 ? `${(e / 1e6).toFixed(0)}M` : e >= 1e3 ? `${(e / 1e3).toFixed(0)}K` : `${e}`;
+  }
+  _select(e) {
+    this.dispatchEvent(new CustomEvent("ai-comparison-select", {
+      detail: { model: e },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    if (!this.models.length) return n;
+    const e = this._getMetrics();
+    return t`
+      <div class="wrapper" role="region" aria-label="Model comparison table">
+        <table>
+          <thead>
+            <tr>
+              <th class="sticky-col"></th>
+              ${this.models.map((r) => t`
+                <th class="model-header" scope="col">
+                  <div class="model-name">${r.name}</div>
+                  <div class="model-provider">${r.provider}</div>
+                </th>
+              `)}
+            </tr>
+          </thead>
+          <tbody>
+            ${e.map((r, s) => {
+      const c = this._bestScore(r);
+      return t`
+                <tr class="data-row">
+                  <td class="metric-label sticky-col" scope="row">${r}</td>
+                  ${this.models.map((a) => {
+        const o = a.scores[r] ?? 0, i = this._scoreTier(o, c), u = `${s * 60}ms`;
+        return t`
+                      <td class="score-cell">
+                        <div class="score-bar-wrapper">
+                          <div class="score-row">
+                            <span class="score-value">${o}</span>
+                            ${i === "best" ? t`<span class="best-pill" aria-label="Best in ${r}">Best</span>` : n}
+                          </div>
+                          <div class="score-bar-track" role="progressbar" aria-valuenow=${o} aria-valuemin="0" aria-valuemax="100" aria-label="${a.name} ${r}">
+                            <div class="score-bar-fill ${i}" style="width: ${o}%; --bar-delay: ${u};"></div>
+                          </div>
+                        </div>
+                      </td>
+                    `;
+      })}
+                </tr>
+              `;
+    })}
+            <tr class="data-row">
+              <td class="metric-label sticky-col">Cost Tier</td>
+              ${this.models.map((r) => t`
+                <td class="meta-cell"><span class="cost-badge">${r.costTier}</span></td>
+              `)}
+            </tr>
+            <tr class="data-row">
+              <td class="metric-label sticky-col">Context Window</td>
+              ${this.models.map((r) => t`
+                <td class="meta-cell">${this._formatCtx(r.contextWindow)}</td>
+              `)}
+            </tr>
+            <tr>
+              <td class="sticky-col"></td>
+              ${this.models.map((r) => t`
+                <td class="meta-cell">
+                  <button class="select-btn" aria-label="Select ${r.name}" @click=${() => this._select(r)}>
+                    Select
+                  </button>
+                </td>
+              `)}
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+};
+d.styles = [p, h, m, v`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+    :host([hidden]) { display: none; }
+
+    .wrapper {
+      overflow-x: auto;
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      background: var(--cg-color-surface-cards-background);
+      box-shadow: var(--cg-elevation-1);
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) .wrapper { border-radius: 0; }
+    :host([rounded="sm"]) .wrapper { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .wrapper { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .wrapper { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) .wrapper { border-radius: var(--cg-border-radius-full); }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: var(--cg-font-size-sm);
+    }
+
+    th, td {
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      text-align: left;
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+
+    /* Hover scoped to data rows only (not header, not action row) */
+    tbody tr.data-row:hover { background: var(--cg-overlay-dark-subtle); }
+
+    th {
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      position: sticky;
+      top: 0;
+      /* Slightly darker than the body — overlay token composited over the
+         solid cards-background so the sticky header stays opaque on scroll. */
+      background:
+        linear-gradient(var(--cg-overlay-dark-subtle), var(--cg-overlay-dark-subtle)),
+        var(--cg-color-surface-cards-background);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      z-index: 1;
+    }
+
+    /* Sticky first column — survives horizontal scroll on narrow viewports */
+    th.sticky-col,
+    td.sticky-col {
+      position: sticky;
+      left: 0;
+      background: var(--cg-color-surface-cards-background);
+      z-index: 2;
+    }
+    thead th.sticky-col {
+      background:
+        linear-gradient(var(--cg-overlay-dark-subtle), var(--cg-overlay-dark-subtle)),
+        var(--cg-color-surface-cards-background);
+      z-index: 3;
+    }
+    tbody tr.data-row:hover td.sticky-col {
+      background: var(--cg-color-surface-cards-hover-background);
+    }
+
+    .model-header {
+      text-align: center;
+      min-width: var(--cg-spacing-128);
+    }
+
+    .model-name {
+      color: var(--cg-color-surface-base-text);
+      font-weight: var(--cg-font-weight-bold);
+      font-size: var(--cg-font-size-sm);
+    }
+
+    .model-provider {
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-xs);
+    }
+
+    .metric-label {
+      color: var(--cg-color-surface-base-text);
+      font-weight: var(--cg-font-weight-semibold);
+      white-space: nowrap;
+    }
+
+    .score-cell {
+      text-align: center;
+      font-variant-numeric: tabular-nums;
+    }
+
+    .score-bar-wrapper {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+    }
+
+    .score-row {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+    }
+
+    .score-bar-track {
+      width: var(--cg-spacing-64);
+      height: var(--cg-spacing-6);
+      background: var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-50);
+      overflow: hidden;
+    }
+
+    .score-bar-fill {
+      height: 100%;
+      width: 0;
+      border-radius: var(--cg-border-radius-50);
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+      transition-delay: var(--bar-delay, 0ms);
+    }
+    .score-bar-fill.low  { background: var(--cg-color-status-error-text-default); }
+    .score-bar-fill.mid  {
+      background: linear-gradient(90deg,
+        var(--cg-color-status-warning-text-default),
+        var(--cg-color-status-success-text-default));
+    }
+    .score-bar-fill.high { background: var(--cg-color-status-success-text-default); }
+    .score-bar-fill.best { background: var(--cg-color-action-primary-background-default); }
+
+    .score-value {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    /* Best-in-metric pill — color-blind-safe + scan-friendly */
+    .best-pill {
+      display: inline-flex;
+      align-items: center;
+      padding: 0 var(--cg-spacing-6);
+      height: var(--cg-spacing-16);
+      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: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+    }
+
+    .meta-cell {
+      text-align: center;
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-xs);
+    }
+
+    .cost-badge {
+      display: inline-block;
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-50);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .select-btn {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-height: var(--cg-spacing-40);
+      margin: var(--cg-spacing-4) auto 0;
+      padding: var(--cg-spacing-8) var(--cg-spacing-16);
+      border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: transparent;
+      color: var(--cg-color-surface-base-text);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      cursor: pointer;
+      font-family: inherit;
+      transition:
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .select-btn:hover {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      border-color: var(--cg-color-action-primary-background-default);
+    }
+    .select-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .select-btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+  `];
+l([
+  g({ reflect: !0 })
+], d.prototype, "rounded", 2);
+l([
+  g({ type: Array })
+], d.prototype, "models", 2);
+d = l([
+  f("ai-model-comparison")
+], d);
+export {
+  d as AiModelComparison
+};
+//# sourceMappingURL=ai-model-comparison.js.map

package/dist/components/ai-model-comparison/ai-model-comparison.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-model-comparison.js","sources":["../../../src/components/ai-model-comparison/ai-model-comparison.ts"],"sourcesContent":["/**\n * @element ai-model-comparison\n * Side-by-side comparison table for AI models. Renders metrics as rows\n * with color-coded score bars, highlights the best score per metric with\n * a \"Best\" badge, sticky first column on overflow, and staggered fade-in.\n *\n * @example\n * ```html\n * <ai-model-comparison .models=${[\n *   { name: 'GPT-4', provider: 'OpenAI', scores: { reasoning: 92, coding: 88 }, costTier: '$$$', contextWindow: 128000 },\n *   { name: 'Claude 3', provider: 'Anthropic', scores: { reasoning: 95, coding: 91 }, costTier: '$$', contextWindow: 200000 }\n * ]}></ai-model-comparison>\n * ```\n *\n * @prop {ComparisonModel[]} models - Array of models with name, provider, scores, costTier, contextWindow\n *\n * @fires {CustomEvent<{model: ComparisonModel}>} ai-comparison-select - When a model's Select button is clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\nexport interface ComparisonModel {\n  name: string;\n  provider: string;\n  scores: Record<string, number>;\n  costTier: string;\n  contextWindow: number;\n}\n\n@customElement('ai-model-comparison')\nexport class AiModelComparison 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    .wrapper {\n      overflow-x: auto;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      background: var(--cg-color-surface-cards-background);\n      box-shadow: var(--cg-elevation-1);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .wrapper { border-radius: 0; }\n    :host([rounded=\"sm\"]) .wrapper { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .wrapper { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .wrapper { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .wrapper { border-radius: var(--cg-border-radius-full); }\n\n    table {\n      width: 100%;\n      border-collapse: collapse;\n      font-size: var(--cg-font-size-sm);\n    }\n\n    th, td {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      text-align: left;\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n\n    /* Hover scoped to data rows only (not header, not action row) */\n    tbody tr.data-row:hover { background: var(--cg-overlay-dark-subtle); }\n\n    th {\n      color: var(--cg-color-surface-container-outlined);\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      position: sticky;\n      top: 0;\n      /* Slightly darker than the body — overlay token composited over the\n         solid cards-background so the sticky header stays opaque on scroll. */\n      background:\n        linear-gradient(var(--cg-overlay-dark-subtle), var(--cg-overlay-dark-subtle)),\n        var(--cg-color-surface-cards-background);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      z-index: 1;\n    }\n\n    /* Sticky first column — survives horizontal scroll on narrow viewports */\n    th.sticky-col,\n    td.sticky-col {\n      position: sticky;\n      left: 0;\n      background: var(--cg-color-surface-cards-background);\n      z-index: 2;\n    }\n    thead th.sticky-col {\n      background:\n        linear-gradient(var(--cg-overlay-dark-subtle), var(--cg-overlay-dark-subtle)),\n        var(--cg-color-surface-cards-background);\n      z-index: 3;\n    }\n    tbody tr.data-row:hover td.sticky-col {\n      background: var(--cg-color-surface-cards-hover-background);\n    }\n\n    .model-header {\n      text-align: center;\n      min-width: var(--cg-spacing-128);\n    }\n\n    .model-name {\n      color: var(--cg-color-surface-base-text);\n      font-weight: var(--cg-font-weight-bold);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    .model-provider {\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    .metric-label {\n      color: var(--cg-color-surface-base-text);\n      font-weight: var(--cg-font-weight-semibold);\n      white-space: nowrap;\n    }\n\n    .score-cell {\n      text-align: center;\n      font-variant-numeric: tabular-nums;\n    }\n\n    .score-bar-wrapper {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n    }\n\n    .score-row {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n    }\n\n    .score-bar-track {\n      width: var(--cg-spacing-64);\n      height: var(--cg-spacing-6);\n      background: var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-50);\n      overflow: hidden;\n    }\n\n    .score-bar-fill {\n      height: 100%;\n      width: 0;\n      border-radius: var(--cg-border-radius-50);\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n      transition-delay: var(--bar-delay, 0ms);\n    }\n    .score-bar-fill.low  { background: var(--cg-color-status-error-text-default); }\n    .score-bar-fill.mid  {\n      background: linear-gradient(90deg,\n        var(--cg-color-status-warning-text-default),\n        var(--cg-color-status-success-text-default));\n    }\n    .score-bar-fill.high { background: var(--cg-color-status-success-text-default); }\n    .score-bar-fill.best { background: var(--cg-color-action-primary-background-default); }\n\n    .score-value {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* Best-in-metric pill — color-blind-safe + scan-friendly */\n    .best-pill {\n      display: inline-flex;\n      align-items: center;\n      padding: 0 var(--cg-spacing-6);\n      height: var(--cg-spacing-16);\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: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n    }\n\n    .meta-cell {\n      text-align: center;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    .cost-badge {\n      display: inline-block;\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\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      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .select-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-height: var(--cg-spacing-40);\n      margin: var(--cg-spacing-4) auto 0;\n      padding: var(--cg-spacing-8) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: transparent;\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer;\n      font-family: inherit;\n      transition:\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .select-btn:hover {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border-color: var(--cg-color-action-primary-background-default);\n    }\n    .select-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .select-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n  `];\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Array }) models: ComparisonModel[] = [];\n\n  private _getMetrics(): string[] {\n    const set = new Set<string>();\n    for (const m of this.models) {\n      for (const k of Object.keys(m.scores)) set.add(k);\n    }\n    return Array.from(set);\n  }\n\n  private _bestScore(metric: string): number {\n    return Math.max(...this.models.map(m => m.scores[metric] ?? 0));\n  }\n\n  private _scoreTier(score: number, best: number): string {\n    if (score === best && this.models.length > 1) return 'best';\n    if (score >= 80) return 'high';\n    if (score >= 50) return 'mid';\n    return 'low';\n  }\n\n  private _formatCtx(n: number): string {\n    if (n >= 1000000) return `${(n / 1000000).toFixed(0)}M`;\n    if (n >= 1000) return `${(n / 1000).toFixed(0)}K`;\n    return `${n}`;\n  }\n\n  private _select(model: ComparisonModel) {\n    this.dispatchEvent(new CustomEvent('ai-comparison-select', {\n      detail: { model },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  override render() {\n    if (!this.models.length) return nothing;\n    const metrics = this._getMetrics();\n\n    return html`\n      <div class=\"wrapper\" role=\"region\" aria-label=\"Model comparison table\">\n        <table>\n          <thead>\n            <tr>\n              <th class=\"sticky-col\"></th>\n              ${this.models.map(m => html`\n                <th class=\"model-header\" scope=\"col\">\n                  <div class=\"model-name\">${m.name}</div>\n                  <div class=\"model-provider\">${m.provider}</div>\n                </th>\n              `)}\n            </tr>\n          </thead>\n          <tbody>\n            ${metrics.map((metric, rowIdx) => {\n              const best = this._bestScore(metric);\n              return html`\n                <tr class=\"data-row\">\n                  <td class=\"metric-label sticky-col\" scope=\"row\">${metric}</td>\n                  ${this.models.map(m => {\n                    const score = m.scores[metric] ?? 0;\n                    const tier = this._scoreTier(score, best);\n                    const delay = `${rowIdx * 60}ms`;\n                    return html`\n                      <td class=\"score-cell\">\n                        <div class=\"score-bar-wrapper\">\n                          <div class=\"score-row\">\n                            <span class=\"score-value\">${score}</span>\n                            ${tier === 'best' ? html`<span class=\"best-pill\" aria-label=\"Best in ${metric}\">Best</span>` : nothing}\n                          </div>\n                          <div class=\"score-bar-track\" role=\"progressbar\" aria-valuenow=${score} aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"${m.name} ${metric}\">\n                            <div class=\"score-bar-fill ${tier}\" style=\"width: ${score}%; --bar-delay: ${delay};\"></div>\n                          </div>\n                        </div>\n                      </td>\n                    `;\n                  })}\n                </tr>\n              `;\n            })}\n            <tr class=\"data-row\">\n              <td class=\"metric-label sticky-col\">Cost Tier</td>\n              ${this.models.map(m => html`\n                <td class=\"meta-cell\"><span class=\"cost-badge\">${m.costTier}</span></td>\n              `)}\n            </tr>\n            <tr class=\"data-row\">\n              <td class=\"metric-label sticky-col\">Context Window</td>\n              ${this.models.map(m => html`\n                <td class=\"meta-cell\">${this._formatCtx(m.contextWindow)}</td>\n              `)}\n            </tr>\n            <tr>\n              <td class=\"sticky-col\"></td>\n              ${this.models.map(m => html`\n                <td class=\"meta-cell\">\n                  <button class=\"select-btn\" aria-label=\"Select ${m.name}\" @click=${() => this._select(m)}>\n                    Select\n                  </button>\n                </td>\n              `)}\n            </tr>\n          </tbody>\n        </table>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-model-comparison': AiModelComparison;\n  }\n}\n"],"names":["AiModelComparison","LitElement","set","m","k","metric","score","best","n","model","nothing","metrics","html","rowIdx","tier","delay","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-model-selector/ai-model-selector.d.ts

@@ -0,0 +1,29 @@
+import { LitElement } from 'lit';
+export interface AIModel {
+    id: string;
+    name: string;
+    provider: string;
+    icon?: string;
+    capabilities?: string[];
+    costTier?: 'free' | 'low' | 'medium' | 'high';
+    description?: string;
+}
+export declare class AiModelSelector extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    models: AIModel[];
+    selected: string;
+    multi: boolean;
+    private _selectedIds;
+    private _activeFilter;
+    private _focusedIndex;
+    updated(changed: Map<string, unknown>): void;
+    private get _allCapabilities();
+    private get _filteredModels();
+    private _handleGridKeydown;
+    private _focusCard;
+    private _handleSelect;
+    private _getCostLabel;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=ai-model-selector.d.ts.map

package/dist/components/ai-model-selector/ai-model-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-model-selector.d.ts","sourceRoot":"","sources":["../../../src/components/ai-model-selector/ai-model-selector.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,OAAO;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BAmFnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC9C,MAAM,EAAE,OAAO,EAAE,CAAM;IACtC,QAAQ,SAAM;IACG,KAAK,UAAS;IAElC,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,aAAa,CAAM;IAC3B,OAAO,CAAC,aAAa,CAAM;IAE3B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAM9C,OAAO,KAAK,gBAAgB,GAI3B;IAED,OAAO,KAAK,eAAe,GAG1B;IAED,OAAO,CAAC,kBAAkB;IAkB1B,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,aAAa;IAcrB,OAAO,CAAC,aAAa;IAQZ,MAAM;CAqChB"}

package/dist/components/ai-model-selector/ai-model-selector.js

@@ -0,0 +1,200 @@
+import { css as v, LitElement as h, html as i, nothing as d } from "lit";
+import { property as l, state as u, customElement as f } from "lit/decorators.js";
+import { h as p, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, s = (e, t, r, c) => {
+  for (var a = c > 1 ? void 0 : c ? _(t, r) : t, n = e.length - 1, g; n >= 0; n--)
+    (g = e[n]) && (a = (c ? g(t, r, a) : g(a)) || a);
+  return c && a && m(t, r, a), a;
+};
+let o = class extends h {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.models = [], this.selected = "", this.multi = !1, this._selectedIds = /* @__PURE__ */ new Set(), this._activeFilter = "", this._focusedIndex = -1;
+  }
+  updated(e) {
+    e.has("selected") && this.selected && (this._selectedIds = /* @__PURE__ */ new Set([this.selected]));
+  }
+  get _allCapabilities() {
+    const e = /* @__PURE__ */ new Set();
+    for (const t of this.models) for (const r of t.capabilities || []) e.add(r);
+    return [...e].sort();
+  }
+  get _filteredModels() {
+    return this._activeFilter ? this.models.filter((e) => e.capabilities?.includes(this._activeFilter)) : this.models;
+  }
+  _handleGridKeydown(e) {
+    const t = this._filteredModels;
+    if (t.length) {
+      if (e.key === "ArrowDown" || e.key === "ArrowRight")
+        e.preventDefault(), this._focusedIndex = this._focusedIndex >= t.length - 1 ? 0 : this._focusedIndex + 1, this._focusCard();
+      else if (e.key === "ArrowUp" || e.key === "ArrowLeft")
+        e.preventDefault(), this._focusedIndex = this._focusedIndex <= 0 ? t.length - 1 : this._focusedIndex - 1, this._focusCard();
+      else if ((e.key === "Enter" || e.key === " ") && this._focusedIndex >= 0) {
+        e.preventDefault();
+        const r = t[this._focusedIndex];
+        r && this._handleSelect(r);
+      }
+    }
+  }
+  _focusCard() {
+    this.updateComplete.then(() => {
+      this.shadowRoot?.querySelectorAll(".model-card")?.[this._focusedIndex]?.focus();
+    });
+  }
+  _handleSelect(e) {
+    this.multi ? (this._selectedIds.has(e.id) ? this._selectedIds.delete(e.id) : this._selectedIds.add(e.id), this._selectedIds = new Set(this._selectedIds)) : this._selectedIds = /* @__PURE__ */ new Set([e.id]), this.dispatchEvent(new CustomEvent("ai-model-select", { bubbles: !0, composed: !0, detail: { selected: [...this._selectedIds], model: e } })), this.multi && this._selectedIds.size === 2 && this.dispatchEvent(new CustomEvent("ai-model-compare", { bubbles: !0, composed: !0, detail: { models: [...this._selectedIds].map((t) => this.models.find((r) => r.id === t)) } }));
+  }
+  _getCostLabel(e) {
+    return e === "free" ? "Free" : e === "low" ? "$" : e === "medium" ? "$$" : e === "high" ? "$$$" : "";
+  }
+  render() {
+    if (!this.models.length) return i`<div class="empty">No models available</div>`;
+    const e = this._allCapabilities, t = this._filteredModels;
+    return i`
+      ${e.length > 0 ? i`
+        <div class="filter-row" role="group" aria-label="Filter by capability">
+          <button class="filter-chip ${this._activeFilter ? "" : "active"}" @click=${() => {
+      this._activeFilter = "";
+    }}>All</button>
+          ${e.map((r) => i`<button class="filter-chip ${this._activeFilter === r ? "active" : ""}" @click=${() => {
+      this._activeFilter = this._activeFilter === r ? "" : r;
+    }}>${r}</button>`)}
+        </div>
+      ` : d}
+
+      <div class="grid" role="listbox" aria-label="Select a model" aria-multiselectable="${this.multi}" @keydown=${this._handleGridKeydown}>
+        ${t.map((r) => i`
+          <div class="model-card ${this._selectedIds.has(r.id) ? "selected" : ""}"
+            role="${this.multi ? "checkbox" : "radio"}" tabindex="0"
+            aria-selected="${this._selectedIds.has(r.id)}"
+            @click=${() => this._handleSelect(r)}>
+            ${this._selectedIds.has(r.id) ? i`<div class="check"><cg-icon name="check" size="sm"></cg-icon></div>` : d}
+            <div class="model-header">
+              ${r.icon ? i`<span class="model-icon">${r.icon}</span>` : d}
+              <div class="model-info">
+                <div class="model-name">${r.name}</div>
+                <div class="model-provider">${r.provider}</div>
+              </div>
+            </div>
+            ${r.description ? i`<div class="model-desc">${r.description}</div>` : d}
+            <div class="model-footer">
+              <div class="caps">${(r.capabilities || []).slice(0, 3).map((c) => i`<cg-badge label="${c}" size="sm"></cg-badge>`)}</div>
+              ${r.costTier ? i`<cg-badge label="${this._getCostLabel(r.costTier)}" variant="${r.costTier === "high" ? "error" : r.costTier === "medium" ? "warning" : "success"}" size="sm"></cg-badge>` : d}
+            </div>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+};
+o.styles = [p, b, v`
+    :host([hidden]) { display: none; }
+
+    /* ── Filter chips ── */
+    .filter-row {
+      display: flex; gap: var(--cg-spacing-6);
+      margin-bottom: var(--cg-spacing-12);
+      padding-bottom: var(--cg-spacing-12);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      flex-wrap: wrap;
+    }
+    .filter-chip {
+      padding: var(--cg-spacing-4) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: transparent; color: var(--cg-color-surface-container-outlined);
+      font: inherit; font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);
+      cursor: pointer; text-transform: capitalize;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .filter-chip:hover { border-color: var(--cg-color-surface-cards-hover-border); color: var(--cg-color-surface-base-text); }
+    .filter-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+    .filter-chip.active { border-color: var(--cg-color-action-primary-background-default); color: var(--cg-color-action-primary-background-default); background: var(--cg-overlay-accent-subtle); }
+
+    /* ── Grid ── */
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+      gap: var(--cg-spacing-12);
+    }
+
+    /* ── Model card ── */
+    .model-card {
+      padding: var(--cg-spacing-16);
+      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);
+      cursor: pointer;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);
+      position: relative;
+    }
+    .model-card:hover { border-color: var(--cg-color-surface-cards-hover-border); background: var(--cg-color-surface-cards-hover-background); }
+    .model-card:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .model-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+    .model-card.selected {
+      border-color: var(--cg-color-action-primary-background-default);
+      background: var(--cg-overlay-accent-subtle);
+    }
+
+    /* ── Check indicator ── */
+    .check {
+      position: absolute; top: var(--cg-spacing-8); right: var(--cg-spacing-8);
+      width: var(--cg-spacing-20); height: var(--cg-spacing-20);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      display: flex; align-items: center; justify-content: center;
+    }
+    .check svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }
+
+    /* ── Card content ── */
+    .model-header {
+      display: flex; align-items: center; gap: var(--cg-spacing-8);
+      margin-bottom: var(--cg-spacing-8);
+    }
+    .model-icon { font-size: var(--cg-font-size-lg); }
+    .model-info { flex: 1; }
+    .model-name { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-surface-base-text); }
+    .model-provider { font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); }
+
+    .model-desc { font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); line-height: var(--cg-line-height-snug); margin-bottom: var(--cg-spacing-8); }
+
+    .model-footer { display: flex; justify-content: space-between; align-items: center; }
+    .caps { display: flex; gap: var(--cg-spacing-4); flex-wrap: wrap; }
+    .model-footer cg-badge { --cg-badge-font-size: var(--cg-font-size-xs); }
+
+    .empty { text-align: center; padding: var(--cg-spacing-48); color: var(--cg-color-surface-container-outlined); font-size: var(--cg-font-size-sm); }
+
+    /* ── Rounded ── */
+    :host([rounded="none"]) .model-card { border-radius: 0; }
+    :host([rounded="sm"]) .model-card { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .model-card { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .model-card { border-radius: var(--cg-border-radius-150); }
+  `];
+s([
+  l({ reflect: !0 })
+], o.prototype, "rounded", 2);
+s([
+  l({ type: Array })
+], o.prototype, "models", 2);
+s([
+  l()
+], o.prototype, "selected", 2);
+s([
+  l({ type: Boolean })
+], o.prototype, "multi", 2);
+s([
+  u()
+], o.prototype, "_selectedIds", 2);
+s([
+  u()
+], o.prototype, "_activeFilter", 2);
+s([
+  u()
+], o.prototype, "_focusedIndex", 2);
+o = s([
+  f("ai-model-selector")
+], o);
+export {
+  o as AiModelSelector
+};
+//# sourceMappingURL=ai-model-selector.js.map

package/dist/components/ai-model-selector/ai-model-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-model-selector.js","sources":["../../../src/components/ai-model-selector/ai-model-selector.ts"],"sourcesContent":["/**\n * @element ai-model-selector\n * Card grid for picking AI models. Single or multi-select with capability filters.\n *\n * @fires {CustomEvent<{selected: string[], model: AIModel}>} ai-model-select\n * @fires {CustomEvent<{models: AIModel[]}>} ai-model-compare - When 2 models selected in multi mode\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 AIModel {\n  id: string;\n  name: string;\n  provider: string;\n  icon?: string;\n  capabilities?: string[];\n  costTier?: 'free' | 'low' | 'medium' | 'high';\n  description?: string;\n}\n\n@customElement('ai-model-selector')\nexport class AiModelSelector extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host([hidden]) { display: none; }\n\n    /* ── Filter chips ── */\n    .filter-row {\n      display: flex; gap: var(--cg-spacing-6);\n      margin-bottom: var(--cg-spacing-12);\n      padding-bottom: var(--cg-spacing-12);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      flex-wrap: wrap;\n    }\n    .filter-chip {\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: transparent; color: var(--cg-color-surface-container-outlined);\n      font: inherit; font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n      cursor: pointer; text-transform: capitalize;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .filter-chip:hover { border-color: var(--cg-color-surface-cards-hover-border); color: var(--cg-color-surface-base-text); }\n    .filter-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n    .filter-chip.active { border-color: var(--cg-color-action-primary-background-default); color: var(--cg-color-action-primary-background-default); background: var(--cg-overlay-accent-subtle); }\n\n    /* ── Grid ── */\n    .grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n      gap: var(--cg-spacing-12);\n    }\n\n    /* ── Model card ── */\n    .model-card {\n      padding: var(--cg-spacing-16);\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      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out);\n      position: relative;\n    }\n    .model-card:hover { border-color: var(--cg-color-surface-cards-hover-border); background: var(--cg-color-surface-cards-hover-background); }\n    .model-card:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .model-card:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n    .model-card.selected {\n      border-color: var(--cg-color-action-primary-background-default);\n      background: var(--cg-overlay-accent-subtle);\n    }\n\n    /* ── Check indicator ── */\n    .check {\n      position: absolute; top: var(--cg-spacing-8); right: var(--cg-spacing-8);\n      width: var(--cg-spacing-20); height: var(--cg-spacing-20);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      display: flex; align-items: center; justify-content: center;\n    }\n    .check svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n\n    /* ── Card content ── */\n    .model-header {\n      display: flex; align-items: center; gap: var(--cg-spacing-8);\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .model-icon { font-size: var(--cg-font-size-lg); }\n    .model-info { flex: 1; }\n    .model-name { font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold); color: var(--cg-color-surface-base-text); }\n    .model-provider { font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); }\n\n    .model-desc { font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); line-height: var(--cg-line-height-snug); margin-bottom: var(--cg-spacing-8); }\n\n    .model-footer { display: flex; justify-content: space-between; align-items: center; }\n    .caps { display: flex; gap: var(--cg-spacing-4); flex-wrap: wrap; }\n    .model-footer cg-badge { --cg-badge-font-size: var(--cg-font-size-xs); }\n\n    .empty { text-align: center; padding: var(--cg-spacing-48); color: var(--cg-color-surface-container-outlined); font-size: var(--cg-font-size-sm); }\n\n    /* ── Rounded ── */\n    :host([rounded=\"none\"]) .model-card { border-radius: 0; }\n    :host([rounded=\"sm\"]) .model-card { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .model-card { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .model-card { border-radius: var(--cg-border-radius-150); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Array }) models: AIModel[] = [];\n  @property() selected = '';\n  @property({ type: Boolean }) multi = false;\n\n  @state() private _selectedIds = new Set<string>();\n  @state() private _activeFilter = '';\n  @state() private _focusedIndex = -1;\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('selected') && this.selected) {\n      this._selectedIds = new Set([this.selected]);\n    }\n  }\n\n  private get _allCapabilities(): string[] {\n    const caps = new Set<string>();\n    for (const m of this.models) for (const c of m.capabilities || []) caps.add(c);\n    return [...caps].sort();\n  }\n\n  private get _filteredModels(): AIModel[] {\n    if (!this._activeFilter) return this.models;\n    return this.models.filter(m => m.capabilities?.includes(this._activeFilter));\n  }\n\n  private _handleGridKeydown(e: KeyboardEvent) {\n    const models = this._filteredModels;\n    if (!models.length) return;\n    if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {\n      e.preventDefault();\n      this._focusedIndex = this._focusedIndex >= models.length - 1 ? 0 : this._focusedIndex + 1;\n      this._focusCard();\n    } else if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {\n      e.preventDefault();\n      this._focusedIndex = this._focusedIndex <= 0 ? models.length - 1 : this._focusedIndex - 1;\n      this._focusCard();\n    } else if ((e.key === 'Enter' || e.key === ' ') && this._focusedIndex >= 0) {\n      e.preventDefault();\n      const model = models[this._focusedIndex];\n      if (model) this._handleSelect(model);\n    }\n  }\n\n  private _focusCard() {\n    this.updateComplete.then(() => {\n      const cards = this.shadowRoot?.querySelectorAll('.model-card') as NodeListOf<HTMLElement>;\n      cards?.[this._focusedIndex]?.focus();\n    });\n  }\n\n  private _handleSelect(model: AIModel) {\n    if (this.multi) {\n      if (this._selectedIds.has(model.id)) this._selectedIds.delete(model.id);\n      else this._selectedIds.add(model.id);\n      this._selectedIds = new Set(this._selectedIds);\n    } else {\n      this._selectedIds = new Set([model.id]);\n    }\n    this.dispatchEvent(new CustomEvent('ai-model-select', { bubbles: true, composed: true, detail: { selected: [...this._selectedIds], model } }));\n    if (this.multi && this._selectedIds.size === 2) {\n      this.dispatchEvent(new CustomEvent('ai-model-compare', { bubbles: true, composed: true, detail: { models: [...this._selectedIds].map(id => this.models.find(m => m.id === id)) } }));\n    }\n  }\n\n  private _getCostLabel(tier?: string): string {\n    if (tier === 'free') return 'Free';\n    if (tier === 'low') return '$';\n    if (tier === 'medium') return '$$';\n    if (tier === 'high') return '$$$';\n    return '';\n  }\n\n  override render() {\n    if (!this.models.length) return html`<div class=\"empty\">No models available</div>`;\n    const caps = this._allCapabilities;\n    const filtered = this._filteredModels;\n\n    return html`\n      ${caps.length > 0 ? html`\n        <div class=\"filter-row\" role=\"group\" aria-label=\"Filter by capability\">\n          <button class=\"filter-chip ${!this._activeFilter ? 'active' : ''}\" @click=${() => { this._activeFilter = ''; }}>All</button>\n          ${caps.map(c => html`<button class=\"filter-chip ${this._activeFilter === c ? 'active' : ''}\" @click=${() => { this._activeFilter = this._activeFilter === c ? '' : c; }}>${c}</button>`)}\n        </div>\n      ` : nothing}\n\n      <div class=\"grid\" role=\"listbox\" aria-label=\"Select a model\" aria-multiselectable=\"${this.multi}\" @keydown=${this._handleGridKeydown}>\n        ${filtered.map(m => html`\n          <div class=\"model-card ${this._selectedIds.has(m.id) ? 'selected' : ''}\"\n            role=\"${this.multi ? 'checkbox' : 'radio'}\" tabindex=\"0\"\n            aria-selected=\"${this._selectedIds.has(m.id)}\"\n            @click=${() => this._handleSelect(m)}>\n            ${this._selectedIds.has(m.id) ? html`<div class=\"check\"><cg-icon name=\"check\" size=\"sm\"></cg-icon></div>` : nothing}\n            <div class=\"model-header\">\n              ${m.icon ? html`<span class=\"model-icon\">${m.icon}</span>` : nothing}\n              <div class=\"model-info\">\n                <div class=\"model-name\">${m.name}</div>\n                <div class=\"model-provider\">${m.provider}</div>\n              </div>\n            </div>\n            ${m.description ? html`<div class=\"model-desc\">${m.description}</div>` : nothing}\n            <div class=\"model-footer\">\n              <div class=\"caps\">${(m.capabilities || []).slice(0, 3).map(c => html`<cg-badge label=\"${c}\" size=\"sm\"></cg-badge>`)}</div>\n              ${m.costTier ? html`<cg-badge label=\"${this._getCostLabel(m.costTier)}\" variant=\"${m.costTier === 'high' ? 'error' : m.costTier === 'medium' ? 'warning' : 'success'}\" size=\"sm\"></cg-badge>` : nothing}\n            </div>\n          </div>\n        `)}\n      </div>\n    `;\n  }\n}\n"],"names":["AiModelSelector","LitElement","changed","caps","m","c","models","model","id","tier","html","filtered","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}