@portel/photon 1.19.0 → 1.20.1

package/dist/beam-form.bundle.js

@@ -1787,187 +1787,24 @@ 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);
-      }
-
-      .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) {
-  const beamApp = document.querySelector("beam-app");
-  const root = beamApp?.shadowRoot ?? document.body;
-  let dialog = root.querySelector("confirm-dialog");
-  if (!dialog) {
-    dialog = document.createElement("confirm-dialog");
-    root.appendChild(dialog);
-  }
-  return dialog.show(message, options);
+// src/auto-ui/frontend/utils/elicit.ts
+function elicit(data) {
+  return new Promise((resolve) => {
+    document.dispatchEvent(
+      new CustomEvent("beam:elicit-local", {
+        detail: { data, resolve }
+      })
+    );
+  });
+}
+async function confirmElicit(message, options) {
+  const result = await elicit({
+    ask: "confirm",
+    message,
+    default: false,
+    ...options?.confirm && { placeholder: options.confirm }
+  });
+  return result.action === "accept" && result.value !== false;
 }
 
 // src/auto-ui/frontend/utils/format-label.ts
@@ -2116,6 +1953,7 @@ var InvokeForm = class extends i4 {
     this.methodName = "";
     this.rememberValues = false;
     this.sharedValues = null;
+    this.settingsLayout = false;
     this._values = {};
     this._initialValues = {};
     this._passwordVisible = {};
@@ -2221,12 +2059,13 @@ var InvokeForm = class extends i4 {
         const result = await mcpClient.callTool(`${this.photonName}/${toolName}`, {});
         let values = [];
         let data = result;
-        if (result && Array.isArray(result.content)) {
-          if (result.isError) {
+        const mcpResult = result;
+        if (result && Array.isArray(mcpResult.content)) {
+          if (mcpResult.isError) {
             hasUnresolved = true;
             continue;
           }
-          const textBlock = result.content.find((c4) => c4.type === "text");
+          const textBlock = mcpResult.content.find((c4) => c4.type === "text");
           if (textBlock?.text) {
             try {
               data = JSON.parse(textBlock.text);
@@ -2326,6 +2165,42 @@ var InvokeForm = class extends i4 {
       const isRequired = Array.isArray(requiredList) ? requiredList.includes(key) : !!schema.required;
       const error = this._errors[key];
       const inputId = `field-${key}`;
+      if (this.settingsLayout) {
+        const isBoolean = schema.type === "boolean" || schema.type === '"boolean"';
+        return b2`
+          <div
+            style="display: grid; grid-template-columns: 200px 1fr; border-bottom: 1px solid var(--border-glass); min-height: 48px;"
+          >
+            <div
+              style="padding: 12px var(--space-md); display: flex; flex-direction: column; justify-content: center; background: var(--bg-glass);"
+            >
+              <label
+                for=${inputId}
+                style="font-size: var(--text-sm); font-weight: 600; color: var(--t-primary); margin: 0;"
+              >
+                ${formatLabel(key)}
+              </label>
+              ${schema.description ? b2`<span
+                    style="font-size: var(--text-2xs); color: var(--t-muted); margin-top: 2px; line-height: 1.3;"
+                    >${this._cleanDescription(schema.description, schema)}</span
+                  >` : ""}
+            </div>
+            <div
+              style="padding: ${isBoolean ? "8px" : "6px"} var(--space-md); display: flex; align-items: center;"
+            >
+              ${this._renderInput(key, schema, !!error, inputId)}
+              ${error ? b2`<div
+                    class="error-text"
+                    style="margin-left: 8px;"
+                    id="${inputId}-error"
+                    role="alert"
+                  >
+                    ${error}
+                  </div>` : ""}
+            </div>
+          </div>
+        `;
+      }
       return b2`
         <div class="form-group">
           <label for=${inputId}>
@@ -3562,7 +3437,7 @@ var InvokeForm = class extends i4 {
   }
   /** Cancel with dirty check. Called by parent chrome wrapper. */
   async handleCancel() {
-    if (this.isDirty && !await confirmDialog("You have unsaved changes. Discard them?", {
+    if (this.isDirty && !await confirmElicit("You have unsaved changes. Discard them?", {
       confirm: "Discard",
       destructive: true
     })) {
@@ -4130,6 +4005,9 @@ __decorateClass([
 __decorateClass([
   n4({ type: Object })
 ], InvokeForm.prototype, "sharedValues", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], InvokeForm.prototype, "settingsLayout", 2);
 __decorateClass([
   r5()
 ], InvokeForm.prototype, "_values", 2);