@cognivo/components 0.8.0 → 0.8.2

package/dist/components/ai-analytics-chart/ai-analytics-chart.js

@@ -1,12 +1,12 @@
-import { css as m, LitElement as x, nothing as v, html as p, svg as h } from "lit";
-import { property as u, state as f, customElement as y } from "lit/decorators.js";
-import { h as b, r as $, f as w } from "../../chunks/premium.css-9I4kHrsl.js";
-var M = Object.defineProperty, k = Object.getOwnPropertyDescriptor, d = (t, e, a, r) => {
-  for (var s = r > 1 ? void 0 : r ? k(e, a) : e, l = t.length - 1, i; l >= 0; l--)
-    (i = t[l]) && (s = (r ? i(e, a, s) : i(s)) || s);
-  return r && s && M(e, a, s), s;
+import { css as b, LitElement as f, nothing as p, html as o } from "lit";
+import { property as v, state as u, customElement as y } from "lit/decorators.js";
+import { h as x, r as m, f as _ } from "../../chunks/premium.css-DHekUEUt.js";
+var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, h = (t, e, i, r) => {
+  for (var s = r > 1 ? void 0 : r ? w(e, i) : e, d = t.length - 1, a; d >= 0; d--)
+    (a = t[d]) && (s = (r ? a(e, i, s) : a(s)) || s);
+  return r && s && $(e, i, s), s;
 };
-let n = class extends x {
+let n = class extends f {
   constructor() {
     super(...arguments), this.series = [], this.title = "", this.yLabel = "", this.height = 200, this._hover = null, this._width = 400;
   }
@@ -20,59 +20,38 @@ let n = class extends x {
     super.disconnectedCallback(), this._ro?.disconnect();
   }
   get _margin() {
-    return { top: 24, right: 24, bottom: 48, left: this.yLabel ? 64 : 52 };
+    return { top: 10, right: 16, bottom: 28, left: this.yLabel ? 48 : 40 };
   }
   get _allY() {
     return this.series.flatMap((t) => t.data.map((e) => e.y));
   }
-  /**
-   * X-axis values in the order the consumer passed them. Set's insertion order
-   * is preserved, so points appear in the order of the first series. Sorting
-   * alphabetically (the previous behavior) breaks any non-alphabetic axis —
-   * e.g. days of the week ended up Fri, Mon, Sat, Sun, Thu, Tue, Wed and lines
-   * zig-zagged between non-adjacent days.
-   */
   get _allX() {
     const t = /* @__PURE__ */ new Set();
-    return this.series.forEach((e) => e.data.forEach((a) => t.add(a.x))), [...t];
+    return this.series.forEach((e) => e.data.forEach((i) => t.add(i.x))), [...t].sort();
   }
   get _yMin() {
-    return X(Math.min(0, ...this._allY));
+    return Math.min(0, ...this._allY);
   }
   get _yMax() {
-    return _(Math.max(1, ...this._allY));
+    return Math.max(1, ...this._allY);
   }
   _scaleX(t) {
-    const e = this._allX, a = e.indexOf(t), r = this._margin, s = this._width - r.left - r.right;
-    return r.left + (e.length > 1 ? a / (e.length - 1) * s : s / 2);
+    const e = this._allX, i = e.indexOf(t), r = this._margin, s = this._width - r.left - r.right;
+    return r.left + (e.length > 1 ? i / (e.length - 1) * s : s / 2);
   }
   _scaleY(t) {
-    const e = this._margin, a = this.height - e.top - e.bottom, r = this._yMax - this._yMin || 1;
-    return e.top + a - (t - this._yMin) / r * a;
+    const e = this._margin, i = this.height - e.top - e.bottom, r = this._yMax - this._yMin || 1;
+    return e.top + i - (t - this._yMin) / r * i;
   }
   _buildPath(t) {
-    return t.map((e, a) => {
+    return t.map((e, i) => {
       const r = this._scaleX(e.x), s = this._scaleY(e.y);
-      return `${a === 0 ? "M" : "L"}${r},${s}`;
+      return `${i === 0 ? "M" : "L"}${r},${s}`;
     }).join(" ");
   }
-  /** Closed area under the line for the gradient fill. */
-  _buildArea(t) {
-    if (t.length === 0) return "";
-    const e = this._margin, a = this.height - e.bottom, r = this._buildPath(t), s = this._scaleX(t[t.length - 1].x), l = this._scaleX(t[0].x);
-    return `${r} L${s},${a} L${l},${a} Z`;
-  }
-  /** Stable id-safe slug for a series name (used by SVG gradient refs). */
-  _seriesId(t) {
-    return t.replace(/[^a-zA-Z0-9_-]/g, "-");
-  }
-  /** Format a y-tick value: integer for ranges ≥ 10, one decimal otherwise. */
-  _formatTick(t) {
-    return this._yMax - this._yMin >= 10 ? `${Math.round(t)}` : `${Math.round(t * 10) / 10}`;
-  }
-  _onPointHover(t, e, a) {
+  _onPointHover(t, e, i) {
     const r = t.data[e];
-    !r || !a.currentTarget.closest("svg")?.getBoundingClientRect() || (this._hover = {
+    !r || !i.currentTarget.closest("svg")?.getBoundingClientRect() || (this._hover = {
       seriesName: t.name,
       color: t.color,
       x: r.x,
@@ -89,93 +68,80 @@ let n = class extends x {
     this._hover = null;
   }
   render() {
-    const t = this._margin, e = this._allX, a = 5, r = this._yMax - this._yMin || 1, s = this.height, l = s - t.top - t.bottom;
-    return p`
-      ${this.title || this.series.length ? p`
+    const t = this._margin, e = this._allX, i = 5, r = this._yMax - this._yMin || 1, s = this.height, d = s - t.top - t.bottom;
+    return o`
+      ${this.title || this.series.length ? o`
         <div class="header">
-          ${this.title ? p`<h3 class="title">${this.title}</h3>` : v}
+          ${this.title ? o`<h3 class="title">${this.title}</h3>` : p}
           <div class="legend" role="list" aria-label="Chart legend">
-            ${this.series.map((i) => p`
+            ${this.series.map((a) => o`
               <span class="legend-item" role="listitem">
-                <span class="legend-dot" style="background:${i.color}"></span>
-                ${i.name}
+                <span class="legend-dot" style="background:${a.color}"></span>
+                ${a.name}
               </span>
             `)}
           </div>
         </div>
-      ` : v}
+      ` : p}
       <div class="chart-wrap" @mouseleave=${this._onMouseLeave}>
         <svg viewBox="0 0 ${this._width} ${s}" aria-label="${this.title || "Analytics chart"}"
              role="img" tabindex="0">
-          <defs>
-            ${this.series.map((i) => {
-      const o = `area-grad-${this._seriesId(i.name)}`;
-      return h`
-                <linearGradient id="${o}" x1="0" x2="0" y1="0" y2="1">
-                  <stop offset="0%" stop-color="${i.color}" stop-opacity="1" />
-                  <stop offset="100%" stop-color="${i.color}" stop-opacity="0" />
-                </linearGradient>
-              `;
-    })}
-          </defs>
-          ${this.yLabel ? h`
-            <text class="y-label" x="4" y="${t.top + l / 2}"
-                  transform="rotate(-90, 12, ${t.top + l / 2})"
+          ${this.yLabel ? o`
+            <text class="y-label" x="4" y="${t.top + d / 2}"
+                  transform="rotate(-90, 12, ${t.top + d / 2})"
                   text-anchor="middle">${this.yLabel}</text>
-          ` : v}
-          ${Array.from({ length: a }, (i, o) => {
-      const g = this._yMin + r * o / (a - 1), c = this._scaleY(g);
-      return h`
+          ` : p}
+          ${Array.from({ length: i }, (a, l) => {
+      const g = this._yMin + r * l / (i - 1), c = this._scaleY(g);
+      return o`
               <line class="grid-line" x1="${t.left}" x2="${this._width - t.right}" y1="${c}" y2="${c}" />
-              <text class="axis-label" x="${t.left - 10}" y="${c + 3}" text-anchor="end">
-                ${this._formatTick(g)}
+              <text class="axis-label" x="${t.left - 6}" y="${c + 3}" text-anchor="end">
+                ${Math.round(g * 10) / 10}
               </text>
             `;
     })}
-          ${e.length <= 12 ? e.map((i) => h`
-            <text class="axis-label" x="${this._scaleX(i)}" y="${s - 18}" text-anchor="middle">
-              ${i}
+          ${e.length <= 12 ? e.map((a, l) => o`
+            <text class="axis-label" x="${this._scaleX(a)}" y="${s - 4}" text-anchor="middle">
+              ${a}
             </text>
-          `) : e.filter((i, o) => o % Math.ceil(e.length / 8) === 0).map((i) => h`
-            <text class="axis-label" x="${this._scaleX(i)}" y="${s - 18}" text-anchor="middle">
-              ${i}
+          `) : e.filter((a, l) => l % Math.ceil(e.length / 8) === 0).map((a) => o`
+            <text class="axis-label" x="${this._scaleX(a)}" y="${s - 4}" text-anchor="middle">
+              ${a}
             </text>
           `)}
-          ${this.series.map((i) => h`
-            <path class="data-area" d="${this._buildArea(i.data)}"
-                  fill="url(#area-grad-${this._seriesId(i.name)})" />
-            <path class="data-line" d="${this._buildPath(i.data)}" stroke="${i.color}" />
-            <path class="hit-area" d="${this._buildPath(i.data)}" />
-            ${i.data.map((o, g) => h`
-              <circle class="data-point" cx="${this._scaleX(o.x)}" cy="${this._scaleY(o.y)}" r="3"
-                      fill="${i.color}" opacity="${this._hover?.x === o.x && this._hover?.seriesName === i.name ? 1 : 0}"
-                      @mouseenter=${(c) => this._onPointHover(i, g, c)} />
-              <circle cx="${this._scaleX(o.x)}" cy="${this._scaleY(o.y)}" r="10"
+          ${this.series.map((a) => o`
+            <path class="data-line" d="${this._buildPath(a.data)}" stroke="${a.color}" />
+            <path class="hit-area" d="${this._buildPath(a.data)}" />
+            ${a.data.map((l, g) => o`
+              <circle class="data-point" cx="${this._scaleX(l.x)}" cy="${this._scaleY(l.y)}" r="3"
+                      fill="${a.color}" opacity="${this._hover?.x === l.x && this._hover?.seriesName === a.name ? 1 : 0}"
+                      @mouseenter=${(c) => this._onPointHover(a, g, c)} />
+              <circle cx="${this._scaleX(l.x)}" cy="${this._scaleY(l.y)}" r="10"
                       fill="transparent" style="cursor:pointer"
-                      @mouseenter=${(c) => this._onPointHover(i, g, c)} />
+                      @mouseenter=${(c) => this._onPointHover(a, g, c)} />
             `)}
           `)}
         </svg>
-        ${this._hover ? p`
+        ${this._hover ? o`
           <div class="tooltip" style="left:${this._hover.px}px;top:${this._hover.py}px">
             <div class="tooltip-label">${this._hover.x}</div>
             <div class="tooltip-value" style="color:${this._hover.color}">
               ${this._hover.seriesName}: ${this._hover.y}
             </div>
           </div>
-        ` : v}
+        ` : p}
       </div>
     `;
   }
 };
-n.styles = [b, $, w, m`
+n.styles = [x, m, _, b`
     :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);
-      padding: var(--cg-spacing-24);
+      padding: var(--cg-spacing-20);
       box-shadow: var(--cg-elevation-1);
       animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;
     }
@@ -185,10 +151,9 @@ n.styles = [b, $, w, m`
       display: flex;
       justify-content: space-between;
       align-items: flex-start;
-      gap: var(--cg-spacing-16);
-      padding-bottom: var(--cg-spacing-24);
+      padding-bottom: var(--cg-spacing-12);
       border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
-      margin-bottom: var(--cg-spacing-20);
+      margin-bottom: var(--cg-spacing-12);
     }
 
     .title {
@@ -232,11 +197,11 @@ n.styles = [b, $, w, m`
 
     .axis-label {
       font-size: var(--cg-font-size-xs);
-      fill: var(--cg-color-input-text-placeholder);
+      fill: var(--cg-color-chart-axis);
     }
 
     .grid-line {
-      stroke: var(--cg-color-surface-cards-divider);
+      stroke: var(--cg-color-chart-grid);
       stroke-width: 0.5;
     }
 
@@ -247,12 +212,6 @@ n.styles = [b, $, w, m`
       stroke-linejoin: round;
     }
 
-    /* Soft gradient area under each line — adds depth without competing with the stroke. */
-    .data-area {
-      stroke: none;
-      opacity: 0.18;
-    }
-
     .data-point {
       transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
@@ -290,44 +249,35 @@ n.styles = [b, $, w, m`
 
     .y-label {
       font-size: var(--cg-font-size-xs);
-      fill: var(--cg-color-input-text-placeholder);
+      fill: var(--cg-color-chart-axis);
     }
 
     :focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-color-focus-ring);
     }
   `];
-d([
-  u({ type: Array })
+h([
+  v({ type: Array })
 ], n.prototype, "series", 2);
-d([
-  u({ type: String })
+h([
+  v({ type: String })
 ], n.prototype, "title", 2);
-d([
-  u({ type: String })
+h([
+  v({ type: String })
 ], n.prototype, "yLabel", 2);
-d([
-  u({ type: Number })
+h([
+  v({ type: Number })
 ], n.prototype, "height", 2);
-d([
-  f()
+h([
+  u()
 ], n.prototype, "_hover", 2);
-d([
-  f()
+h([
+  u()
 ], n.prototype, "_width", 2);
-n = d([
+n = h([
   y("ai-analytics-chart")
 ], n);
-function _(t) {
-  if (t <= 0) return 1;
-  const a = 10 ** Math.floor(Math.log10(t)), r = t / a;
-  let s;
-  return r <= 1 ? s = 1 : r <= 2 ? s = 2 : r <= 2.5 ? s = 2.5 : r <= 5 ? s = 5 : s = 10, s * a;
-}
-function X(t) {
-  return t >= 0 ? 0 : -_(-t);
-}
 export {
   n as AiAnalyticsChart
 };

package/dist/components/ai-analytics-chart/ai-analytics-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-analytics-chart.js","sources":["../../../src/components/ai-analytics-chart/ai-analytics-chart.ts"],"sourcesContent":["/**\n * @element ai-analytics-chart\n * Responsive multi-series SVG line chart with axis labels, legend, and hover tooltips.\n *\n * @example\n * ```html\n * <ai-analytics-chart\n *   title=\"Latency (ms)\"\n *   yLabel=\"ms\"\n *   .series=${[{name:'p50', color:'#4ade80', data:[{x:'Mon',y:120},{x:'Tue',y:98}]}]}\n * ></ai-analytics-chart>\n * ```\n *\n * @fires {CustomEvent<{series: string, x: string, y: number}>} ai-analytics-point-hover - Data point hovered\n *\n * @cssprop [--cg-color-surface-cards-background] - Chart card background\n * @cssprop [--cg-color-surface-cards-border] - Card border + grid line color\n */\nimport { LitElement, html, svg, css, nothing } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\nexport interface AnalyticsSeries {\n  name: string;\n  color: string;\n  data: { x: string; y: number }[];\n}\n\ninterface HoverPoint {\n  seriesName: string;\n  color: string;\n  x: string;\n  y: number;\n  px: number;\n  py: number;\n}\n\n@customElement('ai-analytics-chart')\nexport class AiAnalyticsChart 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      padding: var(--cg-spacing-24);\n      box-shadow: var(--cg-elevation-1);\n      animation: fadeSlideIn var(--cg-transition-duration-fast) 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: flex-start;\n      gap: var(--cg-spacing-16);\n      padding-bottom: var(--cg-spacing-24);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n      margin-bottom: var(--cg-spacing-20);\n    }\n\n    .title {\n      font-size: var(--cg-font-size-sm);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n      margin: 0;\n    }\n\n    .legend {\n      display: flex;\n      gap: var(--cg-spacing-12);\n      flex-wrap: wrap;\n    }\n\n    .legend-item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    .legend-dot {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      flex-shrink: 0;\n    }\n\n    .chart-wrap {\n      position: relative;\n      width: 100%;\n    }\n\n    svg {\n      display: block;\n      width: 100%;\n      overflow: visible;\n    }\n\n    .axis-label {\n      font-size: var(--cg-font-size-xs);\n      fill: var(--cg-color-input-text-placeholder);\n    }\n\n    .grid-line {\n      stroke: var(--cg-color-surface-cards-divider);\n      stroke-width: 0.5;\n    }\n\n    .data-line {\n      fill: none;\n      stroke-width: 2;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n    }\n\n    /* Soft gradient area under each line — adds depth without competing with the stroke. */\n    .data-area {\n      stroke: none;\n      opacity: 0.18;\n    }\n\n    .data-point {\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .hit-area {\n      fill: transparent;\n      stroke: transparent;\n      stroke-width: 12;\n      cursor: pointer;\n    }\n\n    .tooltip {\n      position: absolute;\n      background: var(--cg-color-surface-cards-emphasis);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      box-shadow: var(--cg-elevation-2);\n      padding: var(--cg-spacing-6) var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      pointer-events: none;\n      z-index: 10;\n      white-space: nowrap;\n      transform: translate(-50%, -100%);\n      margin-top: calc(-1 * var(--cg-spacing-8));\n    }\n\n    .tooltip-label {\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-2);\n    }\n\n    .tooltip-value {\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .y-label {\n      font-size: var(--cg-font-size-xs);\n      fill: var(--cg-color-input-text-placeholder);\n    }\n\n    :focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n  `];\n  @property({ type: Array }) series: AnalyticsSeries[] = [];\n  @property({ type: String }) override title = '';\n  @property({ type: String }) yLabel = '';\n  @property({ type: Number }) height = 200;\n\n  @state() private _hover: HoverPoint | null = null;\n  @state() private _width = 400;\n\n  private _ro?: ResizeObserver;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._ro = new ResizeObserver((entries) => {\n      for (const e of entries) {\n        // contentRect already excludes the host's padding, so we use it directly.\n        this._width = e.contentRect.width;\n      }\n    });\n    this._ro.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._ro?.disconnect();\n  }\n\n  private get _margin() {\n    return { top: 24, right: 24, bottom: 48, left: this.yLabel ? 64 : 52 };\n  }\n\n  private get _allY(): number[] {\n    return this.series.flatMap(s => s.data.map(d => d.y));\n  }\n\n  /**\n   * X-axis values in the order the consumer passed them. Set's insertion order\n   * is preserved, so points appear in the order of the first series. Sorting\n   * alphabetically (the previous behavior) breaks any non-alphabetic axis —\n   * e.g. days of the week ended up Fri, Mon, Sat, Sun, Thu, Tue, Wed and lines\n   * zig-zagged between non-adjacent days.\n   */\n  private get _allX(): string[] {\n    const set = new Set<string>();\n    this.series.forEach(s => s.data.forEach(d => set.add(d.x)));\n    return [...set];\n  }\n\n  private get _yMin(): number {\n    return niceMin(Math.min(0, ...this._allY));\n  }\n\n  private get _yMax(): number {\n    return niceMax(Math.max(1, ...this._allY));\n  }\n\n  private _scaleX(x: string): number {\n    const xs = this._allX;\n    const idx = xs.indexOf(x);\n    const m = this._margin;\n    const w = this._width - m.left - m.right;\n    return m.left + (xs.length > 1 ? (idx / (xs.length - 1)) * w : w / 2);\n  }\n\n  private _scaleY(y: number): number {\n    const m = this._margin;\n    const h = this.height - m.top - m.bottom;\n    const range = this._yMax - this._yMin || 1;\n    return m.top + h - ((y - this._yMin) / range) * h;\n  }\n\n  private _buildPath(data: { x: string; y: number }[]): string {\n    return data.map((d, i) => {\n      const px = this._scaleX(d.x);\n      const py = this._scaleY(d.y);\n      return `${i === 0 ? 'M' : 'L'}${px},${py}`;\n    }).join(' ');\n  }\n\n  /** Closed area under the line for the gradient fill. */\n  private _buildArea(data: { x: string; y: number }[]): string {\n    if (data.length === 0) return '';\n    const m = this._margin;\n    const baseY = this.height - m.bottom;\n    const line = this._buildPath(data);\n    const lastX = this._scaleX(data[data.length - 1]!.x);\n    const firstX = this._scaleX(data[0]!.x);\n    return `${line} L${lastX},${baseY} L${firstX},${baseY} Z`;\n  }\n\n  /** Stable id-safe slug for a series name (used by SVG gradient refs). */\n  private _seriesId(name: string): string {\n    return name.replace(/[^a-zA-Z0-9_-]/g, '-');\n  }\n\n  /** Format a y-tick value: integer for ranges ≥ 10, one decimal otherwise. */\n  private _formatTick(val: number): string {\n    const range = this._yMax - this._yMin;\n    if (range >= 10) return `${Math.round(val)}`;\n    return `${Math.round(val * 10) / 10}`;\n  }\n\n  private _onPointHover(series: AnalyticsSeries, idx: number, e: MouseEvent): void {\n    const d = series.data[idx];\n    if (!d) return;\n    const svgRect = (e.currentTarget as SVGElement).closest('svg')?.getBoundingClientRect();\n    if (!svgRect) return;\n    this._hover = {\n      seriesName: series.name,\n      color: series.color,\n      x: d.x,\n      y: d.y,\n      px: this._scaleX(d.x),\n      py: this._scaleY(d.y),\n    };\n    this.dispatchEvent(new CustomEvent('ai-analytics-point-hover', {\n      bubbles: true, composed: true,\n      detail: { series: series.name, x: d.x, y: d.y },\n    }));\n  }\n\n  private _onMouseLeave(): void {\n    this._hover = null;\n  }\n\n  override render() {\n    const m = this._margin;\n    const xs = this._allX;\n    const yTicks = 5;\n    const yRange = this._yMax - this._yMin || 1;\n    const h = this.height;\n    const ih = h - m.top - m.bottom;\n\n    return html`\n      ${this.title || this.series.length ? html`\n        <div class=\"header\">\n          ${this.title ? html`<h3 class=\"title\">${this.title}</h3>` : nothing}\n          <div class=\"legend\" role=\"list\" aria-label=\"Chart legend\">\n            ${this.series.map(s => html`\n              <span class=\"legend-item\" role=\"listitem\">\n                <span class=\"legend-dot\" style=\"background:${s.color}\"></span>\n                ${s.name}\n              </span>\n            `)}\n          </div>\n        </div>\n      ` : nothing}\n      <div class=\"chart-wrap\" @mouseleave=${this._onMouseLeave}>\n        <svg viewBox=\"0 0 ${this._width} ${h}\" aria-label=\"${this.title || 'Analytics chart'}\"\n             role=\"img\" tabindex=\"0\">\n          <defs>\n            ${this.series.map(s => {\n              const gid = `area-grad-${this._seriesId(s.name)}`;\n              return svg`\n                <linearGradient id=\"${gid}\" x1=\"0\" x2=\"0\" y1=\"0\" y2=\"1\">\n                  <stop offset=\"0%\" stop-color=\"${s.color}\" stop-opacity=\"1\" />\n                  <stop offset=\"100%\" stop-color=\"${s.color}\" stop-opacity=\"0\" />\n                </linearGradient>\n              `;\n            })}\n          </defs>\n          ${this.yLabel ? svg`\n            <text class=\"y-label\" x=\"4\" y=\"${m.top + ih / 2}\"\n                  transform=\"rotate(-90, 12, ${m.top + ih / 2})\"\n                  text-anchor=\"middle\">${this.yLabel}</text>\n          ` : nothing}\n          ${Array.from({ length: yTicks }, (_, i) => {\n            const val = this._yMin + (yRange * i) / (yTicks - 1);\n            const y = this._scaleY(val);\n            return svg`\n              <line class=\"grid-line\" x1=\"${m.left}\" x2=\"${this._width - m.right}\" y1=\"${y}\" y2=\"${y}\" />\n              <text class=\"axis-label\" x=\"${m.left - 10}\" y=\"${y + 3}\" text-anchor=\"end\">\n                ${this._formatTick(val)}\n              </text>\n            `;\n          })}\n          ${xs.length <= 12 ? xs.map((x) => svg`\n            <text class=\"axis-label\" x=\"${this._scaleX(x)}\" y=\"${h - 18}\" text-anchor=\"middle\">\n              ${x}\n            </text>\n          `) : xs.filter((_, i) => i % Math.ceil(xs.length / 8) === 0).map(x => svg`\n            <text class=\"axis-label\" x=\"${this._scaleX(x)}\" y=\"${h - 18}\" text-anchor=\"middle\">\n              ${x}\n            </text>\n          `)}\n          ${this.series.map(s => svg`\n            <path class=\"data-area\" d=\"${this._buildArea(s.data)}\"\n                  fill=\"url(#area-grad-${this._seriesId(s.name)})\" />\n            <path class=\"data-line\" d=\"${this._buildPath(s.data)}\" stroke=\"${s.color}\" />\n            <path class=\"hit-area\" d=\"${this._buildPath(s.data)}\" />\n            ${s.data.map((d, idx) => svg`\n              <circle class=\"data-point\" cx=\"${this._scaleX(d.x)}\" cy=\"${this._scaleY(d.y)}\" r=\"3\"\n                      fill=\"${s.color}\" opacity=\"${this._hover?.x === d.x && this._hover?.seriesName === s.name ? 1 : 0}\"\n                      @mouseenter=${(e: MouseEvent) => this._onPointHover(s, idx, e)} />\n              <circle cx=\"${this._scaleX(d.x)}\" cy=\"${this._scaleY(d.y)}\" r=\"10\"\n                      fill=\"transparent\" style=\"cursor:pointer\"\n                      @mouseenter=${(e: MouseEvent) => this._onPointHover(s, idx, e)} />\n            `)}\n          `)}\n        </svg>\n        ${this._hover ? html`\n          <div class=\"tooltip\" style=\"left:${this._hover.px}px;top:${this._hover.py}px\">\n            <div class=\"tooltip-label\">${this._hover.x}</div>\n            <div class=\"tooltip-value\" style=\"color:${this._hover.color}\">\n              ${this._hover.seriesName}: ${this._hover.y}\n            </div>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\n/**\n * Round a positive value UP to the next \"nice\" number — one of\n * {1, 2, 2.5, 5, 10} times a power of 10. Gives the y-axis 5–25%\n * headroom above the data peak so the topmost line never touches\n * the top grid line. Matches Chart.js / D3 / Recharts conventions.\n */\nfunction niceMax(v: number): number {\n  if (v <= 0) return 1;\n  const exp = Math.floor(Math.log10(v));\n  const factor = 10 ** exp;\n  const m = v / factor;\n  let nice: number;\n  if (m <= 1) nice = 1;\n  else if (m <= 2) nice = 2;\n  else if (m <= 2.5) nice = 2.5;\n  else if (m <= 5) nice = 5;\n  else nice = 10;\n  return nice * factor;\n}\n\n/**\n * Round a value DOWN to a \"nice\" number ≤ 0. For domains with all-positive\n * data this returns 0 (preserves the natural baseline). For domains that dip\n * negative it pads further so the bottom-most point doesn't touch the floor.\n */\nfunction niceMin(v: number): number {\n  if (v >= 0) return 0;\n  return -niceMax(-v);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-analytics-chart': AiAnalyticsChart;\n  }\n}\n"],"names":["AiAnalyticsChart","LitElement","entries","s","d","set","niceMin","niceMax","x","xs","idx","m","w","y","h","range","data","i","px","py","baseY","line","lastX","firstX","name","val","series","e","yTicks","yRange","ih","html","nothing","gid","svg","_","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement","v","factor","nice"],"mappings":"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"}
+{"version":3,"file":"ai-analytics-chart.js","sources":["../../../src/components/ai-analytics-chart/ai-analytics-chart.ts"],"sourcesContent":["/**\n * @element ai-analytics-chart\n * Responsive multi-series SVG line chart with axis labels, legend, and hover tooltips.\n *\n * @example\n * ```html\n * <ai-analytics-chart\n *   title=\"Latency (ms)\"\n *   yLabel=\"ms\"\n *   .series=${[{name:'p50', color:'#4ade80', data:[{x:'Mon',y:120},{x:'Tue',y:98}]}]}\n * ></ai-analytics-chart>\n * ```\n *\n * @fires {CustomEvent<{series: string, x: string, y: number}>} ai-analytics-point-hover - Data point hovered\n *\n * @cssprop [--cg-color-surface-cards-background] - Chart card background\n * @cssprop [--cg-color-surface-cards-border] - Card border + grid line 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 AnalyticsSeries {\n  name: string;\n  color: string;\n  data: { x: string; y: number }[];\n}\n\ninterface HoverPoint {\n  seriesName: string;\n  color: string;\n  x: string;\n  y: number;\n  px: number;\n  py: number;\n}\n\n@customElement('ai-analytics-chart')\nexport class AiAnalyticsChart 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      padding: var(--cg-spacing-20);\n      box-shadow: var(--cg-elevation-1);\n      animation: fadeSlideIn var(--cg-transition-duration-fast) 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: flex-start;\n      padding-bottom: var(--cg-spacing-12);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\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      color: var(--cg-color-surface-base-text);\n      margin: 0;\n    }\n\n    .legend {\n      display: flex;\n      gap: var(--cg-spacing-12);\n      flex-wrap: wrap;\n    }\n\n    .legend-item {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    .legend-dot {\n      width: var(--cg-spacing-8);\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      flex-shrink: 0;\n    }\n\n    .chart-wrap {\n      position: relative;\n      width: 100%;\n    }\n\n    svg {\n      display: block;\n      width: 100%;\n      overflow: visible;\n    }\n\n    .axis-label {\n      font-size: var(--cg-font-size-xs);\n      fill: var(--cg-color-chart-axis);\n    }\n\n    .grid-line {\n      stroke: var(--cg-color-chart-grid);\n      stroke-width: 0.5;\n    }\n\n    .data-line {\n      fill: none;\n      stroke-width: 2;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n    }\n\n    .data-point {\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .hit-area {\n      fill: transparent;\n      stroke: transparent;\n      stroke-width: 12;\n      cursor: pointer;\n    }\n\n    .tooltip {\n      position: absolute;\n      background: var(--cg-color-surface-cards-emphasis);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-100);\n      box-shadow: var(--cg-elevation-2);\n      padding: var(--cg-spacing-6) var(--cg-spacing-8);\n      font-size: var(--cg-font-size-xs);\n      pointer-events: none;\n      z-index: 10;\n      white-space: nowrap;\n      transform: translate(-50%, -100%);\n      margin-top: calc(-1 * var(--cg-spacing-8));\n    }\n\n    .tooltip-label {\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-2);\n    }\n\n    .tooltip-value {\n      font-weight: var(--cg-font-weight-semibold);\n    }\n\n    .y-label {\n      font-size: var(--cg-font-size-xs);\n      fill: var(--cg-color-chart-axis);\n    }\n\n    :focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-color-focus-ring);\n    }\n  `];\n  @property({ type: Array }) series: AnalyticsSeries[] = [];\n  @property({ type: String }) override title = '';\n  @property({ type: String }) yLabel = '';\n  @property({ type: Number }) height = 200;\n\n  @state() private _hover: HoverPoint | null = null;\n  @state() private _width = 400;\n\n  private _ro?: ResizeObserver;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this._ro = new ResizeObserver((entries) => {\n      for (const e of entries) {\n        // contentRect already excludes the host's padding, so we use it directly.\n        this._width = e.contentRect.width;\n      }\n    });\n    this._ro.observe(this);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this._ro?.disconnect();\n  }\n\n  private get _margin() {\n    return { top: 10, right: 16, bottom: 28, left: this.yLabel ? 48 : 40 };\n  }\n\n  private get _allY(): number[] {\n    return this.series.flatMap(s => s.data.map(d => d.y));\n  }\n\n  private get _allX(): string[] {\n    const set = new Set<string>();\n    this.series.forEach(s => s.data.forEach(d => set.add(d.x)));\n    return [...set].sort();\n  }\n\n  private get _yMin() { return Math.min(0, ...this._allY); }\n  private get _yMax() { return Math.max(1, ...this._allY); }\n\n  private _scaleX(x: string): number {\n    const xs = this._allX;\n    const idx = xs.indexOf(x);\n    const m = this._margin;\n    const w = this._width - m.left - m.right;\n    return m.left + (xs.length > 1 ? (idx / (xs.length - 1)) * w : w / 2);\n  }\n\n  private _scaleY(y: number): number {\n    const m = this._margin;\n    const h = this.height - m.top - m.bottom;\n    const range = this._yMax - this._yMin || 1;\n    return m.top + h - ((y - this._yMin) / range) * h;\n  }\n\n  private _buildPath(data: { x: string; y: number }[]): string {\n    return data.map((d, i) => {\n      const px = this._scaleX(d.x);\n      const py = this._scaleY(d.y);\n      return `${i === 0 ? 'M' : 'L'}${px},${py}`;\n    }).join(' ');\n  }\n\n  private _onPointHover(series: AnalyticsSeries, idx: number, e: MouseEvent): void {\n    const d = series.data[idx];\n    if (!d) return;\n    const svgRect = (e.currentTarget as SVGElement).closest('svg')?.getBoundingClientRect();\n    if (!svgRect) return;\n    this._hover = {\n      seriesName: series.name,\n      color: series.color,\n      x: d.x,\n      y: d.y,\n      px: this._scaleX(d.x),\n      py: this._scaleY(d.y),\n    };\n    this.dispatchEvent(new CustomEvent('ai-analytics-point-hover', {\n      bubbles: true, composed: true,\n      detail: { series: series.name, x: d.x, y: d.y },\n    }));\n  }\n\n  private _onMouseLeave(): void {\n    this._hover = null;\n  }\n\n  override render() {\n    const m = this._margin;\n    const xs = this._allX;\n    const yTicks = 5;\n    const yRange = this._yMax - this._yMin || 1;\n    const h = this.height;\n    const ih = h - m.top - m.bottom;\n\n    return html`\n      ${this.title || this.series.length ? html`\n        <div class=\"header\">\n          ${this.title ? html`<h3 class=\"title\">${this.title}</h3>` : nothing}\n          <div class=\"legend\" role=\"list\" aria-label=\"Chart legend\">\n            ${this.series.map(s => html`\n              <span class=\"legend-item\" role=\"listitem\">\n                <span class=\"legend-dot\" style=\"background:${s.color}\"></span>\n                ${s.name}\n              </span>\n            `)}\n          </div>\n        </div>\n      ` : nothing}\n      <div class=\"chart-wrap\" @mouseleave=${this._onMouseLeave}>\n        <svg viewBox=\"0 0 ${this._width} ${h}\" aria-label=\"${this.title || 'Analytics chart'}\"\n             role=\"img\" tabindex=\"0\">\n          ${this.yLabel ? html`\n            <text class=\"y-label\" x=\"4\" y=\"${m.top + ih / 2}\"\n                  transform=\"rotate(-90, 12, ${m.top + ih / 2})\"\n                  text-anchor=\"middle\">${this.yLabel}</text>\n          ` : nothing}\n          ${Array.from({ length: yTicks }, (_, i) => {\n            const val = this._yMin + (yRange * i) / (yTicks - 1);\n            const y = this._scaleY(val);\n            return html`\n              <line class=\"grid-line\" x1=\"${m.left}\" x2=\"${this._width - m.right}\" y1=\"${y}\" y2=\"${y}\" />\n              <text class=\"axis-label\" x=\"${m.left - 6}\" y=\"${y + 3}\" text-anchor=\"end\">\n                ${Math.round(val * 10) / 10}\n              </text>\n            `;\n          })}\n          ${xs.length <= 12 ? xs.map((x, i) => html`\n            <text class=\"axis-label\" x=\"${this._scaleX(x)}\" y=\"${h - 4}\" text-anchor=\"middle\">\n              ${x}\n            </text>\n          `) : xs.filter((_, i) => i % Math.ceil(xs.length / 8) === 0).map(x => html`\n            <text class=\"axis-label\" x=\"${this._scaleX(x)}\" y=\"${h - 4}\" text-anchor=\"middle\">\n              ${x}\n            </text>\n          `)}\n          ${this.series.map(s => html`\n            <path class=\"data-line\" d=\"${this._buildPath(s.data)}\" stroke=\"${s.color}\" />\n            <path class=\"hit-area\" d=\"${this._buildPath(s.data)}\" />\n            ${s.data.map((d, idx) => html`\n              <circle class=\"data-point\" cx=\"${this._scaleX(d.x)}\" cy=\"${this._scaleY(d.y)}\" r=\"3\"\n                      fill=\"${s.color}\" opacity=\"${this._hover?.x === d.x && this._hover?.seriesName === s.name ? 1 : 0}\"\n                      @mouseenter=${(e: MouseEvent) => this._onPointHover(s, idx, e)} />\n              <circle cx=\"${this._scaleX(d.x)}\" cy=\"${this._scaleY(d.y)}\" r=\"10\"\n                      fill=\"transparent\" style=\"cursor:pointer\"\n                      @mouseenter=${(e: MouseEvent) => this._onPointHover(s, idx, e)} />\n            `)}\n          `)}\n        </svg>\n        ${this._hover ? html`\n          <div class=\"tooltip\" style=\"left:${this._hover.px}px;top:${this._hover.py}px\">\n            <div class=\"tooltip-label\">${this._hover.x}</div>\n            <div class=\"tooltip-value\" style=\"color:${this._hover.color}\">\n              ${this._hover.seriesName}: ${this._hover.y}\n            </div>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-analytics-chart': AiAnalyticsChart;\n  }\n}\n"],"names":["AiAnalyticsChart","LitElement","entries","s","d","set","x","xs","idx","m","w","y","h","range","data","px","py","series","e","yTicks","yRange","ih","html","nothing","_","i","val","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 import { css as h, LitElement as b, html as l, nothing as p } from "lit";
 import { property as g, state as u, customElement as v } from "lit/decorators.js";
-import { h as f, r as m, f as y } from "../../chunks/premium.css-9I4kHrsl.js";
+import { h as f, r as m, f as y } from "../../chunks/premium.css-DHekUEUt.js";
 var _ = Object.defineProperty, x = Object.getOwnPropertyDescriptor, d = (t, o, i, r) => {
   for (var e = r > 1 ? void 0 : r ? x(o, i) : o, n = t.length - 1, a; n >= 0; n--)
     (a = t[n]) && (e = (r ? a(o, i, e) : a(e)) || e);
@@ -91,7 +91,7 @@ let s = class extends b {
       return l`<span class="annotated-span" tabindex="0" role="note"
           aria-label="${n.annotation.label}: ${n.text}"
           style="border-color: ${a}"
-          @click=${() => this._handleAnnotationClick(n.annotation)}>${n.text}</span>${c ? l`<span class="annotation-tag" style="background: ${a}; color: #000;">${n.annotation.label}${n.annotation.confidence !== void 0 ? l` · ${Math.round(n.annotation.confidence * 100)}%` : p}</span>` : p}`;
+          @click=${() => this._handleAnnotationClick(n.annotation)}>${n.text}</span>${c ? l`<span class="annotation-tag" style="background: ${a}; color: var(--cg-overlay-dark-text);">${n.annotation.label}${n.annotation.confidence !== void 0 ? l` · ${Math.round(n.annotation.confidence * 100)}%` : p}</span>` : p}`;
     });
   }
   render() {

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

@@ -1 +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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"}
+{"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: var(--cg-overlay-dark-text);\">${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":";;;;;;;;AAqCO,IAAMA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GA6GuB,KAAA,UAAkB,IAGnB,KAAA,cAA4B,CAAA,GAG5B,KAAA,SAAqB;AAAA,MAC9C,EAAE,MAAM,UAAU,OAAO,UAAA;AAAA,MACzB,EAAE,MAAM,gBAAgB,OAAO,UAAA;AAAA,MAC/B,EAAE,MAAM,YAAY,OAAO,UAAA;AAAA,MAC3B,EAAE,MAAM,QAAQ,OAAO,UAAA;AAAA,MACvB,EAAE,MAAM,WAAW,OAAO,UAAA;AAAA,IAAU,GAIT,KAAA,WAAoB,IAExC,KAAQ,iBAAyB,IACjC,KAAQ,oBAAuC;AAAA,EAAA;AAAA,EAEhD,uBAAuBC,GAAwB;AACrD,SAAK,oBAAoB,KAAK,sBAAsBA,IAAa,OAAOA,GACxE,KAAK,cAAc,IAAI,YAAY,wBAAwB;AAAA,MACzD,SAAS;AAAA,MAAM,UAAU;AAAA,MACzB,QAAQ,EAAE,YAAAA,EAAA;AAAA,IAAW,CACtB,CAAC;AAAA,EACJ;AAAA,EAEQ,cAAcA,GAAwBC,GAAU;AACtD,IAAAA,EAAE,gBAAA,GACF,KAAK,cAAc,IAAI,YAAY,wBAAwB;AAAA,MACzD,SAAS;AAAA,MAAM,UAAU;AAAA,MACzB,QAAQ,EAAE,YAAAD,EAAA;AAAA,IAAW,CACtB,CAAC;AAAA,EACJ;AAAA,EAEQ,iBAAiB;AACvB,QAAI,CAAC,KAAK,YAAY,CAAC,KAAK,eAAgB;AAE5C,UAAME,IAAM,OAAO,aAAA;AACnB,QAAI,CAACA,KAAOA,EAAI,YAAa;AAE7B,UAAMC,IAAOD,EAAI,SAAA;AACjB,QAAI,CAACC,EAAK,OAAQ;AAGlB,UAAMC,IAAQF,EAAI,WAAW,CAAC,GACxBG,IAAY,KAAK,YAAY,cAAc,UAAU;AAC3D,QAAI,CAACA,KAAa,CAACA,EAAU,SAASD,EAAM,cAAc,EAAG;AAG7D,UAAME,IAAS,SAAS,iBAAiBD,GAAW,WAAW,SAAS;AACxE,QAAIE,IAAa,GACbC,IAAQ;AACZ,WAAOF,EAAO,cAAY;AACxB,UAAIA,EAAO,gBAAgBF,EAAM,gBAAgB;AAC/C,QAAAG,KAAcH,EAAM,aACpBI,IAAQ;AACR;AAAA,MACF;AACA,MAAAD,KAAeD,EAAO,YAAY,aAAa,UAAU;AAAA,IAC3D;AACA,QAAI,CAACE,EAAO;AAEZ,UAAMR,IAAyB;AAAA,MAC7B,OAAOO;AAAA,MACP,KAAKA,IAAaJ,EAAK;AAAA,MACvB,OAAO,KAAK;AAAA,IAAA;AAGd,SAAK,cAAc,IAAI,YAAY,qBAAqB;AAAA,MACtD,SAAS;AAAA,MAAM,UAAU;AAAA,MACzB,QAAQ,EAAE,YAAAH,GAAY,MAAAG,EAAA;AAAA,IAAK,CAC5B,CAAC,GAEFD,EAAI,gBAAA;AAAA,EACN;AAAA;AAAA,EAGQ,eAAeO,GAAuB;AAG5C,WAFI,sBAAsB,KAAKA,CAAK,KAChC,yCAAyC,KAAKA,CAAK,KACnD,cAAc,KAAKA,CAAK,IAAUA,IAC/B;AAAA,EACT;AAAA,EAEQ,eAAeC,GAAsB;AAC3C,UAAMC,IAAM,KAAK,OAAO,KAAK,OAAKC,EAAE,SAASF,CAAI,GAAG,SAAS;AAC7D,WAAO,KAAK,eAAeC,CAAG;AAAA,EAChC;AAAA,EAEQ,0BAA0B;AAChC,QAAI,CAAC,KAAK,QAAS,QAAOE;AAC1B,QAAI,KAAK,YAAY,WAAW,UAAU,KAAK;AAG/C,UAAMC,IAAS,CAAC,GAAG,KAAK,WAAW,EAChC,KAAK,CAACC,GAAGC,MAAMD,EAAE,QAAQC,EAAE,SAASA,EAAE,MAAMD,EAAE,GAAG,GAG9CE,IAA+B,CAAA;AACrC,QAAIC,IAAU;AACd,eAAWC,KAAOL;AAChB,MAAIK,EAAI,SAASD,MACfD,EAAe,KAAKE,CAAG,GACvBD,IAAUC,EAAI;AAIlB,UAAMC,IAAmE,CAAA;AACzE,QAAIC,IAAS;AAEb,eAAWF,KAAOF,GAAgB;AAEhC,YAAMK,IAAQ,KAAK,IAAIH,EAAI,OAAOE,CAAM,GAClCE,IAAM,KAAK,IAAIJ,EAAI,KAAK,KAAK,QAAQ,MAAM;AACjD,MAAIG,KAASC,MAETD,IAAQD,KACVD,EAAU,KAAK,KAAK,QAAQ,MAAMC,GAAQC,CAAK,CAAC,GAElDF,EAAU,KAAK;AAAA,QACb,MAAM,KAAK,QAAQ,MAAME,GAAOC,CAAG;AAAA,QACnC,YAAYJ;AAAA,MAAA,CACb,GACDE,IAASE;AAAA,IACX;AACA,WAAIF,IAAS,KAAK,QAAQ,UACxBD,EAAU,KAAK,KAAK,QAAQ,MAAMC,CAAM,CAAC,GAGpCD,EAAU,IAAI,CAAAI,MAAK;AACxB,UAAI,OAAOA,KAAM,SAAU,QAAOA;AAClC,YAAMf,IAAQ,KAAK,eAAee,EAAE,WAAW,KAAK;AACpC,MAAAA,EAAE,WAAW;AAC7B,YAAMC,IAAW,KAAK,sBAAsBD,EAAE;AAC9C,aAAOX;AAAA,wBACWW,EAAE,WAAW,KAAK,KAAKA,EAAE,IAAI;AAAA,iCACpBf,CAAK;AAAA,mBACnB,MAAM,KAAK,uBAAuBe,EAAE,UAAU,CAAC,IAAIA,EAAE,IAAI,UAAUC,IAAWZ,oDAAuDJ,CAAK,0CAA0Ce,EAAE,WAAW,KAAK,GAAGA,EAAE,WAAW,eAAe,SAAYX,OAAU,KAAK,MAAMW,EAAE,WAAW,aAAa,GAAG,CAAC,MAAME,CAAO,YAAYA,CAAO;AAAA,IACnV,CAAC;AAAA,EACH;AAAA,EAES,SAAS;AAChB,WAAOb;AAAA;AAAA,UAED,KAAK,YAAY,KAAK,OAAO,SAAS,IAAIA;AAAA;AAAA,cAEtC,KAAK,OAAO,IAAI,CAAAD,MAAKC;AAAA,yCACM,KAAK,mBAAmBD,EAAE,OAAO,aAAa,EAAE;AAAA,gCACzDA,EAAE,KAAK;AAAA,yBACd,MAAM;AAAE,WAAK,iBAAiB,KAAK,mBAAmBA,EAAE,OAAO,KAAKA,EAAE;AAAA,IAAM,CAAC;AAAA,6DACzCA,EAAE,KAAK;AAAA,kBAClDA,EAAE,IAAI;AAAA;AAAA,aAEX,CAAC;AAAA,kCACoB,KAAK,YAAY,MAAM,cAAc,KAAK,YAAY,WAAW,IAAI,MAAM,EAAE;AAAA;AAAA,YAEnGc,CAAO;AAAA;AAAA,wCAEqB,KAAK,cAAc;AAAA,YAC/C,KAAK,yBAAyB;AAAA;AAAA;AAAA;AAAA,EAIxC;AACF;AAnRa5B,EACK,SAAS,CAAC6B,GAAWC,GAAeC,GAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA0GzE;AAE2BC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7GflC,EA6GiB,WAAA,WAAA,CAAA;AAGDiC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAhHdlC,EAgHgB,WAAA,eAAA,CAAA;AAGAiC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAnHdlC,EAmHgB,WAAA,UAAA,CAAA;AASEiC,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA5HhBlC,EA4HkB,WAAA,YAAA,CAAA;AAEZiC,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA9HInC,EA8HM,WAAA,kBAAA,CAAA;AACAiC,EAAA;AAAA,EAAhBE,EAAA;AAAM,GA/HInC,EA+HM,WAAA,qBAAA,CAAA;AA/HNA,IAANiC,EAAA;AAAA,EADNG,EAAc,eAAe;AAAA,GACjBpC,CAAA;"}

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

@@ -12,19 +12,10 @@ export declare class AiApiKeyManager extends LitElement {
     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 {

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

@@ -1 +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"}
+{"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;;;;;;;;;;;;;;;;;GAiBG;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,4BA6KnB;IACwB,IAAI,EAAE,WAAW,EAAE,CAAM;IACxB,OAAO,SAAM;IAEhC,OAAO,CAAC,SAAS,CAAuB;IAEjD,OAAO,CAAC,SAAS;IAMjB,OAAO,CAAC,SAAS;IAOjB,OAAO,CAAC,SAAS;YAOH,OAAO;IAQZ,MAAM;CAoDhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,eAAe,CAAC;KACvC;CACF"}