@luzmo/lucero 1.0.1-alpha.40 → 1.0.1-alpha.43

package/components/prompt-box/index.js

@@ -0,0 +1,832 @@
+/*! * Lucero - The design system for Luzmo.
+ * 
+ * Copyright © 2025 Luzmo
+ * All rights reserved.
+ * Lucero (“Luzmo Design System”) must be used according to the Luzmo Terms of Service.
+ * This license allows users with a current active Luzmo account to use Lucero.
+ * This license terminates automatically if a user no longer has an active Luzmo account.
+ * Please view the Luzmo Terms of Service at: https://www.luzmo.com/information-pages/terms-of-use.
+ * 
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ * */
+import { luzmoClear as $, luzmoCheck as C, luzmoMicrophone as k, luzmoArrowUp as S } from "@luzmo/icons";
+import { unsafeCSS as B, html as s, nothing as f } from "lit";
+import { property as m, state as h, query as w } from "lit/decorators.js";
+import { repeat as E } from "lit/directives/repeat.js";
+import { a as F } from "../base-CdYjmV_8.js";
+import { S as L } from "../sized-mixin-cJbo3PKR.js";
+import { V as _ } from "../voice-recorder-BRq_gEkz.js";
+import "../action-button/index.js";
+import "../button/index.js";
+import "../icon/index.js";
+import "../tags/index.js";
+import "../text-field/index.js";
+const A = () => {
+  if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
+    const b = document.createElement("style");
+    b.setAttribute("data-luzmo-vars", ""), b.textContent = 'html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: rgb(140, 140, 140);--luzmo-border-color-full-down: rgb(110, 110, 110);--luzmo-border-color-full-focus: rgb(140, 140, 140);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: #f0f0fc;--luzmo-background-color-down: #f1f1ff;--luzmo-background-color-focus: #f0f0fc;--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: rgb(225, 225, 225);--luzmo-background-color-highlight-down: rgb(215, 215, 215);--luzmo-background-color-highlight-focus: rgb(225, 225, 225);--luzmo-border-width: 1px;--luzmo-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-disabled: var(--luzmo-disabled-color);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: #333;--luzmo-font-color-down: #111;--luzmo-font-color-focus: #333;--luzmo-primary: #4434ff;--luzmo-primary-hover: #4234e4;--luzmo-primary-down: #392cc7;--luzmo-primary-focus: #4234e4;--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: #e309e3;--luzmo-secondary-down: #c711c7;--luzmo-secondary-focus: #e309e3;--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: #b3241f;--luzmo-negative-color-down: #9f231f;--luzmo-negative-color-focus: #b3241f;--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: rgb(17, 128, 86);--luzmo-positive-color-down: rgb(16, 105, 71);--luzmo-positive-color-focus: rgb(17, 128, 86);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: rgb(70, 70, 70);--luzmo-selected-color-down: rgb(40, 40, 40);--luzmo-selected-color-focus: rgb(70, 70, 70);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: rgb(0, 0, 0);--luzmo-selected-color-hard-down: rgb(0, 0, 0);--luzmo-selected-color-hard-focus: rgb(0, 0, 0);--luzmo-informative-color: #1a77e9;--luzmo-informative-color-rgb: 26, 119, 233;--luzmo-disabled-color: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 10px;--luzmo-icon-size-xs: 12px;--luzmo-icon-size-s: 14px;--luzmo-icon-size-m: 16px;--luzmo-icon-size-l: 18px;--luzmo-icon-size-xl: 20px;--luzmo-icon-size-xxl: 32px}', document.head.appendChild(b);
+  }
+};
+A();
+const I = ":host{display:flex;flex-direction:column;font-family:var(--luzmo-prompt-box-font-family, var(--prompt-box-font-family));font-size:var(--luzmo-prompt-box-font-size, var(--prompt-box-font-size));line-height:var(--luzmo-prompt-box-line-height, var(--prompt-box-line-height));color:var(--highcontrast-prompt-box-text-color, var(--luzmo-prompt-box-text-color, var(--prompt-box-text-color)));width:100%}:host([disabled]){opacity:var(--luzmo-prompt-box-disabled-opacity, var(--prompt-box-disabled-opacity));pointer-events:none}.container{display:flex;flex-direction:column;gap:var(--luzmo-prompt-box-gap, var(--prompt-box-gap));padding:var(--luzmo-prompt-box-vertical-padding, var(--prompt-box-vertical-padding)) var(--luzmo-prompt-box-horizontal-padding, var(--prompt-box-horizontal-padding));background-color:var(--highcontrast-prompt-box-background-color, var(--luzmo-prompt-box-background-color, var(--prompt-box-background-color)));border-radius:var(--luzmo-prompt-box-border-radius, var(--prompt-box-border-radius));border-width:var(--luzmo-prompt-box-border-width, var(--prompt-box-border-width));border-style:solid;border-color:var(--highcontrast-prompt-box-border-color, var(--luzmo-prompt-box-border-color, var(--prompt-box-border-color)));box-shadow:var(--luzmo-prompt-box-shadow, var(--prompt-box-shadow));transition:border-color var(--luzmo-prompt-box-animation-duration, var(--prompt-box-animation-duration)) ease-in-out,box-shadow var(--luzmo-prompt-box-animation-duration, var(--prompt-box-animation-duration)) ease-in-out}:host(:focus-visible) .container{border-color:var(--luzmo-prompt-box-border-color-focus, var(--prompt-box-border-color-focus));box-shadow:var(--luzmo-prompt-box-shadow-focus, var(--prompt-box-shadow-focus))}:host(.focus-visible) .container{border-color:var(--luzmo-prompt-box-border-color-focus, var(--prompt-box-border-color-focus));box-shadow:var(--luzmo-prompt-box-shadow-focus, var(--prompt-box-shadow-focus))}:host(:focus){outline:none}.top-actions{display:flex;align-items:center;gap:var(--luzmo-prompt-box-top-actions-gap, var(--prompt-box-top-actions-gap));flex-wrap:wrap;opacity:var(--luzmo-prompt-box-actions-opacity, var(--prompt-box-actions-opacity, 1));transition:opacity var(--luzmo-prompt-box-animation-duration, var(--prompt-box-animation-duration)) ease-in-out}.top-actions.empty{display:none}.hidden-file-input{position:absolute;width:0;height:0;opacity:0;overflow:hidden;pointer-events:none}.attachments{display:flex;flex-direction:column;gap:var(--luzmo-prompt-box-attachments-gap, var(--prompt-box-attachments-gap, 8px))}.image-attachments{display:flex;flex-wrap:wrap;gap:var(--luzmo-prompt-box-image-attachments-gap, var(--prompt-box-image-attachments-gap, 8px))}.image-attachment{position:relative;display:inline-flex;width:var(--luzmo-prompt-box-image-preview-size, var(--prompt-box-image-preview-size, 80px));height:var(--luzmo-prompt-box-image-preview-size, var(--prompt-box-image-preview-size, 80px));border-radius:var(--luzmo-prompt-box-image-border-radius, var(--prompt-box-image-border-radius, 8px));overflow:hidden;background-color:var(--luzmo-prompt-box-image-background, var(--prompt-box-image-background, rgba(0, 0, 0, .05)))}.image-preview{width:100%;height:100%;object-fit:cover}.attachment-remove{position:absolute;top:4px;right:4px;width:var(--luzmo-prompt-box-remove-button-size, var(--prompt-box-remove-button-size, 24px));height:var(--luzmo-prompt-box-remove-button-size, var(--prompt-box-remove-button-size, 24px));background-color:var(--luzmo-prompt-box-remove-button-background, var(--prompt-box-remove-button-background, rgba(0, 0, 0, .5)));border-radius:50%;--luzmo-clear-button-icon-color: var( --luzmo-prompt-box-remove-button-icon-color, var(--prompt-box-remove-button-icon-color, #fff) )}.attachment-remove:hover{background-color:var(--luzmo-prompt-box-remove-button-background-hover, var(--prompt-box-remove-button-background-hover, rgba(0, 0, 0, .7)))}.file-attachments{--luzmo-tag-border-radius: 16px;display:flex;flex-wrap:wrap;gap:var(--luzmo-prompt-box-file-attachments-gap, var(--prompt-box-file-attachments-gap, 4px))}.file-attachment{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.input-wrapper{position:relative;display:flex;flex:1}.input-field{flex:1;width:100%;min-width:0;--luzmo-text-field-focus-indicator-width: 0;--luzmo-text-field-border-width: 0;--luzmo-text-field-width: 100%;--luzmo-text-field-min-width: 0;--luzmo-text-field-placeholder-text-color-default: var( --luzmo-prompt-box-placeholder-color, var(--prompt-box-placeholder-color) )}.actions-row{display:flex;align-items:center;justify-content:space-between;gap:var(--luzmo-prompt-box-actions-gap, var(--prompt-box-actions-gap))}.bottom-actions{display:flex;align-items:center;gap:var(--luzmo-prompt-box-bottom-actions-gap, var(--prompt-box-bottom-actions-gap));flex-wrap:wrap;flex:1;opacity:var(--luzmo-prompt-box-actions-opacity, var(--prompt-box-actions-opacity, 1));transition:opacity var(--luzmo-prompt-box-animation-duration, var(--prompt-box-animation-duration)) ease-in-out}.button-group{display:flex;align-items:center;gap:var(--luzmo-prompt-box-button-group-gap, var(--prompt-box-button-group-gap));margin-left:auto}.record-button,.cancel-recording-button{--luzmo-action-button-border-radius: var( --luzmo-prompt-box-record-button-border-radius, 50% );--luzmo-action-button-focus-indicator-border-radius: var( --luzmo-prompt-box-record-button-focus-indicator-border-radius, 50% )}.submit-button{margin-inline-start:var(--luzmo-prompt-box-submit-button-margin-inline-start, var(--prompt-box-submit-button-margin-inline-start))}.recording-ui{display:flex;align-items:center;gap:var(--luzmo-prompt-box-recording-gap, var(--prompt-box-recording-gap))}.waveform{display:flex;align-items:center;gap:var(--luzmo-prompt-box-waveform-gap, var(--prompt-box-waveform-gap, 3px));height:var(--luzmo-prompt-box-waveform-height, var(--prompt-box-waveform-height, 24px));padding:0 4px}.waveform-bar{width:var(--luzmo-prompt-box-waveform-bar-width, var(--prompt-box-waveform-bar-width, 3px));height:calc(var(--bar-height, .3) * var(--luzmo-prompt-box-waveform-height, var(--prompt-box-waveform-height, 24px)));min-height:4px;background-color:var(--luzmo-prompt-box-waveform-bar-color, var(--prompt-box-waveform-bar-color, currentColor));border-radius:var(--luzmo-prompt-box-waveform-bar-radius, var(--prompt-box-waveform-bar-radius, 2px));transition:height .05s ease-out;animation:waveform-pulse 1s ease-in-out infinite}.waveform-bar:nth-child(1){animation-delay:0s}.waveform-bar:nth-child(2){animation-delay:.1s}.waveform-bar:nth-child(3){animation-delay:.2s}.waveform-bar:nth-child(4){animation-delay:.1s}.waveform-bar:nth-child(5){animation-delay:0s}@keyframes waveform-pulse{0%,to{opacity:.6}50%{opacity:1}}.recording-duration{font-family:var(--luzmo-prompt-box-recording-duration-font-family, var(--prompt-box-recording-duration-font-family, monospace));font-size:var(--luzmo-prompt-box-recording-duration-font-size, var(--prompt-box-recording-duration-font-size, 14px));font-weight:var(--luzmo-prompt-box-recording-duration-font-weight, var(--prompt-box-recording-duration-font-weight, 500));color:var(--luzmo-prompt-box-recording-duration-color, var(--prompt-box-recording-duration-color, currentColor));text-align:center}::slotted([slot=top-actions]){display:inline-flex;align-items:center}::slotted([slot=bottom-actions]){display:inline-flex;align-items:center}::slotted([slot=record-button]){display:inline-flex}::slotted([slot=submit-button]){display:inline-flex;margin-inline-start:var(--luzmo-prompt-box-submit-button-margin-inline-start, var(--prompt-box-submit-button-margin-inline-start))}@media (forced-colors: active){:host{--highcontrast-prompt-box-background-color: Canvas;--highcontrast-prompt-box-border-color: CanvasText;--highcontrast-prompt-box-text-color: CanvasText}}:host{--prompt-box-font-family: var(--luzmo-font-family);--prompt-box-font-size: var(--luzmo-font-size);--prompt-box-line-height: 1.5;--prompt-box-text-color: var(--luzmo-font-color);--prompt-box-background-color: var(--luzmo-background-color);--prompt-box-border-radius: var(--luzmo-border-radius-xl);--prompt-box-border-width: var(--luzmo-border-width);--prompt-box-border-color: var(--luzmo-border-color);--prompt-box-border-color-focus: var(--luzmo-primary);--prompt-box-shadow: 0 2px 8px rgba(var(--luzmo-border-color-rgb), .08);--prompt-box-shadow-focus: 0 2px 12px rgba(var(--luzmo-primary-rgb), .15);--prompt-box-gap: var(--luzmo-spacing-5);--prompt-box-recording-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--prompt-box-vertical-padding: var(--luzmo-spacing-4);--prompt-box-horizontal-padding: var(--luzmo-spacing-5);--prompt-box-actions-gap: var(--luzmo-spacing-3);--prompt-box-top-actions-gap: var(--luzmo-spacing-2);--prompt-box-bottom-actions-gap: var(--luzmo-spacing-2);--prompt-box-button-group-gap: var(--luzmo-spacing-2);--prompt-box-submit-button-margin-inline-start: var(--luzmo-spacing-3);--prompt-box-max-height: 200px;--prompt-box-placeholder-color: var(--luzmo-font-color-extra-dimmed);--prompt-box-placeholder-opacity: 1;--prompt-box-animation-duration: var(--luzmo-animation-duration, .15s);--prompt-box-disabled-opacity: .5;--prompt-box-attachments-gap: var(--luzmo-spacing-1);--prompt-box-image-attachments-gap: var(--luzmo-spacing-2);--prompt-box-file-attachments-gap: var(--luzmo-spacing-2);--prompt-box-image-preview-size: 64px;--prompt-box-image-border-radius: var(--luzmo-border-radius);--prompt-box-image-background: rgba(0, 0, 0, .05);--prompt-box-remove-button-size: 20px;--prompt-box-remove-button-background: rgba(0, 0, 0, .5);--prompt-box-remove-button-background-hover: rgba(0, 0, 0, .7);--prompt-box-remove-button-icon-color: #fff}:host([size=s]){--prompt-box-font-size: var(--luzmo-font-size-s);--prompt-box-border-radius: var(--luzmo-border-radius-l);--prompt-box-vertical-padding: var(--luzmo-spacing-3);--prompt-box-horizontal-padding: var(--luzmo-spacing-4);--prompt-box-gap: var(--luzmo-spacing-4);--prompt-box-attachments-gap: 0;--prompt-box-image-attachments-gap: var(--luzmo-spacing-1);--prompt-box-recording-gap: calc( var(--luzmo-spacing-3) + var(--luzmo-spacing-1) );--prompt-box-max-height: 150px;--prompt-box-image-preview-size: 48px;--prompt-box-remove-button-size: 18px}:host([size=l]){--prompt-box-font-size: var(--luzmo-font-size-l);--prompt-box-border-radius: var(--luzmo-border-radius-xl);--prompt-box-vertical-padding: var(--luzmo-spacing-5);--prompt-box-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--prompt-box-gap: var(--luzmo-spacing-4);--prompt-box-attachments-gap: var(--luzmo-spacing-1);--prompt-box-image-attachments-gap: calc( var(--luzmo-spacing-2) + var(--luzmo-spacing-1) );--prompt-box-recording-gap: calc( var(--luzmo-spacing-4) + var(--luzmo-spacing-1) );--prompt-box-max-height: 250px;--prompt-box-image-preview-size: 72px;--prompt-box-remove-button-size: 24px}:host([size=xl]){--prompt-box-font-size: var(--luzmo-font-size-xl);--prompt-box-border-radius: var(--luzmo-border-radius-xl);--prompt-box-vertical-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-1) );--prompt-box-horizontal-padding: calc( var(--luzmo-spacing-5) + var(--luzmo-spacing-2) );--prompt-box-gap: var(--luzmo-spacing-5);--prompt-box-attachments-gap: var(--luzmo-spacing-2);--prompt-box-image-attachments-gap: var(--luzmo-spacing-3);--prompt-box-max-height: 300px;--prompt-box-image-preview-size: 96px;--prompt-box-remove-button-size: 28px}:host([pending]){--prompt-box-actions-opacity: .75}";
+var T = Object.defineProperty, n = (b, t, o, e) => {
+  for (var a = void 0, r = b.length - 1, l; r >= 0; r--)
+    (l = b[r]) && (a = l(t, o, a) || a);
+  return a && T(t, o, a), a;
+};
+let z = !1;
+typeof window < "u" && (document.addEventListener(
+  "keydown",
+  () => {
+    z = !0;
+  },
+  !0
+), document.addEventListener(
+  "mousedown",
+  () => {
+    z = !1;
+  },
+  !0
+), document.addEventListener(
+  "pointerdown",
+  () => {
+    z = !1;
+  },
+  !0
+));
+var d;
+const i = (d = class extends L(F, {
+  validSizes: ["xs", "s", "m", "l", "xl"],
+  defaultSize: "m"
+}) {
+  constructor() {
+    super(...arguments), this.rows = 1, this.grows = !1, this.recording = !1, this.hideSubmit = !1, this.placeholder = "", this.value = "", this.disabled = !1, this.readonly = !1, this.maxlength = -1, this.pending = !1, this.allowImages = !1, this.allowFiles = !1, this.acceptedFileTypes = [], this._hasTopActions = !1, this._hasBottomActions = !1, this._hasRecordButton = !1, this._hasSubmitButton = !1, this._attachments = [], this._isRecording = !1, this._recordingDuration = 0, this._audioLevel = 0, this._voiceRecorder = null, this._shouldFocusFinishButton = !1, this._attachmentIdCounter = 0, this._handleHostFocus = () => {
+      z && this.classList.add("focus-visible");
+    }, this._handleHostBlur = () => {
+      this.classList.remove("focus-visible");
+    }, this._handlePaste = (t) => {
+      var a;
+      if (!this.allowImages || this.disabled || this.readonly || this.pending)
+        return;
+      const o = (a = t.clipboardData) == null ? void 0 : a.items;
+      if (!o) return;
+      const e = [];
+      for (const r of o)
+        if (r.type.startsWith("image/")) {
+          const l = r.getAsFile();
+          l && e.push(l);
+        }
+      e.length > 0 && this.addFiles(e);
+    };
+  }
+  static get styles() {
+    return [B(I)];
+  }
+  /**
+   * Get the appropriate tag size based on the prompt box size.
+   * Tags are one level smaller than the prompt box, with 's' being the minimum.
+   * @private
+   */
+  get _tagSize() {
+    switch (this.size) {
+      case "s":
+      case "m":
+        return "s";
+      case "l":
+      case "xl":
+        return "m";
+      default:
+        return "s";
+    }
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.hasAttribute("tabindex") || this.setAttribute("tabindex", "0"), this.addEventListener("focus", this._handleHostFocus), this.addEventListener("blur", this._handleHostBlur), this.addEventListener("paste", this._handlePaste);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("focus", this._handleHostFocus), this.removeEventListener("blur", this._handleHostBlur), this.removeEventListener("paste", this._handlePaste), this._revokeAllPreviewUrls(), this._destroyVoiceRecorder();
+  }
+  _revokeAllPreviewUrls() {
+    for (const t of this._attachments)
+      t.previewUrl && URL.revokeObjectURL(t.previewUrl);
+  }
+  _handleTopActionsSlotChange(t) {
+    const o = t.target;
+    this._hasTopActions = o.assignedNodes().length > 0;
+  }
+  _handleBottomActionsSlotChange(t) {
+    const o = t.target;
+    this._hasBottomActions = o.assignedNodes().length > 0;
+  }
+  _handleRecordButtonSlotChange(t) {
+    const o = t.target;
+    this._hasRecordButton = o.assignedNodes().length > 0;
+  }
+  _handleSubmitButtonSlotChange(t) {
+    const o = t.target;
+    this._hasSubmitButton = o.assignedNodes().length > 0;
+  }
+  _handleInput(t) {
+    const o = t.target;
+    this.value = o.value, this.dispatchEvent(
+      new Event("input", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  _handleKeydown(t) {
+    t.key === "Enter" && !t.shiftKey && (t.preventDefault(), this._submit());
+  }
+  _handleFileInputChange(t) {
+    const o = t.target, e = o.files;
+    e && e.length > 0 && this.addFiles([...e]), o.value = "";
+  }
+  _isFileTypeAccepted(t) {
+    if (this.acceptedFileTypes.length === 0)
+      return !0;
+    const o = t.name.toLowerCase(), e = t.type.toLowerCase();
+    for (const a of this.acceptedFileTypes) {
+      const r = a.toLowerCase();
+      if (r.endsWith("/*")) {
+        const l = r.slice(0, -2);
+        if (e.startsWith(l + "/"))
+          return !0;
+      } else {
+        if (e === r)
+          return !0;
+        if (r.startsWith(".") && o.endsWith(r))
+          return !0;
+      }
+    }
+    return !1;
+  }
+  _isImageFile(t) {
+    return t.type.startsWith("image/");
+  }
+  _generateAttachmentId() {
+    return `attachment-${++this._attachmentIdCounter}-${Date.now()}`;
+  }
+  /**
+   * Add files as attachments.
+   * @param files - Array of File objects to add
+   * @returns Array of added attachment IDs
+   */
+  addFiles(t) {
+    if (this.disabled || this.readonly || this.pending)
+      return [];
+    const o = [];
+    for (const e of t) {
+      if (this._isImageFile(e) && !this.allowImages || !this._isImageFile(e) && !this.allowFiles || !this._isFileTypeAccepted(e))
+        continue;
+      const a = this._generateAttachmentId(), r = {
+        file: e,
+        id: a
+      };
+      this._isImageFile(e) && (r.previewUrl = URL.createObjectURL(e)), this._attachments = [...this._attachments, r], o.push(a);
+    }
+    return o.length > 0 && this.dispatchEvent(
+      new CustomEvent("luzmo-attachments-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { attachments: this._attachments }
+      })
+    ), o;
+  }
+  /**
+   * Remove an attachment by its ID.
+   * @param id - The attachment ID to remove
+   */
+  removeAttachment(t) {
+    const o = this._attachments.find((e) => e.id === t);
+    o && (o.previewUrl && URL.revokeObjectURL(o.previewUrl), this._attachments = this._attachments.filter((e) => e.id !== t), this.dispatchEvent(
+      new CustomEvent("luzmo-attachments-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { attachments: this._attachments }
+      })
+    ));
+  }
+  /**
+   * Clear all attachments.
+   */
+  clearAttachments() {
+    this._revokeAllPreviewUrls(), this._attachments = [], this.dispatchEvent(
+      new CustomEvent("luzmo-attachments-change", {
+        bubbles: !0,
+        composed: !0,
+        detail: { attachments: this._attachments }
+      })
+    );
+  }
+  /**
+   * Get all current attachments.
+   */
+  getAttachments() {
+    return [...this._attachments];
+  }
+  /**
+   * Open the file picker dialog.
+   */
+  openFilePicker() {
+    var t;
+    (t = this._fileInput) == null || t.click();
+  }
+  _handleRemoveAttachment(t) {
+    const e = t.currentTarget.dataset.attachmentId;
+    e && this.removeAttachment(e);
+  }
+  _handleTagDelete(t) {
+    const e = t.target.dataset.attachmentId;
+    e && (t.preventDefault(), this.removeAttachment(e));
+  }
+  /**
+   * Extract values from interactive elements within a container.
+   * @private
+   */
+  _extractActionValues(t) {
+    const o = [];
+    for (const e of t) {
+      const a = this._getInteractiveElements(e);
+      for (const r of a) {
+        const l = {
+          element: r,
+          name: r.getAttribute("name") || r.getAttribute("label") || void 0
+        }, p = [
+          "luzmo-switch",
+          "luzmo-checkbox",
+          "luzmo-radio"
+        ], u = r.tagName.toLowerCase();
+        "value" in r && (l.value = r.value), p.includes(u) && "checked" in r && (l.checked = r.checked), o.push(l);
+      }
+    }
+    return o;
+  }
+  _submit() {
+    var p, u;
+    if (this.disabled || this.readonly || this.pending)
+      return;
+    const t = (p = this.shadowRoot) == null ? void 0 : p.querySelector(
+      'slot[name="top-actions"]'
+    ), o = (u = this.shadowRoot) == null ? void 0 : u.querySelector(
+      'slot[name="bottom-actions"]'
+    ), e = (t == null ? void 0 : t.assignedElements()) ?? [], a = (o == null ? void 0 : o.assignedElements()) ?? [], r = this._extractActionValues([
+      ...e,
+      ...a
+    ]), l = {
+      value: this.value,
+      topActions: [...e],
+      bottomActions: [...a],
+      actionValues: r,
+      attachments: [...this._attachments]
+    };
+    this.dispatchEvent(
+      new CustomEvent("luzmo-submit", {
+        bubbles: !0,
+        composed: !0,
+        detail: l
+      })
+    );
+  }
+  async _handleRecordClick(t) {
+    if (!_.isSupported()) {
+      this.dispatchEvent(
+        new CustomEvent("luzmo-record-error", {
+          bubbles: !0,
+          composed: !0,
+          detail: { error: "Voice recording is not supported in this browser" }
+        })
+      );
+      return;
+    }
+    if (this._isRecording)
+      this._stopRecording();
+    else {
+      const o = t.currentTarget;
+      this._shouldFocusFinishButton = o.matches(":focus-visible"), await this._startRecording();
+    }
+    this.dispatchEvent(
+      new CustomEvent("luzmo-record", {
+        bubbles: !0,
+        composed: !0,
+        detail: { isRecording: this._isRecording }
+      })
+    );
+  }
+  /**
+   * Start voice recording.
+   * @private
+   */
+  async _startRecording() {
+    if (this._initVoiceRecorder(), !this._voiceRecorder)
+      return;
+    await this._voiceRecorder.startRecording() && (this._isRecording = !0, this._recordingDuration = 0, this._audioLevel = 0);
+  }
+  /**
+   * Stop voice recording.
+   * @private
+   */
+  _stopRecording() {
+    this._voiceRecorder && this._voiceRecorder.stopRecording();
+  }
+  /**
+   * Cancel voice recording without emitting the result.
+   * @private
+   */
+  _cancelRecording() {
+    this._voiceRecorder && this._voiceRecorder.cancelRecording(), this._isRecording = !1, this._recordingDuration = 0, this._audioLevel = 0;
+  }
+  /**
+   * Handle cancel recording button click.
+   * @private
+   */
+  _handleCancelRecordClick() {
+    this._cancelRecording(), this.dispatchEvent(
+      new CustomEvent("luzmo-record-cancel", {
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /**
+   * Initialize voice recorder with callbacks.
+   * @private
+   */
+  _initVoiceRecorder() {
+    this._voiceRecorder || (this._voiceRecorder = new _({
+      maxDuration: 3e5
+      // 5 minutes
+    }), this._voiceRecorder.onStart(() => {
+      this._isRecording = !0;
+    }).onStop((t) => {
+      this._isRecording = !1, this._recordingDuration = 0, this._audioLevel = 0, this.dispatchEvent(
+        new CustomEvent("luzmo-recording-complete", {
+          bubbles: !0,
+          composed: !0,
+          detail: {
+            audioBlob: t.audioBlob,
+            duration: t.duration,
+            mimeType: t.mimeType
+          }
+        })
+      );
+    }).onError((t) => {
+      this._isRecording = !1, this._recordingDuration = 0, this._audioLevel = 0, this.dispatchEvent(
+        new CustomEvent("luzmo-record-error", {
+          bubbles: !0,
+          composed: !0,
+          detail: { error: t }
+        })
+      );
+    }).onAudioLevel((t) => {
+      this._audioLevel = t;
+    }).onDurationUpdate((t) => {
+      this._recordingDuration = t;
+    }));
+  }
+  /**
+   * Destroy voice recorder and clean up.
+   * @private
+   */
+  _destroyVoiceRecorder() {
+    this._voiceRecorder && (this._voiceRecorder.destroy(), this._voiceRecorder = null), this._isRecording = !1, this._recordingDuration = 0, this._audioLevel = 0;
+  }
+  /**
+   * Format recording duration for display.
+   * @private
+   */
+  _formatRecordingDuration() {
+    return _.formatDuration(this._recordingDuration);
+  }
+  /**
+   * Focus the input element.
+   */
+  focus() {
+    var t;
+    (t = this._inputElement) == null || t.focus();
+  }
+  /**
+   * Clear the input value and all attachments.
+   */
+  clear() {
+    this.value = "", this.clearAttachments();
+  }
+  /**
+   * Get the slotted top actions elements.
+   */
+  getTopActions() {
+    var o;
+    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(
+      'slot[name="top-actions"]'
+    );
+    return (t == null ? void 0 : t.assignedElements()) ?? [];
+  }
+  /**
+   * Get the slotted bottom actions elements.
+   */
+  getBottomActions() {
+    var o;
+    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector(
+      'slot[name="bottom-actions"]'
+    );
+    return (t == null ? void 0 : t.assignedElements()) ?? [];
+  }
+  updated(t) {
+    super.updated(t), (t.has("pending") || t.has("disabled")) && this._updateSlottedElementsState(), this._shouldFocusFinishButton && this._isRecording && (this._shouldFocusFinishButton = !1, requestAnimationFrame(() => {
+      var o;
+      (o = this._finishRecordingButton) == null || o.focus();
+    }));
+  }
+  /**
+   * Find all interactive children within an element (including the element itself if it matches).
+   * @private
+   */
+  _getInteractiveElements(t) {
+    const o = [];
+    t.matches(d.INTERACTIVE_ELEMENTS_SELECTOR) && o.push(t);
+    const e = t.querySelectorAll(
+      d.INTERACTIVE_ELEMENTS_SELECTOR
+    );
+    return o.push(...e), o;
+  }
+  /**
+   * Update the state of slotted elements based on disabled and pending properties.
+   * When disabled: set disabled attribute
+   * When pending: set readonly attribute (not disabled)
+   * @private
+   */
+  _updateSlottedElementsState() {
+    var p, u, v, R;
+    const t = (p = this.shadowRoot) == null ? void 0 : p.querySelector(
+      'slot[name="submit-button"]'
+    ), o = (t == null ? void 0 : t.assignedElements()) ?? [];
+    for (const x of o) {
+      const y = this._getInteractiveElements(x);
+      for (const c of y)
+        this.pending ? (c.setAttribute("pending", ""), c.removeAttribute("disabled"), c.removeAttribute("readonly")) : this.disabled ? (c.removeAttribute("pending"), c.setAttribute("disabled", ""), c.removeAttribute("readonly")) : (c.removeAttribute("pending"), c.removeAttribute("disabled"), c.removeAttribute("readonly"));
+    }
+    const e = (x) => {
+      for (const y of x) {
+        const c = this._getInteractiveElements(y);
+        for (const g of c)
+          this.disabled ? (g.setAttribute("disabled", ""), g.removeAttribute("readonly")) : this.pending ? (g.removeAttribute("disabled"), g.setAttribute("readonly", "")) : (g.removeAttribute("disabled"), g.removeAttribute("readonly"));
+      }
+    }, a = (u = this.shadowRoot) == null ? void 0 : u.querySelector(
+      'slot[name="top-actions"]'
+    );
+    e((a == null ? void 0 : a.assignedElements()) ?? []);
+    const r = (v = this.shadowRoot) == null ? void 0 : v.querySelector(
+      'slot[name="bottom-actions"]'
+    );
+    e((r == null ? void 0 : r.assignedElements()) ?? []);
+    const l = (R = this.shadowRoot) == null ? void 0 : R.querySelector(
+      'slot[name="record-button"]'
+    );
+    e((l == null ? void 0 : l.assignedElements()) ?? []);
+  }
+  renderTopActions() {
+    return s`
+      <div
+        class="top-actions ${this._hasTopActions ? "" : "empty"}"
+        part="top-actions"
+      >
+        <slot
+          name="top-actions"
+          @slotchange=${this._handleTopActionsSlotChange}
+        ></slot>
+      </div>
+    `;
+  }
+  renderBottomActions() {
+    return s`
+      <div
+        class="bottom-actions ${this._hasBottomActions ? "" : "empty"}"
+        part="bottom-actions"
+      >
+        <slot
+          name="bottom-actions"
+          @slotchange=${this._handleBottomActionsSlotChange}
+        ></slot>
+      </div>
+    `;
+  }
+  renderRecordButton() {
+    return !this.recording && !this._hasRecordButton ? s`<slot
+        name="record-button"
+        @slotchange=${this._handleRecordButtonSlotChange}
+      ></slot>` : this._hasRecordButton ? s`<slot
+        name="record-button"
+        @slotchange=${this._handleRecordButtonSlotChange}
+      ></slot>` : this._isRecording ? s`
+        <slot
+          name="record-button"
+          @slotchange=${this._handleRecordButtonSlotChange}
+        ></slot>
+        <div class="recording-ui" part="recording-ui">
+          <luzmo-action-button
+            class="cancel-recording-button"
+            part="cancel-recording-button"
+            .size=${this.size}
+            ?disabled=${this.disabled}
+            @click=${this._handleCancelRecordClick}
+            aria-label="Cancel recording"
+          >
+            <luzmo-icon
+              slot="icon"
+              .icon=${$}
+              .size=${this.size}
+            ></luzmo-icon>
+          </luzmo-action-button>
+          ${this.renderWaveform()}
+          <span class="recording-duration" part="recording-duration">
+            ${this._formatRecordingDuration()}
+          </span>
+          <luzmo-button
+            class="finish-recording-button"
+            part="finish-recording-button"
+            .size=${this.size}
+            icon-only
+            variant="primary"
+            ?disabled=${this.disabled}
+            @click=${this._handleRecordClick}
+            aria-label="Finish recording"
+          >
+            <luzmo-icon slot="icon" .icon=${C}></luzmo-icon>
+          </luzmo-button>
+        </div>
+      ` : s`
+      <slot
+        name="record-button"
+        @slotchange=${this._handleRecordButtonSlotChange}
+      ></slot>
+      <luzmo-action-button
+        class="record-button"
+        part="record-button"
+        quiet
+        .size=${this.size}
+        ?disabled=${this.disabled}
+        ?readonly=${this.pending}
+        @click=${this._handleRecordClick}
+        aria-label="Record"
+      >
+        <luzmo-icon
+          slot="icon"
+          .icon=${k}
+          .size=${this.size}
+        ></luzmo-icon>
+      </luzmo-action-button>
+    `;
+  }
+  renderWaveform() {
+    const o = [];
+    for (let e = 0; e < 5; e++) {
+      const r = Math.floor(2.5), p = 1 - Math.abs(e - r) * 0.15, u = 0.3 + this._audioLevel * 0.7 * p, v = Math.max(0.2, Math.min(1, u));
+      o.push(s`
+        <span
+          class="waveform-bar"
+          style="--bar-height: ${v}"
+        ></span>
+      `);
+    }
+    return s`
+      <div class="waveform" part="waveform" aria-hidden="true">${o}</div>
+    `;
+  }
+  renderSubmitButton() {
+    return this._isRecording ? s`<slot
+        name="submit-button"
+        @slotchange=${this._handleSubmitButtonSlotChange}
+      ></slot>` : this.hideSubmit && !this._hasSubmitButton ? s`<slot
+        name="submit-button"
+        @slotchange=${this._handleSubmitButtonSlotChange}
+      ></slot>` : this._hasSubmitButton ? s`<slot
+        name="submit-button"
+        @slotchange=${this._handleSubmitButtonSlotChange}
+      ></slot>` : s`
+      <slot
+        name="submit-button"
+        @slotchange=${this._handleSubmitButtonSlotChange}
+      ></slot>
+      <luzmo-button
+        class="submit-button"
+        part="submit-button"
+        .size=${this.size}
+        icon-only
+        variant="primary"
+        ?disabled=${this.disabled || !this.pending && !this.value.trim()}
+        ?pending=${this.pending}
+        @click=${this._submit}
+        aria-label="Submit"
+      >
+        <luzmo-icon slot="icon" .icon=${S}></luzmo-icon>
+      </luzmo-button>
+    `;
+  }
+  renderTextarea() {
+    return s`
+      <luzmo-text-field
+        class="input-field"
+        part="input"
+        placeholder=${this.placeholder}
+        .value=${this.value}
+        .size=${this.size}
+        rows=${this.rows}
+        ?grows=${this.grows}
+        ?readonly=${this.readonly || this.pending || this.disabled}
+        maxlength=${this.maxlength > 0 ? this.maxlength : -1}
+        multiline
+        quiet
+        label=${this.placeholder || "Enter your message"}
+        @input=${this._handleInput}
+        @keydown=${this._handleKeydown}
+      ></luzmo-text-field>
+    `;
+  }
+  _getAcceptAttribute() {
+    if (this.acceptedFileTypes.length > 0)
+      return this.acceptedFileTypes.join(",");
+    const t = [];
+    return this.allowImages && t.push("image/*"), this.allowFiles && t.push("*/*"), t.join(",");
+  }
+  renderHiddenFileInput() {
+    return !this.allowImages && !this.allowFiles ? f : s`
+      <input
+        type="file"
+        class="hidden-file-input"
+        accept=${this._getAcceptAttribute()}
+        multiple
+        @change=${this._handleFileInputChange}
+        aria-hidden="true"
+        tabindex="-1"
+      />
+    `;
+  }
+  renderImageAttachment(t) {
+    return s`
+      <div class="image-attachment" part="image-attachment">
+        <img
+          src=${t.previewUrl || ""}
+          alt=${t.file.name}
+          class="image-preview"
+        />
+        <luzmo-clear-button
+          class="attachment-remove"
+          .size=${this.size}
+          ?disabled=${this.disabled || this.pending}
+          label="Remove ${t.file.name}"
+          data-attachment-id=${t.id}
+          @click=${this._handleRemoveAttachment}
+        ></luzmo-clear-button>
+      </div>
+    `;
+  }
+  renderFileAttachment(t) {
+    return s`
+      <luzmo-tag
+        class="file-attachment"
+        part="file-attachment"
+        .size=${this._tagSize}
+        deletable
+        ?disabled=${this.disabled || this.pending}
+        data-attachment-id=${t.id}
+        @delete=${this._handleTagDelete}
+      >
+        ${t.file.name}
+      </luzmo-tag>
+    `;
+  }
+  renderAttachments() {
+    if (this._attachments.length === 0)
+      return f;
+    const t = this._attachments.filter(
+      (e) => this._isImageFile(e.file)
+    ), o = this._attachments.filter(
+      (e) => !this._isImageFile(e.file)
+    );
+    return s`
+      <div class="attachments" part="attachments">
+        ${t.length > 0 ? s`
+              <div class="image-attachments" part="image-attachments">
+                ${E(
+      t,
+      (e) => e.id,
+      (e) => this.renderImageAttachment(e)
+    )}
+              </div>
+            ` : f}
+        ${o.length > 0 ? s`
+              <luzmo-tags
+                class="file-attachments"
+                part="file-attachments"
+                .size=${this._tagSize}
+              >
+                ${E(
+      o,
+      (e) => e.id,
+      (e) => this.renderFileAttachment(e)
+    )}
+              </luzmo-tags>
+            ` : f}
+      </div>
+    `;
+  }
+  render() {
+    return s`
+      ${this.renderHiddenFileInput()}
+      <div class="container" part="container">
+        ${this.renderTopActions()} ${this.renderAttachments()}
+        <div class="input-wrapper" part="input-wrapper">
+          ${this.renderTextarea()}
+        </div>
+        <div class="actions-row" part="actions-row">
+          ${this.renderBottomActions()}
+          <div class="button-group" part="button-group">
+            ${this.renderRecordButton()} ${this.renderSubmitButton()}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}, d.INTERACTIVE_ELEMENTS_SELECTOR = "luzmo-button, luzmo-action-button, luzmo-switch, luzmo-picker, luzmo-picker-button, luzmo-select, luzmo-text-field, luzmo-number-field", d);
+n([
+  m({ type: Number })
+], i.prototype, "rows");
+n([
+  m({ type: Boolean, reflect: !0 })
+], i.prototype, "grows");
+n([
+  m({ type: Boolean, reflect: !0 })
+], i.prototype, "recording");
+n([
+  m({ type: Boolean, reflect: !0, attribute: "hide-submit" })
+], i.prototype, "hideSubmit");
+n([
+  m({ type: String })
+], i.prototype, "placeholder");
+n([
+  m({ type: String })
+], i.prototype, "value");
+n([
+  m({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled");
+n([
+  m({ type: Boolean, reflect: !0 })
+], i.prototype, "readonly");
+n([
+  m({ type: Number })
+], i.prototype, "maxlength");
+n([
+  m({ type: Boolean, reflect: !0 })
+], i.prototype, "pending");
+n([
+  m({ type: Boolean, reflect: !0, attribute: "allow-images" })
+], i.prototype, "allowImages");
+n([
+  m({ type: Boolean, reflect: !0, attribute: "allow-files" })
+], i.prototype, "allowFiles");
+n([
+  m({ type: Array, attribute: "accepted-file-types" })
+], i.prototype, "acceptedFileTypes");
+n([
+  h()
+], i.prototype, "_hasTopActions");
+n([
+  h()
+], i.prototype, "_hasBottomActions");
+n([
+  h()
+], i.prototype, "_hasRecordButton");
+n([
+  h()
+], i.prototype, "_hasSubmitButton");
+n([
+  h()
+], i.prototype, "_attachments");
+n([
+  h()
+], i.prototype, "_isRecording");
+n([
+  h()
+], i.prototype, "_recordingDuration");
+n([
+  h()
+], i.prototype, "_audioLevel");
+n([
+  w("luzmo-text-field")
+], i.prototype, "_inputElement");
+n([
+  w('input[type="file"]')
+], i.prototype, "_fileInput");
+n([
+  w(".finish-recording-button")
+], i.prototype, "_finishRecordingButton");
+let D = i;
+customElements.get("luzmo-prompt-box") || customElements.define("luzmo-prompt-box", D);
+export {
+  D as LuzmoPromptBox
+};