@ssgoi/core 3.2.1 → 3.3.0

package/dist/view-transitions/index.js

@@ -1,20 +1,20 @@
 import { p as x, g as b } from "../jaemin-BWkrXq0V.js";
-import { a as Mt } from "../jaemin-BWkrXq0V.js";
-const v = (t) => new Promise((n) => setTimeout(n, t));
+import { a as Ht } from "../jaemin-BWkrXq0V.js";
+const F = (t) => new Promise((n) => setTimeout(n, t));
 function T() {
   let t, n;
   return { promise: new Promise((d, r) => {
     t = d, n = r;
   }), resolve: t, reject: n };
 }
-const H = { stiffness: 80, damping: 25 }, N = { stiffness: 75, damping: 25 }, q = 300, G = 10, j = "horizontal", K = "#000000", _t = (t = {}) => {
+const N = { stiffness: 80, damping: 25 }, G = { stiffness: 75, damping: 25 }, q = 300, j = 10, K = "horizontal", Z = "#000000", It = (t = {}) => {
   const {
-    inSpring: n = N,
-    outSpring: s = H,
+    inSpring: n = G,
+    outSpring: s = N,
     transitionDelay: d = q,
-    blindCount: r = G,
-    direction: a = j,
-    blindColor: l = K
+    blindCount: r = j,
+    direction: a = K,
+    blindColor: l = Z
   } = t;
   let i, c = null;
   const o = (e, p, y = "left") => {
@@ -126,7 +126,7 @@ const H = { stiffness: 80, damping: 25 }, N = { stiffness: 75, damping: 25 }, q
         onStart: () => {
         },
         wait: async () => {
-          i && await i, await v(d);
+          i && await i, await F(d);
         },
         onEnd: () => {
           e && e.container && e.container.remove();
@@ -134,15 +134,15 @@ const H = { stiffness: 80, damping: 25 }, N = { stiffness: 75, damping: 25 }, q
       };
     }
   };
-}, Z = {
+}, J = {
   stiffness: 150,
   damping: 20
-}, J = {
+}, Q = {
   stiffness: 100,
   damping: 20
-}, It = (t = {}) => {
+}, Ot = (t = {}) => {
   var a, l;
-  const { opacity: n = !1, direction: s = "enter" } = t, d = s === "enter" ? Z : J, r = {
+  const { opacity: n = !1, direction: s = "enter" } = t, d = s === "enter" ? J : Q, r = {
     stiffness: ((a = t.spring) == null ? void 0 : a.stiffness) ?? d.stiffness,
     damping: ((l = t.spring) == null ? void 0 : l.damping) ?? d.damping
   };
@@ -203,11 +203,11 @@ const H = { stiffness: 80, damping: 25 }, N = { stiffness: 75, damping: 25 }, q
       }
     })
   };
-}, Q = { stiffness: 120, damping: 15 }, R = { stiffness: 100, damping: 20 }, tt = 0, Ot = (t = {}) => {
+}, R = { stiffness: 120, damping: 15 }, tt = { stiffness: 100, damping: 20 }, nt = 0, Dt = (t = {}) => {
   const {
-    inSpring: n = R,
-    outSpring: s = Q,
-    transitionDelay: d = tt
+    inSpring: n = tt,
+    outSpring: s = R,
+    transitionDelay: d = nt
   } = t;
   let { promise: r, resolve: a } = T();
   return {
@@ -220,7 +220,7 @@ const H = { stiffness: 80, damping: 25 }, N = { stiffness: 75, damping: 25 }, q
         if (r) {
           await r;
           const i = T();
-          r = i.promise, a = i.resolve, await v(d);
+          r = i.promise, a = i.resolve, await F(d);
         }
       },
       css: (i) => ({
@@ -243,7 +243,7 @@ const H = { stiffness: 80, damping: 25 }, N = { stiffness: 75, damping: 25 }, q
       }
     })
   };
-}, nt = {
+}, et = {
   scaleDown: { stiffness: 20, damping: 7 },
   // Soft start for cinematic scale
   translate: { stiffness: 15, damping: 7 },
@@ -257,12 +257,12 @@ const H = { stiffness: 80, damping: 25 }, N = { stiffness: 75, damping: 25 }, q
   // Start when scaleDown is 25% complete
   scaleUp: 0.8
   // Start when translate is 70% complete
-}, et = 0.8, it = "white", Dt = (t) => {
+}, it = 0.8, st = "white", Pt = (t) => {
   var r;
-  const n = nt, s = et, d = ((r = t == null ? void 0 : t.border) == null ? void 0 : r.color) ?? it;
+  const n = et, s = it, d = ((r = t == null ? void 0 : t.border) == null ? void 0 : r.color) ?? st;
   return {
     out: async (a, l) => {
-      const i = k(l), c = b(document.body, l.positionedParent), o = at(d, {
+      const i = k(l), c = b(document.body, l.positionedParent), o = rt(d, {
         ...i,
         top: c.top
       }), e = {
@@ -271,7 +271,7 @@ const H = { stiffness: 80, damping: 25 }, N = { stiffness: 75, damping: 25 }, q
       }, p = () => {
         a.style.transform = `translateY(${e.translateY}px) scale(${e.scale})`;
         const y = (i.width - i.width * e.scale) / 2, h = (i.height - i.height * e.scale) / 2;
-        st(o, y, h);
+        at(o, y, h);
       };
       return {
         springs: [
@@ -305,7 +305,7 @@ const H = { stiffness: 80, damping: 25 }, N = { stiffness: 75, damping: 25 }, q
         ],
         schedule: "stagger",
         prepare: () => {
-          x(a), S(a, i), _(a, i), rt(a, i);
+          x(a), S(a, i), _(a, i), lt(a, i);
           for (const y of o)
             l.positionedParent.appendChild(y);
         },
@@ -362,11 +362,11 @@ const H = { stiffness: 80, damping: 25 }, N = { stiffness: 75, damping: 25 }, q
     }
   };
 };
-function st(t, n, s) {
+function at(t, n, s) {
   const d = n * 0.7, r = s * 0.7;
   t.topLeft.style.transform = `translate(${d}px, ${r}px)`, t.topRight.style.transform = `translate(${-d}px, ${r}px)`, t.bottomLeft.style.transform = `translate(${d}px, ${-r}px)`, t.bottomRight.style.transform = `translate(${-d}px, ${-r}px)`;
 }
-function at(t = "white", n) {
+function rt(t = "white", n) {
   const r = document.createElement("div");
   r.style.position = "fixed", r.style.pointerEvents = "none", r.style.zIndex = "9999", r.style.top = `${n.top - 1}px`, r.style.left = `${n.left - 1}px`, r.style.width = "15px", r.style.height = "15px";
   const a = document.createElement("div");
@@ -421,13 +421,13 @@ function _(t, n) {
     ${n.left}px ${n.top + n.height}px
   )`;
 }
-function rt(t, n) {
+function lt(t, n) {
   t.style.transform = `translateY(${-n.top}px)`;
 }
-function lt(t, n) {
+function ot(t, n) {
   return t.querySelector(`[data-hero-key="${n}"]`);
 }
-const Pt = (t = {}) => {
+const vt = (t = {}) => {
   var l, i;
   const n = {
     stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? 300,
@@ -458,20 +458,20 @@ const Pt = (t = {}) => {
       const h = p.map((g) => {
         const u = g.getAttribute("data-hero-key");
         if (!u) return null;
-        const m = lt(r, u);
+        const m = ot(r, u);
         if (!m) return null;
-        const f = g, w = b(r, m), $ = b(e, f), F = w.left - $.left - o.scrollOffset.x, Y = w.top - $.top - o.scrollOffset.y, U = w.width / $.width, V = w.height / $.height, W = f.style.transform, z = f.style.position, X = f.style.transformOrigin, M = f.style.zIndex, B = f.style.willChange;
+        const f = g, w = b(r, m), $ = b(e, f), Y = w.left - $.left - o.scrollOffset.x, U = w.top - $.top - o.scrollOffset.y, V = w.width / $.width, W = w.height / $.height, z = f.style.transform, X = f.style.position, M = f.style.transformOrigin, B = f.style.zIndex, H = f.style.willChange;
         return {
           toEl: f,
-          dx: F,
-          dy: Y,
-          dw: U,
-          dh: V,
-          originalTransform: W,
-          originalPosition: z,
-          originalTransformOrigin: X,
-          originalZIndex: M,
-          originalWillChange: B
+          dx: Y,
+          dy: U,
+          dw: V,
+          dh: W,
+          originalTransform: z,
+          originalPosition: X,
+          originalTransformOrigin: M,
+          originalZIndex: B,
+          originalWillChange: H
         };
       }).filter(
         (g) => g !== null && Math.abs(g.dy) <= d
@@ -523,7 +523,7 @@ const Pt = (t = {}) => {
     })
   };
 };
-function ot({
+function ct({
   detailRect: t,
   galleryRect: n,
   pageRect: s,
@@ -541,7 +541,7 @@ function ot({
     }
   };
 }
-function ct({
+function dt({
   detailRect: t,
   galleryRect: n,
   pageRect: s,
@@ -559,7 +559,7 @@ function ct({
     }
   };
 }
-function dt(t, n, s) {
+function ht(t, n, s) {
   const d = t.querySelector(
     "[data-instagram-detail-key]"
   ), r = n.querySelector(
@@ -587,7 +587,7 @@ function dt(t, n, s) {
     return null;
   const c = b(i ? t : n, a), o = b(i ? n : t, l);
   if (i) {
-    const e = ot({
+    const e = ct({
       detailRect: o,
       galleryRect: c,
       pageRect: n.getBoundingClientRect(),
@@ -599,7 +599,7 @@ function dt(t, n, s) {
       // No outAnimation - gallery stays visible
     };
   } else {
-    const e = ct({
+    const e = dt({
       detailRect: o,
       galleryRect: c,
       pageRect: t.getBoundingClientRect(),
@@ -612,7 +612,7 @@ function dt(t, n, s) {
     };
   }
 }
-const vt = (t = {}) => {
+const Ft = (t = {}) => {
   var i, c;
   const n = {
     stiffness: ((i = t.spring) == null ? void 0 : i.stiffness) ?? 150,
@@ -629,7 +629,7 @@ const vt = (t = {}) => {
       }) || !d ? (l == null || l(), l = null, d = null, {
         spring: n,
         css: () => ({})
-      }) : (a = dt(d, p, e), l == null || l(), l = null, a ? (d = null, {
+      }) : (a = ht(d, p, e), l == null || l(), l = null, a ? (d = null, {
         spring: n,
         css: (h) => a != null && a.inAnimation ? a.inAnimation(h) : {}
       }) : (d = null, {
@@ -654,7 +654,7 @@ const vt = (t = {}) => {
     }
   };
 };
-function ht({
+function pt({
   detailRect: t,
   galleryRect: n,
   pageRect: s,
@@ -672,7 +672,7 @@ function ht({
     }
   };
 }
-function pt({
+function yt({
   galleryRect: t,
   detailRect: n,
   scrollOffset: s
@@ -689,7 +689,7 @@ function pt({
     }
   };
 }
-function yt({
+function gt({
   galleryRect: t,
   detailRect: n,
   scrollOffset: s
@@ -706,7 +706,7 @@ function yt({
     }
   };
 }
-function gt({
+function ut({
   detailRect: t,
   galleryRect: n,
   pageRect: s,
@@ -724,7 +724,7 @@ function gt({
     }
   };
 }
-function ut(t, n, s) {
+function ft(t, n, s) {
   const d = t.querySelector(
     "[data-pinterest-detail-key]"
   ), r = n.querySelector(
@@ -752,12 +752,12 @@ function ut(t, n, s) {
     return null;
   const c = b(i ? t : n, a), o = b(i ? n : t, l);
   if (i) {
-    const e = ht({
+    const e = pt({
       detailRect: o,
       galleryRect: c,
       pageRect: n.getBoundingClientRect(),
       scrollOffset: s
-    }), p = pt({
+    }), p = yt({
       galleryRect: c,
       detailRect: o,
       scrollOffset: s
@@ -767,11 +767,11 @@ function ut(t, n, s) {
       outAnimation: p.animate
     };
   } else {
-    const e = yt({
+    const e = gt({
       galleryRect: c,
       detailRect: o,
       scrollOffset: s
-    }), p = gt({
+    }), p = ut({
       detailRect: o,
       galleryRect: c,
       pageRect: t.getBoundingClientRect(),
@@ -783,7 +783,7 @@ function ut(t, n, s) {
     };
   }
 }
-const Ft = (t = {}) => {
+const Yt = (t = {}) => {
   var i, c;
   const n = {
     stiffness: ((i = t.spring) == null ? void 0 : i.stiffness) ?? 30,
@@ -800,7 +800,7 @@ const Ft = (t = {}) => {
       }) || !d ? (l == null || l(), l = null, d = null, {
         spring: n,
         css: () => ({})
-      }) : (a = ut(d, p, e), l == null || l(), l = null, a ? (d = null, {
+      }) : (a = ft(d, p, e), l == null || l(), l = null, a ? (d = null, {
         spring: n,
         css: (h) => a ? a.inAnimation(h) : {}
       }) : (d = null, {
@@ -824,14 +824,43 @@ const Ft = (t = {}) => {
       };
     }
   };
-}, I = {
+}, I = { stiffness: 100, damping: 30 }, Ut = () => ({
+  in: (t) => ({
+    spring: I,
+    prepare: () => {
+      t.style.opacity = "0", t.style.transform = "rotate(-180deg)", t.style.transformOrigin = "center center", t.style.willChange = "transform, opacity";
+    },
+    css: (n) => ({
+      // -180deg → 0deg, show after 90deg (progress > 0.5)
+      transform: `rotate(${(n - 1) * 180}deg)`,
+      opacity: n > 0.5 ? 1 : 0
+    }),
+    onEnd: () => {
+      t.style.willChange = "auto", t.style.transform = "", t.style.transformOrigin = "", t.style.opacity = "";
+    }
+  }),
+  out: (t, n) => ({
+    spring: I,
+    prepare: () => {
+      x(t, n), t.style.transformOrigin = "center center", t.style.willChange = "transform, opacity";
+    },
+    css: (s) => ({
+      // 0deg → 180deg, hide after 90deg (progress < 0.5)
+      transform: `rotate(${(1 - s) * 180}deg)`,
+      opacity: s > 0.5 ? 1 : 0
+    }),
+    onEnd: () => {
+      t.style.willChange = "auto";
+    }
+  })
+}), O = {
   stiffness: 5,
   damping: 4
-}, Yt = (t = {}) => {
+}, Vt = (t = {}) => {
   var c, o;
   const n = t.direction ?? "up", s = {
-    stiffness: ((c = t.spring) == null ? void 0 : c.stiffness) ?? I.stiffness,
-    damping: ((o = t.spring) == null ? void 0 : o.damping) ?? I.damping
+    stiffness: ((c = t.spring) == null ? void 0 : c.stiffness) ?? O.stiffness,
+    damping: ((o = t.spring) == null ? void 0 : o.damping) ?? O.damping
   }, d = n === "up";
   let r = null, a = null, l = null;
   const i = () => {
@@ -870,14 +899,14 @@ const Ft = (t = {}) => {
       }
     })
   };
-}, O = {
+}, D = {
   stiffness: 15,
   damping: 7
-}, Ut = (t = {}) => {
+}, Wt = (t = {}) => {
   var r, a;
   const n = t.direction ?? "left", s = {
-    stiffness: ((r = t.spring) == null ? void 0 : r.stiffness) ?? O.stiffness,
-    damping: ((a = t.spring) == null ? void 0 : a.damping) ?? O.damping
+    stiffness: ((r = t.spring) == null ? void 0 : r.stiffness) ?? D.stiffness,
+    damping: ((a = t.spring) == null ? void 0 : a.damping) ?? D.damping
   }, d = n === "left";
   return {
     in: (l) => ({
@@ -902,11 +931,11 @@ const Ft = (t = {}) => {
       }
     })
   };
-}, D = { stiffness: 17, damping: 6 }, L = 20, C = 800, Vt = () => {
+}, P = { stiffness: 17, damping: 6 }, L = 20, C = 800, zt = () => {
   let t, n = null;
   return {
     in: (s) => ({
-      spring: D,
+      spring: P,
       prepare: () => {
         s.style.willChange = "transform", s.style.backfaceVisibility = "hidden", s.style.contain = "layout paint", s.style.transform = `perspective(${C}px) rotateY(${L}deg) translate3d(-100%, 0, 0)`;
       },
@@ -926,7 +955,7 @@ const Ft = (t = {}) => {
     out: (s, d) => (t = new Promise((r) => {
       n = r;
     }), {
-      spring: D,
+      spring: P,
       prepare: (r) => {
         x(r, d), r.style.willChange = "transform", r.style.backfaceVisibility = "hidden", r.style.contain = "layout paint", r.style.pointerEvents = "none", r.style.transform = `perspective(${C}px) rotateY(0deg) translate3d(0%, 0, 0)`;
       },
@@ -941,7 +970,7 @@ const Ft = (t = {}) => {
       }
     })
   };
-}, ft = { stiffness: 1, damping: 1 }, $t = { stiffness: 20, damping: 25 }, mt = "#000000", wt = "circle", P = "CURTAIN_REVEAL_OVERLAY_ID", xt = {
+}, $t = { stiffness: 1, damping: 1 }, mt = { stiffness: 20, damping: 25 }, wt = "#000000", xt = "circle", v = "CURTAIN_REVEAL_OVERLAY_ID", bt = {
   position: "fixed",
   inset: "0",
   width: "100vw",
@@ -951,17 +980,17 @@ const Ft = (t = {}) => {
   alignItems: "center",
   justifyContent: "center",
   overflow: "hidden"
-}, bt = {
+}, Et = {
   position: "relative",
   display: "inline-block",
   height: "5.5rem",
   overflow: "hidden"
-}, Et = {
+}, Ct = {
   display: "flex",
   height: "100%",
   willChange: "transform",
   transition: "transform 0.3s ease"
-}, Ct = {
+}, At = {
   display: "inline-flex",
   alignItems: "center",
   justifyContent: "center",
@@ -970,8 +999,8 @@ const Ft = (t = {}) => {
   fontWeight: "900",
   letterSpacing: "0.02em",
   color: "#FFFFFF"
-}, At = 0.4, A = 0.5, Lt = 0.2;
-function Tt(t, n) {
+}, Lt = 0.4, A = 0.5, Tt = 0.2;
+function kt(t, n) {
   switch (t) {
     case "circle":
       return `circle(${n * 100}% at 50% 50%)`;
@@ -983,13 +1012,13 @@ function Tt(t, n) {
     }
   }
 }
-const kt = (t) => t.reduce((n, s) => n + s, 0), Wt = (t = {}) => {
+const St = (t) => t.reduce((n, s) => n + s, 0), Xt = (t = {}) => {
   const {
-    background: n = mt,
+    background: n = wt,
     texts: s = [],
-    shape: d = wt,
-    inSpring: r = $t,
-    outSpring: a = ft,
+    shape: d = xt,
+    inSpring: r = mt,
+    outSpring: a = $t,
     textStyle: l = {}
   } = t;
   return {
@@ -1003,7 +1032,7 @@ const kt = (t) => t.reduce((n, s) => n + s, 0), Wt = (t = {}) => {
           x(e, c), e.style.opacity = "1";
         },
         tick: (e) => {
-          const p = Math.max(0, e - At);
+          const p = Math.max(0, e - Lt);
           i.style.opacity = String(p);
         },
         onEnd: () => {
@@ -1014,13 +1043,13 @@ const kt = (t) => t.reduce((n, s) => n + s, 0), Wt = (t = {}) => {
     in: (i) => {
       let c = null, o = null, e = null;
       const p = document.body.style.overflow, y = document.getElementById(
-        P
+        v
       );
       let h = [];
       const g = () => {
-        c = document.createElement("div"), c.id = P, Object.assign(c.style, xt, { background: n }), document.body.appendChild(c), o = document.createElement("div"), Object.assign(o.style, bt), c.appendChild(o), e = document.createElement("div"), Object.assign(e.style, Et), o.appendChild(e), s.forEach((u) => {
+        c = document.createElement("div"), c.id = v, Object.assign(c.style, bt, { background: n }), document.body.appendChild(c), o = document.createElement("div"), Object.assign(o.style, Et), c.appendChild(o), e = document.createElement("div"), Object.assign(e.style, Ct), o.appendChild(e), s.forEach((u) => {
           const m = document.createElement("div");
-          m.textContent = u, Object.assign(m.style, Ct, l), e.appendChild(m);
+          m.textContent = u, Object.assign(m.style, At, l), e.appendChild(m);
         }), h = Array.from(e.children).map(
           (u) => u.getBoundingClientRect().width
         );
@@ -1038,15 +1067,15 @@ const kt = (t) => t.reduce((n, s) => n + s, 0), Wt = (t = {}) => {
               const m = u / A, f = Math.min(
                 Math.floor(m * s.length),
                 s.length - 1
-              ), w = h[f] ?? 0, $ = kt(h.slice(0, f));
+              ), w = h[f] ?? 0, $ = St(h.slice(0, f));
               o.style.width = `${w}px`, e.style.transform = `translateX(-${$}px)`;
             }
             if (u > A) {
               const f = 1 - Math.max(
                 0,
-                Math.min(1, (u - A) / Lt)
+                Math.min(1, (u - A) / Tt)
               );
-              c.style.clipPath = Tt(d, f), o.style.transform = `scale(${f})`;
+              c.style.clipPath = kt(d, f), o.style.transform = `scale(${f})`;
             }
           }
         },
@@ -1058,16 +1087,17 @@ const kt = (t) => t.reduce((n, s) => n + s, 0), Wt = (t = {}) => {
   };
 };
 export {
-  _t as blind,
-  Wt as curtainReveal,
-  It as drill,
-  Ot as fade,
-  Dt as film,
-  Pt as hero,
-  vt as instagram,
-  Mt as jaemin,
-  Ft as pinterest,
-  Yt as scroll,
-  Ut as slide,
-  Vt as strip
+  It as blind,
+  Xt as curtainReveal,
+  Ot as drill,
+  Dt as fade,
+  Pt as film,
+  vt as hero,
+  Ft as instagram,
+  Ht as jaemin,
+  Yt as pinterest,
+  Ut as rotate,
+  Vt as scroll,
+  Wt as slide,
+  zt as strip
 };

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

@@ -0,0 +1,3 @@
+import { SggoiTransition } from '../types';
+export declare const rotate: () => SggoiTransition;
+//# sourceMappingURL=rotate.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rotate.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/rotate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAe,MAAM,UAAU,CAAC;AAK7D,eAAO,MAAM,MAAM,QAAO,eA2CzB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/core",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "description": "Core animation engine for SSGOI - Native app-like page transitions with spring physics",
   "private": false,
   "type": "module",

package/dist/utils/parse-caller-location.d.ts

@@ -1,6 +0,0 @@
-export declare const parseCallerLocation: (stack?: string) => {
-    file: string;
-    line: string;
-    column: string;
-} | null;
-//# sourceMappingURL=parse-caller-location.d.ts.map

package/dist/utils/parse-caller-location.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"parse-caller-location.d.ts","sourceRoot":"","sources":["../../src/lib/utils/parse-caller-location.ts"],"names":[],"mappings":"AAEA,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"}