@cognivo/components 0.8.0

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

@@ -0,0 +1,285 @@
+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;
+};
+let e = class extends v {
+  constructor() {
+    super(...arguments), this.role = "assistant", this.text = "", this.cards = [], this.avatar = "", this.timestamp = "", this.actions = [];
+  }
+  _dispatch(a, r) {
+    this.dispatchEvent(new CustomEvent(a, { bubbles: !0, composed: !0, detail: r }));
+  }
+  _handleAction(a) {
+    this._dispatch("ai-message-action", { actionId: a });
+  }
+  _avatarFallback() {
+    return this.role === "assistant" ? "AI" : this.role === "user" ? "U" : "S";
+  }
+  _renderAvatar() {
+    return t`
+      <div class="avatar ${this.role}" aria-hidden="true">
+        ${this.avatar ? t`<img src=${this.avatar} alt="${this.role} avatar">` : this._avatarFallback()}
+      </div>
+    `;
+  }
+  _renderText() {
+    if (!this.text) return d;
+    const a = this.text.split(`
+
+`).filter(Boolean);
+    return t`
+      <div class="text">
+        ${a.map((r) => t`<p>${r}</p>`)}
+      </div>
+    `;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._cardAbort?.abort();
+  }
+  _isValidCardType(a) {
+    return typeof a == "string" && a.includes("-") && e._allowedCardTypes.has(a);
+  }
+  _renderCards() {
+    if (this.cards.length === 0) return d;
+    this._cardAbort?.abort(), this._cardAbort = new AbortController();
+    const a = this._cardAbort.signal;
+    return t`
+      <div class="cards">
+        ${this.cards.map((r, n) => {
+      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) => {
+          this._dispatch("ai-message-card-action", {
+            cardIndex: n,
+            action: i.detail?.action,
+            data: i.detail?.data
+          });
+        }), { signal: a }), o;
+      } catch {
+        return t`<div style="padding:8px;font-size:12px;color:var(--cg-color-input-text-placeholder,#71717a);">Card unavailable</div>`;
+      }
+    })}
+      </div>
+    `;
+  }
+  _renderActions() {
+    return this.actions.length === 0 ? d : t`
+      <div class="actions" role="group" aria-label="Message actions">
+        ${this.actions.map((a) => t`
+          <button
+            class="action-btn"
+            @click=${() => this._handleAction(a.id)}
+            aria-label="${a.label}"
+          >${a.label}</button>
+        `)}
+      </div>
+    `;
+  }
+  render() {
+    return t`
+      <div
+        class="message ${this.role}"
+        role="article"
+        aria-label="${this.role} message"
+        tabindex="0"
+      >
+        ${this._renderAvatar()}
+        <div class="bubble">
+          <div class="bubble-body">
+            ${this._renderText()}
+            <slot></slot>
+          </div>
+          ${this._renderCards()}
+          ${this._renderActions()}
+          ${this.timestamp ? t`<div class="timestamp">${this.timestamp}</div>` : d}
+        </div>
+      </div>
+    `;
+  }
+};
+e.styles = [p, h, f, u`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    .message {
+      display: flex;
+      gap: var(--cg-spacing-12);
+      max-width: 100%;
+    }
+    .message.user { flex-direction: row-reverse; }
+
+    /* ── Avatar ── */
+    .avatar {
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-bold);
+      flex-shrink: 0;
+      overflow: hidden;
+    }
+    .avatar.assistant {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-surface-base-background);
+    }
+    .avatar.user {
+      background: var(--cg-color-surface-cards-border);
+      color: var(--cg-color-surface-base-text);
+    }
+    .avatar.system {
+      background: var(--cg-color-surface-container-background);
+      color: var(--cg-color-input-text-placeholder);
+    }
+    .avatar img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    /* ── Bubble ── */
+    .bubble {
+      flex: 1;
+      min-width: 0;
+      max-width: 80%;
+    }
+    .message.user .bubble { max-width: 70%; }
+
+    .bubble-body {
+      border-radius: var(--cg-border-radius-150);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      font-size: var(--cg-font-size-sm);
+      line-height: 1.6;
+      color: var(--cg-color-surface-base-text);
+    }
+    .message.assistant .bubble-body {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    .message.user .bubble-body {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-surface-base-background);
+      border-radius: var(--cg-border-radius-150) var(--cg-border-radius-150) var(--cg-border-radius-50) var(--cg-border-radius-150);
+    }
+    .message.system .bubble-body {
+      background: var(--cg-color-surface-base-background);
+      border: 1px dashed var(--cg-color-surface-cards-border);
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-input-text-placeholder);
+      font-style: italic;
+    }
+
+    /* ── Text ── */
+    .text {
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+    .text p { margin: 0 0 var(--cg-spacing-8); }
+    .text p:last-child { margin-bottom: 0; }
+    .text code {
+      background: var(--cg-overlay-dark-medium);
+      padding: var(--cg-spacing-1) var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-50);
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-sm);
+    }
+    .message.user .text code {
+      background: var(--cg-overlay-dark-subtle);
+    }
+
+    /* ── Cards section ── */
+    .cards {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+      margin-top: var(--cg-spacing-8);
+    }
+
+    /* ── Action buttons ── */
+    .actions {
+      padding-top: var(--cg-spacing-12);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--cg-spacing-6);
+      margin-top: var(--cg-spacing-8);
+    }
+    .action-btn {
+      padding: var(--cg-spacing-6) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-100);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      background: var(--cg-color-surface-container-background);
+      color: var(--cg-color-surface-base-text);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      cursor: pointer;
+      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);
+    }
+    .action-btn:hover {
+      background: var(--cg-color-surface-cards-border);
+      border-color: var(--cg-color-surface-base-text);
+    }
+    .action-btn:focus-visible {
+      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
+    }
+
+    /* ── Timestamp ── */
+    .timestamp {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      margin-top: var(--cg-spacing-6);
+    }
+    .message.user .timestamp { text-align: right; }
+
+  `];
+e._allowedCardTypes = /* @__PURE__ */ new Set([
+  "ai-tool-card",
+  "ai-chart-card",
+  "ai-code-card",
+  "ai-data-card",
+  "ai-file-card",
+  "ai-image-card",
+  "ai-link-card",
+  "ai-map-card",
+  "ai-search-card",
+  "ai-weather-card",
+  "ai-progress-card",
+  "ai-summary-card",
+  "ai-table-card",
+  "ai-metric-card"
+]);
+s([
+  c({ type: String })
+], e.prototype, "role", 2);
+s([
+  c({ type: String })
+], e.prototype, "text", 2);
+s([
+  c({ attribute: !1 })
+], e.prototype, "cards", 2);
+s([
+  c({ type: String })
+], e.prototype, "avatar", 2);
+s([
+  c({ type: String })
+], e.prototype, "timestamp", 2);
+s([
+  c({ attribute: !1 })
+], e.prototype, "actions", 2);
+e = s([
+  b("ai-rich-message")
+], e);
+export {
+  e as AiRichMessage
+};
+//# sourceMappingURL=ai-rich-message.js.map

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

@@ -0,0 +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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"}

package/dist/components/ai-scenario-panel/ai-scenario-panel.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+interface Scenario {
+    id: string;
+    label: string;
+    description?: string;
+    probability?: number;
+    outcome?: string;
+    status?: 'idle' | 'running' | 'complete' | 'error';
+}
+export declare class AiScenarioPanel extends LitElement {
+    static styles: import('lit').CSSResult[];
+    scenarios: Scenario[];
+    activeScenario: string;
+    loading: boolean;
+    private _select;
+    render(): import('lit').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=ai-scenario-panel.d.ts.map

package/dist/components/ai-scenario-panel/ai-scenario-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-scenario-panel.d.ts","sourceRoot":"","sources":["../../../src/components/ai-scenario-panel/ai-scenario-panel.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;CACpD;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BA6GnB;IAEwB,SAAS,EAAE,QAAQ,EAAE,CAAM;IAC1C,cAAc,SAAM;IACH,OAAO,UAAS;IAE7C,OAAO,CAAC,OAAO;IAKN,MAAM;CA8ChB"}

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

@@ -0,0 +1,182 @@
+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;
+};
+let o = class extends p {
+  constructor() {
+    super(...arguments), this.scenarios = [], this.activeScenario = "", this.loading = !1;
+  }
+  _select(r) {
+    this.activeScenario = r, this.dispatchEvent(new CustomEvent("ai-scenario-select", { bubbles: !0, composed: !0, detail: { id: r } }));
+  }
+  render() {
+    return this.loading ? i`<div class="panel"><div class="empty">Loading scenarios...</div></div>` : this.scenarios.length ? i`
+      <div class="panel" role="listbox" aria-label="Scenarios">
+        <div class="header">
+          <span class="header-title">Scenarios</span>
+        </div>
+        <div class="scenarios">
+          ${this.scenarios.map((r) => i`
+            <div class="scenario ${r.id === this.activeScenario ? "active" : ""}"
+              role="option" tabindex="0"
+              aria-selected="${r.id === this.activeScenario}"
+              @click=${() => this._select(r.id)}
+              @keydown=${(e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._select(r.id));
+    }}>
+              <span class="status-dot ${r.status || "idle"}"></span>
+              <div class="scenario-info">
+                <div class="scenario-label">${r.label}</div>
+                ${r.description ? i`<div class="scenario-desc">${r.description}</div>` : d}
+              </div>
+              <div class="scenario-metrics">
+                ${r.probability != null ? i`
+                  <div class="metric">
+                    <div class="metric-val">${Math.round(r.probability * 100)}%</div>
+                    <div class="metric-label">Prob</div>
+                  </div>
+                ` : d}
+                ${r.outcome ? i`
+                  <div class="metric">
+                    <div class="metric-val">${r.outcome}</div>
+                    <div class="metric-label">Outcome</div>
+                  </div>
+                ` : d}
+              </div>
+            </div>
+          `)}
+        </div>
+      </div>
+    ` : i`<div class="panel"><div class="empty">No scenarios available.</div></div>`;
+  }
+};
+o.styles = [f, b, g`
+    :host { display: block; }
+
+    .panel {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      overflow: hidden;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-20) var(--cg-spacing-20) var(--cg-spacing-12);
+    }
+    .header-title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    /* Scenarios list */
+    .scenarios {
+      margin: 0 var(--cg-spacing-12) var(--cg-spacing-12);
+      background: var(--cg-overlay-dark-subtle);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-125);
+      overflow: hidden;
+    }
+
+    .scenario {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-16) var(--cg-spacing-16);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      cursor: pointer;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .scenario:last-child { border-bottom: none; }
+    .scenario:hover { background: var(--cg-color-action-secondary-background-hover); }
+    .scenario.active {
+      background: var(--cg-overlay-dark-subtle);
+    }
+    .scenario:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);
+    }
+
+    .scenario-info { flex: 1; min-width: 0; }
+    .scenario-label {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+    }
+    .scenario-desc {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      margin-top: var(--cg-spacing-2);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    /* Right side metrics */
+    .scenario-metrics {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-16);
+      flex-shrink: 0;
+    }
+    .metric {
+      text-align: right;
+    }
+    .metric-val {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      font-family: var(--cg-font-family-mono);
+      color: var(--cg-color-surface-base-text);
+    }
+    .metric-label {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+    }
+
+    /* Status dot */
+    .status-dot {
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      flex-shrink: 0;
+    }
+    .status-dot.idle { background: var(--cg-color-input-text-placeholder); }
+    .status-dot.running { background: var(--cg-color-status-warning-text-default); }
+    .status-dot.complete { background: var(--cg-color-status-success-text-default); }
+    .status-dot.error { background: var(--cg-color-status-error-text-default); }
+
+    /* Footer */
+    .footer {
+      padding: var(--cg-spacing-12);
+    }
+
+    .empty {
+      padding: var(--cg-spacing-32) var(--cg-spacing-20);
+      text-align: center;
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-sm);
+    }
+  `];
+t([
+  v({ type: Array })
+], o.prototype, "scenarios", 2);
+t([
+  v()
+], o.prototype, "activeScenario", 2);
+t([
+  v({ type: Boolean })
+], o.prototype, "loading", 2);
+o = t([
+  u("ai-scenario-panel")
+], o);
+export {
+  o as AiScenarioPanel
+};
+//# sourceMappingURL=ai-scenario-panel.js.map

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

@@ -0,0 +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;"}

package/dist/components/ai-search/ai-search.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from 'lit';
+interface SearchResult {
+    title: string;
+    description?: string;
+    icon?: string;
+    url?: string;
+}
+export declare class AiSearch extends LitElement {
+    static styles: import('lit').CSSResult[];
+    size: 'md' | 'lg';
+    rounded: 'default' | 'full';
+    placeholder: string;
+    value: string;
+    suggestions: string[];
+    filters: string[];
+    recentSearches: string[];
+    results: SearchResult[];
+    private _query;
+    private _open;
+    private _highlightIndex;
+    private _activeFilters;
+    private _blurTimer;
+    disconnectedCallback(): void;
+    willUpdate(changed: Map<string, unknown>): void;
+    private _setQuery;
+    private _handleInput;
+    private _handleFocus;
+    private _handleBlur;
+    private _handleKeyDown;
+    private _selectHighlighted;
+    private _selectResult;
+    private _toggleFilter;
+    private _handleClear;
+    private _handleRecent;
+    render(): import('lit').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=ai-search.d.ts.map

package/dist/components/ai-search/ai-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-search.d.ts","sourceRoot":"","sources":["../../../src/components/ai-search/ai-search.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,4BAwLnB;IAC0B,IAAI,EAAE,IAAI,GAAG,IAAI,CAAQ;IACzB,OAAO,EAAE,SAAS,GAAG,MAAM,CAAa;IACzC,WAAW,EAAE,MAAM,CAAe;IAClC,KAAK,EAAE,MAAM,CAAM;IACpB,WAAW,EAAE,MAAM,EAAE,CAAM;IAC3B,OAAO,EAAE,MAAM,EAAE,CAAM;IACvB,cAAc,EAAE,MAAM,EAAE,CAAM;IAC9B,OAAO,EAAE,YAAY,EAAE,CAAM;IAE/C,OAAO,CAAC,MAAM,CAAc;IAC5B,OAAO,CAAC,KAAK,CAAkB;IAC/B,OAAO,CAAC,eAAe,CAAc;IACrC,OAAO,CAAC,cAAc,CAA0B;IAEzD,OAAO,CAAC,UAAU,CAAqB;IAE9B,oBAAoB;IAQpB,UAAU,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAQxD,OAAO,CAAC,SAAS;IASjB,OAAO,CAAC,YAAY;IAWpB,OAAO,CAAC,YAAY;IAEpB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,kBAAkB;IAY1B,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,YAAY;IAEpB,OAAO,CAAC,aAAa;IAKZ,MAAM;CA6FhB"}