@cognivo/components 0.8.0

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

@@ -0,0 +1,478 @@
+import { css as v, LitElement as f, html as r, nothing as n } from "lit";
+import { property as c, state as l, customElement as h } from "lit/decorators.js";
+import { h as m, r as b, f as p } from "../../chunks/premium.css-9I4kHrsl.js";
+var y = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (t, a, o, d) => {
+  for (var i = d > 1 ? void 0 : d ? x(a, o) : a, g = t.length - 1, u; g >= 0; g--)
+    (u = t[g]) && (i = (d ? u(a, o, i) : u(i)) || i);
+  return d && i && y(a, o, i), i;
+};
+let e = class extends f {
+  constructor() {
+    super(...arguments), this.rounded = "lg", this.mode = "thumbs", this.tags = ["Inaccurate", "Irrelevant", "Too long", "Offensive"], this.messageId = "", this.showComment = !1, this._rating = null, this._selectedTags = /* @__PURE__ */ new Set(), this._comment = "", this._submitted = !1, this._hoverStar = 0, this._emojiLabels = ["Angry", "Confused", "Neutral", "Happy", "Very Happy"];
+  }
+  _renderEmoji(t) {
+    return t === 0 ? r`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M16 16s-1.5-2-4-2-4 2-4 2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>` : t === 1 ? r`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M16 16s-1.5-1-4-1-4 1-4 1"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>` : t === 2 ? r`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="8" y1="15" x2="16" y2="15"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>` : t === 3 ? r`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>` : r`<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="M8 13s1.5 3 4 3 4-3 4-3"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>`;
+  }
+  _handleThumb(t) {
+    this._rating = this._rating === t ? null : t, t === 0 && (this.showComment = !0);
+  }
+  _handleStar(t) {
+    this._rating = t, t <= 2 && (this.showComment = !0);
+  }
+  _handleEmoji(t) {
+    this._rating = t, t <= 1 && (this.showComment = !0);
+  }
+  _toggleTag(t) {
+    this._selectedTags.has(t) ? this._selectedTags.delete(t) : this._selectedTags.add(t), this._selectedTags = new Set(this._selectedTags);
+  }
+  _handleSubmit() {
+    this._rating !== null && (this._submitted = !0, this.dispatchEvent(new CustomEvent("ai-feedback-submit", {
+      bubbles: !0,
+      composed: !0,
+      detail: {
+        rating: this._rating,
+        mode: this.mode,
+        tags: [...this._selectedTags],
+        comment: this._comment || void 0,
+        messageId: this.messageId || void 0
+      }
+    })));
+  }
+  _isNegative() {
+    return this._rating === null ? !1 : this.mode === "thumbs" ? this._rating === 0 : this.mode === "stars" ? this._rating <= 2 : this._rating <= 1;
+  }
+  render() {
+    if (this._submitted)
+      return r`
+        <div class="submitted" aria-live="polite" role="status">
+          <span class="submitted-icon"><svg width="14" height="14" 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>
+          <span class="submitted-text">Thank you for your feedback!</span>
+        </div>
+      `;
+    const t = this._rating !== null;
+    return r`
+      <div class="container" role="group" aria-label="Rate this response">
+        <div class="rating-row">
+          <span class="rating-label">Rate:</span>
+          ${this.mode === "thumbs" ? r`
+            <button class="thumb-btn ${this._rating === 1 ? "selected-up" : ""}" @click=${() => this._handleThumb(1)} aria-label="Good" aria-pressed=${this._rating === 1 ? "true" : "false"} title="Good"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14z"/><path d="M7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3"/></svg></button>
+            <button class="thumb-btn ${this._rating === 0 ? "selected-down" : ""}" @click=${() => this._handleThumb(0)} aria-label="Bad" aria-pressed=${this._rating === 0 ? "true" : "false"} title="Bad"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10 15V19a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10z"/><path d="M17 2h2.67A2.31 2.31 0 0122 4v7a2.31 2.31 0 01-2.33 2H17"/></svg></button>
+          ` : n}
+
+          ${this.mode === "stars" ? r`
+            ${[1, 2, 3, 4, 5].map((a) => r`
+              <button class="star-btn ${(this._rating ?? 0) >= a || this._hoverStar >= a ? "active" : ""}"
+                style="--star-index: ${a - 1}"
+                @click=${() => this._handleStar(a)}
+                @mouseenter=${() => {
+      this._hoverStar = a;
+    }}
+                @mouseleave=${() => {
+      this._hoverStar = 0;
+    }}
+                aria-label="${a} star${a > 1 ? "s" : ""}"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg></button>
+            `)}
+          ` : n}
+
+          ${this.mode === "emoji" ? r`
+            ${this._emojiLabels.map((a, o) => r`
+              <button class="emoji-btn ${this._rating === o ? "selected" : ""} ${t && this._rating !== o ? "dimmed" : ""}"
+                @click=${() => this._handleEmoji(o)}
+                aria-label="Rating ${o + 1} of 5: ${a}" aria-pressed=${this._rating === o ? "true" : "false"}>${this._renderEmoji(o)}</button>
+            `)}
+          ` : n}
+        </div>
+
+        ${this._isNegative() && this.tags.length > 0 ? r`
+          <div class="tags" role="group" aria-label="Select issues">
+            ${this.tags.map((a, o) => r`
+              <button class="tag ${this._selectedTags.has(a) ? "selected" : ""}"
+                style="--chip-index: ${o}"
+                @click=${() => this._toggleTag(a)}
+                aria-pressed=${this._selectedTags.has(a) ? "true" : "false"}>${a}</button>
+            `)}
+          </div>
+        ` : n}
+
+        ${this.showComment || this._isNegative() ? r`
+          <div class="comment-area">
+            <textarea placeholder="What could be improved?" aria-label="Additional feedback"
+              .value=${this._comment}
+              @input=${(a) => {
+      this._comment = a.target.value;
+    }}></textarea>
+          </div>
+        ` : n}
+
+        ${this._rating !== null ? r`
+          <div class="submit-wrap">
+            <button class="submit-btn" @click=${this._handleSubmit}>Submit feedback</button>
+          </div>
+        ` : n}
+      </div>
+    `;
+  }
+};
+e.styles = [m, b, p, v`
+    :host {
+      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      gap: var(--cg-spacing-8);
+    }
+
+    /* ── Keyframes ── */
+
+    @keyframes pop {
+      0% { transform: scale(1); }
+      40% { transform: scale(1.28); }
+      70% { transform: scale(0.92); }
+      100% { transform: scale(1); }
+    }
+
+    @keyframes jelly {
+      0% { transform: scale(1, 1); }
+      25% { transform: scale(0.9, 1.1); }
+      50% { transform: scale(1.1, 0.9); }
+      75% { transform: scale(0.95, 1.05); }
+      100% { transform: scale(1, 1); }
+    }
+
+    @keyframes starCascade {
+      0% { transform: scale(0.5) rotate(-15deg); opacity: 0; }
+      60% { transform: scale(1.2) rotate(5deg); opacity: 1; }
+      100% { transform: scale(1) rotate(0); opacity: 1; }
+    }
+
+    @keyframes chipIn {
+      0% { transform: scale(0.8) translateY(4px); opacity: 0; }
+      60% { transform: scale(1.04) translateY(-1px); }
+      100% { transform: scale(1) translateY(0); opacity: 1; }
+    }
+
+    @keyframes checkDraw {
+      from { stroke-dashoffset: 24; }
+      to { stroke-dashoffset: 0; }
+    }
+
+    @keyframes successReveal {
+      from { opacity: 0; transform: translateX(-8px); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+
+    @keyframes sectionReveal {
+      from { opacity: 0; transform: translateY(6px); max-height: 0; }
+      to { opacity: 1; transform: translateY(0); max-height: 200px; }
+    }
+
+    @keyframes rippleOut {
+      from { transform: scale(0); opacity: 0.4; }
+      to { transform: scale(2.5); opacity: 0; }
+    }
+
+    /* Rating row */
+    .rating-row {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-6);
+      padding-bottom: var(--cg-spacing-8);
+      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);
+    }
+    .rating-label {
+      font-size: var(--cg-font-size-xs);
+      color: var(--cg-color-input-text-placeholder);
+      margin-right: var(--cg-spacing-4);
+    }
+
+    /* ── Thumbs ── */
+    .thumb-btn {
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: none;
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-base);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition:
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .thumb-btn:hover {
+      border-color: var(--cg-color-input-border-hover);
+      background: var(--cg-overlay-dark-subtle);
+      transform: translateY(-1px);
+    }
+    .thumb-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .thumb-btn.selected-up {
+      border-color: var(--cg-color-status-success-text-default);
+      background: var(--cg-color-status-success-background-default);
+      color: var(--cg-color-status-success-text-default);
+      animation: pop 400ms var(--cg-transition-easing-spring);
+      box-shadow: 0 0 12px var(--cg-color-status-success-background-default);
+    }
+    .thumb-btn.selected-down {
+      border-color: var(--cg-color-status-error-text-default);
+      background: var(--cg-color-status-error-background-default);
+      color: var(--cg-color-status-error-text-default);
+      animation: pop 400ms var(--cg-transition-easing-spring);
+      box-shadow: 0 0 12px var(--cg-color-status-error-background-default);
+    }
+    .thumb-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }
+
+    /* ── Stars ── */
+    .star-btn {
+      background: none;
+      border: none;
+      color: var(--cg-color-surface-cards-border);
+      font-size: var(--cg-font-size-xl);
+      cursor: pointer;
+      padding: var(--cg-spacing-2);
+      transition:
+        color var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .star-btn:hover { transform: scale(1.15); }
+    .star-btn.active {
+      color: var(--cg-color-status-warning-text-default);
+      animation: starCascade 350ms var(--cg-transition-easing-spring) both;
+      animation-delay: calc(var(--star-index, 0) * 50ms);
+    }
+    .star-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .star-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }
+
+    /* Star SVG fill transition */
+    .star-btn svg { transition: fill var(--cg-transition-duration-fast) var(--cg-transition-easing-default); }
+    .star-btn.active svg { fill: var(--cg-color-status-warning-text-default); }
+
+    /* ── Emoji ── */
+    .emoji-btn {
+      width: var(--cg-spacing-32);
+      height: var(--cg-spacing-32);
+      border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid transparent;
+      background: none;
+      font-size: var(--cg-font-size-xl);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition:
+        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      opacity: 0.5;
+    }
+    .emoji-btn:hover { opacity: 0.85; background: var(--cg-overlay-dark-subtle); transform: scale(1.1); }
+    .emoji-btn:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .emoji-btn.selected {
+      opacity: 1;
+      border-color: var(--cg-color-surface-base-text);
+      background: var(--cg-overlay-accent-subtle);
+      animation: jelly 450ms var(--cg-transition-easing-spring);
+    }
+    .emoji-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }
+
+    /* Dim unselected when one is chosen */
+    .emoji-btn.dimmed { opacity: 0.3; }
+    .emoji-btn.dimmed:hover { opacity: 0.6; }
+
+    /* ── Tags ── */
+    .tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--cg-spacing-6);
+      animation: sectionReveal var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+    .tag {
+      padding: var(--cg-spacing-4) var(--cg-spacing-12);
+      border-radius: var(--cg-border-radius-100);
+      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);
+      background: none;
+      color: var(--cg-color-input-text-placeholder);
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-semibold);
+      cursor: pointer;
+      transition:
+        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        color var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        background var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),
+        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+      font-family: inherit;
+      animation: chipIn 350ms var(--cg-transition-easing-ease-out) both;
+      animation-delay: calc(var(--chip-index, 0) * 60ms);
+    }
+    .tag:hover {
+      border-color: var(--cg-color-input-border-hover);
+      color: var(--cg-color-surface-base-text);
+      transform: translateY(-1px);
+    }
+    .tag:active { transform: scale(var(--cg-interaction-press-scale)); }
+    .tag.selected {
+      border-color: var(--cg-color-surface-base-text);
+      color: var(--cg-color-surface-base-text);
+      background: var(--cg-overlay-accent-subtle);
+      box-shadow: 0 0 8px var(--cg-overlay-accent-medium);
+      animation: pop 300ms var(--cg-transition-easing-spring);
+    }
+    .tag:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }
+
+    /* ── Comment ── */
+    .comment-area {
+      animation: sectionReveal var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+      overflow: hidden;
+    }
+    textarea {
+      width: 100%;
+      min-height: var(--cg-spacing-64);
+      padding: var(--cg-spacing-8) var(--cg-spacing-12);
+      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);
+      border-radius: var(--cg-border-radius-100);
+      background: var(--cg-color-input-background-default);
+      color: var(--cg-color-surface-base-text);
+      font: inherit;
+      font-size: var(--cg-font-size-xs);
+      resize: vertical;
+      outline: none;
+      transition: border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);
+    }
+    textarea:focus {
+      border-color: var(--cg-color-input-border-focus);
+      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);
+    }
+    textarea::placeholder { color: var(--cg-color-input-text-placeholder); }
+
+    /* ── Submit ── */
+    .submit-wrap {
+      align-self: flex-start;
+      animation: chipIn 300ms var(--cg-transition-easing-ease-out) both;
+    }
+    .submit-btn {
+      position: relative;
+      overflow: hidden;
+      padding: var(--cg-spacing-6) var(--cg-spacing-16);
+      border-radius: var(--cg-border-radius-100);
+      border: none;
+      background: var(--cg-color-action-primary-background-default);
+      color: var(--cg-color-action-primary-text-default);
+      font: inherit;
+      font-size: var(--cg-font-size-xs);
+      font-weight: var(--cg-font-weight-bold);
+      cursor: pointer;
+      transition:
+        background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default),
+        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);
+    }
+    .submit-btn:hover { background: var(--cg-color-action-primary-background-hover); }
+    .submit-btn:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }
+    .submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }
+    .submit-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }
+
+    /* Ripple pseudo-element */
+    .submit-btn::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border-radius: inherit;
+      background: radial-gradient(circle at 50% 50%, var(--cg-overlay-white-strong) 0%, transparent 70%);
+      opacity: 0;
+      transform: scale(0);
+      pointer-events: none;
+    }
+    .submit-btn:active:not(:disabled)::after {
+      animation: rippleOut 500ms ease-out;
+    }
+
+    /* ── Submitted state ── */
+    .submitted {
+      display: flex;
+      align-items: center;
+      gap: var(--cg-spacing-8);
+      font-size: var(--cg-font-size-sm);
+      color: var(--cg-color-status-success-text-default);
+      font-weight: var(--cg-font-weight-medium);
+    }
+    .submitted-icon {
+      font-size: var(--cg-font-size-base);
+      animation: pop 500ms var(--cg-transition-easing-spring) both;
+    }
+    .submitted-icon svg {
+      stroke-dasharray: 24;
+      stroke-dashoffset: 24;
+      animation: checkDraw 400ms ease-out 200ms forwards;
+    }
+    .submitted-text {
+      animation: successReveal 400ms var(--cg-transition-easing-ease-out) 350ms both;
+    }
+
+    /* ── 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-150); }
+    :host([rounded="full"]) .container { border-radius: var(--cg-border-radius-full); }
+
+    /* ── Reduced motion ── */
+    @media (prefers-reduced-motion: reduce) {
+      .thumb-btn.selected-up,
+      .thumb-btn.selected-down,
+      .star-btn.active,
+      .emoji-btn.selected,
+      .tag.selected,
+      .tag,
+      .submitted-icon,
+      .submitted-text,
+      .tags,
+      .comment-area,
+      .submit-wrap { animation: none; }
+      .submitted-icon svg { stroke-dashoffset: 0; animation: none; }
+    }
+  `];
+s([
+  c({ reflect: !0 })
+], e.prototype, "rounded", 2);
+s([
+  c({ type: String })
+], e.prototype, "mode", 2);
+s([
+  c({ type: Array })
+], e.prototype, "tags", 2);
+s([
+  c({ type: String })
+], e.prototype, "messageId", 2);
+s([
+  c({ type: Boolean })
+], e.prototype, "showComment", 2);
+s([
+  l()
+], e.prototype, "_rating", 2);
+s([
+  l()
+], e.prototype, "_selectedTags", 2);
+s([
+  l()
+], e.prototype, "_comment", 2);
+s([
+  l()
+], e.prototype, "_submitted", 2);
+s([
+  l()
+], e.prototype, "_hoverStar", 2);
+e = s([
+  h("ai-feedback")
+], e);
+export {
+  e as AiFeedback
+};
+//# sourceMappingURL=ai-feedback.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ai-feedback.js","sources":["../../../src/components/ai-feedback/ai-feedback.ts"],"sourcesContent":["/**\n * @element ai-feedback\n * User feedback widget with thumbs/stars/emoji modes, selectable issue tags, and optional comment field.\n *\n * @example\n * ```html\n * <ai-feedback\n *   mode=\"thumbs\"\n *   messageId=\"msg-42\"\n *   .tags=${['Inaccurate','Too long','Offensive']}\n *   showComment\n * ></ai-feedback>\n * ```\n *\n * @fires {CustomEvent<{rating, tags, comment, messageId}>} ai-feedback-submit - Feedback submitted\n *\n * @cssprop --cg-color-action-primary-background-default - Selected rating and submit button accent\n */\nimport { LitElement, html, css, nothing } from 'lit';\nimport { property, state, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\n\n@customElement('ai-feedback')\nexport class AiFeedback extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n\n    .container {\n      display: flex;\n      flex-direction: column;\n      gap: var(--cg-spacing-8);\n    }\n\n    /* ── Keyframes ── */\n\n    @keyframes pop {\n      0% { transform: scale(1); }\n      40% { transform: scale(1.28); }\n      70% { transform: scale(0.92); }\n      100% { transform: scale(1); }\n    }\n\n    @keyframes jelly {\n      0% { transform: scale(1, 1); }\n      25% { transform: scale(0.9, 1.1); }\n      50% { transform: scale(1.1, 0.9); }\n      75% { transform: scale(0.95, 1.05); }\n      100% { transform: scale(1, 1); }\n    }\n\n    @keyframes starCascade {\n      0% { transform: scale(0.5) rotate(-15deg); opacity: 0; }\n      60% { transform: scale(1.2) rotate(5deg); opacity: 1; }\n      100% { transform: scale(1) rotate(0); opacity: 1; }\n    }\n\n    @keyframes chipIn {\n      0% { transform: scale(0.8) translateY(4px); opacity: 0; }\n      60% { transform: scale(1.04) translateY(-1px); }\n      100% { transform: scale(1) translateY(0); opacity: 1; }\n    }\n\n    @keyframes checkDraw {\n      from { stroke-dashoffset: 24; }\n      to { stroke-dashoffset: 0; }\n    }\n\n    @keyframes successReveal {\n      from { opacity: 0; transform: translateX(-8px); }\n      to { opacity: 1; transform: translateX(0); }\n    }\n\n    @keyframes sectionReveal {\n      from { opacity: 0; transform: translateY(6px); max-height: 0; }\n      to { opacity: 1; transform: translateY(0); max-height: 200px; }\n    }\n\n    @keyframes rippleOut {\n      from { transform: scale(0); opacity: 0.4; }\n      to { transform: scale(2.5); opacity: 0; }\n    }\n\n    /* Rating row */\n    .rating-row {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-6);\n      padding-bottom: var(--cg-spacing-8);\n      border-bottom: var(--cg-border-width-50) solid var(--cg-color-surface-cards-divider);\n    }\n    .rating-label {\n      font-size: var(--cg-font-size-xs);\n      color: var(--cg-color-input-text-placeholder);\n      margin-right: var(--cg-spacing-4);\n    }\n\n    /* ── Thumbs ── */\n    .thumb-btn {\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: none;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-base);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        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    .thumb-btn:hover {\n      border-color: var(--cg-color-input-border-hover);\n      background: var(--cg-overlay-dark-subtle);\n      transform: translateY(-1px);\n    }\n    .thumb-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .thumb-btn.selected-up {\n      border-color: var(--cg-color-status-success-text-default);\n      background: var(--cg-color-status-success-background-default);\n      color: var(--cg-color-status-success-text-default);\n      animation: pop 400ms var(--cg-transition-easing-spring);\n      box-shadow: 0 0 12px var(--cg-color-status-success-background-default);\n    }\n    .thumb-btn.selected-down {\n      border-color: var(--cg-color-status-error-text-default);\n      background: var(--cg-color-status-error-background-default);\n      color: var(--cg-color-status-error-text-default);\n      animation: pop 400ms var(--cg-transition-easing-spring);\n      box-shadow: 0 0 12px var(--cg-color-status-error-background-default);\n    }\n    .thumb-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }\n\n    /* ── Stars ── */\n    .star-btn {\n      background: none;\n      border: none;\n      color: var(--cg-color-surface-cards-border);\n      font-size: var(--cg-font-size-xl);\n      cursor: pointer;\n      padding: var(--cg-spacing-2);\n      transition:\n        color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .star-btn:hover { transform: scale(1.15); }\n    .star-btn.active {\n      color: var(--cg-color-status-warning-text-default);\n      animation: starCascade 350ms var(--cg-transition-easing-spring) both;\n      animation-delay: calc(var(--star-index, 0) * 50ms);\n    }\n    .star-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .star-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }\n\n    /* Star SVG fill transition */\n    .star-btn svg { transition: fill var(--cg-transition-duration-fast) var(--cg-transition-easing-default); }\n    .star-btn.active svg { fill: var(--cg-color-status-warning-text-default); }\n\n    /* ── Emoji ── */\n    .emoji-btn {\n      width: var(--cg-spacing-32);\n      height: var(--cg-spacing-32);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid transparent;\n      background: none;\n      font-size: var(--cg-font-size-xl);\n      cursor: pointer;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      transition:\n        opacity var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        border-color var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      opacity: 0.5;\n    }\n    .emoji-btn:hover { opacity: 0.85; background: var(--cg-overlay-dark-subtle); transform: scale(1.1); }\n    .emoji-btn:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .emoji-btn.selected {\n      opacity: 1;\n      border-color: var(--cg-color-surface-base-text);\n      background: var(--cg-overlay-accent-subtle);\n      animation: jelly 450ms var(--cg-transition-easing-spring);\n    }\n    .emoji-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }\n\n    /* Dim unselected when one is chosen */\n    .emoji-btn.dimmed { opacity: 0.3; }\n    .emoji-btn.dimmed:hover { opacity: 0.6; }\n\n    /* ── Tags ── */\n    .tags {\n      display: flex;\n      flex-wrap: wrap;\n      gap: var(--cg-spacing-6);\n      animation: sectionReveal var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    .tag {\n      padding: var(--cg-spacing-4) var(--cg-spacing-12);\n      border-radius: var(--cg-border-radius-100);\n      border: var(--cg-border-width-50) solid var(--cg-color-surface-cards-border);\n      background: none;\n      color: var(--cg-color-input-text-placeholder);\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-semibold);\n      cursor: pointer;\n      transition:\n        border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        background var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default),\n        box-shadow var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n      font-family: inherit;\n      animation: chipIn 350ms var(--cg-transition-easing-ease-out) both;\n      animation-delay: calc(var(--chip-index, 0) * 60ms);\n    }\n    .tag:hover {\n      border-color: var(--cg-color-input-border-hover);\n      color: var(--cg-color-surface-base-text);\n      transform: translateY(-1px);\n    }\n    .tag:active { transform: scale(var(--cg-interaction-press-scale)); }\n    .tag.selected {\n      border-color: var(--cg-color-surface-base-text);\n      color: var(--cg-color-surface-base-text);\n      background: var(--cg-overlay-accent-subtle);\n      box-shadow: 0 0 8px var(--cg-overlay-accent-medium);\n      animation: pop 300ms var(--cg-transition-easing-spring);\n    }\n    .tag:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }\n\n    /* ── Comment ── */\n    .comment-area {\n      animation: sectionReveal var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n      overflow: hidden;\n    }\n    textarea {\n      width: 100%;\n      min-height: var(--cg-spacing-64);\n      padding: var(--cg-spacing-8) var(--cg-spacing-12);\n      border: var(--cg-border-width-50) solid var(--cg-color-input-border-default);\n      border-radius: var(--cg-border-radius-100);\n      background: var(--cg-color-input-background-default);\n      color: var(--cg-color-surface-base-text);\n      font: inherit;\n      font-size: var(--cg-font-size-xs);\n      resize: vertical;\n      outline: none;\n      transition: border-color var(--cg-transition-duration-default) var(--cg-transition-easing-default);\n    }\n    textarea:focus {\n      border-color: var(--cg-color-input-border-focus);\n      box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong);\n    }\n    textarea::placeholder { color: var(--cg-color-input-text-placeholder); }\n\n    /* ── Submit ── */\n    .submit-wrap {\n      align-self: flex-start;\n      animation: chipIn 300ms var(--cg-transition-easing-ease-out) both;\n    }\n    .submit-btn {\n      position: relative;\n      overflow: hidden;\n      padding: var(--cg-spacing-6) var(--cg-spacing-16);\n      border-radius: var(--cg-border-radius-100);\n      border: none;\n      background: var(--cg-color-action-primary-background-default);\n      color: var(--cg-color-action-primary-text-default);\n      font: inherit;\n      font-size: var(--cg-font-size-xs);\n      font-weight: var(--cg-font-weight-bold);\n      cursor: pointer;\n      transition:\n        background-color var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        opacity var(--cg-transition-duration-default) var(--cg-transition-easing-default),\n        transform var(--cg-transition-duration-fast) var(--cg-transition-easing-default);\n    }\n    .submit-btn:hover { background: var(--cg-color-action-primary-background-hover); }\n    .submit-btn:active:not(:disabled) { transform: scale(var(--cg-interaction-press-scale)); }\n    .submit-btn:disabled { opacity: 0.4; cursor: not-allowed; }\n    .submit-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cg-overlay-accent-strong); outline-offset: var(--cg-outline-offset-default); }\n\n    /* Ripple pseudo-element */\n    .submit-btn::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      background: radial-gradient(circle at 50% 50%, var(--cg-overlay-white-strong) 0%, transparent 70%);\n      opacity: 0;\n      transform: scale(0);\n      pointer-events: none;\n    }\n    .submit-btn:active:not(:disabled)::after {\n      animation: rippleOut 500ms ease-out;\n    }\n\n    /* ── Submitted state ── */\n    .submitted {\n      display: flex;\n      align-items: center;\n      gap: var(--cg-spacing-8);\n      font-size: var(--cg-font-size-sm);\n      color: var(--cg-color-status-success-text-default);\n      font-weight: var(--cg-font-weight-medium);\n    }\n    .submitted-icon {\n      font-size: var(--cg-font-size-base);\n      animation: pop 500ms var(--cg-transition-easing-spring) both;\n    }\n    .submitted-icon svg {\n      stroke-dasharray: 24;\n      stroke-dashoffset: 24;\n      animation: checkDraw 400ms ease-out 200ms forwards;\n    }\n    .submitted-text {\n      animation: successReveal 400ms var(--cg-transition-easing-ease-out) 350ms both;\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-150); }\n    :host([rounded=\"full\"]) .container { border-radius: var(--cg-border-radius-full); }\n\n    /* ── Reduced motion ── */\n    @media (prefers-reduced-motion: reduce) {\n      .thumb-btn.selected-up,\n      .thumb-btn.selected-down,\n      .star-btn.active,\n      .emoji-btn.selected,\n      .tag.selected,\n      .tag,\n      .submitted-icon,\n      .submitted-text,\n      .tags,\n      .comment-area,\n      .submit-wrap { animation: none; }\n      .submitted-icon svg { stroke-dashoffset: 0; animation: none; }\n    }\n  `];\n  @property({ reflect: true }) rounded: 'none' | 'sm' | 'md' | 'lg' | 'full' = 'lg';\n  /** Feedback mode */\n  @property({ type: String }) mode: 'thumbs' | 'stars' | 'emoji' = 'thumbs';\n\n  /** Issue tags for negative feedback */\n  @property({ type: Array }) tags: string[] = ['Inaccurate', 'Irrelevant', 'Too long', 'Offensive'];\n\n  /** Associated message ID */\n  @property({ type: String }) messageId: string = '';\n\n  /** Show comment textarea */\n  @property({ type: Boolean }) showComment: boolean = false;\n\n  @state() private _rating: number | null = null;\n  @state() private _selectedTags: Set<string> = new Set();\n  @state() private _comment: string = '';\n  @state() private _submitted: boolean = false;\n  @state() private _hoverStar: number = 0;\n\n  private _emojiLabels = ['Angry', 'Confused', 'Neutral', 'Happy', 'Very Happy'];\n  private _renderEmoji(index: number): unknown {\n    if (index === 0) return html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M16 16s-1.5-2-4-2-4 2-4 2\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/></svg>`;\n    if (index === 1) return html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M16 16s-1.5-1-4-1-4 1-4 1\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/></svg>`;\n    if (index === 2) return html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"8\" y1=\"15\" x2=\"16\" y2=\"15\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/></svg>`;\n    if (index === 3) return html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M8 14s1.5 2 4 2 4-2 4-2\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/></svg>`;\n    return html`<svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"/><path d=\"M8 13s1.5 3 4 3 4-3 4-3\"/><line x1=\"9\" y1=\"9\" x2=\"9.01\" y2=\"9\"/><line x1=\"15\" y1=\"9\" x2=\"15.01\" y2=\"9\"/></svg>`;\n  }\n\n  private _handleThumb(value: number) {\n    this._rating = this._rating === value ? null : value;\n    if (value === 0) this.showComment = true;\n  }\n\n  private _handleStar(value: number) {\n    this._rating = value;\n    if (value <= 2) this.showComment = true;\n  }\n\n  private _handleEmoji(index: number) {\n    this._rating = index;\n    if (index <= 1) this.showComment = true;\n  }\n\n  private _toggleTag(tag: string) {\n    if (this._selectedTags.has(tag)) this._selectedTags.delete(tag);\n    else this._selectedTags.add(tag);\n    this._selectedTags = new Set(this._selectedTags);\n  }\n\n  private _handleSubmit() {\n    if (this._rating === null) return;\n    this._submitted = true;\n    this.dispatchEvent(new CustomEvent('ai-feedback-submit', {\n      bubbles: true, composed: true,\n      detail: {\n        rating: this._rating,\n        mode: this.mode,\n        tags: [...this._selectedTags],\n        comment: this._comment || undefined,\n        messageId: this.messageId || undefined,\n      },\n    }));\n  }\n\n  private _isNegative(): boolean {\n    if (this._rating === null) return false;\n    if (this.mode === 'thumbs') return this._rating === 0;\n    if (this.mode === 'stars') return this._rating <= 2;\n    return this._rating <= 1;\n  }\n\n  override render() {\n    if (this._submitted) {\n      return html`\n        <div class=\"submitted\" aria-live=\"polite\" role=\"status\">\n          <span class=\"submitted-icon\"><svg width=\"14\" height=\"14\" 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          <span class=\"submitted-text\">Thank you for your feedback!</span>\n        </div>\n      `;\n    }\n\n    const hasRating = this._rating !== null;\n\n    return html`\n      <div class=\"container\" role=\"group\" aria-label=\"Rate this response\">\n        <div class=\"rating-row\">\n          <span class=\"rating-label\">Rate:</span>\n          ${this.mode === 'thumbs' ? html`\n            <button class=\"thumb-btn ${this._rating === 1 ? 'selected-up' : ''}\" @click=${() => this._handleThumb(1)} aria-label=\"Good\" aria-pressed=${this._rating === 1 ? 'true' : 'false'} title=\"Good\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M14 9V5a3 3 0 00-3-3l-4 9v11h11.28a2 2 0 002-1.7l1.38-9a2 2 0 00-2-2.3H14z\"/><path d=\"M7 22H4a2 2 0 01-2-2v-7a2 2 0 012-2h3\"/></svg></button>\n            <button class=\"thumb-btn ${this._rating === 0 ? 'selected-down' : ''}\" @click=${() => this._handleThumb(0)} aria-label=\"Bad\" aria-pressed=${this._rating === 0 ? 'true' : 'false'} title=\"Bad\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M10 15V19a3 3 0 003 3l4-9V2H5.72a2 2 0 00-2 1.7l-1.38 9a2 2 0 002 2.3H10z\"/><path d=\"M17 2h2.67A2.31 2.31 0 0122 4v7a2.31 2.31 0 01-2.33 2H17\"/></svg></button>\n          ` : nothing}\n\n          ${this.mode === 'stars' ? html`\n            ${[1, 2, 3, 4, 5].map(n => html`\n              <button class=\"star-btn ${(this._rating ?? 0) >= n || this._hoverStar >= n ? 'active' : ''}\"\n                style=\"--star-index: ${n - 1}\"\n                @click=${() => this._handleStar(n)}\n                @mouseenter=${() => { this._hoverStar = n; }}\n                @mouseleave=${() => { this._hoverStar = 0; }}\n                aria-label=\"${n} star${n > 1 ? 's' : ''}\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"/></svg></button>\n            `)}\n          ` : nothing}\n\n          ${this.mode === 'emoji' ? html`\n            ${this._emojiLabels.map((label, i) => html`\n              <button class=\"emoji-btn ${this._rating === i ? 'selected' : ''} ${hasRating && this._rating !== i ? 'dimmed' : ''}\"\n                @click=${() => this._handleEmoji(i)}\n                aria-label=\"Rating ${i + 1} of 5: ${label}\" aria-pressed=${this._rating === i ? 'true' : 'false'}>${this._renderEmoji(i)}</button>\n            `)}\n          ` : nothing}\n        </div>\n\n        ${this._isNegative() && this.tags.length > 0 ? html`\n          <div class=\"tags\" role=\"group\" aria-label=\"Select issues\">\n            ${this.tags.map((tag, i) => html`\n              <button class=\"tag ${this._selectedTags.has(tag) ? 'selected' : ''}\"\n                style=\"--chip-index: ${i}\"\n                @click=${() => this._toggleTag(tag)}\n                aria-pressed=${this._selectedTags.has(tag) ? 'true' : 'false'}>${tag}</button>\n            `)}\n          </div>\n        ` : nothing}\n\n        ${(this.showComment || this._isNegative()) ? html`\n          <div class=\"comment-area\">\n            <textarea placeholder=\"What could be improved?\" aria-label=\"Additional feedback\"\n              .value=${this._comment}\n              @input=${(e: Event) => { this._comment = (e.target as HTMLTextAreaElement).value; }}></textarea>\n          </div>\n        ` : nothing}\n\n        ${this._rating !== null ? html`\n          <div class=\"submit-wrap\">\n            <button class=\"submit-btn\" @click=${this._handleSubmit}>Submit feedback</button>\n          </div>\n        ` : nothing}\n      </div>\n    `;\n  }\n}\n"],"names":["AiFeedback","LitElement","index","html","value","tag","hasRating","nothing","n","label","i","e","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","state","customElement"],"mappings":"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"}

package/dist/components/ai-file-upload/ai-file-upload.d.ts

@@ -0,0 +1,18 @@
+import { LitElement } from 'lit';
+export declare class AiFileUpload extends LitElement {
+    static styles: import('lit').CSSResult[];
+    accept: string;
+    maxSize: number;
+    multiple: boolean;
+    label: string;
+    disabled: boolean;
+    private _onChange;
+    private _onReject;
+    render(): import('lit').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'ai-file-upload': AiFileUpload;
+    }
+}
+//# sourceMappingURL=ai-file-upload.d.ts.map

package/dist/components/ai-file-upload/ai-file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/ai-file-upload/ai-file-upload.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAG5C,OAAO,mCAAmC,CAAC;AAE3C,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAMnB;IAEyB,MAAM,SAAM;IACW,OAAO,SAAY;IACzC,QAAQ,UAAS;IAClB,KAAK,SAA6B;IAClB,QAAQ,UAAS;IAE7D,OAAO,CAAC,SAAS,CAOf;IAEF,OAAO,CAAC,SAAS,CAOf;IAEO,MAAM;CAahB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,YAAY,CAAC;KAChC;CACF"}

package/dist/components/ai-file-upload/ai-file-upload.js

@@ -0,0 +1,70 @@
+import { css as c, LitElement as d, html as h } from "lit";
+import { property as a, customElement as u } from "lit/decorators.js";
+import { h as m, r as f, f as b } from "../../chunks/premium.css-9I4kHrsl.js";
+import "../cg-file-input/cg-file-input.js";
+var y = Object.defineProperty, g = Object.getOwnPropertyDescriptor, l = (s, e, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? g(e, o) : e, n = s.length - 1, p; n >= 0; n--)
+    (p = s[n]) && (i = (r ? p(e, o, i) : p(i)) || i);
+  return r && i && y(e, o, i), i;
+};
+let t = class extends d {
+  constructor() {
+    super(...arguments), this.accept = "", this.maxSize = 10485760, this.multiple = !1, this.label = "Drop training data here", this.disabled = !1, this._onChange = (s) => {
+      const e = s.detail;
+      this.dispatchEvent(new CustomEvent("ai-file-select", {
+        detail: { files: e.files },
+        bubbles: !0,
+        composed: !0
+      }));
+    }, this._onReject = (s) => {
+      const e = s.detail;
+      this.dispatchEvent(new CustomEvent("ai-file-error", {
+        detail: { error: e.reason, files: e.files },
+        bubbles: !0,
+        composed: !0
+      }));
+    };
+  }
+  render() {
+    return h`
+      <cg-file-input
+        accept=${this.accept}
+        ?multiple=${this.multiple}
+        label=${this.label}
+        max-size=${this.maxSize}
+        ?disabled=${this.disabled}
+        @cg-file-change=${this._onChange}
+        @cg-file-reject=${this._onReject}
+      ></cg-file-input>
+    `;
+  }
+};
+t.styles = [m, f, b, c`
+    :host {
+      display: block;
+      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;
+    }
+    :host([hidden]) { display: none; }
+  `];
+l([
+  a({ type: String })
+], t.prototype, "accept", 2);
+l([
+  a({ type: Number, attribute: "max-size" })
+], t.prototype, "maxSize", 2);
+l([
+  a({ type: Boolean })
+], t.prototype, "multiple", 2);
+l([
+  a({ type: String })
+], t.prototype, "label", 2);
+l([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+t = l([
+  u("ai-file-upload")
+], t);
+export {
+  t as AiFileUpload
+};
+//# sourceMappingURL=ai-file-upload.js.map

package/dist/components/ai-file-upload/ai-file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ai-file-upload.js","sources":["../../../src/components/ai-file-upload/ai-file-upload.ts"],"sourcesContent":["/**\n * @element ai-file-upload\n * AI-themed thin wrapper around `<cg-file-input>`. Delegates drag-drop, validation,\n * and file list rendering to the foundation component; adds AI-flavored defaults\n * and re-dispatches events under the `ai-file-*` namespace for backwards compat.\n *\n * @example\n * ```html\n * <ai-file-upload\n *   accept=\".pdf,.csv\"\n *   max-size=\"5242880\"\n *   multiple\n *   label=\"Drop training data here\"\n * ></ai-file-upload>\n * ```\n *\n * @fires {CustomEvent<{files: File[]}>} ai-file-select - Files selected or dropped\n * @fires {CustomEvent<{error: string, files: File[]}>} ai-file-error - File validation failed\n */\nimport { LitElement, html, css } from 'lit';\nimport { property, customElement } from 'lit/decorators.js';\nimport { hostBlock, reducedMotion, fadeSlideInKeyframes } from '../../styles/index.js';\nimport '../cg-file-input/cg-file-input.js';\n\n@customElement('ai-file-upload')\nexport class AiFileUpload extends LitElement {\n  static override styles = [hostBlock, reducedMotion, fadeSlideInKeyframes, css`\n    :host {\n      display: block;\n      animation: fadeSlideIn var(--cg-transition-duration-default) var(--cg-transition-easing-ease-out) both;\n    }\n    :host([hidden]) { display: none; }\n  `];\n\n  @property({ type: String }) accept = '';\n  @property({ type: Number, attribute: 'max-size' }) maxSize = 10485760; // 10MB\n  @property({ type: Boolean }) multiple = false;\n  @property({ type: String }) label = 'Drop training data here';\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  private _onChange = (e: Event) => {\n    const detail = (e as CustomEvent<{ files: File[] }>).detail;\n    this.dispatchEvent(new CustomEvent('ai-file-select', {\n      detail: { files: detail.files },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  private _onReject = (e: Event) => {\n    const detail = (e as CustomEvent<{ files: File[]; reason: string }>).detail;\n    this.dispatchEvent(new CustomEvent('ai-file-error', {\n      detail: { error: detail.reason, files: detail.files },\n      bubbles: true,\n      composed: true,\n    }));\n  };\n\n  override render() {\n    return html`\n      <cg-file-input\n        accept=${this.accept}\n        ?multiple=${this.multiple}\n        label=${this.label}\n        max-size=${this.maxSize}\n        ?disabled=${this.disabled}\n        @cg-file-change=${this._onChange}\n        @cg-file-reject=${this._onReject}\n      ></cg-file-input>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'ai-file-upload': AiFileUpload;\n  }\n}\n"],"names":["AiFileUpload","LitElement","e","detail","html","hostBlock","reducedMotion","fadeSlideInKeyframes","css","__decorateClass","property","customElement"],"mappings":";;;;;;;;;AAyBO,IAAMA,IAAN,cAA2BC,EAAW;AAAA,EAAtC,cAAA;AAAA,UAAA,GAAA,SAAA,GASuB,KAAA,SAAS,IACc,KAAA,UAAU,UAChC,KAAA,WAAW,IACZ,KAAA,QAAQ,2BACQ,KAAA,WAAW,IAEvD,KAAQ,YAAY,CAACC,MAAa;AAChC,YAAMC,IAAUD,EAAqC;AACrD,WAAK,cAAc,IAAI,YAAY,kBAAkB;AAAA,QACnD,QAAQ,EAAE,OAAOC,EAAO,MAAA;AAAA,QACxB,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX,CAAC;AAAA,IACJ,GAEA,KAAQ,YAAY,CAACD,MAAa;AAChC,YAAMC,IAAUD,EAAqD;AACrE,WAAK,cAAc,IAAI,YAAY,iBAAiB;AAAA,QAClD,QAAQ,EAAE,OAAOC,EAAO,QAAQ,OAAOA,EAAO,MAAA;AAAA,QAC9C,SAAS;AAAA,QACT,UAAU;AAAA,MAAA,CACX,CAAC;AAAA,IACJ;AAAA,EAAA;AAAA,EAES,SAAS;AAChB,WAAOC;AAAA;AAAA,iBAEM,KAAK,MAAM;AAAA,oBACR,KAAK,QAAQ;AAAA,gBACjB,KAAK,KAAK;AAAA,mBACP,KAAK,OAAO;AAAA,oBACX,KAAK,QAAQ;AAAA,0BACP,KAAK,SAAS;AAAA,0BACd,KAAK,SAAS;AAAA;AAAA;AAAA,EAGtC;AACF;AA9CaJ,EACK,SAAS,CAACK,GAAWC,GAAeC,GAAsBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAMzE;AAE2BC,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GATfV,EASiB,WAAA,UAAA,CAAA;AACuBS,EAAA;AAAA,EAAlDC,EAAS,EAAE,MAAM,QAAQ,WAAW,YAAY;AAAA,GAVtCV,EAUwC,WAAA,WAAA,CAAA;AACtBS,EAAA;AAAA,EAA5BC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAXhBV,EAWkB,WAAA,YAAA,CAAA;AACDS,EAAA;AAAA,EAA3BC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAZfV,EAYiB,WAAA,SAAA,CAAA;AACgBS,EAAA;AAAA,EAA3CC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAb/BV,EAaiC,WAAA,YAAA,CAAA;AAbjCA,IAANS,EAAA;AAAA,EADNE,EAAc,gBAAgB;AAAA,GAClBX,CAAA;"}