@cognivo/components 0.8.0 → 0.8.2

package/dist/components/ai-memory-panel/ai-memory-panel.js

@@ -1,12 +1,12 @@
-import { css as p, LitElement as v, nothing as u, html as c } from "lit";
+import { css as v, LitElement as p, nothing as u, html as c } from "lit";
 import { property as n, state as g, customElement as m } from "lit/decorators.js";
-import { h, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h, r as b } from "../../chunks/premium.css-DHekUEUt.js";
 var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (e, r, i, s) => {
   for (var o = s > 1 ? void 0 : s ? y(r, i) : r, d = e.length - 1, l; d >= 0; d--)
     (l = e[d]) && (o = (s ? l(r, i, o) : l(o)) || o);
   return s && o && f(r, i, o), o;
 };
-let t = class extends v {
+let t = class extends p {
   constructor() {
     super(...arguments), this.variant = "default", this.rounded = "md", this.shortTerm = [], this.longTerm = [], this.searchable = !0, this._activeTab = "short", this._search = "";
   }
@@ -78,7 +78,7 @@ let t = class extends v {
     `;
   }
 };
-t.styles = [h, b, p`
+t.styles = [h, b, v`
 
     /* ── Default variant — bordered panel ── */
     .panel {
@@ -124,7 +124,7 @@ t.styles = [h, b, p`
     .tab-count {
       font-size: var(--cg-font-size-xs);
       margin-left: var(--cg-spacing-4);
-      opacity: 0.5;
+      opacity: var(--cg-opacity-50);
     }
 
     /* ── Search ── */
@@ -135,7 +135,7 @@ t.styles = [h, b, p`
       border-radius: var(--cg-border-radius-100);
       border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
       background: transparent; color: var(--cg-color-surface-base-text);
-      font: inherit; font-size: var(--cg-font-size-xs); outline: none;
+      font: inherit; font-size: var(--cg-font-size-sm); outline: none;
     }
     .search-input:focus { border-color: var(--cg-color-input-border-focus); }
     .search-input::placeholder { color: var(--cg-color-surface-container-outlined); }
@@ -193,7 +193,7 @@ t.styles = [h, b, p`
     }
     .mem-btn svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }
     .mem-btn:hover { color: var(--cg-color-surface-base-text); }
-    .mem-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); opacity: 1; }
+    .mem-btn:focus-visible { outline: none; box-shadow: 0 0 0 var(--cg-focus-ring-width) var(--cg-overlay-accent-strong); opacity: 1; }
     .mem-btn.pinned-btn { color: var(--cg-color-action-primary-background-default); opacity: 1; }
 
     .empty {

package/dist/components/ai-memory-panel/ai-memory-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-memory-panel.js","sources":["../../../src/components/ai-memory-panel/ai-memory-panel.ts"],"sourcesContent":["/**\n * @element ai-memory-panel\n * Agent memory viewer. Three variants: default (full panel), compact (sidebar), inline (no container).\n *\n * @fires {CustomEvent<{id: string, type: string}>} ai-memory-delete\n * @fires {CustomEvent<{id: string, pinned: boolean}>} ai-memory-pin\n * @fires {CustomEvent<{query: string}>} ai-memory-search\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 Memory {\n  id: string;\n  content: string;\n  type: 'fact' | 'preference' | 'instruction' | 'context';\n  timestamp: number;\n  relevance?: number;\n  pinned?: boolean;\n}\n\n@customElement('ai-memory-panel')\nexport class AiMemoryPanel extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n\n    /* ── Default variant — bordered panel ── */\n    .panel {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      overflow: hidden;\n    }\n\n    /* ── Rounded ── */\n    :host([rounded=\"none\"]) .panel { border-radius: 0; }\n    :host([rounded=\"sm\"]) .panel { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .panel { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .panel { border-radius: var(--cg-border-radius-150); }\n\n    /* ── Inline variant — no container ── */\n    :host([variant=\"inline\"]) .panel {\n      background: transparent;\n      border: none;\n      border-radius: 0;\n    }\n\n    /* ── Tabs ── */\n    .tabs {\n      display: flex;\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .tab {\n      flex: 1; padding: var(--cg-spacing-16) var(--cg-spacing-20); text-align: center;\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-outlined);\n      background: none; border: none;\n      border-bottom: var(--cg-border-width-100) solid transparent;\n      cursor: pointer; font-family: inherit;\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .tab:hover { color: var(--cg-color-surface-base-text); }\n    .tab.active {\n      color: var(--cg-color-action-primary-background-default);\n      border-bottom-color: var(--cg-color-action-primary-background-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .tab-count {\n      font-size: var(--cg-font-size-xs);\n      margin-left: var(--cg-spacing-4);\n      opacity: 0.5;\n    }\n\n    /* ── Search ── */\n    .search-row { padding: var(--cg-spacing-16) var(--cg-spacing-20); }\n    .search-input {\n      width: 100%; box-sizing: border-box;\n      padding: var(--cg-spacing-12) 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-divider);\n      background: transparent; color: var(--cg-color-surface-base-text);\n      font: inherit; font-size: var(--cg-font-size-xs); outline: none;\n    }\n    .search-input:focus { border-color: var(--cg-color-input-border-focus); }\n    .search-input::placeholder { color: var(--cg-color-surface-container-outlined); }\n\n    /* ── Memory list ── */\n    .memories { max-height: 320px; overflow-y: auto; padding: var(--cg-spacing-12) 0; }\n\n    .memory {\n      display: flex; flex-direction: column; gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-radius: var(--cg-border-radius-50);\n      margin: 0 var(--cg-spacing-8);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      position: relative;\n    }\n    .memory:hover { background: var(--cg-overlay-dark-subtle); }\n    .memory.pinned { background: var(--cg-overlay-accent-subtle); }\n\n    .memory-row {\n      display: flex; align-items: center; gap: var(--cg-spacing-12);\n    }\n\n    .memory-type {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-action-primary-background-default);\n      font-weight: var(--cg-font-weight-medium);\n      flex-shrink: 0;\n    }\n\n    .memory-meta {\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);\n      margin-left: auto; flex-shrink: 0;\n    }\n\n    .memory-content {\n      font-size: var(--cg-font-size-sm); color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    /* ── Actions — show on hover ── */\n    .memory-actions {\n      position: absolute; top: var(--cg-spacing-8); right: var(--cg-spacing-16);\n      display: flex; gap: var(--cg-spacing-2);\n      opacity: 0; transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .memory:hover .memory-actions { opacity: 1; }\n\n    .mem-btn {\n      width: var(--cg-spacing-20); height: var(--cg-spacing-20);\n      background: transparent; border: none;\n      color: var(--cg-color-surface-container-outlined); cursor: pointer;\n      display: flex; align-items: center; justify-content: center; padding: 0;\n      border-radius: var(--cg-border-radius-50);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .mem-btn svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n    .mem-btn:hover { color: var(--cg-color-surface-base-text); }\n    .mem-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); opacity: 1; }\n    .mem-btn.pinned-btn { color: var(--cg-color-action-primary-background-default); opacity: 1; }\n\n    .empty {\n      padding: var(--cg-spacing-24) var(--cg-spacing-20);\n      text-align: center; color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    /* ── Compact variant ── */\n    :host([variant=\"compact\"]) .search-row { display: none; }\n    :host([variant=\"compact\"]) .memory { padding: var(--cg-spacing-6) var(--cg-spacing-12); }\n    :host([variant=\"compact\"]) .memory-content { font-size: var(--cg-font-size-xs); }\n    :host([variant=\"compact\"]) .memory-type { display: none; }\n  `];\n\n  @property({ reflect: true }) variant: 'default' | 'compact' | 'inline' = 'default';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Array }) shortTerm: Memory[] = [];\n  @property({ type: Array }) longTerm: Memory[] = [];\n  @property({ type: Boolean }) searchable = true;\n\n  @state() private _activeTab: 'short' | 'long' = 'short';\n  @state() private _search = '';\n  private _searchTimer?: ReturnType<typeof setTimeout>;\n\n  private get _activeMemories(): Memory[] {\n    const list = this._activeTab === 'short' ? this.shortTerm : this.longTerm;\n    if (!this._search) return list;\n    const q = this._search.toLowerCase();\n    return list.filter(m => m.content.toLowerCase().includes(q));\n  }\n\n  private _formatTime(ts: number): string {\n    const diff = Date.now() - ts;\n    if (diff < 60000) return 'just now';\n    if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;\n    if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;\n    return new Date(ts).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });\n  }\n\n  override render() {\n    const memories = this._activeMemories;\n\n    return html`\n      <div class=\"panel\" role=\"region\" aria-label=\"Agent memory\">\n        <div class=\"tabs\">\n          <button class=\"tab ${this._activeTab === 'short' ? 'active' : ''}\" @click=${() => { this._activeTab = 'short'; }}>\n            Short-term<span class=\"tab-count\">${this.shortTerm.length}</span>\n          </button>\n          <button class=\"tab ${this._activeTab === 'long' ? 'active' : ''}\" @click=${() => { this._activeTab = 'long'; }}>\n            Long-term<span class=\"tab-count\">${this.longTerm.length}</span>\n          </button>\n        </div>\n\n        ${this.searchable && this.variant !== 'compact' ? html`\n          <div class=\"search-row\">\n            <input class=\"search-input\" type=\"text\" placeholder=\"Search...\"\n              .value=${this._search}\n              @input=${(e: Event) => {\n                this._search = (e.target as HTMLInputElement).value;\n                if (this._searchTimer) clearTimeout(this._searchTimer);\n                this._searchTimer = setTimeout(() => {\n                  this.dispatchEvent(new CustomEvent('ai-memory-search', { bubbles: true, composed: true, detail: { query: this._search } }));\n                }, 250);\n              }} />\n          </div>\n        ` : nothing}\n\n        <div class=\"memories\">\n          ${memories.length === 0 ? html`\n            <div class=\"empty\">${this._search ? 'No matches' : 'No memories yet'}</div>\n          ` : memories.map(m => html`\n            <div class=\"memory ${m.pinned ? 'pinned' : ''}\">\n              <div class=\"memory-row\">\n                <span class=\"memory-type\">${m.type}</span>\n                <span class=\"memory-meta\">${this._formatTime(m.timestamp)}</span>\n              </div>\n              <div class=\"memory-content\">${m.content}</div>\n              <div class=\"memory-actions\">\n                <button class=\"mem-btn ${m.pinned ? 'pinned-btn' : ''}\"\n                  @click=${() => this.dispatchEvent(new CustomEvent('ai-memory-pin', { bubbles: true, composed: true, detail: { id: m.id, pinned: !m.pinned } }))}\n                  aria-label=\"${m.pinned ? 'Unpin' : 'Pin'}\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"${m.pinned ? 'currentColor' : 'none'}\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 17v5m-4-9.26a2 2 0 01.88-1.66L12 9l3.12 2.08a2 2 0 01.88 1.66V15H8v-2.26zM9 9V4a1 1 0 011-1h4a1 1 0 011 1v5\"/></svg>\n                </button>\n                <button class=\"mem-btn\"\n                  @click=${() => this.dispatchEvent(new CustomEvent('ai-memory-delete', { bubbles: true, composed: true, detail: { id: m.id, type: this._activeTab } }))}\n                  aria-label=\"Delete\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\n                </button>\n              </div>\n            </div>\n          `)}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiMemoryPanel","LitElement","list","q","m","ts","diff","memories","html","e","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-memory-panel.js","sources":["../../../src/components/ai-memory-panel/ai-memory-panel.ts"],"sourcesContent":["/**\n * @element ai-memory-panel\n * Agent memory viewer. Three variants: default (full panel), compact (sidebar), inline (no container).\n *\n * @fires {CustomEvent<{id: string, type: string}>} ai-memory-delete\n * @fires {CustomEvent<{id: string, pinned: boolean}>} ai-memory-pin\n * @fires {CustomEvent<{query: string}>} ai-memory-search\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 Memory {\n  id: string;\n  content: string;\n  type: 'fact' | 'preference' | 'instruction' | 'context';\n  timestamp: number;\n  relevance?: number;\n  pinned?: boolean;\n}\n\n@customElement('ai-memory-panel')\nexport class AiMemoryPanel extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n\n    /* ── Default variant — bordered panel ── */\n    .panel {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      overflow: hidden;\n    }\n\n    /* ── Rounded ── */\n    :host([rounded=\"none\"]) .panel { border-radius: 0; }\n    :host([rounded=\"sm\"]) .panel { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .panel { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .panel { border-radius: var(--cg-border-radius-150); }\n\n    /* ── Inline variant — no container ── */\n    :host([variant=\"inline\"]) .panel {\n      background: transparent;\n      border: none;\n      border-radius: 0;\n    }\n\n    /* ── Tabs ── */\n    .tabs {\n      display: flex;\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .tab {\n      flex: 1; padding: var(--cg-spacing-16) var(--cg-spacing-20); text-align: center;\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-outlined);\n      background: none; border: none;\n      border-bottom: var(--cg-border-width-100) solid transparent;\n      cursor: pointer; font-family: inherit;\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .tab:hover { color: var(--cg-color-surface-base-text); }\n    .tab.active {\n      color: var(--cg-color-action-primary-background-default);\n      border-bottom-color: var(--cg-color-action-primary-background-default);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .tab-count {\n      font-size: var(--cg-font-size-xs);\n      margin-left: var(--cg-spacing-4);\n      opacity: var(--cg-opacity-50);\n    }\n\n    /* ── Search ── */\n    .search-row { padding: var(--cg-spacing-16) var(--cg-spacing-20); }\n    .search-input {\n      width: 100%; box-sizing: border-box;\n      padding: var(--cg-spacing-12) 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-divider);\n      background: transparent; color: var(--cg-color-surface-base-text);\n      font: inherit; font-size: var(--cg-font-size-sm); outline: none;\n    }\n    .search-input:focus { border-color: var(--cg-color-input-border-focus); }\n    .search-input::placeholder { color: var(--cg-color-surface-container-outlined); }\n\n    /* ── Memory list ── */\n    .memories { max-height: 320px; overflow-y: auto; padding: var(--cg-spacing-12) 0; }\n\n    .memory {\n      display: flex; flex-direction: column; gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-radius: var(--cg-border-radius-50);\n      margin: 0 var(--cg-spacing-8);\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      position: relative;\n    }\n    .memory:hover { background: var(--cg-overlay-dark-subtle); }\n    .memory.pinned { background: var(--cg-overlay-accent-subtle); }\n\n    .memory-row {\n      display: flex; align-items: center; gap: var(--cg-spacing-12);\n    }\n\n    .memory-type {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-action-primary-background-default);\n      font-weight: var(--cg-font-weight-medium);\n      flex-shrink: 0;\n    }\n\n    .memory-meta {\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);\n      margin-left: auto; flex-shrink: 0;\n    }\n\n    .memory-content {\n      font-size: var(--cg-font-size-sm); color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    /* ── Actions — show on hover ── */\n    .memory-actions {\n      position: absolute; top: var(--cg-spacing-8); right: var(--cg-spacing-16);\n      display: flex; gap: var(--cg-spacing-2);\n      opacity: 0; transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .memory:hover .memory-actions { opacity: 1; }\n\n    .mem-btn {\n      width: var(--cg-spacing-20); height: var(--cg-spacing-20);\n      background: transparent; border: none;\n      color: var(--cg-color-surface-container-outlined); cursor: pointer;\n      display: flex; align-items: center; justify-content: center; padding: 0;\n      border-radius: var(--cg-border-radius-50);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .mem-btn svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n    .mem-btn:hover { color: var(--cg-color-surface-base-text); }\n    .mem-btn:focus-visible { outline: none; box-shadow: 0 0 0 var(--cg-focus-ring-width) var(--cg-overlay-accent-strong); opacity: 1; }\n    .mem-btn.pinned-btn { color: var(--cg-color-action-primary-background-default); opacity: 1; }\n\n    .empty {\n      padding: var(--cg-spacing-24) var(--cg-spacing-20);\n      text-align: center; color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    /* ── Compact variant ── */\n    :host([variant=\"compact\"]) .search-row { display: none; }\n    :host([variant=\"compact\"]) .memory { padding: var(--cg-spacing-6) var(--cg-spacing-12); }\n    :host([variant=\"compact\"]) .memory-content { font-size: var(--cg-font-size-xs); }\n    :host([variant=\"compact\"]) .memory-type { display: none; }\n  `];\n\n  @property({ reflect: true }) variant: 'default' | 'compact' | 'inline' = 'default';\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'md';\n  @property({ type: Array }) shortTerm: Memory[] = [];\n  @property({ type: Array }) longTerm: Memory[] = [];\n  @property({ type: Boolean }) searchable = true;\n\n  @state() private _activeTab: 'short' | 'long' = 'short';\n  @state() private _search = '';\n  private _searchTimer?: ReturnType<typeof setTimeout>;\n\n  private get _activeMemories(): Memory[] {\n    const list = this._activeTab === 'short' ? this.shortTerm : this.longTerm;\n    if (!this._search) return list;\n    const q = this._search.toLowerCase();\n    return list.filter(m => m.content.toLowerCase().includes(q));\n  }\n\n  private _formatTime(ts: number): string {\n    const diff = Date.now() - ts;\n    if (diff < 60000) return 'just now';\n    if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;\n    if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;\n    return new Date(ts).toLocaleDateString('en-US', { month: 'short', day: 'numeric' });\n  }\n\n  override render() {\n    const memories = this._activeMemories;\n\n    return html`\n      <div class=\"panel\" role=\"region\" aria-label=\"Agent memory\">\n        <div class=\"tabs\">\n          <button class=\"tab ${this._activeTab === 'short' ? 'active' : ''}\" @click=${() => { this._activeTab = 'short'; }}>\n            Short-term<span class=\"tab-count\">${this.shortTerm.length}</span>\n          </button>\n          <button class=\"tab ${this._activeTab === 'long' ? 'active' : ''}\" @click=${() => { this._activeTab = 'long'; }}>\n            Long-term<span class=\"tab-count\">${this.longTerm.length}</span>\n          </button>\n        </div>\n\n        ${this.searchable && this.variant !== 'compact' ? html`\n          <div class=\"search-row\">\n            <input class=\"search-input\" type=\"text\" placeholder=\"Search...\"\n              .value=${this._search}\n              @input=${(e: Event) => {\n                this._search = (e.target as HTMLInputElement).value;\n                if (this._searchTimer) clearTimeout(this._searchTimer);\n                this._searchTimer = setTimeout(() => {\n                  this.dispatchEvent(new CustomEvent('ai-memory-search', { bubbles: true, composed: true, detail: { query: this._search } }));\n                }, 250);\n              }} />\n          </div>\n        ` : nothing}\n\n        <div class=\"memories\">\n          ${memories.length === 0 ? html`\n            <div class=\"empty\">${this._search ? 'No matches' : 'No memories yet'}</div>\n          ` : memories.map(m => html`\n            <div class=\"memory ${m.pinned ? 'pinned' : ''}\">\n              <div class=\"memory-row\">\n                <span class=\"memory-type\">${m.type}</span>\n                <span class=\"memory-meta\">${this._formatTime(m.timestamp)}</span>\n              </div>\n              <div class=\"memory-content\">${m.content}</div>\n              <div class=\"memory-actions\">\n                <button class=\"mem-btn ${m.pinned ? 'pinned-btn' : ''}\"\n                  @click=${() => this.dispatchEvent(new CustomEvent('ai-memory-pin', { bubbles: true, composed: true, detail: { id: m.id, pinned: !m.pinned } }))}\n                  aria-label=\"${m.pinned ? 'Unpin' : 'Pin'}\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"${m.pinned ? 'currentColor' : 'none'}\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 17v5m-4-9.26a2 2 0 01.88-1.66L12 9l3.12 2.08a2 2 0 01.88 1.66V15H8v-2.26zM9 9V4a1 1 0 011-1h4a1 1 0 011 1v5\"/></svg>\n                </button>\n                <button class=\"mem-btn\"\n                  @click=${() => this.dispatchEvent(new CustomEvent('ai-memory-delete', { bubbles: true, composed: true, detail: { id: m.id, type: this._activeTab } }))}\n                  aria-label=\"Delete\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\n                </button>\n              </div>\n            </div>\n          `)}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiMemoryPanel","LitElement","list","q","m","ts","diff","memories","html","e","nothing","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 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";
+import { h as p, r as h, f as m } from "../../chunks/premium.css-DHekUEUt.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);
@@ -250,7 +250,7 @@ d.styles = [p, h, m, v`
       padding: 0 var(--cg-spacing-6);
       height: var(--cg-spacing-16);
       border-radius: var(--cg-border-radius-full);
-      font-size: 10px;
+      font-size: var(--cg-font-size-xs);
       font-weight: var(--cg-font-weight-bold);
       letter-spacing: var(--cg-letter-spacing-wide);
       text-transform: uppercase;

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

@@ -1 +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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"}
+{"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: var(--cg-font-size-xs);\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.js

@@ -1,12 +1,12 @@
-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";
+import { css as v, LitElement as f, html as i, nothing as d } from "lit";
+import { property as l, state as u, customElement as h } from "lit/decorators.js";
+import { h as p, r as b } from "../../chunks/premium.css-DHekUEUt.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 {
+let o = class extends f {
   constructor() {
     super(...arguments), this.rounded = "lg", this.models = [], this.selected = "", this.multi = !1, this._selectedIds = /* @__PURE__ */ new Set(), this._activeFilter = "", this._focusedIndex = -1;
   }
@@ -107,7 +107,7 @@ o.styles = [p, b, v`
       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:focus-visible { outline: none; box-shadow: 0 0 0 var(--cg-focus-ring-width) var(--cg-color-focus-ring); }
     .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 ── */
@@ -129,7 +129,7 @@ o.styles = [p, b, v`
     }
     .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:focus-visible { outline: none; box-shadow: 0 0 0 var(--cg-focus-ring-width) var(--cg-color-focus-ring); }
     .model-card.selected {
       border-color: var(--cg-color-action-primary-background-default);
       background: var(--cg-overlay-accent-subtle);
@@ -192,7 +192,7 @@ s([
   u()
 ], o.prototype, "_focusedIndex", 2);
 o = s([
-  f("ai-model-selector")
+  h("ai-model-selector")
 ], o);
 export {
   o as AiModelSelector

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

@@ -1 +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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"}
+{"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 var(--cg-focus-ring-width) var(--cg-color-focus-ring); }\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 var(--cg-focus-ring-width) var(--cg-color-focus-ring); }\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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"}

package/dist/components/ai-notification-center/ai-notification-center.js

@@ -1,13 +1,13 @@
 import { css as p, LitElement as f, nothing as l, html as n } from "lit";
-import { property as g, state as h, customElement as m } from "lit/decorators.js";
-import { h as v, r as b, f as w } from "../../chunks/premium.css-9I4kHrsl.js";
+import { property as g, state as h, customElement as v } from "lit/decorators.js";
+import { h as m, r as b, f as w } from "../../chunks/premium.css-DHekUEUt.js";
 import "../cg-card/cg-card.js";
 import "../cg-text/cg-text.js";
 import "../cg-button/cg-button.js";
-var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (e, t, a, r) => {
-  for (var i = r > 1 ? void 0 : r ? y(t, a) : t, s = e.length - 1, d; s >= 0; s--)
-    (d = e[s]) && (i = (r ? d(t, a, i) : d(i)) || i);
-  return r && i && x(t, a, i), i;
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, c = (e, t, r, a) => {
+  for (var i = a > 1 ? void 0 : a ? y(t, r) : t, s = e.length - 1, d; s >= 0; s--)
+    (d = e[s]) && (i = (a ? d(t, r, i) : d(i)) || i);
+  return a && i && x(t, r, i), i;
 };
 const u = 1440 * 60 * 1e3;
 let o = class extends f {
@@ -16,10 +16,10 @@ let o = class extends f {
   }
   updated(e) {
     if (e.has("notifications")) {
-      const t = new Set(this.notifications.map((a) => a.id));
+      const t = new Set(this.notifications.map((r) => r.id));
       if (this._seenIds.size > 0) {
-        for (const a of t)
-          this._seenIds.has(a) || this._justArrivedIds.add(a);
+        for (const r of t)
+          this._seenIds.has(r) || this._justArrivedIds.add(r);
         this._justArrivedIds.size > 0 && window.setTimeout(() => {
           this._justArrivedIds.clear(), this.requestUpdate();
         }, 1300);
@@ -37,22 +37,22 @@ let o = class extends f {
   }
   _bucketFor(e) {
     if (!e) return "Earlier";
-    const t = Date.now(), a = /* @__PURE__ */ new Date();
-    return a.setHours(0, 0, 0, 0), e >= a.getTime() ? "Today" : e >= a.getTime() - u ? "Yesterday" : e >= t - 7 * u ? "This week" : "Earlier";
+    const t = Date.now(), r = /* @__PURE__ */ new Date();
+    return r.setHours(0, 0, 0, 0), e >= r.getTime() ? "Today" : e >= r.getTime() - u ? "Yesterday" : e >= t - 7 * u ? "This week" : "Earlier";
   }
   get _grouped() {
-    const e = ["Today", "Yesterday", "This week", "Earlier"], t = /* @__PURE__ */ new Map(), a = [...this.notifications].sort((r, i) => this._toMs(i.timestamp) - this._toMs(r.timestamp)).slice(0, this.maxVisible);
-    for (const r of a) {
-      const i = this._bucketFor(this._toMs(r.timestamp));
-      t.has(i) || t.set(i, []), t.get(i).push(r);
+    const e = ["Today", "Yesterday", "This week", "Earlier"], t = /* @__PURE__ */ new Map(), r = [...this.notifications].sort((a, i) => this._toMs(i.timestamp) - this._toMs(a.timestamp)).slice(0, this.maxVisible);
+    for (const a of r) {
+      const i = this._bucketFor(this._toMs(a.timestamp));
+      t.has(i) || t.set(i, []), t.get(i).push(a);
     }
-    return e.filter((r) => t.has(r)).map((r) => [r, t.get(r)]);
+    return e.filter((a) => t.has(a)).map((a) => [a, t.get(a)]);
   }
   _formatTime(e) {
     const t = this._toMs(e);
     if (!t) return String(e);
-    const a = Date.now() - t;
-    return a < 6e4 ? "Just now" : a < 36e5 ? `${Math.floor(a / 6e4)}m ago` : a < 864e5 ? `${Math.floor(a / 36e5)}h ago` : new Date(t).toLocaleDateString(void 0, { month: "short", day: "numeric" });
+    const r = Date.now() - t;
+    return r < 6e4 ? "Just now" : r < 36e5 ? `${Math.floor(r / 6e4)}m ago` : r < 864e5 ? `${Math.floor(r / 36e5)}h ago` : new Date(t).toLocaleDateString(void 0, { month: "short", day: "numeric" });
   }
   _handleClick(e) {
     this.dispatchEvent(new CustomEvent("ai-notification-click", {
@@ -104,10 +104,10 @@ let o = class extends f {
           </slot>
         ` : l}
 
-        ${e.map(([a, r]) => n`
-          <cg-text class="group-label" size="xs" weight="bold" color="muted" role="heading" aria-level="3">${a}</cg-text>
-          <div role="list" aria-label="${a} notifications">
-            ${r.map((i) => n`
+        ${e.map(([r, a]) => n`
+          <cg-text class="group-label" size="xs" weight="bold" color="muted" role="heading" aria-level="3">${r}</cg-text>
+          <div role="list" aria-label="${r} notifications">
+            ${a.map((i) => n`
               <button
                 class="notification ${i.read ? "" : "unread"}"
                 role="listitem"
@@ -135,7 +135,7 @@ let o = class extends f {
     `;
   }
 };
-o.styles = [v, b, w, p`
+o.styles = [m, b, w, p`
     :host {
       animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
       display: block;
@@ -221,7 +221,7 @@ o.styles = [v, b, w, p`
     .notification:active { transform: scale(var(--cg-interaction-press-scale)); }
     .notification:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-color-focus-ring);
     }
 
     /* Left-accent unread indicator (replaces dot + bg) */
@@ -229,7 +229,7 @@ o.styles = [v, b, w, p`
       content: '';
       position: absolute;
       left: 0; top: var(--cg-spacing-12); bottom: var(--cg-spacing-12);
-      width: 2px;
+      width: var(--cg-border-width-100);
       background: var(--cg-color-action-primary-background-default);
       border-radius: var(--cg-border-radius-full);
     }
@@ -295,7 +295,7 @@ o.styles = [v, b, w, p`
     .dismiss-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
     .dismiss-btn:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-color-focus-ring);
     }
 
     /* ── Empty state ── */
@@ -326,7 +326,7 @@ c([
   h()
 ], o.prototype, "_justArrivedIds", 2);
 o = c([
-  m("ai-notification-center")
+  v("ai-notification-center")
 ], o);
 export {
   o as AiNotificationCenter

package/dist/components/ai-notification-center/ai-notification-center.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-notification-center.js","sources":["../../../src/components/ai-notification-center/ai-notification-center.ts"],"sourcesContent":["/**\n * @element ai-notification-center\n * Notification inbox built from design-system primitives (cg-card, cg-text, cg-button).\n * Date-bucketed grouping (Today / Yesterday / This week / Earlier), left-accent unread style,\n * pulse on new arrivals, positive empty state, sr-live unread announcer.\n *\n * @example\n * ```html\n * <ai-notification-center .notifications=${[\n *   { id: '1', title: 'Model updated', message: 'GPT-4 Turbo is now available',\n *     type: 'system', timestamp: Date.now() - 2 * 60 * 1000 }\n * ]}></ai-notification-center>\n * ```\n *\n * @prop {Notification[]} notifications - Notification objects (timestamp = ms epoch or ISO/string)\n * @prop {number} maxVisible - Max notifications to render (default 50)\n *\n * @slot empty - Override the default \"You're all caught up\" empty state\n *\n * @fires {CustomEvent<{id: string, notification: object}>} ai-notification-click\n * @fires {CustomEvent<{id: string}>} ai-notification-dismiss\n * @fires ai-notification-read-all\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-card/cg-card.js';\nimport '../cg-text/cg-text.js';\nimport '../cg-button/cg-button.js';\n\ninterface Notification {\n  id: string;\n  title: string;\n  message: string;\n  type: string;\n  timestamp: string | number;\n  read?: boolean;\n}\n\nconst DAY_MS = 24 * 60 * 60 * 1000;\n\n@customElement('ai-notification-center')\nexport class AiNotificationCenter extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      display: block;\n    }\n    :host([hidden]) { display: none; }\n\n    cg-card { display: block; max-height: 480px; overflow-y: auto; }\n\n    /* sr-only live region */\n    .sr-only {\n      position: absolute;\n      width: 1px; height: 1px;\n      padding: 0; margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    /* ── Header ── */\n    .header-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-12);\n      width: 100%;\n    }\n    .header-left {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n\n    .unread-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: var(--cg-spacing-16);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\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      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* ── Date group label ── */\n    .group-label {\n      padding: var(--cg-spacing-12) 0 var(--cg-spacing-4);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .group-label:first-child { padding-top: 0; }\n\n    /* ── Notification row ── */\n    .notification {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12);\n      min-height: var(--cg-spacing-48);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      border: none;\n      background: transparent;\n      width: 100%;\n      text-align: left;\n      font-family: inherit;\n      color: inherit;\n      position: relative;\n      transition:\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .notification + .notification {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: 0;\n    }\n    .notification:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n    }\n    .notification:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .notification:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    /* Left-accent unread indicator (replaces dot + bg) */\n    .notification.unread::before {\n      content: '';\n      position: absolute;\n      left: 0; top: var(--cg-spacing-12); bottom: var(--cg-spacing-12);\n      width: 2px;\n      background: var(--cg-color-action-primary-background-default);\n      border-radius: var(--cg-border-radius-full);\n    }\n\n    /* Just-arrived pulse */\n    @keyframes arrivalPulse {\n      0%   { background: var(--cg-color-action-primary-background-default); opacity: 0.12; }\n      100% { background: transparent; opacity: 0; }\n    }\n    .notification[data-just-arrived]::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      border-radius: inherit;\n      animation: arrivalPulse 1.2s var(--cg-transition-easing-ease-out) both;\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .notification[data-just-arrived]::after { animation: none; }\n    }\n\n    .notif-body {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n    }\n    .notification.unread .notif-body cg-text[data-role=\"title\"] {\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .notif-message {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      white-space: normal;\n    }\n\n    /* ── Dismiss icon button ── */\n    .dismiss-btn {\n      flex-shrink: 0;\n      background: transparent;\n      border: none;\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      padding: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-50);\n      line-height: 1;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .dismiss-btn:hover {\n      color: var(--cg-color-status-error-text-default);\n      background: var(--cg-color-action-secondary-background-hover);\n    }\n    .dismiss-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .dismiss-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    /* ── Empty state ── */\n    .empty {\n      text-align: center;\n      padding: var(--cg-spacing-32) var(--cg-spacing-16);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n    .empty-icon {\n      color: var(--cg-color-status-success-text-default);\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n    }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Array }) notifications: Notification[] = [];\n  @property({ type: Number, attribute: 'max-visible' }) maxVisible = 50;\n\n  @state() private _justArrivedIds = new Set<string>();\n  private _seenIds = new Set<string>();\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('notifications')) {\n      const currentIds = new Set(this.notifications.map(n => n.id));\n      // Only mark as \"just arrived\" if we've already initialized (not first render)\n      if (this._seenIds.size > 0) {\n        for (const id of currentIds) {\n          if (!this._seenIds.has(id)) this._justArrivedIds.add(id);\n        }\n        if (this._justArrivedIds.size > 0) {\n          // Clear pulse after animation\n          window.setTimeout(() => {\n            this._justArrivedIds.clear();\n            this.requestUpdate();\n          }, 1300);\n        }\n      }\n      this._seenIds = currentIds;\n    }\n  }\n\n  private get _unreadCount(): number {\n    return this.notifications.filter(n => !n.read).length;\n  }\n\n  private _toMs(ts: string | number): number {\n    if (typeof ts === 'number') return ts;\n    const n = Date.parse(ts);\n    return Number.isNaN(n) ? 0 : n;\n  }\n\n  private _bucketFor(ts: number): string {\n    if (!ts) return 'Earlier';\n    const now = Date.now();\n    const startOfToday = new Date(); startOfToday.setHours(0, 0, 0, 0);\n    if (ts >= startOfToday.getTime()) return 'Today';\n    if (ts >= startOfToday.getTime() - DAY_MS) return 'Yesterday';\n    if (ts >= now - 7 * DAY_MS) return 'This week';\n    return 'Earlier';\n  }\n\n  private get _grouped(): Array<[string, Notification[]]> {\n    const order = ['Today', 'Yesterday', 'This week', 'Earlier'];\n    const map = new Map<string, Notification[]>();\n    const visible = [...this.notifications]\n      .sort((a, b) => this._toMs(b.timestamp) - this._toMs(a.timestamp))\n      .slice(0, this.maxVisible);\n    for (const n of visible) {\n      const bucket = this._bucketFor(this._toMs(n.timestamp));\n      if (!map.has(bucket)) map.set(bucket, []);\n      map.get(bucket)!.push(n);\n    }\n    return order.filter(k => map.has(k)).map(k => [k, map.get(k)!]);\n  }\n\n  private _formatTime(ts: string | number): string {\n    const ms = this._toMs(ts);\n    if (!ms) return String(ts);\n    const diff = Date.now() - ms;\n    if (diff < 60_000) return 'Just now';\n    if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;\n    if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;\n    return new Date(ms).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });\n  }\n\n  private _handleClick(notification: Notification) {\n    this.dispatchEvent(new CustomEvent('ai-notification-click', {\n      detail: { id: notification.id, notification },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _handleDismiss(e: Event, notification: Notification) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-notification-dismiss', {\n      detail: { id: notification.id },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _handleReadAll() {\n    this.dispatchEvent(new CustomEvent('ai-notification-read-all', {\n      bubbles: true, composed: true,\n    }));\n  }\n\n  override render() {\n    const groups = this._grouped;\n    const unread = this._unreadCount;\n\n    return html`\n      <cg-card variant=\"outlined\" padding=\"md\" rounded=${this.rounded} role=\"region\" aria-label=\"Notification center\">\n        <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n          ${unread > 0 ? `${unread} unread notifications` : 'No unread notifications'}\n        </div>\n\n        <div slot=\"header\" class=\"header-row\">\n          <div class=\"header-left\">\n            <cg-text size=\"sm\" weight=\"semibold\">Notifications</cg-text>\n            ${unread > 0 ? html`<span class=\"unread-badge\" aria-label=\"${unread} unread\">${unread}</span>` : nothing}\n          </div>\n          ${unread > 0 ? html`\n            <cg-button variant=\"tertiary\" size=\"sm\" @click=${this._handleReadAll}>Mark all read</cg-button>\n          ` : nothing}\n        </div>\n\n        ${this.notifications.length === 0 ? html`\n          <slot name=\"empty\">\n            <div class=\"empty\">\n              <svg class=\"empty-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n              <cg-text size=\"sm\" weight=\"semibold\">You're all caught up</cg-text>\n              <cg-text size=\"xs\" color=\"muted\">New notifications will appear here.</cg-text>\n            </div>\n          </slot>\n        ` : nothing}\n\n        ${groups.map(([bucket, items]) => html`\n          <cg-text class=\"group-label\" size=\"xs\" weight=\"bold\" color=\"muted\" role=\"heading\" aria-level=\"3\">${bucket}</cg-text>\n          <div role=\"list\" aria-label=\"${bucket} notifications\">\n            ${items.map(n => html`\n              <button\n                class=\"notification ${n.read ? '' : 'unread'}\"\n                role=\"listitem\"\n                aria-label=\"${n.title}${n.read ? '' : ' (unread)'}\"\n                ?data-just-arrived=${this._justArrivedIds.has(n.id)}\n                @click=${() => this._handleClick(n)}\n              >\n                <div class=\"notif-body\">\n                  <cg-text data-role=\"title\" size=\"sm\" weight=\"medium\">${n.title}</cg-text>\n                  <cg-text class=\"notif-message\" size=\"xs\" color=\"muted\">${n.message}</cg-text>\n                  <cg-text size=\"xs\" color=\"muted\">${this._formatTime(n.timestamp)}</cg-text>\n                </div>\n                <button\n                  class=\"dismiss-btn\"\n                  aria-label=\"Dismiss: ${n.title}\"\n                  @click=${(e: Event) => this._handleDismiss(e, n)}\n                >\n                  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\n                </button>\n              </button>\n            `)}\n          </div>\n        `)}\n      </cg-card>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-notification-center': AiNotificationCenter;\n  }\n}\n"],"names":["DAY_MS","AiNotificationCenter","LitElement","changed","currentIds","n","id","ts","now","startOfToday","order","map","visible","a","b","bucket","k","ms","diff","notification","groups","unread","html","nothing","items","e","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-notification-center.js","sources":["../../../src/components/ai-notification-center/ai-notification-center.ts"],"sourcesContent":["/**\n * @element ai-notification-center\n * Notification inbox built from design-system primitives (cg-card, cg-text, cg-button).\n * Date-bucketed grouping (Today / Yesterday / This week / Earlier), left-accent unread style,\n * pulse on new arrivals, positive empty state, sr-live unread announcer.\n *\n * @example\n * ```html\n * <ai-notification-center .notifications=${[\n *   { id: '1', title: 'Model updated', message: 'GPT-4 Turbo is now available',\n *     type: 'system', timestamp: Date.now() - 2 * 60 * 1000 }\n * ]}></ai-notification-center>\n * ```\n *\n * @prop {Notification[]} notifications - Notification objects (timestamp = ms epoch or ISO/string)\n * @prop {number} maxVisible - Max notifications to render (default 50)\n *\n * @slot empty - Override the default \"You're all caught up\" empty state\n *\n * @fires {CustomEvent<{id: string, notification: object}>} ai-notification-click\n * @fires {CustomEvent<{id: string}>} ai-notification-dismiss\n * @fires ai-notification-read-all\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-card/cg-card.js';\nimport '../cg-text/cg-text.js';\nimport '../cg-button/cg-button.js';\n\ninterface Notification {\n  id: string;\n  title: string;\n  message: string;\n  type: string;\n  timestamp: string | number;\n  read?: boolean;\n}\n\nconst DAY_MS = 24 * 60 * 60 * 1000;\n\n@customElement('ai-notification-center')\nexport class AiNotificationCenter extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      display: block;\n    }\n    :host([hidden]) { display: none; }\n\n    cg-card { display: block; max-height: 480px; overflow-y: auto; }\n\n    /* sr-only live region */\n    .sr-only {\n      position: absolute;\n      width: 1px; height: 1px;\n      padding: 0; margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    /* ── Header ── */\n    .header-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-12);\n      width: 100%;\n    }\n    .header-left {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n\n    .unread-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: var(--cg-spacing-16);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\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      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* ── Date group label ── */\n    .group-label {\n      padding: var(--cg-spacing-12) 0 var(--cg-spacing-4);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .group-label:first-child { padding-top: 0; }\n\n    /* ── Notification row ── */\n    .notification {\n      display: flex;\n      align-items: flex-start;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12);\n      min-height: var(--cg-spacing-48);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\n      border: none;\n      background: transparent;\n      width: 100%;\n      text-align: left;\n      font-family: inherit;\n      color: inherit;\n      position: relative;\n      transition:\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .notification + .notification {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: 0;\n    }\n    .notification:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n    }\n    .notification:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .notification:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-color-focus-ring);\n    }\n\n    /* Left-accent unread indicator (replaces dot + bg) */\n    .notification.unread::before {\n      content: '';\n      position: absolute;\n      left: 0; top: var(--cg-spacing-12); bottom: var(--cg-spacing-12);\n      width: var(--cg-border-width-100);\n      background: var(--cg-color-action-primary-background-default);\n      border-radius: var(--cg-border-radius-full);\n    }\n\n    /* Just-arrived pulse */\n    @keyframes arrivalPulse {\n      0%   { background: var(--cg-color-action-primary-background-default); opacity: 0.12; }\n      100% { background: transparent; opacity: 0; }\n    }\n    .notification[data-just-arrived]::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      border-radius: inherit;\n      animation: arrivalPulse 1.2s var(--cg-transition-easing-ease-out) both;\n    }\n    @media (prefers-reduced-motion: reduce) {\n      .notification[data-just-arrived]::after { animation: none; }\n    }\n\n    .notif-body {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n    }\n    .notification.unread .notif-body cg-text[data-role=\"title\"] {\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .notif-message {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      white-space: normal;\n    }\n\n    /* ── Dismiss icon button ── */\n    .dismiss-btn {\n      flex-shrink: 0;\n      background: transparent;\n      border: none;\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      padding: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-50);\n      line-height: 1;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .dismiss-btn:hover {\n      color: var(--cg-color-status-error-text-default);\n      background: var(--cg-color-action-secondary-background-hover);\n    }\n    .dismiss-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .dismiss-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-color-focus-ring);\n    }\n\n    /* ── Empty state ── */\n    .empty {\n      text-align: center;\n      padding: var(--cg-spacing-32) var(--cg-spacing-16);\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n    }\n    .empty-icon {\n      color: var(--cg-color-status-success-text-default);\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n    }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Array }) notifications: Notification[] = [];\n  @property({ type: Number, attribute: 'max-visible' }) maxVisible = 50;\n\n  @state() private _justArrivedIds = new Set<string>();\n  private _seenIds = new Set<string>();\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('notifications')) {\n      const currentIds = new Set(this.notifications.map(n => n.id));\n      // Only mark as \"just arrived\" if we've already initialized (not first render)\n      if (this._seenIds.size > 0) {\n        for (const id of currentIds) {\n          if (!this._seenIds.has(id)) this._justArrivedIds.add(id);\n        }\n        if (this._justArrivedIds.size > 0) {\n          // Clear pulse after animation\n          window.setTimeout(() => {\n            this._justArrivedIds.clear();\n            this.requestUpdate();\n          }, 1300);\n        }\n      }\n      this._seenIds = currentIds;\n    }\n  }\n\n  private get _unreadCount(): number {\n    return this.notifications.filter(n => !n.read).length;\n  }\n\n  private _toMs(ts: string | number): number {\n    if (typeof ts === 'number') return ts;\n    const n = Date.parse(ts);\n    return Number.isNaN(n) ? 0 : n;\n  }\n\n  private _bucketFor(ts: number): string {\n    if (!ts) return 'Earlier';\n    const now = Date.now();\n    const startOfToday = new Date(); startOfToday.setHours(0, 0, 0, 0);\n    if (ts >= startOfToday.getTime()) return 'Today';\n    if (ts >= startOfToday.getTime() - DAY_MS) return 'Yesterday';\n    if (ts >= now - 7 * DAY_MS) return 'This week';\n    return 'Earlier';\n  }\n\n  private get _grouped(): Array<[string, Notification[]]> {\n    const order = ['Today', 'Yesterday', 'This week', 'Earlier'];\n    const map = new Map<string, Notification[]>();\n    const visible = [...this.notifications]\n      .sort((a, b) => this._toMs(b.timestamp) - this._toMs(a.timestamp))\n      .slice(0, this.maxVisible);\n    for (const n of visible) {\n      const bucket = this._bucketFor(this._toMs(n.timestamp));\n      if (!map.has(bucket)) map.set(bucket, []);\n      map.get(bucket)!.push(n);\n    }\n    return order.filter(k => map.has(k)).map(k => [k, map.get(k)!]);\n  }\n\n  private _formatTime(ts: string | number): string {\n    const ms = this._toMs(ts);\n    if (!ms) return String(ts);\n    const diff = Date.now() - ms;\n    if (diff < 60_000) return 'Just now';\n    if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;\n    if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;\n    return new Date(ms).toLocaleDateString(undefined, { month: 'short', day: 'numeric' });\n  }\n\n  private _handleClick(notification: Notification) {\n    this.dispatchEvent(new CustomEvent('ai-notification-click', {\n      detail: { id: notification.id, notification },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _handleDismiss(e: Event, notification: Notification) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-notification-dismiss', {\n      detail: { id: notification.id },\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _handleReadAll() {\n    this.dispatchEvent(new CustomEvent('ai-notification-read-all', {\n      bubbles: true, composed: true,\n    }));\n  }\n\n  override render() {\n    const groups = this._grouped;\n    const unread = this._unreadCount;\n\n    return html`\n      <cg-card variant=\"outlined\" padding=\"md\" rounded=${this.rounded} role=\"region\" aria-label=\"Notification center\">\n        <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n          ${unread > 0 ? `${unread} unread notifications` : 'No unread notifications'}\n        </div>\n\n        <div slot=\"header\" class=\"header-row\">\n          <div class=\"header-left\">\n            <cg-text size=\"sm\" weight=\"semibold\">Notifications</cg-text>\n            ${unread > 0 ? html`<span class=\"unread-badge\" aria-label=\"${unread} unread\">${unread}</span>` : nothing}\n          </div>\n          ${unread > 0 ? html`\n            <cg-button variant=\"tertiary\" size=\"sm\" @click=${this._handleReadAll}>Mark all read</cg-button>\n          ` : nothing}\n        </div>\n\n        ${this.notifications.length === 0 ? html`\n          <slot name=\"empty\">\n            <div class=\"empty\">\n              <svg class=\"empty-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                <polyline points=\"20 6 9 17 4 12\"/>\n              </svg>\n              <cg-text size=\"sm\" weight=\"semibold\">You're all caught up</cg-text>\n              <cg-text size=\"xs\" color=\"muted\">New notifications will appear here.</cg-text>\n            </div>\n          </slot>\n        ` : nothing}\n\n        ${groups.map(([bucket, items]) => html`\n          <cg-text class=\"group-label\" size=\"xs\" weight=\"bold\" color=\"muted\" role=\"heading\" aria-level=\"3\">${bucket}</cg-text>\n          <div role=\"list\" aria-label=\"${bucket} notifications\">\n            ${items.map(n => html`\n              <button\n                class=\"notification ${n.read ? '' : 'unread'}\"\n                role=\"listitem\"\n                aria-label=\"${n.title}${n.read ? '' : ' (unread)'}\"\n                ?data-just-arrived=${this._justArrivedIds.has(n.id)}\n                @click=${() => this._handleClick(n)}\n              >\n                <div class=\"notif-body\">\n                  <cg-text data-role=\"title\" size=\"sm\" weight=\"medium\">${n.title}</cg-text>\n                  <cg-text class=\"notif-message\" size=\"xs\" color=\"muted\">${n.message}</cg-text>\n                  <cg-text size=\"xs\" color=\"muted\">${this._formatTime(n.timestamp)}</cg-text>\n                </div>\n                <button\n                  class=\"dismiss-btn\"\n                  aria-label=\"Dismiss: ${n.title}\"\n                  @click=${(e: Event) => this._handleDismiss(e, n)}\n                >\n                  <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\n                </button>\n              </button>\n            `)}\n          </div>\n        `)}\n      </cg-card>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-notification-center': AiNotificationCenter;\n  }\n}\n"],"names":["DAY_MS","AiNotificationCenter","LitElement","changed","currentIds","n","id","ts","now","startOfToday","order","map","visible","b","bucket","k","ms","diff","notification","groups","unread","html","nothing","items","e","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":";;;;;;;;;;;AAuCA,MAAMA,IAAS,OAAU,KAAK;AAGvB,IAAMC,IAAN,cAAmCC,EAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA,GAoLwB,KAAA,UAAgD,MAClD,KAAA,gBAAgC,CAAA,GACL,KAAA,aAAa,IAE1D,KAAQ,sCAAsB,IAAA,GACvC,KAAQ,+BAAe,IAAA;AAAA,EAAY;AAAA,EAE1B,QAAQC,GAA+B;AAC9C,QAAIA,EAAQ,IAAI,eAAe,GAAG;AAChC,YAAMC,IAAa,IAAI,IAAI,KAAK,cAAc,IAAI,CAAAC,MAAKA,EAAE,EAAE,CAAC;AAE5D,UAAI,KAAK,SAAS,OAAO,GAAG;AAC1B,mBAAWC,KAAMF;AACf,UAAK,KAAK,SAAS,IAAIE,CAAE,KAAG,KAAK,gBAAgB,IAAIA,CAAE;AAEzD,QAAI,KAAK,gBAAgB,OAAO,KAE9B,OAAO,WAAW,MAAM;AACtB,eAAK,gBAAgB,MAAA,GACrB,KAAK,cAAA;AAAA,QACP,GAAG,IAAI;AAAA,MAEX;AACA,WAAK,WAAWF;AAAA,IAClB;AAAA,EACF;AAAA,EAEA,IAAY,eAAuB;AACjC,WAAO,KAAK,cAAc,OAAO,OAAK,CAACC,EAAE,IAAI,EAAE;AAAA,EACjD;AAAA,EAEQ,MAAME,GAA6B;AACzC,QAAI,OAAOA,KAAO,SAAU,QAAOA;AACnC,UAAMF,IAAI,KAAK,MAAME,CAAE;AACvB,WAAO,OAAO,MAAMF,CAAC,IAAI,IAAIA;AAAA,EAC/B;AAAA,EAEQ,WAAWE,GAAoB;AACrC,QAAI,CAACA,EAAI,QAAO;AAChB,UAAMC,IAAM,KAAK,IAAA,GACXC,wBAAmB,KAAA;AACzB,WADiCA,EAAa,SAAS,GAAG,GAAG,GAAG,CAAC,GAC7DF,KAAME,EAAa,QAAA,IAAkB,UACrCF,KAAME,EAAa,QAAA,IAAYT,IAAe,cAC9CO,KAAMC,IAAM,IAAIR,IAAe,cAC5B;AAAA,EACT;AAAA,EAEA,IAAY,WAA4C;AACtD,UAAMU,IAAQ,CAAC,SAAS,aAAa,aAAa,SAAS,GACrDC,wBAAU,IAAA,GACVC,IAAU,CAAC,GAAG,KAAK,aAAa,EACnC,KAAK,CAAC,GAAGC,MAAM,KAAK,MAAMA,EAAE,SAAS,IAAI,KAAK,MAAM,EAAE,SAAS,CAAC,EAChE,MAAM,GAAG,KAAK,UAAU;AAC3B,eAAWR,KAAKO,GAAS;AACvB,YAAME,IAAS,KAAK,WAAW,KAAK,MAAMT,EAAE,SAAS,CAAC;AACtD,MAAKM,EAAI,IAAIG,CAAM,KAAGH,EAAI,IAAIG,GAAQ,EAAE,GACxCH,EAAI,IAAIG,CAAM,EAAG,KAAKT,CAAC;AAAA,IACzB;AACA,WAAOK,EAAM,OAAO,CAAAK,MAAKJ,EAAI,IAAII,CAAC,CAAC,EAAE,IAAI,CAAAA,MAAK,CAACA,GAAGJ,EAAI,IAAII,CAAC,CAAE,CAAC;AAAA,EAChE;AAAA,EAEQ,YAAYR,GAA6B;AAC/C,UAAMS,IAAK,KAAK,MAAMT,CAAE;AACxB,QAAI,CAACS,EAAI,QAAO,OAAOT,CAAE;AACzB,UAAMU,IAAO,KAAK,IAAA,IAAQD;AAC1B,WAAIC,IAAO,MAAe,aACtBA,IAAO,OAAkB,GAAG,KAAK,MAAMA,IAAO,GAAM,CAAC,UACrDA,IAAO,QAAmB,GAAG,KAAK,MAAMA,IAAO,IAAS,CAAC,UACtD,IAAI,KAAKD,CAAE,EAAE,mBAAmB,QAAW,EAAE,OAAO,SAAS,KAAK,WAAW;AAAA,EACtF;AAAA,EAEQ,aAAaE,GAA4B;AAC/C,SAAK,cAAc,IAAI,YAAY,yBAAyB;AAAA,MAC1D,QAAQ,EAAE,IAAIA,EAAa,IAAI,cAAAA,EAAA;AAAA,MAC/B,SAAS;AAAA,MAAM,UAAU;AAAA,IAAA,CAC1B,CAAC;AAAA,EACJ;AAAA,EAEQ,eAAe,GAAUA,GAA4B;AAC3D,MAAE,gBAAA,GACF,KAAK,cAAc,IAAI,YAAY,2BAA2B;AAAA,MAC5D,QAAQ,EAAE,IAAIA,EAAa,GAAA;AAAA,MAC3B,SAAS;AAAA,MAAM,UAAU;AAAA,IAAA,CAC1B,CAAC;AAAA,EACJ;AAAA,EAEQ,iBAAiB;AACvB,SAAK,cAAc,IAAI,YAAY,4BAA4B;AAAA,MAC7D,SAAS;AAAA,MAAM,UAAU;AAAA,IAAA,CAC1B,CAAC;AAAA,EACJ;AAAA,EAES,SAAS;AAChB,UAAMC,IAAS,KAAK,UACdC,IAAS,KAAK;AAEpB,WAAOC;AAAA,yDAC8C,KAAK,OAAO;AAAA;AAAA,YAEzDD,IAAS,IAAI,GAAGA,CAAM,0BAA0B,yBAAyB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAMvEA,IAAS,IAAIC,2CAA8CD,CAAM,YAAYA,CAAM,YAAYE,CAAO;AAAA;AAAA,YAExGF,IAAS,IAAIC;AAAA,6DACoC,KAAK,cAAc;AAAA,cAClEC,CAAO;AAAA;AAAA;AAAA,UAGX,KAAK,cAAc,WAAW,IAAID;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAUhCC,CAAO;AAAA;AAAA,UAETH,EAAO,IAAI,CAAC,CAACL,GAAQS,CAAK,MAAMF;AAAA,6GACmEP,CAAM;AAAA,yCAC1EA,CAAM;AAAA,cACjCS,EAAM,IAAI,CAAAlB,MAAKgB;AAAA;AAAA,sCAEShB,EAAE,OAAO,KAAK,QAAQ;AAAA;AAAA,8BAE9BA,EAAE,KAAK,GAAGA,EAAE,OAAO,KAAK,WAAW;AAAA,qCAC5B,KAAK,gBAAgB,IAAIA,EAAE,EAAE,CAAC;AAAA,yBAC1C,MAAM,KAAK,aAAaA,CAAC,CAAC;AAAA;AAAA;AAAA,yEAGsBA,EAAE,KAAK;AAAA,2EACLA,EAAE,OAAO;AAAA,qDAC/B,KAAK,YAAYA,EAAE,SAAS,CAAC;AAAA;AAAA;AAAA;AAAA,yCAIzCA,EAAE,KAAK;AAAA,2BACrB,CAACmB,MAAa,KAAK,eAAeA,GAAGnB,CAAC,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,aAKrD,CAAC;AAAA;AAAA,SAEL,CAAC;AAAA;AAAA;AAAA,EAGR;AACF;AA9UaJ,EACK,SAAS,CAACwB,GAAWC,GAAeC,GAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAiLzE;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GApLhB7B,EAoLkB,WAAA,WAAA,CAAA;AACF4B,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GArLd7B,EAqLgB,WAAA,iBAAA,CAAA;AAC2B4B,EAAA;AAAA,EAArDC,EAAS,EAAE,MAAM,QAAQ,WAAW,eAAe;AAAA,GAtLzC7B,EAsL2C,WAAA,cAAA,CAAA;AAErC4B,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAxLI9B,EAwLM,WAAA,mBAAA,CAAA;AAxLNA,IAAN4B,EAAA;AAAA,EADNG,EAAc,wBAAwB;AAAA,GAC1B/B,CAAA;"}