@limrun/ui 0.17.0-rc.1 → 0.17.0-rc.2

package/dist/duo-view-BAh-w2Kz.js

@@ -0,0 +1 @@
+"use strict";const n=require("react/jsx-runtime"),s=require("react"),j=require("./remote-control-B2jZpf3c.js");function K(e,o,r){const[c,d]=s.useState(e),u=s.useRef({nativeAngle:e,send:o,failed:r});u.current={nativeAngle:e,send:o,failed:r};const l=s.useRef(void 0),m=s.useRef(!1),h=s.useRef(null);return s.useEffect(()=>(h.current=new j.HingeSender(async f=>{await u.current.send(f),l.current===f&&(l.current=void 0)},f=>{l.current=void 0,u.current.failed(String(f)),d(u.current.nativeAngle)}),()=>h.current?.stop()),[]),s.useEffect(()=>{!m.current&&l.current===void 0&&d(e)},[e]),{angle:c,changeAngle:f=>{u.current.failed(void 0),l.current=f,d(f),h.current?.set(f)},interacting:m}}function $({angle:e,changeAngle:o,interacting:r,rotate:c,onFold:d,foldTarget:u,onHingeDrag:l,children:m}){const h=s.useId();return n.jsxs("div",{className:"rc-duo-controls",onPointerDown:a=>a.stopPropagation(),children:[n.jsxs("div",{className:"rc-duo-hinge",children:[n.jsx("button",{className:"rc-duo-fold",onClick:d??(()=>o(e<90?180:0)),children:(u??e)<90?"Unfold":"Fold"}),n.jsx("label",{htmlFor:h,children:"Hinge"}),n.jsx("input",{id:h,type:"range",min:0,max:180,step:1,value:e,onPointerDown:a=>{l?.(),r.current=!0,a.currentTarget.setPointerCapture(a.pointerId)},onPointerUp:()=>{r.current=!1},onPointerCancel:()=>{r.current=!1},onLostPointerCapture:()=>{r.current=!1},onChange:a=>o(Number(a.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"})]})})]}),m&&n.jsx("div",{className:"rc-duo-views","aria-label":"Device view",children:m})]})}function X({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 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 Q(e,o){let r=!1,c;const d=a=>{r||(h(),o(a))},u=()=>{if(r)return;const a=B(e);a&&d(a)},l=()=>{c=void 0,u(),r||(c=e?.requestVideoFrameCallback?.(l))},m=setTimeout(()=>d(void 0),2500);c=e?.requestVideoFrameCallback?.(l),e?.addEventListener("loadeddata",u),!e?.requestVideoFrameCallback&&e&&e.readyState>=2&&u();function h(){r=!0,clearTimeout(m),c!==void 0&&e?.cancelVideoFrameCallback(c),e?.removeEventListener("loadeddata",u)}return h}function Z(e,o,r,c,d=!0){const u=s.useRef(void 0),l=s.useRef(c),m=s.useRef({inner:o,frame:r});m.current={inner:o,frame:r};const[h,a]=s.useState(),f=s.useRef(void 0),S=s.useRef(void 0),P=s.useCallback(()=>{clearTimeout(S.current),f.current=void 0,a(void 0)},[]),H=g=>{if(!d||g===o){P();return}if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches||f.current)return;const b=B(e.current);if(!b)return;const p=m.current;f.current={from:p,to:p,before:b,ready:!1},a(f.current),S.current=setTimeout(P,5e3)};return s.useEffect(()=>()=>clearTimeout(S.current),[]),s.useLayoutEffect(()=>{const g=u.current,b={inner:o,frame:r};u.current=b;const p=l.current!==c;if(l.current=c,!g)return;const y=Math.abs(g.frame.rect.min.x+g.frame.rect.max.x-r.rect.min.x-r.rect.max.x)>.5||Math.abs(g.frame.rect.min.y+g.frame.rect.max.y-r.rect.min.y-r.rect.max.y)>.5;if(!d||y||p){P();return}if(g.inner===o||(a(void 0),!g.frame.scale||!r.scale)||window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const D=f.current?.before??B(e.current),x=f.current?.from??g;clearTimeout(S.current),f.current=void 0,D&&(b.frame=j.flatFrameGeometry(o,(x.frame.turns+(o?1:0))%4,r.rect.min.x+r.rect.max.x,r.rect.min.y+r.rect.max.y),a({from:x,to:b,before:D,ready:!1}))},[o,r.scale,r.turns,r.rect.min.x,r.rect.min.y,c,d]),s.useEffect(()=>{if(!h||h.from.inner===o)return;const g=Q(e.current,y=>{y?a(D=>D&&{...D,after:y,ready:!0}):P()}),b=window.matchMedia?.("(prefers-reduced-motion: reduce)"),p=()=>{b?.matches&&a(void 0)};return b?.addEventListener("change",p),()=>{g(),b?.removeEventListener("change",p)}},[h?.from,o]),{motion:h,finish:P,prepare:H}}function ee({pose:e,image:o,scale:r}){const{bodyWidth:c,bodyHeight:d,screenWidth:u,screenHeight:l}=e.frame,m=u*r,h=l*r;return n.jsxs("div",{className:"rc-duo-fold-still",style:{width:c*r,height:d*r},children:[n.jsx(j.DuoFlatFrame,{inner:e.inner,width:c,height:d}),n.jsx("div",{className:"rc-duo-flat-screen",style:{width:m,height:h,left:(c-u)*r/2,top:(d-l)*r/2,borderRadius:e.inner?5.3*r:[.8,6.6,6.6,.8].map(a=>a*r+"px").join(" ")},children:o&&n.jsx("canvas",{ref:a=>{a&&(a.width=o.width,a.height=o.height,a.getContext("2d")?.drawImage(o,0,0))},style:{width:e.inner?h:m,height:e.inner?m:h,transform:`translate(-50%, -50%) rotate(${e.inner?90:0}deg)`}})})]})}function te({motion:e,onFinish:o}){const r=s.useRef(null),[c,d]=s.useState(!1);return s.useEffect(()=>{if(d(!1),!e.ready)return;let u=!1,l;return Promise.resolve().then(()=>require("./duo-fold-renderer-DdltAnF7.js")).then(({renderFold:m})=>{u||!r.current||(l=m(r.current,e,o),d(!0))}).catch(()=>{u||o()}),()=>{u=!0,l?.()}},[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(ee,{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 re=s.lazy(()=>Promise.resolve().then(()=>require("./duo-frame-iMtrvx_a.js")).then(e=>e.duoFrame));function ne(e){const[o,r]=s.useState("2d");return n.jsxs("div",{className:"rc-duo-view",children:[e.showFrame!==!1&&o==="3d"?n.jsx(s.Suspense,{fallback:n.jsx(_,{...e}),children:n.jsx(re,{...e})}):n.jsx(_,{...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 _(e){const o=e.showFrame!==!1,r=s.useRef(null),c=s.useRef(null),d=s.useRef(e);d.current=e;const[u,l]=s.useState({width:0,height:0}),[m,h]=s.useState(!1),[a,f]=s.useState(),[S,P]=s.useState(),[H,g]=s.useState(),[b,p]=s.useState(),y=s.useRef(void 0),D=s.useRef(null),x=e.state.displays.find(t=>t.id===(e.state.angleDegrees<90?"outer":"inner")),C=x?.id==="inner"?e.inner:e.outer,I=x?.orientation===2?2:x?.orientation===3?1:x?.orientation===4?3:0,M=x?.id==="inner",w=j.flatFrameGeometry(M,I,u.width,u.height),O=o?w.screenWidth:(M?x?.height:x?.width)??1,L=o?w.screenHeight:(M?x?.width:x?.height)??1,F=o?w.bodyWidth:O,E=o?w.bodyHeight:L,v=o?w.scale:Math.max(0,Math.min(u.width/(w.turns%2?E:F),u.height/(w.turns%2?F:E))),U=O*v,W=L*v;s.useEffect(()=>{const t=new ResizeObserver(([i])=>{i&&l({width:i.contentRect.width,height:i.contentRect.height})});return r.current&&t.observe(r.current),()=>t.disconnect()},[]),s.useEffect(()=>{const t=c.current;if(!t||!C)return;const i=()=>{t.srcObject!==C.srcObject&&(t.srcObject=C.srcObject),t.play().catch(()=>{}),e.outer?.pause(),e.inner?.pause()};return i(),C.addEventListener("loadedmetadata",i),()=>{C.removeEventListener("loadedmetadata",i),t.pause(),t.srcObject=null;for(const k of[e.outer,e.inner])k?.play().catch(()=>{})}},[C,e.outer,e.inner]);const{motion:R,finish:z,prepare:Y}=Z(c,M,w,e.state.orientation,o),{angle:G,changeAngle:A,interacting:J}=K(e.state.angleDegrees,async t=>{Y(t>=90);try{await e.setAngle(t)}catch(i){throw z(),i}},f),N=()=>{if(!y.current)return;const{screenId:t,x:i,y:k}=y.current;d.current.touch(1,t,i,k),y.current=void 0};s.useEffect(()=>{D.current=new j.DuoButtonSender((i,k)=>d.current.button(i,k),i=>f(String(i)));const t=()=>{N(),D.current?.release(),p(void 0)};return window.addEventListener("blur",t),()=>{t(),window.removeEventListener("blur",t)}},[]),s.useEffect(()=>{N()},[x?.screenId,I]);const T=()=>{D.current?.release(),p(void 0)},V=t=>({onPointerDown:i=>{R||i.button!==0||(i.currentTarget.setPointerCapture(i.pointerId),D.current?.press(t),p(t))},onPointerUp:T,onPointerCancel:T,onLostPointerCapture:T,onBlur:T,onPointerEnter:()=>g(t),onPointerLeave:()=>g(void 0),onFocus:()=>P(w.guides.find(i=>i.button===t)?.edge),onKeyDown:i=>{R||(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),i.repeat||(D.current?.press(t),p(t)))},onKeyUp:i=>{(i.key==="Enter"||i.key===" ")&&(i.preventDefault(),T())}}),q=t=>{const i=t.currentTarget.getBoundingClientRect();return j.flatDisplayTouch((t.clientX-i.left)/i.width,(t.clientY-i.top)/i.height,I)};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":!!R,"aria-busy":!!R,onPointerMove:t=>{if(!o)return;const i=t.currentTarget.getBoundingClientRect();P(j.flatHoverEdge(t.clientX-i.left,t.clientY-i.top,w.rect))},onPointerLeave:()=>{P(void 0),g(void 0)},children:[n.jsxs("div",{className:"rc-duo-flat-device","data-display":M?"inner":"outer",style:{width:F*v,height:E*v,transform:"translate(-50%, -50%) rotate("+w.turns*90+"deg)"},children:[o&&n.jsx(j.DuoFlatFrame,{inner:M,width:F,height:E}),n.jsxs("div",{className:"rc-duo-flat-screen",role:"application","aria-label":"iPhone Duo 2D simulator",tabIndex:0,style:{width:U,height:W,left:(F-O)/2*v,top:(E-L)/2*v,borderRadius:o?M?5.3*v:[.8,6.6,6.6,.8].map(t=>t*v+"px").join(" "):0},onKeyDown:R?void 0:e.onKeyDown,onKeyUp:e.onKeyUp,onPointerDown:t=>{if(R||y.current||t.button!==0||!x)return;t.currentTarget.focus({preventScroll:!0}),t.currentTarget.setPointerCapture(t.pointerId);const i=q(t);y.current={pointer:t.pointerId,screenId:x.screenId,...i},e.touch(0,x.screenId,i.x,i.y)},onPointerMove:t=>{if(y.current?.pointer!==t.pointerId)return;const i=q(t);Object.assign(y.current,i),e.touch(2,y.current.screenId,i.x,i.y)},onPointerUp:t=>{y.current?.pointer===t.pointerId&&N()},onPointerCancel:N,onLostPointerCapture:N,children:[n.jsx("video",{ref:c,onPlaying:()=>h(!0),autoPlay:!0,muted:!0,playsInline:!0,style:{width:M?W:U,height:M?U:W,transform:"translate(-50%, -50%) rotate("+(M?90:0)+"deg)"}}),!m&&n.jsx(j.DuoLoadingScreen,{logo:e.loadingLogo})]}),o&&w.buttons.map(t=>n.jsx("button",{type:"button",className:"rc-duo-physical","data-duo-button":t.button,"data-edge":t.edge,"data-highlighted":H===t.button,"data-pressed":b===t.button,"aria-label":j.DUO_BUTTONS[t.button]+" physical button",title:j.DUO_BUTTONS[t.button],style:{left:t.x*v,top:t.y*v,width:t.edge==="top"?Math.max(28,t.width*v):28,height:t.edge==="top"?28:Math.max(28,t.height*v)},...V(t.button),children:n.jsx("span",{style:{width:Math.max(2,t.width*v),height:Math.max(2,t.height*v)}})},t.button))]}),o&&w.guides.map(t=>n.jsx("button",{type:"button",className:"rc-duo-hardware","data-duo-button":t.button,"data-visible":S===t.edge,"data-pressed":b===t.button,"aria-label":j.DUO_BUTTONS[t.button],title:j.DUO_BUTTONS[t.button],style:{left:t.targetX,top:t.targetY,"--duo-hardware-icon-size":`${w.iconSize}px`,"--duo-hardware-icon-x":`${t.x-t.targetX}px`,"--duo-hardware-icon-y":`${t.y-t.targetY}px`},...V(t.button),children:n.jsx(X,{button:t.button})},t.button)),R&&n.jsx(te,{motion:R,onFinish:z})]}),o&&n.jsx($,{angle:G,changeAngle:A,interacting:J,rotate:()=>{e.setOrientation(e.state.orientation==="portrait"?"landscape-left":"portrait").catch(t=>f(String(t)))},children:n.jsx("span",{className:"rc-duo-view-label",children:"Front view"})}),a&&n.jsx("div",{role:"alert",className:"rc-duo-error",children:a})]})}const oe=Object.freeze(Object.defineProperty({__proto__:null,default:ne},Symbol.toStringTag,{value:"Module"}));exports.DuoControls=$;exports.DuoHardwareIcon=X;exports.duoView=oe;exports.useDuoHinge=K;

package/dist/duo-view-D9Ae00rj.mjs

@@ -0,0 +1,512 @@
+import { jsx as i, jsxs as p, Fragment as K } from "react/jsx-runtime";
+import { useId as te, useState as C, useRef as y, useEffect as F, useCallback as re, useLayoutEffect as ne, Suspense as oe, lazy as ie } from "react";
+import { H as ae, h as A, D as G, i as ce, j as se, k as O, l as de, m as ue } from "./remote-control-DiddxS8l.mjs";
+function le(e, n, r) {
+  const [c, d] = C(e), s = y({ nativeAngle: e, send: n, failed: r });
+  s.current = { nativeAngle: e, send: n, failed: r };
+  const u = y(void 0), f = y(!1), l = y(null);
+  return F(() => (l.current = new ae(
+    async (h) => {
+      await s.current.send(h), u.current === h && (u.current = void 0);
+    },
+    (h) => {
+      u.current = void 0, s.current.failed(String(h)), d(s.current.nativeAngle);
+    }
+  ), () => l.current?.stop()), []), F(() => {
+    !f.current && u.current === void 0 && d(e);
+  }, [e]), { angle: c, changeAngle: (h) => {
+    s.current.failed(void 0), u.current = h, d(h), l.current?.set(h);
+  }, interacting: f };
+}
+function he({
+  angle: e,
+  changeAngle: n,
+  interacting: r,
+  rotate: c,
+  onFold: d,
+  foldTarget: s,
+  onHingeDrag: u,
+  children: f
+}) {
+  const l = te();
+  return /* @__PURE__ */ p("div", { className: "rc-duo-controls", onPointerDown: (a) => a.stopPropagation(), children: [
+    /* @__PURE__ */ p("div", { className: "rc-duo-hinge", children: [
+      /* @__PURE__ */ i("button", { className: "rc-duo-fold", onClick: d ?? (() => n(e < 90 ? 180 : 0)), children: (s ?? e) < 90 ? "Unfold" : "Fold" }),
+      /* @__PURE__ */ i("label", { htmlFor: l, children: "Hinge" }),
+      /* @__PURE__ */ i(
+        "input",
+        {
+          id: l,
+          type: "range",
+          min: 0,
+          max: 180,
+          step: 1,
+          value: e,
+          onPointerDown: (a) => {
+            u?.(), r.current = !0, a.currentTarget.setPointerCapture(a.pointerId);
+          },
+          onPointerUp: () => {
+            r.current = !1;
+          },
+          onPointerCancel: () => {
+            r.current = !1;
+          },
+          onLostPointerCapture: () => {
+            r.current = !1;
+          },
+          onChange: (a) => n(Number(a.target.value))
+        }
+      ),
+      /* @__PURE__ */ p("output", { children: [
+        Math.round(e),
+        "°"
+      ] }),
+      /* @__PURE__ */ i("button", { className: "rc-duo-rotate", "aria-label": "Rotate device", title: "Rotate device", onClick: c, children: /* @__PURE__ */ p(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          width: "18",
+          height: "18",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "1.6",
+          "aria-hidden": "true",
+          children: [
+            /* @__PURE__ */ i("rect", { x: "7", y: "3", width: "10", height: "18", rx: "2" }),
+            /* @__PURE__ */ i("path", { d: "M3 9a9 9 0 0 1 3-5M3 4v5h5M21 15a9 9 0 0 1-3 5m3 0v-5h-5" })
+          ]
+        }
+      ) })
+    ] }),
+    f && /* @__PURE__ */ i("div", { className: "rc-duo-views", "aria-label": "Device view", children: f })
+  ] });
+}
+function fe({ button: e }) {
+  return /* @__PURE__ */ i(
+    "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" ? /* @__PURE__ */ p(K, { children: [
+        /* @__PURE__ */ i("rect", { x: "6", y: "10", width: "12", height: "11", rx: "2" }),
+        /* @__PURE__ */ i("path", { d: "M8 10V7a4 4 0 0 1 8 0v3" })
+      ] }) : /* @__PURE__ */ p(K, { children: [
+        /* @__PURE__ */ i("path", { d: "M3 9h4l5-5v16l-5-5H3zM17 12h5" }),
+        e === "volumeUp" && /* @__PURE__ */ i("path", { d: "M19.5 9.5v5" })
+      ] })
+    }
+  );
+}
+function _(e) {
+  if (!e || e.readyState < 2 || !e.videoWidth || !e.videoHeight) return;
+  const n = 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 * n), r.height = Math.round(e.videoHeight * n), c.drawImage(e, 0, 0, r.width, r.height), r) : void 0;
+  } catch {
+    return;
+  }
+}
+function me(e, n) {
+  let r = !1, c;
+  const d = (a) => {
+    r || (l(), n(a));
+  }, s = () => {
+    if (r) return;
+    const a = _(e);
+    a && d(a);
+  }, u = () => {
+    c = void 0, s(), r || (c = e?.requestVideoFrameCallback?.(u));
+  }, f = setTimeout(() => d(void 0), 2500);
+  c = e?.requestVideoFrameCallback?.(u), e?.addEventListener("loadeddata", s), !e?.requestVideoFrameCallback && e && e.readyState >= 2 && s();
+  function l() {
+    r = !0, clearTimeout(f), c !== void 0 && e?.cancelVideoFrameCallback(c), e?.removeEventListener("loadeddata", s);
+  }
+  return l;
+}
+function ge(e, n, r, c, d = !0) {
+  const s = y(void 0), u = y(c), f = y({ inner: n, frame: r });
+  f.current = { inner: n, frame: r };
+  const [l, a] = C(), h = y(void 0), E = y(void 0), k = re(() => {
+    clearTimeout(E.current), h.current = void 0, a(void 0);
+  }, []), R = (m) => {
+    if (!d || m === n) {
+      k();
+      return;
+    }
+    if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches || h.current) return;
+    const x = _(e.current);
+    if (!x) return;
+    const D = f.current;
+    h.current = { from: D, to: D, before: x, ready: !1 }, a(h.current), E.current = setTimeout(k, 5e3);
+  };
+  return F(() => () => clearTimeout(E.current), []), ne(() => {
+    const m = s.current, x = { inner: n, frame: r };
+    s.current = x;
+    const D = u.current !== c;
+    if (u.current = c, !m) return;
+    const w = Math.abs(m.frame.rect.min.x + m.frame.rect.max.x - r.rect.min.x - r.rect.max.x) > 0.5 || Math.abs(m.frame.rect.min.y + m.frame.rect.max.y - r.rect.min.y - r.rect.max.y) > 0.5;
+    if (!d || w || D) {
+      k();
+      return;
+    }
+    if (m.inner === n || (a(void 0), !m.frame.scale || !r.scale) || window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
+    const M = h.current?.before ?? _(e.current), g = h.current?.from ?? m;
+    clearTimeout(E.current), h.current = void 0, M && (x.frame = A(
+      n,
+      (g.frame.turns + (n ? 1 : 0)) % 4,
+      r.rect.min.x + r.rect.max.x,
+      r.rect.min.y + r.rect.max.y
+    ), a({ from: g, to: x, before: M, ready: !1 }));
+  }, [n, r.scale, r.turns, r.rect.min.x, r.rect.min.y, c, d]), F(() => {
+    if (!l || l.from.inner === n) return;
+    const m = me(e.current, (w) => {
+      w ? a((M) => M && { ...M, after: w, ready: !0 }) : k();
+    }), x = window.matchMedia?.("(prefers-reduced-motion: reduce)"), D = () => {
+      x?.matches && a(void 0);
+    };
+    return x?.addEventListener("change", D), () => {
+      m(), x?.removeEventListener("change", D);
+    };
+  }, [l?.from, n]), { motion: l, finish: k, prepare: R };
+}
+function ye({ pose: e, image: n, scale: r }) {
+  const { bodyWidth: c, bodyHeight: d, screenWidth: s, screenHeight: u } = e.frame, f = s * r, l = u * r;
+  return /* @__PURE__ */ p("div", { className: "rc-duo-fold-still", style: { width: c * r, height: d * r }, children: [
+    /* @__PURE__ */ i(G, { inner: e.inner, width: c, height: d }),
+    /* @__PURE__ */ i(
+      "div",
+      {
+        className: "rc-duo-flat-screen",
+        style: {
+          width: f,
+          height: l,
+          left: (c - s) * r / 2,
+          top: (d - u) * r / 2,
+          borderRadius: e.inner ? 5.3 * r : [0.8, 6.6, 6.6, 0.8].map((a) => a * r + "px").join(" ")
+        },
+        children: n && /* @__PURE__ */ i(
+          "canvas",
+          {
+            ref: (a) => {
+              a && (a.width = n.width, a.height = n.height, a.getContext("2d")?.drawImage(n, 0, 0));
+            },
+            style: {
+              width: e.inner ? l : f,
+              height: e.inner ? f : l,
+              transform: `translate(-50%, -50%) rotate(${e.inner ? 90 : 0}deg)`
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+function we({ motion: e, onFinish: n }) {
+  const r = y(null), [c, d] = C(!1);
+  return F(() => {
+    if (d(!1), !e.ready) return;
+    let s = !1, u;
+    return import("./duo-fold-renderer-BXejNHcY.mjs").then(({ renderFold: f }) => {
+      s || !r.current || (u = f(r.current, e, n), d(!0));
+    }).catch(() => {
+      s || n();
+    }), () => {
+      s = !0, u?.();
+    };
+  }, [e.ready, e.from, n]), /* @__PURE__ */ p(K, { children: [
+    !c && /* @__PURE__ */ i(
+      "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: /* @__PURE__ */ i(ye, { pose: e.from, image: e.before, scale: e.from.frame.scale })
+      }
+    ),
+    /* @__PURE__ */ i(
+      "canvas",
+      {
+        ref: r,
+        className: "rc-duo-fold-canvas",
+        "aria-hidden": "true",
+        style: { visibility: c ? "visible" : "hidden" }
+      }
+    )
+  ] });
+}
+const ve = ie(() => import("./duo-frame-Cmw4p2uN.mjs").then((e) => e.ac));
+function be(e) {
+  const [n, r] = C("2d");
+  return /* @__PURE__ */ p("div", { className: "rc-duo-view", children: [
+    e.showFrame !== !1 && n === "3d" ? /* @__PURE__ */ i(oe, { fallback: /* @__PURE__ */ i(q, { ...e }), children: /* @__PURE__ */ i(ve, { ...e }) }) : /* @__PURE__ */ i(q, { ...e }),
+    e.showFrame !== !1 && /* @__PURE__ */ p("div", { className: "rc-duo-mode", role: "group", "aria-label": "Device rendering", children: [
+      /* @__PURE__ */ i("button", { type: "button", "aria-pressed": n === "2d", onClick: () => r("2d"), children: "2D" }),
+      /* @__PURE__ */ i("button", { type: "button", "aria-pressed": n === "3d", onClick: () => r("3d"), children: "3D" })
+    ] })
+  ] });
+}
+function q(e) {
+  const n = e.showFrame !== !1, r = y(null), c = y(null), d = y(e);
+  d.current = e;
+  const [s, u] = C({ width: 0, height: 0 }), [f, l] = C(!1), [a, h] = C(), [E, k] = C(), [R, m] = C(), [x, D] = C(), w = y(void 0), M = y(null), g = e.state.displays.find(
+    (t) => t.id === (e.state.angleDegrees < 90 ? "outer" : "inner")
+  ), H = g?.id === "inner" ? e.inner : e.outer, W = g?.orientation === 2 ? 2 : g?.orientation === 3 ? 1 : g?.orientation === 4 ? 3 : 0, P = g?.id === "inner", v = A(P, W, s.width, s.height), U = n ? v.screenWidth : (P ? g?.height : g?.width) ?? 1, z = n ? v.screenHeight : (P ? g?.width : g?.height) ?? 1, I = n ? v.bodyWidth : U, L = n ? v.bodyHeight : z, b = n ? v.scale : Math.max(
+    0,
+    Math.min(
+      s.width / (v.turns % 2 ? L : I),
+      s.height / (v.turns % 2 ? I : L)
+    )
+  ), B = U * b, V = z * b;
+  F(() => {
+    const t = new ResizeObserver(([o]) => {
+      o && u({ width: o.contentRect.width, height: o.contentRect.height });
+    });
+    return r.current && t.observe(r.current), () => t.disconnect();
+  }, []), F(() => {
+    const t = c.current;
+    if (!t || !H) return;
+    const o = () => {
+      t.srcObject !== H.srcObject && (t.srcObject = H.srcObject), t.play().catch(() => {
+      }), e.outer?.pause(), e.inner?.pause();
+    };
+    return o(), H.addEventListener("loadedmetadata", o), () => {
+      H.removeEventListener("loadedmetadata", o), t.pause(), t.srcObject = null;
+      for (const j of [e.outer, e.inner]) j?.play().catch(() => {
+      });
+    };
+  }, [H, e.outer, e.inner]);
+  const {
+    motion: N,
+    finish: $,
+    prepare: J
+  } = ge(c, P, v, e.state.orientation, n), { angle: Q, changeAngle: Z, interacting: ee } = le(
+    e.state.angleDegrees,
+    async (t) => {
+      J(t >= 90);
+      try {
+        await e.setAngle(t);
+      } catch (o) {
+        throw $(), o;
+      }
+    },
+    h
+  ), T = () => {
+    if (!w.current) return;
+    const { screenId: t, x: o, y: j } = w.current;
+    d.current.touch(1, t, o, j), w.current = void 0;
+  };
+  F(() => {
+    M.current = new ce(
+      (o, j) => d.current.button(o, j),
+      (o) => h(String(o))
+    );
+    const t = () => {
+      T(), M.current?.release(), D(void 0);
+    };
+    return window.addEventListener("blur", t), () => {
+      t(), window.removeEventListener("blur", t);
+    };
+  }, []), F(() => {
+    T();
+  }, [g?.screenId, W]);
+  const S = () => {
+    M.current?.release(), D(void 0);
+  }, X = (t) => ({
+    onPointerDown: (o) => {
+      N || o.button !== 0 || (o.currentTarget.setPointerCapture(o.pointerId), M.current?.press(t), D(t));
+    },
+    onPointerUp: S,
+    onPointerCancel: S,
+    onLostPointerCapture: S,
+    onBlur: S,
+    onPointerEnter: () => m(t),
+    onPointerLeave: () => m(void 0),
+    onFocus: () => k(v.guides.find((o) => o.button === t)?.edge),
+    onKeyDown: (o) => {
+      N || (o.key === "Enter" || o.key === " ") && (o.preventDefault(), o.repeat || (M.current?.press(t), D(t)));
+    },
+    onKeyUp: (o) => {
+      (o.key === "Enter" || o.key === " ") && (o.preventDefault(), S());
+    }
+  }), Y = (t) => {
+    const o = t.currentTarget.getBoundingClientRect();
+    return ue(
+      (t.clientX - o.left) / o.width,
+      (t.clientY - o.top) / o.height,
+      W
+    );
+  };
+  return /* @__PURE__ */ p("div", { className: n ? "rc-duo" : "rc-duo rc-duo-frameless", children: [
+    /* @__PURE__ */ p(
+      "div",
+      {
+        ref: r,
+        className: "rc-duo-flat-stage",
+        "data-folding": !!N,
+        "aria-busy": !!N,
+        onPointerMove: (t) => {
+          if (!n) return;
+          const o = t.currentTarget.getBoundingClientRect();
+          k(de(t.clientX - o.left, t.clientY - o.top, v.rect));
+        },
+        onPointerLeave: () => {
+          k(void 0), m(void 0);
+        },
+        children: [
+          /* @__PURE__ */ p(
+            "div",
+            {
+              className: "rc-duo-flat-device",
+              "data-display": P ? "inner" : "outer",
+              style: {
+                width: I * b,
+                height: L * b,
+                transform: "translate(-50%, -50%) rotate(" + v.turns * 90 + "deg)"
+              },
+              children: [
+                n && /* @__PURE__ */ i(G, { inner: P, width: I, height: L }),
+                /* @__PURE__ */ p(
+                  "div",
+                  {
+                    className: "rc-duo-flat-screen",
+                    role: "application",
+                    "aria-label": "iPhone Duo 2D simulator",
+                    tabIndex: 0,
+                    style: {
+                      width: B,
+                      height: V,
+                      left: (I - U) / 2 * b,
+                      top: (L - z) / 2 * b,
+                      borderRadius: n ? P ? 5.3 * b : [0.8, 6.6, 6.6, 0.8].map((t) => t * b + "px").join(" ") : 0
+                    },
+                    onKeyDown: N ? void 0 : e.onKeyDown,
+                    onKeyUp: e.onKeyUp,
+                    onPointerDown: (t) => {
+                      if (N || w.current || t.button !== 0 || !g) return;
+                      t.currentTarget.focus({ preventScroll: !0 }), t.currentTarget.setPointerCapture(t.pointerId);
+                      const o = Y(t);
+                      w.current = { pointer: t.pointerId, screenId: g.screenId, ...o }, e.touch(0, g.screenId, o.x, o.y);
+                    },
+                    onPointerMove: (t) => {
+                      if (w.current?.pointer !== t.pointerId) return;
+                      const o = Y(t);
+                      Object.assign(w.current, o), e.touch(2, w.current.screenId, o.x, o.y);
+                    },
+                    onPointerUp: (t) => {
+                      w.current?.pointer === t.pointerId && T();
+                    },
+                    onPointerCancel: T,
+                    onLostPointerCapture: T,
+                    children: [
+                      /* @__PURE__ */ i(
+                        "video",
+                        {
+                          ref: c,
+                          onPlaying: () => l(!0),
+                          autoPlay: !0,
+                          muted: !0,
+                          playsInline: !0,
+                          style: {
+                            width: P ? V : B,
+                            height: P ? B : V,
+                            transform: "translate(-50%, -50%) rotate(" + (P ? 90 : 0) + "deg)"
+                          }
+                        }
+                      ),
+                      !f && /* @__PURE__ */ i(se, { logo: e.loadingLogo })
+                    ]
+                  }
+                ),
+                n && v.buttons.map((t) => /* @__PURE__ */ i(
+                  "button",
+                  {
+                    type: "button",
+                    className: "rc-duo-physical",
+                    "data-duo-button": t.button,
+                    "data-edge": t.edge,
+                    "data-highlighted": R === t.button,
+                    "data-pressed": x === t.button,
+                    "aria-label": O[t.button] + " physical button",
+                    title: O[t.button],
+                    style: {
+                      left: t.x * b,
+                      top: t.y * b,
+                      width: t.edge === "top" ? Math.max(28, t.width * b) : 28,
+                      height: t.edge === "top" ? 28 : Math.max(28, t.height * b)
+                    },
+                    ...X(t.button),
+                    children: /* @__PURE__ */ i(
+                      "span",
+                      {
+                        style: { width: Math.max(2, t.width * b), height: Math.max(2, t.height * b) }
+                      }
+                    )
+                  },
+                  t.button
+                ))
+              ]
+            }
+          ),
+          n && v.guides.map((t) => /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              className: "rc-duo-hardware",
+              "data-duo-button": t.button,
+              "data-visible": E === t.edge,
+              "data-pressed": x === t.button,
+              "aria-label": O[t.button],
+              title: O[t.button],
+              style: {
+                left: t.targetX,
+                top: t.targetY,
+                "--duo-hardware-icon-size": `${v.iconSize}px`,
+                "--duo-hardware-icon-x": `${t.x - t.targetX}px`,
+                "--duo-hardware-icon-y": `${t.y - t.targetY}px`
+              },
+              ...X(t.button),
+              children: /* @__PURE__ */ i(fe, { button: t.button })
+            },
+            t.button
+          )),
+          N && /* @__PURE__ */ i(we, { motion: N, onFinish: $ })
+        ]
+      }
+    ),
+    n && /* @__PURE__ */ i(
+      he,
+      {
+        angle: Q,
+        changeAngle: Z,
+        interacting: ee,
+        rotate: () => {
+          e.setOrientation(e.state.orientation === "portrait" ? "landscape-left" : "portrait").catch((t) => h(String(t)));
+        },
+        children: /* @__PURE__ */ i("span", { className: "rc-duo-view-label", children: "Front view" })
+      }
+    ),
+    a && /* @__PURE__ */ i("div", { role: "alert", className: "rc-duo-error", children: a })
+  ] });
+}
+const Me = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: be
+}, Symbol.toStringTag, { value: "Module" }));
+export {
+  fe as D,
+  he as a,
+  Me as d,
+  le as u
+};