@portel/photon 1.17.2 → 1.17.3

package/dist/beam.bundle.js

@@ -19264,6 +19264,187 @@ function showToast(message, type = "info", duration4 = 3e3, action) {
   ToastManager.show(message, type, duration4, 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((resolve2) => {
+      this._resolve = resolve2;
+    });
+  }
+  _handleConfirm() {
+    this.open = false;
+    this._resolve?.(true);
+  }
+  _handleCancel() {
+    this.open = false;
+    this._resolve?.(false);
+  }
+  _handleKeydown(e8) {
+    if (e8.key === "Escape") this._handleCancel();
+    if (e8.key === "Enter") this._handleConfirm();
+  }
+  render() {
+    return b2`
+      <div class="dialog" @keydown=${(e8) => this._handleKeydown(e8)}>
+        <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([
+  t4("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);
+}
+
 // node_modules/lit-html/directives/unsafe-svg.js
 var t5 = class extends e5 {
 };
@@ -22623,7 +22804,10 @@ var BeamApp = class extends i4 {
     this._handleRemove = async () => {
       this._closeSettingsMenu();
       if (this._selectedPhoton && this._mcpReady) {
-        if (confirm(`Remove ${this._selectedPhoton.name} from this workspace?`)) {
+        if (await confirmDialog(`Remove ${this._selectedPhoton.name} from this workspace?`, {
+          confirm: "Remove",
+          destructive: true
+        })) {
           const result = await mcpClient.removePhoton(this._selectedPhoton.name);
           if (!result.success) {
             showToast(result.error || "Remove failed", "error");
@@ -22990,10 +23174,11 @@ var BeamApp = class extends i4 {
         }
       }
     };
-    this._handleDeletePhoton = () => {
+    this._handleDeletePhoton = async () => {
       this._closeSettingsMenu();
-      if (confirm(
-        `Are you sure you want to delete "${this._selectedPhoton?.name}"? This cannot be undone.`
+      if (await confirmDialog(
+        `Are you sure you want to delete "${this._selectedPhoton?.name}"? This cannot be undone.`,
+        { confirm: "Delete", destructive: true }
       )) {
         void this._invokeMakerMethod("delete");
       }
@@ -23292,7 +23477,7 @@ var BeamApp = class extends i4 {
           return;
         }
         if (this._view === "form" && this._selectedMethod) {
-          this._handleBackFromMethod();
+          void this._handleBackFromMethod();
           return;
         }
         if (this._view === "marketplace") {
@@ -23323,7 +23508,7 @@ var BeamApp = class extends i4 {
       }
       if (e8.key === "h") {
         if (this._view === "form") {
-          this._handleBackFromMethod();
+          void this._handleBackFromMethod();
         } else if (this._view === "marketplace") {
           this._view = "list";
           this._updateRoute();
@@ -23425,7 +23610,7 @@ var BeamApp = class extends i4 {
       const { action } = e8.detail;
       switch (action) {
         case "back":
-          this._handleBackFromMethod();
+          void this._handleBackFromMethod();
           break;
         case "edit-studio":
           if (this._selectedPhoton) {
@@ -23500,7 +23685,7 @@ var BeamApp = class extends i4 {
               void this._handleContribute();
               break;
             case "delete":
-              this._handleDeletePhoton();
+              void this._handleDeletePhoton();
               break;
             case "remove":
               void this._handleRemove();
@@ -24744,7 +24929,7 @@ var BeamApp = class extends i4 {
         class="mobile-menu-btn ${this._sidebarVisible ? "open" : ""}"
         @click=${() => {
       if (!this._sidebarVisible && this._selectedMethod && this._selectedPhoton && !this._selectedPhoton.isApp) {
-        this._handleBackFromMethod();
+        void this._handleBackFromMethod();
       } else {
         this._toggleSidebar();
       }
@@ -25603,7 +25788,7 @@ ${photon.errorMessage || "Unknown error"}</pre
           progress: this._progress,
           formParams: this._lastFormParams,
           onSubmit: (e8) => void this._handleExecute(e8),
-          onCancel: () => this._handleBackFromMethod(),
+          onCancel: () => void this._handleBackFromMethod(),
           appSurface: true
         })}
               </div>
@@ -26148,7 +26333,7 @@ ${photon.errorMessage || "Unknown error"}</pre
         progress: this._progress,
         formParams: this._lastFormParams,
         onSubmit: (e8) => void this._handleExecute(e8),
-        onCancel: () => this._handleBackFromMethod(),
+        onCancel: () => void this._handleBackFromMethod(),
         panelLabel: "Primary",
         instance: this._currentInstance,
         instances: this._instances,
@@ -26192,7 +26377,7 @@ ${photon.errorMessage || "Unknown error"}</pre
       progress: this._progress,
       formParams: this._lastFormParams,
       onSubmit: (e8) => void this._handleExecute(e8),
-      onCancel: () => this._handleBackFromMethod(),
+      onCancel: () => void this._handleBackFromMethod(),
       appSurface: this._viewMode !== "full",
       panelLabel: "Primary",
       instance: this._currentInstance,
@@ -26734,9 +26919,12 @@ ${photon.errorMessage || "Unknown error"}</pre
     const args = this._sharedFormParams ?? {};
     void this._handleExecute(new CustomEvent("execute", { detail: { args } }));
   }
-  _handleBackFromMethod() {
+  async _handleBackFromMethod() {
     const form = this.shadowRoot?.querySelector("invoke-form");
-    if (form?.isDirty && !confirm("You have unsaved changes. Discard them?")) {
+    if (form?.isDirty && !await confirmDialog("You have unsaved changes. Discard them?", {
+      confirm: "Discard",
+      destructive: true
+    })) {
       return;
     }
     this._closeSecondPanel();
@@ -34038,8 +34226,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"));
@@ -44535,7 +44726,10 @@ var MarketplaceView = class extends i4 {
     this._items = items;
   }
   async _removeSource(name2) {
-    if (!confirm(`Remove marketplace "${name2}"? This will not uninstall any photons.`)) {
+    if (!await confirmDialog(`Remove marketplace "${name2}"? This will not uninstall any photons.`, {
+      confirm: "Remove",
+      destructive: true
+    })) {
       return;
     }
     try {
@@ -44598,7 +44792,11 @@ var MarketplaceView = class extends i4 {
     }
   }
   async _remove(item) {
-    if (!confirm(`Remove "${item.name}"? This will delete the photon files.`)) return;
+    if (!await confirmDialog(`Remove "${item.name}"? This will delete the photon files.`, {
+      confirm: "Remove",
+      destructive: true
+    }))
+      return;
     this._removing = item.name;
     try {
       const res = await fetch("/api/marketplace/remove", {
@@ -94152,9 +94350,13 @@ ${indent}* ` },
     const matchingItem = this._outlineItems.filter((item) => pos >= item.from && pos <= Math.max(item.to, item.from + 1)).sort((left, right) => right.level - left.level)[0];
     this._activeOutlineKey = matchingItem ? this._outlineKey(matchingItem) : "";
   }
-  _close() {
+  async _close() {
     if (this._dirty) {
-      if (!confirm("You have unsaved changes. Close anyway?")) return;
+      if (!await confirmDialog("You have unsaved changes. Close anyway?", {
+        confirm: "Close",
+        destructive: true
+      }))
+        return;
     }
     this.dispatchEvent(new CustomEvent("studio-close", { bubbles: true, composed: true }));
   }