@cognivo/components 0.8.0

package/dist/components/ai-insight-card/ai-insight-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-insight-card.js","sources":["../../../src/components/ai-insight-card/ai-insight-card.ts"],"sourcesContent":["/**\n * @element ai-insight-card\n * Actionable AI insight card with type icons, expandable detail, sources, and status.\n *\n * @fires {CustomEvent<{type, text}>} ai-insight-click\n * @fires {CustomEvent<{type, text, expanded}>} ai-insight-expand\n * @fires {CustomEvent<{type, text}>} ai-insight-dismiss\n * @fires {CustomEvent<{type, text}>} ai-insight-bookmark\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, shimmerKeyframes } from '../../styles/index.js';\n\ninterface Source {\n  title: string;\n  url?: string;\n  relevance?: number;\n}\n\n@customElement('ai-insight-card')\nexport class AiInsightCard extends LitElement {\n  static override styles = [hostBlock, reducedMotion, shimmerKeyframes, css`\n    :host { display: block; }\n\n    .card {\n      display: flex;\n      gap: var(--cg-spacing-16);\n      padding: var(--cg-spacing-20);\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      cursor: pointer;\n      position: relative;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .card:hover {\n      border-color: var(--cg-color-surface-cards-hover-border);\n      transform: translateY(-1px);\n    }\n    .card:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .card:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .card:focus-within .actions { opacity: 1; }\n    .card.selected {\n      border-color: var(--cg-color-action-primary-background-default);\n      background: var(--cg-overlay-accent-subtle);\n    }\n\n    /* ── Status dot ── */\n    .status-dot {\n      position: absolute;\n      top: var(--cg-spacing-12);\n      right: var(--cg-spacing-12);\n      width: var(--cg-spacing-6);\n      height: var(--cg-spacing-6);\n      border-radius: var(--cg-border-radius-full);\n    }\n    .status-dot.new { background: var(--cg-color-action-primary-background-default); }\n    .status-dot.read { background: var(--cg-color-input-text-placeholder); }\n\n    /* ── Icon ── */\n    .icon-area {\n      width: var(--cg-spacing-40);\n      height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-full);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n    .icon-area svg { width: var(--cg-icon-size-100); height: var(--cg-icon-size-100); }\n    .icon-area.explanation { background: var(--cg-color-status-info-background-default); border: var(--cg-border-width-50) solid var(--cg-color-status-info-border-default); color: var(--cg-color-status-info-text-default); }\n    .icon-area.forecast { background: var(--cg-overlay-accent-light); border: var(--cg-border-width-50) solid var(--cg-overlay-accent-medium); color: var(--cg-color-surface-base-text); }\n    .icon-area.anomaly { background: var(--cg-color-status-error-background-default); border: var(--cg-border-width-50) solid var(--cg-color-status-error-border-default); color: var(--cg-color-status-error-text-default); }\n    .icon-area.optimization { background: var(--cg-color-status-warning-background-default); border: var(--cg-border-width-50) solid var(--cg-color-status-warning-border-default); color: var(--cg-color-status-warning-text-default); }\n    .icon-area.classification { background: var(--cg-color-status-success-background-default); border: var(--cg-border-width-50) solid var(--cg-color-status-success-border-default); color: var(--cg-color-status-success-text-default); }\n\n    .content { flex: 1; min-width: 0; }\n\n    .type-label {\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-medium);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      color: var(--cg-color-input-text-placeholder);\n      margin-bottom: var(--cg-spacing-4);\n    }\n\n    .insight-text {\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      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n    .card.expanded .insight-text {\n      -webkit-line-clamp: unset;\n      display: block;\n    }\n\n    /* ── Meta row ── */\n    .meta {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      margin-top: var(--cg-spacing-12);\n      padding-top: var(--cg-spacing-8);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .meta-dot {\n      width: var(--cg-spacing-2);\n      height: var(--cg-spacing-2);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-input-text-placeholder);\n    }\n    .confidence { font-weight: var(--cg-font-weight-medium); }\n\n    /* ── Expanded detail ── */\n    .detail {\n      margin-top: var(--cg-spacing-12);\n      padding-top: var(--cg-spacing-12);\n      border-top: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      animation: detailReveal var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    @keyframes detailReveal {\n      from { opacity: 0; transform: translateY(-4px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n    .sources-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-8);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .source {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      padding: var(--cg-spacing-4) 0;\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n    }\n    .source a {\n      color: var(--cg-color-surface-base-text);\n      text-decoration: none;\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .source a:hover { text-decoration: underline; }\n    .source a:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n      border-radius: var(--cg-border-radius-50);\n    }\n    .source-dot { width: var(--cg-spacing-4); height: var(--cg-spacing-4); border-radius: var(--cg-border-radius-full); flex-shrink: 0; }\n    .source-dot.high { background: var(--cg-color-status-success-text-default); }\n    .source-dot.medium { background: var(--cg-color-status-warning-text-default); }\n    .source-dot.low { background: var(--cg-color-input-text-placeholder); }\n\n    /* ── Action buttons ── */\n    .actions {\n      display: flex;\n      gap: var(--cg-spacing-4);\n      position: absolute;\n      top: var(--cg-spacing-8);\n      right: var(--cg-spacing-8);\n      opacity: 0;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .card:hover .actions { opacity: 1; }\n\n    /* ── Skeleton ── */\n    .skeleton {\n      display: flex;\n      gap: var(--cg-spacing-16);\n      padding: var(--cg-spacing-20);\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    .skel-icon {\n      width: var(--cg-spacing-40); height: var(--cg-spacing-40);\n      border-radius: var(--cg-border-radius-50);\n      background: linear-gradient(90deg, var(--cg-color-surface-container-background) 25%, var(--cg-color-surface-container-border) 50%, var(--cg-color-surface-container-background) 75%);\n      background-size: 200% 100%;\n      animation: shimmer 1.5s linear infinite;\n    }\n    .skel-lines { flex: 1; display: flex; flex-direction: column; gap: var(--cg-spacing-8); }\n    .skel-line {\n      height: var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50);\n      background: linear-gradient(90deg, var(--cg-color-surface-container-background) 25%, var(--cg-color-surface-container-border) 50%, var(--cg-color-surface-container-background) 75%);\n      background-size: 200% 100%;\n      animation: shimmer 1.5s linear infinite;\n    }\n    .skel-line:nth-child(1) { width: 40%; }\n    .skel-line:nth-child(2) { width: 90%; }\n    .skel-line:nth-child(3) { width: 60%; }\n\n    @media (prefers-reduced-motion: reduce) {\n      .card:hover { transform: none; }\n      .detail { animation: none; }\n    }\n  `];\n\n  @property() type: 'explanation' | 'forecast' | 'anomaly' | 'optimization' | 'classification' = 'explanation';\n  @property() text = '';\n  @property({ type: Number }) confidence = 0;\n  @property() timestamp = '';\n  @property({ type: Boolean }) expandable = false;\n  @property({ type: Boolean }) expanded = false;\n  @property({ type: Array }) sources: Source[] = [];\n  @property() status: 'new' | 'read' | 'dismissed' | '' = '';\n  @property({ type: Boolean }) loading = false;\n  @property({ type: Boolean }) selected = false;\n\n  private _getIconName(): string {\n    const icons: Record<string, string> = {\n      explanation: 'info',\n      forecast: 'chart',\n      anomaly: 'warning',\n      optimization: 'sparkle',\n      classification: 'filter',\n    };\n    return icons[this.type] || 'info';\n  }\n\n  private _handleClick() {\n    if (this.expandable) {\n      this.expanded = !this.expanded;\n      this.dispatchEvent(new CustomEvent('ai-insight-expand', { bubbles: true, composed: true, detail: { expanded: this.expanded, type: this.type } }));\n    }\n    this.dispatchEvent(new CustomEvent('ai-insight-click', { bubbles: true, composed: true, detail: { type: this.type, text: this.text, confidence: this.confidence } }));\n  }\n\n  private _handleDismiss(e: Event) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-insight-dismiss', { bubbles: true, composed: true, detail: { type: this.type, text: this.text } }));\n  }\n\n  private _handleBookmark(e: Event) {\n    e.stopPropagation();\n    this.dispatchEvent(new CustomEvent('ai-insight-bookmark', { bubbles: true, composed: true, detail: { type: this.type, text: this.text } }));\n  }\n\n  private _handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleClick(); }\n  }\n\n  private _relevanceClass(r?: number): string {\n    if (!r) return 'low';\n    return r >= 0.7 ? 'high' : r >= 0.4 ? 'medium' : 'low';\n  }\n\n  override render() {\n    if (this.loading) {\n      return html`\n        <div class=\"skeleton\" aria-label=\"Loading insight\">\n          <div class=\"skel-icon\"></div>\n          <div class=\"skel-lines\"><div class=\"skel-line\"></div><div class=\"skel-line\"></div><div class=\"skel-line\"></div></div>\n        </div>\n      `;\n    }\n    if (!this.text) return nothing;\n\n    return html`\n      <div class=\"card ${this.expanded ? 'expanded' : ''} ${this.selected ? 'selected' : ''}\"\n        role=\"article\" tabindex=\"0\" aria-label=\"${this.type} insight\"\n        aria-expanded=${this.expandable ? String(this.expanded) : nothing}\n        @click=${this._handleClick} @keydown=${this._handleKeyDown}>\n\n        ${this.status && this.status !== 'dismissed' ? html`<div class=\"status-dot ${this.status}\" aria-hidden=\"true\"></div>` : nothing}\n\n        <div class=\"actions\">\n          <cg-button variant=\"tertiary\" size=\"sm\" rounded=\"full\" label=\"Bookmark\" @click=${this._handleBookmark}>\n            <cg-icon name=\"star\" size=\"xs\"></cg-icon>\n          </cg-button>\n          <cg-button variant=\"tertiary\" size=\"sm\" rounded=\"full\" label=\"Dismiss\" @click=${this._handleDismiss}>\n            <cg-icon name=\"close\" size=\"xs\"></cg-icon>\n          </cg-button>\n        </div>\n\n        <div class=\"icon-area ${this.type}\" aria-hidden=\"true\"><cg-icon name=\"${this._getIconName()}\" size=\"sm\"></cg-icon></div>\n\n        <div class=\"content\">\n          <div class=\"type-label\">${this.type}</div>\n          <div class=\"insight-text\">${this.text}</div>\n\n          <div class=\"meta\">\n            ${this.confidence > 0 ? html`<span class=\"confidence\">${Math.round(this.confidence * 100)}%</span>` : nothing}\n            ${this.confidence > 0 && this.timestamp ? html`<span class=\"meta-dot\"></span>` : nothing}\n            ${this.timestamp ? html`<span>${this.timestamp}</span>` : nothing}\n            ${(this.confidence > 0 || this.timestamp) && this.sources.length > 0 ? html`<span class=\"meta-dot\"></span>` : nothing}\n            ${this.sources.length > 0 ? html`<span>${this.sources.length} source${this.sources.length > 1 ? 's' : ''}</span>` : nothing}\n          </div>\n\n          ${this.expanded && this.sources.length > 0 ? html`\n            <div class=\"detail\">\n              <div class=\"sources-label\">Sources</div>\n              ${this.sources.map(s => html`\n                <div class=\"source\">\n                  <div class=\"source-dot ${this._relevanceClass(s.relevance)}\"></div>\n                  ${s.url ? html`<a href=\"${s.url}\" target=\"_blank\" rel=\"noopener\">${s.title}</a>` : html`<span>${s.title}</span>`}\n                </div>\n              `)}\n            </div>\n          ` : nothing}\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiInsightCard","LitElement","r","html","nothing","s","hostBlock","reducedMotion","shimmerKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-json-viewer/ai-json-viewer.d.ts

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+export declare class AiJsonViewer extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg' | 'full';
+    data: unknown;
+    expanded: boolean;
+    maxDepth: number;
+    private _collapsed;
+    private _isCollapsed;
+    private _togglePath;
+    private _emitPathClick;
+    private _countItems;
+    private _seen;
+    private _renderValue;
+    private _renderArray;
+    private _renderObject;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-json-viewer': AiJsonViewer;
+    }
+}
+//# sourceMappingURL=ai-json-viewer.d.ts.map

package/dist/components/ai-json-viewer/ai-json-viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-json-viewer.d.ts","sourceRoot":"","sources":["../../../src/components/ai-json-viewer/ai-json-viewer.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAuFnB;IAC0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAQ;IAClD,IAAI,EAAE,OAAO,CAAQ;IACxB,QAAQ,UAAQ;IACO,QAAQ,SAAK;IAExD,OAAO,CAAC,UAAU,CAA0B;IAErD,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,WAAW;IAUnB,OAAO,CAAC,cAAc;IAQtB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,KAAK,CAAiB;IAE9B,OAAO,CAAC,YAAY;IAkCpB,OAAO,CAAC,YAAY;IAmBpB,OAAO,CAAC,aAAa;IAuBZ,MAAM;CAQhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

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

@@ -0,0 +1,173 @@
+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";
+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 {
+  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();
+  }
+  _isCollapsed(e) {
+    return this.expanded ? this._collapsed.has(e) : !this._collapsed.has(e);
+  }
+  _togglePath(e) {
+    const t = new Set(this._collapsed);
+    t.has(e) ? t.delete(e) : t.add(e), this._collapsed = t;
+  }
+  _emitPathClick(e) {
+    this.dispatchEvent(new CustomEvent("ai-json-path-click", {
+      detail: { path: e },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  _countItems(e) {
+    return Array.isArray(e) ? e.length : e && typeof e == "object" ? Object.keys(e).length : 0;
+  }
+  _renderValue(e, t, s, o) {
+    const r = o ? "" : ",";
+    if (e !== null && typeof e == "object") {
+      if (this._seen.has(e))
+        return a`<span class="null">[Circular]</span>${r}`;
+      this._seen.add(e);
+    }
+    return e === null ? a`<span class="null">null</span>${r}` : typeof e == "string" ? a`<span class="string">"${e}"</span>${r}` : typeof e == "number" ? a`<span class="number">${e}</span>${r}` : typeof e == "boolean" ? a`<span class="boolean">${e}</span>${r}` : Array.isArray(e) ? this._renderArray(e, t, s, r) : typeof e == "object" ? this._renderObject(e, t, s, r) : a`<span class="string">${String(e)}</span>${r}`;
+  }
+  _renderArray(e, t, s, o) {
+    const r = this._isCollapsed(t), n = e.length, i = "  ".repeat(s), g = "  ".repeat(s + 1);
+    return n === 0 ? a`<span class="bracket">[]</span>${o}` : r || s >= this.maxDepth ? a`<button class="toggle" tabindex="0" aria-label="Expand array" @click=${() => this._togglePath(t)}>\u25B6</button><span class="bracket">[</span><span class="collapsed-hint"> ${n} items </span><span class="bracket">]</span>${o}` : a`<button class="toggle" tabindex="0" aria-label="Collapse array" @click=${() => this._togglePath(t)}>\u25BC</button><span class="bracket">[</span>
+${e.map((b, c) => a`<div class="line">${g}${this._renderValue(b, `${t}[${c}]`, s + 1, c === n - 1)}</div>`)}
+<div class="line">${i}<span class="bracket">]</span>${o}<span class="line-count">// ${n} items</span></div>`;
+  }
+  _renderObject(e, t, s, o) {
+    const r = this._isCollapsed(t), n = Object.keys(e), i = n.length, g = "  ".repeat(s), b = "  ".repeat(s + 1);
+    return i === 0 ? a`<span class="bracket">{}</span>${o}` : r || s >= this.maxDepth ? a`<button class="toggle" tabindex="0" aria-label="Expand object" @click=${() => this._togglePath(t)}>\u25B6</button><span class="bracket">{</span><span class="collapsed-hint"> ${i} keys </span><span class="bracket">}</span>${o}` : a`<button class="toggle" tabindex="0" aria-label="Collapse object" @click=${() => this._togglePath(t)}>\u25BC</button><span class="bracket">{</span>
+${n.map((c, f) => {
+      const u = t ? `${t}.${c}` : c;
+      return a`<div class="line">${b}<span class="key" tabindex="0" role="button" aria-label="Copy path: ${u}" @click=${() => this._emitPathClick(u)} @keydown=${(h) => {
+        h.key === "Enter" && this._emitPathClick(u);
+      }}>"${c}"</span>: ${this._renderValue(e[c], u, s + 1, f === i - 1)}</div>`;
+    })}
+<div class="line">${g}<span class="bracket">}</span>${o}<span class="line-count">// ${i} keys</span></div>`;
+  }
+  render() {
+    return this._seen = /* @__PURE__ */ new WeakSet(), a`
+      <div class="root" role="tree" aria-label="JSON viewer">
+        <div class="line">${this._renderValue(this.data, "$", 0, !0)}</div>
+      </div>
+    `;
+  }
+};
+l.styles = [_, m, k, v`
+    :host {
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-sm);
+      line-height: 1.6;
+      color: var(--cg-color-surface-base-text);
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;
+    }
+    :host([hidden]) { display: none; }
+
+    .root {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      overflow-x: auto;
+    }
+
+    .line {
+      white-space: pre;
+    }
+
+    .key {
+      color: var(--cg-color-status-info-text);
+      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);
+    }
+
+    .string { color: var(--cg-color-status-success-text-default); }
+    .number { color: var(--cg-color-surface-base-text); }
+    .boolean { color: var(--cg-color-status-success-text-default); }
+    .null { color: var(--cg-color-input-text-placeholder); font-style: italic; }
+
+    .toggle {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      background: none;
+      border: none;
+      color: var(--cg-color-input-text-placeholder);
+      cursor: pointer;
+      padding: 0;
+      font-size: var(--cg-font-size-xs);
+      vertical-align: middle;
+      border-radius: var(--cg-border-radius-25);
+      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;
+    }
+
+    .collapsed-hint {
+      color: var(--cg-color-input-text-placeholder);
+      font-style: italic;
+      font-size: var(--cg-font-size-xs);
+    }
+
+    .line-count {
+      display: inline;
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-xs);
+      margin-left: var(--cg-spacing-4);
+    }
+
+    .bracket {
+      color: var(--cg-color-input-text-placeholder);
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) .root { border-radius: 0; }
+    :host([rounded="sm"]) .root { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .root { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .root { border-radius: var(--cg-border-radius-150); }
+    :host([rounded="full"]) .root { border-radius: var(--cg-border-radius-full); }
+  `];
+d([
+  p({ reflect: !0 })
+], l.prototype, "rounded", 2);
+d([
+  p({ attribute: !1 })
+], l.prototype, "data", 2);
+d([
+  p({ type: Boolean })
+], l.prototype, "expanded", 2);
+d([
+  p({ type: Number, attribute: "max-depth" })
+], l.prototype, "maxDepth", 2);
+d([
+  $()
+], l.prototype, "_collapsed", 2);
+l = d([
+  x("ai-json-viewer")
+], l);
+export {
+  l as AiJsonViewer
+};
+//# sourceMappingURL=ai-json-viewer.js.map

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

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

package/dist/components/ai-keyboard-shortcuts/ai-keyboard-shortcuts.d.ts

@@ -0,0 +1,25 @@
+import { LitElement, nothing } from 'lit';
+export interface ShortcutEntry {
+    keys: string[];
+    description: string;
+    category?: string;
+}
+export declare class AiKeyboardShortcuts extends LitElement {
+    static styles: import('lit').CSSResult[];
+    shortcuts: ShortcutEntry[];
+    open: boolean;
+    private _search;
+    private _handleKeyDown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _close;
+    private _filtered;
+    private _grouped;
+    render(): import('lit').TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-keyboard-shortcuts': AiKeyboardShortcuts;
+    }
+}
+//# sourceMappingURL=ai-keyboard-shortcuts.d.ts.map

package/dist/components/ai-keyboard-shortcuts/ai-keyboard-shortcuts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-keyboard-shortcuts.d.ts","sourceRoot":"","sources":["../../../src/components/ai-keyboard-shortcuts/ai-keyboard-shortcuts.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,UAAU,EAAa,OAAO,EAAE,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,EAAE,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAgB,MAAM,4BA8InB;IACwB,SAAS,EAAE,aAAa,EAAE,CAAM;IACf,IAAI,UAAS;IAEhD,OAAO,CAAC,OAAO,CAAM;IAE9B,OAAO,CAAC,cAAc,CAIpB;IAEO,iBAAiB;IAKjB,oBAAoB;IAK7B,OAAO,CAAC,MAAM;IAMd,OAAO,CAAC,SAAS;IAUjB,OAAO,CAAC,QAAQ;IAUP,MAAM;CA0ChB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,uBAAuB,EAAE,mBAAmB,CAAC;KAC9C;CACF"}

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

@@ -0,0 +1,240 @@
+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;
+};
+let c = class extends u {
+  constructor() {
+    super(...arguments), this.shortcuts = [], this.open = !1, this._search = "", this._handleKeyDown = (t) => {
+      t.key === "Escape" && this.open && this._close();
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("keydown", this._handleKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("keydown", this._handleKeyDown);
+  }
+  _close() {
+    this.open = !1, this._search = "", this.dispatchEvent(new CustomEvent("ai-shortcuts-close", { bubbles: !0, composed: !0 }));
+  }
+  _filtered() {
+    if (!this._search) return this.shortcuts;
+    const t = 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)
+    );
+  }
+  _grouped(t) {
+    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);
+    }
+    return e;
+  }
+  render() {
+    if (!this.open) return d;
+    const t = this._filtered(), e = this._grouped(t);
+    return a`
+      <div class="overlay" @click=${(r) => {
+      r.target === r.currentTarget && this._close();
+    }}>
+        <div class="modal" role="dialog" aria-label="Keyboard shortcuts" aria-modal="true">
+          <div class="modal-header">
+            <span class="modal-title">Keyboard Shortcuts</span>
+            <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>
+          </div>
+          <input
+            class="search-input"
+            type="text"
+            placeholder="Search shortcuts..."
+            .value=${this._search}
+            @input=${(r) => {
+      this._search = r.target.value;
+    }}
+            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`
+                <div class="category-label">${r}</div>
+                ${o.map((s) => a`
+                  <div class="shortcut-row" role="listitem">
+                    <span class="shortcut-desc">${s.description}</span>
+                    <span class="key-group">
+                      ${s.keys.map((i, n) => a`
+                        ${n > 0 ? a`<span class="key-plus">+</span>` : d}
+                        <span class="key-badge">${i}</span>
+                      `)}
+                    </span>
+                  </div>
+                `)}
+              `)}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+c.styles = [f, b, m, p`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+    :host([hidden]) { display: none; }
+
+    .overlay {
+      position: fixed;
+      inset: 0;
+      background: var(--cg-overlay-dark-strong);
+      backdrop-filter: blur(2px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: var(--cg-z-index-top);
+    }
+
+    .modal {
+      background: var(--cg-color-surface-base-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      padding: var(--cg-spacing-24);
+      max-width: 520px;
+      width: 90vw;
+      max-height: 70vh;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .modal-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: var(--cg-spacing-16);
+    }
+
+    .modal-title {
+      color: var(--cg-color-surface-base-text);
+      font-size: var(--cg-font-size-lg);
+      font-weight: var(--cg-font-weight-bold);
+    }
+
+    .close-btn {
+      background: none;
+      border: none;
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-xl);
+      cursor: pointer;
+      padding: var(--cg-spacing-4);
+      border-radius: var(--cg-border-radius-50);
+      line-height: 1;
+    }
+    .close-btn:hover { color: var(--cg-color-surface-base-text); }
+    .close-btn:focus-visible {
+      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
+    }
+
+    .search-input {
+      width: 100%;
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: var(--cg-color-surface-container-background);
+      color: var(--cg-color-surface-base-text);
+      font-size: var(--cg-font-size-sm);
+      font-family: inherit;
+      margin-bottom: var(--cg-spacing-16);
+      box-sizing: border-box;
+    }
+    .search-input::placeholder {
+      color: var(--cg-color-input-text-placeholder);
+    }
+    .search-input:focus-visible {
+      outline: 2px solid var(--cg-overlay-accent-strong);
+      outline-offset: var(--cg-outline-offset-default);
+    }
+
+    .shortcuts-list {
+      overflow-y: auto;
+      flex: 1;
+    }
+
+    .category-label {
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      padding: var(--cg-spacing-8) 0 var(--cg-spacing-6);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      margin-bottom: var(--cg-spacing-4);
+    }
+
+    .shortcut-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--cg-spacing-8) var(--cg-spacing-4);
+    }
+
+    .shortcut-desc {
+      color: var(--cg-color-surface-base-text);
+      font-size: var(--cg-font-size-sm);
+    }
+
+    .key-group {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      flex-shrink: 0;
+    }
+
+    .key-badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: var(--cg-spacing-24);
+      height: var(--cg-spacing-24);
+      padding: 0 var(--cg-spacing-6);
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-bottom-width: 3px;
+      border-radius: var(--cg-border-radius-50);
+      color: var(--cg-color-surface-base-text);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      font-family: var(--cg-font-family-mono);
+      white-space: nowrap;
+    }
+
+    .key-plus {
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-xs);
+    }
+
+    .no-results {
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-sm);
+      text-align: center;
+      padding: var(--cg-spacing-16);
+    }
+  `];
+l([
+  g({ type: Array })
+], c.prototype, "shortcuts", 2);
+l([
+  g({ type: Boolean, reflect: !0 })
+], c.prototype, "open", 2);
+l([
+  h()
+], c.prototype, "_search", 2);
+c = l([
+  v("ai-keyboard-shortcuts")
+], c);
+export {
+  c as AiKeyboardShortcuts
+};
+//# sourceMappingURL=ai-keyboard-shortcuts.js.map

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

@@ -0,0 +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":";;;;;;;;AAgCO,IAAMA,IAAN,cAAkCC,EAAW;AAAA,EAA7C,cAAA;AAAA,UAAA,GAAA,SAAA,GAgJsB,KAAA,YAA6B,CAAA,GACZ,KAAA,OAAO,IAE1C,KAAQ,UAAU,IAE3B,KAAQ,iBAAiB,CAACC,MAAqB;AAC7C,MAAIA,EAAE,QAAQ,YAAY,KAAK,QAC7B,KAAK,OAAA;AAAA,IAET;AAAA,EAAA;AAAA,EAES,oBAAoB;AAC3B,UAAM,kBAAA,GACN,SAAS,iBAAiB,WAAW,KAAK,cAAc;AAAA,EAC1D;AAAA,EAES,uBAAuB;AAC9B,UAAM,qBAAA,GACN,SAAS,oBAAoB,WAAW,KAAK,cAAc;AAAA,EAC7D;AAAA,EAEQ,SAAS;AACf,SAAK,OAAO,IACZ,KAAK,UAAU,IACf,KAAK,cAAc,IAAI,YAAY,sBAAsB,EAAE,SAAS,IAAM,UAAU,GAAA,CAAM,CAAC;AAAA,EAC7F;AAAA,EAEQ,YAA6B;AACnC,QAAI,CAAC,KAAK,QAAS,QAAO,KAAK;AAC/B,UAAMC,IAAI,KAAK,QAAQ,YAAA;AACvB,WAAO,KAAK,UAAU;AAAA,MAAO,CAAAC,MAC3BA,EAAE,YAAY,YAAA,EAAc,SAASD,CAAC,KACtCC,EAAE,KAAK,KAAK,CAAAC,MAAKA,EAAE,YAAA,EAAc,SAASF,CAAC,CAAC,KAC3CC,EAAE,UAAU,cAAc,SAASD,CAAC;AAAA,IAAA;AAAA,EAEzC;AAAA,EAEQ,SAASG,GAAsD;AACrE,UAAMC,wBAAU,IAAA;AAChB,eAAWC,KAAQF,GAAO;AACxB,YAAMG,IAAMD,EAAK,YAAY;AAC7B,MAAKD,EAAI,IAAIE,CAAG,KAAGF,EAAI,IAAIE,GAAK,EAAE,GAClCF,EAAI,IAAIE,CAAG,EAAG,KAAKD,CAAI;AAAA,IACzB;AACA,WAAOD;AAAA,EACT;AAAA,EAES,SAAS;AAChB,QAAI,CAAC,KAAK,KAAM,QAAOG;AACvB,UAAMC,IAAW,KAAK,UAAA,GAChBC,IAAU,KAAK,SAASD,CAAQ;AAEtC,WAAOE;AAAA,oCACyB,CAACX,MAAa;AAAE,MAAIA,EAAE,WAAWA,EAAE,sBAAoB,OAAA;AAAA,IAAU,CAAC;AAAA;AAAA;AAAA;AAAA,4EAI1B,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMlE,KAAK,OAAO;AAAA,qBACZ,CAACA,MAAa;AAAE,WAAK,UAAWA,EAAE,OAA4B;AAAA,IAAO,CAAC;AAAA;AAAA;AAAA;AAAA,cAI7ES,EAAS,WAAW,IAClBE,sDACA,MAAM,KAAKD,EAAQ,QAAA,CAAS,EAAE,IAAI,CAAC,CAACH,GAAKH,CAAK,MAAMO;AAAA,8CACtBJ,CAAG;AAAA,kBAC/BH,EAAM,IAAI,CAAA,MAAKO;AAAA;AAAA,kDAEiB,EAAE,WAAW;AAAA;AAAA,wBAEvC,EAAE,KAAK,IAAI,CAACR,GAAGS,MAAMD;AAAA,0BACnBC,IAAI,IAAID,qCAAwCH,CAAO;AAAA,kDAC/BL,CAAC;AAAA,uBAC5B,CAAC;AAAA;AAAA;AAAA,iBAGP,CAAC;AAAA,eACH,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,EAKd;AACF;AAzOaL,EACK,SAAS,CAACe,GAAWC,GAAeC,GAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA8IzE;AAC0BC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAhJdpB,EAgJgB,WAAA,aAAA,CAAA;AACiBmB,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjJ/BpB,EAiJiC,WAAA,QAAA,CAAA;AAE3BmB,EAAA;AAAA,EAAhBE,EAAA;AAAM,GAnJIrB,EAmJM,WAAA,WAAA,CAAA;AAnJNA,IAANmB,EAAA;AAAA,EADNG,EAAc,uBAAuB;AAAA,GACzBtB,CAAA;"}

package/dist/components/ai-kpi-grid/ai-kpi-grid.d.ts

@@ -0,0 +1,26 @@
+import { LitElement } from 'lit';
+interface KpiItem {
+    label: string;
+    value: string;
+    delta?: string;
+    trend?: 'up' | 'down' | 'neutral';
+    icon?: string;
+}
+export declare class AiKpiGrid extends LitElement {
+    static styles: import('lit').CSSResult[];
+    title: string;
+    kpis: KpiItem[];
+    columns: number;
+    loading: boolean;
+    private _handleKpiClick;
+    private _trendArrow;
+    private _renderSkeleton;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-kpi-grid': AiKpiGrid;
+    }
+}
+export {};
+//# sourceMappingURL=ai-kpi-grid.d.ts.map

package/dist/components/ai-kpi-grid/ai-kpi-grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-kpi-grid.d.ts","sourceRoot":"","sources":["../../../src/components/ai-kpi-grid/ai-kpi-grid.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,UAAU,OAAO;IACf,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAkGnB;IACkC,KAAK,SAAM;IAChB,IAAI,EAAE,OAAO,EAAE,CAAM;IACV,OAAO,SAAK;IAC1B,OAAO,UAAS;IAE7C,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,eAAe;IAWd,MAAM;CA4BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,SAAS,CAAC;KAC1B;CACF"}