@portel/photon 1.20.1 → 1.22.0

package/dist/auto-ui/bridge/index.js

@@ -13,21 +13,21 @@ import { getThemeTokens } from '../design-system/tokens.js';
 export function generateBridgeScript(context) {
     // Get theme tokens for the specified theme (light or dark)
     const themeTokens = getThemeTokens(context.theme);
-    // When hosted in Beam, override surface tokens to match Beam's blue-tinted backgrounds
+    // When hosted in Beam, override surface tokens to match Beam's backgrounds
     if (context.hostName === 'beam') {
         if (context.theme === 'dark') {
-            themeTokens['--color-surface'] = 'hsl(220, 15%, 10%)';
-            themeTokens['--color-surface-container'] = 'hsl(220, 15%, 12%)';
-            themeTokens['--color-surface-container-high'] = 'hsl(220, 15%, 14%)';
-            themeTokens['--color-surface-container-highest'] = 'hsl(220, 15%, 16%)';
-            themeTokens['--bg'] = 'hsl(220, 15%, 10%)';
+            themeTokens['--color-surface'] = '#0B1018';
+            themeTokens['--color-surface-container'] = '#131B28';
+            themeTokens['--color-surface-container-high'] = '#1A2433';
+            themeTokens['--color-surface-container-highest'] = '#212D3E';
+            themeTokens['--bg'] = '#0B1018';
         }
         else {
-            themeTokens['--color-surface'] = '#eae4dd';
-            themeTokens['--color-surface-container'] = '#f8f5f1';
-            themeTokens['--color-surface-container-high'] = '#f0ebe5';
-            themeTokens['--color-surface-container-highest'] = '#e8e2db';
-            themeTokens['--bg'] = '#eae4dd';
+            themeTokens['--color-surface'] = '#EEF1F5';
+            themeTokens['--color-surface-container'] = '#FFFFFF';
+            themeTokens['--color-surface-container-high'] = '#E4EAF1';
+            themeTokens['--color-surface-container-highest'] = '#D8E0EA';
+            themeTokens['--bg'] = '#EEF1F5';
         }
     }
     const themeTokensJson = JSON.stringify(themeTokens);
@@ -209,6 +209,22 @@ export function generateBridgeScript(context) {
       else if (m.method === 'photon/notifications/emit') {
         listeners.emit.forEach(function(cb) { cb(m.params); });
       }
+      // Canvas slot reconciler messages
+      else if (m.method === 'canvas/ui') {
+        var html = m.params && m.params.html;
+        if (html) {
+          document.body.innerHTML = html;
+          _canvasReconciler.scanSlots();
+        }
+      }
+      else if (m.method === 'canvas/data') {
+        var slot = m.params && m.params.slot;
+        var data = m.params && m.params.data;
+        if (slot) {
+          _canvasReconciler.bufferData(slot, data);
+          _canvasReconciler.tryRender(slot);
+        }
+      }
       return;
     }
 
@@ -400,6 +416,9 @@ export function generateBridgeScript(context) {
     get method() { return ctx.method; },
     get hostContext() { return hostContext; },
 
+    // List of all supported format names (lazy — loaded when renderers bundle is ready)
+    get formats() { return window._photonRenderers ? window._photonRenderers.formats : []; },
+
     sendSizeChanged: sendSizeChanged,
     setupAutoResize: setupAutoResize,
     parseSizeMeta: parseSizeMeta,
@@ -427,6 +446,17 @@ export function generateBridgeScript(context) {
       };
     },
 
+    // Show a toast notification in the host UI
+    // Usage: photon.showToast('Saved!', 'success', 3000)
+    showToast: function(message, type, duration) {
+      postToHost({
+        type: 'photon:toast',
+        message: message || '',
+        toastType: type || 'info',
+        duration: duration || 3000
+      });
+    },
+
     // Render a QR code into a container element (convenience shortcut)
     // Usage: photon.renderQR(element, 'https://example.com', { size: 256 })
     renderQR: function(container, text, opts) {
@@ -846,6 +876,72 @@ export function generateBridgeScript(context) {
 
   _injectMotionStyles();
 
+  // ═══════════════════════════════════════════════════════════════════════════
+  // CANVAS SLOT RECONCILER
+  // ═══════════════════════════════════════════════════════════════════════════
+  //
+  // Two-stream merge: canvas/ui (HTML with data-slot placeholders) and
+  // canvas/data (JSON targeting named slots). Order-independent — either
+  // stream can arrive first; the reconciler buffers and renders when both
+  // a slot element and its data are available.
+  //
+  //   <div data-slot="revenue" data-format="chart:line"></div>
+  //   { slot: "revenue", data: [...] }
+  //   → photon.render(el, data, "chart:line")
+
+  var _canvasReconciler = (function() {
+    var slots = {};  // { [name]: { el, format, data, version } }
+
+    return {
+      scanSlots: function() {
+        var els = document.querySelectorAll('[data-slot]');
+        // Mark all existing slots as stale, then refresh
+        var seen = {};
+        for (var i = 0; i < els.length; i++) {
+          var name = els[i].getAttribute('data-slot');
+          if (!name) continue;
+          seen[name] = true;
+          var existing = slots[name] || {};
+          slots[name] = {
+            el: els[i],
+            format: els[i].getAttribute('data-format') || 'json',
+            data: existing.data !== undefined ? existing.data : null,
+            version: existing.version || 0
+          };
+          // Show loading state
+          if (slots[name].data === null) {
+            els[i].classList.add('photon-loading');
+          }
+          // If data was buffered before UI arrived, render now
+          if (slots[name].data !== null) {
+            this.tryRender(name);
+          }
+        }
+        // Prune orphaned slots (present in old UI but not new)
+        for (var key in slots) {
+          if (!seen[key]) delete slots[key];
+        }
+      },
+
+      bufferData: function(name, data) {
+        if (!slots[name]) {
+          slots[name] = { el: null, format: null, data: data, version: 1 };
+        } else {
+          slots[name].data = data;
+          slots[name].version++;
+        }
+      },
+
+      tryRender: function(name) {
+        var s = slots[name];
+        if (!s || !s.el || s.data === null) return;
+        s.el.classList.remove('photon-loading');
+        window.photon.render(s.el, s.data, s.format);
+        s.el.setAttribute('data-rendered', 'true');
+      }
+    };
+  })();
+
   // ═══════════════════════════════════════════════════════════════════════════
   // DECLARATIVE DATA BINDING (Datastar-inspired, metadata-driven)
   // ═══════════════════════════════════════════════════════════════════════════

package/dist/auto-ui/bridge/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/auto-ui/bridge/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/auto-ui/bridge/index.ts"],"names":[],"mappings":"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"}

package/dist/auto-ui/bridge/renderers.d.ts

@@ -11,4 +11,18 @@
  *   photon.render(container, data, 'gauge', { min: 0, max: 100 })
  */
 export declare function generateRenderersScript(): string;
+/**
+ * Format catalog — format name → expected data shape.
+ * Used by AI to generate valid canvas data for each slot format.
+ *
+ * Usage:
+ *   import { FORMAT_CATALOG, SUPPORTED_FORMATS } from './renderers.js';
+ */
+export interface FormatSpec {
+    data: string;
+    example: unknown;
+}
+export declare const FORMAT_CATALOG: Record<string, FormatSpec>;
+/** Flat list of supported format names */
+export declare const SUPPORTED_FORMATS: string[];
 //# sourceMappingURL=renderers.d.ts.map

package/dist/auto-ui/bridge/renderers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../../../src/auto-ui/bridge/renderers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,wBAAgB,uBAAuB,IAAI,MAAM,CAu6ChD"}
+{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../../../src/auto-ui/bridge/renderers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,wBAAgB,uBAAuB,IAAI,MAAM,CA0xDhD;AAED;;;;;;GAMG;AACH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CA+PrD,CAAC;AAEF,0CAA0C;AAC1C,eAAO,MAAM,iBAAiB,EAAE,MAAM,EAAgC,CAAC"}