@portel/photon 1.17.2 → 1.17.4

package/dist/beam.bundle.js

@@ -18147,6 +18147,7 @@ var theme = i`
     border: 1px solid var(--border-glass);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-sm);
+    color: inherit;
   }
 
   .text-gradient {
@@ -18188,21 +18189,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 {
@@ -19264,6 +19269,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 +22809,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 +23179,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 +23482,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 +23513,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 +23615,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 +23690,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 +24934,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 +25793,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 +26338,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 +26382,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,
@@ -26316,7 +26506,9 @@ ${photon.errorMessage || "Unknown error"}</pre
   _renderMethodBody(opts) {
     const hasParams = !!opts.method?.params?.properties && Object.keys(opts.method.params.properties).length > 0;
     return b2`
-      <div style="display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto;">
+      <div
+        style="display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable;"
+      >
         ${opts.appSurface ? "" : this._renderDescription(opts.method.description)}
         ${opts.appSurface && !hasParams ? "" : b2`
               <invoke-form
@@ -26333,8 +26525,9 @@ ${photon.errorMessage || "Unknown error"}</pre
                     <div class="form-chrome">
                       ${hasParams ? b2`<button
                             class="btn-secondary"
-                            @click=${() => {
-      const form = this.shadowRoot?.querySelector("invoke-form");
+                            @click=${(e8) => {
+      const panel = e8.target.closest(".method-detail");
+      const form = panel?.querySelector("invoke-form");
       form?.handleCancel();
     }}
                             ?disabled=${opts.executing}
@@ -26343,8 +26536,9 @@ ${photon.errorMessage || "Unknown error"}</pre
                           </button>` : ""}
                       <button
                         class="btn-primary"
-                        @click=${() => {
-      const form = this.shadowRoot?.querySelector("invoke-form");
+                        @click=${(e8) => {
+      const panel = e8.target.closest(".method-detail");
+      const form = panel?.querySelector("invoke-form");
       form?.handleSubmit();
     }}
                         ?disabled=${opts.executing}
@@ -26734,9 +26928,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();
@@ -28637,6 +28834,7 @@ BeamApp.styles = [
         overflow-y: auto;
         overflow-x: hidden;
         padding: var(--space-lg);
+        scrollbar-gutter: stable;
       }
 
       /* Page transition when switching photons */
@@ -31002,6 +31200,8 @@ BeamSidebar.styles = [
       .sidebar-content {
         flex: 1;
         overflow-y: auto;
+        padding-right: 4px;
+        scrollbar-gutter: stable;
       }
 
       .empty-state {
@@ -32787,7 +32987,15 @@ var InvokeForm = class extends i4 {
       return b2`<div class="form-container"></div>`;
     }
     return b2`
-      <div class="form-container">
+      <div
+        class="form-container"
+        @keydown=${(e8) => {
+      if (e8.key === "Enter" && !e8.shiftKey && !e8.target?.matches("textarea")) {
+        e8.preventDefault();
+        this.handleSubmit();
+      }
+    }}
+      >
         ${this._viewMode === "form" ? this._renderFields() : this._renderJsonEditor()}
       </div>
     `;
@@ -34038,8 +34246,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"));
@@ -36206,7 +36417,7 @@ var ResultViewer = class extends i4 {
       case "mermaid":
         return typeof data === "string";
       case "markdown":
-        return typeof data === "string";
+        return typeof data === "string" || Array.isArray(data) && data.every((i7) => typeof i7 === "string");
       case "slides":
         return typeof data === "string";
       case "checklist":
@@ -36240,8 +36451,10 @@ var ResultViewer = class extends i4 {
         return this._renderChips(filteredData);
       case "tree":
         return this._renderTree(filteredData);
-      case "markdown":
-        return this._renderMarkdown(filteredData);
+      case "markdown": {
+        const mdData = Array.isArray(filteredData) ? filteredData.join("\n\n---\n\n") : filteredData;
+        return this._renderMarkdown(mdData);
+      }
       case "html":
         return this._renderHtml(filteredData);
       case "text":
@@ -42785,15 +42998,24 @@ ResultViewer.styles = [
 
       .dashboard-panel-content {
         padding: var(--space-xs);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
       }
 
       .dashboard-panel .chart-container {
         max-height: 250px;
+        width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
       }
 
+      .dashboard-panel .table-wrapper {
+        width: 100%;
+      }
+
       .dashboard-panel .chart-container canvas {
         max-width: 100%;
         max-height: 230px;
@@ -44535,7 +44757,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 +44823,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 +94381,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 }));
   }