@cognivo/components 0.8.0

package/dist/components/ai-confidence-badge/ai-confidence-badge.js

@@ -0,0 +1,200 @@
+import { css as d, LitElement as h, nothing as p, html as c } from "lit";
+import { property as s, customElement as m } from "lit/decorators.js";
+import { a as u, r as v } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-icon/cg-icon.js";
+import "../cg-tooltip/cg-tooltip.js";
+import "../cg-progress-bar/cg-progress-bar.js";
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (e, r, a, n) => {
+  for (var o = n > 1 ? void 0 : n ? b(r, a) : r, g = e.length - 1, l; g >= 0; g--)
+    (l = e[g]) && (o = (n ? l(r, a, o) : l(o)) || o);
+  return n && o && f(r, a, o), o;
+};
+let t = class extends h {
+  constructor() {
+    super(...arguments), this.score = 0.85, this.showPercentage = !0, this.size = "md", this.explanation = "", this.history = [], this.highThreshold = 0.8, this.lowThreshold = 0.5;
+  }
+  // ─── Derivations ────────────────────────────────────────────────────────
+  _getLevel() {
+    return this.score >= this.highThreshold ? "high" : this.score >= this.lowThreshold ? "medium" : "low";
+  }
+  _getIconName() {
+    const e = this._getLevel();
+    return e === "high" ? "check" : e === "medium" ? "info" : "warning";
+  }
+  _getProgressVariant() {
+    const e = this._getLevel();
+    return e === "high" ? "success" : e === "medium" ? "warning" : "danger";
+  }
+  _getSparkColor(e) {
+    return e >= this.highThreshold ? "var(--cg-ai-confidence-high-color)" : e >= this.lowThreshold ? "var(--cg-ai-confidence-medium-color)" : "var(--cg-ai-confidence-low-color)";
+  }
+  // ─── Renderers ──────────────────────────────────────────────────────────
+  _renderSparkline() {
+    if (this.history.length < 2) return p;
+    const e = Math.max(...this.history, 1);
+    return c`
+      <div class="sparkline" aria-hidden="true">
+        ${this.history.slice(-12).map((r) => c`
+          <div class="spark-bar" style="height: ${r / e * 16}px; background: ${this._getSparkColor(r)};"></div>
+        `)}
+      </div>
+    `;
+  }
+  _renderInner() {
+    const e = this._getLevel(), r = Math.round(this.score * 100), a = this.showPercentage ? `${r}%` : e;
+    return this.size === "lg" ? c`
+        <div class="top-row">
+          <span class="top-row-left">
+            <cg-icon name=${this._getIconName()} size="xs"></cg-icon>
+            <span class="score">${r}%</span>
+          </span>
+          <span class="level-label">${e}</span>
+        </div>
+        <cg-progress-bar
+          .value=${r}
+          variant=${this._getProgressVariant()}
+          size="sm"
+          aria-hidden="true"
+        ></cg-progress-bar>
+        ${this._renderSparkline()}
+      ` : c`
+      <cg-icon name=${this._getIconName()} size="xs"></cg-icon>
+      <span class="score">${a}</span>
+      ${this._renderSparkline()}
+    `;
+  }
+  render() {
+    const e = this._getLevel(), r = Math.round(this.score * 100), a = `AI confidence: ${r} percent, ${e}`, n = this.explanation ? `${e.charAt(0).toUpperCase() + e.slice(1)} confidence — ${r}%. ${this.explanation}` : `${e.charAt(0).toUpperCase() + e.slice(1)} confidence — ${r}%`;
+    return c`
+      <cg-tooltip content=${n} position="top">
+        <span class="badge ${e}" aria-label=${a}>
+          ${this._renderInner()}
+        </span>
+      </cg-tooltip>
+    `;
+  }
+};
+t.styles = [u, v, d`
+    :host { align-items: center; }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      border: var(--cg-border-width-50) solid transparent;
+    }
+
+    /* ── Sizes ── */
+    :host([size="sm"]) .badge {
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-component-ai-badge-radius-sm);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      gap: var(--cg-spacing-2);
+    }
+    .badge {
+      padding: var(--cg-spacing-4) var(--cg-spacing-12);
+      border-radius: var(--cg-component-ai-badge-radius-md);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+    }
+    :host([size="lg"]) .badge {
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      border-radius: var(--cg-component-ai-badge-radius-lg);
+      font-size: var(--cg-font-size-sm);
+      flex-direction: column;
+      align-items: stretch;
+      gap: var(--cg-spacing-8);
+      min-width: var(--cg-spacing-128);
+    }
+    :host([size="lg"]) .top-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    :host([size="lg"]) cg-progress-bar { display: block; }
+
+    /* ── Variant tints ──
+       Theme-aware tier-3 tokens: light theme = solid pastel pill,
+       dark theme = stronger rgba tint than the generic --cg-color-status-*
+       chain (which dims to 12% and looks transparent on dark canvases).
+       Token values defined in packages/tokens/tier2-semantic/ai-states*.json. */
+    .badge.high {
+      background: var(--cg-ai-confidence-high-background);
+      color: var(--cg-ai-confidence-high-color);
+      border-color: var(--cg-ai-confidence-high-border);
+    }
+    .badge.medium {
+      background: var(--cg-ai-confidence-medium-background);
+      color: var(--cg-ai-confidence-medium-color);
+      border-color: var(--cg-ai-confidence-medium-border);
+    }
+    .badge.low {
+      background: var(--cg-ai-confidence-low-background);
+      color: var(--cg-ai-confidence-low-color);
+      border-color: var(--cg-ai-confidence-low-border);
+    }
+
+    .score { letter-spacing: var(--cg-letter-spacing-wide); }
+    .level-label {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      opacity: 0.8;
+      text-transform: capitalize;
+    }
+
+    /* ── Sparkline (consumer-driven history of scores) ── */
+    .sparkline {
+      display: flex;
+      align-items: flex-end;
+      gap: var(--cg-spacing-1);
+      height: var(--cg-spacing-16);
+      margin-left: var(--cg-spacing-6);
+    }
+    .spark-bar {
+      width: var(--cg-spacing-2);
+      border-radius: var(--cg-border-radius-full);
+      transition: height var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+      opacity: 0.5;
+    }
+    .spark-bar:last-child { opacity: 1; }
+
+    /* Top row inner shorthand. */
+    .top-row-left {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .spark-bar { transition: none; }
+    }
+  `];
+i([
+  s({ type: Number })
+], t.prototype, "score", 2);
+i([
+  s({ type: Boolean, attribute: "show-percentage" })
+], t.prototype, "showPercentage", 2);
+i([
+  s({ type: String, reflect: !0 })
+], t.prototype, "size", 2);
+i([
+  s({ type: String })
+], t.prototype, "explanation", 2);
+i([
+  s({ type: Array })
+], t.prototype, "history", 2);
+i([
+  s({ type: Number, attribute: "high-threshold" })
+], t.prototype, "highThreshold", 2);
+i([
+  s({ type: Number, attribute: "low-threshold" })
+], t.prototype, "lowThreshold", 2);
+t = i([
+  m("ai-confidence-badge")
+], t);
+export {
+  t as AiConfidenceBadge
+};
+//# sourceMappingURL=ai-confidence-badge.js.map

package/dist/components/ai-confidence-badge/ai-confidence-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-confidence-badge.js","sources":["../../../src/components/ai-confidence-badge/ai-confidence-badge.ts"],"sourcesContent":["/**\n * @element ai-confidence-badge\n * Display-only AI confidence indicator. Three sizes (sm / md / lg),\n * color-coded levels (high / medium / low), <cg-tooltip> with explanation,\n * optional sparkline of historical scores, and a real <cg-progress-bar>\n * for the lg variant.\n *\n * This is a pure display component — like <cg-badge>, <cg-icon>, and\n * <cg-spinner>. If you need clickability, wrap it:\n *\n * ```html\n * <button type=\"button\" @click=${openCalibrationDrilldown}>\n *   <ai-confidence-badge score=\"0.45\" size=\"lg\"></ai-confidence-badge>\n * </button>\n * ```\n *\n * @example\n * ```html\n * <ai-confidence-badge score=\"0.92\" size=\"sm\"></ai-confidence-badge>\n * <ai-confidence-badge\n *   score=\"0.45\"\n *   size=\"lg\"\n *   explanation=\"Low data coverage in retrieval — consider re-running\"\n *   .history=${[0.3, 0.4, 0.42, 0.45]}\n * ></ai-confidence-badge>\n * ```\n *\n * @cssprop --cg-ai-confidence-high-{background,color,border} - High-confidence tint\n * @cssprop --cg-ai-confidence-medium-{background,color,border} - Medium-confidence tint\n * @cssprop --cg-ai-confidence-low-{background,color,border} - Low-confidence tint\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBase, reducedMotion } from '../../styles/index.js';\nimport '../cg-icon/cg-icon.js';\nimport '../cg-tooltip/cg-tooltip.js';\nimport '../cg-progress-bar/cg-progress-bar.js';\n\n@customElement('ai-confidence-badge')\nexport class AiConfidenceBadge extends LitElement {\n  static override styles = [hostBase, reducedMotion, css`\n    :host { align-items: center; }\n\n    .badge {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      border: var(--cg-border-width-50) solid transparent;\n    }\n\n    /* ── Sizes ── */\n    :host([size=\"sm\"]) .badge {\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-component-ai-badge-radius-sm);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      gap: var(--cg-spacing-2);\n    }\n    .badge {\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      border-radius: var(--cg-component-ai-badge-radius-md);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n    }\n    :host([size=\"lg\"]) .badge {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-radius: var(--cg-component-ai-badge-radius-lg);\n      font-size: var(--cg-font-size-sm);\n      flex-direction: column;\n      align-items: stretch;\n      gap: var(--cg-spacing-8);\n      min-width: var(--cg-spacing-128);\n    }\n    :host([size=\"lg\"]) .top-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n    :host([size=\"lg\"]) cg-progress-bar { display: block; }\n\n    /* ── Variant tints ──\n       Theme-aware tier-3 tokens: light theme = solid pastel pill,\n       dark theme = stronger rgba tint than the generic --cg-color-status-*\n       chain (which dims to 12% and looks transparent on dark canvases).\n       Token values defined in packages/tokens/tier2-semantic/ai-states*.json. */\n    .badge.high {\n      background: var(--cg-ai-confidence-high-background);\n      color: var(--cg-ai-confidence-high-color);\n      border-color: var(--cg-ai-confidence-high-border);\n    }\n    .badge.medium {\n      background: var(--cg-ai-confidence-medium-background);\n      color: var(--cg-ai-confidence-medium-color);\n      border-color: var(--cg-ai-confidence-medium-border);\n    }\n    .badge.low {\n      background: var(--cg-ai-confidence-low-background);\n      color: var(--cg-ai-confidence-low-color);\n      border-color: var(--cg-ai-confidence-low-border);\n    }\n\n    .score { letter-spacing: var(--cg-letter-spacing-wide); }\n    .level-label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      opacity: 0.8;\n      text-transform: capitalize;\n    }\n\n    /* ── Sparkline (consumer-driven history of scores) ── */\n    .sparkline {\n      display: flex;\n      align-items: flex-end;\n      gap: var(--cg-spacing-1);\n      height: var(--cg-spacing-16);\n      margin-left: var(--cg-spacing-6);\n    }\n    .spark-bar {\n      width: var(--cg-spacing-2);\n      border-radius: var(--cg-border-radius-full);\n      transition: height var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n      opacity: 0.5;\n    }\n    .spark-bar:last-child { opacity: 1; }\n\n    /* Top row inner shorthand. */\n    .top-row-left {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .spark-bar { transition: none; }\n    }\n  `];\n\n  /** Confidence score 0-1. */\n  @property({ type: Number }) score: number = 0.85;\n\n  /** Show percentage or level name in the inline label. */\n  @property({ type: Boolean, attribute: 'show-percentage' }) showPercentage: boolean = true;\n\n  /** Size variant. */\n  @property({ type: String, reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Tooltip explanation text. */\n  @property({ type: String }) explanation: string = '';\n\n  /** History array of scores (0-1) for sparkline. */\n  @property({ type: Array }) history: number[] = [];\n\n  /** High-confidence threshold (default 0.8). */\n  @property({ type: Number, attribute: 'high-threshold' }) highThreshold: number = 0.8;\n\n  /** Low-confidence threshold (default 0.5). Below this = \"low\". */\n  @property({ type: Number, attribute: 'low-threshold' }) lowThreshold: number = 0.5;\n\n  // ─── Derivations ────────────────────────────────────────────────────────\n\n  private _getLevel(): 'high' | 'medium' | 'low' {\n    if (this.score >= this.highThreshold) return 'high';\n    if (this.score >= this.lowThreshold) return 'medium';\n    return 'low';\n  }\n\n  private _getIconName(): string {\n    const level = this._getLevel();\n    if (level === 'high') return 'check';\n    if (level === 'medium') return 'info';\n    return 'warning';\n  }\n\n  private _getProgressVariant(): 'success' | 'warning' | 'danger' {\n    const level = this._getLevel();\n    return level === 'high' ? 'success' : level === 'medium' ? 'warning' : 'danger';\n  }\n\n  private _getSparkColor(value: number): string {\n    if (value >= this.highThreshold) return 'var(--cg-ai-confidence-high-color)';\n    if (value >= this.lowThreshold) return 'var(--cg-ai-confidence-medium-color)';\n    return 'var(--cg-ai-confidence-low-color)';\n  }\n\n  // ─── Renderers ──────────────────────────────────────────────────────────\n\n  private _renderSparkline() {\n    if (this.history.length < 2) return nothing;\n    const max = Math.max(...this.history, 1);\n    return html`\n      <div class=\"sparkline\" aria-hidden=\"true\">\n        ${this.history.slice(-12).map(v => html`\n          <div class=\"spark-bar\" style=\"height: ${(v / max) * 16}px; background: ${this._getSparkColor(v)};\"></div>\n        `)}\n      </div>\n    `;\n  }\n\n  private _renderInner() {\n    const level = this._getLevel();\n    const pct = Math.round(this.score * 100);\n    const label = this.showPercentage ? `${pct}%` : level;\n\n    if (this.size === 'lg') {\n      return html`\n        <div class=\"top-row\">\n          <span class=\"top-row-left\">\n            <cg-icon name=${this._getIconName()} size=\"xs\"></cg-icon>\n            <span class=\"score\">${pct}%</span>\n          </span>\n          <span class=\"level-label\">${level}</span>\n        </div>\n        <cg-progress-bar\n          .value=${pct}\n          variant=${this._getProgressVariant()}\n          size=\"sm\"\n          aria-hidden=\"true\"\n        ></cg-progress-bar>\n        ${this._renderSparkline()}\n      `;\n    }\n\n    return html`\n      <cg-icon name=${this._getIconName()} size=\"xs\"></cg-icon>\n      <span class=\"score\">${label}</span>\n      ${this._renderSparkline()}\n    `;\n  }\n\n  override render() {\n    const level = this._getLevel();\n    const pct = Math.round(this.score * 100);\n    const ariaLabel = `AI confidence: ${pct} percent, ${level}`;\n\n    const tooltipContent = this.explanation\n      ? `${level.charAt(0).toUpperCase() + level.slice(1)} confidence — ${pct}%. ${this.explanation}`\n      : `${level.charAt(0).toUpperCase() + level.slice(1)} confidence — ${pct}%`;\n\n    return html`\n      <cg-tooltip content=${tooltipContent} position=\"top\">\n        <span class=\"badge ${level}\" aria-label=${ariaLabel}>\n          ${this._renderInner()}\n        </span>\n      </cg-tooltip>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-confidence-badge': AiConfidenceBadge;\n  }\n}\n"],"names":["AiConfidenceBadge","LitElement","level","value","nothing","max","html","v","pct","label","ariaLabel","tooltipContent","hostBase","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-confidence-slider/ai-confidence-slider.d.ts

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export declare class AiConfidenceSlider extends LitElement {
+    static styles: import('lit').CSSResult[];
+    value: number;
+    min: number;
+    max: number;
+    resultCount: number;
+    totalCount: number;
+    distribution: number[];
+    private _presets;
+    private _handleChange;
+    private _setPreset;
+    private _getBarColor;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=ai-confidence-slider.d.ts.map

package/dist/components/ai-confidence-slider/ai-confidence-slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-confidence-slider.d.ts","sourceRoot":"","sources":["../../../src/components/ai-confidence-slider/ai-confidence-slider.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAgB,MAAM,4BAyGnB;IACyB,KAAK,EAAE,MAAM,CAAM;IACnB,GAAG,EAAE,MAAM,CAAK;IAChB,GAAG,EAAE,MAAM,CAAO;IAClB,WAAW,EAAE,MAAM,CAAK;IACxB,UAAU,EAAE,MAAM,CAAK;IACxB,YAAY,EAAE,MAAM,EAAE,CAAM;IAEvD,OAAO,CAAC,QAAQ,CAId;IAEF,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,UAAU;IAQlB,OAAO,CAAC,YAAY;IAOX,MAAM;CAgDhB"}

package/dist/components/ai-confidence-slider/ai-confidence-slider.js

@@ -0,0 +1,212 @@
+import { css as d, LitElement as v, nothing as g, html as l } from "lit";
+import { property as n, customElement as p } from "lit/decorators.js";
+import { h as b, r as h, f } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (r, e, o, i) => {
+  for (var t = i > 1 ? void 0 : i ? x(e, o) : e, u = r.length - 1, c; u >= 0; u--)
+    (c = r[u]) && (t = (i ? c(e, o, t) : c(t)) || t);
+  return i && t && m(e, o, t), t;
+};
+let a = class extends v {
+  constructor() {
+    super(...arguments), this.value = 50, this.min = 0, this.max = 100, this.resultCount = 0, this.totalCount = 0, this.distribution = [], this._presets = [
+      { label: "Low (30%)", value: 30 },
+      { label: "Medium (60%)", value: 60 },
+      { label: "High (80%)", value: 80 }
+    ];
+  }
+  _handleChange(r) {
+    this.value = Number(r.target.value), this.dispatchEvent(new CustomEvent("ai-confidence-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { value: this.value }
+    }));
+  }
+  _setPreset(r) {
+    this.value = r, this.dispatchEvent(new CustomEvent("ai-confidence-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { value: this.value }
+    }));
+  }
+  _getBarColor(r, e) {
+    const o = r / e * 100;
+    return o < 30 ? "var(--cg-color-status-error-text-default)" : o < 60 ? "var(--cg-color-status-warning-text-default)" : "var(--cg-color-status-success-text-default)";
+  }
+  render() {
+    const r = (this.value - this.min) / (this.max - this.min) * 100;
+    return l`
+      <div class="container" role="group" aria-label="Confidence threshold">
+        <div class="header">
+          <span class="label">Confidence Threshold</span>
+          ${this.totalCount > 0 ? l`
+            <span class="count">
+              Showing <span class="count-highlight">${this.resultCount}</span> of ${this.totalCount}
+            </span>
+          ` : g}
+        </div>
+
+        <div class="slider-row" style="--thumb-pos: ${r}%;">
+          <div class="value-badge">${this.value}%</div>
+          <input type="range" .value=${String(this.value)}
+            min="${this.min}" max="${this.max}"
+            @input=${this._handleChange}
+            aria-label="Minimum confidence: ${this.value}%"
+            aria-valuemin="${this.min}" aria-valuemax="${this.max}" aria-valuenow="${this.value}" />
+        </div>
+
+        <div class="presets">
+          ${this._presets.map((e) => l`
+            <button class="preset-btn ${this.value === e.value ? "active" : ""}"
+              aria-label=${`Set confidence to ${e.value}%`}
+              aria-pressed=${this.value === e.value ? "true" : "false"}
+              @click=${() => this._setPreset(e.value)}>${e.label}</button>
+          `)}
+        </div>
+
+        ${this.distribution.length > 0 ? (() => {
+      const e = Math.max(...this.distribution, 1);
+      return l`
+          <div class="distribution" aria-hidden="true">
+            ${this.distribution.map((o, i) => {
+        const t = o / e * 32, c = i / this.distribution.length * 100 < this.value;
+        return l`<div class="dist-bar ${c ? "below" : ""}"
+                style="height: ${Math.max(t, 2)}px; background: ${this._getBarColor(i, this.distribution.length)};"></div>`;
+      })}
+          </div>
+        `;
+    })() : g}
+      </div>
+    `;
+  }
+};
+a.styles = [b, h, f, d`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+
+    .container {
+      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);
+      padding: var(--cg-spacing-20) var(--cg-spacing-24);
+    }
+
+    .header {
+      display: flex; justify-content: space-between; align-items: center;
+      margin-bottom: var(--cg-spacing-8);
+    }
+    .label {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-bold); color: var(--cg-color-input-text-placeholder);
+      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);
+    }
+    .count {
+      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-base-text);
+    }
+    .count-highlight {
+      font-weight: var(--cg-font-weight-bold); color: var(--cg-color-surface-base-text);
+    }
+
+    /* Slider */
+    .slider-row { position: relative; margin-bottom: var(--cg-spacing-8); }
+
+    input[type="range"] {
+      -webkit-appearance: none;
+      width: 100%;
+      height: var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-50);
+      background: linear-gradient(90deg, var(--cg-color-status-error-text-default) 0%, var(--cg-color-status-warning-text-default) 50%, var(--cg-color-status-success-text-default) 100%);
+      outline: none;
+    }
+    input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-base-text);
+      border: var(--cg-spacing-2) solid var(--cg-color-surface-cards-background);
+      cursor: pointer;
+    }
+    input[type="range"]:focus-visible::-webkit-slider-thumb {
+      outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    /* Firefox */
+    input[type="range"]::-moz-range-thumb {
+      width: var(--cg-spacing-16); height: var(--cg-spacing-16); border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-base-text);
+      border: var(--cg-spacing-2) solid var(--cg-color-surface-cards-background);
+      cursor: pointer;
+    }
+    input[type="range"]:focus-visible::-moz-range-thumb {
+      outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    input[type="range"]::-moz-range-track {
+      height: var(--cg-spacing-6); border-radius: var(--cg-border-radius-50);
+      background: linear-gradient(90deg, var(--cg-color-status-error-text-default) 0%, var(--cg-color-status-warning-text-default) 50%, var(--cg-color-status-success-text-default) 100%);
+    }
+
+    .value-badge {
+      position: absolute;
+      top: calc(-1 * var(--cg-spacing-24));
+      left: var(--thumb-pos, 50%);
+      transform: translateX(-50%);
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-bold);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8); border-radius: var(--cg-border-radius-50);
+      background: var(--cg-color-surface-cards-background);
+      color: var(--cg-color-surface-base-text);
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    /* Presets */
+    .presets {
+      display: flex; gap: var(--cg-spacing-6); margin-bottom: var(--cg-spacing-8);
+    }
+    .preset-btn {
+      flex: 1; padding: var(--cg-spacing-4) 0; border-radius: var(--cg-component-card-radius);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: none; color: var(--cg-color-input-text-placeholder);
+      font: inherit; font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);
+      cursor: pointer; transition: opacity var(--cg-transition-duration-fast); text-align: center;
+    }
+    .preset-btn:hover { border-color: var(--cg-color-input-border-hover); color: var(--cg-color-surface-base-text); }
+    .preset-btn:focus-visible {
+      outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .preset-btn.active { border-color: var(--cg-color-surface-base-text); color: var(--cg-color-surface-base-text); background: var(--cg-overlay-accent-subtle); }
+
+    /* Distribution */
+    .distribution {
+      display: flex; align-items: flex-end; gap: var(--cg-spacing-1); height: var(--cg-spacing-32);
+      padding-top: var(--cg-spacing-8); border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    .dist-bar {
+      flex: 1; border-radius: var(--cg-spacing-2) var(--cg-spacing-2) 0 0; min-height: var(--cg-spacing-2);
+      transition: opacity var(--cg-transition-duration-fast);
+    }
+    .dist-bar.below { opacity: 0.2; }
+  `];
+s([
+  n({ type: Number })
+], a.prototype, "value", 2);
+s([
+  n({ type: Number })
+], a.prototype, "min", 2);
+s([
+  n({ type: Number })
+], a.prototype, "max", 2);
+s([
+  n({ type: Number })
+], a.prototype, "resultCount", 2);
+s([
+  n({ type: Number })
+], a.prototype, "totalCount", 2);
+s([
+  n({ type: Array })
+], a.prototype, "distribution", 2);
+a = s([
+  p("ai-confidence-slider")
+], a);
+export {
+  a as AiConfidenceSlider
+};
+//# sourceMappingURL=ai-confidence-slider.js.map

package/dist/components/ai-confidence-slider/ai-confidence-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-confidence-slider.js","sources":["../../../src/components/ai-confidence-slider/ai-confidence-slider.ts"],"sourcesContent":["/**\n * @element ai-confidence-slider\n * Gradient range slider for setting confidence thresholds with presets and distribution histogram.\n *\n * @example\n * ```html\n * <ai-confidence-slider\n *   value=\"70\"\n *   resultCount=\"42\" totalCount=\"100\"\n *   .distribution=${[2,5,8,12,20,30,15,6,1,1]}\n * ></ai-confidence-slider>\n * ```\n *\n * @fires {CustomEvent<{value: number}>} ai-confidence-change - Slider value changed or preset clicked\n *\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Slider thumb border, value badge highlight, active preset\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-confidence-slider')\nexport class AiConfidenceSlider extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n\n    .container {\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-20) var(--cg-spacing-24);\n    }\n\n    .header {\n      display: flex; justify-content: space-between; align-items: center;\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .label {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-bold); color: var(--cg-color-input-text-placeholder);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .count {\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-base-text);\n    }\n    .count-highlight {\n      font-weight: var(--cg-font-weight-bold); color: var(--cg-color-surface-base-text);\n    }\n\n    /* Slider */\n    .slider-row { position: relative; margin-bottom: var(--cg-spacing-8); }\n\n    input[type=\"range\"] {\n      -webkit-appearance: none;\n      width: 100%;\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-50);\n      background: linear-gradient(90deg, var(--cg-color-status-error-text-default) 0%, var(--cg-color-status-warning-text-default) 50%, var(--cg-color-status-success-text-default) 100%);\n      outline: none;\n    }\n    input[type=\"range\"]::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-base-text);\n      border: var(--cg-spacing-2) solid var(--cg-color-surface-cards-background);\n      cursor: pointer;\n    }\n    input[type=\"range\"]:focus-visible::-webkit-slider-thumb {\n      outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    /* Firefox */\n    input[type=\"range\"]::-moz-range-thumb {\n      width: var(--cg-spacing-16); height: var(--cg-spacing-16); border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-base-text);\n      border: var(--cg-spacing-2) solid var(--cg-color-surface-cards-background);\n      cursor: pointer;\n    }\n    input[type=\"range\"]:focus-visible::-moz-range-thumb {\n      outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    input[type=\"range\"]::-moz-range-track {\n      height: var(--cg-spacing-6); border-radius: var(--cg-border-radius-50);\n      background: linear-gradient(90deg, var(--cg-color-status-error-text-default) 0%, var(--cg-color-status-warning-text-default) 50%, var(--cg-color-status-success-text-default) 100%);\n    }\n\n    .value-badge {\n      position: absolute;\n      top: calc(-1 * var(--cg-spacing-24));\n      left: var(--thumb-pos, 50%);\n      transform: translateX(-50%);\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-bold);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8); border-radius: var(--cg-border-radius-50);\n      background: var(--cg-color-surface-cards-background);\n      color: var(--cg-color-surface-base-text);\n      pointer-events: none;\n      z-index: 1;\n    }\n\n    /* Presets */\n    .presets {\n      display: flex; gap: var(--cg-spacing-6); margin-bottom: var(--cg-spacing-8);\n    }\n    .preset-btn {\n      flex: 1; padding: var(--cg-spacing-4) 0; border-radius: var(--cg-component-card-radius);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: none; color: var(--cg-color-input-text-placeholder);\n      font: inherit; font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer; transition: opacity var(--cg-transition-duration-fast); text-align: center;\n    }\n    .preset-btn:hover { border-color: var(--cg-color-input-border-hover); color: var(--cg-color-surface-base-text); }\n    .preset-btn:focus-visible {\n      outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .preset-btn.active { border-color: var(--cg-color-surface-base-text); color: var(--cg-color-surface-base-text); background: var(--cg-overlay-accent-subtle); }\n\n    /* Distribution */\n    .distribution {\n      display: flex; align-items: flex-end; gap: var(--cg-spacing-1); height: var(--cg-spacing-32);\n      padding-top: var(--cg-spacing-8); border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n    .dist-bar {\n      flex: 1; border-radius: var(--cg-spacing-2) var(--cg-spacing-2) 0 0; min-height: var(--cg-spacing-2);\n      transition: opacity var(--cg-transition-duration-fast);\n    }\n    .dist-bar.below { opacity: 0.2; }\n  `];\n  @property({ type: Number }) value: number = 50;\n  @property({ type: Number }) min: number = 0;\n  @property({ type: Number }) max: number = 100;\n  @property({ type: Number }) resultCount: number = 0;\n  @property({ type: Number }) totalCount: number = 0;\n  @property({ type: Array }) distribution: number[] = [];\n\n  private _presets = [\n    { label: 'Low (30%)', value: 30 },\n    { label: 'Medium (60%)', value: 60 },\n    { label: 'High (80%)', value: 80 },\n  ];\n\n  private _handleChange(e: Event) {\n    this.value = Number((e.target as HTMLInputElement).value);\n    this.dispatchEvent(new CustomEvent('ai-confidence-change', {\n      bubbles: true, composed: true,\n      detail: { value: this.value },\n    }));\n  }\n\n  private _setPreset(val: number) {\n    this.value = val;\n    this.dispatchEvent(new CustomEvent('ai-confidence-change', {\n      bubbles: true, composed: true,\n      detail: { value: this.value },\n    }));\n  }\n\n  private _getBarColor(index: number, total: number): string {\n    const pct = (index / total) * 100;\n    if (pct < 30) return 'var(--cg-color-status-error-text-default)';\n    if (pct < 60) return 'var(--cg-color-status-warning-text-default)';\n    return 'var(--cg-color-status-success-text-default)';\n  }\n\n  override render() {\n    const thumbPos = ((this.value - this.min) / (this.max - this.min)) * 100;\n\n    return html`\n      <div class=\"container\" role=\"group\" aria-label=\"Confidence threshold\">\n        <div class=\"header\">\n          <span class=\"label\">Confidence Threshold</span>\n          ${this.totalCount > 0 ? html`\n            <span class=\"count\">\n              Showing <span class=\"count-highlight\">${this.resultCount}</span> of ${this.totalCount}\n            </span>\n          ` : nothing}\n        </div>\n\n        <div class=\"slider-row\" style=\"--thumb-pos: ${thumbPos}%;\">\n          <div class=\"value-badge\">${this.value}%</div>\n          <input type=\"range\" .value=${String(this.value)}\n            min=\"${this.min}\" max=\"${this.max}\"\n            @input=${this._handleChange}\n            aria-label=\"Minimum confidence: ${this.value}%\"\n            aria-valuemin=\"${this.min}\" aria-valuemax=\"${this.max}\" aria-valuenow=\"${this.value}\" />\n        </div>\n\n        <div class=\"presets\">\n          ${this._presets.map(p => html`\n            <button class=\"preset-btn ${this.value === p.value ? 'active' : ''}\"\n              aria-label=${`Set confidence to ${p.value}%`}\n              aria-pressed=${this.value === p.value ? 'true' : 'false'}\n              @click=${() => this._setPreset(p.value)}>${p.label}</button>\n          `)}\n        </div>\n\n        ${this.distribution.length > 0 ? (() => {\n          const maxVal = Math.max(...this.distribution, 1);\n          return html`\n          <div class=\"distribution\" aria-hidden=\"true\">\n            ${this.distribution.map((v, i) => {\n              const h = (v / maxVal) * 32;\n              const pct = (i / this.distribution.length) * 100;\n              const isBelow = pct < this.value;\n              return html`<div class=\"dist-bar ${isBelow ? 'below' : ''}\"\n                style=\"height: ${Math.max(h, 2)}px; background: ${this._getBarColor(i, this.distribution.length)};\"></div>`;\n            })}\n          </div>\n        `;})() : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiConfidenceSlider","LitElement","e","val","index","total","pct","thumbPos","html","nothing","p","maxVal","v","h","isBelow","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-consent-manager/ai-consent-manager.d.ts

@@ -0,0 +1,26 @@
+import { LitElement, nothing } from 'lit';
+export interface ConsentItem {
+    id: string;
+    label: string;
+    description: string;
+    required?: boolean;
+    checked?: boolean;
+    category?: string;
+}
+export declare class AiConsentManager extends LitElement {
+    static styles: import('lit').CSSResult[];
+    consents: ConsentItem[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    title: string;
+    acceptAllLabel: string;
+    rejectAllLabel: string;
+    saveLabel: string;
+    private _toggleConsent;
+    private _acceptAll;
+    private _rejectAll;
+    private _save;
+    private _getCategories;
+    private _renderItem;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}
+//# sourceMappingURL=ai-consent-manager.d.ts.map

package/dist/components/ai-consent-manager/ai-consent-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-consent-manager.d.ts","sourceRoot":"","sources":["../../../src/components/ai-consent-manager/ai-consent-manager.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAoEnB;IAEwB,QAAQ,EAAE,WAAW,EAAE,CAAM;IAC3B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACpD,KAAK,SAAsB;IACpC,cAAc,SAAgB;IAC9B,cAAc,SAAgB;IAC9B,SAAS,SAAsB;IAE3C,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,cAAc;IAItB,OAAO,CAAC,WAAW;IAmBV,MAAM;CA4BhB"}