@limrun/ui 0.15.1 → 0.17.0-rc.1

package/dist/duo-view-COZg8ieG.js

@@ -0,0 +1 @@
+"use strict";const n=require("react/jsx-runtime"),d=require("react"),S=require("./remote-control-DVRXfCR2.js");function _(e,o,t){const[c,s]=d.useState(e),i=d.useRef({nativeAngle:e,send:o,failed:t});i.current={nativeAngle:e,send:o,failed:t};const f=d.useRef(void 0),x=d.useRef(!1),l=d.useRef(null);return d.useEffect(()=>(l.current=new S.HingeSender(async j=>{await i.current.send(j),f.current===j&&(f.current=void 0)},j=>{f.current=void 0,i.current.failed(String(j)),s(i.current.nativeAngle)}),()=>l.current?.stop()),[]),d.useEffect(()=>{!x.current&&f.current===void 0&&s(e)},[e]),{angle:c,changeAngle:j=>{i.current.failed(void 0),f.current=j,s(j),l.current?.set(j)},interacting:x}}function q({angle:e,changeAngle:o,interacting:t,rotate:c,onFold:s,foldTarget:i,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:s??(()=>o(e<90?180:0)),children:(i??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?.(),t.current=!0,u.currentTarget.setPointerCapture(u.pointerId)},onPointerUp:()=>{t.current=!1},onPointerCancel:()=>{t.current=!1},onLostPointerCapture:()=>{t.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 K({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 F(e,o,t,c,s,i){return"M"+(e+s)+","+o+"H"+(e+t-i)+"a"+i+","+i+" 0 0 1 "+i+","+i+"V"+(o+c-i)+"a"+i+","+i+" 0 0 1 "+-i+","+i+"H"+(e+s)+"a"+s+","+s+" 0 0 1 "+-s+","+-s+"V"+(o+s)+"a"+s+","+s+" 0 0 1 "+s+","+-s+"Z"}function X({inner:e,width:o,height:t}){const c=d.useId().replace(/:/g,""),s=e?8.4:1.25,i=8.4;return n.jsxs("svg",{className:"rc-duo-flat-frame",viewBox:"0 0 "+o+" "+t,"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:t-1.4,rx:"0.85",fill:"url(#"+c+"-spine)",stroke:"#8b9296",strokeWidth:"0.15"}),n.jsx("path",{d:"M-.6 2V"+(t-2),stroke:"#f5f6f4",strokeWidth:"0.22"})]}),n.jsx("path",{d:F(0,0,o,t,s,i),fill:"url(#"+c+"-silver)",stroke:"#696f72",strokeWidth:"0.24"}),n.jsx("path",{d:F(.48,.48,o-.96,t-.96,Math.max(.5,s-.48),i-.48),fill:"none",stroke:"#ffffff",strokeOpacity:"0.85",strokeWidth:"0.2"}),n.jsx("path",{d:F(1.12,1.12,o-2.24,t-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+","+(t-1)+"v0.82",stroke:"#b1b2ac",strokeWidth:"1.1"})},f)),e&&[0,t-.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,"+(t-40)+"h-.9",stroke:"#b1b2ac",strokeWidth:"1.05"})]})}function Y(e,o,t,c){const s=S.DUO_DIMENSIONS.width/(e?1:2),i=S.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((t-120)/(l%2?i:s),(c-120)/(l%2?s:i))),j=(h,y)=>{h=(h-s/2)*u,y=(y-i/2)*u;const w=l===1?{x:-y,y:h}:l===2?{x:-h,y:-y}:l===3?{x:y,y:-h}:{x:h,y};return{x:w.x+t/2,y:w.y+c/2}},D=(l%2?i:s)*u,N=(l%2?s:i)*u,m={min:{x:(t-D)/2,y:(c-N)/2},max:{x:(t+D)/2,y:(c+N)/2}},p=[{button:"volumeDown",x:s-37,y:-.32,width:9.5,height:.65,edge:"top"},{button:"volumeUp",x:s-25,y:-.32,width:9.5,height:.65,edge:"top"},{button:"side",x:s+.35,y:i/2-21,width:.7,height:13,edge:"right"}],b=["top","right","bottom","left"],v=p.map(h=>{const y=b[(b.indexOf(h.edge)+l)%4],w=j(h.x,h.y);return y==="top"&&(w.y=m.min.y-28),y==="bottom"&&(w.y=m.max.y+28),y==="left"&&(w.x=m.min.x-28),y==="right"&&(w.x=m.max.x+28),{button:h.button,edge:y,...w,targetX:w.x,targetY:w.y}}),g=v.filter(h=>h.button!=="side"),C=l%2?"y":"x";g.sort((h,y)=>h[C]-y[C]);const k=l%2?"targetY":"targetX";if(g[1][C]-g[0][C]<44){const h=(g[0][C]+g[1][C])/2;g[0][k]=h-22,g[1][k]=h+22}return{bodyWidth:s,bodyHeight:i,screenWidth:f,screenHeight:x,scale:u,turns:l,buttons:p,guides:v,rect:m,iconSize:Math.min($(m),12*u)}}function $(e){return Math.max(12,Math.min(24,Math.max(e.max.x-e.min.x,e.max.y-e.min.y)/24))}function G(e,o,t){return[["top",t.min.y-o,e,t.min.x,t.max.x],["bottom",o-t.max.y,e,t.min.x,t.max.x],["left",t.min.x-e,o,t.min.y,t.max.y],["right",e-t.max.x,o,t.min.y,t.max.y]].filter(([,s,i,f,x])=>s>=-7&&s<=52&&i>=f-12&&i<=x+12).sort((s,i)=>Math.abs(s[1])-Math.abs(i[1]))[0]?.[0]}function H(e){if(!e||e.readyState<2||!e.videoWidth||!e.videoHeight)return;const o=Math.min(1,1024/Math.max(e.videoWidth,e.videoHeight)),t=document.createElement("canvas");try{const c=t.getContext("2d");return c?(t.width=Math.round(e.videoWidth*o),t.height=Math.round(e.videoHeight*o),c.drawImage(e,0,0,t.width,t.height),t):void 0}catch{return}}function ee(e,o){let t=!1,c;const s=u=>{t||(l(),o(u))},i=()=>{if(t)return;const u=H(e);u&&s(u)},f=()=>{c=void 0,i(),t||(c=e?.requestVideoFrameCallback?.(f))},x=setTimeout(()=>s(void 0),2500);c=e?.requestVideoFrameCallback?.(f),e?.addEventListener("loadeddata",i),!e?.requestVideoFrameCallback&&e&&e.readyState>=2&&i();function l(){t=!0,clearTimeout(x),c!==void 0&&e?.cancelVideoFrameCallback(c),e?.removeEventListener("loadeddata",i)}return l}function te(e,o,t,c){const s=d.useRef(void 0),i=d.useRef(c),f=d.useRef({inner:o,frame:t});f.current={inner:o,frame:t};const[x,l]=d.useState(),u=d.useRef(void 0),j=d.useRef(void 0),D=d.useCallback(()=>{clearTimeout(j.current),u.current=void 0,l(void 0)},[]),N=m=>{if(m===o){D();return}if(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches||u.current)return;const p=H(e.current);if(!p)return;const b=f.current;u.current={from:b,to:b,before:p,ready:!1},l(u.current),j.current=setTimeout(D,5e3)};return d.useEffect(()=>()=>clearTimeout(j.current),[]),d.useLayoutEffect(()=>{const m=s.current,p={inner:o,frame:t};s.current=p;const b=i.current!==c;if(i.current=c,!m)return;if(Math.abs(m.frame.rect.min.x+m.frame.rect.max.x-t.rect.min.x-t.rect.max.x)>.5||Math.abs(m.frame.rect.min.y+m.frame.rect.max.y-t.rect.min.y-t.rect.max.y)>.5||b){D();return}if(m.inner===o||(l(void 0),!m.frame.scale||!t.scale)||window.matchMedia?.("(prefers-reduced-motion: reduce)").matches)return;const g=u.current?.before??H(e.current),C=u.current?.from??m;clearTimeout(j.current),u.current=void 0,g&&(p.frame=Y(o,(C.frame.turns+(o?1:0))%4,t.rect.min.x+t.rect.max.x,t.rect.min.y+t.rect.max.y),l({from:C,to:p,before:g,ready:!1}))},[o,t.scale,t.turns,t.rect.min.x,t.rect.min.y,c]),d.useEffect(()=>{if(!x||x.from.inner===o)return;const m=ee(e.current,v=>{v?l(g=>g&&{...g,after:v,ready:!0}):D()}),p=window.matchMedia?.("(prefers-reduced-motion: reduce)"),b=()=>{p?.matches&&l(void 0)};return p?.addEventListener("change",b),()=>{m(),p?.removeEventListener("change",b)}},[x?.from,o]),{motion:x,finish:D,prepare:N}}function re({pose:e,image:o,scale:t}){const{bodyWidth:c,bodyHeight:s,screenWidth:i,screenHeight:f}=e.frame,x=i*t,l=f*t;return n.jsxs("div",{className:"rc-duo-fold-still",style:{width:c*t,height:s*t},children:[n.jsx(X,{inner:e.inner,width:c,height:s}),n.jsx("div",{className:"rc-duo-flat-screen",style:{width:x,height:l,left:(c-i)*t/2,top:(s-f)*t/2,borderRadius:e.inner?5.3*t:[.8,6.6,6.6,.8].map(u=>u*t+"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 ne({motion:e,onFinish:o}){const t=d.useRef(null),[c,s]=d.useState(!1);return d.useEffect(()=>{if(s(!1),!e.ready)return;let i=!1,f;return Promise.resolve().then(()=>require("./duo-fold-renderer-DdltAnF7.js")).then(({renderFold:x})=>{i||!t.current||(f=x(t.current,e,o),s(!0))}).catch(()=>{i||o()}),()=>{i=!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(re,{pose:e.from,image:e.before,scale:e.from.frame.scale})}),n.jsx("canvas",{ref:t,className:"rc-duo-fold-canvas","aria-hidden":"true",style:{visibility:c?"visible":"hidden"}})]})}const oe=d.lazy(()=>Promise.resolve().then(()=>require("./duo-frame-DjfA4gG-.js")).then(e=>e.duoFrame));function se(e){const[o,t]=d.useState("2d");return n.jsxs("div",{className:"rc-duo-view",children:[o==="3d"?n.jsx(d.Suspense,{fallback:n.jsx(V,{...e}),children:n.jsx(oe,{...e})}):n.jsx(V,{...e}),n.jsxs("div",{className:"rc-duo-mode",role:"group","aria-label":"Device rendering",children:[n.jsx("button",{type:"button","aria-pressed":o==="2d",onClick:()=>t("2d"),children:"2D"}),n.jsx("button",{type:"button","aria-pressed":o==="3d",onClick:()=>t("3d"),children:"3D"})]})]})}function V(e){const o=d.useRef(null),t=d.useRef(null),c=d.useRef(e);c.current=e;const[s,i]=d.useState({width:0,height:0}),[f,x]=d.useState(),[l,u]=d.useState(),[j,D]=d.useState(),[N,m]=d.useState(),p=d.useRef(void 0),b=d.useRef(null),v=e.state.displays.find(r=>r.id===(e.state.angleDegrees<90?"outer":"inner")),g=v?.id==="inner"?e.inner:e.outer,C=v?.orientation===2?2:v?.orientation===3?1:v?.orientation===4?3:0,k=v?.id==="inner",h=Y(k,C,s.width,s.height),{bodyWidth:y,bodyHeight:w,screenWidth:W,screenHeight:U,scale:M}=h,O=W*M,T=U*M;d.useEffect(()=>{const r=new ResizeObserver(([a])=>{a&&i({width:a.contentRect.width,height:a.contentRect.height})});return o.current&&r.observe(o.current),()=>r.disconnect()},[]),d.useEffect(()=>{const r=t.current;if(!r||!g)return;const a=()=>{r.srcObject!==g.srcObject&&(r.srcObject=g.srcObject),r.play().catch(()=>{}),e.outer?.pause(),e.inner?.pause()};return a(),g.addEventListener("loadedmetadata",a),()=>{g.removeEventListener("loadedmetadata",a),r.pause(),r.srcObject=null;for(const I of[e.outer,e.inner])I?.play().catch(()=>{})}},[g,e.outer,e.inner]);const{motion:E,finish:L,prepare:A}=te(t,k,h,e.state.orientation),{angle:Z,changeAngle:J,interacting:Q}=_(e.state.angleDegrees,async r=>{A(r>=90);try{await e.setAngle(r)}catch(a){throw L(),a}},x),P=()=>{if(!p.current)return;const{screenId:r,x:a,y:I}=p.current;c.current.touch(1,r,a,I),p.current=void 0};d.useEffect(()=>{b.current=new S.DuoButtonSender((a,I)=>c.current.button(a,I),a=>x(String(a)));const r=()=>{P(),b.current?.release(),m(void 0)};return window.addEventListener("blur",r),()=>{r(),window.removeEventListener("blur",r)}},[]),d.useEffect(()=>{P()},[v?.screenId,C]);const R=()=>{b.current?.release(),m(void 0)},z=r=>({onPointerDown:a=>{E||a.button!==0||(a.currentTarget.setPointerCapture(a.pointerId),b.current?.press(r),m(r))},onPointerUp:R,onPointerCancel:R,onLostPointerCapture:R,onBlur:R,onPointerEnter:()=>D(r),onPointerLeave:()=>D(void 0),onFocus:()=>u(h.guides.find(a=>a.button===r)?.edge),onKeyDown:a=>{E||(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),a.repeat||(b.current?.press(r),m(r)))},onKeyUp:a=>{(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),R())}}),B=r=>{const a=r.currentTarget.getBoundingClientRect();return S.flatDisplayTouch((r.clientX-a.left)/a.width,(r.clientY-a.top)/a.height,C)};return n.jsxs("div",{className:"rc-duo",children:[n.jsxs("div",{ref:o,className:"rc-duo-flat-stage","data-folding":!!E,"aria-busy":!!E,onPointerMove:r=>{const a=r.currentTarget.getBoundingClientRect();u(G(r.clientX-a.left,r.clientY-a.top,h.rect))},onPointerLeave:()=>{u(void 0),D(void 0)},children:[n.jsxs("div",{className:"rc-duo-flat-device","data-display":k?"inner":"outer",style:{width:y*M,height:w*M,transform:"translate(-50%, -50%) rotate("+h.turns*90+"deg)"},children:[n.jsx(X,{inner:k,width:y,height:w}),n.jsx("div",{className:"rc-duo-flat-screen",role:"application","aria-label":"iPhone Duo 2D simulator",tabIndex:0,style:{width:O,height:T,left:(y-W)/2*M,top:(w-U)/2*M,borderRadius:k?5.3*M:[.8,6.6,6.6,.8].map(r=>r*M+"px").join(" ")},onKeyDown:E?void 0:e.onKeyDown,onKeyUp:e.onKeyUp,onPointerDown:r=>{if(E||p.current||r.button!==0||!v)return;r.currentTarget.focus({preventScroll:!0}),r.currentTarget.setPointerCapture(r.pointerId);const a=B(r);p.current={pointer:r.pointerId,screenId:v.screenId,...a},e.touch(0,v.screenId,a.x,a.y)},onPointerMove:r=>{if(p.current?.pointer!==r.pointerId)return;const a=B(r);Object.assign(p.current,a),e.touch(2,p.current.screenId,a.x,a.y)},onPointerUp:r=>{p.current?.pointer===r.pointerId&&P()},onPointerCancel:P,onLostPointerCapture:P,children:n.jsx("video",{ref:t,autoPlay:!0,muted:!0,playsInline:!0,style:{width:k?T:O,height:k?O:T,transform:"translate(-50%, -50%) rotate("+(k?90:0)+"deg)"}})}),h.buttons.map(r=>n.jsx("button",{type:"button",className:"rc-duo-physical","data-duo-button":r.button,"data-edge":r.edge,"data-highlighted":j===r.button,"data-pressed":N===r.button,"aria-label":S.DUO_BUTTONS[r.button]+" physical button",title:S.DUO_BUTTONS[r.button],style:{left:r.x*M,top:r.y*M,width:r.edge==="top"?Math.max(28,r.width*M):28,height:r.edge==="top"?28:Math.max(28,r.height*M)},...z(r.button),children:n.jsx("span",{style:{width:Math.max(2,r.width*M),height:Math.max(2,r.height*M)}})},r.button))]}),h.guides.map(r=>n.jsx("button",{type:"button",className:"rc-duo-hardware","data-duo-button":r.button,"data-visible":l===r.edge,"data-pressed":N===r.button,"aria-label":S.DUO_BUTTONS[r.button],title:S.DUO_BUTTONS[r.button],style:{left:r.targetX,top:r.targetY,"--duo-hardware-icon-size":`${h.iconSize}px`,"--duo-hardware-icon-x":`${r.x-r.targetX}px`,"--duo-hardware-icon-y":`${r.y-r.targetY}px`},...z(r.button),children:n.jsx(K,{button:r.button})},r.button)),E&&n.jsx(ne,{motion:E,onFinish:L})]}),n.jsx(q,{angle:Z,changeAngle:J,interacting:Q,rotate:()=>{e.setOrientation(e.state.orientation==="portrait"?"landscape-left":"portrait").catch(r=>x(String(r)))},children:n.jsx("span",{className:"rc-duo-view-label",children:"Front view"})}),f&&n.jsx("div",{role:"alert",className:"rc-duo-error",children:f})]})}const ie=Object.freeze(Object.defineProperty({__proto__:null,default:se},Symbol.toStringTag,{value:"Module"}));exports.DuoControls=q;exports.DuoHardwareIcon=K;exports.duoView=ie;exports.flatHoverEdge=G;exports.hardwareIconSize=$;exports.useDuoHinge=_;