@ssgoi/core 0.0.1

package/README.md

@@ -0,0 +1,34 @@
+# Ssgoi Core
+
+TypeScript vanilla library for smooth page transitions.
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start dev server
+pnpm dev
+
+# Build the library
+pnpm build
+
+# Preview the build
+pnpm preview
+```
+
+## Usage
+
+```typescript
+import { createTransition } from '@ssgoi/core'
+
+createTransition({
+  from: element1,
+  to: element2,
+  options: {
+    duration: 1000,
+    easing: 'ease-in-out'
+  }
+})
+```

package/dist/animator.d.ts

@@ -0,0 +1,41 @@
+import { SpringConfig } from './types';
+export interface AnimationOptions {
+    from: number;
+    to: number;
+    spring: SpringConfig;
+    onUpdate: (value: number) => void;
+    onComplete: () => void;
+    onStart?: () => void;
+}
+/**
+ * New Animator implementation using Popmotion
+ * Provides spring-based animations with fine control
+ */
+export declare class Animator {
+    private options;
+    private currentValue;
+    private velocity;
+    private isAnimating;
+    private controls;
+    constructor(options: Partial<AnimationOptions>);
+    private animate;
+    forward(): void;
+    backward(): void;
+    reverse(): void;
+    stop(): void;
+    getVelocity(): number;
+    getCurrentValue(): number;
+    getIsAnimating(): boolean;
+    getCurrentState(): {
+        position: number;
+        velocity: number;
+    };
+    setVelocity(velocity: number): void;
+    setValue(value: number): void;
+    updateOptions(newOptions: Partial<AnimationOptions>): void;
+    static fromState(state: {
+        position: number;
+        velocity: number;
+    }, newOptions: Partial<AnimationOptions>): Animator;
+}
+//# sourceMappingURL=animator.d.ts.map

package/dist/animator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animator.d.ts","sourceRoot":"","sources":["../src/lib/animator.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,YAAY,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,qBAAa,QAAQ;IACnB,OAAO,CAAC,OAAO,CAAmB;IAClC,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,QAAQ,CAAa;IAC7B,OAAO,CAAC,WAAW,CAAS;IAC5B,OAAO,CAAC,QAAQ,CAAqC;gBAEzC,OAAO,EAAE,OAAO,CAAC,gBAAgB,CAAC;IAY9C,OAAO,CAAC,OAAO,CA+Cb;IAGF,OAAO,IAAI,IAAI;IAKf,QAAQ,IAAI,IAAI;IAKhB,OAAO,IAAI,IAAI;IAef,IAAI,IAAI,IAAI;IAUZ,WAAW,IAAI,MAAM;IAIrB,eAAe,IAAI,MAAM;IAIzB,cAAc,IAAI,OAAO;IAIzB,eAAe,IAAI;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE;IAQzD,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI;IAInC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI;IAK7B,aAAa,CAAC,UAAU,EAAE,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI;IAY1D,MAAM,CAAC,SAAS,CACd,KAAK,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,EAC7C,UAAU,EAAE,OAAO,CAAC,gBAAgB,CAAC,GACpC,QAAQ;CAMZ"}

package/dist/create-ssgoi-transition-context.d.ts

@@ -0,0 +1,15 @@
+import { SsgoiConfig, SsgoiContext } from './types';
+/**
+ * Creates a transition configuration
+ *
+ * @example
+ * const config = createSggoiTransitionConfig({
+ *   transitions: [
+ *     { from: '/home', to: '/about', transition: fade() },
+ *     { from: '/products', to: '/products/*', transition: slide() }
+ *   ],
+ *   defaultTransition: fade()
+ * });
+ */
+export declare function createSggoiTransitionContext(options: SsgoiConfig): SsgoiContext;
+//# sourceMappingURL=create-ssgoi-transition-context.d.ts.map

package/dist/create-ssgoi-transition-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-ssgoi-transition-context.d.ts","sourceRoot":"","sources":["../src/lib/create-ssgoi-transition-context.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,WAAW,EACX,YAAY,EAGb,MAAM,SAAS,CAAC;AA0CjB;;;;;;;;;;;GAWG;AACH,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,WAAW,GACnB,YAAY,CAoJd"}

package/dist/create-transition-callback.d.ts

@@ -0,0 +1,36 @@
+import { Transition, TransitionCallback } from './types';
+/**
+ * Creates a transition callback that can be used with framework-specific implementations
+ * This is the core logic that frameworks can wrap with their own APIs
+ *
+ * UX Animation Behavior - 4 Main Scenarios:
+ *
+ * 1. No animation running + IN trigger:
+ *    - Start entrance animation (0 → 1)
+ *    - Return cleanup function for exit
+ *
+ * 2. No animation running + OUT trigger:
+ *    - Clone element, start exit animation (1 → 0)
+ *    - Remove clone when complete
+ *
+ * 3. IN animation running + OUT trigger:
+ *    - Stop current IN animation (DOM is disappearing)
+ *    - Clone element for exit animation
+ *    - Create REVERSED IN animation (not OUT animation) with current state
+ *    - This gives natural backward motion instead of jumping to OUT definition
+ *
+ * 4. OUT animation running + IN trigger:
+ *    - Stop current OUT animation (cleanup any cloned elements)
+ *    - Create REVERSED OUT animation (not IN animation) with current state
+ *    - This gives natural backward motion instead of jumping to IN definition
+ *    - Switch to entrance mode
+ *
+ * Closure Structure:
+ * - Outer function: Returns entrance callback
+ * - Inner function (entrance callback): Returns cleanup callback (exit)
+ * - Cleanup callback: Handles exit transitions
+ */
+export declare function createTransitionCallback(getTransition: () => Transition, options?: {
+    onCleanupEnd?: () => void;
+}): TransitionCallback;
+//# sourceMappingURL=create-transition-callback.d.ts.map

package/dist/create-transition-callback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-transition-callback.d.ts","sourceRoot":"","sources":["../src/lib/create-transition-callback.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,wBAAgB,wBAAwB,CACtC,aAAa,EAAE,MAAM,UAAU,EAC/B,OAAO,CAAC,EAAE;IACR,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,GACA,kBAAkB,CA+MpB"}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './transition';
+export * from './create-ssgoi-transition-context';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,mCAAmC,CAAC"}

package/dist/ssgoi.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/ssgoi.js

@@ -0,0 +1 @@
+

package/dist/ssgoi2.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("./utils-BSgyev81.cjs"),C=(t={})=>{var e,i;const n={stiffness:((e=t.spring)==null?void 0:e.stiffness)??300,damping:((i=t.spring)==null?void 0:i.damping)??30};return{in:s=>({spring:n,tick:l=>{s.style.opacity=l.toString()}}),out:s=>({spring:n,tick:l=>{s.style.opacity=l.toString()},prepare:k.prepareOutgoing})}};function E(t,n){return t.querySelector(`[data-hero-key="${n}"]`)}function A(t,n){const e=t.getBoundingClientRect(),i=n.getBoundingClientRect();return new DOMRect(i.left-e.left,i.top-e.top,i.width,i.height)}const D=(t={})=>{var l,r;const n={stiffness:((l=t.spring)==null?void 0:l.stiffness)??300,damping:((r=t.spring)==null?void 0:r.damping)??30},e=t.timeout??300;let i=null,s=null;return{in:async(c,o)=>{const h=c,g=Array.from(h.querySelectorAll("[data-hero-key]"));if(g.length===0)return{spring:n,tick:()=>{}};if(!await new Promise(a=>{i?a(!0):(s=a,setTimeout(()=>{s=null,a(!1)},e))})||!i)return i=null,{spring:n,tick:()=>{}};const p=g.map(a=>{const f=a.getAttribute("data-hero-key");if(!f)return null;const u=E(i,f);if(!u)return null;const d=a,$=A(i,u),w=A(h,d),x=$.left-w.left-o.scrollOffset.x,M=$.top-w.top-o.scrollOffset.y,q=$.width/w.width,O=$.height/w.height,T=d.style.transform,P=d.style.position,b=d.style.transformOrigin;return{toEl:d,dx:x,dy:M,dw:q,dh:O,originalTransform:T,originalPosition:P,originalTransformOrigin:b}}).filter(Boolean);return i=null,p.length===0?{spring:n,tick:()=>{}}:{spring:n,prepare:()=>{p.forEach(({toEl:a})=>{a.style.position="relative",a.style.transformOrigin="top left"})},tick:a=>{p.forEach(({toEl:f,dx:u,dy:d,dw:$,dh:w})=>{f.style.transform=`translate(${(1-a)*u}px,${(1-a)*d}px) scale(${a+(1-a)*$}, ${a+(1-a)*w})`})},onEnd:()=>{p.forEach(({toEl:a,originalTransform:f,originalPosition:u,originalTransformOrigin:d})=>{a.style.transform=f,a.style.position=u,a.style.transformOrigin=d})}}},out:async c=>({onStart:()=>{i=c,s&&(s(!0),s=null)},prepare:o=>{k.prepareOutgoing(o),o.style.opacity="0"}})}};function S(t,n){const e=t.getBoundingClientRect(),i=n.getBoundingClientRect();return new DOMRect(i.left-e.left,i.top-e.top,i.width,i.height)}function H({detailRect:t,galleryRect:n,pageRect:e,scrollOffset:i},s){const l=n.left-t.left+(n.width-t.width)/2-i.x,r=n.top-t.top+(n.height-t.height)/2-i.y,c=n.width/t.width,o=n.height/t.height,h=Math.max(c,o),g=t.top/e.height*100,y=(e.width-(t.left+t.width))/e.width*100,p=(e.height-(t.top+t.height))/e.height*100,a=t.left/e.width*100;return s.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,f=>{const u=1-f,d=g*u,$=y*u,w=p*u,x=a*u;s.style.clipPath=`inset(${d}% ${$}% ${w}% ${x}%)`,s.style.transform=`translate(${l*u}px, ${r*u}px) scale(${1+(h-1)*u})`}}function F({galleryRect:t,detailRect:n,scrollOffset:e},i){const s=n.left-t.left+(n.width-t.width)/2+e.x,l=n.top-t.top+(n.height-t.height)/2+e.y,r=n.width/t.width,c=n.height/t.height,o=Math.max(r,c);return h=>{i.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`;const g=1-h;i.style.transform=`translate(${s*g-e.x}px, ${l*g-e.y}px) scale(${1+(o-1)*g})`,i.style.opacity=`${1-g}`}}function I({galleryRect:t,detailRect:n,scrollOffset:e},i){const s=n.left-t.left+(n.width-t.width)/2-e.x,l=n.top-t.top+(n.height-t.height)/2-e.y,r=n.width/t.width,c=n.height/t.height,o=Math.max(r,c);return h=>{const g=1-h,y=h;i.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,i.style.transform=`translate(${s*g}px, ${l*g}px) scale(${1+(o-1)*g})`,i.style.opacity=`${y}`}}function L({detailRect:t,galleryRect:n,pageRect:e,scrollOffset:i},s){const l=n.left-t.left+(n.width-t.width)/2+i.x,r=n.top-t.top+(n.height-t.height)/2+i.y,c=n.width/t.width,o=n.height/t.height,h=Math.min(c,o),g=t.top/e.height*100,y=(e.width-(t.left+t.width))/e.width*100,p=(e.height-(t.top+t.height))/e.height*100,a=t.left/e.width*100;return s.style.transformOrigin=`${t.left+t.width/2}px ${t.top+t.height/2}px`,f=>{const u=1-f,d=g*u,$=y*u,w=p*u,x=a*u;s.style.clipPath=`inset(${d}% ${$}% ${w}% ${x}%)`,s.style.transform=`translate(${l*u-i.x}px, ${r*u-i.y}px) scale(${1+(h-1)*u})`}}function X(t,n,e){const i=t.querySelector("[data-pinterest-detail-key]"),s=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 l=null,r=null,c=!1;if(!i&&s){r=s;const y=r.getAttribute("data-pinterest-detail-key");if(!y)return null;l=t.querySelector(`[data-pinterest-gallery-key="${y}"]`),l&&(c=!0)}else if(i&&!s){r=i;const y=r.getAttribute("data-pinterest-detail-key");if(!y)return null;l=n.querySelector(`[data-pinterest-gallery-key="${y}"]`),l&&(c=!1)}if(!l||!r)return null;const o=S(c?t:n,l),h=S(c?n:t,r),g=n.getBoundingClientRect();return c?{inAnimation:H({detailRect:h,galleryRect:o,pageRect:g,scrollOffset:e},n),outAnimation:F({galleryRect:o,detailRect:h,scrollOffset:e},t)}:{inAnimation:I({galleryRect:o,detailRect:h,scrollOffset:e},n),outAnimation:L({detailRect:h,galleryRect:o,pageRect:g,scrollOffset:e},t)}}const Y=(t={})=>{var r,c;const n={stiffness:((r=t.spring)==null?void 0:r.stiffness)??50,damping:((c=t.spring)==null?void 0:c.damping)??10},e=t.timeout??300;let i=null,s=null,l=null;return{in:async(o,{scrollOffset:h})=>{const g=o;return!await new Promise(p=>{i?p(!0):(s=p,setTimeout(()=>{s=null,p(!1)},e))})||!i?(i=null,{spring:n,tick:()=>{}}):(l=X(i,g,h),l?(i=null,{spring:n,tick:p=>{l&&l.inAnimation(p)}}):{spring:n,tick:()=>{}})},out:async o=>({spring:n,onStart:()=>{i=o,s&&(s(!0),s=null)},prepare:h=>{k.prepareOutgoing(h),h.style.zIndex="-1"},tick:h=>{l&&l.outAnimation(h)}})}};function B(t){const n=t.getBoundingClientRect(),e=t.clientHeight,s=50*(window.innerHeight-n.top)/e;return Math.min(Math.max(s,0),100)}const m=(t={})=>{var e,i;const n={stiffness:((e=t.spring)==null?void 0:e.stiffness)??300,damping:((i=t.spring)==null?void 0:i.damping)??200};return{in:s=>{const l=B(s);return{spring:n,tick:r=>{s.style.clipPath=`circle(${r*100}% at 50% ${l}%)`}}},out:s=>{const l=B(s);return{spring:n,tick:r=>{s.style.clipPath=`circle(${r*100}% at 50% ${l}%)`,s.style.zIndex="100"},prepare:k.prepareOutgoing}}}};exports.fade=C;exports.hero=D;exports.pinterest=Y;exports.ripple=m;

package/dist/ssgoi2.js

@@ -0,0 +1,305 @@
+import { p as k } from "./utils-DR41YsAh.js";
+const X = (t = {}) => {
+  var e, i;
+  const n = {
+    stiffness: ((e = t.spring) == null ? void 0 : e.stiffness) ?? 300,
+    damping: ((i = t.spring) == null ? void 0 : i.damping) ?? 30
+  };
+  return {
+    in: (s) => ({
+      spring: n,
+      tick: (l) => {
+        s.style.opacity = l.toString();
+      }
+    }),
+    out: (s) => ({
+      spring: n,
+      tick: (l) => {
+        s.style.opacity = l.toString();
+      },
+      prepare: k
+    })
+  };
+};
+function D(t, n) {
+  return t.querySelector(`[data-hero-key="${n}"]`);
+}
+function A(t, n) {
+  const e = t.getBoundingClientRect(), i = n.getBoundingClientRect();
+  return new DOMRect(
+    i.left - e.left,
+    i.top - e.top,
+    i.width,
+    i.height
+  );
+}
+const Y = (t = {}) => {
+  var l, r;
+  const n = {
+    stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? 300,
+    damping: ((r = t.spring) == null ? void 0 : r.damping) ?? 30
+  }, e = t.timeout ?? 300;
+  let i = null, s = null;
+  return {
+    in: async (c, o) => {
+      const h = c, g = Array.from(h.querySelectorAll("[data-hero-key]"));
+      if (g.length === 0)
+        return {
+          spring: n,
+          tick: () => {
+          }
+          // No hero elements, skip animation
+        };
+      if (!await new Promise((a) => {
+        i ? a(!0) : (s = a, setTimeout(() => {
+          s = null, a(!1);
+        }, e));
+      }) || !i)
+        return i = null, {
+          spring: n,
+          tick: () => {
+          }
+          // No fromNode, skip animation
+        };
+      const p = g.map((a) => {
+        const f = a.getAttribute("data-hero-key");
+        if (!f) return null;
+        const u = D(i, f);
+        if (!u) return null;
+        const d = a, $ = A(i, u), w = A(h, d), x = $.left - w.left - o.scrollOffset.x, M = $.top - w.top - o.scrollOffset.y, q = $.width / w.width, T = $.height / w.height, C = d.style.transform, E = d.style.position, P = d.style.transformOrigin;
+        return {
+          toEl: d,
+          dx: x,
+          dy: M,
+          dw: q,
+          dh: T,
+          originalTransform: C,
+          originalPosition: E,
+          originalTransformOrigin: P
+        };
+      }).filter(Boolean);
+      return i = null, p.length === 0 ? {
+        spring: n,
+        tick: () => {
+        }
+        // No matching hero elements
+      } : {
+        spring: n,
+        prepare: () => {
+          p.forEach(({ toEl: a }) => {
+            a.style.position = "relative", a.style.transformOrigin = "top left";
+          });
+        },
+        tick: (a) => {
+          p.forEach(({ toEl: f, dx: u, dy: d, dw: $, dh: w }) => {
+            f.style.transform = `translate(${(1 - a) * u}px,${(1 - a) * d}px) scale(${a + (1 - a) * $}, ${a + (1 - a) * w})`;
+          });
+        },
+        onEnd: () => {
+          p.forEach(
+            ({
+              toEl: a,
+              originalTransform: f,
+              originalPosition: u,
+              originalTransformOrigin: d
+            }) => {
+              a.style.transform = f, a.style.position = u, a.style.transformOrigin = d;
+            }
+          );
+        }
+      };
+    },
+    out: async (c) => ({
+      onStart: () => {
+        i = c, s && (s(!0), s = null);
+      },
+      prepare: (o) => {
+        k(o), o.style.opacity = "0";
+      }
+    })
+  };
+};
+function S(t, n) {
+  const e = t.getBoundingClientRect(), i = n.getBoundingClientRect();
+  return new DOMRect(
+    i.left - e.left,
+    i.top - e.top,
+    i.width,
+    i.height
+  );
+}
+function H({
+  detailRect: t,
+  galleryRect: n,
+  pageRect: e,
+  scrollOffset: i
+}, s) {
+  const l = n.left - t.left + (n.width - t.width) / 2 - i.x, r = n.top - t.top + (n.height - t.height) / 2 - i.y, c = n.width / t.width, o = n.height / t.height, h = Math.max(c, o), g = t.top / e.height * 100, y = (e.width - (t.left + t.width)) / e.width * 100, p = (e.height - (t.top + t.height)) / e.height * 100, a = t.left / e.width * 100;
+  return s.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (f) => {
+    const u = 1 - f, d = g * u, $ = y * u, w = p * u, x = a * u;
+    s.style.clipPath = `inset(${d}% ${$}% ${w}% ${x}%)`, s.style.transform = `translate(${l * u}px, ${r * u}px) scale(${1 + (h - 1) * u})`;
+  };
+}
+function b({
+  galleryRect: t,
+  detailRect: n,
+  scrollOffset: e
+}, i) {
+  const s = n.left - t.left + (n.width - t.width) / 2 + e.x, l = n.top - t.top + (n.height - t.height) / 2 + e.y, r = n.width / t.width, c = n.height / t.height, o = Math.max(r, c);
+  return (h) => {
+    i.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`;
+    const g = 1 - h;
+    i.style.transform = `translate(${s * g - e.x}px, ${l * g - e.y}px) scale(${1 + (o - 1) * g})`, i.style.opacity = `${1 - g}`;
+  };
+}
+function O({
+  galleryRect: t,
+  detailRect: n,
+  scrollOffset: e
+}, i) {
+  const s = n.left - t.left + (n.width - t.width) / 2 - e.x, l = n.top - t.top + (n.height - t.height) / 2 - e.y, r = n.width / t.width, c = n.height / t.height, o = Math.max(r, c);
+  return (h) => {
+    const g = 1 - h, y = h;
+    i.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, i.style.transform = `translate(${s * g}px, ${l * g}px) scale(${1 + (o - 1) * g})`, i.style.opacity = `${y}`;
+  };
+}
+function F({
+  detailRect: t,
+  galleryRect: n,
+  pageRect: e,
+  scrollOffset: i
+}, s) {
+  const l = n.left - t.left + (n.width - t.width) / 2 + i.x, r = n.top - t.top + (n.height - t.height) / 2 + i.y, c = n.width / t.width, o = n.height / t.height, h = Math.min(c, o), g = t.top / e.height * 100, y = (e.width - (t.left + t.width)) / e.width * 100, p = (e.height - (t.top + t.height)) / e.height * 100, a = t.left / e.width * 100;
+  return s.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, (f) => {
+    const u = 1 - f, d = g * u, $ = y * u, w = p * u, x = a * u;
+    s.style.clipPath = `inset(${d}% ${$}% ${w}% ${x}%)`, s.style.transform = `translate(${l * u - i.x}px, ${r * u - i.y}px) scale(${1 + (h - 1) * u})`;
+  };
+}
+function I(t, n, e) {
+  const i = t.querySelector(
+    "[data-pinterest-detail-key]"
+  ), s = 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 l = null, r = null, c = !1;
+  if (!i && s) {
+    r = s;
+    const y = r.getAttribute("data-pinterest-detail-key");
+    if (!y) return null;
+    l = t.querySelector(
+      `[data-pinterest-gallery-key="${y}"]`
+    ), l && (c = !0);
+  } else if (i && !s) {
+    r = i;
+    const y = r.getAttribute("data-pinterest-detail-key");
+    if (!y) return null;
+    l = n.querySelector(
+      `[data-pinterest-gallery-key="${y}"]`
+    ), l && (c = !1);
+  }
+  if (!l || !r)
+    return null;
+  const o = S(c ? t : n, l), h = S(c ? n : t, r), g = n.getBoundingClientRect();
+  return c ? {
+    inAnimation: H(
+      { detailRect: h, galleryRect: o, pageRect: g, scrollOffset: e },
+      n
+    ),
+    outAnimation: b(
+      { galleryRect: o, detailRect: h, scrollOffset: e },
+      t
+    )
+  } : {
+    inAnimation: O(
+      { galleryRect: o, detailRect: h, scrollOffset: e },
+      n
+    ),
+    outAnimation: F(
+      { detailRect: h, galleryRect: o, pageRect: g, scrollOffset: e },
+      t
+    )
+  };
+}
+const m = (t = {}) => {
+  var r, c;
+  const n = {
+    stiffness: ((r = t.spring) == null ? void 0 : r.stiffness) ?? 50,
+    damping: ((c = t.spring) == null ? void 0 : c.damping) ?? 10
+  }, e = t.timeout ?? 300;
+  let i = null, s = null, l = null;
+  return {
+    in: async (o, { scrollOffset: h }) => {
+      const g = o;
+      return !await new Promise((p) => {
+        i ? p(!0) : (s = p, setTimeout(() => {
+          s = null, p(!1);
+        }, e));
+      }) || !i ? (i = null, {
+        spring: n,
+        tick: () => {
+        }
+      }) : (l = I(i, g, h), l ? (i = null, {
+        spring: n,
+        tick: (p) => {
+          l && l.inAnimation(p);
+        }
+      }) : {
+        spring: n,
+        tick: () => {
+        }
+      });
+    },
+    out: async (o) => ({
+      spring: n,
+      onStart: () => {
+        i = o, s && (s(!0), s = null);
+      },
+      prepare: (h) => {
+        k(h), h.style.zIndex = "-1";
+      },
+      tick: (h) => {
+        l && l.outAnimation(h);
+      }
+    })
+  };
+};
+function B(t) {
+  const n = t.getBoundingClientRect(), e = t.clientHeight, s = 50 * (window.innerHeight - n.top) / e;
+  return Math.min(Math.max(s, 0), 100);
+}
+const z = (t = {}) => {
+  var e, i;
+  const n = {
+    stiffness: ((e = t.spring) == null ? void 0 : e.stiffness) ?? 300,
+    damping: ((i = t.spring) == null ? void 0 : i.damping) ?? 200
+  };
+  return {
+    in: (s) => {
+      const l = B(s);
+      return {
+        spring: n,
+        tick: (r) => {
+          s.style.clipPath = `circle(${r * 100}% at 50% ${l}%)`;
+        }
+      };
+    },
+    out: (s) => {
+      const l = B(s);
+      return {
+        spring: n,
+        tick: (r) => {
+          s.style.clipPath = `circle(${r * 100}% at 50% ${l}%)`, s.style.zIndex = "100";
+        },
+        prepare: k
+      };
+    }
+  };
+};
+export {
+  X as fade,
+  Y as hero,
+  m as pinterest,
+  z as ripple
+};

package/dist/ssgoi3.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=(r={})=>{const{from:i=0,to:c=1,spring:a={stiffness:300,damping:30}}=r;return{in:o=>({spring:a,tick:s=>{const t=i+(c-i)*s;o.style.opacity=t.toString()}}),out:o=>({spring:a,tick:s=>{const t=i+(c-i)*s;o.style.opacity=t.toString()}})}},u=(r={})=>{const{from:i=0,to:c=1,spring:a={stiffness:300,damping:30}}=r;return{in:o=>({spring:a,tick:s=>{const t=i+(c-i)*s;o.style.transform=`scale(${t})`}}),out:o=>({spring:a,tick:s=>{const t=i+(c-i)*s;o.style.transform=`scale(${t})`}})}},y=(r={})=>{const{direction:i="left",distance:c=100,fade:a=!0,spring:o={stiffness:400,damping:35}}=r,s=t=>{const n=(1-t)*c;switch(i){case"left":return`translateX(${-n}px)`;case"right":return`translateX(${n}px)`;case"up":return`translateY(${-n}px)`;case"down":return`translateY(${n}px)`}};return{in:t=>({spring:o,tick:n=>{t.style.transform=s(n),a&&(t.style.opacity=n.toString())}}),out:t=>({spring:o,tick:n=>{t.style.transform=s(n),a&&(t.style.opacity=n.toString())}})}},p=(r={})=>{const{degrees:i=360,clockwise:c=!0,scale:a=!1,fade:o=!1,spring:s={stiffness:500,damping:25}}=r,t=c?i:-i;return{in:n=>({spring:s,tick:e=>{const f=[`rotate(${e*t}deg)`];a&&f.push(`scale(${e})`),n.style.transform=f.join(" "),o&&(n.style.opacity=e.toString())}}),out:n=>({spring:s,tick:e=>{const f=[`rotate(${e*t}deg)`];a&&f.push(`scale(${e})`),n.style.transform=f.join(" "),o&&(n.style.opacity=e.toString())}})}},d=(r={})=>{const{height:i=20,scale:c=!0,fade:a=!1,spring:o={stiffness:800,damping:15}}=r;return{in:s=>({spring:o,tick:t=>{const n=[],e=Math.sin(t*Math.PI)*i*(1-t);n.push(`translateY(${-e}px)`),c&&n.push(`scale(${.8+t*.2})`),s.style.transform=n.join(" "),a&&(s.style.opacity=t.toString())}}),out:s=>({spring:o,tick:t=>{const n=[],e=Math.sin(t*Math.PI)*i*(1-t);n.push(`translateY(${-e}px)`),c&&n.push(`scale(${.8+t*.2})`),s.style.transform=n.join(" "),a&&(s.style.opacity=t.toString())}})}},g=(r={})=>{const{amount:i=10,scale:c=!1,fade:a=!0,spring:o={stiffness:300,damping:30}}=r;return{in:s=>({spring:o,tick:t=>{const e=[`blur(${(1-t)*i}px)`];s.style.filter=e.join(" "),c&&(s.style.transform=`scale(${.8+t*.2})`),a&&(s.style.opacity=t.toString())}}),out:s=>({spring:o,tick:t=>{const e=[`blur(${(1-t)*i}px)`];s.style.filter=e.join(" "),c&&(s.style.transform=`scale(${.8+t*.2})`),a&&(s.style.opacity=t.toString())}})}},m=(r={})=>{const{spring:i={stiffness:1e3,damping:100}}=r;return{in:c=>({spring:i,tick:a=>{}}),out:c=>({spring:i,tick:a=>{}})}};exports.blur=g;exports.bounce=d;exports.fade=l;exports.none=m;exports.rotate=p;exports.scale=u;exports.slide=y;

package/dist/ssgoi3.js

@@ -0,0 +1,173 @@
+const l = (r = {}) => {
+  const {
+    from: i = 0,
+    to: c = 1,
+    spring: a = { stiffness: 300, damping: 30 }
+  } = r;
+  return {
+    in: (o) => ({
+      spring: a,
+      tick: (s) => {
+        const t = i + (c - i) * s;
+        o.style.opacity = t.toString();
+      }
+    }),
+    out: (o) => ({
+      spring: a,
+      tick: (s) => {
+        const t = i + (c - i) * s;
+        o.style.opacity = t.toString();
+      }
+    })
+  };
+}, u = (r = {}) => {
+  const {
+    from: i = 0,
+    to: c = 1,
+    spring: a = { stiffness: 300, damping: 30 }
+  } = r;
+  return {
+    in: (o) => ({
+      spring: a,
+      tick: (s) => {
+        const t = i + (c - i) * s;
+        o.style.transform = `scale(${t})`;
+      }
+    }),
+    out: (o) => ({
+      spring: a,
+      tick: (s) => {
+        const t = i + (c - i) * s;
+        o.style.transform = `scale(${t})`;
+      }
+    })
+  };
+}, y = (r = {}) => {
+  const {
+    direction: i = "left",
+    distance: c = 100,
+    fade: a = !0,
+    spring: o = { stiffness: 400, damping: 35 }
+  } = r, s = (t) => {
+    const n = (1 - t) * c;
+    switch (i) {
+      case "left":
+        return `translateX(${-n}px)`;
+      case "right":
+        return `translateX(${n}px)`;
+      case "up":
+        return `translateY(${-n}px)`;
+      case "down":
+        return `translateY(${n}px)`;
+    }
+  };
+  return {
+    in: (t) => ({
+      spring: o,
+      tick: (n) => {
+        t.style.transform = s(n), a && (t.style.opacity = n.toString());
+      }
+    }),
+    out: (t) => ({
+      spring: o,
+      tick: (n) => {
+        t.style.transform = s(n), a && (t.style.opacity = n.toString());
+      }
+    })
+  };
+}, p = (r = {}) => {
+  const {
+    degrees: i = 360,
+    clockwise: c = !0,
+    scale: a = !1,
+    fade: o = !1,
+    spring: s = { stiffness: 500, damping: 25 }
+  } = r, t = c ? i : -i;
+  return {
+    in: (n) => ({
+      spring: s,
+      tick: (e) => {
+        const f = [`rotate(${e * t}deg)`];
+        a && f.push(`scale(${e})`), n.style.transform = f.join(" "), o && (n.style.opacity = e.toString());
+      }
+    }),
+    out: (n) => ({
+      spring: s,
+      tick: (e) => {
+        const f = [`rotate(${e * t}deg)`];
+        a && f.push(`scale(${e})`), n.style.transform = f.join(" "), o && (n.style.opacity = e.toString());
+      }
+    })
+  };
+}, d = (r = {}) => {
+  const {
+    height: i = 20,
+    scale: c = !0,
+    fade: a = !1,
+    spring: o = { stiffness: 800, damping: 15 }
+  } = r;
+  return {
+    in: (s) => ({
+      spring: o,
+      tick: (t) => {
+        const n = [], e = Math.sin(t * Math.PI) * i * (1 - t);
+        n.push(`translateY(${-e}px)`), c && n.push(`scale(${0.8 + t * 0.2})`), s.style.transform = n.join(" "), a && (s.style.opacity = t.toString());
+      }
+    }),
+    out: (s) => ({
+      spring: o,
+      tick: (t) => {
+        const n = [], e = Math.sin(t * Math.PI) * i * (1 - t);
+        n.push(`translateY(${-e}px)`), c && n.push(`scale(${0.8 + t * 0.2})`), s.style.transform = n.join(" "), a && (s.style.opacity = t.toString());
+      }
+    })
+  };
+}, $ = (r = {}) => {
+  const {
+    amount: i = 10,
+    scale: c = !1,
+    fade: a = !0,
+    spring: o = { stiffness: 300, damping: 30 }
+  } = r;
+  return {
+    in: (s) => ({
+      spring: o,
+      tick: (t) => {
+        const e = [`blur(${(1 - t) * i}px)`];
+        s.style.filter = e.join(" "), c && (s.style.transform = `scale(${0.8 + t * 0.2})`), a && (s.style.opacity = t.toString());
+      }
+    }),
+    out: (s) => ({
+      spring: o,
+      tick: (t) => {
+        const e = [`blur(${(1 - t) * i}px)`];
+        s.style.filter = e.join(" "), c && (s.style.transform = `scale(${0.8 + t * 0.2})`), a && (s.style.opacity = t.toString());
+      }
+    })
+  };
+}, m = (r = {}) => {
+  const {
+    spring: i = { stiffness: 1e3, damping: 100 }
+  } = r;
+  return {
+    in: (c) => ({
+      spring: i,
+      tick: (a) => {
+      }
+    }),
+    out: (c) => ({
+      spring: i,
+      tick: (a) => {
+      }
+    })
+  };
+};
+export {
+  $ as blur,
+  d as bounce,
+  l as fade,
+  m as none,
+  p as rotate,
+  u as scale,
+  y as slide
+};