@cognivo/components 0.8.0

package/dist/components/ai-detection-canvas/ai-detection-canvas.js

@@ -0,0 +1,233 @@
+import { css as x, LitElement as w, html as i, nothing as g } from "lit";
+import { property as s, state as u, customElement as _ } from "lit/decorators.js";
+import { h as $, r as k } from "../../chunks/premium.css-9I4kHrsl.js";
+var N = Object.defineProperty, z = Object.getOwnPropertyDescriptor, r = (e, o, d, n) => {
+  for (var a = n > 1 ? void 0 : n ? z(o, d) : o, l = e.length - 1, c; l >= 0; l--)
+    (c = e[l]) && (a = (n ? c(o, d, a) : c(a)) || a);
+  return n && a && N(o, d, a), a;
+};
+let t = class extends w {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.src = "", this.detections = [], this.showLabels = !0, this.showConfidence = !0, this.selectedId = "", this.interactive = !0, this._hoveredId = "", this._imgNatW = 0, this._imgNatH = 0;
+  }
+  _onImgLoad(e) {
+    const o = e.target;
+    this._imgNatW = o.naturalWidth, this._imgNatH = o.naturalHeight;
+  }
+  _selectDetection(e) {
+    this.interactive && (this.selectedId = e.id, this.dispatchEvent(new CustomEvent("ai-detection-select", { bubbles: !0, composed: !0, detail: { id: e.id, label: e.label } })));
+  }
+  _getDefaultColor(e) {
+    const o = [
+      "var(--cg-color-action-primary-background-default)",
+      "var(--cg-color-status-info-text-default)",
+      "var(--cg-color-status-success-text-default)",
+      "var(--cg-color-status-warning-text-default)",
+      "var(--cg-color-status-error-text-default)"
+    ];
+    return o[e % o.length];
+  }
+  render() {
+    return this.src ? i`
+      <div class="canvas">
+        <img src="${this.src}" alt="Detection source" @load=${this._onImgLoad} draggable="false" />
+
+        ${this.detections.length > 0 ? i`
+          <span class="count-badge">${this.detections.length} detection${this.detections.length > 1 ? "s" : ""}</span>
+        ` : g}
+
+        ${this._imgNatW > 0 ? this.detections.map((e, o) => {
+      const [d, n, a, l] = e.bbox, c = e.color || this._getDefaultColor(o), b = d / this._imgNatW * 100, p = n / this._imgNatH * 100, h = a / this._imgNatW * 100, f = l / this._imgNatH * 100, m = e.id === this.selectedId, y = e.id === this._hoveredId;
+      return i`
+            <div class="bbox ${m ? "selected" : ""}"
+              style="left:${b}%;top:${p}%;width:${h}%;height:${f}%;--det-color:${c}"
+              tabindex="${this.interactive ? "0" : "-1"}"
+              role="button" aria-label="${e.label} ${Math.round(e.confidence * 100)}%"
+              @click=${() => this._selectDetection(e)}
+              @mouseenter=${() => {
+        this._hoveredId = e.id, this.dispatchEvent(new CustomEvent("ai-detection-hover", { bubbles: !0, composed: !0, detail: { id: e.id, label: e.label } }));
+      }}
+              @mouseleave=${() => {
+        this._hoveredId = "";
+      }}
+              @keydown=${(v) => {
+        (v.key === "Enter" || v.key === " ") && (v.preventDefault(), this._selectDetection(e));
+      }}>
+
+              ${this.showLabels ? i`
+                <span class="bbox-label" style="background:${c}">
+                  ${e.label}
+                  ${this.showConfidence ? i`<span class="bbox-confidence">${Math.round(e.confidence * 100)}%</span>` : g}
+                </span>
+              ` : g}
+
+              ${y && this.interactive ? i`
+                <div class="tooltip">${e.label} — ${Math.round(e.confidence * 100)}%</div>
+              ` : g}
+            </div>
+          `;
+    }) : g}
+      </div>
+    ` : i`<div class="canvas"><div class="placeholder">No image source</div></div>`;
+  }
+};
+t.styles = [$, k, x`
+    .canvas {
+      position: relative;
+      display: inline-block;
+      border-radius: var(--cg-border-radius-150);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      overflow: hidden;
+      background: var(--cg-color-surface-base-background);
+      line-height: 0;
+    }
+    .canvas img {
+      display: block;
+      width: 100%;
+      height: auto;
+      pointer-events: none;
+    }
+
+    /* ── Bounding box ── */
+    .bbox {
+      position: absolute;
+      border: var(--cg-border-width-100) solid var(--det-color, var(--cg-color-surface-base-text));
+      border-radius: var(--cg-border-radius-50);
+      cursor: pointer;
+      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      box-sizing: border-box;
+    }
+    .bbox:hover {
+      background: var(--det-bg-hover, var(--cg-overlay-dark-subtle));
+    }
+    .bbox:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    .bbox.selected {
+      border-width: var(--cg-border-width-100);
+      border-color: var(--cg-color-action-primary-background-default);
+      background: var(--cg-overlay-accent-subtle);
+    }
+
+    /* ── Label ── */
+    .bbox-label {
+      position: absolute;
+      top: calc(-1 * var(--cg-spacing-1));
+      left: calc(-1 * var(--cg-spacing-1));
+      transform: translateY(-100%);
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-4);
+      padding: var(--cg-spacing-2) var(--cg-spacing-8);
+      border-radius: var(--cg-border-radius-50) var(--cg-border-radius-50) var(--cg-border-radius-50) 0;
+      color: var(--cg-color-action-primary-text-default);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      white-space: nowrap;
+      pointer-events: none;
+      line-height: var(--cg-line-height-snug);
+    }
+    .bbox-confidence {
+      opacity: 0.7;
+      font-family: var(--cg-font-family-mono);
+    }
+
+    /* ── Tooltip ── */
+    .tooltip {
+      position: absolute;
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%) translateY(calc(-1 * var(--cg-spacing-8)));
+      padding: var(--cg-spacing-6) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-100);
+      background: var(--cg-color-tooltip-background);
+      color: var(--cg-color-tooltip-text);
+      font-size: var(--cg-font-size-xs);
+      white-space: nowrap;
+      pointer-events: none;
+      z-index: 10;
+      line-height: var(--cg-line-height-snug);
+    }
+    .tooltip::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: var(--cg-spacing-4) solid transparent;
+      border-top-color: var(--cg-color-tooltip-background);
+    }
+
+    /* ── Placeholder ── */
+    .placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--cg-spacing-96);
+      color: var(--cg-color-surface-container-outlined);
+      font-size: var(--cg-font-size-sm);
+    }
+
+    /* ── Count badge ── */
+    .count-badge {
+      position: absolute;
+      top: var(--cg-spacing-12);
+      right: var(--cg-spacing-12);
+      padding: var(--cg-spacing-4) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-overlay-dark-strong);
+      color: var(--cg-overlay-dark-text);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      pointer-events: none;
+      z-index: 5;
+    }
+
+    /* ── Rounded ── */
+    :host([rounded="none"]) .canvas { border-radius: 0; }
+    :host([rounded="sm"]) .canvas { border-radius: var(--cg-border-radius-50); }
+    :host([rounded="md"]) .canvas { border-radius: var(--cg-border-radius-100); }
+    :host([rounded="lg"]) .canvas { border-radius: var(--cg-border-radius-150); }
+
+    @media (prefers-reduced-motion: reduce) {
+      .bbox { transition: none; }
+    }
+  `];
+r([
+  s({ reflect: !0 })
+], t.prototype, "rounded", 2);
+r([
+  s()
+], t.prototype, "src", 2);
+r([
+  s({ type: Array })
+], t.prototype, "detections", 2);
+r([
+  s({ type: Boolean })
+], t.prototype, "showLabels", 2);
+r([
+  s({ type: Boolean })
+], t.prototype, "showConfidence", 2);
+r([
+  s()
+], t.prototype, "selectedId", 2);
+r([
+  s({ type: Boolean })
+], t.prototype, "interactive", 2);
+r([
+  u()
+], t.prototype, "_hoveredId", 2);
+r([
+  u()
+], t.prototype, "_imgNatW", 2);
+r([
+  u()
+], t.prototype, "_imgNatH", 2);
+t = r([
+  _("ai-detection-canvas")
+], t);
+export {
+  t as AiDetectionCanvas
+};
+//# sourceMappingURL=ai-detection-canvas.js.map

package/dist/components/ai-detection-canvas/ai-detection-canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-detection-canvas.js","sources":["../../../src/components/ai-detection-canvas/ai-detection-canvas.ts"],"sourcesContent":["/**\n * @element ai-detection-canvas\n * Object detection overlay on an image with positioned bounding boxes, labels, and confidence scores.\n *\n * @fires {CustomEvent<{id: string, label: string}>} ai-detection-select\n * @fires {CustomEvent<{id: string, label: string}>} ai-detection-hover\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement, state } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\nexport interface Detection {\n  id: string;\n  label: string;\n  confidence: number;\n  bbox: [number, number, number, number];\n  color?: string;\n}\n\n@customElement('ai-detection-canvas')\nexport class AiDetectionCanvas extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .canvas {\n      position: relative;\n      display: inline-block;\n      border-radius: var(--cg-border-radius-150);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      overflow: hidden;\n      background: var(--cg-color-surface-base-background);\n      line-height: 0;\n    }\n    .canvas img {\n      display: block;\n      width: 100%;\n      height: auto;\n      pointer-events: none;\n    }\n\n    /* ── Bounding box ── */\n    .bbox {\n      position: absolute;\n      border: var(--cg-border-width-100) solid var(--det-color, var(--cg-color-surface-base-text));\n      border-radius: var(--cg-border-radius-50);\n      cursor: pointer;\n      transition: background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      box-sizing: border-box;\n    }\n    .bbox:hover {\n      background: var(--det-bg-hover, var(--cg-overlay-dark-subtle));\n    }\n    .bbox:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    .bbox.selected {\n      border-width: var(--cg-border-width-100);\n      border-color: var(--cg-color-action-primary-background-default);\n      background: var(--cg-overlay-accent-subtle);\n    }\n\n    /* ── Label ── */\n    .bbox-label {\n      position: absolute;\n      top: calc(-1 * var(--cg-spacing-1));\n      left: calc(-1 * var(--cg-spacing-1));\n      transform: translateY(-100%);\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-4);\n      padding: var(--cg-spacing-2) var(--cg-spacing-8);\n      border-radius: var(--cg-border-radius-50) var(--cg-border-radius-50) var(--cg-border-radius-50) 0;\n      color: var(--cg-color-action-primary-text-default);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      white-space: nowrap;\n      pointer-events: none;\n      line-height: var(--cg-line-height-snug);\n    }\n    .bbox-confidence {\n      opacity: 0.7;\n      font-family: var(--cg-font-family-mono);\n    }\n\n    /* ── Tooltip ── */\n    .tooltip {\n      position: absolute;\n      bottom: 100%;\n      left: 50%;\n      transform: translateX(-50%) translateY(calc(-1 * var(--cg-spacing-8)));\n      padding: var(--cg-spacing-6) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-tooltip-background);\n      color: var(--cg-color-tooltip-text);\n      font-size: var(--cg-font-size-xs);\n      white-space: nowrap;\n      pointer-events: none;\n      z-index: 10;\n      line-height: var(--cg-line-height-snug);\n    }\n    .tooltip::after {\n      content: '';\n      position: absolute;\n      top: 100%;\n      left: 50%;\n      transform: translateX(-50%);\n      border: var(--cg-spacing-4) solid transparent;\n      border-top-color: var(--cg-color-tooltip-background);\n    }\n\n    /* ── Placeholder ── */\n    .placeholder {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      height: var(--cg-spacing-96);\n      color: var(--cg-color-surface-container-outlined);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    /* ── Count badge ── */\n    .count-badge {\n      position: absolute;\n      top: var(--cg-spacing-12);\n      right: var(--cg-spacing-12);\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-overlay-dark-strong);\n      color: var(--cg-overlay-dark-text);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      pointer-events: none;\n      z-index: 5;\n    }\n\n    /* ── Rounded ── */\n    :host([rounded=\"none\"]) .canvas { border-radius: 0; }\n    :host([rounded=\"sm\"]) .canvas { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .canvas { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .canvas { border-radius: var(--cg-border-radius-150); }\n\n    @media (prefers-reduced-motion: reduce) {\n      .bbox { transition: none; }\n    }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property() src = '';\n  @property({ type: Array }) detections: Detection[] = [];\n  @property({ type: Boolean }) showLabels = true;\n  @property({ type: Boolean }) showConfidence = true;\n  @property() selectedId = '';\n  @property({ type: Boolean }) interactive = true;\n\n  @state() private _hoveredId = '';\n  @state() private _imgNatW = 0;\n  @state() private _imgNatH = 0;\n\n  private _onImgLoad(e: Event) {\n    const img = e.target as HTMLImageElement;\n    this._imgNatW = img.naturalWidth;\n    this._imgNatH = img.naturalHeight;\n  }\n\n  private _selectDetection(det: Detection) {\n    if (!this.interactive) return;\n    this.selectedId = det.id;\n    this.dispatchEvent(new CustomEvent('ai-detection-select', { bubbles: true, composed: true, detail: { id: det.id, label: det.label } }));\n  }\n\n  private _getDefaultColor(index: number): string {\n    const palette = [\n      'var(--cg-color-action-primary-background-default)',\n      'var(--cg-color-status-info-text-default)',\n      'var(--cg-color-status-success-text-default)',\n      'var(--cg-color-status-warning-text-default)',\n      'var(--cg-color-status-error-text-default)',\n    ];\n    return palette[index % palette.length]!;\n  }\n\n  override render() {\n    if (!this.src) return html`<div class=\"canvas\"><div class=\"placeholder\">No image source</div></div>`;\n\n    return html`\n      <div class=\"canvas\">\n        <img src=\"${this.src}\" alt=\"Detection source\" @load=${this._onImgLoad} draggable=\"false\" />\n\n        ${this.detections.length > 0 ? html`\n          <span class=\"count-badge\">${this.detections.length} detection${this.detections.length > 1 ? 's' : ''}</span>\n        ` : nothing}\n\n        ${this._imgNatW > 0 ? this.detections.map((det, i) => {\n          const [x, y, w, h] = det.bbox;\n          const color = det.color || this._getDefaultColor(i);\n          const pctL = (x / this._imgNatW) * 100;\n          const pctT = (y / this._imgNatH) * 100;\n          const pctW = (w / this._imgNatW) * 100;\n          const pctH = (h / this._imgNatH) * 100;\n          const isSelected = det.id === this.selectedId;\n          const isHovered = det.id === this._hoveredId;\n\n          return html`\n            <div class=\"bbox ${isSelected ? 'selected' : ''}\"\n              style=\"left:${pctL}%;top:${pctT}%;width:${pctW}%;height:${pctH}%;--det-color:${color}\"\n              tabindex=\"${this.interactive ? '0' : '-1'}\"\n              role=\"button\" aria-label=\"${det.label} ${Math.round(det.confidence * 100)}%\"\n              @click=${() => this._selectDetection(det)}\n              @mouseenter=${() => { this._hoveredId = det.id; this.dispatchEvent(new CustomEvent('ai-detection-hover', { bubbles: true, composed: true, detail: { id: det.id, label: det.label } })); }}\n              @mouseleave=${() => { this._hoveredId = ''; }}\n              @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._selectDetection(det); } }}>\n\n              ${this.showLabels ? html`\n                <span class=\"bbox-label\" style=\"background:${color}\">\n                  ${det.label}\n                  ${this.showConfidence ? html`<span class=\"bbox-confidence\">${Math.round(det.confidence * 100)}%</span>` : nothing}\n                </span>\n              ` : nothing}\n\n              ${isHovered && this.interactive ? html`\n                <div class=\"tooltip\">${det.label} — ${Math.round(det.confidence * 100)}%</div>\n              ` : nothing}\n            </div>\n          `;\n        }) : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiDetectionCanvas","LitElement","img","det","index","palette","html","nothing","i","x","y","w","h","color","pctL","pctT","pctW","pctH","isSelected","isHovered","e","hostBlock","reducedMotion","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-diff-panel/ai-diff-panel.d.ts

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+export declare class AiDiffPanel extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Text content before changes */
+    beforeCode: string;
+    /** Text content after changes */
+    afterCode: string;
+    /** Display mode */
+    mode: 'side-by-side' | 'inline';
+    /** Panel title */
+    title: string;
+    /** Column labels [before, after] */
+    labels: [string, string];
+    private _cachedDiff;
+    private _cachedBeforeCode;
+    private _cachedAfterCode;
+    /**
+     * Compute a line-level diff using the Longest Common Subsequence algorithm.
+     * This correctly handles duplicate lines (Set-based classification misclassifies them).
+     *
+     * Complexity: O(n*m) time and memory where n, m are the line counts of before/after.
+     * For realistic code diffs (< ~10k lines each side) this is fine. Pathological inputs
+     * (very large files with no shared structure) will grow quadratically — callers should
+     * chunk or pre-filter before reaching that regime.
+     */
+    private _computeDiff;
+    private get _stats();
+    private _handleLineClick;
+    private _handleLineKey;
+    private _lineAriaLabel;
+    private _renderSideBySide;
+    private _renderInline;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=ai-diff-panel.d.ts.map

package/dist/components/ai-diff-panel/ai-diff-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-diff-panel.d.ts","sourceRoot":"","sources":["../../../src/components/ai-diff-panel/ai-diff-panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAUrD,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,4BAqLnB;IACH,kCAAkC;IACN,UAAU,EAAE,MAAM,CAAM;IAEpD,iCAAiC;IACL,SAAS,EAAE,MAAM,CAAM;IAEnD,mBAAmB;IACS,IAAI,EAAE,cAAc,GAAG,QAAQ,CAAkB;IAE7E,kBAAkB;IACmB,KAAK,EAAE,MAAM,CAAgB;IAElE,oCAAoC;IACT,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAuB;IAE1E,OAAO,CAAC,WAAW,CAA2B;IAC9C,OAAO,CAAC,iBAAiB,CAAc;IACvC,OAAO,CAAC,gBAAgB,CAAc;IAEtC;;;;;;;;OAQG;IACH,OAAO,CAAC,YAAY;IAoEpB,OAAO,KAAK,MAAM,GASjB;IAED,OAAO,CAAC,gBAAgB;IAOxB,OAAO,CAAC,cAAc;IAOtB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,iBAAiB;IAwDzB,OAAO,CAAC,aAAa;IAoBZ,MAAM;CAgChB"}

package/dist/components/ai-diff-panel/ai-diff-panel.js

@@ -0,0 +1,374 @@
+import { css as v, LitElement as u, html as l } from "lit";
+import { property as p, customElement as b } from "lit/decorators.js";
+import { h as m, r as y, f as x } from "../../chunks/premium.css-9I4kHrsl.js";
+var $ = Object.defineProperty, w = Object.getOwnPropertyDescriptor, g = (t, i, r, e) => {
+  for (var a = e > 1 ? void 0 : e ? w(i, r) : i, d = t.length - 1, s; d >= 0; d--)
+    (s = t[d]) && (a = (e ? s(i, r, a) : s(a)) || a);
+  return e && a && $(i, r, a), a;
+};
+let f = class extends u {
+  constructor() {
+    super(...arguments), this.beforeCode = "", this.afterCode = "", this.mode = "side-by-side", this.title = "Comparison", this.labels = ["Before", "After"], this._cachedDiff = null, this._cachedBeforeCode = "", this._cachedAfterCode = "";
+  }
+  /**
+   * Compute a line-level diff using the Longest Common Subsequence algorithm.
+   * This correctly handles duplicate lines (Set-based classification misclassifies them).
+   *
+   * Complexity: O(n*m) time and memory where n, m are the line counts of before/after.
+   * For realistic code diffs (< ~10k lines each side) this is fine. Pathological inputs
+   * (very large files with no shared structure) will grow quadratically — callers should
+   * chunk or pre-filter before reaching that regime.
+   */
+  _computeDiff() {
+    if (this._cachedDiff && this._cachedBeforeCode === this.beforeCode && this._cachedAfterCode === this.afterCode)
+      return this._cachedDiff;
+    this._cachedBeforeCode = this.beforeCode, this._cachedAfterCode = this.afterCode;
+    const t = this.beforeCode === "" ? [] : this.beforeCode.split(`
+`), i = this.afterCode === "" ? [] : this.afterCode.split(`
+`), r = t.length, e = i.length;
+    if (r === 0 && e === 0)
+      return this._cachedDiff = [], this._cachedDiff;
+    if (r === 0) {
+      const o = i.map((n, h) => ({
+        type: "add",
+        content: n,
+        lineNum: { after: h + 1 }
+      }));
+      return this._cachedDiff = o, o;
+    }
+    if (e === 0) {
+      const o = t.map((n, h) => ({
+        type: "remove",
+        content: n,
+        lineNum: { before: h + 1 }
+      }));
+      return this._cachedDiff = o, o;
+    }
+    const a = Array.from({ length: r + 1 }, () => new Array(e + 1).fill(0));
+    for (let o = 1; o <= r; o++)
+      for (let n = 1; n <= e; n++)
+        t[o - 1] === i[n - 1] ? a[o][n] = a[o - 1][n - 1] + 1 : a[o][n] = Math.max(a[o - 1][n], a[o][n - 1]);
+    const d = [];
+    let s = r, c = e;
+    for (; s > 0 || c > 0; )
+      s > 0 && c > 0 && t[s - 1] === i[c - 1] ? (d.unshift({ type: "unchanged", content: t[s - 1], lineNum: { before: s, after: c } }), s--, c--) : c > 0 && (s === 0 || a[s][c - 1] >= a[s - 1][c]) ? (d.unshift({ type: "add", content: i[c - 1], lineNum: { after: c } }), c--) : (d.unshift({ type: "remove", content: t[s - 1], lineNum: { before: s } }), s--);
+    return this._cachedDiff = d, d;
+  }
+  get _stats() {
+    const t = this._computeDiff();
+    let i = 0, r = 0, e = 0;
+    for (const a of t)
+      a.type === "add" ? i++ : a.type === "remove" ? r++ : e++;
+    return { additions: i, removals: r, unchanged: e };
+  }
+  _handleLineClick(t) {
+    this.dispatchEvent(new CustomEvent("ai-diff-select", {
+      bubbles: !0,
+      composed: !0,
+      detail: { type: t.type, content: t.content, lineNum: t.lineNum }
+    }));
+  }
+  _handleLineKey(t, i) {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._handleLineClick(i));
+  }
+  _lineAriaLabel(t) {
+    const i = t.type === "add" ? "Added" : t.type === "remove" ? "Removed" : "Unchanged", r = t.lineNum.before ?? t.lineNum.after ?? "";
+    return `${i} line ${r}: ${t.content}`;
+  }
+  _renderSideBySide() {
+    this.beforeCode.split(`
+`), this.afterCode.split(`
+`);
+    const t = this._computeDiff(), i = [], r = [];
+    for (const e of t)
+      e.type === "unchanged" ? (i.push(e), r.push(e)) : e.type === "remove" ? (i.push(e), r.push(null)) : e.type === "add" && (i.push(null), r.push(e));
+    return l`
+      <div class="labels">
+        <div class="label-item">${this.labels[0]}</div>
+        <div class="label-item">${this.labels[1]}</div>
+      </div>
+      <div class="side-by-side">
+        <div class="side" role="list" aria-label="${this.labels[0]}">
+          ${i.map((e) => e ? l`
+            <div class="diff-line ${e.type}"
+              role="listitem"
+              tabindex="0"
+              aria-label=${this._lineAriaLabel(e)}
+              @click=${() => this._handleLineClick(e)}
+              @keydown=${(a) => this._handleLineKey(a, e)}>
+              <span class="line-num" aria-hidden="true">${e.lineNum.before ?? ""}</span>
+              <span class="line-sign" aria-hidden="true">${e.type === "remove" ? "-" : " "}</span>
+              <span class="line-content">${e.content}</span>
+            </div>
+          ` : l`<div class="diff-line empty" aria-hidden="true"><span class="line-num"></span><span class="line-sign"></span><span class="line-content"></span></div>`)}
+        </div>
+        <div class="side" role="list" aria-label="${this.labels[1]}">
+          ${r.map((e) => e ? l`
+            <div class="diff-line ${e.type}"
+              role="listitem"
+              tabindex="0"
+              aria-label=${this._lineAriaLabel(e)}
+              @click=${() => this._handleLineClick(e)}
+              @keydown=${(a) => this._handleLineKey(a, e)}>
+              <span class="line-num" aria-hidden="true">${e.lineNum.after ?? ""}</span>
+              <span class="line-sign" aria-hidden="true">${e.type === "add" ? "+" : " "}</span>
+              <span class="line-content">${e.content}</span>
+            </div>
+          ` : l`<div class="diff-line empty" aria-hidden="true"><span class="line-num"></span><span class="line-sign"></span><span class="line-content"></span></div>`)}
+        </div>
+      </div>
+    `;
+  }
+  _renderInline() {
+    const t = this._computeDiff();
+    return l`
+      <div class="inline-diff" role="list" aria-label="${this.title}">
+        ${t.map((i) => l`
+          <div class="diff-line ${i.type}"
+            role="listitem"
+            tabindex="0"
+            aria-label=${this._lineAriaLabel(i)}
+            @click=${() => this._handleLineClick(i)}
+            @keydown=${(r) => this._handleLineKey(r, i)}>
+            <span class="prefix" aria-hidden="true">${i.type === "add" ? "+" : i.type === "remove" ? "-" : " "}</span>
+            <span class="line-num" aria-hidden="true">${i.lineNum.before ?? i.lineNum.after ?? ""}</span>
+            <span class="line-content">${i.content}</span>
+          </div>
+        `)}
+      </div>
+    `;
+  }
+  render() {
+    if (!this.beforeCode && !this.afterCode)
+      return l`<div class="panel"><div class="empty">No content to compare</div></div>`;
+    const t = this._stats;
+    return l`
+      <div class="panel" role="group" aria-label="${this.title}">
+        <div class="header">
+          <span class="title">${this.title}</span>
+          <div class="mode-toggle">
+            <button class="mode-btn ${this.mode === "side-by-side" ? "active" : ""}"
+              @click=${() => this.mode = "side-by-side"}>Split</button>
+            <button class="mode-btn ${this.mode === "inline" ? "active" : ""}"
+              @click=${() => this.mode = "inline"}>Inline</button>
+          </div>
+        </div>
+        <div class="stats">
+          <span class="stat-add">+${t.additions}</span>
+          <span class="stat-remove">-${t.removals}</span>
+          <span class="stat-unchanged">${t.unchanged} unchanged</span>
+          <div class="stats-bar">
+            <div class="stats-bar-add" style="flex:${t.additions}"></div>
+            <div class="stats-bar-remove" style="flex:${t.removals}"></div>
+            <div class="stats-bar-unchanged" style="flex:${t.unchanged}"></div>
+          </div>
+        </div>
+        ${this.mode === "side-by-side" ? this._renderSideBySide() : this._renderInline()}
+      </div>
+    `;
+  }
+};
+f.styles = [m, y, x, v`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-fast) var(--cg-transition-easing-ease-out) both;
+    }
+
+    .panel {
+      background: var(--cg-color-code-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-code-border);
+      border-radius: var(--cg-component-card-radius);
+      overflow: hidden;
+      transition:
+        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    .panel:hover {
+      border-color: var(--cg-color-code-muted);
+    }
+
+    /* Header */
+    .header {
+      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-code-border);
+    }
+    .title {
+      font-size: var(--cg-font-size-sm);
+      font-weight: var(--cg-font-weight-semibold);
+      color: var(--cg-color-surface-base-text);
+    }
+    .mode-toggle {
+      display: flex;
+      gap: var(--cg-spacing-2);
+      background: var(--cg-color-code-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-code-border);
+      border-radius: var(--cg-border-radius-100);
+      padding: var(--cg-spacing-2);
+    }
+    .mode-btn {
+      padding: var(--cg-spacing-4) var(--cg-spacing-12);
+      border: none;
+      border-radius: var(--cg-border-radius-50);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      cursor: pointer;
+      background: none;
+      color: var(--cg-color-input-text-placeholder);
+      font-family: inherit;
+      transition:
+        background-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .mode-btn.active {
+      background: var(--cg-color-code-border);
+      color: var(--cg-color-code-text);
+    }
+
+    /* Stats bar */
+    .stats {
+      display: flex;
+      gap: var(--cg-spacing-16);
+      padding: var(--cg-spacing-8) var(--cg-spacing-16);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-code-border);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+    }
+    .stat-add { color: var(--cg-color-status-success-text-default); }
+    .stat-remove { color: var(--cg-color-status-error-text-default); }
+    .stat-unchanged { color: var(--cg-color-code-muted); }
+    .stats-bar {
+      display: flex;
+      height: var(--cg-spacing-4);
+      border-radius: var(--cg-border-radius-full);
+      overflow: hidden;
+      margin-left: auto;
+      width: var(--cg-spacing-80);
+    }
+    .stats-bar-add { background: var(--cg-color-status-success-text-default); }
+    .stats-bar-remove { background: var(--cg-color-status-error-text-default); }
+    .stats-bar-unchanged { background: var(--cg-color-code-border); }
+
+    /* Labels */
+    .labels {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0;
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-code-border);
+    }
+    .label-item {
+      padding: var(--cg-spacing-6) var(--cg-spacing-16);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      color: var(--cg-color-input-text-placeholder);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+    }
+    .label-item:first-child { border-right: var(--cg-border-width-50) solid var(--cg-color-code-border); }
+
+    /* Side-by-side */
+    .side-by-side {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      max-height: var(--cg-spacing-256);
+      overflow-y: auto;
+    }
+    .side {
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-xs);
+      line-height: var(--cg-line-height-relaxed);
+    }
+    .side:first-child { border-right: var(--cg-border-width-50) solid var(--cg-color-code-border); }
+
+    .diff-line {
+      display: flex;
+      padding: var(--cg-spacing-1) var(--cg-spacing-12);
+      min-height: var(--cg-spacing-20);
+    }
+    .line-num {
+      width: var(--cg-spacing-32);
+      flex-shrink: 0;
+      color: var(--cg-color-code-muted);
+      text-align: right;
+      padding-right: var(--cg-spacing-8);
+      user-select: none;
+    }
+    .line-sign {
+      width: var(--cg-spacing-16);
+      flex-shrink: 0;
+      text-align: center;
+      font-weight: var(--cg-font-weight-bold);
+      user-select: none;
+    }
+    .line-content {
+      flex: 1;
+      white-space: pre-wrap;
+      word-break: break-all;
+      color: var(--cg-color-code-text);
+    }
+
+    .diff-line.add { background: var(--cg-color-status-success-background-default); }
+    .diff-line.add .line-sign { color: var(--cg-color-status-success-text-default); }
+    .diff-line.add .line-content { color: var(--cg-color-status-success-text-default); }
+    .diff-line.remove { background: var(--cg-color-status-error-background-default); }
+    .diff-line.remove .line-sign { color: var(--cg-color-status-error-text-default); }
+    .diff-line.remove .line-content { color: var(--cg-color-status-error-text-default); }
+    .diff-line.unchanged .line-content { color: var(--cg-color-code-muted); }
+    .diff-line.empty { background: var(--cg-color-code-background); }
+
+    /* Inline mode */
+    .inline-diff {
+      font-family: var(--cg-font-family-mono);
+      font-size: var(--cg-font-size-xs);
+      line-height: var(--cg-line-height-relaxed);
+      max-height: var(--cg-spacing-256);
+      overflow-y: auto;
+    }
+    .diff-line:hover {
+      opacity: 0.85;
+    }
+    .inline-diff .diff-line .prefix {
+      width: var(--cg-spacing-20);
+      flex-shrink: 0;
+      text-align: center;
+      font-weight: var(--cg-font-weight-bold);
+    }
+    .inline-diff .add .prefix { color: var(--cg-color-status-success-text-default); }
+    .inline-diff .remove .prefix { color: var(--cg-color-status-error-text-default); }
+
+    /* Empty */
+    .empty {
+      padding: var(--cg-spacing-24);
+      text-align: center;
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-sm);
+    }
+
+    :focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 var(--cg-border-width-300) var(--cg-overlay-accent-strong);
+    }
+  `];
+g([
+  p({ type: String })
+], f.prototype, "beforeCode", 2);
+g([
+  p({ type: String })
+], f.prototype, "afterCode", 2);
+g([
+  p({ type: String })
+], f.prototype, "mode", 2);
+g([
+  p({ type: String })
+], f.prototype, "title", 2);
+g([
+  p({ type: Array })
+], f.prototype, "labels", 2);
+f = g([
+  b("ai-diff-panel")
+], f);
+export {
+  f as AiDiffPanel
+};
+//# sourceMappingURL=ai-diff-panel.js.map