@virtualdisplay.io/client 4.0.0-alpha.28 → 4.0.0-alpha.29

package/dist/virtualdisplay.client.umd.js

@@ -284,6 +284,11 @@
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 0.75rem 1rem;
+  /* The popup is absolutely positioned inside the ~28px marker anchor, so
+     without an explicit width it shrink-to-fits against that anchor and
+     collapses to one word per line. max-content sizes it by its own text,
+     capped below. */
+  inline-size: max-content;
   max-inline-size: 15rem;
   box-shadow: 0 4px 6px oklch(5% 0 0 / 8%), 0 2px 4px oklch(5% 0 0 / 6%);
   pointer-events: auto;
@@ -291,6 +296,13 @@
 }
 .vd-annotation-popup:focus { outline: none; }
 
+/* Flipped below the marker when the popup would clip the container's top
+   edge; the layer positions it at open time and on the render cadence. */
+.vd-annotation-popup--below {
+  inset-block-end: auto;
+  inset-block-start: calc(100% + 0.5rem);
+}
+
 .vd-annotation-popup-close {
   position: absolute;
   inset-block-start: 0.375rem;
@@ -327,9 +339,12 @@
   }
 }
 
+/* Opacity only: the layer sets the popup's transform inline to clamp it
+   inside the container, and a keyframe animating transform would override
+   that for its duration and make the popup jump at the end. */
 @keyframes vd-popup-in {
-  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
-  to { opacity: 1; transform: translateX(-50%) translateY(0); }
+  from { opacity: 0; }
+  to { opacity: 1; }
 }
 
 .vd-annotation-popup-title {
@@ -381,7 +396,7 @@
   0%, 100% { opacity: 1; }
   50% { opacity: 0.55; }
 }
-`;let Ne=!1;function Pe(){if(Ne||typeof document>"u")return;Ne=!0;const n=document.createElement("style");n.id="vd-ui-vanilla",n.textContent=pr,document.head.appendChild(n)}const br=V.fontFamily.sans.join(", ");class vr{qrLib=null;dialog=null;qrSlot=null;show(){this.hide(),Pe(),this.dialog=new hr({onClose:()=>{this.dialog=null,this.qrSlot=null}}),Object.assign(this.dialog.card.element.style,{display:"flex",flexDirection:"column",alignItems:"center",gap:R[3],fontFamily:br}),this.dialog.card.element.appendChild(this.createText(ki(),{fontSize:V.fontSize.base,fontWeight:V.fontWeight.semibold,color:B.neutral[900]})),this.dialog.card.element.appendChild(this.createText(Mi(),{fontSize:V.fontSize.sm,color:B.neutral[600]})),this.qrSlot=this.createQrSlot(),this.dialog.card.element.appendChild(this.qrSlot),this.dialog.card.element.appendChild(this.createText(Bi(),{fontSize:V.fontSize.xs,color:B.neutral[500]}));const t=new F({variant:"outline",label:Di(),onClick:()=>{this.hide()}});this.dialog.card.element.appendChild(t.element),this.dialog.open()}async update(t){this.qrLib??=await Promise.resolve().then(()=>Is);const e=await this.qrLib.toDataURL(t,{width:256,margin:4,errorCorrectionLevel:"M",color:{dark:B.black,light:B.white}});return this.qrSlot===null?!1:(this.qrSlot.classList.remove("ui-qr-slot--loading"),this.qrSlot.replaceChildren(this.createQrImage(e)),!0)}hide(){this.dialog?.close(),this.dialog=null,this.qrSlot=null}createText(t,e){const i=document.createElement("p");return i.textContent=t,Object.assign(i.style,{margin:"0",textAlign:"center",...e}),i}createQrSlot(){const t=document.createElement("div");return t.className="ui-qr-slot ui-qr-slot--loading",t}createQrImage(t){const e=document.createElement("img");return e.src=t,e.alt="QR code",e}}function Le(n){const t=Math.max(0,Math.min(1,n));return t*t*(3-2*t)}function yr(n,t,e,i,o,r){const[s,a,l]=n,c=Math.cos(t),u=Math.sin(t),d=c*s+u*l,f=-u*s+c*l,h=Math.cos(e),p=Math.sin(e),_=h*a-p*f,L=p*a+h*f,S=.55;return[i+d*r*S,o-_*r*S,L]}function wr(n,t,e){n.beginPath(),n.moveTo(t[0],t[1]),n.lineTo(e[0],e[1]),n.strokeStyle="#000",n.lineWidth=2,n.stroke()}function Cr(n,t,e,i,o){const r=t(e),s=t(i),a=[r[0]+(s[0]-r[0])*o,r[1]+(s[1]-r[1])*o,r[2]];wr(n,r,a)}const bt=[-1,-1,1],vt=[1,-1,1],yt=[1,-1,-1],wt=[-1,-1,-1],Ct=[-1,1,1],St=[1,1,1],Et=[1,1,-1],At=[-1,1,-1],Be=[[bt,vt],[vt,yt],[yt,wt],[wt,bt],[bt,Ct],[vt,St],[yt,Et],[wt,At],[Ct,St],[St,Et],[Et,At],[At,Ct]],Sr=400,xe='-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';function Er(){const n=document.createElement("div");Object.assign(n.style,{position:"absolute",inset:"0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",background:"#fff",zIndex:"20",opacity:"0",transition:"opacity 0.3s ease-in-out"});const t=document.createElement("canvas");Object.assign(t.style,{width:"100%",height:"100%",position:"absolute",inset:"0"});const e=document.createElement("div");Object.assign(e.style,{position:"absolute",top:"56%",left:"0",right:"0",textAlign:"center",pointerEvents:"none"});const i=document.createElement("span");Object.assign(i.style,{fontSize:"13px",fontWeight:"400",color:"#000",fontVariantNumeric:"tabular-nums",fontFamily:xe});const o=document.createElement("span");return Object.assign(o.style,{fontSize:"13px",color:"#000",fontFamily:xe}),o.textContent=Ji(),e.appendChild(i),e.appendChild(o),n.appendChild(t),n.appendChild(e),{overlay:n,canvas:t,pctEl:i,phaseEl:o}}class Ar{overlay;canvas;ctx;pctEl;phaseEl;animationId=null;showTimerId=null;startTime;hidden=!1;visible=!1;constructor(t,e={}){this.startTime=performance.now();const i=Er();this.overlay=i.overlay,this.canvas=i.canvas,this.pctEl=i.pctEl,this.phaseEl=i.phaseEl,t.appendChild(this.overlay),this.ctx=this.canvas.getContext("2d"),this.ctx!==null&&(this.sizeCanvas(),this.tick());const o=e.showDelay??Sr;this.showTimerId=setTimeout(()=>{this.reveal()},o)}updateProgress(t,e){this.hidden||(this.pctEl.textContent=`${Math.round(t)}%`,this.phaseEl.textContent=e!==""?` · ${e}`:"")}showError(t){if(this.hidden=!1,this.animationId!==null&&(cancelAnimationFrame(this.animationId),this.animationId=null),this.ctx!==null){const e=Math.min(devicePixelRatio,2),i=this.canvas.width/e,o=this.canvas.height/e;this.ctx.fillStyle="#fff",this.ctx.fillRect(0,0,i*e,o*e)}this.pctEl.textContent="",this.phaseEl.textContent=t,this.phaseEl.style.color="#b91c1c",this.reveal()}hide(){if(!this.hidden){if(this.hidden=!0,this.cancelShowTimer(),!this.visible){this.destroy();return}this.overlay.style.opacity="0",this.overlay.addEventListener("transitionend",()=>{this.destroy()},{once:!0}),setTimeout(()=>{this.destroy()},500)}}destroy(){this.cancelShowTimer(),this.animationId!==null&&(cancelAnimationFrame(this.animationId),this.animationId=null),this.overlay.remove()}reveal(){this.hidden||this.visible||(this.visible=!0,this.overlay.style.opacity="1")}cancelShowTimer(){this.showTimerId!==null&&(clearTimeout(this.showTimerId),this.showTimerId=null)}sizeCanvas(){if(this.ctx===null)return;const t=Math.min(devicePixelRatio,2),e=this.overlay.clientWidth||440,i=this.overlay.clientHeight||360;this.canvas.width=e*t,this.canvas.height=i*t,this.ctx.scale(t,t),this.ctx.lineCap="round",this.ctx.lineJoin="round"}tick=()=>{this.hidden||(this.drawFrame(),this.animationId=requestAnimationFrame(this.tick))};drawFrame(){if(this.ctx===null)return;const t=this.canvas.width/Math.min(devicePixelRatio,2),e=this.canvas.height/Math.min(devicePixelRatio,2),i=(performance.now()-this.startTime)/1e3;this.ctx.fillStyle="#fff",this.ctx.fillRect(0,0,t,e);const o=t/2,r=e*.44,s=Math.min(t,e)*.08,a=.785,l=.615,c=p=>yr(p,a,l,o,r,s),u=6,d=i%u/u,f=Be.length;let h;d<.35?h=Le(d/.35)*f:d<.55?h=f:d<.9?h=(1-Le((d-.55)/.35))*f:h=0,this.ctx.shadowBlur=5,this.ctx.shadowColor="rgba(30,30,30,0.08)";for(let p=0;p<f&&!(p>=h);p++){const _=Be[p];if(_===void 0)continue;const L=Math.min(1,h-p);Cr(this.ctx,c,_[0],_[1],L)}this.ctx.shadowBlur=0}}class _r{constructor(t){this.options=t,this.element=document.createElement("div"),Object.assign(this.element.style,{display:"flex",gap:"0.375rem"}),this.onFullscreenChange=()=>{this.setFullscreenIcon(document.fullscreenElement!==null)},document.addEventListener("fullscreenchange",this.onFullscreenChange)}options;element;arBtn=null;fullscreenBtn=null;annotationsBtn=null;annotationsShown=!1;onFullscreenChange;setFullscreenIcon(t){this.fullscreenBtn!==null&&this.fullscreenBtn.setIcon(t?x.exitFullscreen():x.fullscreen())}syncButton(t,e,i){if(e&&t===null){const o=i();return this.element.appendChild(o.element),o}return!e&&t!==null?(t.element.remove(),null):t}applySettings(t){this.arBtn=this.syncButton(this.arBtn,t.ar!==!1&&this.options.onAr!==void 0,()=>new F({variant:"outline",size:"icon",label:Si(),icon:x.ar(),onClick:()=>{this.options.onAr?.()}})),this.fullscreenBtn=this.syncButton(this.fullscreenBtn,t.fullscreen!==!1&&this.options.onFullscreen!==void 0,()=>new F({variant:"outline",size:"icon",label:Gi(),icon:x.fullscreen(),onClick:()=>{this.options.onFullscreen?.()}}));const e=t.annotations==="toggle-shown"||t.annotations==="toggle-hidden";this.annotationsBtn=this.syncButton(this.annotationsBtn,e&&this.options.onAnnotationsToggle!==void 0,()=>{this.annotationsShown=t.annotations==="toggle-shown";const i=new F({variant:"outline",size:"icon",label:$i(),icon:this.annotationsShown?x.annotations():x.annotationsOff(),onClick:()=>{this.flipAnnotations()}});return i.element.setAttribute("aria-pressed",String(this.annotationsShown)),i})}flipAnnotations(){this.annotationsShown=!this.annotationsShown,this.annotationsBtn?.element.setAttribute("aria-pressed",String(this.annotationsShown)),this.annotationsBtn?.setIcon(this.annotationsShown?x.annotations():x.annotationsOff()),this.options.onAnnotationsToggle?.(this.annotationsShown)}destroy(){document.removeEventListener("fullscreenchange",this.onFullscreenChange)}}const W=.5;class ct{element;constructor(t,e){this.element=Object.assign(document.createElement("div"),{className:"vd-camera-controls"});const i={targetRotation:e.rotation,targetTilt:e.tilt,targetZoom:e.zoom,thetaOffset:0},o=kr(t,e,i);e.onChange(r=>{i.targetRotation=r.rotation-i.thetaOffset,i.targetTilt=r.tilt,i.targetZoom=r.zoom,Tr(o,e,r)}),this.element.appendChild(ct.buildZoom(o.zoomOut,o.zoomIn)),this.element.appendChild(ct.buildDpad(o.tiltUp,o.rotateLeft,o.reset,o.rotateRight,o.tiltDown))}static buildZoom(t,e){const i=document.createElement("div");return i.className="vd-zoom",i.appendChild(t.element),i.appendChild(e.element),i}static buildDpad(t,e,i,o,r){const s=document.createElement("div");s.className="vd-dpad";for(const[a,l]of[[t,"up"],[e,"left"],[i,"center"],[o,"right"],[r,"down"]])a.element.classList.add(`vd-dpad-${l}`),s.appendChild(a.element);return s}}function kr(n,t,e){const i=s=>Math.max(t.limits?.minZoom??1,Math.min(t.limits?.maxZoom??1/0,s)),o=s=>{const a=t.limits?.minRotate,l=t.limits?.maxRotate;return a!==void 0||l!==void 0?Math.max(a??-1/0,Math.min(l??1/0,s)):s},r=s=>{const a=t.limits?.minTilt,l=t.limits?.maxTilt;if(a!==void 0||l!==void 0){e.targetTilt=Math.max(a??0,Math.min(l??180,e.targetTilt+s)),n.tilt(e.targetTilt).set();return}const c=e.targetTilt+s;c>180||c<0?(e.targetTilt=c>180?360-c:-c,e.thetaOffset=(e.thetaOffset+180)%360,n.tilt(e.targetTilt).rotate(e.targetRotation+e.thetaOffset).set()):(e.targetTilt=c,n.tilt(e.targetTilt).set())};return{zoomOut:new F({variant:"outline",size:"icon",label:Co(),icon:x.zoomOut(),onClick:()=>{e.targetZoom=i(e.targetZoom-10),n.zoom(e.targetZoom).set()}}),zoomIn:new F({variant:"outline",size:"icon",label:bo(),icon:x.zoomIn(),onClick:()=>{e.targetZoom=i(e.targetZoom+10),n.zoom(e.targetZoom).set()}}),tiltUp:new F({variant:"outline",size:"icon",label:Lo(),icon:x.tiltUp(),onClick:()=>{r(-15)}}),rotateLeft:new F({variant:"outline",size:"icon",label:_o(),icon:x.rotateLeft(),onClick:()=>{e.targetRotation=o(e.targetRotation-15),n.rotate(e.targetRotation+e.thetaOffset).set()}}),reset:new F({variant:"outline",size:"icon",label:fo(),icon:x.reset(),onClick:()=>{e.thetaOffset=0,n.reset()}}),rotateRight:new F({variant:"outline",size:"icon",label:Io(),icon:x.rotateRight(),onClick:()=>{e.targetRotation=o(e.targetRotation+15),n.rotate(e.targetRotation+e.thetaOffset).set()}}),tiltDown:new F({variant:"outline",size:"icon",label:zo(),icon:x.tiltDown(),onClick:()=>{r(15)}})}}function Tr(n,t,e){const i=t.limits;i!==void 0&&(n.zoomOut.element.disabled=i.minZoom!==void 0&&e.zoom<=i.minZoom+W,n.zoomIn.element.disabled=i.maxZoom!==void 0&&e.zoom>=i.maxZoom-W,n.tiltUp.element.disabled=i.minTilt!==void 0&&e.tilt<=i.minTilt+W,n.tiltDown.element.disabled=i.maxTilt!==void 0&&e.tilt>=i.maxTilt-W,n.rotateLeft.element.disabled=i.minRotate!==void 0&&e.rotation<=i.minRotate+W,n.rotateRight.element.disabled=i.maxRotate!==void 0&&e.rotation>=i.maxRotate-W)}const K={SELECT:"ui:select",SELECTED:"ui:selected",FOCUS_CHANGE:"vd:focus-change",CONFIGURATION_CHANGE:"vd:configuration-change",CONFIGURATION_SUBMIT:"vd:configuration-submit"},Oe={mm:1,cm:10,m:1e3,in:25.4},ze=3;function Rr(n){const t=n.stepMm/Oe[n.displayUnit];for(let e=0;e<=ze;e++){const i=t*10**e;if(Math.abs(i-Math.round(i))<1e-9)return e}return ze}function Ir(n,t,e){const i=Rr(t),o=n/Oe[t.displayUnit];return new Intl.NumberFormat(e,{minimumFractionDigits:i,maximumFractionDigits:i}).format(o)}function Mr(n,t,e,i,o,r,s){const a=P(),l=n.values.map(d=>Ir(Number(d),t,a)),c=n.values.find(d=>e.getValue(n.name,d)?.isSelected===!0)??n.defaultValue,u=new gr(n.values,{label:n.name,labels:l,unit:t.displayUnit,...c!==void 0&&{initialSelected:c}});return u.onSelect(d=>{o(n.name,d)}),u.onSettle(d=>{i.dispatch(K.SELECT,{attribute:n.name,value:d},!0).defaultPrevented||r(n.name,d)}),s(n.name,d=>{u.setSelected(d.value),i.dispatch(K.SELECTED,{attribute:n.name,value:d.value})}),{element:u.element,setSelectable:()=>{}}}const Nr=5;let Pr=0;function _t(n){const t=n.replace(/([A-Z])/g," $1").trim();return t.charAt(0).toUpperCase()+t.slice(1).toLowerCase()}function Lr(n,t,e,i,o,r){const s=document.createElement("div");s.className="vd-attribute",s.dataset.name=n.name;const a=document.createElement("span");a.className="vd-attribute-label",a.textContent=_t(n.name),a.id=`vd-attribute-label-${Pr++}`,s.appendChild(a),s.setAttribute("role","group"),s.setAttribute("aria-labelledby",a.id);const l=u=>{s.style.display=u?"none":""},c=n.dimension!==void 0?Mr(n,n.dimension,t,e,o,i,r):Br(n,t,e,i,r);return s.appendChild(c.element),{element:s,setSelectable:c.setSelectable,setHidden:l}}function Br(n,t,e,i,o){const r=n.values.find(l=>t.getValue(n.name,l)?.isSelected===!0),s=n.values.map(_t),a=n.values.length<=Nr?new fr(n.values,r,s):new mr(n.name,n.values,_t(n.name),r,s);return a.onSelect(l=>{e.dispatch(K.SELECT,{attribute:n.name,value:l},!0).defaultPrevented||i(n.name,l)}),o(n.name,l=>{a.setSelected(l.value),e.dispatch(K.SELECTED,{attribute:n.name,value:l.value})}),{element:a.element,setSelectable:l=>{a.setEnabled(l)}}}const xr=80,Or=2500;class zr{constructor(t,e=Or){this.configuration=t,this.resetMs=e,this.element=document.createElement("div"),this.element.className="vd-commerce vd-hidden";const i=document.createElement("div");i.className="vd-commerce-price",this.priceEl=document.createElement("span"),this.priceEl.className="vd-price",this.vatEl=document.createElement("span"),this.vatEl.className="vd-vat",i.append(this.priceEl,this.vatEl),this.button=new F({variant:"default",onClick:()=>{this.handleSubmit()}}),this.button.element.classList.add("vd-cta","vd-hidden"),this.element.append(i,this.button.element),this.unsubscribe=this.configuration.onRender(()=>{this.update()}),this.update()}configuration;resetMs;element;priceEl;vatEl;button;unsubscribe;state="idle";resetTimer;update(){this.renderPrice(this.configuration.current),this.renderButton();const t=this.configuration.current!==void 0||this.configuration.submitEnabled;this.element.classList.toggle("vd-hidden",!t)}destroy(){this.unsubscribe(),this.resetTimer!==void 0&&clearTimeout(this.resetTimer),this.element.remove()}renderPrice(t){if(t===void 0){this.priceEl.textContent="",this.vatEl.textContent="";return}this.priceEl.textContent=Dr(t.price,t.currency),this.vatEl.textContent=De(this.configuration.vatDisplay)}renderButton(){const t=this.configuration.submitEnabled;this.button.element.classList.toggle("vd-hidden",!t),t&&this.state==="idle"&&this.setButtonText(De(this.configuration.buttonLabel))}async handleSubmit(){if(this.state!=="busy"){this.setState("busy",Vo());try{await this.configuration.submit(),this.setState("success",Ho())}catch{this.setState("failed",Qo())}this.scheduleReset()}}scheduleReset(){this.resetTimer!==void 0&&clearTimeout(this.resetTimer),this.resetTimer=setTimeout(()=>{this.state="idle",this.update()},this.resetMs)}setState(t,e){this.state=t,this.element.dataset.submit=t,this.button.element.disabled=t==="busy",this.setButtonText(e)}setButtonText(t){this.button.element.textContent=t,this.button.element.setAttribute("aria-label",t)}}function De(n){return(n??"").slice(0,xr)}function Dr(n,t){try{const e=new Intl.NumberFormat(P(),{style:"currency",currency:t}),i=e.resolvedOptions().maximumFractionDigits??2;return e.format(n/10**i)}catch{return`${t} ${(n/100).toFixed(2)}`}}class Fe{slot=null;panel=null;attach(t,e){this.panel=e,e.style.display="none",this.slot=document.createElement("div"),this.slot.className="vd-slot-bottom-left",this.slot.appendChild(e),t.appendChild(this.slot)}setVisible(t){this.panel!==null&&(this.panel.style.display=t?"flex":"none")}destroy(){this.slot?.remove(),this.slot=null,this.panel=null}}const Fr=572;class Ur{constructor(t){this.actionBarSlot=t}actionBarSlot;element=null;body=null;openButton=null;closeButton=null;container=null;observer=null;collapsible=!1;expanded=!0;visible=!1;attach(t,e){this.container=t,e.classList.add("vd-attributes-sidebar"),this.closeButton=new F({variant:"ghost",size:"icon-sm",label:lo(),icon:x.close({size:18}),onClick:()=>{this.expanded=!1,this.render()}});const i=document.createElement("div");i.className="vd-sidebar-header",i.appendChild(this.closeButton.element),this.body=document.createElement("div"),this.body.className="vd-sidebar-body",this.body.appendChild(e),this.element=document.createElement("div"),this.element.className="vd-sidebar vd-hidden",this.element.append(i,this.body),t.appendChild(this.element),this.openButton=new F({variant:"outline",size:"icon",label:oo(),icon:x.configurator({size:18}),onClick:()=>{this.expanded=!0,this.render()}}),this.openButton.element.classList.add("vd-configurator-toggle","vd-hidden"),this.actionBarSlot.appendChild(this.openButton.element),this.observe()}setVisible(t){this.visible=t,this.render()}destroy(){this.observer?.disconnect(),this.observer=null,this.openButton?.element.remove(),this.element?.remove(),this.container?.classList.remove("vd-layout-sidebar-right","vd-layout-sidebar-permanent"),this.container=null}observe(){typeof ResizeObserver>"u"||this.container===null||(this.observer=new ResizeObserver(t=>{const e=t[0]?.contentRect.width??0;this.setCollapsible(e>0&&e<Fr)}),this.observer.observe(this.container))}setCollapsible(t){t!==this.collapsible&&(this.collapsible=t,this.expanded=!t,this.render())}render(){if(this.element===null||this.openButton===null||this.closeButton===null||this.container===null)return;const t=this.visible&&this.expanded,e=this.visible&&!this.expanded;this.element.classList.toggle("vd-hidden",!this.visible),this.element.classList.toggle("vd-sidebar-collapsed",e),this.openButton.element.classList.toggle("vd-hidden",!e),this.closeButton.element.style.display=this.collapsible?"":"none",this.container.classList.toggle("vd-layout-sidebar-right",t),this.container.classList.toggle("vd-layout-sidebar-permanent",t&&!this.collapsible)}}class Vr{attach(t,e){}setVisible(t){}destroy(){}}const $r={"inframe-bottom-left":()=>new Fe,"sidebar-right":n=>new Ur(n),hidden:()=>new Vr};function qr(n,t){return($r[n??""]??(()=>new Fe))(t)}const kt=V.fontFamily.sans.join(", "),Tt=`
+`;let Ne=!1;function Pe(){if(Ne||typeof document>"u")return;Ne=!0;const n=document.createElement("style");n.id="vd-ui-vanilla",n.textContent=pr,document.head.appendChild(n)}const br=V.fontFamily.sans.join(", ");class vr{qrLib=null;dialog=null;qrSlot=null;show(){this.hide(),Pe(),this.dialog=new hr({onClose:()=>{this.dialog=null,this.qrSlot=null}}),Object.assign(this.dialog.card.element.style,{display:"flex",flexDirection:"column",alignItems:"center",gap:R[3],fontFamily:br}),this.dialog.card.element.appendChild(this.createText(ki(),{fontSize:V.fontSize.base,fontWeight:V.fontWeight.semibold,color:B.neutral[900]})),this.dialog.card.element.appendChild(this.createText(Mi(),{fontSize:V.fontSize.sm,color:B.neutral[600]})),this.qrSlot=this.createQrSlot(),this.dialog.card.element.appendChild(this.qrSlot),this.dialog.card.element.appendChild(this.createText(Bi(),{fontSize:V.fontSize.xs,color:B.neutral[500]}));const t=new F({variant:"outline",label:Di(),onClick:()=>{this.hide()}});this.dialog.card.element.appendChild(t.element),this.dialog.open()}async update(t){this.qrLib??=await Promise.resolve().then(()=>Is);const e=await this.qrLib.toDataURL(t,{width:256,margin:4,errorCorrectionLevel:"M",color:{dark:B.black,light:B.white}});return this.qrSlot===null?!1:(this.qrSlot.classList.remove("ui-qr-slot--loading"),this.qrSlot.replaceChildren(this.createQrImage(e)),!0)}hide(){this.dialog?.close(),this.dialog=null,this.qrSlot=null}createText(t,e){const i=document.createElement("p");return i.textContent=t,Object.assign(i.style,{margin:"0",textAlign:"center",...e}),i}createQrSlot(){const t=document.createElement("div");return t.className="ui-qr-slot ui-qr-slot--loading",t}createQrImage(t){const e=document.createElement("img");return e.src=t,e.alt="QR code",e}}function Le(n){const t=Math.max(0,Math.min(1,n));return t*t*(3-2*t)}function yr(n,t,e,i,o,r){const[s,a,l]=n,c=Math.cos(t),u=Math.sin(t),d=c*s+u*l,f=-u*s+c*l,h=Math.cos(e),p=Math.sin(e),_=h*a-p*f,L=p*a+h*f,S=.55;return[i+d*r*S,o-_*r*S,L]}function wr(n,t,e){n.beginPath(),n.moveTo(t[0],t[1]),n.lineTo(e[0],e[1]),n.strokeStyle="#000",n.lineWidth=2,n.stroke()}function Cr(n,t,e,i,o){const r=t(e),s=t(i),a=[r[0]+(s[0]-r[0])*o,r[1]+(s[1]-r[1])*o,r[2]];wr(n,r,a)}const bt=[-1,-1,1],vt=[1,-1,1],yt=[1,-1,-1],wt=[-1,-1,-1],Ct=[-1,1,1],St=[1,1,1],Et=[1,1,-1],At=[-1,1,-1],Be=[[bt,vt],[vt,yt],[yt,wt],[wt,bt],[bt,Ct],[vt,St],[yt,Et],[wt,At],[Ct,St],[St,Et],[Et,At],[At,Ct]],Sr=400,xe='-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif';function Er(){const n=document.createElement("div");Object.assign(n.style,{position:"absolute",inset:"0",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",background:"#fff",zIndex:"20",opacity:"0",transition:"opacity 0.3s ease-in-out"});const t=document.createElement("canvas");Object.assign(t.style,{width:"100%",height:"100%",position:"absolute",inset:"0"});const e=document.createElement("div");Object.assign(e.style,{position:"absolute",top:"56%",left:"0",right:"0",textAlign:"center",pointerEvents:"none"});const i=document.createElement("span");Object.assign(i.style,{fontSize:"13px",fontWeight:"400",color:"#000",fontVariantNumeric:"tabular-nums",fontFamily:xe});const o=document.createElement("span");return Object.assign(o.style,{fontSize:"13px",color:"#000",fontFamily:xe}),o.textContent=Ji(),e.appendChild(i),e.appendChild(o),n.appendChild(t),n.appendChild(e),{overlay:n,canvas:t,pctEl:i,phaseEl:o}}class Ar{overlay;canvas;ctx;pctEl;phaseEl;animationId=null;showTimerId=null;startTime;hidden=!1;visible=!1;constructor(t,e={}){this.startTime=performance.now();const i=Er();this.overlay=i.overlay,this.canvas=i.canvas,this.pctEl=i.pctEl,this.phaseEl=i.phaseEl,t.appendChild(this.overlay),this.ctx=this.canvas.getContext("2d"),this.ctx!==null&&(this.sizeCanvas(),this.tick());const o=e.showDelay??Sr;this.showTimerId=setTimeout(()=>{this.reveal()},o)}updateProgress(t,e){this.hidden||(this.pctEl.textContent=`${Math.round(t)}%`,this.phaseEl.textContent=e!==""?` · ${e}`:"")}showError(t){if(this.hidden=!1,this.animationId!==null&&(cancelAnimationFrame(this.animationId),this.animationId=null),this.ctx!==null){const e=Math.min(devicePixelRatio,2),i=this.canvas.width/e,o=this.canvas.height/e;this.ctx.fillStyle="#fff",this.ctx.fillRect(0,0,i*e,o*e)}this.pctEl.textContent="",this.phaseEl.textContent=t,this.phaseEl.style.color="#b91c1c",this.reveal()}hide(){if(!this.hidden){if(this.hidden=!0,this.cancelShowTimer(),!this.visible){this.destroy();return}this.overlay.style.opacity="0",this.overlay.addEventListener("transitionend",()=>{this.destroy()},{once:!0}),setTimeout(()=>{this.destroy()},500)}}destroy(){this.cancelShowTimer(),this.animationId!==null&&(cancelAnimationFrame(this.animationId),this.animationId=null),this.overlay.remove()}reveal(){this.hidden||this.visible||(this.visible=!0,this.overlay.style.opacity="1")}cancelShowTimer(){this.showTimerId!==null&&(clearTimeout(this.showTimerId),this.showTimerId=null)}sizeCanvas(){if(this.ctx===null)return;const t=Math.min(devicePixelRatio,2),e=this.overlay.clientWidth||440,i=this.overlay.clientHeight||360;this.canvas.width=e*t,this.canvas.height=i*t,this.ctx.scale(t,t),this.ctx.lineCap="round",this.ctx.lineJoin="round"}tick=()=>{this.hidden||(this.drawFrame(),this.animationId=requestAnimationFrame(this.tick))};drawFrame(){if(this.ctx===null)return;const t=this.canvas.width/Math.min(devicePixelRatio,2),e=this.canvas.height/Math.min(devicePixelRatio,2),i=(performance.now()-this.startTime)/1e3;this.ctx.fillStyle="#fff",this.ctx.fillRect(0,0,t,e);const o=t/2,r=e*.44,s=Math.min(t,e)*.08,a=.785,l=.615,c=p=>yr(p,a,l,o,r,s),u=6,d=i%u/u,f=Be.length;let h;d<.35?h=Le(d/.35)*f:d<.55?h=f:d<.9?h=(1-Le((d-.55)/.35))*f:h=0,this.ctx.shadowBlur=5,this.ctx.shadowColor="rgba(30,30,30,0.08)";for(let p=0;p<f&&!(p>=h);p++){const _=Be[p];if(_===void 0)continue;const L=Math.min(1,h-p);Cr(this.ctx,c,_[0],_[1],L)}this.ctx.shadowBlur=0}}class _r{constructor(t){this.options=t,this.element=document.createElement("div"),Object.assign(this.element.style,{display:"flex",gap:"0.375rem"}),this.onFullscreenChange=()=>{this.setFullscreenIcon(document.fullscreenElement!==null)},document.addEventListener("fullscreenchange",this.onFullscreenChange)}options;element;arBtn=null;fullscreenBtn=null;annotationsBtn=null;annotationsShown=!1;onFullscreenChange;setFullscreenIcon(t){this.fullscreenBtn!==null&&this.fullscreenBtn.setIcon(t?x.exitFullscreen():x.fullscreen())}syncButton(t,e,i){if(e&&t===null){const o=i();return this.element.appendChild(o.element),o}return!e&&t!==null?(t.element.remove(),null):t}applySettings(t){this.arBtn=this.syncButton(this.arBtn,t.ar!==!1&&this.options.onAr!==void 0,()=>new F({variant:"outline",size:"icon",label:Si(),icon:x.ar(),onClick:()=>{this.options.onAr?.()}})),this.fullscreenBtn=this.syncButton(this.fullscreenBtn,t.fullscreen!==!1&&this.options.onFullscreen!==void 0,()=>new F({variant:"outline",size:"icon",label:Gi(),icon:x.fullscreen(),onClick:()=>{this.options.onFullscreen?.()}}));const e=t.annotations==="toggle-shown"||t.annotations==="toggle-hidden";this.annotationsBtn=this.syncButton(this.annotationsBtn,e&&this.options.onAnnotationsToggle!==void 0,()=>{this.annotationsShown=t.annotations==="toggle-shown";const i=new F({variant:"outline",size:"icon",label:$i(),icon:this.annotationsShown?x.annotations():x.annotationsOff(),onClick:()=>{this.flipAnnotations()}});return i.element.setAttribute("aria-pressed",String(this.annotationsShown)),i})}flipAnnotations(){this.annotationsShown=!this.annotationsShown,this.annotationsBtn?.element.setAttribute("aria-pressed",String(this.annotationsShown)),this.annotationsBtn?.setIcon(this.annotationsShown?x.annotations():x.annotationsOff()),this.options.onAnnotationsToggle?.(this.annotationsShown)}destroy(){document.removeEventListener("fullscreenchange",this.onFullscreenChange)}}const W=.5;class ct{element;constructor(t,e){this.element=Object.assign(document.createElement("div"),{className:"vd-camera-controls"});const i={targetRotation:e.rotation,targetTilt:e.tilt,targetZoom:e.zoom,thetaOffset:0},o=kr(t,e,i);e.onChange(r=>{i.targetRotation=r.rotation-i.thetaOffset,i.targetTilt=r.tilt,i.targetZoom=r.zoom,Tr(o,e,r)}),this.element.appendChild(ct.buildZoom(o.zoomOut,o.zoomIn)),this.element.appendChild(ct.buildDpad(o.tiltUp,o.rotateLeft,o.reset,o.rotateRight,o.tiltDown))}static buildZoom(t,e){const i=document.createElement("div");return i.className="vd-zoom",i.appendChild(t.element),i.appendChild(e.element),i}static buildDpad(t,e,i,o,r){const s=document.createElement("div");s.className="vd-dpad";for(const[a,l]of[[t,"up"],[e,"left"],[i,"center"],[o,"right"],[r,"down"]])a.element.classList.add(`vd-dpad-${l}`),s.appendChild(a.element);return s}}function kr(n,t,e){const i=s=>Math.max(t.limits?.minZoom??1,Math.min(t.limits?.maxZoom??1/0,s)),o=s=>{const a=t.limits?.minRotate,l=t.limits?.maxRotate;return a!==void 0||l!==void 0?Math.max(a??-1/0,Math.min(l??1/0,s)):s},r=s=>{const a=t.limits?.minTilt,l=t.limits?.maxTilt;if(a!==void 0||l!==void 0){e.targetTilt=Math.max(a??0,Math.min(l??180,e.targetTilt+s)),n.tilt(e.targetTilt).set();return}const c=e.targetTilt+s;c>180||c<0?(e.targetTilt=c>180?360-c:-c,e.thetaOffset=(e.thetaOffset+180)%360,n.tilt(e.targetTilt).rotate(e.targetRotation+e.thetaOffset).set()):(e.targetTilt=c,n.tilt(e.targetTilt).set())};return{zoomOut:new F({variant:"outline",size:"icon",label:Co(),icon:x.zoomOut(),onClick:()=>{e.targetZoom=i(e.targetZoom-10),n.zoom(e.targetZoom).set()}}),zoomIn:new F({variant:"outline",size:"icon",label:bo(),icon:x.zoomIn(),onClick:()=>{e.targetZoom=i(e.targetZoom+10),n.zoom(e.targetZoom).set()}}),tiltUp:new F({variant:"outline",size:"icon",label:Lo(),icon:x.tiltUp(),onClick:()=>{r(-15)}}),rotateLeft:new F({variant:"outline",size:"icon",label:_o(),icon:x.rotateLeft(),onClick:()=>{e.targetRotation=o(e.targetRotation-15),n.rotate(e.targetRotation+e.thetaOffset).set()}}),reset:new F({variant:"outline",size:"icon",label:fo(),icon:x.reset(),onClick:()=>{e.thetaOffset=0,n.reset()}}),rotateRight:new F({variant:"outline",size:"icon",label:Io(),icon:x.rotateRight(),onClick:()=>{e.targetRotation=o(e.targetRotation+15),n.rotate(e.targetRotation+e.thetaOffset).set()}}),tiltDown:new F({variant:"outline",size:"icon",label:zo(),icon:x.tiltDown(),onClick:()=>{r(15)}})}}function Tr(n,t,e){const i=t.limits;i!==void 0&&(n.zoomOut.element.disabled=i.minZoom!==void 0&&e.zoom<=i.minZoom+W,n.zoomIn.element.disabled=i.maxZoom!==void 0&&e.zoom>=i.maxZoom-W,n.tiltUp.element.disabled=i.minTilt!==void 0&&e.tilt<=i.minTilt+W,n.tiltDown.element.disabled=i.maxTilt!==void 0&&e.tilt>=i.maxTilt-W,n.rotateLeft.element.disabled=i.minRotate!==void 0&&e.rotation<=i.minRotate+W,n.rotateRight.element.disabled=i.maxRotate!==void 0&&e.rotation>=i.maxRotate-W)}const K={SELECT:"vd:select",SELECTED:"vd:selected",FOCUS_CHANGE:"vd:focus-change",CONFIGURATION_CHANGE:"vd:configuration-change",CONFIGURATION_SUBMIT:"vd:configuration-submit"},Oe={mm:1,cm:10,m:1e3,in:25.4},ze=3;function Rr(n){const t=n.stepMm/Oe[n.displayUnit];for(let e=0;e<=ze;e++){const i=t*10**e;if(Math.abs(i-Math.round(i))<1e-9)return e}return ze}function Ir(n,t,e){const i=Rr(t),o=n/Oe[t.displayUnit];return new Intl.NumberFormat(e,{minimumFractionDigits:i,maximumFractionDigits:i}).format(o)}function Mr(n,t,e,i,o,r,s){const a=P(),l=n.values.map(d=>Ir(Number(d),t,a)),c=n.values.find(d=>e.getValue(n.name,d)?.isSelected===!0)??n.defaultValue,u=new gr(n.values,{label:n.name,labels:l,unit:t.displayUnit,...c!==void 0&&{initialSelected:c}});return u.onSelect(d=>{o(n.name,d)}),u.onSettle(d=>{i.dispatch(K.SELECT,{attribute:n.name,value:d},!0).defaultPrevented||r(n.name,d)}),s(n.name,d=>{u.setSelected(d.value),i.dispatch(K.SELECTED,{attribute:n.name,value:d.value})}),{element:u.element,setSelectable:()=>{}}}const Nr=5;let Pr=0;function _t(n){const t=n.replace(/([A-Z])/g," $1").trim();return t.charAt(0).toUpperCase()+t.slice(1).toLowerCase()}function Lr(n,t,e,i,o,r){const s=document.createElement("div");s.className="vd-attribute",s.dataset.name=n.name;const a=document.createElement("span");a.className="vd-attribute-label",a.textContent=_t(n.name),a.id=`vd-attribute-label-${Pr++}`,s.appendChild(a),s.setAttribute("role","group"),s.setAttribute("aria-labelledby",a.id);const l=u=>{s.style.display=u?"none":""},c=n.dimension!==void 0?Mr(n,n.dimension,t,e,o,i,r):Br(n,t,e,i,r);return s.appendChild(c.element),{element:s,setSelectable:c.setSelectable,setHidden:l}}function Br(n,t,e,i,o){const r=n.values.find(l=>t.getValue(n.name,l)?.isSelected===!0),s=n.values.map(_t),a=n.values.length<=Nr?new fr(n.values,r,s):new mr(n.name,n.values,_t(n.name),r,s);return a.onSelect(l=>{e.dispatch(K.SELECT,{attribute:n.name,value:l},!0).defaultPrevented||i(n.name,l)}),o(n.name,l=>{a.setSelected(l.value),e.dispatch(K.SELECTED,{attribute:n.name,value:l.value})}),{element:a.element,setSelectable:l=>{a.setEnabled(l)}}}const xr=80,Or=2500;class zr{constructor(t,e=Or){this.configuration=t,this.resetMs=e,this.element=document.createElement("div"),this.element.className="vd-commerce vd-hidden";const i=document.createElement("div");i.className="vd-commerce-price",this.priceEl=document.createElement("span"),this.priceEl.className="vd-price",this.vatEl=document.createElement("span"),this.vatEl.className="vd-vat",i.append(this.priceEl,this.vatEl),this.button=new F({variant:"default",onClick:()=>{this.handleSubmit()}}),this.button.element.classList.add("vd-cta","vd-hidden"),this.element.append(i,this.button.element),this.unsubscribe=this.configuration.onRender(()=>{this.update()}),this.update()}configuration;resetMs;element;priceEl;vatEl;button;unsubscribe;state="idle";resetTimer;update(){this.renderPrice(this.configuration.current),this.renderButton();const t=this.configuration.current!==void 0||this.configuration.submitEnabled;this.element.classList.toggle("vd-hidden",!t)}destroy(){this.unsubscribe(),this.resetTimer!==void 0&&clearTimeout(this.resetTimer),this.element.remove()}renderPrice(t){if(t===void 0){this.priceEl.textContent="",this.vatEl.textContent="";return}this.priceEl.textContent=Dr(t.price,t.currency),this.vatEl.textContent=De(this.configuration.vatDisplay)}renderButton(){const t=this.configuration.submitEnabled;this.button.element.classList.toggle("vd-hidden",!t),t&&this.state==="idle"&&this.setButtonText(De(this.configuration.buttonLabel))}async handleSubmit(){if(this.state!=="busy"){this.setState("busy",Vo());try{await this.configuration.submit(),this.setState("success",Ho())}catch{this.setState("failed",Qo())}this.scheduleReset()}}scheduleReset(){this.resetTimer!==void 0&&clearTimeout(this.resetTimer),this.resetTimer=setTimeout(()=>{this.state="idle",this.update()},this.resetMs)}setState(t,e){this.state=t,this.element.dataset.submit=t,this.button.element.disabled=t==="busy",this.setButtonText(e)}setButtonText(t){this.button.element.textContent=t,this.button.element.setAttribute("aria-label",t)}}function De(n){return(n??"").slice(0,xr)}function Dr(n,t){try{const e=new Intl.NumberFormat(P(),{style:"currency",currency:t}),i=e.resolvedOptions().maximumFractionDigits??2;return e.format(n/10**i)}catch{return`${t} ${(n/100).toFixed(2)}`}}class Fe{slot=null;panel=null;attach(t,e){this.panel=e,e.style.display="none",this.slot=document.createElement("div"),this.slot.className="vd-slot-bottom-left",this.slot.appendChild(e),t.appendChild(this.slot)}setVisible(t){this.panel!==null&&(this.panel.style.display=t?"flex":"none")}destroy(){this.slot?.remove(),this.slot=null,this.panel=null}}const Fr=572;class Ur{constructor(t){this.actionBarSlot=t}actionBarSlot;element=null;body=null;openButton=null;closeButton=null;container=null;observer=null;collapsible=!1;expanded=!0;visible=!1;attach(t,e){this.container=t,e.classList.add("vd-attributes-sidebar"),this.closeButton=new F({variant:"ghost",size:"icon-sm",label:lo(),icon:x.close({size:18}),onClick:()=>{this.expanded=!1,this.render()}});const i=document.createElement("div");i.className="vd-sidebar-header",i.appendChild(this.closeButton.element),this.body=document.createElement("div"),this.body.className="vd-sidebar-body",this.body.appendChild(e),this.element=document.createElement("div"),this.element.className="vd-sidebar vd-hidden",this.element.append(i,this.body),t.appendChild(this.element),this.openButton=new F({variant:"outline",size:"icon",label:oo(),icon:x.configurator({size:18}),onClick:()=>{this.expanded=!0,this.render()}}),this.openButton.element.classList.add("vd-configurator-toggle","vd-hidden"),this.actionBarSlot.appendChild(this.openButton.element),this.observe()}setVisible(t){this.visible=t,this.render()}destroy(){this.observer?.disconnect(),this.observer=null,this.openButton?.element.remove(),this.element?.remove(),this.container?.classList.remove("vd-layout-sidebar-right","vd-layout-sidebar-permanent"),this.container=null}observe(){typeof ResizeObserver>"u"||this.container===null||(this.observer=new ResizeObserver(t=>{const e=t[0]?.contentRect.width??0;this.setCollapsible(e>0&&e<Fr)}),this.observer.observe(this.container))}setCollapsible(t){t!==this.collapsible&&(this.collapsible=t,this.expanded=!t,this.render())}render(){if(this.element===null||this.openButton===null||this.closeButton===null||this.container===null)return;const t=this.visible&&this.expanded,e=this.visible&&!this.expanded;this.element.classList.toggle("vd-hidden",!this.visible),this.element.classList.toggle("vd-sidebar-collapsed",e),this.openButton.element.classList.toggle("vd-hidden",!e),this.closeButton.element.style.display=this.collapsible?"":"none",this.container.classList.toggle("vd-layout-sidebar-right",t),this.container.classList.toggle("vd-layout-sidebar-permanent",t&&!this.collapsible)}}class Vr{attach(t,e){}setVisible(t){}destroy(){}}const $r={"inframe-bottom-left":()=>new Fe,"sidebar-right":n=>new Ur(n),hidden:()=>new Vr};function qr(n,t){return($r[n??""]??(()=>new Fe))(t)}const kt=V.fontFamily.sans.join(", "),Tt=`
   position: absolute;
   display: flex;
   z-index: 10;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@virtualdisplay.io/client",
   "description": "TypeScript-first 3D model integration library with iframe-based architecture",
-  "version": "4.0.0-alpha.28",
+  "version": "4.0.0-alpha.29",
   "author": "Virtualdisplay <support@virtualdisplay.io>",
   "homepage": "https://virtualdisplay.io",
   "license": "MIT",