@portel/photon 1.14.0 → 1.16.0

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

@@ -202,6 +202,10 @@ export function generateBridgeScript(context) {
       if (m.type === 'photon:result') {
         toolOutput = m.data;
         listeners.result.forEach(function(cb) { cb(m.data); });
+        // Also dispatch to named event listeners (proxy.onResult uses photon.on('result', cb))
+        if (eventListeners['result']) {
+          eventListeners['result'].forEach(function(cb) { cb(m.data); });
+        }
       }
       else if (m.type === 'photon:theme-change') {
         ctx.theme = m.theme || 'dark';
@@ -462,13 +466,61 @@ export function generateBridgeScript(context) {
 
     // Render data in any auto UI format: table, chart:bar, gauge, metric, etc.
     // Usage: photon.render(container, data, 'chart:bar', { label: 'name', value: 'count' })
+    // Accepts optional motion config: photon.render(el, data, 'table', { enter: 'scale-in', transition: 'matte:radial' })
     // Lazy-loads the renderer bundle on first call.
     render: function(container, data, format, opts) {
       if (!container) return;
       format = format || 'json';
+      opts = opts || {};
+
+      // Extract motion options
+      var motionEnter = opts.enter;
+      var motionTransition = opts.transition;
 
       function doRender() {
+        // Capture existing content for matte transition
+        var existingHTML = '';
+        if (motionTransition && container.innerHTML.trim()) {
+          existingHTML = container.innerHTML;
+        }
+
         window._photonRenderers.render(container, data, format, opts);
+
+        // Apply matte transition if there was previous content
+        if (existingHTML && motionTransition) {
+          var matteType = motionTransition.replace('matte:', '');
+          var outgoing = document.createElement('div');
+          outgoing.innerHTML = existingHTML;
+          outgoing.style.position = 'absolute';
+          outgoing.style.inset = '0';
+
+          var incoming = document.createElement('div');
+          while (container.firstChild) incoming.appendChild(container.firstChild);
+
+          container.style.position = 'relative';
+          container.appendChild(outgoing);
+          container.appendChild(incoming);
+
+          // Apply matte class
+          if (matteType === 'radial' || matteType === 'diagonal') {
+            incoming.classList.add('motion-matte-' + matteType);
+          } else {
+            incoming.classList.add('motion-matte-reveal');
+            incoming.style.maskImage = "url('" + matteType + "')";
+            incoming.style.webkitMaskImage = "url('" + matteType + "')";
+          }
+
+          // Clean up after animation
+          incoming.addEventListener('animationend', function() {
+            outgoing.remove();
+            while (incoming.firstChild) container.appendChild(incoming.firstChild);
+            incoming.remove();
+            container.style.position = '';
+          }, { once: true });
+        } else if (motionEnter) {
+          // Simple enter animation on the container
+          container.classList.add('motion-' + motionEnter);
+        }
       }
 
       if (window._photonRenderers) { doRender(); return; }
@@ -496,6 +548,67 @@ export function generateBridgeScript(context) {
         container.innerHTML = '<pre style="font-size:11px;color:#888;">' + JSON.stringify(data, null, 2) + '</pre>';
       };
       document.head.appendChild(s);
+    },
+
+    // ─────────────────────────────────────────────────────────────────────────
+    // MOTION API
+    // Usage: photon.motion.enter(el, 'slide-up')
+    //        photon.motion.exit(el, 'fade-out').then(() => console.log('removed'))
+    //        photon.motion.stagger(container)
+    //        photon.motion.depth(el, 'float')
+    // ─────────────────────────────────────────────────────────────────────────
+    motion: {
+      enter: function(el, effect) {
+        if (!el) return;
+        effect = effect || 'fade-in';
+        el.classList.add('motion-' + effect);
+      },
+      exit: function(el, effect) {
+        if (!el) return Promise.resolve();
+        effect = effect || 'fade-out';
+
+        // Respect reduced motion
+        if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+          el.remove();
+          return Promise.resolve();
+        }
+
+        el.classList.add('motion-' + effect);
+        return new Promise(function(resolve) {
+          function onEnd() {
+            el.removeEventListener('animationend', onEnd);
+            el.remove();
+            resolve();
+          }
+          el.addEventListener('animationend', onEnd);
+          // Safety timeout
+          setTimeout(function() {
+            if (el.parentElement) {
+              el.removeEventListener('animationend', onEnd);
+              el.remove();
+              resolve();
+            }
+          }, 1000);
+        });
+      },
+      stagger: function(container) {
+        if (!container) return;
+        container.classList.add('motion-stagger');
+      },
+      depth: function(el, preset) {
+        if (!el) return;
+        preset = preset || 'float';
+        // Ensure parent has perspective
+        var parent = el.parentElement;
+        if (parent && !parent.classList.contains('motion-perspective')) {
+          parent.classList.add('motion-perspective');
+        }
+        if (preset === 'tilt' || preset === 'tilt-right') {
+          el.classList.add('motion-' + preset);
+        } else {
+          el.classList.add('motion-depth-' + preset);
+        }
+      }
     }
   };
 
@@ -600,6 +713,122 @@ export function generateBridgeScript(context) {
   // Apply initial theme
   applyThemeTokens();
 
+  // ═══════════════════════════════════════════════════════════════════════════
+  // MOTION STYLES INJECTION
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function _injectMotionStyles() {
+    var style = document.createElement('style');
+    style.id = 'photon-motion';
+    style.textContent = [
+      '/* ═══ TIMING TOKENS ═══ */',
+      ':root {',
+      '  --motion-fast: 0.15s;',
+      '  --motion-normal: 0.3s;',
+      '  --motion-slow: 0.5s;',
+      '  --motion-slower: 0.8s;',
+      '  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);',
+      '  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);',
+      '  --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);',
+      '}',
+      '',
+      '/* ═══ ENTER ANIMATIONS ═══ */',
+      '@keyframes motion-fade-in { from { opacity: 0; } to { opacity: 1; } }',
+      '@keyframes motion-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }',
+      '@keyframes motion-slide-down { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }',
+      '@keyframes motion-slide-in-right { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }',
+      '@keyframes motion-slide-in-left { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } }',
+      '@keyframes motion-scale-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }',
+      '@keyframes motion-scale-up { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } }',
+      '@keyframes motion-flip-in { from { opacity: 0; transform: perspective(800px) rotateY(90deg); } to { opacity: 1; transform: perspective(800px) rotateY(0deg); } }',
+      '@keyframes motion-drop-in { from { opacity: 0; transform: translateY(-40px) scale(0.95); } 60% { opacity: 1; transform: translateY(4px) scale(1.01); } to { opacity: 1; transform: translateY(0) scale(1); } }',
+      '',
+      '/* ═══ EXIT ANIMATIONS ═══ */',
+      '@keyframes motion-fade-out { from { opacity: 1; } to { opacity: 0; } }',
+      '@keyframes motion-slide-out-down { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(16px); } }',
+      '@keyframes motion-scale-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.92); } }',
+      '@keyframes motion-zoom-out { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.5); } }',
+      '@keyframes motion-flip-out { from { opacity: 1; transform: perspective(800px) rotateY(0deg); } to { opacity: 0; transform: perspective(800px) rotateY(-90deg); } }',
+      '',
+      '/* ═══ PERSISTENT EFFECTS ═══ */',
+      '@keyframes motion-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }',
+      '@keyframes motion-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }',
+      '@keyframes motion-glow { 0%, 100% { box-shadow: 0 0 0 0 var(--glow-primary, rgba(100, 180, 255, 0)); } 50% { box-shadow: 0 0 12px 2px var(--glow-primary, rgba(100, 180, 255, 0.3)); } }',
+      '',
+      '/* ═══ ENTER CLASSES ═══ */',
+      '.motion-fade-in { animation: motion-fade-in var(--motion-normal) var(--motion-ease-out) both; }',
+      '.motion-slide-up { animation: motion-slide-up var(--motion-normal) var(--motion-ease-out) both; }',
+      '.motion-slide-down { animation: motion-slide-down var(--motion-normal) var(--motion-ease-out) both; }',
+      '.motion-slide-in-right { animation: motion-slide-in-right var(--motion-normal) var(--motion-ease-out) both; }',
+      '.motion-slide-in-left { animation: motion-slide-in-left var(--motion-normal) var(--motion-ease-out) both; }',
+      '.motion-scale-in { animation: motion-scale-in var(--motion-normal) var(--motion-ease-out) both; }',
+      '.motion-scale-up { animation: motion-scale-up var(--motion-normal) var(--motion-ease-spring) both; }',
+      '.motion-flip-in { animation: motion-flip-in var(--motion-slow) var(--motion-ease-out) both; }',
+      '.motion-drop-in { animation: motion-drop-in var(--motion-slow) var(--motion-ease-out) both; }',
+      '',
+      '/* ═══ EXIT CLASSES ═══ */',
+      '.motion-fade-out { animation: motion-fade-out var(--motion-normal) var(--motion-ease-in-out) both; }',
+      '.motion-slide-out-down { animation: motion-slide-out-down var(--motion-normal) var(--motion-ease-in-out) both; }',
+      '.motion-scale-out { animation: motion-scale-out var(--motion-normal) var(--motion-ease-in-out) both; }',
+      '.motion-zoom-out { animation: motion-zoom-out var(--motion-normal) var(--motion-ease-in-out) both; }',
+      '.motion-flip-out { animation: motion-flip-out var(--motion-slow) var(--motion-ease-in-out) both; }',
+      '',
+      '/* ═══ PERSISTENT CLASSES ═══ */',
+      '.motion-float { animation: motion-float 3s ease-in-out infinite; }',
+      '.motion-pulse { animation: motion-pulse 2s ease-in-out infinite; }',
+      '.motion-glow { animation: motion-glow 2s ease-in-out infinite; }',
+      '',
+      '/* ═══ STAGGER ═══ */',
+      '.motion-stagger > * { animation: motion-slide-up var(--motion-normal) var(--motion-ease-out) both; }',
+      '.motion-stagger > *:nth-child(1) { animation-delay: 0ms; }',
+      '.motion-stagger > *:nth-child(2) { animation-delay: 50ms; }',
+      '.motion-stagger > *:nth-child(3) { animation-delay: 100ms; }',
+      '.motion-stagger > *:nth-child(4) { animation-delay: 150ms; }',
+      '.motion-stagger > *:nth-child(5) { animation-delay: 200ms; }',
+      '.motion-stagger > *:nth-child(6) { animation-delay: 250ms; }',
+      '.motion-stagger > *:nth-child(7) { animation-delay: 300ms; }',
+      '.motion-stagger > *:nth-child(8) { animation-delay: 350ms; }',
+      '.motion-stagger > *:nth-child(9) { animation-delay: 400ms; }',
+      '.motion-stagger > *:nth-child(10) { animation-delay: 450ms; }',
+      '.motion-stagger > *:nth-child(n+11) { animation-delay: 500ms; }',
+      '',
+      '.motion-stagger-fast > * { animation: motion-fade-in var(--motion-fast) var(--motion-ease-out) both; }',
+      '.motion-stagger-fast > *:nth-child(1) { animation-delay: 0ms; }',
+      '.motion-stagger-fast > *:nth-child(2) { animation-delay: 30ms; }',
+      '.motion-stagger-fast > *:nth-child(3) { animation-delay: 60ms; }',
+      '.motion-stagger-fast > *:nth-child(4) { animation-delay: 90ms; }',
+      '.motion-stagger-fast > *:nth-child(5) { animation-delay: 120ms; }',
+      '.motion-stagger-fast > *:nth-child(n+6) { animation-delay: 150ms; }',
+      '',
+      '/* ═══ DEPTH / PERSPECTIVE ═══ */',
+      '.motion-perspective { perspective: 1200px; perspective-origin: center; }',
+      '.motion-depth-front { transform: translateZ(30px); }',
+      '.motion-depth-back { transform: translateZ(-20px) scale(1.04); filter: blur(0.5px); opacity: 0.85; }',
+      '.motion-depth-float { transform: translateZ(15px); filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.25)); }',
+      '.motion-tilt { transform: rotateY(-5deg) rotateX(2deg); transition: transform var(--motion-slow) var(--motion-ease-out); }',
+      '.motion-tilt:hover { transform: rotateY(0deg) rotateX(0deg); }',
+      '.motion-tilt-right { transform: rotateY(5deg) rotateX(2deg); transition: transform var(--motion-slow) var(--motion-ease-out); }',
+      '.motion-tilt-right:hover { transform: rotateY(0deg) rotateX(0deg); }',
+      '',
+      '/* ═══ MATTE TRANSITIONS ═══ */',
+      '.motion-matte-reveal { mask-size: 0% auto; mask-repeat: no-repeat; mask-position: center; animation: motion-matte-wipe var(--motion-slower) var(--motion-ease-out) forwards; }',
+      '@keyframes motion-matte-wipe { to { mask-size: 300% auto; } }',
+      '.motion-matte-radial { mask-image: radial-gradient(circle, white, black); mask-size: 0% 0%; mask-position: center; mask-repeat: no-repeat; animation: motion-matte-radial-reveal var(--motion-slower) var(--motion-ease-out) forwards; }',
+      '@keyframes motion-matte-radial-reveal { to { mask-size: 200% 200%; } }',
+      '.motion-matte-diagonal { mask-image: linear-gradient(135deg, white 0%, black 100%); mask-size: 300% 300%; mask-position: 100% 100%; animation: motion-matte-diagonal-reveal var(--motion-slower) var(--motion-ease-out) forwards; }',
+      '@keyframes motion-matte-diagonal-reveal { to { mask-position: 0% 0%; } }',
+      '',
+      '/* ═══ REDUCED MOTION ═══ */',
+      '@media (prefers-reduced-motion: reduce) {',
+      '  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }',
+      '  .motion-float, .motion-pulse, .motion-glow { animation: none !important; }',
+      '}'
+    ].join('\\n');
+    document.head.appendChild(style);
+  }
+
+  _injectMotionStyles();
+
   // ═══════════════════════════════════════════════════════════════════════════
   // DECLARATIVE DATA BINDING (Datastar-inspired, metadata-driven)
   // ═══════════════════════════════════════════════════════════════════════════
@@ -635,6 +864,283 @@ export function generateBridgeScript(context) {
   // Track bound elements and their last results for theme-change re-rendering
   var _boundElements = [];
 
+  // ═══════════════════════════════════════════════════════════════════════════
+  // FORM CSS (injected once on first form generation)
+  // ═══════════════════════════════════════════════════════════════════════════
+  var _formCSSInjected = false;
+  function _injectFormCSS() {
+    if (_formCSSInjected) return;
+    _formCSSInjected = true;
+    var style = document.createElement('style');
+    style.id = 'photon-form-css';
+    style.textContent = [
+      '.photon-auto-form { font-family: Inter, system-ui, sans-serif; max-width: 480px; margin: 0 auto; }',
+      '.photon-auto-form .pf-group { margin-bottom: 12px; }',
+      '.photon-auto-form label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; color: var(--color-on-surface, var(--text, #c0caf5)); }',
+      '.photon-auto-form label .pf-req { color: var(--color-error, var(--error, #f7768e)); margin-left: 2px; }',
+      '.photon-auto-form input, .photon-auto-form select, .photon-auto-form textarea {',
+      '  width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 6px;',
+      '  border: 1px solid var(--color-outline-variant, var(--border, #3b3d57)); background: var(--color-surface-container, var(--input, #1e2030));',
+      '  color: var(--color-on-surface, var(--text, #c0caf5)); font-size: 14px; font-family: inherit; outline: none;',
+      '}',
+      '.photon-auto-form input:focus, .photon-auto-form select:focus, .photon-auto-form textarea:focus {',
+      '  border-color: var(--color-primary, var(--accent, #7aa2f7));',
+      '}',
+      '.photon-auto-form input[type="checkbox"] { width: auto; margin-right: 8px; }',
+      '.photon-auto-form .pf-check-group { display: flex; align-items: center; }',
+      '.photon-auto-form .pf-desc { font-size: 11px; color: var(--color-on-surface-muted, var(--muted, #565f89)); margin-top: 2px; }',
+      '.photon-auto-form button[type="submit"] {',
+      '  margin-top: 16px; padding: 10px 24px; border-radius: 6px; border: none; cursor: pointer;',
+      '  background: var(--color-primary, var(--accent, #7aa2f7)); color: var(--color-on-primary, #fff); font-size: 14px; font-weight: 500;',
+      '  font-family: inherit; width: 100%;',
+      '}',
+      '.photon-auto-form button[type="submit"]:hover { opacity: 0.9; }',
+      '.photon-auto-form button[type="submit"]:disabled { opacity: 0.5; cursor: not-allowed; }',
+      '.photon-auto-form .pf-result { margin-top: 16px; }',
+      '.photon-auto-form .pf-error { color: var(--color-error, var(--error, #f7768e)); font-size: 13px; margin-top: 8px; }',
+    ].join('\\n');
+    document.head.appendChild(style);
+  }
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // FORM GENERATION (vanilla JS from JSON Schema)
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  function _shouldShowForm(meta, args) {
+    // Explicit data-view overrides auto-detection
+    // Otherwise: show form if any required params are missing from args
+    var schema = meta.inputSchema;
+    if (!schema || !schema.properties) return false; // no params → result
+    var required = schema.required || [];
+    if (required.length === 0) return false; // no required params → result
+    for (var i = 0; i < required.length; i++) {
+      if (!(required[i] in args)) return true; // missing required → form
+    }
+    return false; // all required present → result
+  }
+
+  function _escHtml(s) {
+    return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+  }
+
+  /**
+   * Load Beam's invoke-form component (Lit) for rich form rendering.
+   * Lazy-loads the form bundle on first use — provides custom inputs
+   * (date-picker, segmented-control, star-rating, etc.) in pure-view context.
+   */
+  function _loadRichForm(el, method, meta, args, proxy, format, renderResult) {
+    // Inject form bundle script (once)
+    if (!document.querySelector('script[data-form-bundle]')) {
+      var s = document.createElement('script');
+      s.type = 'module';
+      s.src = '/beam-form.bundle.js';
+      s.setAttribute('data-form-bundle', '1');
+      document.head.appendChild(s);
+    }
+
+    // Wait for invoke-form custom element to be defined
+    customElements.whenDefined('invoke-form').then(function() {
+      var form = document.createElement('invoke-form');
+      form.photonName = ctx.photon;
+      form.methodName = method;
+      form.params = meta.inputSchema.properties || {};
+      // Pass along any pre-set args as shared values
+      if (args && Object.keys(args).length > 0) {
+        form.sharedValues = args;
+      }
+
+      // Handle form submission — call the method via bridge proxy
+      form.addEventListener('submit', function(e) {
+        form.loading = true;
+        try {
+          var p = proxy[method](e.detail.args);
+          if (p && typeof p.then === 'function') {
+            p.then(function(r) {
+              form.loading = false;
+              renderResult(r);
+            }).catch(function(err) {
+              form.loading = false;
+              el.insertAdjacentHTML('beforeend',
+                '<div style="color:var(--color-error,#f87171);padding:8px;">Error: ' + _escHtml(err.message) + '</div>');
+            });
+          } else {
+            form.loading = false;
+            renderResult(p);
+          }
+        } catch (err) {
+          form.loading = false;
+          el.insertAdjacentHTML('beforeend',
+            '<div style="color:var(--color-error,#f87171);padding:8px;">Error: ' + _escHtml(err.message) + '</div>');
+        }
+      });
+
+      el.innerHTML = '';
+      el.appendChild(form);
+    });
+  }
+
+  function _generateForm(el, method, meta, args, proxy, format, renderResult) {
+    _injectFormCSS();
+    var schema = meta.inputSchema;
+    var props = schema.properties || {};
+    var required = schema.required || [];
+    var keys = Object.keys(props);
+
+    var form = document.createElement('form');
+    form.className = 'photon-auto-form';
+    form.setAttribute('autocomplete', 'off');
+
+    for (var i = 0; i < keys.length; i++) {
+      (function(key) {
+        var prop = props[key];
+        var isReq = required.indexOf(key) !== -1;
+        var type = prop.type || 'string';
+        var group = document.createElement('div');
+        group.className = 'pf-group';
+
+        var prefilled = args[key] !== undefined ? args[key] : (prop.default !== undefined ? prop.default : '');
+
+        if (type === 'boolean') {
+          group.className += ' pf-check-group';
+          var cb = document.createElement('input');
+          cb.type = 'checkbox';
+          cb.name = key;
+          cb.id = 'pf-' + key;
+          if (prefilled === true || prefilled === 'true') cb.checked = true;
+          var lbl = document.createElement('label');
+          lbl.htmlFor = 'pf-' + key;
+          lbl.textContent = prop.title || key;
+          group.appendChild(cb);
+          group.appendChild(lbl);
+        } else {
+          var lbl = document.createElement('label');
+          lbl.htmlFor = 'pf-' + key;
+          lbl.innerHTML = _escHtml(prop.title || key) + (isReq ? '<span class="pf-req">*</span>' : '');
+          group.appendChild(lbl);
+
+          var input;
+          if (prop.enum && prop.enum.length > 0) {
+            input = document.createElement('select');
+            input.name = key;
+            input.id = 'pf-' + key;
+            var placeholder = document.createElement('option');
+            placeholder.value = '';
+            placeholder.textContent = 'Select...';
+            input.appendChild(placeholder);
+            for (var j = 0; j < prop.enum.length; j++) {
+              var opt = document.createElement('option');
+              opt.value = prop.enum[j];
+              opt.textContent = prop.enum[j];
+              if (String(prefilled) === String(prop.enum[j])) opt.selected = true;
+              input.appendChild(opt);
+            }
+          } else if (type === 'number' || type === 'integer') {
+            input = document.createElement('input');
+            input.type = 'number';
+            input.name = key;
+            input.id = 'pf-' + key;
+            if (prop.minimum !== undefined) input.min = String(prop.minimum);
+            if (prop.maximum !== undefined) input.max = String(prop.maximum);
+            if (type === 'integer') input.step = '1';
+            if (prefilled !== '') input.value = String(prefilled);
+          } else if (prop.format === 'date') {
+            input = document.createElement('input');
+            input.type = 'date';
+            input.name = key;
+            input.id = 'pf-' + key;
+            if (prefilled) input.value = String(prefilled);
+          } else if (prop.maxLength && prop.maxLength > 200) {
+            input = document.createElement('textarea');
+            input.name = key;
+            input.id = 'pf-' + key;
+            input.rows = 4;
+            if (prefilled) input.value = String(prefilled);
+          } else {
+            input = document.createElement('input');
+            input.type = 'text';
+            input.name = key;
+            input.id = 'pf-' + key;
+            if (prefilled !== '') input.value = String(prefilled);
+          }
+
+          if (isReq) input.required = true;
+          if (prop.description) input.placeholder = prop.description;
+          group.appendChild(input);
+
+          if (prop.description) {
+            var desc = document.createElement('div');
+            desc.className = 'pf-desc';
+            desc.textContent = prop.description;
+            group.appendChild(desc);
+          }
+        }
+
+        form.appendChild(group);
+      })(keys[i]);
+    }
+
+    var submitBtn = document.createElement('button');
+    submitBtn.type = 'submit';
+    submitBtn.textContent = 'Run';
+    form.appendChild(submitBtn);
+
+    var resultDiv = document.createElement('div');
+    resultDiv.className = 'pf-result';
+    form.appendChild(resultDiv);
+
+    form.addEventListener('submit', function(e) {
+      e.preventDefault();
+      submitBtn.disabled = true;
+      submitBtn.textContent = 'Running...';
+
+      // Collect form values
+      var formArgs = {};
+      for (var k = 0; k < keys.length; k++) {
+        var key = keys[k];
+        var prop = props[key];
+        var type = prop.type || 'string';
+        var inputEl = form.querySelector('[name="' + key + '"]');
+        if (!inputEl) continue;
+        if (type === 'boolean') {
+          formArgs[key] = inputEl.checked;
+        } else if (type === 'number' || type === 'integer') {
+          var val = inputEl.value;
+          if (val !== '') formArgs[key] = type === 'integer' ? parseInt(val, 10) : parseFloat(val);
+        } else {
+          var val = inputEl.value;
+          if (val !== '') formArgs[key] = val;
+        }
+      }
+
+      try {
+        var p = proxy[method](formArgs);
+        if (p && typeof p.then === 'function') {
+          p.then(function(r) {
+            submitBtn.disabled = false;
+            submitBtn.textContent = 'Run';
+            resultDiv.innerHTML = '';
+            if (format) {
+              window.photon.render(resultDiv, r, format);
+            } else {
+              renderResult(r);
+            }
+          }).catch(function(err) {
+            submitBtn.disabled = false;
+            submitBtn.textContent = 'Run';
+            resultDiv.innerHTML = '<div class="pf-error">Error: ' + _escHtml(err.message) + '</div>';
+          });
+        }
+      } catch (err) {
+        submitBtn.disabled = false;
+        submitBtn.textContent = 'Run';
+        resultDiv.innerHTML = '<div class="pf-error">Error: ' + _escHtml(err.message) + '</div>';
+      }
+    });
+
+    el.innerHTML = '';
+    el.appendChild(form);
+  }
+
   function _bindElements() {
     if (!ctx.photon) return;
     var proxy = window[ctx.photon];
@@ -736,6 +1242,31 @@ export function generateBridgeScript(context) {
           _originalRender(result);
         };
 
+        // ── Auto-detect: form vs result ──
+        // data-view="form" forces form, data-view="result" forces invoke
+        // Otherwise: show form if required params are missing from args
+        var viewOverride = el.getAttribute('data-view');
+        var showForm = false;
+        if (viewOverride === 'form') {
+          showForm = true;
+        } else if (viewOverride === 'result') {
+          showForm = false;
+        } else {
+          showForm = _shouldShowForm(meta, args);
+        }
+
+        if (showForm && meta.inputSchema) {
+          // Use rich invoke-form (Lit component) for pure-view form mode.
+          // The form bundle is lazy-loaded on first use — provides custom inputs
+          // (date-picker, segmented-control, etc.) without loading full Beam chrome.
+          if (viewOverride === 'form') {
+            _loadRichForm(el, method, meta, args, proxy, format, renderResult);
+          } else {
+            _generateForm(el, method, meta, args, proxy, format, renderResult);
+          }
+          return; // form handles its own lifecycle
+        }
+
         // ── Call method and render ──
         function load() {
           el.classList.add('photon-loading');
@@ -810,11 +1341,58 @@ export function generateBridgeScript(context) {
     }
   }
 
+  // ═══════════════════════════════════════════════════════════════════════════
+  // VIEWPORT-FILL SCALING (for standalone pure-view pages)
+  // ═══════════════════════════════════════════════════════════════════════════
+  function _setupViewportScaling() {
+    var container = document.getElementById('pure-view');
+    if (!container) return; // not a standalone pure-view page
+
+    var observer = new ResizeObserver(function() {
+      // Get the rendered content's natural size
+      var content = container.firstElementChild;
+      if (!content) return;
+
+      // Don't scale forms — they should stay at natural size
+      if (content.classList && content.classList.contains('photon-auto-form')) return;
+
+      var viewportH = window.innerHeight;
+      var viewportW = window.innerWidth;
+      var contentH = content.scrollHeight || content.offsetHeight;
+      var contentW = content.scrollWidth || content.offsetWidth;
+
+      if (contentH < 10 || contentW < 10) return; // not yet rendered
+
+      var pad = 32;
+      var zoomH = (viewportH - pad) / contentH;
+      var zoomW = (viewportW - pad) / contentW;
+      var zoom = Math.min(zoomH, zoomW);
+      var clamped = Math.max(0.5, Math.min(3, zoom));
+
+      if (clamped > 1.02 || clamped < 0.95) {
+        container.style.zoom = String(clamped);
+      } else {
+        container.style.zoom = '';
+      }
+    });
+
+    observer.observe(container);
+    window.addEventListener('resize', function() {
+      // Re-trigger observer measurement
+      if (container.firstElementChild) {
+        observer.unobserve(container);
+        observer.observe(container);
+      }
+    });
+  }
+
   // Only run declarative data binding for .photon.html templates
   // (signaled by <meta name="photon-template"> injected by custom-ui-renderer)
   function _maybeBindElements() {
     if (document.querySelector('meta[name="photon-template"]')) {
       _bindElements();
+      // Set up viewport scaling after binding (for pure-view standalone pages)
+      _setupViewportScaling();
     }
   }
 

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":"AAUA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAgB5D,6DAA6D;AAC7D,gFAAgF;AAEhF;;;;;;;;GAQG;AACH,MAAM,UAAU,oBAAoB,CAAC,OAA4B;IAC/D,2DAA2D;IAC3D,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAE5C,OAAO;;;;;;;;;cASK,WAAW;sBACH,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UAy0B3B,CAAC;AACX,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,4BAA4B,CAAC,OAS5C;IACC,OAAO,oBAAoB,CAAC;QAC1B,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,MAAM,EAAE,OAAO,CAAC,MAAM,IAAI,EAAE;QAC5B,MAAM,EAAE,OAAO,CAAC,MAAM,IAAI,EAAE;QAC5B,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,WAAW,EAAE,OAAO,CAAC,WAAW;QAChC,eAAe,EAAE,OAAO,CAAC,eAAe;KACzC,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/auto-ui/bridge/index.ts"],"names":[],"mappings":"AAUA,OAAO,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAgB5D,6DAA6D;AAC7D,gFAAgF;AAEhF;;;;;;;;GAQG;AACH,MAAM,UAAU,oBAAoB,CAAC,OAA4B;IAC/D,2DAA2D;IAC3D,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IACpD,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAE5C,OAAO;;;;;;;;;cASK,WAAW;sBACH,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA24C3B,CAAC;AACX,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,4BAA4B,CAAC,OAS5C;IACC,OAAO,oBAAoB,CAAC;QAC1B,KAAK,EAAE,OAAO,CAAC,KAAK;QACpB,MAAM,EAAE,OAAO,CAAC,MAAM;QACtB,MAAM,EAAE,OAAO,CAAC,MAAM,IAAI,EAAE;QAC5B,MAAM,EAAE,OAAO,CAAC,MAAM,IAAI,EAAE;QAC5B,QAAQ,EAAE,OAAO,CAAC,QAAQ;QAC1B,WAAW,EAAE,OAAO,CAAC,WAAW;QAChC,eAAe,EAAE,OAAO,CAAC,eAAe;KACzC,CAAC,CAAC;AACL,CAAC"}

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,CA8tChD"}
+{"version":3,"file":"renderers.d.ts","sourceRoot":"","sources":["../../../src/auto-ui/bridge/renderers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,wBAAgB,uBAAuB,IAAI,MAAM,CAkuChD"}