@cognivo/components 0.8.0

package/dist/components/ai-version-selector/ai-version-selector.js

@@ -0,0 +1,326 @@
+import { css as g, LitElement as p, nothing as s, html as a } from "lit";
+import { property as u, customElement as v } from "lit/decorators.js";
+import { h, r as b, f } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-slider/cg-slider.js";
+import "../cg-button/cg-button.js";
+import "../cg-radio/cg-radio.js";
+var m = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, t, i, o) => {
+  for (var r = o > 1 ? void 0 : o ? w(t, i) : t, c = e.length - 1, d; c >= 0; c--)
+    (d = e[c]) && (r = (o ? d(t, i, r) : d(r)) || r);
+  return o && r && m(t, i, r), r;
+};
+let l = class extends p {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.versions = [], this.selected = "";
+  }
+  // ─── Handlers ───────────────────────────────────────────────────────────
+  _onSelect(e) {
+    this.dispatchEvent(new CustomEvent("ai-version-select", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: e.id, label: e.label }
+    }));
+  }
+  _onRolloutChange(e, t) {
+    const o = t.detail?.value ?? 0;
+    this.dispatchEvent(new CustomEvent("ai-version-rollout-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: e.id, rolloutPercent: o }
+    }));
+  }
+  _onPromote(e, t) {
+    t.stopPropagation(), this.dispatchEvent(new CustomEvent("ai-version-rollout-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: e.id, rolloutPercent: 100 }
+    }));
+  }
+  render() {
+    return a`
+      <h3 class="title">Model versions</h3>
+      <div class="version-list" role="radiogroup" aria-label="Select model version">
+        ${this.versions.map((e) => {
+      const t = e.id === this.selected, i = e.rolloutPercent != null && e.status !== "deprecated", o = e.latency != null || e.cost != null || e.quality != null;
+      return a`
+            <button
+              class="version-item"
+              type="button"
+              role="radio"
+              aria-checked=${t ? "true" : "false"}
+              aria-label="${e.label}, ${e.status}"
+              @click=${() => this._onSelect(e)}
+            >
+              <div class="version-top">
+                <cg-radio
+                  variant="tick"
+                  .checked=${t}
+                  aria-hidden="true"
+                  tabindex="-1"
+                ></cg-radio>
+                <span class="version-label">${e.label}</span>
+                <span class="status-pill ${e.status}">
+                  <span class="pill-dot" aria-hidden="true"></span>
+                  ${e.status}
+                </span>
+                <span class="version-date">${e.date}</span>
+              </div>
+
+              ${o ? a`
+                <div class="meta-row">
+                  ${e.latency != null ? a`
+                    <span class="meta-item">
+                      <span class="meta-label">Latency</span>
+                      <span class="meta-value">${e.latency} ms</span>
+                    </span>
+                  ` : s}
+                  ${e.cost ? a`
+                    <span class="meta-item">
+                      <span class="meta-label">Cost</span>
+                      <span class="meta-value">${e.cost}</span>
+                    </span>
+                  ` : s}
+                  ${e.quality != null ? a`
+                    <span class="meta-item">
+                      <span class="meta-label">Quality</span>
+                      <span class="meta-value">${e.quality}%</span>
+                    </span>
+                  ` : s}
+                </div>
+              ` : s}
+
+              ${e.status === "deprecated" ? a`
+                <div class="deprecation-warning" role="alert">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                    <path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/>
+                    <line x1="12" y1="9"  x2="12" y2="13"/>
+                    <line x1="12" y1="17" x2="12.01" y2="17"/>
+                  </svg>
+                  <span>This version is deprecated. Migrate before the sunset date.</span>
+                </div>
+              ` : s}
+
+              ${i ? a`
+                <div class="rollout-section" @click=${(r) => r.stopPropagation()}>
+                  <cg-slider
+                    label="Rollout"
+                    .value=${e.rolloutPercent ?? 0}
+                    min="0"
+                    max="100"
+                    unit="%"
+                    showValue
+                    showTooltip
+                    aria-label="Rollout percentage for ${e.label}"
+                    @cg-change=${(r) => this._onRolloutChange(e, r)}
+                  ></cg-slider>
+                  ${(e.rolloutPercent ?? 0) < 100 ? a`
+                    <div class="rollout-actions">
+                      <cg-button
+                        variant="secondary"
+                        size="sm"
+                        @click=${(r) => this._onPromote(e, r)}
+                        aria-label="Promote ${e.label} to 100%"
+                      >Promote to 100%</cg-button>
+                    </div>
+                  ` : s}
+                </div>
+              ` : s}
+            </button>
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+l.styles = [h, b, f, g`
+    :host {
+      display: block;
+      background: var(--cg-color-surface-cards-background);
+      color: var(--cg-color-surface-base-text);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      box-shadow: var(--cg-elevation-1);
+      padding: var(--cg-spacing-20);
+      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+    :host([hidden]) { display: none; }
+
+    .title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      margin: 0 0 var(--cg-spacing-16) 0;
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .version-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+    }
+
+    /* ── Version row card ──
+       Border: subtle resting, slightly stronger on hover, one more
+       tonal step on selected. NO brand-accent border on selected (was
+       too loud) — selection is signaled by the cg-radio dot. NO press-
+       scale on the row — selecting a version isn't a "tap" interaction. */
+    .version-item {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      background: var(--cg-color-surface-cards-emphasis);
+      border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      cursor: pointer;
+      width: 100%;
+      text-align: left;
+      font: inherit;
+      color: inherit;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .version-item:hover { border-color: var(--cg-color-surface-cards-border-strong); }
+    .version-item:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .version-item[aria-checked="true"] {
+      border-color: var(--cg-color-surface-cards-border-strong);
+    }
+
+    .version-top {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      flex-wrap: wrap;
+    }
+
+    /* The cg-radio inside the row is a display-only indicator; the
+       wrapping button captures all interaction. pointer-events: none
+       lets clicks fall through to the button. */
+    .version-item cg-radio {
+      pointer-events: none;
+      flex-shrink: 0;
+    }
+
+    .version-label {
+      flex: 1;
+      min-width: 0;
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .version-date {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      flex-shrink: 0;
+      font-variant-numeric: tabular-nums;
+    }
+
+    /* ── Status pill — outlined with leading colored dot ── */
+    .status-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      font-size: 10px;
+      font-weight: var(--cg-font-weight-bold);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      flex-shrink: 0;
+      border: var(--cg-border-width-50) solid currentColor;
+      background: transparent;
+    }
+    .status-pill .pill-dot {
+      width: var(--cg-spacing-6);
+      height: var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+      background: currentColor;
+      flex-shrink: 0;
+    }
+    .status-pill.active     { color: var(--cg-color-status-success-text-default); }
+    .status-pill.canary     { color: var(--cg-color-status-warning-text-default); }
+    .status-pill.deprecated { color: var(--cg-color-status-error-text-default); }
+    /* Pulse the active dot — alive signal. */
+    .status-pill.active .pill-dot {
+      animation: cg-version-pulse 2s var(--cg-transition-easing-ease-in-out) infinite;
+    }
+    @keyframes cg-version-pulse {
+      0%, 100% { opacity: 1; }
+      50%      { opacity: 0.5; }
+    }
+
+    /* ── Deprecation warning ── */
+    .deprecation-warning {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-status-error-text-default);
+      padding: var(--cg-spacing-6) var(--cg-spacing-8);
+      background: var(--cg-color-status-error-background-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default);
+      border-radius: var(--cg-border-radius-50);
+    }
+    .deprecation-warning svg {
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      flex-shrink: 0;
+    }
+
+    /* ── Per-version meta row (latency / cost / quality) ── */
+    .meta-row {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--cg-spacing-12);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      font-variant-numeric: tabular-nums;
+    }
+    .meta-item { display: inline-flex; gap: var(--cg-spacing-4); }
+    .meta-label { color: var(--cg-color-input-text-placeholder); }
+    .meta-value { color: var(--cg-color-surface-base-text); font-weight: var(--cg-font-weight-medium); }
+
+    /* ── Rollout section ──
+       Slider gets a full-width row of its own; the Promote action sits on
+       a dedicated row below, right-aligned, as a tertiary (text-style)
+       button so it reads as a quick-shortcut, not a primary CTA competing
+       with the slider's value display. */
+    .rollout-section {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-4);
+    }
+    .rollout-section cg-slider { width: 100%; }
+    .rollout-actions {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) { border-radius: 0; }
+    :host([rounded="sm"])   { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"])   { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"])   { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) { border-radius: var(--cg-border-radius-full); }
+  `];
+n([
+  u({ reflect: !0 })
+], l.prototype, "rounded", 2);
+n([
+  u({ type: Array })
+], l.prototype, "versions", 2);
+n([
+  u({ type: String })
+], l.prototype, "selected", 2);
+l = n([
+  v("ai-version-selector")
+], l);
+export {
+  l as AiVersionSelector
+};
+//# sourceMappingURL=ai-version-selector.js.map

package/dist/components/ai-version-selector/ai-version-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-version-selector.js","sources":["../../../src/components/ai-version-selector/ai-version-selector.ts"],"sourcesContent":["/**\n * @element ai-version-selector\n * Model-version picker — radio-group selection, outlined status pills with\n * leading dot (active / canary / deprecated), dogfooded <cg-slider> rollout\n * percentage, dogfooded <cg-button> Promote action, optional per-version\n * latency / cost / quality meta. Modeled on LaunchDarkly AI configs +\n * Vercel Rolling Releases.\n *\n * @example\n * ```html\n * <ai-version-selector selected=\"v3\" .versions=${[\n *   { id: 'v3', label: 'v3.0-canary', status: 'canary', rolloutPercent: 10, date: 'Mar 28', latency: 280 },\n *   { id: 'v2', label: 'v2.1-stable', status: 'active', rolloutPercent: 90, date: 'Mar 15', latency: 240 },\n * ]}></ai-version-selector>\n * ```\n *\n * @prop {VersionEntry[]} versions - Array of versions\n * @prop {string} selected - Currently selected version ID\n *\n * @fires {CustomEvent<{id, label}>} ai-version-select - Selection changed\n * @fires {CustomEvent<{id, rolloutPercent}>} ai-version-rollout-change - Slider or Promote\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-slider/cg-slider.js';\nimport '../cg-button/cg-button.js';\nimport '../cg-radio/cg-radio.js';\n\nexport interface VersionEntry {\n  id: string;\n  label: string;\n  status: 'active' | 'canary' | 'deprecated';\n  rolloutPercent?: number;\n  date: string;\n  /** Optional per-version metrics (LaunchDarkly AI configs pattern). */\n  latency?: number;        // ms\n  cost?: string;           // formatted dollar value, e.g. \"$0.04 / 1k tokens\"\n  quality?: number;        // 0-100 score\n}\n\n@customElement('ai-version-selector')\nexport class AiVersionSelector 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-20);\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      margin: 0 0 var(--cg-spacing-16) 0;\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .version-list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    /* ── Version row card ──\n       Border: subtle resting, slightly stronger on hover, one more\n       tonal step on selected. NO brand-accent border on selected (was\n       too loud) — selection is signaled by the cg-radio dot. NO press-\n       scale on the row — selecting a version isn't a \"tap\" interaction. */\n    .version-item {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\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      cursor: pointer;\n      width: 100%;\n      text-align: left;\n      font: inherit;\n      color: inherit;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .version-item:hover { border-color: var(--cg-color-surface-cards-border-strong); }\n    .version-item:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .version-item[aria-checked=\"true\"] {\n      border-color: var(--cg-color-surface-cards-border-strong);\n    }\n\n    .version-top {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      flex-wrap: wrap;\n    }\n\n    /* The cg-radio inside the row is a display-only indicator; the\n       wrapping button captures all interaction. pointer-events: none\n       lets clicks fall through to the button. */\n    .version-item cg-radio {\n      pointer-events: none;\n      flex-shrink: 0;\n    }\n\n    .version-label {\n      flex: 1;\n      min-width: 0;\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    .version-date {\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\n    /* ── Status pill — outlined with leading colored dot ── */\n    .status-pill {\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      flex-shrink: 0;\n      border: var(--cg-border-width-50) solid currentColor;\n      background: transparent;\n    }\n    .status-pill .pill-dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      background: currentColor;\n      flex-shrink: 0;\n    }\n    .status-pill.active     { color: var(--cg-color-status-success-text-default); }\n    .status-pill.canary     { color: var(--cg-color-status-warning-text-default); }\n    .status-pill.deprecated { color: var(--cg-color-status-error-text-default); }\n    /* Pulse the active dot — alive signal. */\n    .status-pill.active .pill-dot {\n      animation: cg-version-pulse 2s var(--cg-transition-easing-ease-in-out) infinite;\n    }\n    @keyframes cg-version-pulse {\n      0%, 100% { opacity: 1; }\n      50%      { opacity: 0.5; }\n    }\n\n    /* ── Deprecation warning ── */\n    .deprecation-warning {\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-status-error-text-default);\n      padding: var(--cg-spacing-6) var(--cg-spacing-8);\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      border-radius: var(--cg-border-radius-50);\n    }\n    .deprecation-warning svg {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      flex-shrink: 0;\n    }\n\n    /* ── Per-version meta row (latency / cost / quality) ── */\n    .meta-row {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-12);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      font-variant-numeric: tabular-nums;\n    }\n    .meta-item { display: inline-flex; gap: var(--cg-spacing-4); }\n    .meta-label { color: var(--cg-color-input-text-placeholder); }\n    .meta-value { color: var(--cg-color-surface-base-text); font-weight: var(--cg-font-weight-medium); }\n\n    /* ── Rollout section ──\n       Slider gets a full-width row of its own; the Promote action sits on\n       a dedicated row below, right-aligned, as a tertiary (text-style)\n       button so it reads as a quick-shortcut, not a primary CTA competing\n       with the slider's value display. */\n    .rollout-section {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-4);\n    }\n    .rollout-section cg-slider { width: 100%; }\n    .rollout-actions {\n      display: flex;\n      justify-content: flex-end;\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 }) versions: VersionEntry[] = [];\n  @property({ type: String }) selected = '';\n\n  // ─── Handlers ───────────────────────────────────────────────────────────\n\n  private _onSelect(v: VersionEntry): void {\n    this.dispatchEvent(new CustomEvent('ai-version-select', {\n      bubbles: true, composed: true,\n      detail: { id: v.id, label: v.label },\n    }));\n  }\n\n  private _onRolloutChange(v: VersionEntry, e: Event): void {\n    // cg-slider fires CustomEvent<{value: number}>.\n    const detail = (e as CustomEvent<{ value: number }>).detail;\n    const value = detail?.value ?? 0;\n    this.dispatchEvent(new CustomEvent('ai-version-rollout-change', {\n      bubbles: true, composed: true,\n      detail: { id: v.id, rolloutPercent: value },\n    }));\n  }\n\n  private _onPromote(v: VersionEntry, e: Event): void {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-version-rollout-change', {\n      bubbles: true, composed: true,\n      detail: { id: v.id, rolloutPercent: 100 },\n    }));\n  }\n\n  override render() {\n    return html`\n      <h3 class=\"title\">Model versions</h3>\n      <div class=\"version-list\" role=\"radiogroup\" aria-label=\"Select model version\">\n        ${this.versions.map(v => {\n          const isSelected = v.id === this.selected;\n          const showRollout = v.rolloutPercent != null && v.status !== 'deprecated';\n          const hasMeta = v.latency != null || v.cost != null || v.quality != null;\n\n          return html`\n            <button\n              class=\"version-item\"\n              type=\"button\"\n              role=\"radio\"\n              aria-checked=${isSelected ? 'true' : 'false'}\n              aria-label=\"${v.label}, ${v.status}\"\n              @click=${() => this._onSelect(v)}\n            >\n              <div class=\"version-top\">\n                <cg-radio\n                  variant=\"tick\"\n                  .checked=${isSelected}\n                  aria-hidden=\"true\"\n                  tabindex=\"-1\"\n                ></cg-radio>\n                <span class=\"version-label\">${v.label}</span>\n                <span class=\"status-pill ${v.status}\">\n                  <span class=\"pill-dot\" aria-hidden=\"true\"></span>\n                  ${v.status}\n                </span>\n                <span class=\"version-date\">${v.date}</span>\n              </div>\n\n              ${hasMeta ? html`\n                <div class=\"meta-row\">\n                  ${v.latency != null ? html`\n                    <span class=\"meta-item\">\n                      <span class=\"meta-label\">Latency</span>\n                      <span class=\"meta-value\">${v.latency} ms</span>\n                    </span>\n                  ` : nothing}\n                  ${v.cost ? html`\n                    <span class=\"meta-item\">\n                      <span class=\"meta-label\">Cost</span>\n                      <span class=\"meta-value\">${v.cost}</span>\n                    </span>\n                  ` : nothing}\n                  ${v.quality != null ? html`\n                    <span class=\"meta-item\">\n                      <span class=\"meta-label\">Quality</span>\n                      <span class=\"meta-value\">${v.quality}%</span>\n                    </span>\n                  ` : nothing}\n                </div>\n              ` : nothing}\n\n              ${v.status === 'deprecated' ? html`\n                <div class=\"deprecation-warning\" role=\"alert\">\n                  <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                    <path d=\"M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"/>\n                    <line x1=\"12\" y1=\"9\"  x2=\"12\" y2=\"13\"/>\n                    <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"/>\n                  </svg>\n                  <span>This version is deprecated. Migrate before the sunset date.</span>\n                </div>\n              ` : nothing}\n\n              ${showRollout ? html`\n                <div class=\"rollout-section\" @click=${(e: Event) => e.stopPropagation()}>\n                  <cg-slider\n                    label=\"Rollout\"\n                    .value=${v.rolloutPercent ?? 0}\n                    min=\"0\"\n                    max=\"100\"\n                    unit=\"%\"\n                    showValue\n                    showTooltip\n                    aria-label=\"Rollout percentage for ${v.label}\"\n                    @cg-change=${(e: Event) => this._onRolloutChange(v, e)}\n                  ></cg-slider>\n                  ${(v.rolloutPercent ?? 0) < 100 ? html`\n                    <div class=\"rollout-actions\">\n                      <cg-button\n                        variant=\"secondary\"\n                        size=\"sm\"\n                        @click=${(e: Event) => this._onPromote(v, e)}\n                        aria-label=\"Promote ${v.label} to 100%\"\n                      >Promote to 100%</cg-button>\n                    </div>\n                  ` : nothing}\n                </div>\n              ` : nothing}\n            </button>\n          `;\n        })}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-version-selector': AiVersionSelector;\n  }\n}\n"],"names":["AiVersionSelector","LitElement","v","e","value","html","isSelected","showRollout","hasMeta","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

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

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+type VoiceState = 'idle' | 'listening' | 'processing' | 'error' | 'unsupported';
+export declare class AiVoicePanel extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    /** BCP-47 language tag */
+    language: string;
+    /** Hold mic to talk instead of click toggle */
+    pushToTalk: boolean;
+    /** Keep listening after each result (multi-sentence) */
+    continuous: boolean;
+    /** Auto-stop after N seconds of silence (0 = no timeout) */
+    timeout: number;
+    private _state;
+    private _transcript;
+    private _interimTranscript;
+    private _errorMessage;
+    private _recognition;
+    private _timeoutId;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Public API: start recognition */
+    startRecognition(): void;
+    /** Public API: stop recognition */
+    stopRecognition(): void;
+    /** Public API: clear transcript */
+    clearTranscript(): void;
+    /** Read-only access to current transcript */
+    get transcript(): string;
+    get interimTranscript(): string;
+    get voiceState(): VoiceState;
+    private _cleanup;
+    private _startTimeout;
+    private _resetTimeout;
+    private _clearTimeout;
+    private _handleMicClick;
+    private _handlePointerDown;
+    private _handlePointerUp;
+    private _handleKeyDown;
+    private _handleKeyUp;
+    private _getStateLabel;
+    private _getMicIcon;
+    render(): import('lit').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=ai-voice-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-voice-panel.d.ts","sourceRoot":"","sources":["../../../src/components/ai-voice-panel/ai-voice-panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAUrD,KAAK,UAAU,GAAG,MAAM,GAAG,WAAW,GAAG,YAAY,GAAG,OAAO,GAAG,aAAa,CAAC;AAEhF,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAgKnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACzE,0BAA0B;IACE,QAAQ,EAAE,MAAM,CAAW;IACvD,+CAA+C;IAClB,UAAU,EAAE,OAAO,CAAS;IACzD,wDAAwD;IAC3B,UAAU,EAAE,OAAO,CAAS;IACzD,4DAA4D;IAChC,OAAO,EAAE,MAAM,CAAM;IAExC,OAAO,CAAC,MAAM,CAAsB;IACpC,OAAO,CAAC,WAAW,CAAc;IACjC,OAAO,CAAC,kBAAkB,CAAc;IACxC,OAAO,CAAC,aAAa,CAAc;IAE5C,OAAO,CAAC,YAAY,CAAkC;IACtD,OAAO,CAAC,UAAU,CAAa;IAEtB,iBAAiB;IAOjB,oBAAoB;IAK7B,oCAAoC;IACpC,gBAAgB;IAkFhB,mCAAmC;IACnC,eAAe;IAOf,mCAAmC;IACnC,eAAe;IAKf,6CAA6C;IAC7C,IAAI,UAAU,IAAI,MAAM,CAA6B;IACrD,IAAI,iBAAiB,IAAI,MAAM,CAAoC;IACnE,IAAI,UAAU,IAAI,UAAU,CAAwB;IAEpD,OAAO,CAAC,QAAQ;IAQhB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,aAAa;IAMrB,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,YAAY;IAMpB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAaV,MAAM;CAmDhB"}