@portel/photon 1.17.6 → 1.19.0

package/dist/beam.bundle.js

@@ -19402,7 +19402,7 @@ ConfirmDialog.styles = [
       }
 
       .btn-cancel:hover {
-        background: var(--bg-glass-strong, rgba(255, 255, 255, 0.08));
+        background: var(--bg-glass-strong);
       }
 
       .btn-confirm {
@@ -19442,10 +19442,12 @@ ConfirmDialog = __decorateClass([
   t4("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);
 }
@@ -23181,11 +23183,19 @@ var BeamApp = class extends i4 {
     };
     this._handleDeletePhoton = async () => {
       this._closeSettingsMenu();
-      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");
+      if (await confirmDialog(`Remove "${this._selectedPhoton?.name}"? It will be moved to trash.`, {
+        confirm: "Remove",
+        destructive: true
+      })) {
+        const deletedName = this._selectedPhoton?.name;
+        await this._invokeMakerMethod("delete");
+        if (deletedName) {
+          this._photons = this._photons.filter((p5) => p5.name !== deletedName);
+          this._selectedPhoton = this._photons[0] || null;
+          this._selectedMethod = null;
+          this._lastResult = null;
+          this.requestUpdate();
+        }
       }
     };
     /**
@@ -24254,15 +24264,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..."
             };
           }
         }
@@ -24335,6 +24345,7 @@ var BeamApp = class extends i4 {
               "stack",
               "columns",
               "qr",
+              "guide",
               "slides",
               "presentation"
             ]);
@@ -26785,10 +26796,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();
@@ -35462,6 +35473,12 @@ var ResultViewer = class extends i4 {
     // per-slide bg (color, url, gradient)
     this._slidesEffects = /* @__PURE__ */ new Map();
     // per-slide element effect
+    this._slidesMoods = /* @__PURE__ */ new Map();
+    // per-slide mood (dramatic, techy, etc.)
+    this._slidesGlobalMood = "";
+    // frontmatter mood default
+    this._slidesBgEffects = /* @__PURE__ */ new Map();
+    // per-slide bg effect (gradient-mesh, etc.)
     this._slidesCols = /* @__PURE__ */ new Map();
     // per-slide column count
     this._slidesBuilds = /* @__PURE__ */ new Map();
@@ -36265,12 +36282,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") {
@@ -36421,9 +36440,11 @@ var ResultViewer = class extends i4 {
       case "slides":
         return typeof data === "string";
       case "checklist":
+      case "guide":
         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 +36473,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 +36513,11 @@ var ResultViewer = class extends i4 {
         return this._renderSlides(filteredData);
       case "checklist":
         return this._renderChecklist(filteredData);
+      case "guide":
+        return this._renderGuide(filteredData);
+      case "magazine":
       case "article":
-        return this._renderArticle(filteredData);
+        return this._renderMagazine(filteredData);
       case "json":
       default:
         return this._renderJson(filteredData);
@@ -36991,10 +37018,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 = [];
@@ -37396,6 +37447,8 @@ ${code}</pre>`;
     this._slidesTransitions.clear();
     this._slidesBackgrounds.clear();
     this._slidesEffects.clear();
+    this._slidesMoods.clear();
+    this._slidesBgEffects.clear();
     this._slidesCols.clear();
     this._slidesBuilds.clear();
     slides.forEach((slide, i7) => {
@@ -37405,10 +37458,15 @@ ${code}</pre>`;
       if (bgMatch) this._slidesBackgrounds.set(i7, bgMatch[1].trim());
       const fxMatch = slide.match(/<!--\s*effect:\s*(\S+)\s*-->/);
       if (fxMatch) this._slidesEffects.set(i7, fxMatch[1].trim());
+      const moodMatch = slide.match(/<!--\s*mood:\s*(\w+)\s*-->/);
+      if (moodMatch) this._slidesMoods.set(i7, moodMatch[1].trim());
+      const bgFxMatch = slide.match(/<!--\s*background:\s*(\S+)\s*-->/);
+      if (bgFxMatch) this._slidesBgEffects.set(i7, bgFxMatch[1].trim());
       const colMatch = slide.match(/<!--\s*cols:\s*(\d+)\s*-->/);
       if (colMatch) this._slidesCols.set(i7, Math.min(Math.max(parseInt(colMatch[1], 10), 2), 4));
       if (/<!--\s*build\s*-->/.test(slide)) this._slidesBuilds.set(i7, true);
     });
+    this._slidesGlobalMood = config3.mood || "";
     const defaultTheme2 = "auto";
     return { slides, theme: config3.theme || defaultTheme2, config: config3 };
   }
@@ -37460,7 +37518,7 @@ ${code}</pre>`;
     return this._slidesBridgeScript || "";
   }
   /** Build an iframe srcdoc for a slide with the bridge loaded */
-  _buildSlideSrcdoc(slideHtml, codeBlocks, headerText, footerText, pageNum, slideBg, slideEffect) {
+  _buildSlideSrcdoc(slideHtml, codeBlocks, headerText, footerText, pageNum, slideBg, slideEffect, slideBgEffect) {
     const bridge = this._slidesBridgeScript || "";
     const photonPrefix = this.photonName ? this.photonName + "/" : "";
     let html = slideHtml;
@@ -37485,11 +37543,15 @@ ${code}</pre>`;
       }
     }
     const themeClass = this._slidesThemeClass || "slides-theme-default";
+    const themeName = themeClass.replace("slides-theme-", "");
+    const fontSpec = ResultViewer._THEME_FONTS[themeName];
+    const fontLink = fontSpec ? `<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=${fontSpec}&display=swap">` : "";
     return `<!doctype html>
 <html lang="en" class="${themeClass}">
 <head>
 <meta charset="UTF-8">
 <meta name="photon-template" content="true">
+${fontLink}
 ${bridge}
 <style>
   /* reveal.js-style scaling: fixed design canvas + transform:scale() */
@@ -37547,6 +37609,20 @@ ${bridge}
   [data-enter="flip-in"] { animation: motion-flip-in 0.5s cubic-bezier(0.16,1,0.3,1) both; }
   [data-enter="fade-in"] { animation: motion-fade-in 0.3s cubic-bezier(0.16,1,0.3,1) both; }
   [data-enter="drop-in"] { animation: motion-drop-in 0.5s cubic-bezier(0.16,1,0.3,1) both; }
+  [data-enter="mood-dramatic"] { animation: mood-dramatic 0.6s ease both; }
+  [data-enter="mood-techy"] { animation: mood-techy 0.3s ease-out both; }
+  [data-enter="mood-playful"] { animation: mood-playful 0.4s ease both; }
+  [data-enter="mood-calm"] { animation: mood-calm 0.8s ease-in-out both; }
+  /* Hide slide children initially, auto-reveal after 1.5s fallback if stagger doesn't fire */
+  .slide-body > :not(.slide-content-area):not([data-enter]) {
+    opacity: 0;
+    animation: stagger-fallback 0.3s ease 1.5s both;
+  }
+  .slide-content-area > :not([data-enter]) {
+    opacity: 0;
+    animation: stagger-fallback 0.3s ease 1.5s both;
+  }
+  @keyframes stagger-fallback { to { opacity: 1; } }
   @media (prefers-reduced-motion: reduce) {
     [data-enter] { animation: none !important; opacity: 1 !important; }
   }
@@ -37677,6 +37753,8 @@ ${bridge}
   /* Full-bleed image */
   .hero { width: 100%; border-radius: var(--radius-lg, 14px);
     box-shadow: var(--shadow-lg, 0 24px 60px rgba(0,0,0,0.28)); }
+  /* Theme presets (shared with outer shadow DOM) */
+  ${ResultViewer._BRIDGE_THEME_CSS}
 </style>
 <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"><\/script>
 <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-typescript.min.js"><\/script>
@@ -37695,7 +37773,8 @@ ${bridge}
 </head>
 <body>
 ${this._buildSlideBgHtml(slideBg || "")}
-<div class="slide-canvas"${slideEffect ? ` data-effect="${slideEffect}"` : ""}>
+${slideBgEffect ? `<div style="position:absolute;inset:0;pointer-events:none;z-index:0;${slideBgEffect === "gradient-mesh" ? "background:radial-gradient(ellipse at 20% 50%,rgba(120,80,255,0.15) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(255,100,80,0.12) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(80,200,255,0.1) 0%,transparent 50%);animation:bgdrift 12s ease-in-out infinite alternate;" : slideBgEffect === "noise" ? "opacity:0.06;background-image:url(&quot;data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27200%27 height=%27200%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.75%27 numOctaves=%274%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E&quot;);" : slideBgEffect === "grid" ? "background-image:linear-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.05) 1px,transparent 1px);background-size:32px 32px;" : slideBgEffect === "particles" ? "overflow:hidden;" : ""}"></div>` : ""}
+<div class="slide-canvas"${slideEffect ? ` data-effect="${slideEffect}"` : ""} style="position:relative;z-index:1;">
 ${headerText ? `<div class="slide-header">${headerText}</div>` : ""}
 <div class="slide-body">${html}</div>
 ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</span><span>${pageNum || ""}</span></div>` : ""}
@@ -37748,6 +37827,74 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
     return document.querySelectorAll('.slide-fragment:not(.visible)').length === 0;
   };
 <\/script>
+<script>
+  // Text effects for bridge slides
+  (function() {
+    var canvas = document.querySelector('.slide-canvas');
+    var effect = canvas ? canvas.getAttribute('data-effect') : '';
+    if (!effect) return;
+    var heading = document.querySelector('.slide-body h1, .slide-body h2');
+    if (!heading) return;
+    var text = heading.textContent || '';
+    if (!text) return;
+
+    if (effect === 'typing') {
+      heading.textContent = '';
+      heading.style.borderRight = '2px solid currentColor';
+      var i = 0;
+      function typeChar() {
+        if (i < text.length) {
+          heading.textContent += text[i]; i++;
+          requestAnimationFrame(function() { setTimeout(typeChar, 40 + Math.random() * 30); });
+        } else { setTimeout(function() { heading.style.borderRight = 'none'; }, 800); }
+      }
+      setTimeout(typeChar, 300);
+    } else if (effect === 'scramble') {
+      var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+      var revealed = new Array(text.length).fill(false);
+      var iter = 0;
+      function scrambleStep() {
+        var d = '';
+        for (var j = 0; j < text.length; j++) {
+          d += (revealed[j] || text[j] === ' ') ? text[j] : chars[Math.floor(Math.random() * chars.length)];
+        }
+        heading.textContent = d;
+        if (iter > 5) {
+          var ur = []; for (var k = 0; k < revealed.length; k++) { if (!revealed[k] && text[k] !== ' ') ur.push(k); }
+          if (ur.length > 0) revealed[ur[Math.floor(Math.random() * ur.length)]] = true;
+        }
+        iter++;
+        if (ur && ur.length > 0) requestAnimationFrame(scrambleStep);
+        else heading.textContent = text;
+      }
+      setTimeout(scrambleStep, 300);
+    } else if (effect === 'wave') {
+      heading.innerHTML = '';
+      text.split('').forEach(function(ch, idx) {
+        var s = document.createElement('span');
+        s.textContent = ch === ' ' ? '\\u00A0' : ch;
+        s.style.display = 'inline-block';
+        s.style.opacity = '0';
+        s.style.transform = 'translateY(20px)';
+        s.style.transition = 'all 0.4s ease ' + (idx * 30) + 'ms';
+        heading.appendChild(s);
+        requestAnimationFrame(function() { s.style.opacity = '1'; s.style.transform = 'none'; });
+      });
+    } else if (effect === 'fly-in') {
+      heading.innerHTML = '';
+      text.split(' ').forEach(function(word, idx) {
+        var s = document.createElement('span');
+        s.textContent = word + ' ';
+        s.style.display = 'inline-block';
+        s.style.opacity = '0';
+        s.style.transform = 'translate(' + ((Math.random()-0.5)*200) + 'px,' + ((Math.random()-0.5)*100) + 'px)';
+        s.style.transition = 'all 0.6s cubic-bezier(0.16,1,0.3,1) ' + (idx * 80) + 'ms';
+        heading.appendChild(s);
+        requestAnimationFrame(function() { s.style.opacity = '1'; s.style.transform = 'none'; });
+      });
+    }
+  })();
+<\/script>
 </body>
 </html>`;
   }
@@ -37824,6 +37971,17 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
     const resolvedTheme = rawTheme === "auto" || rawTheme === "default" ? this.theme === "light" ? "uncover" : "default" : rawTheme;
     const themeClass = `slides-theme-${resolvedTheme}`;
     this._slidesThemeClass = themeClass;
+    const fontSpec = ResultViewer._THEME_FONTS[resolvedTheme];
+    if (fontSpec) {
+      const linkId = `photon-font-${resolvedTheme}`;
+      if (!document.getElementById(linkId)) {
+        const link2 = document.createElement("link");
+        link2.id = linkId;
+        link2.rel = "stylesheet";
+        link2.href = `https://fonts.googleapis.com/css2?family=${fontSpec}&display=swap`;
+        document.head.appendChild(link2);
+      }
+    }
     const bgOverride = config3.backgroundColor ? `background:${config3.backgroundColor};` : "";
     const colorOverride = config3.color ? `color:${config3.color};` : "";
     const viewportStyle = bgOverride + colorOverride;
@@ -37833,6 +37991,7 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
     const currentTransition = this._getSlideTransition(idx);
     const slideBg = this._slidesBackgrounds.get(idx) || "";
     const slideEffect = this._slidesEffects.get(idx) || "";
+    const slideBgEffect = this._slidesBgEffects.get(idx) || "";
     const slideBgStyle = this._buildSlideBgStyle(slideBg);
     const isVideoBg = /\.(mp4|webm|mov)(\?|$)/i.test(slideBg) || slideBg.startsWith("video:");
     return b2`
@@ -37855,6 +38014,7 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
                   loop
                   playsinline
                 ></video>` : b2`<div class="slides-bg-layer" style="${slideBgStyle}"></div>` : ""}
+          ${slideBgEffect ? b2`<div class="slides-bgfx slides-bgfx-${slideBgEffect}"></div>` : ""}
           <div class="slides-content">
             ${this._slidesBridgeScript ? b2`<iframe
                   class="slide-bridge-frame"
@@ -37865,7 +38025,8 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
       footerText,
       showPaginate ? `${idx + 1} / ${total}` : "",
       slideBg,
-      slideEffect
+      slideEffect,
+      slideBgEffect
     )}
                   sandbox="allow-scripts allow-same-origin allow-popups"
                   frameborder="0"
@@ -37943,8 +38104,6 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
           position: relative;
           border-radius: var(--radius-md, 8px);
           outline: none;
-          background: #1a1a2e;
-          color: #e5e5e5;
           font-family:
             system-ui,
             -apple-system,
@@ -37959,14 +38118,14 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
           display: flex;
           align-items: center;
           justify-content: center;
-          padding: 48px 64px;
+          padding: clamp(24px, 4vw, 48px) clamp(32px, 5vw, 64px);
           overflow: hidden;
           position: relative;
         }
         .slides-container:fullscreen .slides-viewport {
           flex: 1;
           aspect-ratio: auto;
-          padding: 64px 120px;
+          padding: clamp(32px, 5vh, 64px) clamp(48px, 8vw, 120px);
         }
         .slides-container:fullscreen .slides-viewport:has(.slide-bridge-frame) {
           padding: 0;
@@ -38021,26 +38180,26 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
           z-index: -1;
         }
         .slides-content h1 {
-          font-size: 2.4em;
+          font-size: clamp(1.8rem, 5vw, 3.5rem);
           margin: 0 0 0.4em;
           font-weight: 800;
           letter-spacing: -0.02em;
           line-height: 1.15;
         }
         .slides-content h2 {
-          font-size: 1.8em;
+          font-size: clamp(1.4rem, 3.5vw, 2.4rem);
           margin: 0 0 0.4em;
           font-weight: 700;
           letter-spacing: -0.01em;
         }
         .slides-content h3 {
-          font-size: 1.3em;
+          font-size: clamp(1.1rem, 2.5vw, 1.6rem);
           margin: 0 0 0.3em;
           font-weight: 600;
         }
         .slides-content p {
           margin: 0.5em 0;
-          font-size: 1.15em;
+          font-size: clamp(0.95rem, 1.8vw, 1.25rem);
           line-height: 1.65;
         }
         .slides-content ul,
@@ -38345,6 +38504,300 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
           background: #191a21;
         }
 
+        /* ═══ AUTO THEME — inherits MCP client colors ═══ */
+        .slides-theme-auto {
+          background: var(--bg-panel, #1a1a2e);
+          color: var(--t-primary, #e0e0e0);
+        }
+        .slides-theme-auto .slides-content h1,
+        .slides-theme-auto .slides-content h2 {
+          color: var(--accent, #6366f1);
+        }
+        .slides-theme-auto .slides-controls {
+          background: var(--bg-glass, rgba(0, 0, 0, 0.4));
+        }
+
+        /* ═══ NEON THEME ═══ */
+        .slides-theme-neon {
+          background: #0a0a1a;
+          color: #e0e0ff;
+          font-family: 'JetBrains Mono', var(--font-mono), monospace;
+        }
+        .slides-theme-neon .slides-content h1,
+        .slides-theme-neon .slides-content h2 {
+          color: #00f0ff;
+          text-shadow:
+            0 0 10px rgba(0, 240, 255, 0.5),
+            0 0 40px rgba(0, 240, 255, 0.2);
+        }
+        .slides-theme-neon .slides-content blockquote {
+          border-left: 3px solid #00f0ff;
+          box-shadow: -4px 0 20px rgba(0, 240, 255, 0.15);
+        }
+        .slides-theme-neon .slides-content pre {
+          border: 1px solid rgba(0, 240, 255, 0.2);
+          box-shadow: 0 0 15px rgba(0, 240, 255, 0.1);
+        }
+        .slides-theme-neon .slides-viewport::after {
+          content: '';
+          position: absolute;
+          inset: 0;
+          pointer-events: none;
+          background: repeating-linear-gradient(
+            0deg,
+            transparent,
+            transparent 2px,
+            rgba(0, 240, 255, 0.015) 2px,
+            rgba(0, 240, 255, 0.015) 4px
+          );
+          z-index: 2;
+        }
+        .slides-theme-neon .slides-controls {
+          background: #050510;
+        }
+
+        /* ═══ EDITORIAL THEME ═══ */
+        .slides-theme-editorial,
+        .slides-theme-editorial .slides-viewport {
+          background: #faf8f5;
+          color: #2c2c2c;
+          font-family: Georgia, 'Times New Roman', serif;
+        }
+        .slides-theme-editorial .slides-content h1,
+        .slides-theme-editorial .slides-content h2 {
+          font-family: 'Cormorant Garamond', Georgia, serif;
+          color: #1a1a1a;
+          font-weight: 600;
+        }
+        .slides-theme-editorial .slides-content h1 {
+          letter-spacing: -0.03em;
+        }
+        .slides-theme-editorial .slides-content p:first-of-type::first-letter {
+          float: left;
+          font-size: 3.4em;
+          line-height: 0.8;
+          padding-right: 8px;
+          padding-top: 4px;
+          font-weight: 700;
+          color: #c0392b;
+          font-family: 'Cormorant Garamond', Georgia, serif;
+        }
+        .slides-theme-editorial .slides-content blockquote {
+          border-left: 2px solid #c0392b;
+          font-style: italic;
+          font-size: 1.15em;
+          color: #555;
+        }
+        .slides-theme-editorial .slides-content hr {
+          border: none;
+          height: 1px;
+          background: linear-gradient(to right, transparent, #ccc, transparent);
+          margin: 1.5em 0;
+        }
+        .slides-theme-editorial .slides-controls {
+          background: #f0ece6;
+          color: #666;
+        }
+
+        /* ═══ BOLD-SIGNAL THEME ═══ */
+        .slides-theme-bold-signal {
+          background: linear-gradient(135deg, #0f0c29, #1a1a3e, #24243e);
+          color: #e8e8f0;
+          font-family: 'Space Grotesk', var(--font-sans), sans-serif;
+        }
+        .slides-theme-bold-signal .slides-content h1 {
+          color: #ff6b35;
+          font-weight: 700;
+        }
+        .slides-theme-bold-signal .slides-content h2 {
+          color: #ffd166;
+        }
+        .slides-theme-bold-signal .slides-content blockquote {
+          background: rgba(255, 107, 53, 0.1);
+          border-left: 4px solid #ff6b35;
+          border-radius: 0 8px 8px 0;
+          padding: 16px 20px;
+        }
+        .slides-theme-bold-signal .slides-controls {
+          background: #0a0820;
+        }
+
+        /* ═══ SWISS THEME ═══ */
+        .slides-theme-swiss,
+        .slides-theme-swiss .slides-viewport {
+          background: #ffffff;
+          color: #1a1a1a;
+          font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif;
+        }
+        .slides-theme-swiss .slides-viewport::before {
+          content: '';
+          position: absolute;
+          inset: 0;
+          pointer-events: none;
+          background-image:
+            linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
+          background-size: 40px 40px;
+          z-index: 0;
+        }
+        .slides-theme-swiss .slides-content {
+          position: relative;
+          z-index: 1;
+        }
+        .slides-theme-swiss .slides-content h1 {
+          color: #e63946;
+          text-transform: uppercase;
+          letter-spacing: 0.05em;
+          font-weight: 900;
+        }
+        .slides-theme-swiss .slides-content h2 {
+          color: #1d3557;
+          font-weight: 700;
+        }
+        .slides-theme-swiss .slides-controls {
+          background: #f1f1f1;
+          color: #333;
+        }
+
+        /* ═══ NOTEBOOK THEME ═══ */
+        .slides-theme-notebook {
+          background: #1a1a2e;
+          color: #3c3c3c;
+        }
+        .slides-theme-notebook .slides-viewport {
+          background: #fdf6e3;
+          border-radius: 8px;
+          margin: 12px;
+          box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
+          border-left: 5px solid #e74c3c;
+        }
+        .slides-theme-notebook .slides-content h1,
+        .slides-theme-notebook .slides-content h2 {
+          font-family: 'Caveat', cursive, sans-serif;
+          color: #2c3e50;
+        }
+        .slides-theme-notebook .slides-content h1 {
+          font-size: clamp(2rem, 6vw, 4rem);
+        }
+        .slides-theme-notebook .slides-controls {
+          background: #f5edd6;
+          color: #666;
+        }
+
+        /* ═══ MOOD KEYFRAMES ═══ */
+        @keyframes mood-dramatic {
+          from {
+            opacity: 0;
+            transform: scale(0.95) translateY(10px);
+          }
+          to {
+            opacity: 1;
+            transform: none;
+          }
+        }
+        @keyframes mood-techy {
+          0% {
+            opacity: 0;
+            transform: translateY(8px);
+            filter: blur(4px);
+          }
+          50% {
+            opacity: 1;
+            filter: blur(0);
+          }
+          100% {
+            transform: none;
+          }
+        }
+        @keyframes mood-playful {
+          0% {
+            opacity: 0;
+            transform: translateY(20px);
+          }
+          60% {
+            transform: translateY(-4px);
+          }
+          80% {
+            transform: translateY(2px);
+          }
+          100% {
+            opacity: 1;
+            transform: none;
+          }
+        }
+        @keyframes mood-calm {
+          from {
+            opacity: 0;
+          }
+          to {
+            opacity: 1;
+          }
+        }
+
+        /* ═══ BACKGROUND EFFECTS ═══ */
+        .slides-bgfx {
+          position: absolute;
+          inset: 0;
+          pointer-events: none;
+          z-index: 0;
+        }
+        .slides-bgfx-gradient-mesh {
+          background:
+            radial-gradient(ellipse at 20% 50%, rgba(120, 80, 255, 0.15) 0%, transparent 50%),
+            radial-gradient(ellipse at 80% 20%, rgba(255, 100, 80, 0.12) 0%, transparent 50%),
+            radial-gradient(ellipse at 50% 80%, rgba(80, 200, 255, 0.1) 0%, transparent 50%);
+          animation: bgfx-drift 12s ease-in-out infinite alternate;
+        }
+        @keyframes bgfx-drift {
+          0% {
+            transform: translate(0, 0) scale(1);
+          }
+          50% {
+            transform: translate(5%, -3%) scale(1.05);
+          }
+          100% {
+            transform: translate(-3%, 4%) scale(1.02);
+          }
+        }
+        .slides-bgfx-noise {
+          opacity: 0.06;
+          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+        }
+        .slides-bgfx-grid {
+          background-image:
+            linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
+          background-size: 32px 32px;
+        }
+        .slides-bgfx-particles::before,
+        .slides-bgfx-particles::after {
+          content: '';
+          position: absolute;
+          width: 4px;
+          height: 4px;
+          border-radius: 50%;
+          background: rgba(255, 255, 255, 0.2);
+          box-shadow:
+            40px 80px 0 rgba(255, 255, 255, 0.15),
+            120px 40px 0 rgba(255, 255, 255, 0.1),
+            200px 120px 0 rgba(255, 255, 255, 0.12),
+            300px 60px 0 rgba(255, 255, 255, 0.08),
+            400px 140px 0 rgba(255, 255, 255, 0.15);
+          animation: bgfx-float 8s ease-in-out infinite alternate;
+        }
+        .slides-bgfx-particles::after {
+          animation-delay: -4s;
+          animation-direction: alternate-reverse;
+        }
+        @keyframes bgfx-float {
+          from {
+            transform: translateY(0);
+          }
+          to {
+            transform: translateY(-15px);
+          }
+        }
+
         /* ═══ VIEW TRANSITIONS ═══ */
         .slides-content {
           view-transition-name: slide-content;
@@ -38660,11 +39113,14 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
       { once: true }
     );
   }
-  /** Trigger stagger-in animation on slide content children after transition.
-   *  Uses the universal data-enter attribute from the motion system. */
   _slidesStaggerIn() {
-    const slideEffect = this._slidesEffects.get(this._slidesCurrentIndex) || "";
-    const enterValue = ResultViewer._EFFECT_MAP[slideEffect] || (slideEffect ? slideEffect : "slide-up");
+    const idx = this._slidesCurrentIndex;
+    const mood = this._slidesMoods.get(idx) || this._slidesGlobalMood;
+    const moodCfg = ResultViewer._MOOD_CONFIG[mood];
+    const slideEffect = this._slidesEffects.get(idx) || "";
+    const enterValue = moodCfg ? moodCfg.enter : ResultViewer._EFFECT_MAP[slideEffect] || (slideEffect ? slideEffect : "slide-up");
+    const delayMs = moodCfg?.delayMs ?? 60;
+    const durationMs = moodCfg?.durationMs ?? 300;
     const CHILD_SELECTOR = ":scope > h1, :scope > h2, :scope > h3, :scope > p, :scope > ul, :scope > ol, :scope > table, :scope > blockquote, :scope > pre, :scope > div:not(.slide-header):not(.slide-footer), :scope > figure, :scope > img, :scope > .slide-content-area";
     const applyToChildren = (container) => {
       const children = container.querySelectorAll(CHILD_SELECTOR);
@@ -38673,7 +39129,8 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
         htmlEl.removeAttribute("data-enter");
         void htmlEl.offsetWidth;
         htmlEl.setAttribute("data-enter", enterValue);
-        htmlEl.style.animationDelay = `${i7 * 60}ms`;
+        htmlEl.style.animationDelay = `${i7 * delayMs}ms`;
+        htmlEl.style.animationDuration = `${durationMs}ms`;
       });
     };
     const iframe = this.shadowRoot?.querySelector(".slide-bridge-frame");
@@ -38693,6 +39150,97 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
     const content2 = this.shadowRoot?.querySelector(".slides-content");
     if (content2) applyToChildren(content2);
   }
+  _slidesApplyTextEffect() {
+    const effect = this._slidesEffects.get(this._slidesCurrentIndex) || "";
+    if (!ResultViewer._PRETEXT_EFFECTS.has(effect)) return;
+    const content2 = this.shadowRoot?.querySelector(".slides-content");
+    if (!content2) return;
+    const heading2 = content2.querySelector("h1, h2");
+    if (!heading2) return;
+    const text = heading2.textContent || "";
+    if (!text) return;
+    switch (effect) {
+      case "typing": {
+        heading2.textContent = "";
+        heading2.style.borderRight = "2px solid currentColor";
+        let i7 = 0;
+        const type = () => {
+          if (i7 < text.length) {
+            heading2.textContent += text[i7];
+            i7++;
+            requestAnimationFrame(() => setTimeout(type, 40 + Math.random() * 30));
+          } else {
+            setTimeout(() => {
+              heading2.style.borderRight = "none";
+            }, 800);
+          }
+        };
+        setTimeout(type, 200);
+        break;
+      }
+      case "scramble": {
+        const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789@#$%&";
+        const revealed = new Array(text.length).fill(false);
+        let iterations = 0;
+        const scramble = () => {
+          let display = "";
+          for (let j2 = 0; j2 < text.length; j2++) {
+            if (revealed[j2] || text[j2] === " ") {
+              display += text[j2];
+            } else {
+              display += chars[Math.floor(Math.random() * chars.length)];
+            }
+          }
+          heading2.textContent = display;
+          if (iterations > 5) {
+            const unrevealed = revealed.map((r7, idx) => !r7 && text[idx] !== " " ? idx : -1).filter((x3) => x3 >= 0);
+            if (unrevealed.length > 0) {
+              const pick2 = unrevealed[Math.floor(Math.random() * unrevealed.length)];
+              revealed[pick2] = true;
+            }
+          }
+          iterations++;
+          if (revealed.some((r7) => !r7) && revealed.filter((r7) => r7).length < text.length) {
+            requestAnimationFrame(scramble);
+          } else {
+            heading2.textContent = text;
+          }
+        };
+        setTimeout(scramble, 200);
+        break;
+      }
+      case "wave": {
+        heading2.innerHTML = "";
+        const chars = text.split("");
+        chars.forEach((char, i7) => {
+          const span = document.createElement("span");
+          span.textContent = char === " " ? "\xA0" : char;
+          span.style.display = "inline-block";
+          span.style.animation = `mood-playful 0.5s ease ${i7 * 30}ms both`;
+          heading2.appendChild(span);
+        });
+        break;
+      }
+      case "fly-in": {
+        heading2.innerHTML = "";
+        const words = text.split(" ");
+        words.forEach((word, i7) => {
+          const span = document.createElement("span");
+          span.textContent = word + " ";
+          span.style.display = "inline-block";
+          span.style.opacity = "0";
+          span.style.transform = `translate(${(Math.random() - 0.5) * 200}px, ${(Math.random() - 0.5) * 100}px)`;
+          span.style.transition = `all 0.6s cubic-bezier(0.16, 1, 0.3, 1) ${i7 * 80}ms`;
+          heading2.appendChild(span);
+          requestAnimationFrame(() => {
+            span.style.opacity = "1";
+            span.style.transform = "none";
+          });
+        });
+        break;
+      }
+    }
+  }
   /** Advance the next hidden build fragment. Returns true if a fragment was revealed. */
   _slidesAdvanceBuild() {
     const hasBuild = this._slidesBuilds.get(this._slidesCurrentIndex);
@@ -38757,6 +39305,7 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
         this._afterSlideRender();
       }
       this._slidesStaggerIn();
+      this._slidesApplyTextEffect();
     };
     if (transition === "none" || !("startViewTransition" in document) || this._slidesBridgeScript) {
       this._slidesCurrentIndex = newIndex;
@@ -39632,7 +40181,116 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
       </div>
     `;
   }
-  // ── Article Renderer (Pretext-powered magazine layout) ──
+  // ── Guide Renderer — horizontal stepper for multi-step flows ──
+  _renderGuide(data) {
+    const steps2 = Array.isArray(data) ? data : [];
+    if (steps2.length === 0) {
+      return b2`<div class="empty-state">No steps</div>`;
+    }
+    return b2`
+      <div
+        style="display: flex; align-items: flex-start; gap: 0; padding: 16px 8px; overflow-x: auto;"
+      >
+        ${steps2.map((step, i7) => {
+      const status = step.status || "pending";
+      const isDone = status === "done";
+      const isActive = status === "active";
+      const circleColor = isDone ? "var(--accent-primary, #3b82f6)" : isActive ? "var(--accent-primary, #3b82f6)" : "var(--bg-tertiary, #374151)";
+      const circleBorder = isActive ? "2px solid var(--accent-primary, #3b82f6)" : "none";
+      const circleText = isDone ? "#fff" : isActive ? "var(--accent-primary, #3b82f6)" : "var(--t-muted, #9ca3af)";
+      const circleBg = isDone ? circleColor : isActive ? "transparent" : circleColor;
+      const labelColor = isDone || isActive ? "var(--t-primary, #f5f5f5)" : "var(--t-muted, #9ca3af)";
+      const lineColor = isDone ? "var(--accent-primary, #3b82f6)" : "var(--bg-tertiary, #374151)";
+      return b2`
+            <div style="display: flex; align-items: flex-start; flex: 1; min-width: 0;">
+              <div
+                style="display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 100%;"
+              >
+                <div
+                  style="
+                  width: 28px; height: 28px; border-radius: 50%;
+                  background: ${circleBg}; border: ${circleBorder};
+                  display: flex; align-items: center; justify-content: center;
+                  font-size: 12px; font-weight: 600; color: ${circleText};
+                  transition: all 0.2s ease;
+                "
+                >
+                  ${isDone ? b2`<svg
+                        width="14"
+                        height="14"
+                        viewBox="0 0 12 12"
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="2"
+                        stroke-linecap="round"
+                      >
+                        <path d="M2.5 6l2.5 2.5 4.5-5" />
+                      </svg>` : i7 + 1}
+                </div>
+                <div
+                  style="margin-top: 6px; font-size: 12px; font-weight: ${isActive ? "600" : "500"}; color: ${labelColor}; text-align: center; line-height: 1.3; padding: 0 4px;"
+                >
+                  ${step.label}
+                </div>
+                ${step.detail ? b2`<div
+                      style="margin-top: 2px; font-size: 11px; color: var(--t-muted, #9ca3af); text-align: center; padding: 0 4px;"
+                    >
+                      ${step.detail}
+                    </div>` : ""}
+              </div>
+              ${i7 < steps2.length - 1 ? b2`<div
+                    style="
+                    position: relative; top: 14px;
+                    flex: 1; height: 2px; min-width: 20px;
+                    background: ${lineColor};
+                    transition: background 0.2s ease;
+                  "
+                  ></div>` : ""}
+            </div>
+          `;
+    })}
+      </div>
+    `;
+  }
+  // ── 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 +41270,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 +42460,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 +43748,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 +43763,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 +43792,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 +43805,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;
       }
 
       /* ═══════════════════════════════════════════════════════════════
@@ -43328,6 +44114,52 @@ ResultViewer._TIMESTAMP_FIELDS = [
   // ReactiveArray auto-stamp (fallback for creation)
 ];
 // Map slide effect directives to universal motion data-enter values
+// Shared theme CSS injected into both shadow DOM styles and bridge srcdoc
+ResultViewer._BRIDGE_THEME_CSS = `
+    .slides-theme-default { background: #1a1a2e; color: #e6e6e6; }
+    .slides-theme-default h1, .slides-theme-default h2 { color: #a5b4fc; }
+    .slides-theme-uncover { background: #f8f8f8; color: #333; }
+    .slides-theme-uncover h1, .slides-theme-uncover h2 { color: #1a1a1a; }
+    .slides-theme-gaia { background: #1a472a; color: #e0f0e0; }
+    .slides-theme-gaia h1, .slides-theme-gaia h2 { color: #66bb6a; }
+    .slides-theme-rose { background: #2d1b2e; color: #f0e0e8; }
+    .slides-theme-rose h1, .slides-theme-rose h2 { color: #f48fb1; }
+    .slides-theme-dracula { background: #282a36; color: #f8f8f2; }
+    .slides-theme-dracula h1, .slides-theme-dracula h2 { color: #bd93f9; }
+    .slides-theme-auto { background: var(--bg-panel, #1a1a2e); color: var(--t-primary, #e0e0e0); }
+    .slides-theme-auto h1, .slides-theme-auto h2 { color: var(--accent, #6366f1); }
+    .slides-theme-neon { background: #0a0a1a; color: #e0e0ff; font-family: 'JetBrains Mono', monospace; }
+    .slides-theme-neon h1, .slides-theme-neon h2 { color: #00f0ff; text-shadow: 0 0 10px rgba(0,240,255,0.5), 0 0 40px rgba(0,240,255,0.2); }
+    .slides-theme-editorial { background: #faf8f5; color: #2c2c2c; font-family: Georgia, 'Times New Roman', serif; }
+    .slides-theme-editorial h1, .slides-theme-editorial h2 { font-family: 'Cormorant Garamond', Georgia, serif; color: #1a1a1a; }
+    .slides-theme-bold-signal { background: linear-gradient(135deg, #0f0c29, #1a1a3e, #24243e); color: #e8e8f0; font-family: 'Space Grotesk', sans-serif; }
+    .slides-theme-bold-signal h1 { color: #ff6b35; }
+    .slides-theme-bold-signal h2 { color: #ffd166; }
+    .slides-theme-swiss { background: #ffffff; color: #1a1a1a; font-family: 'Helvetica Neue', 'Inter', Arial, sans-serif; }
+    .slides-theme-swiss h1 { color: #e63946; text-transform: uppercase; letter-spacing: 0.05em; }
+    .slides-theme-swiss h2 { color: #1d3557; }
+    .slides-theme-notebook { background: #1a1a2e; color: #3c3c3c; }
+    .slides-theme-notebook .slide-canvas { background: #fdf6e3; border-left: 5px solid #e74c3c; border-radius: 8px; }
+    .slides-theme-notebook h1, .slides-theme-notebook h2 { font-family: 'Caveat', cursive; color: #2c3e50; }
+    @keyframes mood-dramatic { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: none; } }
+    @keyframes mood-techy { 0% { opacity: 0; transform: translateY(8px); filter: blur(4px); } 50% { opacity: 1; filter: blur(0); } 100% { transform: none; } }
+    @keyframes mood-playful { 0% { opacity: 0; transform: translateY(20px); } 60% { transform: translateY(-4px); } 80% { transform: translateY(2px); } 100% { opacity: 1; transform: none; } }
+    @keyframes mood-calm { from { opacity: 0; } to { opacity: 1; } }
+    @keyframes bgdrift { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(5%,-3%) scale(1.05); } 100% { transform: translate(-3%,4%) scale(1.02); } }
+    .slides-theme-neon body::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,240,255,0.015) 2px, rgba(0,240,255,0.015) 4px); z-index: 100; }
+    .slides-theme-neon .slide-body blockquote { border-left: 3px solid #00f0ff; box-shadow: -4px 0 20px rgba(0,240,255,0.15); }
+    .slides-theme-neon .slide-body pre { border: 1px solid rgba(0,240,255,0.2); box-shadow: 0 0 15px rgba(0,240,255,0.1); }
+    .slides-theme-editorial .slide-body p:first-of-type::first-letter { float: left; font-size: 3.4em; line-height: 0.8; padding-right: 8px; padding-top: 4px; font-weight: 700; color: #c0392b; font-family: 'Cormorant Garamond', Georgia, serif; }
+    .slides-theme-editorial .slide-body blockquote { border-left: 2px solid #c0392b; font-style: italic; color: #555; }
+    .slides-theme-bold-signal .slide-body blockquote { background: rgba(255,107,53,0.1); border-left: 4px solid #ff6b35; border-radius: 0 8px 8px 0; padding: 16px 20px; }
+    .slides-theme-swiss body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px); background-size: 40px 40px; z-index: 0; }
+  `;
+// Google Fonts per theme
+ResultViewer._THEME_FONTS = {
+  editorial: "Cormorant+Garamond:wght@400;600;700",
+  "bold-signal": "Space+Grotesk:wght@500;700",
+  notebook: "Caveat:wght@400;700"
+};
 ResultViewer._EFFECT_MAP = {
   "fade-up": "slide-up",
   "fade-down": "slide-down",
@@ -43346,6 +44178,18 @@ ResultViewer._EFFECT_MAP = {
   "scale-up": "scale-up",
   "flip-in": "flip-in"
 };
+/** Trigger stagger-in animation on slide content children after transition.
+ *  Uses the universal data-enter attribute from the motion system. */
+// Mood → animation config
+ResultViewer._MOOD_CONFIG = {
+  dramatic: { enter: "mood-dramatic", delayMs: 100, durationMs: 600 },
+  techy: { enter: "mood-techy", delayMs: 40, durationMs: 300 },
+  playful: { enter: "mood-playful", delayMs: 80, durationMs: 400 },
+  professional: { enter: "fade-in", delayMs: 30, durationMs: 200 },
+  calm: { enter: "mood-calm", delayMs: 120, durationMs: 800 }
+};
+// Pretext-powered text effects: typing, scramble, wave, fly-in
+ResultViewer._PRETEXT_EFFECTS = /* @__PURE__ */ new Set(["typing", "scramble", "wave", "fly-in"]);
 __decorateClass([
   n4({ type: Object })
 ], ResultViewer.prototype, "result", 2);
@@ -92087,6 +92931,12 @@ function buildPhotonDocblockTagCatalog(runtimeVersion) {
       apply: "@stateful true",
       type: "keyword"
     },
+    {
+      label: "@channel",
+      detail: "Channel support \u2014 sends messages into client conversations (e.g. @channel claude)",
+      apply: "@channel claude",
+      type: "keyword"
+    },
     {
       label: "@idleTimeout",
       detail: "Idle timeout in ms",
@@ -96086,6 +96936,7 @@ var ElicitationModal = class extends i4 {
       case "confirm":
         return this._renderConfirm();
       case "oauth":
+      case "url":
         return this._renderOAuth();
       case "form":
         return this._renderForm();
@@ -96270,17 +97121,19 @@ var ElicitationModal = class extends i4 {
     };
     const provider = this.data?.provider || "OAuth";
     const icon2 = providerIcons[provider.toLowerCase()] || providerIcons.default;
-    const scopes = (this.data?.scopes || []).join(", ") || "basic access";
+    const scopes = (this.data?.scopes || []).join(", ");
+    const customMessage = this.data?.message;
+    const buttonLabel = customMessage ? "Open" : `Authorize ${provider}`;
     return b2`
       <div class="oauth-content">
         <div class="oauth-icon">${icon2}</div>
-        <p class="oauth-message">Authorization is required to access ${provider}.</p>
-        <p class="oauth-scopes">Requested permissions: ${scopes}</p>
+        <p class="oauth-message">
+          ${customMessage || `Authorization is required to access ${provider}.`}
+        </p>
+        ${scopes ? b2`<p class="oauth-scopes">Requested permissions: ${scopes}</p>` : ""}
         <div class="actions" style="justify-content: center;">
           <button class="btn-secondary" @click=${() => this._cancel()}>Cancel</button>
-          <button class="btn-primary" @click=${() => this._startOAuth()}>
-            Authorize ${provider}
-          </button>
+          <button class="btn-primary" @click=${() => this._startOAuth()}>${buttonLabel}</button>
         </div>
       </div>
     `;