@cognivo/components 0.8.0

package/dist/components/ai-consent-manager/ai-consent-manager.js

@@ -0,0 +1,169 @@
+import { css as p, LitElement as h, nothing as g, html as n } from "lit";
+import { property as o, customElement as v } from "lit/decorators.js";
+import { h as u, r as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, c = (e, s, r, t) => {
+  for (var i = t > 1 ? void 0 : t ? b(s, r) : s, l = e.length - 1, d; l >= 0; l--)
+    (d = e[l]) && (i = (t ? d(s, r, i) : d(i)) || i);
+  return t && i && f(s, r, i), i;
+};
+let a = class extends h {
+  constructor() {
+    super(...arguments), this.consents = [], this.rounded = "lg", this.title = "Consent Settings", this.acceptAllLabel = "Accept All", this.rejectAllLabel = "Reject All", this.saveLabel = "Save Preferences";
+  }
+  _toggleConsent(e, s) {
+    if (s) return;
+    this.consents = this.consents.map((t) => t.id === e ? { ...t, checked: !t.checked } : t);
+    const r = this.consents.find((t) => t.id === e);
+    this.dispatchEvent(new CustomEvent("ai-consent-change", { bubbles: !0, composed: !0, detail: { id: e, checked: r?.checked ?? !1 } })), this.requestUpdate();
+  }
+  _acceptAll() {
+    this.consents = this.consents.map((e) => ({ ...e, checked: !0 })), this.requestUpdate(), this._save();
+  }
+  _rejectAll() {
+    this.consents = this.consents.map((e) => e.required ? e : { ...e, checked: !1 }), this.requestUpdate(), this._save();
+  }
+  _save() {
+    const e = {};
+    for (const s of this.consents) e[s.id] = s.checked ?? !1;
+    this.dispatchEvent(new CustomEvent("ai-consent-save", { bubbles: !0, composed: !0, detail: { consents: e } }));
+  }
+  _getCategories() {
+    return [...new Set(this.consents.map((e) => e.category || ""))];
+  }
+  _renderItem(e) {
+    return n`
+      <div class="item">
+        <div class="item-content">
+          <div class="item-label">
+            ${e.label}
+            ${e.required ? n`<cg-badge label="Required" variant="warning" size="sm"></cg-badge>` : g}
+          </div>
+          <div class="item-description">${e.description}</div>
+        </div>
+        <cg-switch
+          ?checked=${e.checked || e.required}
+          ?disabled=${e.required}
+          @cg-change=${() => this._toggleConsent(e.id, !!e.required)}
+        ></cg-switch>
+      </div>
+    `;
+  }
+  render() {
+    if (!this.consents.length) return g;
+    const e = this._getCategories(), s = e.length > 1 || e.length === 1 && e[0] !== "";
+    return n`
+      <div class="panel" role="region" aria-label="${this.title}">
+        <div class="header">
+          <svg class="header-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+          <span class="header-title">${this.title}</span>
+        </div>
+
+        ${s ? e.map((r) => n`
+              ${r ? n`<div class="category-label">${r}</div>` : g}
+              <div class="items">${this.consents.filter((t) => (t.category || "") === r).map((t) => this._renderItem(t))}</div>
+            `) : n`<div class="items">${this.consents.map((r) => this._renderItem(r))}</div>`}
+
+        <div class="footer">
+          <cg-button variant="tertiary" size="sm" @click=${this._rejectAll}>${this.rejectAllLabel}</cg-button>
+          <cg-button variant="secondary" size="sm" @click=${this._acceptAll}>${this.acceptAllLabel}</cg-button>
+          <span class="footer-spacer"></span>
+          <cg-button variant="primary" size="sm" @click=${this._save}>${this.saveLabel}</cg-button>
+        </div>
+      </div>
+    `;
+  }
+};
+a.styles = [u, m, p`
+    .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-150);
+      overflow: hidden;
+    }
+
+    .header {
+      display: flex; align-items: center; gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-16) var(--cg-spacing-20);
+    }
+    .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-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    .category-label {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-container-outlined);
+      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);
+      padding: var(--cg-spacing-12) var(--cg-spacing-20) var(--cg-spacing-4);
+    }
+
+    .items { padding: var(--cg-spacing-8) var(--cg-spacing-20); }
+
+    .item {
+      display: flex; align-items: flex-start; gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-12) 0;
+    }
+
+    .item-content { flex: 1; min-width: 0; }
+    .item-label {
+      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+      display: flex; align-items: center; gap: var(--cg-spacing-6);
+    }
+    .item-description {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      line-height: var(--cg-line-height-snug);
+      margin-top: var(--cg-spacing-2);
+    }
+
+    /* ── Switch alignment ── */
+    .item cg-switch {
+      flex-shrink: 0;
+      margin-top: var(--cg-spacing-2);
+    }
+
+    /* ── Footer ── */
+    .footer {
+      display: flex; align-items: center; gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-12) var(--cg-spacing-20) var(--cg-spacing-16);
+      flex-wrap: wrap;
+    }
+    .footer-spacer { flex: 1; }
+
+    /* ── Rounded ── */
+    :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-150); }
+
+  `];
+c([
+  o({ type: Array })
+], a.prototype, "consents", 2);
+c([
+  o({ reflect: !0 })
+], a.prototype, "rounded", 2);
+c([
+  o()
+], a.prototype, "title", 2);
+c([
+  o()
+], a.prototype, "acceptAllLabel", 2);
+c([
+  o()
+], a.prototype, "rejectAllLabel", 2);
+c([
+  o()
+], a.prototype, "saveLabel", 2);
+a = c([
+  v("ai-consent-manager")
+], a);
+export {
+  a as AiConsentManager
+};
+//# sourceMappingURL=ai-consent-manager.js.map

package/dist/components/ai-consent-manager/ai-consent-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-consent-manager.js","sources":["../../../src/components/ai-consent-manager/ai-consent-manager.ts"],"sourcesContent":["/**\n * @element ai-consent-manager\n * Consent management with grouped toggles, required items, and Accept/Reject/Save actions.\n *\n * @fires {CustomEvent<{id: string, checked: boolean}>} ai-consent-change\n * @fires {CustomEvent<{consents: Record<string, boolean>}>} ai-consent-save\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface ConsentItem {\n  id: string;\n  label: string;\n  description: string;\n  required?: boolean;\n  checked?: boolean;\n  category?: string;\n}\n\n@customElement('ai-consent-manager')\nexport class AiConsentManager 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-border-radius-150);\n      overflow: hidden;\n    }\n\n    .header {\n      display: flex; align-items: center; gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n    }\n    .header-icon {\n      width: var(--cg-spacing-20); height: var(--cg-spacing-20);\n      color: var(--cg-color-surface-base-text); flex-shrink: 0;\n    }\n    .header-title {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .category-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      padding: var(--cg-spacing-12) var(--cg-spacing-20) var(--cg-spacing-4);\n    }\n\n    .items { padding: var(--cg-spacing-8) var(--cg-spacing-20); }\n\n    .item {\n      display: flex; align-items: flex-start; gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) 0;\n    }\n\n    .item-content { flex: 1; min-width: 0; }\n    .item-label {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n      display: flex; align-items: center; gap: var(--cg-spacing-6);\n    }\n    .item-description {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n      margin-top: var(--cg-spacing-2);\n    }\n\n    /* ── Switch alignment ── */\n    .item cg-switch {\n      flex-shrink: 0;\n      margin-top: var(--cg-spacing-2);\n    }\n\n    /* ── Footer ── */\n    .footer {\n      display: flex; align-items: center; gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-20) var(--cg-spacing-16);\n      flex-wrap: wrap;\n    }\n    .footer-spacer { flex: 1; }\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-border-radius-150); }\n\n  `];\n\n  @property({ type: Array }) consents: ConsentItem[] = [];\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property() override title = 'Consent Settings';\n  @property() acceptAllLabel = 'Accept All';\n  @property() rejectAllLabel = 'Reject All';\n  @property() saveLabel = 'Save Preferences';\n\n  private _toggleConsent(id: string, required: boolean) {\n    if (required) return;\n    this.consents = this.consents.map(c => c.id === id ? { ...c, checked: !c.checked } : c);\n    const item = this.consents.find(c => c.id === id);\n    this.dispatchEvent(new CustomEvent('ai-consent-change', { bubbles: true, composed: true, detail: { id, checked: item?.checked ?? false } }));\n    this.requestUpdate();\n  }\n\n  private _acceptAll() {\n    this.consents = this.consents.map(c => ({ ...c, checked: true }));\n    this.requestUpdate();\n    this._save();\n  }\n\n  private _rejectAll() {\n    this.consents = this.consents.map(c => c.required ? c : { ...c, checked: false });\n    this.requestUpdate();\n    this._save();\n  }\n\n  private _save() {\n    const result: Record<string, boolean> = {};\n    for (const c of this.consents) result[c.id] = c.checked ?? false;\n    this.dispatchEvent(new CustomEvent('ai-consent-save', { bubbles: true, composed: true, detail: { consents: result } }));\n  }\n\n  private _getCategories(): string[] {\n    return [...new Set(this.consents.map(c => c.category || ''))];\n  }\n\n  private _renderItem(c: ConsentItem) {\n    return html`\n      <div class=\"item\">\n        <div class=\"item-content\">\n          <div class=\"item-label\">\n            ${c.label}\n            ${c.required ? html`<cg-badge label=\"Required\" variant=\"warning\" size=\"sm\"></cg-badge>` : nothing}\n          </div>\n          <div class=\"item-description\">${c.description}</div>\n        </div>\n        <cg-switch\n          ?checked=${c.checked || c.required}\n          ?disabled=${c.required}\n          @cg-change=${() => this._toggleConsent(c.id, !!c.required)}\n        ></cg-switch>\n      </div>\n    `;\n  }\n\n  override render() {\n    if (!this.consents.length) return nothing;\n    const categories = this._getCategories();\n    const hasCategories = categories.length > 1 || (categories.length === 1 && categories[0] !== '');\n\n    return html`\n      <div class=\"panel\" role=\"region\" aria-label=\"${this.title}\">\n        <div class=\"header\">\n          <svg class=\"header-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/></svg>\n          <span class=\"header-title\">${this.title}</span>\n        </div>\n\n        ${hasCategories\n          ? categories.map(cat => html`\n              ${cat ? html`<div class=\"category-label\">${cat}</div>` : nothing}\n              <div class=\"items\">${this.consents.filter(c => (c.category || '') === cat).map(c => this._renderItem(c))}</div>\n            `)\n          : html`<div class=\"items\">${this.consents.map(c => this._renderItem(c))}</div>`}\n\n        <div class=\"footer\">\n          <cg-button variant=\"tertiary\" size=\"sm\" @click=${this._rejectAll}>${this.rejectAllLabel}</cg-button>\n          <cg-button variant=\"secondary\" size=\"sm\" @click=${this._acceptAll}>${this.acceptAllLabel}</cg-button>\n          <span class=\"footer-spacer\"></span>\n          <cg-button variant=\"primary\" size=\"sm\" @click=${this._save}>${this.saveLabel}</cg-button>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiConsentManager","LitElement","id","required","c","item","result","html","nothing","categories","hasCategories","cat","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-context-window/ai-context-window.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, nothing } from 'lit';
+export interface ContextSegment {
+    label: string;
+    tokens: number;
+    color?: string;
+}
+export declare class AiContextWindow extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    total: number;
+    segments: ContextSegment[];
+    cached: number;
+    private _defaultColors;
+    private get _usedTokens();
+    private get _usagePercent();
+    private get _statusClass();
+    private _formatTokens;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}
+//# sourceMappingURL=ai-context-window.d.ts.map

package/dist/components/ai-context-window/ai-context-window.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-context-window.d.ts","sourceRoot":"","sources":["../../../src/components/ai-context-window/ai-context-window.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BAkGnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7C,KAAK,SAAU;IAChB,QAAQ,EAAE,cAAc,EAAE,CAAM;IAC/B,MAAM,SAAK;IAEvC,OAAO,CAAC,cAAc,CAMpB;IAEF,OAAO,KAAK,WAAW,GAEtB;IAED,OAAO,KAAK,aAAa,GAExB;IAED,OAAO,KAAK,YAAY,GAIvB;IAED,OAAO,CAAC,aAAa;IAKZ,MAAM;CAsDhB"}

package/dist/components/ai-context-window/ai-context-window.js

@@ -0,0 +1,201 @@
+import { css as u, LitElement as v, nothing as g, html as i } from "lit";
+import { property as c, customElement as h } from "lit/decorators.js";
+import { h as p, r as f } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, n = (t, r, a, o) => {
+  for (var e = o > 1 ? void 0 : o ? b(r, a) : r, d = t.length - 1, l; d >= 0; d--)
+    (l = t[d]) && (e = (o ? l(r, a, e) : l(e)) || e);
+  return o && e && m(r, a, e), e;
+};
+let s = class extends v {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.total = 128e3, this.segments = [], this.cached = 0, this._defaultColors = [
+      "var(--cg-color-action-primary-background-default)",
+      "var(--cg-color-status-info-text-default)",
+      "var(--cg-color-status-warning-text-default)",
+      "var(--cg-color-status-success-text-default)",
+      "var(--cg-color-status-error-text-default)"
+    ];
+  }
+  get _usedTokens() {
+    return this.segments.reduce((t, r) => t + r.tokens, 0);
+  }
+  get _usagePercent() {
+    return this.total > 0 ? this._usedTokens / this.total * 100 : 0;
+  }
+  get _statusClass() {
+    return this._usagePercent >= 95 ? "danger" : this._usagePercent >= 80 ? "warning" : "";
+  }
+  _formatTokens(t) {
+    return t >= 1e3 ? `${(t / 1e3).toFixed(1)}k` : String(t);
+  }
+  render() {
+    if (this.total <= 0) return g;
+    const t = Math.max(0, this.total - this._usedTokens);
+    return i`
+      <div class="container" role="figure" aria-label="Context window: ${this._formatTokens(this._usedTokens)} of ${this._formatTokens(this.total)} tokens">
+        <div class="header">
+          <span class="title">Context Window</span>
+          <span class="total ${this._statusClass}">
+            ${this._formatTokens(this._usedTokens)} / ${this._formatTokens(this.total)}
+            (${Math.round(this._usagePercent)}%)
+          </span>
+        </div>
+
+        <div class="bar">
+          ${this.segments.map((r, a) => {
+      const o = r.tokens / this.total * 100, e = r.color || this._defaultColors[a % this._defaultColors.length];
+      return i`
+              <div class="segment"
+                style="width: ${o}%; background: ${e};"
+                data-tooltip="${r.label}: ${this._formatTokens(r.tokens)}"
+                @click=${() => this.dispatchEvent(new CustomEvent("ai-context-segment-click", { bubbles: !0, composed: !0, detail: { label: r.label, tokens: r.tokens } }))}></div>
+            `;
+    })}
+        </div>
+
+        <div class="legend">
+          ${this.segments.map((r, a) => {
+      const o = r.color || this._defaultColors[a % this._defaultColors.length];
+      return i`
+              <div class="legend-item">
+                <div class="legend-dot" style="background: ${o};"></div>
+                <span>${r.label}</span>
+                <span class="legend-tokens">${this._formatTokens(r.tokens)}</span>
+              </div>
+            `;
+    })}
+          <div class="legend-item">
+            <div class="legend-dot" style="background: var(--cg-color-surface-cards-border);"></div>
+            <span>Free</span>
+            <span class="legend-tokens">${this._formatTokens(t)}</span>
+          </div>
+        </div>
+
+        ${this.cached > 0 ? i`
+          <div class="cache-row">
+            <span class="cache-icon"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg></span>
+            <span>${this._formatTokens(this.cached)} cached</span>
+          </div>
+        ` : g}
+      </div>
+    `;
+  }
+};
+s.styles = [p, f, u`
+    .container {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      padding: var(--cg-spacing-24);
+    }
+
+    .header {
+      display: flex; justify-content: space-between; align-items: center;
+      margin-bottom: var(--cg-spacing-12);
+    }
+    .title {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-container-outlined);
+      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);
+    }
+    .total {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);
+      font-family: var(--cg-font-family-mono);
+      color: var(--cg-color-surface-container-outlined);
+    }
+    .total.warning { color: var(--cg-color-status-warning-text-default); }
+    .total.danger { color: var(--cg-color-status-error-text-default); }
+
+    /* ── Segmented bar ── */
+    .bar {
+      height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-cards-border);
+      display: flex;
+      overflow: hidden;
+      margin-bottom: var(--cg-spacing-16);
+    }
+    .segment {
+      height: 100%;
+      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+      cursor: pointer;
+      position: relative;
+    }
+    .segment:first-child { border-radius: var(--cg-border-radius-full) 0 0 var(--cg-border-radius-full); }
+    .segment:last-child { border-radius: 0 var(--cg-border-radius-full) var(--cg-border-radius-full) 0; }
+    .segment:hover { opacity: 0.8; }
+
+    /* Tooltip */
+    .segment:hover::after {
+      content: attr(data-tooltip);
+      position: absolute;
+      bottom: calc(100% + var(--cg-spacing-6));
+      left: 50%;
+      transform: translateX(-50%);
+      background: var(--cg-color-tooltip-background);
+      color: var(--cg-color-tooltip-text);
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-100);
+      font-size: var(--cg-font-size-xs);
+      white-space: nowrap;
+      z-index: 10;
+      pointer-events: none;
+    }
+
+    /* ── Legend ── */
+    .legend {
+      display: flex; gap: var(--cg-spacing-20); flex-wrap: wrap;
+    }
+    .legend-item {
+      display: flex; align-items: center; gap: var(--cg-spacing-4);
+      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);
+    }
+    .legend-dot {
+      width: var(--cg-spacing-8); height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full); flex-shrink: 0;
+    }
+    .legend-tokens {
+      font-family: var(--cg-font-family-mono);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    /* ── Cache ── */
+    .cache-row {
+      display: flex; align-items: center; gap: var(--cg-spacing-8);
+      margin-top: var(--cg-spacing-12); padding-top: var(--cg-spacing-12);
+      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);
+    }
+    .cache-icon {
+      color: var(--cg-color-action-primary-background-default);
+      width: var(--cg-spacing-12); height: var(--cg-spacing-12);
+      display: flex;
+    }
+    .cache-icon svg { width: 100%; height: 100%; }
+
+    /* ── Rounded ── */
+    :host([rounded="none"]) .container { border-radius: 0; }
+    :host([rounded="sm"]) .container { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .container { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .container { border-radius: var(--cg-border-radius-150); }
+  `];
+n([
+  c({ reflect: !0 })
+], s.prototype, "rounded", 2);
+n([
+  c({ type: Number })
+], s.prototype, "total", 2);
+n([
+  c({ type: Array })
+], s.prototype, "segments", 2);
+n([
+  c({ type: Number })
+], s.prototype, "cached", 2);
+s = n([
+  h("ai-context-window")
+], s);
+export {
+  s as AiContextWindow
+};
+//# sourceMappingURL=ai-context-window.js.map

package/dist/components/ai-context-window/ai-context-window.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-context-window.js","sources":["../../../src/components/ai-context-window/ai-context-window.ts"],"sourcesContent":["/**\n * @element ai-context-window\n * Token budget bar showing context window usage with color segments and cache indicator.\n *\n * @fires {CustomEvent<{label: string, tokens: number}>} ai-context-segment-click\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface ContextSegment {\n  label: string;\n  tokens: number;\n  color?: string;\n}\n\n@customElement('ai-context-window')\nexport class AiContextWindow extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .container {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      padding: var(--cg-spacing-24);\n    }\n\n    .header {\n      display: flex; justify-content: space-between; align-items: center;\n      margin-bottom: var(--cg-spacing-12);\n    }\n    .title {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .total {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .total.warning { color: var(--cg-color-status-warning-text-default); }\n    .total.danger { color: var(--cg-color-status-error-text-default); }\n\n    /* ── Segmented bar ── */\n    .bar {\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-cards-border);\n      display: flex;\n      overflow: hidden;\n      margin-bottom: var(--cg-spacing-16);\n    }\n    .segment {\n      height: 100%;\n      transition: width var(--cg-transition-duration-slow) var(--cg-transition-easing-default);\n      cursor: pointer;\n      position: relative;\n    }\n    .segment:first-child { border-radius: var(--cg-border-radius-full) 0 0 var(--cg-border-radius-full); }\n    .segment:last-child { border-radius: 0 var(--cg-border-radius-full) var(--cg-border-radius-full) 0; }\n    .segment:hover { opacity: 0.8; }\n\n    /* Tooltip */\n    .segment:hover::after {\n      content: attr(data-tooltip);\n      position: absolute;\n      bottom: calc(100% + var(--cg-spacing-6));\n      left: 50%;\n      transform: translateX(-50%);\n      background: var(--cg-color-tooltip-background);\n      color: var(--cg-color-tooltip-text);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-100);\n      font-size: var(--cg-font-size-xs);\n      white-space: nowrap;\n      z-index: 10;\n      pointer-events: none;\n    }\n\n    /* ── Legend ── */\n    .legend {\n      display: flex; gap: var(--cg-spacing-20); flex-wrap: wrap;\n    }\n    .legend-item {\n      display: flex; align-items: center; gap: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);\n    }\n    .legend-dot {\n      width: var(--cg-spacing-8); height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full); flex-shrink: 0;\n    }\n    .legend-tokens {\n      font-family: var(--cg-font-family-mono);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* ── Cache ── */\n    .cache-row {\n      display: flex; align-items: center; gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-12); padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      font-size: var(--cg-font-size-xs); color: var(--cg-color-surface-container-outlined);\n    }\n    .cache-icon {\n      color: var(--cg-color-action-primary-background-default);\n      width: var(--cg-spacing-12); height: var(--cg-spacing-12);\n      display: flex;\n    }\n    .cache-icon svg { width: 100%; height: 100%; }\n\n    /* ── Rounded ── */\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  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Number }) total = 128000;\n  @property({ type: Array }) segments: ContextSegment[] = [];\n  @property({ type: Number }) cached = 0;\n\n  private _defaultColors = [\n    'var(--cg-color-action-primary-background-default)',\n    'var(--cg-color-status-info-text-default)',\n    'var(--cg-color-status-warning-text-default)',\n    'var(--cg-color-status-success-text-default)',\n    'var(--cg-color-status-error-text-default)',\n  ];\n\n  private get _usedTokens(): number {\n    return this.segments.reduce((sum, s) => sum + s.tokens, 0);\n  }\n\n  private get _usagePercent(): number {\n    return this.total > 0 ? (this._usedTokens / this.total) * 100 : 0;\n  }\n\n  private get _statusClass(): string {\n    if (this._usagePercent >= 95) return 'danger';\n    if (this._usagePercent >= 80) return 'warning';\n    return '';\n  }\n\n  private _formatTokens(n: number): string {\n    if (n >= 1000) return `${(n / 1000).toFixed(1)}k`;\n    return String(n);\n  }\n\n  override render() {\n    if (this.total <= 0) return nothing;\n    const remaining = Math.max(0, this.total - this._usedTokens);\n\n    return html`\n      <div class=\"container\" role=\"figure\" aria-label=\"Context window: ${this._formatTokens(this._usedTokens)} of ${this._formatTokens(this.total)} tokens\">\n        <div class=\"header\">\n          <span class=\"title\">Context Window</span>\n          <span class=\"total ${this._statusClass}\">\n            ${this._formatTokens(this._usedTokens)} / ${this._formatTokens(this.total)}\n            (${Math.round(this._usagePercent)}%)\n          </span>\n        </div>\n\n        <div class=\"bar\">\n          ${this.segments.map((seg, i) => {\n            const pct = (seg.tokens / this.total) * 100;\n            const color = seg.color || this._defaultColors[i % this._defaultColors.length];\n            return html`\n              <div class=\"segment\"\n                style=\"width: ${pct}%; background: ${color};\"\n                data-tooltip=\"${seg.label}: ${this._formatTokens(seg.tokens)}\"\n                @click=${() => this.dispatchEvent(new CustomEvent('ai-context-segment-click', { bubbles: true, composed: true, detail: { label: seg.label, tokens: seg.tokens } }))}></div>\n            `;\n          })}\n        </div>\n\n        <div class=\"legend\">\n          ${this.segments.map((seg, i) => {\n            const color = seg.color || this._defaultColors[i % this._defaultColors.length];\n            return html`\n              <div class=\"legend-item\">\n                <div class=\"legend-dot\" style=\"background: ${color};\"></div>\n                <span>${seg.label}</span>\n                <span class=\"legend-tokens\">${this._formatTokens(seg.tokens)}</span>\n              </div>\n            `;\n          })}\n          <div class=\"legend-item\">\n            <div class=\"legend-dot\" style=\"background: var(--cg-color-surface-cards-border);\"></div>\n            <span>Free</span>\n            <span class=\"legend-tokens\">${this._formatTokens(remaining)}</span>\n          </div>\n        </div>\n\n        ${this.cached > 0 ? html`\n          <div class=\"cache-row\">\n            <span class=\"cache-icon\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M13 2L3 14h9l-1 8 10-12h-9l1-8z\"/></svg></span>\n            <span>${this._formatTokens(this.cached)} cached</span>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiContextWindow","LitElement","sum","s","n","nothing","remaining","html","seg","i","pct","color","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-copy-button/ai-copy-button.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+export declare class AiCopyButton extends LitElement {
+    static styles: import('lit').CSSResult[];
+    value: string;
+    label: string;
+    variant: 'default' | 'minimal' | 'icon-only';
+    timeout: number;
+    disabled: boolean;
+    private _copied;
+    private _error;
+    private _timer;
+    disconnectedCallback(): void;
+    private _handleCopy;
+    private get _icon();
+    private get _displayLabel();
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-copy-button': AiCopyButton;
+    }
+}
+//# sourceMappingURL=ai-copy-button.d.ts.map

package/dist/components/ai-copy-button/ai-copy-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-copy-button.d.ts","sourceRoot":"","sources":["../../../src/components/ai-copy-button/ai-copy-button.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAoGnB;IACyB,KAAK,SAAM;IACX,KAAK,SAAU;IACA,OAAO,EAAE,SAAS,GAAG,SAAS,GAAG,WAAW,CAAa;IACxE,OAAO,SAAQ;IACC,QAAQ,UAAS;IAEpD,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,MAAM,CAAS;IAEhC,OAAO,CAAC,MAAM,CAA8C;IAEnD,oBAAoB,IAAI,IAAI;YAKvB,WAAW;IA4CzB,OAAO,KAAK,KAAK,GAGhB;IAED,OAAO,KAAK,aAAa,GAGxB;IAEQ,MAAM;CAgBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/components/ai-copy-button/ai-copy-button.js

@@ -0,0 +1,193 @@
+import { css as p, LitElement as u, html as h } from "lit";
+import { property as o, state as d, customElement as v } from "lit/decorators.js";
+import { a as f, r as m, f as g } from "../../chunks/premium.css-9I4kHrsl.js";
+var b = Object.defineProperty, y = Object.getOwnPropertyDescriptor, r = (t, i, n, s) => {
+  for (var a = s > 1 ? void 0 : s ? y(i, n) : i, c = t.length - 1, l; c >= 0; c--)
+    (l = t[c]) && (a = (s ? l(i, n, a) : l(a)) || a);
+  return s && a && b(i, n, a), a;
+};
+let e = class extends u {
+  constructor() {
+    super(...arguments), this.value = "", this.label = "Copy", this.variant = "default", this.timeout = 2e3, this.disabled = !1, this._copied = !1, this._error = !1, this._timer = null;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._timer && clearTimeout(this._timer);
+  }
+  async _handleCopy() {
+    if (!(!this.value || this.disabled))
+      try {
+        if (navigator.clipboard)
+          await navigator.clipboard.writeText(this.value);
+        else {
+          const t = document.createElement("textarea");
+          t.value = this.value, t.style.position = "fixed", t.style.opacity = "0", document.body.appendChild(t), t.select(), document.execCommand("copy"), document.body.removeChild(t);
+        }
+        this._copied = !0, this.dispatchEvent(new CustomEvent("ai-copy-success", {
+          detail: { value: this.value },
+          bubbles: !0,
+          composed: !0
+        })), this._timer && clearTimeout(this._timer), this._timer = setTimeout(() => {
+          this._copied = !1, this._timer = null;
+        }, this.timeout);
+      } catch (t) {
+        this._error = !0, this.dispatchEvent(new CustomEvent("ai-copy-error", {
+          detail: { error: t instanceof Error ? t.message : "Copy failed" },
+          bubbles: !0,
+          composed: !0
+        })), this._timer && clearTimeout(this._timer), this._timer = setTimeout(() => {
+          this._error = !1, this._timer = null;
+        }, this.timeout);
+      }
+  }
+  get _icon() {
+    return this._error ? "✗" : this._copied ? "✓" : "⎘";
+  }
+  get _displayLabel() {
+    return this._error ? "Failed" : this._copied ? "Copied!" : this.label;
+  }
+  render() {
+    return h`
+      <button
+        class="copy-btn"
+        ?disabled=${this.disabled}
+        data-copied=${this._copied ? "true" : "false"}
+        data-error=${this._error ? "true" : "false"}
+        aria-label=${this._displayLabel}
+        aria-disabled=${this.disabled ? "true" : "false"}
+        @click=${this._handleCopy}
+      >
+        <span class="icon">${this._icon}</span>
+        <span class="label-text">${this._displayLabel}</span>
+      </button>
+    `;
+  }
+};
+e.styles = [f, m, g, p`
+    :host {
+      animation: fadeSlideIn 200ms var(--cg-transition-easing-ease-out) both;
+    }
+    :host([hidden]) { display: none; }
+
+    .copy-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      font-family: inherit;
+      font-weight: var(--cg-font-weight-medium);
+      cursor: pointer;
+      border: none;
+      border-radius: var(--cg-border-radius-100);
+      transition: background var(--cg-transition-duration-default) var(--cg-transition-easing-default), color var(--cg-transition-duration-default) var(--cg-transition-easing-default), transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      white-space: nowrap;
+    }
+    .copy-btn:active {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .copy-btn:focus-visible {
+      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
+    }
+
+    /* Default variant */
+    :host([variant="default"]) .copy-btn {
+      padding: var(--cg-spacing-6) var(--cg-spacing-12);
+      font-size: var(--cg-font-size-sm);
+      background: var(--cg-overlay-dark-subtle);
+      color: var(--cg-color-input-text-placeholder);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    :host([variant="default"]) .copy-btn:hover {
+      background: var(--cg-overlay-dark-strong);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    /* Minimal variant */
+    :host([variant="minimal"]) .copy-btn {
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+      background: none;
+      color: var(--cg-color-input-text-placeholder);
+    }
+    :host([variant="minimal"]) .copy-btn:hover {
+      color: var(--cg-color-surface-base-text);
+    }
+
+    /* Icon-only variant */
+    :host([variant="icon-only"]) .copy-btn {
+      padding: var(--cg-spacing-4);
+      font-size: var(--cg-font-size-sm);
+      background: none;
+      color: var(--cg-color-input-text-placeholder);
+      line-height: 1;
+    }
+    :host([variant="icon-only"]) .copy-btn:hover {
+      color: var(--cg-color-surface-base-text);
+    }
+    :host([variant="icon-only"]) .label-text {
+      display: none;
+    }
+
+    /* Copied (success) state */
+    .copy-btn[data-copied="true"] {
+      color: var(--cg-color-status-success-text) !important;
+    }
+
+    /* Error state */
+    .copy-btn[data-error="true"] {
+      color: var(--cg-color-status-error-text) !important;
+      animation: error-shake var(--cg-transition-duration-slow) var(--cg-transition-easing-default);
+    }
+    @keyframes error-shake {
+      0%, 100% { transform: translateX(0); }
+      20% { transform: translateX(-3px); }
+      40% { transform: translateX(3px); }
+      60% { transform: translateX(-2px); }
+      80% { transform: translateX(2px); }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      .copy-btn[data-error="true"] {
+        animation: none;
+      }
+    }
+
+    /* Disabled state */
+    .copy-btn:disabled {
+      opacity: 0.5;
+      cursor: var(--cg-cursor-not-allowed);
+      pointer-events: none;
+    }
+
+    .icon {
+      display: inline-flex;
+      font-size: inherit;
+      line-height: 1;
+    }
+  `];
+r([
+  o({ type: String })
+], e.prototype, "value", 2);
+r([
+  o({ type: String })
+], e.prototype, "label", 2);
+r([
+  o({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+r([
+  o({ type: Number })
+], e.prototype, "timeout", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled", 2);
+r([
+  d()
+], e.prototype, "_copied", 2);
+r([
+  d()
+], e.prototype, "_error", 2);
+e = r([
+  v("ai-copy-button")
+], e);
+export {
+  e as AiCopyButton
+};
+//# sourceMappingURL=ai-copy-button.js.map