brickbox 0.1.0 → 0.2.0

package/README.md

@@ -1,77 +1,114 @@
-# brickbox
-
-Wrap any element and give it real 3D depth. The element stays real DOM (selectable, accessible, styled by you), and brickbox draws the side walls behind it. Rounded corners and gradient backgrounds carry through.
-
-## Install
-
-```
-npm i brickbox
-```
-
-Status: early release (v0.1.0). Expect small API changes before 1.0.
-
-## Use
-
-```tsx
-import { BrickBox } from 'brickbox/react';
-
-<BrickBox depth={24} control="hover" tilt={{ x: 14, y: 22 }}>
-  <div className="rectangle">this is a rectangle</div>
-</BrickBox>
-```
-
-```html
-<brick-box depth="24" control="hover" tilt="14 22">
-  <div class="rectangle">this is a rectangle</div>
-</brick-box>
-<script type="module">
-  import { defineBrickBox } from 'brickbox/element';
-  defineBrickBox();
-</script>
-```
-
-```js
-import { brickbox } from 'brickbox';
-const box = brickbox(wrapperEl, { depth: 24 }); // wrapperEl contains exactly one element child
-box.update({ depth: 40 });
-box.destroy();
-```
-
-Layout on the wrapper, looks on the child: flex, grid, margins and position belong on the wrapper (`className`/`style`, or the `<brick-box>` element). Background, radius and padding stay on the child. Put opacity, filter and overflow on the wrapper, never on the 3D layer.
-
-## Options
-
-| Option | Default | Notes |
-|---|---|---|
-| `depth` | `24` | number (px) or CSS length |
-| `control` | `"hover"` | `"hover"`, `"drag"`, `"static"`. On touch, `"hover"` behaves as drag |
-| `tilt` | `{ x: 14, y: 22 }` | degrees. +x shows the bottom wall, +y the right wall |
-| `maxAngle` | `60` | clamp for hover and drag |
-| `springBack` | `true` | |
-| `springDuration` | `700` | ms |
-| `pressDepth` | same as `depth` | smaller value makes it sink on press |
-| `pressDuration` | `150` | ms |
-| `sideColor` | `"match"` | follows the element's background, or any CSS colour |
-| `shading` | on for `"match"` | lighting on the walls |
-| `light` | `"top-left"` | word or degrees (0 top, clockwise) |
-| `perspective` | `1000` | px |
-| `edgeColor` | `"none"` | `"none"`, `"auto"` or a CSS colour |
-| `edgeWidth` | `1` | px |
-| `touchScroll` | `true` | touch only: vertical swipes scroll the page |
-| `disabled` | `false` | |
-| `advanced` | | `tolerance` (0.25), `sensitivity` (0.5), `bounce` (1), `cull` (true) |
-
-## Limitations
-
-- Rectangles with uniform or per-corner radii (pills and circles included). Clip-path shapes, blobs and elliptical radii are not supported yet.
-- Walls follow the child's background colour, or a single linear gradient with `rgb()` stops. Images and other backgrounds fall back to a solid colour. Wall colours are read when the walls are built, so they do not follow a later colour change.
-- The element's own `box-shadow` and `outline` are not extruded, and borders stay on the front face.
-- Depth beyond about half of `perspective` can clip or distort (a warning is logged in development).
-- Tested by the author on desktop and phone browsers. Safari, Firefox and older mobile browsers have not been verified yet.
-
-## Develop
-
-```
-npm install
-npm run typecheck && npm test && npm run build && npm run size
-```
+# brickbox
+
+Wrap any element and give it real 3D depth. The element stays real DOM (selectable, accessible, styled by you), and brickbox draws the side walls behind it. Rounded corners and gradient backgrounds carry through.
+
+## Install
+
+```
+npm i brickbox
+```
+
+Status: early release (v0.1.0). Expect small API changes before 1.0.
+
+## Use
+
+```tsx
+import { BrickBox } from 'brickbox/react';
+
+<BrickBox depth={24} control="hover" tilt={{ x: 14, y: 22 }}>
+  <div className="rectangle">this is a rectangle</div>
+</BrickBox>
+```
+
+```html
+<brick-box depth="24" control="hover" tilt="14 22">
+  <div class="rectangle">this is a rectangle</div>
+</brick-box>
+<script type="module">
+  import { defineBrickBox } from 'brickbox/element';
+  defineBrickBox();
+</script>
+```
+
+```js
+import { brickbox } from 'brickbox';
+const box = brickbox(wrapperEl, { depth: 24 }); // wrapperEl contains exactly one element child
+box.update({ depth: 40 });
+box.destroy();
+```
+
+Layout on the wrapper, looks on the child: flex, grid, margins and position belong on the wrapper (`className`/`style`, or the `<brick-box>` element). Background, radius and padding stay on the child. Put opacity, filter and overflow on the wrapper, never on the 3D layer.
+
+## Options
+
+| Option | Default | Notes |
+|---|---|---|
+| `depth` | `24` | number (px) or CSS length |
+| `control` | `"hover"` | `"hover"`, `"drag"`, `"both"`, `"static"`. `"both"` tilts on hover until you grab it, drag takes over while held, then hover resumes. On touch, `"hover"` and `"both"` behave as drag |
+| `tilt` | `{ x: 14, y: 22 }` | degrees. +x shows the bottom wall, +y the right wall |
+| `maxAngle` | `60` | clamp for hover and drag |
+| `springBack` | `true` | |
+| `springDuration` | `700` | ms |
+| `pressDepth` | same as `depth` | smaller value makes it sink on press |
+| `pressDuration` | `150` | ms |
+| `sideColor` | `"match"` | follows the element's background, or any CSS colour |
+| `shading` | on for `"match"` | lighting on the walls |
+| `light` | `"top-left"` | word or degrees (0 top, clockwise) |
+| `perspective` | `1000` | px |
+| `edgeColor` | `"none"` | `"none"`, `"auto"` or a CSS colour |
+| `edgeWidth` | `1` | px |
+| `reverseHover` | `false` | flip the hover tilt direction |
+| `reverseDrag` | `false` | flip the drag direction |
+| `ignore` | none | CSS selector for areas that ignore hover, drag and press (see below) |
+| `touchScroll` | `true` | touch only: vertical swipes scroll the page |
+| `disabled` | `false` | |
+| `advanced` | | `tolerance` (0.25), `sensitivity` (0.5), `bounce` (1), `cull` (true) |
+
+## Shapes
+
+brickbox reads the shape from your element's CSS, so you never describe it twice.
+
+- `border-radius`, including per-corner and elliptical radii (pills, circles, blobs made with `border-radius`).
+- `clip-path`: `polygon()`, `circle()`, `ellipse()`, `inset()` (with `round`) and `path()`.
+- Hover and drag follow the real silhouette, so the empty corners of a hexagon do not react.
+
+```css
+.hexagon { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
+```
+
+`path()` coordinates are fixed pixels from the element's top-left corner, so give the element the same size as the path. Anything outside the element's box is not painted, and the walls follow only the visible part.
+
+Not supported: `calc()` inside a clip-path, `url(#id)`, and `shape()`. In a `path()` with several subpaths, every subpath after the first must start with an absolute `M`. When a clip-path is set, brickbox uses it and ignores `border-radius` for the walls. An unsupported clip-path falls back to the rounded rectangle, with a warning in development.
+
+## Ignore areas
+
+Part of the element can opt out of hover, drag and press, for example a knob you turn. Mark it with an attribute, or pass a CSS selector.
+
+```html
+<brick-box depth="24" control="both">
+  <div class="panel">
+    <div class="knob" data-brickbox-ignore></div>
+  </div>
+</brick-box>
+```
+
+```tsx
+<BrickBox control="both" ignore=".knob, .slider">…</BrickBox>
+```
+
+While the pointer is over an ignored area the tilt holds still, and a drag or press cannot start there.
+
+## Limitations
+
+- Shapes come from `border-radius` or a supported `clip-path` (see Shapes). `calc()`, `url()` and `shape()` clip-paths are not supported.
+- Walls follow the child's background colour, or a single linear gradient with `rgb()` stops. Images and other backgrounds fall back to a solid colour. Wall colours are read when the walls are built, so they do not follow a later colour change.
+- The element's own `box-shadow` and `outline` are not extruded, and borders stay on the front face.
+- Depth beyond about half of `perspective` can clip or distort (a warning is logged in development).
+- Tested by the author on desktop and phone browsers. Safari, Firefox and older mobile browsers have not been verified yet.
+
+## Develop
+
+```
+npm install
+npm run typecheck && npm test && npm run build && npm run size
+```

package/dist/chunk-VDSG5ZZE.js

@@ -0,0 +1,2 @@
+var bt={persp:{display:"grid",width:"100%",height:"100%"},obj:{display:"grid",width:"100%",height:"100%",transformStyle:"preserve-3d",willChange:"transform"},sink:{display:"grid",width:"100%",height:"100%",position:"relative",transformStyle:"preserve-3d"},walls:{position:"absolute",transformStyle:"preserve-3d",pointerEvents:"none"}},rt="data-bb";function xt(t){let r=[],o=0,i="";for(let s of t)s==="("&&o++,s===")"&&o--,s===","&&!o?(r.push(i.trim()),i=""):i+=s;return r.push(i.trim()),r}function yt(t){if((t.match(/gradient\(/g)||[]).length!==1)return null;let r=xt(t.slice(t.indexOf("(")+1,t.lastIndexOf(")"))),o=180;if(/^to /.test(r[0])||/deg$/.test(r[0])){let s=r.shift();if(/deg$/.test(s))o=parseFloat(s);else {let e=/top/.test(s),c=/bottom/.test(s),u=/left/.test(s),l=/right/.test(s);o=e&&l?45:c&&l?135:c&&u?225:e&&u?315:l?90:u?270:e?0:180;}}let i=[];for(let s of r){let e=s.match(/^(rgba?\([^)]*\))\s*([\d.]+)?%?$/);if(!e||/px|em/.test(s))return null;let c=e[1].match(/[\d.]+/g).map(Number);c.length<4&&c.push(1),i.push({raw:s,c,t:e[2]==null?null:+e[2]/100});}if(i.length<2)return null;i[0].t==null&&(i[0].t=0),i[i.length-1].t==null&&(i[i.length-1].t=1);for(let s=1;s<i.length;s++){if(i[s].t!=null)continue;let e=s;for(;i[e].t==null;)e++;let c=i[s-1].t,u=i[e].t;for(let l=s;l<e;l++)i[l].t=c+(u-c)*(l-s+1)/(e-s+1);}return {ang:o,st:i}}function ot(t,r,o,i,s){let e=t.ang*Math.PI/180,c=Math.abs(i*Math.sin(e))+Math.abs(s*Math.cos(e)),u=((r-i/2)*Math.sin(e)-(o-s/2)*Math.cos(e))/c+.5,l=t.st;if(u<=l[0].t)return `rgba(${l[0].c})`;for(let a=1;a<l.length;a++)if(u<=l[a].t){let n=(u-l[a-1].t)/(l[a].t-l[a-1].t||1),d=l[a-1].c,m=l[a].c;return `rgba(${d.map((b,v)=>+(b+(m[v]-b)*n).toFixed(2))})`}return `rgba(${l[l.length-1].c})`}function Gt(t){let r=0;for(let o=0;o<t.length;o++){let[i,s]=t[o],[e,c]=t[(o+1)%t.length];r+=i*c-e*s;}return r/2}function Wt(t,r=-1){let o=Gt(t);return o===0||Math.sign(o)===r?t:[...t].reverse()}function vt(t,r,o){let i=false;for(let s=0,e=t.length-1;s<t.length;e=s++){let[c,u]=t[s],[l,a]=t[e];u>o!=a>o&&r<(l-c)*(o-u)/(a-u)+c&&(i=!i);}return i}function Mt(t,r,o){let i=false;for(let s of t)vt(s,r,o)&&(i=!i);return i}function Yt(t,r,o){let i=o[0]-r[0],s=o[1]-r[1],e=i*i+s*s;return e?Math.abs((t[0]-r[0])*s-(t[1]-r[1])*i)/Math.sqrt(e):Math.hypot(t[0]-r[0],t[1]-r[1])}function Et(t,r){let o=t.length;if(o<4)return t;let i=0,s=-1;for(let l=1;l<o;l++){let a=Math.hypot(t[l][0]-t[0][0],t[l][1]-t[0][1]);a>s&&(s=a,i=l);}let e=new Array(o).fill(false);e[0]=e[i]=true;let c=[...t,t[0]],u=[[0,i],[i,o]];for(;u.length;){let[l,a]=u.pop(),n=-1,d=-1;for(let m=l+1;m<a;m++){let b=Yt(c[m],c[l],c[a]);b>n&&(n=b,d=m);}n>r&&d>0&&(e[d]=true,u.push([l,d],[d,a]));}return t.filter((l,a)=>e[a])}function it(t,r,o,i){let s=Math.min(1,o/(t[0]+t[1]),o/(t[3]+t[2]),i/(r[0]+r[3]),i/(r[1]+r[2]));return [t.map(e=>e*s),r.map(e=>e*s)]}function lt(t,r,o,i,s=o){let e=[],c=[[1,t-o[1],s[1],-90,t,0],[2,t-o[2],r-s[2],0,t,r],[3,o[3],r-s[3],90,0,r],[0,o[0],s[0],180,0,0]];for(let[u,l,a,n,d,m]of c){let b=o[u],v=s[u],E=Math.max(b,v),g=E>.5?Math.max(1,Math.ceil(Math.PI/2/(2*Math.acos(Math.max(0,1-i/E))))):0;if(!g)e.push([d,m]);else for(let x=0;x<=g;x++){let k=(n+90*x/g)*Math.PI/180;e.push([l+b*Math.cos(k),a+v*Math.sin(k)]);}}return e.reverse()}function gt(t,r,o,i,s){let e=Math.max(o,i,s),c=Math.max(12,Math.ceil(Math.PI/Math.acos(Math.max(0,1-s/e)))),u=[];for(let l=0;l<c;l++){let a=2*Math.PI*l/c;u.push([t+o*Math.cos(a),r+i*Math.sin(a)]);}return u}var M=(t,r)=>t==null?NaN:/^-?[\d.]+(px)?$/.test(t)?parseFloat(t):/^-?[\d.]+%$/.test(t)?parseFloat(t)/100*r:NaN,qt={left:"0%",top:"0%",center:"50%",right:"100%",bottom:"100%"};function st(t){return t.length===1?[t[0],t[0],t[0],t[0]]:t.length===2?[t[0],t[1],t[0],t[1]]:t.length===3?[t[0],t[1],t[2],t[1]]:t}function Pt(t,r,o,i){let s=t.trim().match(/^(polygon|circle|ellipse|inset)\(([\s\S]*)\)$/);if(!s)return null;let e=s[2].trim();if(s[1]==="polygon"){let g=xt(e);/^(nonzero|evenodd)$/.test(g[0])&&g.shift();let x=[];for(let k of g){let P=k.trim().split(/\s+/),S=M(P[0],r),L=M(P[1],o);if(P.length!==2||isNaN(S)||isNaN(L))return null;x.push([S,L]);}return x.length>=3?[x]:null}if(s[1]==="inset"){let[g,x]=e.split(/\s+round\s+/),k=g.trim().split(/\s+/);if(k.length>4)return null;let P=st(k),S=M(P[0],o),L=M(P[1],r),K=M(P[2],o),G=M(P[3],r),C=r-G-L,B=o-S-K;if([S,L,K,G].some(isNaN)||!(C>0)||!(B>0))return null;let W=[0,0,0,0],A=[0,0,0,0];if(x){let[O,Y]=x.split("/"),X=O.trim().split(/\s+/),_=(Y??O).trim().split(/\s+/);if(X.length>4||_.length>4||(W=st(X).map(q=>M(q,C)),A=st(_).map(q=>M(q,B)),[...W,...A].some(isNaN)))return null}let[V,Q]=it(W,A,C,B);return [lt(C,B,V,i,Q).map(([O,Y])=>[O+G,Y+S])]}let[c,u]=e.split(/\s+at\s+/),l=(u||"center center").trim().split(/\s+/).map(g=>qt[g]??g),a=M(l[0],r),n=M(l[1]??"50%",o),d=c.trim();if(isNaN(a)||isNaN(n))return null;if(s[1]==="circle"){let g=d===""||d==="closest-side"?Math.min(a,r-a,n,o-n):d==="farthest-side"?Math.max(a,r-a,n,o-n):M(d,Math.sqrt((r*r+o*o)/2));return g>0?[gt(a,n,g,g,i)]:null}let[m,b]=d?d.split(/\s+/):["closest-side","closest-side"],v=m==="closest-side"?Math.min(a,r-a):m==="farthest-side"?Math.max(a,r-a):M(m,r),E=b==="closest-side"?Math.min(n,o-n):b==="farthest-side"?Math.max(n,o-n):M(b,o);return v>0&&E>0?[gt(a,n,v,E,i)]:null}function $t(t){return t.map((r,o)=>{let i=0;return t.forEach((s,e)=>{e!==o&&vt(s,r[0][0],r[0][1])&&i++;}),Wt(r,i%2?1:-1)})}function kt(t,r,o){if(t.every(([e,c])=>e>=0&&e<=r&&c>=0&&c<=o))return t;let i=[[e=>e[0]>=0,(e,c)=>[0,e[1]+(c[1]-e[1])*(0-e[0])/(c[0]-e[0])]],[e=>e[0]<=r,(e,c)=>[r,e[1]+(c[1]-e[1])*(r-e[0])/(c[0]-e[0])]],[e=>e[1]>=0,(e,c)=>[e[0]+(c[0]-e[0])*(0-e[1])/(c[1]-e[1]),0]],[e=>e[1]<=o,(e,c)=>[e[0]+(c[0]-e[0])*(o-e[1])/(c[1]-e[1]),o]]],s=t;for(let[e,c]of i){let u=s;s=[];for(let l=0;l<u.length;l++){let a=u[l],n=u[(l+u.length-1)%u.length];e(a)?(e(n)||s.push(c(n,a)),s.push(a)):e(n)&&s.push(c(n,a));}if(!s.length)break}return s}var zt={top:0,"top-right":45,right:90,"bottom-right":135,bottom:180,"bottom-left":225,left:270,"top-left":315},St="[data-brickbox-ignore]",R=(t,r)=>Math.max(-r,Math.min(r,t)),Nt=()=>typeof process<"u"&&!!process.env&&process.env.NODE_ENV!=="production",Lt=false;function Vt(){if(!(Lt||typeof CSS>"u"||!CSS.registerProperty)){Lt=true;try{CSS.registerProperty({name:"--bb-p",syntax:"<number>",inherits:!0,initialValue:"1"});}catch{}}}function Tt(t){let r=t.advanced||{},o=(t.sideColor??"match").trim();return {depth:t.depth??24,control:t.control??"hover",tx:t.tilt?.x??14,ty:t.tilt?.y??22,max:t.maxAngle??60,springBack:t.springBack??true,springDur:t.springDuration??700,pressDepth:t.pressDepth,pressDur:t.pressDuration??150,side:o,shading:t.shading??o==="match",light:typeof t.light=="number"?t.light:zt[t.light??"top-left"]??315,persp:t.perspective??1e3,edge:t.edgeColor??"none",edgeW:t.edgeWidth??1,touchScroll:t.touchScroll??true,disabled:t.disabled??false,reverseHover:t.reverseHover??false,reverseDrag:t.reverseDrag??false,ignore:t.ignore||void 0,tol:r.tolerance??.25,sens:r.sensitivity??.5,bounce:r.bounce??1,cull:r.cull??true}}function Dt(t,r){if(typeof t=="number")return t;if(/^\s*-?[\d.]+(px)?\s*$/.test(t))return parseFloat(t);let o=document.createElement("div");o.style.cssText=`position:absolute;visibility:hidden;width:${t}`,r.appendChild(o);let i=o.getBoundingClientRect().width;return o.remove(),i}function Xt(t,r,o){let i="http://www.w3.org/2000/svg",s=document.createElementNS(i,"svg");s.setAttribute("width","0"),s.setAttribute("height","0"),s.style.cssText="position:absolute;visibility:hidden;pointer-events:none",o.appendChild(s);let e=[];for(let c of t.split(/(?=M)/)){if(!c.trim())continue;let u=document.createElementNS(i,"path");u.setAttribute("d",c),s.appendChild(u);let l=0;try{l=u.getTotalLength();}catch{}if(!(l>0))continue;let a=Math.max(1,l/1500),n=[];for(let m=0;m<l;m+=a){let b=u.getPointAtLength(m);n.push([b.x,b.y]);}let d=Et(n,r);d.length>=3&&e.push(d);}return s.remove(),e}function _t(t,r,o,i,s){let e=(t.getPropertyValue("clip-path")||t.getPropertyValue("-webkit-clip-path")||"").trim().replace(/\s+border-box$/,"");if(e&&e!=="none"){let d=e.match(/^path\(\s*(?:(?:evenodd|nonzero)\s*,\s*)?["']([^"']*)["']\s*\)$/),b=((d?Xt(d[1],i,s):Pt(e,r,o,i))||[]).map(v=>kt(v,r,o)).filter(v=>v.length>=3);if(b.length)return $t(b);Nt()&&console.warn(`[brickbox] clip-path "${e}" is not supported, so the walls use the rounded rectangle instead.`);}let c=[],u=[],l=(d,m)=>d.endsWith("%")?parseFloat(d)/100*m:parseFloat(d)||0;for(let d of ["top-left","top-right","bottom-right","bottom-left"]){let m=t.getPropertyValue(`border-${d}-radius`).trim().split(/\s+/);c.push(l(m[0]||"0",r)),u.push(l(m[1]??m[0]??"0",o));}let[a,n]=it(c,u,r,o);return [lt(r,o,a,i,n)]}function Zt(t){let r=a=>t.querySelector(`[${rt}="${a}"]`),o=r("persp");if(o){let a=r("sink");return {persp:o,obj:r("obj"),sink:a,walls:r("walls"),child:a.firstElementChild,built:false}}let i=t.firstElementChild;if(!i)throw new Error("brickbox: the root needs one element child");let s=a=>{let n=document.createElement("div");return n.setAttribute(rt,a),Object.assign(n.style,bt[a]),n},e=s("persp"),c=s("obj"),u=s("sink"),l=s("walls");return l.setAttribute("aria-hidden","true"),t.append(e),e.append(c),c.append(u),u.append(i,l),{persp:e,obj:c,sink:u,walls:l,child:i,built:true}}function Rt(t,r={}){Vt();let o=Zt(t),{persp:i,obj:s,sink:e,walls:c,child:u}=o,l=typeof matchMedia<"u"?matchMedia("(prefers-reduced-motion: reduce)"):null,a=r,n=Tt(a),d={w:0,h:0,ox:0,oy:0,pp:1},m=[],b=n.tx,v=n.ty,E=false,g=null,x=false,k=false;if(!t.style.display){let p=e.style.display;e.style.display="block";let f=/^inline/.test(getComputedStyle(u).display);e.style.display=p,t.style.display=f?"inline-block":"block",k=true;}let P=()=>n.control==="hover"||n.control==="both",S=()=>n.control==="drag"||n.control==="both",L=(p,f,h)=>{b=p,v=f,s.style.transition=h||"none",s.style.transform=`rotateX(${p}deg) rotateY(${-f}deg)`;},K=()=>l?.matches?"none":`transform ${n.springDur}ms cubic-bezier(.2,${1+.5*n.bounce},.4,1)`,G=()=>L(n.tx,n.ty,K()),C=p=>e.style.setProperty("--bb-p",String(p&&d.pp<1?d.pp:1));function B(){n=Tt(a);let p=u.offsetWidth,f=u.offsetHeight,h=u.offsetLeft,D=u.offsetTop,$=Math.max(0,Dt(n.depth,t));Nt()&&$>n.persp*.5&&console.warn(`[brickbox] depth ${$}px is more than half of perspective (${n.persp}px); the box may clip or distort.`);let T=n.pressDepth==null?1:Math.min(1,Math.max(0,Dt(n.pressDepth,t)/($||1)));d={w:p,h:f,ox:h,oy:D,pp:T};let j=!!l?.matches;if(c.innerHTML="",c.hidden=n.disabled,Object.assign(c.style,{left:h+"px",top:D+"px",width:p+"px",height:f+"px"}),e.style.setProperty("--bb-d",$+"px"),e.style.transform="translateZ(calc(var(--bb-d) * (var(--bb-p) - 1)))",e.style.transition=`--bb-p ${j?0:n.pressDur}ms ease`,i.style.perspective=n.persp+"px",s.style.transformOrigin=`${h+p/2}px ${D+f/2}px ${-$/2}px`,t.style.touchAction=S()||n.control==="hover"&&!n.touchScroll?"none":n.control==="hover"?"pan-y":"auto",t.style.cursor=S()?"grab":"",m=[],n.disabled||!p||!f){s.style.transform="none";return}let w=getComputedStyle(u);m=_t(w,p,f,n.tol,t);let H=w.backgroundImage,Z=H.startsWith("linear-gradient")?yt(H):null,U=w.backgroundColor;(U==="rgba(0, 0, 0, 0)"||U==="transparent")&&(U="rgb(120,120,130)");let ct=n.side==="match",at=ct?U:n.side,ut=n.light*Math.PI/180,Ct=Math.sin(ut),Bt=-Math.cos(ut),et=n.edge==="none"||n.edge===""?null:n.edge==="auto"?"rgba(0,0,0,.5)":n.edge,pt=document.createDocumentFragment();for(let J of m){let I=J.length,z=J.map((y,F)=>{let N=J[(F+1)%I];return {a:Math.atan2(N[1]-y[1],N[0]-y[0]),len:Math.hypot(N[0]-y[0],N[1]-y[1])}});for(let y=0;y<I;y++){if(z[y].len<.01)continue;let F=(y+I-1)%I;for(;z[F].len<.01&&F!==y;)F=(F+I-1)%I;let N=Math.abs(z[y].a-z[F].a);N=Math.min(N,2*Math.PI-N);let[dt,mt]=J[y],[wt,Ht]=J[(y+1)%I],nt=z[y].a,At=(-Math.sin(nt)*Ct+Math.cos(nt)*Bt+1)/2,ft=.08+.3*(1-At),Ot=ft+.28,jt=ct&&Z?`linear-gradient(90deg,${ot(Z,dt,mt,p,f)},${ot(Z,wt,Ht,p,f)})`:`linear-gradient(${at},${at})`,It=n.shading?`linear-gradient(rgba(0,0,0,${ft.toFixed(2)}),rgba(0,0,0,${Ot.toFixed(2)})),`:"",Ft=et?`border-bottom:${n.edgeW}px solid ${et};${N>.9?`border-left:${n.edgeW}px solid ${et};`:""}`:"",ht=document.createElement("i");ht.style.cssText=`position:absolute;left:0;top:0;box-sizing:border-box;height:var(--bb-d);transform-origin:0 0;${n.cull?"backface-visibility:hidden;":""}width:${z[y].len+.5}px;${Ft}background:${It}${jt};transform:translate(${dt}px,${mt}px) rotate(${nt*180/Math.PI}deg) rotateX(-90deg) scaleY(var(--bb-p))`,pt.appendChild(ht);}}c.appendChild(pt),!g&&!E&&L(n.tx,n.ty);}let W=p=>{let f=t.getBoundingClientRect();return [p.clientX-f.left-d.ox,p.clientY-f.top-d.oy]},A=p=>{let[f,h]=W(p);return f<0||h<0||f>d.w||h>d.h?false:m.length?Mt(m,f,h):true},V=p=>{let f=p.target;if(!f||!f.closest)return  false;try{let h=f.closest(n.ignore?`${St},${n.ignore}`:St);return !!h&&u.contains(h)}catch{return  false}},Q=p=>{let[f,h]=W(p),D=(w,H)=>Math.max(-1,Math.min(1,(w-H/2)/(H/2))),$=D(f,d.w),T=D(h,d.h),j=n.reverseHover?-1:1;E=true,L(R(n.tx*.3-j*T*n.max*.7,n.max),R(n.ty*.3-j*$*n.max*.7,n.max),"transform .15s ease-out");},O=()=>{E=false,n.springBack&&G();},Y=p=>{if(!(n.disabled||g||!P()||p.pointerType==="touch"||l?.matches)){if(!A(p)){E&&O();return}V(p)||Q(p);}},X=()=>{E&&O();},_=p=>{if(n.disabled||!A(p)||V(p))return;let f=p.pointerType==="touch",h={x:p.clientX,y:p.clientY,tx:b,ty:v,moved:false,touch:f,dragging:S()||P()&&f};g=h,C(true);let D=T=>{let j=T.clientX-h.x,w=T.clientY-h.y;if(!h.moved){if(Math.hypot(j,w)<5)return;h.moved=true,C(false);}if(!h.dragging)return;let H=n.reverseDrag?-1:1,Z=h.touch&&n.control==="hover"&&n.touchScroll?0:w;L(R(h.tx-H*Z*n.sens,n.max),R(h.ty-H*j*n.sens,n.max));},$=T=>{removeEventListener("pointermove",D),removeEventListener("pointerup",$),removeEventListener("pointercancel",$),g=null,C(false),x=h.moved&&h.dragging,x&&(P()&&!h.touch&&A(T)&&!V(T)?Q(T):(E=false,n.springBack&&G()));};addEventListener("pointermove",D),addEventListener("pointerup",$),addEventListener("pointercancel",$);},q=p=>{x&&(p.stopPropagation(),p.preventDefault(),x=false);};t.addEventListener("pointermove",Y),t.addEventListener("pointerleave",X),t.addEventListener("pointerdown",_),u.addEventListener("click",q,true);let tt=new ResizeObserver(B);return tt.observe(u),tt.observe(e),B(),{update(p){a={...a,...p,advanced:{...a.advanced,...p.advanced}},B();},destroy(){tt.disconnect(),t.removeEventListener("pointermove",Y),t.removeEventListener("pointerleave",X),t.removeEventListener("pointerdown",_),u.removeEventListener("click",q,true),t.style.touchAction="",t.style.cursor="",k&&(t.style.display=""),o.built&&(t.insertBefore(u,i),i.remove());}}}
+export{bt as a,rt as b,Rt as c};

package/dist/element.cjs

@@ -1 +1,2 @@
-'use strict';function Te(e){let r=[],s=0,o="";for(let n of e)n==="("&&s++,n===")"&&s--,n===","&&!s?(r.push(o.trim()),o=""):o+=n;return r.push(o.trim()),r}function ie(e){if((e.match(/gradient\(/g)||[]).length!==1)return null;let r=Te(e.slice(e.indexOf("(")+1,e.lastIndexOf(")"))),s=180;if(/^to /.test(r[0])||/deg$/.test(r[0])){let n=r.shift();if(/deg$/.test(n))s=parseFloat(n);else {let c=/top/.test(n),u=/bottom/.test(n),d=/left/.test(n),i=/right/.test(n);s=c&&i?45:u&&i?135:u&&d?225:c&&d?315:i?90:d?270:c?0:180;}}let o=[];for(let n of r){let c=n.match(/^(rgba?\([^)]*\))\s*([\d.]+)?%?$/);if(!c||/px|em/.test(n))return null;let u=c[1].match(/[\d.]+/g).map(Number);u.length<4&&u.push(1),o.push({raw:n,c:u,t:c[2]==null?null:+c[2]/100});}if(o.length<2)return null;o[0].t==null&&(o[0].t=0),o[o.length-1].t==null&&(o[o.length-1].t=1);for(let n=1;n<o.length;n++){if(o[n].t!=null)continue;let c=n;for(;o[c].t==null;)c++;let u=o[n-1].t,d=o[c].t;for(let i=n;i<c;i++)o[i].t=u+(d-u)*(i-n+1)/(c-n+1);}return {ang:s,st:o}}function F(e,r,s,o,n){let c=e.ang*Math.PI/180,u=Math.abs(o*Math.sin(c))+Math.abs(n*Math.cos(c)),d=((r-o/2)*Math.sin(c)-(s-n/2)*Math.cos(c))/u+.5,i=e.st;if(d<=i[0].t)return `rgba(${i[0].c})`;for(let l=1;l<i.length;l++)if(d<=i[l].t){let t=(d-i[l-1].t)/(i[l].t-i[l-1].t||1),b=i[l-1].c,v=i[l].c;return `rgba(${b.map((M,x)=>+(M+(v[x]-M)*t).toFixed(2))})`}return `rgba(${i[i.length-1].c})`}function le(e,r,s){let o=Math.min(1,r/(e[0]+e[1]),r/(e[3]+e[2]),s/(e[0]+e[3]),s/(e[1]+e[2]));return e.map(n=>n*o)}function ae(e,r,s,o){let n=[],c=[[1,e-s[1],s[1],-90,e,0],[2,e-s[2],r-s[2],0,e,r],[3,s[3],r-s[3],90,0,r],[0,s[0],s[0],180,0,0]];for(let[u,d,i,l,t,b]of c){let v=s[u],M=v>.5?Math.max(1,Math.ceil(Math.PI/2/(2*Math.acos(Math.max(0,1-o/v))))):0;if(!M)n.push([t,b]);else for(let x=0;x<=M;x++){let $=(l+90*x/M)*Math.PI/180;n.push([d+v*Math.cos($),i+v*Math.sin($)]);}}return n.reverse()}var ce={persp:{display:"grid",width:"100%",height:"100%"},obj:{display:"grid",width:"100%",height:"100%",transformStyle:"preserve-3d",willChange:"transform"},sink:{display:"grid",width:"100%",height:"100%",position:"relative",transformStyle:"preserve-3d"},walls:{position:"absolute",transformStyle:"preserve-3d",pointerEvents:"none"}},G="data-bb";var we={top:0,"top-right":45,right:90,"bottom-right":135,bottom:180,"bottom-left":225,left:270,"top-left":315},H=(e,r)=>Math.max(-r,Math.min(r,e)),Be=()=>typeof process<"u"&&!!process.env&&process.env.NODE_ENV!=="production",de=false;function Ce(){if(!(de||typeof CSS>"u"||!CSS.registerProperty)){de=true;try{CSS.registerProperty({name:"--bb-p",syntax:"<number>",inherits:!0,initialValue:"1"});}catch{}}}function pe(e){let r=e.advanced||{},s=(e.sideColor??"match").trim();return {depth:e.depth??24,control:e.control??"hover",tx:e.tilt?.x??14,ty:e.tilt?.y??22,max:e.maxAngle??60,springBack:e.springBack??true,springDur:e.springDuration??700,pressDepth:e.pressDepth,pressDur:e.pressDuration??150,side:s,shading:e.shading??s==="match",light:typeof e.light=="number"?e.light:we[e.light??"top-left"]??315,persp:e.perspective??1e3,edge:e.edgeColor??"none",edgeW:e.edgeWidth??1,touchScroll:e.touchScroll??true,disabled:e.disabled??false,tol:r.tolerance??.25,sens:r.sensitivity??.5,bounce:r.bounce??1,cull:r.cull??true}}function ue(e,r){if(typeof e=="number")return e;if(/^\s*-?[\d.]+(px)?\s*$/.test(e))return parseFloat(e);let s=document.createElement("div");s.style.cssText=`position:absolute;visibility:hidden;width:${e}`,r.appendChild(s);let o=s.getBoundingClientRect().width;return s.remove(),o}function De(e){let r=l=>e.querySelector(`[${G}="${l}"]`),s=r("persp");if(s){let l=r("sink");return {persp:s,obj:r("obj"),sink:l,walls:r("walls"),child:l.firstElementChild,built:false}}let o=e.firstElementChild;if(!o)throw new Error("brickbox: the root needs one element child");let n=l=>{let t=document.createElement("div");return t.setAttribute(G,l),Object.assign(t.style,ce[l]),t},c=n("persp"),u=n("obj"),d=n("sink"),i=n("walls");return i.setAttribute("aria-hidden","true"),e.append(c),c.append(u),u.append(d),d.append(o,i),{persp:c,obj:u,sink:d,walls:i,child:o,built:true}}function me(e,r={}){Ce();let s=De(e),{persp:o,obj:n,sink:c,walls:u,child:d}=s,i=typeof matchMedia<"u"?matchMedia("(prefers-reduced-motion: reduce)"):null,l=r,t=pe(l),b={w:0,h:0,ox:0,oy:0,pp:1},v=t.tx,M=t.ty,x=false,$=null,B=false,X=false;if(!e.style.display){let a=c.style.display;c.style.display="block";let p=/^inline/.test(getComputedStyle(d).display);c.style.display=a,e.style.display=p?"inline-block":"block",X=true;}let C=(a,p,g)=>{v=a,M=p,n.style.transition=g||"none",n.style.transform=`rotateX(${a}deg) rotateY(${-p}deg)`;},be=()=>i?.matches?"none":`transform ${t.springDur}ms cubic-bezier(.2,${1+.5*t.bounce},.4,1)`,z=()=>C(t.tx,t.ty,be()),O=a=>c.style.setProperty("--bb-p",String(a&&b.pp<1?b.pp:1));function I(){t=pe(l);let a=d.offsetWidth,p=d.offsetHeight,g=d.offsetLeft,f=d.offsetTop,y=Math.max(0,ue(t.depth,e));Be()&&y>t.persp*.5&&console.warn(`[brickbox] depth ${y}px is more than half of perspective (${t.persp}px); the box may clip or distort.`);let S=t.pressDepth==null?1:Math.min(1,Math.max(0,ue(t.pressDepth,e)/(y||1)));b={w:a,h:p,ox:g,oy:f,pp:S};let T=!!i?.matches;if(u.innerHTML="",u.hidden=t.disabled,Object.assign(u.style,{left:g+"px",top:f+"px",width:a+"px",height:p+"px"}),c.style.setProperty("--bb-d",y+"px"),c.style.transform="translateZ(calc(var(--bb-d) * (var(--bb-p) - 1)))",c.style.transition=`--bb-p ${T?0:t.pressDur}ms ease`,o.style.perspective=t.persp+"px",n.style.transformOrigin=`${g+a/2}px ${f+p/2}px ${-y/2}px`,e.style.touchAction=t.control==="drag"||t.control==="hover"&&!t.touchScroll?"none":t.control==="hover"?"pan-y":"auto",e.style.cursor=t.control==="drag"?"grab":"",t.disabled||!a||!p){n.style.transform="none";return}let E=getComputedStyle(d),ge=le(["top-left","top-right","bottom-right","bottom-left"].map(m=>{let h=E.getPropertyValue(`border-${m}-radius`).split(" ")[0];return h.endsWith("%")?parseFloat(h)/100*a:parseFloat(h)||0}),a,p),Q=E.backgroundImage,N=Q.startsWith("linear-gradient")?ie(Q):null,D=E.backgroundColor;(D==="rgba(0, 0, 0, 0)"||D==="transparent")&&(D="rgb(120,120,130)");let U=t.side==="match",R=U?D:t.side,ee=t.light*Math.PI/180,fe=Math.sin(ee),xe=-Math.cos(ee),k=ae(a,p,ge,t.tol),L=k.length,ye=m=>{let h=k[(m+1)%L];return {a:Math.atan2(h[1]-k[m][1],h[0]-k[m][0]),len:Math.hypot(h[0]-k[m][0],h[1]-k[m][1])}},w=k.map((m,h)=>ye(h)),W=t.edge==="none"||t.edge===""?null:t.edge==="auto"?"rgba(0,0,0,.5)":t.edge,te=document.createDocumentFragment();for(let m=0;m<L;m++){if(w[m].len<.01)continue;let h=(m+L-1)%L;for(;w[h].len<.01&&h!==m;)h=(h+L-1)%L;let P=Math.abs(w[m].a-w[h].a);P=Math.min(P,2*Math.PI-P);let[ne,re]=k[m],[ve,Me]=k[(m+1)%L],Y=w[m].a,ke=(-Math.sin(Y)*fe+Math.cos(Y)*xe+1)/2,se=.08+.3*(1-ke),Ee=se+.28,$e=U&&N?`linear-gradient(90deg,${F(N,ne,re,a,p)},${F(N,ve,Me,a,p)})`:`linear-gradient(${R},${R})`,Le=t.shading?`linear-gradient(rgba(0,0,0,${se.toFixed(2)}),rgba(0,0,0,${Ee.toFixed(2)})),`:"",Se=W?`border-bottom:${t.edgeW}px solid ${W};${P>.9?`border-left:${t.edgeW}px solid ${W};`:""}`:"",oe=document.createElement("i");oe.style.cssText=`position:absolute;left:0;top:0;box-sizing:border-box;height:var(--bb-d);transform-origin:0 0;${t.cull?"backface-visibility:hidden;":""}width:${w[m].len+.5}px;${Se}background:${Le}${$e};transform:translate(${ne}px,${re}px) rotate(${Y*180/Math.PI}deg) rotateX(-90deg) scaleY(var(--bb-p))`,te.appendChild(oe);}u.appendChild(te),!$&&!x&&C(t.tx,t.ty);}let V=a=>{let p=e.getBoundingClientRect(),g=p.left+b.ox,f=p.top+b.oy;return a.clientX>=g&&a.clientX<=g+b.w&&a.clientY>=f&&a.clientY<=f+b.h},q=()=>{x=false,t.springBack&&z();},_=a=>{if(t.disabled||$||t.control!=="hover"||a.pointerType==="touch"||i?.matches)return;if(!V(a)){x&&q();return}let p=e.getBoundingClientRect(),g=(S,T,E)=>Math.max(-1,Math.min(1,(S-T-E/2)/(E/2))),f=g(a.clientX,p.left+b.ox,b.w),y=g(a.clientY,p.top+b.oy,b.h);x=true,C(H(t.tx*.3-y*t.max*.7,t.max),H(t.ty*.3-f*t.max*.7,t.max),"transform .15s ease-out");},Z=()=>{x&&q();},J=a=>{if(t.disabled||!V(a))return;let p={x:a.clientX,y:a.clientY,tx:v,ty:M,moved:false,touch:a.pointerType==="touch",dragging:t.control==="drag"||t.control==="hover"&&a.pointerType==="touch"};$=p,O(true);let g=y=>{let S=y.clientX-p.x,T=y.clientY-p.y;if(!p.moved){if(Math.hypot(S,T)<5)return;p.moved=true,O(false);}if(!p.dragging)return;let E=p.touch&&t.control==="hover"&&t.touchScroll?0:T;C(H(p.tx-E*t.sens,t.max),H(p.ty-S*t.sens,t.max));},f=()=>{removeEventListener("pointermove",g),removeEventListener("pointerup",f),removeEventListener("pointercancel",f),$=null,O(false),B=p.moved&&p.dragging,B&&t.springBack&&z();};addEventListener("pointermove",g),addEventListener("pointerup",f),addEventListener("pointercancel",f);},K=a=>{B&&(a.stopPropagation(),a.preventDefault(),B=false);};e.addEventListener("pointermove",_),e.addEventListener("pointerleave",Z),e.addEventListener("pointerdown",J),d.addEventListener("click",K,true);let j=new ResizeObserver(I);return j.observe(d),j.observe(c),I(),{update(a){l={...l,...a,advanced:{...l.advanced,...a.advanced}},I();},destroy(){j.disconnect(),e.removeEventListener("pointermove",_),e.removeEventListener("pointerleave",Z),e.removeEventListener("pointerdown",J),d.removeEventListener("click",K,true),e.style.touchAction="",e.style.cursor="",X&&(e.style.display=""),s.built&&(e.insertBefore(d,o),o.remove());}}}var Pe=["depth","control","tilt","max-angle","spring-back","spring-duration","press-depth","press-duration","side-color","shading","light","perspective","edge-color","edge-width","touch-scroll","disabled","tolerance"];function he(e){let r=i=>e.getAttribute(i),s=i=>{let l=r(i);return l==null||l===""||isNaN(+l)?void 0:+l},o=i=>{let l=r(i);return l==null?void 0:l!=="false"},n=i=>{let l=r(i);return l==null?void 0:l!==""&&!isNaN(+l)?+l:l},c=r("tilt"),u;if(c){let[i,l]=c.split(/[ ,]+/).map(Number);u={x:i,y:l};}let d=r("light");return {depth:n("depth"),control:r("control")||void 0,tilt:u,maxAngle:s("max-angle"),springBack:o("spring-back"),springDuration:s("spring-duration"),pressDepth:n("press-depth"),pressDuration:s("press-duration"),sideColor:r("side-color")||void 0,shading:o("shading"),light:d==null?void 0:isNaN(+d)?d:+d,perspective:s("perspective"),edgeColor:r("edge-color")||void 0,edgeWidth:s("edge-width"),touchScroll:o("touch-scroll"),disabled:o("disabled"),advanced:{tolerance:s("tolerance")}}}var A=class extends HTMLElement{connectedCallback(){this.inst||(this.inst=me(this,he(this)));}attributeChangedCallback(){this.inst?.update(he(this));}disconnectedCallback(){this.inst?.destroy(),this.inst=void 0;}};A.observedAttributes=Pe;function We(e="brick-box"){typeof customElements<"u"&&!customElements.get(e)&&customElements.define(e,A);}exports.BrickBoxElement=A;exports.defineBrickBox=We;
+'use strict';function xt(t){let n=[],r=0,i="";for(let s of t)s==="("&&r++,s===")"&&r--,s===","&&!r?(n.push(i.trim()),i=""):i+=s;return n.push(i.trim()),n}function vt(t){if((t.match(/gradient\(/g)||[]).length!==1)return null;let n=xt(t.slice(t.indexOf("(")+1,t.lastIndexOf(")"))),r=180;if(/^to /.test(n[0])||/deg$/.test(n[0])){let s=n.shift();if(/deg$/.test(s))r=parseFloat(s);else {let e=/top/.test(s),a=/bottom/.test(s),u=/left/.test(s),c=/right/.test(s);r=e&&c?45:a&&c?135:a&&u?225:e&&u?315:c?90:u?270:e?0:180;}}let i=[];for(let s of n){let e=s.match(/^(rgba?\([^)]*\))\s*([\d.]+)?%?$/);if(!e||/px|em/.test(s))return null;let a=e[1].match(/[\d.]+/g).map(Number);a.length<4&&a.push(1),i.push({raw:s,c:a,t:e[2]==null?null:+e[2]/100});}if(i.length<2)return null;i[0].t==null&&(i[0].t=0),i[i.length-1].t==null&&(i[i.length-1].t=1);for(let s=1;s<i.length;s++){if(i[s].t!=null)continue;let e=s;for(;i[e].t==null;)e++;let a=i[s-1].t,u=i[e].t;for(let c=s;c<e;c++)i[c].t=a+(u-a)*(c-s+1)/(e-s+1);}return {ang:r,st:i}}function ot(t,n,r,i,s){let e=t.ang*Math.PI/180,a=Math.abs(i*Math.sin(e))+Math.abs(s*Math.cos(e)),u=((n-i/2)*Math.sin(e)-(r-s/2)*Math.cos(e))/a+.5,c=t.st;if(u<=c[0].t)return `rgba(${c[0].c})`;for(let l=1;l<c.length;l++)if(u<=c[l].t){let o=(u-c[l-1].t)/(c[l].t-c[l-1].t||1),d=c[l-1].c,m=c[l].c;return `rgba(${d.map((b,y)=>+(b+(m[y]-b)*o).toFixed(2))})`}return `rgba(${c[c.length-1].c})`}function qt(t){let n=0;for(let r=0;r<t.length;r++){let[i,s]=t[r],[e,a]=t[(r+1)%t.length];n+=i*a-e*s;}return n/2}function zt(t,n=-1){let r=qt(t);return r===0||Math.sign(r)===n?t:[...t].reverse()}function yt(t,n,r){let i=false;for(let s=0,e=t.length-1;s<t.length;e=s++){let[a,u]=t[s],[c,l]=t[e];u>r!=l>r&&n<(c-a)*(r-u)/(l-u)+a&&(i=!i);}return i}function Mt(t,n,r){let i=false;for(let s of t)yt(s,n,r)&&(i=!i);return i}function Vt(t,n,r){let i=r[0]-n[0],s=r[1]-n[1],e=i*i+s*s;return e?Math.abs((t[0]-n[0])*s-(t[1]-n[1])*i)/Math.sqrt(e):Math.hypot(t[0]-n[0],t[1]-n[1])}function Et(t,n){let r=t.length;if(r<4)return t;let i=0,s=-1;for(let c=1;c<r;c++){let l=Math.hypot(t[c][0]-t[0][0],t[c][1]-t[0][1]);l>s&&(s=l,i=c);}let e=new Array(r).fill(false);e[0]=e[i]=true;let a=[...t,t[0]],u=[[0,i],[i,r]];for(;u.length;){let[c,l]=u.pop(),o=-1,d=-1;for(let m=c+1;m<l;m++){let b=Vt(a[m],a[c],a[l]);b>o&&(o=b,d=m);}o>n&&d>0&&(e[d]=true,u.push([c,d],[d,l]));}return t.filter((c,l)=>e[l])}function it(t,n,r,i){let s=Math.min(1,r/(t[0]+t[1]),r/(t[3]+t[2]),i/(n[0]+n[3]),i/(n[1]+n[2]));return [t.map(e=>e*s),n.map(e=>e*s)]}function lt(t,n,r,i,s=r){let e=[],a=[[1,t-r[1],s[1],-90,t,0],[2,t-r[2],n-s[2],0,t,n],[3,r[3],n-s[3],90,0,n],[0,r[0],s[0],180,0,0]];for(let[u,c,l,o,d,m]of a){let b=r[u],y=s[u],E=Math.max(b,y),g=E>.5?Math.max(1,Math.ceil(Math.PI/2/(2*Math.acos(Math.max(0,1-i/E))))):0;if(!g)e.push([d,m]);else for(let x=0;x<=g;x++){let $=(o+90*x/g)*Math.PI/180;e.push([c+b*Math.cos($),l+y*Math.sin($)]);}}return e.reverse()}function gt(t,n,r,i,s){let e=Math.max(r,i,s),a=Math.max(12,Math.ceil(Math.PI/Math.acos(Math.max(0,1-s/e)))),u=[];for(let c=0;c<a;c++){let l=2*Math.PI*c/a;u.push([t+r*Math.cos(l),n+i*Math.sin(l)]);}return u}var M=(t,n)=>t==null?NaN:/^-?[\d.]+(px)?$/.test(t)?parseFloat(t):/^-?[\d.]+%$/.test(t)?parseFloat(t)/100*n:NaN,Xt={left:"0%",top:"0%",center:"50%",right:"100%",bottom:"100%"};function st(t){return t.length===1?[t[0],t[0],t[0],t[0]]:t.length===2?[t[0],t[1],t[0],t[1]]:t.length===3?[t[0],t[1],t[2],t[1]]:t}function kt(t,n,r,i){let s=t.trim().match(/^(polygon|circle|ellipse|inset)\(([\s\S]*)\)$/);if(!s)return null;let e=s[2].trim();if(s[1]==="polygon"){let g=xt(e);/^(nonzero|evenodd)$/.test(g[0])&&g.shift();let x=[];for(let $ of g){let k=$.trim().split(/\s+/),L=M(k[0],n),S=M(k[1],r);if(k.length!==2||isNaN(L)||isNaN(S))return null;x.push([L,S]);}return x.length>=3?[x]:null}if(s[1]==="inset"){let[g,x]=e.split(/\s+round\s+/),$=g.trim().split(/\s+/);if($.length>4)return null;let k=st($),L=M(k[0],r),S=M(k[1],n),K=M(k[2],r),F=M(k[3],n),B=n-F-S,C=r-L-K;if([L,S,K,F].some(isNaN)||!(B>0)||!(C>0))return null;let G=[0,0,0,0],A=[0,0,0,0];if(x){let[O,Y]=x.split("/"),X=O.trim().split(/\s+/),_=(Y??O).trim().split(/\s+/);if(X.length>4||_.length>4||(G=st(X).map(q=>M(q,B)),A=st(_).map(q=>M(q,C)),[...G,...A].some(isNaN)))return null}let[V,Q]=it(G,A,B,C);return [lt(B,C,V,i,Q).map(([O,Y])=>[O+F,Y+L])]}let[a,u]=e.split(/\s+at\s+/),c=(u||"center center").trim().split(/\s+/).map(g=>Xt[g]??g),l=M(c[0],n),o=M(c[1]??"50%",r),d=a.trim();if(isNaN(l)||isNaN(o))return null;if(s[1]==="circle"){let g=d===""||d==="closest-side"?Math.min(l,n-l,o,r-o):d==="farthest-side"?Math.max(l,n-l,o,r-o):M(d,Math.sqrt((n*n+r*r)/2));return g>0?[gt(l,o,g,g,i)]:null}let[m,b]=d?d.split(/\s+/):["closest-side","closest-side"],y=m==="closest-side"?Math.min(l,n-l):m==="farthest-side"?Math.max(l,n-l):M(m,n),E=b==="closest-side"?Math.min(o,r-o):b==="farthest-side"?Math.max(o,r-o):M(b,r);return y>0&&E>0?[gt(l,o,y,E,i)]:null}function Pt(t){return t.map((n,r)=>{let i=0;return t.forEach((s,e)=>{e!==r&&yt(s,n[0][0],n[0][1])&&i++;}),zt(n,i%2?1:-1)})}function $t(t,n,r){if(t.every(([e,a])=>e>=0&&e<=n&&a>=0&&a<=r))return t;let i=[[e=>e[0]>=0,(e,a)=>[0,e[1]+(a[1]-e[1])*(0-e[0])/(a[0]-e[0])]],[e=>e[0]<=n,(e,a)=>[n,e[1]+(a[1]-e[1])*(n-e[0])/(a[0]-e[0])]],[e=>e[1]>=0,(e,a)=>[e[0]+(a[0]-e[0])*(0-e[1])/(a[1]-e[1]),0]],[e=>e[1]<=r,(e,a)=>[e[0]+(a[0]-e[0])*(r-e[1])/(a[1]-e[1]),r]]],s=t;for(let[e,a]of i){let u=s;s=[];for(let c=0;c<u.length;c++){let l=u[c],o=u[(c+u.length-1)%u.length];e(l)?(e(o)||s.push(a(o,l)),s.push(l)):e(o)&&s.push(a(o,l));}if(!s.length)break}return s}var Lt={persp:{display:"grid",width:"100%",height:"100%"},obj:{display:"grid",width:"100%",height:"100%",transformStyle:"preserve-3d",willChange:"transform"},sink:{display:"grid",width:"100%",height:"100%",position:"relative",transformStyle:"preserve-3d"},walls:{position:"absolute",transformStyle:"preserve-3d",pointerEvents:"none"}},ct="data-bb";var _t={top:0,"top-right":45,right:90,"bottom-right":135,bottom:180,"bottom-left":225,left:270,"top-left":315},St="[data-brickbox-ignore]",R=(t,n)=>Math.max(-n,Math.min(n,t)),Bt=()=>typeof process<"u"&&!!process.env&&process.env.NODE_ENV!=="production",Tt=false;function Zt(){if(!(Tt||typeof CSS>"u"||!CSS.registerProperty)){Tt=true;try{CSS.registerProperty({name:"--bb-p",syntax:"<number>",inherits:!0,initialValue:"1"});}catch{}}}function Dt(t){let n=t.advanced||{},r=(t.sideColor??"match").trim();return {depth:t.depth??24,control:t.control??"hover",tx:t.tilt?.x??14,ty:t.tilt?.y??22,max:t.maxAngle??60,springBack:t.springBack??true,springDur:t.springDuration??700,pressDepth:t.pressDepth,pressDur:t.pressDuration??150,side:r,shading:t.shading??r==="match",light:typeof t.light=="number"?t.light:_t[t.light??"top-left"]??315,persp:t.perspective??1e3,edge:t.edgeColor??"none",edgeW:t.edgeWidth??1,touchScroll:t.touchScroll??true,disabled:t.disabled??false,reverseHover:t.reverseHover??false,reverseDrag:t.reverseDrag??false,ignore:t.ignore||void 0,tol:n.tolerance??.25,sens:n.sensitivity??.5,bounce:n.bounce??1,cull:n.cull??true}}function Nt(t,n){if(typeof t=="number")return t;if(/^\s*-?[\d.]+(px)?\s*$/.test(t))return parseFloat(t);let r=document.createElement("div");r.style.cssText=`position:absolute;visibility:hidden;width:${t}`,n.appendChild(r);let i=r.getBoundingClientRect().width;return r.remove(),i}function Jt(t,n,r){let i="http://www.w3.org/2000/svg",s=document.createElementNS(i,"svg");s.setAttribute("width","0"),s.setAttribute("height","0"),s.style.cssText="position:absolute;visibility:hidden;pointer-events:none",r.appendChild(s);let e=[];for(let a of t.split(/(?=M)/)){if(!a.trim())continue;let u=document.createElementNS(i,"path");u.setAttribute("d",a),s.appendChild(u);let c=0;try{c=u.getTotalLength();}catch{}if(!(c>0))continue;let l=Math.max(1,c/1500),o=[];for(let m=0;m<c;m+=l){let b=u.getPointAtLength(m);o.push([b.x,b.y]);}let d=Et(o,n);d.length>=3&&e.push(d);}return s.remove(),e}function Kt(t,n,r,i,s){let e=(t.getPropertyValue("clip-path")||t.getPropertyValue("-webkit-clip-path")||"").trim().replace(/\s+border-box$/,"");if(e&&e!=="none"){let d=e.match(/^path\(\s*(?:(?:evenodd|nonzero)\s*,\s*)?["']([^"']*)["']\s*\)$/),b=((d?Jt(d[1],i,s):kt(e,n,r,i))||[]).map(y=>$t(y,n,r)).filter(y=>y.length>=3);if(b.length)return Pt(b);Bt()&&console.warn(`[brickbox] clip-path "${e}" is not supported, so the walls use the rounded rectangle instead.`);}let a=[],u=[],c=(d,m)=>d.endsWith("%")?parseFloat(d)/100*m:parseFloat(d)||0;for(let d of ["top-left","top-right","bottom-right","bottom-left"]){let m=t.getPropertyValue(`border-${d}-radius`).trim().split(/\s+/);a.push(c(m[0]||"0",n)),u.push(c(m[1]??m[0]??"0",r));}let[l,o]=it(a,u,n,r);return [lt(n,r,l,i,o)]}function Qt(t){let n=l=>t.querySelector(`[${ct}="${l}"]`),r=n("persp");if(r){let l=n("sink");return {persp:r,obj:n("obj"),sink:l,walls:n("walls"),child:l.firstElementChild,built:false}}let i=t.firstElementChild;if(!i)throw new Error("brickbox: the root needs one element child");let s=l=>{let o=document.createElement("div");return o.setAttribute(ct,l),Object.assign(o.style,Lt[l]),o},e=s("persp"),a=s("obj"),u=s("sink"),c=s("walls");return c.setAttribute("aria-hidden","true"),t.append(e),e.append(a),a.append(u),u.append(i,c),{persp:e,obj:a,sink:u,walls:c,child:i,built:true}}function Ct(t,n={}){Zt();let r=Qt(t),{persp:i,obj:s,sink:e,walls:a,child:u}=r,c=typeof matchMedia<"u"?matchMedia("(prefers-reduced-motion: reduce)"):null,l=n,o=Dt(l),d={w:0,h:0,ox:0,oy:0,pp:1},m=[],b=o.tx,y=o.ty,E=false,g=null,x=false,$=false;if(!t.style.display){let p=e.style.display;e.style.display="block";let h=/^inline/.test(getComputedStyle(u).display);e.style.display=p,t.style.display=h?"inline-block":"block",$=true;}let k=()=>o.control==="hover"||o.control==="both",L=()=>o.control==="drag"||o.control==="both",S=(p,h,f)=>{b=p,y=h,s.style.transition=f||"none",s.style.transform=`rotateX(${p}deg) rotateY(${-h}deg)`;},K=()=>c?.matches?"none":`transform ${o.springDur}ms cubic-bezier(.2,${1+.5*o.bounce},.4,1)`,F=()=>S(o.tx,o.ty,K()),B=p=>e.style.setProperty("--bb-p",String(p&&d.pp<1?d.pp:1));function C(){o=Dt(l);let p=u.offsetWidth,h=u.offsetHeight,f=u.offsetLeft,D=u.offsetTop,P=Math.max(0,Nt(o.depth,t));Bt()&&P>o.persp*.5&&console.warn(`[brickbox] depth ${P}px is more than half of perspective (${o.persp}px); the box may clip or distort.`);let T=o.pressDepth==null?1:Math.min(1,Math.max(0,Nt(o.pressDepth,t)/(P||1)));d={w:p,h,ox:f,oy:D,pp:T};let I=!!c?.matches;if(a.innerHTML="",a.hidden=o.disabled,Object.assign(a.style,{left:f+"px",top:D+"px",width:p+"px",height:h+"px"}),e.style.setProperty("--bb-d",P+"px"),e.style.transform="translateZ(calc(var(--bb-d) * (var(--bb-p) - 1)))",e.style.transition=`--bb-p ${I?0:o.pressDur}ms ease`,i.style.perspective=o.persp+"px",s.style.transformOrigin=`${f+p/2}px ${D+h/2}px ${-P/2}px`,t.style.touchAction=L()||o.control==="hover"&&!o.touchScroll?"none":o.control==="hover"?"pan-y":"auto",t.style.cursor=L()?"grab":"",m=[],o.disabled||!p||!h){s.style.transform="none";return}let H=getComputedStyle(u);m=Kt(H,p,h,o.tol,t);let w=H.backgroundImage,Z=w.startsWith("linear-gradient")?vt(w):null,U=H.backgroundColor;(U==="rgba(0, 0, 0, 0)"||U==="transparent")&&(U="rgb(120,120,130)");let at=o.side==="match",ut=at?U:o.side,pt=o.light*Math.PI/180,wt=Math.sin(pt),At=-Math.cos(pt),nt=o.edge==="none"||o.edge===""?null:o.edge==="auto"?"rgba(0,0,0,.5)":o.edge,dt=document.createDocumentFragment();for(let J of m){let j=J.length,z=J.map((v,W)=>{let N=J[(W+1)%j];return {a:Math.atan2(N[1]-v[1],N[0]-v[0]),len:Math.hypot(N[0]-v[0],N[1]-v[1])}});for(let v=0;v<j;v++){if(z[v].len<.01)continue;let W=(v+j-1)%j;for(;z[W].len<.01&&W!==v;)W=(W+j-1)%j;let N=Math.abs(z[v].a-z[W].a);N=Math.min(N,2*Math.PI-N);let[mt,ht]=J[v],[Ot,It]=J[(v+1)%j],rt=z[v].a,jt=(-Math.sin(rt)*wt+Math.cos(rt)*At+1)/2,ft=.08+.3*(1-jt),Wt=ft+.28,Ft=at&&Z?`linear-gradient(90deg,${ot(Z,mt,ht,p,h)},${ot(Z,Ot,It,p,h)})`:`linear-gradient(${ut},${ut})`,Gt=o.shading?`linear-gradient(rgba(0,0,0,${ft.toFixed(2)}),rgba(0,0,0,${Wt.toFixed(2)})),`:"",Yt=nt?`border-bottom:${o.edgeW}px solid ${nt};${N>.9?`border-left:${o.edgeW}px solid ${nt};`:""}`:"",bt=document.createElement("i");bt.style.cssText=`position:absolute;left:0;top:0;box-sizing:border-box;height:var(--bb-d);transform-origin:0 0;${o.cull?"backface-visibility:hidden;":""}width:${z[v].len+.5}px;${Yt}background:${Gt}${Ft};transform:translate(${mt}px,${ht}px) rotate(${rt*180/Math.PI}deg) rotateX(-90deg) scaleY(var(--bb-p))`,dt.appendChild(bt);}}a.appendChild(dt),!g&&!E&&S(o.tx,o.ty);}let G=p=>{let h=t.getBoundingClientRect();return [p.clientX-h.left-d.ox,p.clientY-h.top-d.oy]},A=p=>{let[h,f]=G(p);return h<0||f<0||h>d.w||f>d.h?false:m.length?Mt(m,h,f):true},V=p=>{let h=p.target;if(!h||!h.closest)return  false;try{let f=h.closest(o.ignore?`${St},${o.ignore}`:St);return !!f&&u.contains(f)}catch{return  false}},Q=p=>{let[h,f]=G(p),D=(H,w)=>Math.max(-1,Math.min(1,(H-w/2)/(w/2))),P=D(h,d.w),T=D(f,d.h),I=o.reverseHover?-1:1;E=true,S(R(o.tx*.3-I*T*o.max*.7,o.max),R(o.ty*.3-I*P*o.max*.7,o.max),"transform .15s ease-out");},O=()=>{E=false,o.springBack&&F();},Y=p=>{if(!(o.disabled||g||!k()||p.pointerType==="touch"||c?.matches)){if(!A(p)){E&&O();return}V(p)||Q(p);}},X=()=>{E&&O();},_=p=>{if(o.disabled||!A(p)||V(p))return;let h=p.pointerType==="touch",f={x:p.clientX,y:p.clientY,tx:b,ty:y,moved:false,touch:h,dragging:L()||k()&&h};g=f,B(true);let D=T=>{let I=T.clientX-f.x,H=T.clientY-f.y;if(!f.moved){if(Math.hypot(I,H)<5)return;f.moved=true,B(false);}if(!f.dragging)return;let w=o.reverseDrag?-1:1,Z=f.touch&&o.control==="hover"&&o.touchScroll?0:H;S(R(f.tx-w*Z*o.sens,o.max),R(f.ty-w*I*o.sens,o.max));},P=T=>{removeEventListener("pointermove",D),removeEventListener("pointerup",P),removeEventListener("pointercancel",P),g=null,B(false),x=f.moved&&f.dragging,x&&(k()&&!f.touch&&A(T)&&!V(T)?Q(T):(E=false,o.springBack&&F()));};addEventListener("pointermove",D),addEventListener("pointerup",P),addEventListener("pointercancel",P);},q=p=>{x&&(p.stopPropagation(),p.preventDefault(),x=false);};t.addEventListener("pointermove",Y),t.addEventListener("pointerleave",X),t.addEventListener("pointerdown",_),u.addEventListener("click",q,true);let et=new ResizeObserver(C);return et.observe(u),et.observe(e),C(),{update(p){l={...l,...p,advanced:{...l.advanced,...p.advanced}},C();},destroy(){et.disconnect(),t.removeEventListener("pointermove",Y),t.removeEventListener("pointerleave",X),t.removeEventListener("pointerdown",_),u.removeEventListener("click",q,true),t.style.touchAction="",t.style.cursor="",$&&(t.style.display=""),r.built&&(t.insertBefore(u,i),i.remove());}}}var Ut=["depth","control","tilt","max-angle","spring-back","spring-duration","press-depth","press-duration","side-color","shading","light","perspective","edge-color","edge-width","touch-scroll","disabled","tolerance","reverse-hover","reverse-drag","ignore"];function Ht(t){let n=c=>t.getAttribute(c),r=c=>{let l=n(c);return l==null||l===""||isNaN(+l)?void 0:+l},i=c=>{let l=n(c);return l==null?void 0:l!=="false"},s=c=>{let l=n(c);return l==null?void 0:l!==""&&!isNaN(+l)?+l:l},e=n("tilt"),a;if(e){let[c,l]=e.split(/[ ,]+/).map(Number);a={x:c,y:l};}let u=n("light");return {depth:s("depth"),control:n("control")||void 0,tilt:a,maxAngle:r("max-angle"),springBack:i("spring-back"),springDuration:r("spring-duration"),pressDepth:s("press-depth"),pressDuration:r("press-duration"),sideColor:n("side-color")||void 0,shading:i("shading"),light:u==null?void 0:isNaN(+u)?u:+u,perspective:r("perspective"),edgeColor:n("edge-color")||void 0,edgeWidth:r("edge-width"),touchScroll:i("touch-scroll"),reverseHover:i("reverse-hover"),reverseDrag:i("reverse-drag"),ignore:n("ignore")||void 0,disabled:i("disabled"),advanced:{tolerance:r("tolerance")}}}var tt=class extends HTMLElement{connectedCallback(){this.inst||(this.inst=Ct(this,Ht(this)));}attributeChangedCallback(){this.inst?.update(Ht(this));}disconnectedCallback(){this.inst?.destroy(),this.inst=void 0;}};tt.observedAttributes=Ut;function oe(t="brick-box"){typeof customElements<"u"&&!customElements.get(t)&&customElements.define(t,tt);}
+exports.BrickBoxElement=tt;exports.defineBrickBox=oe;

package/dist/element.js

@@ -1 +1 @@
-import {c}from'./chunk-3CCNRF7U.js';var g=["depth","control","tilt","max-angle","spring-back","spring-duration","press-depth","press-duration","side-color","shading","light","perspective","edge-color","edge-width","touch-scroll","disabled","tolerance"];function u(s){let n=e=>s.getAttribute(e),i=e=>{let t=n(e);return t==null||t===""||isNaN(+t)?void 0:+t},o=e=>{let t=n(e);return t==null?void 0:t!=="false"},l=e=>{let t=n(e);return t==null?void 0:t!==""&&!isNaN(+t)?+t:t},c=n("tilt"),a;if(c){let[e,t]=c.split(/[ ,]+/).map(Number);a={x:e,y:t};}let r=n("light");return {depth:l("depth"),control:n("control")||void 0,tilt:a,maxAngle:i("max-angle"),springBack:o("spring-back"),springDuration:i("spring-duration"),pressDepth:l("press-depth"),pressDuration:i("press-duration"),sideColor:n("side-color")||void 0,shading:o("shading"),light:r==null?void 0:isNaN(+r)?r:+r,perspective:i("perspective"),edgeColor:n("edge-color")||void 0,edgeWidth:i("edge-width"),touchScroll:o("touch-scroll"),disabled:o("disabled"),advanced:{tolerance:i("tolerance")}}}var d=class extends HTMLElement{connectedCallback(){this.inst||(this.inst=c(this,u(this)));}attributeChangedCallback(){this.inst?.update(u(this));}disconnectedCallback(){this.inst?.destroy(),this.inst=void 0;}};d.observedAttributes=g;function f(s="brick-box"){typeof customElements<"u"&&!customElements.get(s)&&customElements.define(s,d);}export{d as BrickBoxElement,f as defineBrickBox};
+import {c}from'./chunk-VDSG5ZZE.js';var g=["depth","control","tilt","max-angle","spring-back","spring-duration","press-depth","press-duration","side-color","shading","light","perspective","edge-color","edge-width","touch-scroll","disabled","tolerance","reverse-hover","reverse-drag","ignore"];function u(r){let t=n=>r.getAttribute(n),i=n=>{let e=t(n);return e==null||e===""||isNaN(+e)?void 0:+e},s=n=>{let e=t(n);return e==null?void 0:e!=="false"},l=n=>{let e=t(n);return e==null?void 0:e!==""&&!isNaN(+e)?+e:e},c=t("tilt"),a;if(c){let[n,e]=c.split(/[ ,]+/).map(Number);a={x:n,y:e};}let o=t("light");return {depth:l("depth"),control:t("control")||void 0,tilt:a,maxAngle:i("max-angle"),springBack:s("spring-back"),springDuration:i("spring-duration"),pressDepth:l("press-depth"),pressDuration:i("press-duration"),sideColor:t("side-color")||void 0,shading:s("shading"),light:o==null?void 0:isNaN(+o)?o:+o,perspective:i("perspective"),edgeColor:t("edge-color")||void 0,edgeWidth:i("edge-width"),touchScroll:s("touch-scroll"),reverseHover:s("reverse-hover"),reverseDrag:s("reverse-drag"),ignore:t("ignore")||void 0,disabled:s("disabled"),advanced:{tolerance:i("tolerance")}}}var d=class extends HTMLElement{connectedCallback(){this.inst||(this.inst=c(this,u(this)));}attributeChangedCallback(){this.inst?.update(u(this));}disconnectedCallback(){this.inst?.destroy(),this.inst=void 0;}};d.observedAttributes=g;function f(r="brick-box"){typeof customElements<"u"&&!customElements.get(r)&&customElements.define(r,d);}export{d as BrickBoxElement,f as defineBrickBox};

package/dist/index.cjs

@@ -1 +1,2 @@
-'use strict';function ke(e){let i=[],o=0,s="";for(let n of e)n==="("&&o++,n===")"&&o--,n===","&&!o?(i.push(s.trim()),s=""):s+=n;return i.push(s.trim()),i}function oe(e){if((e.match(/gradient\(/g)||[]).length!==1)return null;let i=ke(e.slice(e.indexOf("(")+1,e.lastIndexOf(")"))),o=180;if(/^to /.test(i[0])||/deg$/.test(i[0])){let n=i.shift();if(/deg$/.test(n))o=parseFloat(n);else {let l=/top/.test(n),d=/bottom/.test(n),p=/left/.test(n),c=/right/.test(n);o=l&&c?45:d&&c?135:d&&p?225:l&&p?315:c?90:p?270:l?0:180;}}let s=[];for(let n of i){let l=n.match(/^(rgba?\([^)]*\))\s*([\d.]+)?%?$/);if(!l||/px|em/.test(n))return null;let d=l[1].match(/[\d.]+/g).map(Number);d.length<4&&d.push(1),s.push({raw:n,c:d,t:l[2]==null?null:+l[2]/100});}if(s.length<2)return null;s[0].t==null&&(s[0].t=0),s[s.length-1].t==null&&(s[s.length-1].t=1);for(let n=1;n<s.length;n++){if(s[n].t!=null)continue;let l=n;for(;s[l].t==null;)l++;let d=s[n-1].t,p=s[l].t;for(let c=n;c<l;c++)s[c].t=d+(p-d)*(c-n+1)/(l-n+1);}return {ang:o,st:s}}function F(e,i,o,s,n){let l=e.ang*Math.PI/180,d=Math.abs(s*Math.sin(l))+Math.abs(n*Math.cos(l)),p=((i-s/2)*Math.sin(l)-(o-n/2)*Math.cos(l))/d+.5,c=e.st;if(p<=c[0].t)return `rgba(${c[0].c})`;for(let u=1;u<c.length;u++)if(p<=c[u].t){let t=(p-c[u-1].t)/(c[u].t-c[u-1].t||1),h=c[u-1].c,v=c[u].c;return `rgba(${h.map((M,y)=>+(M+(v[y]-M)*t).toFixed(2))})`}return `rgba(${c[c.length-1].c})`}function ie(e,i,o){let s=Math.min(1,i/(e[0]+e[1]),i/(e[3]+e[2]),o/(e[0]+e[3]),o/(e[1]+e[2]));return e.map(n=>n*s)}function le(e,i,o,s){let n=[],l=[[1,e-o[1],o[1],-90,e,0],[2,e-o[2],i-o[2],0,e,i],[3,o[3],i-o[3],90,0,i],[0,o[0],o[0],180,0,0]];for(let[d,p,c,u,t,h]of l){let v=o[d],M=v>.5?Math.max(1,Math.ceil(Math.PI/2/(2*Math.acos(Math.max(0,1-s/v))))):0;if(!M)n.push([t,h]);else for(let y=0;y<=M;y++){let k=(u+90*y/M)*Math.PI/180;n.push([p+v*Math.cos(k),c+v*Math.sin(k)]);}}return n.reverse()}var ae={persp:{display:"grid",width:"100%",height:"100%"},obj:{display:"grid",width:"100%",height:"100%",transformStyle:"preserve-3d",willChange:"transform"},sink:{display:"grid",width:"100%",height:"100%",position:"relative",transformStyle:"preserve-3d"},walls:{position:"absolute",transformStyle:"preserve-3d",pointerEvents:"none"}},G="data-bb";var Le={top:0,"top-right":45,right:90,"bottom-right":135,bottom:180,"bottom-left":225,left:270,"top-left":315},H=(e,i)=>Math.max(-i,Math.min(i,e)),Se=()=>typeof process<"u"&&!!process.env&&process.env.NODE_ENV!=="production",ce=false;function Te(){if(!(ce||typeof CSS>"u"||!CSS.registerProperty)){ce=true;try{CSS.registerProperty({name:"--bb-p",syntax:"<number>",inherits:!0,initialValue:"1"});}catch{}}}function pe(e){let i=e.advanced||{},o=(e.sideColor??"match").trim();return {depth:e.depth??24,control:e.control??"hover",tx:e.tilt?.x??14,ty:e.tilt?.y??22,max:e.maxAngle??60,springBack:e.springBack??true,springDur:e.springDuration??700,pressDepth:e.pressDepth,pressDur:e.pressDuration??150,side:o,shading:e.shading??o==="match",light:typeof e.light=="number"?e.light:Le[e.light??"top-left"]??315,persp:e.perspective??1e3,edge:e.edgeColor??"none",edgeW:e.edgeWidth??1,touchScroll:e.touchScroll??true,disabled:e.disabled??false,tol:i.tolerance??.25,sens:i.sensitivity??.5,bounce:i.bounce??1,cull:i.cull??true}}function ue(e,i){if(typeof e=="number")return e;if(/^\s*-?[\d.]+(px)?\s*$/.test(e))return parseFloat(e);let o=document.createElement("div");o.style.cssText=`position:absolute;visibility:hidden;width:${e}`,i.appendChild(o);let s=o.getBoundingClientRect().width;return o.remove(),s}function we(e){let i=u=>e.querySelector(`[${G}="${u}"]`),o=i("persp");if(o){let u=i("sink");return {persp:o,obj:i("obj"),sink:u,walls:i("walls"),child:u.firstElementChild,built:false}}let s=e.firstElementChild;if(!s)throw new Error("brickbox: the root needs one element child");let n=u=>{let t=document.createElement("div");return t.setAttribute(G,u),Object.assign(t.style,ae[u]),t},l=n("persp"),d=n("obj"),p=n("sink"),c=n("walls");return c.setAttribute("aria-hidden","true"),e.append(l),l.append(d),d.append(p),p.append(s,c),{persp:l,obj:d,sink:p,walls:c,child:s,built:true}}function Be(e,i={}){Te();let o=we(e),{persp:s,obj:n,sink:l,walls:d,child:p}=o,c=typeof matchMedia<"u"?matchMedia("(prefers-reduced-motion: reduce)"):null,u=i,t=pe(u),h={w:0,h:0,ox:0,oy:0,pp:1},v=t.tx,M=t.ty,y=false,k=null,B=false,X=false;if(!e.style.display){let r=l.style.display;l.style.display="block";let a=/^inline/.test(getComputedStyle(p).display);l.style.display=r,e.style.display=a?"inline-block":"block",X=true;}let D=(r,a,g)=>{v=r,M=a,n.style.transition=g||"none",n.style.transform=`rotateX(${r}deg) rotateY(${-a}deg)`;},de=()=>c?.matches?"none":`transform ${t.springDur}ms cubic-bezier(.2,${1+.5*t.bounce},.4,1)`,N=()=>D(t.tx,t.ty,de()),j=r=>l.style.setProperty("--bb-p",String(r&&h.pp<1?h.pp:1));function I(){t=pe(u);let r=p.offsetWidth,a=p.offsetHeight,g=p.offsetLeft,f=p.offsetTop,x=Math.max(0,ue(t.depth,e));Se()&&x>t.persp*.5&&console.warn(`[brickbox] depth ${x}px is more than half of perspective (${t.persp}px); the box may clip or distort.`);let S=t.pressDepth==null?1:Math.min(1,Math.max(0,ue(t.pressDepth,e)/(x||1)));h={w:r,h:a,ox:g,oy:f,pp:S};let T=!!c?.matches;if(d.innerHTML="",d.hidden=t.disabled,Object.assign(d.style,{left:g+"px",top:f+"px",width:r+"px",height:a+"px"}),l.style.setProperty("--bb-d",x+"px"),l.style.transform="translateZ(calc(var(--bb-d) * (var(--bb-p) - 1)))",l.style.transition=`--bb-p ${T?0:t.pressDur}ms ease`,s.style.perspective=t.persp+"px",n.style.transformOrigin=`${g+r/2}px ${f+a/2}px ${-x/2}px`,e.style.touchAction=t.control==="drag"||t.control==="hover"&&!t.touchScroll?"none":t.control==="hover"?"pan-y":"auto",e.style.cursor=t.control==="drag"?"grab":"",t.disabled||!r||!a){n.style.transform="none";return}let $=getComputedStyle(p),me=ie(["top-left","top-right","bottom-right","bottom-left"].map(m=>{let b=$.getPropertyValue(`border-${m}-radius`).split(" ")[0];return b.endsWith("%")?parseFloat(b)/100*r:parseFloat(b)||0}),r,a),K=$.backgroundImage,A=K.startsWith("linear-gradient")?oe(K):null,P=$.backgroundColor;(P==="rgba(0, 0, 0, 0)"||P==="transparent")&&(P="rgb(120,120,130)");let Q=t.side==="match",U=Q?P:t.side,R=t.light*Math.PI/180,be=Math.sin(R),he=-Math.cos(R),E=le(r,a,me,t.tol),L=E.length,ge=m=>{let b=E[(m+1)%L];return {a:Math.atan2(b[1]-E[m][1],b[0]-E[m][0]),len:Math.hypot(b[0]-E[m][0],b[1]-E[m][1])}},w=E.map((m,b)=>ge(b)),Y=t.edge==="none"||t.edge===""?null:t.edge==="auto"?"rgba(0,0,0,.5)":t.edge,ee=document.createDocumentFragment();for(let m=0;m<L;m++){if(w[m].len<.01)continue;let b=(m+L-1)%L;for(;w[b].len<.01&&b!==m;)b=(b+L-1)%L;let C=Math.abs(w[m].a-w[b].a);C=Math.min(C,2*Math.PI-C);let[te,ne]=E[m],[fe,ye]=E[(m+1)%L],W=w[m].a,xe=(-Math.sin(W)*be+Math.cos(W)*he+1)/2,re=.08+.3*(1-xe),ve=re+.28,Me=Q&&A?`linear-gradient(90deg,${F(A,te,ne,r,a)},${F(A,fe,ye,r,a)})`:`linear-gradient(${U},${U})`,Ee=t.shading?`linear-gradient(rgba(0,0,0,${re.toFixed(2)}),rgba(0,0,0,${ve.toFixed(2)})),`:"",$e=Y?`border-bottom:${t.edgeW}px solid ${Y};${C>.9?`border-left:${t.edgeW}px solid ${Y};`:""}`:"",se=document.createElement("i");se.style.cssText=`position:absolute;left:0;top:0;box-sizing:border-box;height:var(--bb-d);transform-origin:0 0;${t.cull?"backface-visibility:hidden;":""}width:${w[m].len+.5}px;${$e}background:${Ee}${Me};transform:translate(${te}px,${ne}px) rotate(${W*180/Math.PI}deg) rotateX(-90deg) scaleY(var(--bb-p))`,ee.appendChild(se);}d.appendChild(ee),!k&&!y&&D(t.tx,t.ty);}let z=r=>{let a=e.getBoundingClientRect(),g=a.left+h.ox,f=a.top+h.oy;return r.clientX>=g&&r.clientX<=g+h.w&&r.clientY>=f&&r.clientY<=f+h.h},V=()=>{y=false,t.springBack&&N();},q=r=>{if(t.disabled||k||t.control!=="hover"||r.pointerType==="touch"||c?.matches)return;if(!z(r)){y&&V();return}let a=e.getBoundingClientRect(),g=(S,T,$)=>Math.max(-1,Math.min(1,(S-T-$/2)/($/2))),f=g(r.clientX,a.left+h.ox,h.w),x=g(r.clientY,a.top+h.oy,h.h);y=true,D(H(t.tx*.3-x*t.max*.7,t.max),H(t.ty*.3-f*t.max*.7,t.max),"transform .15s ease-out");},_=()=>{y&&V();},Z=r=>{if(t.disabled||!z(r))return;let a={x:r.clientX,y:r.clientY,tx:v,ty:M,moved:false,touch:r.pointerType==="touch",dragging:t.control==="drag"||t.control==="hover"&&r.pointerType==="touch"};k=a,j(true);let g=x=>{let S=x.clientX-a.x,T=x.clientY-a.y;if(!a.moved){if(Math.hypot(S,T)<5)return;a.moved=true,j(false);}if(!a.dragging)return;let $=a.touch&&t.control==="hover"&&t.touchScroll?0:T;D(H(a.tx-$*t.sens,t.max),H(a.ty-S*t.sens,t.max));},f=()=>{removeEventListener("pointermove",g),removeEventListener("pointerup",f),removeEventListener("pointercancel",f),k=null,j(false),B=a.moved&&a.dragging,B&&t.springBack&&N();};addEventListener("pointermove",g),addEventListener("pointerup",f),addEventListener("pointercancel",f);},J=r=>{B&&(r.stopPropagation(),r.preventDefault(),B=false);};e.addEventListener("pointermove",q),e.addEventListener("pointerleave",_),e.addEventListener("pointerdown",Z),p.addEventListener("click",J,true);let O=new ResizeObserver(I);return O.observe(p),O.observe(l),I(),{update(r){u={...u,...r,advanced:{...u.advanced,...r.advanced}},I();},destroy(){O.disconnect(),e.removeEventListener("pointermove",q),e.removeEventListener("pointerleave",_),e.removeEventListener("pointerdown",Z),p.removeEventListener("click",J,true),e.style.touchAction="",e.style.cursor="",X&&(e.style.display=""),o.built&&(e.insertBefore(p,s),s.remove());}}}exports.brickbox=Be;
+'use strict';function gt(t){let r=[],o=0,i="";for(let s of t)s==="("&&o++,s===")"&&o--,s===","&&!o?(r.push(i.trim()),i=""):i+=s;return r.push(i.trim()),r}function xt(t){if((t.match(/gradient\(/g)||[]).length!==1)return null;let r=gt(t.slice(t.indexOf("(")+1,t.lastIndexOf(")"))),o=180;if(/^to /.test(r[0])||/deg$/.test(r[0])){let s=r.shift();if(/deg$/.test(s))o=parseFloat(s);else {let e=/top/.test(s),c=/bottom/.test(s),u=/left/.test(s),l=/right/.test(s);o=e&&l?45:c&&l?135:c&&u?225:e&&u?315:l?90:u?270:e?0:180;}}let i=[];for(let s of r){let e=s.match(/^(rgba?\([^)]*\))\s*([\d.]+)?%?$/);if(!e||/px|em/.test(s))return null;let c=e[1].match(/[\d.]+/g).map(Number);c.length<4&&c.push(1),i.push({raw:s,c,t:e[2]==null?null:+e[2]/100});}if(i.length<2)return null;i[0].t==null&&(i[0].t=0),i[i.length-1].t==null&&(i[i.length-1].t=1);for(let s=1;s<i.length;s++){if(i[s].t!=null)continue;let e=s;for(;i[e].t==null;)e++;let c=i[s-1].t,u=i[e].t;for(let l=s;l<e;l++)i[l].t=c+(u-c)*(l-s+1)/(e-s+1);}return {ang:o,st:i}}function st(t,r,o,i,s){let e=t.ang*Math.PI/180,c=Math.abs(i*Math.sin(e))+Math.abs(s*Math.cos(e)),u=((r-i/2)*Math.sin(e)-(o-s/2)*Math.cos(e))/c+.5,l=t.st;if(u<=l[0].t)return `rgba(${l[0].c})`;for(let a=1;a<l.length;a++)if(u<=l[a].t){let n=(u-l[a-1].t)/(l[a].t-l[a-1].t||1),d=l[a-1].c,m=l[a].c;return `rgba(${d.map((b,v)=>+(b+(m[v]-b)*n).toFixed(2))})`}return `rgba(${l[l.length-1].c})`}function Wt(t){let r=0;for(let o=0;o<t.length;o++){let[i,s]=t[o],[e,c]=t[(o+1)%t.length];r+=i*c-e*s;}return r/2}function Gt(t,r=-1){let o=Wt(t);return o===0||Math.sign(o)===r?t:[...t].reverse()}function yt(t,r,o){let i=false;for(let s=0,e=t.length-1;s<t.length;e=s++){let[c,u]=t[s],[l,a]=t[e];u>o!=a>o&&r<(l-c)*(o-u)/(a-u)+c&&(i=!i);}return i}function vt(t,r,o){let i=false;for(let s of t)yt(s,r,o)&&(i=!i);return i}function Yt(t,r,o){let i=o[0]-r[0],s=o[1]-r[1],e=i*i+s*s;return e?Math.abs((t[0]-r[0])*s-(t[1]-r[1])*i)/Math.sqrt(e):Math.hypot(t[0]-r[0],t[1]-r[1])}function Mt(t,r){let o=t.length;if(o<4)return t;let i=0,s=-1;for(let l=1;l<o;l++){let a=Math.hypot(t[l][0]-t[0][0],t[l][1]-t[0][1]);a>s&&(s=a,i=l);}let e=new Array(o).fill(false);e[0]=e[i]=true;let c=[...t,t[0]],u=[[0,i],[i,o]];for(;u.length;){let[l,a]=u.pop(),n=-1,d=-1;for(let m=l+1;m<a;m++){let b=Yt(c[m],c[l],c[a]);b>n&&(n=b,d=m);}n>r&&d>0&&(e[d]=true,u.push([l,d],[d,a]));}return t.filter((l,a)=>e[a])}function ot(t,r,o,i){let s=Math.min(1,o/(t[0]+t[1]),o/(t[3]+t[2]),i/(r[0]+r[3]),i/(r[1]+r[2]));return [t.map(e=>e*s),r.map(e=>e*s)]}function it(t,r,o,i,s=o){let e=[],c=[[1,t-o[1],s[1],-90,t,0],[2,t-o[2],r-s[2],0,t,r],[3,o[3],r-s[3],90,0,r],[0,o[0],s[0],180,0,0]];for(let[u,l,a,n,d,m]of c){let b=o[u],v=s[u],E=Math.max(b,v),g=E>.5?Math.max(1,Math.ceil(Math.PI/2/(2*Math.acos(Math.max(0,1-i/E))))):0;if(!g)e.push([d,m]);else for(let x=0;x<=g;x++){let k=(n+90*x/g)*Math.PI/180;e.push([l+b*Math.cos(k),a+v*Math.sin(k)]);}}return e.reverse()}function bt(t,r,o,i,s){let e=Math.max(o,i,s),c=Math.max(12,Math.ceil(Math.PI/Math.acos(Math.max(0,1-s/e)))),u=[];for(let l=0;l<c;l++){let a=2*Math.PI*l/c;u.push([t+o*Math.cos(a),r+i*Math.sin(a)]);}return u}var M=(t,r)=>t==null?NaN:/^-?[\d.]+(px)?$/.test(t)?parseFloat(t):/^-?[\d.]+%$/.test(t)?parseFloat(t)/100*r:NaN,qt={left:"0%",top:"0%",center:"50%",right:"100%",bottom:"100%"};function rt(t){return t.length===1?[t[0],t[0],t[0],t[0]]:t.length===2?[t[0],t[1],t[0],t[1]]:t.length===3?[t[0],t[1],t[2],t[1]]:t}function Et(t,r,o,i){let s=t.trim().match(/^(polygon|circle|ellipse|inset)\(([\s\S]*)\)$/);if(!s)return null;let e=s[2].trim();if(s[1]==="polygon"){let g=gt(e);/^(nonzero|evenodd)$/.test(g[0])&&g.shift();let x=[];for(let k of g){let P=k.trim().split(/\s+/),S=M(P[0],r),L=M(P[1],o);if(P.length!==2||isNaN(S)||isNaN(L))return null;x.push([S,L]);}return x.length>=3?[x]:null}if(s[1]==="inset"){let[g,x]=e.split(/\s+round\s+/),k=g.trim().split(/\s+/);if(k.length>4)return null;let P=rt(k),S=M(P[0],o),L=M(P[1],r),K=M(P[2],o),W=M(P[3],r),N=r-W-L,C=o-S-K;if([S,L,K,W].some(isNaN)||!(N>0)||!(C>0))return null;let G=[0,0,0,0],A=[0,0,0,0];if(x){let[O,Y]=x.split("/"),X=O.trim().split(/\s+/),_=(Y??O).trim().split(/\s+/);if(X.length>4||_.length>4||(G=rt(X).map(q=>M(q,N)),A=rt(_).map(q=>M(q,C)),[...G,...A].some(isNaN)))return null}let[V,Q]=ot(G,A,N,C);return [it(N,C,V,i,Q).map(([O,Y])=>[O+W,Y+S])]}let[c,u]=e.split(/\s+at\s+/),l=(u||"center center").trim().split(/\s+/).map(g=>qt[g]??g),a=M(l[0],r),n=M(l[1]??"50%",o),d=c.trim();if(isNaN(a)||isNaN(n))return null;if(s[1]==="circle"){let g=d===""||d==="closest-side"?Math.min(a,r-a,n,o-n):d==="farthest-side"?Math.max(a,r-a,n,o-n):M(d,Math.sqrt((r*r+o*o)/2));return g>0?[bt(a,n,g,g,i)]:null}let[m,b]=d?d.split(/\s+/):["closest-side","closest-side"],v=m==="closest-side"?Math.min(a,r-a):m==="farthest-side"?Math.max(a,r-a):M(m,r),E=b==="closest-side"?Math.min(n,o-n):b==="farthest-side"?Math.max(n,o-n):M(b,o);return v>0&&E>0?[bt(a,n,v,E,i)]:null}function Pt(t){return t.map((r,o)=>{let i=0;return t.forEach((s,e)=>{e!==o&&yt(s,r[0][0],r[0][1])&&i++;}),Gt(r,i%2?1:-1)})}function $t(t,r,o){if(t.every(([e,c])=>e>=0&&e<=r&&c>=0&&c<=o))return t;let i=[[e=>e[0]>=0,(e,c)=>[0,e[1]+(c[1]-e[1])*(0-e[0])/(c[0]-e[0])]],[e=>e[0]<=r,(e,c)=>[r,e[1]+(c[1]-e[1])*(r-e[0])/(c[0]-e[0])]],[e=>e[1]>=0,(e,c)=>[e[0]+(c[0]-e[0])*(0-e[1])/(c[1]-e[1]),0]],[e=>e[1]<=o,(e,c)=>[e[0]+(c[0]-e[0])*(o-e[1])/(c[1]-e[1]),o]]],s=t;for(let[e,c]of i){let u=s;s=[];for(let l=0;l<u.length;l++){let a=u[l],n=u[(l+u.length-1)%u.length];e(a)?(e(n)||s.push(c(n,a)),s.push(a)):e(n)&&s.push(c(n,a));}if(!s.length)break}return s}var kt={persp:{display:"grid",width:"100%",height:"100%"},obj:{display:"grid",width:"100%",height:"100%",transformStyle:"preserve-3d",willChange:"transform"},sink:{display:"grid",width:"100%",height:"100%",position:"relative",transformStyle:"preserve-3d"},walls:{position:"absolute",transformStyle:"preserve-3d",pointerEvents:"none"}},lt="data-bb";var zt={top:0,"top-right":45,right:90,"bottom-right":135,bottom:180,"bottom-left":225,left:270,"top-left":315},St="[data-brickbox-ignore]",R=(t,r)=>Math.max(-r,Math.min(r,t)),Bt=()=>typeof process<"u"&&!!process.env&&process.env.NODE_ENV!=="production",Lt=false;function Vt(){if(!(Lt||typeof CSS>"u"||!CSS.registerProperty)){Lt=true;try{CSS.registerProperty({name:"--bb-p",syntax:"<number>",inherits:!0,initialValue:"1"});}catch{}}}function Tt(t){let r=t.advanced||{},o=(t.sideColor??"match").trim();return {depth:t.depth??24,control:t.control??"hover",tx:t.tilt?.x??14,ty:t.tilt?.y??22,max:t.maxAngle??60,springBack:t.springBack??true,springDur:t.springDuration??700,pressDepth:t.pressDepth,pressDur:t.pressDuration??150,side:o,shading:t.shading??o==="match",light:typeof t.light=="number"?t.light:zt[t.light??"top-left"]??315,persp:t.perspective??1e3,edge:t.edgeColor??"none",edgeW:t.edgeWidth??1,touchScroll:t.touchScroll??true,disabled:t.disabled??false,reverseHover:t.reverseHover??false,reverseDrag:t.reverseDrag??false,ignore:t.ignore||void 0,tol:r.tolerance??.25,sens:r.sensitivity??.5,bounce:r.bounce??1,cull:r.cull??true}}function Dt(t,r){if(typeof t=="number")return t;if(/^\s*-?[\d.]+(px)?\s*$/.test(t))return parseFloat(t);let o=document.createElement("div");o.style.cssText=`position:absolute;visibility:hidden;width:${t}`,r.appendChild(o);let i=o.getBoundingClientRect().width;return o.remove(),i}function Xt(t,r,o){let i="http://www.w3.org/2000/svg",s=document.createElementNS(i,"svg");s.setAttribute("width","0"),s.setAttribute("height","0"),s.style.cssText="position:absolute;visibility:hidden;pointer-events:none",o.appendChild(s);let e=[];for(let c of t.split(/(?=M)/)){if(!c.trim())continue;let u=document.createElementNS(i,"path");u.setAttribute("d",c),s.appendChild(u);let l=0;try{l=u.getTotalLength();}catch{}if(!(l>0))continue;let a=Math.max(1,l/1500),n=[];for(let m=0;m<l;m+=a){let b=u.getPointAtLength(m);n.push([b.x,b.y]);}let d=Mt(n,r);d.length>=3&&e.push(d);}return s.remove(),e}function _t(t,r,o,i,s){let e=(t.getPropertyValue("clip-path")||t.getPropertyValue("-webkit-clip-path")||"").trim().replace(/\s+border-box$/,"");if(e&&e!=="none"){let d=e.match(/^path\(\s*(?:(?:evenodd|nonzero)\s*,\s*)?["']([^"']*)["']\s*\)$/),b=((d?Xt(d[1],i,s):Et(e,r,o,i))||[]).map(v=>$t(v,r,o)).filter(v=>v.length>=3);if(b.length)return Pt(b);Bt()&&console.warn(`[brickbox] clip-path "${e}" is not supported, so the walls use the rounded rectangle instead.`);}let c=[],u=[],l=(d,m)=>d.endsWith("%")?parseFloat(d)/100*m:parseFloat(d)||0;for(let d of ["top-left","top-right","bottom-right","bottom-left"]){let m=t.getPropertyValue(`border-${d}-radius`).trim().split(/\s+/);c.push(l(m[0]||"0",r)),u.push(l(m[1]??m[0]??"0",o));}let[a,n]=ot(c,u,r,o);return [it(r,o,a,i,n)]}function Zt(t){let r=a=>t.querySelector(`[${lt}="${a}"]`),o=r("persp");if(o){let a=r("sink");return {persp:o,obj:r("obj"),sink:a,walls:r("walls"),child:a.firstElementChild,built:false}}let i=t.firstElementChild;if(!i)throw new Error("brickbox: the root needs one element child");let s=a=>{let n=document.createElement("div");return n.setAttribute(lt,a),Object.assign(n.style,kt[a]),n},e=s("persp"),c=s("obj"),u=s("sink"),l=s("walls");return l.setAttribute("aria-hidden","true"),t.append(e),e.append(c),c.append(u),u.append(i,l),{persp:e,obj:c,sink:u,walls:l,child:i,built:true}}function Jt(t,r={}){Vt();let o=Zt(t),{persp:i,obj:s,sink:e,walls:c,child:u}=o,l=typeof matchMedia<"u"?matchMedia("(prefers-reduced-motion: reduce)"):null,a=r,n=Tt(a),d={w:0,h:0,ox:0,oy:0,pp:1},m=[],b=n.tx,v=n.ty,E=false,g=null,x=false,k=false;if(!t.style.display){let p=e.style.display;e.style.display="block";let f=/^inline/.test(getComputedStyle(u).display);e.style.display=p,t.style.display=f?"inline-block":"block",k=true;}let P=()=>n.control==="hover"||n.control==="both",S=()=>n.control==="drag"||n.control==="both",L=(p,f,h)=>{b=p,v=f,s.style.transition=h||"none",s.style.transform=`rotateX(${p}deg) rotateY(${-f}deg)`;},K=()=>l?.matches?"none":`transform ${n.springDur}ms cubic-bezier(.2,${1+.5*n.bounce},.4,1)`,W=()=>L(n.tx,n.ty,K()),N=p=>e.style.setProperty("--bb-p",String(p&&d.pp<1?d.pp:1));function C(){n=Tt(a);let p=u.offsetWidth,f=u.offsetHeight,h=u.offsetLeft,D=u.offsetTop,$=Math.max(0,Dt(n.depth,t));Bt()&&$>n.persp*.5&&console.warn(`[brickbox] depth ${$}px is more than half of perspective (${n.persp}px); the box may clip or distort.`);let T=n.pressDepth==null?1:Math.min(1,Math.max(0,Dt(n.pressDepth,t)/($||1)));d={w:p,h:f,ox:h,oy:D,pp:T};let I=!!l?.matches;if(c.innerHTML="",c.hidden=n.disabled,Object.assign(c.style,{left:h+"px",top:D+"px",width:p+"px",height:f+"px"}),e.style.setProperty("--bb-d",$+"px"),e.style.transform="translateZ(calc(var(--bb-d) * (var(--bb-p) - 1)))",e.style.transition=`--bb-p ${I?0:n.pressDur}ms ease`,i.style.perspective=n.persp+"px",s.style.transformOrigin=`${h+p/2}px ${D+f/2}px ${-$/2}px`,t.style.touchAction=S()||n.control==="hover"&&!n.touchScroll?"none":n.control==="hover"?"pan-y":"auto",t.style.cursor=S()?"grab":"",m=[],n.disabled||!p||!f){s.style.transform="none";return}let w=getComputedStyle(u);m=_t(w,p,f,n.tol,t);let H=w.backgroundImage,Z=H.startsWith("linear-gradient")?xt(H):null,U=w.backgroundColor;(U==="rgba(0, 0, 0, 0)"||U==="transparent")&&(U="rgb(120,120,130)");let ct=n.side==="match",at=ct?U:n.side,ut=n.light*Math.PI/180,Nt=Math.sin(ut),Ct=-Math.cos(ut),et=n.edge==="none"||n.edge===""?null:n.edge==="auto"?"rgba(0,0,0,.5)":n.edge,pt=document.createDocumentFragment();for(let J of m){let j=J.length,z=J.map((y,F)=>{let B=J[(F+1)%j];return {a:Math.atan2(B[1]-y[1],B[0]-y[0]),len:Math.hypot(B[0]-y[0],B[1]-y[1])}});for(let y=0;y<j;y++){if(z[y].len<.01)continue;let F=(y+j-1)%j;for(;z[F].len<.01&&F!==y;)F=(F+j-1)%j;let B=Math.abs(z[y].a-z[F].a);B=Math.min(B,2*Math.PI-B);let[dt,mt]=J[y],[wt,Ht]=J[(y+1)%j],nt=z[y].a,At=(-Math.sin(nt)*Nt+Math.cos(nt)*Ct+1)/2,ft=.08+.3*(1-At),Ot=ft+.28,It=ct&&Z?`linear-gradient(90deg,${st(Z,dt,mt,p,f)},${st(Z,wt,Ht,p,f)})`:`linear-gradient(${at},${at})`,jt=n.shading?`linear-gradient(rgba(0,0,0,${ft.toFixed(2)}),rgba(0,0,0,${Ot.toFixed(2)})),`:"",Ft=et?`border-bottom:${n.edgeW}px solid ${et};${B>.9?`border-left:${n.edgeW}px solid ${et};`:""}`:"",ht=document.createElement("i");ht.style.cssText=`position:absolute;left:0;top:0;box-sizing:border-box;height:var(--bb-d);transform-origin:0 0;${n.cull?"backface-visibility:hidden;":""}width:${z[y].len+.5}px;${Ft}background:${jt}${It};transform:translate(${dt}px,${mt}px) rotate(${nt*180/Math.PI}deg) rotateX(-90deg) scaleY(var(--bb-p))`,pt.appendChild(ht);}}c.appendChild(pt),!g&&!E&&L(n.tx,n.ty);}let G=p=>{let f=t.getBoundingClientRect();return [p.clientX-f.left-d.ox,p.clientY-f.top-d.oy]},A=p=>{let[f,h]=G(p);return f<0||h<0||f>d.w||h>d.h?false:m.length?vt(m,f,h):true},V=p=>{let f=p.target;if(!f||!f.closest)return  false;try{let h=f.closest(n.ignore?`${St},${n.ignore}`:St);return !!h&&u.contains(h)}catch{return  false}},Q=p=>{let[f,h]=G(p),D=(w,H)=>Math.max(-1,Math.min(1,(w-H/2)/(H/2))),$=D(f,d.w),T=D(h,d.h),I=n.reverseHover?-1:1;E=true,L(R(n.tx*.3-I*T*n.max*.7,n.max),R(n.ty*.3-I*$*n.max*.7,n.max),"transform .15s ease-out");},O=()=>{E=false,n.springBack&&W();},Y=p=>{if(!(n.disabled||g||!P()||p.pointerType==="touch"||l?.matches)){if(!A(p)){E&&O();return}V(p)||Q(p);}},X=()=>{E&&O();},_=p=>{if(n.disabled||!A(p)||V(p))return;let f=p.pointerType==="touch",h={x:p.clientX,y:p.clientY,tx:b,ty:v,moved:false,touch:f,dragging:S()||P()&&f};g=h,N(true);let D=T=>{let I=T.clientX-h.x,w=T.clientY-h.y;if(!h.moved){if(Math.hypot(I,w)<5)return;h.moved=true,N(false);}if(!h.dragging)return;let H=n.reverseDrag?-1:1,Z=h.touch&&n.control==="hover"&&n.touchScroll?0:w;L(R(h.tx-H*Z*n.sens,n.max),R(h.ty-H*I*n.sens,n.max));},$=T=>{removeEventListener("pointermove",D),removeEventListener("pointerup",$),removeEventListener("pointercancel",$),g=null,N(false),x=h.moved&&h.dragging,x&&(P()&&!h.touch&&A(T)&&!V(T)?Q(T):(E=false,n.springBack&&W()));};addEventListener("pointermove",D),addEventListener("pointerup",$),addEventListener("pointercancel",$);},q=p=>{x&&(p.stopPropagation(),p.preventDefault(),x=false);};t.addEventListener("pointermove",Y),t.addEventListener("pointerleave",X),t.addEventListener("pointerdown",_),u.addEventListener("click",q,true);let tt=new ResizeObserver(C);return tt.observe(u),tt.observe(e),C(),{update(p){a={...a,...p,advanced:{...a.advanced,...p.advanced}},C();},destroy(){tt.disconnect(),t.removeEventListener("pointermove",Y),t.removeEventListener("pointerleave",X),t.removeEventListener("pointerdown",_),u.removeEventListener("click",q,true),t.style.touchAction="",t.style.cursor="",k&&(t.style.display=""),o.built&&(t.insertBefore(u,i),i.remove());}}}
+exports.brickbox=Jt;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { B as BrickBoxOptions, a as BrickBoxInstance } from './types-Cdnliv69.cjs';
-export { A as Advanced, C as Control, L as LightWord, T as Tilt } from './types-Cdnliv69.cjs';
+import { B as BrickBoxOptions, a as BrickBoxInstance } from './types-Bl-EhzNO.cjs';
+export { A as Advanced, C as Control, L as LightWord, T as Tilt } from './types-Bl-EhzNO.cjs';
 
 declare function brickbox(root: HTMLElement, options?: BrickBoxOptions): BrickBoxInstance;
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { B as BrickBoxOptions, a as BrickBoxInstance } from './types-Cdnliv69.js';
-export { A as Advanced, C as Control, L as LightWord, T as Tilt } from './types-Cdnliv69.js';
+import { B as BrickBoxOptions, a as BrickBoxInstance } from './types-Bl-EhzNO.js';
+export { A as Advanced, C as Control, L as LightWord, T as Tilt } from './types-Bl-EhzNO.js';
 
 declare function brickbox(root: HTMLElement, options?: BrickBoxOptions): BrickBoxInstance;
 

package/dist/index.js

@@ -1 +1 @@
-export{c as brickbox}from'./chunk-3CCNRF7U.js';
+export{c as brickbox}from'./chunk-VDSG5ZZE.js';

package/dist/react.cjs

@@ -1 +1,2 @@
-'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');function Be(e){let i=[],r=0,o="";for(let n of e)n==="("&&r++,n===")"&&r--,n===","&&!r?(i.push(o.trim()),o=""):o+=n;return i.push(o.trim()),i}function ce(e){if((e.match(/gradient\(/g)||[]).length!==1)return null;let i=Be(e.slice(e.indexOf("(")+1,e.lastIndexOf(")"))),r=180;if(/^to /.test(i[0])||/deg$/.test(i[0])){let n=i.shift();if(/deg$/.test(n))r=parseFloat(n);else {let l=/top/.test(n),d=/bottom/.test(n),p=/left/.test(n),c=/right/.test(n);r=l&&c?45:d&&c?135:d&&p?225:l&&p?315:c?90:p?270:l?0:180;}}let o=[];for(let n of i){let l=n.match(/^(rgba?\([^)]*\))\s*([\d.]+)?%?$/);if(!l||/px|em/.test(n))return null;let d=l[1].match(/[\d.]+/g).map(Number);d.length<4&&d.push(1),o.push({raw:n,c:d,t:l[2]==null?null:+l[2]/100});}if(o.length<2)return null;o[0].t==null&&(o[0].t=0),o[o.length-1].t==null&&(o[o.length-1].t=1);for(let n=1;n<o.length;n++){if(o[n].t!=null)continue;let l=n;for(;o[l].t==null;)l++;let d=o[n-1].t,p=o[l].t;for(let c=n;c<l;c++)o[c].t=d+(p-d)*(c-n+1)/(l-n+1);}return {ang:r,st:o}}function U(e,i,r,o,n){let l=e.ang*Math.PI/180,d=Math.abs(o*Math.sin(l))+Math.abs(n*Math.cos(l)),p=((i-o/2)*Math.sin(l)-(r-n/2)*Math.cos(l))/d+.5,c=e.st;if(p<=c[0].t)return `rgba(${c[0].c})`;for(let u=1;u<c.length;u++)if(p<=c[u].t){let t=(p-c[u-1].t)/(c[u].t-c[u-1].t||1),b=c[u-1].c,x=c[u].c;return `rgba(${b.map((v,g)=>+(v+(x[g]-v)*t).toFixed(2))})`}return `rgba(${c[c.length-1].c})`}function pe(e,i,r){let o=Math.min(1,i/(e[0]+e[1]),i/(e[3]+e[2]),r/(e[0]+e[3]),r/(e[1]+e[2]));return e.map(n=>n*o)}function ue(e,i,r,o){let n=[],l=[[1,e-r[1],r[1],-90,e,0],[2,e-r[2],i-r[2],0,e,i],[3,r[3],i-r[3],90,0,i],[0,r[0],r[0],180,0,0]];for(let[d,p,c,u,t,b]of l){let x=r[d],v=x>.5?Math.max(1,Math.ceil(Math.PI/2/(2*Math.acos(Math.max(0,1-o/x))))):0;if(!v)n.push([t,b]);else for(let g=0;g<=v;g++){let M=(u+90*g/v)*Math.PI/180;n.push([p+x*Math.cos(M),c+x*Math.sin(M)]);}}return n.reverse()}var B={persp:{display:"grid",width:"100%",height:"100%"},obj:{display:"grid",width:"100%",height:"100%",transformStyle:"preserve-3d",willChange:"transform"},sink:{display:"grid",width:"100%",height:"100%",position:"relative",transformStyle:"preserve-3d"},walls:{position:"absolute",transformStyle:"preserve-3d",pointerEvents:"none"}},S="data-bb";var we={top:0,"top-right":45,right:90,"bottom-right":135,bottom:180,"bottom-left":225,left:270,"top-left":315},V=(e,i)=>Math.max(-i,Math.min(i,e)),Pe=()=>typeof process<"u"&&!!process.env&&process.env.NODE_ENV!=="production",de=false;function Ce(){if(!(de||typeof CSS>"u"||!CSS.registerProperty)){de=true;try{CSS.registerProperty({name:"--bb-p",syntax:"<number>",inherits:!0,initialValue:"1"});}catch{}}}function me(e){let i=e.advanced||{},r=(e.sideColor??"match").trim();return {depth:e.depth??24,control:e.control??"hover",tx:e.tilt?.x??14,ty:e.tilt?.y??22,max:e.maxAngle??60,springBack:e.springBack??true,springDur:e.springDuration??700,pressDepth:e.pressDepth,pressDur:e.pressDuration??150,side:r,shading:e.shading??r==="match",light:typeof e.light=="number"?e.light:we[e.light??"top-left"]??315,persp:e.perspective??1e3,edge:e.edgeColor??"none",edgeW:e.edgeWidth??1,touchScroll:e.touchScroll??true,disabled:e.disabled??false,tol:i.tolerance??.25,sens:i.sensitivity??.5,bounce:i.bounce??1,cull:i.cull??true}}function be(e,i){if(typeof e=="number")return e;if(/^\s*-?[\d.]+(px)?\s*$/.test(e))return parseFloat(e);let r=document.createElement("div");r.style.cssText=`position:absolute;visibility:hidden;width:${e}`,i.appendChild(r);let o=r.getBoundingClientRect().width;return r.remove(),o}function De(e){let i=u=>e.querySelector(`[${S}="${u}"]`),r=i("persp");if(r){let u=i("sink");return {persp:r,obj:i("obj"),sink:u,walls:i("walls"),child:u.firstElementChild,built:false}}let o=e.firstElementChild;if(!o)throw new Error("brickbox: the root needs one element child");let n=u=>{let t=document.createElement("div");return t.setAttribute(S,u),Object.assign(t.style,B[u]),t},l=n("persp"),d=n("obj"),p=n("sink"),c=n("walls");return c.setAttribute("aria-hidden","true"),e.append(l),l.append(d),d.append(p),p.append(o,c),{persp:l,obj:d,sink:p,walls:c,child:o,built:true}}function he(e,i={}){Ce();let r=De(e),{persp:o,obj:n,sink:l,walls:d,child:p}=r,c=typeof matchMedia<"u"?matchMedia("(prefers-reduced-motion: reduce)"):null,u=i,t=me(u),b={w:0,h:0,ox:0,oy:0,pp:1},x=t.tx,v=t.ty,g=false,M=null,w=false,F=false;if(!e.style.display){let s=l.style.display;l.style.display="block";let a=/^inline/.test(getComputedStyle(p).display);l.style.display=s,e.style.display=a?"inline-block":"block",F=true;}let P=(s,a,f)=>{x=s,v=a,n.style.transition=f||"none",n.style.transform=`rotateX(${s}deg) rotateY(${-a}deg)`;},J=()=>c?.matches?"none":`transform ${t.springDur}ms cubic-bezier(.2,${1+.5*t.bounce},.4,1)`,G=()=>P(t.tx,t.ty,J()),j=s=>l.style.setProperty("--bb-p",String(s&&b.pp<1?b.pp:1));function Y(){t=me(u);let s=p.offsetWidth,a=p.offsetHeight,f=p.offsetLeft,y=p.offsetTop,E=Math.max(0,be(t.depth,e));Pe()&&E>t.persp*.5&&console.warn(`[brickbox] depth ${E}px is more than half of perspective (${t.persp}px); the box may clip or distort.`);let O=t.pressDepth==null?1:Math.min(1,Math.max(0,be(t.pressDepth,e)/(E||1)));b={w:s,h:a,ox:f,oy:y,pp:O};let A=!!c?.matches;if(d.innerHTML="",d.hidden=t.disabled,Object.assign(d.style,{left:f+"px",top:y+"px",width:s+"px",height:a+"px"}),l.style.setProperty("--bb-d",E+"px"),l.style.transform="translateZ(calc(var(--bb-d) * (var(--bb-p) - 1)))",l.style.transition=`--bb-p ${A?0:t.pressDur}ms ease`,o.style.perspective=t.persp+"px",n.style.transformOrigin=`${f+s/2}px ${y+a/2}px ${-E/2}px`,e.style.touchAction=t.control==="drag"||t.control==="hover"&&!t.touchScroll?"none":t.control==="hover"?"pan-y":"auto",e.style.cursor=t.control==="drag"?"grab":"",t.disabled||!s||!a){n.style.transform="none";return}let L=getComputedStyle(p),ge=pe(["top-left","top-right","bottom-right","bottom-left"].map(m=>{let h=L.getPropertyValue(`border-${m}-radius`).split(" ")[0];return h.endsWith("%")?parseFloat(h)/100*s:parseFloat(h)||0}),s,a),ee=L.backgroundImage,Z=ee.startsWith("linear-gradient")?ce(ee):null,z=L.backgroundColor;(z==="rgba(0, 0, 0, 0)"||z==="transparent")&&(z="rgb(120,120,130)");let te=t.side==="match",ne=te?z:t.side,re=t.light*Math.PI/180,ye=Math.sin(re),xe=-Math.cos(re),k=ue(s,a,ge,t.tol),$=k.length,ve=m=>{let h=k[(m+1)%$];return {a:Math.atan2(h[1]-k[m][1],h[0]-k[m][0]),len:Math.hypot(h[0]-k[m][0],h[1]-k[m][1])}},I=k.map((m,h)=>ve(h)),K=t.edge==="none"||t.edge===""?null:t.edge==="auto"?"rgba(0,0,0,.5)":t.edge,se=document.createDocumentFragment();for(let m=0;m<$;m++){if(I[m].len<.01)continue;let h=(m+$-1)%$;for(;I[h].len<.01&&h!==m;)h=(h+$-1)%$;let R=Math.abs(I[m].a-I[h].a);R=Math.min(R,2*Math.PI-R);let[oe,ie]=k[m],[Ee,Me]=k[(m+1)%$],Q=I[m].a,ke=(-Math.sin(Q)*ye+Math.cos(Q)*xe+1)/2,le=.08+.3*(1-ke),Le=le+.28,Se=te&&Z?`linear-gradient(90deg,${U(Z,oe,ie,s,a)},${U(Z,Ee,Me,s,a)})`:`linear-gradient(${ne},${ne})`,Te=t.shading?`linear-gradient(rgba(0,0,0,${le.toFixed(2)}),rgba(0,0,0,${Le.toFixed(2)})),`:"",$e=K?`border-bottom:${t.edgeW}px solid ${K};${R>.9?`border-left:${t.edgeW}px solid ${K};`:""}`:"",ae=document.createElement("i");ae.style.cssText=`position:absolute;left:0;top:0;box-sizing:border-box;height:var(--bb-d);transform-origin:0 0;${t.cull?"backface-visibility:hidden;":""}width:${I[m].len+.5}px;${$e}background:${Te}${Se};transform:translate(${oe}px,${ie}px) rotate(${Q*180/Math.PI}deg) rotateX(-90deg) scaleY(var(--bb-p))`,se.appendChild(ae);}d.appendChild(se),!M&&!g&&P(t.tx,t.ty);}let X=s=>{let a=e.getBoundingClientRect(),f=a.left+b.ox,y=a.top+b.oy;return s.clientX>=f&&s.clientX<=f+b.w&&s.clientY>=y&&s.clientY<=y+b.h},C=()=>{g=false,t.springBack&&G();},N=s=>{if(t.disabled||M||t.control!=="hover"||s.pointerType==="touch"||c?.matches)return;if(!X(s)){g&&C();return}let a=e.getBoundingClientRect(),f=(O,A,L)=>Math.max(-1,Math.min(1,(O-A-L/2)/(L/2))),y=f(s.clientX,a.left+b.ox,b.w),E=f(s.clientY,a.top+b.oy,b.h);g=true,P(V(t.tx*.3-E*t.max*.7,t.max),V(t.ty*.3-y*t.max*.7,t.max),"transform .15s ease-out");},W=()=>{g&&C();},T=s=>{if(t.disabled||!X(s))return;let a={x:s.clientX,y:s.clientY,tx:x,ty:v,moved:false,touch:s.pointerType==="touch",dragging:t.control==="drag"||t.control==="hover"&&s.pointerType==="touch"};M=a,j(true);let f=E=>{let O=E.clientX-a.x,A=E.clientY-a.y;if(!a.moved){if(Math.hypot(O,A)<5)return;a.moved=true,j(false);}if(!a.dragging)return;let L=a.touch&&t.control==="hover"&&t.touchScroll?0:A;P(V(a.tx-L*t.sens,t.max),V(a.ty-O*t.sens,t.max));},y=()=>{removeEventListener("pointermove",f),removeEventListener("pointerup",y),removeEventListener("pointercancel",y),M=null,j(false),w=a.moved&&a.dragging,w&&t.springBack&&G();};addEventListener("pointermove",f),addEventListener("pointerup",y),addEventListener("pointercancel",y);},D=s=>{w&&(s.stopPropagation(),s.preventDefault(),w=false);};e.addEventListener("pointermove",N),e.addEventListener("pointerleave",W),e.addEventListener("pointerdown",T),p.addEventListener("click",D,true);let H=new ResizeObserver(Y);return H.observe(p),H.observe(l),Y(),{update(s){u={...u,...s,advanced:{...u.advanced,...s.advanced}},Y();},destroy(){H.disconnect(),e.removeEventListener("pointermove",N),e.removeEventListener("pointerleave",W),e.removeEventListener("pointerdown",T),p.removeEventListener("click",D,true),e.style.touchAction="",e.style.cursor="",F&&(e.style.display=""),r.built&&(e.insertBefore(p,o),o.remove());}}}var fe=typeof window<"u"?react.useLayoutEffect:react.useEffect,Ve=react.forwardRef(function(i,r){let{as:o,children:n,depth:l,control:d,tilt:p,maxAngle:c,springBack:u,springDuration:t,pressDepth:b,pressDuration:x,sideColor:v,shading:g,light:M,perspective:w,edgeColor:F,edgeWidth:P,touchScroll:J,disabled:G,advanced:j,...Y}=i,X=o||"div",C={depth:l,control:d,tilt:p,maxAngle:c,springBack:u,springDuration:t,pressDepth:b,pressDuration:x,sideColor:v,shading:g,light:M,perspective:w,edgeColor:F,edgeWidth:P,touchScroll:J,disabled:G,advanced:j},N=JSON.stringify(C),W=react.useRef(null),T=react.useRef(null),D=react.useRef(C),H=react.useRef(true);D.current=C;let s=react.useCallback(a=>{W.current=a,typeof r=="function"?r(a):r&&(r.current=a);},[r]);return fe(()=>(T.current=he(W.current,D.current),()=>{T.current?.destroy(),T.current=null;}),[]),fe(()=>{if(H.current){H.current=false;return}T.current?.update(D.current);},[N]),jsxRuntime.jsx(X,{...Y,ref:s,suppressHydrationWarning:true,children:jsxRuntime.jsx("div",{[S]:"persp",style:B.persp,children:jsxRuntime.jsx("div",{[S]:"obj",style:B.obj,children:jsxRuntime.jsxs("div",{[S]:"sink",style:B.sink,children:[n,jsxRuntime.jsx("div",{[S]:"walls","aria-hidden":"true",style:B.walls})]})})})})});exports.BrickBox=Ve;
+'use strict';var react=require('react'),jsxRuntime=require('react/jsx-runtime');function vt(t){let r=[],s=0,i="";for(let o of t)o==="("&&s++,o===")"&&s--,o===","&&!s?(r.push(i.trim()),i=""):i+=o;return r.push(i.trim()),r}function Mt(t){if((t.match(/gradient\(/g)||[]).length!==1)return null;let r=vt(t.slice(t.indexOf("(")+1,t.lastIndexOf(")"))),s=180;if(/^to /.test(r[0])||/deg$/.test(r[0])){let o=r.shift();if(/deg$/.test(o))s=parseFloat(o);else {let e=/top/.test(o),c=/bottom/.test(o),u=/left/.test(o),l=/right/.test(o);s=e&&l?45:c&&l?135:c&&u?225:e&&u?315:l?90:u?270:e?0:180;}}let i=[];for(let o of r){let e=o.match(/^(rgba?\([^)]*\))\s*([\d.]+)?%?$/);if(!e||/px|em/.test(o))return null;let c=e[1].match(/[\d.]+/g).map(Number);c.length<4&&c.push(1),i.push({raw:o,c,t:e[2]==null?null:+e[2]/100});}if(i.length<2)return null;i[0].t==null&&(i[0].t=0),i[i.length-1].t==null&&(i[i.length-1].t=1);for(let o=1;o<i.length;o++){if(i[o].t!=null)continue;let e=o;for(;i[e].t==null;)e++;let c=i[o-1].t,u=i[e].t;for(let l=o;l<e;l++)i[l].t=c+(u-c)*(l-o+1)/(e-o+1);}return {ang:s,st:i}}function ct(t,r,s,i,o){let e=t.ang*Math.PI/180,c=Math.abs(i*Math.sin(e))+Math.abs(o*Math.cos(e)),u=((r-i/2)*Math.sin(e)-(s-o/2)*Math.cos(e))/c+.5,l=t.st;if(u<=l[0].t)return `rgba(${l[0].c})`;for(let a=1;a<l.length;a++)if(u<=l[a].t){let n=(u-l[a-1].t)/(l[a].t-l[a-1].t||1),p=l[a-1].c,m=l[a].c;return `rgba(${p.map((b,x)=>+(b+(m[x]-b)*n).toFixed(2))})`}return `rgba(${l[l.length-1].c})`}function zt(t){let r=0;for(let s=0;s<t.length;s++){let[i,o]=t[s],[e,c]=t[(s+1)%t.length];r+=i*c-e*o;}return r/2}function Vt(t,r=-1){let s=zt(t);return s===0||Math.sign(s)===r?t:[...t].reverse()}function Et(t,r,s){let i=false;for(let o=0,e=t.length-1;o<t.length;e=o++){let[c,u]=t[o],[l,a]=t[e];u>s!=a>s&&r<(l-c)*(s-u)/(a-u)+c&&(i=!i);}return i}function kt(t,r,s){let i=false;for(let o of t)Et(o,r,s)&&(i=!i);return i}function Xt(t,r,s){let i=s[0]-r[0],o=s[1]-r[1],e=i*i+o*o;return e?Math.abs((t[0]-r[0])*o-(t[1]-r[1])*i)/Math.sqrt(e):Math.hypot(t[0]-r[0],t[1]-r[1])}function Pt(t,r){let s=t.length;if(s<4)return t;let i=0,o=-1;for(let l=1;l<s;l++){let a=Math.hypot(t[l][0]-t[0][0],t[l][1]-t[0][1]);a>o&&(o=a,i=l);}let e=new Array(s).fill(false);e[0]=e[i]=true;let c=[...t,t[0]],u=[[0,i],[i,s]];for(;u.length;){let[l,a]=u.pop(),n=-1,p=-1;for(let m=l+1;m<a;m++){let b=Xt(c[m],c[l],c[a]);b>n&&(n=b,p=m);}n>r&&p>0&&(e[p]=true,u.push([l,p],[p,a]));}return t.filter((l,a)=>e[a])}function at(t,r,s,i){let o=Math.min(1,s/(t[0]+t[1]),s/(t[3]+t[2]),i/(r[0]+r[3]),i/(r[1]+r[2]));return [t.map(e=>e*o),r.map(e=>e*o)]}function ut(t,r,s,i,o=s){let e=[],c=[[1,t-s[1],o[1],-90,t,0],[2,t-s[2],r-o[2],0,t,r],[3,s[3],r-o[3],90,0,r],[0,s[0],o[0],180,0,0]];for(let[u,l,a,n,p,m]of c){let b=s[u],x=o[u],M=Math.max(b,x),g=M>.5?Math.max(1,Math.ceil(Math.PI/2/(2*Math.acos(Math.max(0,1-i/M))))):0;if(!g)e.push([p,m]);else for(let y=0;y<=g;y++){let P=(n+90*y/g)*Math.PI/180;e.push([l+b*Math.cos(P),a+x*Math.sin(P)]);}}return e.reverse()}function xt(t,r,s,i,o){let e=Math.max(s,i,o),c=Math.max(12,Math.ceil(Math.PI/Math.acos(Math.max(0,1-o/e)))),u=[];for(let l=0;l<c;l++){let a=2*Math.PI*l/c;u.push([t+s*Math.cos(a),r+i*Math.sin(a)]);}return u}var k=(t,r)=>t==null?NaN:/^-?[\d.]+(px)?$/.test(t)?parseFloat(t):/^-?[\d.]+%$/.test(t)?parseFloat(t)/100*r:NaN,_t={left:"0%",top:"0%",center:"50%",right:"100%",bottom:"100%"};function lt(t){return t.length===1?[t[0],t[0],t[0],t[0]]:t.length===2?[t[0],t[1],t[0],t[1]]:t.length===3?[t[0],t[1],t[2],t[1]]:t}function St(t,r,s,i){let o=t.trim().match(/^(polygon|circle|ellipse|inset)\(([\s\S]*)\)$/);if(!o)return null;let e=o[2].trim();if(o[1]==="polygon"){let g=vt(e);/^(nonzero|evenodd)$/.test(g[0])&&g.shift();let y=[];for(let P of g){let E=P.trim().split(/\s+/),S=k(E[0],r),T=k(E[1],s);if(E.length!==2||isNaN(S)||isNaN(T))return null;y.push([S,T]);}return y.length>=3?[y]:null}if(o[1]==="inset"){let[g,y]=e.split(/\s+round\s+/),P=g.trim().split(/\s+/);if(P.length>4)return null;let E=lt(P),S=k(E[0],s),T=k(E[1],r),K=k(E[2],s),I=k(E[3],r),D=r-I-T,C=s-S-K;if([S,T,K,I].some(isNaN)||!(D>0)||!(C>0))return null;let j=[0,0,0,0],B=[0,0,0,0];if(y){let[L,H]=y.split("/"),F=L.trim().split(/\s+/),V=(H??L).trim().split(/\s+/);if(F.length>4||V.length>4||(j=lt(F).map(N=>k(N,D)),B=lt(V).map(N=>k(N,C)),[...j,...B].some(isNaN)))return null}let[q,z]=at(j,B,D,C);return [ut(D,C,q,i,z).map(([L,H])=>[L+I,H+S])]}let[c,u]=e.split(/\s+at\s+/),l=(u||"center center").trim().split(/\s+/).map(g=>_t[g]??g),a=k(l[0],r),n=k(l[1]??"50%",s),p=c.trim();if(isNaN(a)||isNaN(n))return null;if(o[1]==="circle"){let g=p===""||p==="closest-side"?Math.min(a,r-a,n,s-n):p==="farthest-side"?Math.max(a,r-a,n,s-n):k(p,Math.sqrt((r*r+s*s)/2));return g>0?[xt(a,n,g,g,i)]:null}let[m,b]=p?p.split(/\s+/):["closest-side","closest-side"],x=m==="closest-side"?Math.min(a,r-a):m==="farthest-side"?Math.max(a,r-a):k(m,r),M=b==="closest-side"?Math.min(n,s-n):b==="farthest-side"?Math.max(n,s-n):k(b,s);return x>0&&M>0?[xt(a,n,x,M,i)]:null}function Tt(t){return t.map((r,s)=>{let i=0;return t.forEach((o,e)=>{e!==s&&Et(o,r[0][0],r[0][1])&&i++;}),Vt(r,i%2?1:-1)})}function Lt(t,r,s){if(t.every(([e,c])=>e>=0&&e<=r&&c>=0&&c<=s))return t;let i=[[e=>e[0]>=0,(e,c)=>[0,e[1]+(c[1]-e[1])*(0-e[0])/(c[0]-e[0])]],[e=>e[0]<=r,(e,c)=>[r,e[1]+(c[1]-e[1])*(r-e[0])/(c[0]-e[0])]],[e=>e[1]>=0,(e,c)=>[e[0]+(c[0]-e[0])*(0-e[1])/(c[1]-e[1]),0]],[e=>e[1]<=s,(e,c)=>[e[0]+(c[0]-e[0])*(s-e[1])/(c[1]-e[1]),s]]],o=t;for(let[e,c]of i){let u=o;o=[];for(let l=0;l<u.length;l++){let a=u[l],n=u[(l+u.length-1)%u.length];e(a)?(e(n)||o.push(c(n,a)),o.push(a)):e(n)&&o.push(c(n,a));}if(!o.length)break}return o}var Z={persp:{display:"grid",width:"100%",height:"100%"},obj:{display:"grid",width:"100%",height:"100%",transformStyle:"preserve-3d",willChange:"transform"},sink:{display:"grid",width:"100%",height:"100%",position:"relative",transformStyle:"preserve-3d"},walls:{position:"absolute",transformStyle:"preserve-3d",pointerEvents:"none"}},G="data-bb";var Jt={top:0,"top-right":45,right:90,"bottom-right":135,bottom:180,"bottom-left":225,left:270,"top-left":315},$t="[data-brickbox-ignore]",et=(t,r)=>Math.max(-r,Math.min(r,t)),Ht=()=>typeof process<"u"&&!!process.env&&process.env.NODE_ENV!=="production",Bt=false;function Zt(){if(!(Bt||typeof CSS>"u"||!CSS.registerProperty)){Bt=true;try{CSS.registerProperty({name:"--bb-p",syntax:"<number>",inherits:!0,initialValue:"1"});}catch{}}}function Dt(t){let r=t.advanced||{},s=(t.sideColor??"match").trim();return {depth:t.depth??24,control:t.control??"hover",tx:t.tilt?.x??14,ty:t.tilt?.y??22,max:t.maxAngle??60,springBack:t.springBack??true,springDur:t.springDuration??700,pressDepth:t.pressDepth,pressDur:t.pressDuration??150,side:s,shading:t.shading??s==="match",light:typeof t.light=="number"?t.light:Jt[t.light??"top-left"]??315,persp:t.perspective??1e3,edge:t.edgeColor??"none",edgeW:t.edgeWidth??1,touchScroll:t.touchScroll??true,disabled:t.disabled??false,reverseHover:t.reverseHover??false,reverseDrag:t.reverseDrag??false,ignore:t.ignore||void 0,tol:r.tolerance??.25,sens:r.sensitivity??.5,bounce:r.bounce??1,cull:r.cull??true}}function Ct(t,r){if(typeof t=="number")return t;if(/^\s*-?[\d.]+(px)?\s*$/.test(t))return parseFloat(t);let s=document.createElement("div");s.style.cssText=`position:absolute;visibility:hidden;width:${t}`,r.appendChild(s);let i=s.getBoundingClientRect().width;return s.remove(),i}function Kt(t,r,s){let i="http://www.w3.org/2000/svg",o=document.createElementNS(i,"svg");o.setAttribute("width","0"),o.setAttribute("height","0"),o.style.cssText="position:absolute;visibility:hidden;pointer-events:none",s.appendChild(o);let e=[];for(let c of t.split(/(?=M)/)){if(!c.trim())continue;let u=document.createElementNS(i,"path");u.setAttribute("d",c),o.appendChild(u);let l=0;try{l=u.getTotalLength();}catch{}if(!(l>0))continue;let a=Math.max(1,l/1500),n=[];for(let m=0;m<l;m+=a){let b=u.getPointAtLength(m);n.push([b.x,b.y]);}let p=Pt(n,r);p.length>=3&&e.push(p);}return o.remove(),e}function Qt(t,r,s,i,o){let e=(t.getPropertyValue("clip-path")||t.getPropertyValue("-webkit-clip-path")||"").trim().replace(/\s+border-box$/,"");if(e&&e!=="none"){let p=e.match(/^path\(\s*(?:(?:evenodd|nonzero)\s*,\s*)?["']([^"']*)["']\s*\)$/),b=((p?Kt(p[1],i,o):St(e,r,s,i))||[]).map(x=>Lt(x,r,s)).filter(x=>x.length>=3);if(b.length)return Tt(b);Ht()&&console.warn(`[brickbox] clip-path "${e}" is not supported, so the walls use the rounded rectangle instead.`);}let c=[],u=[],l=(p,m)=>p.endsWith("%")?parseFloat(p)/100*m:parseFloat(p)||0;for(let p of ["top-left","top-right","bottom-right","bottom-left"]){let m=t.getPropertyValue(`border-${p}-radius`).trim().split(/\s+/);c.push(l(m[0]||"0",r)),u.push(l(m[1]??m[0]??"0",s));}let[a,n]=at(c,u,r,s);return [ut(r,s,a,i,n)]}function Ut(t){let r=a=>t.querySelector(`[${G}="${a}"]`),s=r("persp");if(s){let a=r("sink");return {persp:s,obj:r("obj"),sink:a,walls:r("walls"),child:a.firstElementChild,built:false}}let i=t.firstElementChild;if(!i)throw new Error("brickbox: the root needs one element child");let o=a=>{let n=document.createElement("div");return n.setAttribute(G,a),Object.assign(n.style,Z[a]),n},e=o("persp"),c=o("obj"),u=o("sink"),l=o("walls");return l.setAttribute("aria-hidden","true"),t.append(e),e.append(c),c.append(u),u.append(i,l),{persp:e,obj:c,sink:u,walls:l,child:i,built:true}}function Nt(t,r={}){Zt();let s=Ut(t),{persp:i,obj:o,sink:e,walls:c,child:u}=s,l=typeof matchMedia<"u"?matchMedia("(prefers-reduced-motion: reduce)"):null,a=r,n=Dt(a),p={w:0,h:0,ox:0,oy:0,pp:1},m=[],b=n.tx,x=n.ty,M=false,g=null,y=false,P=false;if(!t.style.display){let d=e.style.display;e.style.display="block";let f=/^inline/.test(getComputedStyle(u).display);e.style.display=d,t.style.display=f?"inline-block":"block",P=true;}let E=()=>n.control==="hover"||n.control==="both",S=()=>n.control==="drag"||n.control==="both",T=(d,f,h)=>{b=d,x=f,o.style.transition=h||"none",o.style.transform=`rotateX(${d}deg) rotateY(${-f}deg)`;},K=()=>l?.matches?"none":`transform ${n.springDur}ms cubic-bezier(.2,${1+.5*n.bounce},.4,1)`,I=()=>T(n.tx,n.ty,K()),D=d=>e.style.setProperty("--bb-p",String(d&&p.pp<1?p.pp:1));function C(){n=Dt(a);let d=u.offsetWidth,f=u.offsetHeight,h=u.offsetLeft,O=u.offsetTop,$=Math.max(0,Ct(n.depth,t));Ht()&&$>n.persp*.5&&console.warn(`[brickbox] depth ${$}px is more than half of perspective (${n.persp}px); the box may clip or distort.`);let w=n.pressDepth==null?1:Math.min(1,Math.max(0,Ct(n.pressDepth,t)/($||1)));p={w:d,h:f,ox:h,oy:O,pp:w};let X=!!l?.matches;if(c.innerHTML="",c.hidden=n.disabled,Object.assign(c.style,{left:h+"px",top:O+"px",width:d+"px",height:f+"px"}),e.style.setProperty("--bb-d",$+"px"),e.style.transform="translateZ(calc(var(--bb-d) * (var(--bb-p) - 1)))",e.style.transition=`--bb-p ${X?0:n.pressDur}ms ease`,i.style.perspective=n.persp+"px",o.style.transformOrigin=`${h+d/2}px ${O+f/2}px ${-$/2}px`,t.style.touchAction=S()||n.control==="hover"&&!n.touchScroll?"none":n.control==="hover"?"pan-y":"auto",t.style.cursor=S()?"grab":"",m=[],n.disabled||!d||!f){o.style.transform="none";return}let W=getComputedStyle(u);m=Qt(W,d,f,n.tol,t);let Y=W.backgroundImage,U=Y.startsWith("linear-gradient")?Mt(Y):null,tt=W.backgroundColor;(tt==="rgba(0, 0, 0, 0)"||tt==="transparent")&&(tt="rgb(120,120,130)");let pt=n.side==="match",dt=pt?tt:n.side,mt=n.light*Math.PI/180,Ot=Math.sin(mt),At=-Math.cos(mt),ot=n.edge==="none"||n.edge===""?null:n.edge==="auto"?"rgba(0,0,0,.5)":n.edge,ft=document.createDocumentFragment();for(let R of m){let _=R.length,Q=R.map((v,J)=>{let A=R[(J+1)%_];return {a:Math.atan2(A[1]-v[1],A[0]-v[0]),len:Math.hypot(A[0]-v[0],A[1]-v[1])}});for(let v=0;v<_;v++){if(Q[v].len<.01)continue;let J=(v+_-1)%_;for(;Q[J].len<.01&&J!==v;)J=(J+_-1)%_;let A=Math.abs(Q[v].a-Q[J].a);A=Math.min(A,2*Math.PI-A);let[ht,bt]=R[v],[It,jt]=R[(v+1)%_],it=Q[v].a,Ft=(-Math.sin(it)*Ot+Math.cos(it)*At+1)/2,gt=.08+.3*(1-Ft),Wt=gt+.28,Yt=pt&&U?`linear-gradient(90deg,${ct(U,ht,bt,d,f)},${ct(U,It,jt,d,f)})`:`linear-gradient(${dt},${dt})`,Gt=n.shading?`linear-gradient(rgba(0,0,0,${gt.toFixed(2)}),rgba(0,0,0,${Wt.toFixed(2)})),`:"",qt=ot?`border-bottom:${n.edgeW}px solid ${ot};${A>.9?`border-left:${n.edgeW}px solid ${ot};`:""}`:"",yt=document.createElement("i");yt.style.cssText=`position:absolute;left:0;top:0;box-sizing:border-box;height:var(--bb-d);transform-origin:0 0;${n.cull?"backface-visibility:hidden;":""}width:${Q[v].len+.5}px;${qt}background:${Gt}${Yt};transform:translate(${ht}px,${bt}px) rotate(${it*180/Math.PI}deg) rotateX(-90deg) scaleY(var(--bb-p))`,ft.appendChild(yt);}}c.appendChild(ft),!g&&!M&&T(n.tx,n.ty);}let j=d=>{let f=t.getBoundingClientRect();return [d.clientX-f.left-p.ox,d.clientY-f.top-p.oy]},B=d=>{let[f,h]=j(d);return f<0||h<0||f>p.w||h>p.h?false:m.length?kt(m,f,h):true},q=d=>{let f=d.target;if(!f||!f.closest)return  false;try{let h=f.closest(n.ignore?`${$t},${n.ignore}`:$t);return !!h&&u.contains(h)}catch{return  false}},z=d=>{let[f,h]=j(d),O=(W,Y)=>Math.max(-1,Math.min(1,(W-Y/2)/(Y/2))),$=O(f,p.w),w=O(h,p.h),X=n.reverseHover?-1:1;M=true,T(et(n.tx*.3-X*w*n.max*.7,n.max),et(n.ty*.3-X*$*n.max*.7,n.max),"transform .15s ease-out");},L=()=>{M=false,n.springBack&&I();},H=d=>{if(!(n.disabled||g||!E()||d.pointerType==="touch"||l?.matches)){if(!B(d)){M&&L();return}q(d)||z(d);}},F=()=>{M&&L();},V=d=>{if(n.disabled||!B(d)||q(d))return;let f=d.pointerType==="touch",h={x:d.clientX,y:d.clientY,tx:b,ty:x,moved:false,touch:f,dragging:S()||E()&&f};g=h,D(true);let O=w=>{let X=w.clientX-h.x,W=w.clientY-h.y;if(!h.moved){if(Math.hypot(X,W)<5)return;h.moved=true,D(false);}if(!h.dragging)return;let Y=n.reverseDrag?-1:1,U=h.touch&&n.control==="hover"&&n.touchScroll?0:W;T(et(h.tx-Y*U*n.sens,n.max),et(h.ty-Y*X*n.sens,n.max));},$=w=>{removeEventListener("pointermove",O),removeEventListener("pointerup",$),removeEventListener("pointercancel",$),g=null,D(false),y=h.moved&&h.dragging,y&&(E()&&!h.touch&&B(w)&&!q(w)?z(w):(M=false,n.springBack&&I()));};addEventListener("pointermove",O),addEventListener("pointerup",$),addEventListener("pointercancel",$);},N=d=>{y&&(d.stopPropagation(),d.preventDefault(),y=false);};t.addEventListener("pointermove",H),t.addEventListener("pointerleave",F),t.addEventListener("pointerdown",V),u.addEventListener("click",N,true);let st=new ResizeObserver(C);return st.observe(u),st.observe(e),C(),{update(d){a={...a,...d,advanced:{...a.advanced,...d.advanced}},C();},destroy(){st.disconnect(),t.removeEventListener("pointermove",H),t.removeEventListener("pointerleave",F),t.removeEventListener("pointerdown",V),u.removeEventListener("click",N,true),t.style.touchAction="",t.style.cursor="",P&&(t.style.display=""),s.built&&(t.insertBefore(u,i),i.remove());}}}var wt=typeof window<"u"?react.useLayoutEffect:react.useEffect,de=react.forwardRef(function(r,s){let{as:i,children:o,depth:e,control:c,tilt:u,maxAngle:l,springBack:a,springDuration:n,pressDepth:p,pressDuration:m,sideColor:b,shading:x,light:M,perspective:g,edgeColor:y,edgeWidth:P,touchScroll:E,disabled:S,advanced:T,reverseHover:K,reverseDrag:I,ignore:D,...C}=r,j=i||"div",B={depth:e,control:c,tilt:u,maxAngle:l,springBack:a,springDuration:n,pressDepth:p,pressDuration:m,sideColor:b,shading:x,light:M,perspective:g,edgeColor:y,edgeWidth:P,touchScroll:E,disabled:S,advanced:T,reverseHover:K,reverseDrag:I,ignore:D},q=JSON.stringify(B),z=react.useRef(null),L=react.useRef(null),H=react.useRef(B),F=react.useRef(true);H.current=B;let V=react.useCallback(N=>{z.current=N,typeof s=="function"?s(N):s&&(s.current=N);},[s]);return wt(()=>(L.current=Nt(z.current,H.current),()=>{L.current?.destroy(),L.current=null;}),[]),wt(()=>{if(F.current){F.current=false;return}L.current?.update(H.current);},[q]),jsxRuntime.jsx(j,{...C,ref:V,suppressHydrationWarning:true,children:jsxRuntime.jsx("div",{[G]:"persp",style:Z.persp,children:jsxRuntime.jsx("div",{[G]:"obj",style:Z.obj,children:jsxRuntime.jsxs("div",{[G]:"sink",style:Z.sink,children:[o,jsxRuntime.jsx("div",{[G]:"walls","aria-hidden":"true",style:Z.walls})]})})})})});
+exports.BrickBox=de;

package/dist/react.js

@@ -1 +1 @@
-import {c,a,b}from'./chunk-3CCNRF7U.js';import {forwardRef,useRef,useCallback,useLayoutEffect,useEffect}from'react';import {jsx,jsxs}from'react/jsx-runtime';var d=typeof window<"u"?useLayoutEffect:useEffect,K=forwardRef(function(f,e){let{as:m,children:B,depth:y,control:k,tilt:T,maxAngle:E,springBack:S,springDuration:x,pressDepth:g,pressDuration:h,sideColor:v,shading:L,light:b$1,perspective:C,edgeColor:H,edgeWidth:M,touchScroll:P,disabled:R,advanced:w,...O}=f,A=m||"div",i={depth:y,control:k,tilt:T,maxAngle:E,springBack:S,springDuration:x,pressDepth:g,pressDuration:h,sideColor:v,shading:L,light:b$1,perspective:C,edgeColor:H,edgeWidth:M,touchScroll:P,disabled:R,advanced:w},D=JSON.stringify(i),p=useRef(null),n=useRef(null),c$1=useRef(i),u=useRef(true);c$1.current=i;let I=useCallback(l=>{p.current=l,typeof e=="function"?e(l):e&&(e.current=l);},[e]);return d(()=>(n.current=c(p.current,c$1.current),()=>{n.current?.destroy(),n.current=null;}),[]),d(()=>{if(u.current){u.current=false;return}n.current?.update(c$1.current);},[D]),jsx(A,{...O,ref:I,suppressHydrationWarning:true,children:jsx("div",{[b]:"persp",style:a.persp,children:jsx("div",{[b]:"obj",style:a.obj,children:jsxs("div",{[b]:"sink",style:a.sink,children:[B,jsx("div",{[b]:"walls","aria-hidden":"true",style:a.walls})]})})})})});export{K as BrickBox};
+import {c,a,b}from'./chunk-VDSG5ZZE.js';import {forwardRef,useRef,useCallback,useLayoutEffect,useEffect}from'react';import {jsx,jsxs}from'react/jsx-runtime';var d=typeof window<"u"?useLayoutEffect:useEffect,V=forwardRef(function(f,e){let{as:m,children:B,depth:y,control:k,tilt:T,maxAngle:E,springBack:S,springDuration:g,pressDepth:v,pressDuration:x,sideColor:h,shading:L,light:H,perspective:b$1,edgeColor:C,edgeWidth:M,touchScroll:P,disabled:R,advanced:w,reverseHover:O,reverseDrag:A,ignore:D,...I}=f,W=m||"div",i={depth:y,control:k,tilt:T,maxAngle:E,springBack:S,springDuration:g,pressDepth:v,pressDuration:x,sideColor:h,shading:L,light:H,perspective:b$1,edgeColor:C,edgeWidth:M,touchScroll:P,disabled:R,advanced:w,reverseHover:O,reverseDrag:A,ignore:D},j=JSON.stringify(i),p=useRef(null),n=useRef(null),c$1=useRef(i),u=useRef(true);c$1.current=i;let J=useCallback(l=>{p.current=l,typeof e=="function"?e(l):e&&(e.current=l);},[e]);return d(()=>(n.current=c(p.current,c$1.current),()=>{n.current?.destroy(),n.current=null;}),[]),d(()=>{if(u.current){u.current=false;return}n.current?.update(c$1.current);},[j]),jsx(W,{...I,ref:J,suppressHydrationWarning:true,children:jsx("div",{[b]:"persp",style:a.persp,children:jsx("div",{[b]:"obj",style:a.obj,children:jsxs("div",{[b]:"sink",style:a.sink,children:[B,jsx("div",{[b]:"walls","aria-hidden":"true",style:a.walls})]})})})})});export{V as BrickBox};

package/dist/{types-Cdnliv69.d.cts → types-Bl-EhzNO.d.cts}

@@ -1,4 +1,4 @@
-type Control = 'hover' | 'drag' | 'static';
+type Control = 'hover' | 'drag' | 'both' | 'static';
 type LightWord = 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left';
 /** Resting angle in degrees. Positive x shows the bottom wall, positive y shows the right wall. */
 interface Tilt {
@@ -18,7 +18,10 @@ interface Advanced {
 interface BrickBoxOptions {
     /** Extrusion length. A number is px, a string is any CSS length. @default 24 */
     depth?: number | string;
-    /** How the box reacts to the pointer. On touch, "hover" behaves as drag. @default "hover" */
+    /**
+     * How the box reacts to the pointer. "both" tilts on hover until you grab it, drag takes over while held,
+     * then hover resumes. On touch, "hover" and "both" behave as drag. @default "hover"
+     */
     control?: Control;
     /** Resting angle in degrees. @default { x: 14, y: 22 } */
     tilt?: Tilt;
@@ -44,6 +47,15 @@ interface BrickBoxOptions {
     edgeColor?: 'none' | 'auto' | (string & {});
     /** Edge line width in px. @default 1 */
     edgeWidth?: number;
+    /** Flip the hover tilt direction. @default false */
+    reverseHover?: boolean;
+    /** Flip the drag direction. @default false */
+    reverseDrag?: boolean;
+    /**
+     * CSS selector for areas inside the element that ignore hover, drag and press, such as a knob.
+     * Elements with a data-brickbox-ignore attribute are ignored too.
+     */
+    ignore?: string;
     /** Touch only: true lets vertical swipes scroll the page (only horizontal drags tilt). @default true */
     touchScroll?: boolean;
     /** Render the child normally with no 3D. @default false */

package/dist/{types-Cdnliv69.d.ts → types-Bl-EhzNO.d.ts}

@@ -1,4 +1,4 @@
-type Control = 'hover' | 'drag' | 'static';
+type Control = 'hover' | 'drag' | 'both' | 'static';
 type LightWord = 'top' | 'top-right' | 'right' | 'bottom-right' | 'bottom' | 'bottom-left' | 'left' | 'top-left';
 /** Resting angle in degrees. Positive x shows the bottom wall, positive y shows the right wall. */
 interface Tilt {
@@ -18,7 +18,10 @@ interface Advanced {
 interface BrickBoxOptions {
     /** Extrusion length. A number is px, a string is any CSS length. @default 24 */
     depth?: number | string;
-    /** How the box reacts to the pointer. On touch, "hover" behaves as drag. @default "hover" */
+    /**
+     * How the box reacts to the pointer. "both" tilts on hover until you grab it, drag takes over while held,
+     * then hover resumes. On touch, "hover" and "both" behave as drag. @default "hover"
+     */
     control?: Control;
     /** Resting angle in degrees. @default { x: 14, y: 22 } */
     tilt?: Tilt;
@@ -44,6 +47,15 @@ interface BrickBoxOptions {
     edgeColor?: 'none' | 'auto' | (string & {});
     /** Edge line width in px. @default 1 */
     edgeWidth?: number;
+    /** Flip the hover tilt direction. @default false */
+    reverseHover?: boolean;
+    /** Flip the drag direction. @default false */
+    reverseDrag?: boolean;
+    /**
+     * CSS selector for areas inside the element that ignore hover, drag and press, such as a knob.
+     * Elements with a data-brickbox-ignore attribute are ignored too.
+     */
+    ignore?: string;
     /** Touch only: true lets vertical swipes scroll the page (only horizontal drags tilt). @default true */
     touchScroll?: boolean;
     /** Render the child normally with no 3D. @default false */

package/package.json

@@ -1,105 +1,105 @@
-{
-  "name": "brickbox",
-  "version": "0.1.0",
-  "description": "Wrap any element and give it real 3D depth. Tiny framework-free core with a React wrapper.",
-  "keywords": [
-    "3d",
-    "css",
-    "depth",
-    "extrude",
-    "tilt",
-    "react",
-    "web-component",
-    "custom-element",
-    "ui",
-    "tactile",
-    "button",
-    "card"
-  ],
-  "license": "MIT",
-  "author": "PRASHANT PRASAD",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Prashaxt/brickbox.git"
-  },
-  "homepage": "https://github.com/Prashaxt/brickbox#readme",
-  "bugs": {
-    "url": "https://github.com/Prashaxt/brickbox/issues"
-  },
-  "type": "module",
-  "sideEffects": false,
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "react": [
-        "./dist/react.d.ts"
-      ],
-      "element": [
-        "./dist/element.d.ts"
-      ]
-    }
-  },
-  "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      },
-      "require": {
-        "types": "./dist/index.d.cts",
-        "default": "./dist/index.cjs"
-      }
-    },
-    "./react": {
-      "import": {
-        "types": "./dist/react.d.ts",
-        "default": "./dist/react.js"
-      },
-      "require": {
-        "types": "./dist/react.d.cts",
-        "default": "./dist/react.cjs"
-      }
-    },
-    "./element": {
-      "import": {
-        "types": "./dist/element.d.ts",
-        "default": "./dist/element.js"
-      },
-      "require": {
-        "types": "./dist/element.d.cts",
-        "default": "./dist/element.cjs"
-      }
-    }
-  },
-  "files": [
-    "dist"
-  ],
-  "engines": {
-    "node": ">=18"
-  },
-  "scripts": {
-    "build": "tsup",
-    "test": "vitest run",
-    "typecheck": "tsc --noEmit",
-    "size": "node scripts/size.mjs",
-    "prepublishOnly": "npm run typecheck && npm test && npm run build"
-  },
-  "peerDependencies": {
-    "react": ">=17"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    }
-  },
-  "devDependencies": {
-    "@types/react": "^19.3.0",
-    "react": "^19.3.1",
-    "react-dom": "^19.3.1",
-    "tsup": "^9.0.0",
-    "typescript": "^5.9.3",
-    "vitest": "^5.0.5"
-  }
-}
+{
+  "name": "brickbox",
+  "version": "0.2.0",
+  "description": "Wrap any element and give it real 3D depth. Tiny framework-free core with a React wrapper.",
+  "keywords": [
+    "3d",
+    "css",
+    "depth",
+    "extrude",
+    "tilt",
+    "react",
+    "web-component",
+    "custom-element",
+    "ui",
+    "tactile",
+    "button",
+    "card"
+  ],
+  "license": "MIT",
+  "author": "PRASHANT PRASAD",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Prashaxt/brickbox.git"
+  },
+  "homepage": "https://github.com/Prashaxt/brickbox#readme",
+  "bugs": {
+    "url": "https://github.com/Prashaxt/brickbox/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "react": [
+        "./dist/react.d.ts"
+      ],
+      "element": [
+        "./dist/element.d.ts"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./react": {
+      "import": {
+        "types": "./dist/react.d.ts",
+        "default": "./dist/react.js"
+      },
+      "require": {
+        "types": "./dist/react.d.cts",
+        "default": "./dist/react.cjs"
+      }
+    },
+    "./element": {
+      "import": {
+        "types": "./dist/element.d.ts",
+        "default": "./dist/element.js"
+      },
+      "require": {
+        "types": "./dist/element.d.cts",
+        "default": "./dist/element.cjs"
+      }
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "size": "node scripts/size.mjs",
+    "prepublishOnly": "npm run typecheck && npm test && npm run build"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "tsup": "^9.0.0",
+    "typescript": "^5.9.3",
+    "vitest": "^5.0.5"
+  }
+}

package/dist/chunk-3CCNRF7U.js

@@ -1 +0,0 @@
-var oe={persp:{display:"grid",width:"100%",height:"100%"},obj:{display:"grid",width:"100%",height:"100%",transformStyle:"preserve-3d",willChange:"transform"},sink:{display:"grid",width:"100%",height:"100%",position:"relative",transformStyle:"preserve-3d"},walls:{position:"absolute",transformStyle:"preserve-3d",pointerEvents:"none"}},W="data-bb";function ke(e){let i=[],o=0,s="";for(let n of e)n==="("&&o++,n===")"&&o--,n===","&&!o?(i.push(s.trim()),s=""):s+=n;return i.push(s.trim()),i}function ie(e){if((e.match(/gradient\(/g)||[]).length!==1)return null;let i=ke(e.slice(e.indexOf("(")+1,e.lastIndexOf(")"))),o=180;if(/^to /.test(i[0])||/deg$/.test(i[0])){let n=i.shift();if(/deg$/.test(n))o=parseFloat(n);else {let l=/top/.test(n),d=/bottom/.test(n),p=/left/.test(n),c=/right/.test(n);o=l&&c?45:d&&c?135:d&&p?225:l&&p?315:c?90:p?270:l?0:180;}}let s=[];for(let n of i){let l=n.match(/^(rgba?\([^)]*\))\s*([\d.]+)?%?$/);if(!l||/px|em/.test(n))return null;let d=l[1].match(/[\d.]+/g).map(Number);d.length<4&&d.push(1),s.push({raw:n,c:d,t:l[2]==null?null:+l[2]/100});}if(s.length<2)return null;s[0].t==null&&(s[0].t=0),s[s.length-1].t==null&&(s[s.length-1].t=1);for(let n=1;n<s.length;n++){if(s[n].t!=null)continue;let l=n;for(;s[l].t==null;)l++;let d=s[n-1].t,p=s[l].t;for(let c=n;c<l;c++)s[c].t=d+(p-d)*(c-n+1)/(l-n+1);}return {ang:o,st:s}}function G(e,i,o,s,n){let l=e.ang*Math.PI/180,d=Math.abs(s*Math.sin(l))+Math.abs(n*Math.cos(l)),p=((i-s/2)*Math.sin(l)-(o-n/2)*Math.cos(l))/d+.5,c=e.st;if(p<=c[0].t)return `rgba(${c[0].c})`;for(let u=1;u<c.length;u++)if(p<=c[u].t){let t=(p-c[u-1].t)/(c[u].t-c[u-1].t||1),h=c[u-1].c,v=c[u].c;return `rgba(${h.map((M,y)=>+(M+(v[y]-M)*t).toFixed(2))})`}return `rgba(${c[c.length-1].c})`}function le(e,i,o){let s=Math.min(1,i/(e[0]+e[1]),i/(e[3]+e[2]),o/(e[0]+e[3]),o/(e[1]+e[2]));return e.map(n=>n*s)}function ae(e,i,o,s){let n=[],l=[[1,e-o[1],o[1],-90,e,0],[2,e-o[2],i-o[2],0,e,i],[3,o[3],i-o[3],90,0,i],[0,o[0],o[0],180,0,0]];for(let[d,p,c,u,t,h]of l){let v=o[d],M=v>.5?Math.max(1,Math.ceil(Math.PI/2/(2*Math.acos(Math.max(0,1-s/v))))):0;if(!M)n.push([t,h]);else for(let y=0;y<=M;y++){let k=(u+90*y/M)*Math.PI/180;n.push([p+v*Math.cos(k),c+v*Math.sin(k)]);}}return n.reverse()}var Le={top:0,"top-right":45,right:90,"bottom-right":135,bottom:180,"bottom-left":225,left:270,"top-left":315},H=(e,i)=>Math.max(-i,Math.min(i,e)),Se=()=>typeof process<"u"&&!!process.env&&process.env.NODE_ENV!=="production",ce=false;function we(){if(!(ce||typeof CSS>"u"||!CSS.registerProperty)){ce=true;try{CSS.registerProperty({name:"--bb-p",syntax:"<number>",inherits:!0,initialValue:"1"});}catch{}}}function pe(e){let i=e.advanced||{},o=(e.sideColor??"match").trim();return {depth:e.depth??24,control:e.control??"hover",tx:e.tilt?.x??14,ty:e.tilt?.y??22,max:e.maxAngle??60,springBack:e.springBack??true,springDur:e.springDuration??700,pressDepth:e.pressDepth,pressDur:e.pressDuration??150,side:o,shading:e.shading??o==="match",light:typeof e.light=="number"?e.light:Le[e.light??"top-left"]??315,persp:e.perspective??1e3,edge:e.edgeColor??"none",edgeW:e.edgeWidth??1,touchScroll:e.touchScroll??true,disabled:e.disabled??false,tol:i.tolerance??.25,sens:i.sensitivity??.5,bounce:i.bounce??1,cull:i.cull??true}}function ue(e,i){if(typeof e=="number")return e;if(/^\s*-?[\d.]+(px)?\s*$/.test(e))return parseFloat(e);let o=document.createElement("div");o.style.cssText=`position:absolute;visibility:hidden;width:${e}`,i.appendChild(o);let s=o.getBoundingClientRect().width;return o.remove(),s}function Te(e){let i=u=>e.querySelector(`[${W}="${u}"]`),o=i("persp");if(o){let u=i("sink");return {persp:o,obj:i("obj"),sink:u,walls:i("walls"),child:u.firstElementChild,built:false}}let s=e.firstElementChild;if(!s)throw new Error("brickbox: the root needs one element child");let n=u=>{let t=document.createElement("div");return t.setAttribute(W,u),Object.assign(t.style,oe[u]),t},l=n("persp"),d=n("obj"),p=n("sink"),c=n("walls");return c.setAttribute("aria-hidden","true"),e.append(l),l.append(d),d.append(p),p.append(s,c),{persp:l,obj:d,sink:p,walls:c,child:s,built:true}}function He(e,i={}){we();let o=Te(e),{persp:s,obj:n,sink:l,walls:d,child:p}=o,c=typeof matchMedia<"u"?matchMedia("(prefers-reduced-motion: reduce)"):null,u=i,t=pe(u),h={w:0,h:0,ox:0,oy:0,pp:1},v=t.tx,M=t.ty,y=false,k=null,D=false,X=false;if(!e.style.display){let r=l.style.display;l.style.display="block";let a=/^inline/.test(getComputedStyle(p).display);l.style.display=r,e.style.display=a?"inline-block":"block",X=true;}let P=(r,a,g)=>{v=r,M=a,n.style.transition=g||"none",n.style.transform=`rotateX(${r}deg) rotateY(${-a}deg)`;},de=()=>c?.matches?"none":`transform ${t.springDur}ms cubic-bezier(.2,${1+.5*t.bounce},.4,1)`,N=()=>P(t.tx,t.ty,de()),j=r=>l.style.setProperty("--bb-p",String(r&&h.pp<1?h.pp:1));function I(){t=pe(u);let r=p.offsetWidth,a=p.offsetHeight,g=p.offsetLeft,f=p.offsetTop,x=Math.max(0,ue(t.depth,e));Se()&&x>t.persp*.5&&console.warn(`[brickbox] depth ${x}px is more than half of perspective (${t.persp}px); the box may clip or distort.`);let S=t.pressDepth==null?1:Math.min(1,Math.max(0,ue(t.pressDepth,e)/(x||1)));h={w:r,h:a,ox:g,oy:f,pp:S};let w=!!c?.matches;if(d.innerHTML="",d.hidden=t.disabled,Object.assign(d.style,{left:g+"px",top:f+"px",width:r+"px",height:a+"px"}),l.style.setProperty("--bb-d",x+"px"),l.style.transform="translateZ(calc(var(--bb-d) * (var(--bb-p) - 1)))",l.style.transition=`--bb-p ${w?0:t.pressDur}ms ease`,s.style.perspective=t.persp+"px",n.style.transformOrigin=`${g+r/2}px ${f+a/2}px ${-x/2}px`,e.style.touchAction=t.control==="drag"||t.control==="hover"&&!t.touchScroll?"none":t.control==="hover"?"pan-y":"auto",e.style.cursor=t.control==="drag"?"grab":"",t.disabled||!r||!a){n.style.transform="none";return}let $=getComputedStyle(p),me=le(["top-left","top-right","bottom-right","bottom-left"].map(m=>{let b=$.getPropertyValue(`border-${m}-radius`).split(" ")[0];return b.endsWith("%")?parseFloat(b)/100*r:parseFloat(b)||0}),r,a),K=$.backgroundImage,A=K.startsWith("linear-gradient")?ie(K):null,C=$.backgroundColor;(C==="rgba(0, 0, 0, 0)"||C==="transparent")&&(C="rgb(120,120,130)");let Q=t.side==="match",U=Q?C:t.side,R=t.light*Math.PI/180,be=Math.sin(R),he=-Math.cos(R),E=ae(r,a,me,t.tol),L=E.length,ge=m=>{let b=E[(m+1)%L];return {a:Math.atan2(b[1]-E[m][1],b[0]-E[m][0]),len:Math.hypot(b[0]-E[m][0],b[1]-E[m][1])}},T=E.map((m,b)=>ge(b)),Y=t.edge==="none"||t.edge===""?null:t.edge==="auto"?"rgba(0,0,0,.5)":t.edge,ee=document.createDocumentFragment();for(let m=0;m<L;m++){if(T[m].len<.01)continue;let b=(m+L-1)%L;for(;T[b].len<.01&&b!==m;)b=(b+L-1)%L;let B=Math.abs(T[m].a-T[b].a);B=Math.min(B,2*Math.PI-B);let[te,ne]=E[m],[fe,ye]=E[(m+1)%L],F=T[m].a,xe=(-Math.sin(F)*be+Math.cos(F)*he+1)/2,re=.08+.3*(1-xe),ve=re+.28,Me=Q&&A?`linear-gradient(90deg,${G(A,te,ne,r,a)},${G(A,fe,ye,r,a)})`:`linear-gradient(${U},${U})`,Ee=t.shading?`linear-gradient(rgba(0,0,0,${re.toFixed(2)}),rgba(0,0,0,${ve.toFixed(2)})),`:"",$e=Y?`border-bottom:${t.edgeW}px solid ${Y};${B>.9?`border-left:${t.edgeW}px solid ${Y};`:""}`:"",se=document.createElement("i");se.style.cssText=`position:absolute;left:0;top:0;box-sizing:border-box;height:var(--bb-d);transform-origin:0 0;${t.cull?"backface-visibility:hidden;":""}width:${T[m].len+.5}px;${$e}background:${Ee}${Me};transform:translate(${te}px,${ne}px) rotate(${F*180/Math.PI}deg) rotateX(-90deg) scaleY(var(--bb-p))`,ee.appendChild(se);}d.appendChild(ee),!k&&!y&&P(t.tx,t.ty);}let z=r=>{let a=e.getBoundingClientRect(),g=a.left+h.ox,f=a.top+h.oy;return r.clientX>=g&&r.clientX<=g+h.w&&r.clientY>=f&&r.clientY<=f+h.h},V=()=>{y=false,t.springBack&&N();},q=r=>{if(t.disabled||k||t.control!=="hover"||r.pointerType==="touch"||c?.matches)return;if(!z(r)){y&&V();return}let a=e.getBoundingClientRect(),g=(S,w,$)=>Math.max(-1,Math.min(1,(S-w-$/2)/($/2))),f=g(r.clientX,a.left+h.ox,h.w),x=g(r.clientY,a.top+h.oy,h.h);y=true,P(H(t.tx*.3-x*t.max*.7,t.max),H(t.ty*.3-f*t.max*.7,t.max),"transform .15s ease-out");},_=()=>{y&&V();},Z=r=>{if(t.disabled||!z(r))return;let a={x:r.clientX,y:r.clientY,tx:v,ty:M,moved:false,touch:r.pointerType==="touch",dragging:t.control==="drag"||t.control==="hover"&&r.pointerType==="touch"};k=a,j(true);let g=x=>{let S=x.clientX-a.x,w=x.clientY-a.y;if(!a.moved){if(Math.hypot(S,w)<5)return;a.moved=true,j(false);}if(!a.dragging)return;let $=a.touch&&t.control==="hover"&&t.touchScroll?0:w;P(H(a.tx-$*t.sens,t.max),H(a.ty-S*t.sens,t.max));},f=()=>{removeEventListener("pointermove",g),removeEventListener("pointerup",f),removeEventListener("pointercancel",f),k=null,j(false),D=a.moved&&a.dragging,D&&t.springBack&&N();};addEventListener("pointermove",g),addEventListener("pointerup",f),addEventListener("pointercancel",f);},J=r=>{D&&(r.stopPropagation(),r.preventDefault(),D=false);};e.addEventListener("pointermove",q),e.addEventListener("pointerleave",_),e.addEventListener("pointerdown",Z),p.addEventListener("click",J,true);let O=new ResizeObserver(I);return O.observe(p),O.observe(l),I(),{update(r){u={...u,...r,advanced:{...u.advanced,...r.advanced}},I();},destroy(){O.disconnect(),e.removeEventListener("pointermove",q),e.removeEventListener("pointerleave",_),e.removeEventListener("pointerdown",Z),p.removeEventListener("click",J,true),e.style.touchAction="",e.style.cursor="",X&&(e.style.display=""),o.built&&(e.insertBefore(p,s),s.remove());}}}export{oe as a,W as b,He as c};