@cognivo/components 0.8.0

package/dist/components/ai-tool-indicator/ai-tool-indicator.js

@@ -0,0 +1,186 @@
+import { css as p, LitElement as u, html as t, nothing as d } from "lit";
+import { property as g, customElement as v } from "lit/decorators.js";
+import { h as f, r as h } from "../../chunks/premium.css-9I4kHrsl.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, l = (r, e, o, i) => {
+  for (var a = i > 1 ? void 0 : i ? b(e, o) : e, s = r.length - 1, c; s >= 0; s--)
+    (c = r[s]) && (a = (i ? c(e, o, a) : c(a)) || a);
+  return i && a && m(e, o, a), a;
+};
+let n = class extends u {
+  constructor() {
+    super(...arguments), this.tools = [], this.compact = !1, this._expandedIndex = -1;
+  }
+  _humanize(r) {
+    return {
+      web_search: "Searching the web",
+      search: "Searching",
+      code_execution: "Running code",
+      code_interpreter: "Running code",
+      database: "Querying database",
+      database_query: "Querying database",
+      file_search: "Searching files",
+      file_read: "Reading file",
+      calculator: "Calculating",
+      image_generation: "Generating image",
+      browser: "Browsing",
+      retrieval: "Retrieving data",
+      api_call: "Calling API"
+    }[r] || r.replace(/_/g, " ").replace(/\b\w/g, (o) => o.toUpperCase());
+  }
+  _handleClick(r) {
+    this._expandedIndex = this._expandedIndex === r ? -1 : r, this.requestUpdate(), this.dispatchEvent(new CustomEvent("ai-tool-click", {
+      bubbles: !0,
+      composed: !0,
+      detail: { index: r, tool: this.tools[r] }
+    }));
+  }
+  _renderStatusIcon(r) {
+    return r === "complete" ? t`<span class="check"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6L9 17l-5-5"/></svg></span>` : r === "error" ? t`<span class="error-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg></span>` : t`<div class="spinner"></div>`;
+  }
+  render() {
+    return this.tools.length === 0 ? d : t`
+      <div class="tools" role="status" aria-label="Tool calls">
+        ${this.tools.map((r, e) => t`
+          <div class="tool ${r.status}" style="--tool-index: ${e}"
+            role="button" tabindex="0"
+            aria-label="${this._humanize(r.name)} — ${r.status}"
+            @click=${() => this._handleClick(e)}
+            @keydown=${(o) => {
+      (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this._handleClick(e));
+    }}>
+            <span class="status-icon">${this._renderStatusIcon(r.status)}</span>
+            <span class="tool-name">${this._humanize(r.name)}</span>
+          </div>
+          ${!this.compact && this._expandedIndex === e && r.result ? t`
+            <div class="result">${r.result}</div>
+          ` : d}
+        `)}
+      </div>
+    `;
+  }
+};
+n.styles = [f, h, p`
+    .tools {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+    }
+
+    .tool {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-12);
+      padding: var(--cg-spacing-16) var(--cg-spacing-20);
+      border-radius: var(--cg-border-radius-100);
+      background: var(--cg-color-surface-cards-background);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-medium);
+      color: var(--cg-color-surface-container-outlined);
+      cursor: pointer;
+      transition: border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      animation: slideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+      animation-delay: calc(var(--tool-index, 0) * 60ms);
+    }
+    .tool:hover {
+      border-color: var(--cg-color-surface-cards-hover-border);
+      background: var(--cg-color-surface-cards-hover-background);
+    }
+
+    @keyframes slideIn {
+      from { opacity: 0; transform: translateX(calc(-1 * var(--cg-spacing-8))); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+
+    /* Status icon */
+    .status-icon {
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    /* Spinner */
+    .spinner {
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);
+      border-top-color: var(--cg-color-loading-spinner-primary);
+      border-radius: var(--cg-border-radius-full);
+      animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    .check svg, .error-icon svg {
+      width: var(--cg-spacing-12);
+      height: var(--cg-spacing-12);
+    }
+    .check { color: var(--cg-color-status-success-text-default); display: flex; }
+    .error-icon { color: var(--cg-color-status-error-text-default); display: flex; }
+
+    /* Tool name */
+    .tool-name { flex: 1; }
+    .tool.complete .tool-name { color: var(--cg-color-surface-base-text); }
+    .tool.error .tool-name { color: var(--cg-color-status-error-text-default); }
+
+    /* Loading shimmer on tool name */
+    .tool.loading .tool-name {
+      background: linear-gradient(110deg, var(--cg-color-surface-container-outlined) 35%, var(--cg-color-surface-base-text) 50%, var(--cg-color-surface-container-outlined) 65%);
+      background-size: 300% 100%;
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      animation: textSweep 1.8s var(--cg-transition-easing-default) infinite;
+    }
+    @keyframes textSweep {
+      0% { background-position: 100% 50%; }
+      100% { background-position: 0% 50%; }
+    }
+
+    /* Expanded result */
+    .result {
+      margin-top: var(--cg-spacing-4);
+      padding: var(--cg-spacing-12) var(--cg-spacing-16);
+      background: var(--cg-color-surface-base-background);
+      border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      font-size: var(--cg-font-size-xs);
+      font-family: var(--cg-font-family-mono);
+      color: var(--cg-color-surface-container-outlined);
+      line-height: var(--cg-line-height-relaxed);
+      white-space: pre-wrap;
+      max-height: 200px;
+      overflow-y: auto;
+    }
+
+    /* Compact mode */
+    :host([compact]) .tools { flex-direction: row; flex-wrap: wrap; }
+    :host([compact]) .tool { padding: var(--cg-spacing-6) var(--cg-spacing-12); }
+    :host([compact]) .result { display: none; }
+
+    .tool:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .spinner { animation: none; }
+      .tool { animation: none; }
+      .tool.loading .tool-name { animation: none; -webkit-text-fill-color: currentColor; }
+    }
+  `];
+l([
+  g({ type: Array })
+], n.prototype, "tools", 2);
+l([
+  g({ type: Boolean, reflect: !0 })
+], n.prototype, "compact", 2);
+n = l([
+  v("ai-tool-indicator")
+], n);
+export {
+  n as AiToolIndicator
+};
+//# sourceMappingURL=ai-tool-indicator.js.map

package/dist/components/ai-tool-indicator/ai-tool-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-tool-indicator.js","sources":["../../../src/components/ai-tool-indicator/ai-tool-indicator.ts"],"sourcesContent":["/**\n * @element ai-tool-indicator\n * Displays LLM tool/function call progress with humanized names,\n * spinner/check/error icons, and expandable result panels.\n *\n * @fires {CustomEvent<{index: number, tool: ToolCall}>} ai-tool-click - When a tool row is clicked\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion } from '../../styles/index.js';\n\ninterface ToolCall {\n  name: string;\n  status: 'loading' | 'complete' | 'error';\n  result?: string;\n}\n\n@customElement('ai-tool-indicator')\nexport class AiToolIndicator extends LitElement {\n  static override styles = [hostBlock, reducedMotion, css`\n    .tools {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    .tool {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-12);\n      padding: var(--cg-spacing-16) var(--cg-spacing-20);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-surface-cards-background);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xs);\n      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), background var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      animation: slideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n      animation-delay: calc(var(--tool-index, 0) * 60ms);\n    }\n    .tool:hover {\n      border-color: var(--cg-color-surface-cards-hover-border);\n      background: var(--cg-color-surface-cards-hover-background);\n    }\n\n    @keyframes slideIn {\n      from { opacity: 0; transform: translateX(calc(-1 * var(--cg-spacing-8))); }\n      to { opacity: 1; transform: translateX(0); }\n    }\n\n    /* Status icon */\n    .status-icon {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n    }\n\n    /* Spinner */\n    .spinner {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n      border: var(--cg-border-width-100) solid var(--cg-color-loading-spinner-secondary);\n      border-top-color: var(--cg-color-loading-spinner-primary);\n      border-radius: var(--cg-border-radius-full);\n      animation: spin 0.8s linear infinite;\n    }\n    @keyframes spin { to { transform: rotate(360deg); } }\n\n    .check svg, .error-icon svg {\n      width: var(--cg-spacing-12);\n      height: var(--cg-spacing-12);\n    }\n    .check { color: var(--cg-color-status-success-text-default); display: flex; }\n    .error-icon { color: var(--cg-color-status-error-text-default); display: flex; }\n\n    /* Tool name */\n    .tool-name { flex: 1; }\n    .tool.complete .tool-name { color: var(--cg-color-surface-base-text); }\n    .tool.error .tool-name { color: var(--cg-color-status-error-text-default); }\n\n    /* Loading shimmer on tool name */\n    .tool.loading .tool-name {\n      background: linear-gradient(110deg, var(--cg-color-surface-container-outlined) 35%, var(--cg-color-surface-base-text) 50%, var(--cg-color-surface-container-outlined) 65%);\n      background-size: 300% 100%;\n      background-clip: text;\n      -webkit-background-clip: text;\n      -webkit-text-fill-color: transparent;\n      animation: textSweep 1.8s var(--cg-transition-easing-default) infinite;\n    }\n    @keyframes textSweep {\n      0% { background-position: 100% 50%; }\n      100% { background-position: 0% 50%; }\n    }\n\n    /* Expanded result */\n    .result {\n      margin-top: var(--cg-spacing-4);\n      padding: var(--cg-spacing-12) var(--cg-spacing-16);\n      background: var(--cg-color-surface-base-background);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xs);\n      font-family: var(--cg-font-family-mono);\n      color: var(--cg-color-surface-container-outlined);\n      line-height: var(--cg-line-height-relaxed);\n      white-space: pre-wrap;\n      max-height: 200px;\n      overflow-y: auto;\n    }\n\n    /* Compact mode */\n    :host([compact]) .tools { flex-direction: row; flex-wrap: wrap; }\n    :host([compact]) .tool { padding: var(--cg-spacing-6) var(--cg-spacing-12); }\n    :host([compact]) .result { display: none; }\n\n    .tool:focus-visible {\n      outline: none;\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      .spinner { animation: none; }\n      .tool { animation: none; }\n      .tool.loading .tool-name { animation: none; -webkit-text-fill-color: currentColor; }\n    }\n  `];\n\n  @property({ type: Array }) tools: ToolCall[] = [];\n  @property({ type: Boolean, reflect: true }) compact = false;\n\n  private _expandedIndex = -1;\n\n  private _humanize(name: string): string {\n    const map: Record<string, string> = {\n      web_search: 'Searching the web',\n      search: 'Searching',\n      code_execution: 'Running code',\n      code_interpreter: 'Running code',\n      database: 'Querying database',\n      database_query: 'Querying database',\n      file_search: 'Searching files',\n      file_read: 'Reading file',\n      calculator: 'Calculating',\n      image_generation: 'Generating image',\n      browser: 'Browsing',\n      retrieval: 'Retrieving data',\n      api_call: 'Calling API',\n    };\n    return map[name] || name.replace(/_/g, ' ').replace(/\\b\\w/g, c => c.toUpperCase());\n  }\n\n  private _handleClick(index: number) {\n    this._expandedIndex = this._expandedIndex === index ? -1 : index;\n    this.requestUpdate();\n    this.dispatchEvent(new CustomEvent('ai-tool-click', {\n      bubbles: true, composed: true,\n      detail: { index, tool: this.tools[index] },\n    }));\n  }\n\n  private _renderStatusIcon(status: string) {\n    if (status === 'complete') return html`<span class=\"check\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M20 6L9 17l-5-5\"/></svg></span>`;\n    if (status === 'error') return html`<span class=\"error-icon\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg></span>`;\n    return html`<div class=\"spinner\"></div>`;\n  }\n\n  override render() {\n    if (this.tools.length === 0) return nothing;\n\n    return html`\n      <div class=\"tools\" role=\"status\" aria-label=\"Tool calls\">\n        ${this.tools.map((t, i) => html`\n          <div class=\"tool ${t.status}\" style=\"--tool-index: ${i}\"\n            role=\"button\" tabindex=\"0\"\n            aria-label=\"${this._humanize(t.name)} — ${t.status}\"\n            @click=${() => this._handleClick(i)}\n            @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._handleClick(i); } }}>\n            <span class=\"status-icon\">${this._renderStatusIcon(t.status)}</span>\n            <span class=\"tool-name\">${this._humanize(t.name)}</span>\n          </div>\n          ${!this.compact && this._expandedIndex === i && t.result ? html`\n            <div class=\"result\">${t.result}</div>\n          ` : nothing}\n        `)}\n      </div>\n    `;\n  }\n}\n"],"names":["AiToolIndicator","LitElement","name","c","index","status","html","nothing","t","i","e","hostBlock","reducedMotion","css","__decorateClass","property","customElement"],"mappings":"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"}

package/dist/components/ai-transform-slider/ai-transform-slider.d.ts

@@ -0,0 +1,21 @@
+import { LitElement } from 'lit';
+export declare class AiTransformSlider extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    beforeSrc: string;
+    afterSrc: string;
+    beforeLabel: string;
+    afterLabel: string;
+    position: number;
+    orientation: 'horizontal' | 'vertical';
+    private _dragging;
+    private _container;
+    private _getClipPath;
+    private _onPointerDown;
+    private _onPointerMove;
+    private _onPointerUp;
+    private _updatePosition;
+    private _handleKeyDown;
+    render(): import('lit').TemplateResult<1>;
+}
+//# sourceMappingURL=ai-transform-slider.d.ts.map

package/dist/components/ai-transform-slider/ai-transform-slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-transform-slider.d.ts","sourceRoot":"","sources":["../../../src/components/ai-transform-slider/ai-transform-slider.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,4BAwJnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7C,SAAS,EAAE,MAAM,CAAM;IACvB,QAAQ,EAAE,MAAM,CAAM;IACtB,WAAW,EAAE,MAAM,CAAY;IAC/B,UAAU,EAAE,MAAM,CAAW;IAC7B,QAAQ,EAAE,MAAM,CAAM;IACP,WAAW,EAAE,YAAY,GAAG,UAAU,CAAgB;IAExF,OAAO,CAAC,SAAS,CAAS;IACd,OAAO,CAAC,UAAU,CAAe;IAEtD,OAAO,CAAC,YAAY;IAOpB,OAAO,CAAC,cAAc;IAMtB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,cAAc;IAmBb,MAAM;CAmDhB"}

package/dist/components/ai-transform-slider/ai-transform-slider.js

@@ -0,0 +1,270 @@
+import { css as g, LitElement as h, html as c } from "lit";
+import { property as n, state as p, query as f, customElement as u } from "lit/decorators.js";
+import { h as v, r as b, g as m } from "../../chunks/premium.css-9I4kHrsl.js";
+var y = Object.defineProperty, w = Object.getOwnPropertyDescriptor, a = (t, r, i, s) => {
+  for (var o = s > 1 ? void 0 : s ? w(r, i) : r, d = t.length - 1, l; d >= 0; d--)
+    (l = t[d]) && (o = (s ? l(r, i, o) : l(o)) || o);
+  return s && o && y(r, i, o), o;
+};
+let e = class extends h {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.beforeSrc = "", this.afterSrc = "", this.beforeLabel = "Before", this.afterLabel = "After", this.position = 50, this.orientation = "horizontal", this._dragging = !1;
+  }
+  _getClipPath() {
+    return this.orientation === "vertical" ? `inset(${this.position}% 0 0 0)` : `inset(0 ${100 - this.position}% 0 0)`;
+  }
+  _onPointerDown(t) {
+    this._dragging = !0, this._container?.setPointerCapture?.(t.pointerId), this._updatePosition(t);
+  }
+  _onPointerMove(t) {
+    this._dragging && this._updatePosition(t);
+  }
+  _onPointerUp() {
+    this._dragging = !1;
+  }
+  _updatePosition(t) {
+    if (!this._container) return;
+    const r = this._container.getBoundingClientRect();
+    let i;
+    this.orientation === "vertical" ? i = (t.clientY - r.top) / r.height * 100 : i = (t.clientX - r.left) / r.width * 100, i = Math.max(0, Math.min(100, i)), this.position = Math.round(i * 10) / 10, this.dispatchEvent(new CustomEvent("ai-transform-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { position: this.position }
+    }));
+  }
+  _handleKeyDown(t) {
+    let r = 0;
+    this.orientation === "horizontal" ? (t.key === "ArrowLeft" && (r = -2), t.key === "ArrowRight" && (r = 2)) : (t.key === "ArrowUp" && (r = -2), t.key === "ArrowDown" && (r = 2)), r && (t.preventDefault(), this.position = Math.max(0, Math.min(100, this.position + r)), this.dispatchEvent(new CustomEvent("ai-transform-change", {
+      bubbles: !0,
+      composed: !0,
+      detail: { position: this.position }
+    })));
+  }
+  render() {
+    if (!this.beforeSrc || !this.afterSrc)
+      return c`<div class="container"><div class="placeholder">Provide beforeSrc and afterSrc images</div></div>`;
+    const t = this.orientation === "horizontal", r = t ? `left: ${this.position}%` : `top: ${this.position}%`, i = t ? `left: ${this.position}%; top: 50%` : `top: ${this.position}%; left: 50%`;
+    return c`
+      <div class="container ${this._dragging ? "dragging" : ""}"
+        @pointerdown=${this._onPointerDown}
+        @pointermove=${this._onPointerMove}
+        @pointerup=${this._onPointerUp}
+        @pointercancel=${this._onPointerUp}>
+
+        <!-- Before image (full) -->
+        <img class="image-layer" src="${this.beforeSrc}" alt="${this.beforeLabel}" draggable="false" />
+
+        <!-- After image (clipped) -->
+        <div class="after-layer" style="clip-path: ${this._getClipPath()}">
+          <img src="${this.afterSrc}" alt="${this.afterLabel}" draggable="false" />
+        </div>
+
+        <!-- Divider line -->
+        <div class="divider ${this.orientation}" style="${r}"></div>
+
+        <!-- Drag handle -->
+        <div class="handle" style="${i}"
+          tabindex="0" role="slider"
+          aria-label="Compare position"
+          aria-valuemin="0" aria-valuemax="100"
+          aria-valuenow="${this.position}"
+          @keydown=${this._handleKeyDown}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
+            ${t ? c`<path d="M8 6l-4 6 4 6"/><path d="M16 6l4 6-4 6"/>` : c`<path d="M6 8l6-4 6 4"/><path d="M6 16l6 4 6-4"/>`}
+          </svg>
+        </div>
+
+        <!-- Labels -->
+        <span class="label before">${this.beforeLabel}</span>
+        <span class="label after">${this.afterLabel}</span>
+      </div>
+    `;
+  }
+};
+e.styles = [v, b, m, g`
+    :host {
+      animation: fadeIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+
+    .container {
+      position: relative;
+      overflow: hidden;
+      border-radius: var(--cg-border-radius-200);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: var(--cg-color-surface-base-background);
+      user-select: none;
+      touch-action: none;
+      cursor: ew-resize;
+    }
+    :host([orientation="vertical"]) .container {
+      cursor: ns-resize;
+    }
+
+    .image-layer {
+      display: block;
+      width: 100%;
+      height: auto;
+      pointer-events: none;
+    }
+
+    .after-layer {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+    .after-layer img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      pointer-events: none;
+    }
+
+    /* ── Divider line ── */
+    .divider {
+      position: absolute;
+      z-index: 2;
+      transition: left var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+                  top var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .container.dragging .divider { transition: none; }
+
+    .divider.horizontal {
+      top: 0;
+      bottom: 0;
+      width: var(--cg-border-width-100);
+      background: var(--cg-color-action-primary-background-default);
+    }
+    .divider.vertical {
+      left: 0;
+      right: 0;
+      height: var(--cg-border-width-100);
+      background: var(--cg-color-action-primary-background-default);
+    }
+
+    /* ── Handle grip ── */
+    .handle {
+      position: absolute;
+      z-index: 3;
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      border-radius: var(--cg-border-radius-full);
+      background: var(--cg-color-action-primary-background-default);
+      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transform: translate(-50%, -50%);
+      transition:
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        left var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        top var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .container.dragging .handle {
+      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+                  border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+                  box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .handle:hover {
+      transform: translate(-50%, -50%) scale(1.1);
+      border-color: var(--cg-color-surface-base-text);
+    }
+    .container.dragging .handle {
+      transform: translate(-50%, -50%) scale(1.15);
+      border-color: var(--cg-color-surface-base-text);
+      box-shadow: 0 0 0 4px var(--cg-overlay-accent-light);
+    }
+    .handle: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);
+    }
+    .handle svg {
+      width: var(--cg-spacing-16);
+      height: var(--cg-spacing-16);
+      color: var(--cg-color-surface-base-background);
+    }
+
+    /* ── Labels ── */
+    .label {
+      position: absolute;
+      z-index: 2;
+      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-color-surface-base-text);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      text-transform: uppercase;
+      letter-spacing: var(--cg-letter-spacing-wide);
+      pointer-events: none;
+    }
+    .label.before {
+      bottom: var(--cg-spacing-12);
+      left: var(--cg-spacing-12);
+    }
+    .label.after {
+      bottom: var(--cg-spacing-12);
+      right: var(--cg-spacing-12);
+    }
+
+    /* ── Placeholder ── */
+    .placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: var(--cg-spacing-96);
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-sm);
+    }
+
+    /* ── Rounded variants ── */
+    :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); }
+
+    @media (prefers-reduced-motion: reduce) {
+      .handle, .divider { transition: none !important; }
+    }
+  `];
+a([
+  n({ reflect: !0 })
+], e.prototype, "rounded", 2);
+a([
+  n({ type: String })
+], e.prototype, "beforeSrc", 2);
+a([
+  n({ type: String })
+], e.prototype, "afterSrc", 2);
+a([
+  n({ type: String })
+], e.prototype, "beforeLabel", 2);
+a([
+  n({ type: String })
+], e.prototype, "afterLabel", 2);
+a([
+  n({ type: Number })
+], e.prototype, "position", 2);
+a([
+  n({ type: String, reflect: !0 })
+], e.prototype, "orientation", 2);
+a([
+  p()
+], e.prototype, "_dragging", 2);
+a([
+  f(".container")
+], e.prototype, "_container", 2);
+e = a([
+  u("ai-transform-slider")
+], e);
+export {
+  e as AiTransformSlider
+};
+//# sourceMappingURL=ai-transform-slider.js.map

package/dist/components/ai-transform-slider/ai-transform-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-transform-slider.js","sources":["../../../src/components/ai-transform-slider/ai-transform-slider.ts"],"sourcesContent":["/**\n * @element ai-transform-slider\n * Before/after image comparison slider with draggable divider using clip-path overlay.\n * Supports horizontal and vertical orientations, keyboard arrow keys, and pointer capture.\n *\n * @example\n * ```html\n * <ai-transform-slider\n *   beforeSrc=\"/img/before.jpg\"\n *   afterSrc=\"/img/after.jpg\"\n *   beforeLabel=\"Original\"\n *   afterLabel=\"Enhanced\"\n *   position=\"50\"\n * ></ai-transform-slider>\n * ```\n *\n * @fires {CustomEvent<{position: number}>} ai-transform-change - Slider position changed\n *\n * @cssprop --cg-color-action-primary-background-default - Divider line and handle color\n */\nimport { LitElement, html, css } from 'lit';\nimport { property, state, customElement, query } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-transform-slider')\nexport class AiTransformSlider extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeInKeyframes, css`\n    :host {\n      animation: fadeIn var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n\n    .container {\n      position: relative;\n      overflow: hidden;\n      border-radius: var(--cg-border-radius-200);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: var(--cg-color-surface-base-background);\n      user-select: none;\n      touch-action: none;\n      cursor: ew-resize;\n    }\n    :host([orientation=\"vertical\"]) .container {\n      cursor: ns-resize;\n    }\n\n    .image-layer {\n      display: block;\n      width: 100%;\n      height: auto;\n      pointer-events: none;\n    }\n\n    .after-layer {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      overflow: hidden;\n    }\n    .after-layer img {\n      display: block;\n      width: 100%;\n      height: 100%;\n      object-fit: cover;\n      pointer-events: none;\n    }\n\n    /* ── Divider line ── */\n    .divider {\n      position: absolute;\n      z-index: 2;\n      transition: left var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n                  top var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .container.dragging .divider { transition: none; }\n\n    .divider.horizontal {\n      top: 0;\n      bottom: 0;\n      width: var(--cg-border-width-100);\n      background: var(--cg-color-action-primary-background-default);\n    }\n    .divider.vertical {\n      left: 0;\n      right: 0;\n      height: var(--cg-border-width-100);\n      background: var(--cg-color-action-primary-background-default);\n    }\n\n    /* ── Handle grip ── */\n    .handle {\n      position: absolute;\n      z-index: 3;\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border-radius: var(--cg-border-radius-full);\n      background: var(--cg-color-action-primary-background-default);\n      border: var(--cg-border-width-100) solid var(--cg-color-surface-base-background);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transform: translate(-50%, -50%);\n      transition:\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        left var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        top var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .container.dragging .handle {\n      transition: transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n                  border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n                  box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .handle:hover {\n      transform: translate(-50%, -50%) scale(1.1);\n      border-color: var(--cg-color-surface-base-text);\n    }\n    .container.dragging .handle {\n      transform: translate(-50%, -50%) scale(1.15);\n      border-color: var(--cg-color-surface-base-text);\n      box-shadow: 0 0 0 4px var(--cg-overlay-accent-light);\n    }\n    .handle:focus-visible {\n      outline: none;\n      box-shadow:\n        0 0 0 2px var(--cg-color-surface-base-background),\n        0 0 0 4px var(--cg-color-focus-ring);\n    }\n    .handle svg {\n      width: var(--cg-spacing-16);\n      height: var(--cg-spacing-16);\n      color: var(--cg-color-surface-base-background);\n    }\n\n    /* ── Labels ── */\n    .label {\n      position: absolute;\n      z-index: 2;\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-color-surface-base-text);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      text-transform: uppercase;\n      letter-spacing: var(--cg-letter-spacing-wide);\n      pointer-events: none;\n    }\n    .label.before {\n      bottom: var(--cg-spacing-12);\n      left: var(--cg-spacing-12);\n    }\n    .label.after {\n      bottom: var(--cg-spacing-12);\n      right: var(--cg-spacing-12);\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-input-text-placeholder);\n      font-size: var(--cg-font-size-sm);\n    }\n\n    /* ── Rounded variants ── */\n    :host([rounded=\"none\"]) .container { border-radius: 0; }\n    :host([rounded=\"sm\"]) .container { border-radius: var(--cg-border-radius-50); }\n    :host([rounded=\"md\"]) .container { border-radius: var(--cg-border-radius-100); }\n    :host([rounded=\"lg\"]) .container { border-radius: var(--cg-border-radius-200); }\n\n    @media (prefers-reduced-motion: reduce) {\n      .handle, .divider { transition: none !important; }\n    }\n  `];\n\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' = 'lg';\n  @property({ type: String }) beforeSrc: string = '';\n  @property({ type: String }) afterSrc: string = '';\n  @property({ type: String }) beforeLabel: string = 'Before';\n  @property({ type: String }) afterLabel: string = 'After';\n  @property({ type: Number }) position: number = 50;\n  @property({ type: String, reflect: true }) orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  @state() private _dragging = false;\n  @query('.container') private _container!: HTMLElement;\n\n  private _getClipPath(): string {\n    if (this.orientation === 'vertical') {\n      return `inset(${this.position}% 0 0 0)`;\n    }\n    return `inset(0 ${100 - this.position}% 0 0)`;\n  }\n\n  private _onPointerDown(e: PointerEvent) {\n    this._dragging = true;\n    this._container?.setPointerCapture?.(e.pointerId);\n    this._updatePosition(e);\n  }\n\n  private _onPointerMove(e: PointerEvent) {\n    if (!this._dragging) return;\n    this._updatePosition(e);\n  }\n\n  private _onPointerUp() {\n    this._dragging = false;\n  }\n\n  private _updatePosition(e: PointerEvent) {\n    if (!this._container) return;\n    const rect = this._container.getBoundingClientRect();\n    let pos: number;\n    if (this.orientation === 'vertical') {\n      pos = ((e.clientY - rect.top) / rect.height) * 100;\n    } else {\n      pos = ((e.clientX - rect.left) / rect.width) * 100;\n    }\n    pos = Math.max(0, Math.min(100, pos));\n    this.position = Math.round(pos * 10) / 10;\n    this.dispatchEvent(new CustomEvent('ai-transform-change', {\n      bubbles: true, composed: true,\n      detail: { position: this.position },\n    }));\n  }\n\n  private _handleKeyDown(e: KeyboardEvent) {\n    let delta = 0;\n    if (this.orientation === 'horizontal') {\n      if (e.key === 'ArrowLeft') delta = -2;\n      if (e.key === 'ArrowRight') delta = 2;\n    } else {\n      if (e.key === 'ArrowUp') delta = -2;\n      if (e.key === 'ArrowDown') delta = 2;\n    }\n    if (delta) {\n      e.preventDefault();\n      this.position = Math.max(0, Math.min(100, this.position + delta));\n      this.dispatchEvent(new CustomEvent('ai-transform-change', {\n        bubbles: true, composed: true,\n        detail: { position: this.position },\n      }));\n    }\n  }\n\n  override render() {\n    if (!this.beforeSrc || !this.afterSrc) {\n      return html`<div class=\"container\"><div class=\"placeholder\">Provide beforeSrc and afterSrc images</div></div>`;\n    }\n\n    const isH = this.orientation === 'horizontal';\n    const dividerStyle = isH\n      ? `left: ${this.position}%`\n      : `top: ${this.position}%`;\n    const handleStyle = isH\n      ? `left: ${this.position}%; top: 50%`\n      : `top: ${this.position}%; left: 50%`;\n\n    return html`\n      <div class=\"container ${this._dragging ? 'dragging' : ''}\"\n        @pointerdown=${this._onPointerDown}\n        @pointermove=${this._onPointerMove}\n        @pointerup=${this._onPointerUp}\n        @pointercancel=${this._onPointerUp}>\n\n        <!-- Before image (full) -->\n        <img class=\"image-layer\" src=\"${this.beforeSrc}\" alt=\"${this.beforeLabel}\" draggable=\"false\" />\n\n        <!-- After image (clipped) -->\n        <div class=\"after-layer\" style=\"clip-path: ${this._getClipPath()}\">\n          <img src=\"${this.afterSrc}\" alt=\"${this.afterLabel}\" draggable=\"false\" />\n        </div>\n\n        <!-- Divider line -->\n        <div class=\"divider ${this.orientation}\" style=\"${dividerStyle}\"></div>\n\n        <!-- Drag handle -->\n        <div class=\"handle\" style=\"${handleStyle}\"\n          tabindex=\"0\" role=\"slider\"\n          aria-label=\"Compare position\"\n          aria-valuemin=\"0\" aria-valuemax=\"100\"\n          aria-valuenow=\"${this.position}\"\n          @keydown=${this._handleKeyDown}>\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\">\n            ${isH\n              ? html`<path d=\"M8 6l-4 6 4 6\"/><path d=\"M16 6l4 6-4 6\"/>`\n              : html`<path d=\"M6 8l6-4 6 4\"/><path d=\"M6 16l6 4 6-4\"/>`}\n          </svg>\n        </div>\n\n        <!-- Labels -->\n        <span class=\"label before\">${this.beforeLabel}</span>\n        <span class=\"label after\">${this.afterLabel}</span>\n      </div>\n    `;\n  }\n}\n"],"names":["AiTransformSlider","LitElement","e","rect","pos","delta","html","isH","dividerStyle","handleStyle","hostBlock","reducedMotion","fadeInKeyframes","css","__decorateClass","property","state","query","customElement"],"mappings":"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"}

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

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+interface TranslationAlternative {
+    text: string;
+    confidence: number;
+}
+export declare class AiTranslationPanel extends LitElement {
+    static styles: import('lit').CSSResult[];
+    rounded: 'none' | 'sm' | 'md' | 'lg';
+    sourceText: string;
+    targetText: string;
+    sourceLang: string;
+    targetLang: string;
+    loading: boolean;
+    confidence: number;
+    alternatives: TranslationAlternative[];
+    private _copiedSide;
+    private _languages;
+    private _requestTranslation;
+    private _selectAlt;
+    private _copy;
+    render(): import('lit').TemplateResult<1>;
+}
+export {};
+//# sourceMappingURL=ai-translation-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-translation-panel.d.ts","sourceRoot":"","sources":["../../../src/components/ai-translation-panel/ai-translation-panel.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD,UAAU,sBAAsB;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,qBACa,kBAAmB,SAAQ,UAAU;IAChD,OAAgB,MAAM,4BAkKnB;IAE0B,OAAO,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAC7C,UAAU,EAAE,MAAM,CAAM;IACxB,UAAU,EAAE,MAAM,CAAM;IACxB,UAAU,EAAE,MAAM,CAAQ;IAC1B,UAAU,EAAE,MAAM,CAAQ;IACzB,OAAO,EAAE,OAAO,CAAS;IAC1B,UAAU,EAAE,MAAM,CAAK;IACxB,YAAY,EAAE,sBAAsB,EAAE,CAAM;IAE9D,OAAO,CAAC,WAAW,CAAoC;IAEhE,OAAO,CAAC,UAAU,CAUhB;IAEF,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,UAAU;IAOlB,OAAO,CAAC,KAAK;IAUJ,MAAM;CAoGhB"}