@cognivo/components 0.8.0 → 0.8.2

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

@@ -1,17 +1,14 @@
-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;
+import { css as u, LitElement as v, html as r, nothing as l } from "lit";
+import { property as g, state as p, customElement as b } from "lit/decorators.js";
+import { h as f, r as m, f as h } from "../../chunks/premium.css-DHekUEUt.js";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, i = (t, e, c, s) => {
+  for (var a = s > 1 ? void 0 : s ? x(e, c) : e, n = t.length - 1, d; n >= 0; n--)
+    (d = t[n]) && (a = (s ? d(e, c, a) : d(a)) || a);
+  return s && a && y(e, c, a), a;
 };
-let l = class extends y {
+let o = class extends v {
   constructor() {
-    super(...arguments), this.keys = [], this.maxKeys = 10, this._copiedId = null, this._announcement = "";
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this._copyTimer && clearTimeout(this._copyTimer);
+    super(...arguments), this.keys = [], this.maxKeys = 10, this._copiedId = null;
   }
   _onCreate() {
     this.dispatchEvent(new CustomEvent("ai-key-create", {
@@ -19,153 +16,87 @@ let l = class extends y {
       composed: !0
     }));
   }
-  _onRevoke(e) {
+  _onRevoke(t) {
     this.dispatchEvent(new CustomEvent("ai-key-revoke", {
       bubbles: !0,
       composed: !0,
-      detail: { id: e.id, name: e.name }
+      detail: { id: t.id, name: t.name }
     }));
   }
-  _onDelete(e) {
+  _onDelete(t) {
     this.dispatchEvent(new CustomEvent("ai-key-delete", {
       bubbles: !0,
       composed: !0,
-      detail: { id: e.id, name: e.name }
+      detail: { id: t.id, name: t.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");
+  async _onCopy(t) {
     try {
-      return new Intl.RelativeTimeFormat("en", { numeric: "auto" }).format(c, d);
+      await navigator.clipboard.writeText(t.prefix), this._copiedId = t.id, setTimeout(() => {
+        this._copiedId = null;
+      }, 2e3);
     } catch {
-      return e;
     }
   }
   render() {
-    const e = this.keys.length >= this.maxKeys;
-    return n`
+    const t = this.keys.length >= this.maxKeys;
+    return r`
       <div class="header">
-        <div class="header-left">
+        <div>
           <h3 class="title">API Keys</h3>
-          <span class="count">${this.keys.length} of ${this.maxKeys} keys</span>
+          <span class="count">${this.keys.length} / ${this.maxKeys} keys</span>
         </div>
-        <button class="create-btn" type="button"
-                ?disabled=${e}
+        <button class="create-btn" ?disabled=${t}
                 @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
+                aria-label="Create new API key"
+                tabindex="0">
+          + 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`
+      ${this.keys.length === 0 ? r`
+        <div class="empty" role="status">No API keys created yet.</div>
+      ` : r`
         <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">
+          ${this.keys.map((e) => r`
+            <div class="key-item" 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 class="key-name">${e.name}</div>
+                <div class="key-prefix">${e.prefix}...xxxx
+                  ${this._copiedId === e.id ? r`<span class="copied-toast">Copied!</span>` : l}
                 </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>`}
+                  <span>Created ${e.createdAt}</span>
+                  ${e.lastUsed ? r`<span>Last used ${e.lastUsed}</span>` : l}
                 </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>
+              <span class="status-badge status-${e.status}">${e.status}</span>
+              <div class="actions">
+                <button class="action-btn" @click=${() => this._onCopy(e)}
+                        aria-label="Copy key prefix" tabindex="0"
+                        title="Copy">&#x2398;</button>
+                ${e.status === "active" ? r`
+                  <button class="action-btn" @click=${() => this._onRevoke(e)}
+                          aria-label="Revoke key ${e.name}" tabindex="0"
+                          title="Revoke">&#x2718;</button>
+                ` : l}
+                <button class="action-btn danger" @click=${() => this._onDelete(e)}
+                        aria-label="Delete key ${e.name}" tabindex="0"
+                        title="Delete">&#x1f5d1;</button>
               </div>
             </div>
           `)}
         </div>
       `}
-
-      <span class="sr-only" role="status" aria-live="polite" aria-atomic="true">${this._announcement}</span>
     `;
   }
 };
-l.styles = [k, w, _, m`
+o.styles = [f, m, h, u`
     :host {
-      display: block;
-      background: var(--cg-color-surface-cards-background);
+      background: var(--cg-color-surface-base-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);
+      padding: var(--cg-spacing-16);
       animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
     }
     :host([hidden]) { display: none; }
@@ -174,14 +105,11 @@ l.styles = [k, w, _, m`
       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);
+      padding-bottom: var(--cg-spacing-12);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      margin-bottom: var(--cg-spacing-12);
     }
 
-    .header-left { min-width: 0; }
-
     .title {
       font-size: var(--cg-font-size-sm);
       font-weight: var(--cg-font-weight-semibold);
@@ -191,253 +119,164 @@ l.styles = [k, w, _, m`
     .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);
+      gap: var(--cg-spacing-4);
       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);
+      color: var(--cg-color-surface-container-background);
+      border: none;
       border-radius: var(--cg-border-radius-100);
-      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      padding: var(--cg-spacing-6) 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);
+      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);
+      outline-offset: var(--cg-outline-offset-default);
+    }
+
+    .create-btn:hover:not(:disabled) {
+      filter: brightness(1.1);
     }
     .create-btn:disabled {
-      opacity: 0.5;
+      background: var(--cg-color-action-primary-background-disable);
+      color: var(--cg-color-action-primary-text-disable);
       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);
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-12);
+      background: var(--cg-color-surface-cards-background);
       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;
+      margin-bottom: var(--cg-spacing-2);
     }
 
     .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);
+      margin-top: var(--cg-spacing-4);
       display: flex;
-      flex-wrap: wrap;
-      gap: var(--cg-spacing-2) var(--cg-spacing-12);
-      font-variant-numeric: tabular-nums;
+      gap: var(--cg-spacing-8);
     }
 
-    /* ── 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);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
       text-transform: uppercase;
-      letter-spacing: var(--cg-letter-spacing-wide);
+      letter-spacing: 0.05em;
       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;
+    .status-active {
+      background: var(--cg-color-status-success-background-default);
+      color: var(--cg-color-status-success-text-default);
     }
-    @keyframes cg-key-pulse {
-      0%, 100% { opacity: 1; }
-      50%      { opacity: 0.5; }
+
+    .status-revoked {
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
     }
 
-    /* ── 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);
+      width: var(--cg-spacing-24);
+      height: var(--cg-spacing-24);
       background: transparent;
       border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
-      border-radius: var(--cg-border-radius-100);
+      border-radius: var(--cg-border-radius-50);
       color: var(--cg-color-input-text-placeholder);
       cursor: pointer;
+      font-size: var(--cg-font-size-xs);
       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);
+      background: var(--cg-color-surface-cards-hover-background);
       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);
+      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);
+      outline-offset: var(--cg-outline-offset-default);
     }
+
     .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);
+      border-color: var(--cg-color-status-error-text-default);
     }
-    .action-btn .icon {
-      width: var(--cg-icon-size-100);
-      height: var(--cg-icon-size-100);
-      pointer-events: none;
+
+    .copied-toast {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-base-text);
+      margin-left: var(--cg-spacing-4);
     }
 
-    /* ── Empty ── */
     .empty {
       text-align: center;
-      padding: var(--cg-spacing-32);
+      padding: var(--cg-spacing-24);
       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);
+i([
+  g({ type: Array })
+], o.prototype, "keys", 2);
+i([
+  g({ type: Number })
+], o.prototype, "maxKeys", 2);
+i([
+  p()
+], o.prototype, "_copiedId", 2);
+o = i([
+  b("ai-api-key-manager")
+], o);
 export {
-  l as AiApiKeyManager
+  o as AiApiKeyManager
 };
 //# sourceMappingURL=ai-api-key-manager.js.map

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

@@ -1 +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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"}
+{"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 with masked display, copy, revoke, delete, and create controls.\n *\n * @example\n * ```html\n * <ai-api-key-manager\n *   .keys=${[{id:'1', name:'Production', prefix:'sk-abc', createdAt:'2024-01-15', status:'active'}]}\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 button clicked\n * @fires {CustomEvent<{id: string, name: string}>} ai-key-delete - Delete button clicked\n *\n * @cssprop [--cg-color-accent=#dfff61] - Create button and focus ring color\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      background: var(--cg-color-surface-base-background);\n      color: var(--cg-color-surface-base-text);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      padding: var(--cg-spacing-16);\n      animation: fadeSlideIn 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      padding-bottom: var(--cg-spacing-12);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      margin-bottom: var(--cg-spacing-12);\n    }\n\n    .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    }\n\n    .create-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-surface-container-background);\n      border: none;\n      border-radius: var(--cg-border-radius-100);\n      padding: var(--cg-spacing-6) 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    }\n\n    .create-btn:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .create-btn:hover:not(:disabled) {\n      filter: brightness(1.1);\n    }\n    .create-btn:disabled {\n      background: var(--cg-color-action-primary-background-disable);\n      color: var(--cg-color-action-primary-text-disable);\n      cursor: not-allowed;\n    }\n\n    .key-list {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    .key-item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12);\n      background: var(--cg-color-surface-cards-background);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n    }\n\n    .key-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .key-name {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-medium);\n      margin-bottom: var(--cg-spacing-2);\n    }\n\n    .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    }\n\n    .key-meta {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-4);\n      display: flex;\n      gap: var(--cg-spacing-8);\n    }\n\n    .status-badge {\n      display: inline-flex;\n      align-items: center;\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      text-transform: uppercase;\n      letter-spacing: 0.05em;\n      flex-shrink: 0;\n    }\n\n    .status-active {\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n    }\n\n    .status-revoked {\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n    }\n\n    .actions {\n      display: flex;\n      gap: var(--cg-spacing-4);\n      flex-shrink: 0;\n    }\n\n    .action-btn {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      background: transparent;\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-50);\n      color: var(--cg-color-input-text-placeholder);\n      cursor: pointer;\n      font-size: var(--cg-font-size-xs);\n      font-family: inherit;\n      padding: 0;\n    }\n\n    .action-btn:hover {\n      background: var(--cg-color-surface-cards-hover-background);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    .action-btn:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: var(--cg-outline-offset-default);\n    }\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-text-default);\n    }\n\n    .copied-toast {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-base-text);\n      margin-left: var(--cg-spacing-4);\n    }\n\n    .empty {\n      text-align: center;\n      padding: var(--cg-spacing-24);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n    }\n  `];\n  @property({ type: Array }) keys: ApiKeyEntry[] = [];\n  @property({ type: Number }) maxKeys = 10;\n\n  @state() private _copiedId: string | null = null;\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      setTimeout(() => { this._copiedId = null; }, 2000);\n    } catch { /* clipboard not available */ }\n  }\n\n  override render() {\n    const atLimit = this.keys.length >= this.maxKeys;\n\n    return html`\n      <div class=\"header\">\n        <div>\n          <h3 class=\"title\">API Keys</h3>\n          <span class=\"count\">${this.keys.length} / ${this.maxKeys} keys</span>\n        </div>\n        <button class=\"create-btn\" ?disabled=${atLimit}\n                @click=${this._onCreate}\n                aria-label=\"Create new API key\"\n                tabindex=\"0\">\n          + Create Key\n        </button>\n      </div>\n      ${this.keys.length === 0 ? html`\n        <div class=\"empty\" role=\"status\">No API keys created yet.</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\" role=\"listitem\">\n              <div class=\"key-info\">\n                <div class=\"key-name\">${k.name}</div>\n                <div class=\"key-prefix\">${k.prefix}...xxxx\n                  ${this._copiedId === k.id ? html`<span class=\"copied-toast\">Copied!</span>` : nothing}\n                </div>\n                <div class=\"key-meta\">\n                  <span>Created ${k.createdAt}</span>\n                  ${k.lastUsed ? html`<span>Last used ${k.lastUsed}</span>` : nothing}\n                </div>\n              </div>\n              <span class=\"status-badge status-${k.status}\">${k.status}</span>\n              <div class=\"actions\">\n                <button class=\"action-btn\" @click=${() => this._onCopy(k)}\n                        aria-label=\"Copy key prefix\" tabindex=\"0\"\n                        title=\"Copy\">&#x2398;</button>\n                ${k.status === 'active' ? html`\n                  <button class=\"action-btn\" @click=${() => this._onRevoke(k)}\n                          aria-label=\"Revoke key ${k.name}\" tabindex=\"0\"\n                          title=\"Revoke\">&#x2718;</button>\n                ` : nothing}\n                <button class=\"action-btn danger\" @click=${() => this._onDelete(k)}\n                        aria-label=\"Delete key ${k.name}\" tabindex=\"0\"\n                        title=\"Delete\">&#x1f5d1;</button>\n              </div>\n            </div>\n          `)}\n        </div>\n      `}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-api-key-manager': AiApiKeyManager;\n  }\n}\n"],"names":["AiApiKeyManager","LitElement","key","atLimit","html","k","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}