@cognivo/components 0.8.0

package/dist/components/ai-kpi-grid/ai-kpi-grid.js

@@ -0,0 +1,180 @@
+import { css as v, LitElement as u, html as i, nothing as g } from "lit";
+import { property as c, customElement as p } from "lit/decorators.js";
+import { h, r as b, f, b as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var k = Object.defineProperty, w = Object.getOwnPropertyDescriptor, o = (r, e, l, s) => {
+  for (var a = s > 1 ? void 0 : s ? w(e, l) : e, n = r.length - 1, d; n >= 0; n--)
+    (d = r[n]) && (a = (s ? d(e, l, a) : d(a)) || a);
+  return s && a && k(e, l, a), a;
+};
+let t = class extends u {
+  constructor() {
+    super(...arguments), this.title = "", this.kpis = [], this.columns = 2, this.loading = !1;
+  }
+  _handleKpiClick(r) {
+    this.dispatchEvent(new CustomEvent("ai-kpi-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { label: r.label, value: r.value }
+    }));
+  }
+  _trendArrow(r) {
+    return r === "up" ? "↑" : r === "down" ? "↓" : "→";
+  }
+  _renderSkeleton() {
+    return Array.from({ length: this.columns * 2 }).map(() => i`
+      <div class="skeleton-cell" aria-hidden="true">
+        <div class="skel-line skel-label"></div>
+        <div class="skel-line skel-value"></div>
+        <div class="skel-line skel-delta"></div>
+      </div>
+    `);
+  }
+  render() {
+    return i`
+      <div class="card" role="region" aria-label="${this.title || "KPI Grid"}">
+        ${this.title ? i`<div class="card-title">${this.title}</div>` : g}
+        <div class="grid" style="grid-template-columns: repeat(${this.columns}, 1fr)">
+          ${this.loading ? this._renderSkeleton() : this.kpis.map((r) => i`
+            <div
+              class="kpi"
+              role="button"
+              tabindex="0"
+              aria-label="${r.label}: ${r.value}${r.delta ? `, ${r.delta}` : ""}"
+              @click=${() => this._handleKpiClick(r)}
+              @keydown=${(e) => {
+      (e.key === "Enter" || e.key === " ") && (e.preventDefault(), this._handleKpiClick(r));
+    }}
+            >
+              <div class="kpi-label">${r.label}</div>
+              <div class="kpi-value">${r.value}</div>
+              ${r.delta ? i`
+                <span class="kpi-delta ${r.trend || "neutral"}">
+                  <span class="arrow" aria-hidden="true">${this._trendArrow(r.trend)}</span>
+                  ${r.delta}
+                </span>
+              ` : g}
+            </div>
+          `)}
+        </div>
+      </div>
+    `;
+  }
+};
+t.styles = [h, b, f, m, v`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    .card {
+      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);
+    }
+
+    .card-title {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-input-text-placeholder);
+      padding: var(--cg-spacing-16) var(--cg-spacing-20) var(--cg-spacing-8);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+
+    /* Inset grid container */
+    .grid {
+      display: grid;
+      margin: 0 var(--cg-spacing-12) var(--cg-spacing-12);
+      background: var(--cg-overlay-dark-subtle);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-125);
+      overflow: hidden;
+    }
+
+    /* ── KPI cell ── */
+    .kpi {
+      padding: var(--cg-spacing-16) var(--cg-spacing-20);
+      cursor: pointer;
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      /* Borders via box-shadow trick — inner dividers only, no doubling */
+      box-shadow:
+        inset calc(-1 * var(--cg-border-width-50)) 0 0 var(--cg-color-surface-cards-border),
+        inset 0 calc(-1 * var(--cg-border-width-50)) 0 var(--cg-color-surface-cards-border);
+    }
+    .kpi:hover { background: var(--cg-color-action-secondary-background-hover); }
+    .kpi:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);
+    }
+    /* Single column — no right border, just bottom */
+    :host([columns="1"]) .kpi {
+      box-shadow: inset 0 calc(-1 * var(--cg-border-width-50)) 0 var(--cg-color-surface-cards-border);
+    }
+    :host([columns="1"]) .kpi:last-child { box-shadow: none; }
+
+
+    .kpi-label {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-input-text-placeholder);
+      margin-bottom: var(--cg-spacing-4);
+    }
+
+    .kpi-value {
+      font-size: var(--cg-font-size-xl);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-tight);
+      letter-spacing: var(--cg-letter-spacing-tight);
+      margin-bottom: var(--cg-spacing-4);
+    }
+
+    .kpi-delta {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+    }
+    .kpi-delta.up { color: var(--cg-color-status-success-text-default); }
+    .kpi-delta.down { color: var(--cg-color-status-error-text-default); }
+    .kpi-delta.neutral { color: var(--cg-color-input-text-placeholder); }
+
+    /* ── Loading skeleton ── */
+    .skeleton-cell {
+      padding: var(--cg-spacing-16) var(--cg-spacing-20);
+    }
+    .skel-line {
+      border-radius: var(--cg-border-radius-50);
+      background: linear-gradient(
+        90deg,
+        var(--cg-color-surface-container-background) 25%,
+        var(--cg-color-surface-cards-border) 50%,
+        var(--cg-color-surface-container-background) 75%
+      );
+      background-size: 200% 100%;
+      animation: shimmer 1.5s linear infinite;
+    }
+    .skel-label { width: 60%; height: var(--cg-spacing-8); margin-bottom: var(--cg-spacing-8); }
+    .skel-value { width: 50%; height: var(--cg-spacing-20); margin-bottom: var(--cg-spacing-6); }
+    .skel-delta { width: 40%; height: var(--cg-spacing-8); }
+
+  `];
+o([
+  c({ type: String })
+], t.prototype, "title", 2);
+o([
+  c({ attribute: !1 })
+], t.prototype, "kpis", 2);
+o([
+  c({ type: Number, reflect: !0 })
+], t.prototype, "columns", 2);
+o([
+  c({ type: Boolean })
+], t.prototype, "loading", 2);
+t = o([
+  p("ai-kpi-grid")
+], t);
+export {
+  t as AiKpiGrid
+};
+//# sourceMappingURL=ai-kpi-grid.js.map

package/dist/components/ai-kpi-grid/ai-kpi-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-kpi-grid.js","sources":["../../../src/components/ai-kpi-grid/ai-kpi-grid.ts"],"sourcesContent":["/**\n * @element ai-kpi-grid\n * Dashboard card displaying multiple KPI metrics in a configurable grid.\n * Each cell shows label, value, trend arrow, and optional icon.\n * Includes a loading skeleton state.\n *\n * @example\n * ```html\n * <ai-kpi-grid\n *   title=\"Performance\"\n *   columns=\"3\"\n *   .kpis=${[{ label: 'Revenue', value: '$12.4K', delta: '+8.2%', trend: 'up' }]}\n * ></ai-kpi-grid>\n * ```\n *\n * @prop {string} title - Card header title\n * @prop {KpiItem[]} kpis - Array of KPI items with label, value, delta, trend, icon\n * @prop {number} columns - Number of grid columns (default 2)\n * @prop {boolean} loading - Show skeleton loading state\n *\n * @fires {CustomEvent<{label: string, value: string}>} ai-kpi-click - When a KPI cell is clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes, shimmerKeyframes } from '../../styles/index.js';\n\ninterface KpiItem {\n  label: string;\n  value: string;\n  delta?: string;\n  trend?: 'up' | 'down' | 'neutral';\n  icon?: string;\n}\n\n@customElement('ai-kpi-grid')\nexport class AiKpiGrid extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, shimmerKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n\n    .card {\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    }\n\n    .card-title {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-input-text-placeholder);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20) var(--cg-spacing-8);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n\n    /* Inset grid container */\n    .grid {\n      display: grid;\n      margin: 0 var(--cg-spacing-12) var(--cg-spacing-12);\n      background: var(--cg-overlay-dark-subtle);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-125);\n      overflow: hidden;\n    }\n\n    /* ── KPI cell ── */\n    .kpi {\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      cursor: pointer;\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      /* Borders via box-shadow trick — inner dividers only, no doubling */\n      box-shadow:\n        inset calc(-1 * var(--cg-border-width-50)) 0 0 var(--cg-color-surface-cards-border),\n        inset 0 calc(-1 * var(--cg-border-width-50)) 0 var(--cg-color-surface-cards-border);\n    }\n    .kpi:hover { background: var(--cg-color-action-secondary-background-hover); }\n    .kpi:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);\n    }\n    /* Single column — no right border, just bottom */\n    :host([columns=\"1\"]) .kpi {\n      box-shadow: inset 0 calc(-1 * var(--cg-border-width-50)) 0 var(--cg-color-surface-cards-border);\n    }\n    :host([columns=\"1\"]) .kpi:last-child { box-shadow: none; }\n\n\n    .kpi-label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-4);\n    }\n\n    .kpi-value {\n      font-size: var(--cg-font-size-xl);\n      font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-tight);\n      letter-spacing: var(--cg-letter-spacing-tight);\n      margin-bottom: var(--cg-spacing-4);\n    }\n\n    .kpi-delta {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .kpi-delta.up { color: var(--cg-color-status-success-text-default); }\n    .kpi-delta.down { color: var(--cg-color-status-error-text-default); }\n    .kpi-delta.neutral { color: var(--cg-color-input-text-placeholder); }\n\n    /* ── Loading skeleton ── */\n    .skeleton-cell {\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n    }\n    .skel-line {\n      border-radius: var(--cg-border-radius-50);\n      background: linear-gradient(\n        90deg,\n        var(--cg-color-surface-container-background) 25%,\n        var(--cg-color-surface-cards-border) 50%,\n        var(--cg-color-surface-container-background) 75%\n      );\n      background-size: 200% 100%;\n      animation: shimmer 1.5s linear infinite;\n    }\n    .skel-label { width: 60%; height: var(--cg-spacing-8); margin-bottom: var(--cg-spacing-8); }\n    .skel-value { width: 50%; height: var(--cg-spacing-20); margin-bottom: var(--cg-spacing-6); }\n    .skel-delta { width: 40%; height: var(--cg-spacing-8); }\n\n  `];\n  @property({ type: String }) override title = '';\n  @property({ attribute: false }) kpis: KpiItem[] = [];\n  @property({ type: Number, reflect: true }) columns = 2;\n  @property({ type: Boolean }) loading = false;\n\n  private _handleKpiClick(kpi: KpiItem) {\n    this.dispatchEvent(new CustomEvent('ai-kpi-click', {\n      bubbles: true, composed: true,\n      detail: { label: kpi.label, value: kpi.value },\n    }));\n  }\n\n  private _trendArrow(trend?: string): string {\n    if (trend === 'up') return '\\u2191';\n    if (trend === 'down') return '\\u2193';\n    return '\\u2192';\n  }\n\n  private _renderSkeleton() {\n    const cells = Array.from({ length: this.columns * 2 });\n    return cells.map(() => html`\n      <div class=\"skeleton-cell\" aria-hidden=\"true\">\n        <div class=\"skel-line skel-label\"></div>\n        <div class=\"skel-line skel-value\"></div>\n        <div class=\"skel-line skel-delta\"></div>\n      </div>\n    `);\n  }\n\n  override render() {\n    return html`\n      <div class=\"card\" role=\"region\" aria-label=\"${this.title || 'KPI Grid'}\">\n        ${this.title ? html`<div class=\"card-title\">${this.title}</div>` : nothing}\n        <div class=\"grid\" style=\"grid-template-columns: repeat(${this.columns}, 1fr)\">\n          ${this.loading ? this._renderSkeleton() : this.kpis.map(kpi => html`\n            <div\n              class=\"kpi\"\n              role=\"button\"\n              tabindex=\"0\"\n              aria-label=\"${kpi.label}: ${kpi.value}${kpi.delta ? `, ${kpi.delta}` : ''}\"\n              @click=${() => this._handleKpiClick(kpi)}\n              @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleKpiClick(kpi); } }}\n            >\n              <div class=\"kpi-label\">${kpi.label}</div>\n              <div class=\"kpi-value\">${kpi.value}</div>\n              ${kpi.delta ? html`\n                <span class=\"kpi-delta ${kpi.trend || 'neutral'}\">\n                  <span class=\"arrow\" aria-hidden=\"true\">${this._trendArrow(kpi.trend)}</span>\n                  ${kpi.delta}\n                </span>\n              ` : nothing}\n            </div>\n          `)}\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-kpi-grid': AiKpiGrid;\n  }\n}\n"],"names":["AiKpiGrid","LitElement","kpi","trend","html","nothing","hostBlock","reducedMotion","fadeSlideInKeyframes","shimmerKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-labeling-board/ai-labeling-board.d.ts

@@ -0,0 +1,31 @@
+import { LitElement } from 'lit';
+interface LabelItem {
+    id: string;
+    content: string;
+    label?: string;
+    metadata?: string;
+}
+interface LabelDef {
+    id: string;
+    name: string;
+    color: string;
+}
+export declare class AiLabelingBoard extends LitElement {
+    static styles: import('lit').CSSResult[];
+    items: LabelItem[];
+    labels: LabelDef[];
+    allowCustomLabels: boolean;
+    mode: 'click' | 'list';
+    private _activeLabel;
+    private _getLabel;
+    private _assignLabel;
+    private _removeLabel;
+    private _cycleLabel;
+    private _handleItemClick;
+    private _handleSelectChange;
+    private _createLabel;
+    private _handleKeyDown;
+    render(): import('lit').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=ai-labeling-board.d.ts.map

package/dist/components/ai-labeling-board/ai-labeling-board.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-labeling-board.d.ts","sourceRoot":"","sources":["../../../src/components/ai-labeling-board/ai-labeling-board.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,UAAU,SAAS;IACjB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,UAAU,QAAQ;IAChB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAgB,MAAM,4BAmOnB;IAEwB,KAAK,EAAE,SAAS,EAAE,CAAM;IACxB,MAAM,EAAE,QAAQ,EAAE,CAAM;IACtB,iBAAiB,EAAE,OAAO,CAAS;IACpC,IAAI,EAAE,OAAO,GAAG,MAAM,CAAU;IAEnD,OAAO,CAAC,YAAY,CAAc;IAE3C,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,WAAW;IAanB,OAAO,CAAC,gBAAgB;IAKxB,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,cAAc;IAOb,MAAM;CAsFhB"}

package/dist/components/ai-labeling-board/ai-labeling-board.js

@@ -0,0 +1,393 @@
+import { css as v, LitElement as p, nothing as g, html as l } from "lit";
+import { property as b, state as u, customElement as h } from "lit/decorators.js";
+import { h as f, r as m, g as x } from "../../chunks/premium.css-9I4kHrsl.js";
+var w = Object.defineProperty, y = Object.getOwnPropertyDescriptor, n = (a, r, o, i) => {
+  for (var e = i > 1 ? void 0 : i ? y(r, o) : r, s = a.length - 1, d; s >= 0; s--)
+    (d = a[s]) && (e = (i ? d(r, o, e) : d(e)) || e);
+  return i && e && w(r, o, e), e;
+};
+let c = class extends p {
+  constructor() {
+    super(...arguments), this.items = [], this.labels = [], this.allowCustomLabels = !1, this.mode = "list", this._activeLabel = "";
+  }
+  _getLabel(a) {
+    return this.labels.find((r) => r.id === a);
+  }
+  _assignLabel(a, r) {
+    this.dispatchEvent(new CustomEvent("ai-label-assign", {
+      bubbles: !0,
+      composed: !0,
+      detail: { itemId: a, labelId: r }
+    }));
+  }
+  _removeLabel(a, r) {
+    r.stopPropagation(), this.dispatchEvent(new CustomEvent("ai-label-remove", {
+      bubbles: !0,
+      composed: !0,
+      detail: { itemId: a }
+    }));
+  }
+  _cycleLabel(a) {
+    const r = this.items.find((e) => e.id === a);
+    if (!r) return;
+    const i = (this.labels.findIndex((e) => e.id === r.label) + 1) % (this.labels.length + 1);
+    i === this.labels.length ? this.dispatchEvent(new CustomEvent("ai-label-remove", { bubbles: !0, composed: !0, detail: { itemId: a } })) : this._assignLabel(a, this.labels[i].id);
+  }
+  _handleItemClick(a) {
+    this.mode !== "click" || !this._activeLabel || this._assignLabel(a.id, this._activeLabel);
+  }
+  _handleSelectChange(a, r) {
+    const o = r.target.value;
+    o && this._assignLabel(a, o);
+  }
+  _createLabel() {
+    const a = "New Label", r = ["#60a5fa", "#c084fc", "#fb923c", "#4ade80", "#f87171", "#fbbf24"], o = r[this.labels.length % r.length] ?? "#60a5fa";
+    this.dispatchEvent(new CustomEvent("ai-label-create", {
+      bubbles: !0,
+      composed: !0,
+      detail: { name: a, color: o }
+    }));
+  }
+  _handleKeyDown(a, r) {
+    (a.key === "Enter" || a.key === " ") && (a.preventDefault(), this._handleItemClick(r));
+  }
+  render() {
+    const a = this.items.filter((e) => e.label).length, r = this.items.length, o = this.labels.map((e) => ({
+      ...e,
+      count: this.items.filter((s) => s.label === e.id).length
+    })), i = this.items.filter((e) => !e.label).length;
+    return l`
+      <div class="panel">
+        <div class="header">
+          <span class="header-title">Labeling</span>
+          <span class="header-count">${a}/${r} labeled</span>
+        </div>
+
+        ${this.mode === "click" ? l`
+          <div class="palette">
+            ${this.labels.map((e) => l`
+              <button class="palette-btn ${this._activeLabel === e.id ? "active" : ""}"
+                style="--_label-color: ${e.color}"
+                @click=${() => {
+      this._activeLabel = this._activeLabel === e.id ? "" : e.id;
+    }}>
+                <span class="palette-dot" style="background: ${e.color}"></span>
+                ${e.name}
+              </button>
+            `)}
+            ${this.allowCustomLabels ? l`
+              <button class="add-label-btn" @click=${this._createLabel}>+ Add</button>
+            ` : g}
+          </div>
+        ` : g}
+
+        <div class="items">
+          ${this.items.map((e) => {
+      const s = this._getLabel(e.label), d = !e.label;
+      return l`
+              <div class="item-row ${this.mode === "click" ? "clickable" : ""} ${d ? "unlabeled" : ""}"
+                tabindex=${this.mode === "click" ? "0" : "-1"}
+                role=${this.mode === "click" ? "button" : "listitem"}
+                @click=${() => this._handleItemClick(e)}
+                @keydown=${(t) => this._handleKeyDown(t, e)}>
+                <div class="item-content">
+                  ${e.content}
+                  ${e.metadata ? l`<div class="item-meta">${e.metadata}</div>` : g}
+                </div>
+
+                ${s ? l`
+                  <span class="item-label-pill" role="button" tabindex="0"
+                    style="background: color-mix(in srgb, ${s.color} 12%, transparent); color: ${s.color}; cursor: pointer;"
+                    @click=${(t) => {
+        t.stopPropagation(), this._cycleLabel(e.id);
+      }}
+                    @keydown=${(t) => {
+        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), this._cycleLabel(e.id));
+      }}>
+                    <span class="item-label-dot" style="background: ${s.color}"></span>
+                    ${s.name}
+                  </span>
+                ` : l`
+                  <span class="item-label-pill unlabeled" role="button" tabindex="0"
+                    @click=${(t) => {
+        t.stopPropagation(), this._cycleLabel(e.id);
+      }}
+                    @keydown=${(t) => {
+        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), this._cycleLabel(e.id));
+      }}>
+                    Assign
+                  </span>
+                `}
+              </div>
+            `;
+    })}
+        </div>
+
+        <div class="stats">
+          ${o.map((e) => l`
+            <div class="stat">
+              <span class="stat-dot" style="background: ${e.color}"></span>
+              ${e.name}: <span class="stat-count">${e.count}</span>
+            </div>
+          `)}
+          ${i > 0 ? l`
+            <div class="stat">
+              <span class="stat-dot" style="background: var(--cg-color-input-text-placeholder)"></span>
+              Unlabeled: <span class="stat-count">${i}</span>
+            </div>
+          ` : g}
+        </div>
+      </div>
+    `;
+  }
+};
+c.styles = [f, m, x, v`
+    :host {
+      animation: fadeIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+
+    .panel {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      overflow: hidden;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-20) var(--cg-spacing-20) var(--cg-spacing-12);
+    }
+    .header-title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+    .header-count {
+      margin-left: auto;
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+    }
+
+    /* ── Label palette (click mode) ── */
+    .palette {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--cg-spacing-6);
+      padding: var(--cg-spacing-12) var(--cg-spacing-20);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    .palette-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      padding: var(--cg-spacing-4) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: var(--cg-color-surface-base-background);
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      cursor: pointer;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+                  color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .palette-btn:hover {
+      border-color: var(--cg-color-input-border-hover);
+    }
+    .palette-btn.active {
+      border-color: var(--_label-color, var(--cg-color-surface-base-text));
+      color: var(--_label-color, var(--cg-color-surface-base-text));
+    }
+    .palette-btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .palette-dot {
+      width: var(--cg-spacing-6);
+      height: var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+    }
+
+    /* ── Add custom label ── */
+    .add-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) dashed var(--cg-color-surface-cards-border);
+      background: none;
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-xs);
+      cursor: pointer;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+                  color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .add-label-btn:hover {
+      border-color: var(--cg-color-input-border-hover);
+      color: var(--cg-color-input-text-placeholder);
+    }
+
+    /* ── Items list (inset) ── */
+    .items {
+      display: flex;
+      flex-direction: column;
+      margin: 0 var(--cg-spacing-12);
+      background: var(--cg-overlay-dark-subtle);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-125);
+      overflow: hidden;
+    }
+    .item-row {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      cursor: default;
+    }
+    .item-row:last-child {
+      border-bottom: none;
+    }
+    .item-row:hover {
+      background: var(--cg-color-action-secondary-background-hover);
+    }
+    .item-row:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .item-row.clickable {
+      cursor: pointer;
+    }
+    .item-row.unlabeled {
+      opacity: 0.5;
+    }
+    .item-content {
+      flex: 1;
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text));
+      line-height: var(--cg-line-height-normal);
+    }
+    .item-meta {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      margin-top: var(--cg-spacing-2);
+    }
+
+    /* ── Label pill on item ── */
+    .item-label-pill {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-full);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+    .item-label-pill.unlabeled {
+      background: var(--cg-overlay-dark-subtle);
+      color: var(--cg-color-input-text-placeholder);
+      border: var(--cg-border-width-50) dashed var(--cg-color-surface-cards-border);
+    }
+    .item-label-pill:hover { opacity: 0.8; }
+    .item-label-dot {
+      width: var(--cg-spacing-6);
+      height: var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+    }
+
+    /* ── Dropdown select (list mode) ── */
+    .label-select {
+      background: var(--cg-color-surface-cards-border);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-50);
+      color: var(--cg-color-surface-base-text));
+      font-size: var(--cg-font-size-xs);
+      padding: var(--cg-spacing-4) var(--cg-spacing-8);
+      cursor: pointer;
+      flex-shrink: 0;
+    }
+    .label-select:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    /* ── Remove label button ── */
+    .remove-btn {
+      background: none;
+      border: none;
+      color: var(--cg-color-input-text-placeholder);
+      cursor: pointer;
+      padding: var(--cg-spacing-2);
+      display: flex;
+      align-items: center;
+      border-radius: var(--cg-border-radius-full);
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .remove-btn:hover {
+      color: var(--cg-color-status-error-text-default);
+    }
+    .remove-btn:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .remove-btn svg {
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+    }
+
+    /* ── Stats bar ── */
+    .stats {
+      padding: var(--cg-spacing-12) var(--cg-spacing-20);
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--cg-spacing-12);
+    }
+    .stat {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+    }
+    .stat-dot {
+      width: var(--cg-spacing-6);
+      height: var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+    }
+    .stat-count {
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text));
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host { animation: none; }
+    }
+  `];
+n([
+  b({ type: Array })
+], c.prototype, "items", 2);
+n([
+  b({ type: Array })
+], c.prototype, "labels", 2);
+n([
+  b({ type: Boolean })
+], c.prototype, "allowCustomLabels", 2);
+n([
+  b({ type: String })
+], c.prototype, "mode", 2);
+n([
+  u()
+], c.prototype, "_activeLabel", 2);
+c = n([
+  h("ai-labeling-board")
+], c);
+export {
+  c as AiLabelingBoard
+};
+//# sourceMappingURL=ai-labeling-board.js.map