@cognivo/components 0.8.0

package/dist/components/ai-data-card/ai-data-card.js

@@ -0,0 +1,358 @@
+import { css as p, LitElement as v, html as t, nothing as n } from "lit";
+import { property as o, customElement as h } from "lit/decorators.js";
+import { h as u, r as b, f as m, b as f } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-button/cg-button.js";
+import "../cg-badge/cg-badge.js";
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, i = (e, a, r, l) => {
+  for (var c = l > 1 ? void 0 : l ? w(a, r) : a, d = e.length - 1, g; d >= 0; d--)
+    (g = e[d]) && (c = (l ? g(a, r, c) : g(c)) || c);
+  return l && c && y(a, r, c), c;
+};
+let s = class extends v {
+  constructor() {
+    super(...arguments), this.title = "", this.subtitle = "", this.icon = "", this.headerStatus = "", this.headerStatusLabel = "", this.fields = [], this.actions = [], this.compact = !1, this.loading = !1, this.highlighted = !1, this._copiedField = null;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._copyTimer && clearTimeout(this._copyTimer);
+  }
+  _sanitizeUrl(e) {
+    const a = e.trim().toLowerCase();
+    return a.startsWith("javascript:") || a.startsWith("data:") || a.startsWith("vbscript:") ? "#" : e;
+  }
+  _handleAction(e) {
+    e.disabled || this.dispatchEvent(new CustomEvent("ai-data-card-action", {
+      bubbles: !0,
+      composed: !0,
+      detail: { actionId: e.id, actionLabel: e.label }
+    }));
+  }
+  _handleRowClick(e) {
+    this.dispatchEvent(new CustomEvent("ai-data-card-row-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { label: e.label, value: e.value, type: e.type }
+    }));
+  }
+  async _handleCopy(e) {
+    const a = String(e.value);
+    try {
+      if (navigator.clipboard)
+        await navigator.clipboard.writeText(a);
+      else {
+        const r = document.createElement("textarea");
+        r.value = a, r.style.position = "fixed", r.style.opacity = "0", document.body.appendChild(r), r.select(), document.execCommand("copy"), document.body.removeChild(r);
+      }
+      this._copiedField = e.label, this.requestUpdate(), this._copyTimer && clearTimeout(this._copyTimer), this._copyTimer = setTimeout(() => {
+        this._copiedField = null, this.requestUpdate();
+      }, 2e3);
+    } catch {
+    }
+  }
+  _renderValue(e) {
+    const a = String(e.value), r = e.status || "neutral";
+    switch (e.type) {
+      case "currency":
+        return t`<span class="val-currency">${a}</span>`;
+      case "number":
+        return t`<span class="val-number">${a}</span>`;
+      case "percent": {
+        const l = Number(e.value), c = isNaN(l) ? "var(--cg-color-input-text-placeholder)" : l >= 0 ? "var(--cg-color-status-success-text-default)" : "var(--cg-color-status-error-text-default)";
+        return t`<span class="val-percent" style="color: ${c};">${a}</span>`;
+      }
+      case "date":
+        return t`<span class="val-date">${a}</span>`;
+      case "status":
+        return t`<cg-badge variant="${r === "error" ? "danger" : r}" label="${a}" size="sm"></cg-badge>`;
+      case "badge":
+        return t`<cg-badge variant="${r === "error" ? "danger" : r}" label="${a}" size="sm"></cg-badge>`;
+      case "link":
+        return t`<a class="val-link" href="${this._sanitizeUrl(e.url || "#")}" target="_blank" rel="noopener noreferrer">${a}</a>`;
+      default:
+        return t`<span>${a}</span>`;
+    }
+  }
+  render() {
+    return this.loading ? t`
+        <div class="card skeleton" role="status" aria-label="Loading data">
+          <div class="skel-header">
+            <div class="skel skel-icon"></div>
+            <div class="skel-lines">
+              <div class="skel skel-line-lg"></div>
+              <div class="skel skel-line-sm"></div>
+            </div>
+          </div>
+          ${[1, 2, 3, 4].map(() => t`
+            <div class="skel-row">
+              <div class="skel skel-label"></div>
+              <div class="skel skel-value"></div>
+            </div>
+          `)}
+        </div>
+      ` : this.fields.length === 0 && !this.title ? t`<div class="card"><div class="empty">No data to display</div></div>` : t`
+      <div class="card ${this.highlighted ? "highlighted" : ""}"
+        role="region" aria-label="${this.title || "Data card"}">
+
+        ${this.title ? t`
+          <div class="header">
+            <div class="header-info">
+              <div class="header-title">${this.title}</div>
+              ${this.subtitle ? t`<div class="header-subtitle">${this.subtitle}</div>` : n}
+            </div>
+            ${this.headerStatus && this.headerStatusLabel ? t`
+              <cg-badge variant="${this.headerStatus === "error" ? "danger" : this.headerStatus}" label="${this.headerStatusLabel}" size="sm"></cg-badge>
+            ` : n}
+          </div>
+        ` : n}
+
+        ${this.fields.length > 0 ? t`
+          <div class="rows" role="list">
+            ${this.fields.map((e) => t`
+              <div class="row ${e.copyable || e.url ? "clickable" : ""}"
+                role="listitem"
+                tabindex="${e.copyable || e.url ? "0" : "-1"}"
+                aria-label="${e.label}: ${e.value}"
+                @click=${() => this._handleRowClick(e)}
+                @keydown=${(a) => {
+      (a.key === "Enter" || a.key === " ") && (a.preventDefault(), this._handleRowClick(e));
+    }}>
+                <span class="row-label">${e.label}</span>
+                <span class="row-value">
+                  ${this._renderValue(e)}
+                  ${e.copyable ? t`
+                    <span class="copy-wrap">
+                      <cg-button variant="tertiary" size="sm"
+                        status=${this._copiedField === e.label ? "success" : "idle"}
+                        label="${this._copiedField === e.label ? "Copied!" : `Copy ${e.label}`}"
+                        @click=${(a) => {
+      a.stopPropagation(), this._handleCopy(e);
+    }}>
+                        <cg-icon name=${this._copiedField === e.label ? "check" : "copy"} size="xs"></cg-icon>
+                      </cg-button>
+                    </span>
+                  ` : n}
+                </span>
+              </div>
+            `)}
+          </div>
+        ` : n}
+
+        ${this.actions.length > 0 ? t`
+          <div class="footer">
+            ${this.actions.map((e) => t`
+              <cg-button
+                variant=${e.variant === "danger" ? "tertiary" : e.variant === "primary" ? "primary" : "secondary"}
+                size="sm"
+                full
+                type=${e.variant === "danger" ? "danger" : "normal"}
+                ?disabled=${e.disabled}
+                @cg-click=${() => this._handleAction(e)}>
+                ${e.label}
+              </cg-button>
+            `)}
+          </div>
+        ` : n}
+      </div>
+    `;
+  }
+};
+s.styles = [u, b, m, f, p`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+
+    .card {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-component-card-radius);
+      overflow: hidden;
+      font-family: var(--cg-font-family-primary);
+    }
+
+    /* ── Header ── */
+    .header {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-20) var(--cg-spacing-20) var(--cg-spacing-16);
+    }
+    .header-info {
+      flex: 1;
+      min-width: 0;
+    }
+    .header-title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .header-subtitle {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      margin-top: var(--cg-spacing-2);
+    }
+
+    /* ── Rows (table-style inset) ── */
+    .rows {
+      margin: 0 var(--cg-spacing-12);
+      background: var(--cg-overlay-dark-subtle);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      overflow: hidden;
+    }
+    .row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+    }
+    .row:last-child {
+      border-bottom: none;
+    }
+    .row.clickable {
+      cursor: pointer;
+    }
+    .row.clickable:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);
+    }
+
+    .row-label {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-input-text-placeholder);
+      flex-shrink: 0;
+      min-width: 100px;
+    }
+    .row-value {
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-surface-base-text);
+      text-align: right;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: var(--cg-spacing-6);
+    }
+
+    /* ── Value types ── */
+    .val-currency {
+      color: var(--cg-color-surface-base-text);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+    .val-number {
+      color: var(--cg-color-surface-base-text);
+    }
+    .val-percent {
+      font-weight: var(--cg-font-weight-semibold);
+    }
+    .val-date {
+      color: var(--cg-color-surface-base-text);
+    }
+    .val-link {
+      color: var(--cg-color-surface-base-text);
+      text-decoration: none;
+      cursor: pointer;
+      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .val-link:hover {
+      text-decoration: underline;
+    }
+
+
+    /* Copy button (positioned inline) */
+    .copy-wrap { flex-shrink: 0; }
+
+    /* ── Footer ── */
+    .footer {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+      padding: var(--cg-spacing-16) var(--cg-spacing-12);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      :host(:hover) .card { transform: none; }
+    }
+
+    /* ── Compact mode ── */
+    :host([compact]) .header { padding: var(--cg-spacing-8) var(--cg-spacing-12); }
+    :host([compact]) .header-icon { width: var(--cg-spacing-24); height: var(--cg-spacing-24); font-size: var(--cg-font-size-xs); }
+    :host([compact]) .header-title { font-size: var(--cg-font-size-xs); }
+    :host([compact]) .rows { margin: 0 var(--cg-spacing-4); }
+    :host([compact]) .row { padding: var(--cg-spacing-8) var(--cg-spacing-12); }
+    :host([compact]) .row-label { min-width: 80px; }
+    :host([compact]) .row-value { font-size: var(--cg-font-size-xs); }
+    :host([compact]) .footer { padding: var(--cg-spacing-8) var(--cg-spacing-12); }
+
+    /* ── Highlighted / selected ── */
+    .card.highlighted {
+      border-color: var(--cg-color-surface-base-text);
+    }
+
+    /* ── Loading skeleton ── */
+    .skeleton .skel {
+      border-radius: var(--cg-border-radius-100);
+      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%);
+      background-size: 200% 100%;
+      animation: shimmer 1.5s linear infinite;
+    }
+    .skel-header { display: flex; gap: var(--cg-spacing-8); padding: var(--cg-spacing-12) var(--cg-spacing-16); border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-container-background); }
+    .skel-icon { width: var(--cg-spacing-32); height: var(--cg-spacing-32); border-radius: var(--cg-border-radius-100); }
+    .skel-lines { flex: 1; display: flex; flex-direction: column; gap: var(--cg-spacing-6); justify-content: center; }
+    .skel-line-lg { height: var(--cg-spacing-12); width: 60%; }
+    .skel-line-sm { height: var(--cg-spacing-8); width: 35%; }
+    .skel-row { display: flex; justify-content: space-between; padding: var(--cg-spacing-12) var(--cg-spacing-16); border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-container-background); }
+    .skel-row:last-child { border-bottom: none; }
+    .skel-label { height: var(--cg-spacing-8); width: 30%; }
+    .skel-value { height: var(--cg-spacing-8); width: 40%; }
+
+    /* ── Empty state ── */
+    .empty {
+      padding: var(--cg-spacing-24);
+      text-align: center;
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-xs);
+    }
+
+  `];
+i([
+  o({ type: String })
+], s.prototype, "title", 2);
+i([
+  o({ type: String })
+], s.prototype, "subtitle", 2);
+i([
+  o({ type: String })
+], s.prototype, "icon", 2);
+i([
+  o({ type: String })
+], s.prototype, "headerStatus", 2);
+i([
+  o({ type: String })
+], s.prototype, "headerStatusLabel", 2);
+i([
+  o({ type: Array })
+], s.prototype, "fields", 2);
+i([
+  o({ type: Array })
+], s.prototype, "actions", 2);
+i([
+  o({ type: Boolean, reflect: !0 })
+], s.prototype, "compact", 2);
+i([
+  o({ type: Boolean })
+], s.prototype, "loading", 2);
+i([
+  o({ type: Boolean })
+], s.prototype, "highlighted", 2);
+s = i([
+  h("ai-data-card")
+], s);
+export {
+  s as AiDataCard
+};
+//# sourceMappingURL=ai-data-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-data-card.js","sources":["../../../src/components/ai-data-card/ai-data-card.ts"],"sourcesContent":["/**\n * @element ai-data-card\n * Compact key-value data card with typed formatting, header badge, footer actions, and loading skeleton.\n *\n * @example\n * ```html\n * <ai-data-card\n *   title=\"Invoice #4821\"\n *   icon=\"[receipt icon]\"\n *   headerStatus=\"success\" headerStatusLabel=\"Paid\"\n *   .fields=${[\n *     {label:'Amount', value:'$1,240.00', type:'currency'},\n *     {label:'Status', value:'Completed', type:'status', status:'success'}\n *   ]}\n *   .actions=${[{id:'view', label:'View Details', variant:'primary'}]}\n * ></ai-data-card>\n * ```\n *\n * @fires {CustomEvent<{actionId, actionLabel}>} ai-data-card-action - Footer action clicked\n * @fires {CustomEvent<{label, value, type}>} ai-data-card-row-click - Row clicked\n *\n * @cssprop [--cg-brand-ai-accent=#dfff61] - Primary button, link, and currency text color\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes, shimmerKeyframes } from '../../styles/index.js';\nimport '../cg-button/cg-button.js';\nimport '../cg-badge/cg-badge.js';\n\ninterface DataField {\n  label: string;\n  value: string | number;\n  type?: 'text' | 'currency' | 'date' | 'status' | 'badge' | 'link' | 'number' | 'percent';\n  status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';\n  url?: string;\n  copyable?: boolean;\n}\n\ninterface CardAction {\n  id: string;\n  label: string;\n  variant?: 'primary' | 'secondary' | 'danger';\n  icon?: string;\n  disabled?: boolean;\n}\n\n@customElement('ai-data-card')\nexport class AiDataCard 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      overflow: hidden;\n      font-family: var(--cg-font-family-primary);\n    }\n\n    /* ── Header ── */\n    .header {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-20) var(--cg-spacing-20) var(--cg-spacing-16);\n    }\n    .header-info {\n      flex: 1;\n      min-width: 0;\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      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n    .header-subtitle {\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    /* ── Rows (table-style inset) ── */\n    .rows {\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-100);\n      overflow: hidden;\n    }\n    .row {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\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    }\n    .row:last-child {\n      border-bottom: none;\n    }\n    .row.clickable {\n      cursor: pointer;\n    }\n    .row.clickable:focus-visible {\n      outline: none;\n      box-shadow: inset 0 0 0 2px var(--cg-overlay-accent-strong);\n    }\n\n    .row-label {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-input-text-placeholder);\n      flex-shrink: 0;\n      min-width: 100px;\n    }\n    .row-value {\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-surface-base-text);\n      text-align: right;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      display: flex;\n      align-items: center;\n      justify-content: flex-end;\n      gap: var(--cg-spacing-6);\n    }\n\n    /* ── Value types ── */\n    .val-currency {\n      color: var(--cg-color-surface-base-text);\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .val-number {\n      color: var(--cg-color-surface-base-text);\n    }\n    .val-percent {\n      font-weight: var(--cg-font-weight-semibold);\n    }\n    .val-date {\n      color: var(--cg-color-surface-base-text);\n    }\n    .val-link {\n      color: var(--cg-color-surface-base-text);\n      text-decoration: none;\n      cursor: pointer;\n      transition: color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .val-link:hover {\n      text-decoration: underline;\n    }\n\n\n    /* Copy button (positioned inline) */\n    .copy-wrap { flex-shrink: 0; }\n\n    /* ── Footer ── */\n    .footer {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-16) var(--cg-spacing-12);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      :host(:hover) .card { transform: none; }\n    }\n\n    /* ── Compact mode ── */\n    :host([compact]) .header { padding: var(--cg-spacing-8) var(--cg-spacing-12); }\n    :host([compact]) .header-icon { width: var(--cg-spacing-24); height: var(--cg-spacing-24); font-size: var(--cg-font-size-xs); }\n    :host([compact]) .header-title { font-size: var(--cg-font-size-xs); }\n    :host([compact]) .rows { margin: 0 var(--cg-spacing-4); }\n    :host([compact]) .row { padding: var(--cg-spacing-8) var(--cg-spacing-12); }\n    :host([compact]) .row-label { min-width: 80px; }\n    :host([compact]) .row-value { font-size: var(--cg-font-size-xs); }\n    :host([compact]) .footer { padding: var(--cg-spacing-8) var(--cg-spacing-12); }\n\n    /* ── Highlighted / selected ── */\n    .card.highlighted {\n      border-color: var(--cg-color-surface-base-text);\n    }\n\n    /* ── Loading skeleton ── */\n    .skeleton .skel {\n      border-radius: var(--cg-border-radius-100);\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-header { display: flex; gap: var(--cg-spacing-8); padding: var(--cg-spacing-12) var(--cg-spacing-16); border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-container-background); }\n    .skel-icon { width: var(--cg-spacing-32); height: var(--cg-spacing-32); border-radius: var(--cg-border-radius-100); }\n    .skel-lines { flex: 1; display: flex; flex-direction: column; gap: var(--cg-spacing-6); justify-content: center; }\n    .skel-line-lg { height: var(--cg-spacing-12); width: 60%; }\n    .skel-line-sm { height: var(--cg-spacing-8); width: 35%; }\n    .skel-row { display: flex; justify-content: space-between; padding: var(--cg-spacing-12) var(--cg-spacing-16); border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-container-background); }\n    .skel-row:last-child { border-bottom: none; }\n    .skel-label { height: var(--cg-spacing-8); width: 30%; }\n    .skel-value { height: var(--cg-spacing-8); width: 40%; }\n\n    /* ── Empty state ── */\n    .empty {\n      padding: var(--cg-spacing-24);\n      text-align: center;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n    }\n\n  `];\n  /** Card title */\n  @property({ type: String }) override title: string = '';\n\n  /** Subtitle text */\n  @property({ type: String }) subtitle: string = '';\n\n  /** Header icon (emoji or text) */\n  @property({ type: String }) icon: string = '';\n\n  /** Header status badge */\n  @property({ type: String }) headerStatus: '' | 'success' | 'warning' | 'error' | 'info' | 'neutral' = '';\n\n  /** Header status label */\n  @property({ type: String }) headerStatusLabel: string = '';\n\n  /** Data fields (key-value rows) */\n  @property({ type: Array }) fields: DataField[] = [];\n\n  /** Action buttons in footer */\n  @property({ type: Array }) actions: CardAction[] = [];\n\n  /** Compact display mode */\n  @property({ type: Boolean, reflect: true }) compact: boolean = false;\n\n  /** Loading skeleton */\n  @property({ type: Boolean }) loading: boolean = false;\n\n  /** Highlighted border */\n  @property({ type: Boolean }) highlighted: boolean = false;\n\n  private _copiedField: string | null = null;\n  private _copyTimer?: ReturnType<typeof setTimeout>;\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    if (this._copyTimer) clearTimeout(this._copyTimer);\n  }\n\n  private _sanitizeUrl(url: string): string {\n    const trimmed = url.trim().toLowerCase();\n    if (trimmed.startsWith('javascript:') || trimmed.startsWith('data:') || trimmed.startsWith('vbscript:')) return '#';\n    return url;\n  }\n\n  private _handleAction(action: CardAction) {\n    if (action.disabled) return;\n    this.dispatchEvent(new CustomEvent('ai-data-card-action', {\n      bubbles: true, composed: true,\n      detail: { actionId: action.id, actionLabel: action.label },\n    }));\n  }\n\n  private _handleRowClick(field: DataField) {\n    this.dispatchEvent(new CustomEvent('ai-data-card-row-click', {\n      bubbles: true, composed: true,\n      detail: { label: field.label, value: field.value, type: field.type },\n    }));\n  }\n\n  private async _handleCopy(field: DataField) {\n    const text = String(field.value);\n    try {\n      if (navigator.clipboard) {\n        await navigator.clipboard.writeText(text);\n      } else {\n        const ta = document.createElement('textarea');\n        ta.value = text;\n        ta.style.position = 'fixed';\n        ta.style.opacity = '0';\n        document.body.appendChild(ta);\n        ta.select();\n        document.execCommand('copy');\n        document.body.removeChild(ta);\n      }\n      this._copiedField = field.label;\n      this.requestUpdate();\n      if (this._copyTimer) clearTimeout(this._copyTimer);\n      this._copyTimer = setTimeout(() => { this._copiedField = null; this.requestUpdate(); }, 2000);\n    } catch { /* silently fail */ }\n  }\n\n  private _renderValue(field: DataField) {\n    const val = String(field.value);\n    const status = field.status || 'neutral';\n\n    switch (field.type) {\n      case 'currency':\n        return html`<span class=\"val-currency\">${val}</span>`;\n      case 'number':\n        return html`<span class=\"val-number\">${val}</span>`;\n      case 'percent': {\n        const num = Number(field.value);\n        const pColor = isNaN(num) ? 'var(--cg-color-input-text-placeholder)' : num >= 0 ? 'var(--cg-color-status-success-text-default)' : 'var(--cg-color-status-error-text-default)';\n        return html`<span class=\"val-percent\" style=\"color: ${pColor};\">${val}</span>`;\n      }\n      case 'date':\n        return html`<span class=\"val-date\">${val}</span>`;\n      case 'status':\n        return html`<cg-badge variant=\"${status === 'error' ? 'danger' : status}\" label=\"${val}\" size=\"sm\"></cg-badge>`;\n      case 'badge':\n        return html`<cg-badge variant=\"${status === 'error' ? 'danger' : status}\" label=\"${val}\" size=\"sm\"></cg-badge>`;\n      case 'link':\n        return html`<a class=\"val-link\" href=\"${this._sanitizeUrl(field.url || '#')}\" target=\"_blank\" rel=\"noopener noreferrer\">${val}</a>`;\n      default:\n        return html`<span>${val}</span>`;\n    }\n  }\n\n  override render() {\n    if (this.loading) {\n      return html`\n        <div class=\"card skeleton\" role=\"status\" aria-label=\"Loading data\">\n          <div class=\"skel-header\">\n            <div class=\"skel skel-icon\"></div>\n            <div class=\"skel-lines\">\n              <div class=\"skel skel-line-lg\"></div>\n              <div class=\"skel skel-line-sm\"></div>\n            </div>\n          </div>\n          ${[1, 2, 3, 4].map(() => html`\n            <div class=\"skel-row\">\n              <div class=\"skel skel-label\"></div>\n              <div class=\"skel skel-value\"></div>\n            </div>\n          `)}\n        </div>\n      `;\n    }\n\n    if (this.fields.length === 0 && !this.title) {\n      return html`<div class=\"card\"><div class=\"empty\">No data to display</div></div>`;\n    }\n\n    return html`\n      <div class=\"card ${this.highlighted ? 'highlighted' : ''}\"\n        role=\"region\" aria-label=\"${this.title || 'Data card'}\">\n\n        ${this.title ? html`\n          <div class=\"header\">\n            <div class=\"header-info\">\n              <div class=\"header-title\">${this.title}</div>\n              ${this.subtitle ? html`<div class=\"header-subtitle\">${this.subtitle}</div>` : nothing}\n            </div>\n            ${this.headerStatus && this.headerStatusLabel ? html`\n              <cg-badge variant=\"${this.headerStatus === 'error' ? 'danger' : this.headerStatus}\" label=\"${this.headerStatusLabel}\" size=\"sm\"></cg-badge>\n            ` : nothing}\n          </div>\n        ` : nothing}\n\n        ${this.fields.length > 0 ? html`\n          <div class=\"rows\" role=\"list\">\n            ${this.fields.map(field => html`\n              <div class=\"row ${field.copyable || field.url ? 'clickable' : ''}\"\n                role=\"listitem\"\n                tabindex=\"${field.copyable || field.url ? '0' : '-1'}\"\n                aria-label=\"${field.label}: ${field.value}\"\n                @click=${() => this._handleRowClick(field)}\n                @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleRowClick(field); } }}>\n                <span class=\"row-label\">${field.label}</span>\n                <span class=\"row-value\">\n                  ${this._renderValue(field)}\n                  ${field.copyable ? html`\n                    <span class=\"copy-wrap\">\n                      <cg-button variant=\"tertiary\" size=\"sm\"\n                        status=${this._copiedField === field.label ? 'success' : 'idle'}\n                        label=\"${this._copiedField === field.label ? 'Copied!' : `Copy ${field.label}`}\"\n                        @click=${(e: Event) => { e.stopPropagation(); this._handleCopy(field); }}>\n                        <cg-icon name=${this._copiedField === field.label ? 'check' : 'copy'} size=\"xs\"></cg-icon>\n                      </cg-button>\n                    </span>\n                  ` : nothing}\n                </span>\n              </div>\n            `)}\n          </div>\n        ` : nothing}\n\n        ${this.actions.length > 0 ? html`\n          <div class=\"footer\">\n            ${this.actions.map(action => html`\n              <cg-button\n                variant=${action.variant === 'danger' ? 'tertiary' : action.variant === 'primary' ? 'primary' : 'secondary'}\n                size=\"sm\"\n                full\n                type=${action.variant === 'danger' ? 'danger' : 'normal'}\n                ?disabled=${action.disabled}\n                @cg-click=${() => this._handleAction(action)}>\n                ${action.label}\n              </cg-button>\n            `)}\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiDataCard","LitElement","url","trimmed","action","field","text","ta","val","status","html","num","pColor","nothing","e","hostBlock","reducedMotion","fadeSlideInKeyframes","shimmerKeyframes","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-data-lineage/ai-data-lineage.d.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+export interface LineageNode {
+    id: string;
+    label: string;
+    type: 'source' | 'transform' | 'model' | 'output';
+    status?: 'active' | 'complete' | 'error';
+}
+export interface LineageEdge {
+    from: string;
+    to: string;
+}
+export declare class AiDataLineage extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    nodes: LineageNode[];
+    edges: LineageEdge[];
+    highlightPath: string;
+    direction: 'horizontal' | 'vertical';
+    private _getPathIds;
+    private _onNodeClick;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-data-lineage': AiDataLineage;
+    }
+}
+//# sourceMappingURL=ai-data-lineage.d.ts.map

package/dist/components/ai-data-lineage/ai-data-lineage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-data-lineage.d.ts","sourceRoot":"","sources":["../../../src/components/ai-data-lineage/ai-data-lineage.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,QAAQ,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;IAClD,MAAM,CAAC,EAAE,QAAQ,GAAG,UAAU,GAAG,OAAO,CAAC;CAC1C;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAqGnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IACzC,KAAK,EAAE,WAAW,EAAE,CAAM;IAC1B,KAAK,EAAE,WAAW,EAAE,CAAM;IAC9B,aAAa,SAAM;IACnB,SAAS,EAAE,YAAY,GAAG,UAAU,CAAgB;IAEhF,OAAO,CAAC,WAAW;IAkBnB,OAAO,CAAC,YAAY;IAOX,MAAM;CA4DhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/ai-data-lineage/ai-data-lineage.js

@@ -0,0 +1,200 @@
+import { css as y, LitElement as k, html as c, nothing as v } from "lit";
+import { property as p, customElement as $ } from "lit/decorators.js";
+import { h as P, r as _ } from "../../chunks/premium.css-9I4kHrsl.js";
+var z = Object.defineProperty, S = Object.getOwnPropertyDescriptor, l = (e, a, s, r) => {
+  for (var o = r > 1 ? void 0 : r ? S(a, s) : a, g = e.length - 1, i; g >= 0; g--)
+    (i = e[g]) && (o = (r ? i(a, s, o) : i(o)) || o);
+  return r && o && z(a, s, o), o;
+};
+let n = class extends k {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.nodes = [], this.edges = [], this.highlightPath = "", this.direction = "horizontal";
+  }
+  _getPathIds() {
+    if (!this.highlightPath) return /* @__PURE__ */ new Set();
+    const e = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Map();
+    for (const r of this.edges)
+      a.has(r.to) || a.set(r.to, []), a.get(r.to).push(r.from);
+    const s = [this.highlightPath];
+    for (; s.length; ) {
+      const r = s.shift();
+      if (!e.has(r)) {
+        e.add(r);
+        for (const o of a.get(r) || []) s.push(o);
+      }
+    }
+    return e;
+  }
+  _onNodeClick(e) {
+    this.dispatchEvent(new CustomEvent("ai-lineage-node-click", {
+      detail: { id: e.id, label: e.label, type: e.type },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  render() {
+    if (this.nodes.length === 0)
+      return c`<div class="container"><div class="empty">No lineage data</div></div>`;
+    const e = this._getPathIds(), a = this.direction === "vertical", s = /* @__PURE__ */ new Set(), r = [], o = /* @__PURE__ */ new Map();
+    for (const t of this.edges)
+      o.has(t.from) || o.set(t.from, []), o.get(t.from).push(t.to);
+    const g = new Set(this.edges.map((t) => t.to)), i = this.nodes.filter((t) => !g.has(t.id));
+    for (i.length === 0 && this.nodes.length > 0 && i.push(this.nodes[0]); i.length; ) {
+      const t = i.shift();
+      if (!(!t || s.has(t.id))) {
+        s.add(t.id), r.push(t);
+        for (const u of o.get(t.id) || []) {
+          const h = this.nodes.find((d) => d.id === u);
+          h && !s.has(h.id) && i.push(h);
+        }
+      }
+    }
+    for (const t of this.nodes) s.has(t.id) || r.push(t);
+    const b = c`<svg width="24" height="12" viewBox="0 0 24 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="0" y1="6" x2="18" y2="6"/><path d="M15 2l5 4-5 4"/></svg>`, w = c`<svg width="12" height="24" viewBox="0 0 12 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><line x1="6" y1="0" x2="6" y2="18"/><path d="M2 15l4 5 4-5"/></svg>`;
+    return c`
+      <div class="container" role="group" aria-label="Data lineage">
+        <div class="flow ${a ? "vertical" : ""}">
+          ${r.map((t, u) => {
+      const h = e.has(t.id), d = r[u + 1], m = d && this.edges.some((f) => f.from === t.id && f.to === d.id), x = d && e.has(t.id) && e.has(d.id);
+      return c`
+              <div class="step">
+                <button class="node ${h ? "on-path" : ""}"
+                  @click=${() => this._onNodeClick(t)}
+                  aria-label="${t.label} (${t.type})">
+                  <span class="node-label">${t.label}</span>
+                  <span class="node-type">${t.type}</span>
+                  ${t.status ? c`<span class="status-dot ${t.status}"></span>` : v}
+                </button>
+                ${m ? c`<span class="arrow ${x ? "on-path" : ""}">${a ? w : b}</span>` : v}
+              </div>
+            `;
+    })}
+        </div>
+      </div>
+    `;
+  }
+};
+n.styles = [P, _, y`
+    .container {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-200);
+      padding: var(--cg-spacing-20);
+      overflow-x: auto;
+    }
+
+    .flow {
+      display: flex;
+      align-items: center;
+      min-width: min-content;
+    }
+    .flow.vertical { flex-direction: column; }
+
+    .step {
+      display: flex;
+      align-items: center;
+      flex-shrink: 0;
+    }
+    .flow.vertical .step { flex-direction: column; }
+
+    /* ── Node ── */
+    .node {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-100);
+      cursor: pointer;
+      font-family: inherit;
+      color: var(--cg-color-surface-base-text);
+      min-width: var(--cg-spacing-80);
+      text-align: center;
+      position: relative;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .node:hover {
+      border-color: var(--cg-color-input-border-hover);
+    }
+    .node:focus-visible {
+      outline: none;
+      box-shadow:
+        0 0 0 2px var(--cg-color-surface-base-background),
+        0 0 0 4px var(--cg-color-focus-ring);
+    }
+    .node.on-path {
+      border-color: var(--cg-color-surface-base-text);
+      background: var(--cg-overlay-dark-subtle);
+    }
+
+    .node-label {
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      white-space: nowrap;
+    }
+    .node-type {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+    }
+
+    /* Status dot */
+    .status-dot {
+      width: var(--cg-spacing-6);
+      height: var(--cg-spacing-6);
+      border-radius: var(--cg-border-radius-full);
+      position: absolute;
+      top: var(--cg-spacing-6);
+      right: var(--cg-spacing-6);
+    }
+    .status-dot.active { background: var(--cg-color-surface-base-text); }
+    .status-dot.complete { background: var(--cg-color-input-text-placeholder); }
+    .status-dot.error { background: var(--cg-color-status-error-text-default); }
+
+    /* ── Arrow ── */
+    .arrow {
+      flex-shrink: 0;
+      color: var(--cg-color-surface-cards-border);
+      display: flex;
+      padding: 0 var(--cg-spacing-2);
+    }
+    .arrow.on-path { color: var(--cg-color-surface-base-text); }
+    .flow.vertical .arrow { padding: var(--cg-spacing-2) 0; }
+
+    .empty {
+      text-align: center;
+      padding: var(--cg-spacing-32);
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-sm);
+    }
+
+    :host([rounded="none"]) .container { border-radius: 0; }
+    :host([rounded="sm"]) .container { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .container { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .container { border-radius: var(--cg-border-radius-200); }
+  `];
+l([
+  p({ reflect: !0 })
+], n.prototype, "rounded", 2);
+l([
+  p({ attribute: !1 })
+], n.prototype, "nodes", 2);
+l([
+  p({ attribute: !1 })
+], n.prototype, "edges", 2);
+l([
+  p({ type: String })
+], n.prototype, "highlightPath", 2);
+l([
+  p({ type: String })
+], n.prototype, "direction", 2);
+n = l([
+  $("ai-data-lineage")
+], n);
+export {
+  n as AiDataLineage
+};
+//# sourceMappingURL=ai-data-lineage.js.map