@limrun/ui 0.18.2 → 0.20.0

package/dist/duo-view-Bhr7zyWr.js

@@ -0,0 +1 @@
+"use strict";const n=require("react/jsx-runtime"),d=require("react"),E=require("./core-DkhLItUD.js");function X(e,o,r){const[c,i]=d.useState(e),s=d.useRef({nativeAngle:e,send:o,failed:r});s.current={nativeAngle:e,send:o,failed:r};const f=d.useRef(void 0),x=d.useRef(!1),l=d.useRef(null);return d.useEffect(()=>(l.current=new E.HingeSender(async p=>{await s.current.send(p),f.current===p&&(f.current=void 0)},p=>{f.current=void 0,s.current.failed(String(p)),i(s.current.nativeAngle)}),()=>l.current?.stop()),[]),d.useEffect(()=>{!x.current&&f.current===void 0&&i(e)},[e]),{angle:c,changeAngle:p=>{s.current.failed(void 0),f.current=p,i(p),l.current?.set(p)},interacting:x}}function Y({angle:e,changeAngle:o,interacting:r,rotate:c,onFold:i,foldTarget:s,onHingeDrag:f,children:x}){const l=d.useId();return n.jsxs("div",{className:"rc-duo-controls",onPointerDown:u=>u.stopPropagation(),children:[n.jsxs("div",{className:"rc-duo-hinge",children:[n.jsx("button",{className:"rc-duo-fold",onClick:i??(()=>o(e<90?180:0)),children:(s??e)<90?"Unfold":"Fold"}),n.jsx("label",{htmlFor:l,children:"Hinge"}),n.jsx("input",{id:l,type:"range",min:0,max:180,step:1,value:e,onPointerDown:u=>{f?.(),r.current=!0,u.currentTarget.setPointerCapture(u.pointerId)},onPointerUp:()=>{r.current=!1},onPointerCancel:()=>{r.current=!1},onLostPointerCapture:()=>{r.current=!1},onChange:u=>o(Number(u.target.value))}),n.jsxs("output",{children:[Math.round(e),"°"]}),n.jsx("button",{className:"rc-duo-rotate","aria-label":"Rotate device",title:"Rotate device",onClick:c,children:n.jsxs("svg",{viewBox:"0 0 24 24",width:"18",height:"18",fill:"none",stroke:"currentColor",strokeWidth:"1.6","aria-hidden":"true",children:[n.jsx("rect",{x:"7",y:"3",width:"10",height:"18",rx:"2"}),n.jsx("path",{d:"M3 9a9 9 0 0 1 3-5M3 4v5h5M21 15a9 9 0 0 1-3 5m3 0v-5h-5"})]})})]}),x&&n.jsx("div",{className:"rc-duo-views","aria-label":"Device view",children:x})]})}function $({button:e}){return n.jsx("svg",{viewBox:"0 0 24 24",width:"24",height:"24",fill:"none",stroke:"currentColor",strokeWidth:"1.7",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:e==="side"?n.jsxs(n.Fragment,{children:[n.jsx("rect",{x:"6",y:"10",width:"12",height:"11",rx:"2"}),n.jsx("path",{d:"M8 10V7a4 4 0 0 1 8 0v3"})]}):n.jsxs(n.Fragment,{children:[n.jsx("path",{d:"M3 9h4l5-5v16l-5-5H3zM17 12h5"}),e==="volumeUp"&&n.jsx("path",{d:"M19.5 9.5v5"})]})})}function z(e,o,r,c,i,s){return"M"+(e+i)+","+o+"H"+(e+r-s)+"a"+s+","+s+" 0 0 1 "+s+","+s+"V"+(o+c-s)+"a"+s+","+s+" 0 0 1 "+-s+","+s+"H"+(e+i)+"a"+i+","+i+" 0 0 1 "+-i+","+-i+"V"+(o+i)+"a"+i+","+i+" 0 0 1 "+i+","+-i+"Z"}function G({inner:e,width:o,height:r}){const c=d.useId().replace(/:/g,""),i=e?8.4:1.25,s=8.4;return n.jsxs("svg",{className:"rc-duo-flat-frame",viewBox:"0 0 "+o+" "+r,"aria-hidden":"true",children:[n.jsxs("defs",{children:[n.jsxs("linearGradient",{id:c+"-silver",x1:"0",y1:"0",x2:"1",y2:"1",children:[n.jsx("stop",{offset:"0",stopColor:"#62676b"}),n.jsx("stop",{offset:"0.035",stopColor:"#f9faf9"}),n.jsx("stop",{offset:"0.11",stopColor:"#b0b4b6"}),n.jsx("stop",{offset:"0.31",stopColor:"#fdfefd"}),n.jsx("stop",{offset:"0.43",stopColor:"#797f84"}),n.jsx("stop",{offset:"0.51",stopColor:"#e8eaea"}),n.jsx("stop",{offset:"0.7",stopColor:"#979da1"}),n.jsx("stop",{offset:"0.87",stopColor:"#fafbf9"}),n.jsx("stop",{offset:"1",stopColor:"#5f676c"})]}),n.jsxs("linearGradient",{id:c+"-spine",children:[n.jsx("stop",{stopColor:"#4a5154"}),n.jsx("stop",{offset:"0.16",stopColor:"#d6d9d9"}),n.jsx("stop",{offset:"0.4",stopColor:"#f8f9f7"}),n.jsx("stop",{offset:"0.62",stopColor:"#a2a8ab"}),n.jsx("stop",{offset:"0.83",stopColor:"#e4e7e5"}),n.jsx("stop",{offset:"1",stopColor:"#666e72"})]})]}),!e&&n.jsxs(n.Fragment,{children:[n.jsx("rect",{x:"-2.3",y:"0.7",width:"3.3",height:r-1.4,rx:"0.85",fill:"url(#"+c+"-spine)",stroke:"#8b9296",strokeWidth:"0.15"}),n.jsx("path",{d:"M-.6 2V"+(r-2),stroke:"#f5f6f4",strokeWidth:"0.22"})]}),n.jsx("path",{d:z(0,0,o,r,i,s),fill:"url(#"+c+"-silver)",stroke:"#696f72",strokeWidth:"0.24"}),n.jsx("path",{d:z(.48,.48,o-.96,r-.96,Math.max(.5,i-.48),s-.48),fill:"none",stroke:"#ffffff",strokeOpacity:"0.85",strokeWidth:"0.2"}),n.jsx("path",{d:z(1.12,1.12,o-2.24,r-2.24,e?7.15:.65,7.15),fill:"#090b0d",stroke:"#34393c",strokeWidth:"0.2"}),[o-16,e?19:16].map(f=>n.jsx(d.Fragment,{children:n.jsx("path",{d:"M"+f+",0.17v0.82M"+f+","+(r-1)+"v0.82",stroke:"#b1b2ac",strokeWidth:"1.1"})},f)),e&&[0,r-.6].map(f=>n.jsx("rect",{x:o/2-2.2,y:f,width:"4.4",height:"0.6",rx:"0.18",fill:"url(#"+c+"-spine)",stroke:"#697074",strokeWidth:"0.14"},f)),n.jsx("path",{d:"M"+(o-.1)+",20h-.9m.9,"+(r-40)+"h-.9",stroke:"#b1b2ac",strokeWidth:"1.05"})]})}function re(e,o,r,c){const i=E.DUO_DIMENSIONS.width/(e?1:2),s=E.DUO_DIMENSIONS.height,f=e?157.5:77.1,x=e?110.8:112.2,l=(o+(e?3:0))%4,u=Math.max(0,Math.min((r-120)/(l%2?s:i),(c-120)/(l%2?i:s))),p=(h,v)=>{h=(h-i/2)*u,v=(v-s/2)*u;const w=l===1?{x:-v,y:h}:l===2?{x:-h,y:-v}:l===3?{x:v,y:-h}:{x:h,y:v};return{x:w.x+r/2,y:w.y+c/2}},S=(l%2?s:i)*u,D=(l%2?i:s)*u,k={min:{x:(r-S)/2,y:(c-D)/2},max:{x:(r+S)/2,y:(c+D)/2}},y=[{button:"volumeDown",x:i-37,y:-.32,width:9.5,height:.65,edge:"top"},{button:"volumeUp",x:i-25,y:-.32,width:9.5,height:.65,edge:"top"},{button:"side",x:i+.35,y:s/2-21,width:.7,height:13,edge:"right"}],g=["top","right","bottom","left"],b=y.map(h=>{const v=g[(g.indexOf(h.edge)+l)%4],w=p(h.x,h.y);return v==="top"&&(w.y=k.min.y-28),v==="bottom"&&(w.y=k.max.y+28),v==="left"&&(w.x=k.min.x-28),v==="right"&&(w.x=k.max.x+28),{button:h.button,edge:v,...w,targetX:w.x,targetY:w.y}}),m=b.filter(h=>h.button!=="side"),j=l%2?"y":"x";m.sort((h,v)=>h[j]-v[j]);const P=l%2?"targetY":"targetX";if(m[1][j]-m[0][j]<44){const h=(m[0][j]+m[1][j])/2;m[0][P]=h-22,m[1][P]=h+22}return{bodyWidth:i,bodyHeight:s,screenWidth:f,screenHeight:x,scale:u,turns:l,buttons:y,guides:b,rect:k,iconSize:Math.min(A(k),12*u)}}function A(e){return Math.max(12,Math.min(24,Math.max(e.max.x-e.min.x,e.max.y-e.min.y)/24))}function Z(e,o,r){return[["top",r.min.y-o,e,r.min.x,r.max.x],["bottom",o-r.max.y,e,r.min.x,r.max.x],["left",r.min.x-e,o,r.min.y,r.max.y],["right",e-r.max.x,o,r.min.y,r.max.y]].filter(([,i,s,f,x])=>i>=-7&&i<=52&&s>=f-12&&s<=x+12).sort((i,s)=>Math.abs(i[1])-Math.abs(s[1]))[0]?.[0]}function B(e){if(!e||e.readyState<2||!e.videoWidth||!e.videoHeight)return;const o=Math.min(1,1024/Math.max(e.videoWidth,e.videoHeight)),r=document.createElement("canvas");try{const c=r.getContext("2d");return c?(r.width=Math.round(e.videoWidth*o),r.height=Math.round(e.videoHeight*o),c.drawImage(e,0,0,r.width,r.height),r):void 0}catch{return}}function ne(e,o){let r=!1,c;const i=u=>{r||(l(),o(u))},s=()=>{if(r)return;const u=B(e);u&&i(u)},f=()=>{c=void 0,s(),r||(c=e?.requestVideoFrameCallback?.(f))},x=setTimeout(()=>i(void 0),2500);c=e?.requestVideoFrameCallback?.(f),e?.addEventListener("loadeddata",s),!e?.requestVideoFrameCallback&&e&&e.readyState>=2&&s();function l(){r=!0,clearTimeout(x),c!==void 0&&e?.cancelVideoFrameCallback(c),e?.removeEventListener("loadeddata",s)}return l}function oe(e,o,r,c,i=!0){const s=d.useRef(void 0),f=d.useRef(c),x=d.useRef({inner:o,frame:r});x.current={inner:o,frame:r};const[l,u]=d.useState(),p=d.useRef(void 0),S=d.useRef(void 0),D=d.useCallback(()=>{clearTimeout(S.current),p.current=void 0,u(void 0)},[]),k=y=>{if(!i||y===o){D();return}if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches||p.current)return;const g=B(e.current);if(!g)return;const b=x.current;p.current={from:b,to:b,before:g,ready:!1},u(p.current),S.current=setTimeout(D,5e3)};return d.useEffect(()=>()=>clearTimeout(S.current),[]),d.useLayoutEffect(()=>{const y=s.current,g={inner:o,frame:r};s.current=g;const b=f.current!==c;if(f.current=c,!y)return;const m=Math.abs(y.frame.rect.min.x+y.frame.rect.max.x-r.rect.min.x-r.rect.max.x)>.5||Math.abs(y.frame.rect.min.y+y.frame.rect.max.y-r.rect.min.y-r.rect.max.y)>.5;if(!i||m||b){D();return}if(y.inner===o||(u(void 0),!y.frame.scale||!r.scale)||window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const j=p.current?.before??B(e.current),P=p.current?.from??y;clearTimeout(S.current),p.current=void 0,j&&u({from:P,to:g,before:j,ready:!1})},[o,r.scale,r.turns,r.rect.min.x,r.rect.min.y,c,i]),d.useEffect(()=>{if(!l||l.from.inner===o)return;const y=ne(e.current,m=>{m?u(j=>j&&{...j,to:x.current,after:m,ready:!0}):D()}),g=window.matchMedia?.("(prefers-reduced-motion: reduce)"),b=()=>{g?.matches&&u(void 0)};return g?.addEventListener("change",b),()=>{y(),g?.removeEventListener("change",b)}},[l?.from,o]),{motion:l,finish:D,prepare:k}}function se({pose:e,image:o,scale:r}){const{bodyWidth:c,bodyHeight:i,screenWidth:s,screenHeight:f}=e.frame,x=s*r,l=f*r;return n.jsxs("div",{className:"rc-duo-fold-still",style:{width:c*r,height:i*r},children:[n.jsx(G,{inner:e.inner,width:c,height:i}),n.jsx("div",{className:"rc-duo-flat-screen",style:{width:x,height:l,left:(c-s)*r/2,top:(i-f)*r/2,borderRadius:e.inner?5.3*r:[.8,6.6,6.6,.8].map(u=>u*r+"px").join(" ")},children:o&&n.jsx("canvas",{ref:u=>{u&&(u.width=o.width,u.height=o.height,u.getContext("2d")?.drawImage(o,0,0))},style:{width:e.inner?l:x,height:e.inner?x:l,transform:`translate(-50%, -50%) rotate(${e.inner?90:0}deg)`}})})]})}function ie({motion:e,onFinish:o}){const r=d.useRef(null),[c,i]=d.useState(!1);return d.useEffect(()=>{if(i(!1),!e.ready)return;let s=!1,f;return Promise.resolve().then(()=>require("./duo-fold-renderer-DdltAnF7.js")).then(({renderFold:x})=>{s||!r.current||(f=x(r.current,e,o),i(!0))}).catch(()=>{s||o()}),()=>{s=!0,f?.()}},[e.ready,e.from,o]),n.jsxs(n.Fragment,{children:[!c&&n.jsx("div",{className:"rc-duo-fold-hold","aria-hidden":"true",style:{width:e.from.frame.bodyWidth*e.from.frame.scale,height:e.from.frame.bodyHeight*e.from.frame.scale,transform:`translate(-50%, -50%) rotate(${e.from.frame.turns*90}deg)`},children:n.jsx(se,{pose:e.from,image:e.before,scale:e.from.frame.scale})}),n.jsx("canvas",{ref:r,className:"rc-duo-fold-canvas","aria-hidden":"true",style:{visibility:c?"visible":"hidden"}})]})}const ae=d.lazy(()=>Promise.resolve().then(()=>require("./duo-frame-D9832t6H.js")).then(e=>e.duoFrame));function ce(e){const[o,r]=d.useState("2d");return n.jsxs("div",{className:"rc-duo-view",children:[e.showFrame!==!1&&o==="3d"?n.jsx(d.Suspense,{fallback:n.jsx(K,{...e}),children:n.jsx(ae,{...e})}):n.jsx(K,{...e}),e.showFrame!==!1&&n.jsxs("div",{className:"rc-duo-mode",role:"group","aria-label":"Device rendering",children:[n.jsx("button",{type:"button","aria-pressed":o==="2d",onClick:()=>r("2d"),children:"2D"}),n.jsx("button",{type:"button","aria-pressed":o==="3d",onClick:()=>r("3d"),children:"3D"})]})]})}function K(e){const o=e.showFrame!==!1,r=d.useRef(null),c=d.useRef(null),i=d.useRef(e);i.current=e;const[s,f]=d.useState({width:0,height:0}),[x,l]=d.useState(),[u,p]=d.useState(),[S,D]=d.useState(),[k,y]=d.useState(),g=d.useRef(void 0),b=d.useRef(null),m=e.state.displays.find(t=>t.id===(e.state.angleDegrees<90?"outer":"inner")),j=m?.id==="inner"?e.inner:e.outer,P=m?.orientation===2?2:m?.orientation===3?1:m?.orientation===4?3:0,h=m?.id==="inner",v={portrait:0,pud:2,"landscape-left":3,"landscape-right":1}[e.state.orientation],w=o?(v+(h?1:0))%4:P,M=re(h,w,s.width,s.height),H=o?M.screenWidth:(h?m?.height:m?.width)??1,W=o?M.screenHeight:(h?m?.width:m?.height)??1,F=o?M.bodyWidth:H,R=o?M.bodyHeight:W,C=o?M.scale:Math.max(0,Math.min(s.width/(M.turns%2?R:F),s.height/(M.turns%2?F:R))),U=H*C,L=W*C;d.useEffect(()=>{const t=new ResizeObserver(([a])=>{a&&f({width:a.contentRect.width,height:a.contentRect.height})});return r.current&&t.observe(r.current),()=>t.disconnect()},[]),d.useEffect(()=>{const t=c.current;if(!t||!j)return;const a=()=>{t.srcObject!==j.srcObject&&(t.srcObject=j.srcObject),t.play().catch(()=>{}),e.outer?.pause(),e.inner?.pause()};return a(),j.addEventListener("loadedmetadata",a),()=>{j.removeEventListener("loadedmetadata",a),t.pause(),t.srcObject=null;for(const O of[e.outer,e.inner])O?.play().catch(()=>{})}},[j,e.outer,e.inner]);const{motion:N,finish:V,prepare:J}=oe(c,h,M,e.state.orientation,o),{angle:Q,changeAngle:ee,interacting:te}=X(e.state.angleDegrees,async t=>{J(t>=90);try{await e.setAngle(t)}catch(a){throw V(),a}},l),I=()=>{if(!g.current)return;const{screenId:t,x:a,y:O}=g.current;i.current.touch(1,t,a,O),g.current=void 0};d.useEffect(()=>{b.current=new E.DuoButtonSender((a,O)=>i.current.button(a,O),a=>l(String(a)));const t=()=>{I(),b.current?.release(),y(void 0)};return window.addEventListener("blur",t),()=>{t(),window.removeEventListener("blur",t)}},[]),d.useEffect(()=>{I()},[m?.screenId,w]);const T=()=>{b.current?.release(),y(void 0)},_=t=>({onPointerDown:a=>{N||a.button!==0||(a.currentTarget.setPointerCapture(a.pointerId),b.current?.press(t),y(t))},onPointerUp:T,onPointerCancel:T,onLostPointerCapture:T,onBlur:T,onPointerEnter:()=>D(t),onPointerLeave:()=>D(void 0),onFocus:()=>p(M.guides.find(a=>a.button===t)?.edge),onKeyDown:a=>{N||(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),a.repeat||(b.current?.press(t),y(t)))},onKeyUp:a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),T())}}),q=t=>{const a=t.currentTarget.getBoundingClientRect();return E.flatDisplayTouch((t.clientX-a.left)/a.width,(t.clientY-a.top)/a.height,w)};return n.jsxs("div",{className:o?"rc-duo":"rc-duo rc-duo-frameless",children:[n.jsxs("div",{ref:r,className:"rc-duo-flat-stage","data-folding":!!N,"aria-busy":!!N,onPointerMove:t=>{if(!o)return;const a=t.currentTarget.getBoundingClientRect();p(Z(t.clientX-a.left,t.clientY-a.top,M.rect))},onPointerLeave:()=>{p(void 0),D(void 0)},children:[n.jsxs("div",{className:"rc-duo-flat-device","data-display":h?"inner":"outer",style:{width:F*C,height:R*C,transform:"translate(-50%, -50%) rotate("+M.turns*90+"deg)"},children:[o&&n.jsx(G,{inner:h,width:F,height:R}),n.jsx("div",{className:"rc-duo-flat-screen",role:"application","aria-label":"iPhone Duo 2D simulator",tabIndex:0,style:{width:U,height:L,left:(F-H)/2*C,top:(R-W)/2*C,borderRadius:o?h?5.3*C:[.8,6.6,6.6,.8].map(t=>t*C+"px").join(" "):0},onKeyDown:N?void 0:e.onKeyDown,onKeyUp:e.onKeyUp,onPointerDown:t=>{if(N||g.current||t.button!==0||!m)return;t.currentTarget.focus({preventScroll:!0}),t.currentTarget.setPointerCapture(t.pointerId);const a=q(t);g.current={pointer:t.pointerId,screenId:m.screenId,...a},e.touch(0,m.screenId,a.x,a.y)},onPointerMove:t=>{if(g.current?.pointer!==t.pointerId)return;const a=q(t);Object.assign(g.current,a),e.touch(2,g.current.screenId,a.x,a.y)},onPointerUp:t=>{g.current?.pointer===t.pointerId&&I()},onPointerCancel:I,onLostPointerCapture:I,children:n.jsx("video",{ref:c,autoPlay:!0,muted:!0,playsInline:!0,style:{width:h?L:U,height:h?U:L,transform:"translate(-50%, -50%) rotate("+(h?90:0)+"deg)"}})}),o&&M.buttons.map(t=>n.jsx("button",{type:"button",className:"rc-duo-physical","data-duo-button":t.button,"data-edge":t.edge,"data-highlighted":S===t.button,"data-pressed":k===t.button,"aria-label":E.DUO_BUTTONS[t.button]+" physical button",title:E.DUO_BUTTONS[t.button],style:{left:t.x*C,top:t.y*C,width:t.edge==="top"?Math.max(28,t.width*C):28,height:t.edge==="top"?28:Math.max(28,t.height*C)},..._(t.button),children:n.jsx("span",{style:{width:Math.max(2,t.width*C),height:Math.max(2,t.height*C)}})},t.button))]}),o&&M.guides.map(t=>n.jsx("button",{type:"button",className:"rc-duo-hardware","data-duo-button":t.button,"data-visible":u===t.edge,"data-pressed":k===t.button,"aria-label":E.DUO_BUTTONS[t.button],title:E.DUO_BUTTONS[t.button],style:{left:t.targetX,top:t.targetY,"--duo-hardware-icon-size":`${M.iconSize}px`,"--duo-hardware-icon-x":`${t.x-t.targetX}px`,"--duo-hardware-icon-y":`${t.y-t.targetY}px`},..._(t.button),children:n.jsx($,{button:t.button})},t.button)),N&&n.jsx(ie,{motion:N,onFinish:V})]}),o&&n.jsx(Y,{angle:Q,changeAngle:ee,interacting:te,rotate:()=>{e.setOrientation(e.state.orientation==="portrait"?"landscape-left":"portrait").catch(t=>l(String(t)))},children:n.jsx("span",{className:"rc-duo-view-label",children:"Front view"})}),x&&n.jsx("div",{role:"alert",className:"rc-duo-error",children:x})]})}const de=Object.freeze(Object.defineProperty({__proto__:null,default:ce},Symbol.toStringTag,{value:"Module"}));exports.DuoControls=Y;exports.DuoHardwareIcon=$;exports.duoView=de;exports.flatHoverEdge=Z;exports.hardwareIconSize=A;exports.useDuoHinge=X;

package/dist/{duo-view-DSZO0-zg.mjs → duo-view-tndcvbIi.mjs}

@@ -1,21 +1,21 @@
 import { jsx as o, jsxs as v, Fragment as R } from "react/jsx-runtime";
-import nt, { useId as Z, useState as H, useRef as M, useEffect as W, useCallback as ot, useLayoutEffect as it, Suspense as at, lazy as st } from "react";
-import { H as ct, D as G, h as dt, i as z, j as ut } from "./remote-control-BFxEfAdr.mjs";
+import nt, { useId as Z, useState as H, useRef as M, useEffect as W, useCallback as ot, useLayoutEffect as at, Suspense as it, lazy as st } from "react";
+import { H as ct, D as G, v as dt, w as z, x as ut } from "./core-BhHpU_lr.mjs";
 function lt(t, n, r) {
-  const [c, a] = H(t), i = M({ nativeAngle: t, send: n, failed: r });
-  i.current = { nativeAngle: t, send: n, failed: r };
+  const [c, i] = H(t), a = M({ nativeAngle: t, send: n, failed: r });
+  a.current = { nativeAngle: t, send: n, failed: r };
   const l = M(void 0), m = M(!1), u = M(null);
   return W(() => (u.current = new ct(
     async (p) => {
-      await i.current.send(p), l.current === p && (l.current = void 0);
+      await a.current.send(p), l.current === p && (l.current = void 0);
     },
     (p) => {
-      l.current = void 0, i.current.failed(String(p)), a(i.current.nativeAngle);
+      l.current = void 0, a.current.failed(String(p)), i(a.current.nativeAngle);
     }
   ), () => u.current?.stop()), []), W(() => {
-    !m.current && l.current === void 0 && a(t);
+    !m.current && l.current === void 0 && i(t);
   }, [t]), { angle: c, changeAngle: (p) => {
-    i.current.failed(void 0), l.current = p, a(p), u.current?.set(p);
+    a.current.failed(void 0), l.current = p, i(p), u.current?.set(p);
   }, interacting: m };
 }
 function ht({
@@ -23,15 +23,15 @@ function ht({
   changeAngle: n,
   interacting: r,
   rotate: c,
-  onFold: a,
-  foldTarget: i,
+  onFold: i,
+  foldTarget: a,
   onHingeDrag: l,
   children: m
 }) {
   const u = Z();
   return /* @__PURE__ */ v("div", { className: "rc-duo-controls", onPointerDown: (d) => d.stopPropagation(), children: [
     /* @__PURE__ */ v("div", { className: "rc-duo-hinge", children: [
-      /* @__PURE__ */ o("button", { className: "rc-duo-fold", onClick: a ?? (() => n(t < 90 ? 180 : 0)), children: (i ?? t) < 90 ? "Unfold" : "Fold" }),
+      /* @__PURE__ */ o("button", { className: "rc-duo-fold", onClick: i ?? (() => n(t < 90 ? 180 : 0)), children: (a ?? t) < 90 ? "Unfold" : "Fold" }),
       /* @__PURE__ */ o("label", { htmlFor: u, children: "Hinge" }),
       /* @__PURE__ */ o(
         "input",
@@ -104,11 +104,11 @@ function ft({ button: t }) {
     }
   );
 }
-function X(t, n, r, c, a, i) {
-  return "M" + (t + a) + "," + n + "H" + (t + r - i) + "a" + i + "," + i + " 0 0 1 " + i + "," + i + "V" + (n + c - i) + "a" + i + "," + i + " 0 0 1 " + -i + "," + i + "H" + (t + a) + "a" + a + "," + a + " 0 0 1 " + -a + "," + -a + "V" + (n + a) + "a" + a + "," + a + " 0 0 1 " + a + "," + -a + "Z";
+function X(t, n, r, c, i, a) {
+  return "M" + (t + i) + "," + n + "H" + (t + r - a) + "a" + a + "," + a + " 0 0 1 " + a + "," + a + "V" + (n + c - a) + "a" + a + "," + a + " 0 0 1 " + -a + "," + a + "H" + (t + i) + "a" + i + "," + i + " 0 0 1 " + -i + "," + -i + "V" + (n + i) + "a" + i + "," + i + " 0 0 1 " + i + "," + -i + "Z";
 }
 function J({ inner: t, width: n, height: r }) {
-  const c = Z().replace(/:/g, ""), a = t ? 8.4 : 1.25, i = 8.4;
+  const c = Z().replace(/:/g, ""), i = t ? 8.4 : 1.25, a = 8.4;
   return /* @__PURE__ */ v("svg", { className: "rc-duo-flat-frame", viewBox: "0 0 " + n + " " + r, "aria-hidden": "true", children: [
     /* @__PURE__ */ v("defs", { children: [
       /* @__PURE__ */ v("linearGradient", { id: c + "-silver", x1: "0", y1: "0", x2: "1", y2: "1", children: [
@@ -150,7 +150,7 @@ function J({ inner: t, width: n, height: r }) {
     /* @__PURE__ */ o(
       "path",
       {
-        d: X(0, 0, n, r, a, i),
+        d: X(0, 0, n, r, i, a),
         fill: "url(#" + c + "-silver)",
         stroke: "#696f72",
         strokeWidth: "0.24"
@@ -159,7 +159,7 @@ function J({ inner: t, width: n, height: r }) {
     /* @__PURE__ */ o(
       "path",
       {
-        d: X(0.48, 0.48, n - 0.96, r - 0.96, Math.max(0.5, a - 0.48), i - 0.48),
+        d: X(0.48, 0.48, n - 0.96, r - 0.96, Math.max(0.5, i - 0.48), a - 0.48),
         fill: "none",
         stroke: "#ffffff",
         strokeOpacity: "0.85",
@@ -208,23 +208,23 @@ function J({ inner: t, width: n, height: r }) {
   ] });
 }
 function mt(t, n, r, c) {
-  const a = G.width / (t ? 1 : 2), i = G.height, l = t ? 157.5 : 77.1, m = t ? 110.8 : 112.2, u = (n + (t ? 3 : 0)) % 4, d = Math.max(
+  const i = G.width / (t ? 1 : 2), a = G.height, l = t ? 157.5 : 77.1, m = t ? 110.8 : 112.2, u = (n + (t ? 3 : 0)) % 4, d = Math.max(
     0,
     Math.min(
-      (r - 120) / (u % 2 ? i : a),
-      (c - 120) / (u % 2 ? a : i)
+      (r - 120) / (u % 2 ? a : i),
+      (c - 120) / (u % 2 ? i : a)
     )
   ), p = (h, w) => {
-    h = (h - a / 2) * d, w = (w - i / 2) * d;
+    h = (h - i / 2) * d, w = (w - a / 2) * d;
     const C = u === 1 ? { x: -w, y: h } : u === 2 ? { x: -h, y: -w } : u === 3 ? { x: w, y: -h } : { x: h, y: w };
     return { x: C.x + r / 2, y: C.y + c / 2 };
-  }, F = (u % 2 ? i : a) * d, P = (u % 2 ? a : i) * d, N = {
+  }, F = (u % 2 ? a : i) * d, P = (u % 2 ? i : a) * d, N = {
     min: { x: (r - F) / 2, y: (c - P) / 2 },
     max: { x: (r + F) / 2, y: (c + P) / 2 }
   }, y = [
-    { button: "volumeDown", x: a - 37, y: -0.32, width: 9.5, height: 0.65, edge: "top" },
-    { button: "volumeUp", x: a - 25, y: -0.32, width: 9.5, height: 0.65, edge: "top" },
-    { button: "side", x: a + 0.35, y: i / 2 - 21, width: 0.7, height: 13, edge: "right" }
+    { button: "volumeDown", x: i - 37, y: -0.32, width: 9.5, height: 0.65, edge: "top" },
+    { button: "volumeUp", x: i - 25, y: -0.32, width: 9.5, height: 0.65, edge: "top" },
+    { button: "side", x: i + 0.35, y: a / 2 - 21, width: 0.7, height: 13, edge: "right" }
   ], g = ["top", "right", "bottom", "left"], x = y.map((h) => {
     const w = g[(g.indexOf(h.edge) + u) % 4], C = p(h.x, h.y);
     return w === "top" && (C.y = N.min.y - 28), w === "bottom" && (C.y = N.max.y + 28), w === "left" && (C.x = N.min.x - 28), w === "right" && (C.x = N.max.x + 28), { button: h.button, edge: w, ...C, targetX: C.x, targetY: C.y };
@@ -236,8 +236,8 @@ function mt(t, n, r, c) {
     f[0][S] = h - 22, f[1][S] = h + 22;
   }
   return {
-    bodyWidth: a,
-    bodyHeight: i,
+    bodyWidth: i,
+    bodyHeight: a,
     screenWidth: l,
     screenHeight: m,
     scale: d,
@@ -258,8 +258,8 @@ function gt(t, n, r) {
     ["left", r.min.x - t, n, r.min.y, r.max.y],
     ["right", t - r.max.x, n, r.min.y, r.max.y]
   ].filter(
-    ([, a, i, l, m]) => a >= -7 && a <= 52 && i >= l - 12 && i <= m + 12
-  ).sort((a, i) => Math.abs(a[1]) - Math.abs(i[1]))[0]?.[0];
+    ([, i, a, l, m]) => i >= -7 && i <= 52 && a >= l - 12 && a <= m + 12
+  ).sort((i, a) => Math.abs(i[1]) - Math.abs(a[1]))[0]?.[0];
 }
 function Y(t) {
   if (!t || t.readyState < 2 || !t.videoWidth || !t.videoHeight) return;
@@ -273,28 +273,28 @@ function Y(t) {
 }
 function yt(t, n) {
   let r = !1, c;
-  const a = (d) => {
+  const i = (d) => {
     r || (u(), n(d));
-  }, i = () => {
+  }, a = () => {
     if (r) return;
     const d = Y(t);
-    d && a(d);
+    d && i(d);
   }, l = () => {
-    c = void 0, i(), r || (c = t?.requestVideoFrameCallback?.(l));
-  }, m = setTimeout(() => a(void 0), 2500);
-  c = t?.requestVideoFrameCallback?.(l), t?.addEventListener("loadeddata", i), !t?.requestVideoFrameCallback && t && t.readyState >= 2 && i();
+    c = void 0, a(), r || (c = t?.requestVideoFrameCallback?.(l));
+  }, m = setTimeout(() => i(void 0), 2500);
+  c = t?.requestVideoFrameCallback?.(l), t?.addEventListener("loadeddata", a), !t?.requestVideoFrameCallback && t && t.readyState >= 2 && a();
   function u() {
-    r = !0, clearTimeout(m), c !== void 0 && t?.cancelVideoFrameCallback(c), t?.removeEventListener("loadeddata", i);
+    r = !0, clearTimeout(m), c !== void 0 && t?.cancelVideoFrameCallback(c), t?.removeEventListener("loadeddata", a);
   }
   return u;
 }
-function bt(t, n, r, c, a = !0) {
-  const i = M(void 0), l = M(c), m = M({ inner: n, frame: r });
+function bt(t, n, r, c, i = !0) {
+  const a = M(void 0), l = M(c), m = M({ inner: n, frame: r });
   m.current = { inner: n, frame: r };
   const [u, d] = H(), p = M(void 0), F = M(void 0), P = ot(() => {
     clearTimeout(F.current), p.current = void 0, d(void 0);
   }, []), N = (y) => {
-    if (!a || y === n) {
+    if (!i || y === n) {
       P();
       return;
     }
@@ -304,20 +304,20 @@ function bt(t, n, r, c, a = !0) {
     const x = m.current;
     p.current = { from: x, to: x, before: g, ready: !1 }, d(p.current), F.current = setTimeout(P, 5e3);
   };
-  return W(() => () => clearTimeout(F.current), []), it(() => {
-    const y = i.current, g = { inner: n, frame: r };
-    i.current = g;
+  return W(() => () => clearTimeout(F.current), []), at(() => {
+    const y = a.current, g = { inner: n, frame: r };
+    a.current = g;
     const x = l.current !== c;
     if (l.current = c, !y) return;
     const f = Math.abs(y.frame.rect.min.x + y.frame.rect.max.x - r.rect.min.x - r.rect.max.x) > 0.5 || Math.abs(y.frame.rect.min.y + y.frame.rect.max.y - r.rect.min.y - r.rect.max.y) > 0.5;
-    if (!a || f || x) {
+    if (!i || f || x) {
       P();
       return;
     }
     if (y.inner === n || (d(void 0), !y.frame.scale || !r.scale) || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
     const b = p.current?.before ?? Y(t.current), S = p.current?.from ?? y;
     clearTimeout(F.current), p.current = void 0, b && d({ from: S, to: g, before: b, ready: !1 });
-  }, [n, r.scale, r.turns, r.rect.min.x, r.rect.min.y, c, a]), W(() => {
+  }, [n, r.scale, r.turns, r.rect.min.x, r.rect.min.y, c, i]), W(() => {
     if (!u || u.from.inner === n) return;
     const y = yt(t.current, (f) => {
       f ? d((b) => b && { ...b, to: m.current, after: f, ready: !0 }) : P();
@@ -330,9 +330,9 @@ function bt(t, n, r, c, a = !0) {
   }, [u?.from, n]), { motion: u, finish: P, prepare: N };
 }
 function vt({ pose: t, image: n, scale: r }) {
-  const { bodyWidth: c, bodyHeight: a, screenWidth: i, screenHeight: l } = t.frame, m = i * r, u = l * r;
-  return /* @__PURE__ */ v("div", { className: "rc-duo-fold-still", style: { width: c * r, height: a * r }, children: [
-    /* @__PURE__ */ o(J, { inner: t.inner, width: c, height: a }),
+  const { bodyWidth: c, bodyHeight: i, screenWidth: a, screenHeight: l } = t.frame, m = a * r, u = l * r;
+  return /* @__PURE__ */ v("div", { className: "rc-duo-fold-still", style: { width: c * r, height: i * r }, children: [
+    /* @__PURE__ */ o(J, { inner: t.inner, width: c, height: i }),
     /* @__PURE__ */ o(
       "div",
       {
@@ -340,8 +340,8 @@ function vt({ pose: t, image: n, scale: r }) {
         style: {
           width: m,
           height: u,
-          left: (c - i) * r / 2,
-          top: (a - l) * r / 2,
+          left: (c - a) * r / 2,
+          top: (i - l) * r / 2,
           borderRadius: t.inner ? 5.3 * r : [0.8, 6.6, 6.6, 0.8].map((d) => d * r + "px").join(" ")
         },
         children: n && /* @__PURE__ */ o(
@@ -362,16 +362,16 @@ function vt({ pose: t, image: n, scale: r }) {
   ] });
 }
 function xt({ motion: t, onFinish: n }) {
-  const r = M(null), [c, a] = H(!1);
+  const r = M(null), [c, i] = H(!1);
   return W(() => {
-    if (a(!1), !t.ready) return;
-    let i = !1, l;
+    if (i(!1), !t.ready) return;
+    let a = !1, l;
     return import("./duo-fold-renderer-BXejNHcY.mjs").then(({ renderFold: m }) => {
-      i || !r.current || (l = m(r.current, t, n), a(!0));
+      a || !r.current || (l = m(r.current, t, n), i(!0));
     }).catch(() => {
-      i || n();
+      a || n();
     }), () => {
-      i = !0, l?.();
+      a = !0, l?.();
     };
   }, [t.ready, t.from, n]), /* @__PURE__ */ v(R, { children: [
     !c && /* @__PURE__ */ o(
@@ -398,11 +398,11 @@ function xt({ motion: t, onFinish: n }) {
     )
   ] });
 }
-const wt = st(() => import("./duo-frame-B6jf62Rq.mjs").then((t) => t.ac));
+const wt = st(() => import("./duo-frame-CMiDITQA.mjs").then((t) => t.ac));
 function Mt(t) {
   const [n, r] = H("2d");
   return /* @__PURE__ */ v("div", { className: "rc-duo-view", children: [
-    t.showFrame !== !1 && n === "3d" ? /* @__PURE__ */ o(at, { fallback: /* @__PURE__ */ o(A, { ...t }), children: /* @__PURE__ */ o(wt, { ...t }) }) : /* @__PURE__ */ o(A, { ...t }),
+    t.showFrame !== !1 && n === "3d" ? /* @__PURE__ */ o(it, { fallback: /* @__PURE__ */ o(A, { ...t }), children: /* @__PURE__ */ o(wt, { ...t }) }) : /* @__PURE__ */ o(A, { ...t }),
     t.showFrame !== !1 && /* @__PURE__ */ v("div", { className: "rc-duo-mode", role: "group", "aria-label": "Device rendering", children: [
       /* @__PURE__ */ o("button", { type: "button", "aria-pressed": n === "2d", onClick: () => r("2d"), children: "2D" }),
       /* @__PURE__ */ o("button", { type: "button", "aria-pressed": n === "3d", onClick: () => r("3d"), children: "3D" })
@@ -410,15 +410,15 @@ function Mt(t) {
   ] });
 }
 function A(t) {
-  const n = t.showFrame !== !1, r = M(null), c = M(null), a = M(t);
-  a.current = t;
-  const [i, l] = H({ width: 0, height: 0 }), [m, u] = H(), [d, p] = H(), [F, P] = H(), [N, y] = H(), g = M(void 0), x = M(null), f = t.state.displays.find(
+  const n = t.showFrame !== !1, r = M(null), c = M(null), i = M(t);
+  i.current = t;
+  const [a, l] = H({ width: 0, height: 0 }), [m, u] = H(), [d, p] = H(), [F, P] = H(), [N, y] = H(), g = M(void 0), x = M(null), f = t.state.displays.find(
     (e) => e.id === (t.state.angleDegrees < 90 ? "outer" : "inner")
-  ), b = f?.id === "inner" ? t.inner : t.outer, S = f?.orientation === 2 ? 2 : f?.orientation === 3 ? 1 : f?.orientation === 4 ? 3 : 0, h = f?.id === "inner", w = { portrait: 0, pud: 2, "landscape-left": 3, "landscape-right": 1 }[t.state.orientation], C = n ? (w + (h ? 1 : 0)) % 4 : S, k = mt(h, C, i.width, i.height), U = n ? k.screenWidth : (h ? f?.height : f?.width) ?? 1, V = n ? k.screenHeight : (h ? f?.width : f?.height) ?? 1, T = n ? k.bodyWidth : U, E = n ? k.bodyHeight : V, D = n ? k.scale : Math.max(
+  ), b = f?.id === "inner" ? t.inner : t.outer, S = f?.orientation === 2 ? 2 : f?.orientation === 3 ? 1 : f?.orientation === 4 ? 3 : 0, h = f?.id === "inner", w = { portrait: 0, pud: 2, "landscape-left": 3, "landscape-right": 1 }[t.state.orientation], C = n ? (w + (h ? 1 : 0)) % 4 : S, k = mt(h, C, a.width, a.height), U = n ? k.screenWidth : (h ? f?.height : f?.width) ?? 1, V = n ? k.screenHeight : (h ? f?.width : f?.height) ?? 1, T = n ? k.bodyWidth : U, E = n ? k.bodyHeight : V, D = n ? k.scale : Math.max(
     0,
     Math.min(
-      i.width / (k.turns % 2 ? E : T),
-      i.height / (k.turns % 2 ? T : E)
+      a.width / (k.turns % 2 ? E : T),
+      a.height / (k.turns % 2 ? T : E)
     )
   ), B = U * D, K = V * D;
   W(() => {
@@ -457,11 +457,11 @@ function A(t) {
   ), O = () => {
     if (!g.current) return;
     const { screenId: e, x: s, y: j } = g.current;
-    a.current.touch(1, e, s, j), g.current = void 0;
+    i.current.touch(1, e, s, j), g.current = void 0;
   };
   W(() => {
     x.current = new dt(
-      (s, j) => a.current.button(s, j),
+      (s, j) => i.current.button(s, j),
       (s) => u(String(s))
     );
     const e = () => {