@cognivo/components 0.8.0

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

@@ -0,0 +1,347 @@
+import { css as p, LitElement as u, nothing as g, html as c } from "lit";
+import { property as o, state as v, customElement as h } from "lit/decorators.js";
+import { h as b, r as f, g as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var x = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, i, e, s) => {
+  for (var n = s > 1 ? void 0 : s ? y(i, e) : i, l = t.length - 1, d; l >= 0; l--)
+    (d = t[l]) && (n = (s ? d(i, e, n) : d(n)) || n);
+  return s && n && x(i, e, n), n;
+};
+let a = class extends u {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.sourceText = "", this.targetText = "", this.sourceLang = "en", this.targetLang = "es", this.loading = !1, this.confidence = 0, this.alternatives = [], this._copiedSide = null, this._languages = [
+      { code: "en", label: "English" },
+      { code: "es", label: "Spanish" },
+      { code: "fr", label: "French" },
+      { code: "de", label: "German" },
+      { code: "pt", label: "Portuguese" },
+      { code: "it", label: "Italian" },
+      { code: "ja", label: "Japanese" },
+      { code: "ko", label: "Korean" },
+      { code: "zh", label: "Chinese" }
+    ];
+  }
+  _requestTranslation() {
+    this.dispatchEvent(new CustomEvent("ai-translation-request", {
+      bubbles: !0,
+      composed: !0,
+      detail: { sourceText: this.sourceText, sourceLang: this.sourceLang, targetLang: this.targetLang }
+    }));
+  }
+  _selectAlt(t) {
+    this.dispatchEvent(new CustomEvent("ai-translation-select-alt", {
+      bubbles: !0,
+      composed: !0,
+      detail: { text: t.text, confidence: t.confidence }
+    }));
+  }
+  _copy(t, i) {
+    navigator.clipboard?.writeText(t), this._copiedSide = i, setTimeout(() => {
+      this._copiedSide = null;
+    }, 2e3), this.dispatchEvent(new CustomEvent("ai-translation-copy", {
+      bubbles: !0,
+      composed: !0,
+      detail: { text: t, side: i }
+    }));
+  }
+  render() {
+    const t = Math.round(this.confidence * 100), i = this.confidence > 0 && this.confidence < 0.7;
+    return c`
+      <div class="panel" role="region" aria-label="Translation">
+        <div class="header">
+          <svg class="header-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 8l6 10"/><path d="M4 14h8"/><path d="M2 5h8"/><path d="M7 2v3"/><path d="M22 22l-5-10-5 10"/><path d="M14 18h6"/></svg>
+          <span class="header-title">Translation</span>
+          ${this.confidence > 0 ? c`
+            <cg-badge
+              variant=${i ? "warning" : "success"}
+              label="${t}% confidence"
+              size="sm"
+              rounded="full"
+            ></cg-badge>
+          ` : g}
+        </div>
+
+        <div class="panes">
+          <div class="pane">
+            <div class="pane-header">
+              <cg-select class="lang-select"
+                size="sm"
+                label="Source"
+                .options=${this._languages.map((e) => ({ value: e.code, label: e.label }))}
+                .value=${this.sourceLang}
+                @cg-change=${(e) => {
+      this.sourceLang = e.detail.value;
+    }}
+              ></cg-select>
+              <cg-button variant="tertiary" size="sm"
+                status=${this._copiedSide === "source" ? "success" : "idle"}
+                label="Copy source text"
+                @click=${() => this._copy(this.sourceText, "source")}>
+                <cg-icon slot="prefix" name=${this._copiedSide === "source" ? "check" : "copy"} size="xs"></cg-icon>
+                ${this._copiedSide === "source" ? "Copied" : "Copy"}
+              </cg-button>
+            </div>
+            <div class="text-area ${this.sourceText ? "" : "muted"}">
+              ${this.sourceText || "Enter text to translate..."}
+            </div>
+          </div>
+
+          <div class="divider" aria-hidden="true"></div>
+
+          <div class="pane">
+            <div class="pane-header">
+              <cg-select class="lang-select"
+                size="sm"
+                label="Target"
+                .options=${this._languages.map((e) => ({ value: e.code, label: e.label }))}
+                .value=${this.targetLang}
+                @cg-change=${(e) => {
+      this.targetLang = e.detail.value;
+    }}
+              ></cg-select>
+              <cg-button variant="tertiary" size="sm"
+                status=${this._copiedSide === "target" ? "success" : "idle"}
+                label="Copy translation"
+                @click=${() => this._copy(this.targetText, "target")}>
+                <cg-icon slot="prefix" name=${this._copiedSide === "target" ? "check" : "copy"} size="xs"></cg-icon>
+                ${this._copiedSide === "target" ? "Copied" : "Copy"}
+              </cg-button>
+            </div>
+            ${this.loading ? c`
+              <div class="loading-dots" role="status" aria-label="Translating">
+                <span></span><span></span><span></span>
+              </div>
+            ` : c`
+              <div class="text-area ${this.targetText ? "" : "muted"}">
+                ${this.targetText || "Translation will appear here..."}
+              </div>
+            `}
+          </div>
+        </div>
+
+        ${this.alternatives.length > 0 ? c`
+          <div class="alternatives">
+            <div class="alt-label">Alternative translations</div>
+            <div class="alt-list" role="listbox" aria-label="Alternative translations">
+              ${this.alternatives.map((e) => c`
+                <div class="alt-item" tabindex="0" role="option"
+                  @click=${() => this._selectAlt(e)}
+                  @keydown=${(s) => {
+      (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this._selectAlt(e));
+    }}>
+                  <span class="alt-text">${e.text}</span>
+                  <span class="alt-conf">${Math.round(e.confidence * 100)}%</span>
+                </div>
+              `)}
+            </div>
+          </div>
+        ` : g}
+
+        <div class="translate-bar">
+          <cg-button variant="primary" size="sm"
+            ?disabled=${this.loading || !this.sourceText}
+            ?loading=${this.loading}
+            @click=${this._requestTranslation}>
+            ${this.loading ? "Translating..." : "Translate"}
+          </cg-button>
+        </div>
+      </div>
+    `;
+  }
+};
+a.styles = [b, f, m, p`
+    :host {
+      animation: fadeIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+
+    .panel {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-200);
+      overflow: hidden;
+    }
+
+    /* ── Header ── */
+    .header {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-16) var(--cg-spacing-20);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+    .header-icon {
+      width: var(--cg-spacing-20);
+      height: var(--cg-spacing-20);
+      color: var(--cg-color-surface-base-text);
+      flex-shrink: 0;
+    }
+    .header-title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text);
+      flex: 1;
+    }
+
+    /* ── Split panes ── */
+    .panes {
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+    }
+    .pane {
+      padding: var(--cg-spacing-16) var(--cg-spacing-20);
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-12);
+    }
+    .divider {
+      width: var(--cg-border-width-50);
+      background: var(--cg-color-surface-cards-divider);
+    }
+
+    .pane-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--cg-spacing-8);
+    }
+    /* Lang selector sizing */
+    .lang-select {
+      min-width: var(--cg-spacing-96);
+    }
+
+    /* ── Text areas ── */
+    .text-area {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-relaxed);
+      min-height: var(--cg-spacing-80);
+      word-break: break-word;
+    }
+    .text-area.muted {
+      color: var(--cg-color-input-text-placeholder);
+      font-style: italic;
+    }
+
+    /* ── Loading dots ── */
+    .loading-dots {
+      display: flex;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-8) 0;
+    }
+    .loading-dots span {
+      width: var(--cg-spacing-6);
+      height: var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-action-primary-background-default);
+      opacity: 0.4;
+      animation: dotPulse 1s ease infinite;
+    }
+    .loading-dots span:nth-child(2) { animation-delay: 0.15s; }
+    .loading-dots span:nth-child(3) { animation-delay: 0.3s; }
+    @keyframes dotPulse { 50% { opacity: 1; } }
+
+    /* ── Alternatives ── */
+    .alternatives {
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      padding: var(--cg-spacing-12) var(--cg-spacing-20);
+    }
+    .alt-label {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-input-text-placeholder);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      margin-bottom: var(--cg-spacing-8);
+    }
+    .alt-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-6);
+    }
+    .alt-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      cursor: pointer;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .alt-item:hover {
+      border-color: var(--cg-color-input-border-hover);
+      background: var(--cg-overlay-dark-subtle);
+    }
+    .alt-item:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .alt-item:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 2px var(--cg-color-surface-base-background),
+        0 0 0 4px var(--cg-color-focus-ring);
+    }
+    .alt-text {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+    }
+    .alt-conf {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      white-space: nowrap;
+    }
+
+    /* ── Translate bar ── */
+    .translate-bar {
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      padding: var(--cg-spacing-12) var(--cg-spacing-20);
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) .panel { border-radius: 0; }
+    :host([rounded="sm"]) .panel { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .panel { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .panel { border-radius: var(--cg-border-radius-200); }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host { animation: none; }
+      .loading-dots span { animation: none; opacity: 0.6; }
+    }
+  `];
+r([
+  o({ reflect: !0 })
+], a.prototype, "rounded", 2);
+r([
+  o({ type: String })
+], a.prototype, "sourceText", 2);
+r([
+  o({ type: String })
+], a.prototype, "targetText", 2);
+r([
+  o({ type: String })
+], a.prototype, "sourceLang", 2);
+r([
+  o({ type: String })
+], a.prototype, "targetLang", 2);
+r([
+  o({ type: Boolean })
+], a.prototype, "loading", 2);
+r([
+  o({ type: Number })
+], a.prototype, "confidence", 2);
+r([
+  o({ type: Array })
+], a.prototype, "alternatives", 2);
+r([
+  v()
+], a.prototype, "_copiedSide", 2);
+a = r([
+  h("ai-translation-panel")
+], a);
+export {
+  a as AiTranslationPanel
+};
+//# sourceMappingURL=ai-translation-panel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-translation-panel.js","sources":["../../../src/components/ai-translation-panel/ai-translation-panel.ts"],"sourcesContent":["/**\n * @element ai-translation-panel\n * Split-pane translation interface with language selectors, confidence badge,\n * alternative translations, and copy buttons.\n *\n * Uses cg-button for actions, cg-badge for confidence display.\n *\n * @example\n * ```html\n * <ai-translation-panel\n *   sourceText=\"Hello, how are you?\"\n *   targetText=\"Hola, como estas?\"\n *   sourceLang=\"en\"\n *   targetLang=\"es\"\n *   confidence=\"0.92\"\n *   .alternatives=${[{ text: 'Hola, que tal?', confidence: 0.85 }]}\n * ></ai-translation-panel>\n * ```\n *\n * @fires {CustomEvent<{sourceText, sourceLang, targetLang}>} ai-translation-request - Translation requested\n * @fires {CustomEvent<{text, confidence}>} ai-translation-select-alt - Alternative selected\n * @fires {CustomEvent<{text, side}>} ai-translation-copy - Text copied\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeInKeyframes } from '../../styles/index.js';\n\ninterface TranslationAlternative {\n  text: string;\n  confidence: number;\n}\n\n@customElement('ai-translation-panel')\nexport class AiTranslationPanel extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeInKeyframes, css`\n    :host {\n      animation: fadeIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n\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-border-radius-200);\n      overflow: hidden;\n    }\n\n    /* ── Header ── */\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .header-icon {\n      width: var(--cg-spacing-20);\n      height: var(--cg-spacing-20);\n      color: var(--cg-color-surface-base-text);\n      flex-shrink: 0;\n    }\n    .header-title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n      flex: 1;\n    }\n\n    /* ── Split panes ── */\n    .panes {\n      display: grid;\n      grid-template-columns: 1fr auto 1fr;\n    }\n    .pane {\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-12);\n    }\n    .divider {\n      width: var(--cg-border-width-50);\n      background: var(--cg-color-surface-cards-divider);\n    }\n\n    .pane-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-8);\n    }\n    /* Lang selector sizing */\n    .lang-select {\n      min-width: var(--cg-spacing-96);\n    }\n\n    /* ── Text areas ── */\n    .text-area {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-relaxed);\n      min-height: var(--cg-spacing-80);\n      word-break: break-word;\n    }\n    .text-area.muted {\n      color: var(--cg-color-input-text-placeholder);\n      font-style: italic;\n    }\n\n    /* ── Loading dots ── */\n    .loading-dots {\n      display: flex;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-8) 0;\n    }\n    .loading-dots span {\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-action-primary-background-default);\n      opacity: 0.4;\n      animation: dotPulse 1s ease infinite;\n    }\n    .loading-dots span:nth-child(2) { animation-delay: 0.15s; }\n    .loading-dots span:nth-child(3) { animation-delay: 0.3s; }\n    @keyframes dotPulse { 50% { opacity: 1; } }\n\n    /* ── Alternatives ── */\n    .alternatives {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      padding: var(--cg-spacing-12) var(--cg-spacing-20);\n    }\n    .alt-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: var(--cg-letter-spacing-wide);\n      margin-bottom: var(--cg-spacing-8);\n    }\n    .alt-list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-6);\n    }\n    .alt-item {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      cursor: pointer;\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    }\n    .alt-item:hover {\n      border-color: var(--cg-color-input-border-hover);\n      background: var(--cg-overlay-dark-subtle);\n    }\n    .alt-item:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .alt-item:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 2px var(--cg-color-surface-base-background),\n        0 0 0 4px var(--cg-color-focus-ring);\n    }\n    .alt-text {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n    }\n    .alt-conf {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      white-space: nowrap;\n    }\n\n    /* ── Translate bar ── */\n    .translate-bar {\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      padding: var(--cg-spacing-12) var(--cg-spacing-20);\n      display: flex;\n      justify-content: flex-end;\n    }\n\n    /* ── Rounded variants ── */\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-border-radius-200); }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host { animation: none; }\n      .loading-dots span { animation: none; opacity: 0.6; }\n    }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: String }) sourceText: string = '';\n  @property({ type: String }) targetText: string = '';\n  @property({ type: String }) sourceLang: string = 'en';\n  @property({ type: String }) targetLang: string = 'es';\n  @property({ type: Boolean }) loading: boolean = false;\n  @property({ type: Number }) confidence: number = 0;\n  @property({ type: Array }) alternatives: TranslationAlternative[] = [];\n\n  @state() private _copiedSide: 'source' | 'target' | null = null;\n\n  private _languages = [\n    { code: 'en', label: 'English' },\n    { code: 'es', label: 'Spanish' },\n    { code: 'fr', label: 'French' },\n    { code: 'de', label: 'German' },\n    { code: 'pt', label: 'Portuguese' },\n    { code: 'it', label: 'Italian' },\n    { code: 'ja', label: 'Japanese' },\n    { code: 'ko', label: 'Korean' },\n    { code: 'zh', label: 'Chinese' },\n  ];\n\n  private _requestTranslation() {\n    this.dispatchEvent(new CustomEvent('ai-translation-request', {\n      bubbles: true, composed: true,\n      detail: { sourceText: this.sourceText, sourceLang: this.sourceLang, targetLang: this.targetLang },\n    }));\n  }\n\n  private _selectAlt(alt: TranslationAlternative) {\n    this.dispatchEvent(new CustomEvent('ai-translation-select-alt', {\n      bubbles: true, composed: true,\n      detail: { text: alt.text, confidence: alt.confidence },\n    }));\n  }\n\n  private _copy(text: string, side: 'source' | 'target') {\n    navigator.clipboard?.writeText(text);\n    this._copiedSide = side;\n    setTimeout(() => { this._copiedSide = null; }, 2000);\n    this.dispatchEvent(new CustomEvent('ai-translation-copy', {\n      bubbles: true, composed: true,\n      detail: { text, side },\n    }));\n  }\n\n  override render() {\n    const confPct = Math.round(this.confidence * 100);\n    const isLow = this.confidence > 0 && this.confidence < 0.7;\n\n    return html`\n      <div class=\"panel\" role=\"region\" aria-label=\"Translation\">\n        <div class=\"header\">\n          <svg class=\"header-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 8l6 10\"/><path d=\"M4 14h8\"/><path d=\"M2 5h8\"/><path d=\"M7 2v3\"/><path d=\"M22 22l-5-10-5 10\"/><path d=\"M14 18h6\"/></svg>\n          <span class=\"header-title\">Translation</span>\n          ${this.confidence > 0 ? html`\n            <cg-badge\n              variant=${isLow ? 'warning' : 'success'}\n              label=\"${confPct}% confidence\"\n              size=\"sm\"\n              rounded=\"full\"\n            ></cg-badge>\n          ` : nothing}\n        </div>\n\n        <div class=\"panes\">\n          <div class=\"pane\">\n            <div class=\"pane-header\">\n              <cg-select class=\"lang-select\"\n                size=\"sm\"\n                label=\"Source\"\n                .options=${this._languages.map(l => ({ value: l.code, label: l.label }))}\n                .value=${this.sourceLang}\n                @cg-change=${(e: CustomEvent) => { this.sourceLang = e.detail.value; }}\n              ></cg-select>\n              <cg-button variant=\"tertiary\" size=\"sm\"\n                status=${this._copiedSide === 'source' ? 'success' : 'idle'}\n                label=\"Copy source text\"\n                @click=${() => this._copy(this.sourceText, 'source')}>\n                <cg-icon slot=\"prefix\" name=${this._copiedSide === 'source' ? 'check' : 'copy'} size=\"xs\"></cg-icon>\n                ${this._copiedSide === 'source' ? 'Copied' : 'Copy'}\n              </cg-button>\n            </div>\n            <div class=\"text-area ${!this.sourceText ? 'muted' : ''}\">\n              ${this.sourceText || 'Enter text to translate...'}\n            </div>\n          </div>\n\n          <div class=\"divider\" aria-hidden=\"true\"></div>\n\n          <div class=\"pane\">\n            <div class=\"pane-header\">\n              <cg-select class=\"lang-select\"\n                size=\"sm\"\n                label=\"Target\"\n                .options=${this._languages.map(l => ({ value: l.code, label: l.label }))}\n                .value=${this.targetLang}\n                @cg-change=${(e: CustomEvent) => { this.targetLang = e.detail.value; }}\n              ></cg-select>\n              <cg-button variant=\"tertiary\" size=\"sm\"\n                status=${this._copiedSide === 'target' ? 'success' : 'idle'}\n                label=\"Copy translation\"\n                @click=${() => this._copy(this.targetText, 'target')}>\n                <cg-icon slot=\"prefix\" name=${this._copiedSide === 'target' ? 'check' : 'copy'} size=\"xs\"></cg-icon>\n                ${this._copiedSide === 'target' ? 'Copied' : 'Copy'}\n              </cg-button>\n            </div>\n            ${this.loading ? html`\n              <div class=\"loading-dots\" role=\"status\" aria-label=\"Translating\">\n                <span></span><span></span><span></span>\n              </div>\n            ` : html`\n              <div class=\"text-area ${!this.targetText ? 'muted' : ''}\">\n                ${this.targetText || 'Translation will appear here...'}\n              </div>\n            `}\n          </div>\n        </div>\n\n        ${this.alternatives.length > 0 ? html`\n          <div class=\"alternatives\">\n            <div class=\"alt-label\">Alternative translations</div>\n            <div class=\"alt-list\" role=\"listbox\" aria-label=\"Alternative translations\">\n              ${this.alternatives.map(alt => html`\n                <div class=\"alt-item\" tabindex=\"0\" role=\"option\"\n                  @click=${() => this._selectAlt(alt)}\n                  @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._selectAlt(alt); } }}>\n                  <span class=\"alt-text\">${alt.text}</span>\n                  <span class=\"alt-conf\">${Math.round(alt.confidence * 100)}%</span>\n                </div>\n              `)}\n            </div>\n          </div>\n        ` : nothing}\n\n        <div class=\"translate-bar\">\n          <cg-button variant=\"primary\" size=\"sm\"\n            ?disabled=${this.loading || !this.sourceText}\n            ?loading=${this.loading}\n            @click=${this._requestTranslation}>\n            ${this.loading ? 'Translating...' : 'Translate'}\n          </cg-button>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiTranslationPanel","LitElement","alt","text","side","confPct","isLow","html","nothing","l","e","hostBlock","reducedMotion","fadeInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-usage-meter/ai-usage-meter.d.ts

@@ -0,0 +1,33 @@
+import { LitElement } from 'lit';
+export declare class AiUsageMeter extends LitElement {
+    static styles: import('lit').CSSResult[];
+    used: number;
+    limit: number;
+    label: string;
+    unit: string;
+    resetDate: string;
+    size: 'default' | 'compact' | 'lg';
+    private _animatedPct;
+    private _animatedUsed;
+    private _resetText;
+    private _announcement;
+    private _lastTier;
+    private _animFrame;
+    private _countdownInterval;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    private _startCountUp;
+    private _targetPct;
+    private _tier;
+    private _maybeAnnounceThreshold;
+    private _updateResetText;
+    private _emit;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-usage-meter': AiUsageMeter;
+    }
+}
+//# sourceMappingURL=ai-usage-meter.d.ts.map

package/dist/components/ai-usage-meter/ai-usage-meter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-usage-meter.d.ts","sourceRoot":"","sources":["../../../src/components/ai-usage-meter/ai-usage-meter.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAGrD,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AAInC,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BA6GnB;IAEyB,IAAI,SAAK;IACT,KAAK,SAAO;IACZ,KAAK,SAAW;IAChB,IAAI,SAAc;IACO,SAAS,SAAM;IACvC,IAAI,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,CAAa;IAEnE,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,aAAa,CAAK;IAC1B,OAAO,CAAC,UAAU,CAAM;IACxB,OAAO,CAAC,aAAa,CAAM;IAEpC,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,UAAU,CAAuB;IACzC,OAAO,CAAC,kBAAkB,CAAuB;IAExC,iBAAiB;IAMjB,oBAAoB;IAMpB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAU9C,OAAO,CAAC,aAAa;IAyBrB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,KAAK;IAMb,OAAO,CAAC,uBAAuB;IAiB/B,OAAO,CAAC,gBAAgB;IAmCxB,OAAO,CAAC,KAAK;IAIJ,MAAM;CAqEhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}