@cognivo/components 0.8.0 → 0.8.2

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

@@ -1,10 +1,10 @@
-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;
+import { css as g, LitElement as v, html as i, nothing as u } from "lit";
+import { property as l, state as p, customElement as b } from "lit/decorators.js";
+import { h, r as m, f } from "../../chunks/premium.css-DHekUEUt.js";
+var w = Object.defineProperty, x = Object.getOwnPropertyDescriptor, n = (e, a, c, t) => {
+  for (var r = t > 1 ? void 0 : t ? x(a, c) : a, o = e.length - 1, d; o >= 0; o--)
+    (d = e[o]) && (r = (t ? d(a, c, r) : d(r)) || r);
+  return t && r && w(a, c, r), r;
 };
 let s = class extends v {
   constructor() {
@@ -17,10 +17,10 @@ let s = class extends v {
   _renderHighlightedTemplate() {
     const e = [];
     let a = this.template;
-    const n = /\{\{(\w+)\}\}/g;
+    const c = /\{\{(\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;
+    for (c.lastIndex = 0; (t = c.exec(a)) !== null; )
+      t.index > r && e.push(a.slice(r, t.index)), e.push({ varName: t[1] }), r = c.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) {
@@ -97,12 +97,12 @@ let s = class extends v {
               </div>
             `)}
           </div>
-        ` : p}
+        ` : u}
       </div>
     `;
   }
 };
-s.styles = [m, h, f, g`
+s.styles = [h, m, f, g`
     :host {
       animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
@@ -153,7 +153,7 @@ s.styles = [m, h, f, g`
     .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);
+      box-shadow: 0 0 0 var(--cg-outline-width-thick) var(--cg-color-focus-ring);
     }
 
     /* ── Template editor area ── */
@@ -164,7 +164,7 @@ s.styles = [m, h, f, g`
       padding: var(--cg-spacing-16);
       min-height: 80px;
       font-size: var(--cg-font-size-sm);
-      line-height: 1.7;
+      line-height: var(--cg-line-height-relaxed);
       color: var(--cg-color-input-text-placeholder);
       white-space: pre-wrap;
       word-break: break-word;
@@ -180,27 +180,27 @@ s.styles = [m, h, f, g`
       box-sizing: border-box;
       font-size: var(--cg-font-size-sm);
       font-family: var(--cg-font-family-mono);
-      line-height: 1.7;
+      line-height: var(--cg-line-height-relaxed);
       color: var(--cg-color-input-text-placeholder);
       resize: vertical;
     }
     .template-textarea:focus-visible {
-      outline: 2px solid var(--cg-overlay-accent-strong);
-      outline-offset: -2px;
+      outline: var(--cg-outline-width-default) solid var(--cg-color-focus-ring);
+      outline-offset: calc(-1 * var(--cg-outline-offset-default));
     }
 
     .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);
+      border-radius: var(--cg-border-radius-50);
       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);
+      color: var(--cg-color-status-success-text-default);
       font-weight: var(--cg-font-weight-semibold);
     }
 
@@ -242,11 +242,11 @@ s.styles = [m, h, f, g`
       font-family: inherit;
     }
     .var-input:focus-visible {
-      outline: 2px solid var(--cg-overlay-accent-strong);
-      outline-offset: -2px;
+      outline: var(--cg-outline-width-default) solid var(--cg-color-focus-ring);
+      outline-offset: calc(-1 * var(--cg-outline-offset-default));
     }
     .var-input:disabled {
-      opacity: 0.5;
+      opacity: var(--cg-opacity-50);
       cursor: not-allowed;
     }
 
@@ -264,22 +264,22 @@ s.styles = [m, h, f, g`
     :host([rounded="lg"]) .container { border-radius: var(--cg-border-radius-150); }
     :host([rounded="full"]) .container { border-radius: var(--cg-border-radius-full); }
   `];
-c([
+n([
   l({ reflect: !0 })
 ], s.prototype, "rounded", 2);
-c([
+n([
   l({ type: String })
 ], s.prototype, "template", 2);
-c([
+n([
   l({ type: Object })
 ], s.prototype, "variables", 2);
-c([
+n([
   l({ type: Boolean })
 ], s.prototype, "editable", 2);
-c([
-  u()
+n([
+  p()
 ], s.prototype, "_mode", 2);
-s = c([
+s = n([
   b("ai-prompt-template")
 ], s);
 export {

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

@@ -1 +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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"}
+{"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 var(--cg-outline-width-thick) var(--cg-color-focus-ring);\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: var(--cg-line-height-relaxed);\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: var(--cg-line-height-relaxed);\n      color: var(--cg-color-input-text-placeholder);\n      resize: vertical;\n    }\n    .template-textarea:focus-visible {\n      outline: var(--cg-outline-width-default) solid var(--cg-color-focus-ring);\n      outline-offset: calc(-1 * var(--cg-outline-offset-default));\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-50);\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-default);\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: var(--cg-outline-width-default) solid var(--cg-color-focus-ring);\n      outline-offset: calc(-1 * var(--cg-outline-offset-default));\n    }\n    .var-input:disabled {\n      opacity: var(--cg-opacity-50);\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.js

@@ -1,6 +1,6 @@
 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";
+import { h, r as b } from "../../chunks/premium.css-DHekUEUt.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);
@@ -126,7 +126,7 @@ o.styles = [h, b, v`
     }
     .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:focus-visible { outline: none; box-shadow: 0 0 0 var(--cg-focus-ring-width) 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 ── */
@@ -142,7 +142,7 @@ o.styles = [h, b, v`
     .doc:last-child { border-bottom: none; }
     .doc:focus-visible {
       outline: none;
-      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);
+      box-shadow: inset 0 0 0 var(--cg-focus-ring-width) var(--cg-overlay-accent-strong);
     }
 
     .doc-header { display: flex; align-items: center; gap: var(--cg-spacing-12); margin-bottom: var(--cg-spacing-4); }
@@ -184,7 +184,7 @@ o.styles = [h, b, v`
     .relevance-fill {
       height: 100%; border-radius: var(--cg-border-radius-full);
       background: var(--cg-color-action-primary-background-default);
-      opacity: 0.6;
+      opacity: var(--cg-opacity-60);
       transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
     }
 

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

@@ -1 +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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"}
+{"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 var(--cg-focus-ring-width) 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 var(--cg-focus-ring-width) 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: var(--cg-opacity-60);\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.js

@@ -1,7 +1,7 @@
 import { css as p, LitElement as h, nothing as d, html as s } from "lit";
-import { property as i, customElement as v } from "lit/decorators.js";
-import { h as u, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
-var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, n = (t, e, o, c) => {
+import { property as n, customElement as v } from "lit/decorators.js";
+import { h as u, r as f } from "../../chunks/premium.css-DHekUEUt.js";
+var b = Object.defineProperty, m = Object.getOwnPropertyDescriptor, i = (t, e, o, c) => {
   for (var a = c > 1 ? void 0 : c ? m(e, o) : e, g = t.length - 1, l; g >= 0; g--)
     (l = t[g]) && (a = (c ? l(e, o, a) : l(a)) || a);
   return c && a && b(e, o, a), a;
@@ -78,7 +78,7 @@ r.styles = [u, f, p`
       background: none;
       border: none;
       font: inherit;
-      color: var(--cg-color-surface-container-outlined);
+      color: var(--cg-color-ai-reasoning-text);
       font-size: var(--cg-font-size-sm);
       font-weight: var(--cg-font-weight-medium);
       width: 100%;
@@ -88,7 +88,7 @@ r.styles = [u, f, p`
     .toggle:focus-visible {
       outline: none;
       border-radius: var(--cg-border-radius-50);
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 var(--cg-outline-width-thick) var(--cg-color-focus-ring);
     }
 
     .chevron {
@@ -156,22 +156,22 @@ r.styles = [u, f, p`
       .chevron { transition: none; }
     }
   `];
-n([
-  i({ type: Array })
+i([
+  n({ type: Array })
 ], r.prototype, "nodes", 2);
-n([
-  i({ type: Array })
+i([
+  n({ type: Array })
 ], r.prototype, "highlightPath", 2);
-n([
-  i()
+i([
+  n()
 ], r.prototype, "label", 2);
-n([
-  i({ type: Boolean, reflect: !0 })
+i([
+  n({ type: Boolean, reflect: !0 })
 ], r.prototype, "collapsed", 2);
-n([
-  i({ reflect: !0 })
+i([
+  n({ reflect: !0 })
 ], r.prototype, "variant", 2);
-r = n([
+r = i([
   v("ai-reasoning-tree")
 ], r);
 export {

package/dist/components/ai-reasoning-tree/ai-reasoning-tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-reasoning-tree.js","sources":["../../../src/components/ai-reasoning-tree/ai-reasoning-tree.ts"],"sourcesContent":["/**\n * @element ai-reasoning-tree\n * Collapsible AI chain-of-thought display. Two variants:\n * - minimal (Claude-style): left border, no background\n * - contained (DeepSeek-style): subtle background card\n *\n * @fires {CustomEvent<{id: string, type: string, content: string}>} ai-reasoning-node-click\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 ReasoningNode {\n  id: string;\n  type: 'thought' | 'action' | 'observation' | 'conclusion';\n  content: string;\n  confidence?: number;\n  children?: ReasoningNode[];\n}\n\n@customElement('ai-reasoning-tree')\nexport class AiReasoningTree extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n\n    /* ── Minimal variant (default) — Claude-style ── */\n    .reasoning {\n      border-left: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);\n      padding-left: var(--cg-spacing-20);\n    }\n\n    /* ── Contained variant — DeepSeek-style ── */\n    :host([variant=\"contained\"]) .reasoning {\n      border-left: none;\n      padding-left: 0;\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      padding: var(--cg-spacing-12);\n    }\n    :host([variant=\"contained\"]) .toggle {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n    }\n    :host([variant=\"contained\"]) .steps {\n      padding: 0 var(--cg-spacing-16) var(--cg-spacing-16);\n    }\n\n    /* ── Toggle ── */\n    .toggle {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-8) 0;\n      cursor: pointer;\n      background: none;\n      border: none;\n      font: inherit;\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      width: 100%;\n      text-align: left;\n    }\n    .toggle:hover { color: var(--cg-color-surface-base-text); }\n    .toggle:focus-visible {\n      outline: none;\n      border-radius: var(--cg-border-radius-50);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    .chevron {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      flex-shrink: 0;\n      opacity: 0.5;\n    }\n    :host(:not([collapsed])) .chevron { transform: rotate(90deg); }\n\n    .toggle-count {\n      font-size: var(--cg-font-size-xs);\n      opacity: 0.5;\n      margin-left: auto;\n    }\n\n    /* ── Steps ── */\n    .steps {\n      display: flex;\n      flex-direction: column;\n      padding: var(--cg-spacing-6) 0 var(--cg-spacing-12);\n    }\n\n    .step {\n      display: flex;\n      align-items: baseline;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-12);\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-relaxed);\n      border-radius: var(--cg-border-radius-50);\n      cursor: default;\n      opacity: 0.8;\n    }\n    .step:hover { background: var(--cg-overlay-dark-subtle); }\n\n    .dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      flex-shrink: 0;\n      margin-top: var(--cg-spacing-6);\n    }\n    .dot.thought { background: var(--cg-color-action-primary-background-default); opacity: 0.7; }\n    .dot.action { background: var(--cg-color-status-info-text-default); opacity: 0.7; }\n    .dot.observation { background: var(--cg-color-status-warning-text-default); opacity: 0.7; }\n    .dot.conclusion { background: var(--cg-color-status-success-text-default); opacity: 0.7; }\n\n    .step-text { flex: 1; }\n\n    .conf {\n      font-size: var(--cg-font-size-xs);\n      font-family: var(--cg-font-family-mono);\n      opacity: 0.4;\n      flex-shrink: 0;\n    }\n\n    .children { padding-left: var(--cg-spacing-20); }\n\n    .step.highlighted { background: var(--cg-overlay-accent-subtle); }\n\n    @media (prefers-reduced-motion: reduce) {\n      .chevron { transition: none; }\n    }\n  `];\n\n  @property({ type: Array }) nodes: ReasoningNode[] = [];\n  @property({ type: Array }) highlightPath: string[] = [];\n  @property() label = 'Thinking';\n  @property({ type: Boolean, reflect: true }) collapsed = true;\n  @property({ reflect: true }) variant: 'minimal' | 'contained' = 'minimal';\n\n  private _count(nodes: ReasoningNode[]): number {\n    let c = 0;\n    for (const n of nodes) { c++; if (n.children) c += this._count(n.children); }\n    return c;\n  }\n\n  private _renderNodes(nodes: ReasoningNode[]): unknown {\n    return nodes.map(n => html`\n      <div class=\"step ${this.highlightPath.includes(n.id) ? 'highlighted' : ''}\"\n        @click=${() => this.dispatchEvent(new CustomEvent('ai-reasoning-node-click', { bubbles: true, composed: true, detail: { id: n.id, type: n.type, content: n.content } }))}>\n        <span class=\"dot ${n.type}\"></span>\n        <span class=\"step-text\">${n.content}</span>\n        ${n.confidence ? html`<span class=\"conf\">${Math.round(n.confidence * 100)}%</span>` : nothing}\n      </div>\n      ${n.children?.length ? html`<div class=\"children\">${this._renderNodes(n.children)}</div>` : nothing}\n    `);\n  }\n\n  override render() {\n    if (!this.nodes.length) return nothing;\n    const total = this._count(this.nodes);\n\n    return html`\n      <div class=\"reasoning\">\n        <button class=\"toggle\" @click=${() => { this.collapsed = !this.collapsed; }} aria-expanded=${!this.collapsed}>\n          <svg class=\"chevron\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"/></svg>\n          <span>${this.label}</span>\n          <span class=\"toggle-count\">${total} step${total !== 1 ? 's' : ''}</span>\n        </button>\n        ${!this.collapsed ? html`<div class=\"steps\">${this._renderNodes(this.nodes)}</div>` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiReasoningTree","LitElement","nodes","c","n","html","nothing","total","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-reasoning-tree.js","sources":["../../../src/components/ai-reasoning-tree/ai-reasoning-tree.ts"],"sourcesContent":["/**\n * @element ai-reasoning-tree\n * Collapsible AI chain-of-thought display. Two variants:\n * - minimal (Claude-style): left border, no background\n * - contained (DeepSeek-style): subtle background card\n *\n * @fires {CustomEvent<{id: string, type: string, content: string}>} ai-reasoning-node-click\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 ReasoningNode {\n  id: string;\n  type: 'thought' | 'action' | 'observation' | 'conclusion';\n  content: string;\n  confidence?: number;\n  children?: ReasoningNode[];\n}\n\n@customElement('ai-reasoning-tree')\nexport class AiReasoningTree extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n\n    /* ── Minimal variant (default) — Claude-style ── */\n    .reasoning {\n      border-left: var(--cg-border-width-100) solid var(--cg-color-surface-cards-border);\n      padding-left: var(--cg-spacing-20);\n    }\n\n    /* ── Contained variant — DeepSeek-style ── */\n    :host([variant=\"contained\"]) .reasoning {\n      border-left: none;\n      padding-left: 0;\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      padding: var(--cg-spacing-12);\n    }\n    :host([variant=\"contained\"]) .toggle {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n    }\n    :host([variant=\"contained\"]) .steps {\n      padding: 0 var(--cg-spacing-16) var(--cg-spacing-16);\n    }\n\n    /* ── Toggle ── */\n    .toggle {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-8) 0;\n      cursor: pointer;\n      background: none;\n      border: none;\n      font: inherit;\n      color: var(--cg-color-ai-reasoning-text);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      width: 100%;\n      text-align: left;\n    }\n    .toggle:hover { color: var(--cg-color-surface-base-text); }\n    .toggle:focus-visible {\n      outline: none;\n      border-radius: var(--cg-border-radius-50);\n      box-shadow: 0 0 0 var(--cg-outline-width-thick) var(--cg-color-focus-ring);\n    }\n\n    .chevron {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      flex-shrink: 0;\n      opacity: 0.5;\n    }\n    :host(:not([collapsed])) .chevron { transform: rotate(90deg); }\n\n    .toggle-count {\n      font-size: var(--cg-font-size-xs);\n      opacity: 0.5;\n      margin-left: auto;\n    }\n\n    /* ── Steps ── */\n    .steps {\n      display: flex;\n      flex-direction: column;\n      padding: var(--cg-spacing-6) 0 var(--cg-spacing-12);\n    }\n\n    .step {\n      display: flex;\n      align-items: baseline;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-12);\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-relaxed);\n      border-radius: var(--cg-border-radius-50);\n      cursor: default;\n      opacity: 0.8;\n    }\n    .step:hover { background: var(--cg-overlay-dark-subtle); }\n\n    .dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      flex-shrink: 0;\n      margin-top: var(--cg-spacing-6);\n    }\n    .dot.thought { background: var(--cg-color-action-primary-background-default); opacity: 0.7; }\n    .dot.action { background: var(--cg-color-status-info-text-default); opacity: 0.7; }\n    .dot.observation { background: var(--cg-color-status-warning-text-default); opacity: 0.7; }\n    .dot.conclusion { background: var(--cg-color-status-success-text-default); opacity: 0.7; }\n\n    .step-text { flex: 1; }\n\n    .conf {\n      font-size: var(--cg-font-size-xs);\n      font-family: var(--cg-font-family-mono);\n      opacity: 0.4;\n      flex-shrink: 0;\n    }\n\n    .children { padding-left: var(--cg-spacing-20); }\n\n    .step.highlighted { background: var(--cg-overlay-accent-subtle); }\n\n    @media (prefers-reduced-motion: reduce) {\n      .chevron { transition: none; }\n    }\n  `];\n\n  @property({ type: Array }) nodes: ReasoningNode[] = [];\n  @property({ type: Array }) highlightPath: string[] = [];\n  @property() label = 'Thinking';\n  @property({ type: Boolean, reflect: true }) collapsed = true;\n  @property({ reflect: true }) variant: 'minimal' | 'contained' = 'minimal';\n\n  private _count(nodes: ReasoningNode[]): number {\n    let c = 0;\n    for (const n of nodes) { c++; if (n.children) c += this._count(n.children); }\n    return c;\n  }\n\n  private _renderNodes(nodes: ReasoningNode[]): unknown {\n    return nodes.map(n => html`\n      <div class=\"step ${this.highlightPath.includes(n.id) ? 'highlighted' : ''}\"\n        @click=${() => this.dispatchEvent(new CustomEvent('ai-reasoning-node-click', { bubbles: true, composed: true, detail: { id: n.id, type: n.type, content: n.content } }))}>\n        <span class=\"dot ${n.type}\"></span>\n        <span class=\"step-text\">${n.content}</span>\n        ${n.confidence ? html`<span class=\"conf\">${Math.round(n.confidence * 100)}%</span>` : nothing}\n      </div>\n      ${n.children?.length ? html`<div class=\"children\">${this._renderNodes(n.children)}</div>` : nothing}\n    `);\n  }\n\n  override render() {\n    if (!this.nodes.length) return nothing;\n    const total = this._count(this.nodes);\n\n    return html`\n      <div class=\"reasoning\">\n        <button class=\"toggle\" @click=${() => { this.collapsed = !this.collapsed; }} aria-expanded=${!this.collapsed}>\n          <svg class=\"chevron\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M8 5v14l11-7z\"/></svg>\n          <span>${this.label}</span>\n          <span class=\"toggle-count\">${total} step${total !== 1 ? 's' : ''}</span>\n        </button>\n        ${!this.collapsed ? html`<div class=\"steps\">${this._renderNodes(this.nodes)}</div>` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiReasoningTree","LitElement","nodes","c","n","html","nothing","total","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

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

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

package/dist/components/ai-reveal-animation/ai-reveal-animation.js

@@ -1,6 +1,6 @@
 import { css as c, LitElement as d, html as m } from "lit";
 import { property as s, state as v, customElement as h } from "lit/decorators.js";
-import { h as f, r as u } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as f, r as u } from "../../chunks/premium.css-DHekUEUt.js";
 var y = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (e, a, n, o) => {
   for (var r = o > 1 ? void 0 : o ? b(a, n) : a, l = e.length - 1, p; l >= 0; l--)
     (p = e[l]) && (r = (o ? p(a, n, r) : p(r)) || r);
@@ -69,7 +69,7 @@ t.styles = [f, u, c`
     .wrapper.fade { opacity: 0; }
     .wrapper.slide-up {
       opacity: 0;
-      transform: translateY(var(--cg-spacing-24);
+      transform: translateY(var(--cg-spacing-24));
     }
     .wrapper.scale {
       opacity: 0;
@@ -107,7 +107,7 @@ t.styles = [f, u, c`
     }
 
     @keyframes reveal-slide-up {
-      from { opacity: 0; transform: translateY(var(--cg-spacing-24); }
+      from { opacity: 0; transform: translateY(var(--cg-spacing-24)); }
       to   { opacity: 1; transform: translateY(0); }
     }
 

package/dist/components/ai-reveal-animation/ai-reveal-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-reveal-animation.js","sources":["../../../src/components/ai-reveal-animation/ai-reveal-animation.ts"],"sourcesContent":["/**\n * @element ai-reveal-animation\n * Entrance animation wrapper that reveals slotted content with fade,\n * slide-up, scale, or flip animations. Respects prefers-reduced-motion\n * and dispatches a completion event.\n *\n * @example\n * ```html\n * <ai-reveal-animation type=\"slide-up\" delay=\"200\" duration=\"500\" visible>\n *   <ai-result-panel title=\"Results\"></ai-result-panel>\n * </ai-reveal-animation>\n * ```\n *\n * @prop {'fade'|'slide-up'|'scale'|'flip'} type - Animation type (default 'fade')\n * @prop {number} delay - Delay before animation starts in ms (default 0)\n * @prop {number} duration - Animation duration in ms (default 400)\n * @prop {boolean} visible - Trigger the reveal animation\n *\n * @fires ai-reveal-complete - When the animation finishes\n *\n * @slot - Content to reveal\n */\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\ntype RevealType = 'fade' | 'slide-up' | 'scale' | 'flip';\n\n@customElement('ai-reveal-animation')\nexport class AiRevealAnimation extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n\n    .wrapper {\n      opacity: 0;\n      will-change: transform, opacity;\n    }\n\n    /* ── Initial hidden states ── */\n    .wrapper.fade { opacity: 0; }\n    .wrapper.slide-up {\n      opacity: 0;\n      transform: translateY(var(--cg-spacing-24);\n    }\n    .wrapper.scale {\n      opacity: 0;\n      transform: scale(0.85);\n    }\n    .wrapper.flip {\n      opacity: 0;\n      transform: perspective(600px) rotateX(-15deg);\n    }\n\n    /* ── Visible / animated states ── */\n    .wrapper.visible.fade {\n      animation: reveal-fade var(--_duration) var(--_delay) ease both;\n    }\n    .wrapper.visible.slide-up {\n      animation: reveal-slide-up var(--_duration) var(--_delay) var(--cg-transition-easing-materialize) both;\n    }\n    .wrapper.visible.scale {\n      animation: reveal-scale var(--_duration) var(--_delay) var(--cg-transition-easing-materialize) both;\n    }\n    .wrapper.visible.flip {\n      animation: reveal-flip var(--_duration) var(--_delay) var(--cg-transition-easing-materialize) both;\n    }\n\n    /* ── Completed ── */\n    .wrapper.done {\n      opacity: 1;\n      transform: none;\n      animation: none;\n    }\n\n    @keyframes reveal-fade {\n      from { opacity: 0; }\n      to   { opacity: 1; }\n    }\n\n    @keyframes reveal-slide-up {\n      from { opacity: 0; transform: translateY(var(--cg-spacing-24); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n\n    @keyframes reveal-scale {\n      from { opacity: 0; transform: scale(0.85); }\n      to   { opacity: 1; transform: scale(1); }\n    }\n\n    @keyframes reveal-flip {\n      from { opacity: 0; transform: perspective(600px) rotateX(-15deg); }\n      to   { opacity: 1; transform: perspective(600px) rotateX(0deg); }\n    }\n\n  `];\n\n  /** Animation type */\n  @property({ type: String }) type: RevealType = 'fade';\n\n  /** Delay before animation starts (ms) */\n  @property({ type: Number }) delay = 0;\n\n  /** Animation duration (ms) */\n  @property({ type: Number }) duration = 400;\n\n  /** Trigger visibility / animation */\n  @property({ type: Boolean }) visible = false;\n\n  @state() private _done = false;\n  private _animAbort?: AbortController;\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._animAbort?.abort();\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('visible') && this.visible) {\n      this._done = false;\n      // Clean up previous listener\n      this._animAbort?.abort();\n      this._animAbort = new AbortController();\n      const wrapper = this.shadowRoot?.querySelector('.wrapper');\n      if (wrapper) {\n        wrapper.addEventListener('animationend', this._onAnimEnd, { once: true, signal: this._animAbort.signal });\n      }\n    }\n    if (changed.has('visible') && !this.visible) {\n      this._done = false;\n      this._animAbort?.abort();\n    }\n  }\n\n  private _onAnimEnd = () => {\n    this._done = true;\n    // Release will-change after animation completes\n    const wrapper = this.shadowRoot?.querySelector('.wrapper') as HTMLElement | null;\n    if (wrapper) {\n      wrapper.style.willChange = 'auto';\n    }\n    this.dispatchEvent(new CustomEvent('ai-reveal-complete', {\n      bubbles: true, composed: true,\n    }));\n  };\n\n  private _checkReducedMotion(): boolean {\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // If reduced motion and visible, mark done immediately\n    if (this.visible && this._checkReducedMotion()) {\n      this._done = true;\n      // Dispatch async so listeners can attach\n      requestAnimationFrame(() => {\n        this.dispatchEvent(new CustomEvent('ai-reveal-complete', {\n          bubbles: true, composed: true,\n        }));\n      });\n    }\n  }\n\n  override render() {\n    const classes = [\n      'wrapper',\n      this.type,\n      this.visible ? 'visible' : '',\n      this._done ? 'done' : '',\n    ].filter(Boolean).join(' ');\n\n    return html`\n      <div\n        class=${classes}\n        style=\"--_duration: ${this.duration}ms; --_delay: ${this.delay}ms;\"\n        role=\"presentation\"\n        aria-hidden=${!this.visible && !this._done ? 'true' : 'false'}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-reveal-animation': AiRevealAnimation;\n  }\n}\n"],"names":["AiRevealAnimation","LitElement","wrapper","changed","classes","html","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-reveal-animation.js","sources":["../../../src/components/ai-reveal-animation/ai-reveal-animation.ts"],"sourcesContent":["/**\n * @element ai-reveal-animation\n * Entrance animation wrapper that reveals slotted content with fade,\n * slide-up, scale, or flip animations. Respects prefers-reduced-motion\n * and dispatches a completion event.\n *\n * @example\n * ```html\n * <ai-reveal-animation type=\"slide-up\" delay=\"200\" duration=\"500\" visible>\n *   <ai-result-panel title=\"Results\"></ai-result-panel>\n * </ai-reveal-animation>\n * ```\n *\n * @prop {'fade'|'slide-up'|'scale'|'flip'} type - Animation type (default 'fade')\n * @prop {number} delay - Delay before animation starts in ms (default 0)\n * @prop {number} duration - Animation duration in ms (default 400)\n * @prop {boolean} visible - Trigger the reveal animation\n *\n * @fires ai-reveal-complete - When the animation finishes\n *\n * @slot - Content to reveal\n */\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\ntype RevealType = 'fade' | 'slide-up' | 'scale' | 'flip';\n\n@customElement('ai-reveal-animation')\nexport class AiRevealAnimation extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n\n    .wrapper {\n      opacity: 0;\n      will-change: transform, opacity;\n    }\n\n    /* ── Initial hidden states ── */\n    .wrapper.fade { opacity: 0; }\n    .wrapper.slide-up {\n      opacity: 0;\n      transform: translateY(var(--cg-spacing-24));\n    }\n    .wrapper.scale {\n      opacity: 0;\n      transform: scale(0.85);\n    }\n    .wrapper.flip {\n      opacity: 0;\n      transform: perspective(600px) rotateX(-15deg);\n    }\n\n    /* ── Visible / animated states ── */\n    .wrapper.visible.fade {\n      animation: reveal-fade var(--_duration) var(--_delay) ease both;\n    }\n    .wrapper.visible.slide-up {\n      animation: reveal-slide-up var(--_duration) var(--_delay) var(--cg-transition-easing-materialize) both;\n    }\n    .wrapper.visible.scale {\n      animation: reveal-scale var(--_duration) var(--_delay) var(--cg-transition-easing-materialize) both;\n    }\n    .wrapper.visible.flip {\n      animation: reveal-flip var(--_duration) var(--_delay) var(--cg-transition-easing-materialize) both;\n    }\n\n    /* ── Completed ── */\n    .wrapper.done {\n      opacity: 1;\n      transform: none;\n      animation: none;\n    }\n\n    @keyframes reveal-fade {\n      from { opacity: 0; }\n      to   { opacity: 1; }\n    }\n\n    @keyframes reveal-slide-up {\n      from { opacity: 0; transform: translateY(var(--cg-spacing-24)); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n\n    @keyframes reveal-scale {\n      from { opacity: 0; transform: scale(0.85); }\n      to   { opacity: 1; transform: scale(1); }\n    }\n\n    @keyframes reveal-flip {\n      from { opacity: 0; transform: perspective(600px) rotateX(-15deg); }\n      to   { opacity: 1; transform: perspective(600px) rotateX(0deg); }\n    }\n\n  `];\n\n  /** Animation type */\n  @property({ type: String }) type: RevealType = 'fade';\n\n  /** Delay before animation starts (ms) */\n  @property({ type: Number }) delay = 0;\n\n  /** Animation duration (ms) */\n  @property({ type: Number }) duration = 400;\n\n  /** Trigger visibility / animation */\n  @property({ type: Boolean }) visible = false;\n\n  @state() private _done = false;\n  private _animAbort?: AbortController;\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this._animAbort?.abort();\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('visible') && this.visible) {\n      this._done = false;\n      // Clean up previous listener\n      this._animAbort?.abort();\n      this._animAbort = new AbortController();\n      const wrapper = this.shadowRoot?.querySelector('.wrapper');\n      if (wrapper) {\n        wrapper.addEventListener('animationend', this._onAnimEnd, { once: true, signal: this._animAbort.signal });\n      }\n    }\n    if (changed.has('visible') && !this.visible) {\n      this._done = false;\n      this._animAbort?.abort();\n    }\n  }\n\n  private _onAnimEnd = () => {\n    this._done = true;\n    // Release will-change after animation completes\n    const wrapper = this.shadowRoot?.querySelector('.wrapper') as HTMLElement | null;\n    if (wrapper) {\n      wrapper.style.willChange = 'auto';\n    }\n    this.dispatchEvent(new CustomEvent('ai-reveal-complete', {\n      bubbles: true, composed: true,\n    }));\n  };\n\n  private _checkReducedMotion(): boolean {\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    // If reduced motion and visible, mark done immediately\n    if (this.visible && this._checkReducedMotion()) {\n      this._done = true;\n      // Dispatch async so listeners can attach\n      requestAnimationFrame(() => {\n        this.dispatchEvent(new CustomEvent('ai-reveal-complete', {\n          bubbles: true, composed: true,\n        }));\n      });\n    }\n  }\n\n  override render() {\n    const classes = [\n      'wrapper',\n      this.type,\n      this.visible ? 'visible' : '',\n      this._done ? 'done' : '',\n    ].filter(Boolean).join(' ');\n\n    return html`\n      <div\n        class=${classes}\n        style=\"--_duration: ${this.duration}ms; --_delay: ${this.delay}ms;\"\n        role=\"presentation\"\n        aria-hidden=${!this.visible && !this._done ? 'true' : 'false'}\n      >\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-reveal-animation': AiRevealAnimation;\n  }\n}\n"],"names":["AiRevealAnimation","LitElement","wrapper","changed","classes","html","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-reward-signal/ai-reward-signal.js

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

package/dist/components/ai-rich-message/ai-rich-message.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ai-rich-message.d.ts","sourceRoot":"","sources":["../../../src/components/ai-rich-message/ai-rich-message.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,UAAU,OAAO;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;CACf;AAED,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BA0InB;IAEkC,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAe;IAC7D,IAAI,SAAM;IACN,KAAK,EAAE,OAAO,EAAE,CAAM;IAC1B,MAAM,SAAM;IACZ,SAAS,SAAM;IACX,OAAO,EAAE,SAAS,EAAE,CAAM;IAE1D,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,UAAU,CAAC,CAAkB;IAE5B,oBAAoB;IAK7B,2EAA2E;IAC3E,OAAO,CAAC,MAAM,CAAC,iBAAiB,CAK7B;IAEH,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,YAAY;IAgCpB,OAAO,CAAC,cAAc;IAeb,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}
+{"version":3,"file":"ai-rich-message.d.ts","sourceRoot":"","sources":["../../../src/components/ai-rich-message/ai-rich-message.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,UAAU,OAAO;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,CAAC;CACf;AAED,UAAU,SAAS;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAiJnB;IAEkC,IAAI,EAAE,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAe;IAC7D,IAAI,SAAM;IACN,KAAK,EAAE,OAAO,EAAE,CAAM;IAC1B,MAAM,SAAM;IACZ,SAAS,SAAM;IACX,OAAO,EAAE,SAAS,EAAE,CAAM;IAE1D,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,eAAe;IAMvB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,WAAW;IAWnB,OAAO,CAAC,UAAU,CAAC,CAAkB;IAE5B,oBAAoB;IAK7B,2EAA2E;IAC3E,OAAO,CAAC,MAAM,CAAC,iBAAiB,CAK7B;IAEH,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,YAAY;IAgCpB,OAAO,CAAC,cAAc;IAeb,MAAM;CAqBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}