@cognivo/components 0.8.0 → 0.8.2

package/dist/components/ai-rich-message/ai-rich-message.js

@@ -1,12 +1,12 @@
-import { css as u, LitElement as v, html as t, nothing as d } from "lit";
-import { property as c, customElement as b } from "lit/decorators.js";
-import { h as p, r as h, f } from "../../chunks/premium.css-9I4kHrsl.js";
-var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (a, r, n, o) => {
-  for (var i = o > 1 ? void 0 : o ? x(r, n) : r, l = a.length - 1, g; l >= 0; l--)
-    (g = a[l]) && (i = (o ? g(r, n, i) : g(i)) || i);
-  return o && i && m(r, n, i), i;
+import { css as b, LitElement as u, html as t, nothing as n } from "lit";
+import { property as c, customElement as v } from "lit/decorators.js";
+import { h as p, r as f, f as h } from "../../chunks/premium.css-DHekUEUt.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, o = (a, r, d, s) => {
+  for (var i = s > 1 ? void 0 : s ? y(r, d) : r, l = a.length - 1, g; l >= 0; l--)
+    (g = a[l]) && (i = (s ? g(r, d, i) : g(i)) || i);
+  return s && i && m(r, d, i), i;
 };
-let e = class extends v {
+let e = class extends u {
   constructor() {
     super(...arguments), this.role = "assistant", this.text = "", this.cards = [], this.avatar = "", this.timestamp = "", this.actions = [];
   }
@@ -27,7 +27,7 @@ let e = class extends v {
     `;
   }
   _renderText() {
-    if (!this.text) return d;
+    if (!this.text) return n;
     const a = this.text.split(`
 
 `).filter(Boolean);
@@ -44,32 +44,32 @@ let e = class extends v {
     return typeof a == "string" && a.includes("-") && e._allowedCardTypes.has(a);
   }
   _renderCards() {
-    if (this.cards.length === 0) return d;
+    if (this.cards.length === 0) return n;
     this._cardAbort?.abort(), this._cardAbort = new AbortController();
     const a = this._cardAbort.signal;
     return t`
       <div class="cards">
-        ${this.cards.map((r, n) => {
+        ${this.cards.map((r, d) => {
       try {
         if (!this._isValidCardType(r.type))
-          return console.warn(`[ai-rich-message] Blocked unknown card type: "${r.type}"`), t`<div style="padding:8px;font-size:12px;color:var(--cg-color-input-text-placeholder,#71717a);">Card unavailable</div>`;
-        const o = document.createElement(r.type);
-        return o.data = r.data, o.toolData = r.data, o.addEventListener("ai-tool-card-action", ((i) => {
+          return console.warn(`[ai-rich-message] Blocked unknown card type: "${r.type}"`), t`<div class="card-fallback">Card unavailable</div>`;
+        const s = document.createElement(r.type);
+        return s.data = r.data, s.toolData = r.data, s.addEventListener("ai-tool-card-action", ((i) => {
           this._dispatch("ai-message-card-action", {
-            cardIndex: n,
+            cardIndex: d,
             action: i.detail?.action,
             data: i.detail?.data
           });
-        }), { signal: a }), o;
+        }), { signal: a }), s;
       } catch {
-        return t`<div style="padding:8px;font-size:12px;color:var(--cg-color-input-text-placeholder,#71717a);">Card unavailable</div>`;
+        return t`<div class="card-fallback">Card unavailable</div>`;
       }
     })}
       </div>
     `;
   }
   _renderActions() {
-    return this.actions.length === 0 ? d : t`
+    return this.actions.length === 0 ? n : t`
       <div class="actions" role="group" aria-label="Message actions">
         ${this.actions.map((a) => t`
           <button
@@ -97,13 +97,13 @@ let e = class extends v {
           </div>
           ${this._renderCards()}
           ${this._renderActions()}
-          ${this.timestamp ? t`<div class="timestamp">${this.timestamp}</div>` : d}
+          ${this.timestamp ? t`<div class="timestamp">${this.timestamp}</div>` : n}
         </div>
       </div>
     `;
   }
 };
-e.styles = [p, h, f, u`
+e.styles = [p, f, h, b`
     :host {
       animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
@@ -172,12 +172,19 @@ e.styles = [p, h, f, u`
     }
     .message.system .bubble-body {
       background: var(--cg-color-surface-base-background);
-      border: 1px dashed var(--cg-color-surface-cards-border);
+      border: var(--cg-border-width-50) dashed var(--cg-color-surface-cards-border);
       font-size: var(--cg-font-size-sm);
       color: var(--cg-color-input-text-placeholder);
       font-style: italic;
     }
 
+    /* ── Card fallback (unknown/blocked card type) ── */
+    .card-fallback {
+      padding: var(--cg-spacing-8);
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-input-text-placeholder);
+    }
+
     /* ── Text ── */
     .text {
       white-space: pre-wrap;
@@ -229,7 +236,7 @@ e.styles = [p, h, f, u`
       border-color: var(--cg-color-surface-base-text);
     }
     .action-btn:focus-visible {
-      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);
       outline-offset: var(--cg-outline-offset-default);
     }
 
@@ -258,26 +265,26 @@ e._allowedCardTypes = /* @__PURE__ */ new Set([
   "ai-table-card",
   "ai-metric-card"
 ]);
-s([
+o([
   c({ type: String })
 ], e.prototype, "role", 2);
-s([
+o([
   c({ type: String })
 ], e.prototype, "text", 2);
-s([
+o([
   c({ attribute: !1 })
 ], e.prototype, "cards", 2);
-s([
+o([
   c({ type: String })
 ], e.prototype, "avatar", 2);
-s([
+o([
   c({ type: String })
 ], e.prototype, "timestamp", 2);
-s([
+o([
   c({ attribute: !1 })
 ], e.prototype, "actions", 2);
-e = s([
-  b("ai-rich-message")
+e = o([
+  v("ai-rich-message")
 ], e);
 export {
   e as AiRichMessage

package/dist/components/ai-rich-message/ai-rich-message.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-rich-message.js","sources":["../../../src/components/ai-rich-message/ai-rich-message.ts"],"sourcesContent":["/**\n * @element ai-rich-message\n * Chat message bubble supporting user, assistant, and system roles.\n * Renders avatar, text with paragraph splitting, embedded tool cards,\n * action buttons, and timestamp. User messages get accent styling.\n *\n * @example\n * ```html\n * <ai-rich-message\n *   role=\"assistant\"\n *   text=\"Here are the results of my analysis.\"\n *   timestamp=\"2:34 PM\"\n *   .actions=${[{ label: 'Regenerate', id: 'regen' }]}\n * ></ai-rich-message>\n * ```\n *\n * @prop {'user'|'assistant'|'system'} role - Message sender role\n * @prop {string} text - Message text content\n * @prop {string} avatar - Avatar image URL (falls back to initials)\n * @prop {string} timestamp - Display timestamp\n * @prop {CardRef[]} cards - Embedded tool card components to render\n * @prop {ActionRef[]} actions - Action buttons shown below the message\n *\n * @fires {CustomEvent<{actionId: string}>} ai-message-action - When an action button is clicked\n * @fires {CustomEvent<{cardIndex: number}>} ai-message-card-action - When a card emits an action\n *\n * @slot - Additional content inside the message bubble\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\ninterface CardRef {\n  type: string;\n  data: unknown;\n}\n\ninterface ActionRef {\n  label: string;\n  id: string;\n}\n\n@customElement('ai-rich-message')\nexport class AiRichMessage extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .message {\n      display: flex;\n      gap: var(--cg-spacing-12);\n      max-width: 100%;\n    }\n    .message.user { flex-direction: row-reverse; }\n\n    /* ── Avatar ── */\n    .avatar {\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-bold);\n      flex-shrink: 0;\n      overflow: hidden;\n    }\n    .avatar.assistant {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-base-background);\n    }\n    .avatar.user {\n      background: var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-base-text);\n    }\n    .avatar.system {\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .avatar img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n    /* ── Bubble ── */\n    .bubble {\n      flex: 1;\n      min-width: 0;\n      max-width: 80%;\n    }\n    .message.user .bubble { max-width: 70%; }\n\n    .bubble-body {\n      border-radius: var(--cg-border-radius-150);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      font-size: var(--cg-font-size-sm);\n      line-height: 1.6;\n      color: var(--cg-color-surface-base-text);\n    }\n    .message.assistant .bubble-body {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .message.user .bubble-body {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-base-background);\n      border-radius: var(--cg-border-radius-150) var(--cg-border-radius-150) var(--cg-border-radius-50) var(--cg-border-radius-150);\n    }\n    .message.system .bubble-body {\n      background: var(--cg-color-surface-base-background);\n      border: 1px dashed var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-placeholder);\n      font-style: italic;\n    }\n\n    /* ── Text ── */\n    .text {\n      white-space: pre-wrap;\n      word-break: break-word;\n    }\n    .text p { margin: 0 0 var(--cg-spacing-8); }\n    .text p:last-child { margin-bottom: 0; }\n    .text code {\n      background: var(--cg-overlay-dark-medium);\n      padding: var(--cg-spacing-1) var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-50);\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-sm);\n    }\n    .message.user .text code {\n      background: var(--cg-overlay-dark-subtle);\n    }\n\n    /* ── Cards section ── */\n    .cards {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-8);\n    }\n\n    /* ── Action buttons ── */\n    .actions {\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-6);\n      margin-top: var(--cg-spacing-8);\n    }\n    .action-btn {\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-surface-base-text);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default), color var(--cg-transition-duration-default) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .action-btn:hover {\n      background: var(--cg-color-surface-cards-border);\n      border-color: var(--cg-color-surface-base-text);\n    }\n    .action-btn:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    /* ── Timestamp ── */\n    .timestamp {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-6);\n    }\n    .message.user .timestamp { text-align: right; }\n\n  `];\n\n  @property({ type: String }) override role: 'user' | 'assistant' | 'system' = 'assistant';\n  @property({ type: String }) text = '';\n  @property({ attribute: false }) cards: CardRef[] = [];\n  @property({ type: String }) avatar = '';\n  @property({ type: String }) timestamp = '';\n  @property({ attribute: false }) actions: ActionRef[] = [];\n\n  private _dispatch(name: string, detail: unknown) {\n    this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }));\n  }\n\n  private _handleAction(actionId: string) {\n    this._dispatch('ai-message-action', { actionId });\n  }\n\n  private _avatarFallback(): string {\n    if (this.role === 'assistant') return 'AI';\n    if (this.role === 'user') return 'U';\n    return 'S';\n  }\n\n  private _renderAvatar() {\n    return html`\n      <div class=\"avatar ${this.role}\" aria-hidden=\"true\">\n        ${this.avatar\n          ? html`<img src=${this.avatar} alt=\"${this.role} avatar\">`\n          : this._avatarFallback()}\n      </div>\n    `;\n  }\n\n  private _renderText() {\n    if (!this.text) return nothing;\n    // Simple paragraph splitting (no innerHTML — safe text rendering)\n    const paragraphs = this.text.split('\\n\\n').filter(Boolean);\n    return html`\n      <div class=\"text\">\n        ${paragraphs.map(p => html`<p>${p}</p>`)}\n      </div>\n    `;\n  }\n\n  private _cardAbort?: AbortController;\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._cardAbort?.abort();\n  }\n\n  /** Allowlist of known component tag names that can be created as cards. */\n  private static _allowedCardTypes = new Set([\n    'ai-tool-card', 'ai-chart-card', 'ai-code-card', 'ai-data-card',\n    'ai-file-card', 'ai-image-card', 'ai-link-card', 'ai-map-card',\n    'ai-search-card', 'ai-weather-card', 'ai-progress-card',\n    'ai-summary-card', 'ai-table-card', 'ai-metric-card',\n  ]);\n\n  private _isValidCardType(type: string): boolean {\n    // Must be a valid custom element name (contains hyphen) and be in the allowlist\n    return typeof type === 'string'\n      && type.includes('-')\n      && AiRichMessage._allowedCardTypes.has(type);\n  }\n\n  private _renderCards() {\n    if (this.cards.length === 0) return nothing;\n    // Clean up previous card listeners\n    this._cardAbort?.abort();\n    this._cardAbort = new AbortController();\n    const signal = this._cardAbort.signal;\n\n    return html`\n      <div class=\"cards\">\n        ${this.cards.map((card, idx) => {\n          try {\n            if (!this._isValidCardType(card.type)) {\n              console.warn(`[ai-rich-message] Blocked unknown card type: \"${card.type}\"`);\n              return html`<div style=\"padding:8px;font-size:12px;color:var(--cg-color-input-text-placeholder,#71717a);\">Card unavailable</div>`;\n            }\n            const el = document.createElement(card.type);\n            (el as unknown as Record<string, unknown>)['data'] = card.data;\n            (el as unknown as Record<string, unknown>)['toolData'] = card.data;\n            el.addEventListener('ai-tool-card-action', ((e: CustomEvent) => {\n              this._dispatch('ai-message-card-action', {\n                cardIndex: idx, action: e.detail?.action, data: e.detail?.data,\n              });\n            }) as EventListener, { signal });\n            return el;\n          } catch {\n            return html`<div style=\"padding:8px;font-size:12px;color:var(--cg-color-input-text-placeholder,#71717a);\">Card unavailable</div>`;\n          }\n        })}\n      </div>\n    `;\n  }\n\n  private _renderActions() {\n    if (this.actions.length === 0) return nothing;\n    return html`\n      <div class=\"actions\" role=\"group\" aria-label=\"Message actions\">\n        ${this.actions.map(a => html`\n          <button\n            class=\"action-btn\"\n            @click=${() => this._handleAction(a.id)}\n            aria-label=\"${a.label}\"\n          >${a.label}</button>\n        `)}\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"message ${this.role}\"\n        role=\"article\"\n        aria-label=\"${this.role} message\"\n        tabindex=\"0\"\n      >\n        ${this._renderAvatar()}\n        <div class=\"bubble\">\n          <div class=\"bubble-body\">\n            ${this._renderText()}\n            <slot></slot>\n          </div>\n          ${this._renderCards()}\n          ${this._renderActions()}\n          ${this.timestamp ? html`<div class=\"timestamp\">${this.timestamp}</div>` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-rich-message': AiRichMessage;\n  }\n}\n"],"names":["AiRichMessage","LitElement","name","detail","actionId","html","nothing","paragraphs","p","type","signal","card","idx","el","e","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-rich-message.js","sources":["../../../src/components/ai-rich-message/ai-rich-message.ts"],"sourcesContent":["/**\n * @element ai-rich-message\n * Chat message bubble supporting user, assistant, and system roles.\n * Renders avatar, text with paragraph splitting, embedded tool cards,\n * action buttons, and timestamp. User messages get accent styling.\n *\n * @example\n * ```html\n * <ai-rich-message\n *   role=\"assistant\"\n *   text=\"Here are the results of my analysis.\"\n *   timestamp=\"2:34 PM\"\n *   .actions=${[{ label: 'Regenerate', id: 'regen' }]}\n * ></ai-rich-message>\n * ```\n *\n * @prop {'user'|'assistant'|'system'} role - Message sender role\n * @prop {string} text - Message text content\n * @prop {string} avatar - Avatar image URL (falls back to initials)\n * @prop {string} timestamp - Display timestamp\n * @prop {CardRef[]} cards - Embedded tool card components to render\n * @prop {ActionRef[]} actions - Action buttons shown below the message\n *\n * @fires {CustomEvent<{actionId: string}>} ai-message-action - When an action button is clicked\n * @fires {CustomEvent<{cardIndex: number}>} ai-message-card-action - When a card emits an action\n *\n * @slot - Additional content inside the message bubble\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\ninterface CardRef {\n  type: string;\n  data: unknown;\n}\n\ninterface ActionRef {\n  label: string;\n  id: string;\n}\n\n@customElement('ai-rich-message')\nexport class AiRichMessage extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .message {\n      display: flex;\n      gap: var(--cg-spacing-12);\n      max-width: 100%;\n    }\n    .message.user { flex-direction: row-reverse; }\n\n    /* ── Avatar ── */\n    .avatar {\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border-radius: 50%;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-bold);\n      flex-shrink: 0;\n      overflow: hidden;\n    }\n    .avatar.assistant {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-base-background);\n    }\n    .avatar.user {\n      background: var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-base-text);\n    }\n    .avatar.system {\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .avatar img {\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n    }\n\n    /* ── Bubble ── */\n    .bubble {\n      flex: 1;\n      min-width: 0;\n      max-width: 80%;\n    }\n    .message.user .bubble { max-width: 70%; }\n\n    .bubble-body {\n      border-radius: var(--cg-border-radius-150);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      font-size: var(--cg-font-size-sm);\n      line-height: 1.6;\n      color: var(--cg-color-surface-base-text);\n    }\n    .message.assistant .bubble-body {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .message.user .bubble-body {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-base-background);\n      border-radius: var(--cg-border-radius-150) var(--cg-border-radius-150) var(--cg-border-radius-50) var(--cg-border-radius-150);\n    }\n    .message.system .bubble-body {\n      background: var(--cg-color-surface-base-background);\n      border: var(--cg-border-width-50) dashed var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-placeholder);\n      font-style: italic;\n    }\n\n    /* ── Card fallback (unknown/blocked card type) ── */\n    .card-fallback {\n      padding: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* ── Text ── */\n    .text {\n      white-space: pre-wrap;\n      word-break: break-word;\n    }\n    .text p { margin: 0 0 var(--cg-spacing-8); }\n    .text p:last-child { margin-bottom: 0; }\n    .text code {\n      background: var(--cg-overlay-dark-medium);\n      padding: var(--cg-spacing-1) var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-50);\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-sm);\n    }\n    .message.user .text code {\n      background: var(--cg-overlay-dark-subtle);\n    }\n\n    /* ── Cards section ── */\n    .cards {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-8);\n    }\n\n    /* ── Action buttons ── */\n    .actions {\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-6);\n      margin-top: var(--cg-spacing-8);\n    }\n    .action-btn {\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-surface-base-text);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default), color var(--cg-transition-duration-default) var(--cg-transition-easing-default), border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .action-btn:hover {\n      background: var(--cg-color-surface-cards-border);\n      border-color: var(--cg-color-surface-base-text);\n    }\n    .action-btn:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    /* ── Timestamp ── */\n    .timestamp {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-6);\n    }\n    .message.user .timestamp { text-align: right; }\n\n  `];\n\n  @property({ type: String }) override role: 'user' | 'assistant' | 'system' = 'assistant';\n  @property({ type: String }) text = '';\n  @property({ attribute: false }) cards: CardRef[] = [];\n  @property({ type: String }) avatar = '';\n  @property({ type: String }) timestamp = '';\n  @property({ attribute: false }) actions: ActionRef[] = [];\n\n  private _dispatch(name: string, detail: unknown) {\n    this.dispatchEvent(new CustomEvent(name, { bubbles: true, composed: true, detail }));\n  }\n\n  private _handleAction(actionId: string) {\n    this._dispatch('ai-message-action', { actionId });\n  }\n\n  private _avatarFallback(): string {\n    if (this.role === 'assistant') return 'AI';\n    if (this.role === 'user') return 'U';\n    return 'S';\n  }\n\n  private _renderAvatar() {\n    return html`\n      <div class=\"avatar ${this.role}\" aria-hidden=\"true\">\n        ${this.avatar\n          ? html`<img src=${this.avatar} alt=\"${this.role} avatar\">`\n          : this._avatarFallback()}\n      </div>\n    `;\n  }\n\n  private _renderText() {\n    if (!this.text) return nothing;\n    // Simple paragraph splitting (no innerHTML — safe text rendering)\n    const paragraphs = this.text.split('\\n\\n').filter(Boolean);\n    return html`\n      <div class=\"text\">\n        ${paragraphs.map(p => html`<p>${p}</p>`)}\n      </div>\n    `;\n  }\n\n  private _cardAbort?: AbortController;\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._cardAbort?.abort();\n  }\n\n  /** Allowlist of known component tag names that can be created as cards. */\n  private static _allowedCardTypes = new Set([\n    'ai-tool-card', 'ai-chart-card', 'ai-code-card', 'ai-data-card',\n    'ai-file-card', 'ai-image-card', 'ai-link-card', 'ai-map-card',\n    'ai-search-card', 'ai-weather-card', 'ai-progress-card',\n    'ai-summary-card', 'ai-table-card', 'ai-metric-card',\n  ]);\n\n  private _isValidCardType(type: string): boolean {\n    // Must be a valid custom element name (contains hyphen) and be in the allowlist\n    return typeof type === 'string'\n      && type.includes('-')\n      && AiRichMessage._allowedCardTypes.has(type);\n  }\n\n  private _renderCards() {\n    if (this.cards.length === 0) return nothing;\n    // Clean up previous card listeners\n    this._cardAbort?.abort();\n    this._cardAbort = new AbortController();\n    const signal = this._cardAbort.signal;\n\n    return html`\n      <div class=\"cards\">\n        ${this.cards.map((card, idx) => {\n          try {\n            if (!this._isValidCardType(card.type)) {\n              console.warn(`[ai-rich-message] Blocked unknown card type: \"${card.type}\"`);\n              return html`<div class=\"card-fallback\">Card unavailable</div>`;\n            }\n            const el = document.createElement(card.type);\n            (el as unknown as Record<string, unknown>)['data'] = card.data;\n            (el as unknown as Record<string, unknown>)['toolData'] = card.data;\n            el.addEventListener('ai-tool-card-action', ((e: CustomEvent) => {\n              this._dispatch('ai-message-card-action', {\n                cardIndex: idx, action: e.detail?.action, data: e.detail?.data,\n              });\n            }) as EventListener, { signal });\n            return el;\n          } catch {\n            return html`<div class=\"card-fallback\">Card unavailable</div>`;\n          }\n        })}\n      </div>\n    `;\n  }\n\n  private _renderActions() {\n    if (this.actions.length === 0) return nothing;\n    return html`\n      <div class=\"actions\" role=\"group\" aria-label=\"Message actions\">\n        ${this.actions.map(a => html`\n          <button\n            class=\"action-btn\"\n            @click=${() => this._handleAction(a.id)}\n            aria-label=\"${a.label}\"\n          >${a.label}</button>\n        `)}\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div\n        class=\"message ${this.role}\"\n        role=\"article\"\n        aria-label=\"${this.role} message\"\n        tabindex=\"0\"\n      >\n        ${this._renderAvatar()}\n        <div class=\"bubble\">\n          <div class=\"bubble-body\">\n            ${this._renderText()}\n            <slot></slot>\n          </div>\n          ${this._renderCards()}\n          ${this._renderActions()}\n          ${this.timestamp ? html`<div class=\"timestamp\">${this.timestamp}</div>` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-rich-message': AiRichMessage;\n  }\n}\n"],"names":["AiRichMessage","LitElement","name","detail","actionId","html","nothing","paragraphs","p","type","signal","card","idx","el","e","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -1,10 +1,10 @@
 import { css as g, LitElement as p, html as i, nothing as d } from "lit";
 import { property as v, customElement as u } from "lit/decorators.js";
-import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
-var h = Object.defineProperty, m = Object.getOwnPropertyDescriptor, t = (r, e, s, c) => {
-  for (var a = c > 1 ? void 0 : c ? m(e, s) : e, n = r.length - 1, l; n >= 0; n--)
-    (l = r[n]) && (a = (c ? l(e, s, a) : l(a)) || a);
-  return c && a && h(e, s, a), a;
+import { h as f, r as b } from "../../chunks/premium.css-DHekUEUt.js";
+var h = Object.defineProperty, m = Object.getOwnPropertyDescriptor, c = (r, e, s, t) => {
+  for (var a = t > 1 ? void 0 : t ? m(e, s) : e, n = r.length - 1, l; n >= 0; n--)
+    (l = r[n]) && (a = (t ? l(e, s, a) : l(a)) || a);
+  return t && a && h(e, s, a), a;
 };
 let o = class extends p {
   constructor() {
@@ -101,7 +101,7 @@ o.styles = [f, b, g`
     }
     .scenario:focus-visible {
       outline: none;
-      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);
+      box-shadow: inset 0 0 0 var(--cg-outline-width-default) var(--cg-overlay-accent-strong);
     }
 
     .scenario-info { flex: 1; min-width: 0; }
@@ -164,16 +164,16 @@ o.styles = [f, b, g`
       font-size: var(--cg-font-size-sm);
     }
   `];
-t([
+c([
   v({ type: Array })
 ], o.prototype, "scenarios", 2);
-t([
+c([
   v()
 ], o.prototype, "activeScenario", 2);
-t([
+c([
   v({ type: Boolean })
 ], o.prototype, "loading", 2);
-o = t([
+o = c([
   u("ai-scenario-panel")
 ], o);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"ai-scenario-panel.js","sources":["../../../src/components/ai-scenario-panel/ai-scenario-panel.ts"],"sourcesContent":["/**\n * @element ai-scenario-panel\n * What-if scenario comparison panel. Clean list with probability, outcome, and status.\n *\n * @fires {CustomEvent<{id: string}>} ai-scenario-select\n * @fires {CustomEvent<{id: string}>} ai-scenario-run\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\ninterface Scenario {\n  id: string;\n  label: string;\n  description?: string;\n  probability?: number;\n  outcome?: string;\n  status?: 'idle' | 'running' | 'complete' | 'error';\n}\n\n@customElement('ai-scenario-panel')\nexport class AiScenarioPanel extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n\n    .panel {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      overflow: hidden;\n    }\n\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-20) var(--cg-spacing-20) var(--cg-spacing-12);\n    }\n    .header-title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* Scenarios list */\n    .scenarios {\n      margin: 0 var(--cg-spacing-12) var(--cg-spacing-12);\n      background: var(--cg-overlay-dark-subtle);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-125);\n      overflow: hidden;\n    }\n\n    .scenario {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-16) var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .scenario:last-child { border-bottom: none; }\n    .scenario:hover { background: var(--cg-color-action-secondary-background-hover); }\n    .scenario.active {\n      background: var(--cg-overlay-dark-subtle);\n    }\n    .scenario:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);\n    }\n\n    .scenario-info { flex: 1; min-width: 0; }\n    .scenario-label {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n    }\n    .scenario-desc {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-2);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    /* Right side metrics */\n    .scenario-metrics {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-16);\n      flex-shrink: 0;\n    }\n    .metric {\n      text-align: right;\n    }\n    .metric-val {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-base-text);\n    }\n    .metric-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* Status dot */\n    .status-dot {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      flex-shrink: 0;\n    }\n    .status-dot.idle { background: var(--cg-color-input-text-placeholder); }\n    .status-dot.running { background: var(--cg-color-status-warning-text-default); }\n    .status-dot.complete { background: var(--cg-color-status-success-text-default); }\n    .status-dot.error { background: var(--cg-color-status-error-text-default); }\n\n    /* Footer */\n    .footer {\n      padding: var(--cg-spacing-12);\n    }\n\n    .empty {\n      padding: var(--cg-spacing-32) var(--cg-spacing-20);\n      text-align: center;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n    }\n  `];\n\n  @property({ type: Array }) scenarios: Scenario[] = [];\n  @property() activeScenario = '';\n  @property({ type: Boolean }) loading = false;\n\n  private _select(id: string) {\n    this.activeScenario = id;\n    this.dispatchEvent(new CustomEvent('ai-scenario-select', { bubbles: true, composed: true, detail: { id } }));\n  }\n\n  override render() {\n    if (this.loading) {\n      return html`<div class=\"panel\"><div class=\"empty\">Loading scenarios...</div></div>`;\n    }\n\n    if (!this.scenarios.length) {\n      return html`<div class=\"panel\"><div class=\"empty\">No scenarios available.</div></div>`;\n    }\n\n    return html`\n      <div class=\"panel\" role=\"listbox\" aria-label=\"Scenarios\">\n        <div class=\"header\">\n          <span class=\"header-title\">Scenarios</span>\n        </div>\n        <div class=\"scenarios\">\n          ${this.scenarios.map(s => html`\n            <div class=\"scenario ${s.id === this.activeScenario ? 'active' : ''}\"\n              role=\"option\" tabindex=\"0\"\n              aria-selected=\"${s.id === this.activeScenario}\"\n              @click=${() => this._select(s.id)}\n              @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._select(s.id); } }}>\n              <span class=\"status-dot ${s.status || 'idle'}\"></span>\n              <div class=\"scenario-info\">\n                <div class=\"scenario-label\">${s.label}</div>\n                ${s.description ? html`<div class=\"scenario-desc\">${s.description}</div>` : nothing}\n              </div>\n              <div class=\"scenario-metrics\">\n                ${s.probability != null ? html`\n                  <div class=\"metric\">\n                    <div class=\"metric-val\">${Math.round(s.probability * 100)}%</div>\n                    <div class=\"metric-label\">Prob</div>\n                  </div>\n                ` : nothing}\n                ${s.outcome ? html`\n                  <div class=\"metric\">\n                    <div class=\"metric-val\">${s.outcome}</div>\n                    <div class=\"metric-label\">Outcome</div>\n                  </div>\n                ` : nothing}\n              </div>\n            </div>\n          `)}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiScenarioPanel","LitElement","id","html","s","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAqBO,IAAMA,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgHsB,KAAA,YAAwB,CAAA,GACvC,KAAA,iBAAiB,IACA,KAAA,UAAU;AAAA,EAAA;AAAA,EAE/B,QAAQC,GAAY;AAC1B,SAAK,iBAAiBA,GACtB,KAAK,cAAc,IAAI,YAAY,sBAAsB,EAAE,SAAS,IAAM,UAAU,IAAM,QAAQ,EAAE,IAAAA,EAAA,EAAG,CAAG,CAAC;AAAA,EAC7G;AAAA,EAES,SAAS;AAChB,WAAI,KAAK,UACAC,4EAGJ,KAAK,UAAU,SAIbA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMC,KAAK,UAAU,IAAI,CAAAC,MAAKD;AAAA,mCACDC,EAAE,OAAO,KAAK,iBAAiB,WAAW,EAAE;AAAA;AAAA,+BAEhDA,EAAE,OAAO,KAAK,cAAc;AAAA,uBACpC,MAAM,KAAK,QAAQA,EAAE,EAAE,CAAC;AAAA,yBACtB,CAAC,MAAqB;AAAE,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SAAO,EAAE,eAAA,GAAkB,KAAK,QAAQA,EAAE,EAAE;AAAA,IAAK,CAAC;AAAA,wCAC9FA,EAAE,UAAU,MAAM;AAAA;AAAA,8CAEZA,EAAE,KAAK;AAAA,kBACnCA,EAAE,cAAcD,+BAAkCC,EAAE,WAAW,WAAWC,CAAO;AAAA;AAAA;AAAA,kBAGjFD,EAAE,eAAe,OAAOD;AAAA;AAAA,8CAEI,KAAK,MAAMC,EAAE,cAAc,GAAG,CAAC;AAAA;AAAA;AAAA,oBAGzDC,CAAO;AAAA,kBACTD,EAAE,UAAUD;AAAA;AAAA,8CAEgBC,EAAE,OAAO;AAAA;AAAA;AAAA,oBAGnCC,CAAO;AAAA;AAAA;AAAA,WAGhB,CAAC;AAAA;AAAA;AAAA,QAnCCF;AAAA,EAuCX;AACF;AAvKaH,EACK,SAAS,CAACM,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA6GnD;AAE0BC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAhHdV,EAgHgB,WAAA,aAAA,CAAA;AACfS,EAAA;AAAA,EAAXC,EAAA;AAAS,GAjHCV,EAiHC,WAAA,kBAAA,CAAA;AACiBS,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAlHhBV,EAkHkB,WAAA,WAAA,CAAA;AAlHlBA,IAANS,EAAA;AAAA,EADNE,EAAc,mBAAmB;AAAA,GACrBX,CAAA;"}
+{"version":3,"file":"ai-scenario-panel.js","sources":["../../../src/components/ai-scenario-panel/ai-scenario-panel.ts"],"sourcesContent":["/**\n * @element ai-scenario-panel\n * What-if scenario comparison panel. Clean list with probability, outcome, and status.\n *\n * @fires {CustomEvent<{id: string}>} ai-scenario-select\n * @fires {CustomEvent<{id: string}>} ai-scenario-run\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\ninterface Scenario {\n  id: string;\n  label: string;\n  description?: string;\n  probability?: number;\n  outcome?: string;\n  status?: 'idle' | 'running' | 'complete' | 'error';\n}\n\n@customElement('ai-scenario-panel')\nexport class AiScenarioPanel extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    :host { display: block; }\n\n    .panel {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      overflow: hidden;\n    }\n\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-20) var(--cg-spacing-20) var(--cg-spacing-12);\n    }\n    .header-title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* Scenarios list */\n    .scenarios {\n      margin: 0 var(--cg-spacing-12) var(--cg-spacing-12);\n      background: var(--cg-overlay-dark-subtle);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-125);\n      overflow: hidden;\n    }\n\n    .scenario {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-16) var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .scenario:last-child { border-bottom: none; }\n    .scenario:hover { background: var(--cg-color-action-secondary-background-hover); }\n    .scenario.active {\n      background: var(--cg-overlay-dark-subtle);\n    }\n    .scenario:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 var(--cg-outline-width-default) var(--cg-overlay-accent-strong);\n    }\n\n    .scenario-info { flex: 1; min-width: 0; }\n    .scenario-label {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n    }\n    .scenario-desc {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-2);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    /* Right side metrics */\n    .scenario-metrics {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-16);\n      flex-shrink: 0;\n    }\n    .metric {\n      text-align: right;\n    }\n    .metric-val {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-base-text);\n    }\n    .metric-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* Status dot */\n    .status-dot {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      flex-shrink: 0;\n    }\n    .status-dot.idle { background: var(--cg-color-input-text-placeholder); }\n    .status-dot.running { background: var(--cg-color-status-warning-text-default); }\n    .status-dot.complete { background: var(--cg-color-status-success-text-default); }\n    .status-dot.error { background: var(--cg-color-status-error-text-default); }\n\n    /* Footer */\n    .footer {\n      padding: var(--cg-spacing-12);\n    }\n\n    .empty {\n      padding: var(--cg-spacing-32) var(--cg-spacing-20);\n      text-align: center;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n    }\n  `];\n\n  @property({ type: Array }) scenarios: Scenario[] = [];\n  @property() activeScenario = '';\n  @property({ type: Boolean }) loading = false;\n\n  private _select(id: string) {\n    this.activeScenario = id;\n    this.dispatchEvent(new CustomEvent('ai-scenario-select', { bubbles: true, composed: true, detail: { id } }));\n  }\n\n  override render() {\n    if (this.loading) {\n      return html`<div class=\"panel\"><div class=\"empty\">Loading scenarios...</div></div>`;\n    }\n\n    if (!this.scenarios.length) {\n      return html`<div class=\"panel\"><div class=\"empty\">No scenarios available.</div></div>`;\n    }\n\n    return html`\n      <div class=\"panel\" role=\"listbox\" aria-label=\"Scenarios\">\n        <div class=\"header\">\n          <span class=\"header-title\">Scenarios</span>\n        </div>\n        <div class=\"scenarios\">\n          ${this.scenarios.map(s => html`\n            <div class=\"scenario ${s.id === this.activeScenario ? 'active' : ''}\"\n              role=\"option\" tabindex=\"0\"\n              aria-selected=\"${s.id === this.activeScenario}\"\n              @click=${() => this._select(s.id)}\n              @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._select(s.id); } }}>\n              <span class=\"status-dot ${s.status || 'idle'}\"></span>\n              <div class=\"scenario-info\">\n                <div class=\"scenario-label\">${s.label}</div>\n                ${s.description ? html`<div class=\"scenario-desc\">${s.description}</div>` : nothing}\n              </div>\n              <div class=\"scenario-metrics\">\n                ${s.probability != null ? html`\n                  <div class=\"metric\">\n                    <div class=\"metric-val\">${Math.round(s.probability * 100)}%</div>\n                    <div class=\"metric-label\">Prob</div>\n                  </div>\n                ` : nothing}\n                ${s.outcome ? html`\n                  <div class=\"metric\">\n                    <div class=\"metric-val\">${s.outcome}</div>\n                    <div class=\"metric-label\">Outcome</div>\n                  </div>\n                ` : nothing}\n              </div>\n            </div>\n          `)}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiScenarioPanel","LitElement","id","html","s","nothing","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAqBO,IAAMA,IAAN,cAA8BC,EAAW;AAAA,EAAzC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgHsB,KAAA,YAAwB,CAAA,GACvC,KAAA,iBAAiB,IACA,KAAA,UAAU;AAAA,EAAA;AAAA,EAE/B,QAAQC,GAAY;AAC1B,SAAK,iBAAiBA,GACtB,KAAK,cAAc,IAAI,YAAY,sBAAsB,EAAE,SAAS,IAAM,UAAU,IAAM,QAAQ,EAAE,IAAAA,EAAA,EAAG,CAAG,CAAC;AAAA,EAC7G;AAAA,EAES,SAAS;AAChB,WAAI,KAAK,UACAC,4EAGJ,KAAK,UAAU,SAIbA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMC,KAAK,UAAU,IAAI,CAAAC,MAAKD;AAAA,mCACDC,EAAE,OAAO,KAAK,iBAAiB,WAAW,EAAE;AAAA;AAAA,+BAEhDA,EAAE,OAAO,KAAK,cAAc;AAAA,uBACpC,MAAM,KAAK,QAAQA,EAAE,EAAE,CAAC;AAAA,yBACtB,CAAC,MAAqB;AAAE,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SAAO,EAAE,eAAA,GAAkB,KAAK,QAAQA,EAAE,EAAE;AAAA,IAAK,CAAC;AAAA,wCAC9FA,EAAE,UAAU,MAAM;AAAA;AAAA,8CAEZA,EAAE,KAAK;AAAA,kBACnCA,EAAE,cAAcD,+BAAkCC,EAAE,WAAW,WAAWC,CAAO;AAAA;AAAA;AAAA,kBAGjFD,EAAE,eAAe,OAAOD;AAAA;AAAA,8CAEI,KAAK,MAAMC,EAAE,cAAc,GAAG,CAAC;AAAA;AAAA;AAAA,oBAGzDC,CAAO;AAAA,kBACTD,EAAE,UAAUD;AAAA;AAAA,8CAEgBC,EAAE,OAAO;AAAA;AAAA;AAAA,oBAGnCC,CAAO;AAAA;AAAA;AAAA,WAGhB,CAAC;AAAA;AAAA;AAAA,QAnCCF;AAAA,EAuCX;AACF;AAvKaH,EACK,SAAS,CAACM,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA6GnD;AAE0BC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAhHdV,EAgHgB,WAAA,aAAA,CAAA;AACfS,EAAA;AAAA,EAAXC,EAAA;AAAS,GAjHCV,EAiHC,WAAA,kBAAA,CAAA;AACiBS,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAlHhBV,EAkHkB,WAAA,WAAA,CAAA;AAlHlBA,IAANS,EAAA;AAAA,EADNE,EAAc,mBAAmB;AAAA,GACrBX,CAAA;"}

package/dist/components/ai-search/ai-search.js

@@ -1,6 +1,6 @@
 import { css as u, LitElement as v, nothing as c, html as s } from "lit";
 import { property as l, state as h, customElement as p } from "lit/decorators.js";
-import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as f, r as b } from "../../chunks/premium.css-DHekUEUt.js";
 var _ = Object.defineProperty, m = Object.getOwnPropertyDescriptor, o = (e, n, t, r) => {
   for (var i = r > 1 ? void 0 : r ? m(n, t) : n, d = e.length - 1, g; d >= 0; d--)
     (g = e[d]) && (i = (r ? g(n, t, i) : g(i)) || i);

package/dist/components/ai-segmentation-viewer/ai-segmentation-viewer.js

@@ -1,6 +1,6 @@
 import { css as p, LitElement as v, nothing as g, html as c } from "lit";
 import { property as n, customElement as u } 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, w = Object.getOwnPropertyDescriptor, i = (r, e, a, t) => {
   for (var o = t > 1 ? void 0 : t ? w(e, a) : e, l = r.length - 1, d; l >= 0; l--)
     (d = r[l]) && (o = (t ? d(e, a, o) : d(o)) || o);
@@ -123,7 +123,7 @@ s.styles = [h, b, p`
     }
     .legend-title {
       font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);
-      color: var(--cg-color-surface-container-outlined);
+      color: var(--cg-color-surface-cards-text);
       text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);
     }
     .legend-items { display: flex; flex-wrap: wrap; gap: var(--cg-spacing-8); }
@@ -134,7 +134,7 @@ s.styles = [h, b, p`
       border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
       background: transparent;
       font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);
-      color: var(--cg-color-surface-container-outlined);
+      color: var(--cg-color-surface-cards-text);
       cursor: pointer;
       transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }

package/dist/components/ai-segmentation-viewer/ai-segmentation-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-segmentation-viewer.js","sources":["../../../src/components/ai-segmentation-viewer/ai-segmentation-viewer.ts"],"sourcesContent":["/**\n * @element ai-segmentation-viewer\n * Image segmentation viewer with colored mask overlays, legend, visibility toggles, and opacity control.\n *\n * @fires {CustomEvent<{id: string, label: string}>} ai-segment-select\n * @fires {CustomEvent<{id: string, visible: boolean}>} ai-segment-toggle\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface SegmentMask {\n  id: string;\n  label: string;\n  color: string;\n  visible?: boolean;\n}\n\n@customElement('ai-segmentation-viewer')\nexport class AiSegmentationViewer extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .panel {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      overflow: hidden;\n    }\n\n    .header {\n      padding: var(--cg-spacing-16) var(--cg-spacing-24);\n    }\n    .header-title {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* ── Canvas ── */\n    .canvas-wrap {\n      position: relative; overflow: hidden;\n      background: var(--cg-color-surface-base-background);\n    }\n    .canvas-wrap img { display: block; width: 100%; height: auto; }\n    .mask-overlay {\n      position: absolute; inset: 0; pointer-events: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .mask-overlay.selected {\n      outline: var(--cg-border-width-100) solid var(--cg-color-action-primary-background-default);\n      outline-offset: calc(-1 * var(--cg-spacing-2));\n    }\n\n    /* ── Opacity slider ── */\n    .opacity-row {\n      padding: var(--cg-spacing-4) var(--cg-spacing-16);\n    }\n\n    /* ── Legend ── */\n    .legend {\n      padding: var(--cg-spacing-16) var(--cg-spacing-24);\n      display: flex; flex-direction: column; gap: var(--cg-spacing-12);\n    }\n    .legend-title {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .legend-items { display: flex; flex-wrap: wrap; gap: var(--cg-spacing-8); }\n    .legend-item {\n      display: inline-flex; align-items: center; gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-6) var(--cg-spacing-16);\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;\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\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);\n    }\n    .legend-item:hover { border-color: var(--cg-color-surface-cards-hover-border); color: var(--cg-color-surface-base-text); }\n    .legend-item.selected { border-color: var(--cg-color-action-primary-background-default); color: var(--cg-color-surface-base-text); }\n    .legend-item.hidden { opacity: 0.4; }\n    .legend-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n    .legend-swatch { width: var(--cg-spacing-8); height: var(--cg-spacing-8); border-radius: var(--cg-border-radius-full); flex-shrink: 0; }\n    .legend-toggle {\n      background: none; border: none; padding: 0; color: inherit; cursor: pointer;\n      display: flex; align-items: center;\n    }\n    .legend-toggle svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\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\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property() src = '';\n  @property({ type: Array }) masks: SegmentMask[] = [];\n  @property() selectedMask = '';\n  @property({ type: Number }) opacity = 0.4;\n  @property({ type: Boolean }) showLabels = false;\n  @property({ type: Boolean }) showLegend = false;\n\n  private _selectMask(mask: SegmentMask) {\n    this.selectedMask = mask.id;\n    this.dispatchEvent(new CustomEvent('ai-segment-select', { bubbles: true, composed: true, detail: { id: mask.id, label: mask.label } }));\n  }\n\n  private _toggleMask(mask: SegmentMask, e: Event) {\n    e.stopPropagation();\n    const newVisible = !(mask.visible !== false);\n    this.masks = this.masks.map(m => m.id === mask.id ? { ...m, visible: newVisible } : m);\n    this.dispatchEvent(new CustomEvent('ai-segment-toggle', { bubbles: true, composed: true, detail: { id: mask.id, visible: newVisible } }));\n  }\n\n  override render() {\n    const visibleMasks = this.masks.filter(m => m.visible !== false);\n\n    return html`\n      <div class=\"panel\">\n        <div class=\"header\">\n          <span class=\"header-title\">Segmentation</span>\n        </div>\n\n        <div class=\"canvas-wrap\">\n          ${this.src ? html`<img src=${this.src} alt=\"Segmentation source\" />` : nothing}\n          ${visibleMasks.map(m => html`\n            <div class=\"mask-overlay ${m.id === this.selectedMask ? 'selected' : ''}\"\n              style=\"background: ${m.color}; opacity: ${this.opacity};\"></div>\n          `)}\n        </div>\n\n        <div class=\"opacity-row\">\n          <cg-slider\n            label=\"Opacity\"\n            value=\"${Math.round(this.opacity * 100)}\"\n            min=\"0\" max=\"100\"\n            unit=\"%\"\n            size=\"sm\"\n            showValue\n            .showTooltip=${false}\n            .showRange=${false}\n            @cg-change=${(e: CustomEvent) => { this.opacity = e.detail.value / 100; }}\n          ></cg-slider>\n        </div>\n\n        ${this.showLegend ? html`\n          <div class=\"legend\">\n            <span class=\"legend-title\">Masks</span>\n            <div class=\"legend-items\">\n              ${this.masks.map(m => html`\n                <div class=\"legend-item ${m.id === this.selectedMask ? 'selected' : ''} ${m.visible === false ? 'hidden' : ''}\"\n                  tabindex=\"0\" role=\"button\"\n                  @click=${() => this._selectMask(m)}\n                  @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._selectMask(m); } }}>\n                  <span class=\"legend-swatch\" style=\"background: ${m.color}\"></span>\n                  ${m.label}\n                  <button class=\"legend-toggle\" @click=${(e: Event) => this._toggleMask(m, e)}\n                    aria-label=\"${m.visible !== false ? 'Hide' : 'Show'} ${m.label}\">\n                    ${m.visible !== false ? html`\n                      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\n                    ` : html`\n                      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"/><line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/></svg>\n                    `}\n                  </button>\n                </div>\n              `)}\n            </div>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiSegmentationViewer","LitElement","mask","newVisible","m","visibleMasks","html","nothing","e","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-segmentation-viewer.js","sources":["../../../src/components/ai-segmentation-viewer/ai-segmentation-viewer.ts"],"sourcesContent":["/**\n * @element ai-segmentation-viewer\n * Image segmentation viewer with colored mask overlays, legend, visibility toggles, and opacity control.\n *\n * @fires {CustomEvent<{id: string, label: string}>} ai-segment-select\n * @fires {CustomEvent<{id: string, visible: boolean}>} ai-segment-toggle\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface SegmentMask {\n  id: string;\n  label: string;\n  color: string;\n  visible?: boolean;\n}\n\n@customElement('ai-segmentation-viewer')\nexport class AiSegmentationViewer extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .panel {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      overflow: hidden;\n    }\n\n    .header {\n      padding: var(--cg-spacing-16) var(--cg-spacing-24);\n    }\n    .header-title {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* ── Canvas ── */\n    .canvas-wrap {\n      position: relative; overflow: hidden;\n      background: var(--cg-color-surface-base-background);\n    }\n    .canvas-wrap img { display: block; width: 100%; height: auto; }\n    .mask-overlay {\n      position: absolute; inset: 0; pointer-events: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .mask-overlay.selected {\n      outline: var(--cg-border-width-100) solid var(--cg-color-action-primary-background-default);\n      outline-offset: calc(-1 * var(--cg-spacing-2));\n    }\n\n    /* ── Opacity slider ── */\n    .opacity-row {\n      padding: var(--cg-spacing-4) var(--cg-spacing-16);\n    }\n\n    /* ── Legend ── */\n    .legend {\n      padding: var(--cg-spacing-16) var(--cg-spacing-24);\n      display: flex; flex-direction: column; gap: var(--cg-spacing-12);\n    }\n    .legend-title {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-cards-text);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .legend-items { display: flex; flex-wrap: wrap; gap: var(--cg-spacing-8); }\n    .legend-item {\n      display: inline-flex; align-items: center; gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-6) var(--cg-spacing-16);\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;\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-cards-text);\n      cursor: pointer;\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);\n    }\n    .legend-item:hover { border-color: var(--cg-color-surface-cards-hover-border); color: var(--cg-color-surface-base-text); }\n    .legend-item.selected { border-color: var(--cg-color-action-primary-background-default); color: var(--cg-color-surface-base-text); }\n    .legend-item.hidden { opacity: 0.4; }\n    .legend-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n    .legend-swatch { width: var(--cg-spacing-8); height: var(--cg-spacing-8); border-radius: var(--cg-border-radius-full); flex-shrink: 0; }\n    .legend-toggle {\n      background: none; border: none; padding: 0; color: inherit; cursor: pointer;\n      display: flex; align-items: center;\n    }\n    .legend-toggle svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\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\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property() src = '';\n  @property({ type: Array }) masks: SegmentMask[] = [];\n  @property() selectedMask = '';\n  @property({ type: Number }) opacity = 0.4;\n  @property({ type: Boolean }) showLabels = false;\n  @property({ type: Boolean }) showLegend = false;\n\n  private _selectMask(mask: SegmentMask) {\n    this.selectedMask = mask.id;\n    this.dispatchEvent(new CustomEvent('ai-segment-select', { bubbles: true, composed: true, detail: { id: mask.id, label: mask.label } }));\n  }\n\n  private _toggleMask(mask: SegmentMask, e: Event) {\n    e.stopPropagation();\n    const newVisible = !(mask.visible !== false);\n    this.masks = this.masks.map(m => m.id === mask.id ? { ...m, visible: newVisible } : m);\n    this.dispatchEvent(new CustomEvent('ai-segment-toggle', { bubbles: true, composed: true, detail: { id: mask.id, visible: newVisible } }));\n  }\n\n  override render() {\n    const visibleMasks = this.masks.filter(m => m.visible !== false);\n\n    return html`\n      <div class=\"panel\">\n        <div class=\"header\">\n          <span class=\"header-title\">Segmentation</span>\n        </div>\n\n        <div class=\"canvas-wrap\">\n          ${this.src ? html`<img src=${this.src} alt=\"Segmentation source\" />` : nothing}\n          ${visibleMasks.map(m => html`\n            <div class=\"mask-overlay ${m.id === this.selectedMask ? 'selected' : ''}\"\n              style=\"background: ${m.color}; opacity: ${this.opacity};\"></div>\n          `)}\n        </div>\n\n        <div class=\"opacity-row\">\n          <cg-slider\n            label=\"Opacity\"\n            value=\"${Math.round(this.opacity * 100)}\"\n            min=\"0\" max=\"100\"\n            unit=\"%\"\n            size=\"sm\"\n            showValue\n            .showTooltip=${false}\n            .showRange=${false}\n            @cg-change=${(e: CustomEvent) => { this.opacity = e.detail.value / 100; }}\n          ></cg-slider>\n        </div>\n\n        ${this.showLegend ? html`\n          <div class=\"legend\">\n            <span class=\"legend-title\">Masks</span>\n            <div class=\"legend-items\">\n              ${this.masks.map(m => html`\n                <div class=\"legend-item ${m.id === this.selectedMask ? 'selected' : ''} ${m.visible === false ? 'hidden' : ''}\"\n                  tabindex=\"0\" role=\"button\"\n                  @click=${() => this._selectMask(m)}\n                  @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._selectMask(m); } }}>\n                  <span class=\"legend-swatch\" style=\"background: ${m.color}\"></span>\n                  ${m.label}\n                  <button class=\"legend-toggle\" @click=${(e: Event) => this._toggleMask(m, e)}\n                    aria-label=\"${m.visible !== false ? 'Hide' : 'Show'} ${m.label}\">\n                    ${m.visible !== false ? html`\n                      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\n                    ` : html`\n                      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"/><line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/></svg>\n                    `}\n                  </button>\n                </div>\n              `)}\n            </div>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiSegmentationViewer","LitElement","mask","newVisible","m","visibleMasks","html","nothing","e","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAmBO,IAAMA,IAAN,cAAmCC,EAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA,GA6EwB,KAAA,UAAuC,MACxD,KAAA,MAAM,IACS,KAAA,QAAuB,CAAA,GACtC,KAAA,eAAe,IACC,KAAA,UAAU,KACT,KAAA,aAAa,IACb,KAAA,aAAa;AAAA,EAAA;AAAA,EAElC,YAAYC,GAAmB;AACrC,SAAK,eAAeA,EAAK,IACzB,KAAK,cAAc,IAAI,YAAY,qBAAqB,EAAE,SAAS,IAAM,UAAU,IAAM,QAAQ,EAAE,IAAIA,EAAK,IAAI,OAAOA,EAAK,MAAA,EAAM,CAAG,CAAC;AAAA,EACxI;AAAA,EAEQ,YAAYA,GAAmB,GAAU;AAC/C,MAAE,gBAAA;AACF,UAAMC,IAAeD,EAAK,YAAY;AACtC,SAAK,QAAQ,KAAK,MAAM,IAAI,OAAKE,EAAE,OAAOF,EAAK,KAAK,EAAE,GAAGE,GAAG,SAASD,EAAA,IAAeC,CAAC,GACrF,KAAK,cAAc,IAAI,YAAY,qBAAqB,EAAE,SAAS,IAAM,UAAU,IAAM,QAAQ,EAAE,IAAIF,EAAK,IAAI,SAASC,EAAA,EAAW,CAAG,CAAC;AAAA,EAC1I;AAAA,EAES,SAAS;AAChB,UAAME,IAAe,KAAK,MAAM,OAAO,CAAAD,MAAKA,EAAE,YAAY,EAAK;AAE/D,WAAOE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOC,KAAK,MAAMA,aAAgB,KAAK,GAAG,kCAAkCC,CAAO;AAAA,YAC5EF,EAAa,IAAI,CAAAD,MAAKE;AAAA,uCACKF,EAAE,OAAO,KAAK,eAAe,aAAa,EAAE;AAAA,mCAChDA,EAAE,KAAK,cAAc,KAAK,OAAO;AAAA,WACzD,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMS,KAAK,MAAM,KAAK,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKxB,EAAK;AAAA,yBACP,EAAK;AAAA,yBACL,CAAC,MAAmB;AAAE,WAAK,UAAU,EAAE,OAAO,QAAQ;AAAA,IAAK,CAAC;AAAA;AAAA;AAAA;AAAA,UAI3E,KAAK,aAAaE;AAAA;AAAA;AAAA;AAAA,gBAIZ,KAAK,MAAM,IAAI,CAAAF,MAAKE;AAAA,0CACMF,EAAE,OAAO,KAAK,eAAe,aAAa,EAAE,IAAIA,EAAE,YAAY,KAAQ,WAAW,EAAE;AAAA;AAAA,2BAElG,MAAM,KAAK,YAAYA,CAAC,CAAC;AAAA,6BACvB,CAACI,MAAqB;AAAE,OAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SAAOA,EAAE,eAAA,GAAkB,KAAK,YAAYJ,CAAC;AAAA,IAAK,CAAC;AAAA,mEACxEA,EAAE,KAAK;AAAA,oBACtDA,EAAE,KAAK;AAAA,yDAC8B,CAACI,MAAa,KAAK,YAAYJ,GAAGI,CAAC,CAAC;AAAA,kCAC3DJ,EAAE,YAAY,KAAQ,SAAS,MAAM,IAAIA,EAAE,KAAK;AAAA,sBAC5DA,EAAE,YAAY,KAAQE;AAAA;AAAA,wBAEpBA;AAAA;AAAA,qBAEH;AAAA;AAAA;AAAA,eAGN,CAAC;AAAA;AAAA;AAAA,YAGJC,CAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AA3JaP,EACK,SAAS,CAACS,GAAWC,GAAeC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0EnD;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA7EhBb,EA6EkB,WAAA,WAAA,CAAA;AACjBY,EAAA;AAAA,EAAXC,EAAA;AAAS,GA9ECb,EA8EC,WAAA,OAAA,CAAA;AACeY,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GA/Edb,EA+EgB,WAAA,SAAA,CAAA;AACfY,EAAA;AAAA,EAAXC,EAAA;AAAS,GAhFCb,EAgFC,WAAA,gBAAA,CAAA;AACgBY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjFfb,EAiFiB,WAAA,WAAA,CAAA;AACCY,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAlFhBb,EAkFkB,WAAA,cAAA,CAAA;AACAY,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAnFhBb,EAmFkB,WAAA,cAAA,CAAA;AAnFlBA,IAANY,EAAA;AAAA,EADNE,EAAc,wBAAwB;AAAA,GAC1Bd,CAAA;"}

package/dist/components/ai-sidebar/ai-sidebar.js

@@ -1,6 +1,6 @@
 import { css as n, LitElement as h, html as b } from "lit";
 import { property as c, customElement as m } from "lit/decorators.js";
-import { h as u } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as u } from "../../chunks/premium.css-DHekUEUt.js";
 import "../ai-app-sidebar/ai-app-sidebar.js";
 var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (e, i, r, a) => {
   for (var t = a > 1 ? void 0 : a ? f(i, r) : i, l = e.length - 1, p; l >= 0; l--)

package/dist/components/ai-similarity-card/ai-similarity-card.js

@@ -1,6 +1,6 @@
 import { css as u, LitElement as v, nothing as n, html as i } from "lit";
 import { property as o, customElement as p } from "lit/decorators.js";
-import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as f, r as b } from "../../chunks/premium.css-DHekUEUt.js";
 var m = Object.defineProperty, h = Object.getOwnPropertyDescriptor, c = (r, a, t, d) => {
   for (var s = d > 1 ? void 0 : d ? h(a, t) : a, l = r.length - 1, g; l >= 0; l--)
     (g = r[l]) && (s = (d ? g(a, t, s) : g(s)) || s);

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

@@ -1,6 +1,6 @@
 import { css as g, LitElement as u, html as c, nothing as p } from "lit";
 import { property as l, state as v, customElement as h } from "lit/decorators.js";
-import { h as f, r as b, f as m } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as f, r as b, f as m } from "../../chunks/premium.css-DHekUEUt.js";
 var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (a, e, t, o) => {
   for (var r = o > 1 ? void 0 : o ? w(e, t) : e, n = a.length - 1, d; n >= 0; n--)
     (d = a[n]) && (r = (o ? d(e, t, r) : d(r)) || r);
@@ -181,7 +181,7 @@ i.styles = [f, b, m, g`
 
     /* Excerpt */
     .excerpt {
-      font-size: var(--cg-font-size-xs);
+      font-size: var(--cg-font-size-sm);
       color: var(--cg-color-input-text-placeholder);
       line-height: var(--cg-line-height-normal);
       margin-top: var(--cg-spacing-4);

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

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

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

@@ -1,15 +1,15 @@
 import { css as u, LitElement as p, nothing as n, html as s } from "lit";
 import { property as g, state as v, customElement as h } from "lit/decorators.js";
-import { h as m, r as f, f as y } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as m, r as f, f as y } from "../../chunks/premium.css-DHekUEUt.js";
 import "../cg-card/cg-card.js";
 import "../cg-text/cg-text.js";
 import "../cg-stack/cg-stack.js";
-var b = Object.defineProperty, x = Object.getOwnPropertyDescriptor, c = (t, i, r, a) => {
+var b = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (t, i, r, a) => {
   for (var e = a > 1 ? void 0 : a ? x(i, r) : i, o = t.length - 1, d; o >= 0; o--)
     (d = t[o]) && (e = (a ? d(i, r, e) : d(e)) || e);
   return a && e && b(i, r, e), e;
 };
-let l = class extends p {
+let c = class extends p {
   constructor() {
     super(...arguments), this.services = [], this._hasIncident = !1;
   }
@@ -99,7 +99,7 @@ let l = class extends p {
     `;
   }
 };
-l.styles = [m, f, y, u`
+c.styles = [m, f, y, u`
     :host {
       animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
       display: block;
@@ -161,7 +161,7 @@ l.styles = [m, f, y, u`
       align-items: center;
       padding: var(--cg-spacing-2) var(--cg-spacing-8);
       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;
@@ -269,7 +269,7 @@ l.styles = [m, f, y, u`
       background: var(--cg-color-status-success-text-default);
       opacity: 0.35;
     }
-    .history-day.day-operational:hover { opacity: 0.6; }
+    .history-day.day-operational:hover { opacity: var(--cg-opacity-60); }
     /* Incident days: full opacity, eye locks on */
     .history-day.day-degraded     { background: var(--cg-color-status-warning-text-default); opacity: 1; }
     .history-day.day-down         { background: var(--cg-color-status-error-text-default); opacity: 1; }
@@ -286,19 +286,19 @@ l.styles = [m, f, y, u`
       border: 0;
     }
   `];
-c([
+l([
   g({ type: Array })
-], l.prototype, "services", 2);
-c([
+], c.prototype, "services", 2);
+l([
   g({ attribute: "last-updated" })
-], l.prototype, "lastUpdated", 2);
-c([
+], c.prototype, "lastUpdated", 2);
+l([
   v()
-], l.prototype, "_hasIncident", 2);
-l = c([
+], c.prototype, "_hasIncident", 2);
+c = l([
   h("ai-status-page")
-], l);
+], c);
 export {
-  l as AiStatusPage
+  c as AiStatusPage
 };
 //# sourceMappingURL=ai-status-page.js.map