@portel/photon 1.17.2 → 1.17.4

package/dist/beam-form.bundle.js

@@ -665,6 +665,7 @@ var theme = i`
     border: 1px solid var(--border-glass);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-sm);
+    color: inherit;
   }
 
   .text-gradient {
@@ -706,21 +707,25 @@ var theme = i`
     border-radius: var(--radius-xs);
   }
 
-  /* Scrollbar */
+  /* Scrollbar — thin, translucent, doesn't crowd content */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--t-muted, #888) 30%, transparent) transparent;
+  }
   ::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+    width: 6px;
+    height: 6px;
   }
   ::-webkit-scrollbar-track {
     background: transparent;
+    margin: 4px 0;
   }
   ::-webkit-scrollbar-thumb {
-    background: var(--border-glass);
-    border-radius: var(--radius-xs);
+    background: color-mix(in srgb, var(--t-muted) 30%, transparent);
+    border-radius: var(--radius-full);
   }
   ::-webkit-scrollbar-thumb:hover {
-    background: var(--t-muted);
-    opacity: 0.5;
+    background: color-mix(in srgb, var(--t-muted) 60%, transparent);
   }
   /* Toggle Switch */
   .switch {
@@ -1782,6 +1787,187 @@ function showToast(message, type = "info", duration = 3e3, action) {
   ToastManager.show(message, type, duration, action);
 }
 
+// src/auto-ui/frontend/components/confirm-dialog.ts
+var ConfirmDialog = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+    this.message = "";
+    this.confirmLabel = "OK";
+    this.cancelLabel = "Cancel";
+    this.destructive = false;
+  }
+  show(message, options) {
+    this.message = message;
+    this.confirmLabel = options?.confirm ?? "OK";
+    this.cancelLabel = options?.cancel ?? "Cancel";
+    this.destructive = options?.destructive ?? false;
+    this.open = true;
+    return new Promise((resolve) => {
+      this._resolve = resolve;
+    });
+  }
+  _handleConfirm() {
+    this.open = false;
+    this._resolve?.(true);
+  }
+  _handleCancel() {
+    this.open = false;
+    this._resolve?.(false);
+  }
+  _handleKeydown(e5) {
+    if (e5.key === "Escape") this._handleCancel();
+    if (e5.key === "Enter") this._handleConfirm();
+  }
+  render() {
+    return b2`
+      <div class="dialog" @keydown=${(e5) => this._handleKeydown(e5)}>
+        <div class="message">${this.message}</div>
+        <div class="actions">
+          <button class="btn-cancel" @click=${() => this._handleCancel()}>
+            ${this.cancelLabel}
+          </button>
+          <button
+            class="btn-confirm ${this.destructive ? "destructive" : ""}"
+            @click=${() => this._handleConfirm()}
+          >
+            ${this.confirmLabel}
+          </button>
+        </div>
+      </div>
+    `;
+  }
+};
+ConfirmDialog.styles = [
+  theme,
+  i`
+      :host {
+        display: none;
+      }
+
+      @keyframes backdrop-in {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+
+      @keyframes content-in {
+        from {
+          opacity: 0;
+          transform: scale(0.95) translateY(8px);
+        }
+        to {
+          opacity: 1;
+          transform: scale(1) translateY(0);
+        }
+      }
+
+      :host([open]) {
+        display: flex;
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.6);
+        backdrop-filter: blur(4px);
+        z-index: 10001;
+        align-items: center;
+        justify-content: center;
+        animation: backdrop-in 0.15s ease-out both;
+      }
+
+      .dialog {
+        background: var(--bg-panel);
+        border: 1px solid var(--border-glass);
+        border-radius: var(--radius-md, 12px);
+        padding: 24px;
+        max-width: 400px;
+        width: 90%;
+        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+        animation: content-in 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
+        animation-delay: 0.05s;
+      }
+
+      .message {
+        font-size: 14px;
+        line-height: 1.5;
+        color: var(--t-primary);
+        margin-bottom: 20px;
+      }
+
+      .actions {
+        display: flex;
+        justify-content: flex-end;
+        gap: 8px;
+      }
+
+      button {
+        padding: 8px 16px;
+        border-radius: var(--radius-sm, 6px);
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.15s ease;
+        font-family: inherit;
+        border: none;
+      }
+
+      .btn-cancel {
+        background: var(--bg-glass);
+        color: var(--t-primary);
+        border: 1px solid var(--border-glass);
+      }
+
+      .btn-cancel:hover {
+        background: var(--bg-glass-strong, rgba(255, 255, 255, 0.08));
+      }
+
+      .btn-confirm {
+        background: var(--accent);
+        color: #fff;
+      }
+
+      .btn-confirm:hover {
+        opacity: 0.9;
+      }
+
+      .btn-confirm.destructive {
+        background: hsl(0, 60%, 50%);
+      }
+
+      .btn-confirm.destructive:hover {
+        background: hsl(0, 60%, 45%);
+      }
+    `
+];
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ConfirmDialog.prototype, "open", 2);
+__decorateClass([
+  n4({ type: String })
+], ConfirmDialog.prototype, "message", 2);
+__decorateClass([
+  n4({ type: String })
+], ConfirmDialog.prototype, "confirmLabel", 2);
+__decorateClass([
+  n4({ type: String })
+], ConfirmDialog.prototype, "cancelLabel", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], ConfirmDialog.prototype, "destructive", 2);
+ConfirmDialog = __decorateClass([
+  t3("confirm-dialog")
+], ConfirmDialog);
+async function confirmDialog(message, options) {
+  let dialog = document.querySelector("confirm-dialog");
+  if (!dialog) {
+    dialog = document.createElement("confirm-dialog");
+    document.body.appendChild(dialog);
+  }
+  return dialog.show(message, options);
+}
+
 // src/auto-ui/frontend/utils/format-label.ts
 function formatLabel(name) {
   if (!name) return name;
@@ -2114,7 +2300,15 @@ var InvokeForm = class extends i4 {
       return b2`<div class="form-container"></div>`;
     }
     return b2`
-      <div class="form-container">
+      <div
+        class="form-container"
+        @keydown=${(e5) => {
+      if (e5.key === "Enter" && !e5.shiftKey && !e5.target?.matches("textarea")) {
+        e5.preventDefault();
+        this.handleSubmit();
+      }
+    }}
+      >
         ${this._viewMode === "form" ? this._renderFields() : this._renderJsonEditor()}
       </div>
     `;
@@ -3365,8 +3559,11 @@ var InvokeForm = class extends i4 {
     this.dispatchEvent(new CustomEvent("submit", { detail: { args: this._values } }));
   }
   /** Cancel with dirty check. Called by parent chrome wrapper. */
-  handleCancel() {
-    if (this.isDirty && !confirm("You have unsaved changes. Discard them?")) {
+  async handleCancel() {
+    if (this.isDirty && !await confirmDialog("You have unsaved changes. Discard them?", {
+      confirm: "Discard",
+      destructive: true
+    })) {
       return;
     }
     this.dispatchEvent(new CustomEvent("cancel"));