@cognivo/components 0.8.0 → 0.8.2

package/dist/components/ai-feature-flag/ai-feature-flag.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-feature-flag.js","sources":["../../../src/components/ai-feature-flag/ai-feature-flag.ts"],"sourcesContent":["/**\n * @element ai-feature-flag\n * Feature-flag management panel — environment header, debounced search,\n * enabled/disabled grouping, dogfooded <cg-switch> toggles, per-flag type\n * badge (release / experiment / kill-switch / operational), rollout-%\n * mini bar, and relative-time last-modified. Modeled on LaunchDarkly /\n * Statsig / Vercel Flags dashboards.\n *\n * @example\n * ```html\n * <ai-feature-flag environment=\"staging\"></ai-feature-flag>\n * ```\n *\n * @fires {CustomEvent<{id, name, enabled}>} ai-flag-toggle - Flag flipped\n * @fires {CustomEvent<{id, name}>} ai-flag-click - Flag row clicked\n *\n * @cssprop [--cg-color-surface-cards-background] - Card background\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-switch/cg-switch.js';\nimport '../ai-search/ai-search.js';\n\nexport type FeatureFlagType = 'release' | 'experiment' | 'kill-switch' | 'operational';\n\nexport interface FeatureFlag {\n  id: string;\n  name: string;\n  description: string;\n  enabled: boolean;\n  /** Optional flag classification — drives badge color. */\n  type?: FeatureFlagType;\n  /** Per-flag environment label (overrides the panel's environment). */\n  environment?: string;\n  /** Rollout percentage 0-100. Renders a mini bar + label when set. */\n  rollout?: number;\n  /** ISO date or epoch ms — rendered as relative time. */\n  lastModified?: string | number;\n  /** Toggle-pending state. */\n  loading?: boolean;\n  /** Locked / read-only flag. */\n  disabled?: boolean;\n}\n\nconst TYPE_LABELS: Record<FeatureFlagType, string> = {\n  release: 'Release',\n  experiment: 'Experiment',\n  'kill-switch': 'Kill switch',\n  operational: 'Operational',\n};\n\n@customElement('ai-feature-flag')\nexport class AiFeatureFlag extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      display: block;\n      background: var(--cg-color-surface-cards-background);\n      color: var(--cg-color-surface-base-text);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      box-shadow: var(--cg-elevation-1);\n      padding: var(--cg-spacing-24);\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    /* ── Header ── */\n    .header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding-bottom: var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    h3 {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      margin: 0;\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .env-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      font-size: 10px;\n      font-weight: var(--cg-font-weight-bold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      background: var(--cg-color-surface-cards-emphasis);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      color: var(--cg-color-surface-base-text);\n    }\n    .env-badge::before {\n      content: '';\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-status-info-text-default);\n    }\n\n    /* ── Search ── */\n    .search-bar { margin-bottom: var(--cg-spacing-12); }\n    .search-bar ai-search { width: 100%; display: block; }\n\n    /* ── Group label ── */\n    .group-label {\n      font-size: 10px;\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-input-text-placeholder);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      margin: var(--cg-spacing-16) 0 var(--cg-spacing-8);\n    }\n    .group-label:first-of-type { margin-top: 0; }\n\n    .flag-list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-6);\n    }\n\n    /* ── Flag card — 4-row grid:\n         row 1: title cluster (left) | meta-right (Updated · env) | toggle\n         row 2: description (full width left of the toggle)         | toggle\n         row 3: full-width rollout bar (spans both columns)\n       Toggle stays vertically centered across rows 1+2; the rollout bar\n       gets the full card width so it reads at a glance instead of being\n       a tiny inline strip. */\n    .flag-item {\n      display: grid;\n      grid-template-columns: 1fr auto;\n      grid-template-areas:\n        'title  toggle'\n        'desc   toggle'\n        'bar    bar';\n      column-gap: var(--cg-spacing-16);\n      row-gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      background: var(--cg-color-surface-cards-emphasis);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-family: inherit;\n      font: inherit;\n      width: 100%;\n      text-align: left;\n      color: inherit;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    /* Cards are clickable for inspection but do NOT press-scale — a row\n       isn't a button. Hover bumps the border for affordance instead. */\n    .flag-item:hover { border-color: var(--cg-color-surface-cards-border-strong); }\n    .flag-item:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .flag-item.disabled {\n      opacity: 0.6;\n      cursor: default;\n    }\n    .flag-item:not(.disabled) { cursor: pointer; }\n\n    /* Right-aligned toggle slot — spans all three rows, vertically centered. */\n    .flag-toggle-slot {\n      grid-area: toggle;\n      align-self: center;\n      display: flex;\n      align-items: center;\n    }\n\n    /* Title row split: name + type on the left, quiet meta on the right.\n       The right-side meta (Updated, env) keeps the title row tidy and\n       gives the bottom row over to the full-width progress bar. */\n    .flag-title-row {\n      grid-area: title;\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-12);\n      min-width: 0;\n    }\n    .flag-title-left {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      flex-wrap: wrap;\n      min-width: 0;\n    }\n    .flag-title-right {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      flex-shrink: 0;\n      font-variant-numeric: tabular-nums;\n    }\n    .flag-name {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    /* ── Type badge per flag (release / experiment / kill-switch / operational) ── */\n    .type-badge {\n      display: inline-flex;\n      align-items: center;\n      padding: 0 var(--cg-spacing-6);\n      height: var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-50);\n      font-size: 10px;\n      font-weight: var(--cg-font-weight-bold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      border: var(--cg-border-width-50) solid currentColor;\n      background: transparent;\n      flex-shrink: 0;\n    }\n    .type-release      { color: var(--cg-color-status-info-text-default); }\n    .type-experiment   { color: var(--cg-color-accent-text); }\n    .type-kill-switch  { color: var(--cg-color-status-error-text-default); }\n    .type-operational  { color: var(--cg-color-status-warning-text-default); }\n\n    /* Description — second row, full width on the left side. */\n    .flag-desc {\n      grid-area: desc;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      line-height: var(--cg-line-height-normal);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n    }\n\n    /* Bottom row — full-width rollout bar with the % label inline above. */\n    .flag-bar-row {\n      grid-area: bar;\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-4);\n      width: 100%;\n    }\n    .flag-bar-label {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      font-size: 10px;\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-input-text-placeholder);\n      letter-spacing: var(--cg-letter-spacing-wide);\n      text-transform: uppercase;\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* ── Rollout bar — full-width strip across the bottom of the card.\n       Display: block on both track and fill so the percentage width\n       actually renders (inline elements silently ignore width/height). */\n    .rollout-track {\n      display: block;\n      width: 100%;\n      height: var(--cg-spacing-6);\n      background: var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-full);\n      overflow: hidden;\n    }\n    .rollout-fill {\n      display: block;\n      height: 100%;\n      background: var(--cg-color-status-success-text-default);\n      border-radius: var(--cg-border-radius-full);\n      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out);\n    }\n    .rollout-fill.partial { background: var(--cg-color-status-warning-text-default); }\n    .rollout-fill.zero    { background: var(--cg-color-status-error-text-default); }\n\n    .flag-env {\n      padding: var(--cg-spacing-2) var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-50);\n      font-size: 10px;\n      font-weight: var(--cg-font-weight-bold);\n      background: var(--cg-overlay-dark-subtle);\n      color: var(--cg-color-input-text-placeholder);\n      flex-shrink: 0;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      text-transform: uppercase;\n    }\n    .flag-updated {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    /* ── Footer count ── */\n    .count {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-16);\n      text-align: center;\n      font-variant-numeric: tabular-nums;\n    }\n\n    .empty {\n      text-align: center;\n      padding: var(--cg-spacing-32);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) { border-radius: 0; }\n    :host([rounded=\"sm\"])   { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"])   { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"])   { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) { border-radius: var(--cg-border-radius-full); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Array }) flags: FeatureFlag[] = [];\n  @property({ type: String }) environment = 'production';\n\n  @state() private _search = '';\n\n  // ─── Derivations ────────────────────────────────────────────────────────\n\n  private get _filtered(): FeatureFlag[] {\n    const q = this._search.toLowerCase().trim();\n    if (!q) return this.flags;\n    return this.flags.filter(f =>\n      f.name.toLowerCase().includes(q) ||\n      (f.description || '').toLowerCase().includes(q) ||\n      (f.id || '').toLowerCase().includes(q),\n    );\n  }\n\n  private get _enabled() { return this._filtered.filter(f => f.enabled); }\n  private get _disabled() { return this._filtered.filter(f => !f.enabled); }\n\n  private _rolloutClass(pct: number | undefined): string {\n    if (pct == null) return '';\n    if (pct === 0) return 'zero';\n    if (pct < 100) return 'partial';\n    return '';\n  }\n\n  private _relativeTime(input: string | number | undefined): string {\n    if (!input) return '';\n    const date = new Date(input);\n    if (isNaN(date.getTime())) return '';\n    const diffMs = date.getTime() - Date.now();\n    const abs = Math.abs(diffMs);\n    const min = 60_000, hr = 60 * min, day = 24 * hr, week = 7 * day, month = 30 * day, year = 365 * day;\n    let value: number, unit: Intl.RelativeTimeFormatUnit;\n    if (abs < hr) { value = Math.round(diffMs / min); unit = 'minute'; }\n    else if (abs < day) { value = Math.round(diffMs / hr); unit = 'hour'; }\n    else if (abs < week) { value = Math.round(diffMs / day); unit = 'day'; }\n    else if (abs < month) { value = Math.round(diffMs / week); unit = 'week'; }\n    else if (abs < year) { value = Math.round(diffMs / month); unit = 'month'; }\n    else { value = Math.round(diffMs / year); unit = 'year'; }\n    try { return new Intl.RelativeTimeFormat('en', { numeric: 'auto' }).format(value, unit); }\n    catch { return ''; }\n  }\n\n  // ─── Handlers ───────────────────────────────────────────────────────────\n\n  private _onSearch(e: Event): void {\n    // ai-search fires CustomEvent<{query: string, filters: string[]}>.\n    const detail = (e as CustomEvent<{ query: string }>).detail;\n    this._search = detail?.query ?? '';\n  }\n\n  private _onToggle(flag: FeatureFlag, e: Event): void {\n    e.stopPropagation();\n    const detail = (e as CustomEvent<{ checked: boolean }>).detail;\n    this.dispatchEvent(new CustomEvent('ai-flag-toggle', {\n      bubbles: true, composed: true,\n      detail: { id: flag.id, name: flag.name, enabled: detail?.checked ?? !flag.enabled },\n    }));\n  }\n\n  private _onClick(flag: FeatureFlag): void {\n    if (flag.disabled) return;\n    this.dispatchEvent(new CustomEvent('ai-flag-click', {\n      bubbles: true, composed: true,\n      detail: { id: flag.id, name: flag.name },\n    }));\n  }\n\n  // ─── Renderers ──────────────────────────────────────────────────────────\n\n  private _renderFlag(flag: FeatureFlag) {\n    const rolloutClass = this._rolloutClass(flag.rollout);\n    const lastMod = this._relativeTime(flag.lastModified);\n\n    const clamped = flag.rollout != null\n      ? Math.min(100, Math.max(0, flag.rollout))\n      : null;\n\n    return html`\n      <button\n        class=\"flag-item ${flag.disabled ? 'disabled' : ''}\"\n        type=\"button\"\n        ?disabled=${flag.disabled}\n        @click=${() => this._onClick(flag)}\n      >\n        <!-- Row 1: name + type badge (left) | quiet meta (right) -->\n        <div class=\"flag-title-row\">\n          <div class=\"flag-title-left\">\n            <span class=\"flag-name\">${flag.name}</span>\n            ${flag.type ? html`\n              <span class=\"type-badge type-${flag.type}\">${TYPE_LABELS[flag.type]}</span>\n            ` : nothing}\n          </div>\n          <div class=\"flag-title-right\">\n            ${lastMod ? html`<span class=\"flag-updated\">${lastMod}</span>` : nothing}\n            ${flag.environment ? html`<span class=\"flag-env\">${flag.environment}</span>` : nothing}\n          </div>\n        </div>\n\n        <!-- Row 2: description -->\n        ${flag.description ? html`\n          <div class=\"flag-desc\">${flag.description}</div>\n        ` : nothing}\n\n        <!-- Row 3: full-width rollout bar with label above -->\n        ${clamped != null ? html`\n          <div class=\"flag-bar-row\">\n            <div class=\"flag-bar-label\">\n              <span>Rollout</span>\n              <span>${clamped}%</span>\n            </div>\n            <span class=\"rollout-track\" role=\"progressbar\" aria-valuenow=${clamped} aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Rollout for ${flag.name}\">\n              <span class=\"rollout-fill ${rolloutClass}\" style=\"width: ${clamped}%\"></span>\n            </span>\n          </div>\n        ` : nothing}\n\n        <!-- Toggle: pinned right, vertically centered across rows 1+2 -->\n        <span class=\"flag-toggle-slot\">\n          <cg-switch\n            .checked=${flag.enabled}\n            ?disabled=${flag.disabled}\n            ?loading=${flag.loading ?? false}\n            aria-label=\"Toggle ${flag.name}\"\n            @click=${(e: Event) => e.stopPropagation()}\n            @cg-change=${(e: Event) => this._onToggle(flag, e)}\n          ></cg-switch>\n        </span>\n      </button>\n    `;\n  }\n\n  override render() {\n    const filtered = this._filtered;\n    const enabled = this._enabled;\n    const disabled = this._disabled;\n\n    return html`\n      <div class=\"header\">\n        <h3>Feature Flags</h3>\n        <span class=\"env-badge\">${this.environment}</span>\n      </div>\n\n      <div class=\"search-bar\">\n        <ai-search\n          placeholder=\"Search flags by name, ID, or description…\"\n          .value=${this._search}\n          @ai-search-query=${this._onSearch}\n        ></ai-search>\n      </div>\n\n      ${filtered.length === 0 ? html`\n        <div class=\"empty\" role=\"status\">\n          ${this._search ? `No flags match \"${this._search}\"` : 'No feature flags configured.'}\n        </div>\n      ` : html`\n        ${enabled.length ? html`\n          <div class=\"group-label\">Enabled · ${enabled.length}</div>\n          <div class=\"flag-list\" role=\"list\" aria-label=\"Enabled flags\">\n            ${enabled.map(f => this._renderFlag(f))}\n          </div>\n        ` : nothing}\n\n        ${disabled.length ? html`\n          <div class=\"group-label\">Disabled · ${disabled.length}</div>\n          <div class=\"flag-list\" role=\"list\" aria-label=\"Disabled flags\">\n            ${disabled.map(f => this._renderFlag(f))}\n          </div>\n        ` : nothing}\n\n        <div class=\"count\">${filtered.length} of ${this.flags.length} flag${this.flags.length === 1 ? '' : 's'}</div>\n      `}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-feature-flag': AiFeatureFlag;\n  }\n}\n"],"names":["TYPE_LABELS","AiFeatureFlag","LitElement","q","f","pct","input","date","diffMs","abs","min","hr","day","week","month","year","value","unit","detail","flag","e","rolloutClass","lastMod","clamped","html","nothing","filtered","enabled","disabled","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-feature-flag.js","sources":["../../../src/components/ai-feature-flag/ai-feature-flag.ts"],"sourcesContent":["/**\n * @element ai-feature-flag\n * Feature flag management panel with toggle switches, environment badges, search, and enable/disable grouping.\n *\n * @example\n * ```html\n * <ai-feature-flag\n *   environment=\"staging\"\n *   .flags=${[\n *     {id:'rag', name:'RAG Pipeline', enabled:true, description:'Vector search retrieval'},\n *     {id:'streaming', name:'Streaming', enabled:false}\n *   ]}\n * ></ai-feature-flag>\n * ```\n *\n * @fires {CustomEvent<{id: string, enabled: boolean}>} ai-flag-toggle - Flag toggled on/off\n * @fires {CustomEvent<{id: string}>} ai-flag-click - Flag row clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\nexport interface FeatureFlag {\n  id: string;\n  name: string;\n  description: string;\n  enabled: boolean;\n  environment?: string;\n}\n\n@customElement('ai-feature-flag')\nexport class AiFeatureFlag extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      background: var(--cg-color-surface-base-background);\n      color: var(--cg-color-surface-base-text);\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      animation: fadeSlideIn 200ms var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding-bottom: var(--cg-spacing-12);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    h3 {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      margin: 0;\n    }\n\n    .env-badge {\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      background: var(--cg-overlay-accent-subtle);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .search-bar {\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .search-input {\n      width: 100%;\n      background: var(--cg-color-input-background-default);\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-8) var(--cg-spacing-12);\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-sm);\n      font-family: inherit;\n      box-sizing: border-box;\n    }\n\n    .search-input::placeholder {\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    .search-input:focus-visible {\n      outline: 2px solid var(--cg-color-focus-ring);\n      outline-offset: -2px;\n    }\n\n    .group-label {\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      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      margin: var(--cg-spacing-12) 0 var(--cg-spacing-6) 0;\n    }\n\n    .flag-list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-4);\n    }\n\n    .flag-item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      background: var(--cg-color-surface-inset-background);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      cursor: pointer;\n    }\n\n    .flag-item:hover {\n      border-color: var(--cg-color-surface-cards-hover-border);\n    }\n    .flag-item:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n\n    .flag-item:focus-visible {\n      outline: 2px solid var(--cg-color-focus-ring);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .flag-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .flag-name {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      margin-bottom: var(--cg-spacing-2);\n    }\n\n    .flag-desc {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .flag-env {\n      padding: var(--cg-spacing-2) var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-50);\n      font-size: var(--cg-font-size-xs);\n      background: var(--cg-overlay-dark-subtle);\n      color: var(--cg-color-input-text-placeholder);\n      flex-shrink: 0;\n    }\n\n    .toggle-switch {\n      position: relative;\n      display: inline-block;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-20);\n      flex-shrink: 0;\n    }\n\n    .toggle-switch input {\n      opacity: 0;\n      width: 0;\n      height: 0;\n      position: absolute;\n    }\n\n    .toggle-track {\n      position: absolute;\n      inset: 0;\n      background: var(--cg-color-toggle-background-off);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      cursor: pointer;\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .toggle-track::after {\n      content: '';\n      position: absolute;\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      border-radius: 50%;\n      background: var(--cg-color-toggle-thumb-off);\n      top: var(--cg-spacing-2);\n      left: var(--cg-spacing-2);\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .toggle-switch input:checked + .toggle-track {\n      background: var(--cg-color-toggle-background-on);\n      border-color: var(--cg-color-surface-base-text);\n    }\n\n    .toggle-switch input:checked + .toggle-track::after {\n      transform: translateX(var(--cg-spacing-16));\n      background: var(--cg-color-toggle-thumb-on);\n    }\n\n    .toggle-switch input:focus-visible + .toggle-track {\n      outline: 2px solid var(--cg-color-focus-ring);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .count {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-12);\n      text-align: center;\n    }\n\n    .empty {\n      text-align: center;\n      padding: var(--cg-spacing-24);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) { border-radius: 0; }\n    :host([rounded=\"sm\"]) { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) { border-radius: var(--cg-border-radius-full); }\n  `];\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ type: Array }) flags: FeatureFlag[] = [];\n  @property({ type: String }) environment = 'production';\n\n  @state() private _search = '';\n\n  private get _filtered(): FeatureFlag[] {\n    const q = this._search.toLowerCase();\n    return this.flags.filter(f =>\n      f.name.toLowerCase().includes(q) || f.description.toLowerCase().includes(q)\n    );\n  }\n\n  private get _enabled(): FeatureFlag[] {\n    return this._filtered.filter(f => f.enabled);\n  }\n\n  private get _disabled(): FeatureFlag[] {\n    return this._filtered.filter(f => !f.enabled);\n  }\n\n  private _onSearch(e: Event): void {\n    this._search = (e.target as HTMLInputElement).value;\n  }\n\n  private _onToggle(flag: FeatureFlag, e: Event): void {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-flag-toggle', {\n      bubbles: true, composed: true,\n      detail: { id: flag.id, name: flag.name, enabled: !flag.enabled },\n    }));\n  }\n\n  private _onClick(flag: FeatureFlag): void {\n    this.dispatchEvent(new CustomEvent('ai-flag-click', {\n      bubbles: true, composed: true,\n      detail: { id: flag.id, name: flag.name },\n    }));\n  }\n\n  private _renderFlag(flag: FeatureFlag) {\n    return html`\n      <div class=\"flag-item\" role=\"listitem\" tabindex=\"0\"\n           @click=${() => this._onClick(flag)}\n           @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter') this._onClick(flag); }}>\n        <div class=\"flag-info\">\n          <div class=\"flag-name\">${flag.name}</div>\n          <div class=\"flag-desc\">${flag.description}</div>\n        </div>\n        ${flag.environment ? html`<span class=\"flag-env\">${flag.environment}</span>` : nothing}\n        <label class=\"toggle-switch\" @click=${(e: Event) => e.stopPropagation()}>\n          <input type=\"checkbox\" .checked=${flag.enabled}\n                 @change=${(e: Event) => this._onToggle(flag, e)}\n                 aria-label=\"Toggle ${flag.name}\" />\n          <span class=\"toggle-track\"></span>\n        </label>\n      </div>\n    `;\n  }\n\n  override render() {\n    return html`\n      <div class=\"header\">\n        <h3>Feature Flags</h3>\n        <span class=\"env-badge\">${this.environment}</span>\n      </div>\n      <div class=\"search-bar\">\n        <input class=\"search-input\" type=\"text\"\n               placeholder=\"Search flags...\"\n               .value=${this._search}\n               @input=${this._onSearch}\n               aria-label=\"Search feature flags\"\n               tabindex=\"0\" />\n      </div>\n      ${this._filtered.length === 0 ? html`\n        <div class=\"empty\" role=\"status\">No flags found.</div>\n      ` : html`\n        ${this._enabled.length ? html`\n          <div class=\"group-label\">Enabled (${this._enabled.length})</div>\n          <div class=\"flag-list\" role=\"list\" aria-label=\"Enabled flags\">\n            ${this._enabled.map(f => this._renderFlag(f))}\n          </div>\n        ` : nothing}\n        ${this._disabled.length ? html`\n          <div class=\"group-label\">Disabled (${this._disabled.length})</div>\n          <div class=\"flag-list\" role=\"list\" aria-label=\"Disabled flags\">\n            ${this._disabled.map(f => this._renderFlag(f))}\n          </div>\n        ` : nothing}\n        <div class=\"count\">${this._filtered.length} of ${this.flags.length} flags</div>\n      `}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-feature-flag': AiFeatureFlag;\n  }\n}\n"],"names":["AiFeatureFlag","LitElement","q","f","flag","e","html","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"ai-feedback.d.ts","sourceRoot":"","sources":["../../../src/components/ai-feedback/ai-feedback.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAqUnB;IAC0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IAClF,oBAAoB;IACQ,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAE1E,uCAAuC;IACZ,IAAI,EAAE,MAAM,EAAE,CAAyD;IAElG,4BAA4B;IACA,SAAS,EAAE,MAAM,CAAM;IAEnD,4BAA4B;IACC,WAAW,EAAE,OAAO,CAAS;IAEjD,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,aAAa,CAA0B;IAC/C,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,UAAU,CAAa;IAExC,OAAO,CAAC,YAAY,CAA2D;IAC/E,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IAOV,MAAM;CAoEhB"}
+{"version":3,"file":"ai-feedback.d.ts","sourceRoot":"","sources":["../../../src/components/ai-feedback/ai-feedback.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,qBACa,UAAW,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BA0UnB;IAC0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IAClF,oBAAoB;IACQ,IAAI,EAAE,QAAQ,GAAG,OAAO,GAAG,OAAO,CAAY;IAE1E,uCAAuC;IACZ,IAAI,EAAE,MAAM,EAAE,CAAyD;IAElG,4BAA4B;IACA,SAAS,EAAE,MAAM,CAAM;IAEnD,4BAA4B;IACC,WAAW,EAAE,OAAO,CAAS;IAEjD,OAAO,CAAC,OAAO,CAAuB;IACtC,OAAO,CAAC,aAAa,CAA0B;IAC/C,OAAO,CAAC,QAAQ,CAAc;IAC9B,OAAO,CAAC,UAAU,CAAkB;IACpC,OAAO,CAAC,UAAU,CAAa;IAExC,OAAO,CAAC,YAAY,CAA2D;IAC/E,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,WAAW;IAOV,MAAM;CAoEhB"}

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

@@ -1,6 +1,6 @@
 import { css as v, LitElement as f, html as r, nothing as n } from "lit";
 import { property as c, state as l, customElement as h } from "lit/decorators.js";
-import { h as m, r as b, f as p } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as m, r as b, f as p } from "../../chunks/premium.css-DHekUEUt.js";
 var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (t, a, o, d) => {
   for (var i = d > 1 ? void 0 : d ? x(a, o) : a, g = t.length - 1, u; g >= 0; g--)
     (u = t[g]) && (i = (d ? u(a, o, i) : u(i)) || i);
@@ -300,6 +300,7 @@ e.styles = [m, b, p, v`
       background: none;
       color: var(--cg-color-input-text-placeholder);
       font-size: var(--cg-font-size-xs);
+      font-size: var(--cg-font-size-sm);
       font-weight: var(--cg-font-weight-semibold);
       cursor: pointer;
       transition:
@@ -341,7 +342,7 @@ e.styles = [m, b, p, v`
       background: var(--cg-color-input-background-default);
       color: var(--cg-color-surface-base-text);
       font: inherit;
-      font-size: var(--cg-font-size-xs);
+      font-size: var(--cg-font-size-sm);
       resize: vertical;
       outline: none;
       transition: border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);
@@ -366,7 +367,7 @@ e.styles = [m, b, p, v`
       background: var(--cg-color-action-primary-background-default);
       color: var(--cg-color-action-primary-text-default);
       font: inherit;
-      font-size: var(--cg-font-size-xs);
+      font-size: var(--cg-font-size-sm);
       font-weight: var(--cg-font-weight-bold);
       cursor: pointer;
       transition:
@@ -374,9 +375,13 @@ e.styles = [m, b, p, v`
         opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default),
         transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
-    .submit-btn:hover { background: var(--cg-color-action-primary-background-hover); }
+    .submit-btn:hover:not(:disabled) { background: var(--cg-color-action-primary-background-hover); }
     .submit-btn:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }
-    .submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    .submit-btn:disabled {
+      background: var(--cg-color-action-primary-background-disable);
+      color: var(--cg-color-action-primary-text-disable);
+      cursor: not-allowed;
+    }
     .submit-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }
 
     /* Ripple pseudo-element */

package/dist/components/ai-feedback/ai-feedback.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-feedback.js","sources":["../../../src/components/ai-feedback/ai-feedback.ts"],"sourcesContent":["/**\n * @element ai-feedback\n * User feedback widget with thumbs/stars/emoji modes, selectable issue tags, and optional comment field.\n *\n * @example\n * ```html\n * <ai-feedback\n *   mode=\"thumbs\"\n *   messageId=\"msg-42\"\n *   .tags=${['Inaccurate','Too long','Offensive']}\n *   showComment\n * ></ai-feedback>\n * ```\n *\n * @fires {CustomEvent<{rating, tags, comment, messageId}>} ai-feedback-submit - Feedback submitted\n *\n * @cssprop --cg-color-action-primary-background-default - Selected rating and submit button accent\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-feedback')\nexport class AiFeedback 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      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    /* ── Keyframes ── */\n\n    @keyframes pop {\n      0% { transform: scale(1); }\n      40% { transform: scale(1.28); }\n      70% { transform: scale(0.92); }\n      100% { transform: scale(1); }\n    }\n\n    @keyframes jelly {\n      0% { transform: scale(1, 1); }\n      25% { transform: scale(0.9, 1.1); }\n      50% { transform: scale(1.1, 0.9); }\n      75% { transform: scale(0.95, 1.05); }\n      100% { transform: scale(1, 1); }\n    }\n\n    @keyframes starCascade {\n      0% { transform: scale(0.5) rotate(-15deg); opacity: 0; }\n      60% { transform: scale(1.2) rotate(5deg); opacity: 1; }\n      100% { transform: scale(1) rotate(0); opacity: 1; }\n    }\n\n    @keyframes chipIn {\n      0% { transform: scale(0.8) translateY(4px); opacity: 0; }\n      60% { transform: scale(1.04) translateY(-1px); }\n      100% { transform: scale(1) translateY(0); opacity: 1; }\n    }\n\n    @keyframes checkDraw {\n      from { stroke-dashoffset: 24; }\n      to { stroke-dashoffset: 0; }\n    }\n\n    @keyframes successReveal {\n      from { opacity: 0; transform: translateX(-8px); }\n      to { opacity: 1; transform: translateX(0); }\n    }\n\n    @keyframes sectionReveal {\n      from { opacity: 0; transform: translateY(6px); max-height: 0; }\n      to { opacity: 1; transform: translateY(0); max-height: 200px; }\n    }\n\n    @keyframes rippleOut {\n      from { transform: scale(0); opacity: 0.4; }\n      to { transform: scale(2.5); opacity: 0; }\n    }\n\n    /* Rating row */\n    .rating-row {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      padding-bottom: var(--cg-spacing-8);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .rating-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-right: var(--cg-spacing-4);\n    }\n\n    /* ── Thumbs ── */\n    .thumb-btn {\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: none;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-base);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .thumb-btn:hover {\n      border-color: var(--cg-color-input-border-hover);\n      background: var(--cg-overlay-dark-subtle);\n      transform: translateY(-1px);\n    }\n    .thumb-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .thumb-btn.selected-up {\n      border-color: var(--cg-color-status-success-text-default);\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n      animation: pop 400ms var(--cg-transition-easing-spring);\n      box-shadow: 0 0 12px var(--cg-color-status-success-background-default);\n    }\n    .thumb-btn.selected-down {\n      border-color: var(--cg-color-status-error-text-default);\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n      animation: pop 400ms var(--cg-transition-easing-spring);\n      box-shadow: 0 0 12px var(--cg-color-status-error-background-default);\n    }\n    .thumb-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }\n\n    /* ── Stars ── */\n    .star-btn {\n      background: none;\n      border: none;\n      color: var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xl);\n      cursor: pointer;\n      padding: var(--cg-spacing-2);\n      transition:\n        color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .star-btn:hover { transform: scale(1.15); }\n    .star-btn.active {\n      color: var(--cg-color-status-warning-text-default);\n      animation: starCascade 350ms var(--cg-transition-easing-spring) both;\n      animation-delay: calc(var(--star-index, 0) * 50ms);\n    }\n    .star-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .star-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }\n\n    /* Star SVG fill transition */\n    .star-btn svg { transition: fill var(--cg-transition-duration-fast) var(--cg-transition-easing-default); }\n    .star-btn.active svg { fill: var(--cg-color-status-warning-text-default); }\n\n    /* ── Emoji ── */\n    .emoji-btn {\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid transparent;\n      background: none;\n      font-size: var(--cg-font-size-xl);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      opacity: 0.5;\n    }\n    .emoji-btn:hover { opacity: 0.85; background: var(--cg-overlay-dark-subtle); transform: scale(1.1); }\n    .emoji-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .emoji-btn.selected {\n      opacity: 1;\n      border-color: var(--cg-color-surface-base-text);\n      background: var(--cg-overlay-accent-subtle);\n      animation: jelly 450ms var(--cg-transition-easing-spring);\n    }\n    .emoji-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }\n\n    /* Dim unselected when one is chosen */\n    .emoji-btn.dimmed { opacity: 0.3; }\n    .emoji-btn.dimmed:hover { opacity: 0.6; }\n\n    /* ── Tags ── */\n    .tags {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-6);\n      animation: sectionReveal var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    .tag {\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: none;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer;\n      transition:\n        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      font-family: inherit;\n      animation: chipIn 350ms var(--cg-transition-easing-ease-out) both;\n      animation-delay: calc(var(--chip-index, 0) * 60ms);\n    }\n    .tag:hover {\n      border-color: var(--cg-color-input-border-hover);\n      color: var(--cg-color-surface-base-text);\n      transform: translateY(-1px);\n    }\n    .tag:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .tag.selected {\n      border-color: var(--cg-color-surface-base-text);\n      color: var(--cg-color-surface-base-text);\n      background: var(--cg-overlay-accent-subtle);\n      box-shadow: 0 0 8px var(--cg-overlay-accent-medium);\n      animation: pop 300ms var(--cg-transition-easing-spring);\n    }\n    .tag:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }\n\n    /* ── Comment ── */\n    .comment-area {\n      animation: sectionReveal var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n      overflow: hidden;\n    }\n    textarea {\n      width: 100%;\n      min-height: var(--cg-spacing-64);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-input-background-default);\n      color: var(--cg-color-surface-base-text);\n      font: inherit;\n      font-size: var(--cg-font-size-xs);\n      resize: vertical;\n      outline: none;\n      transition: border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    textarea:focus {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    textarea::placeholder { color: var(--cg-color-input-text-placeholder); }\n\n    /* ── Submit ── */\n    .submit-wrap {\n      align-self: flex-start;\n      animation: chipIn 300ms var(--cg-transition-easing-ease-out) both;\n    }\n    .submit-btn {\n      position: relative;\n      overflow: hidden;\n      padding: var(--cg-spacing-6) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      border: none;\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      font: inherit;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      cursor: pointer;\n      transition:\n        background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .submit-btn:hover { background: var(--cg-color-action-primary-background-hover); }\n    .submit-btn:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }\n    .submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n    .submit-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }\n\n    /* Ripple pseudo-element */\n    .submit-btn::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      background: radial-gradient(circle at 50% 50%, var(--cg-overlay-white-strong) 0%, transparent 70%);\n      opacity: 0;\n      transform: scale(0);\n      pointer-events: none;\n    }\n    .submit-btn:active:not(:disabled)::after {\n      animation: rippleOut 500ms ease-out;\n    }\n\n    /* ── Submitted state ── */\n    .submitted {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-status-success-text-default);\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .submitted-icon {\n      font-size: var(--cg-font-size-base);\n      animation: pop 500ms var(--cg-transition-easing-spring) both;\n    }\n    .submitted-icon svg {\n      stroke-dasharray: 24;\n      stroke-dashoffset: 24;\n      animation: checkDraw 400ms ease-out 200ms forwards;\n    }\n    .submitted-text {\n      animation: successReveal 400ms var(--cg-transition-easing-ease-out) 350ms both;\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    /* ── Reduced motion ── */\n    @media (prefers-reduced-motion: reduce) {\n      .thumb-btn.selected-up,\n      .thumb-btn.selected-down,\n      .star-btn.active,\n      .emoji-btn.selected,\n      .tag.selected,\n      .tag,\n      .submitted-icon,\n      .submitted-text,\n      .tags,\n      .comment-area,\n      .submit-wrap { animation: none; }\n      .submitted-icon svg { stroke-dashoffset: 0; animation: none; }\n    }\n  `];\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  /** Feedback mode */\n  @property({ type: String }) mode: 'thumbs' | 'stars' | 'emoji' = 'thumbs';\n\n  /** Issue tags for negative feedback */\n  @property({ type: Array }) tags: string[] = ['Inaccurate', 'Irrelevant', 'Too long', 'Offensive'];\n\n  /** Associated message ID */\n  @property({ type: String }) messageId: string = '';\n\n  /** Show comment textarea */\n  @property({ type: Boolean }) showComment: boolean = false;\n\n  @state() private _rating: number | null = null;\n  @state() private _selectedTags: Set<string> = new Set();\n  @state() private _comment: string = '';\n  @state() private _submitted: boolean = false;\n  @state() private _hoverStar: number = 0;\n\n  private _emojiLabels = ['Angry', 'Confused', 'Neutral', 'Happy', 'Very Happy'];\n  private _renderEmoji(index: number): unknown {\n    if (index === 0) return html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M16 16s-1.5-2-4-2-4 2-4 2\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/></svg>`;\n    if (index === 1) return html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M16 16s-1.5-1-4-1-4 1-4 1\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/></svg>`;\n    if (index === 2) return html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"8\" y1=\"15\" x2=\"16\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/></svg>`;\n    if (index === 3) return html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/></svg>`;\n    return html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M8 13s1.5 3 4 3 4-3 4-3\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/></svg>`;\n  }\n\n  private _handleThumb(value: number) {\n    this._rating = this._rating === value ? null : value;\n    if (value === 0) this.showComment = true;\n  }\n\n  private _handleStar(value: number) {\n    this._rating = value;\n    if (value <= 2) this.showComment = true;\n  }\n\n  private _handleEmoji(index: number) {\n    this._rating = index;\n    if (index <= 1) this.showComment = true;\n  }\n\n  private _toggleTag(tag: string) {\n    if (this._selectedTags.has(tag)) this._selectedTags.delete(tag);\n    else this._selectedTags.add(tag);\n    this._selectedTags = new Set(this._selectedTags);\n  }\n\n  private _handleSubmit() {\n    if (this._rating === null) return;\n    this._submitted = true;\n    this.dispatchEvent(new CustomEvent('ai-feedback-submit', {\n      bubbles: true, composed: true,\n      detail: {\n        rating: this._rating,\n        mode: this.mode,\n        tags: [...this._selectedTags],\n        comment: this._comment || undefined,\n        messageId: this.messageId || undefined,\n      },\n    }));\n  }\n\n  private _isNegative(): boolean {\n    if (this._rating === null) return false;\n    if (this.mode === 'thumbs') return this._rating === 0;\n    if (this.mode === 'stars') return this._rating <= 2;\n    return this._rating <= 1;\n  }\n\n  override render() {\n    if (this._submitted) {\n      return html`\n        <div class=\"submitted\" aria-live=\"polite\" role=\"status\">\n          <span class=\"submitted-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg></span>\n          <span class=\"submitted-text\">Thank you for your feedback!</span>\n        </div>\n      `;\n    }\n\n    const hasRating = this._rating !== null;\n\n    return html`\n      <div class=\"container\" role=\"group\" aria-label=\"Rate this response\">\n        <div class=\"rating-row\">\n          <span class=\"rating-label\">Rate:</span>\n          ${this.mode === 'thumbs' ? html`\n            <button class=\"thumb-btn ${this._rating === 1 ? 'selected-up' : ''}\" @click=${() => this._handleThumb(1)} aria-label=\"Good\" aria-pressed=${this._rating === 1 ? 'true' : 'false'} title=\"Good\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14z\"/><path d=\"M7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3\"/></svg></button>\n            <button class=\"thumb-btn ${this._rating === 0 ? 'selected-down' : ''}\" @click=${() => this._handleThumb(0)} aria-label=\"Bad\" aria-pressed=${this._rating === 0 ? 'true' : 'false'} title=\"Bad\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M10 15V19a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10z\"/><path d=\"M17 2h2.67A2.31 2.31 0 0122 4v7a2.31 2.31 0 01-2.33 2H17\"/></svg></button>\n          ` : nothing}\n\n          ${this.mode === 'stars' ? html`\n            ${[1, 2, 3, 4, 5].map(n => html`\n              <button class=\"star-btn ${(this._rating ?? 0) >= n || this._hoverStar >= n ? 'active' : ''}\"\n                style=\"--star-index: ${n - 1}\"\n                @click=${() => this._handleStar(n)}\n                @mouseenter=${() => { this._hoverStar = n; }}\n                @mouseleave=${() => { this._hoverStar = 0; }}\n                aria-label=\"${n} star${n > 1 ? 's' : ''}\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/></svg></button>\n            `)}\n          ` : nothing}\n\n          ${this.mode === 'emoji' ? html`\n            ${this._emojiLabels.map((label, i) => html`\n              <button class=\"emoji-btn ${this._rating === i ? 'selected' : ''} ${hasRating && this._rating !== i ? 'dimmed' : ''}\"\n                @click=${() => this._handleEmoji(i)}\n                aria-label=\"Rating ${i + 1} of 5: ${label}\" aria-pressed=${this._rating === i ? 'true' : 'false'}>${this._renderEmoji(i)}</button>\n            `)}\n          ` : nothing}\n        </div>\n\n        ${this._isNegative() && this.tags.length > 0 ? html`\n          <div class=\"tags\" role=\"group\" aria-label=\"Select issues\">\n            ${this.tags.map((tag, i) => html`\n              <button class=\"tag ${this._selectedTags.has(tag) ? 'selected' : ''}\"\n                style=\"--chip-index: ${i}\"\n                @click=${() => this._toggleTag(tag)}\n                aria-pressed=${this._selectedTags.has(tag) ? 'true' : 'false'}>${tag}</button>\n            `)}\n          </div>\n        ` : nothing}\n\n        ${(this.showComment || this._isNegative()) ? html`\n          <div class=\"comment-area\">\n            <textarea placeholder=\"What could be improved?\" aria-label=\"Additional feedback\"\n              .value=${this._comment}\n              @input=${(e: Event) => { this._comment = (e.target as HTMLTextAreaElement).value; }}></textarea>\n          </div>\n        ` : nothing}\n\n        ${this._rating !== null ? html`\n          <div class=\"submit-wrap\">\n            <button class=\"submit-btn\" @click=${this._handleSubmit}>Submit feedback</button>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiFeedback","LitElement","index","html","value","tag","hasRating","nothing","n","label","i","e","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-feedback.js","sources":["../../../src/components/ai-feedback/ai-feedback.ts"],"sourcesContent":["/**\n * @element ai-feedback\n * User feedback widget with thumbs/stars/emoji modes, selectable issue tags, and optional comment field.\n *\n * @example\n * ```html\n * <ai-feedback\n *   mode=\"thumbs\"\n *   messageId=\"msg-42\"\n *   .tags=${['Inaccurate','Too long','Offensive']}\n *   showComment\n * ></ai-feedback>\n * ```\n *\n * @fires {CustomEvent<{rating, tags, comment, messageId}>} ai-feedback-submit - Feedback submitted\n *\n * @cssprop --cg-color-action-primary-background-default - Selected rating and submit button accent\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-feedback')\nexport class AiFeedback 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      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    /* ── Keyframes ── */\n\n    @keyframes pop {\n      0% { transform: scale(1); }\n      40% { transform: scale(1.28); }\n      70% { transform: scale(0.92); }\n      100% { transform: scale(1); }\n    }\n\n    @keyframes jelly {\n      0% { transform: scale(1, 1); }\n      25% { transform: scale(0.9, 1.1); }\n      50% { transform: scale(1.1, 0.9); }\n      75% { transform: scale(0.95, 1.05); }\n      100% { transform: scale(1, 1); }\n    }\n\n    @keyframes starCascade {\n      0% { transform: scale(0.5) rotate(-15deg); opacity: 0; }\n      60% { transform: scale(1.2) rotate(5deg); opacity: 1; }\n      100% { transform: scale(1) rotate(0); opacity: 1; }\n    }\n\n    @keyframes chipIn {\n      0% { transform: scale(0.8) translateY(4px); opacity: 0; }\n      60% { transform: scale(1.04) translateY(-1px); }\n      100% { transform: scale(1) translateY(0); opacity: 1; }\n    }\n\n    @keyframes checkDraw {\n      from { stroke-dashoffset: 24; }\n      to { stroke-dashoffset: 0; }\n    }\n\n    @keyframes successReveal {\n      from { opacity: 0; transform: translateX(-8px); }\n      to { opacity: 1; transform: translateX(0); }\n    }\n\n    @keyframes sectionReveal {\n      from { opacity: 0; transform: translateY(6px); max-height: 0; }\n      to { opacity: 1; transform: translateY(0); max-height: 200px; }\n    }\n\n    @keyframes rippleOut {\n      from { transform: scale(0); opacity: 0.4; }\n      to { transform: scale(2.5); opacity: 0; }\n    }\n\n    /* Rating row */\n    .rating-row {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      padding-bottom: var(--cg-spacing-8);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .rating-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-right: var(--cg-spacing-4);\n    }\n\n    /* ── Thumbs ── */\n    .thumb-btn {\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: none;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-base);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .thumb-btn:hover {\n      border-color: var(--cg-color-input-border-hover);\n      background: var(--cg-overlay-dark-subtle);\n      transform: translateY(-1px);\n    }\n    .thumb-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .thumb-btn.selected-up {\n      border-color: var(--cg-color-status-success-text-default);\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n      animation: pop 400ms var(--cg-transition-easing-spring);\n      box-shadow: 0 0 12px var(--cg-color-status-success-background-default);\n    }\n    .thumb-btn.selected-down {\n      border-color: var(--cg-color-status-error-text-default);\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n      animation: pop 400ms var(--cg-transition-easing-spring);\n      box-shadow: 0 0 12px var(--cg-color-status-error-background-default);\n    }\n    .thumb-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }\n\n    /* ── Stars ── */\n    .star-btn {\n      background: none;\n      border: none;\n      color: var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xl);\n      cursor: pointer;\n      padding: var(--cg-spacing-2);\n      transition:\n        color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .star-btn:hover { transform: scale(1.15); }\n    .star-btn.active {\n      color: var(--cg-color-status-warning-text-default);\n      animation: starCascade 350ms var(--cg-transition-easing-spring) both;\n      animation-delay: calc(var(--star-index, 0) * 50ms);\n    }\n    .star-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .star-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }\n\n    /* Star SVG fill transition */\n    .star-btn svg { transition: fill var(--cg-transition-duration-fast) var(--cg-transition-easing-default); }\n    .star-btn.active svg { fill: var(--cg-color-status-warning-text-default); }\n\n    /* ── Emoji ── */\n    .emoji-btn {\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid transparent;\n      background: none;\n      font-size: var(--cg-font-size-xl);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      opacity: 0.5;\n    }\n    .emoji-btn:hover { opacity: 0.85; background: var(--cg-overlay-dark-subtle); transform: scale(1.1); }\n    .emoji-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .emoji-btn.selected {\n      opacity: 1;\n      border-color: var(--cg-color-surface-base-text);\n      background: var(--cg-overlay-accent-subtle);\n      animation: jelly 450ms var(--cg-transition-easing-spring);\n    }\n    .emoji-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }\n\n    /* Dim unselected when one is chosen */\n    .emoji-btn.dimmed { opacity: 0.3; }\n    .emoji-btn.dimmed:hover { opacity: 0.6; }\n\n    /* ── Tags ── */\n    .tags {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-6);\n      animation: sectionReveal var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    .tag {\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: none;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer;\n      transition:\n        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      font-family: inherit;\n      animation: chipIn 350ms var(--cg-transition-easing-ease-out) both;\n      animation-delay: calc(var(--chip-index, 0) * 60ms);\n    }\n    .tag:hover {\n      border-color: var(--cg-color-input-border-hover);\n      color: var(--cg-color-surface-base-text);\n      transform: translateY(-1px);\n    }\n    .tag:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .tag.selected {\n      border-color: var(--cg-color-surface-base-text);\n      color: var(--cg-color-surface-base-text);\n      background: var(--cg-overlay-accent-subtle);\n      box-shadow: 0 0 8px var(--cg-overlay-accent-medium);\n      animation: pop 300ms var(--cg-transition-easing-spring);\n    }\n    .tag:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }\n\n    /* ── Comment ── */\n    .comment-area {\n      animation: sectionReveal var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n      overflow: hidden;\n    }\n    textarea {\n      width: 100%;\n      min-height: var(--cg-spacing-64);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-input-background-default);\n      color: var(--cg-color-surface-base-text);\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      resize: vertical;\n      outline: none;\n      transition: border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    textarea:focus {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    textarea::placeholder { color: var(--cg-color-input-text-placeholder); }\n\n    /* ── Submit ── */\n    .submit-wrap {\n      align-self: flex-start;\n      animation: chipIn 300ms var(--cg-transition-easing-ease-out) both;\n    }\n    .submit-btn {\n      position: relative;\n      overflow: hidden;\n      padding: var(--cg-spacing-6) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      border: none;\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      font: inherit;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-bold);\n      cursor: pointer;\n      transition:\n        background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .submit-btn:hover:not(:disabled) { background: var(--cg-color-action-primary-background-hover); }\n    .submit-btn:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }\n    .submit-btn:disabled {\n      background: var(--cg-color-action-primary-background-disable);\n      color: var(--cg-color-action-primary-text-disable);\n      cursor: not-allowed;\n    }\n    .submit-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }\n\n    /* Ripple pseudo-element */\n    .submit-btn::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      background: radial-gradient(circle at 50% 50%, var(--cg-overlay-white-strong) 0%, transparent 70%);\n      opacity: 0;\n      transform: scale(0);\n      pointer-events: none;\n    }\n    .submit-btn:active:not(:disabled)::after {\n      animation: rippleOut 500ms ease-out;\n    }\n\n    /* ── Submitted state ── */\n    .submitted {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-status-success-text-default);\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .submitted-icon {\n      font-size: var(--cg-font-size-base);\n      animation: pop 500ms var(--cg-transition-easing-spring) both;\n    }\n    .submitted-icon svg {\n      stroke-dasharray: 24;\n      stroke-dashoffset: 24;\n      animation: checkDraw 400ms ease-out 200ms forwards;\n    }\n    .submitted-text {\n      animation: successReveal 400ms var(--cg-transition-easing-ease-out) 350ms both;\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    /* ── Reduced motion ── */\n    @media (prefers-reduced-motion: reduce) {\n      .thumb-btn.selected-up,\n      .thumb-btn.selected-down,\n      .star-btn.active,\n      .emoji-btn.selected,\n      .tag.selected,\n      .tag,\n      .submitted-icon,\n      .submitted-text,\n      .tags,\n      .comment-area,\n      .submit-wrap { animation: none; }\n      .submitted-icon svg { stroke-dashoffset: 0; animation: none; }\n    }\n  `];\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  /** Feedback mode */\n  @property({ type: String }) mode: 'thumbs' | 'stars' | 'emoji' = 'thumbs';\n\n  /** Issue tags for negative feedback */\n  @property({ type: Array }) tags: string[] = ['Inaccurate', 'Irrelevant', 'Too long', 'Offensive'];\n\n  /** Associated message ID */\n  @property({ type: String }) messageId: string = '';\n\n  /** Show comment textarea */\n  @property({ type: Boolean }) showComment: boolean = false;\n\n  @state() private _rating: number | null = null;\n  @state() private _selectedTags: Set<string> = new Set();\n  @state() private _comment: string = '';\n  @state() private _submitted: boolean = false;\n  @state() private _hoverStar: number = 0;\n\n  private _emojiLabels = ['Angry', 'Confused', 'Neutral', 'Happy', 'Very Happy'];\n  private _renderEmoji(index: number): unknown {\n    if (index === 0) return html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M16 16s-1.5-2-4-2-4 2-4 2\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/></svg>`;\n    if (index === 1) return html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M16 16s-1.5-1-4-1-4 1-4 1\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/></svg>`;\n    if (index === 2) return html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"8\" y1=\"15\" x2=\"16\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/></svg>`;\n    if (index === 3) return html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/></svg>`;\n    return html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M8 13s1.5 3 4 3 4-3 4-3\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/></svg>`;\n  }\n\n  private _handleThumb(value: number) {\n    this._rating = this._rating === value ? null : value;\n    if (value === 0) this.showComment = true;\n  }\n\n  private _handleStar(value: number) {\n    this._rating = value;\n    if (value <= 2) this.showComment = true;\n  }\n\n  private _handleEmoji(index: number) {\n    this._rating = index;\n    if (index <= 1) this.showComment = true;\n  }\n\n  private _toggleTag(tag: string) {\n    if (this._selectedTags.has(tag)) this._selectedTags.delete(tag);\n    else this._selectedTags.add(tag);\n    this._selectedTags = new Set(this._selectedTags);\n  }\n\n  private _handleSubmit() {\n    if (this._rating === null) return;\n    this._submitted = true;\n    this.dispatchEvent(new CustomEvent('ai-feedback-submit', {\n      bubbles: true, composed: true,\n      detail: {\n        rating: this._rating,\n        mode: this.mode,\n        tags: [...this._selectedTags],\n        comment: this._comment || undefined,\n        messageId: this.messageId || undefined,\n      },\n    }));\n  }\n\n  private _isNegative(): boolean {\n    if (this._rating === null) return false;\n    if (this.mode === 'thumbs') return this._rating === 0;\n    if (this.mode === 'stars') return this._rating <= 2;\n    return this._rating <= 1;\n  }\n\n  override render() {\n    if (this._submitted) {\n      return html`\n        <div class=\"submitted\" aria-live=\"polite\" role=\"status\">\n          <span class=\"submitted-icon\"><svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg></span>\n          <span class=\"submitted-text\">Thank you for your feedback!</span>\n        </div>\n      `;\n    }\n\n    const hasRating = this._rating !== null;\n\n    return html`\n      <div class=\"container\" role=\"group\" aria-label=\"Rate this response\">\n        <div class=\"rating-row\">\n          <span class=\"rating-label\">Rate:</span>\n          ${this.mode === 'thumbs' ? html`\n            <button class=\"thumb-btn ${this._rating === 1 ? 'selected-up' : ''}\" @click=${() => this._handleThumb(1)} aria-label=\"Good\" aria-pressed=${this._rating === 1 ? 'true' : 'false'} title=\"Good\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14z\"/><path d=\"M7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3\"/></svg></button>\n            <button class=\"thumb-btn ${this._rating === 0 ? 'selected-down' : ''}\" @click=${() => this._handleThumb(0)} aria-label=\"Bad\" aria-pressed=${this._rating === 0 ? 'true' : 'false'} title=\"Bad\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M10 15V19a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10z\"/><path d=\"M17 2h2.67A2.31 2.31 0 0122 4v7a2.31 2.31 0 01-2.33 2H17\"/></svg></button>\n          ` : nothing}\n\n          ${this.mode === 'stars' ? html`\n            ${[1, 2, 3, 4, 5].map(n => html`\n              <button class=\"star-btn ${(this._rating ?? 0) >= n || this._hoverStar >= n ? 'active' : ''}\"\n                style=\"--star-index: ${n - 1}\"\n                @click=${() => this._handleStar(n)}\n                @mouseenter=${() => { this._hoverStar = n; }}\n                @mouseleave=${() => { this._hoverStar = 0; }}\n                aria-label=\"${n} star${n > 1 ? 's' : ''}\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/></svg></button>\n            `)}\n          ` : nothing}\n\n          ${this.mode === 'emoji' ? html`\n            ${this._emojiLabels.map((label, i) => html`\n              <button class=\"emoji-btn ${this._rating === i ? 'selected' : ''} ${hasRating && this._rating !== i ? 'dimmed' : ''}\"\n                @click=${() => this._handleEmoji(i)}\n                aria-label=\"Rating ${i + 1} of 5: ${label}\" aria-pressed=${this._rating === i ? 'true' : 'false'}>${this._renderEmoji(i)}</button>\n            `)}\n          ` : nothing}\n        </div>\n\n        ${this._isNegative() && this.tags.length > 0 ? html`\n          <div class=\"tags\" role=\"group\" aria-label=\"Select issues\">\n            ${this.tags.map((tag, i) => html`\n              <button class=\"tag ${this._selectedTags.has(tag) ? 'selected' : ''}\"\n                style=\"--chip-index: ${i}\"\n                @click=${() => this._toggleTag(tag)}\n                aria-pressed=${this._selectedTags.has(tag) ? 'true' : 'false'}>${tag}</button>\n            `)}\n          </div>\n        ` : nothing}\n\n        ${(this.showComment || this._isNegative()) ? html`\n          <div class=\"comment-area\">\n            <textarea placeholder=\"What could be improved?\" aria-label=\"Additional feedback\"\n              .value=${this._comment}\n              @input=${(e: Event) => { this._comment = (e.target as HTMLTextAreaElement).value; }}></textarea>\n          </div>\n        ` : nothing}\n\n        ${this._rating !== null ? html`\n          <div class=\"submit-wrap\">\n            <button class=\"submit-btn\" @click=${this._handleSubmit}>Submit feedback</button>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiFeedback","LitElement","index","html","value","tag","hasRating","nothing","n","label","i","e","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-file-upload/ai-file-upload.js

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

package/dist/components/ai-form-generator/ai-form-generator.js

@@ -1,6 +1,6 @@
 import { css as p, LitElement as v, html as s, nothing as l } from "lit";
 import { property as h, state as m, customElement as u } from "lit/decorators.js";
-import { h as g, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as g, r as f } from "../../chunks/premium.css-DHekUEUt.js";
 import "../cg-input/cg-input.js";
 import "../cg-textarea/cg-textarea.js";
 import "../cg-select/cg-select.js";

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

@@ -1,6 +1,6 @@
 import { css as u, LitElement as v, html as r, nothing as s } from "lit";
 import { property as c, state as f, customElement as h } from "lit/decorators.js";
-import { h as p, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as p, r as b } from "../../chunks/premium.css-DHekUEUt.js";
 var k = Object.defineProperty, m = Object.getOwnPropertyDescriptor, a = (e, i, l, n) => {
   for (var o = n > 1 ? void 0 : n ? m(i, l) : i, d = e.length - 1, g; d >= 0; d--)
     (g = e[d]) && (o = (n ? g(i, l, o) : g(o)) || o);
@@ -184,7 +184,7 @@ t.styles = [p, b, u`
     }
     .btn:hover { border-color: var(--cg-color-surface-cards-hover-border); color: var(--cg-color-surface-base-text); }
     .btn:active { transform: scale(var(--cg-interaction-press-scale)); }
-    .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }
+    .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-color-focus-ring); }
 
     .btn.danger {
       border-color: var(--cg-color-status-error-border-default);

package/dist/components/ai-guardrail/ai-guardrail.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-guardrail.js","sources":["../../../src/components/ai-guardrail/ai-guardrail.ts"],"sourcesContent":["/**\n * @element ai-guardrail\n * Content safety filter display with policy checks, blocked content blur, and override controls.\n *\n * @fires {CustomEvent} ai-guardrail-override - Override clicked\n * @fires {CustomEvent} ai-guardrail-report - Report clicked\n * @fires {CustomEvent} ai-guardrail-reveal - Blocked content revealed/hidden\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\ninterface PolicyCheck {\n  policy: string;\n  passed: boolean;\n  reason?: string;\n}\n\n@customElement('ai-guardrail')\nexport class AiGuardrail 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    /* ── Status bar ── */\n    .status-bar {\n      display: flex; align-items: center; gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n    }\n    .status-bar svg { width: var(--cg-spacing-16); height: var(--cg-spacing-16); flex-shrink: 0; }\n    .status-bar.safe {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-status-success-border-default);\n    }\n    .status-bar.flagged {\n      background: var(--cg-color-status-warning-background-default);\n      color: var(--cg-color-status-warning-text-default);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-status-warning-border-default);\n    }\n    .status-bar.blocked {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);\n    }\n\n    .status-text { flex: 1; }\n    .severity {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8); border-radius: var(--cg-border-radius-full);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .severity.low { background: var(--cg-color-status-success-background-default); color: var(--cg-color-status-success-text-default); }\n    .severity.medium { background: var(--cg-color-status-warning-background-default); color: var(--cg-color-status-warning-text-default); }\n    .severity.high { background: var(--cg-color-status-warning-background-default); color: var(--cg-color-status-warning-text-default); }\n    .severity.critical { background: var(--cg-color-status-error-background-default); color: var(--cg-color-status-error-text-default); }\n\n    /* ── Policy checks ── */\n    .checks { padding: var(--cg-spacing-16) var(--cg-spacing-20); }\n    .checks-label {\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      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .check {\n      display: flex; align-items: flex-start; gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-6) 0;\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .check:last-child { border-bottom: none; }\n\n    .check-icon { flex-shrink: 0; margin-top: var(--cg-spacing-2); }\n    .check-icon svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n    .check-icon.pass { color: var(--cg-color-status-success-text-default); }\n    .check-icon.fail { color: var(--cg-color-status-error-text-default); }\n\n    .check-info { flex: 1; }\n    .check-policy { font-size: var(--cg-font-size-sm); color: var(--cg-color-surface-base-text); font-weight: var(--cg-font-weight-medium); }\n    .check-reason { font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); margin-top: var(--cg-spacing-2); }\n\n    /* ── Blocked content ── */\n    .blocked-section {\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .blocked-label {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-status-error-text-default);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .blocked-content {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16); border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-status-error-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);\n      font-size: var(--cg-font-size-sm); color: var(--cg-color-surface-base-text);\n      font-family: var(--cg-font-family-mono);\n      line-height: var(--cg-line-height-relaxed);\n      filter: blur(4px);\n      transition: filter var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n      cursor: pointer;\n    }\n    .blocked-content.revealed { filter: none; }\n    .blocked-hint {\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);\n      margin-top: var(--cg-spacing-6); text-align: center;\n    }\n\n    /* ── Actions ── */\n    .actions {\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      display: flex; align-items: center; gap: var(--cg-spacing-12);\n    }\n    .override-warning {\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); flex: 1;\n    }\n\n    .btn {\n      padding: var(--cg-spacing-6) var(--cg-spacing-12); border-radius: var(--cg-border-radius-100);\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;\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    .btn:hover { border-color: var(--cg-color-surface-cards-hover-border); color: var(--cg-color-surface-base-text); }\n    .btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n\n    .btn.danger {\n      border-color: var(--cg-color-status-error-border-default);\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n    .btn.danger:hover { background: var(--cg-color-status-error-text-default); color: var(--cg-overlay-dark-text); }\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() status: 'safe' | 'flagged' | 'blocked' = 'safe';\n  @property({ type: Array }) checks: PolicyCheck[] = [];\n  @property() blockedContent = '';\n  @property({ type: Boolean }) allowOverride = false;\n  @property() severityLevel: 'low' | 'medium' | 'high' | 'critical' = 'low';\n\n  @state() private _revealed = false;\n\n  private _getStatusIcon() {\n    if (this.status === 'safe') return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>`;\n    if (this.status === 'flagged') return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\"/></svg>`;\n    return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`;\n  }\n\n  private _getStatusText(): string {\n    if (this.status === 'safe') return 'All safety checks passed';\n    if (this.status === 'flagged') return 'Content flagged for review';\n    return 'Content blocked by safety filter';\n  }\n\n  private _checkIcon(passed: boolean) {\n    return passed\n      ? html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>`\n      : html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`;\n  }\n\n  override render() {\n    return html`\n      <div class=\"panel\" role=\"alert\" aria-live=\"polite\" aria-label=\"Safety filter: ${this.status}\">\n        <div class=\"status-bar ${this.status}\">\n          ${this._getStatusIcon()}\n          <span class=\"status-text\">${this._getStatusText()}</span>\n          ${this.status !== 'safe' ? html`<span class=\"severity ${this.severityLevel}\">${this.severityLevel}</span>` : nothing}\n        </div>\n\n        ${this.checks.length > 0 ? html`\n          <div class=\"checks\">\n            <div class=\"checks-label\">Policy Checks (${this.checks.filter(c => c.passed).length}/${this.checks.length} passed)</div>\n            ${this.checks.map(c => html`\n              <div class=\"check\">\n                <span class=\"check-icon ${c.passed ? 'pass' : 'fail'}\">${this._checkIcon(c.passed)}</span>\n                <div class=\"check-info\">\n                  <div class=\"check-policy\">${c.policy}</div>\n                  ${c.reason ? html`<div class=\"check-reason\">${c.reason}</div>` : nothing}\n                </div>\n              </div>\n            `)}\n          </div>\n        ` : nothing}\n\n        ${this.blockedContent ? html`\n          <div class=\"blocked-section\">\n            <div class=\"blocked-label\">Blocked Content</div>\n            <div class=\"blocked-content ${this._revealed ? 'revealed' : ''}\"\n              @click=${() => { this._revealed = !this._revealed; this.dispatchEvent(new CustomEvent('ai-guardrail-reveal', { bubbles: true, composed: true, detail: { revealed: this._revealed } })); }}>\n              ${this.blockedContent}\n            </div>\n            <div class=\"blocked-hint\">${this._revealed ? 'Click to hide' : 'Click to reveal (may contain harmful content)'}</div>\n          </div>\n        ` : nothing}\n\n        ${(this.allowOverride || this.status !== 'safe') ? html`\n          <div class=\"actions\">\n            <button class=\"btn\" @click=${() => this.dispatchEvent(new CustomEvent('ai-guardrail-report', { bubbles: true, composed: true, detail: { status: this.status, checks: this.checks } }))}>Report Issue</button>\n            ${this.allowOverride ? html`\n              <span class=\"override-warning\">Override requires admin approval</span>\n              <button class=\"btn danger\" @click=${() => this.dispatchEvent(new CustomEvent('ai-guardrail-override', { bubbles: true, composed: true, detail: { status: this.status, severity: this.severityLevel } }))}>Override</button>\n            ` : nothing}\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiGuardrail","LitElement","html","passed","nothing","c","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-guardrail.js","sources":["../../../src/components/ai-guardrail/ai-guardrail.ts"],"sourcesContent":["/**\n * @element ai-guardrail\n * Content safety filter display with policy checks, blocked content blur, and override controls.\n *\n * @fires {CustomEvent} ai-guardrail-override - Override clicked\n * @fires {CustomEvent} ai-guardrail-report - Report clicked\n * @fires {CustomEvent} ai-guardrail-reveal - Blocked content revealed/hidden\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\ninterface PolicyCheck {\n  policy: string;\n  passed: boolean;\n  reason?: string;\n}\n\n@customElement('ai-guardrail')\nexport class AiGuardrail 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    /* ── Status bar ── */\n    .status-bar {\n      display: flex; align-items: center; gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n    }\n    .status-bar svg { width: var(--cg-spacing-16); height: var(--cg-spacing-16); flex-shrink: 0; }\n    .status-bar.safe {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-status-success-border-default);\n    }\n    .status-bar.flagged {\n      background: var(--cg-color-status-warning-background-default);\n      color: var(--cg-color-status-warning-text-default);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-status-warning-border-default);\n    }\n    .status-bar.blocked {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);\n    }\n\n    .status-text { flex: 1; }\n    .severity {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8); border-radius: var(--cg-border-radius-full);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .severity.low { background: var(--cg-color-status-success-background-default); color: var(--cg-color-status-success-text-default); }\n    .severity.medium { background: var(--cg-color-status-warning-background-default); color: var(--cg-color-status-warning-text-default); }\n    .severity.high { background: var(--cg-color-status-warning-background-default); color: var(--cg-color-status-warning-text-default); }\n    .severity.critical { background: var(--cg-color-status-error-background-default); color: var(--cg-color-status-error-text-default); }\n\n    /* ── Policy checks ── */\n    .checks { padding: var(--cg-spacing-16) var(--cg-spacing-20); }\n    .checks-label {\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      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .check {\n      display: flex; align-items: flex-start; gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-6) 0;\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .check:last-child { border-bottom: none; }\n\n    .check-icon { flex-shrink: 0; margin-top: var(--cg-spacing-2); }\n    .check-icon svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n    .check-icon.pass { color: var(--cg-color-status-success-text-default); }\n    .check-icon.fail { color: var(--cg-color-status-error-text-default); }\n\n    .check-info { flex: 1; }\n    .check-policy { font-size: var(--cg-font-size-sm); color: var(--cg-color-surface-base-text); font-weight: var(--cg-font-weight-medium); }\n    .check-reason { font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); margin-top: var(--cg-spacing-2); }\n\n    /* ── Blocked content ── */\n    .blocked-section {\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .blocked-label {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-status-error-text-default);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .blocked-content {\n      padding: var(--cg-spacing-12) var(--cg-spacing-16); border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-status-error-background-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);\n      font-size: var(--cg-font-size-sm); color: var(--cg-color-surface-base-text);\n      font-family: var(--cg-font-family-mono);\n      line-height: var(--cg-line-height-relaxed);\n      filter: blur(4px);\n      transition: filter var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n      cursor: pointer;\n    }\n    .blocked-content.revealed { filter: none; }\n    .blocked-hint {\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);\n      margin-top: var(--cg-spacing-6); text-align: center;\n    }\n\n    /* ── Actions ── */\n    .actions {\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      display: flex; align-items: center; gap: var(--cg-spacing-12);\n    }\n    .override-warning {\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined); flex: 1;\n    }\n\n    .btn {\n      padding: var(--cg-spacing-6) var(--cg-spacing-12); border-radius: var(--cg-border-radius-100);\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;\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    .btn:hover { border-color: var(--cg-color-surface-cards-hover-border); color: var(--cg-color-surface-base-text); }\n    .btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-color-focus-ring); }\n\n    .btn.danger {\n      border-color: var(--cg-color-status-error-border-default);\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n    .btn.danger:hover { background: var(--cg-color-status-error-text-default); color: var(--cg-overlay-dark-text); }\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() status: 'safe' | 'flagged' | 'blocked' = 'safe';\n  @property({ type: Array }) checks: PolicyCheck[] = [];\n  @property() blockedContent = '';\n  @property({ type: Boolean }) allowOverride = false;\n  @property() severityLevel: 'low' | 'medium' | 'high' | 'critical' = 'low';\n\n  @state() private _revealed = false;\n\n  private _getStatusIcon() {\n    if (this.status === 'safe') return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>`;\n    if (this.status === 'flagged') return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 9v4m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z\"/></svg>`;\n    return html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`;\n  }\n\n  private _getStatusText(): string {\n    if (this.status === 'safe') return 'All safety checks passed';\n    if (this.status === 'flagged') return 'Content flagged for review';\n    return 'Content blocked by safety filter';\n  }\n\n  private _checkIcon(passed: boolean) {\n    return passed\n      ? html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg>`\n      : html`<svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>`;\n  }\n\n  override render() {\n    return html`\n      <div class=\"panel\" role=\"alert\" aria-live=\"polite\" aria-label=\"Safety filter: ${this.status}\">\n        <div class=\"status-bar ${this.status}\">\n          ${this._getStatusIcon()}\n          <span class=\"status-text\">${this._getStatusText()}</span>\n          ${this.status !== 'safe' ? html`<span class=\"severity ${this.severityLevel}\">${this.severityLevel}</span>` : nothing}\n        </div>\n\n        ${this.checks.length > 0 ? html`\n          <div class=\"checks\">\n            <div class=\"checks-label\">Policy Checks (${this.checks.filter(c => c.passed).length}/${this.checks.length} passed)</div>\n            ${this.checks.map(c => html`\n              <div class=\"check\">\n                <span class=\"check-icon ${c.passed ? 'pass' : 'fail'}\">${this._checkIcon(c.passed)}</span>\n                <div class=\"check-info\">\n                  <div class=\"check-policy\">${c.policy}</div>\n                  ${c.reason ? html`<div class=\"check-reason\">${c.reason}</div>` : nothing}\n                </div>\n              </div>\n            `)}\n          </div>\n        ` : nothing}\n\n        ${this.blockedContent ? html`\n          <div class=\"blocked-section\">\n            <div class=\"blocked-label\">Blocked Content</div>\n            <div class=\"blocked-content ${this._revealed ? 'revealed' : ''}\"\n              @click=${() => { this._revealed = !this._revealed; this.dispatchEvent(new CustomEvent('ai-guardrail-reveal', { bubbles: true, composed: true, detail: { revealed: this._revealed } })); }}>\n              ${this.blockedContent}\n            </div>\n            <div class=\"blocked-hint\">${this._revealed ? 'Click to hide' : 'Click to reveal (may contain harmful content)'}</div>\n          </div>\n        ` : nothing}\n\n        ${(this.allowOverride || this.status !== 'safe') ? html`\n          <div class=\"actions\">\n            <button class=\"btn\" @click=${() => this.dispatchEvent(new CustomEvent('ai-guardrail-report', { bubbles: true, composed: true, detail: { status: this.status, checks: this.checks } }))}>Report Issue</button>\n            ${this.allowOverride ? html`\n              <span class=\"override-warning\">Override requires admin approval</span>\n              <button class=\"btn danger\" @click=${() => this.dispatchEvent(new CustomEvent('ai-guardrail-override', { bubbles: true, composed: true, detail: { status: this.status, severity: this.severityLevel } }))}>Override</button>\n            ` : nothing}\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiGuardrail","LitElement","html","passed","nothing","c","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { css as _, LitElement as y, html as b, nothing as f, svg as v } from "lit";
 import { property as u, state as w, customElement as C } from "lit/decorators.js";
-import { h as M, r as L, f as z } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as M, r as L, f as z } from "../../chunks/premium.css-DHekUEUt.js";
 var k = Object.defineProperty, S = Object.getOwnPropertyDescriptor, d = (a, e, t, r) => {
   for (var o = r > 1 ? void 0 : r ? S(e, t) : e, g = a.length - 1, h; g >= 0; g--)
     (h = a[g]) && (o = (r ? h(e, t, o) : h(o)) || o);

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

@@ -1,6 +1,6 @@
 import { css as u, LitElement as p, html as t, nothing as o } from "lit";
 import { property as i, customElement as v } from "lit/decorators.js";
-import { h, r as b, b as f } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h, r as f, b } from "../../chunks/premium.css-DHekUEUt.js";
 var m = Object.defineProperty, x = Object.getOwnPropertyDescriptor, r = (e, c, d, n) => {
   for (var s = n > 1 ? void 0 : n ? x(c, d) : c, l = e.length - 1, g; l >= 0; l--)
     (g = e[l]) && (s = (n ? g(c, d, s) : g(s)) || s);
@@ -87,7 +87,7 @@ let a = class extends p {
     ` : o;
   }
 };
-a.styles = [h, b, f, u`
+a.styles = [h, f, b, u`
     :host { display: block; }
 
     .card {
@@ -111,7 +111,7 @@ a.styles = [h, b, f, u`
     .card:active { transform: scale(var(--cg-interaction-press-scale)); }
     .card:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 3px var(--cg-color-focus-ring);
     }
     .card:focus-within .actions { opacity: 1; }
     .card.selected {
@@ -227,7 +227,7 @@ a.styles = [h, b, f, u`
     .source a:hover { text-decoration: underline; }
     .source a:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 3px var(--cg-color-focus-ring);
       border-radius: var(--cg-border-radius-50);
     }
     .source-dot { width: var(--cg-spacing-4); height: var(--cg-spacing-4); border-radius: var(--cg-border-radius-full); flex-shrink: 0; }

package/dist/components/ai-insight-card/ai-insight-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-insight-card.js","sources":["../../../src/components/ai-insight-card/ai-insight-card.ts"],"sourcesContent":["/**\n * @element ai-insight-card\n * Actionable AI insight card with type icons, expandable detail, sources, and status.\n *\n * @fires {CustomEvent<{type, text}>} ai-insight-click\n * @fires {CustomEvent<{type, text, expanded}>} ai-insight-expand\n * @fires {CustomEvent<{type, text}>} ai-insight-dismiss\n * @fires {CustomEvent<{type, text}>} ai-insight-bookmark\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, shimmerKeyframes } from '../../styles/index.js';\n\ninterface Source {\n  title: string;\n  url?: string;\n  relevance?: number;\n}\n\n@customElement('ai-insight-card')\nexport class AiInsightCard extends LitElement {\n  static override styles = [hostBlock, reducedMotion, shimmerKeyframes, css`\n    :host { display: block; }\n\n    .card {\n      display: flex;\n      gap: var(--cg-spacing-16);\n      padding: var(--cg-spacing-20);\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      cursor: pointer;\n      position: relative;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .card:hover {\n      border-color: var(--cg-color-surface-cards-hover-border);\n      transform: translateY(-1px);\n    }\n    .card:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .card:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .card:focus-within .actions { opacity: 1; }\n    .card.selected {\n      border-color: var(--cg-color-action-primary-background-default);\n      background: var(--cg-overlay-accent-subtle);\n    }\n\n    /* ── Status dot ── */\n    .status-dot {\n      position: absolute;\n      top: var(--cg-spacing-12);\n      right: var(--cg-spacing-12);\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n    }\n    .status-dot.new { background: var(--cg-color-action-primary-background-default); }\n    .status-dot.read { background: var(--cg-color-input-text-placeholder); }\n\n    /* ── Icon ── */\n    .icon-area {\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-full);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .icon-area svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }\n    .icon-area.explanation { background: var(--cg-color-status-info-background-default); border: var(--cg-border-width-50) solid var(--cg-color-status-info-border-default); color: var(--cg-color-status-info-text-default); }\n    .icon-area.forecast { background: var(--cg-overlay-accent-light); border: var(--cg-border-width-50) solid var(--cg-overlay-accent-medium); color: var(--cg-color-surface-base-text); }\n    .icon-area.anomaly { background: var(--cg-color-status-error-background-default); border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default); color: var(--cg-color-status-error-text-default); }\n    .icon-area.optimization { background: var(--cg-color-status-warning-background-default); border: var(--cg-border-width-50) solid var(--cg-color-status-warning-border-default); color: var(--cg-color-status-warning-text-default); }\n    .icon-area.classification { background: var(--cg-color-status-success-background-default); border: var(--cg-border-width-50) solid var(--cg-color-status-success-border-default); color: var(--cg-color-status-success-text-default); }\n\n    .content { flex: 1; min-width: 0; }\n\n    .type-label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-4);\n    }\n\n    .insight-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-normal);\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n    .card.expanded .insight-text {\n      -webkit-line-clamp: unset;\n      display: block;\n    }\n\n    /* ── Meta row ── */\n    .meta {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-12);\n      padding-top: var(--cg-spacing-8);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .meta-dot {\n      width: var(--cg-spacing-2);\n      height: var(--cg-spacing-2);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-input-text-placeholder);\n    }\n    .confidence { font-weight: var(--cg-font-weight-medium); }\n\n    /* ── Expanded detail ── */\n    .detail {\n      margin-top: var(--cg-spacing-12);\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      animation: detailReveal var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    @keyframes detailReveal {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n    .sources-label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-8);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .source {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-4) 0;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .source a {\n      color: var(--cg-color-surface-base-text);\n      text-decoration: none;\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .source a:hover { text-decoration: underline; }\n    .source a:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n      border-radius: var(--cg-border-radius-50);\n    }\n    .source-dot { width: var(--cg-spacing-4); height: var(--cg-spacing-4); border-radius: var(--cg-border-radius-full); flex-shrink: 0; }\n    .source-dot.high { background: var(--cg-color-status-success-text-default); }\n    .source-dot.medium { background: var(--cg-color-status-warning-text-default); }\n    .source-dot.low { background: var(--cg-color-input-text-placeholder); }\n\n    /* ── Action buttons ── */\n    .actions {\n      display: flex;\n      gap: var(--cg-spacing-4);\n      position: absolute;\n      top: var(--cg-spacing-8);\n      right: var(--cg-spacing-8);\n      opacity: 0;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .card:hover .actions { opacity: 1; }\n\n    /* ── Skeleton ── */\n    .skeleton {\n      display: flex;\n      gap: var(--cg-spacing-16);\n      padding: var(--cg-spacing-20);\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    }\n    .skel-icon {\n      width: var(--cg-spacing-40); height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-50);\n      background: linear-gradient(90deg, var(--cg-color-surface-container-background) 25%, var(--cg-color-surface-container-border) 50%, var(--cg-color-surface-container-background) 75%);\n      background-size: 200% 100%;\n      animation: shimmer 1.5s linear infinite;\n    }\n    .skel-lines { flex: 1; display: flex; flex-direction: column; gap: var(--cg-spacing-8); }\n    .skel-line {\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n      background: linear-gradient(90deg, var(--cg-color-surface-container-background) 25%, var(--cg-color-surface-container-border) 50%, var(--cg-color-surface-container-background) 75%);\n      background-size: 200% 100%;\n      animation: shimmer 1.5s linear infinite;\n    }\n    .skel-line:nth-child(1) { width: 40%; }\n    .skel-line:nth-child(2) { width: 90%; }\n    .skel-line:nth-child(3) { width: 60%; }\n\n    @media (prefers-reduced-motion: reduce) {\n      .card:hover { transform: none; }\n      .detail { animation: none; }\n    }\n  `];\n\n  @property() type: 'explanation' | 'forecast' | 'anomaly' | 'optimization' | 'classification' = 'explanation';\n  @property() text = '';\n  @property({ type: Number }) confidence = 0;\n  @property() timestamp = '';\n  @property({ type: Boolean }) expandable = false;\n  @property({ type: Boolean }) expanded = false;\n  @property({ type: Array }) sources: Source[] = [];\n  @property() status: 'new' | 'read' | 'dismissed' | '' = '';\n  @property({ type: Boolean }) loading = false;\n  @property({ type: Boolean }) selected = false;\n\n  private _getIconName(): string {\n    const icons: Record<string, string> = {\n      explanation: 'info',\n      forecast: 'chart',\n      anomaly: 'warning',\n      optimization: 'sparkle',\n      classification: 'filter',\n    };\n    return icons[this.type] || 'info';\n  }\n\n  private _handleClick() {\n    if (this.expandable) {\n      this.expanded = !this.expanded;\n      this.dispatchEvent(new CustomEvent('ai-insight-expand', { bubbles: true, composed: true, detail: { expanded: this.expanded, type: this.type } }));\n    }\n    this.dispatchEvent(new CustomEvent('ai-insight-click', { bubbles: true, composed: true, detail: { type: this.type, text: this.text, confidence: this.confidence } }));\n  }\n\n  private _handleDismiss(e: Event) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-insight-dismiss', { bubbles: true, composed: true, detail: { type: this.type, text: this.text } }));\n  }\n\n  private _handleBookmark(e: Event) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-insight-bookmark', { bubbles: true, composed: true, detail: { type: this.type, text: this.text } }));\n  }\n\n  private _handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleClick(); }\n  }\n\n  private _relevanceClass(r?: number): string {\n    if (!r) return 'low';\n    return r >= 0.7 ? 'high' : r >= 0.4 ? 'medium' : 'low';\n  }\n\n  override render() {\n    if (this.loading) {\n      return html`\n        <div class=\"skeleton\" aria-label=\"Loading insight\">\n          <div class=\"skel-icon\"></div>\n          <div class=\"skel-lines\"><div class=\"skel-line\"></div><div class=\"skel-line\"></div><div class=\"skel-line\"></div></div>\n        </div>\n      `;\n    }\n    if (!this.text) return nothing;\n\n    return html`\n      <div class=\"card ${this.expanded ? 'expanded' : ''} ${this.selected ? 'selected' : ''}\"\n        role=\"article\" tabindex=\"0\" aria-label=\"${this.type} insight\"\n        aria-expanded=${this.expandable ? String(this.expanded) : nothing}\n        @click=${this._handleClick} @keydown=${this._handleKeyDown}>\n\n        ${this.status && this.status !== 'dismissed' ? html`<div class=\"status-dot ${this.status}\" aria-hidden=\"true\"></div>` : nothing}\n\n        <div class=\"actions\">\n          <cg-button variant=\"tertiary\" size=\"sm\" rounded=\"full\" label=\"Bookmark\" @click=${this._handleBookmark}>\n            <cg-icon name=\"star\" size=\"xs\"></cg-icon>\n          </cg-button>\n          <cg-button variant=\"tertiary\" size=\"sm\" rounded=\"full\" label=\"Dismiss\" @click=${this._handleDismiss}>\n            <cg-icon name=\"close\" size=\"xs\"></cg-icon>\n          </cg-button>\n        </div>\n\n        <div class=\"icon-area ${this.type}\" aria-hidden=\"true\"><cg-icon name=\"${this._getIconName()}\" size=\"sm\"></cg-icon></div>\n\n        <div class=\"content\">\n          <div class=\"type-label\">${this.type}</div>\n          <div class=\"insight-text\">${this.text}</div>\n\n          <div class=\"meta\">\n            ${this.confidence > 0 ? html`<span class=\"confidence\">${Math.round(this.confidence * 100)}%</span>` : nothing}\n            ${this.confidence > 0 && this.timestamp ? html`<span class=\"meta-dot\"></span>` : nothing}\n            ${this.timestamp ? html`<span>${this.timestamp}</span>` : nothing}\n            ${(this.confidence > 0 || this.timestamp) && this.sources.length > 0 ? html`<span class=\"meta-dot\"></span>` : nothing}\n            ${this.sources.length > 0 ? html`<span>${this.sources.length} source${this.sources.length > 1 ? 's' : ''}</span>` : nothing}\n          </div>\n\n          ${this.expanded && this.sources.length > 0 ? html`\n            <div class=\"detail\">\n              <div class=\"sources-label\">Sources</div>\n              ${this.sources.map(s => html`\n                <div class=\"source\">\n                  <div class=\"source-dot ${this._relevanceClass(s.relevance)}\"></div>\n                  ${s.url ? html`<a href=\"${s.url}\" target=\"_blank\" rel=\"noopener\">${s.title}</a>` : html`<span>${s.title}</span>`}\n                </div>\n              `)}\n            </div>\n          ` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiInsightCard","LitElement","r","html","nothing","s","hostBlock","reducedMotion","shimmerKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-insight-card.js","sources":["../../../src/components/ai-insight-card/ai-insight-card.ts"],"sourcesContent":["/**\n * @element ai-insight-card\n * Actionable AI insight card with type icons, expandable detail, sources, and status.\n *\n * @fires {CustomEvent<{type, text}>} ai-insight-click\n * @fires {CustomEvent<{type, text, expanded}>} ai-insight-expand\n * @fires {CustomEvent<{type, text}>} ai-insight-dismiss\n * @fires {CustomEvent<{type, text}>} ai-insight-bookmark\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, shimmerKeyframes } from '../../styles/index.js';\n\ninterface Source {\n  title: string;\n  url?: string;\n  relevance?: number;\n}\n\n@customElement('ai-insight-card')\nexport class AiInsightCard extends LitElement {\n  static override styles = [hostBlock, reducedMotion, shimmerKeyframes, css`\n    :host { display: block; }\n\n    .card {\n      display: flex;\n      gap: var(--cg-spacing-16);\n      padding: var(--cg-spacing-20);\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      cursor: pointer;\n      position: relative;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .card:hover {\n      border-color: var(--cg-color-surface-cards-hover-border);\n      transform: translateY(-1px);\n    }\n    .card:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .card:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-color-focus-ring);\n    }\n    .card:focus-within .actions { opacity: 1; }\n    .card.selected {\n      border-color: var(--cg-color-action-primary-background-default);\n      background: var(--cg-overlay-accent-subtle);\n    }\n\n    /* ── Status dot ── */\n    .status-dot {\n      position: absolute;\n      top: var(--cg-spacing-12);\n      right: var(--cg-spacing-12);\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n    }\n    .status-dot.new { background: var(--cg-color-action-primary-background-default); }\n    .status-dot.read { background: var(--cg-color-input-text-placeholder); }\n\n    /* ── Icon ── */\n    .icon-area {\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-full);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .icon-area svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }\n    .icon-area.explanation { background: var(--cg-color-status-info-background-default); border: var(--cg-border-width-50) solid var(--cg-color-status-info-border-default); color: var(--cg-color-status-info-text-default); }\n    .icon-area.forecast { background: var(--cg-overlay-accent-light); border: var(--cg-border-width-50) solid var(--cg-overlay-accent-medium); color: var(--cg-color-surface-base-text); }\n    .icon-area.anomaly { background: var(--cg-color-status-error-background-default); border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default); color: var(--cg-color-status-error-text-default); }\n    .icon-area.optimization { background: var(--cg-color-status-warning-background-default); border: var(--cg-border-width-50) solid var(--cg-color-status-warning-border-default); color: var(--cg-color-status-warning-text-default); }\n    .icon-area.classification { background: var(--cg-color-status-success-background-default); border: var(--cg-border-width-50) solid var(--cg-color-status-success-border-default); color: var(--cg-color-status-success-text-default); }\n\n    .content { flex: 1; min-width: 0; }\n\n    .type-label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-4);\n    }\n\n    .insight-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-normal);\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n    .card.expanded .insight-text {\n      -webkit-line-clamp: unset;\n      display: block;\n    }\n\n    /* ── Meta row ── */\n    .meta {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-12);\n      padding-top: var(--cg-spacing-8);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .meta-dot {\n      width: var(--cg-spacing-2);\n      height: var(--cg-spacing-2);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-input-text-placeholder);\n    }\n    .confidence { font-weight: var(--cg-font-weight-medium); }\n\n    /* ── Expanded detail ── */\n    .detail {\n      margin-top: var(--cg-spacing-12);\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      animation: detailReveal var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    @keyframes detailReveal {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n    .sources-label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-8);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .source {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-4) 0;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .source a {\n      color: var(--cg-color-surface-base-text);\n      text-decoration: none;\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .source a:hover { text-decoration: underline; }\n    .source a:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-color-focus-ring);\n      border-radius: var(--cg-border-radius-50);\n    }\n    .source-dot { width: var(--cg-spacing-4); height: var(--cg-spacing-4); border-radius: var(--cg-border-radius-full); flex-shrink: 0; }\n    .source-dot.high { background: var(--cg-color-status-success-text-default); }\n    .source-dot.medium { background: var(--cg-color-status-warning-text-default); }\n    .source-dot.low { background: var(--cg-color-input-text-placeholder); }\n\n    /* ── Action buttons ── */\n    .actions {\n      display: flex;\n      gap: var(--cg-spacing-4);\n      position: absolute;\n      top: var(--cg-spacing-8);\n      right: var(--cg-spacing-8);\n      opacity: 0;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .card:hover .actions { opacity: 1; }\n\n    /* ── Skeleton ── */\n    .skeleton {\n      display: flex;\n      gap: var(--cg-spacing-16);\n      padding: var(--cg-spacing-20);\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    }\n    .skel-icon {\n      width: var(--cg-spacing-40); height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-50);\n      background: linear-gradient(90deg, var(--cg-color-surface-container-background) 25%, var(--cg-color-surface-container-border) 50%, var(--cg-color-surface-container-background) 75%);\n      background-size: 200% 100%;\n      animation: shimmer 1.5s linear infinite;\n    }\n    .skel-lines { flex: 1; display: flex; flex-direction: column; gap: var(--cg-spacing-8); }\n    .skel-line {\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n      background: linear-gradient(90deg, var(--cg-color-surface-container-background) 25%, var(--cg-color-surface-container-border) 50%, var(--cg-color-surface-container-background) 75%);\n      background-size: 200% 100%;\n      animation: shimmer 1.5s linear infinite;\n    }\n    .skel-line:nth-child(1) { width: 40%; }\n    .skel-line:nth-child(2) { width: 90%; }\n    .skel-line:nth-child(3) { width: 60%; }\n\n    @media (prefers-reduced-motion: reduce) {\n      .card:hover { transform: none; }\n      .detail { animation: none; }\n    }\n  `];\n\n  @property() type: 'explanation' | 'forecast' | 'anomaly' | 'optimization' | 'classification' = 'explanation';\n  @property() text = '';\n  @property({ type: Number }) confidence = 0;\n  @property() timestamp = '';\n  @property({ type: Boolean }) expandable = false;\n  @property({ type: Boolean }) expanded = false;\n  @property({ type: Array }) sources: Source[] = [];\n  @property() status: 'new' | 'read' | 'dismissed' | '' = '';\n  @property({ type: Boolean }) loading = false;\n  @property({ type: Boolean }) selected = false;\n\n  private _getIconName(): string {\n    const icons: Record<string, string> = {\n      explanation: 'info',\n      forecast: 'chart',\n      anomaly: 'warning',\n      optimization: 'sparkle',\n      classification: 'filter',\n    };\n    return icons[this.type] || 'info';\n  }\n\n  private _handleClick() {\n    if (this.expandable) {\n      this.expanded = !this.expanded;\n      this.dispatchEvent(new CustomEvent('ai-insight-expand', { bubbles: true, composed: true, detail: { expanded: this.expanded, type: this.type } }));\n    }\n    this.dispatchEvent(new CustomEvent('ai-insight-click', { bubbles: true, composed: true, detail: { type: this.type, text: this.text, confidence: this.confidence } }));\n  }\n\n  private _handleDismiss(e: Event) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-insight-dismiss', { bubbles: true, composed: true, detail: { type: this.type, text: this.text } }));\n  }\n\n  private _handleBookmark(e: Event) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-insight-bookmark', { bubbles: true, composed: true, detail: { type: this.type, text: this.text } }));\n  }\n\n  private _handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleClick(); }\n  }\n\n  private _relevanceClass(r?: number): string {\n    if (!r) return 'low';\n    return r >= 0.7 ? 'high' : r >= 0.4 ? 'medium' : 'low';\n  }\n\n  override render() {\n    if (this.loading) {\n      return html`\n        <div class=\"skeleton\" aria-label=\"Loading insight\">\n          <div class=\"skel-icon\"></div>\n          <div class=\"skel-lines\"><div class=\"skel-line\"></div><div class=\"skel-line\"></div><div class=\"skel-line\"></div></div>\n        </div>\n      `;\n    }\n    if (!this.text) return nothing;\n\n    return html`\n      <div class=\"card ${this.expanded ? 'expanded' : ''} ${this.selected ? 'selected' : ''}\"\n        role=\"article\" tabindex=\"0\" aria-label=\"${this.type} insight\"\n        aria-expanded=${this.expandable ? String(this.expanded) : nothing}\n        @click=${this._handleClick} @keydown=${this._handleKeyDown}>\n\n        ${this.status && this.status !== 'dismissed' ? html`<div class=\"status-dot ${this.status}\" aria-hidden=\"true\"></div>` : nothing}\n\n        <div class=\"actions\">\n          <cg-button variant=\"tertiary\" size=\"sm\" rounded=\"full\" label=\"Bookmark\" @click=${this._handleBookmark}>\n            <cg-icon name=\"star\" size=\"xs\"></cg-icon>\n          </cg-button>\n          <cg-button variant=\"tertiary\" size=\"sm\" rounded=\"full\" label=\"Dismiss\" @click=${this._handleDismiss}>\n            <cg-icon name=\"close\" size=\"xs\"></cg-icon>\n          </cg-button>\n        </div>\n\n        <div class=\"icon-area ${this.type}\" aria-hidden=\"true\"><cg-icon name=\"${this._getIconName()}\" size=\"sm\"></cg-icon></div>\n\n        <div class=\"content\">\n          <div class=\"type-label\">${this.type}</div>\n          <div class=\"insight-text\">${this.text}</div>\n\n          <div class=\"meta\">\n            ${this.confidence > 0 ? html`<span class=\"confidence\">${Math.round(this.confidence * 100)}%</span>` : nothing}\n            ${this.confidence > 0 && this.timestamp ? html`<span class=\"meta-dot\"></span>` : nothing}\n            ${this.timestamp ? html`<span>${this.timestamp}</span>` : nothing}\n            ${(this.confidence > 0 || this.timestamp) && this.sources.length > 0 ? html`<span class=\"meta-dot\"></span>` : nothing}\n            ${this.sources.length > 0 ? html`<span>${this.sources.length} source${this.sources.length > 1 ? 's' : ''}</span>` : nothing}\n          </div>\n\n          ${this.expanded && this.sources.length > 0 ? html`\n            <div class=\"detail\">\n              <div class=\"sources-label\">Sources</div>\n              ${this.sources.map(s => html`\n                <div class=\"source\">\n                  <div class=\"source-dot ${this._relevanceClass(s.relevance)}\"></div>\n                  ${s.url ? html`<a href=\"${s.url}\" target=\"_blank\" rel=\"noopener\">${s.title}</a>` : html`<span>${s.title}</span>`}\n                </div>\n              `)}\n            </div>\n          ` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiInsightCard","LitElement","r","html","nothing","s","hostBlock","reducedMotion","shimmerKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}