brickbox 0.0.0-stage → 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 PRASHANT PRASAD
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,114 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# 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

@@ -0,0 +1,2 @@
+'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.d.cts

@@ -0,0 +1,11 @@
+/** `<brick-box>`: wrap exactly one element child. Define it after the page has parsed (module scripts do). */
+declare class BrickBoxElement extends HTMLElement {
+    static observedAttributes: string[];
+    private inst?;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare function defineBrickBox(tag?: string): void;
+
+export { BrickBoxElement, defineBrickBox };

package/dist/element.d.ts

@@ -0,0 +1,11 @@
+/** `<brick-box>`: wrap exactly one element child. Define it after the page has parsed (module scripts do). */
+declare class BrickBoxElement extends HTMLElement {
+    static observedAttributes: string[];
+    private inst?;
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    disconnectedCallback(): void;
+}
+declare function defineBrickBox(tag?: string): void;
+
+export { BrickBoxElement, defineBrickBox };

package/dist/element.js

@@ -0,0 +1 @@
+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

@@ -0,0 +1,2 @@
+'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

@@ -0,0 +1,6 @@
+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;
+
+export { BrickBoxInstance, BrickBoxOptions, brickbox };

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+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;
+
+export { BrickBoxInstance, BrickBoxOptions, brickbox };

package/dist/index.js

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

package/dist/react.cjs

@@ -0,0 +1,2 @@
+'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.d.cts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { HTMLAttributes, ElementType, ReactElement } from 'react';
+import { BrickBoxOptions } from './index.cjs';
+
+interface BrickBoxProps extends BrickBoxOptions, Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Element type of the outer wrapper. Layout props (flex, grid, margin) belong here. @default "div" */
+    as?: ElementType;
+    /** Exactly one element: the front face. */
+    children: ReactElement;
+}
+/**
+ * Gives its single child real 3D depth.
+ * Layout on the wrapper (className, style), looks on the child.
+ */
+declare const BrickBox: react.ForwardRefExoticComponent<BrickBoxProps & react.RefAttributes<HTMLElement>>;
+
+export { BrickBox };
+export type { BrickBoxProps };

package/dist/react.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { HTMLAttributes, ElementType, ReactElement } from 'react';
+import { BrickBoxOptions } from './index.js';
+
+interface BrickBoxProps extends BrickBoxOptions, Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /** Element type of the outer wrapper. Layout props (flex, grid, margin) belong here. @default "div" */
+    as?: ElementType;
+    /** Exactly one element: the front face. */
+    children: ReactElement;
+}
+/**
+ * Gives its single child real 3D depth.
+ * Layout on the wrapper (className, style), looks on the child.
+ */
+declare const BrickBox: react.ForwardRefExoticComponent<BrickBoxProps & react.RefAttributes<HTMLElement>>;
+
+export { BrickBox };
+export type { BrickBoxProps };

package/dist/react.js

@@ -0,0 +1 @@
+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-Bl-EhzNO.d.cts

@@ -0,0 +1,71 @@
+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 {
+    x: number;
+    y: number;
+}
+interface Advanced {
+    /** Max distance (px) between a curved wall and the true curve. Lower is smoother and heavier. @default 0.25 */
+    tolerance?: number;
+    /** Degrees of tilt per pixel of drag. @default 0.5 */
+    sensitivity?: number;
+    /** 0 is a plain ease, 1 is the default springy overshoot. @default 1 */
+    bounce?: number;
+    /** Hide back-facing walls to halve wall painting. @default true */
+    cull?: boolean;
+}
+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. "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;
+    /** Largest angle hover and drag may reach, in degrees. @default 60 */
+    maxAngle?: number;
+    /** Return to the resting tilt after release or leave. @default true */
+    springBack?: boolean;
+    /** Length of the return animation in ms. @default 700 */
+    springDuration?: number;
+    /** Depth while pressed. Defaults to `depth`, which means no sinking. */
+    pressDepth?: number | string;
+    /** Length of the press transition in ms. @default 150 */
+    pressDuration?: number;
+    /** "match" follows the element's background, or pass one CSS colour. @default "match" */
+    sideColor?: 'match' | (string & {});
+    /** Lighting on the walls. @default true for "match", false for an explicit colour */
+    shading?: boolean;
+    /** Where the light comes from: a word, or degrees (0 is top, clockwise). @default "top-left" */
+    light?: LightWord | number;
+    /** Perspective distance in px. @default 1000 */
+    perspective?: number;
+    /** Lines on the back rim and sharp corners. "auto" is a darker line. @default "none" */
+    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 */
+    disabled?: boolean;
+    advanced?: Advanced;
+}
+interface BrickBoxInstance {
+    /** Merge new options and rebuild. Keys set to undefined reset to their default. */
+    update(options: BrickBoxOptions): void;
+    destroy(): void;
+}
+
+export type { Advanced as A, BrickBoxOptions as B, Control as C, LightWord as L, Tilt as T, BrickBoxInstance as a };

package/dist/types-Bl-EhzNO.d.ts

@@ -0,0 +1,71 @@
+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 {
+    x: number;
+    y: number;
+}
+interface Advanced {
+    /** Max distance (px) between a curved wall and the true curve. Lower is smoother and heavier. @default 0.25 */
+    tolerance?: number;
+    /** Degrees of tilt per pixel of drag. @default 0.5 */
+    sensitivity?: number;
+    /** 0 is a plain ease, 1 is the default springy overshoot. @default 1 */
+    bounce?: number;
+    /** Hide back-facing walls to halve wall painting. @default true */
+    cull?: boolean;
+}
+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. "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;
+    /** Largest angle hover and drag may reach, in degrees. @default 60 */
+    maxAngle?: number;
+    /** Return to the resting tilt after release or leave. @default true */
+    springBack?: boolean;
+    /** Length of the return animation in ms. @default 700 */
+    springDuration?: number;
+    /** Depth while pressed. Defaults to `depth`, which means no sinking. */
+    pressDepth?: number | string;
+    /** Length of the press transition in ms. @default 150 */
+    pressDuration?: number;
+    /** "match" follows the element's background, or pass one CSS colour. @default "match" */
+    sideColor?: 'match' | (string & {});
+    /** Lighting on the walls. @default true for "match", false for an explicit colour */
+    shading?: boolean;
+    /** Where the light comes from: a word, or degrees (0 is top, clockwise). @default "top-left" */
+    light?: LightWord | number;
+    /** Perspective distance in px. @default 1000 */
+    perspective?: number;
+    /** Lines on the back rim and sharp corners. "auto" is a darker line. @default "none" */
+    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 */
+    disabled?: boolean;
+    advanced?: Advanced;
+}
+interface BrickBoxInstance {
+    /** Merge new options and rebuild. Keys set to undefined reset to their default. */
+    update(options: BrickBoxOptions): void;
+    destroy(): void;
+}
+
+export type { Advanced as A, BrickBoxOptions as B, Control as C, LightWord as L, Tilt as T, BrickBoxInstance as a };

package/package.json

@@ -1,6 +1,105 @@
-{
-  "name": "brickbox",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+{
+  "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"
+  }
+}