@cognivo/components 0.8.0 → 0.8.2

package/dist/components/ai-json-viewer/ai-json-viewer.js

@@ -1,12 +1,12 @@
-import { css as v, LitElement as y, html as a } from "lit";
-import { property as p, state as $, customElement as x } from "lit/decorators.js";
-import { h as _, r as m, f as k } from "../../chunks/premium.css-9I4kHrsl.js";
+import { css as v, LitElement as $, html as a } from "lit";
+import { property as p, state as y, customElement as x } from "lit/decorators.js";
+import { h as _, r as m, f as k } from "../../chunks/premium.css-DHekUEUt.js";
 var w = Object.defineProperty, C = Object.getOwnPropertyDescriptor, d = (e, t, s, o) => {
   for (var r = o > 1 ? void 0 : o ? C(t, s) : t, n = e.length - 1, i; n >= 0; n--)
     (i = e[n]) && (r = (o ? i(t, s, r) : i(r)) || r);
   return o && r && w(t, s, r), r;
 };
-let l = class extends y {
+let l = class extends $ {
   constructor() {
     super(...arguments), this.rounded = "lg", this.data = null, this.expanded = !0, this.maxDepth = 5, this._collapsed = /* @__PURE__ */ new Set(), this._seen = /* @__PURE__ */ new WeakSet();
   }
@@ -65,7 +65,7 @@ l.styles = [_, m, k, v`
     :host {
       font-family: var(--cg-font-family-mono);
       font-size: var(--cg-font-size-sm);
-      line-height: 1.6;
+      line-height: var(--cg-line-height-relaxed);
       color: var(--cg-color-surface-base-text);
       animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;
     }
@@ -84,16 +84,16 @@ l.styles = [_, m, k, v`
     }
 
     .key {
-      color: var(--cg-color-status-info-text);
+      color: var(--cg-color-status-info-text-default);
       cursor: pointer;
     }
     .key:hover {
       text-decoration: underline;
     }
     .key:focus-visible {
-      outline: 2px solid var(--cg-overlay-accent-strong);
-      outline-offset: 1px;
-      border-radius: var(--cg-border-radius-25);
+      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);
+      outline-offset: var(--cg-outline-offset-default);
+      border-radius: var(--cg-border-radius-50);
     }
 
     .string { color: var(--cg-color-status-success-text-default); }
@@ -114,15 +114,15 @@ l.styles = [_, m, k, v`
       padding: 0;
       font-size: var(--cg-font-size-xs);
       vertical-align: middle;
-      border-radius: var(--cg-border-radius-25);
+      border-radius: var(--cg-border-radius-50);
       transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
     }
     .toggle:hover {
       color: var(--cg-color-surface-base-text);
     }
     .toggle:focus-visible {
-      outline: 2px solid var(--cg-overlay-accent-strong);
-      outline-offset: 1px;
+      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);
+      outline-offset: var(--cg-outline-offset-default);
     }
 
     .collapsed-hint {
@@ -162,7 +162,7 @@ d([
   p({ type: Number, attribute: "max-depth" })
 ], l.prototype, "maxDepth", 2);
 d([
-  $()
+  y()
 ], l.prototype, "_collapsed", 2);
 l = d([
   x("ai-json-viewer")

package/dist/components/ai-json-viewer/ai-json-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-json-viewer.js","sources":["../../../src/components/ai-json-viewer/ai-json-viewer.ts"],"sourcesContent":["/**\n * @element ai-json-viewer\n * Interactive JSON tree viewer with collapsible nodes, syntax highlighting,\n * and circular reference detection. Supports nested objects and arrays\n * with expand/collapse per node and item counts.\n *\n * @example\n * ```html\n * <ai-json-viewer .data=${{ name: 'Claude', version: 3 }} expanded max-depth=\"4\"></ai-json-viewer>\n * ```\n *\n * @prop {unknown} data - JSON-serializable data to display\n * @prop {boolean} expanded - Whether nodes start expanded (default true)\n * @prop {number} maxDepth - Maximum nesting depth before auto-collapse (default 5)\n *\n * @fires {CustomEvent<{path: string}>} ai-json-path-click - When a key label is clicked\n *\n * @cssprop [--cg-font-family-mono] - Monospace font for the viewer\n * @cssprop [--cg-color-surface] - Background color of the root container\n * @cssprop [--cg-color-accent] - Accent color for number values\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\n@customElement('ai-json-viewer')\nexport class AiJsonViewer extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      font-family: var(--cg-font-family-mono);\n      font-size: var(--cg-font-size-sm);\n      line-height: 1.6;\n      color: var(--cg-color-surface-base-text);\n      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .root {\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-border-radius-100);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      overflow-x: auto;\n    }\n\n    .line {\n      white-space: pre;\n    }\n\n    .key {\n      color: var(--cg-color-status-info-text);\n      cursor: pointer;\n    }\n    .key:hover {\n      text-decoration: underline;\n    }\n    .key:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: 1px;\n      border-radius: var(--cg-border-radius-25);\n    }\n\n    .string { color: var(--cg-color-status-success-text-default); }\n    .number { color: var(--cg-color-surface-base-text); }\n    .boolean { color: var(--cg-color-status-success-text-default); }\n    .null { color: var(--cg-color-input-text-placeholder); font-style: italic; }\n\n    .toggle {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      background: none;\n      border: none;\n      color: var(--cg-color-input-text-placeholder);\n      cursor: pointer;\n      padding: 0;\n      font-size: var(--cg-font-size-xs);\n      vertical-align: middle;\n      border-radius: var(--cg-border-radius-25);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .toggle:hover {\n      color: var(--cg-color-surface-base-text);\n    }\n    .toggle:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: 1px;\n    }\n\n    .collapsed-hint {\n      color: var(--cg-color-input-text-placeholder);\n      font-style: italic;\n      font-size: var(--cg-font-size-xs);\n    }\n\n    .line-count {\n      display: inline;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      margin-left: var(--cg-spacing-4);\n    }\n\n    .bracket {\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .root { border-radius: 0; }\n    :host([rounded=\"sm\"]) .root { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .root { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .root { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .root { border-radius: var(--cg-border-radius-full); }\n  `];\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ attribute: false }) data: unknown = null;\n  @property({ type: Boolean }) expanded = true;\n  @property({ type: Number, attribute: 'max-depth' }) maxDepth = 5;\n\n  @state() private _collapsed: Set<string> = new Set();\n\n  private _isCollapsed(path: string): boolean {\n    if (this.expanded) {\n      return this._collapsed.has(path);\n    }\n    return !this._collapsed.has(path);\n  }\n\n  private _togglePath(path: string): void {\n    const next = new Set(this._collapsed);\n    if (next.has(path)) {\n      next.delete(path);\n    } else {\n      next.add(path);\n    }\n    this._collapsed = next;\n  }\n\n  private _emitPathClick(path: string): void {\n    this.dispatchEvent(new CustomEvent('ai-json-path-click', {\n      detail: { path },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _countItems(val: unknown): number {\n    if (Array.isArray(val)) return val.length;\n    if (val && typeof val === 'object') return Object.keys(val).length;\n    return 0;\n  }\n\n  private _seen = new WeakSet();\n\n  private _renderValue(val: unknown, path: string, depth: number, isLast: boolean): unknown {\n    const comma = isLast ? '' : ',';\n\n    // Circular reference detection\n    if (val !== null && typeof val === 'object') {\n      if (this._seen.has(val as object)) {\n        return html`<span class=\"null\">[Circular]</span>${comma}`;\n      }\n      this._seen.add(val as object);\n    }\n\n    if (val === null) {\n      return html`<span class=\"null\">null</span>${comma}`;\n    }\n    if (typeof val === 'string') {\n      return html`<span class=\"string\">\"${val}\"</span>${comma}`;\n    }\n    if (typeof val === 'number') {\n      return html`<span class=\"number\">${val}</span>${comma}`;\n    }\n    if (typeof val === 'boolean') {\n      return html`<span class=\"boolean\">${val}</span>${comma}`;\n    }\n\n    if (Array.isArray(val)) {\n      return this._renderArray(val, path, depth, comma);\n    }\n    if (typeof val === 'object') {\n      return this._renderObject(val as Record<string, unknown>, path, depth, comma);\n    }\n\n    return html`<span class=\"string\">${String(val)}</span>${comma}`;\n  }\n\n  private _renderArray(arr: unknown[], path: string, depth: number, comma: string): unknown {\n    const collapsed = this._isCollapsed(path);\n    const count = arr.length;\n    const indent = '  '.repeat(depth);\n    const childIndent = '  '.repeat(depth + 1);\n\n    if (count === 0) {\n      return html`<span class=\"bracket\">[]</span>${comma}`;\n    }\n\n    if (collapsed || depth >= this.maxDepth) {\n      return html`<button class=\"toggle\" tabindex=\"0\" aria-label=\"Expand array\" @click=${() => this._togglePath(path)}>\\u25B6</button><span class=\"bracket\">[</span><span class=\"collapsed-hint\"> ${count} items </span><span class=\"bracket\">]</span>${comma}`;\n    }\n\n    return html`<button class=\"toggle\" tabindex=\"0\" aria-label=\"Collapse array\" @click=${() => this._togglePath(path)}>\\u25BC</button><span class=\"bracket\">[</span>\n${arr.map((item, i) => html`<div class=\"line\">${childIndent}${this._renderValue(item, `${path}[${i}]`, depth + 1, i === count - 1)}</div>`)}\n<div class=\"line\">${indent}<span class=\"bracket\">]</span>${comma}<span class=\"line-count\">// ${count} items</span></div>`;\n  }\n\n  private _renderObject(obj: Record<string, unknown>, path: string, depth: number, comma: string): unknown {\n    const collapsed = this._isCollapsed(path);\n    const keys = Object.keys(obj);\n    const count = keys.length;\n    const indent = '  '.repeat(depth);\n    const childIndent = '  '.repeat(depth + 1);\n\n    if (count === 0) {\n      return html`<span class=\"bracket\">{}</span>${comma}`;\n    }\n\n    if (collapsed || depth >= this.maxDepth) {\n      return html`<button class=\"toggle\" tabindex=\"0\" aria-label=\"Expand object\" @click=${() => this._togglePath(path)}>\\u25B6</button><span class=\"bracket\">{</span><span class=\"collapsed-hint\"> ${count} keys </span><span class=\"bracket\">}</span>${comma}`;\n    }\n\n    return html`<button class=\"toggle\" tabindex=\"0\" aria-label=\"Collapse object\" @click=${() => this._togglePath(path)}>\\u25BC</button><span class=\"bracket\">{</span>\n${keys.map((key, i) => {\n  const childPath = path ? `${path}.${key}` : key;\n  return html`<div class=\"line\">${childIndent}<span class=\"key\" tabindex=\"0\" role=\"button\" aria-label=\"Copy path: ${childPath}\" @click=${() => this._emitPathClick(childPath)} @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter') this._emitPathClick(childPath); }}>\"${key}\"</span>: ${this._renderValue(obj[key], childPath, depth + 1, i === count - 1)}</div>`;\n})}\n<div class=\"line\">${indent}<span class=\"bracket\">}</span>${comma}<span class=\"line-count\">// ${count} keys</span></div>`;\n  }\n\n  override render() {\n    this._seen = new WeakSet(); // Reset cycle detection each render\n    return html`\n      <div class=\"root\" role=\"tree\" aria-label=\"JSON viewer\">\n        <div class=\"line\">${this._renderValue(this.data, '$', 0, true)}</div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-json-viewer': AiJsonViewer;\n  }\n}\n"],"names":["AiJsonViewer","LitElement","path","next","val","depth","isLast","comma","html","arr","collapsed","count","indent","childIndent","item","i","obj","keys","key","childPath","e","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-json-viewer.js","sources":["../../../src/components/ai-json-viewer/ai-json-viewer.ts"],"sourcesContent":["/**\n * @element ai-json-viewer\n * Interactive JSON tree viewer with collapsible nodes, syntax highlighting,\n * and circular reference detection. Supports nested objects and arrays\n * with expand/collapse per node and item counts.\n *\n * @example\n * ```html\n * <ai-json-viewer .data=${{ name: 'Claude', version: 3 }} expanded max-depth=\"4\"></ai-json-viewer>\n * ```\n *\n * @prop {unknown} data - JSON-serializable data to display\n * @prop {boolean} expanded - Whether nodes start expanded (default true)\n * @prop {number} maxDepth - Maximum nesting depth before auto-collapse (default 5)\n *\n * @fires {CustomEvent<{path: string}>} ai-json-path-click - When a key label is clicked\n *\n * @cssprop [--cg-font-family-mono] - Monospace font for the viewer\n * @cssprop [--cg-color-surface] - Background color of the root container\n * @cssprop [--cg-color-accent] - Accent color for number values\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\n@customElement('ai-json-viewer')\nexport class AiJsonViewer extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      font-family: var(--cg-font-family-mono);\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      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .root {\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-border-radius-100);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      overflow-x: auto;\n    }\n\n    .line {\n      white-space: pre;\n    }\n\n    .key {\n      color: var(--cg-color-status-info-text-default);\n      cursor: pointer;\n    }\n    .key:hover {\n      text-decoration: underline;\n    }\n    .key:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: var(--cg-outline-offset-default);\n      border-radius: var(--cg-border-radius-50);\n    }\n\n    .string { color: var(--cg-color-status-success-text-default); }\n    .number { color: var(--cg-color-surface-base-text); }\n    .boolean { color: var(--cg-color-status-success-text-default); }\n    .null { color: var(--cg-color-input-text-placeholder); font-style: italic; }\n\n    .toggle {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      background: none;\n      border: none;\n      color: var(--cg-color-input-text-placeholder);\n      cursor: pointer;\n      padding: 0;\n      font-size: var(--cg-font-size-xs);\n      vertical-align: middle;\n      border-radius: var(--cg-border-radius-50);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .toggle:hover {\n      color: var(--cg-color-surface-base-text);\n    }\n    .toggle:focus-visible {\n      outline: var(--cg-border-width-100) solid var(--cg-color-focus-ring);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .collapsed-hint {\n      color: var(--cg-color-input-text-placeholder);\n      font-style: italic;\n      font-size: var(--cg-font-size-xs);\n    }\n\n    .line-count {\n      display: inline;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      margin-left: var(--cg-spacing-4);\n    }\n\n    .bracket {\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .root { border-radius: 0; }\n    :host([rounded=\"sm\"]) .root { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .root { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .root { border-radius: var(--cg-border-radius-150); }\n    :host([rounded=\"full\"]) .root { border-radius: var(--cg-border-radius-full); }\n  `];\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  @property({ attribute: false }) data: unknown = null;\n  @property({ type: Boolean }) expanded = true;\n  @property({ type: Number, attribute: 'max-depth' }) maxDepth = 5;\n\n  @state() private _collapsed: Set<string> = new Set();\n\n  private _isCollapsed(path: string): boolean {\n    if (this.expanded) {\n      return this._collapsed.has(path);\n    }\n    return !this._collapsed.has(path);\n  }\n\n  private _togglePath(path: string): void {\n    const next = new Set(this._collapsed);\n    if (next.has(path)) {\n      next.delete(path);\n    } else {\n      next.add(path);\n    }\n    this._collapsed = next;\n  }\n\n  private _emitPathClick(path: string): void {\n    this.dispatchEvent(new CustomEvent('ai-json-path-click', {\n      detail: { path },\n      bubbles: true,\n      composed: true,\n    }));\n  }\n\n  private _countItems(val: unknown): number {\n    if (Array.isArray(val)) return val.length;\n    if (val && typeof val === 'object') return Object.keys(val).length;\n    return 0;\n  }\n\n  private _seen = new WeakSet();\n\n  private _renderValue(val: unknown, path: string, depth: number, isLast: boolean): unknown {\n    const comma = isLast ? '' : ',';\n\n    // Circular reference detection\n    if (val !== null && typeof val === 'object') {\n      if (this._seen.has(val as object)) {\n        return html`<span class=\"null\">[Circular]</span>${comma}`;\n      }\n      this._seen.add(val as object);\n    }\n\n    if (val === null) {\n      return html`<span class=\"null\">null</span>${comma}`;\n    }\n    if (typeof val === 'string') {\n      return html`<span class=\"string\">\"${val}\"</span>${comma}`;\n    }\n    if (typeof val === 'number') {\n      return html`<span class=\"number\">${val}</span>${comma}`;\n    }\n    if (typeof val === 'boolean') {\n      return html`<span class=\"boolean\">${val}</span>${comma}`;\n    }\n\n    if (Array.isArray(val)) {\n      return this._renderArray(val, path, depth, comma);\n    }\n    if (typeof val === 'object') {\n      return this._renderObject(val as Record<string, unknown>, path, depth, comma);\n    }\n\n    return html`<span class=\"string\">${String(val)}</span>${comma}`;\n  }\n\n  private _renderArray(arr: unknown[], path: string, depth: number, comma: string): unknown {\n    const collapsed = this._isCollapsed(path);\n    const count = arr.length;\n    const indent = '  '.repeat(depth);\n    const childIndent = '  '.repeat(depth + 1);\n\n    if (count === 0) {\n      return html`<span class=\"bracket\">[]</span>${comma}`;\n    }\n\n    if (collapsed || depth >= this.maxDepth) {\n      return html`<button class=\"toggle\" tabindex=\"0\" aria-label=\"Expand array\" @click=${() => this._togglePath(path)}>\\u25B6</button><span class=\"bracket\">[</span><span class=\"collapsed-hint\"> ${count} items </span><span class=\"bracket\">]</span>${comma}`;\n    }\n\n    return html`<button class=\"toggle\" tabindex=\"0\" aria-label=\"Collapse array\" @click=${() => this._togglePath(path)}>\\u25BC</button><span class=\"bracket\">[</span>\n${arr.map((item, i) => html`<div class=\"line\">${childIndent}${this._renderValue(item, `${path}[${i}]`, depth + 1, i === count - 1)}</div>`)}\n<div class=\"line\">${indent}<span class=\"bracket\">]</span>${comma}<span class=\"line-count\">// ${count} items</span></div>`;\n  }\n\n  private _renderObject(obj: Record<string, unknown>, path: string, depth: number, comma: string): unknown {\n    const collapsed = this._isCollapsed(path);\n    const keys = Object.keys(obj);\n    const count = keys.length;\n    const indent = '  '.repeat(depth);\n    const childIndent = '  '.repeat(depth + 1);\n\n    if (count === 0) {\n      return html`<span class=\"bracket\">{}</span>${comma}`;\n    }\n\n    if (collapsed || depth >= this.maxDepth) {\n      return html`<button class=\"toggle\" tabindex=\"0\" aria-label=\"Expand object\" @click=${() => this._togglePath(path)}>\\u25B6</button><span class=\"bracket\">{</span><span class=\"collapsed-hint\"> ${count} keys </span><span class=\"bracket\">}</span>${comma}`;\n    }\n\n    return html`<button class=\"toggle\" tabindex=\"0\" aria-label=\"Collapse object\" @click=${() => this._togglePath(path)}>\\u25BC</button><span class=\"bracket\">{</span>\n${keys.map((key, i) => {\n  const childPath = path ? `${path}.${key}` : key;\n  return html`<div class=\"line\">${childIndent}<span class=\"key\" tabindex=\"0\" role=\"button\" aria-label=\"Copy path: ${childPath}\" @click=${() => this._emitPathClick(childPath)} @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter') this._emitPathClick(childPath); }}>\"${key}\"</span>: ${this._renderValue(obj[key], childPath, depth + 1, i === count - 1)}</div>`;\n})}\n<div class=\"line\">${indent}<span class=\"bracket\">}</span>${comma}<span class=\"line-count\">// ${count} keys</span></div>`;\n  }\n\n  override render() {\n    this._seen = new WeakSet(); // Reset cycle detection each render\n    return html`\n      <div class=\"root\" role=\"tree\" aria-label=\"JSON viewer\">\n        <div class=\"line\">${this._renderValue(this.data, '$', 0, true)}</div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-json-viewer': AiJsonViewer;\n  }\n}\n"],"names":["AiJsonViewer","LitElement","path","next","val","depth","isLast","comma","html","arr","collapsed","count","indent","childIndent","item","i","obj","keys","key","childPath","e","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-keyboard-shortcuts/ai-keyboard-shortcuts.js

@@ -1,15 +1,15 @@
-import { css as p, LitElement as u, nothing as d, html as a } from "lit";
-import { property as g, state as h, customElement as v } from "lit/decorators.js";
-import { h as f, r as b, f as m } from "../../chunks/premium.css-9I4kHrsl.js";
-var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (t, e, r, o) => {
-  for (var s = o > 1 ? void 0 : o ? x(e, r) : e, i = t.length - 1, n; i >= 0; i--)
-    (n = t[i]) && (s = (o ? n(e, r, s) : n(s)) || s);
-  return o && s && y(e, r, s), s;
+import { css as u, LitElement as p, nothing as d, html as a } from "lit";
+import { property as g, state as h, customElement as f } from "lit/decorators.js";
+import { h as v, r as b, f as m } from "../../chunks/premium.css-DHekUEUt.js";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, l = (o, e, r, t) => {
+  for (var s = t > 1 ? void 0 : t ? x(e, r) : e, i = o.length - 1, n; i >= 0; i--)
+    (n = o[i]) && (s = (t ? n(e, r, s) : n(s)) || s);
+  return t && s && y(e, r, s), s;
 };
-let c = class extends u {
+let c = class extends p {
   constructor() {
-    super(...arguments), this.shortcuts = [], this.open = !1, this._search = "", this._handleKeyDown = (t) => {
-      t.key === "Escape" && this.open && this._close();
+    super(...arguments), this.shortcuts = [], this.open = !1, this._search = "", this._handleKeyDown = (o) => {
+      o.key === "Escape" && this.open && this._close();
     };
   }
   connectedCallback() {
@@ -23,22 +23,22 @@ let c = class extends u {
   }
   _filtered() {
     if (!this._search) return this.shortcuts;
-    const t = this._search.toLowerCase();
+    const o = this._search.toLowerCase();
     return this.shortcuts.filter(
-      (e) => e.description.toLowerCase().includes(t) || e.keys.some((r) => r.toLowerCase().includes(t)) || e.category?.toLowerCase().includes(t)
+      (e) => e.description.toLowerCase().includes(o) || e.keys.some((r) => r.toLowerCase().includes(o)) || e.category?.toLowerCase().includes(o)
     );
   }
-  _grouped(t) {
+  _grouped(o) {
     const e = /* @__PURE__ */ new Map();
-    for (const r of t) {
-      const o = r.category || "General";
-      e.has(o) || e.set(o, []), e.get(o).push(r);
+    for (const r of o) {
+      const t = r.category || "General";
+      e.has(t) || e.set(t, []), e.get(t).push(r);
     }
     return e;
   }
   render() {
     if (!this.open) return d;
-    const t = this._filtered(), e = this._grouped(t);
+    const o = this._filtered(), e = this._grouped(o);
     return a`
       <div class="overlay" @click=${(r) => {
       r.target === r.currentTarget && this._close();
@@ -59,9 +59,9 @@ let c = class extends u {
             aria-label="Search shortcuts"
           />
           <div class="shortcuts-list" role="list">
-            ${t.length === 0 ? a`<div class="no-results">No shortcuts found</div>` : Array.from(e.entries()).map(([r, o]) => a`
+            ${o.length === 0 ? a`<div class="no-results">No shortcuts found</div>` : Array.from(e.entries()).map(([r, t]) => a`
                 <div class="category-label">${r}</div>
-                ${o.map((s) => a`
+                ${t.map((s) => a`
                   <div class="shortcut-row" role="listitem">
                     <span class="shortcut-desc">${s.description}</span>
                     <span class="key-group">
@@ -79,7 +79,7 @@ let c = class extends u {
     `;
   }
 };
-c.styles = [f, b, m, p`
+c.styles = [v, b, m, u`
     :host {
       animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
     }
@@ -88,7 +88,7 @@ c.styles = [f, b, m, p`
     .overlay {
       position: fixed;
       inset: 0;
-      background: var(--cg-overlay-dark-strong);
+      background: var(--cg-color-modal-overlay-background);
       backdrop-filter: blur(2px);
       display: flex;
       align-items: center;
@@ -133,7 +133,7 @@ c.styles = [f, b, m, p`
     }
     .close-btn:hover { color: var(--cg-color-surface-base-text); }
     .close-btn:focus-visible {
-      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline: 2px solid var(--cg-color-focus-ring);
       outline-offset: var(--cg-outline-offset-default);
     }
 
@@ -153,7 +153,7 @@ c.styles = [f, b, m, p`
       color: var(--cg-color-input-text-placeholder);
     }
     .search-input:focus-visible {
-      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline: 2px solid var(--cg-color-focus-ring);
       outline-offset: var(--cg-outline-offset-default);
     }
 
@@ -232,7 +232,7 @@ l([
   h()
 ], c.prototype, "_search", 2);
 c = l([
-  v("ai-keyboard-shortcuts")
+  f("ai-keyboard-shortcuts")
 ], c);
 export {
   c as AiKeyboardShortcuts

package/dist/components/ai-keyboard-shortcuts/ai-keyboard-shortcuts.js.map

@@ -1 +1 @@
-{"version":3,"file":"ai-keyboard-shortcuts.js","sources":["../../../src/components/ai-keyboard-shortcuts/ai-keyboard-shortcuts.ts"],"sourcesContent":["/**\n * @element ai-keyboard-shortcuts\n * Modal overlay displaying grouped keyboard shortcuts with searchable\n * key badge UI. Closes on Escape or backdrop click.\n *\n * @example\n * ```html\n * <ai-keyboard-shortcuts\n *   .shortcuts=${[{ keys: ['Ctrl', 'K'], description: 'Open search', category: 'Navigation' }]}\n *   open\n * ></ai-keyboard-shortcuts>\n * ```\n *\n * @prop {ShortcutEntry[]} shortcuts - Array of shortcut definitions with keys, description, category\n * @prop {boolean} open - Whether the modal is visible\n *\n * @fires ai-shortcuts-close - When the modal is dismissed\n *\n * @cssprop [--cg-font-family-mono] - Font for key badges\n * @cssprop [--cg-color-bg-primary] - Modal background 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\nexport interface ShortcutEntry {\n  keys: string[];\n  description: string;\n  category?: string;\n}\n\n@customElement('ai-keyboard-shortcuts')\nexport class AiKeyboardShortcuts extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .overlay {\n      position: fixed;\n      inset: 0;\n      background: var(--cg-overlay-dark-strong);\n      backdrop-filter: blur(2px);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: var(--cg-z-index-top);\n    }\n\n    .modal {\n      background: var(--cg-color-surface-base-background);\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      max-width: 520px;\n      width: 90vw;\n      max-height: 70vh;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .modal-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    .modal-title {\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-lg);\n      font-weight: var(--cg-font-weight-bold);\n    }\n\n    .close-btn {\n      background: none;\n      border: none;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xl);\n      cursor: pointer;\n      padding: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-50);\n      line-height: 1;\n    }\n    .close-btn:hover { color: var(--cg-color-surface-base-text); }\n    .close-btn:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .search-input {\n      width: 100%;\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-sm);\n      font-family: inherit;\n      margin-bottom: var(--cg-spacing-16);\n      box-sizing: border-box;\n    }\n    .search-input::placeholder {\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .search-input:focus-visible {\n      outline: 2px solid var(--cg-overlay-accent-strong);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .shortcuts-list {\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .category-label {\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      padding: var(--cg-spacing-8) 0 var(--cg-spacing-6);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      margin-bottom: var(--cg-spacing-4);\n    }\n\n    .shortcut-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--cg-spacing-8) var(--cg-spacing-4);\n    }\n\n    .shortcut-desc {\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    .key-group {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      flex-shrink: 0;\n    }\n\n    .key-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      padding: 0 var(--cg-spacing-6);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-bottom-width: 3px;\n      border-radius: var(--cg-border-radius-50);\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      font-family: var(--cg-font-family-mono);\n      white-space: nowrap;\n    }\n\n    .key-plus {\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    .no-results {\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n      text-align: center;\n      padding: var(--cg-spacing-16);\n    }\n  `];\n  @property({ type: Array }) shortcuts: ShortcutEntry[] = [];\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private _search = '';\n\n  private _handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Escape' && this.open) {\n      this._close();\n    }\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('keydown', this._handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('keydown', this._handleKeyDown);\n  }\n\n  private _close() {\n    this.open = false;\n    this._search = '';\n    this.dispatchEvent(new CustomEvent('ai-shortcuts-close', { bubbles: true, composed: true }));\n  }\n\n  private _filtered(): ShortcutEntry[] {\n    if (!this._search) return this.shortcuts;\n    const q = this._search.toLowerCase();\n    return this.shortcuts.filter(s =>\n      s.description.toLowerCase().includes(q) ||\n      s.keys.some(k => k.toLowerCase().includes(q)) ||\n      (s.category?.toLowerCase().includes(q))\n    );\n  }\n\n  private _grouped(items: ShortcutEntry[]): Map<string, ShortcutEntry[]> {\n    const map = new Map<string, ShortcutEntry[]>();\n    for (const item of items) {\n      const cat = item.category || 'General';\n      if (!map.has(cat)) map.set(cat, []);\n      map.get(cat)!.push(item);\n    }\n    return map;\n  }\n\n  override render() {\n    if (!this.open) return nothing;\n    const filtered = this._filtered();\n    const grouped = this._grouped(filtered);\n\n    return html`\n      <div class=\"overlay\" @click=${(e: Event) => { if (e.target === e.currentTarget) this._close(); }}>\n        <div class=\"modal\" role=\"dialog\" aria-label=\"Keyboard shortcuts\" aria-modal=\"true\">\n          <div class=\"modal-header\">\n            <span class=\"modal-title\">Keyboard Shortcuts</span>\n            <button class=\"close-btn\" aria-label=\"Close shortcuts\" @click=${this._close}><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg></button>\n          </div>\n          <input\n            class=\"search-input\"\n            type=\"text\"\n            placeholder=\"Search shortcuts...\"\n            .value=${this._search}\n            @input=${(e: Event) => { this._search = (e.target as HTMLInputElement).value; }}\n            aria-label=\"Search shortcuts\"\n          />\n          <div class=\"shortcuts-list\" role=\"list\">\n            ${filtered.length === 0\n              ? html`<div class=\"no-results\">No shortcuts found</div>`\n              : Array.from(grouped.entries()).map(([cat, items]) => html`\n                <div class=\"category-label\">${cat}</div>\n                ${items.map(s => html`\n                  <div class=\"shortcut-row\" role=\"listitem\">\n                    <span class=\"shortcut-desc\">${s.description}</span>\n                    <span class=\"key-group\">\n                      ${s.keys.map((k, i) => html`\n                        ${i > 0 ? html`<span class=\"key-plus\">+</span>` : nothing}\n                        <span class=\"key-badge\">${k}</span>\n                      `)}\n                    </span>\n                  </div>\n                `)}\n              `)}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-keyboard-shortcuts': AiKeyboardShortcuts;\n  }\n}\n"],"names":["AiKeyboardShortcuts","LitElement","e","q","s","k","items","map","item","cat","nothing","filtered","grouped","html","i","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-keyboard-shortcuts.js","sources":["../../../src/components/ai-keyboard-shortcuts/ai-keyboard-shortcuts.ts"],"sourcesContent":["/**\n * @element ai-keyboard-shortcuts\n * Modal overlay displaying grouped keyboard shortcuts with searchable\n * key badge UI. Closes on Escape or backdrop click.\n *\n * @example\n * ```html\n * <ai-keyboard-shortcuts\n *   .shortcuts=${[{ keys: ['Ctrl', 'K'], description: 'Open search', category: 'Navigation' }]}\n *   open\n * ></ai-keyboard-shortcuts>\n * ```\n *\n * @prop {ShortcutEntry[]} shortcuts - Array of shortcut definitions with keys, description, category\n * @prop {boolean} open - Whether the modal is visible\n *\n * @fires ai-shortcuts-close - When the modal is dismissed\n *\n * @cssprop [--cg-font-family-mono] - Font for key badges\n * @cssprop [--cg-color-bg-primary] - Modal background 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\nexport interface ShortcutEntry {\n  keys: string[];\n  description: string;\n  category?: string;\n}\n\n@customElement('ai-keyboard-shortcuts')\nexport class AiKeyboardShortcuts extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n\n    .overlay {\n      position: fixed;\n      inset: 0;\n      background: var(--cg-color-modal-overlay-background);\n      backdrop-filter: blur(2px);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: var(--cg-z-index-top);\n    }\n\n    .modal {\n      background: var(--cg-color-surface-base-background);\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      max-width: 520px;\n      width: 90vw;\n      max-height: 70vh;\n      display: flex;\n      flex-direction: column;\n    }\n\n    .modal-header {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: var(--cg-spacing-16);\n    }\n\n    .modal-title {\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-lg);\n      font-weight: var(--cg-font-weight-bold);\n    }\n\n    .close-btn {\n      background: none;\n      border: none;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xl);\n      cursor: pointer;\n      padding: var(--cg-spacing-4);\n      border-radius: var(--cg-border-radius-50);\n      line-height: 1;\n    }\n    .close-btn:hover { color: var(--cg-color-surface-base-text); }\n    .close-btn:focus-visible {\n      outline: 2px solid var(--cg-color-focus-ring);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .search-input {\n      width: 100%;\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: var(--cg-color-surface-container-background);\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-sm);\n      font-family: inherit;\n      margin-bottom: var(--cg-spacing-16);\n      box-sizing: border-box;\n    }\n    .search-input::placeholder {\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .search-input:focus-visible {\n      outline: 2px solid var(--cg-color-focus-ring);\n      outline-offset: var(--cg-outline-offset-default);\n    }\n\n    .shortcuts-list {\n      overflow-y: auto;\n      flex: 1;\n    }\n\n    .category-label {\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      padding: var(--cg-spacing-8) 0 var(--cg-spacing-6);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      margin-bottom: var(--cg-spacing-4);\n    }\n\n    .shortcut-row {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      padding: var(--cg-spacing-8) var(--cg-spacing-4);\n    }\n\n    .shortcut-desc {\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    .key-group {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      flex-shrink: 0;\n    }\n\n    .key-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      min-width: var(--cg-spacing-24);\n      height: var(--cg-spacing-24);\n      padding: 0 var(--cg-spacing-6);\n      background: var(--cg-color-surface-container-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-bottom-width: 3px;\n      border-radius: var(--cg-border-radius-50);\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      font-family: var(--cg-font-family-mono);\n      white-space: nowrap;\n    }\n\n    .key-plus {\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n    }\n\n    .no-results {\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n      text-align: center;\n      padding: var(--cg-spacing-16);\n    }\n  `];\n  @property({ type: Array }) shortcuts: ShortcutEntry[] = [];\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  @state() private _search = '';\n\n  private _handleKeyDown = (e: KeyboardEvent) => {\n    if (e.key === 'Escape' && this.open) {\n      this._close();\n    }\n  };\n\n  override connectedCallback() {\n    super.connectedCallback();\n    document.addEventListener('keydown', this._handleKeyDown);\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    document.removeEventListener('keydown', this._handleKeyDown);\n  }\n\n  private _close() {\n    this.open = false;\n    this._search = '';\n    this.dispatchEvent(new CustomEvent('ai-shortcuts-close', { bubbles: true, composed: true }));\n  }\n\n  private _filtered(): ShortcutEntry[] {\n    if (!this._search) return this.shortcuts;\n    const q = this._search.toLowerCase();\n    return this.shortcuts.filter(s =>\n      s.description.toLowerCase().includes(q) ||\n      s.keys.some(k => k.toLowerCase().includes(q)) ||\n      (s.category?.toLowerCase().includes(q))\n    );\n  }\n\n  private _grouped(items: ShortcutEntry[]): Map<string, ShortcutEntry[]> {\n    const map = new Map<string, ShortcutEntry[]>();\n    for (const item of items) {\n      const cat = item.category || 'General';\n      if (!map.has(cat)) map.set(cat, []);\n      map.get(cat)!.push(item);\n    }\n    return map;\n  }\n\n  override render() {\n    if (!this.open) return nothing;\n    const filtered = this._filtered();\n    const grouped = this._grouped(filtered);\n\n    return html`\n      <div class=\"overlay\" @click=${(e: Event) => { if (e.target === e.currentTarget) this._close(); }}>\n        <div class=\"modal\" role=\"dialog\" aria-label=\"Keyboard shortcuts\" aria-modal=\"true\">\n          <div class=\"modal-header\">\n            <span class=\"modal-title\">Keyboard Shortcuts</span>\n            <button class=\"close-btn\" aria-label=\"Close shortcuts\" @click=${this._close}><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg></button>\n          </div>\n          <input\n            class=\"search-input\"\n            type=\"text\"\n            placeholder=\"Search shortcuts...\"\n            .value=${this._search}\n            @input=${(e: Event) => { this._search = (e.target as HTMLInputElement).value; }}\n            aria-label=\"Search shortcuts\"\n          />\n          <div class=\"shortcuts-list\" role=\"list\">\n            ${filtered.length === 0\n              ? html`<div class=\"no-results\">No shortcuts found</div>`\n              : Array.from(grouped.entries()).map(([cat, items]) => html`\n                <div class=\"category-label\">${cat}</div>\n                ${items.map(s => html`\n                  <div class=\"shortcut-row\" role=\"listitem\">\n                    <span class=\"shortcut-desc\">${s.description}</span>\n                    <span class=\"key-group\">\n                      ${s.keys.map((k, i) => html`\n                        ${i > 0 ? html`<span class=\"key-plus\">+</span>` : nothing}\n                        <span class=\"key-badge\">${k}</span>\n                      `)}\n                    </span>\n                  </div>\n                `)}\n              `)}\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-keyboard-shortcuts': AiKeyboardShortcuts;\n  }\n}\n"],"names":["AiKeyboardShortcuts","LitElement","e","q","s","k","items","map","item","cat","nothing","filtered","grouped","html","i","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 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";
+import { h, r as b, f, b as m } from "../../chunks/premium.css-DHekUEUt.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);
@@ -103,7 +103,7 @@ t.styles = [h, b, f, m, v`
     .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);
+      box-shadow: inset 0 0 0 var(--cg-border-width-100) var(--cg-overlay-accent-strong);
     }
     /* Single column — no right border, just bottom */
     :host([columns="1"]) .kpi {

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

@@ -1 +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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"}
+{"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 var(--cg-border-width-100) 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.js

@@ -1,12 +1,12 @@
-import { css as v, LitElement as p, nothing as g, html as l } from "lit";
+import { css as p, LitElement as v, 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";
+import { h as f, r as m, i as x } from "../../chunks/premium.css-DHekUEUt.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 {
+let c = class extends v {
   constructor() {
     super(...arguments), this.items = [], this.labels = [], this.allowCustomLabels = !1, this.mode = "list", this._activeLabel = "";
   }
@@ -141,7 +141,7 @@ let c = class extends p {
     `;
   }
 };
-c.styles = [f, m, x, v`
+c.styles = [f, m, x, p`
     :host {
       animation: fadeIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);
     }
@@ -202,7 +202,7 @@ c.styles = [f, m, x, v`
     }
     .palette-btn:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 3px var(--cg-color-focus-ring);
     }
     .palette-dot {
       width: var(--cg-spacing-6);
@@ -257,7 +257,7 @@ c.styles = [f, m, x, v`
     }
     .item-row:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 3px var(--cg-color-focus-ring);
     }
     .item-row.clickable {
       cursor: pointer;
@@ -268,7 +268,7 @@ c.styles = [f, m, x, v`
     .item-content {
       flex: 1;
       font-size: var(--cg-font-size-sm);
-      color: var(--cg-color-surface-base-text));
+      color: var(--cg-color-surface-base-text);
       line-height: var(--cg-line-height-normal);
     }
     .item-meta {
@@ -306,7 +306,7 @@ c.styles = [f, m, x, v`
       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));
+      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;
@@ -314,7 +314,7 @@ c.styles = [f, m, x, v`
     }
     .label-select:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 3px var(--cg-color-focus-ring);
     }
 
     /* ── Remove label button ── */
@@ -334,7 +334,7 @@ c.styles = [f, m, x, v`
     }
     .remove-btn:focus-visible {
       outline: none;
-      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+      box-shadow: 0 0 0 3px var(--cg-color-focus-ring);
     }
     .remove-btn svg {
       width: var(--cg-spacing-12);
@@ -362,7 +362,7 @@ c.styles = [f, m, x, v`
     }
     .stat-count {
       font-weight: var(--cg-font-weight-bold);
-      color: var(--cg-color-surface-base-text));
+      color: var(--cg-color-surface-base-text);
     }
 
     @media (prefers-reduced-motion: reduce) {

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

@@ -1 +1 @@
-{"version":3,"file":"ai-labeling-board.js","sources":["../../../src/components/ai-labeling-board/ai-labeling-board.ts"],"sourcesContent":["/**\n * @element ai-labeling-board\n * Data labeling board with label palette, assignable items, and per-label stats.\n * Supports list mode (dropdown per row) and click mode (select label then click items).\n *\n * @example\n * ```html\n * <ai-labeling-board\n *   mode=\"list\"\n *   allowCustomLabels\n *   .items=${[{ id: '1', content: 'Sample text', label: 'positive' }]}\n *   .labels=${[{ id: 'positive', name: 'Positive', color: '#4ade80' }, { id: 'negative', name: 'Negative', color: '#f87171' }]}\n * ></ai-labeling-board>\n * ```\n *\n * @fires {CustomEvent<{itemId: string, labelId: string}>} ai-label-assign - Label assigned to item\n * @fires {CustomEvent<{itemId: string}>} ai-label-remove - Label removed from item\n * @fires {CustomEvent<{name: string, color: string}>} ai-label-create - New custom label created\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeInKeyframes } from '../../styles/index.js';\n\ninterface LabelItem {\n  id: string;\n  content: string;\n  label?: string;\n  metadata?: string;\n}\n\ninterface LabelDef {\n  id: string;\n  name: string;\n  color: string;\n}\n\n@customElement('ai-labeling-board')\nexport class AiLabelingBoard extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeInKeyframes, css`\n    :host {\n      animation: fadeIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n\n    .panel {\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    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-20) var(--cg-spacing-20) var(--cg-spacing-12);\n    }\n    .header-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    }\n    .header-count {\n      margin-left: auto;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* ── Label palette (click mode) ── */\n    .palette {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-6);\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    }\n    .palette-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\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 var(--cg-color-surface-cards-border);\n      background: var(--cg-color-surface-base-background);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n                  color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .palette-btn:hover {\n      border-color: var(--cg-color-input-border-hover);\n    }\n    .palette-btn.active {\n      border-color: var(--_label-color, var(--cg-color-surface-base-text));\n      color: var(--_label-color, var(--cg-color-surface-base-text));\n    }\n    .palette-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .palette-dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n    }\n\n    /* ── Add custom label ── */\n    .add-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) dashed var(--cg-color-surface-cards-border);\n      background: none;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n                  color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .add-label-btn:hover {\n      border-color: var(--cg-color-input-border-hover);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* ── Items list (inset) ── */\n    .items {\n      display: flex;\n      flex-direction: column;\n      margin: 0 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    .item-row {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      cursor: default;\n    }\n    .item-row:last-child {\n      border-bottom: none;\n    }\n    .item-row:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n    }\n    .item-row:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .item-row.clickable {\n      cursor: pointer;\n    }\n    .item-row.unlabeled {\n      opacity: 0.5;\n    }\n    .item-content {\n      flex: 1;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text));\n      line-height: var(--cg-line-height-normal);\n    }\n    .item-meta {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-2);\n    }\n\n    /* ── Label pill on item ── */\n    .item-label-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      white-space: nowrap;\n      flex-shrink: 0;\n    }\n    .item-label-pill.unlabeled {\n      background: var(--cg-overlay-dark-subtle);\n      color: var(--cg-color-input-text-placeholder);\n      border: var(--cg-border-width-50) dashed var(--cg-color-surface-cards-border);\n    }\n    .item-label-pill:hover { opacity: 0.8; }\n    .item-label-dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n    }\n\n    /* ── Dropdown select (list mode) ── */\n    .label-select {\n      background: var(--cg-color-surface-cards-border);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-50);\n      color: var(--cg-color-surface-base-text));\n      font-size: var(--cg-font-size-xs);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      cursor: pointer;\n      flex-shrink: 0;\n    }\n    .label-select:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    /* ── Remove label button ── */\n    .remove-btn {\n      background: none;\n      border: none;\n      color: var(--cg-color-input-text-placeholder);\n      cursor: pointer;\n      padding: var(--cg-spacing-2);\n      display: flex;\n      align-items: center;\n      border-radius: var(--cg-border-radius-full);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .remove-btn:hover {\n      color: var(--cg-color-status-error-text-default);\n    }\n    .remove-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .remove-btn svg {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n    }\n\n    /* ── Stats bar ── */\n    .stats {\n      padding: var(--cg-spacing-12) var(--cg-spacing-20);\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-12);\n    }\n    .stat {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .stat-dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n    }\n    .stat-count {\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text));\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host { animation: none; }\n    }\n  `];\n\n  @property({ type: Array }) items: LabelItem[] = [];\n  @property({ type: Array }) labels: LabelDef[] = [];\n  @property({ type: Boolean }) allowCustomLabels: boolean = false;\n  @property({ type: String }) mode: 'click' | 'list' = 'list';\n\n  @state() private _activeLabel: string = '';\n\n  private _getLabel(id?: string): LabelDef | undefined {\n    return this.labels.find(l => l.id === id);\n  }\n\n  private _assignLabel(itemId: string, labelId: string) {\n    this.dispatchEvent(new CustomEvent('ai-label-assign', {\n      bubbles: true, composed: true,\n      detail: { itemId, labelId },\n    }));\n  }\n\n  private _removeLabel(itemId: string, e: Event) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-label-remove', {\n      bubbles: true, composed: true,\n      detail: { itemId },\n    }));\n  }\n\n  private _cycleLabel(itemId: string) {\n    const item = this.items.find(i => i.id === itemId);\n    if (!item) return;\n    const currentIdx = this.labels.findIndex(l => l.id === item.label);\n    const nextIdx = (currentIdx + 1) % (this.labels.length + 1);\n    if (nextIdx === this.labels.length) {\n      // Cycle back to unlabeled\n      this.dispatchEvent(new CustomEvent('ai-label-remove', { bubbles: true, composed: true, detail: { itemId } }));\n    } else {\n      this._assignLabel(itemId, this.labels[nextIdx]!.id);\n    }\n  }\n\n  private _handleItemClick(item: LabelItem) {\n    if (this.mode !== 'click' || !this._activeLabel) return;\n    this._assignLabel(item.id, this._activeLabel);\n  }\n\n  private _handleSelectChange(itemId: string, e: Event) {\n    const value = (e.target as HTMLSelectElement).value;\n    if (value) {\n      this._assignLabel(itemId, value);\n    }\n  }\n\n  private _createLabel() {\n    const name = 'New Label';\n    const colors = ['#60a5fa', '#c084fc', '#fb923c', '#4ade80', '#f87171', '#fbbf24'];\n    const color = colors[this.labels.length % colors.length] ?? '#60a5fa';\n    this.dispatchEvent(new CustomEvent('ai-label-create', {\n      bubbles: true, composed: true,\n      detail: { name, color },\n    }));\n  }\n\n  private _handleKeyDown(e: KeyboardEvent, item: LabelItem) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._handleItemClick(item);\n    }\n  }\n\n  override render() {\n    const labeledCount = this.items.filter(i => i.label).length;\n    const totalCount = this.items.length;\n\n    // Stats: count per label\n    const stats = this.labels.map(l => ({\n      ...l,\n      count: this.items.filter(i => i.label === l.id).length,\n    }));\n    const unlabeledCount = this.items.filter(i => !i.label).length;\n\n    return html`\n      <div class=\"panel\">\n        <div class=\"header\">\n          <span class=\"header-title\">Labeling</span>\n          <span class=\"header-count\">${labeledCount}/${totalCount} labeled</span>\n        </div>\n\n        ${this.mode === 'click' ? html`\n          <div class=\"palette\">\n            ${this.labels.map(l => html`\n              <button class=\"palette-btn ${this._activeLabel === l.id ? 'active' : ''}\"\n                style=\"--_label-color: ${l.color}\"\n                @click=${() => { this._activeLabel = this._activeLabel === l.id ? '' : l.id; }}>\n                <span class=\"palette-dot\" style=\"background: ${l.color}\"></span>\n                ${l.name}\n              </button>\n            `)}\n            ${this.allowCustomLabels ? html`\n              <button class=\"add-label-btn\" @click=${this._createLabel}>+ Add</button>\n            ` : nothing}\n          </div>\n        ` : nothing}\n\n        <div class=\"items\">\n          ${this.items.map(item => {\n            const label = this._getLabel(item.label);\n            const isUnlabeled = !item.label;\n            return html`\n              <div class=\"item-row ${this.mode === 'click' ? 'clickable' : ''} ${isUnlabeled ? 'unlabeled' : ''}\"\n                tabindex=${this.mode === 'click' ? '0' : '-1'}\n                role=${this.mode === 'click' ? 'button' : 'listitem'}\n                @click=${() => this._handleItemClick(item)}\n                @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, item)}>\n                <div class=\"item-content\">\n                  ${item.content}\n                  ${item.metadata ? html`<div class=\"item-meta\">${item.metadata}</div>` : nothing}\n                </div>\n\n                ${label ? html`\n                  <span class=\"item-label-pill\" role=\"button\" tabindex=\"0\"\n                    style=\"background: color-mix(in srgb, ${label.color} 12%, transparent); color: ${label.color}; cursor: pointer;\"\n                    @click=${(e: Event) => { e.stopPropagation(); this._cycleLabel(item.id); }}\n                    @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); this._cycleLabel(item.id); } }}>\n                    <span class=\"item-label-dot\" style=\"background: ${label.color}\"></span>\n                    ${label.name}\n                  </span>\n                ` : html`\n                  <span class=\"item-label-pill unlabeled\" role=\"button\" tabindex=\"0\"\n                    @click=${(e: Event) => { e.stopPropagation(); this._cycleLabel(item.id); }}\n                    @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); this._cycleLabel(item.id); } }}>\n                    Assign\n                  </span>\n                `}\n              </div>\n            `;\n          })}\n        </div>\n\n        <div class=\"stats\">\n          ${stats.map(s => html`\n            <div class=\"stat\">\n              <span class=\"stat-dot\" style=\"background: ${s.color}\"></span>\n              ${s.name}: <span class=\"stat-count\">${s.count}</span>\n            </div>\n          `)}\n          ${unlabeledCount > 0 ? html`\n            <div class=\"stat\">\n              <span class=\"stat-dot\" style=\"background: var(--cg-color-input-text-placeholder)\"></span>\n              Unlabeled: <span class=\"stat-count\">${unlabeledCount}</span>\n            </div>\n          ` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiLabelingBoard","LitElement","id","l","itemId","labelId","e","item","i","nextIdx","value","name","colors","color","labeledCount","totalCount","stats","unlabeledCount","html","nothing","label","isUnlabeled","s","hostBlock","reducedMotion","fadeInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}
+{"version":3,"file":"ai-labeling-board.js","sources":["../../../src/components/ai-labeling-board/ai-labeling-board.ts"],"sourcesContent":["/**\n * @element ai-labeling-board\n * Data labeling board with label palette, assignable items, and per-label stats.\n * Supports list mode (dropdown per row) and click mode (select label then click items).\n *\n * @example\n * ```html\n * <ai-labeling-board\n *   mode=\"list\"\n *   allowCustomLabels\n *   .items=${[{ id: '1', content: 'Sample text', label: 'positive' }]}\n *   .labels=${[{ id: 'positive', name: 'Positive', color: '#4ade80' }, { id: 'negative', name: 'Negative', color: '#f87171' }]}\n * ></ai-labeling-board>\n * ```\n *\n * @fires {CustomEvent<{itemId: string, labelId: string}>} ai-label-assign - Label assigned to item\n * @fires {CustomEvent<{itemId: string}>} ai-label-remove - Label removed from item\n * @fires {CustomEvent<{name: string, color: string}>} ai-label-create - New custom label created\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeInKeyframes } from '../../styles/index.js';\n\ninterface LabelItem {\n  id: string;\n  content: string;\n  label?: string;\n  metadata?: string;\n}\n\ninterface LabelDef {\n  id: string;\n  name: string;\n  color: string;\n}\n\n@customElement('ai-labeling-board')\nexport class AiLabelingBoard extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeInKeyframes, css`\n    :host {\n      animation: fadeIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n\n    .panel {\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    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-20) var(--cg-spacing-20) var(--cg-spacing-12);\n    }\n    .header-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    }\n    .header-count {\n      margin-left: auto;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* ── Label palette (click mode) ── */\n    .palette {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-6);\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    }\n    .palette-btn {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\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 var(--cg-color-surface-cards-border);\n      background: var(--cg-color-surface-base-background);\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n                  color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .palette-btn:hover {\n      border-color: var(--cg-color-input-border-hover);\n    }\n    .palette-btn.active {\n      border-color: var(--_label-color, var(--cg-color-surface-base-text));\n      color: var(--_label-color, var(--cg-color-surface-base-text));\n    }\n    .palette-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-color-focus-ring);\n    }\n    .palette-dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n    }\n\n    /* ── Add custom label ── */\n    .add-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) dashed var(--cg-color-surface-cards-border);\n      background: none;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n                  color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .add-label-btn:hover {\n      border-color: var(--cg-color-input-border-hover);\n      color: var(--cg-color-input-text-placeholder);\n    }\n\n    /* ── Items list (inset) ── */\n    .items {\n      display: flex;\n      flex-direction: column;\n      margin: 0 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    .item-row {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      transition: background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      cursor: default;\n    }\n    .item-row:last-child {\n      border-bottom: none;\n    }\n    .item-row:hover {\n      background: var(--cg-color-action-secondary-background-hover);\n    }\n    .item-row:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-color-focus-ring);\n    }\n    .item-row.clickable {\n      cursor: pointer;\n    }\n    .item-row.unlabeled {\n      opacity: 0.5;\n    }\n    .item-content {\n      flex: 1;\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      line-height: var(--cg-line-height-normal);\n    }\n    .item-meta {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-top: var(--cg-spacing-2);\n    }\n\n    /* ── Label pill on item ── */\n    .item-label-pill {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-full);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      white-space: nowrap;\n      flex-shrink: 0;\n    }\n    .item-label-pill.unlabeled {\n      background: var(--cg-overlay-dark-subtle);\n      color: var(--cg-color-input-text-placeholder);\n      border: var(--cg-border-width-50) dashed var(--cg-color-surface-cards-border);\n    }\n    .item-label-pill:hover { opacity: 0.8; }\n    .item-label-dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n    }\n\n    /* ── Dropdown select (list mode) ── */\n    .label-select {\n      background: var(--cg-color-surface-cards-border);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-50);\n      color: var(--cg-color-surface-base-text);\n      font-size: var(--cg-font-size-xs);\n      padding: var(--cg-spacing-4) var(--cg-spacing-8);\n      cursor: pointer;\n      flex-shrink: 0;\n    }\n    .label-select:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-color-focus-ring);\n    }\n\n    /* ── Remove label button ── */\n    .remove-btn {\n      background: none;\n      border: none;\n      color: var(--cg-color-input-text-placeholder);\n      cursor: pointer;\n      padding: var(--cg-spacing-2);\n      display: flex;\n      align-items: center;\n      border-radius: var(--cg-border-radius-full);\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .remove-btn:hover {\n      color: var(--cg-color-status-error-text-default);\n    }\n    .remove-btn:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-color-focus-ring);\n    }\n    .remove-btn svg {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n    }\n\n    /* ── Stats bar ── */\n    .stats {\n      padding: var(--cg-spacing-12) var(--cg-spacing-20);\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-12);\n    }\n    .stat {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .stat-dot {\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n    }\n    .stat-count {\n      font-weight: var(--cg-font-weight-bold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host { animation: none; }\n    }\n  `];\n\n  @property({ type: Array }) items: LabelItem[] = [];\n  @property({ type: Array }) labels: LabelDef[] = [];\n  @property({ type: Boolean }) allowCustomLabels: boolean = false;\n  @property({ type: String }) mode: 'click' | 'list' = 'list';\n\n  @state() private _activeLabel: string = '';\n\n  private _getLabel(id?: string): LabelDef | undefined {\n    return this.labels.find(l => l.id === id);\n  }\n\n  private _assignLabel(itemId: string, labelId: string) {\n    this.dispatchEvent(new CustomEvent('ai-label-assign', {\n      bubbles: true, composed: true,\n      detail: { itemId, labelId },\n    }));\n  }\n\n  private _removeLabel(itemId: string, e: Event) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-label-remove', {\n      bubbles: true, composed: true,\n      detail: { itemId },\n    }));\n  }\n\n  private _cycleLabel(itemId: string) {\n    const item = this.items.find(i => i.id === itemId);\n    if (!item) return;\n    const currentIdx = this.labels.findIndex(l => l.id === item.label);\n    const nextIdx = (currentIdx + 1) % (this.labels.length + 1);\n    if (nextIdx === this.labels.length) {\n      // Cycle back to unlabeled\n      this.dispatchEvent(new CustomEvent('ai-label-remove', { bubbles: true, composed: true, detail: { itemId } }));\n    } else {\n      this._assignLabel(itemId, this.labels[nextIdx]!.id);\n    }\n  }\n\n  private _handleItemClick(item: LabelItem) {\n    if (this.mode !== 'click' || !this._activeLabel) return;\n    this._assignLabel(item.id, this._activeLabel);\n  }\n\n  private _handleSelectChange(itemId: string, e: Event) {\n    const value = (e.target as HTMLSelectElement).value;\n    if (value) {\n      this._assignLabel(itemId, value);\n    }\n  }\n\n  private _createLabel() {\n    const name = 'New Label';\n    const colors = ['#60a5fa', '#c084fc', '#fb923c', '#4ade80', '#f87171', '#fbbf24'];\n    const color = colors[this.labels.length % colors.length] ?? '#60a5fa';\n    this.dispatchEvent(new CustomEvent('ai-label-create', {\n      bubbles: true, composed: true,\n      detail: { name, color },\n    }));\n  }\n\n  private _handleKeyDown(e: KeyboardEvent, item: LabelItem) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      this._handleItemClick(item);\n    }\n  }\n\n  override render() {\n    const labeledCount = this.items.filter(i => i.label).length;\n    const totalCount = this.items.length;\n\n    // Stats: count per label\n    const stats = this.labels.map(l => ({\n      ...l,\n      count: this.items.filter(i => i.label === l.id).length,\n    }));\n    const unlabeledCount = this.items.filter(i => !i.label).length;\n\n    return html`\n      <div class=\"panel\">\n        <div class=\"header\">\n          <span class=\"header-title\">Labeling</span>\n          <span class=\"header-count\">${labeledCount}/${totalCount} labeled</span>\n        </div>\n\n        ${this.mode === 'click' ? html`\n          <div class=\"palette\">\n            ${this.labels.map(l => html`\n              <button class=\"palette-btn ${this._activeLabel === l.id ? 'active' : ''}\"\n                style=\"--_label-color: ${l.color}\"\n                @click=${() => { this._activeLabel = this._activeLabel === l.id ? '' : l.id; }}>\n                <span class=\"palette-dot\" style=\"background: ${l.color}\"></span>\n                ${l.name}\n              </button>\n            `)}\n            ${this.allowCustomLabels ? html`\n              <button class=\"add-label-btn\" @click=${this._createLabel}>+ Add</button>\n            ` : nothing}\n          </div>\n        ` : nothing}\n\n        <div class=\"items\">\n          ${this.items.map(item => {\n            const label = this._getLabel(item.label);\n            const isUnlabeled = !item.label;\n            return html`\n              <div class=\"item-row ${this.mode === 'click' ? 'clickable' : ''} ${isUnlabeled ? 'unlabeled' : ''}\"\n                tabindex=${this.mode === 'click' ? '0' : '-1'}\n                role=${this.mode === 'click' ? 'button' : 'listitem'}\n                @click=${() => this._handleItemClick(item)}\n                @keydown=${(e: KeyboardEvent) => this._handleKeyDown(e, item)}>\n                <div class=\"item-content\">\n                  ${item.content}\n                  ${item.metadata ? html`<div class=\"item-meta\">${item.metadata}</div>` : nothing}\n                </div>\n\n                ${label ? html`\n                  <span class=\"item-label-pill\" role=\"button\" tabindex=\"0\"\n                    style=\"background: color-mix(in srgb, ${label.color} 12%, transparent); color: ${label.color}; cursor: pointer;\"\n                    @click=${(e: Event) => { e.stopPropagation(); this._cycleLabel(item.id); }}\n                    @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); this._cycleLabel(item.id); } }}>\n                    <span class=\"item-label-dot\" style=\"background: ${label.color}\"></span>\n                    ${label.name}\n                  </span>\n                ` : html`\n                  <span class=\"item-label-pill unlabeled\" role=\"button\" tabindex=\"0\"\n                    @click=${(e: Event) => { e.stopPropagation(); this._cycleLabel(item.id); }}\n                    @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); this._cycleLabel(item.id); } }}>\n                    Assign\n                  </span>\n                `}\n              </div>\n            `;\n          })}\n        </div>\n\n        <div class=\"stats\">\n          ${stats.map(s => html`\n            <div class=\"stat\">\n              <span class=\"stat-dot\" style=\"background: ${s.color}\"></span>\n              ${s.name}: <span class=\"stat-count\">${s.count}</span>\n            </div>\n          `)}\n          ${unlabeledCount > 0 ? html`\n            <div class=\"stat\">\n              <span class=\"stat-dot\" style=\"background: var(--cg-color-input-text-placeholder)\"></span>\n              Unlabeled: <span class=\"stat-count\">${unlabeledCount}</span>\n            </div>\n          ` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiLabelingBoard","LitElement","id","l","itemId","labelId","e","item","i","nextIdx","value","name","colors","color","labeledCount","totalCount","stats","unlabeledCount","html","nothing","label","isUnlabeled","s","hostBlock","reducedMotion","fadeInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}