npm - @scenar/embed - Versions diffs - 0.9.1 → 0.11.0 - Mend

@scenar/embed 0.9.1 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/README.md CHANGED Viewed

@@ -64,6 +64,26 @@ const mount = createEmbedMount(iframeElement, {
 `theme` is `auto` (default), `light`, or `dark`. `auto` tracks the host page's
 `dark` class on `<html>` and re-themes the embed when it toggles.
+## Corners
+The embed paints edge-to-edge; the host boundary owns the corner radius. Round
+the React component's wrapper (via `className` or `style`) or the
+`<scenar-embed>` element itself (via CSS `border-radius`) — the boundary
+carries `overflow: hidden`, so everything inside clips to your radius:
+```tsx
+<ScenarEmbed src="…" style={{ borderRadius: 12 }} />
+```
+```css
+scenar-embed { border-radius: 12px; }
+```
+Do not style the internal iframe. Under iframe-as-screen scaling it is laid
+out at the tour's canonical viewport and transform-scaled to fit, so a radius
+on the iframe would shrink with the scale factor instead of matching your
+layout.
 ## License
 Apache-2.0

package/element.d.ts CHANGED Viewed

@@ -18,6 +18,13 @@ declare const HTMLElementBase: typeof HTMLElement;
  * - `title` — accessible iframe title (defaults to a generic label).
  * - `theme` — `auto` (default) | `light` | `dark`.
  *
+ * Corners: the element is the one clipping surface — it carries
+ * `overflow: hidden`, and the host rounds by styling `border-radius` on the
+ * element itself. The internal iframe must NOT carry a radius: under
+ * iframe-as-screen the mount lays it out at the canonical viewport and scales
+ * it down with a transform, so an iframe radius lives in pre-transform space
+ * and renders at `radius x scale` — a mismatched, mostly ineffective clip.
+ *
  * Events: re-dispatches every embed event as a DOM `CustomEvent` named
  * `scenar:<type>` (e.g. `scenar:ready`, `scenar:completed`) with the event in
  * `detail`, so a vanilla host can listen without touching `postMessage`.

package/element.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAOA,mCAAmC;AACnC,eAAO,MAAM,gBAAgB,iBAAiB,CAAC;AAK/C;;;;;GAKG;AACH,QAAA,MAAM,eAAe,EAAE,OAAO,WAGmB,CAAC;AAElD~~;;;;;;;;;;;;;;;;;GAiBG~~;AACH,qBAAa,kBAAmB,SAAQ,eAAe;IACrD,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,KAAK,CAA2B;IAExC,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAU9F,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAI1B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAI9B,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAI/B,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,cAAc;IAItB,uDAAuD;IACvD,OAAO,CAAC,MAAM;IAkBd,2DAA2D;IAC3D,OAAO,CAAC,MAAM;CAaf;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,GAAE,MAAyB,GAAG,IAAI,CAI1E"}
1	+ {"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAOA,mCAAmC;AACnC,eAAO,MAAM,gBAAgB,iBAAiB,CAAC;AAK/C;;;;;GAKG;AACH,QAAA,MAAM,eAAe,EAAE,OAAO,WAGmB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,kBAAmB,SAAQ,eAAe;IACrD,MAAM,KAAK,kBAAkB,IAAI,MAAM,EAAE,CAExC;IAED,OAAO,CAAC,MAAM,CAAkC;IAChD,OAAO,CAAC,KAAK,CAA2B;IAExC,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAK5B,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAU9F,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAI1B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI;IAI9B,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI;IAI/B,OAAO,CAAC,SAAS;IAIjB,OAAO,CAAC,SAAS;IAKjB,OAAO,CAAC,cAAc;IAItB,uDAAuD;IACvD,OAAO,CAAC,MAAM;IAkBd,2DAA2D;IAC3D,OAAO,CAAC,MAAM;CAaf;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,OAAO,GAAE,MAAyB,GAAG,IAAI,CAI1E"}

package/element.js CHANGED Viewed

@@ -25,6 +25,13 @@ const HTMLElementBase = typeof HTMLElement !== "undefined"
  * - `title` — accessible iframe title (defaults to a generic label).
  * - `theme` — `auto` (default) | `light` | `dark`.
  *
+ * Corners: the element is the one clipping surface — it carries
+ * `overflow: hidden`, and the host rounds by styling `border-radius` on the
+ * element itself. The internal iframe must NOT carry a radius: under
+ * iframe-as-screen the mount lays it out at the canonical viewport and scales
+ * it down with a transform, so an iframe radius lives in pre-transform space
+ * and renders at `radius x scale` — a mismatched, mostly ineffective clip.
+ *
  * Events: re-dispatches every embed event as a DOM `CustomEvent` named
  * `scenar:<type>` (e.g. `scenar:ready`, `scenar:completed`) with the event in
  * `detail`, so a vanilla host can listen without touching `postMessage`.
@@ -89,14 +96,14 @@ export class ScenarEmbedElement extends HTMLElementBase {
         this.style.display = "block";
         this.style.position = "relative";
         this.style.width = "100%";
+        this.style.overflow = "hidden";
         this.setAspectRatio(EMBED_BASE_ASPECT_WIDTH, EMBED_BASE_ASPECT_HEIGHT);
         const iframe = document.createElement("iframe");
         iframe.setAttribute("title", this.titleAttr());
         iframe.setAttribute("loading", "lazy");
         iframe.setAttribute("allow", "autoplay; fullscreen");
         iframe.setAttribute("allowfullscreen", "");
-        iframe.style.cssText =
-            "position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit";
+        iframe.style.cssText = "position:absolute;inset:0;width:100%;height:100%;border:0";
         this.appendChild(iframe);
         this.iframe = iframe;
     }

package/element.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"element.js","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC/D,OAAO,EAEL,wBAAwB,EACxB,uBAAuB,GACxB,MAAM,cAAc,CAAC;AAEtB,mCAAmC;AACnC,MAAM,CAAC,MAAM,gBAAgB,GAAG,cAAc,CAAC;AAE/C,uDAAuD;AACvD,MAAM,aAAa,GAAG,0BAA0B,CAAC;AAEjD;;;;;GAKG;AACH,MAAM,eAAe,GACnB,OAAO,WAAW,KAAK,WAAW;IAChC,CAAC,CAAC,WAAW;IACb,CAAC,CAAE;KAA0C,CAAC;AAElD~~;;;;;;;;;;;;;;;;;GAiBG~~;AACH,MAAM,OAAO,kBAAmB,SAAQ,eAAe;IACrD,MAAM,KAAK,kBAAkB;QAC3B,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC;IACnC,CAAC;IAEO,MAAM,GAA6B,IAAI,CAAC;IACxC,KAAK,GAAsB,IAAI,CAAC;IAExC,iBAAiB;QACf,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;QAChC,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC;QACtB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;IACpB,CAAC;IAED,wBAAwB,CAAC,IAAY,EAAE,QAAuB,EAAE,QAAuB;QACrF,IAAI,QAAQ,KAAK,QAAQ;YAAE,OAAO;QAClC,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACrB,IAAI,IAAI,CAAC,MAAM;gBAAE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;YACrE,OAAO;QACT,CAAC;QACD,kEAAkE;QAClE,IAAI,IAAI,CAAC,WAAW;YAAE,IAAI,CAAC,MAAM,EAAE,CAAC;IACtC,CAAC;IAED,IAAI;QACF,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,IAAI,EAAE,CAAC;IAChC,CAAC;IAED,KAAK;QACH,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,CAAC;IACjC,CAAC;IAED,IAAI,CAAC,MAAc;QACjB,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACtC,CAAC;IAED,QAAQ,CAAC,KAAc;QACrB,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;IAED,SAAS,CAAC,MAAc;QACtB,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAC3C,CAAC;IAEO,SAAS;QACf,OAAO,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,aAAa,CAAC;IACrD,CAAC;IAEO,SAAS;QACf,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QACzC,OAAO,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;IAChE,CAAC;IAEO,cAAc,CAAC,KAAa,EAAE,MAAc;QAClD,IAAI,CAAC,KAAK,CAAC,WAAW,GAAG,GAAG,KAAK,MAAM,MAAM,EAAE,CAAC;IAClD,CAAC;IAED,uDAAuD;IAC/C,MAAM;QACZ,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;QAC7B,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU,CAAC;QACjC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;QAC1B,IAAI,CAAC,cAAc,CAAC,uBAAuB,EAAE,wBAAwB,CAAC,CAAC;QAEvE,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;QAChD,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,CAAC;QAC/C,MAAM,CAAC,YAAY,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;QACvC,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,sBAAsB,CAAC,CAAC;QACrD,MAAM,CAAC,YAAY,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;QAC3C,MAAM,CAAC,KAAK,CAAC,OAAO~~;YAClB~~,~~iFAAiF~~,CAAC;~~QAEpF~~,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;QACzB,IAAI,CAAC,MAAM,GAAG,MAAM,CAAC;IACvB,CAAC;IAED,2DAA2D;IACnD,MAAM;QACZ,MAAM,GAAG,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACrC,IAAI,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,MAAM;YAAE,OAAO;QAEjC,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,CAAC;QACtB,IAAI,CAAC,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,MAAM,EAAE;YACzC,GAAG;YACH,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE;YACvB,aAAa,EAAE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,QAAQ,CAAC;YAChF,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CACjB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,UAAU,KAAK,CAAC,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,CAAC,CAAC;SACjF,CAAC,CAAC;IACL,CAAC;CACF;AAED;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,UAAkB,gBAAgB;IAClE,IAAI,OAAO,cAAc,KAAK,WAAW;QAAE,OAAO;IAClD,IAAI,cAAc,CAAC,GAAG,CAAC,OAAO,CAAC;QAAE,OAAO;IACxC,cAAc,CAAC,MAAM,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;AACrD,CAAC"}
1	+ {"version":3,"file":"element.js","sourceRoot":"","sources":["../src/element.ts"],"names":[],"mappings":"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"}

package/embed.global.js CHANGED Viewed

	@@ -1 +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}({});
1	+ 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",h=r=>{var a;(a=e.contentWindow)==null\|\|a.postMessage(M(r),s)},E=r=>{if(r.source!==e.contentWindow\|\|r.origin!==s)return;const a=O(r.data);a&&(o==null\|\|o(a))};return d&&window.addEventListener("message",E),{play:()=>h({type:"play"}),pause:()=>h({type:"pause"}),seek:r=>h({type:"seek",timeMs:r}),setMuted:r=>h({type:"setMuted",muted:r}),setVolume:r=>h({type:"setVolume",volume:r}),setHostScale:r=>h({type:"setHostScale",scale:r}),prefetch:()=>h({type:"prefetch"}),destroy:()=>{h({type:"destroy"}),d&&window.removeEventListener("message",E)}}}const L=896,I=480;function v(t,n){return t==="light"?"light":t==="dark"\|\|n?"dark":"light"}function B(t,n){const e=new URL(t);return e.searchParams.set("theme",n),e.toString()}function N(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,h=N(e);let E=null;const r=()=>{const i=v(s,V());i!==E&&(E=i,t.src=B(e,i))};let a=null,p,A=null;const R=()=>{const i=t.parentElement;if(!a\|\|!i)return;const{widthPx:w,heightPx:C}=a,g=i.getBoundingClientRect();if(g.width<=0)return;const f=Math.min(g.width/w,1),U=(g.width-wf)/2,j=(g.height-Cf)/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=>{a=i,R(),!p&&typeof ResizeObserver<"u"&&t.parentElement&&(p=new ResizeObserver(R),p.observe(t.parentElement))},b=k({iframe:t,origin:h},{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.style.overflow="hidden",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",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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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~~"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@scenar/embed",
-  "version": "0.9.1",
+  "version": "0.11.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.1"
+    "@scenar/core": "0.11.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/react.d.ts CHANGED Viewed

@@ -30,6 +30,15 @@ export interface ScenarEmbedProps extends EmbedSource {
  * SSR-safe: the iframe renders without a `src` on the server and on the first
  * client render, so hydration never mismatches; the effect then assigns the
  * themed `src` and adopts the embed's reported aspect ratio.
+ *
+ * Corners: the wrapper is the one clipping surface — it carries
+ * `overflow: hidden`, and the host supplies any corner radius via `className`
+ * or `style`. The iframe itself must NOT carry a `border-radius`: under
+ * iframe-as-screen the mount lays the iframe out at the canonical viewport and
+ * scales it down with a transform, so a radius on the iframe lives in
+ * pre-transform space and renders at `radius x scale` — a mismatched, mostly
+ * ineffective clip. The embed paints edge-to-edge and the host boundary owns
+ * the corners.
  */
 export declare const ScenarEmbed: import("react").ForwardRefExoticComponent<ScenarEmbedProps & import("react").RefAttributes<ScenarEmbedHandle>>;
 //# sourceMappingURL=react.d.ts.map

package/react.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAMnB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,gBAAgB,EAItB,MAAM,cAAc,CAAC;AAKtB,sEAAsE;AACtE,MAAM,WAAW,iBAAiB;IAChC,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACjC;AAED,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,6DAA6D;IAC7D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,sEAAsE;IACtE,QAAQ,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAClC,4EAA4E;IAC5E,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACrD,+CAA+C;IAC/C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,uDAAuD;IACvD,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;CAChC;AAED~~;;;;;;;;;GASG~~;AACH,eAAO,MAAM,WAAW,~~gHAiEvB~~,CAAC"}
1	+ {"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,aAAa,EAMnB,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAErD,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,gBAAgB,EAItB,MAAM,cAAc,CAAC;AAKtB,sEAAsE;AACtE,MAAM,WAAW,iBAAiB;IAChC,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,IAAI,CAAC;IACd,IAAI,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;IAC/B,SAAS,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACjC;AAED,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD,6DAA6D;IAC7D,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,sEAAsE;IACtE,QAAQ,CAAC,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAClC,4EAA4E;IAC5E,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACrD,+CAA+C;IAC/C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,uDAAuD;IACvD,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;CAChC;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,WAAW,gHAsEvB,CAAC"}

package/react.js CHANGED Viewed

@@ -14,6 +14,15 @@ const DEFAULT_TITLE = "Interactive product tour";
  * SSR-safe: the iframe renders without a `src` on the server and on the first
  * client render, so hydration never mismatches; the effect then assigns the
  * themed `src` and adopts the embed's reported aspect ratio.
+ *
+ * Corners: the wrapper is the one clipping surface — it carries
+ * `overflow: hidden`, and the host supplies any corner radius via `className`
+ * or `style`. The iframe itself must NOT carry a `border-radius`: under
+ * iframe-as-screen the mount lays the iframe out at the canonical viewport and
+ * scales it down with a transform, so a radius on the iframe lives in
+ * pre-transform space and renders at `radius x scale` — a mismatched, mostly
+ * ineffective clip. The embed paints edge-to-edge and the host boundary owns
+ * the corners.
  */
 export const ScenarEmbed = forwardRef(function ScenarEmbed({ src, id, base, title, theme = "auto", onEvent, className, style }, ref) {
     const iframeRef = useRef(null);
@@ -46,13 +55,18 @@ export const ScenarEmbed = forwardRef(function ScenarEmbed({ src, id, base, titl
         setMuted: (muted) => mountRef.current?.controller.setMuted(muted),
         setVolume: (volume) => mountRef.current?.controller.setVolume(volume),
     }), []);
-    return (_jsx("div", { className: className, style: { position: "relative", width: "100%", aspectRatio: ratio, ...style }, children: _jsx("iframe", { ref: iframeRef, title: title ?? DEFAULT_TITLE, loading: "lazy", allow: "autoplay; fullscreen", allowFullScreen: true, style: {
+    return (_jsx("div", { className: className, style: {
+            position: "relative",
+            width: "100%",
+            aspectRatio: ratio,
+            overflow: "hidden",
+            ...style,
+        }, children: _jsx("iframe", { ref: iframeRef, title: title ?? DEFAULT_TITLE, loading: "lazy", allow: "autoplay; fullscreen", allowFullScreen: true, style: {
                 position: "absolute",
                 inset: 0,
                 width: "100%",
                 height: "100%",
                 border: 0,
-                borderRadius: "inherit",
             } }) }));
 });
 //# sourceMappingURL=react.js.map

package/react.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAEL,UAAU,EACV,SAAS,EACT,mBAAmB,EACnB,MAAM,EACN,QAAQ,GACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC/D,OAAO,EAGL,wBAAwB,EACxB,uBAAuB,EACvB,eAAe,GAChB,MAAM,cAAc,CAAC;AAEtB,yDAAyD;AACzD,MAAM,aAAa,GAAG,0BAA0B,CAAC;AAwBjD~~;;;;;;;;;GASG~~;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,UAAU,CACnC,SAAS,WAAW,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,GAAG;IAC3F,MAAM,SAAS,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAClD,MAAM,QAAQ,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IACjD,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAChC,GAAG,uBAAuB,MAAM,wBAAwB,EAAE,CAC3D,CAAC;IAEF,gFAAgF;IAChF,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC;IACnC,UAAU,CAAC,OAAO,GAAG,OAAO,CAAC;IAE7B,MAAM,WAAW,GAAG,eAAe,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,MAAM;YAAE,OAAO;QACpB,MAAM,KAAK,GAAG,gBAAgB,CAAC,MAAM,EAAE;YACrC,GAAG,EAAE,WAAW;YAChB,KAAK;YACL,aAAa,EAAE,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,GAAG,OAAO,MAAM,QAAQ,EAAE,CAAC;YAC9E,OAAO,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC,KAAK,CAAC;SAChD,CAAC,CAAC;QACH,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;QACzB,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,OAAO,EAAE,CAAC;YAChB,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC;QAC1B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC;IAEzB,mBAAmB,CACjB,GAAG,EACH,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,IAAI,EAAE;QAC/C,KAAK,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,KAAK,EAAE;QACjD,IAAI,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3D,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC;QACjE,SAAS,EAAE,CAAC,MAAM,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,UAAU,CAAC,SAAS,CAAC,MAAM,CAAC;KACtE,CAAC,EACF,EAAE,CACH,CAAC;IAEF,OAAO,CACL,cACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,~~EAAE,~~QAAQ,EAAE,UAAU,~~EAAE,~~KAAK,EAAE,MAAM,~~EAAE,~~WAAW,EAAE,KAAK,EAAE,GAAG,KAAK,~~EAAE~~,~~YAE5E,~~iBACE,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,KAAK,IAAI,aAAa,EAC7B,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,sBAAsB,EAC5B,eAAe,QACf,KAAK,EAAE;gBACL,QAAQ,EAAE,UAAU;gBACpB,KAAK,EAAE,CAAC;gBACR,KAAK,EAAE,MAAM;gBACb,MAAM,EAAE,MAAM;gBACd,MAAM,EAAE,CAAC;~~gBACT~~,~~YAAY,EAAE,SAAS;aACxB,~~GACD,GACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
1	+ {"version":3,"file":"react.js","sourceRoot":"","sources":["../src/react.tsx"],"names":[],"mappings":"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"}

package/src/element.test.ts CHANGED Viewed

@@ -65,6 +65,16 @@ describe("<scenar-embed>", () => {
     expect(el.style.aspectRatio).toBe("896 / 480");
   });
+  it("clips its content so a host-applied border-radius rounds the embed", () => {
+    const { el, iframe } = mountElement({ src: SRC });
+    // The element is the one clipping surface: the host rounds the element,
+    // and everything inside — including the transform-scaled iframe — clips
+    // to it. The iframe itself must carry no radius (it would live in
+    // pre-transform space and render at radius x scale).
+    expect(el.style.overflow).toBe("hidden");
+    expect(iframe.style.borderRadius).toBe("");
+  });
   it("falls back to a generic accessible title", () => {
     const { iframe } = mountElement({ src: SRC });
     expect(iframe.getAttribute("title")).toBe("Interactive product tour");

package/src/element.ts CHANGED Viewed

@@ -33,6 +33,13 @@ const HTMLElementBase: typeof HTMLElement =
  * - `title` — accessible iframe title (defaults to a generic label).
  * - `theme` — `auto` (default) | `light` | `dark`.
  *
+ * Corners: the element is the one clipping surface — it carries
+ * `overflow: hidden`, and the host rounds by styling `border-radius` on the
+ * element itself. The internal iframe must NOT carry a radius: under
+ * iframe-as-screen the mount lays it out at the canonical viewport and scales
+ * it down with a transform, so an iframe radius lives in pre-transform space
+ * and renders at `radius x scale` — a mismatched, mostly ineffective clip.
+ *
  * Events: re-dispatches every embed event as a DOM `CustomEvent` named
  * `scenar:<type>` (e.g. `scenar:ready`, `scenar:completed`) with the event in
  * `detail`, so a vanilla host can listen without touching `postMessage`.
@@ -106,6 +113,7 @@ export class ScenarEmbedElement extends HTMLElementBase {
     this.style.display = "block";
     this.style.position = "relative";
     this.style.width = "100%";
+    this.style.overflow = "hidden";
     this.setAspectRatio(EMBED_BASE_ASPECT_WIDTH, EMBED_BASE_ASPECT_HEIGHT);
     const iframe = document.createElement("iframe");
@@ -113,8 +121,7 @@ export class ScenarEmbedElement extends HTMLElementBase {
     iframe.setAttribute("loading", "lazy");
     iframe.setAttribute("allow", "autoplay; fullscreen");
     iframe.setAttribute("allowfullscreen", "");
-    iframe.style.cssText =
-      "position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit";
+    iframe.style.cssText = "position:absolute;inset:0;width:100%;height:100%;border:0";
     this.appendChild(iframe);
     this.iframe = iframe;

package/src/mount.test.ts CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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();
     },
   };

package/src/react.test.tsx CHANGED Viewed

@@ -45,6 +45,20 @@ describe("ScenarEmbed (React)", () => {
     expect(wrapper.style.aspectRatio).toBe("896 / 480");
   });
+  it("clips the wrapper so a host-applied border-radius rounds the embed", () => {
+    render(<ScenarEmbed src={SRC} title="t" />);
+    const iframe = screen.getByTitle("t") as HTMLIFrameElement;
+    stubFrame(iframe);
+    // The wrapper is the one clipping surface: the host rounds it via
+    // className/style, and everything inside — including the transform-scaled
+    // iframe — clips to it. The iframe itself must carry no radius (it would
+    // live in pre-transform space and render at radius x scale).
+    const wrapper = iframe.parentElement as HTMLElement;
+    expect(wrapper.style.overflow).toBe("hidden");
+    expect(iframe.style.borderRadius).toBe("");
+  });
   it("resolves id + base into the embed src", () => {
     render(<ScenarEmbed id="welcome" base="https://embed.example/demos" title="t" />);
     const iframe = screen.getByTitle("t") as HTMLIFrameElement;

package/src/react.tsx CHANGED Viewed

@@ -52,6 +52,15 @@ export interface ScenarEmbedProps extends EmbedSource {
  * SSR-safe: the iframe renders without a `src` on the server and on the first
  * client render, so hydration never mismatches; the effect then assigns the
  * themed `src` and adopts the embed's reported aspect ratio.
+ *
+ * Corners: the wrapper is the one clipping surface — it carries
+ * `overflow: hidden`, and the host supplies any corner radius via `className`
+ * or `style`. The iframe itself must NOT carry a `border-radius`: under
+ * iframe-as-screen the mount lays the iframe out at the canonical viewport and
+ * scales it down with a transform, so a radius on the iframe lives in
+ * pre-transform space and renders at `radius x scale` — a mismatched, mostly
+ * ineffective clip. The embed paints edge-to-edge and the host boundary owns
+ * the corners.
  */
 export const ScenarEmbed = forwardRef<ScenarEmbedHandle, ScenarEmbedProps>(
   function ScenarEmbed({ src, id, base, title, theme = "auto", onEvent, className, style }, ref) {
@@ -98,7 +107,13 @@ export const ScenarEmbed = forwardRef<ScenarEmbedHandle, ScenarEmbedProps>(
     return (
       <div
         className={className}
-        style={{ position: "relative", width: "100%", aspectRatio: ratio, ...style }}
+        style={{
+          position: "relative",
+          width: "100%",
+          aspectRatio: ratio,
+          overflow: "hidden",
+          ...style,
+        }}
       >
         <iframe
           ref={iframeRef}
@@ -112,7 +127,6 @@ export const ScenarEmbed = forwardRef<ScenarEmbedHandle, ScenarEmbedProps>(
             width: "100%",
             height: "100%",
             border: 0,
-            borderRadius: "inherit",
           }}
         />
       </div>