@portel/photon 1.20.1 → 1.21.0

package/dist/beam.bundle.js

@@ -18105,9 +18105,9 @@ var theme = i`
     --radius-full: 9999px;
 
     /* Typography - same for all themes */
-    --font-display: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-    --font-mono: 'JetBrains Mono', monospace;
+    --font-display: 'Sora', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+    --font-mono: 'Berkeley Mono', 'JetBrains Mono', 'Fira Code', monospace;
 
     /* Type scale */
     --text-3xl: 2rem;
@@ -18134,17 +18134,17 @@ var theme = i`
   /* Shared Utility Classes */
   .glass {
     background: var(--bg-glass);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
     border: 1px solid var(--border-glass);
+    border-top-color: color-mix(in srgb, var(--border-glass) 100%, white 8%);
+    border-left-color: color-mix(in srgb, var(--border-glass) 100%, white 5%);
     box-shadow: var(--shadow-md);
   }
 
   .glass-panel {
     background: var(--bg-glass-strong);
-    backdrop-filter: blur(24px);
-    -webkit-backdrop-filter: blur(24px);
     border: 1px solid var(--border-glass);
+    border-top-color: color-mix(in srgb, var(--border-glass) 100%, white 8%);
+    border-left-color: color-mix(in srgb, var(--border-glass) 100%, white 5%);
     border-radius: var(--radius-md);
     box-shadow: var(--shadow-sm);
     color: inherit;
@@ -19528,10 +19528,10 @@ function oklchToRgba(L3, C3, H3, alpha2) {
   return `rgba(${Math.round(clamp01(r7) * 255)}, ${Math.round(clamp01(g3) * 255)}, ${Math.round(clamp01(b3) * 255)}, ${alpha2})`;
 }
 var themePresets = [
-  { name: "Default Violet", config: { hue: 260, chroma: 0.15, lightness: 0.65 } },
+  { name: "Amber", config: { hue: 75, chroma: 0.14, lightness: 0.7 } },
   { name: "Ocean Blue", config: { hue: 220, chroma: 0.12, lightness: 0.6 } },
   { name: "Emerald", config: { hue: 155, chroma: 0.14, lightness: 0.6 } },
-  { name: "Amber", config: { hue: 75, chroma: 0.14, lightness: 0.7 } },
+  { name: "Violet", config: { hue: 260, chroma: 0.15, lightness: 0.65 } },
   { name: "Rose", config: { hue: 350, chroma: 0.14, lightness: 0.62 } },
   { name: "Monochrome", config: { hue: 0, chroma: 0, lightness: 0.65 } }
 ];
@@ -19744,20 +19744,20 @@ var colorPalette = {
     95: "#f2f2f2",
     100: "#ffffff"
   },
-  // Light-theme neutrals (warm cream/beige undertone)
+  // Light-theme neutrals (cool mineral paper)
   neutralLight: {
-    85: "#C8C0B8",
+    85: "#B0BCCC",
     // heavy borders / dividers
-    88: "#D0C9C1",
+    88: "#D8E0EA",
     // surface-container-highest
-    91: "#DDD7CF",
+    91: "#E4EAF1",
     // surface-container-high
-    94: "#EAE4DD",
-    // bg-app — warm cream structure
-    96: "#F0EBE5",
+    94: "#EEF1F5",
+    // bg-app — mineral paper
+    96: "#F5F7FA",
     // surface-container
-    98: "#F8F5F1"
-    // surface — warm off-white panels
+    98: "#FFFFFF"
+    // surface — white panels
   },
   // Primary (blue - trust, action)
   primary: {
@@ -19850,24 +19850,24 @@ var colorsDark = {
   scrim: "rgba(0, 0, 0, 0.5)"
 };
 var colorsLight = {
-  // Surfaces (cool blue-gray, higher contrast between levels)
+  // Surfaces (cool mineral paper)
   surface: colorPalette.neutralLight[98],
-  // #F6F7F9 — panels
+  // #FFFFFF — panels
   surfaceContainer: colorPalette.neutralLight[96],
-  // #EBEEF2 — containers
+  // #F5F7FA — containers
   surfaceContainerHigh: colorPalette.neutralLight[91],
-  // #D5DBE1
+  // #E4EAF1
   surfaceContainerHighest: colorPalette.neutralLight[88],
-  // #C4CDD5
+  // #D8E0EA
   surfaceBright: colorPalette.neutral[100],
   // #FFFFFF — overlays/modals
-  // Text on surfaces (warm charcoal, high contrast)
-  onSurface: "#2C2420",
-  // warm brown-charcoal — WCAG AAA
-  onSurfaceVariant: "#4A3F38",
-  // warm dark brown for readability
-  onSurfaceMuted: "#6B5E54",
-  // warm muted brown — WCAG AA
+  // Text on surfaces (cool ink, high contrast)
+  onSurface: "#0D1420",
+  // dark ink — WCAG AAA
+  onSurfaceVariant: "#3A4A5C",
+  // cool dark for readability
+  onSurfaceMuted: "#5F6B7A",
+  // steel muted — WCAG AA
   // Primary (darker for light theme)
   primary: colorPalette.primary[40],
   primaryContainer: colorPalette.primary[90],
@@ -19892,11 +19892,11 @@ var colorsLight = {
   onError: colorPalette.neutral[100],
   // white text
   onErrorContainer: colorPalette.error[10],
-  // Outline (warm, visible but not harsh)
-  outline: "#9B9088",
-  // warm gray-brown for visibility
-  outlineVariant: "#D5CFC8",
-  // warm border, not washed out
+  // Outline (cool, visible but not harsh)
+  outline: "#8893A0",
+  // cool steel for visibility
+  outlineVariant: "#C8D2DE",
+  // cool border, not washed out
   // Scrim (overlay — lighter than dark theme's 0.5)
   scrim: "rgba(0, 0, 0, 0.2)"
 };
@@ -20143,10 +20143,10 @@ var ThemeSettings = class extends i4 {
   constructor() {
     super(...arguments);
     this.currentTheme = "dark";
-    this._hue = 260;
-    this._chroma = 0.15;
-    this._lightness = 0.65;
-    this._presetName = "Default Violet";
+    this._hue = 75;
+    this._chroma = 0.14;
+    this._lightness = 0.7;
+    this._presetName = "Amber";
     this._previousConfig = null;
   }
   connectedCallback() {
@@ -20233,10 +20233,10 @@ var ThemeSettings = class extends i4 {
   }
   _reset() {
     localStorage.removeItem(THEME_CONFIG_KEY);
-    this._hue = 260;
-    this._chroma = 0.15;
-    this._lightness = 0.65;
-    this._presetName = "Default Violet";
+    this._hue = 75;
+    this._chroma = 0.14;
+    this._lightness = 0.7;
+    this._presetName = "Amber";
     this.dispatchEvent(new CustomEvent("oklch-theme-reset", { bubbles: true, composed: true }));
   }
   _revert() {
@@ -20561,16 +20561,16 @@ ThemeSettings.styles = [
       .chroma-slider {
         background: linear-gradient(
           to right,
-          oklch(0.65 0 var(--hue-val, 260)),
-          oklch(0.65 0.3 var(--hue-val, 260))
+          oklch(0.65 0 var(--hue-val, 75)),
+          oklch(0.65 0.3 var(--hue-val, 75))
         );
       }
 
       .lightness-slider {
         background: linear-gradient(
           to right,
-          oklch(0.2 0.1 var(--hue-val, 260)),
-          oklch(0.9 0.1 var(--hue-val, 260))
+          oklch(0.2 0.1 var(--hue-val, 75)),
+          oklch(0.9 0.1 var(--hue-val, 75))
         );
       }
 
@@ -22089,6 +22089,9 @@ var MCPClientService = class {
       case "beam/render":
         this.emit("render", notification.params);
         break;
+      case "beam/canvas":
+        this.emit("canvas", notification.params);
+        break;
       case "photon/board-update":
         this.emit("board-update", notification.params);
         break;
@@ -22658,6 +22661,7 @@ var BeamApp = class extends i4 {
     this._runningTests = false;
     this._selectedMethod = null;
     this._lastResult = null;
+    this._canvasActive = false;
     this._customUiRevision = 0;
     this._customFormatUri = null;
     this._lastFormParams = {};
@@ -23534,6 +23538,11 @@ var BeamApp = class extends i4 {
             }
           }
         }
+        if (msg.type === "photon:toast") {
+          const validTypes = ["success", "error", "info", "warning"];
+          const toastType = validTypes.includes(msg.toastType) ? msg.toastType : "info";
+          showToast(msg.message || "Notification", toastType, msg.duration || 3e3);
+        }
         if (msg.type === "photon:viewing") {
           const photonId = this._selectedPhoton?.id;
           const itemId = msg.itemId || msg.board;
@@ -23626,9 +23635,9 @@ var BeamApp = class extends i4 {
         this.style.removeProperty(prop);
       }
       const theme3 = this._theme || "dark";
-      const defaultViolet = { hue: 260, chroma: 0.15, lightness: 0.65, theme: theme3 };
+      const defaultAmber = { hue: 75, chroma: 0.14, lightness: 0.7, theme: theme3 };
       this._oklchEnabled = true;
-      this._applyOklchTheme(defaultViolet);
+      this._applyOklchTheme(defaultAmber);
       this._broadcastThemeToIframes();
       showToast("Theme reset to default", "info");
     };
@@ -24680,6 +24689,25 @@ var BeamApp = class extends i4 {
           this.requestUpdate();
         }
       });
+      mcpClient.on("canvas", (data) => {
+        if (!data?.photon || !data?.method) return;
+        const currentPhoton = this._selectedPhoton?.name;
+        const currentMethod = this._selectedMethod?.name;
+        if (data.photon !== currentPhoton || data.method !== currentMethod) return;
+        if (!this._canvasActive) {
+          this._canvasActive = true;
+          this.requestUpdate();
+        }
+        void this.updateComplete.then(() => {
+          const canvas = this.shadowRoot?.querySelector("canvas-renderer");
+          if (!canvas) return;
+          if (data.type === "ui") {
+            canvas.pushUI(data.html);
+          } else if (data.type === "data") {
+            canvas.pushData(data.slot, data.data);
+          }
+        });
+      });
       mcpClient.on("photons", (data) => {
         if (data?.photons) {
           const prevNames = new Set(this._photons.filter((p5) => !p5.internal).map((p5) => p5.name));
@@ -25282,8 +25310,6 @@ var BeamApp = class extends i4 {
             </div>
           ` : ""}
 
-      <div class="background-glow" aria-hidden="true"></div>
-
       <!-- Mobile Menu Button: shows back arrow when in method detail, hamburger otherwise -->
       <button
         class="mobile-menu-btn ${this._sidebarVisible ? "open" : ""}"
@@ -26713,6 +26739,7 @@ ${photon.errorMessage || "Unknown error"}</pre
   }
   _handleMethodSelect(e8) {
     this._teardownActiveCustomUI();
+    this._canvasActive = false;
     this._lastFormParams = {};
     if (this._viewMode === "full") {
       this._sharedFormParams = null;
@@ -27063,7 +27090,7 @@ ${photon.errorMessage || "Unknown error"}</pre
                 </div>
               </div>
             ` : ""}
-        ${opts.result !== null ? this._customFormatUri ? b2`
+        ${opts.result !== null || this._canvasActive ? this._customFormatUri ? b2`
                 <custom-ui-renderer
                   .photon=${opts.photon?.name || ""}
                   .method=${opts.method?.name || ""}
@@ -27095,17 +27122,21 @@ ${photon.errorMessage || "Unknown error"}</pre
                         <button @click=${() => this._handleShareResult()}>Share</button>
                       </div>
                     </div>` : ""}
-                <result-viewer
-                  .result=${opts.result}
-                  .outputFormat=${opts.method?.outputFormat}
-                  .layoutHints=${opts.method?.layoutHints}
-                  .photonName=${opts.photon?.name}
-                  .theme=${this._theme}
-                  .live=${this._currentCollectionName !== null}
-                  .resultKey=${opts.photon && opts.method ? `${opts.photon.name}/${opts.method.name}` : void 0}
-                  @share=${() => this._handleShareResult()}
-                  @checklist-action=${(e8) => this._handleChecklistAction(e8)}
-                ></result-viewer>
+                ${this._canvasActive ? b2`<canvas-renderer
+                      .photon=${opts.photon?.name || ""}
+                      .method=${opts.method?.name || ""}
+                      .theme=${this._theme}
+                    ></canvas-renderer>` : b2`<result-viewer
+                      .result=${opts.result}
+                      .outputFormat=${opts.method?.outputFormat}
+                      .layoutHints=${opts.method?.layoutHints}
+                      .photonName=${opts.photon?.name}
+                      .theme=${this._theme}
+                      .live=${this._currentCollectionName !== null}
+                      .resultKey=${opts.photon && opts.method ? `${opts.photon.name}/${opts.method.name}` : void 0}
+                      @share=${() => this._handleShareResult()}
+                      @checklist-action=${(e8) => this._handleChecklistAction(e8)}
+                    ></result-viewer>`}
               ` : b2`
               <div class="empty-state-inline result-empty">
                 <span class="empty-state-icon">${play}</span>
@@ -27828,7 +27859,7 @@ ${photon.errorMessage || "Unknown error"}</pre
    */
   _forwardToIframes(message) {
     const iframes = [];
-    this.shadowRoot?.querySelectorAll("custom-ui-renderer").forEach((renderer) => {
+    this.shadowRoot?.querySelectorAll("custom-ui-renderer, canvas-renderer").forEach((renderer) => {
       const iframe = renderer.shadowRoot?.querySelector("iframe");
       if (iframe) iframes.push(iframe);
     });
@@ -29198,47 +29229,47 @@ BeamApp.styles = [
   theme,
   i`
       :host {
-        /* ===== Dark Theme (Default) ===== */
-        --bg-app: hsl(220, 15%, 10%);
-        --bg-glass: hsla(220, 15%, 14%, 0.6);
-        --bg-glass-strong: hsla(220, 15%, 14%, 0.85);
-        --bg-panel: hsl(220, 15%, 12%);
-        --t-primary: hsl(220, 10%, 95%);
-        --t-muted: hsl(220, 10%, 65%);
-        --border-glass: hsla(220, 10%, 80%, 0.1);
-        --accent-primary: hsl(260, 100%, 65%);
-        --accent-secondary: hsl(190, 100%, 50%);
-        --glow-primary: hsla(260, 100%, 65%, 0.3);
+        /* ===== Dark Theme (Default) — Precision Optics ===== */
+        --bg-app: #0b1018;
+        --bg-glass: hsla(215, 25%, 12%, 0.6);
+        --bg-glass-strong: hsla(215, 25%, 12%, 0.85);
+        --bg-panel: #131b28;
+        --t-primary: #f0ede6;
+        --t-muted: #6b8a8a;
+        --border-glass: hsla(210, 20%, 50%, 0.12);
+        --accent-primary: #ffb000;
+        --accent-secondary: #78e6ff;
+        --glow-primary: rgba(255, 176, 0, 0.3);
 
         /* Semantic status colors */
-        --color-error: #ff4444;
-        --color-error-glow: rgba(255, 68, 68, 0.6);
-        --color-error-bg: rgba(255, 68, 68, 0.1);
-        --color-success: #00e676;
-        --color-success-glow: rgba(0, 230, 118, 0.6);
-        --color-success-bg: rgba(0, 230, 118, 0.15);
-        --color-warning: #ffab00;
-        --color-warning-bg: rgba(255, 171, 0, 0.15);
-        --color-warning-glow: rgba(255, 171, 0, 0.6);
+        --color-error: #ff6b6b;
+        --color-error-glow: rgba(255, 107, 107, 0.6);
+        --color-error-bg: rgba(255, 107, 107, 0.1);
+        --color-success: #58d68d;
+        --color-success-glow: rgba(88, 214, 141, 0.6);
+        --color-success-bg: rgba(88, 214, 141, 0.15);
+        --color-warning: #ffb347;
+        --color-warning-bg: rgba(255, 179, 71, 0.15);
+        --color-warning-glow: rgba(255, 179, 71, 0.6);
         --color-info: var(--accent-secondary);
 
         /* CLI preview */
-        --cli-bg: hsl(220, 15%, 6%);
-        --cli-border: hsl(220, 10%, 20%);
-        --cli-text: hsl(142, 76%, 57%);
-        --cli-muted: hsl(220, 10%, 40%);
-        --cli-hover-bg: hsl(220, 15%, 10%);
+        --cli-bg: #080c12;
+        --cli-border: #1e2d3d;
+        --cli-text: #58d68d;
+        --cli-muted: #4a6565;
+        --cli-hover-bg: #0b1018;
 
         /* Initials icon (marketplace cards) */
-        --initials-bg-sat: 35%;
-        --initials-bg-lum: 22%;
-        --initials-fg-sat: 60%;
-        --initials-fg-lum: 75%;
+        --initials-bg-sat: 25%;
+        --initials-bg-lum: 18%;
+        --initials-fg-sat: 50%;
+        --initials-fg-lum: 70%;
 
         /* Shadow tokens (dark defaults) */
-        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
-        --shadow-md: 0 4px 24px -1px rgba(0, 0, 0, 0.2);
-        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.3);
+        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
+        --shadow-md: 0 4px 24px -1px rgba(0, 0, 0, 0.3);
+        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
 
         display: flex;
         height: 100vh;
@@ -29249,52 +29280,52 @@ BeamApp.styles = [
         overflow: visible; /* Allow focus rings and shadows to display */
       }
 
-      /* ===== Light Theme - "Warm, Soft, Professional" ===== */
+      /* ===== Light Theme — Mineral Paper ===== */
       :host([data-theme='light']) {
-        --bg-app: #eae4dd;
-        --bg-glass: rgba(255, 253, 250, 0.75);
-        --bg-glass-strong: rgba(255, 253, 250, 0.9);
-        --bg-panel: #f8f5f1;
-        --t-primary: #2c2420;
-        --t-muted: #6b5e54;
-        --border-glass: rgba(120, 90, 60, 0.2);
-        --accent-primary: hsl(215, 55%, 45%);
-        --accent-secondary: hsl(165, 45%, 35%);
-        --glow-primary: hsla(215, 55%, 45%, 0.15);
-
-        /* Semantic status colors — light theme (same vivid LED colors) */
-        --color-error: #e53935;
-        --color-error-glow: rgba(229, 57, 53, 0.5);
-        --color-error-bg: rgba(229, 57, 53, 0.08);
-        --color-success: #00c853;
-        --color-success-glow: rgba(0, 200, 83, 0.55);
-        --color-success-bg: rgba(0, 200, 83, 0.1);
-        --color-warning: #ff8f00;
-        --color-warning-bg: rgba(255, 143, 0, 0.1);
-        --color-warning-glow: rgba(255, 143, 0, 0.5);
+        --bg-app: #eef1f5;
+        --bg-glass: rgba(255, 255, 255, 0.75);
+        --bg-glass-strong: rgba(255, 255, 255, 0.9);
+        --bg-panel: #ffffff;
+        --t-primary: #0d1420;
+        --t-muted: #5f6b7a;
+        --border-glass: rgba(100, 120, 150, 0.15);
+        --accent-primary: #d98a00;
+        --accent-secondary: #0ea5c6;
+        --glow-primary: rgba(217, 138, 0, 0.15);
+
+        /* Semantic status colors — light theme */
+        --color-error: #d64545;
+        --color-error-glow: rgba(214, 69, 69, 0.5);
+        --color-error-bg: rgba(214, 69, 69, 0.08);
+        --color-success: #1f9d68;
+        --color-success-glow: rgba(31, 157, 104, 0.55);
+        --color-success-bg: rgba(31, 157, 104, 0.1);
+        --color-warning: #d98a00;
+        --color-warning-bg: rgba(217, 138, 0, 0.1);
+        --color-warning-glow: rgba(217, 138, 0, 0.5);
         --color-info: var(--accent-secondary);
 
         /* CLI preview — light theme */
-        --cli-bg: hsl(30, 15%, 95%);
+        --cli-bg: #f5f7fa;
         --cli-border: var(--border-glass);
-        --cli-text: hsl(142, 45%, 32%);
+        --cli-text: #1f9d68;
         --cli-muted: var(--t-muted);
-        --cli-hover-bg: hsl(30, 15%, 91%);
+        --cli-hover-bg: #e8ecf2;
 
-        /* Light-mode shadows — warm, visible but not harsh */
-        --shadow-sm: 0px 1px 3px rgba(80, 60, 40, 0.1), 0px 1px 2px rgba(80, 60, 40, 0.08);
-        --shadow-md: 0px 2px 6px rgba(80, 60, 40, 0.1), 0px 4px 8px rgba(80, 60, 40, 0.06);
-        --shadow-lg: 0px 4px 8px rgba(80, 60, 40, 0.1), 0px 10px 20px rgba(80, 60, 40, 0.06);
+        /* Light-mode shadows — cool, clean */
+        --shadow-sm: 0px 1px 3px rgba(0, 20, 50, 0.06), 0px 1px 2px rgba(0, 20, 50, 0.04);
+        --shadow-md: 0px 2px 6px rgba(0, 20, 50, 0.06), 0px 4px 8px rgba(0, 20, 50, 0.04);
+        --shadow-lg: 0px 4px 8px rgba(0, 20, 50, 0.06), 0px 10px 20px rgba(0, 20, 50, 0.04);
 
         /* Initials icon (marketplace cards) */
-        --initials-bg-sat: 30%;
-        --initials-bg-lum: 90%;
-        --initials-fg-sat: 50%;
+        --initials-bg-sat: 20%;
+        --initials-bg-lum: 92%;
+        --initials-fg-sat: 40%;
         --initials-fg-lum: 35%;
 
-        /* Parameter tags — warm chip style for light backgrounds */
-        --param-tag-bg: hsla(25, 20%, 55%, 0.12);
-        --param-tag-color: hsl(20, 15%, 40%);
+        /* Parameter tags — cool chip style for light backgrounds */
+        --param-tag-bg: rgba(100, 120, 150, 0.1);
+        --param-tag-color: #3a4a5c;
       }
 
       /* Skip to main content link — WCAG 2.4.1 */
@@ -29391,12 +29422,12 @@ BeamApp.styles = [
       :host(.view-result) .result-empty,
       :host(.view-form) result-viewer,
       :host(.view-form) custom-ui-renderer,
+      :host(.view-form) canvas-renderer,
       :host(.view-form) .result-empty {
         display: none !important;
       }
 
       :host(.view-result) .mobile-menu-btn,
-      :host(.view-result) .background-glow,
       :host(.view-result) .focus-toolbar,
       :host(.view-result) .main-toolbar,
       :host(.view-result) .method-toolbar,
@@ -29407,7 +29438,6 @@ BeamApp.styles = [
       :host(.view-result) app-layout,
       :host(.view-result) .result-chrome,
       :host(.view-form) .mobile-menu-btn,
-      :host(.view-form) .background-glow,
       :host(.view-form) .focus-toolbar,
       :host(.view-form) .main-toolbar,
       :host(.view-form) .method-toolbar,
@@ -29851,9 +29881,9 @@ BeamApp.styles = [
       }
 
       .photon-badge.app {
-        background: hsla(260, 100%, 65%, 0.15);
-        border-color: hsla(260, 100%, 65%, 0.3);
-        color: hsl(260, 100%, 75%);
+        background: rgba(255, 176, 0, 0.15);
+        border-color: rgba(255, 176, 0, 0.3);
+        color: #ffca4d;
       }
 
       .photon-badge.update {
@@ -30194,17 +30224,6 @@ BeamApp.styles = [
         font-weight: 500;
       }
 
-      .background-glow {
-        position: absolute;
-        top: -20%;
-        left: -10%;
-        width: 50%;
-        height: 50%;
-        background: radial-gradient(circle, var(--glow-primary) 0%, transparent 70%);
-        pointer-events: none;
-        z-index: 0;
-      }
-
       .connection-banner {
         position: fixed;
         top: 0;
@@ -31255,6 +31274,9 @@ __decorateClass([
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_lastResult", 2);
+__decorateClass([
+  r5()
+], BeamApp.prototype, "_canvasActive", 2);
 __decorateClass([
   r5()
 ], BeamApp.prototype, "_customUiRevision", 2);
@@ -36588,6 +36610,9 @@ var ResultViewer = class extends i4 {
     this._expandedAuditTrails = /* @__PURE__ */ new Set();
     // The detected ID field for the current result (shared across diff, animation, warmth)
     this._activeIdField = "id";
+    // Column format pipe cache (invalidated when layoutHints changes)
+    this._columnPipes = null;
+    this._expandedRows = /* @__PURE__ */ new Set();
     // Chart.js instance for reactive updates
     this._chartInstance = null;
     this._chartInstances = /* @__PURE__ */ new Map();
@@ -36757,6 +36782,15 @@ var ResultViewer = class extends i4 {
     }
     this._chartInstances.forEach((chart) => chart.destroy());
     this._chartInstances.clear();
+    for (const timer of this._slidesRefreshTimers) clearInterval(timer);
+    this._slidesRefreshTimers = [];
+    this._slidesBoundElements.forEach((el2) => {
+      const cleanup = el2._renderCleanup;
+      if (typeof cleanup === "function") cleanup();
+    });
+    this._slidesBoundElements.clear();
+    this._slidesResizeObserver?.disconnect();
+    this._slidesResizeObserver = null;
   }
   _closeFullscreen() {
     this._fullscreenImage = null;
@@ -37657,6 +37691,8 @@ var ResultViewer = class extends i4 {
       case "metric":
       case "gauge":
         return typeof data === "object" && !Array.isArray(data) && (data.value !== void 0 || data.count !== void 0 || data.total !== void 0 || data.current !== void 0);
+      case "ring":
+        return typeof data === "number" || typeof data === "object" && !Array.isArray(data) && (data.value !== void 0 || data.progress !== void 0);
       case "chart":
         return typeof data !== "string";
       case "mermaid":
@@ -37715,6 +37751,8 @@ var ResultViewer = class extends i4 {
         return this._renderMetric(filteredData);
       case "gauge":
         return this._renderGauge(filteredData);
+      case "ring":
+        return this._renderRing(filteredData);
       case "timeline":
         return this._renderTimeline(filteredData);
       case "dashboard":
@@ -37796,10 +37834,12 @@ var ResultViewer = class extends i4 {
     const startIndex = this._currentPage * this._pageSize;
     const endIndex = Math.min(startIndex + this._pageSize, totalItems);
     const pageData = sortedData.slice(startIndex, endIndex);
+    const idField = this._detectIdField(originalData);
     return b2`
       <table class="smart-table">
         <thead>
           <tr>
+            <th class="row-expand-th"></th>
             ${columns.map(
       (col) => b2`<th
                   class="sortable ${this._sortColumn === col ? "sorted" : ""}"
@@ -37813,15 +37853,42 @@ var ResultViewer = class extends i4 {
           </tr>
         </thead>
         <tbody class="motion-stagger">
-          ${pageData.map(
-      (row) => b2`
-              <tr class="${this._getItemAnimationClass(row)} ${this._getItemWarmthClass(row)}">
+          ${pageData.map((row, idx) => {
+      const rowId = String(row[idField] ?? `__idx_${startIndex + idx}`);
+      const isExpanded = this._expandedRows.has(rowId);
+      return b2`
+              <tr
+                class="${this._getItemAnimationClass(row)} ${this._getItemWarmthClass(
+        row
+      )} ${isExpanded ? "row-expanded" : ""}"
+                @click=${() => this._toggleRowExpansion(rowId)}
+                style="cursor: pointer;"
+              >
+                <td class="row-expand-td">
+                  <span class="row-expand-chevron ${isExpanded ? "open" : ""}">▶</span>
+                </td>
                 ${columns.map(
         (col) => b2`<td>${this._formatCellValue(row[col], col, true)}</td>`
       )}
               </tr>
-            `
-    )}
+              ${isExpanded ? b2`<tr class="detail-row">
+                    <td colspan="${columns.length + 1}">
+                      <div class="detail-panel">
+                        ${Object.entries(row).filter(([k3]) => k3 !== "__meta").map(
+        ([k3, v2]) => b2`
+                              <div class="detail-field">
+                                <span class="detail-key">${this._formatColumnName(k3)}</span>
+                                <span class="detail-value"
+                                  >${this._formatCellValue(v2, k3, true)}</span
+                                >
+                              </div>
+                            `
+      )}
+                      </div>
+                    </td>
+                  </tr>` : ""}
+            `;
+    })}
         </tbody>
       </table>
       ${totalItems > this._pageSize ? this._renderPagination(totalItems, totalPages) : ""}
@@ -37836,6 +37903,15 @@ var ResultViewer = class extends i4 {
     }
     this._currentPage = 0;
   }
+  _toggleRowExpansion(rowId) {
+    const next = new Set(this._expandedRows);
+    if (next.has(rowId)) {
+      next.delete(rowId);
+    } else {
+      next.add(rowId);
+    }
+    this._expandedRows = next;
+  }
   _renderPagination(totalItems, totalPages) {
     const startItem = this._currentPage * this._pageSize + 1;
     const endItem = Math.min((this._currentPage + 1) * this._pageSize, totalItems);
@@ -38380,6 +38456,9 @@ ${rows}`);
   }
   updated(changedProperties) {
     super.updated(changedProperties);
+    if (changedProperties.has("layoutHints")) {
+      this._columnPipes = null;
+    }
     if (changedProperties.has("result") && this.result && typeof this.result === "object" && !Array.isArray(this.result) && typeof this.result._photonType === "string") {
       const data = this.result;
       const photonType = data._photonType;
@@ -41684,9 +41763,70 @@ ${footerText || pageNum ? `<div class="slide-footer"><span>${footerText || ""}</
   _formatColumnName(name2) {
     return formatLabel(name2);
   }
+  _getColumnPipes() {
+    if (this._columnPipes) return this._columnPipes;
+    this._columnPipes = /* @__PURE__ */ new Map();
+    const raw = this.layoutHints?.columnFormats;
+    if (!raw) return this._columnPipes;
+    for (const part of raw.split(",")) {
+      const trimmed = part.trim();
+      const colonIdx = trimmed.indexOf(":");
+      if (colonIdx <= 0) continue;
+      const col = trimmed.slice(0, colonIdx).trim();
+      const pipeSpec = trimmed.slice(colonIdx + 1).trim();
+      const pipeMatch = pipeSpec.match(/^(\w+)(?:\((\d+)\))?$/);
+      if (col && pipeMatch) {
+        this._columnPipes.set(col, { pipe: pipeMatch[1], arg: pipeMatch[2] });
+      }
+    }
+    return this._columnPipes;
+  }
+  _applyPipe(value, pipe2, arg) {
+    if (value === null || value === void 0) return "\u2014";
+    switch (pipe2) {
+      case "currency":
+        return typeof value === "number" ? value.toLocaleString(void 0, { style: "currency", currency: arg || "USD" }) : String(value);
+      case "percent": {
+        if (typeof value === "number") {
+          const pct = Math.abs(value) <= 1 ? value * 100 : value;
+          const digits = arg ? parseInt(arg, 10) : 1;
+          return `${pct.toFixed(digits)}%`;
+        }
+        return String(value);
+      }
+      case "date": {
+        const d5 = new Date(value);
+        return isNaN(d5.getTime()) ? String(value) : d5.toLocaleDateString();
+      }
+      case "truncate": {
+        const max = parseInt(arg || "30", 10);
+        const str = String(value);
+        return str.length > max ? str.slice(0, max) + "\u2026" : str;
+      }
+      case "number":
+        return typeof value === "number" ? value.toLocaleString() : String(value);
+      case "compact": {
+        if (typeof value !== "number") return String(value);
+        if (Math.abs(value) >= 1e9) return (value / 1e9).toFixed(1) + "B";
+        if (Math.abs(value) >= 1e6) return (value / 1e6).toFixed(1) + "M";
+        if (Math.abs(value) >= 1e3) return (value / 1e3).toFixed(1) + "K";
+        return value.toLocaleString();
+      }
+      default:
+        return String(value);
+    }
+  }
   _formatCellValue(value, key, highlight = false) {
     if (value === null || value === void 0) return "\u2014";
     if (typeof value === "boolean") return value ? "\u2713" : "\u2717";
+    const pipes = this._getColumnPipes();
+    if (pipes.size > 0) {
+      const pipe2 = pipes.get(key);
+      if (pipe2) {
+        const formatted = this._applyPipe(value, pipe2.pipe, pipe2.arg);
+        return highlight ? this._highlightText(formatted) : formatted;
+      }
+    }
     if (this._isImageUrl(value)) {
       return b2`
         <div>
@@ -42112,9 +42252,157 @@ ${str}</pre
     const dateKeys = keys2.filter(
       (k3) => /^(date|time|createdAt|updatedAt|created|updated|timestamp|.*At|.*Date|.*Time)$/i.test(k3) || typeof sample2[k3] === "string" && /^\d{4}-\d{2}-\d{2}/.test(sample2[k3])
     );
+    if (chartType === "histogram") {
+      const field = this.layoutHints?.x || numericKeys[0];
+      if (!field) return null;
+      const values = items.map((i7) => i7[field]).filter((v2) => typeof v2 === "number");
+      if (values.length === 0) return null;
+      const binCount = Math.min(20, Math.max(5, Math.ceil(Math.sqrt(values.length))));
+      const minVal = Math.min(...values);
+      const maxVal = Math.max(...values);
+      const binWidth = (maxVal - minVal) / binCount || 1;
+      const bins = Array(binCount).fill(0);
+      for (const v2 of values) {
+        const idx = Math.min(binCount - 1, Math.floor((v2 - minVal) / binWidth));
+        bins[idx]++;
+      }
+      const labels2 = bins.map((_3, i7) => `${(minVal + i7 * binWidth).toFixed(1)}`);
+      return {
+        type: "bar",
+        data: {
+          labels: labels2,
+          datasets: [
+            {
+              label: this._formatColumnName(field),
+              data: bins,
+              backgroundColor: this._hexToRgba(palette2[0], 0.7),
+              borderColor: palette2[0],
+              borderWidth: 1
+            }
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: true,
+          animation: { duration: 600, easing: "easeOutQuart" },
+          plugins: {
+            legend: { display: false },
+            tooltip: {
+              backgroundColor: "rgba(15, 23, 42, 0.9)",
+              titleColor: "#e2e8f0",
+              bodyColor: "#e2e8f0",
+              borderColor: "rgba(99, 102, 241, 0.3)",
+              borderWidth: 1,
+              cornerRadius: 8,
+              padding: 10
+            }
+          },
+          scales: {
+            x: { grid: { color: gridColor }, ticks: { color: textColor, maxRotation: 45 } },
+            y: { grid: { color: gridColor }, ticks: { color: textColor }, beginAtZero: true }
+          }
+        }
+      };
+    }
+    if (chartType === "scatter") {
+      const xField = this.layoutHints?.x || numericKeys[0];
+      const yField = this.layoutHints?.y || numericKeys[1];
+      if (!xField || !yField) return null;
+      return {
+        type: "scatter",
+        data: {
+          datasets: [
+            {
+              label: `${this._formatColumnName(xField)} vs ${this._formatColumnName(yField)}`,
+              data: items.map((item) => ({ x: item[xField], y: item[yField] })),
+              backgroundColor: this._hexToRgba(palette2[0], 0.7),
+              borderColor: palette2[0],
+              pointRadius: 5,
+              pointHoverRadius: 8
+            }
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: true,
+          animation: { duration: 600, easing: "easeOutQuart" },
+          plugins: {
+            legend: { display: false },
+            tooltip: {
+              backgroundColor: "rgba(15, 23, 42, 0.9)",
+              titleColor: "#e2e8f0",
+              bodyColor: "#e2e8f0",
+              borderColor: "rgba(99, 102, 241, 0.3)",
+              borderWidth: 1,
+              cornerRadius: 8,
+              padding: 10
+            }
+          },
+          scales: {
+            x: {
+              type: "linear",
+              title: { display: true, text: this._formatColumnName(xField), color: textColor },
+              grid: { color: gridColor },
+              ticks: { color: textColor }
+            },
+            y: {
+              type: "linear",
+              title: { display: true, text: this._formatColumnName(yField), color: textColor },
+              grid: { color: gridColor },
+              ticks: { color: textColor }
+            }
+          }
+        }
+      };
+    }
     const labelField = this.layoutHints?.label || this.layoutHints?.x || dateKeys[0] || stringKeys[0];
     const valueFields = this.layoutHints?.y ? [this.layoutHints.y] : this.layoutHints?.value ? [this.layoutHints.value] : numericKeys;
     if (!labelField || valueFields.length === 0) return null;
+    if (chartType === "radar" && items.length === 1) {
+      const labels2 = valueFields.map((f5) => this._formatColumnName(f5));
+      return {
+        type: "radar",
+        data: {
+          labels: labels2,
+          datasets: [
+            {
+              label: items[0][stringKeys[0]] || "Values",
+              data: valueFields.map((f5) => items[0][f5] ?? 0),
+              backgroundColor: this._hexToRgba(palette2[0], 0.2),
+              borderColor: palette2[0],
+              borderWidth: 2,
+              pointRadius: 4,
+              pointHoverRadius: 6,
+              fill: true
+            }
+          ]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: true,
+          animation: { duration: 600, easing: "easeOutQuart" },
+          plugins: {
+            legend: { display: false },
+            tooltip: {
+              backgroundColor: "rgba(15, 23, 42, 0.9)",
+              titleColor: "#e2e8f0",
+              bodyColor: "#e2e8f0",
+              borderColor: "rgba(99, 102, 241, 0.3)",
+              borderWidth: 1,
+              cornerRadius: 8,
+              padding: 10
+            }
+          },
+          scales: {
+            r: {
+              grid: { color: gridColor },
+              pointLabels: { color: textColor },
+              ticks: { color: textColor, backdropColor: "transparent" }
+            }
+          }
+        }
+      };
+    }
     const labels = items.map((item) => {
       const val = item[labelField];
       if (dateKeys.includes(labelField) && typeof val === "string") {
@@ -42136,9 +42424,10 @@ ${str}</pre
       borderColor: palette2[i7 % palette2.length],
       borderWidth: chartType === "pie" || chartType === "doughnut" ? 0 : 2,
       tension: 0.3,
-      fill: chartType === "line" && valueFields.length === 1 ? "origin" : false,
-      pointRadius: chartType === "scatter" ? 5 : 3,
-      pointHoverRadius: chartType === "scatter" ? 8 : 5
+      fill: chartType === "radar" ? true : chartType === "line" && valueFields.length === 1 ? "origin" : false,
+      pointRadius: 3,
+      pointHoverRadius: 5,
+      ...chartType === "radar" ? { backgroundColor: this._hexToRgba(palette2[i7 % palette2.length], 0.2) } : {}
     }));
     const isPolar = chartType === "pie" || chartType === "doughnut" || chartType === "radar";
     return {
@@ -42170,7 +42459,13 @@ ${str}</pre
             padding: 10
           }
         },
-        scales: isPolar ? {} : {
+        scales: chartType === "radar" ? {
+          r: {
+            grid: { color: gridColor },
+            pointLabels: { color: textColor },
+            ticks: { color: textColor, backdropColor: "transparent" }
+          }
+        } : isPolar ? {} : {
           x: {
             grid: { color: gridColor },
             ticks: { color: textColor, maxRotation: 45 }
@@ -42204,8 +42499,12 @@ ${str}</pre
     const keys2 = Object.keys(sample2);
     const numericKeys = keys2.filter((k3) => typeof sample2[k3] === "number");
     const hasDate = this._hasDateLikeFields(sample2);
+    const stringKeys = keys2.filter((k3) => typeof sample2[k3] === "string");
     if (hasDate && numericKeys.length >= 1) return "line";
+    if (numericKeys.length >= 2 && stringKeys.length === 0 && items.length > 1) return "scatter";
     if (keys2.length === 2 && numericKeys.length === 1 && items.length <= 8) return "pie";
+    if (items.length === 1 && numericKeys.length >= 5) return "radar";
+    if (items.length <= 5 && numericKeys.length >= 4 && stringKeys.length === 1) return "radar";
     return "bar";
   }
   _hexToRgba(hex4, alpha2) {
@@ -42349,6 +42648,74 @@ ${str}</pre
     }
   }
   // ═══════════════════════════════════════════════════════════════════════════
+  // Ring (Circular Progress) Rendering
+  // ═══════════════════════════════════════════════════════════════════════════
+  _renderRing(data) {
+    let value;
+    let max = 100;
+    let label;
+    if (typeof data === "number") {
+      value = data;
+    } else if (data && typeof data === "object") {
+      if ("progress" in data && typeof data.progress === "number") {
+        value = data.progress * 100;
+      } else {
+        value = data.value ?? 0;
+      }
+      max = parseFloat(this.layoutHints?.max ?? String(data.max ?? 100));
+      label = data.label || this.layoutHints?.title;
+    } else {
+      return b2`<div class="empty-state">No ring data</div>`;
+    }
+    const normalized = Math.max(0, Math.min(1, value / max));
+    const cx = 60;
+    const cy = 60;
+    const r7 = 50;
+    const circumference = 2 * Math.PI * r7;
+    const dashOffset = circumference * (1 - normalized);
+    const color2 = this._getGaugeColor(normalized);
+    const displayValue = data?.progress !== void 0 ? `${Math.round(value)}%` : String(Math.round(value));
+    return b2`
+      <div class="ring-container ${this._objectJustChanged ? "value-flash" : ""}">
+        <svg viewBox="0 0 120 120" width="120" height="120">
+          <circle
+            cx="${cx}"
+            cy="${cy}"
+            r="${r7}"
+            fill="none"
+            stroke="${this.theme === "light" ? "#e2e8f0" : "#334155"}"
+            stroke-width="8"
+          />
+          <circle
+            cx="${cx}"
+            cy="${cy}"
+            r="${r7}"
+            fill="none"
+            stroke="${color2}"
+            stroke-width="8"
+            stroke-dasharray="${circumference}"
+            stroke-dashoffset="${dashOffset}"
+            stroke-linecap="round"
+            transform="rotate(-90 ${cx} ${cy})"
+          />
+          <text
+            x="${cx}"
+            y="${cy}"
+            text-anchor="middle"
+            dominant-baseline="central"
+            font-size="20"
+            font-weight="700"
+            font-variant-numeric="tabular-nums"
+            fill="${this.theme === "light" ? "#1e293b" : "#e2e8f0"}"
+          >
+            ${displayValue}
+          </text>
+        </svg>
+        ${label ? b2`<div class="ring-label">${label}</div>` : ""}
+      </div>
+    `;
+  }
+  // ═══════════════════════════════════════════════════════════════════════════
   // Timeline Rendering
   // ═══════════════════════════════════════════════════════════════════════════
   _renderTimeline(data) {
@@ -43077,6 +43444,67 @@ ResultViewer.styles = [
         background: var(--bg-glass);
       }
 
+      /* Row expansion */
+      .row-expand-th {
+        width: 32px;
+        padding: 0 !important;
+      }
+      .row-expand-td {
+        width: 32px;
+        padding: 4px 6px !important;
+        text-align: center;
+      }
+      .row-expand-chevron {
+        display: inline-block;
+        font-size: 0.6em;
+        color: var(--t-muted);
+        transition: transform 0.2s ease;
+      }
+      .row-expand-chevron.open {
+        transform: rotate(90deg);
+      }
+      .row-expanded td {
+        border-bottom: none;
+      }
+      .detail-row td {
+        padding: 0 !important;
+        border-bottom: 1px solid var(--border-glass);
+      }
+      .detail-panel {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+        gap: var(--space-xs) var(--space-md);
+        padding: var(--space-sm) var(--space-md) var(--space-sm) 40px;
+        background: var(--bg-glass);
+        animation: detail-slide-down 0.2s ease-out;
+      }
+      .detail-field {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+      }
+      .detail-key {
+        font-size: var(--text-xs);
+        font-weight: 600;
+        color: var(--t-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+      .detail-value {
+        font-size: var(--text-md);
+        color: var(--t-primary);
+      }
+      @keyframes detail-slide-down {
+        from {
+          opacity: 0;
+          transform: translateY(-4px);
+        }
+        to {
+          opacity: 1;
+          transform: translateY(0);
+        }
+      }
+
       /* Key-Value Table (single object) */
       .kv-table {
         max-width: 600px;
@@ -44868,6 +45296,28 @@ ResultViewer.styles = [
           stroke 0.3s ease-out;
       }
 
+      /* ═══════════════════════════════════════════════════════════════
+         Ring (Circular Progress)
+         ═══════════════════════════════════════════════════════════════ */
+      .ring-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 12px;
+      }
+      .ring-container svg circle {
+        transition:
+          stroke-dashoffset 0.6s ease-out,
+          stroke 0.3s ease-out;
+      }
+      .ring-label {
+        font-size: var(--text-md);
+        color: var(--t-muted);
+        margin-top: var(--space-xs);
+        text-transform: uppercase;
+        letter-spacing: 0.06em;
+      }
+
       /* ═══════════════════════════════════════════════════════════════
          Timeline Component
          ═══════════════════════════════════════════════════════════════ */
@@ -45496,6 +45946,9 @@ __decorateClass([
 __decorateClass([
   r5()
 ], ResultViewer.prototype, "_checklistToggledDone", 2);
+__decorateClass([
+  r5()
+], ResultViewer.prototype, "_expandedRows", 2);
 __decorateClass([
   n4({ type: String })
 ], ResultViewer.prototype, "collectionProperty", 2);
@@ -47953,7 +48406,7 @@ MarketplaceView = __decorateClass([
 
 // src/auto-ui/frontend/styles/beam-tokens.ts
 var beamTypographyTokens = {
-  "--font-display": "'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
+  "--font-display": "'Sora', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif",
   "--text-3xl": "2rem",
   "--text-2xl": "1.5rem",
   "--text-xl": "1.25rem",
@@ -47968,17 +48421,17 @@ var beamTypographyTokens = {
 function getBeamThemeTokens(themeMode) {
   const tokens = getThemeTokens(themeMode);
   if (themeMode === "dark") {
-    tokens["--color-surface"] = "hsl(220, 15%, 10%)";
-    tokens["--color-surface-container"] = "hsl(220, 15%, 12%)";
-    tokens["--color-surface-container-high"] = "hsl(220, 15%, 14%)";
-    tokens["--color-surface-container-highest"] = "hsl(220, 15%, 16%)";
-    tokens["--bg"] = "hsl(220, 15%, 10%)";
+    tokens["--color-surface"] = "#0B1018";
+    tokens["--color-surface-container"] = "#131B28";
+    tokens["--color-surface-container-high"] = "#1A2433";
+    tokens["--color-surface-container-highest"] = "#212D3E";
+    tokens["--bg"] = "#0B1018";
   } else {
-    tokens["--color-surface"] = "#eae4dd";
-    tokens["--color-surface-container"] = "#f8f5f1";
-    tokens["--color-surface-container-high"] = "#f0ebe5";
-    tokens["--color-surface-container-highest"] = "#e8e2db";
-    tokens["--bg"] = "#eae4dd";
+    tokens["--color-surface"] = "#EEF1F5";
+    tokens["--color-surface-container"] = "#FFFFFF";
+    tokens["--color-surface-container-high"] = "#E4EAF1";
+    tokens["--color-surface-container-highest"] = "#D8E0EA";
+    tokens["--bg"] = "#EEF1F5";
   }
   return tokens;
 }
@@ -48558,6 +49011,273 @@ CustomUiRenderer = __decorateClass([
   t4("custom-ui-renderer")
 ], CustomUiRenderer);
 
+// src/auto-ui/frontend/components/canvas-renderer.ts
+function getBeamThemeTokens2(themeMode) {
+  const tokens = getThemeTokens(themeMode);
+  if (themeMode === "dark") {
+    tokens["--color-surface"] = "#0B1018";
+    tokens["--color-surface-container"] = "#131B28";
+    tokens["--color-surface-container-high"] = "#1A2433";
+    tokens["--color-surface-container-highest"] = "#212D3E";
+    tokens["--bg"] = "#0B1018";
+  } else {
+    tokens["--color-surface"] = "#EEF1F5";
+    tokens["--color-surface-container"] = "#FFFFFF";
+    tokens["--color-surface-container-high"] = "#E4EAF1";
+    tokens["--color-surface-container-highest"] = "#D8E0EA";
+    tokens["--bg"] = "#EEF1F5";
+  }
+  return tokens;
+}
+var CanvasRenderer = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.photon = "";
+    this.method = "";
+    this.theme = "dark";
+    this._loading = true;
+    this._iframeRef = null;
+    this._blobUrl = null;
+    this._iframeReady = false;
+    this._messageBuffer = [];
+    this._resizeObserver = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    void this._buildAndMount();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._blobUrl) {
+      URL.revokeObjectURL(this._blobUrl);
+      this._blobUrl = null;
+    }
+  }
+  /**
+   * Push a canvas/ui message to the iframe (HTML layout with data-slot placeholders)
+   */
+  pushUI(htmlContent) {
+    this._postOrBuffer({
+      jsonrpc: "2.0",
+      method: "canvas/ui",
+      params: { html: htmlContent }
+    });
+  }
+  /**
+   * Push a canvas/data message to the iframe (JSON data targeting a named slot)
+   */
+  pushData(slot, data) {
+    this._postOrBuffer({
+      jsonrpc: "2.0",
+      method: "canvas/data",
+      params: { slot, data }
+    });
+  }
+  _postOrBuffer(message) {
+    if (this._iframeReady && this._iframeRef?.contentWindow) {
+      this._iframeRef.contentWindow.postMessage(message, "*");
+    } else {
+      this._messageBuffer.push(message);
+    }
+  }
+  _flushBuffer() {
+    if (!this._iframeRef?.contentWindow) return;
+    for (const msg of this._messageBuffer) {
+      this._iframeRef.contentWindow.postMessage(msg, "*");
+    }
+    this._messageBuffer = [];
+  }
+  async _buildAndMount() {
+    this._loading = true;
+    try {
+      const bridgeRes = await fetch(
+        `/api/platform-bridge?photon=${encodeURIComponent(this.photon)}&method=${encodeURIComponent(this.method)}&theme=${encodeURIComponent(this.theme)}`,
+        { signal: AbortSignal.timeout(1e4) }
+      );
+      if (!bridgeRes.ok) throw new Error("Failed to load platform bridge");
+      const bridgeScript = await bridgeRes.text();
+      const baseCSS = `<style>
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  body {
+    font-family: var(--font-family-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+    background: var(--color-surface);
+    color: var(--color-on-surface);
+    font-size: var(--font-size-sm, 14px);
+    line-height: 1.5;
+    padding: var(--space-4, 16px);
+  }
+  a { color: var(--color-primary); }
+  [data-slot] {
+    min-height: 40px;
+    transition: opacity 0.2s ease;
+  }
+  [data-slot].photon-loading {
+    opacity: 0.4;
+  }
+  [data-slot][data-rendered] {
+    opacity: 1;
+  }
+</style>`;
+      const renderersScript = `<script src="/api/photon-renderers.js"><\/script>`;
+      const shellHtml = `<html>
+<head>
+  <meta name="photon-canvas" content="true">
+  ${bridgeScript}
+  ${baseCSS}
+  ${renderersScript}
+</head>
+<body></body>
+</html>`;
+      const blob = new Blob([shellHtml], { type: "text/html" });
+      this._blobUrl = URL.createObjectURL(blob);
+      await this.updateComplete;
+      const container = this.shadowRoot?.querySelector(".iframe-host");
+      if (!container) return;
+      const old = container.querySelector("iframe");
+      if (old) old.remove();
+      const iframe = document.createElement("iframe");
+      iframe.setAttribute(
+        "sandbox",
+        "allow-scripts allow-forms allow-same-origin allow-popups allow-modals"
+      );
+      iframe.setAttribute("allowtransparency", "true");
+      iframe.addEventListener("load", () => this._handleIframeLoad(iframe));
+      iframe.src = this._blobUrl;
+      container.appendChild(iframe);
+    } catch (e8) {
+      console.error("[canvas-renderer] Failed to build:", e8);
+      this._loading = false;
+    }
+  }
+  _handleIframeLoad(iframe) {
+    this._iframeRef = iframe;
+    this._loading = false;
+    const themeTokens = getBeamThemeTokens2(this.theme);
+    iframe.contentWindow?.postMessage(
+      {
+        jsonrpc: "2.0",
+        method: "ui/notifications/host-context-changed",
+        params: {
+          theme: this.theme,
+          styles: { variables: themeTokens }
+        }
+      },
+      "*"
+    );
+    iframe.contentWindow?.postMessage(
+      {
+        type: "photon:theme-change",
+        theme: this.theme,
+        themeTokens: { ...themeTokens, ...beamTypographyTokens }
+      },
+      "*"
+    );
+    this._iframeReady = true;
+    this._flushBuffer();
+    this._startAutoResize(iframe);
+  }
+  _startAutoResize(iframe) {
+    const resize = () => {
+      try {
+        const height = iframe.contentDocument?.body?.scrollHeight;
+        if (height && height > 0) {
+          iframe.style.height = `${height + 16}px`;
+          this.style.minHeight = `${height + 16}px`;
+        }
+      } catch (_3) {
+      }
+    };
+    try {
+      const body = iframe.contentDocument?.body;
+      if (body) {
+        this._resizeObserver = new MutationObserver(resize);
+        this._resizeObserver.observe(body, { childList: true, subtree: true, attributes: true });
+      }
+    } catch (_3) {
+    }
+    const interval = setInterval(resize, 500);
+    setTimeout(() => clearInterval(interval), 1e4);
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("theme") && this._iframeRef?.contentWindow) {
+      const themeTokens = getBeamThemeTokens2(this.theme);
+      this._iframeRef.contentWindow.postMessage(
+        {
+          jsonrpc: "2.0",
+          method: "ui/notifications/host-context-changed",
+          params: {
+            theme: this.theme,
+            styles: { variables: themeTokens }
+          }
+        },
+        "*"
+      );
+    }
+  }
+  render() {
+    return b2`
+      <div class="iframe-host"></div>
+      ${this._loading ? b2`<div class="loading"><span>Preparing canvas…</span></div>` : ""}
+    `;
+  }
+};
+CanvasRenderer.styles = [
+  theme,
+  i`
+      :host {
+        display: block;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        min-height: 400px;
+        background: transparent;
+        border-radius: var(--radius-md);
+        overflow: visible;
+      }
+
+      .iframe-host {
+        width: 100%;
+        height: 100%;
+      }
+
+      iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+        display: block;
+        will-change: transform;
+      }
+
+      .loading {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: 12px;
+        color: var(--t-muted);
+        font-size: 13px;
+      }
+    `
+];
+__decorateClass([
+  n4({ type: String })
+], CanvasRenderer.prototype, "photon", 2);
+__decorateClass([
+  n4({ type: String })
+], CanvasRenderer.prototype, "method", 2);
+__decorateClass([
+  n4({ type: String })
+], CanvasRenderer.prototype, "theme", 2);
+__decorateClass([
+  r5()
+], CanvasRenderer.prototype, "_loading", 2);
+CanvasRenderer = __decorateClass([
+  t4("canvas-renderer")
+], CanvasRenderer);
+
 // node_modules/zod/v4/core/core.js
 var NEVER = Object.freeze({
   status: "aborted"
@@ -68366,20 +69086,20 @@ function X_(r7, i7) {
 }
 
 // src/auto-ui/frontend/components/mcp-app-renderer.ts
-function getBeamThemeTokens2(themeMode) {
+function getBeamThemeTokens3(themeMode) {
   const tokens = getThemeTokens(themeMode);
   if (themeMode === "dark") {
-    tokens["--color-surface"] = "hsl(220, 15%, 10%)";
-    tokens["--color-surface-container"] = "hsl(220, 15%, 12%)";
-    tokens["--color-surface-container-high"] = "hsl(220, 15%, 14%)";
-    tokens["--color-surface-container-highest"] = "hsl(220, 15%, 16%)";
-    tokens["--bg"] = "hsl(220, 15%, 10%)";
+    tokens["--color-surface"] = "#0B1018";
+    tokens["--color-surface-container"] = "#131B28";
+    tokens["--color-surface-container-high"] = "#1A2433";
+    tokens["--color-surface-container-highest"] = "#212D3E";
+    tokens["--bg"] = "#0B1018";
   } else {
-    tokens["--color-surface"] = "#eae4dd";
-    tokens["--color-surface-container"] = "#f8f5f1";
-    tokens["--color-surface-container-high"] = "#f0ebe5";
-    tokens["--color-surface-container-highest"] = "#e8e2db";
-    tokens["--bg"] = "#eae4dd";
+    tokens["--color-surface"] = "#EEF1F5";
+    tokens["--color-surface-container"] = "#FFFFFF";
+    tokens["--color-surface-container-high"] = "#E4EAF1";
+    tokens["--color-surface-container-highest"] = "#D8E0EA";
+    tokens["--bg"] = "#EEF1F5";
   }
   return tokens;
 }
@@ -68511,14 +69231,14 @@ var McpAppRenderer = class extends i4 {
   willUpdate(changedProperties) {
     if (changedProperties.has("theme")) {
       if (this._bridge) {
-        const specTokens = filterSpecVariables(getBeamThemeTokens2(this.theme));
+        const specTokens = filterSpecVariables(getBeamThemeTokens3(this.theme));
         this._bridge.setHostContext({
           theme: this.theme,
           styles: { variables: specTokens }
         });
       }
       if (this._iframeRef?.contentWindow) {
-        const themeTokens = getBeamThemeTokens2(this.theme);
+        const themeTokens = getBeamThemeTokens3(this.theme);
         this._iframeRef.contentWindow.postMessage(
           {
             jsonrpc: "2.0",
@@ -68632,7 +69352,7 @@ var McpAppRenderer = class extends i4 {
     const iframe = e8.target;
     this._iframeRef = iframe;
     if (!iframe.contentWindow) return;
-    const themeTokens = getBeamThemeTokens2(this.theme);
+    const themeTokens = getBeamThemeTokens3(this.theme);
     iframe.contentWindow.postMessage(
       {
         jsonrpc: "2.0",
@@ -68676,7 +69396,7 @@ var McpAppRenderer = class extends i4 {
       const msg = event.data;
       if (!msg || typeof msg !== "object") return;
       if (msg.jsonrpc === "2.0" && msg.method === "ui/initialize" && msg.id != null) {
-        const themeTokens2 = getBeamThemeTokens2(this.theme);
+        const themeTokens2 = getBeamThemeTokens3(this.theme);
         iframe.contentWindow?.postMessage(
           {
             jsonrpc: "2.0",
@@ -68745,7 +69465,7 @@ var McpAppRenderer = class extends i4 {
       void asyncMessageHandler(event);
     };
     window.addEventListener("message", this._messageHandler);
-    const specTokens = filterSpecVariables(getBeamThemeTokens2(this.theme));
+    const specTokens = filterSpecVariables(getBeamThemeTokens3(this.theme));
     this._bridge = new W_(
       null,
       { name: "Photon Beam", version: "1.0.0" },
@@ -99300,7 +100020,7 @@ var OverflowMenu = class extends i4 {
       border: 1px solid ${borderGlass};
       border-radius: ${radiusMd};
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-      font-family: 'Inter', sans-serif;
+      font-family: 'DM Sans', sans-serif;
       padding: 4px 0;
     `;
     this.items.forEach((item) => {
@@ -99618,7 +100338,7 @@ var InstancePanel = class extends i4 {
       border: 1px solid ${borderGlass};
       border-radius: ${radiusMd};
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
-      font-family: 'Inter', sans-serif;
+      font-family: 'DM Sans', sans-serif;
       padding: 8px;
     `;
     const addFocusGlow = (el2) => {