@portel/photon 1.18.0 → 1.20.0

package/dist/beam-form.bundle.js

@@ -1920,7 +1920,7 @@ ConfirmDialog.styles = [
       }
 
       .btn-cancel:hover {
-        background: var(--bg-glass-strong, rgba(255, 255, 255, 0.08));
+        background: var(--bg-glass-strong);
       }
 
       .btn-confirm {
@@ -1960,10 +1960,12 @@ ConfirmDialog = __decorateClass([
   t3("confirm-dialog")
 ], ConfirmDialog);
 async function confirmDialog(message, options) {
-  let dialog = document.querySelector("confirm-dialog");
+  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");
-    document.body.appendChild(dialog);
+    root.appendChild(dialog);
   }
   return dialog.show(message, options);
 }
@@ -2114,6 +2116,7 @@ var InvokeForm = class extends i4 {
     this.methodName = "";
     this.rememberValues = false;
     this.sharedValues = null;
+    this.settingsLayout = false;
     this._values = {};
     this._initialValues = {};
     this._passwordVisible = {};
@@ -2219,12 +2222,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);
@@ -2324,6 +2328,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}>
@@ -4128,6 +4168,9 @@ __decorateClass([
 __decorateClass([
   n4({ type: Object })
 ], InvokeForm.prototype, "sharedValues", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], InvokeForm.prototype, "settingsLayout", 2);
 __decorateClass([
   r5()
 ], InvokeForm.prototype, "_values", 2);