@stridge/kit 0.1.0-alpha.21 → 0.1.0-alpha.22

package/dist/flows/deposit/widgets/transfer-crypto/compound/components/QrCode.d.ts

@@ -5,16 +5,10 @@ import * as _$react_jsx_runtime0 from "react/jsx-runtime";
  * QR code part — renders the deposit address as a QR code with the
  * selected chain's logo punched out at the center.
  *
- * The arena is rendered inside an SVG `<foreignObject>` whose
- * coordinate system is the QR's viewBox (cells, ~33 user units across)
- * rather than CSS pixels. So `px` values on HTML descendants get
- * scaled by the SVG factor (~4.85× for a 160-pixel QR with a 33-cell
- * grid) — `height: 36px` on the icon turned into ~175 actual pixels
- * and the SVG ballooned. Percentages resolve correctly because they
- * stay in the local user-unit space, so the img sizes against Cuer's
- * arena `<foreignObject>` width/height directly. `object-fit: contain`
- * preserves aspect ratio so chain logos with non-square viewBoxes
- * (Ethereum is 784×1277) don't squish.
+ * The logo is rendered via `Cuer.Arena` as a native SVG `<image>` —
+ * `preserveAspectRatio="xMidYMid meet"` (the SVG equivalent of
+ * `object-fit: contain`) keeps non-square chain artwork from squishing,
+ * and the SVG coordinate system places it exactly on the QR centre.
  */
 declare function TransferCryptoQrCode(): _$react_jsx_runtime0.JSX.Element;
 //#endregion

package/dist/flows/deposit/widgets/transfer-crypto/compound/components/QrCode.js

@@ -1 +1 @@
-"use client";import{resolveChainLogoChain as e}from"../../../../../../shared/utils/logos/resolveLogoSrc.js";import"../../../../../../shared/utils/logos/index.js";import{useTransferCryptoContext as t}from"../context.js";import{TRANSFER_CRYPTO_SLOTS as n}from"../TransferCrypto.slots.js";import{styles as r}from"../TransferCrypto.styles.js";import{Cuer as i}from"../../../../../../shared/cuer/Cuer.js";import"../../../../../../shared/cuer/index.js";import{useEffect as a,useState as o}from"react";import{jsx as s}from"react/jsx-runtime";import*as c from"@stylexjs/stylex";function l(){let l=t(`TransferCrypto.QrCode`),u=e({...l.chain.chainId===void 0?{}:{chainId:l.chain.chainId},...l.chain.logoUrl===void 0?{}:{chainLogoUrl:l.chain.logoUrl}}),[d,f]=o(0);a(()=>{f(0)},[u.join(`|`)]);let p=u[d];return s(`div`,{"data-stridge-slot":n.qr,...c.props(r.qrFrame),children:s(i,{value:l.depositAddress,size:160,arena:p?s(`img`,{src:p,alt:l.chain.symbol,"data-stridge-slot":n.qrArena,onError:()=>{d<u.length-1&&f(d+1)},style:{width:`100%`,height:`100%`,objectFit:`contain`,display:`block`,borderRadius:`var(--stridge-kit-radius-lg)`}},p):null,...c.props(r.qrSvg)})})}export{l as TransferCryptoQrCode};
+"use client";import{resolveChainLogoChain as e}from"../../../../../../shared/utils/logos/resolveLogoSrc.js";import"../../../../../../shared/utils/logos/index.js";import{useTransferCryptoContext as t}from"../context.js";import{TRANSFER_CRYPTO_SLOTS as n}from"../TransferCrypto.slots.js";import{styles as r}from"../TransferCrypto.styles.js";import{Cuer as i}from"../../../../../../shared/cuer/Cuer.js";import"../../../../../../shared/cuer/index.js";import{useEffect as a,useState as o}from"react";import{jsx as s,jsxs as c}from"react/jsx-runtime";import*as l from"@stylexjs/stylex";function u(){let u=t(`TransferCrypto.QrCode`),d=e({...u.chain.chainId===void 0?{}:{chainId:u.chain.chainId},...u.chain.logoUrl===void 0?{}:{chainLogoUrl:u.chain.logoUrl}}),[f,p]=o(0);a(()=>{p(0)},[d.join(`|`)]);let m=d[f];return s(`div`,{"data-stridge-slot":n.qr,...l.props(r.qrFrame),children:c(i.Root,{value:u.depositAddress,size:160,...l.props(r.qrSvg),children:[s(i.Finder,{}),s(i.Cells,{}),m&&s(i.Arena,{href:m,"aria-label":u.chain.symbol,"data-stridge-slot":n.qrArena,onError:()=>{f<d.length-1&&p(f+1)}},m)]})})}export{u as TransferCryptoQrCode};

package/dist/package.js

@@ -1 +1 @@
-var e=`0.1.0-alpha.21`;export{e as version};
+var e=`0.1.0-alpha.22`;export{e as version};

package/dist/shared/cuer/Cuer.js

@@ -1 +1 @@
-import{create as e}from"./QrCode.js";import*as t from"react";import{Fragment as n,jsx as r,jsxs as i}from"react/jsx-runtime";const a=e=>Math.max(0,Math.min(1,e));function o(e){let{arena:t,...n}=e;return i(o.Root,{...n,children:[r(o.Finder,{}),r(o.Cells,{}),t&&r(o.Arena,{children:typeof t==`string`?r(`img`,{alt:`Arena`,src:t,style:{borderRadius:1,height:`100%`,objectFit:`cover`,width:`100%`}}):t})]})}(function(o){let s=o.Context=t.createContext(null);function c(n){let{children:a,size:o=`100%`,value:c,version:l,errorCorrection:u,...d}=n,f=t.useMemo(()=>(t.Children.map(a,e=>!t.isValidElement(e)||typeof e.type==`string`?null:`displayName`in e.type&&e.type.displayName===`Arena`?!0:null)??[]).some(Boolean),[a]),p=t.useMemo(()=>{let t=u;return f&&u===`low`&&(t=`medium`),e(c,{errorCorrection:t,version:l})},[c,f,u,l]),m=p.edgeLength*1,h=p.finderLength*1/2,g=f?Math.floor(m/4):0,_=t.useMemo(()=>({arenaSize:g,cellSize:1,edgeSize:m,qrcode:p,finderSize:h}),[g,m,p,h]);return r(s.Provider,{value:_,children:i(`svg`,{...d,width:o,height:o,viewBox:`0 0 ${m} ${m}`,xmlns:`http://www.w3.org/2000/svg`,children:[r(`title`,{children:`QR Code`}),a]})})}o.Root=c,(function(e){e.displayName=`Root`})(c||=o.Root||={});function l(e){let{className:o,fill:c,innerClassName:l,radius:u=.25,stroke:d}=e,{cellSize:f,edgeSize:p,finderSize:m}=t.useContext(s),h=a(u);function g({position:e}){let t=m-(m-f)-f/2;e===`top-right`&&(t=p-m-(m-f)-f/2);let a=m-(m-f)-f/2;e===`bottom-left`&&(a=p-m-(m-f)-f/2);let s=m-f*1.5;e===`top-right`&&(s=p-m-f*1.5);let u=m-f*1.5;return e===`bottom-left`&&(u=p-m-f*1.5),i(n,{children:[r(`rect`,{className:o,stroke:d??c??`currentColor`,fill:`transparent`,x:t,y:a,width:f+(m-f)*2,height:f+(m-f)*2,rx:2*h*(m-f),ry:2*h*(m-f),strokeWidth:f}),r(`rect`,{className:l,fill:c??`currentColor`,x:s,y:u,width:f*3,height:f*3,rx:2*h*f,ry:2*h*f})]})}return i(n,{children:[r(g,{position:`top-left`}),r(g,{position:`top-right`}),r(g,{position:`bottom-left`})]})}o.Finder=l,(function(e){e.displayName=`Finder`})(l||=o.Finder||={});function u(e){let{className:n,fill:i=`currentColor`,inset:o=!0,radius:c=1}=e,{arenaSize:l,cellSize:u,qrcode:d}=t.useContext(s),{edgeLength:f,finderLength:p}=d,m=a(c);return r(`path`,{className:n,d:t.useMemo(()=>{let e=``;for(let t=0;t<d.grid.length;t++){let n=d.grid[t];if(n)for(let r=0;r<n.length;r++){if(!n[r])continue;let i=f/2-l/2,a=i+l;if(t>=i&&t<=a&&r>=i&&r<=a)continue;let s=t<p&&r<p,c=t<p&&r>=f-p,d=t>=f-p&&r<p;if(s||c||d)continue;let h=(u-(o?u*.1:0)*2)/2,g=r*u+u/2,_=t*u+u/2,v=g-h,y=g+h,b=_-h,x=_+h,S=m*h;e+=[`M ${v+S},${b}`,`L ${y-S},${b}`,`A ${S},${S} 0 0,1 ${y},${b+S}`,`L ${y},${x-S}`,`A ${S},${S} 0 0,1 ${y-S},${x}`,`L ${v+S},${x}`,`A ${S},${S} 0 0,1 ${v},${x-S}`,`L ${v},${b+S}`,`A ${S},${S} 0 0,1 ${v+S},${b}`,`z`].join(` `)}}return e},[l,u,f,p,d.grid,o,m]),fill:i})}o.Cells=u,(function(e){e.displayName=`Cells`})(u||=o.Cells||={});function d(e){let{children:n}=e,{arenaSize:i,cellSize:a,edgeSize:o}=t.useContext(s),c=i,l=(o-c)/2;return r(`foreignObject`,{x:l,y:l,width:c,height:c,children:r(`div`,{style:{alignItems:`center`,display:`flex`,fontSize:1,justifyContent:`center`,height:`100%`,overflow:`hidden`,width:`100%`,padding:a/2,boxSizing:`border-box`},children:n})})}o.Arena=d,(function(e){e.displayName=`Arena`})(d||=o.Arena||={})})(o||={});export{o as Cuer};
+import{create as e}from"./QrCode.js";import*as t from"react";import{Fragment as n,jsx as r,jsxs as i}from"react/jsx-runtime";const a=e=>Math.max(0,Math.min(1,e));function o(e){let{arena:t,...n}=e;return i(o.Root,{...n,children:[r(o.Finder,{}),r(o.Cells,{}),t&&r(o.Arena,{href:t})]})}(function(o){let s=o.Context=t.createContext(null);function c(n){let{children:a,size:o=`100%`,value:c,version:l,errorCorrection:u,...d}=n,f=t.useMemo(()=>(t.Children.map(a,e=>!t.isValidElement(e)||typeof e.type==`string`?null:`displayName`in e.type&&e.type.displayName===`Arena`?!0:null)??[]).some(Boolean),[a]),p=t.useMemo(()=>{let t=u;return f&&u===`low`&&(t=`medium`),e(c,{errorCorrection:t,version:l})},[c,f,u,l]),m=p.edgeLength*1,h=p.finderLength*1/2,g=f?Math.floor(m/4):0,_=(m-g)/2,v=t.useMemo(()=>({arenaSize:g,arenaStart:_,cellSize:1,edgeSize:m,qrcode:p,finderSize:h}),[g,_,m,p,h]);return r(s.Provider,{value:v,children:i(`svg`,{...d,width:o,height:o,viewBox:`0 0 ${m} ${m}`,xmlns:`http://www.w3.org/2000/svg`,children:[r(`title`,{children:`QR Code`}),a]})})}o.Root=c,(function(e){e.displayName=`Root`})(c||=o.Root||={});function l(e){let{className:o,fill:c,innerClassName:l,radius:u=.25,stroke:d}=e,{cellSize:f,edgeSize:p,finderSize:m}=t.useContext(s),h=a(u);function g({position:e}){let t=m-(m-f)-f/2;e===`top-right`&&(t=p-m-(m-f)-f/2);let a=m-(m-f)-f/2;e===`bottom-left`&&(a=p-m-(m-f)-f/2);let s=m-f*1.5;e===`top-right`&&(s=p-m-f*1.5);let u=m-f*1.5;return e===`bottom-left`&&(u=p-m-f*1.5),i(n,{children:[r(`rect`,{className:o,stroke:d??c??`currentColor`,fill:`transparent`,x:t,y:a,width:f+(m-f)*2,height:f+(m-f)*2,rx:2*h*(m-f),ry:2*h*(m-f),strokeWidth:f}),r(`rect`,{className:l,fill:c??`currentColor`,x:s,y:u,width:f*3,height:f*3,rx:2*h*f,ry:2*h*f})]})}return i(n,{children:[r(g,{position:`top-left`}),r(g,{position:`top-right`}),r(g,{position:`bottom-left`})]})}o.Finder=l,(function(e){e.displayName=`Finder`})(l||=o.Finder||={});function u(e){let{className:n,fill:i=`currentColor`,inset:o=!0,radius:c=1}=e,{arenaSize:l,arenaStart:u,cellSize:d,qrcode:f}=t.useContext(s),{edgeLength:p,finderLength:m}=f,h=a(c);return r(`path`,{className:n,d:t.useMemo(()=>{let e=``,t=u+l;for(let n=0;n<f.grid.length;n++){let r=f.grid[n];if(r)for(let i=0;i<r.length;i++){if(!r[i])continue;if(l>0){let e=(i+.5)*d,r=(n+.5)*d;if(e>=u&&e<=t&&r>=u&&r<=t)continue}let a=n<m&&i<m,s=n<m&&i>=p-m,c=n>=p-m&&i<m;if(a||s||c)continue;let f=(d-(o?d*.1:0)*2)/2,g=i*d+d/2,_=n*d+d/2,v=g-f,y=g+f,b=_-f,x=_+f,S=h*f;e+=[`M ${v+S},${b}`,`L ${y-S},${b}`,`A ${S},${S} 0 0,1 ${y},${b+S}`,`L ${y},${x-S}`,`A ${S},${S} 0 0,1 ${y-S},${x}`,`L ${v+S},${x}`,`A ${S},${S} 0 0,1 ${v},${x-S}`,`L ${v},${b+S}`,`A ${S},${S} 0 0,1 ${v+S},${b}`,`z`].join(` `)}}return e},[l,u,d,p,m,f.grid,o,h]),fill:i})}o.Cells=u,(function(e){e.displayName=`Cells`})(u||=o.Cells||={});function d(e){let{href:n,preserveAspectRatio:i=`xMidYMid meet`,...a}=e,{arenaSize:o,arenaStart:c,cellSize:l}=t.useContext(s),u=l/2,d=c+u,f=o-u*2;return r(`image`,{href:n,...a,x:d,y:d,width:f,height:f,preserveAspectRatio:i})}o.Arena=d,(function(e){e.displayName=`Arena`})(d||=o.Arena||={})})(o||={});export{o as Cuer};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stridge/kit",
-  "version": "0.1.0-alpha.21",
+  "version": "0.1.0-alpha.22",
   "license": "MIT",
   "type": "module",
   "files": [