@scenar/embed 0.9.0 → 0.10.0

package/embed.global.js

@@ -1 +1 @@
-var ScenarEmbed=function(o){"use strict";var I=Object.defineProperty;var N=(o,u,d)=>u in o?I(o,u,{enumerable:!0,configurable:!0,writable:!0,value:d}):o[u]=d;var E=(o,u,d)=>N(o,typeof u!="symbol"?u+"":u,d);const u="scenar-embed";function g(e){return{source:u,v:1,...e}}function S(e){if(typeof e!="object"||e===null)return!1;const s=e;return s.source===u&&s.v===1}function l(e){return typeof e=="number"&&Number.isFinite(e)}function A(e){if(!S(e))return null;const s=e.type;switch(s){case"started":case"paused":case"completed":case"audioBlocked":return{type:s};case"ready":return l(e.totalSteps)&&typeof e.hasNarration=="boolean"?{type:s,totalSteps:e.totalSteps,hasNarration:e.hasNarration}:null;case"resize":return l(e.widthPx)&&l(e.heightPx)?{type:s,widthPx:e.widthPx,heightPx:e.heightPx}:null;case"stepchange":return l(e.stepIndex)&&l(e.totalSteps)?{type:s,stepIndex:e.stepIndex,totalSteps:e.totalSteps}:null;case"progress":return l(e.stepIndex)&&l(e.totalSteps)&&l(e.fraction)?{type:s,stepIndex:e.stepIndex,totalSteps:e.totalSteps,fraction:e.fraction}:null;case"error":return typeof e.message=="string"?{type:s,message:e.message}:null;default:return null}}function w(e,s={}){const{iframe:t,origin:n}=e,{onEvent:r}=s,a=typeof window<"u",c=i=>{var h;(h=t.contentWindow)==null||h.postMessage(g(i),n)},f=i=>{if(i.source!==t.contentWindow||i.origin!==n)return;const h=A(i.data);h&&(r==null||r(h))};return a&&window.addEventListener("message",f),{play:()=>c({type:"play"}),pause:()=>c({type:"pause"}),seek:i=>c({type:"seek",timeMs:i}),setMuted:i=>c({type:"setMuted",muted:i}),setVolume:i=>c({type:"setVolume",volume:i}),prefetch:()=>c({type:"prefetch"}),destroy:()=>{c({type:"destroy"}),a&&window.removeEventListener("message",f)}}}const T=896,C=480;function M(e,s){return e==="light"?"light":e==="dark"||s?"dark":"light"}function _(e,s){const t=new URL(e);return t.searchParams.set("theme",s),t.toString()}function P(e){return new URL(e).origin}function R(){return typeof document<"u"&&document.documentElement.classList.contains("dark")}function O(e,s){const{src:t,theme:n="auto",onAspectRatio:r,onEvent:a}=s,c=P(t);let f=null;const i=()=>{const m=M(n,R());m!==f&&(f=m,e.src=_(t,m))},h=w({iframe:e,origin:c},{onEvent:m=>{m.type==="resize"&&(r==null||r({widthPx:m.widthPx,heightPx:m.heightPx})),a==null||a(m)}});let p;return n==="auto"&&typeof MutationObserver<"u"&&typeof document<"u"&&(p=new MutationObserver(i),p.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]})),i(),{controller:h,destroy(){p==null||p.disconnect(),h.destroy()}}}const k="scenar-embed",x="Interactive product tour",L=typeof HTMLElement<"u"?HTMLElement:class{};class y extends L{constructor(){super(...arguments);E(this,"iframe",null);E(this,"mount",null)}static get observedAttributes(){return["src","title","theme"]}connectedCallback(){this.iframe||this.render(),this.attach()}disconnectedCallback(){var t;(t=this.mount)==null||t.destroy(),this.mount=null}attributeChangedCallback(t,n,r){if(n!==r){if(t==="title"){this.iframe&&this.iframe.setAttribute("title",this.titleAttr());return}this.isConnected&&this.attach()}}play(){var t;(t=this.mount)==null||t.controller.play()}pause(){var t;(t=this.mount)==null||t.controller.pause()}seek(t){var n;(n=this.mount)==null||n.controller.seek(t)}setMuted(t){var n;(n=this.mount)==null||n.controller.setMuted(t)}setVolume(t){var n;(n=this.mount)==null||n.controller.setVolume(t)}titleAttr(){return this.getAttribute("title")??x}themeAttr(){const t=this.getAttribute("theme");return t==="light"||t==="dark"?t:"auto"}setAspectRatio(t,n){this.style.aspectRatio=`${t} / ${n}`}render(){this.style.display="block",this.style.position="relative",this.style.width="100%",this.setAspectRatio(T,C);const t=document.createElement("iframe");t.setAttribute("title",this.titleAttr()),t.setAttribute("loading","lazy"),t.setAttribute("allow","autoplay; fullscreen"),t.setAttribute("allowfullscreen",""),t.style.cssText="position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit",this.appendChild(t),this.iframe=t}attach(){var n;const t=this.getAttribute("src");!t||!this.iframe||((n=this.mount)==null||n.destroy(),this.mount=O(this.iframe,{src:t,theme:this.themeAttr(),onAspectRatio:({widthPx:r,heightPx:a})=>this.setAspectRatio(r,a),onEvent:r=>this.dispatchEvent(new CustomEvent(`scenar:${r.type}`,{detail:r}))}))}}function b(e=k){typeof customElements>"u"||customElements.get(e)||customElements.define(e,y)}return b(),o.ScenarEmbedElement=y,o.defineScenarEmbed=b,Object.defineProperty(o,Symbol.toStringTag,{value:"Module"}),o}({});
+var ScenarEmbed=function(l){"use strict";var W=Object.defineProperty;var G=(l,c,m)=>c in l?W(l,c,{enumerable:!0,configurable:!0,writable:!0,value:m}):l[c]=m;var S=(l,c,m)=>G(l,typeof c!="symbol"?c+"":c,m);const c="scenar-embed";function M(t){return{source:c,v:1,...t}}function T(t){if(typeof t!="object"||t===null)return!1;const n=t;return n.source===c&&n.v===1}function u(t){return typeof t=="number"&&Number.isFinite(t)}function _(t){if(t===void 0)return{};if(typeof t!="object"||t===null)return null;const n=t;return u(n.widthPx)&&n.widthPx>0&&u(n.heightPx)&&n.heightPx>0?{viewport:{widthPx:n.widthPx,heightPx:n.heightPx}}:null}function O(t){if(!T(t))return null;const n=t.type;switch(n){case"started":case"paused":case"completed":case"audioBlocked":return{type:n};case"ready":{if(!u(t.totalSteps)||typeof t.hasNarration!="boolean")return null;const e=_(t.viewport);return e===null?null:{type:n,totalSteps:t.totalSteps,hasNarration:t.hasNarration,...e}}case"resize":return u(t.widthPx)&&u(t.heightPx)?{type:n,widthPx:t.widthPx,heightPx:t.heightPx}:null;case"stepchange":return u(t.stepIndex)&&u(t.totalSteps)?{type:n,stepIndex:t.stepIndex,totalSteps:t.totalSteps}:null;case"progress":return u(t.stepIndex)&&u(t.totalSteps)&&u(t.fraction)?{type:n,stepIndex:t.stepIndex,totalSteps:t.totalSteps,fraction:t.fraction}:null;case"error":return typeof t.message=="string"?{type:n,message:t.message}:null;default:return null}}function k(t,n={}){const{iframe:e,origin:s}=t,{onEvent:o}=n,d=typeof window<"u",a=r=>{var h;(h=e.contentWindow)==null||h.postMessage(M(r),s)},E=r=>{if(r.source!==e.contentWindow||r.origin!==s)return;const h=O(r.data);h&&(o==null||o(h))};return d&&window.addEventListener("message",E),{play:()=>a({type:"play"}),pause:()=>a({type:"pause"}),seek:r=>a({type:"seek",timeMs:r}),setMuted:r=>a({type:"setMuted",muted:r}),setVolume:r=>a({type:"setVolume",volume:r}),setHostScale:r=>a({type:"setHostScale",scale:r}),prefetch:()=>a({type:"prefetch"}),destroy:()=>{a({type:"destroy"}),d&&window.removeEventListener("message",E)}}}const L=896,I=480;function B(t,n){return t==="light"?"light":t==="dark"||n?"dark":"light"}function N(t,n){const e=new URL(t);return e.searchParams.set("theme",n),e.toString()}function V(t){return new URL(t).origin}function v(){return typeof document<"u"&&document.documentElement.classList.contains("dark")}function D(t,n){const{src:e,theme:s="auto",onAspectRatio:o,onEvent:d}=n,a=V(e);let E=null;const r=()=>{const i=B(s,v());i!==E&&(E=i,t.src=N(e,i))};let h=null,p,A=null;const R=()=>{const i=t.parentElement;if(!h||!i)return;const{widthPx:w,heightPx:C}=h,g=i.getBoundingClientRect();if(g.width<=0)return;const f=Math.min(g.width/w,1),U=(g.width-w*f)/2,j=(g.height-C*f)/2;t.style.width=`${w}px`,t.style.height=`${C}px`,t.style.transformOrigin="0 0",t.style.transform=`translate(${U}px, ${j}px) scale(${f})`,f!==A&&(A=f,b.setHostScale(f))},F=i=>{h=i,R(),!p&&typeof ResizeObserver<"u"&&t.parentElement&&(p=new ResizeObserver(R),p.observe(t.parentElement))},b=k({iframe:t,origin:a},{onEvent:i=>{i.type==="resize"&&(o==null||o({widthPx:i.widthPx,heightPx:i.heightPx})),i.type==="ready"&&i.viewport&&F(i.viewport),d==null||d(i)}});let y;return s==="auto"&&typeof MutationObserver<"u"&&typeof document<"u"&&(y=new MutationObserver(r),y.observe(document.documentElement,{attributes:!0,attributeFilter:["class"]})),r(),{controller:b,destroy(){y==null||y.disconnect(),p==null||p.disconnect(),b.destroy()}}}const H="scenar-embed",$="Interactive product tour",z=typeof HTMLElement<"u"?HTMLElement:class{};class x extends z{constructor(){super(...arguments);S(this,"iframe",null);S(this,"mount",null)}static get observedAttributes(){return["src","title","theme"]}connectedCallback(){this.iframe||this.render(),this.attach()}disconnectedCallback(){var e;(e=this.mount)==null||e.destroy(),this.mount=null}attributeChangedCallback(e,s,o){if(s!==o){if(e==="title"){this.iframe&&this.iframe.setAttribute("title",this.titleAttr());return}this.isConnected&&this.attach()}}play(){var e;(e=this.mount)==null||e.controller.play()}pause(){var e;(e=this.mount)==null||e.controller.pause()}seek(e){var s;(s=this.mount)==null||s.controller.seek(e)}setMuted(e){var s;(s=this.mount)==null||s.controller.setMuted(e)}setVolume(e){var s;(s=this.mount)==null||s.controller.setVolume(e)}titleAttr(){return this.getAttribute("title")??$}themeAttr(){const e=this.getAttribute("theme");return e==="light"||e==="dark"?e:"auto"}setAspectRatio(e,s){this.style.aspectRatio=`${e} / ${s}`}render(){this.style.display="block",this.style.position="relative",this.style.width="100%",this.setAspectRatio(L,I);const e=document.createElement("iframe");e.setAttribute("title",this.titleAttr()),e.setAttribute("loading","lazy"),e.setAttribute("allow","autoplay; fullscreen"),e.setAttribute("allowfullscreen",""),e.style.cssText="position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit",this.appendChild(e),this.iframe=e}attach(){var s;const e=this.getAttribute("src");!e||!this.iframe||((s=this.mount)==null||s.destroy(),this.mount=D(this.iframe,{src:e,theme:this.themeAttr(),onAspectRatio:({widthPx:o,heightPx:d})=>this.setAspectRatio(o,d),onEvent:o=>this.dispatchEvent(new CustomEvent(`scenar:${o.type}`,{detail:o}))}))}}function P(t=H){typeof customElements>"u"||customElements.get(t)||customElements.define(t,x)}return P(),l.ScenarEmbedElement=x,l.defineScenarEmbed=P,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"}),l}({});

package/mount.d.ts

@@ -33,6 +33,27 @@ export interface EmbedMount {
  * + own layout, then hand it here — so neither re-implements the bridge, exactly
  * as {@link createEmbedHostController} is shared by the console and this loader.
  *
+ * Iframe-as-screen (scenar-cloud DD-008's principle, applied to the frame):
+ * when the bundle's `ready` event carries its canonical viewport, the mount
+ * lays the iframe out at exactly that CSS-pixel size and scales it to the
+ * wrapper with a `transform` — instead of letting the iframe track the wrapper
+ * and scaling *inside* the document. The embedded document's viewport is then
+ * the canonical viewport, so its media queries resolve as they would in a
+ * real browser window of that size; the one scale factor per frame lives out
+ * here, at the true boundary. `transform` and not CSS `zoom` on purpose:
+ * transform is paint-level and never propagates into the child document, so
+ * the inner viewport stays canonical. The mount reports the factor back over
+ * `setHostScale` so the player's chrome layer can counter-scale its controls
+ * to native pixel size. Bundles packed before the viewport field keep the
+ * fit-inside-the-iframe behavior — both directions of version skew degrade
+ * to exactly the pre-mode rendering.
+ *
+ * Layout contract with the adapters: the iframe fills a positioned wrapper
+ * (`position: relative/absolute` box whose aspect ratio tracks the reported
+ * embed size). The mount measures that wrapper — `iframe.parentElement` — to
+ * derive the scale, and owns the iframe's `width`/`height`/`transform` once
+ * (and only once) a viewport-carrying `ready` arrives.
+ *
  * The caller owns the iframe element (and removes it for full teardown); this
  * function owns only the listeners it adds, all released by {@link EmbedMount.destroy}.
  */

package/mount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mount.d.ts","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,yBAAyB,EAE/B,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,KAAK,gBAAgB,EAItB,MAAM,cAAc,CAAC;AAEtB,yEAAyE;AACzE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AAED,4CAA4C;AAC5C,MAAM,WAAW,iBAAiB;IAChC,yEAAyE;IACzE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAClC,8EAA8E;IAC9E,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC3D,gEAAgE;IAChE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACtD;AAED,2EAA2E;AAC3E,MAAM,WAAW,UAAU;IACzB,iFAAiF;IACjF,QAAQ,CAAC,UAAU,EAAE,yBAAyB,CAAC;IAC/C,2EAA2E;IAC3E,OAAO,IAAI,IAAI,CAAC;CACjB;AAUD;;;;;;;;;;;;GAYG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,iBAAiB,GACzB,UAAU,CAkDZ"}
+{"version":3,"file":"mount.d.ts","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,gBAAgB,EACrB,KAAK,yBAAyB,EAG/B,MAAM,cAAc,CAAC;AACtB,OAAO,EACL,KAAK,gBAAgB,EAItB,MAAM,cAAc,CAAC;AAEtB,yEAAyE;AACzE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;CAC3B;AAED,4CAA4C;AAC5C,MAAM,WAAW,iBAAiB;IAChC,yEAAyE;IACzE,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,QAAQ,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAClC,8EAA8E;IAC9E,QAAQ,CAAC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC3D,gEAAgE;IAChE,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;CACtD;AAED,2EAA2E;AAC3E,MAAM,WAAW,UAAU;IACzB,iFAAiF;IACjF,QAAQ,CAAC,UAAU,EAAE,yBAAyB,CAAC;IAC/C,2EAA2E;IAC3E,OAAO,IAAI,IAAI,CAAC;CACjB;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,wBAAgB,gBAAgB,CAC9B,MAAM,EAAE,iBAAiB,EACzB,OAAO,EAAE,iBAAiB,GACzB,UAAU,CA2FZ"}

package/mount.js

@@ -15,6 +15,27 @@ function hostPrefersDark() {
  * + own layout, then hand it here — so neither re-implements the bridge, exactly
  * as {@link createEmbedHostController} is shared by the console and this loader.
  *
+ * Iframe-as-screen (scenar-cloud DD-008's principle, applied to the frame):
+ * when the bundle's `ready` event carries its canonical viewport, the mount
+ * lays the iframe out at exactly that CSS-pixel size and scales it to the
+ * wrapper with a `transform` — instead of letting the iframe track the wrapper
+ * and scaling *inside* the document. The embedded document's viewport is then
+ * the canonical viewport, so its media queries resolve as they would in a
+ * real browser window of that size; the one scale factor per frame lives out
+ * here, at the true boundary. `transform` and not CSS `zoom` on purpose:
+ * transform is paint-level and never propagates into the child document, so
+ * the inner viewport stays canonical. The mount reports the factor back over
+ * `setHostScale` so the player's chrome layer can counter-scale its controls
+ * to native pixel size. Bundles packed before the viewport field keep the
+ * fit-inside-the-iframe behavior — both directions of version skew degrade
+ * to exactly the pre-mode rendering.
+ *
+ * Layout contract with the adapters: the iframe fills a positioned wrapper
+ * (`position: relative/absolute` box whose aspect ratio tracks the reported
+ * embed size). The mount measures that wrapper — `iframe.parentElement` — to
+ * derive the scale, and owns the iframe's `width`/`height`/`transform` once
+ * (and only once) a viewport-carrying `ready` arrives.
+ *
  * The caller owns the iframe element (and removes it for full teardown); this
  * function owns only the listeners it adds, all released by {@link EmbedMount.destroy}.
  */
@@ -31,11 +52,50 @@ export function createEmbedMount(iframe, options) {
         appliedTheme = resolved;
         iframe.src = applyThemeToSrc(src, resolved);
     };
+    // Iframe-as-screen state: set by the first viewport-carrying `ready`, then
+    // kept in sync with the wrapper by a ResizeObserver. A theme flip reloads
+    // the iframe and replays `ready`, which simply re-applies.
+    let canonicalViewport = null;
+    let wrapperObserver;
+    let lastPostedScale = null;
+    const applyViewportScale = () => {
+        const wrapper = iframe.parentElement;
+        if (!canonicalViewport || !wrapper)
+            return;
+        const { widthPx, heightPx } = canonicalViewport;
+        const rect = wrapper.getBoundingClientRect();
+        if (rect.width <= 0)
+            return;
+        // Cap at 1 like the in-document viewport does: upscaling past native
+        // renders soft. Wider-than-canonical wrappers center the frame instead.
+        const scale = Math.min(rect.width / widthPx, 1);
+        const offsetX = (rect.width - widthPx * scale) / 2;
+        const offsetY = (rect.height - heightPx * scale) / 2;
+        iframe.style.width = `${widthPx}px`;
+        iframe.style.height = `${heightPx}px`;
+        iframe.style.transformOrigin = "0 0";
+        iframe.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+        if (scale !== lastPostedScale) {
+            lastPostedScale = scale;
+            controller.setHostScale(scale);
+        }
+    };
+    const adoptViewport = (viewport) => {
+        canonicalViewport = viewport;
+        applyViewportScale();
+        if (!wrapperObserver && typeof ResizeObserver !== "undefined" && iframe.parentElement) {
+            wrapperObserver = new ResizeObserver(applyViewportScale);
+            wrapperObserver.observe(iframe.parentElement);
+        }
+    };
     const controller = createEmbedHostController({ iframe, origin }, {
         onEvent: (event) => {
             if (event.type === "resize") {
                 onAspectRatio?.({ widthPx: event.widthPx, heightPx: event.heightPx });
             }
+            if (event.type === "ready" && event.viewport) {
+                adoptViewport(event.viewport);
+            }
             onEvent?.(event);
         },
     });
@@ -56,6 +116,7 @@ export function createEmbedMount(iframe, options) {
         controller,
         destroy() {
             observer?.disconnect();
+            wrapperObserver?.disconnect();
             controller.destroy();
         },
     };

package/mount.js.map

@@ -1 +1 @@
-{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"AAAA,OAAO,EAGL,yBAAyB,GAC1B,MAAM,cAAc,CAAC;AACtB,OAAO,EAEL,eAAe,EACf,aAAa,EACb,YAAY,GACb,MAAM,cAAc,CAAC;AA4BtB,4EAA4E;AAC5E,SAAS,eAAe;IACtB,OAAO,CACL,OAAO,QAAQ,KAAK,WAAW;QAC/B,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC,QAAQ,CAAC,MAAM,CAAC,CACpD,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,UAAU,gBAAgB,CAC9B,MAAyB,EACzB,OAA0B;IAE1B,MAAM,EAAE,GAAG,EAAE,KAAK,GAAG,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC;IAChE,MAAM,MAAM,GAAG,aAAa,CAAC,GAAG,CAAC,CAAC;IAElC,6EAA6E;IAC7E,4EAA4E;IAC5E,IAAI,YAAY,GAA4B,IAAI,CAAC;IACjD,MAAM,UAAU,GAAG,GAAS,EAAE;QAC5B,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,EAAE,eAAe,EAAE,CAAC,CAAC;QACxD,IAAI,QAAQ,KAAK,YAAY;YAAE,OAAO;QACtC,YAAY,GAAG,QAAQ,CAAC;QACxB,MAAM,CAAC,GAAG,GAAG,eAAe,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,yBAAyB,CAC1C,EAAE,MAAM,EAAE,MAAM,EAAE,EAClB;QACE,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE;YACjB,IAAI,KAAK,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;gBAC5B,aAAa,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;YACxE,CAAC;YACD,OAAO,EAAE,CAAC,KAAK,CAAC,CAAC;QACnB,CAAC;KACF,CACF,CAAC;IAEF,IAAI,QAAsC,CAAC;IAC3C,IACE,KAAK,KAAK,MAAM;QAChB,OAAO,gBAAgB,KAAK,WAAW;QACvC,OAAO,QAAQ,KAAK,WAAW,EAC/B,CAAC;QACD,QAAQ,GAAG,IAAI,gBAAgB,CAAC,UAAU,CAAC,CAAC;QAC5C,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,eAAe,EAAE;YACzC,UAAU,EAAE,IAAI;YAChB,eAAe,EAAE,CAAC,OAAO,CAAC;SAC3B,CAAC,CAAC;IACL,CAAC;IAED,8EAA8E;IAC9E,0CAA0C;IAC1C,UAAU,EAAE,CAAC;IAEb,OAAO;QACL,UAAU;QACV,OAAO;YACL,QAAQ,EAAE,UAAU,EAAE,CAAC;YACvB,UAAU,CAAC,OAAO,EAAE,CAAC;QACvB,CAAC;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"mount.js","sourceRoot":"","sources":["../src/mount.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scenar/embed",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Drop-in host-side embedding for Scenar tours — a framework-agnostic <scenar-embed> web component and a matching React wrapper.",
   "license": "Apache-2.0",
   "type": "module",
@@ -44,7 +44,7 @@
     "./loader": "./embed.global.js"
   },
   "dependencies": {
-    "@scenar/core": "0.9.0"
+    "@scenar/core": "0.10.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/src/mount.test.ts

@@ -178,6 +178,106 @@ describe("createEmbedMount — ignores messages that do not match the contract",
   });
 });
 
+/** Build a framed ready message (protocol v1), optionally carrying a viewport. */
+function readyMessage(viewport?: { widthPx: number; heightPx: number }) {
+  return {
+    source: "scenar-embed",
+    v: 1,
+    type: "ready",
+    totalSteps: 3,
+    hasNarration: false,
+    ...(viewport ? { viewport } : {}),
+  };
+}
+
+/**
+ * Give an iframe a positioned wrapper of a fixed layout size (the adapter
+ * contract the mount scales against). jsdom computes no layout, so the
+ * wrapper's rect is stubbed.
+ */
+function wrapInSizedWrapper(
+  iframe: HTMLIFrameElement,
+  width: number,
+  height: number,
+): HTMLDivElement {
+  const wrapper = document.createElement("div");
+  wrapper.style.position = "relative";
+  vi.spyOn(wrapper, "getBoundingClientRect").mockReturnValue({
+    width,
+    height,
+    top: 0,
+    left: 0,
+    right: width,
+    bottom: height,
+    x: 0,
+    y: 0,
+    toJSON: () => ({}),
+  } as DOMRect);
+  wrapper.appendChild(iframe);
+  document.body.appendChild(wrapper);
+  return wrapper;
+}
+
+describe("createEmbedMount — iframe-as-screen (ready carries a viewport)", () => {
+  it("lays the iframe out at the canonical size, scaled to fit the wrapper", () => {
+    const { iframe, frame } = makeIframe();
+    const send = vi.fn();
+    (frame as { postMessage: unknown }).postMessage = send;
+    // 896-wide wrapper for a 1440x900 canonical viewport: scale 896/1440.
+    wrapInSizedWrapper(iframe, 896, 560);
+    track(createEmbedMount(iframe, { src: SRC }));
+
+    post(readyMessage({ widthPx: 1440, heightPx: 900 }), { source: frame });
+
+    const scale = 896 / 1440;
+    expect(iframe.style.width).toBe("1440px");
+    expect(iframe.style.height).toBe("900px");
+    expect(iframe.style.transformOrigin).toBe("0 0");
+    expect(iframe.style.transform).toBe(`translate(0px, 0px) scale(${scale})`);
+  });
+
+  it("reports the applied scale back to the embed over setHostScale", () => {
+    const { iframe, frame } = makeIframe();
+    const send = vi.fn();
+    (frame as { postMessage: unknown }).postMessage = send;
+    wrapInSizedWrapper(iframe, 720, 450);
+    track(createEmbedMount(iframe, { src: SRC }));
+
+    post(readyMessage({ widthPx: 1440, heightPx: 900 }), { source: frame });
+
+    expect(send).toHaveBeenCalledWith(
+      expect.objectContaining({ type: "setHostScale", scale: 0.5 }),
+      ORIGIN,
+    );
+  });
+
+  it("caps the scale at 1 and centers the frame in a wider-than-canonical wrapper", () => {
+    const { iframe, frame } = makeIframe();
+    (frame as { postMessage: unknown }).postMessage = vi.fn();
+    wrapInSizedWrapper(iframe, 2000, 1100);
+    track(createEmbedMount(iframe, { src: SRC }));
+
+    post(readyMessage({ widthPx: 1440, heightPx: 900 }), { source: frame });
+
+    // scale 1; centered: x = (2000 - 1440) / 2 = 280, y = (1100 - 900) / 2 = 100.
+    expect(iframe.style.transform).toBe("translate(280px, 100px) scale(1)");
+  });
+
+  it("leaves the iframe's fill layout untouched for pre-viewport bundles", () => {
+    const { iframe, frame } = makeIframe();
+    (frame as { postMessage: unknown }).postMessage = vi.fn();
+    wrapInSizedWrapper(iframe, 896, 560);
+    track(createEmbedMount(iframe, { src: SRC }));
+
+    post(readyMessage(), { source: frame });
+
+    // The version-skew contract: an old bundle (no viewport on ready) keeps
+    // exactly the fit-inside-the-iframe behavior — no size, no transform.
+    expect(iframe.style.width).toBe("");
+    expect(iframe.style.transform).toBe("");
+  });
+});
+
 describe("createEmbedMount — teardown", () => {
   it("stops reacting to resizes after destroy", () => {
     const ratios: EmbedAspectRatio[] = [];

package/src/mount.ts

@@ -1,6 +1,7 @@
 import {
   type ScenarEmbedEvent,
   type ScenarEmbedHostController,
+  type ScenarEmbedViewport,
   createEmbedHostController,
 } from "@scenar/core";
 import {
@@ -54,6 +55,27 @@ function hostPrefersDark(): boolean {
  * + own layout, then hand it here — so neither re-implements the bridge, exactly
  * as {@link createEmbedHostController} is shared by the console and this loader.
  *
+ * Iframe-as-screen (scenar-cloud DD-008's principle, applied to the frame):
+ * when the bundle's `ready` event carries its canonical viewport, the mount
+ * lays the iframe out at exactly that CSS-pixel size and scales it to the
+ * wrapper with a `transform` — instead of letting the iframe track the wrapper
+ * and scaling *inside* the document. The embedded document's viewport is then
+ * the canonical viewport, so its media queries resolve as they would in a
+ * real browser window of that size; the one scale factor per frame lives out
+ * here, at the true boundary. `transform` and not CSS `zoom` on purpose:
+ * transform is paint-level and never propagates into the child document, so
+ * the inner viewport stays canonical. The mount reports the factor back over
+ * `setHostScale` so the player's chrome layer can counter-scale its controls
+ * to native pixel size. Bundles packed before the viewport field keep the
+ * fit-inside-the-iframe behavior — both directions of version skew degrade
+ * to exactly the pre-mode rendering.
+ *
+ * Layout contract with the adapters: the iframe fills a positioned wrapper
+ * (`position: relative/absolute` box whose aspect ratio tracks the reported
+ * embed size). The mount measures that wrapper — `iframe.parentElement` — to
+ * derive the scale, and owns the iframe's `width`/`height`/`transform` once
+ * (and only once) a viewport-carrying `ready` arrives.
+ *
  * The caller owns the iframe element (and removes it for full teardown); this
  * function owns only the listeners it adds, all released by {@link EmbedMount.destroy}.
  */
@@ -74,6 +96,43 @@ export function createEmbedMount(
     iframe.src = applyThemeToSrc(src, resolved);
   };
 
+  // Iframe-as-screen state: set by the first viewport-carrying `ready`, then
+  // kept in sync with the wrapper by a ResizeObserver. A theme flip reloads
+  // the iframe and replays `ready`, which simply re-applies.
+  let canonicalViewport: ScenarEmbedViewport | null = null;
+  let wrapperObserver: ResizeObserver | undefined;
+  let lastPostedScale: number | null = null;
+
+  const applyViewportScale = (): void => {
+    const wrapper = iframe.parentElement;
+    if (!canonicalViewport || !wrapper) return;
+    const { widthPx, heightPx } = canonicalViewport;
+    const rect = wrapper.getBoundingClientRect();
+    if (rect.width <= 0) return;
+    // Cap at 1 like the in-document viewport does: upscaling past native
+    // renders soft. Wider-than-canonical wrappers center the frame instead.
+    const scale = Math.min(rect.width / widthPx, 1);
+    const offsetX = (rect.width - widthPx * scale) / 2;
+    const offsetY = (rect.height - heightPx * scale) / 2;
+    iframe.style.width = `${widthPx}px`;
+    iframe.style.height = `${heightPx}px`;
+    iframe.style.transformOrigin = "0 0";
+    iframe.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
+    if (scale !== lastPostedScale) {
+      lastPostedScale = scale;
+      controller.setHostScale(scale);
+    }
+  };
+
+  const adoptViewport = (viewport: ScenarEmbedViewport): void => {
+    canonicalViewport = viewport;
+    applyViewportScale();
+    if (!wrapperObserver && typeof ResizeObserver !== "undefined" && iframe.parentElement) {
+      wrapperObserver = new ResizeObserver(applyViewportScale);
+      wrapperObserver.observe(iframe.parentElement);
+    }
+  };
+
   const controller = createEmbedHostController(
     { iframe, origin },
     {
@@ -81,6 +140,9 @@ export function createEmbedMount(
         if (event.type === "resize") {
           onAspectRatio?.({ widthPx: event.widthPx, heightPx: event.heightPx });
         }
+        if (event.type === "ready" && event.viewport) {
+          adoptViewport(event.viewport);
+        }
         onEvent?.(event);
       },
     },
@@ -107,6 +169,7 @@ export function createEmbedMount(
     controller,
     destroy() {
       observer?.disconnect();
+      wrapperObserver?.disconnect();
       controller.destroy();
     },
   };