@cognivo/components 0.8.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-segmentation-viewer.js","sources":["../../../src/components/ai-segmentation-viewer/ai-segmentation-viewer.ts"],"sourcesContent":["/**\n * @element ai-segmentation-viewer\n * Image segmentation viewer with colored mask overlays, legend, visibility toggles, and opacity control.\n *\n * @fires {CustomEvent<{id: string, label: string}>} ai-segment-select\n * @fires {CustomEvent<{id: string, visible: boolean}>} ai-segment-toggle\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface SegmentMask {\n  id: string;\n  label: string;\n  color: string;\n  visible?: boolean;\n}\n\n@customElement('ai-segmentation-viewer')\nexport class AiSegmentationViewer extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .panel {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      overflow: hidden;\n    }\n\n    .header {\n      padding: var(--cg-spacing-16) var(--cg-spacing-24);\n    }\n    .header-title {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* ── Canvas ── */\n    .canvas-wrap {\n      position: relative; overflow: hidden;\n      background: var(--cg-color-surface-base-background);\n    }\n    .canvas-wrap img { display: block; width: 100%; height: auto; }\n    .mask-overlay {\n      position: absolute; inset: 0; pointer-events: none;\n      transition: opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .mask-overlay.selected {\n      outline: var(--cg-border-width-100) solid var(--cg-color-action-primary-background-default);\n      outline-offset: calc(-1 * var(--cg-spacing-2));\n    }\n\n    /* ── Opacity slider ── */\n    .opacity-row {\n      padding: var(--cg-spacing-4) var(--cg-spacing-16);\n    }\n\n    /* ── Legend ── */\n    .legend {\n      padding: var(--cg-spacing-16) var(--cg-spacing-24);\n      display: flex; flex-direction: column; gap: var(--cg-spacing-12);\n    }\n    .legend-title {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .legend-items { display: flex; flex-wrap: wrap; gap: var(--cg-spacing-8); }\n    .legend-item {\n      display: inline-flex; align-items: center; gap: var(--cg-spacing-8);\n      padding: var(--cg-spacing-6) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: transparent;\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-container-outlined);\n      cursor: pointer;\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .legend-item:hover { border-color: var(--cg-color-surface-cards-hover-border); color: var(--cg-color-surface-base-text); }\n    .legend-item.selected { border-color: var(--cg-color-action-primary-background-default); color: var(--cg-color-surface-base-text); }\n    .legend-item.hidden { opacity: 0.4; }\n    .legend-item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); }\n    .legend-swatch { width: var(--cg-spacing-8); height: var(--cg-spacing-8); border-radius: var(--cg-border-radius-full); flex-shrink: 0; }\n    .legend-toggle {\n      background: none; border: none; padding: 0; color: inherit; cursor: pointer;\n      display: flex; align-items: center;\n    }\n    .legend-toggle svg { width: var(--cg-spacing-12); height: var(--cg-spacing-12); }\n\n    /* ── Rounded ── */\n    :host([rounded=\"none\"]) .panel { border-radius: 0; }\n    :host([rounded=\"sm\"]) .panel { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .panel { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .panel { border-radius: var(--cg-border-radius-150); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property() src = '';\n  @property({ type: Array }) masks: SegmentMask[] = [];\n  @property() selectedMask = '';\n  @property({ type: Number }) opacity = 0.4;\n  @property({ type: Boolean }) showLabels = false;\n  @property({ type: Boolean }) showLegend = false;\n\n  private _selectMask(mask: SegmentMask) {\n    this.selectedMask = mask.id;\n    this.dispatchEvent(new CustomEvent('ai-segment-select', { bubbles: true, composed: true, detail: { id: mask.id, label: mask.label } }));\n  }\n\n  private _toggleMask(mask: SegmentMask, e: Event) {\n    e.stopPropagation();\n    const newVisible = !(mask.visible !== false);\n    this.masks = this.masks.map(m => m.id === mask.id ? { ...m, visible: newVisible } : m);\n    this.dispatchEvent(new CustomEvent('ai-segment-toggle', { bubbles: true, composed: true, detail: { id: mask.id, visible: newVisible } }));\n  }\n\n  override render() {\n    const visibleMasks = this.masks.filter(m => m.visible !== false);\n\n    return html`\n      <div class=\"panel\">\n        <div class=\"header\">\n          <span class=\"header-title\">Segmentation</span>\n        </div>\n\n        <div class=\"canvas-wrap\">\n          ${this.src ? html`<img src=${this.src} alt=\"Segmentation source\" />` : nothing}\n          ${visibleMasks.map(m => html`\n            <div class=\"mask-overlay ${m.id === this.selectedMask ? 'selected' : ''}\"\n              style=\"background: ${m.color}; opacity: ${this.opacity};\"></div>\n          `)}\n        </div>\n\n        <div class=\"opacity-row\">\n          <cg-slider\n            label=\"Opacity\"\n            value=\"${Math.round(this.opacity * 100)}\"\n            min=\"0\" max=\"100\"\n            unit=\"%\"\n            size=\"sm\"\n            showValue\n            .showTooltip=${false}\n            .showRange=${false}\n            @cg-change=${(e: CustomEvent) => { this.opacity = e.detail.value / 100; }}\n          ></cg-slider>\n        </div>\n\n        ${this.showLegend ? html`\n          <div class=\"legend\">\n            <span class=\"legend-title\">Masks</span>\n            <div class=\"legend-items\">\n              ${this.masks.map(m => html`\n                <div class=\"legend-item ${m.id === this.selectedMask ? 'selected' : ''} ${m.visible === false ? 'hidden' : ''}\"\n                  tabindex=\"0\" role=\"button\"\n                  @click=${() => this._selectMask(m)}\n                  @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._selectMask(m); } }}>\n                  <span class=\"legend-swatch\" style=\"background: ${m.color}\"></span>\n                  ${m.label}\n                  <button class=\"legend-toggle\" @click=${(e: Event) => this._toggleMask(m, e)}\n                    aria-label=\"${m.visible !== false ? 'Hide' : 'Show'} ${m.label}\">\n                    ${m.visible !== false ? html`\n                      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z\"/><circle cx=\"12\" cy=\"12\" r=\"3\"/></svg>\n                    ` : html`\n                      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24\"/><line x1=\"1\" y1=\"1\" x2=\"23\" y2=\"23\"/></svg>\n                    `}\n                  </button>\n                </div>\n              `)}\n            </div>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiSegmentationViewer","LitElement","mask","newVisible","m","visibleMasks","html","nothing","e","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;AAmBO,IAAMA,IAAN,cAAmCC,EAAW;AAAA,EAA9C,cAAA;AAAA,UAAA,GAAA,SAAA,GA6EwB,KAAA,UAAuC,MACxD,KAAA,MAAM,IACS,KAAA,QAAuB,CAAA,GACtC,KAAA,eAAe,IACC,KAAA,UAAU,KACT,KAAA,aAAa,IACb,KAAA,aAAa;AAAA,EAAA;AAAA,EAElC,YAAYC,GAAmB;AACrC,SAAK,eAAeA,EAAK,IACzB,KAAK,cAAc,IAAI,YAAY,qBAAqB,EAAE,SAAS,IAAM,UAAU,IAAM,QAAQ,EAAE,IAAIA,EAAK,IAAI,OAAOA,EAAK,MAAA,EAAM,CAAG,CAAC;AAAA,EACxI;AAAA,EAEQ,YAAYA,GAAmB,GAAU;AAC/C,MAAE,gBAAA;AACF,UAAMC,IAAeD,EAAK,YAAY;AACtC,SAAK,QAAQ,KAAK,MAAM,IAAI,OAAKE,EAAE,OAAOF,EAAK,KAAK,EAAE,GAAGE,GAAG,SAASD,EAAA,IAAeC,CAAC,GACrF,KAAK,cAAc,IAAI,YAAY,qBAAqB,EAAE,SAAS,IAAM,UAAU,IAAM,QAAQ,EAAE,IAAIF,EAAK,IAAI,SAASC,EAAA,EAAW,CAAG,CAAC;AAAA,EAC1I;AAAA,EAES,SAAS;AAChB,UAAME,IAAe,KAAK,MAAM,OAAO,CAAAD,MAAKA,EAAE,YAAY,EAAK;AAE/D,WAAOE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAOC,KAAK,MAAMA,aAAgB,KAAK,GAAG,kCAAkCC,CAAO;AAAA,YAC5EF,EAAa,IAAI,CAAAD,MAAKE;AAAA,uCACKF,EAAE,OAAO,KAAK,eAAe,aAAa,EAAE;AAAA,mCAChDA,EAAE,KAAK,cAAc,KAAK,OAAO;AAAA,WACzD,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMS,KAAK,MAAM,KAAK,UAAU,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKxB,EAAK;AAAA,yBACP,EAAK;AAAA,yBACL,CAAC,MAAmB;AAAE,WAAK,UAAU,EAAE,OAAO,QAAQ;AAAA,IAAK,CAAC;AAAA;AAAA;AAAA;AAAA,UAI3E,KAAK,aAAaE;AAAA;AAAA;AAAA;AAAA,gBAIZ,KAAK,MAAM,IAAI,CAAAF,MAAKE;AAAA,0CACMF,EAAE,OAAO,KAAK,eAAe,aAAa,EAAE,IAAIA,EAAE,YAAY,KAAQ,WAAW,EAAE;AAAA;AAAA,2BAElG,MAAM,KAAK,YAAYA,CAAC,CAAC;AAAA,6BACvB,CAACI,MAAqB;AAAE,OAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SAAOA,EAAE,eAAA,GAAkB,KAAK,YAAYJ,CAAC;AAAA,IAAK,CAAC;AAAA,mEACxEA,EAAE,KAAK;AAAA,oBACtDA,EAAE,KAAK;AAAA,yDAC8B,CAACI,MAAa,KAAK,YAAYJ,GAAGI,CAAC,CAAC;AAAA,kCAC3DJ,EAAE,YAAY,KAAQ,SAAS,MAAM,IAAIA,EAAE,KAAK;AAAA,sBAC5DA,EAAE,YAAY,KAAQE;AAAA;AAAA,wBAEpBA;AAAA;AAAA,qBAEH;AAAA;AAAA;AAAA,eAGN,CAAC;AAAA;AAAA;AAAA,YAGJC,CAAO;AAAA;AAAA;AAAA,EAGjB;AACF;AA3JaP,EACK,SAAS,CAACS,GAAWC,GAAeC;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,GA0EnD;AAE4BC,EAAA;AAAA,EAA5BC,EAAS,EAAE,SAAS,GAAA,CAAM;AAAA,GA7EhBb,EA6EkB,WAAA,WAAA,CAAA;AACjBY,EAAA;AAAA,EAAXC,EAAA;AAAS,GA9ECb,EA8EC,WAAA,OAAA,CAAA;AACeY,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GA/Edb,EA+EgB,WAAA,SAAA,CAAA;AACfY,EAAA;AAAA,EAAXC,EAAA;AAAS,GAhFCb,EAgFC,WAAA,gBAAA,CAAA;AACgBY,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjFfb,EAiFiB,WAAA,WAAA,CAAA;AACCY,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAlFhBb,EAkFkB,WAAA,cAAA,CAAA;AACAY,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAnFhBb,EAmFkB,WAAA,cAAA,CAAA;AAnFlBA,IAANY,EAAA;AAAA,EADNE,EAAc,wBAAwB;AAAA,GAC1Bd,CAAA;"}

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

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+import { SidebarSection } from '../ai-app-sidebar/ai-app-sidebar.js';
+export declare class AiSidebar extends LitElement {
+    static styles: import('lit').CSSResult[];
+    sections: SidebarSection[];
+    collapsed: boolean;
+    activeId: string;
+    connectedCallback(): void;
+    private _onItemClick;
+    private _onCollapse;
+    render(): import('lit').TemplateResult<1>;
+}
+export type { SidebarSection, SidebarItem } from '../ai-app-sidebar/ai-app-sidebar.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-sidebar': AiSidebar;
+    }
+}
+//# sourceMappingURL=ai-sidebar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-sidebar.d.ts","sourceRoot":"","sources":["../../../src/components/ai-sidebar/ai-sidebar.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,qCAAqC,CAAC;AAC7C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAI1E,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,4BAA6D;IAExD,QAAQ,EAAE,cAAc,EAAE,CAAM;IACf,SAAS,UAAS;IACV,QAAQ,SAAM;IAEzD,iBAAiB;IAY1B,OAAO,CAAC,YAAY,CAIlB;IAEF,OAAO,CAAC,WAAW,CAKjB;IAEO,MAAM;CAWhB;AAED,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAEvF,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

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

@@ -0,0 +1,59 @@
+import { css as n, LitElement as h, html as b } from "lit";
+import { property as c, customElement as m } from "lit/decorators.js";
+import { h as u } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../ai-app-sidebar/ai-app-sidebar.js";
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, o = (e, i, r, a) => {
+  for (var t = a > 1 ? void 0 : a ? f(i, r) : i, l = e.length - 1, p; l >= 0; l--)
+    (p = e[l]) && (t = (a ? p(i, r, t) : p(t)) || t);
+  return a && t && v(i, r, t), t;
+};
+let d = !1, s = class extends h {
+  constructor() {
+    super(...arguments), this.sections = [], this.collapsed = !1, this.activeId = "", this._onItemClick = (e) => {
+      this.dispatchEvent(new CustomEvent("ai-sidebar-item-click", {
+        detail: e.detail,
+        bubbles: !0,
+        composed: !0
+      }));
+    }, this._onCollapse = (e) => {
+      this.collapsed = e.detail.collapsed, this.dispatchEvent(new CustomEvent("ai-sidebar-collapse", {
+        detail: e.detail,
+        bubbles: !0,
+        composed: !0
+      }));
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback(), d || (d = !0, console.warn(
+      "[cognivo] <ai-sidebar> is deprecated. Use <ai-app-sidebar> directly. This shim will be removed in v0.6.0."
+    ));
+  }
+  render() {
+    return b`
+      <ai-app-sidebar
+        .sections=${this.sections}
+        ?collapsed=${this.collapsed}
+        active-id=${this.activeId}
+        @ai-app-sidebar-item-click=${this._onItemClick}
+        @ai-app-sidebar-collapse=${this._onCollapse}
+      ></ai-app-sidebar>
+    `;
+  }
+};
+s.styles = [u, n`:host { display: block; height: 100%; }`];
+o([
+  c({ type: Array })
+], s.prototype, "sections", 2);
+o([
+  c({ type: Boolean, reflect: !0 })
+], s.prototype, "collapsed", 2);
+o([
+  c({ type: String, attribute: "active-id" })
+], s.prototype, "activeId", 2);
+s = o([
+  m("ai-sidebar")
+], s);
+export {
+  s as AiSidebar
+};
+//# sourceMappingURL=ai-sidebar.js.map

package/dist/components/ai-sidebar/ai-sidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-sidebar.js","sources":["../../../src/components/ai-sidebar/ai-sidebar.ts"],"sourcesContent":["/**\n * @element ai-sidebar\n * @deprecated Use `<ai-app-sidebar>` directly. The element was renamed to clarify\n * its role as the AI app shell sidebar (data-driven via `sections` prop), distinct\n * from the slot-based `<cg-sidebar>` foundation. This shim wraps the new element\n * and re-fires events under the legacy name; it will be removed in v0.6.0.\n *\n * Migration:\n * ```html\n * <!-- Before -->\n * <ai-sidebar active-id=\"chat\" .sections=${sections}></ai-sidebar>\n *\n * <!-- After -->\n * <ai-app-sidebar active-id=\"chat\" .sections=${sections}></ai-app-sidebar>\n * ```\n *\n * @fires {CustomEvent<{id: string, label: string}>} ai-sidebar-item-click - Item clicked (legacy event, preserved)\n * @fires {CustomEvent<{collapsed: boolean}>} ai-sidebar-collapse - Collapse toggled (legacy event, preserved)\n */\nimport { LitElement, html, css } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { hostBlock } from '../../styles/index.js';\nimport '../ai-app-sidebar/ai-app-sidebar.js';\nimport type { SidebarSection } from '../ai-app-sidebar/ai-app-sidebar.js';\n\nlet warned = false;\n\n@customElement('ai-sidebar')\nexport class AiSidebar extends LitElement {\n  static override styles = [hostBlock, css`:host { display: block; height: 100%; }`];\n\n  @property({ type: Array }) sections: SidebarSection[] = [];\n  @property({ type: Boolean, reflect: true }) collapsed = false;\n  @property({ type: String, attribute: 'active-id' }) activeId = '';\n\n  override connectedCallback() {\n    super.connectedCallback();\n    if (!warned) {\n      warned = true;\n      // eslint-disable-next-line no-console\n      console.warn(\n        '[cognivo] <ai-sidebar> is deprecated. Use <ai-app-sidebar> directly. ' +\n          'This shim will be removed in v0.6.0.',\n      );\n    }\n  }\n\n  private _onItemClick = (e: Event) => {\n    this.dispatchEvent(new CustomEvent('ai-sidebar-item-click', {\n      detail: (e as CustomEvent).detail, bubbles: true, composed: true,\n    }));\n  };\n\n  private _onCollapse = (e: Event) => {\n    this.collapsed = (e as CustomEvent).detail.collapsed;\n    this.dispatchEvent(new CustomEvent('ai-sidebar-collapse', {\n      detail: (e as CustomEvent).detail, bubbles: true, composed: true,\n    }));\n  };\n\n  override render() {\n    return html`\n      <ai-app-sidebar\n        .sections=${this.sections}\n        ?collapsed=${this.collapsed}\n        active-id=${this.activeId}\n        @ai-app-sidebar-item-click=${this._onItemClick}\n        @ai-app-sidebar-collapse=${this._onCollapse}\n      ></ai-app-sidebar>\n    `;\n  }\n}\n\nexport type { SidebarSection, SidebarItem } from '../ai-app-sidebar/ai-app-sidebar.js';\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-sidebar': AiSidebar;\n  }\n}\n"],"names":["warned","AiSidebar","LitElement","html","hostBlock","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;;AAyBA,IAAIA,IAAS,IAGAC,IAAN,cAAwBC,EAAW;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAGsB,KAAA,WAA6B,CAAA,GACZ,KAAA,YAAY,IACJ,KAAA,WAAW,IAc/D,KAAQ,eAAe,CAAC,MAAa;AACnC,WAAK,cAAc,IAAI,YAAY,yBAAyB;AAAA,QAC1D,QAAS,EAAkB;AAAA,QAAQ,SAAS;AAAA,QAAM,UAAU;AAAA,MAAA,CAC7D,CAAC;AAAA,IACJ,GAEA,KAAQ,cAAc,CAAC,MAAa;AAClC,WAAK,YAAa,EAAkB,OAAO,WAC3C,KAAK,cAAc,IAAI,YAAY,uBAAuB;AAAA,QACxD,QAAS,EAAkB;AAAA,QAAQ,SAAS;AAAA,QAAM,UAAU;AAAA,MAAA,CAC7D,CAAC;AAAA,IACJ;AAAA,EAAA;AAAA,EAvBS,oBAAoB;AAC3B,UAAM,kBAAA,GACDF,MACHA,IAAS,IAET,QAAQ;AAAA,MACN;AAAA,IAAA;AAAA,EAIN;AAAA,EAeS,SAAS;AAChB,WAAOG;AAAA;AAAA,oBAES,KAAK,QAAQ;AAAA,qBACZ,KAAK,SAAS;AAAA,oBACf,KAAK,QAAQ;AAAA,qCACI,KAAK,YAAY;AAAA,mCACnB,KAAK,WAAW;AAAA;AAAA;AAAA,EAGjD;AACF;AA3CaF,EACK,SAAS,CAACG,GAAWC,0CAA4C;AAEtDC,EAAA;AAAA,EAA1BC,EAAS,EAAE,MAAM,MAAA,CAAO;AAAA,GAHdN,EAGgB,WAAA,YAAA,CAAA;AACiBK,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAJ/BN,EAIiC,WAAA,aAAA,CAAA;AACQK,EAAA;AAAA,EAAnDC,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GALvCN,EAKyC,WAAA,YAAA,CAAA;AALzCA,IAANK,EAAA;AAAA,EADNE,EAAc,YAAY;AAAA,GACdP,CAAA;"}

package/dist/components/ai-similarity-card/ai-similarity-card.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+export interface SimilarityItem {
+    label: string;
+    image?: string;
+    description?: string;
+}
+export interface SimilarityFeature {
+    name: string;
+    scoreA: number;
+    scoreB: number;
+}
+export declare class AiSimilarityCard extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    itemA: SimilarityItem;
+    itemB: SimilarityItem;
+    score: number;
+    features: SimilarityFeature[];
+    layout: 'side-by-side' | 'stacked';
+    private _renderItem;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=ai-similarity-card.d.ts.map

package/dist/components/ai-similarity-card/ai-similarity-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-similarity-card.d.ts","sourceRoot":"","sources":["../../../src/components/ai-similarity-card/ai-similarity-card.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAgB,MAAM,4BAkInB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7C,KAAK,EAAE,cAAc,CAAiB;IACtC,KAAK,EAAE,cAAc,CAAiB;IACtC,KAAK,SAAK;IACX,QAAQ,EAAE,iBAAiB,EAAE,CAAM;IAClD,MAAM,EAAE,cAAc,GAAG,SAAS,CAAkB;IAEhE,OAAO,CAAC,WAAW;IAUV,MAAM;CAgDhB"}

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

@@ -0,0 +1,224 @@
+import { css as u, LitElement as v, nothing as n, html as i } from "lit";
+import { property as o, customElement as p } from "lit/decorators.js";
+import { h as f, r as b } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, h = Object.getOwnPropertyDescriptor, c = (r, a, t, d) => {
+  for (var s = d > 1 ? void 0 : d ? h(a, t) : a, l = r.length - 1, g; l >= 0; l--)
+    (g = r[l]) && (s = (d ? g(a, t, s) : g(s)) || s);
+  return d && s && m(a, t, s), s;
+};
+let e = class extends v {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.itemA = { label: "" }, this.itemB = { label: "" }, this.score = 0, this.features = [], this.layout = "side-by-side";
+  }
+  _renderItem(r) {
+    return i`
+      <div class="item-card">
+        ${r.image ? i`<img class="item-image" src=${r.image} alt=${r.label} />` : n}
+        <span class="item-label">${r.label}</span>
+        ${r.description ? i`<span class="item-desc">${r.description}</span>` : n}
+      </div>
+    `;
+  }
+  render() {
+    const r = Math.round(this.score * 100), a = this.layout === "stacked";
+    return i`
+      <div class="panel">
+        <div class="header">
+          <span class="header-title">Similarity Match</span>
+        </div>
+
+        <div class="items ${a ? "stacked" : ""}">
+          ${this._renderItem(this.itemA)}
+          <div class="score-bridge ${a ? "stacked" : ""}">
+            <div class="score-circle">
+              <span class="score-value">${r}%</span>
+            </div>
+            ${a ? n : i`<span class="score-label">match</span>`}
+          </div>
+          ${this._renderItem(this.itemB)}
+        </div>
+
+        ${this.features.length > 0 ? i`
+          <div class="features">
+            <span class="features-title">Feature Comparison</span>
+            ${this.features.map((t) => i`
+              <div class="feature-row">
+                <span class="feature-name">${t.name}</span>
+                <div class="feature-bars">
+                  <div class="feature-bar-wrap">
+                    <div class="feature-bar-a" style="width:${Math.round(t.scoreA * 100)}%"></div>
+                  </div>
+                  <span class="feature-vs">vs</span>
+                  <div class="feature-bar-wrap">
+                    <div class="feature-bar-b" style="width:${Math.round(t.scoreB * 100)}%"></div>
+                  </div>
+                </div>
+              </div>
+            `)}
+          </div>
+        ` : n}
+
+        <div class="actions">
+          <cg-button variant="secondary" size="sm" @click=${() => this.dispatchEvent(new CustomEvent("ai-similarity-reject", { bubbles: !0, composed: !0, detail: { score: this.score } }))}>Reject</cg-button>
+          <cg-button variant="primary" size="sm" @click=${() => this.dispatchEvent(new CustomEvent("ai-similarity-accept", { bubbles: !0, composed: !0, detail: { score: this.score } }))}>Accept Match</cg-button>
+        </div>
+      </div>
+    `;
+  }
+};
+e.styles = [f, b, u`
+    .panel {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      overflow: hidden;
+    }
+
+    /* ── Header ── */
+    .header {
+      padding: var(--cg-spacing-16) var(--cg-spacing-24);
+    }
+    .header-title {
+      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+
+    /* ── Items comparison ── */
+    .items {
+      display: grid;
+      grid-template-columns: 1fr auto 1fr;
+      padding: var(--cg-spacing-8) var(--cg-spacing-24) var(--cg-spacing-20);
+      gap: var(--cg-spacing-16);
+      align-items: center;
+    }
+    .items.stacked {
+      grid-template-columns: 1fr;
+      gap: var(--cg-spacing-12);
+    }
+
+    .item-card {
+      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-100);
+      padding: var(--cg-spacing-16);
+      display: flex; flex-direction: column; gap: var(--cg-spacing-8);
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .item-card:hover { border-color: var(--cg-color-surface-cards-hover-border); }
+
+    .item-image {
+      width: 100%; aspect-ratio: 16/10; object-fit: cover;
+      border-radius: var(--cg-border-radius-100);
+      background: var(--cg-color-surface-cards-border);
+    }
+    .item-label {
+      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+    .item-desc {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      line-height: var(--cg-line-height-snug);
+    }
+
+    /* ── Score bridge ── */
+    .score-bridge {
+      display: flex; flex-direction: column; align-items: center;
+      gap: var(--cg-spacing-4);
+    }
+    .score-circle {
+      width: var(--cg-spacing-48); height: var(--cg-spacing-48);
+      border-radius: var(--cg-border-radius-full);
+      border: var(--cg-border-width-100) solid var(--cg-color-action-primary-background-default);
+      display: flex; align-items: center; justify-content: center;
+      background: var(--cg-overlay-accent-subtle);
+    }
+    .score-value {
+      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-bold);
+      font-family: var(--cg-font-family-mono);
+      color: var(--cg-color-surface-base-text);
+    }
+    .score-label {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+    }
+    .score-bridge.stacked {
+      flex-direction: row; gap: var(--cg-spacing-12); padding: var(--cg-spacing-4) 0;
+    }
+    .score-bridge.stacked .score-circle { width: var(--cg-spacing-32); height: var(--cg-spacing-32); }
+
+    /* ── Features ── */
+    .features {
+      padding: var(--cg-spacing-16) var(--cg-spacing-24);
+      display: flex; flex-direction: column; gap: var(--cg-spacing-12);
+    }
+    .features-title {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-container-outlined);
+      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);
+    }
+    .feature-row { display: flex; flex-direction: column; gap: var(--cg-spacing-4); }
+    .feature-name {
+      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-base-text);
+    }
+    .feature-bars { display: flex; gap: var(--cg-spacing-8); align-items: center; }
+    .feature-bar-wrap {
+      flex: 1; height: var(--cg-spacing-4);
+      background: var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-full); overflow: hidden;
+    }
+    .feature-bar-a {
+      height: 100%; border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-action-primary-background-default);
+      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .feature-bar-b {
+      height: 100%; border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-container-outlined);
+      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .feature-vs {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-surface-container-outlined);
+      min-width: var(--cg-spacing-20); text-align: center;
+    }
+
+    /* ── Actions ── */
+    .actions {
+      padding: var(--cg-spacing-16) var(--cg-spacing-24);
+      display: flex; gap: var(--cg-spacing-8);
+      justify-content: flex-end;
+    }
+
+    /* ── Rounded ── */
+    :host([rounded="none"]) .panel { border-radius: 0; }
+    :host([rounded="sm"]) .panel { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .panel { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .panel { border-radius: var(--cg-border-radius-150); }
+  `];
+c([
+  o({ reflect: !0 })
+], e.prototype, "rounded", 2);
+c([
+  o({ type: Object })
+], e.prototype, "itemA", 2);
+c([
+  o({ type: Object })
+], e.prototype, "itemB", 2);
+c([
+  o({ type: Number })
+], e.prototype, "score", 2);
+c([
+  o({ type: Array })
+], e.prototype, "features", 2);
+c([
+  o()
+], e.prototype, "layout", 2);
+e = c([
+  p("ai-similarity-card")
+], e);
+export {
+  e as AiSimilarityCard
+};
+//# sourceMappingURL=ai-similarity-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-similarity-card.js","sources":["../../../src/components/ai-similarity-card/ai-similarity-card.ts"],"sourcesContent":["/**\n * @element ai-similarity-card\n * Side-by-side item comparison with similarity score, feature bars, and accept/reject.\n *\n * @fires {CustomEvent<{score: number}>} ai-similarity-accept\n * @fires {CustomEvent<{score: number}>} ai-similarity-reject\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface SimilarityItem {\n  label: string;\n  image?: string;\n  description?: string;\n}\n\nexport interface SimilarityFeature {\n  name: string;\n  scoreA: number;\n  scoreB: number;\n}\n\n@customElement('ai-similarity-card')\nexport class AiSimilarityCard extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .panel {\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-150);\n      overflow: hidden;\n    }\n\n    /* ── Header ── */\n    .header {\n      padding: var(--cg-spacing-16) var(--cg-spacing-24);\n    }\n    .header-title {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n\n    /* ── Items comparison ── */\n    .items {\n      display: grid;\n      grid-template-columns: 1fr auto 1fr;\n      padding: var(--cg-spacing-8) var(--cg-spacing-24) var(--cg-spacing-20);\n      gap: var(--cg-spacing-16);\n      align-items: center;\n    }\n    .items.stacked {\n      grid-template-columns: 1fr;\n      gap: var(--cg-spacing-12);\n    }\n\n    .item-card {\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-100);\n      padding: var(--cg-spacing-16);\n      display: flex; flex-direction: column; gap: var(--cg-spacing-8);\n      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .item-card:hover { border-color: var(--cg-color-surface-cards-hover-border); }\n\n    .item-image {\n      width: 100%; aspect-ratio: 16/10; object-fit: cover;\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-surface-cards-border);\n    }\n    .item-label {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-base-text);\n    }\n    .item-desc {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-snug);\n    }\n\n    /* ── Score bridge ── */\n    .score-bridge {\n      display: flex; flex-direction: column; align-items: center;\n      gap: var(--cg-spacing-4);\n    }\n    .score-circle {\n      width: var(--cg-spacing-48); height: var(--cg-spacing-48);\n      border-radius: var(--cg-border-radius-full);\n      border: var(--cg-border-width-100) solid var(--cg-color-action-primary-background-default);\n      display: flex; align-items: center; justify-content: center;\n      background: var(--cg-overlay-accent-subtle);\n    }\n    .score-value {\n      font-size: var(--cg-font-size-sm); font-weight: var(--cg-font-weight-bold);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-base-text);\n    }\n    .score-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n    }\n    .score-bridge.stacked {\n      flex-direction: row; gap: var(--cg-spacing-12); padding: var(--cg-spacing-4) 0;\n    }\n    .score-bridge.stacked .score-circle { width: var(--cg-spacing-32); height: var(--cg-spacing-32); }\n\n    /* ── Features ── */\n    .features {\n      padding: var(--cg-spacing-16) var(--cg-spacing-24);\n      display: flex; flex-direction: column; gap: var(--cg-spacing-12);\n    }\n    .features-title {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-semibold);\n      color: var(--cg-color-surface-container-outlined);\n      text-transform: uppercase; letter-spacing: var(--cg-letter-spacing-wide);\n    }\n    .feature-row { display: flex; flex-direction: column; gap: var(--cg-spacing-4); }\n    .feature-name {\n      font-size: var(--cg-font-size-xs); font-weight: var(--cg-font-weight-medium);\n      color: var(--cg-color-surface-base-text);\n    }\n    .feature-bars { display: flex; gap: var(--cg-spacing-8); align-items: center; }\n    .feature-bar-wrap {\n      flex: 1; height: var(--cg-spacing-4);\n      background: var(--cg-color-surface-cards-border);\n      border-radius: var(--cg-border-radius-full); overflow: hidden;\n    }\n    .feature-bar-a {\n      height: 100%; border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-primary-background-default);\n      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .feature-bar-b {\n      height: 100%; border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-surface-container-outlined);\n      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    .feature-vs {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-surface-container-outlined);\n      min-width: var(--cg-spacing-20); text-align: center;\n    }\n\n    /* ── Actions ── */\n    .actions {\n      padding: var(--cg-spacing-16) var(--cg-spacing-24);\n      display: flex; gap: var(--cg-spacing-8);\n      justify-content: flex-end;\n    }\n\n    /* ── Rounded ── */\n    :host([rounded=\"none\"]) .panel { border-radius: 0; }\n    :host([rounded=\"sm\"]) .panel { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .panel { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .panel { border-radius: var(--cg-border-radius-150); }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: Object }) itemA: SimilarityItem = { label: '' };\n  @property({ type: Object }) itemB: SimilarityItem = { label: '' };\n  @property({ type: Number }) score = 0;\n  @property({ type: Array }) features: SimilarityFeature[] = [];\n  @property() layout: 'side-by-side' | 'stacked' = 'side-by-side';\n\n  private _renderItem(item: SimilarityItem) {\n    return html`\n      <div class=\"item-card\">\n        ${item.image ? html`<img class=\"item-image\" src=${item.image} alt=${item.label} />` : nothing}\n        <span class=\"item-label\">${item.label}</span>\n        ${item.description ? html`<span class=\"item-desc\">${item.description}</span>` : nothing}\n      </div>\n    `;\n  }\n\n  override render() {\n    const pct = Math.round(this.score * 100);\n    const isStacked = this.layout === 'stacked';\n\n    return html`\n      <div class=\"panel\">\n        <div class=\"header\">\n          <span class=\"header-title\">Similarity Match</span>\n        </div>\n\n        <div class=\"items ${isStacked ? 'stacked' : ''}\">\n          ${this._renderItem(this.itemA)}\n          <div class=\"score-bridge ${isStacked ? 'stacked' : ''}\">\n            <div class=\"score-circle\">\n              <span class=\"score-value\">${pct}%</span>\n            </div>\n            ${!isStacked ? html`<span class=\"score-label\">match</span>` : nothing}\n          </div>\n          ${this._renderItem(this.itemB)}\n        </div>\n\n        ${this.features.length > 0 ? html`\n          <div class=\"features\">\n            <span class=\"features-title\">Feature Comparison</span>\n            ${this.features.map(f => html`\n              <div class=\"feature-row\">\n                <span class=\"feature-name\">${f.name}</span>\n                <div class=\"feature-bars\">\n                  <div class=\"feature-bar-wrap\">\n                    <div class=\"feature-bar-a\" style=\"width:${Math.round(f.scoreA * 100)}%\"></div>\n                  </div>\n                  <span class=\"feature-vs\">vs</span>\n                  <div class=\"feature-bar-wrap\">\n                    <div class=\"feature-bar-b\" style=\"width:${Math.round(f.scoreB * 100)}%\"></div>\n                  </div>\n                </div>\n              </div>\n            `)}\n          </div>\n        ` : nothing}\n\n        <div class=\"actions\">\n          <cg-button variant=\"secondary\" size=\"sm\" @click=${() => this.dispatchEvent(new CustomEvent('ai-similarity-reject', { bubbles: true, composed: true, detail: { score: this.score } }))}>Reject</cg-button>\n          <cg-button variant=\"primary\" size=\"sm\" @click=${() => this.dispatchEvent(new CustomEvent('ai-similarity-accept', { bubbles: true, composed: true, detail: { score: this.score } }))}>Accept Match</cg-button>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["AiSimilarityCard","LitElement","item","html","nothing","pct","isStacked","f","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-source-graph/ai-source-graph.d.ts

@@ -0,0 +1,19 @@
+import { LitElement } from 'lit';
+interface SourceNode {
+    id: string;
+    title: string;
+    type: 'doc' | 'web' | 'database' | 'api';
+    weight: number;
+    url?: string;
+    excerpt?: string;
+}
+export declare class AiSourceGraph extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    sources: SourceNode[];
+    private _expandedId;
+    private _handleSourceClick;
+    render(): import('lit').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=ai-source-graph.d.ts.map

package/dist/components/ai-source-graph/ai-source-graph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-source-graph.d.ts","sourceRoot":"","sources":["../../../src/components/ai-source-graph/ai-source-graph.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,UAAU,UAAU;IAClB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,KAAK,GAAG,KAAK,GAAG,UAAU,GAAG,KAAK,CAAC;IACzC,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAID,qBACa,aAAc,SAAQ,UAAU;IAC3C,OAAgB,MAAM,4BAmJnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC9C,OAAO,EAAE,UAAU,EAAE,CAAM;IAE7C,OAAO,CAAC,WAAW,CAAc;IAE1C,OAAO,CAAC,kBAAkB;IAQjB,MAAM;CA0ChB"}

package/dist/components/ai-source-graph/ai-source-graph.js

@@ -0,0 +1,226 @@
+import { css as g, LitElement as u, html as c, nothing as p } from "lit";
+import { property as l, state as v, customElement as h } from "lit/decorators.js";
+import { h as f, r as b, f as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (a, e, t, o) => {
+  for (var r = o > 1 ? void 0 : o ? w(e, t) : e, n = a.length - 1, d; n >= 0; n--)
+    (d = a[n]) && (r = (o ? d(e, t, r) : d(r)) || r);
+  return o && r && x(e, t, r), r;
+};
+const y = "accent";
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.sources = [], this._expandedId = "";
+  }
+  _handleSourceClick(a) {
+    this._expandedId = this._expandedId === a.id ? "" : a.id, this.dispatchEvent(new CustomEvent("ai-source-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { id: a.id, title: a.title, type: a.type, weight: a.weight }
+    }));
+  }
+  render() {
+    if (this.sources.length === 0)
+      return c`<div class="panel"><div class="empty">No sources</div></div>`;
+    const a = [...this.sources].sort((e, t) => t.weight - e.weight);
+    return c`
+      <div class="panel" role="list" aria-label="Source attribution">
+        <div class="header">
+          <span class="header-title">Sources</span>
+          <span class="source-count">${this.sources.length}</span>
+        </div>
+        <div class="sources">
+          ${a.map((e, t) => {
+      const o = e.id === this._expandedId;
+      return c`
+              <div class="source ${o ? "expanded" : ""}"
+                role="listitem" tabindex="0"
+                @click=${() => this._handleSourceClick(e)}
+                @keydown=${(r) => {
+        (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._handleSourceClick(e));
+      }}>
+                <span class="footnote">${t + 1}</span>
+                <div class="source-body">
+                  <div class="source-top">
+                    <span class="source-title">
+                      ${e.url ? c`<a href=${e.url} target="_blank" rel="noopener" @click=${(r) => r.stopPropagation()}>${e.title}</a>` : e.title}
+                    </span>
+                    <cg-badge variant=${y} label=${e.type} size="sm" rounded="full"></cg-badge>
+                  </div>
+                  ${e.excerpt ? c`<div class="excerpt">${e.excerpt}</div>` : p}
+                </div>
+                <div class="weight-area">
+                  <div class="weight-bar"><div class="weight-fill" style="width: ${Math.round(e.weight * 100)}%"></div></div>
+                  <span class="weight-label">${Math.round(e.weight * 100)}%</span>
+                </div>
+              </div>
+            `;
+    })}
+        </div>
+      </div>
+    `;
+  }
+};
+i.styles = [f, b, m, g`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;
+    }
+
+    .panel {
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-150);
+      overflow: hidden;
+    }
+
+    /* ── Header ── */
+    .header {
+      display: flex;
+      align-items: center;
+      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-cards-divider);
+    }
+    .header-title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text);
+      flex: 1;
+    }
+    .source-count {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+    }
+
+    /* ── Source list ── */
+    .sources {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .source {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+      cursor: pointer;
+      transition:
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .source:last-child { border-bottom: none; }
+    .source:hover { background: var(--cg-overlay-dark-subtle); }
+    .source:focus-visible {
+      outline: none;
+      box-shadow: inset 0 0 0 2px var(--cg-color-focus-ring);
+    }
+
+    /* Footnote number */
+    .footnote {
+      width: var(--cg-spacing-24);
+      height: var(--cg-spacing-24);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-surface-container-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-surface-base-text);
+      font-family: var(--cg-font-family-mono);
+    }
+
+    /* Source content */
+    .source-body { flex: 1; min-width: 0; }
+    .source-top {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+    }
+    .source-title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+      line-height: var(--cg-line-height-tight);
+    }
+    .source-title a {
+      color: inherit;
+      text-decoration: none;
+    }
+    .source-title a:hover { text-decoration: underline; }
+
+    /* Weight bar */
+    .weight-area {
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      margin-left: auto;
+    }
+    .weight-bar {
+      width: var(--cg-spacing-48);
+      height: var(--cg-spacing-4);
+      background: var(--cg-color-surface-cards-border);
+      border-radius: var(--cg-border-radius-full);
+      overflow: hidden;
+    }
+    .weight-fill {
+      height: 100%;
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-action-primary-background-default);
+      transition: width var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .weight-label {
+      font-size: var(--cg-font-size-xs);
+      font-family: var(--cg-font-family-mono);
+      color: var(--cg-color-input-text-placeholder);
+      min-width: var(--cg-spacing-32);
+      text-align: right;
+    }
+
+    /* Excerpt */
+    .excerpt {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      line-height: var(--cg-line-height-normal);
+      margin-top: var(--cg-spacing-4);
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+    .source.expanded .excerpt {
+      -webkit-line-clamp: unset;
+      display: block;
+    }
+
+    .empty {
+      text-align: center;
+      padding: var(--cg-spacing-32);
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-sm);
+    }
+
+    /* ── Rounded variants ── */
+    :host([rounded="none"]) .panel { border-radius: 0; }
+    :host([rounded="sm"]) .panel { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .panel { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .panel { border-radius: var(--cg-border-radius-150); }
+  `];
+s([
+  l({ reflect: !0 })
+], i.prototype, "rounded", 2);
+s([
+  l({ type: Array })
+], i.prototype, "sources", 2);
+s([
+  v()
+], i.prototype, "_expandedId", 2);
+i = s([
+  h("ai-source-graph")
+], i);
+export {
+  i as AiSourceGraph
+};
+//# sourceMappingURL=ai-source-graph.js.map