@ssgoi/core 2.3.1 → 2.4.0

package/dist/utils/prepare-outgoing.d.ts

@@ -1,6 +1,7 @@
+import { SggoiTransitionContext } from '../types';
 /**
  * Applies common styles for outgoing page elements
  * Makes the element absolute positioned to allow the incoming page to take its place
  */
-export declare const prepareOutgoing: (element: HTMLElement) => void;
+export declare const prepareOutgoing: (element: HTMLElement, context?: SggoiTransitionContext) => void;
 //# sourceMappingURL=prepare-outgoing.d.ts.map

package/dist/utils/prepare-outgoing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"prepare-outgoing.d.ts","sourceRoot":"","sources":["../../src/lib/utils/prepare-outgoing.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,SAAS,WAAW,KAAG,IAKtD,CAAC"}
+{"version":3,"file":"prepare-outgoing.d.ts","sourceRoot":"","sources":["../../src/lib/utils/prepare-outgoing.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,eAAe,GAC1B,SAAS,WAAW,EACpB,UAAU,sBAAsB,KAC/B,IAKF,CAAC"}

package/dist/utils.d.ts

@@ -1,8 +1,3 @@
-/**
- * Applies common styles for outgoing page elements
- * Makes the element absolute positioned to allow the incoming page to take its place
- */
-export declare const prepareOutgoing: (element: HTMLElement) => void;
 /**
  * Gets the scrolling element that contains the given element
  * Returns the first scrollable parent element or document.documentElement

package/dist/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,eAAe,GAAI,SAAS,WAAW,KAAG,IAKtD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,SAAS,WAAW,KAAG,WAyB1D,CAAC;AAIF,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,MAAM,KACb;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IA+BnD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,KAAK,GAAI,IAAI,MAAM,KAAG,OAAO,CAAC,IAAI,CAE9C,CAAC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/lib/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,mBAAmB,GAAI,SAAS,WAAW,KAAG,WAyB1D,CAAC;AAIF,eAAO,MAAM,mBAAmB,GAC9B,QAAQ,MAAM,KACb;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,GAAG,IA+BnD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,KAAK,GAAI,IAAI,MAAM,KAAG,OAAO,CAAC,IAAI,CAE9C,CAAC"}

package/dist/view-transitions/film.d.ts

@@ -2,6 +2,9 @@ import { SggoiTransition, SpringConfig } from '../types';
 interface FilmOptions {
     spring?: SpringConfig;
     scale?: number;
+    border?: {
+        color?: string;
+    };
 }
 export declare const film: (options?: FilmOptions) => SggoiTransition;
 export {};

package/dist/view-transitions/film.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"film.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/film.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EAEf,YAAY,EACb,MAAM,UAAU,CAAC;AAgBlB,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwDD,eAAO,MAAM,IAAI,GAAI,UAAU,WAAW,KAAG,eAsG5C,CAAC"}
+{"version":3,"file":"film.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/film.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,eAAe,EAEf,YAAY,EACb,MAAM,UAAU,CAAC;AAgBlB,UAAU,WAAW;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE;QACP,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;CACH;AA4ND,eAAO,MAAM,IAAI,GAAI,UAAU,WAAW,KAAG,eA4I5C,CAAC"}

package/dist/view-transitions/hero-rotate.d.ts

@@ -0,0 +1,28 @@
+import { SpringConfig, SggoiTransition } from '../types';
+interface JaeminOptions {
+    spring?: Partial<SpringConfig>;
+    initialRotation?: number;
+    initialScale?: number;
+    rotationTriggerPoint?: number;
+}
+/**
+ * Jaemin Transition
+ *
+ * Implements a shared element transition where:
+ * 1. Page A fades out
+ * 2. Page B appears rotated and scaled down at center
+ * 3. Page B scales up while rotating back to normal
+ *
+ * Based on analyzed animation log data showing 45° rotation over 1.728s
+ * Created by Jaemin
+ */
+export declare const jaemin: (options?: JaeminOptions) => SggoiTransition;
+/**
+ * Jaemin Reverse Transition
+ *
+ * Simple fade out for reverse navigation
+ * Created by Jaemin
+ */
+export declare const jaeminReverse: (options?: Pick<JaeminOptions, "spring">) => SggoiTransition;
+export {};
+//# sourceMappingURL=hero-rotate.d.ts.map

package/dist/view-transitions/hero-rotate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero-rotate.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/hero-rotate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAE9D,UAAU,aAAa;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;CAC/B;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,MAAM,GAAI,UAAS,aAAkB,KAAG,eA4JpD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,aAAa,GACxB,UAAS,IAAI,CAAC,aAAa,EAAE,QAAQ,CAAM,KAC1C,eA+CF,CAAC"}

package/dist/view-transitions/index.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const D=t=>{t.style.position="absolute",t.style.width="100%",t.style.top="0",t.style.left="0"},N=t=>new Promise(n=>setTimeout(n,t)),v={stiffness:80,damping:25},C={stiffness:75,damping:25},G=300,q=10,B="horizontal",M="#000000",H=(t={})=>{const{inSpring:n=C,outSpring:e=v,transitionDelay:s=G,blindCount:l=q,direction:a=B,staggerDelay:r=100,blindColor:i=M}=t;let o,h=null;const d=(p,c,f,u=!1)=>{const y=Math.min(.5,r*f/1e3),g=1-y,x=(u?f-1-c:c)/f*y,S=x+g;return p<=x?0:p>=S?1:(p-x)/g},$=(p,c,f="left")=>{window.getComputedStyle(p).position==="static"&&(p.style.position="relative");const y=document.createElement("div");y.className="blind-container",y.style.cssText=`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=t=>new Promise(n=>setTimeout(n,t)),m=(t,n)=>{t.style.position="absolute",t.style.width="100%",t.style.top=`${-1*((n==null?void 0:n.scroll.y)??0)}px`,t.style.left="0"},H={stiffness:80,damping:25},X={stiffness:75,damping:25},U=300,M=10,N="horizontal",B="#000000",G=(t={})=>{const{inSpring:n=X,outSpring:l=H,transitionDelay:h=U,blindCount:o=M,direction:i=N,staggerDelay:s=100,blindColor:e=B}=t;let r,d=null;const c=(p,a,g,y=!1)=>{const f=Math.min(.5,s*g/1e3),$=1-f,x=(y?g-1-a:a)/g*f,w=x+$;return p<=x?0:p>=w?1:(p-x)/$},u=(p,a,g="left")=>{window.getComputedStyle(p).position==="static"&&(p.style.position="relative");const f=document.createElement("div");f.className="blind-container",f.style.cssText=`
       position: absolute;
       top: 0;
       left: 0;
@@ -7,29 +7,29 @@
       pointer-events: none;
       z-index: 9999;
       overflow: hidden;
-    `;const g=[];for(let w=0;w<l;w++){const x=document.createElement("div");if(a==="horizontal"){const S=100/l,A=`calc(${S}% + 1px)`;x.style.cssText=`
+    `;const $=[];for(let b=0;b<o;b++){const x=document.createElement("div");if(i==="horizontal"){const w=100/o,L=`calc(${w}% + 1px)`;x.style.cssText=`
           position: absolute;
-          top: ${S*w}%;
+          top: ${w*b}%;
           left: 0;
           width: 100%;
-          height: ${A};
-          background: ${i};
-          transform: scaleX(${c==="hidden"?0:1});
-          transform-origin: ${f} center;
+          height: ${L};
+          background: ${e};
+          transform: scaleX(${a==="hidden"?0:1});
+          transform-origin: ${g} center;
           will-change: transform;
-        `}else{const S=100/l,A=`calc(${S}% + 1px)`;x.style.cssText=`
+        `}else{const w=100/o,L=`calc(${w}% + 1px)`;x.style.cssText=`
           position: absolute;
           top: 0;
-          left: ${S*w}%;
-          width: ${A};
+          left: ${w*b}%;
+          width: ${L};
           height: 100%;
-          background: ${i};
-          transform: scaleY(${c==="hidden"?0:1});
-          transform-origin: ${f==="left"?"top":"bottom"} center;
+          background: ${e};
+          transform: scaleY(${a==="hidden"?0:1});
+          transform-origin: ${g==="left"?"top":"bottom"} center;
           will-change: transform;
-        `}g.push(x),y.appendChild(x)}return p.appendChild(y),{container:y,blinds:g}};return{out:()=>{let p=null;return o=new Promise(c=>{h=c}),{spring:e,prepare:c=>{D(c),c.style.zIndex="1000",p=$(c,"hidden","left")},onStart:()=>{},tick:c=>{if(!p)return;const f=1-c;p.blinds.forEach((u,y)=>{const g=d(f,y,l,!1);a==="horizontal"?u.style.transform=`scaleX(${g})`:u.style.transform=`scaleY(${g})`})},onEnd:()=>{h&&h()}}},in:()=>{let p=null;return{spring:n,prepare:c=>{c.style.position="relative",c.style.zIndex="0",p=$(c,"closed","right")},onStart:()=>{},wait:async()=>{o&&await o,await N(s)},tick:c=>{p&&p.blinds.forEach((f,u)=>{const y=d(c,u,l,!1);a==="horizontal"?f.style.transform=`scaleX(${1-y})`:f.style.transform=`scaleY(${1-y})`})},onEnd:()=>{p&&p.container&&p.container.remove()}}}}},k=t=>{t.style.position="absolute",t.style.width="100%",t.style.top="0",t.style.left="0"},W=(t={})=>{var l,a;const{opacity:n=!1,direction:e="enter"}=t,s={stiffness:((l=t.spring)==null?void 0:l.stiffness)??150,damping:((a=t.spring)==null?void 0:a.damping)??20};return e==="enter"?{in:r=>({spring:s,tick:i=>{r.style.transform=`translateX(${(1-i)*100}%)`,n&&(r.style.opacity=i.toString())}}),out:r=>({spring:s,prepare:i=>{k(i),i.style.zIndex="-1"},tick:i=>{r.style.transform=`translateX(${-(1-i)*20}%)`,n&&(r.style.opacity=i.toString())}})}:{in:r=>({spring:{stiffness:100,damping:20},tick:i=>{r.style.transform=`translateX(${-(1-i)*20}%)`,n&&(r.style.opacity=i.toString())}}),out:r=>({spring:{stiffness:100,damping:20},prepare:i=>{k(i),i.style.zIndex="100"},tick:i=>{r.style.transform=`translateX(${(1-i)*100}%)`,n&&(r.style.opacity=i.toString())}})}},j=t=>new Promise(n=>setTimeout(n,t)),Z={stiffness:400,damping:20},J={stiffness:40,damping:8},K=100,Q=(t={})=>{const{inSpring:n=J,outSpring:e=Z,transitionDelay:s=K}=t;let l,a=null;return{in:r=>({spring:n,prepare:i=>{i.style.opacity="0"},wait:async()=>{l&&(await l,await j(s))},tick:i=>{r.style.opacity=i.toString()}}),out:r=>(l=new Promise(i=>{a=i}),{spring:e,tick:i=>{r.style.opacity=i.toString()},prepare:k,onEnd:()=>{a&&a()}})}};function P(t,n){function e(a){let r=0,i=0;const o=a.offsetWidth,h=a.offsetHeight;let d=a;for(;d;)r+=d.offsetTop,i+=d.offsetLeft,d=d.offsetParent;return r-=window.scrollY,i-=window.scrollX,{top:r,left:i,width:o,height:h}}const s=e(t),l=e(n);return new DOMRect(l.left-s.left,l.top-s.top,l.width,l.height)}const V={stiffness:10,damping:5},m=.2,T=.82;function I(t){const n=P(document.body,t.positionedParent);return{top:t.scroll.y,left:0,width:n.width,height:window.innerHeight-n.top}}function b(t,n){const e=n.left+n.width/2,s=n.top+n.height/2;t.style.transformOrigin=`${e}px ${s}px`}function Y(t,n){t.style.clipPath=`polygon(
+        `}$.push(x),f.appendChild(x)}return p.appendChild(f),{container:f,blinds:$}};return{out:()=>{let p=null;return r=new Promise(a=>{d=a}),{spring:l,prepare:a=>{m(a),a.style.zIndex="1000",p=u(a,"hidden","left")},onStart:()=>{},tick:a=>{if(!p)return;const g=1-a;p.blinds.forEach((y,f)=>{const $=c(g,f,o,!1);i==="horizontal"?y.style.transform=`scaleX(${$})`:y.style.transform=`scaleY(${$})`})},onEnd:()=>{d&&d()}}},in:()=>{let p=null;return{spring:n,prepare:a=>{a.style.position="relative",a.style.zIndex="0",p=u(a,"closed","right")},onStart:()=>{},wait:async()=>{r&&await r,await W(h)},tick:a=>{p&&p.blinds.forEach((g,y)=>{const f=c(a,y,o,!1);i==="horizontal"?g.style.transform=`scaleX(${1-f})`:g.style.transform=`scaleY(${1-f})`})},onEnd:()=>{p&&p.container&&p.container.remove()}}}}},q=(t={})=>{var o,i;const{opacity:n=!1,direction:l="enter"}=t,h={stiffness:((o=t.spring)==null?void 0:o.stiffness)??150,damping:((i=t.spring)==null?void 0:i.damping)??20};return l==="enter"?{in:s=>({spring:h,tick:e=>{s.style.transform=`translateX(${(1-e)*100}%)`,n&&(s.style.opacity=e.toString())}}),out:(s,e)=>({spring:h,prepare:r=>{m(r,e),r.style.zIndex="-1"},tick:r=>{s.style.transform=`translateX(${-(1-r)*20}%)`,n&&(s.style.opacity=r.toString())}})}:{in:s=>({spring:{stiffness:100,damping:20},tick:e=>{s.style.transform=`translateX(${-(1-e)*20}%)`,n&&(s.style.opacity=e.toString())}}),out:(s,e)=>({spring:{stiffness:100,damping:20},prepare:r=>{m(r,e),r.style.zIndex="100"},tick:r=>{s.style.transform=`translateX(${(1-r)*100}%)`,n&&(s.style.opacity=r.toString())}})}},V=t=>new Promise(n=>setTimeout(n,t)),Z={stiffness:400,damping:20},j={stiffness:40,damping:8},J=100,K=(t={})=>{const{inSpring:n=j,outSpring:l=Z,transitionDelay:h=J}=t;let o,i=null;return{in:s=>({spring:n,prepare:e=>{e.style.opacity="0"},wait:async()=>{o&&(await o,await V(h))},tick:e=>{s.style.opacity=e.toString()}}),out:(s,e)=>(o=new Promise(r=>{i=r}),{spring:l,tick:r=>{s.style.opacity=r.toString()},prepare:r=>m(r,e),onEnd:()=>{i&&i()}})}};function P(t,n){function l(i){let s=0,e=0;const r=i.offsetWidth,d=i.offsetHeight;let c=i;for(;c;)s+=c.offsetTop,e+=c.offsetLeft,c=c.offsetParent;return s-=window.scrollY,e-=window.scrollX,{top:s,left:e,width:r,height:d}}const h=l(t),o=l(n);return new DOMRect(o.left-h.left,o.top-h.top,o.width,o.height)}const Q={stiffness:10,damping:5},k=.2,E=.82;function T(t){const n=P(document.body,t.positionedParent);return{top:t.scroll.y,left:0,width:n.width,height:window.innerHeight-n.top}}function A(t,n){const l=n.left+n.width/2,h=n.top+n.height/2;t.style.transformOrigin=`${l}px ${h}px`}function I(t,n){t.style.clipPath=`polygon(
     ${n.left}px ${n.top}px,
     ${n.left+n.width}px ${n.top}px,
     ${n.left+n.width}px ${n.top+n.height}px,
     ${n.left}px ${n.top+n.height}px
-  )`}function E(t,n,e){return t<=n?0:t>=e?1:(t-n)/(e-n)}const R=t=>{const n=(t==null?void 0:t.spring)??V,e=(t==null?void 0:t.scale)??.9;return{out:async(s,l)=>{const a=I(l);return{spring:n,prepare:()=>{D(s),b(s,a),Y(s,a)},onEnd:()=>{s.style.clipPath="",s.style.transformOrigin=""},tick:r=>{const i=1-r;if(i<m){const o=E(i,0,m),h=1-(1-e)*o;s.style.transform=`scale(${h})`}else if(i<T){const o=E(i,m,T),h=-a.height*o;s.style.transform=`translateY(${h}px) scale(${e})`}else{const o=E(i,T,1),h=e+(1-e)*o;s.style.transform=`translateY(${-a.height}px) scale(${h})`}}}},in:async(s,l)=>{const a=I(l);return{spring:n,prepare:()=>{b(s,a),Y(s,a),s.style.transform=`translateY(${a.height}px) scale(${e})`},onEnd:()=>{s.style.clipPath="",s.style.transformOrigin=""},tick:r=>{if(r<m)s.style.transform=`translateY(${a.height}px) scale(${e})`,s.style.opacity="0";else if(r<T){const i=E(r,m,T),o=a.height*(1-i);s.style.transform=`translateY(${o}px) scale(${e})`,s.style.opacity="1"}else{const i=E(r,T,1),o=e+(1-e)*i;s.style.transform=`scale(${o})`,s.style.opacity="1"}}}}}};function tt(t,n){return t.querySelector(`[data-hero-key="${n}"]`)}const nt=(t={})=>{var a,r;const n={stiffness:((a=t.spring)==null?void 0:a.stiffness)??300,damping:((r=t.spring)==null?void 0:r.damping)??30},e=t.timeout??300;let s=null,l=null;return{in:async(i,o)=>{const h=i,d=Array.from(h.querySelectorAll("[data-hero-key]"));if(d.length===0)return{spring:n,tick:()=>{}};if(!await new Promise(c=>{s?c(!0):(l=c,setTimeout(()=>{l=null,c(!1)},e))})||!s)return s=null,{spring:n,tick:()=>{}};const p=d.map(c=>{const f=c.getAttribute("data-hero-key");if(!f)return null;const u=tt(s,f);if(!u)return null;const y=c,g=P(s,u),w=P(h,y),x=g.left-w.left-o.scrollOffset.x,S=g.top-w.top-o.scrollOffset.y,A=g.width/w.width,F=g.height/w.height,O=y.style.transform,X=y.style.position,U=y.style.transformOrigin,z=y.style.zIndex;return{toEl:y,dx:x,dy:S,dw:A,dh:F,originalTransform:O,originalPosition:X,originalTransformOrigin:U,originalZIndex:z}}).filter(Boolean);return s=null,p.length===0?{spring:n,tick:()=>{}}:{spring:n,prepare:()=>{p.forEach(({toEl:c})=>{c.style.position="relative",c.style.transformOrigin="top left",c.style.zIndex="1000"})},tick:c=>{p.forEach(({toEl:f,dx:u,dy:y,dw:g,dh:w})=>{f.style.transform=`translate(${(1-c)*u}px,${(1-c)*y}px) scale(${c+(1-c)*g}, ${c+(1-c)*w})`})},onEnd:()=>{p.forEach(({toEl:c,originalTransform:f,originalPosition:u,originalTransformOrigin:y,originalZIndex:g})=>{c.style.transform=f,c.style.position=u,c.style.transformOrigin=y,c.style.zIndex=g})}}},out:async i=>({onStart:()=>{s=i,l&&(l(!0),l=null)},prepare:o=>{k(o),o.style.opacity="0"}})}};function it({detailRect:t,galleryRect:n,pageRect:e,scrollOffset:s},l){const a=n.left-t.left+(n.width-t.width)/2-s.x,r=n.top-t.top+(n.height-t.height)/2-s.y,i=n.width/t.width,o=n.height/t.height,h=Math.max(i,o),d=t.top/e.height*100,$=(e.width-(t.left+t.width))/e.width*100,p=(e.height-(t.top+t.height))/e.height*100,c=t.left/e.width*100;return l.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,f=>{const u=1-f,y=d*u,g=$*u,w=p*u,x=c*u;l.style.clipPath=`inset(${y}% ${g}% ${w}% ${x}%)`,l.style.transform=`translate(${a*u}px, ${r*u}px) scale(${1+(h-1)*u})`}}function st({galleryRect:t,detailRect:n,scrollOffset:e},s){const l=n.left-t.left+(n.width-t.width)/2+e.x,a=n.top-t.top+(n.height-t.height)/2+e.y,r=n.width/t.width,i=n.height/t.height,o=Math.max(r,i);return h=>{s.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`;const d=1-h;s.style.transform=`translate(${l*d-e.x}px, ${a*d-e.y}px) scale(${1+(o-1)*d})`,s.style.opacity=`${1-d}`}}function et({galleryRect:t,detailRect:n,scrollOffset:e},s){const l=n.left-t.left+(n.width-t.width)/2-e.x,a=n.top-t.top+(n.height-t.height)/2-e.y,r=n.width/t.width,i=n.height/t.height,o=Math.max(r,i);return h=>{const d=1-h,$=h;s.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,s.style.transform=`translate(${l*d}px, ${a*d}px) scale(${1+(o-1)*d})`,s.style.opacity=`${$}`}}function rt({detailRect:t,galleryRect:n,pageRect:e,scrollOffset:s},l){const a=n.left-t.left+(n.width-t.width)/2+s.x,r=n.top-t.top+(n.height-t.height)/2+s.y,i=n.width/t.width,o=n.height/t.height,h=Math.min(i,o),d=t.top/e.height*100,$=(e.width-(t.left+t.width))/e.width*100,p=(e.height-(t.top+t.height))/e.height*100,c=t.left/e.width*100;return l.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,f=>{const u=1-f,y=d*u,g=$*u,w=p*u,x=c*u;l.style.clipPath=`inset(${y}% ${g}% ${w}% ${x}%)`,l.style.transform=`translate(${a*u-s.x}px, ${r*u-s.y}px) scale(${1+(h-1)*u})`}}function at(t,n,e){const s=t.querySelector("[data-pinterest-detail-key]"),l=n.querySelector("[data-pinterest-detail-key]");if(t.querySelectorAll("[data-pinterest-detail-key]").length>1||n.querySelectorAll("[data-pinterest-detail-key]").length>1)return null;let a=null,r=null,i=!1;if(!s&&l){r=l;const $=r.getAttribute("data-pinterest-detail-key");if(!$)return null;a=t.querySelector(`[data-pinterest-gallery-key="${$}"]`),a&&(i=!0)}else if(s&&!l){r=s;const $=r.getAttribute("data-pinterest-detail-key");if(!$)return null;a=n.querySelector(`[data-pinterest-gallery-key="${$}"]`),a&&(i=!1)}if(!a||!r)return null;const o=P(i?t:n,a),h=P(i?n:t,r),d=n.getBoundingClientRect();return i?{inAnimation:it({detailRect:h,galleryRect:o,pageRect:d,scrollOffset:e},n),outAnimation:st({galleryRect:o,detailRect:h,scrollOffset:e},t)}:{inAnimation:et({galleryRect:o,detailRect:h,scrollOffset:e},n),outAnimation:rt({detailRect:h,galleryRect:o,pageRect:d,scrollOffset:e},t)}}const lt=(t={})=>{var r,i;const n={stiffness:((r=t.spring)==null?void 0:r.stiffness)??50,damping:((i=t.spring)==null?void 0:i.damping)??10},e=t.timeout??300;let s=null,l=null,a=null;return{in:async(o,{scrollOffset:h})=>{const d=o;return!await new Promise(p=>{s?p(!0):(l=p,setTimeout(()=>{l=null,p(!1)},e))})||!s?(s=null,{spring:n,tick:()=>{}}):(a=at(s,d,h),a?(s=null,{spring:n,tick:p=>{a&&a.inAnimation(p)}}):{spring:n,tick:()=>{}})},out:async o=>({spring:n,onStart:()=>{s=o,l&&(l(!0),l=null)},prepare:h=>{k(h),h.style.zIndex="-1"},tick:h=>{a&&a.outAnimation(h)}})}},_={stiffness:30,damping:7},ot=(t={})=>{var l,a;const n=t.direction??"up",e={stiffness:((l=t.spring)==null?void 0:l.stiffness)??_.stiffness,damping:((a=t.spring)==null?void 0:a.damping)??_.damping},s=n==="up";return{in:r=>({spring:e,tick:i=>{const o=s?(1-i)*100:(1-i)*-100;r.style.transform=`translateY(${o}vh)`}}),out:r=>({spring:e,tick:i=>{const o=s?(1-i)*-100:(1-i)*100;r.style.transform=`translateY(${o}vh)`},prepare:i=>{k(i),i.style.zIndex=s?"-1":"1"}})}},L={stiffness:30,damping:7},ct=(t={})=>{var l,a;const n=t.direction??"left",e={stiffness:((l=t.spring)==null?void 0:l.stiffness)??L.stiffness,damping:((a=t.spring)==null?void 0:a.damping)??L.damping},s=n==="left";return{in:r=>({spring:e,tick:i=>{const o=s?(1-i)*100:(1-i)*-100;r.style.transform=`translateX(${o}%)`}}),out:r=>({spring:e,tick:i=>{const o=s?(1-i)*-100:(1-i)*100;r.style.transform=`translateX(${o}%)`},prepare:i=>{D(i),i.style.zIndex=s?"-1":"1"}})}};exports.blind=H;exports.drill=W;exports.fade=Q;exports.film=R;exports.hero=nt;exports.pinterest=lt;exports.scroll=ot;exports.slide=ct;
+  )`}function R(t,n){t.style.transform=`translateY(${-n.top}px)`}function S(t,n,l){return t<=n?0:t>=l?1:(t-n)/(l-n)}function v(t,n,l){t.topLeft.style.transform=`translate(${n}px, ${l}px)`,t.topRight.style.transform=`translate(${-n}px, ${l}px)`,t.bottomLeft.style.transform=`translate(${n}px, ${-l}px)`,t.bottomRight.style.transform=`translate(${-n}px, ${-l}px)`}function tt(t="white",n){const o=document.createElement("div");o.style.position="fixed",o.style.pointerEvents="none",o.style.zIndex="9999",o.style.top=`${n.top-2}px`,o.style.left=`${n.left-2}px`,o.style.width="10px",o.style.height="10px";const i=document.createElement("div");i.style.position="absolute",i.style.width="10px",i.style.height="2px",i.style.backgroundColor=t,i.style.top="0",i.style.left="0";const s=document.createElement("div");s.style.position="absolute",s.style.width="2px",s.style.height="10px",s.style.backgroundColor=t,s.style.top="0",s.style.left="0",o.appendChild(i),o.appendChild(s);const e=document.createElement("div");e.style.position="fixed",e.style.pointerEvents="none",e.style.zIndex="9999",e.style.top=`${n.top-2}px`,e.style.left=`${n.left+n.width-10+2}px`,e.style.width="10px",e.style.height="10px";const r=document.createElement("div");r.style.position="absolute",r.style.width="10px",r.style.height="2px",r.style.backgroundColor=t,r.style.top="0",r.style.right="0";const d=document.createElement("div");d.style.position="absolute",d.style.width="2px",d.style.height="10px",d.style.backgroundColor=t,d.style.top="0",d.style.right="0",e.appendChild(r),e.appendChild(d);const c=document.createElement("div");c.style.position="fixed",c.style.pointerEvents="none",c.style.zIndex="9999",c.style.top=`${n.top+n.height-10+2}px`,c.style.left=`${n.left-2}px`,c.style.width="10px",c.style.height="10px";const u=document.createElement("div");u.style.position="absolute",u.style.width="10px",u.style.height="2px",u.style.backgroundColor=t,u.style.bottom="0",u.style.left="0";const p=document.createElement("div");p.style.position="absolute",p.style.width="2px",p.style.height="10px",p.style.backgroundColor=t,p.style.bottom="0",p.style.left="0",c.appendChild(u),c.appendChild(p);const a=document.createElement("div");a.style.position="fixed",a.style.pointerEvents="none",a.style.zIndex="9999",a.style.top=`${n.top+n.height-10+2}px`,a.style.left=`${n.left+n.width-10+2}px`,a.style.width="10px",a.style.height="10px";const g=document.createElement("div");g.style.position="absolute",g.style.width="10px",g.style.height="2px",g.style.backgroundColor=t,g.style.bottom="0",g.style.right="0";const y=document.createElement("div");return y.style.position="absolute",y.style.width="2px",y.style.height="10px",y.style.backgroundColor=t,y.style.bottom="0",y.style.right="0",a.appendChild(g),a.appendChild(y),{topLeft:o,topRight:e,bottomLeft:c,bottomRight:a,*[Symbol.iterator](){yield o,yield e,yield c,yield a}}}const et=t=>{var o;const n=(t==null?void 0:t.spring)??Q,l=(t==null?void 0:t.scale)??.92,h=((o=t==null?void 0:t.border)==null?void 0:o.color)??"white";return{out:async(i,s)=>{const e=T(s),r=P(document.body,s.positionedParent),d=tt(h,{...e,top:r.top});return{spring:n,prepare:()=>{m(i),A(i,e),I(i,e),R(i,e);for(const c of d)s.positionedParent.appendChild(c),c.style.transition="transform 0.1s ease-out"},onEnd:()=>{i.style.clipPath="",i.style.transformOrigin="",setTimeout(()=>{for(const c of d)s.positionedParent.removeChild(c)},1e3)},tick:c=>{const u=1-c;if(u<k){const p=S(u,0,k),a=1-(1-l)*p;i.style.transform=`translateY(${-e.top}px) scale(${a})`;const g=(e.width-e.width*a)/2,y=(e.height-e.height*a)/2;v(d,g,y)}else if(u<E){const p=S(u,k,E),a=-e.top-e.height*p;i.style.transform=`translateY(${a}px) scale(${l})`}else{const p=S(u,E,1),a=l+(1-l)*p;i.style.transform=`translateY(${-e.top-e.height}px) scale(${a})`;const g=(e.width-e.width*a)/2,y=(e.height-e.height*a)/2;v(d,g,y)}}}},in:async(i,s)=>{const e=T(s);return{spring:n,prepare:()=>{A(i,e),I(i,e),i.style.transform=`translateY(${-e.top+e.height}px) scale(${l})`},onEnd:()=>{i.style.clipPath="",i.style.transformOrigin="",i.style.transform=""},tick:r=>{if(r<k)i.style.transform=`translateY(${-e.top+e.height}px) scale(${l})`,i.style.opacity="0";else if(r<E){const d=S(r,k,E),c=-e.top+e.height*(1-d);i.style.transform=`translateY(${c}px) scale(${l})`,i.style.opacity="1"}else{const d=S(r,E,1),c=l+(1-l)*d;i.style.transform=`translateY(${-e.top}px) scale(${c})`,i.style.opacity="1"}}}}}};function nt(t,n){return t.querySelector(`[data-hero-key="${n}"]`)}const it=(t={})=>{var i,s;const n={stiffness:((i=t.spring)==null?void 0:i.stiffness)??300,damping:((s=t.spring)==null?void 0:s.damping)??30},l=t.timeout??300;let h=null,o=null;return{in:async(e,r)=>{const d=e,c=Array.from(d.querySelectorAll("[data-hero-key]"));if(c.length===0)return{spring:n,tick:()=>{}};if(!await new Promise(a=>{h?a(!0):(o=a,setTimeout(()=>{o=null,a(!1)},l))})||!h)return h=null,{spring:n,tick:()=>{}};const p=c.map(a=>{const g=a.getAttribute("data-hero-key");if(!g)return null;const y=nt(h,g);if(!y)return null;const f=a,$=P(h,y),b=P(d,f),x=$.left-b.left-r.scrollOffset.x,w=$.top-b.top-r.scrollOffset.y,L=$.width/b.width,F=$.height/b.height,Y=f.style.transform,_=f.style.position,z=f.style.transformOrigin,O=f.style.zIndex;return{toEl:f,dx:x,dy:w,dw:L,dh:F,originalTransform:Y,originalPosition:_,originalTransformOrigin:z,originalZIndex:O}}).filter(Boolean);return h=null,p.length===0?{spring:n,tick:()=>{}}:{spring:n,prepare:()=>{p.forEach(({toEl:a})=>{a.style.position="relative",a.style.transformOrigin="top left",a.style.zIndex="1000"})},tick:a=>{p.forEach(({toEl:g,dx:y,dy:f,dw:$,dh:b})=>{g.style.transform=`translate(${(1-a)*y}px,${(1-a)*f}px) scale(${a+(1-a)*$}, ${a+(1-a)*b})`})},onEnd:()=>{p.forEach(({toEl:a,originalTransform:g,originalPosition:y,originalTransformOrigin:f,originalZIndex:$})=>{a.style.transform=g,a.style.position=y,a.style.transformOrigin=f,a.style.zIndex=$})}}},out:async e=>({onStart:()=>{h=e,o&&(o(!0),o=null)},prepare:r=>{m(r),r.style.opacity="0"}})}};function st(t){const n=P(document.body,t.positionedParent);return{top:t.scroll.y,left:0,width:n.width,height:window.innerHeight-n.top}}const rt=(t={})=>{var i,s;const n={stiffness:((i=t.spring)==null?void 0:i.stiffness)??50,damping:((s=t.spring)==null?void 0:s.damping)??30},l=t.initialRotation??45,h=t.initialScale??.01,o=t.rotationTriggerPoint??.8;return{out:async(e,r)=>{const d=e.style.opacity;return{spring:{stiffness:80,damping:25},from:1,to:0,prepare:()=>{m(e,r),e.style.opacity="1"},tick:c=>{e.style.opacity=String(c)},onEnd:()=>{e.style.opacity=d}}},in:async(e,r)=>{const d=st(r),c=e.style.transform,u=e.style.transformOrigin,p=e.style.position,a=e.style.zIndex;return{spring:n,from:0,to:1,prepare:()=>{const g=Math.min(d.width,d.height)*.4;e.style.setProperty("--max-border-radius",`${g}px`),e.style.setProperty("--border-radius-scale","1"),e.style.willChange="transform",e.style.backfaceVisibility="hidden";const y=d.left+d.width/2,f=d.top+d.height/2;e.style.transformOrigin=`${y}px ${f}px`,e.style.position="fixed",e.style.top=`${d.top}px`,e.style.left=`${d.left}px`,e.style.width=`${d.width}px`,e.style.height=`${d.height}px`,e.style.zIndex="1000",e.style.overflow="hidden",e.style.transform=`rotate(${l}deg) scale(${h}) translateZ(0)`,e.style.borderRadius="calc(var(--max-border-radius) * var(--border-radius-scale))",e.style.opacity="1"},tick:g=>{let y;if(g<=.05)y=h;else if(g<=o){const x=(g-.05)/(o-.05),w=Math.pow(x,9);y=h+(.8-h)*w}else{const x=(g-o)/(1-o);y=.8+.2*(1-Math.pow(1-x,3))}let f;const $=.7;if(g<=$)f=l;else{const x=(g-$)/(1-$),w=1-Math.pow(1-x,2);f=l*(1-w)}let b;if(g<=$)b=1;else{const x=(g-$)/(1-$);b=1-Math.pow(x,.5)}e.style.transform=`rotate(${f.toFixed(2)}deg) scale(${y.toFixed(4)}) translateZ(0)`,e.style.setProperty("--border-radius-scale",b.toFixed(4))},onEnd:()=>{e.style.willChange="",e.style.backfaceVisibility="",e.style.removeProperty("--max-border-radius"),e.style.removeProperty("--border-radius-scale"),e.style.transform=c,e.style.transformOrigin=u,e.style.position=p,e.style.zIndex=a,e.style.top="",e.style.left="",e.style.width="",e.style.height="",e.style.overflow="",e.style.borderRadius=""}}}}};function ot({detailRect:t,galleryRect:n,pageRect:l,scrollOffset:h},o){const i=n.left-t.left+(n.width-t.width)/2-h.x,s=n.top-t.top+(n.height-t.height)/2-h.y,e=n.width/t.width,r=n.height/t.height,d=Math.max(e,r),c=t.top/l.height*100,u=(l.width-(t.left+t.width))/l.width*100,p=(l.height-(t.top+t.height))/l.height*100,a=t.left/l.width*100;return o.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,g=>{const y=1-g,f=c*y,$=u*y,b=p*y,x=a*y;o.style.clipPath=`inset(${f}% ${$}% ${b}% ${x}%)`,o.style.transform=`translate(${i*y}px, ${s*y}px) scale(${1+(d-1)*y})`}}function lt({galleryRect:t,detailRect:n,scrollOffset:l},h){const o=n.left-t.left+(n.width-t.width)/2+l.x,i=n.top-t.top+(n.height-t.height)/2+l.y,s=n.width/t.width,e=n.height/t.height,r=Math.max(s,e);return d=>{h.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`;const c=1-d;h.style.transform=`translate(${o*c-l.x}px, ${i*c-l.y}px) scale(${1+(r-1)*c})`,h.style.opacity=`${1-c}`}}function at({galleryRect:t,detailRect:n,scrollOffset:l},h){const o=n.left-t.left+(n.width-t.width)/2-l.x,i=n.top-t.top+(n.height-t.height)/2-l.y,s=n.width/t.width,e=n.height/t.height,r=Math.max(s,e);return d=>{const c=1-d,u=d;h.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,h.style.transform=`translate(${o*c}px, ${i*c}px) scale(${1+(r-1)*c})`,h.style.opacity=`${u}`}}function dt({detailRect:t,galleryRect:n,pageRect:l,scrollOffset:h},o){const i=n.left-t.left+(n.width-t.width)/2+h.x,s=n.top-t.top+(n.height-t.height)/2+h.y,e=n.width/t.width,r=n.height/t.height,d=Math.min(e,r),c=t.top/l.height*100,u=(l.width-(t.left+t.width))/l.width*100,p=(l.height-(t.top+t.height))/l.height*100,a=t.left/l.width*100;return o.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,g=>{const y=1-g,f=c*y,$=u*y,b=p*y,x=a*y;o.style.clipPath=`inset(${f}% ${$}% ${b}% ${x}%)`,o.style.transform=`translate(${i*y-h.x}px, ${s*y-h.y}px) scale(${1+(d-1)*y})`}}function ct(t,n,l){const h=t.querySelector("[data-pinterest-detail-key]"),o=n.querySelector("[data-pinterest-detail-key]");if(t.querySelectorAll("[data-pinterest-detail-key]").length>1||n.querySelectorAll("[data-pinterest-detail-key]").length>1)return null;let i=null,s=null,e=!1;if(!h&&o){s=o;const u=s.getAttribute("data-pinterest-detail-key");if(!u)return null;i=t.querySelector(`[data-pinterest-gallery-key="${u}"]`),i&&(e=!0)}else if(h&&!o){s=h;const u=s.getAttribute("data-pinterest-detail-key");if(!u)return null;i=n.querySelector(`[data-pinterest-gallery-key="${u}"]`),i&&(e=!1)}if(!i||!s)return null;const r=P(e?t:n,i),d=P(e?n:t,s),c=n.getBoundingClientRect();return e?{inAnimation:ot({detailRect:d,galleryRect:r,pageRect:c,scrollOffset:l},n),outAnimation:lt({galleryRect:r,detailRect:d,scrollOffset:l},t)}:{inAnimation:at({galleryRect:r,detailRect:d,scrollOffset:l},n),outAnimation:dt({detailRect:d,galleryRect:r,pageRect:c,scrollOffset:l},t)}}const ht=(t={})=>{var s,e;const n={stiffness:((s=t.spring)==null?void 0:s.stiffness)??50,damping:((e=t.spring)==null?void 0:e.damping)??10},l=t.timeout??300;let h=null,o=null,i=null;return{in:async(r,{scrollOffset:d})=>{const c=r;return!await new Promise(p=>{h?p(!0):(o=p,setTimeout(()=>{o=null,p(!1)},l))})||!h?(h=null,{spring:n,tick:()=>{}}):(i=ct(h,c,d),i?(h=null,{spring:n,tick:p=>{i&&i.inAnimation(p)}}):{spring:n,tick:()=>{}})},out:async r=>({spring:n,onStart:()=>{h=r,o&&(o(!0),o=null)},prepare:d=>{m(d),d.style.zIndex="-1"},tick:d=>{i&&i.outAnimation(d)}})}},C={stiffness:30,damping:7},pt=(t={})=>{var r,d;const n=t.direction??"up",l={stiffness:((r=t.spring)==null?void 0:r.stiffness)??C.stiffness,damping:((d=t.spring)==null?void 0:d.damping)??C.damping},h=n==="up";let o=null,i=null,s=null;const e=()=>{if(o===null||i===null)return null;const c=Math.min(o,i),u=window.innerHeight;return Math.max(c,u)};return{in:c=>(i=c.offsetHeight,o!==null&&(s=e()),{spring:l,tick:u=>{if(s===null&&(s=e(),s===null))return;const p=h?(1-u)*s:(1-u)*-s;c.style.transform=`translateY(${p}px)`}}),out:c=>({spring:l,onStart:()=>{o=c.offsetHeight,i!==null&&(s=e())},tick:u=>{if(s===null&&(s=e(),s===null))return;const p=h?(1-u)*-s:(1-u)*s;c.style.transform=`translateY(${p}px)`},prepare:u=>{m(u),u.style.zIndex=h?"-1":"1"}})}},D={stiffness:30,damping:7},yt=(t={})=>{var o,i;const n=t.direction??"left",l={stiffness:((o=t.spring)==null?void 0:o.stiffness)??D.stiffness,damping:((i=t.spring)==null?void 0:i.damping)??D.damping},h=n==="left";return{in:s=>({spring:l,tick:e=>{const r=h?(1-e)*100:(1-e)*-100;s.style.transform=`translateX(${r}%)`}}),out:(s,e)=>({spring:l,tick:r=>{const d=h?(1-r)*-100:(1-r)*100;s.style.transform=`translateX(${d}%)`},prepare:r=>{m(r,e),r.style.zIndex=h?"-1":"1"}})}};exports.blind=G;exports.drill=q;exports.fade=K;exports.film=et;exports.hero=it;exports.jaemin=rt;exports.pinterest=ht;exports.scroll=pt;exports.slide=yt;

package/dist/view-transitions/index.d.ts

@@ -3,6 +3,7 @@ export * from './drill';
 export * from './fade';
 export * from './film';
 export * from './hero';
+export * from './jaemin';
 export * from './pinterest';
 export * from './scroll';
 export * from './slide';

package/dist/view-transitions/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC"}