@portel/photon 1.17.5 → 1.18.0

package/dist/beam.bundle.js

@@ -24254,15 +24254,15 @@ var BeamApp = class extends i4 {
       mcpClient.on("progress", (data) => {
         this._log("info", data.message || "Processing...");
         if (typeof data.progress === "number") {
-          if (data.progress > 0 || !this._progress) {
+          if (data.progress > 0) {
             this._progress = {
               value: data.total ? data.progress / data.total : data.progress,
               message: data.message || "Processing..."
             };
-          } else if (this._progress && data.message) {
+          } else {
             this._progress = {
-              ...this._progress,
-              message: data.message
+              value: -1,
+              message: data.message || "Processing..."
             };
           }
         }
@@ -26785,10 +26785,10 @@ ${photon.errorMessage || "Unknown error"}</pre
         }
         break;
       case "remember-values":
-        this._rememberFormValues = !this._rememberFormValues;
+        this._toggleRememberValues();
         break;
       case "verbose-logging":
-        this._verboseLogging = !this._verboseLogging;
+        this._toggleVerboseLogging();
         break;
       case "run-tests":
         void this._runTests();
@@ -36265,12 +36265,14 @@ var ResultViewer = class extends i4 {
         "qr",
         "slides",
         "checklist",
-        "article"
+        "article",
+        "magazine"
       ].includes(format)) {
         return format;
       }
       if (format === "md") return "markdown";
       if (format === "presentation") return "slides";
+      if (format === "article") return "magazine";
     }
     const data = this.result;
     if (data && typeof data === "object" && !Array.isArray(data) && typeof data._photonType === "string") {
@@ -36422,8 +36424,9 @@ var ResultViewer = class extends i4 {
         return typeof data === "string";
       case "checklist":
         return Array.isArray(data);
+      case "magazine":
       case "article":
-        return typeof data === "object" && data !== null && typeof data.text === "string";
+        return typeof data === "string" || typeof data === "object" && data !== null && typeof data.text === "string";
       default:
         return true;
     }
@@ -36452,7 +36455,10 @@ var ResultViewer = class extends i4 {
       case "tree":
         return this._renderTree(filteredData);
       case "markdown": {
-        const mdData = Array.isArray(filteredData) ? filteredData.join("\n\n---\n\n") : filteredData;
+        if (Array.isArray(filteredData) && filteredData.length > 1) {
+          return this._renderMarkdownStack(filteredData);
+        }
+        const mdData = Array.isArray(filteredData) ? filteredData[0] : filteredData;
         return this._renderMarkdown(mdData);
       }
       case "html":
@@ -36489,8 +36495,9 @@ var ResultViewer = class extends i4 {
         return this._renderSlides(filteredData);
       case "checklist":
         return this._renderChecklist(filteredData);
+      case "magazine":
       case "article":
-        return this._renderArticle(filteredData);
+        return this._renderMagazine(filteredData);
       case "json":
       default:
         return this._renderJson(filteredData);
@@ -36991,10 +36998,34 @@ ${rows}`);
     }
     return { body, table: tables.length ? tables.join("\n\n") + "\n\n" : "" };
   }
+  _renderMarkdownStack(rawItems) {
+    const items = rawItems.filter((s5) => s5 && s5.trim());
+    const marked2 = window.marked;
+    return b2`
+      <div style="display:flex; flex-direction:column; gap:0;">
+        <span
+          style="font-size:12px; color:var(--t-muted); padding-bottom:12px; border-bottom:1px solid var(--border-glass); margin-bottom:4px;"
+        >
+          ${items.length} results
+        </span>
+        ${items.map((item, i7) => {
+      const htmlContent = marked2 ? marked2.parse(item, { breaks: false, gfm: true }) : item;
+      return b2`
+            <div
+              class="markdown-content"
+              style="padding:12px 0; ${i7 < items.length - 1 ? "border-bottom:1px solid var(--border-glass);" : ""}"
+            >
+              ${o5(htmlContent)}
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
   _renderMarkdown(filteredData) {
     const data = filteredData !== void 0 ? filteredData : this.result;
     const marked2 = window.marked;
-    if (Array.isArray(this.result) && this.result.length > 1 && marked2) {
+    if (Array.isArray(this.result) && this.result.length > 1 && marked2 && !this.outputFormat) {
       const query = this._filterQuery?.trim().toLowerCase() || "";
       const allMermaidBlocks = [];
       const allCodeBlocks = [];
@@ -39632,7 +39663,45 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
       </div>
     `;
   }
-  // ── Article Renderer (Pretext-powered magazine layout) ──
+  // ── Magazine Renderer — markdown-powered multi-column layout ──
+  _renderMagazine(data) {
+    const text = typeof data === "string" ? data : data?.text || "";
+    const images = (typeof data === "object" && !Array.isArray(data) ? data?.images : null) || [];
+    if (!text) {
+      return b2`<div class="empty-state">No content</div>`;
+    }
+    const columnCount = Math.min(4, Math.max(1, parseInt(this.layoutHints?.columns || "2", 10)));
+    const marked2 = window.marked;
+    if (!marked2) return this._renderText(text);
+    const { html: bodyHtml, mermaidBlocks, codeBlocks } = this._parseRichMarkdown(text);
+    const effectiveCols = columnCount;
+    let finalHtml = bodyHtml;
+    if (images.length > 0) {
+      const paragraphs = finalHtml.split(/(?=<(?:p|h[23456]|blockquote)[\s>])/i);
+      const interval = Math.max(2, Math.floor(paragraphs.length / (images.length + 1)));
+      for (let i7 = images.length - 1; i7 >= 0; i7--) {
+        const img = images[i7];
+        const pos = img.position || (i7 % 2 === 0 ? "right" : "left");
+        const maxW = pos === "full" ? "100%" : img.width ? Math.min(img.width, 280) + "px" : "280px";
+        const imgHtml = `<div class="magazine-float ${pos}" style="max-width:${maxW}"><img src="${img.url}" alt="" loading="lazy" />${img.caption ? `<div class="caption">${img.caption}</div>` : ""}</div>`;
+        const insertIdx = Math.min((i7 + 1) * interval, paragraphs.length - 1);
+        paragraphs.splice(insertIdx, 0, imgHtml);
+      }
+      finalHtml = paragraphs.join("");
+    }
+    if (mermaidBlocks.length > 0) {
+      this._pendingMermaidBlocks = mermaidBlocks;
+    }
+    if (codeBlocks.length > 0) {
+      this._pendingCodeBlocks = codeBlocks;
+    }
+    return b2`
+      <div class="magazine-layout markdown-content" style="column-count: ${effectiveCols}">
+        ${o5(finalHtml)}
+      </div>
+    `;
+  }
+  // ── Legacy Article Renderer (kept for backward compat, delegates to magazine) ──
   _renderArticle(data) {
     if (!data || typeof data.text !== "string") {
       return b2`<div class="empty-state">No article content</div>`;
@@ -40612,23 +40681,20 @@ ${str}</pre
         `;
       }
       return b2`
-        <div style="max-height: 200px; overflow-y: auto; font-size: 0.85rem;">
-          ${value.slice(0, 5).map(
+        <div class="dash-mini-list" style="max-height: 200px; overflow-y: auto;">
+          <table style="width:100%; border-collapse:collapse; font-size:12px;">
+            ${value.slice(0, 5).map(
         (item) => b2`
-              <div
-                style="padding: 6px 8px; border-bottom: 1px solid var(--border-glass); display:flex; gap:8px;"
-              >
-                ${Object.entries(item).slice(0, 3).map(
-          ([, v2]) => b2`<span
-                        style="flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;"
-                        >${String(v2)}</span
-                      >`
+                <tr style="border-bottom: 1px solid var(--border-glass);">
+                  ${Object.entries(item).slice(0, 5).map(
+          ([, v2]) => b2`<td style="padding:5px 6px; white-space:nowrap;">${String(v2)}</td>`
         )}
-              </div>
-            `
+                </tr>
+              `
       )}
+          </table>
           ${value.length > 5 ? b2`<div
-                style="padding:6px 8px;color:var(--t-muted);text-align:center;font-style:italic;"
+                style="padding:6px 8px;color:var(--t-muted);text-align:center;font-style:italic;font-size:12px;"
               >
                 +${value.length - 5} more
               </div>` : ""}
@@ -41805,6 +41871,115 @@ ResultViewer.styles = [
         animation: article-fade-in 0.3s ease both;
       }
 
+      /* Magazine: override flex/height constraints so CSS columns work */
+      .container:has(.magazine-layout) {
+        display: block;
+        height: auto;
+        overflow: auto;
+      }
+
+      .container:has(.magazine-layout) > .content {
+        flex: none;
+        overflow: visible;
+      }
+
+      /* Magazine Layout — markdown-powered multi-column */
+      .magazine-layout {
+        line-height: 1.7;
+        font-size: 15px;
+        color: var(--t-primary);
+        column-gap: 32px;
+        column-rule: 1px solid color-mix(in srgb, var(--border-glass) 50%, transparent);
+        animation: article-fade-in 0.3s ease both;
+      }
+
+      .magazine-layout h1 {
+        column-span: all;
+        margin-top: 0.6em;
+        margin-bottom: 0.3em;
+      }
+
+      .magazine-layout h1:first-child {
+        margin-top: 0;
+      }
+
+      .magazine-layout h2 {
+        margin-top: 0.8em;
+        margin-bottom: 0.3em;
+        break-after: avoid;
+      }
+
+      .magazine-layout > p:first-of-type::first-letter {
+        float: left;
+        font-size: 3.2em;
+        line-height: 0.8;
+        padding-right: 8px;
+        padding-top: 4px;
+        font-weight: 600;
+        color: var(--accent);
+      }
+
+      .magazine-float {
+        break-inside: avoid;
+        margin-bottom: 12px;
+        border-radius: var(--radius-sm);
+        overflow: hidden;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+
+      .magazine-float.left {
+        float: left;
+        margin: 0 20px 12px 0;
+        max-width: 45%;
+        shape-outside: margin-box;
+      }
+
+      .magazine-float.right {
+        float: right;
+        margin: 0 0 12px 20px;
+        max-width: 45%;
+        shape-outside: margin-box;
+      }
+
+      .magazine-float.full {
+        column-span: all;
+        width: 100%;
+        float: none;
+        margin: 1em 0;
+      }
+
+      .magazine-float img {
+        width: 100%;
+        display: block;
+      }
+
+      .magazine-float .caption {
+        padding: 6px 10px;
+        font-size: 11px;
+        font-style: italic;
+        color: var(--t-muted);
+        background: var(--bg-glass);
+      }
+
+      .magazine-layout p,
+      .magazine-layout blockquote,
+      .magazine-layout ul,
+      .magazine-layout ol,
+      .magazine-layout pre {
+        break-inside: avoid;
+      }
+
+      .magazine-layout blockquote {
+        border-left: 3px solid var(--accent);
+        padding-left: 16px;
+        margin: 0.8em 0;
+        color: var(--t-secondary);
+      }
+
+      .magazine-layout pre {
+        column-span: all;
+      }
+
       .status-badge {
         padding: 2px 8px;
         border-radius: var(--radius-full);
@@ -42984,6 +43159,8 @@ ResultViewer.styles = [
         border: 1px solid var(--border-glass);
         border-radius: var(--radius-md);
         overflow: hidden;
+        display: flex;
+        flex-direction: column;
       }
 
       .dashboard-panel-header {
@@ -42997,11 +43174,25 @@ ResultViewer.styles = [
       }
 
       .dashboard-panel-content {
-        padding: var(--space-xs);
+        padding: var(--space-sm);
         display: flex;
+        flex-direction: column;
         align-items: center;
         justify-content: center;
         text-align: center;
+        flex: 1;
+        min-height: 120px;
+      }
+
+      /* Metrics center their big number + label */
+      .dashboard-panel-content > .metric-card,
+      .dashboard-panel-content > .gauge-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        flex: 1;
       }
 
       .dashboard-panel .chart-container {
@@ -43012,8 +43203,11 @@ ResultViewer.styles = [
         align-items: center;
       }
 
-      .dashboard-panel .table-wrapper {
+      /* Tables and lists take full width, left-aligned */
+      .dashboard-panel .table-wrapper,
+      .dashboard-panel .dash-mini-list {
         width: 100%;
+        text-align: left;
       }
 
       .dashboard-panel .chart-container canvas {
@@ -43022,11 +43216,14 @@ ResultViewer.styles = [
       }
 
       .dashboard-panel .metric-container {
-        padding: var(--space-xs);
+        padding: var(--space-md);
+        flex: 1;
+        justify-content: center;
       }
 
       .dashboard-panel .metric-value {
-        font-size: var(--text-3xl);
+        font-size: 2rem;
+        font-weight: 700;
       }
 
       /* ═══════════════════════════════════════════════════════════════