@cognivo/components 0.8.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-annotation.js","sources":["../../../src/components/ai-annotation/ai-annotation.ts"],"sourcesContent":["/**\n * @element ai-annotation\n * Text annotation layer with colored highlights, label toolbar, and editable selection mode.\n *\n * @example\n * ```html\n * <ai-annotation\n *   content=\"Claude is made by Anthropic in San Francisco.\"\n *   .annotations=${[{start:0, end:6, label:'Person', confidence:0.95}]}\n *   .labels=${[{name:'Person', color:'#60a5fa'},{name:'Organization', color:'#4ade80'}]}\n *   editable\n * ></ai-annotation>\n * ```\n *\n * @fires {CustomEvent<{annotation: Annotation}>} ai-annotation-select - Annotation span clicked\n * @fires {CustomEvent<{annotation: Annotation}>} ai-annotation-remove - Annotation removed\n * @fires {CustomEvent<{annotation: Annotation, text: string}>} ai-annotation-add - New annotation created via selection\n *\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Focus ring color\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\ninterface Annotation {\n  start: number;\n  end: number;\n  label: string;\n  confidence?: number;\n}\n\ninterface LabelDef {\n  name: string;\n  color: string;\n}\n\n@customElement('ai-annotation')\nexport class AiAnnotation extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;\n    }\n\n    .container {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-component-card-radius);\n      overflow: hidden;\n    }\n\n    /* Toolbar — compact, no label text */\n    .toolbar {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-12) var(--cg-spacing-20);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      flex-wrap: wrap;\n    }\n    .label-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) solid transparent;\n      background: none;\n      font: inherit;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      cursor: pointer;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .label-btn:hover { background: var(--cg-overlay-dark-subtle); }\n    .label-btn.selected { border-color: currentColor; background: var(--cg-overlay-dark-subtle); }\n    .label-dot {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n    }\n\n    .stats {\n      margin-left: auto;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      font-family: var(--cg-font-family-mono);\n    }\n\n    /* Content */\n    .content {\n      padding: var(--cg-spacing-20) var(--cg-spacing-24);\n      font-size: var(--cg-font-size-sm);\n      line-height: var(--cg-line-height-relaxed);\n      color: var(--cg-color-surface-base-text);\n      user-select: text;\n      cursor: text;\n    }\n\n    .annotated-span {\n      cursor: pointer;\n      border-bottom: var(--cg-border-width-100) solid;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .annotated-span:hover { opacity: 0.7; }\n    .annotated-span:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    /* Inline tag — shows on click */\n    .annotation-tag {\n      display: inline;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      padding: var(--cg-spacing-1) var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n      margin-left: var(--cg-spacing-2);\n      vertical-align: middle;\n      line-height: 1;\n    }\n\n    /* Empty */\n    .empty {\n      padding: var(--cg-spacing-24);\n      text-align: center;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    /* Reduced motion: disable entrance animation, show labels immediately */\n    @media (prefers-reduced-motion: reduce) {\n      :host {\n        animation: none !important;\n      }\n      .annotation-label {\n        opacity: 1;\n        transition: none !important;\n      }\n      .annotated-span {\n        transition: none !important;\n      }\n    }\n  `];\n  /** Plain text content */\n  @property({ type: String }) content: string = '';\n\n  /** Existing annotations */\n  @property({ type: Array }) annotations: Annotation[] = [];\n\n  /** Available label definitions */\n  @property({ type: Array }) labels: LabelDef[] = [\n    { name: 'Person', color: '#60a5fa' },\n    { name: 'Organization', color: '#4ade80' },\n    { name: 'Location', color: '#fbbf24' },\n    { name: 'Date', color: '#f87171' },\n    { name: 'Concept', color: '#dfff61' },\n  ];\n\n  /** Allow creating new annotations */\n  @property({ type: Boolean }) editable: boolean = false;\n\n  @state() private _selectedLabel: string = '';\n  @state() private _activeAnnotation: Annotation | null = null;\n\n  private _handleAnnotationClick(annotation: Annotation) {\n    this._activeAnnotation = this._activeAnnotation === annotation ? null : annotation;\n    this.dispatchEvent(new CustomEvent('ai-annotation-select', {\n      bubbles: true, composed: true,\n      detail: { annotation },\n    }));\n  }\n\n  private _handleRemove(annotation: Annotation, e: Event) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-annotation-remove', {\n      bubbles: true, composed: true,\n      detail: { annotation },\n    }));\n  }\n\n  private _handleMouseUp() {\n    if (!this.editable || !this._selectedLabel) return;\n    // Shadow DOM doesn't support getSelection — use window\n    const sel = window.getSelection();\n    if (!sel || sel.isCollapsed) return;\n\n    const text = sel.toString();\n    if (!text.trim()) return;\n\n    // Find the selected text position using range offset within our content div\n    const range = sel.getRangeAt(0);\n    const contentEl = this.shadowRoot?.querySelector('.content');\n    if (!contentEl || !contentEl.contains(range.startContainer)) return;\n\n    // Walk text nodes to find character offset\n    const walker = document.createTreeWalker(contentEl, NodeFilter.SHOW_TEXT);\n    let charOffset = 0;\n    let found = false;\n    while (walker.nextNode()) {\n      if (walker.currentNode === range.startContainer) {\n        charOffset += range.startOffset;\n        found = true;\n        break;\n      }\n      charOffset += (walker.currentNode.textContent?.length || 0);\n    }\n    if (!found) return;\n\n    const annotation: Annotation = {\n      start: charOffset,\n      end: charOffset + text.length,\n      label: this._selectedLabel,\n    };\n\n    this.dispatchEvent(new CustomEvent('ai-annotation-add', {\n      bubbles: true, composed: true,\n      detail: { annotation, text },\n    }));\n\n    sel.removeAllRanges();\n  }\n\n  /** Sanitize color to prevent CSS injection — only allow hex, rgb, hsl, named colors */\n  private _sanitizeColor(color: string): string {\n    if (/^#[0-9a-fA-F]{3,8}$/.test(color)) return color;\n    if (/^rgb\\(\\d{1,3},\\s*\\d{1,3},\\s*\\d{1,3}\\)$/.test(color)) return color;\n    if (/^[a-zA-Z]+$/.test(color)) return color; // named colors\n    return '#a1a1aa'; // fallback\n  }\n\n  private _getLabelColor(name: string): string {\n    const raw = this.labels.find(l => l.name === name)?.color || '#a1a1aa';\n    return this._sanitizeColor(raw);\n  }\n\n  private _renderAnnotatedContent() {\n    if (!this.content) return html`<div class=\"empty\">No content to annotate</div>`;\n    if (this.annotations.length === 0) return this.content;\n\n    // Sort annotations by start position, handle overlaps by taking the first\n    const sorted = [...this.annotations]\n      .sort((a, b) => a.start - b.start || b.end - a.end);\n\n    // Remove overlapping — keep first (earlier start or longer span)\n    const nonOverlapping: Annotation[] = [];\n    let lastEnd = -1;\n    for (const ann of sorted) {\n      if (ann.start >= lastEnd) {\n        nonOverlapping.push(ann);\n        lastEnd = ann.end;\n      }\n    }\n\n    const fragments: (string | { text: string; annotation: Annotation })[] = [];\n    let cursor = 0;\n\n    for (const ann of nonOverlapping) {\n      // Clamp to content bounds\n      const start = Math.max(ann.start, cursor);\n      const end = Math.min(ann.end, this.content.length);\n      if (start >= end) continue;\n\n      if (start > cursor) {\n        fragments.push(this.content.slice(cursor, start));\n      }\n      fragments.push({\n        text: this.content.slice(start, end),\n        annotation: ann,\n      });\n      cursor = end;\n    }\n    if (cursor < this.content.length) {\n      fragments.push(this.content.slice(cursor));\n    }\n\n    return fragments.map(f => {\n      if (typeof f === 'string') return f;\n      const color = this._getLabelColor(f.annotation.label);\n      const opacity = f.annotation.confidence ?? 1;\n      const isActive = this._activeAnnotation === f.annotation;\n      return html`<span class=\"annotated-span\" tabindex=\"0\" role=\"note\"\n          aria-label=\"${f.annotation.label}: ${f.text}\"\n          style=\"border-color: ${color}\"\n          @click=${() => this._handleAnnotationClick(f.annotation)}>${f.text}</span>${isActive ? html`<span class=\"annotation-tag\" style=\"background: ${color}; color: #000;\">${f.annotation.label}${f.annotation.confidence !== undefined ? html` · ${Math.round(f.annotation.confidence * 100)}%` : nothing}</span>` : nothing}`;\n    });\n  }\n\n  override render() {\n    return html`\n      <div class=\"container\" role=\"document\" aria-label=\"Annotated text\">\n        ${this.editable || this.labels.length > 0 ? html`\n          <div class=\"toolbar\">\n            ${this.labels.map(l => html`\n              <button class=\"label-btn ${this._selectedLabel === l.name ? 'selected' : ''}\"\n                style=\"color: ${l.color}\"\n                @click=${() => { this._selectedLabel = this._selectedLabel === l.name ? '' : l.name; }}>\n                <span class=\"label-dot\" style=\"background: ${l.color}\"></span>\n                ${l.name}\n              </button>\n            `)}\n            <span class=\"stats\">${this.annotations.length} annotation${this.annotations.length !== 1 ? 's' : ''}</span>\n          </div>\n        ` : nothing}\n\n        <div class=\"content\" @mouseup=${this._handleMouseUp}>\n          ${this._renderAnnotatedContent()}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiAnnotation","LitElement","annotation","e","sel","text","range","contentEl","walker","charOffset","found","color","name","raw","l","html","sorted","a","b","nonOverlapping","lastEnd","ann","fragments","cursor","start","end","f","isActive","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-api-key-manager/ai-api-key-manager.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+export interface ApiKeyEntry {
+    id: string;
+    name: string;
+    prefix: string;
+    createdAt: string;
+    lastUsed?: string;
+    status: 'active' | 'revoked';
+}
+export declare class AiApiKeyManager extends LitElement {
+    static styles: import('lit').CSSResult[];
+    keys: ApiKeyEntry[];
+    maxKeys: number;
+    private _copiedId;
+    private _announcement;
+    private _copyTimer;
+    disconnectedCallback(): void;
+    private _onCreate;
+    private _onRevoke;
+    private _onDelete;
+    private _onCopy;
+    private _announce;
+    /**
+     * Format an ISO date as a relative-time string ("3 days ago", "in 2 weeks").
+     * Falls back to the raw string for non-ISO inputs.
+     */
+    private _relativeTime;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-api-key-manager': AiApiKeyManager;
+    }
+}
+//# sourceMappingURL=ai-api-key-manager.d.ts.map

package/dist/components/ai-api-key-manager/ai-api-key-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-api-key-manager.d.ts","sourceRoot":"","sources":["../../../src/components/ai-api-key-manager/ai-api-key-manager.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,QAAQ,GAAG,SAAS,CAAC;CAC9B;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BA2QnB;IAEwB,IAAI,EAAE,WAAW,EAAE,CAAM;IACD,OAAO,SAAM;IAEvD,OAAO,CAAC,SAAS,CAAuB;IACxC,OAAO,CAAC,aAAa,CAAM;IAEpC,OAAO,CAAC,UAAU,CAAqB;IAE9B,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,SAAS;YAOH,OAAO;IAmBrB,OAAO,CAAC,SAAS;IAKjB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAqBZ,MAAM;CAsFhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}

package/dist/components/ai-api-key-manager/ai-api-key-manager.js

@@ -0,0 +1,443 @@
+import { css as m, LitElement as y, html as n, nothing as h } from "lit";
+import { property as f, state as b, customElement as x } from "lit/decorators.js";
+import { h as k, r as w, f as _ } from "../../chunks/premium.css-9I4kHrsl.js";
+var C = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, g = (e, t, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? $(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (i = (r ? o(t, a, i) : o(i)) || i);
+  return r && i && C(t, a, i), i;
+};
+let l = class extends y {
+  constructor() {
+    super(...arguments), this.keys = [], this.maxKeys = 10, this._copiedId = null, this._announcement = "";
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._copyTimer && clearTimeout(this._copyTimer);
+  }
+  _onCreate() {
+    this.dispatchEvent(new CustomEvent("ai-key-create", {
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _onRevoke(e) {
+    this.dispatchEvent(new CustomEvent("ai-key-revoke", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: e.id, name: e.name }
+    }));
+  }
+  _onDelete(e) {
+    this.dispatchEvent(new CustomEvent("ai-key-delete", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: e.id, name: e.name }
+    }));
+  }
+  async _onCopy(e) {
+    try {
+      await navigator.clipboard.writeText(e.prefix), this._copiedId = e.id, this._announce(`${e.name} key prefix copied to clipboard`), this._copyTimer && clearTimeout(this._copyTimer), this._copyTimer = window.setTimeout(() => {
+        this._copiedId = null, this._copyTimer = void 0;
+      }, 2e3), this.dispatchEvent(new CustomEvent("ai-key-copy", {
+        bubbles: !0,
+        composed: !0,
+        detail: { id: e.id, prefix: e.prefix }
+      }));
+    } catch {
+      this._announce("Copy failed — clipboard unavailable");
+    }
+  }
+  _announce(e) {
+    this._announcement = "", requestAnimationFrame(() => {
+      this._announcement = e;
+    });
+  }
+  /**
+   * Format an ISO date as a relative-time string ("3 days ago", "in 2 weeks").
+   * Falls back to the raw string for non-ISO inputs.
+   */
+  _relativeTime(e) {
+    if (!e) return "";
+    const t = new Date(e);
+    if (isNaN(t.getTime())) return e;
+    const a = t.getTime() - Date.now(), r = Math.abs(a), i = 6e4, s = 60 * i, o = 24 * s, u = 7 * o, p = 30 * o, v = 365 * o;
+    let c, d;
+    r < s ? (c = Math.round(a / i), d = "minute") : r < o ? (c = Math.round(a / s), d = "hour") : r < u ? (c = Math.round(a / o), d = "day") : r < p ? (c = Math.round(a / u), d = "week") : r < v ? (c = Math.round(a / p), d = "month") : (c = Math.round(a / v), d = "year");
+    try {
+      return new Intl.RelativeTimeFormat("en", { numeric: "auto" }).format(c, d);
+    } catch {
+      return e;
+    }
+  }
+  render() {
+    const e = this.keys.length >= this.maxKeys;
+    return n`
+      <div class="header">
+        <div class="header-left">
+          <h3 class="title">API Keys</h3>
+          <span class="count">${this.keys.length} of ${this.maxKeys} keys</span>
+        </div>
+        <button class="create-btn" type="button"
+                ?disabled=${e}
+                @click=${this._onCreate}
+                aria-label=${e ? `Maximum ${this.maxKeys} keys reached` : "Create new API key"}>
+          <svg class="plus-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
+            <path d="M12 5v14M5 12h14"/>
+          </svg>
+          Create key
+        </button>
+      </div>
+
+      ${this.keys.length === 0 ? n`
+        <div class="empty" role="status">No API keys yet — click <strong>Create key</strong> to add one.</div>
+      ` : n`
+        <div class="key-list" role="list" aria-label="API keys">
+          ${this.keys.map((t) => n`
+            <div class="key-item ${t.status === "revoked" ? "revoked" : ""}" role="listitem">
+              <div class="key-info">
+                <div class="key-name">${t.name}</div>
+                <div class="key-prefix-row">
+                  <span class="key-prefix">${t.prefix}••••••••</span>
+                  ${this._copiedId === t.id ? n`<span class="copied-toast" aria-hidden="true">Copied</span>` : h}
+                </div>
+                <div class="key-meta">
+                  <span>Created ${this._relativeTime(t.createdAt)}</span>
+                  ${t.lastUsed ? n`<span>· Last used ${this._relativeTime(t.lastUsed)}</span>` : n`<span>· Never used</span>`}
+                </div>
+              </div>
+
+              <div class="key-side">
+                <span class="status-badge status-${t.status}">
+                  <span class="dot" aria-hidden="true"></span>
+                  ${t.status}
+                </span>
+
+                <div class="actions">
+                  <button class="action-btn" type="button"
+                          @click=${() => this._onCopy(t)}
+                          aria-label="Copy ${t.name} key prefix"
+                          title="Copy prefix">
+                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                      <rect x="9" y="9" width="13" height="13" rx="2"/>
+                      <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
+                    </svg>
+                  </button>
+
+                  ${t.status === "active" ? n`
+                    <button class="action-btn" type="button"
+                            @click=${() => this._onRevoke(t)}
+                            aria-label="Revoke ${t.name} key"
+                            title="Revoke">
+                      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                        <circle cx="12" cy="12" r="9"/>
+                        <path d="M5.6 5.6l12.8 12.8"/>
+                      </svg>
+                    </button>
+                  ` : h}
+
+                  <button class="action-btn danger" type="button"
+                          @click=${() => this._onDelete(t)}
+                          aria-label="Delete ${t.name} key"
+                          title="Delete">
+                    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                      <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M6 6l1 14a2 2 0 002 2h6a2 2 0 002-2l1-14"/>
+                      <path d="M10 11v6M14 11v6"/>
+                    </svg>
+                  </button>
+                </div>
+              </div>
+            </div>
+          `)}
+        </div>
+      `}
+
+      <span class="sr-only" role="status" aria-live="polite" aria-atomic="true">${this._announcement}</span>
+    `;
+  }
+};
+l.styles = [k, w, _, m`
+    :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);
+      /* Longhand padding so a stale shorthand ghost (Lit HMR quirk) can't
+         erase both axes at once. Total = spacing-24 each side. */
+      padding-block: var(--cg-spacing-24);
+      padding-inline: var(--cg-spacing-24);
+      box-shadow: var(--cg-elevation-1);
+      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+    :host([hidden]) { display: none; }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: var(--cg-spacing-16);
+      padding-bottom: var(--cg-spacing-16);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      margin-bottom: var(--cg-spacing-16);
+    }
+
+    .header-left { min-width: 0; }
+
+    .title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      margin: 0;
+    }
+
+    .count {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      font-variant-numeric: tabular-nums;
+    }
+
+    /* ── Create button ── */
+    .create-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      border: var(--cg-border-width-50) solid var(--cg-color-action-primary-border-default);
+      border-radius: var(--cg-border-radius-100);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      cursor: pointer;
+      font-family: inherit;
+      flex-shrink: 0;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .create-btn:hover:not(:disabled) {
+      background: var(--cg-color-action-primary-background-hover);
+    }
+    .create-btn:active:not(:disabled) {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .create-btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .create-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .create-btn .plus-icon {
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+    }
+
+    /* ── Key list ── */
+    .key-list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+    }
+
+    /* Inner card border — uses --cg-color-surface-cards-border, which is
+       theme-aware: gray-300 on light, gray-800 on dark. Subtle and tonally
+       matches the surrounding surface so the card-on-card stays calm.
+       Hover bumps to cards-border-strong for a clearer affordance. */
+    .key-item {
+      display: flex;
+      align-items: stretch;
+      gap: var(--cg-spacing-16);
+      padding: 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);
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .key-item:hover {
+      border-color: var(--cg-color-surface-cards-border-strong);
+    }
+    .key-item.revoked {
+      opacity: 0.7;
+    }
+
+    .key-info {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-2);
+      justify-content: center;
+    }
+
+    /* Right-side column: status pill on top, actions on the bottom. */
+    .key-side {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      justify-content: space-between;
+      gap: var(--cg-spacing-12);
+      flex-shrink: 0;
+    }
+
+    .key-name {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-medium);
+    }
+
+    .key-prefix-row {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      min-width: 0;
+    }
+
+    .key-prefix {
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      letter-spacing: 0.02em;
+    }
+
+    .copied-toast {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-status-success-text-default);
+      font-weight: var(--cg-font-weight-medium);
+      animation: cg-key-pop var(--cg-transition-duration-default) var(--cg-transition-easing-spring) both;
+    }
+    @keyframes cg-key-pop {
+      from { opacity: 0; transform: translateY(2px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+
+    .key-meta {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--cg-spacing-2) var(--cg-spacing-12);
+      font-variant-numeric: tabular-nums;
+    }
+
+    /* ── Status badge with dot ── */
+    .status-badge {
+      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-badge .dot {
+      width: var(--cg-spacing-6);
+      height: var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+      background: currentColor;
+      flex-shrink: 0;
+    }
+    .status-active   { color: var(--cg-color-status-success-text-default); }
+    .status-revoked  { color: var(--cg-color-status-error-text-default); }
+
+    /* Pulse on the active dot — a subtle "alive" signal. */
+    .status-active .dot {
+      animation: cg-key-pulse 2s var(--cg-transition-easing-default) infinite;
+    }
+    @keyframes cg-key-pulse {
+      0%, 100% { opacity: 1; }
+      50%      { opacity: 0.5; }
+    }
+
+    /* ── Action buttons ── */
+    .actions {
+      display: flex;
+      gap: var(--cg-spacing-4);
+      flex-shrink: 0;
+    }
+    .action-btn {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      background: transparent;
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      color: var(--cg-color-input-text-placeholder);
+      cursor: pointer;
+      font-family: inherit;
+      padding: 0;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    /* Extends pointer hit area to ~44px without changing visual size. */
+    .action-btn::before {
+      content: '';
+      position: absolute;
+      inset: calc(-1 * var(--cg-spacing-6));
+    }
+    .action-btn:hover {
+      background: var(--cg-color-action-tertiary-background-hover);
+      color: var(--cg-color-surface-base-text);
+      border-color: var(--cg-color-surface-cards-border-strong);
+    }
+    .action-btn:active {
+      transform: scale(var(--cg-interaction-press-scale));
+    }
+    .action-btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .action-btn.danger:hover {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+      border-color: var(--cg-color-status-error-border-default);
+    }
+    .action-btn .icon {
+      width: var(--cg-icon-size-100);
+      height: var(--cg-icon-size-100);
+      pointer-events: none;
+    }
+
+    /* ── Empty ── */
+    .empty {
+      text-align: center;
+      padding: var(--cg-spacing-32);
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-sm);
+    }
+
+    /* ── Visually-hidden live region ── */
+    .sr-only {
+      position: absolute; width: 1px; height: 1px;
+      padding: 0; margin: -1px; overflow: hidden;
+      clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+    }
+  `];
+g([
+  f({ type: Array })
+], l.prototype, "keys", 2);
+g([
+  f({ type: Number, attribute: "max-keys" })
+], l.prototype, "maxKeys", 2);
+g([
+  b()
+], l.prototype, "_copiedId", 2);
+g([
+  b()
+], l.prototype, "_announcement", 2);
+l = g([
+  x("ai-api-key-manager")
+], l);
+export {
+  l as AiApiKeyManager
+};
+//# sourceMappingURL=ai-api-key-manager.js.map

package/dist/components/ai-api-key-manager/ai-api-key-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-api-key-manager.js","sources":["../../../src/components/ai-api-key-manager/ai-api-key-manager.ts"],"sourcesContent":["/**\n * @element ai-api-key-manager\n * API key management panel — masked prefix display, copy, revoke, delete,\n * and create controls with ≥44px tap targets and screen-reader announcements.\n *\n * @example\n * ```html\n * <ai-api-key-manager\n *   .keys=${[{\n *     id: '1',\n *     name: 'Production',\n *     prefix: 'sk-prod-7f3a',\n *     createdAt: '2026-04-12',\n *     lastUsed: '2026-05-01',\n *     status: 'active',\n *   }]}\n *   maxKeys=\"5\"\n * ></ai-api-key-manager>\n * ```\n *\n * @fires {CustomEvent} ai-key-create - Create button clicked\n * @fires {CustomEvent<{id: string, name: string}>} ai-key-revoke - Revoke clicked\n * @fires {CustomEvent<{id: string, name: string}>} ai-key-delete - Delete clicked\n * @fires {CustomEvent<{id: string, prefix: string}>} ai-key-copy - Prefix copied to clipboard\n *\n * @cssprop [--cg-color-surface-cards-background] - Card background\n * @cssprop [--cg-color-surface-cards-emphasis] - Each row's tonal lift\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\nexport interface ApiKeyEntry {\n  id: string;\n  name: string;\n  prefix: string;\n  createdAt: string;\n  lastUsed?: string;\n  status: 'active' | 'revoked';\n}\n\n@customElement('ai-api-key-manager')\nexport class AiApiKeyManager 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      /* Longhand padding so a stale shorthand ghost (Lit HMR quirk) can't\n         erase both axes at once. Total = spacing-24 each side. */\n      padding-block: var(--cg-spacing-24);\n      padding-inline: var(--cg-spacing-24);\n      box-shadow: var(--cg-elevation-1);\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      gap: var(--cg-spacing-16);\n      padding-bottom: var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    .header-left { min-width: 0; }\n\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      margin: 0;\n    }\n\n    .count {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* ── Create button ── */\n    .create-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      border: var(--cg-border-width-50) solid var(--cg-color-action-primary-border-default);\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer;\n      font-family: inherit;\n      flex-shrink: 0;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .create-btn:hover:not(:disabled) {\n      background: var(--cg-color-action-primary-background-hover);\n    }\n    .create-btn:active:not(:disabled) {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .create-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .create-btn:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n    .create-btn .plus-icon {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n    }\n\n    /* ── Key list ── */\n    .key-list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    /* Inner card border — uses --cg-color-surface-cards-border, which is\n       theme-aware: gray-300 on light, gray-800 on dark. Subtle and tonally\n       matches the surrounding surface so the card-on-card stays calm.\n       Hover bumps to cards-border-strong for a clearer affordance. */\n    .key-item {\n      display: flex;\n      align-items: stretch;\n      gap: var(--cg-spacing-16);\n      padding: 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      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .key-item:hover {\n      border-color: var(--cg-color-surface-cards-border-strong);\n    }\n    .key-item.revoked {\n      opacity: 0.7;\n    }\n\n    .key-info {\n      flex: 1;\n      min-width: 0;\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-2);\n      justify-content: center;\n    }\n\n    /* Right-side column: status pill on top, actions on the bottom. */\n    .key-side {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-end;\n      justify-content: space-between;\n      gap: var(--cg-spacing-12);\n      flex-shrink: 0;\n    }\n\n    .key-name {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n    }\n\n    .key-prefix-row {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      min-width: 0;\n    }\n\n    .key-prefix {\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      letter-spacing: 0.02em;\n    }\n\n    .copied-toast {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-status-success-text-default);\n      font-weight: var(--cg-font-weight-medium);\n      animation: cg-key-pop var(--cg-transition-duration-default) var(--cg-transition-easing-spring) both;\n    }\n    @keyframes cg-key-pop {\n      from { opacity: 0; transform: translateY(2px); }\n      to   { opacity: 1; transform: translateY(0); }\n    }\n\n    .key-meta {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-2) var(--cg-spacing-12);\n      font-variant-numeric: tabular-nums;\n    }\n\n    /* ── Status badge with dot ── */\n    .status-badge {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      font-size: 10px;\n      font-weight: var(--cg-font-weight-bold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      flex-shrink: 0;\n      border: var(--cg-border-width-50) solid currentColor;\n      background: transparent;\n    }\n    .status-badge .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-active   { color: var(--cg-color-status-success-text-default); }\n    .status-revoked  { color: var(--cg-color-status-error-text-default); }\n\n    /* Pulse on the active dot — a subtle \"alive\" signal. */\n    .status-active .dot {\n      animation: cg-key-pulse 2s var(--cg-transition-easing-default) infinite;\n    }\n    @keyframes cg-key-pulse {\n      0%, 100% { opacity: 1; }\n      50%      { opacity: 0.5; }\n    }\n\n    /* ── Action buttons ── */\n    .actions {\n      display: flex;\n      gap: var(--cg-spacing-4);\n      flex-shrink: 0;\n    }\n    .action-btn {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      background: transparent;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      color: var(--cg-color-input-text-placeholder);\n      cursor: pointer;\n      font-family: inherit;\n      padding: 0;\n      transition:\n        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    /* Extends pointer hit area to ~44px without changing visual size. */\n    .action-btn::before {\n      content: '';\n      position: absolute;\n      inset: calc(-1 * var(--cg-spacing-6));\n    }\n    .action-btn:hover {\n      background: var(--cg-color-action-tertiary-background-hover);\n      color: var(--cg-color-surface-base-text);\n      border-color: var(--cg-color-surface-cards-border-strong);\n    }\n    .action-btn:active {\n      transform: scale(var(--cg-interaction-press-scale));\n    }\n    .action-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .action-btn.danger:hover {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n      border-color: var(--cg-color-status-error-border-default);\n    }\n    .action-btn .icon {\n      width: var(--cg-icon-size-100);\n      height: var(--cg-icon-size-100);\n      pointer-events: none;\n    }\n\n    /* ── Empty ── */\n    .empty {\n      text-align: center;\n      padding: var(--cg-spacing-32);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    /* ── Visually-hidden live region ── */\n    .sr-only {\n      position: absolute; width: 1px; height: 1px;\n      padding: 0; margin: -1px; overflow: hidden;\n      clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;\n    }\n  `];\n\n  @property({ type: Array }) keys: ApiKeyEntry[] = [];\n  @property({ type: Number, attribute: 'max-keys' }) maxKeys = 10;\n\n  @state() private _copiedId: string | null = null;\n  @state() private _announcement = '';\n\n  private _copyTimer: number | undefined;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    if (this._copyTimer) clearTimeout(this._copyTimer);\n  }\n\n  private _onCreate(): void {\n    this.dispatchEvent(new CustomEvent('ai-key-create', {\n      bubbles: true, composed: true,\n    }));\n  }\n\n  private _onRevoke(key: ApiKeyEntry): void {\n    this.dispatchEvent(new CustomEvent('ai-key-revoke', {\n      bubbles: true, composed: true,\n      detail: { id: key.id, name: key.name },\n    }));\n  }\n\n  private _onDelete(key: ApiKeyEntry): void {\n    this.dispatchEvent(new CustomEvent('ai-key-delete', {\n      bubbles: true, composed: true,\n      detail: { id: key.id, name: key.name },\n    }));\n  }\n\n  private async _onCopy(key: ApiKeyEntry): Promise<void> {\n    try {\n      await navigator.clipboard.writeText(key.prefix);\n      this._copiedId = key.id;\n      this._announce(`${key.name} key prefix copied to clipboard`);\n      if (this._copyTimer) clearTimeout(this._copyTimer);\n      this._copyTimer = window.setTimeout(() => {\n        this._copiedId = null;\n        this._copyTimer = undefined;\n      }, 2000);\n      this.dispatchEvent(new CustomEvent('ai-key-copy', {\n        bubbles: true, composed: true,\n        detail: { id: key.id, prefix: key.prefix },\n      }));\n    } catch {\n      this._announce('Copy failed — clipboard unavailable');\n    }\n  }\n\n  private _announce(message: string): void {\n    this._announcement = '';\n    requestAnimationFrame(() => { this._announcement = message; });\n  }\n\n  /**\n   * Format an ISO date as a relative-time string (\"3 days ago\", \"in 2 weeks\").\n   * Falls back to the raw string for non-ISO inputs.\n   */\n  private _relativeTime(input: string): string {\n    if (!input) return '';\n    const date = new Date(input);\n    if (isNaN(date.getTime())) return input;\n    const diffMs = date.getTime() - Date.now();\n    const abs = Math.abs(diffMs);\n    const min = 60_000, hr = 60 * min, day = 24 * hr, week = 7 * day, month = 30 * day, year = 365 * day;\n    let value: number, unit: Intl.RelativeTimeFormatUnit;\n    if (abs < hr) { value = Math.round(diffMs / min); unit = 'minute'; }\n    else if (abs < day) { value = Math.round(diffMs / hr); unit = 'hour'; }\n    else if (abs < week) { value = Math.round(diffMs / day); unit = 'day'; }\n    else if (abs < month) { value = Math.round(diffMs / week); unit = 'week'; }\n    else if (abs < year) { value = Math.round(diffMs / month); unit = 'month'; }\n    else { value = Math.round(diffMs / year); unit = 'year'; }\n    try {\n      return new Intl.RelativeTimeFormat('en', { numeric: 'auto' }).format(value, unit);\n    } catch {\n      return input;\n    }\n  }\n\n  override render() {\n    const atLimit = this.keys.length >= this.maxKeys;\n\n    return html`\n      <div class=\"header\">\n        <div class=\"header-left\">\n          <h3 class=\"title\">API Keys</h3>\n          <span class=\"count\">${this.keys.length} of ${this.maxKeys} keys</span>\n        </div>\n        <button class=\"create-btn\" type=\"button\"\n                ?disabled=${atLimit}\n                @click=${this._onCreate}\n                aria-label=${atLimit ? `Maximum ${this.maxKeys} keys reached` : 'Create new API key'}>\n          <svg class=\"plus-icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" aria-hidden=\"true\">\n            <path d=\"M12 5v14M5 12h14\"/>\n          </svg>\n          Create key\n        </button>\n      </div>\n\n      ${this.keys.length === 0 ? html`\n        <div class=\"empty\" role=\"status\">No API keys yet — click <strong>Create key</strong> to add one.</div>\n      ` : html`\n        <div class=\"key-list\" role=\"list\" aria-label=\"API keys\">\n          ${this.keys.map(k => html`\n            <div class=\"key-item ${k.status === 'revoked' ? 'revoked' : ''}\" role=\"listitem\">\n              <div class=\"key-info\">\n                <div class=\"key-name\">${k.name}</div>\n                <div class=\"key-prefix-row\">\n                  <span class=\"key-prefix\">${k.prefix}••••••••</span>\n                  ${this._copiedId === k.id ? html`<span class=\"copied-toast\" aria-hidden=\"true\">Copied</span>` : nothing}\n                </div>\n                <div class=\"key-meta\">\n                  <span>Created ${this._relativeTime(k.createdAt)}</span>\n                  ${k.lastUsed ? html`<span>· Last used ${this._relativeTime(k.lastUsed)}</span>` : html`<span>· Never used</span>`}\n                </div>\n              </div>\n\n              <div class=\"key-side\">\n                <span class=\"status-badge status-${k.status}\">\n                  <span class=\"dot\" aria-hidden=\"true\"></span>\n                  ${k.status}\n                </span>\n\n                <div class=\"actions\">\n                  <button class=\"action-btn\" type=\"button\"\n                          @click=${() => this._onCopy(k)}\n                          aria-label=\"Copy ${k.name} key prefix\"\n                          title=\"Copy prefix\">\n                    <svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                      <rect x=\"9\" y=\"9\" width=\"13\" height=\"13\" rx=\"2\"/>\n                      <path d=\"M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1\"/>\n                    </svg>\n                  </button>\n\n                  ${k.status === 'active' ? html`\n                    <button class=\"action-btn\" type=\"button\"\n                            @click=${() => this._onRevoke(k)}\n                            aria-label=\"Revoke ${k.name} key\"\n                            title=\"Revoke\">\n                      <svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                        <circle cx=\"12\" cy=\"12\" r=\"9\"/>\n                        <path d=\"M5.6 5.6l12.8 12.8\"/>\n                      </svg>\n                    </button>\n                  ` : nothing}\n\n                  <button class=\"action-btn danger\" type=\"button\"\n                          @click=${() => this._onDelete(k)}\n                          aria-label=\"Delete ${k.name} key\"\n                          title=\"Delete\">\n                    <svg class=\"icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\">\n                      <path d=\"M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2M6 6l1 14a2 2 0 002 2h6a2 2 0 002-2l1-14\"/>\n                      <path d=\"M10 11v6M14 11v6\"/>\n                    </svg>\n                  </button>\n                </div>\n              </div>\n            </div>\n          `)}\n        </div>\n      `}\n\n      <span class=\"sr-only\" role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">${this._announcement}</span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-api-key-manager': AiApiKeyManager;\n  }\n}\n"],"names":["AiApiKeyManager","LitElement","key","message","input","date","diffMs","abs","min","hr","day","week","month","year","value","unit","atLimit","html","k","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-app-sidebar/ai-app-sidebar.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+export interface SidebarItem {
+    id: string;
+    label: string;
+    icon?: string;
+    badge?: string;
+}
+export interface SidebarSection {
+    title: string;
+    items: SidebarItem[];
+}
+export declare class AiAppSidebar extends LitElement {
+    static styles: import('lit').CSSResult[];
+    sections: SidebarSection[];
+    collapsed: boolean;
+    activeId: string;
+    private _handleCollapse;
+    private _handleItemClick;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-app-sidebar': AiAppSidebar;
+    }
+}
+//# sourceMappingURL=ai-app-sidebar.d.ts.map

package/dist/components/ai-app-sidebar/ai-app-sidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-app-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/ai-app-sidebar/ai-app-sidebar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,WAAW,EAAE,CAAC;CACtB;AAED,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAkInB;IAEwB,QAAQ,EAAE,cAAc,EAAE,CAAM;IACf,SAAS,UAAS;IACV,QAAQ,SAAM;IAElE,OAAO,CAAC,eAAe;IASvB,OAAO,CAAC,gBAAgB;IAQf,MAAM;CAgChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}