@cognivo/components 0.8.0

package/dist/components/ai-prompt-template/ai-prompt-template.js

@@ -0,0 +1,288 @@
+import { css as g, LitElement as v, html as i, nothing as p } from "lit";
+import { property as l, state as u, customElement as b } from "lit/decorators.js";
+import { h as m, r as h, f } from "../../chunks/premium.css-9I4kHrsl.js";
+var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (e, a, n, t) => {
+  for (var r = t > 1 ? void 0 : t ? w(a, n) : a, o = e.length - 1, d; o >= 0; o--)
+    (d = e[o]) && (r = (t ? d(a, n, r) : d(r)) || r);
+  return t && r && x(a, n, r), r;
+};
+let s = class extends v {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.template = "", this.variables = {}, this.editable = !0, this._mode = "edit";
+  }
+  get _templateVars() {
+    const e = this.template.match(/\{\{(\w+)\}\}/g) || [];
+    return [...new Set(e.map((a) => a.replace(/\{\{|\}\}/g, "")))];
+  }
+  _renderHighlightedTemplate() {
+    const e = [];
+    let a = this.template;
+    const n = /\{\{(\w+)\}\}/g;
+    let t, r = 0;
+    for (n.lastIndex = 0; (t = n.exec(a)) !== null; )
+      t.index > r && e.push(a.slice(r, t.index)), e.push({ varName: t[1] }), r = n.lastIndex;
+    return r < a.length && e.push(a.slice(r)), e.map((o) => typeof o == "string" ? o : this._mode === "preview" && this.variables[o.varName] ? i`<span class="var-value">${this.variables[o.varName]}</span>` : i`<span class="var-highlight">{{${o.varName}}}</span>`);
+  }
+  _handleTemplateChange(e) {
+    const a = e.target.value;
+    this.dispatchEvent(new CustomEvent("ai-template-change", {
+      detail: { template: a },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _handleVariableChange(e, a) {
+    this.dispatchEvent(new CustomEvent("ai-template-variable-change", {
+      detail: { variable: e, value: a },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    return i`
+      <div class="container" role="region" aria-label="Prompt template editor">
+        <div class="header">
+          <span class="title">Prompt Template</span>
+          <div class="mode-toggle" role="radiogroup" aria-label="View mode">
+            <button
+              class="mode-btn ${this._mode === "edit" ? "active" : ""}"
+              role="radio"
+              aria-checked=${this._mode === "edit" ? "true" : "false"}
+              @click=${() => {
+      this._mode = "edit";
+    }}
+              tabindex="0"
+            >Edit</button>
+            <button
+              class="mode-btn ${this._mode === "preview" ? "active" : ""}"
+              role="radio"
+              aria-checked=${this._mode === "preview" ? "true" : "false"}
+              @click=${() => {
+      this._mode = "preview";
+    }}
+              tabindex="0"
+            >Preview</button>
+          </div>
+        </div>
+
+        ${this._mode === "edit" && this.editable ? i`
+          <textarea
+            class="template-textarea"
+            .value=${this.template}
+            @input=${this._handleTemplateChange}
+            aria-label="Template content"
+            rows="4"
+          ></textarea>
+        ` : i`
+          <div class="template-area" role="document" aria-label="Template preview">
+            ${this.template ? this._renderHighlightedTemplate() : i`<span class="empty-state">No template defined</span>`}
+          </div>
+        `}
+
+        ${this._templateVars.length > 0 ? i`
+          <div class="variables-section">
+            <div class="variables-title">Variables (${this._templateVars.length})</div>
+            ${this._templateVars.map((e) => i`
+              <div class="variable-row">
+                <span class="var-name">{{${e}}}</span>
+                <input
+                  class="var-input"
+                  type="text"
+                  .value=${this.variables[e] || ""}
+                  ?disabled=${!this.editable}
+                  placeholder="Enter value..."
+                  aria-label="Value for variable ${e}"
+                  @input=${(a) => this._handleVariableChange(e, a.target.value)}
+                />
+              </div>
+            `)}
+          </div>
+        ` : p}
+      </div>
+    `;
+  }
+};
+s.styles = [m, h, f, g`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    :host([hidden]) { display: none; }
+
+    .container {
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      padding: var(--cg-spacing-16);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--cg-spacing-12);
+    }
+
+    .title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+
+    .mode-toggle {
+      display: flex;
+      gap: var(--cg-spacing-4);
+    }
+
+    .mode-btn {
+      background: transparent;
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-xs);
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-100);
+      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), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .mode-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .mode-btn.active {
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-surface-container-background);
+      border-color: var(--cg-color-surface-base-text);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+    .mode-btn:hover:not(.active) { border-color: var(--cg-color-surface-cards-border); color: var(--cg-color-input-text-placeholder); }
+    .mode-btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    /* ── Template editor area ── */
+    .template-area {
+      background: var(--cg-color-surface-base-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      padding: var(--cg-spacing-16);
+      min-height: 80px;
+      font-size: var(--cg-font-size-sm);
+      line-height: 1.7;
+      color: var(--cg-color-input-text-placeholder);
+      white-space: pre-wrap;
+      word-break: break-word;
+    }
+
+    .template-textarea {
+      background: var(--cg-color-surface-base-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      padding: var(--cg-spacing-16);
+      min-height: 80px;
+      width: 100%;
+      box-sizing: border-box;
+      font-size: var(--cg-font-size-sm);
+      font-family: var(--cg-font-family-mono);
+      line-height: 1.7;
+      color: var(--cg-color-input-text-placeholder);
+      resize: vertical;
+    }
+    .template-textarea:focus-visible {
+      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline-offset: -2px;
+    }
+
+    .var-highlight {
+      background: var(--cg-overlay-accent-subtle);
+      color: var(--cg-color-surface-base-text);
+      padding: var(--cg-spacing-1) var(--cg-spacing-4);
+      border-radius: var(--cg-border-radius-25);
+      font-weight: var(--cg-font-weight-semibold);
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-xs);
+    }
+
+    .var-value {
+      color: var(--cg-color-status-success-text);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+
+    /* ── Variables panel ── */
+    .variables-section {
+      margin-top: var(--cg-spacing-12);
+    }
+
+    .variables-title {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-input-text-placeholder);
+      margin-bottom: var(--cg-spacing-8);
+    }
+
+    .variable-row {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      margin-bottom: var(--cg-spacing-6);
+    }
+
+    .var-name {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+      font-family: var(--cg-font-family-mono);
+      min-width: var(--cg-spacing-96);
+    }
+
+    .var-input {
+      flex: 1;
+      background: var(--cg-color-surface-base-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      color: var(--cg-color-surface-base-text);
+      font-size: var(--cg-font-size-xs);
+      padding: var(--cg-spacing-6) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-100);
+      font-family: inherit;
+    }
+    .var-input:focus-visible {
+      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline-offset: -2px;
+    }
+    .var-input:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .empty-state {
+      text-align: center;
+      color: var(--cg-color-input-border-hover);
+      font-size: var(--cg-font-size-sm);
+      padding: var(--cg-spacing-16) 0;
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) .container { border-radius: 0; }
+    :host([rounded="sm"]) .container { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .container { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .container { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) .container { border-radius: var(--cg-border-radius-full); }
+  `];
+c([
+  l({ reflect: !0 })
+], s.prototype, "rounded", 2);
+c([
+  l({ type: String })
+], s.prototype, "template", 2);
+c([
+  l({ type: Object })
+], s.prototype, "variables", 2);
+c([
+  l({ type: Boolean })
+], s.prototype, "editable", 2);
+c([
+  u()
+], s.prototype, "_mode", 2);
+s = c([
+  b("ai-prompt-template")
+], s);
+export {
+  s as AiPromptTemplate
+};
+//# sourceMappingURL=ai-prompt-template.js.map

package/dist/components/ai-prompt-template/ai-prompt-template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-prompt-template.js","sources":["../../../src/components/ai-prompt-template/ai-prompt-template.ts"],"sourcesContent":["/**\n * @element ai-prompt-template\n * Prompt template editor with {{variable}} highlighting, inline variable\n * inputs, and edit/preview toggle. Variables are auto-detected from the\n * template string and rendered as editable fields.\n *\n * @example\n * ```html\n * <ai-prompt-template\n *   template=\"Summarize {{topic}} for a {{audience}} audience.\"\n *   .variables=${{ topic: 'quantum computing', audience: 'beginner' }}\n *   editable\n * ></ai-prompt-template>\n * ```\n *\n * @prop {string} template - Template string with {{variable}} placeholders\n * @prop {Record<string, string>} variables - Variable name-to-value map\n * @prop {boolean} editable - Allow editing the template and variables (default true)\n *\n * @fires {CustomEvent<{template: string}>} ai-template-change - When the template text changes\n * @fires {CustomEvent<{variable: string, value: string}>} ai-template-variable-change - When a variable value changes\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-prompt-template')\nexport class AiPromptTemplate 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    :host([hidden]) { display: none; }\n\n    .container {\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      padding: var(--cg-spacing-16);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .mode-toggle {\n      display: flex;\n      gap: var(--cg-spacing-4);\n    }\n\n    .mode-btn {\n      background: transparent;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-100);\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), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .mode-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .mode-btn.active {\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-container-background);\n      border-color: var(--cg-color-surface-base-text);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .mode-btn:hover:not(.active) { border-color: var(--cg-color-surface-cards-border); color: var(--cg-color-input-text-placeholder); }\n    .mode-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    /* ── Template editor area ── */\n    .template-area {\n      background: var(--cg-color-surface-base-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-16);\n      min-height: 80px;\n      font-size: var(--cg-font-size-sm);\n      line-height: 1.7;\n      color: var(--cg-color-input-text-placeholder);\n      white-space: pre-wrap;\n      word-break: break-word;\n    }\n\n    .template-textarea {\n      background: var(--cg-color-surface-base-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-16);\n      min-height: 80px;\n      width: 100%;\n      box-sizing: border-box;\n      font-size: var(--cg-font-size-sm);\n      font-family: var(--cg-font-family-mono);\n      line-height: 1.7;\n      color: var(--cg-color-input-text-placeholder);\n      resize: vertical;\n    }\n    .template-textarea:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: -2px;\n    }\n\n    .var-highlight {\n      background: var(--cg-overlay-accent-subtle);\n      color: var(--cg-color-surface-base-text);\n      padding: var(--cg-spacing-1) var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-25);\n      font-weight: var(--cg-font-weight-semibold);\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    .var-value {\n      color: var(--cg-color-status-success-text);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    /* ── Variables panel ── */\n    .variables-section {\n      margin-top: var(--cg-spacing-12);\n    }\n\n    .variables-title {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-8);\n    }\n\n    .variable-row {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      margin-bottom: var(--cg-spacing-6);\n    }\n\n    .var-name {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n      font-family: var(--cg-font-family-mono);\n      min-width: var(--cg-spacing-96);\n    }\n\n    .var-input {\n      flex: 1;\n      background: var(--cg-color-surface-base-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-xs);\n      padding: var(--cg-spacing-6) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-100);\n      font-family: inherit;\n    }\n    .var-input:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: -2px;\n    }\n    .var-input:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .empty-state {\n      text-align: center;\n      color: var(--cg-color-input-border-hover);\n      font-size: var(--cg-font-size-sm);\n      padding: var(--cg-spacing-16) 0;\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .container { border-radius: 0; }\n    :host([rounded=\"sm\"]) .container { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .container { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .container { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .container { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: String }) template = '';\n  @property({ type: Object }) variables: Record<string, string> = {};\n  @property({ type: Boolean }) editable = true;\n\n  @state() private _mode: 'edit' | 'preview' = 'edit';\n\n  private get _templateVars(): string[] {\n    const matches = this.template.match(/\\{\\{(\\w+)\\}\\}/g) || [];\n    return [...new Set(matches.map(m => m.replace(/\\{\\{|\\}\\}/g, '')))];\n  }\n\n  private _renderHighlightedTemplate() {\n    const parts: (string | { varName: string })[] = [];\n    let remaining = this.template;\n    const regex = /\\{\\{(\\w+)\\}\\}/g;\n    let match: RegExpExecArray | null;\n    let lastIndex = 0;\n\n    regex.lastIndex = 0;\n    while ((match = regex.exec(remaining)) !== null) {\n      if (match.index > lastIndex) {\n        parts.push(remaining.slice(lastIndex, match.index));\n      }\n      parts.push({ varName: match[1]! });\n      lastIndex = regex.lastIndex;\n    }\n    if (lastIndex < remaining.length) {\n      parts.push(remaining.slice(lastIndex));\n    }\n\n    return parts.map(p => {\n      if (typeof p === 'string') return p;\n      if (this._mode === 'preview' && this.variables[p.varName]) {\n        return html`<span class=\"var-value\">${this.variables[p.varName]}</span>`;\n      }\n      return html`<span class=\"var-highlight\">{{${p.varName}}}</span>`;\n    });\n  }\n\n  private _handleTemplateChange(e: Event) {\n    const value = (e.target as HTMLTextAreaElement).value;\n    this.dispatchEvent(new CustomEvent('ai-template-change', {\n      detail: { template: value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _handleVariableChange(varName: string, value: string) {\n    this.dispatchEvent(new CustomEvent('ai-template-variable-change', {\n      detail: { variable: varName, value },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  override render() {\n    return html`\n      <div class=\"container\" role=\"region\" aria-label=\"Prompt template editor\">\n        <div class=\"header\">\n          <span class=\"title\">Prompt Template</span>\n          <div class=\"mode-toggle\" role=\"radiogroup\" aria-label=\"View mode\">\n            <button\n              class=\"mode-btn ${this._mode === 'edit' ? 'active' : ''}\"\n              role=\"radio\"\n              aria-checked=${this._mode === 'edit' ? 'true' : 'false'}\n              @click=${() => { this._mode = 'edit'; }}\n              tabindex=\"0\"\n            >Edit</button>\n            <button\n              class=\"mode-btn ${this._mode === 'preview' ? 'active' : ''}\"\n              role=\"radio\"\n              aria-checked=${this._mode === 'preview' ? 'true' : 'false'}\n              @click=${() => { this._mode = 'preview'; }}\n              tabindex=\"0\"\n            >Preview</button>\n          </div>\n        </div>\n\n        ${this._mode === 'edit' && this.editable ? html`\n          <textarea\n            class=\"template-textarea\"\n            .value=${this.template}\n            @input=${this._handleTemplateChange}\n            aria-label=\"Template content\"\n            rows=\"4\"\n          ></textarea>\n        ` : html`\n          <div class=\"template-area\" role=\"document\" aria-label=\"Template preview\">\n            ${this.template ? this._renderHighlightedTemplate() : html`<span class=\"empty-state\">No template defined</span>`}\n          </div>\n        `}\n\n        ${this._templateVars.length > 0 ? html`\n          <div class=\"variables-section\">\n            <div class=\"variables-title\">Variables (${this._templateVars.length})</div>\n            ${this._templateVars.map(v => html`\n              <div class=\"variable-row\">\n                <span class=\"var-name\">{{${v}}}</span>\n                <input\n                  class=\"var-input\"\n                  type=\"text\"\n                  .value=${this.variables[v] || ''}\n                  ?disabled=${!this.editable}\n                  placeholder=\"Enter value...\"\n                  aria-label=\"Value for variable ${v}\"\n                  @input=${(e: Event) => this._handleVariableChange(v, (e.target as HTMLInputElement).value)}\n                />\n              </div>\n            `)}\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-prompt-template': AiPromptTemplate;\n  }\n}\n"],"names":["AiPromptTemplate","LitElement","matches","m","parts","remaining","regex","match","lastIndex","p","html","value","varName","v","e","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+export interface RagDocument {
+    title: string;
+    source: string;
+    excerpt: string;
+    relevance: number;
+    type?: 'doc' | 'web' | 'database' | 'api';
+    url?: string;
+}
+export declare class AiRagPanel extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    documents: RagDocument[];
+    query: string;
+    sortBy: 'relevance' | 'recency' | 'source';
+    private _expandedIndex;
+    private _filterType;
+    private get _filteredDocs();
+    private get _types();
+    private _formatRelevance;
+    private _handleDocClick;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=ai-rag-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-rag-panel.d.ts","sourceRoot":"","sources":["../../../src/components/ai-rag-panel/ai-rag-panel.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,KAAK,CAAC;IAC1C,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAqHnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC9C,SAAS,EAAE,WAAW,EAAE,CAAM;IAC7C,KAAK,SAAM;IACX,MAAM,EAAE,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAe;IAE5D,OAAO,CAAC,cAAc,CAAM;IAC5B,OAAO,CAAC,WAAW,CAAM;IAElC,OAAO,KAAK,aAAa,GAKxB;IAED,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,eAAe;IAQd,MAAM;CAmDhB"}

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

@@ -0,0 +1,226 @@
+import { css as v, LitElement as p, html as n, nothing as u } from "lit";
+import { property as s, state as g, customElement as f } from "lit/decorators.js";
+import { h, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, i = (e, a, r, c) => {
+  for (var t = c > 1 ? void 0 : c ? y(a, r) : a, d = e.length - 1, l; d >= 0; d--)
+    (l = e[d]) && (t = (c ? l(a, r, t) : l(t)) || t);
+  return c && t && m(a, r, t), t;
+};
+let o = class extends p {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.documents = [], this.query = "", this.sortBy = "relevance", this._expandedIndex = -1, this._filterType = "";
+  }
+  get _filteredDocs() {
+    let e = [...this.documents];
+    return this._filterType && (e = e.filter((a) => a.type === this._filterType)), this.sortBy === "relevance" && e.sort((a, r) => r.relevance - a.relevance), e;
+  }
+  get _types() {
+    return [...new Set(this.documents.map((e) => e.type || "doc"))];
+  }
+  _formatRelevance(e) {
+    return `${Math.round(e * 100)}%`;
+  }
+  _handleDocClick(e) {
+    this._expandedIndex = this._expandedIndex === e ? -1 : e, this.dispatchEvent(new CustomEvent("ai-rag-document-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { index: e, document: this._filteredDocs[e] }
+    }));
+  }
+  render() {
+    if (this.documents.length === 0)
+      return n`<div class="panel"><div class="empty">No documents retrieved</div></div>`;
+    const e = this._filteredDocs, a = this._types;
+    return n`
+      <div class="panel" role="region" aria-label="Retrieved documents">
+        <div class="header">
+          <div class="header-left">
+            <div class="header-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
+            </div>
+            <span class="header-title">Retrieved Sources</span>
+          </div>
+          <span class="header-stats">${e.length} document${e.length !== 1 ? "s" : ""}</span>
+        </div>
+
+        ${a.length > 1 ? n`
+          <div class="controls">
+            <button class="control-btn ${this._filterType ? "" : "active"}" @click=${() => {
+      this._filterType = "";
+    }}>All</button>
+            ${a.map((r) => n`
+              <button class="control-btn ${this._filterType === r ? "active" : ""}" @click=${() => {
+      this._filterType = this._filterType === r ? "" : r;
+    }}>${r}</button>
+            `)}
+          </div>
+        ` : u}
+
+        <div class="documents">
+          ${e.map((r, c) => n`
+            <div class="doc ${this._expandedIndex === c ? "expanded" : ""}"
+              @click=${() => this._handleDocClick(c)}
+              role="article" tabindex="0"
+              @keydown=${(t) => {
+      (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._handleDocClick(c));
+    }}>
+              <div class="doc-header">
+                <span class="doc-type">${r.type || "doc"}</span>
+                <span class="doc-title">${r.title}</span>
+                <span class="doc-relevance">${this._formatRelevance(r.relevance)}</span>
+              </div>
+              <div class="doc-source">${r.source}</div>
+              <div class="doc-excerpt">${r.excerpt}</div>
+              <div class="relevance-bar">
+                <div class="relevance-fill" style="width: ${r.relevance * 100}%"></div>
+              </div>
+            </div>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+};
+o.styles = [h, b, v`
+    .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 ── */
+    .header {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: var(--cg-spacing-16) var(--cg-spacing-20);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+    .header-left { display: flex; align-items: center; gap: var(--cg-spacing-12); }
+    .header-icon {
+      width: var(--cg-spacing-16); height: var(--cg-spacing-16);
+      color: var(--cg-color-surface-container-outlined);
+      display: flex; align-items: center; justify-content: center;
+      flex-shrink: 0;
+    }
+    .header-icon svg { width: 100%; height: 100%; }
+    .header-title {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-container-outlined);
+      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);
+    }
+    .header-stats { font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); }
+
+    /* ── Filter controls ── */
+    .controls {
+      display: flex; gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-12) var(--cg-spacing-20);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+    .control-btn {
+      padding: var(--cg-spacing-4) var(--cg-spacing-8); border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: transparent; color: var(--cg-color-surface-container-outlined);
+      font: inherit; font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);
+      cursor: pointer; text-transform: capitalize;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .control-btn:hover { border-color: var(--cg-color-surface-cards-hover-border); color: var(--cg-color-surface-base-text); }
+    .control-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .control-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+    .control-btn.active { border-color: var(--cg-color-action-primary-background-default); color: var(--cg-color-action-primary-background-default); background: var(--cg-overlay-accent-subtle); }
+
+    /* ── Documents ── */
+    .documents { max-height: 400px; overflow-y: auto; }
+
+    .doc {
+      padding: var(--cg-spacing-16) var(--cg-spacing-20);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      cursor: pointer;
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .doc:hover { background: var(--cg-overlay-dark-subtle); }
+    .doc:last-child { border-bottom: none; }
+    .doc:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);
+    }
+
+    .doc-header { display: flex; align-items: center; gap: var(--cg-spacing-12); margin-bottom: var(--cg-spacing-4); }
+    .doc-type {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);
+      padding: var(--cg-spacing-2) var(--cg-spacing-6); border-radius: var(--cg-border-radius-full);
+      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);
+      background: var(--cg-overlay-accent-light);
+      color: var(--cg-color-action-primary-background-default);
+    }
+
+    .doc-title {
+      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium); color: var(--cg-color-surface-base-text);
+      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    }
+
+    .doc-relevance {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);
+      flex-shrink: 0; font-family: var(--cg-font-family-mono);
+      color: var(--cg-color-surface-container-outlined);
+    }
+
+    .doc-source {
+      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); margin-bottom: var(--cg-spacing-4);
+    }
+
+    .doc-excerpt {
+      font-size: var(--cg-font-size-sm); color: var(--cg-color-surface-base-text); opacity: 0.8;
+      line-height: var(--cg-line-height-relaxed);
+      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
+    }
+    .doc.expanded .doc-excerpt { -webkit-line-clamp: unset; display: block; }
+
+    /* Relevance bar */
+    .relevance-bar {
+      height: var(--cg-spacing-2); border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-cards-border); margin-top: var(--cg-spacing-12); overflow: hidden;
+    }
+    .relevance-fill {
+      height: 100%; border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-action-primary-background-default);
+      opacity: 0.6;
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+
+    .empty {
+      padding: var(--cg-spacing-48) var(--cg-spacing-24);
+      text-align: center; color: var(--cg-color-surface-container-outlined); font-size: var(--cg-font-size-sm);
+    }
+
+    /* ── Rounded ── */
+    :host([rounded="none"]) .panel { border-radius: 0; }
+    :host([rounded="sm"]) .panel { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .panel { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .panel { border-radius: var(--cg-component-card-radius); }
+  `];
+i([
+  s({ reflect: !0 })
+], o.prototype, "rounded", 2);
+i([
+  s({ type: Array })
+], o.prototype, "documents", 2);
+i([
+  s()
+], o.prototype, "query", 2);
+i([
+  s()
+], o.prototype, "sortBy", 2);
+i([
+  g()
+], o.prototype, "_expandedIndex", 2);
+i([
+  g()
+], o.prototype, "_filterType", 2);
+o = i([
+  f("ai-rag-panel")
+], o);
+export {
+  o as AiRagPanel
+};
+//# sourceMappingURL=ai-rag-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-rag-panel.js","sources":["../../../src/components/ai-rag-panel/ai-rag-panel.ts"],"sourcesContent":["/**\n * @element ai-rag-panel\n * RAG results panel showing retrieved documents with relevance scores, type badges, and excerpts.\n *\n * @fires {CustomEvent<{index: number, document: object}>} ai-rag-document-click - Document clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface RagDocument {\n  title: string;\n  source: string;\n  excerpt: string;\n  relevance: number;\n  type?: 'doc' | 'web' | 'database' | 'api';\n  url?: string;\n}\n\n@customElement('ai-rag-panel')\nexport class AiRagPanel 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-component-card-radius);\n      overflow: hidden;\n    }\n\n    /* ── Header ── */\n    .header {\n      display: flex; align-items: center; justify-content: space-between;\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .header-left { display: flex; align-items: center; gap: var(--cg-spacing-12); }\n    .header-icon {\n      width: var(--cg-spacing-16); height: var(--cg-spacing-16);\n      color: var(--cg-color-surface-container-outlined);\n      display: flex; align-items: center; justify-content: center;\n      flex-shrink: 0;\n    }\n    .header-icon svg { width: 100%; height: 100%; }\n    .header-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    .header-stats { font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); }\n\n    /* ── Filter controls ── */\n    .controls {\n      display: flex; gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-20);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .control-btn {\n      padding: var(--cg-spacing-4) var(--cg-spacing-8); border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: transparent; color: var(--cg-color-surface-container-outlined);\n      font: inherit; font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n      cursor: pointer; text-transform: capitalize;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .control-btn:hover { border-color: var(--cg-color-surface-cards-hover-border); color: var(--cg-color-surface-base-text); }\n    .control-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .control-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n    .control-btn.active { border-color: var(--cg-color-action-primary-background-default); color: var(--cg-color-action-primary-background-default); background: var(--cg-overlay-accent-subtle); }\n\n    /* ── Documents ── */\n    .documents { max-height: 400px; overflow-y: auto; }\n\n    .doc {\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      cursor: pointer;\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .doc:hover { background: var(--cg-overlay-dark-subtle); }\n    .doc:last-child { border-bottom: none; }\n    .doc:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);\n    }\n\n    .doc-header { display: flex; align-items: center; gap: var(--cg-spacing-12); margin-bottom: var(--cg-spacing-4); }\n    .doc-type {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n      padding: var(--cg-spacing-2) var(--cg-spacing-6); border-radius: var(--cg-border-radius-full);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n      background: var(--cg-overlay-accent-light);\n      color: var(--cg-color-action-primary-background-default);\n    }\n\n    .doc-title {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium); color: var(--cg-color-surface-base-text);\n      flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\n    }\n\n    .doc-relevance {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n      flex-shrink: 0; font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n    }\n\n    .doc-source {\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); margin-bottom: var(--cg-spacing-4);\n    }\n\n    .doc-excerpt {\n      font-size: var(--cg-font-size-sm); color: var(--cg-color-surface-base-text); opacity: 0.8;\n      line-height: var(--cg-line-height-relaxed);\n      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;\n    }\n    .doc.expanded .doc-excerpt { -webkit-line-clamp: unset; display: block; }\n\n    /* Relevance bar */\n    .relevance-bar {\n      height: var(--cg-spacing-2); border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-cards-border); margin-top: var(--cg-spacing-12); overflow: hidden;\n    }\n    .relevance-fill {\n      height: 100%; border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-primary-background-default);\n      opacity: 0.6;\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n    }\n\n    .empty {\n      padding: var(--cg-spacing-48) var(--cg-spacing-24);\n      text-align: center; color: var(--cg-color-surface-container-outlined); font-size: var(--cg-font-size-sm);\n    }\n\n    /* ── Rounded ── */\n    :host([rounded=\"none\"]) .panel { border-radius: 0; }\n    :host([rounded=\"sm\"]) .panel { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .panel { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .panel { border-radius: var(--cg-component-card-radius); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Array }) documents: RagDocument[] = [];\n  @property() query = '';\n  @property() sortBy: 'relevance' | 'recency' | 'source' = 'relevance';\n\n  @state() private _expandedIndex = -1;\n  @state() private _filterType = '';\n\n  private get _filteredDocs(): RagDocument[] {\n    let docs = [...this.documents];\n    if (this._filterType) docs = docs.filter(d => d.type === this._filterType);\n    if (this.sortBy === 'relevance') docs.sort((a, b) => b.relevance - a.relevance);\n    return docs;\n  }\n\n  private get _types(): string[] {\n    return [...new Set(this.documents.map(d => d.type || 'doc'))];\n  }\n\n  private _formatRelevance(r: number): string {\n    return `${Math.round(r * 100)}%`;\n  }\n\n  private _handleDocClick(index: number) {\n    this._expandedIndex = this._expandedIndex === index ? -1 : index;\n    this.dispatchEvent(new CustomEvent('ai-rag-document-click', {\n      bubbles: true, composed: true,\n      detail: { index, document: this._filteredDocs[index] },\n    }));\n  }\n\n  override render() {\n    if (this.documents.length === 0) {\n      return html`<div class=\"panel\"><div class=\"empty\">No documents retrieved</div></div>`;\n    }\n\n    const docs = this._filteredDocs;\n    const types = this._types;\n\n    return html`\n      <div class=\"panel\" role=\"region\" aria-label=\"Retrieved documents\">\n        <div class=\"header\">\n          <div class=\"header-left\">\n            <div class=\"header-icon\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/><polyline points=\"14 2 14 8 20 8\"/></svg>\n            </div>\n            <span class=\"header-title\">Retrieved Sources</span>\n          </div>\n          <span class=\"header-stats\">${docs.length} document${docs.length !== 1 ? 's' : ''}</span>\n        </div>\n\n        ${types.length > 1 ? html`\n          <div class=\"controls\">\n            <button class=\"control-btn ${!this._filterType ? 'active' : ''}\" @click=${() => { this._filterType = ''; }}>All</button>\n            ${types.map(t => html`\n              <button class=\"control-btn ${this._filterType === t ? 'active' : ''}\" @click=${() => { this._filterType = this._filterType === t ? '' : t; }}>${t}</button>\n            `)}\n          </div>\n        ` : nothing}\n\n        <div class=\"documents\">\n          ${docs.map((doc, i) => html`\n            <div class=\"doc ${this._expandedIndex === i ? 'expanded' : ''}\"\n              @click=${() => this._handleDocClick(i)}\n              role=\"article\" tabindex=\"0\"\n              @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleDocClick(i); } }}>\n              <div class=\"doc-header\">\n                <span class=\"doc-type\">${doc.type || 'doc'}</span>\n                <span class=\"doc-title\">${doc.title}</span>\n                <span class=\"doc-relevance\">${this._formatRelevance(doc.relevance)}</span>\n              </div>\n              <div class=\"doc-source\">${doc.source}</div>\n              <div class=\"doc-excerpt\">${doc.excerpt}</div>\n              <div class=\"relevance-bar\">\n                <div class=\"relevance-fill\" style=\"width: ${doc.relevance * 100}%\"></div>\n              </div>\n            </div>\n          `)}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiRagPanel","LitElement","docs","d","b","r","index","html","types","t","nothing","doc","i","e","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-reasoning-tree/ai-reasoning-tree.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, nothing } from 'lit';
+export interface ReasoningNode {
+    id: string;
+    type: 'thought' | 'action' | 'observation' | 'conclusion';
+    content: string;
+    confidence?: number;
+    children?: ReasoningNode[];
+}
+export declare class AiReasoningTree extends LitElement {
+    static styles: import('lit').CSSResult[];
+    nodes: ReasoningNode[];
+    highlightPath: string[];
+    label: string;
+    collapsed: boolean;
+    variant: 'minimal' | 'contained';
+    private _count;
+    private _renderNodes;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}
+//# sourceMappingURL=ai-reasoning-tree.d.ts.map

package/dist/components/ai-reasoning-tree/ai-reasoning-tree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-reasoning-tree.d.ts","sourceRoot":"","sources":["../../../src/components/ai-reasoning-tree/ai-reasoning-tree.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,aAAa;IAC5B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,SAAS,GAAG,QAAQ,GAAG,aAAa,GAAG,YAAY,CAAC;IAC1D,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BA+GnB;IAEwB,KAAK,EAAE,aAAa,EAAE,CAAM;IAC5B,aAAa,EAAE,MAAM,EAAE,CAAM;IAC5C,KAAK,SAAc;IACa,SAAS,UAAQ;IAChC,OAAO,EAAE,SAAS,GAAG,WAAW,CAAa;IAE1E,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,YAAY;IAYX,MAAM;CAehB"}