@cognivo/components 0.8.0

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

@@ -0,0 +1,334 @@
+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;
+};
+let n = class extends x {
+  constructor() {
+    super(...arguments), this.series = [], this.title = "", this.yLabel = "", this.height = 200, this._hover = null, this._width = 400;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._ro = new ResizeObserver((t) => {
+      for (const e of t)
+        this._width = e.contentRect.width;
+    }), this._ro.observe(this);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._ro?.disconnect();
+  }
+  get _margin() {
+    return { top: 24, right: 24, bottom: 48, left: this.yLabel ? 64 : 52 };
+  }
+  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];
+  }
+  get _yMin() {
+    return X(Math.min(0, ...this._allY));
+  }
+  get _yMax() {
+    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);
+  }
+  _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;
+  }
+  _buildPath(t) {
+    return t.map((e, a) => {
+      const r = this._scaleX(e.x), s = this._scaleY(e.y);
+      return `${a === 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) {
+    const r = t.data[e];
+    !r || !a.currentTarget.closest("svg")?.getBoundingClientRect() || (this._hover = {
+      seriesName: t.name,
+      color: t.color,
+      x: r.x,
+      y: r.y,
+      px: this._scaleX(r.x),
+      py: this._scaleY(r.y)
+    }, this.dispatchEvent(new CustomEvent("ai-analytics-point-hover", {
+      bubbles: !0,
+      composed: !0,
+      detail: { series: t.name, x: r.x, y: r.y }
+    })));
+  }
+  _onMouseLeave() {
+    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`
+        <div class="header">
+          ${this.title ? p`<h3 class="title">${this.title}</h3>` : v}
+          <div class="legend" role="list" aria-label="Chart legend">
+            ${this.series.map((i) => p`
+              <span class="legend-item" role="listitem">
+                <span class="legend-dot" style="background:${i.color}"></span>
+                ${i.name}
+              </span>
+            `)}
+          </div>
+        </div>
+      ` : v}
+      <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})"
+                  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`
+              <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>
+            `;
+    })}
+          ${e.length <= 12 ? e.map((i) => h`
+            <text class="axis-label" x="${this._scaleX(i)}" y="${s - 18}" text-anchor="middle">
+              ${i}
+            </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}
+            </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"
+                      fill="transparent" style="cursor:pointer"
+                      @mouseenter=${(c) => this._onPointHover(i, g, c)} />
+            `)}
+          `)}
+        </svg>
+        ${this._hover ? p`
+          <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}
+      </div>
+    `;
+  }
+};
+n.styles = [b, $, w, m`
+    :host {
+      display: block;
+      background: var(--cg-color-surface-cards-background);
+      color: var(--cg-color-surface-base-text);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      padding: var(--cg-spacing-24);
+      box-shadow: var(--cg-elevation-1);
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;
+    }
+    :host([hidden]) { display: none; }
+
+    .header {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      gap: var(--cg-spacing-16);
+      padding-bottom: var(--cg-spacing-24);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      margin-bottom: var(--cg-spacing-20);
+    }
+
+    .title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+      margin: 0;
+    }
+
+    .legend {
+      display: flex;
+      gap: var(--cg-spacing-12);
+      flex-wrap: wrap;
+    }
+
+    .legend-item {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+    }
+
+    .legend-dot {
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      flex-shrink: 0;
+    }
+
+    .chart-wrap {
+      position: relative;
+      width: 100%;
+    }
+
+    svg {
+      display: block;
+      width: 100%;
+      overflow: visible;
+    }
+
+    .axis-label {
+      font-size: var(--cg-font-size-xs);
+      fill: var(--cg-color-input-text-placeholder);
+    }
+
+    .grid-line {
+      stroke: var(--cg-color-surface-cards-divider);
+      stroke-width: 0.5;
+    }
+
+    .data-line {
+      fill: none;
+      stroke-width: 2;
+      stroke-linecap: round;
+      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);
+    }
+
+    .hit-area {
+      fill: transparent;
+      stroke: transparent;
+      stroke-width: 12;
+      cursor: pointer;
+    }
+
+    .tooltip {
+      position: absolute;
+      background: var(--cg-color-surface-cards-emphasis);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      box-shadow: var(--cg-elevation-2);
+      padding: var(--cg-spacing-6) var(--cg-spacing-8);
+      font-size: var(--cg-font-size-xs);
+      pointer-events: none;
+      z-index: 10;
+      white-space: nowrap;
+      transform: translate(-50%, -100%);
+      margin-top: calc(-1 * var(--cg-spacing-8));
+    }
+
+    .tooltip-label {
+      color: var(--cg-color-input-text-placeholder);
+      margin-bottom: var(--cg-spacing-2);
+    }
+
+    .tooltip-value {
+      font-weight: var(--cg-font-weight-semibold);
+    }
+
+    .y-label {
+      font-size: var(--cg-font-size-xs);
+      fill: var(--cg-color-input-text-placeholder);
+    }
+
+    :focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+  `];
+d([
+  u({ type: Array })
+], n.prototype, "series", 2);
+d([
+  u({ type: String })
+], n.prototype, "title", 2);
+d([
+  u({ type: String })
+], n.prototype, "yLabel", 2);
+d([
+  u({ type: Number })
+], n.prototype, "height", 2);
+d([
+  f()
+], n.prototype, "_hover", 2);
+d([
+  f()
+], n.prototype, "_width", 2);
+n = d([
+  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
+};
+//# sourceMappingURL=ai-analytics-chart.js.map

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

@@ -0,0 +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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"}

package/dist/components/ai-annotation/ai-annotation.d.ts

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+interface Annotation {
+    start: number;
+    end: number;
+    label: string;
+    confidence?: number;
+}
+interface LabelDef {
+    name: string;
+    color: string;
+}
+export declare class AiAnnotation extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Plain text content */
+    content: string;
+    /** Existing annotations */
+    annotations: Annotation[];
+    /** Available label definitions */
+    labels: LabelDef[];
+    /** Allow creating new annotations */
+    editable: boolean;
+    private _selectedLabel;
+    private _activeAnnotation;
+    private _handleAnnotationClick;
+    private _handleRemove;
+    private _handleMouseUp;
+    /** Sanitize color to prevent CSS injection — only allow hex, rgb, hsl, named colors */
+    private _sanitizeColor;
+    private _getLabelColor;
+    private _renderAnnotatedContent;
+    render(): import('lit').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=ai-annotation.d.ts.map

package/dist/components/ai-annotation/ai-annotation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-annotation.d.ts","sourceRoot":"","sources":["../../../src/components/ai-annotation/ai-annotation.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,UAAU,UAAU;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,UAAU,QAAQ;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BA0GnB;IACH,yBAAyB;IACG,OAAO,EAAE,MAAM,CAAM;IAEjD,2BAA2B;IACA,WAAW,EAAE,UAAU,EAAE,CAAM;IAE1D,kCAAkC;IACP,MAAM,EAAE,QAAQ,EAAE,CAM3C;IAEF,qCAAqC;IACR,QAAQ,EAAE,OAAO,CAAS;IAE9C,OAAO,CAAC,cAAc,CAAc;IACpC,OAAO,CAAC,iBAAiB,CAA2B;IAE7D,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,cAAc;IA0CtB,uFAAuF;IACvF,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,uBAAuB;IAoDtB,MAAM;CAuBhB"}

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

@@ -0,0 +1,254 @@
+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";
+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);
+  return r && e && _(o, i, e), e;
+};
+let s = class extends b {
+  constructor() {
+    super(...arguments), this.content = "", this.annotations = [], this.labels = [
+      { name: "Person", color: "#60a5fa" },
+      { name: "Organization", color: "#4ade80" },
+      { name: "Location", color: "#fbbf24" },
+      { name: "Date", color: "#f87171" },
+      { name: "Concept", color: "#dfff61" }
+    ], this.editable = !1, this._selectedLabel = "", this._activeAnnotation = null;
+  }
+  _handleAnnotationClick(t) {
+    this._activeAnnotation = this._activeAnnotation === t ? null : t, this.dispatchEvent(new CustomEvent("ai-annotation-select", {
+      bubbles: !0,
+      composed: !0,
+      detail: { annotation: t }
+    }));
+  }
+  _handleRemove(t, o) {
+    o.stopPropagation(), this.dispatchEvent(new CustomEvent("ai-annotation-remove", {
+      bubbles: !0,
+      composed: !0,
+      detail: { annotation: t }
+    }));
+  }
+  _handleMouseUp() {
+    if (!this.editable || !this._selectedLabel) return;
+    const t = window.getSelection();
+    if (!t || t.isCollapsed) return;
+    const o = t.toString();
+    if (!o.trim()) return;
+    const i = t.getRangeAt(0), r = this.shadowRoot?.querySelector(".content");
+    if (!r || !r.contains(i.startContainer)) return;
+    const e = document.createTreeWalker(r, NodeFilter.SHOW_TEXT);
+    let n = 0, a = !1;
+    for (; e.nextNode(); ) {
+      if (e.currentNode === i.startContainer) {
+        n += i.startOffset, a = !0;
+        break;
+      }
+      n += e.currentNode.textContent?.length || 0;
+    }
+    if (!a) return;
+    const c = {
+      start: n,
+      end: n + o.length,
+      label: this._selectedLabel
+    };
+    this.dispatchEvent(new CustomEvent("ai-annotation-add", {
+      bubbles: !0,
+      composed: !0,
+      detail: { annotation: c, text: o }
+    })), t.removeAllRanges();
+  }
+  /** Sanitize color to prevent CSS injection — only allow hex, rgb, hsl, named colors */
+  _sanitizeColor(t) {
+    return /^#[0-9a-fA-F]{3,8}$/.test(t) || /^rgb\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\)$/.test(t) || /^[a-zA-Z]+$/.test(t) ? t : "#a1a1aa";
+  }
+  _getLabelColor(t) {
+    const o = this.labels.find((i) => i.name === t)?.color || "#a1a1aa";
+    return this._sanitizeColor(o);
+  }
+  _renderAnnotatedContent() {
+    if (!this.content) return l`<div class="empty">No content to annotate</div>`;
+    if (this.annotations.length === 0) return this.content;
+    const t = [...this.annotations].sort((n, a) => n.start - a.start || a.end - n.end), o = [];
+    let i = -1;
+    for (const n of t)
+      n.start >= i && (o.push(n), i = n.end);
+    const r = [];
+    let e = 0;
+    for (const n of o) {
+      const a = Math.max(n.start, e), c = Math.min(n.end, this.content.length);
+      a >= c || (a > e && r.push(this.content.slice(e, a)), r.push({
+        text: this.content.slice(a, c),
+        annotation: n
+      }), e = c);
+    }
+    return e < this.content.length && r.push(this.content.slice(e)), r.map((n) => {
+      if (typeof n == "string") return n;
+      const a = this._getLabelColor(n.annotation.label);
+      n.annotation.confidence;
+      const c = this._activeAnnotation === n.annotation;
+      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}`;
+    });
+  }
+  render() {
+    return l`
+      <div class="container" role="document" aria-label="Annotated text">
+        ${this.editable || this.labels.length > 0 ? l`
+          <div class="toolbar">
+            ${this.labels.map((t) => l`
+              <button class="label-btn ${this._selectedLabel === t.name ? "selected" : ""}"
+                style="color: ${t.color}"
+                @click=${() => {
+      this._selectedLabel = this._selectedLabel === t.name ? "" : t.name;
+    }}>
+                <span class="label-dot" style="background: ${t.color}"></span>
+                ${t.name}
+              </button>
+            `)}
+            <span class="stats">${this.annotations.length} annotation${this.annotations.length !== 1 ? "s" : ""}</span>
+          </div>
+        ` : p}
+
+        <div class="content" @mouseup=${this._handleMouseUp}>
+          ${this._renderAnnotatedContent()}
+        </div>
+      </div>
+    `;
+  }
+};
+s.styles = [f, m, y, h`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;
+    }
+
+    .container {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      overflow: hidden;
+    }
+
+    /* Toolbar — compact, no label text */
+    .toolbar {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-12) var(--cg-spacing-20);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      flex-wrap: wrap;
+    }
+    .label-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-4) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-50) solid transparent;
+      background: none;
+      font: inherit;
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      cursor: pointer;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .label-btn:hover { background: var(--cg-overlay-dark-subtle); }
+    .label-btn.selected { border-color: currentColor; background: var(--cg-overlay-dark-subtle); }
+    .label-dot {
+      width: var(--cg-spacing-8);
+      height: var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+    }
+
+    .stats {
+      margin-left: auto;
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      font-family: var(--cg-font-family-mono);
+    }
+
+    /* Content */
+    .content {
+      padding: var(--cg-spacing-20) var(--cg-spacing-24);
+      font-size: var(--cg-font-size-sm);
+      line-height: var(--cg-line-height-relaxed);
+      color: var(--cg-color-surface-base-text);
+      user-select: text;
+      cursor: text;
+    }
+
+    .annotated-span {
+      cursor: pointer;
+      border-bottom: var(--cg-border-width-100) solid;
+      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .annotated-span:hover { opacity: 0.7; }
+    .annotated-span:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    /* Inline tag — shows on click */
+    .annotation-tag {
+      display: inline;
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      padding: var(--cg-spacing-1) var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+      margin-left: var(--cg-spacing-2);
+      vertical-align: middle;
+      line-height: 1;
+    }
+
+    /* Empty */
+    .empty {
+      padding: var(--cg-spacing-24);
+      text-align: center;
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-sm);
+    }
+
+    /* Reduced motion: disable entrance animation, show labels immediately */
+    @media (prefers-reduced-motion: reduce) {
+      :host {
+        animation: none !important;
+      }
+      .annotation-label {
+        opacity: 1;
+        transition: none !important;
+      }
+      .annotated-span {
+        transition: none !important;
+      }
+    }
+  `];
+d([
+  g({ type: String })
+], s.prototype, "content", 2);
+d([
+  g({ type: Array })
+], s.prototype, "annotations", 2);
+d([
+  g({ type: Array })
+], s.prototype, "labels", 2);
+d([
+  g({ type: Boolean })
+], s.prototype, "editable", 2);
+d([
+  u()
+], s.prototype, "_selectedLabel", 2);
+d([
+  u()
+], s.prototype, "_activeAnnotation", 2);
+s = d([
+  v("ai-annotation")
+], s);
+export {
+  s as AiAnnotation
+};
+//# sourceMappingURL=ai-annotation.js.map