@ssgoi/core 2.0.0 → 2.1.2

package/dist/view-transitions/index.js

@@ -1,84 +1,142 @@
-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
+import { a as x, s as Y } from "../utils-DTRMUQW4.js";
+const b = (t = {}) => {
+  var l, r;
+  const { opacity: n = !1, direction: s = "enter" } = t, e = {
+    stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? 150,
+    damping: ((r = t.spring) == null ? void 0 : r.damping) ?? 20
+  };
+  return s === "enter" ? {
+    in: (a) => ({
+      spring: e,
+      tick: (i) => {
+        a.style.transform = `translateX(${(1 - i) * 100}%)`, n && (a.style.opacity = i.toString());
+      }
+    }),
+    out: (a) => ({
+      spring: e,
+      prepare: (i) => {
+        x(i), i.style.zIndex = "-1";
+      },
+      tick: (i) => {
+        a.style.transform = `translateX(${-(1 - i) * 20}%)`, n && (a.style.opacity = i.toString());
+      }
+    })
+  } : {
+    in: (a) => ({
+      spring: {
+        stiffness: 100,
+        damping: 20
+      },
+      tick: (i) => {
+        a.style.transform = `translateX(${-(1 - i) * 20}%)`, n && (a.style.opacity = i.toString());
+      }
+    }),
+    out: (a) => ({
+      spring: {
+        stiffness: 100,
+        damping: 20
+      },
+      prepare: (i) => {
+        x(i), i.style.zIndex = "100";
+      },
+      tick: (i) => {
+        a.style.transform = `translateX(${(1 - i) * 100}%)`, n && (a.style.opacity = i.toString());
+      }
+    })
   };
+}, q = { stiffness: 400, damping: 20 }, F = { stiffness: 40, damping: 8 }, X = 100, v = (t = {}) => {
+  const {
+    inSpring: n = F,
+    outSpring: s = q,
+    transitionDelay: e = X
+  } = t;
+  let l, r = null;
   return {
-    in: (s) => ({
+    in: (a) => ({
       spring: n,
-      tick: (l) => {
-        s.style.opacity = l.toString();
+      prepare: (i) => {
+        i.style.opacity = "0";
+      },
+      wait: async () => {
+        l && (await l, await Y(e));
+      },
+      tick: (i) => {
+        a.style.opacity = i.toString();
       }
     }),
-    out: (s) => ({
-      spring: n,
-      tick: (l) => {
-        s.style.opacity = l.toString();
+    out: (a) => (l = new Promise((i) => {
+      r = i;
+    }), {
+      spring: s,
+      tick: (i) => {
+        a.style.opacity = i.toString();
       },
-      prepare: k
+      prepare: x,
+      onEnd: () => {
+        r && r();
+      }
     })
   };
 };
-function M(t, n) {
+function z(t, n) {
   return t.querySelector(`[data-hero-key="${n}"]`);
 }
 function A(t, n) {
-  const e = t.getBoundingClientRect(), i = n.getBoundingClientRect();
+  const s = t.getBoundingClientRect(), e = n.getBoundingClientRect();
   return new DOMRect(
-    i.left - e.left,
-    i.top - e.top,
-    i.width,
-    i.height
+    e.left - s.left,
+    e.top - s.top,
+    e.width,
+    e.height
   );
 }
-const b = (t = {}) => {
-  var l, h;
+const H = (t = {}) => {
+  var r, a;
   const n = {
-    stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? 300,
-    damping: ((h = t.spring) == null ? void 0 : h.damping) ?? 30
-  }, e = t.timeout ?? 300;
-  let i = null, s = null;
+    stiffness: ((r = t.spring) == null ? void 0 : r.stiffness) ?? 300,
+    damping: ((a = t.spring) == null ? void 0 : a.damping) ?? 30
+  }, s = t.timeout ?? 300;
+  let e = null, l = null;
   return {
-    in: async (a, r) => {
-      const u = a, g = Array.from(u.querySelectorAll("[data-hero-key]"));
-      if (g.length === 0)
+    in: async (i, o) => {
+      const c = i, y = Array.from(c.querySelectorAll("[data-hero-key]"));
+      if (y.length === 0)
         return {
           spring: n,
           tick: () => {
           }
           // No hero elements, skip animation
         };
-      if (!await new Promise((o) => {
-        i ? o(!0) : (s = o, setTimeout(() => {
-          s = null, o(!1);
-        }, e));
-      }) || !i)
-        return i = null, {
+      if (!await new Promise((h) => {
+        e ? h(!0) : (l = h, setTimeout(() => {
+          l = null, h(!1);
+        }, s));
+      }) || !e)
+        return e = null, {
           spring: n,
           tick: () => {
           }
           // No fromNode, skip animation
         };
-      const y = g.map((o) => {
-        const $ = o.getAttribute("data-hero-key");
+      const p = y.map((h) => {
+        const $ = h.getAttribute("data-hero-key");
         if (!$) return null;
-        const c = M(i, $);
-        if (!c) return null;
-        const d = o, w = A(i, c), f = A(u, d), x = w.left - f.left - r.scrollOffset.x, B = w.top - f.top - r.scrollOffset.y, q = w.width / f.width, T = w.height / f.height, Y = d.style.transform, m = d.style.position, E = d.style.transformOrigin;
+        const u = z(e, $);
+        if (!u) return null;
+        const g = h, f = A(e, u), w = A(c, g), k = f.left - w.left - o.scrollOffset.x, T = f.top - w.top - o.scrollOffset.y, m = f.width / w.width, D = f.height / w.height, E = g.style.transform, B = g.style.position, L = g.style.transformOrigin, P = g.style.zIndex;
         return {
-          toEl: d,
-          dx: x,
-          dy: B,
-          dw: q,
-          dh: T,
-          originalTransform: Y,
-          originalPosition: m,
-          originalTransformOrigin: E
+          toEl: g,
+          dx: k,
+          dy: T,
+          dw: m,
+          dh: D,
+          originalTransform: E,
+          originalPosition: B,
+          originalTransformOrigin: L,
+          originalZIndex: P
         };
       }).filter(Boolean);
-      return i = null, y.length === 0 ? {
+      return e = null, p.length === 0 ? {
         spring: n,
         tick: () => {
         }
@@ -86,164 +144,165 @@ const b = (t = {}) => {
       } : {
         spring: n,
         prepare: () => {
-          y.forEach(({ toEl: o }) => {
-            o.style.position = "relative", o.style.transformOrigin = "top left";
+          p.forEach(({ toEl: h }) => {
+            h.style.position = "relative", h.style.transformOrigin = "top left", h.style.zIndex = "1000";
           });
         },
-        tick: (o) => {
-          y.forEach(({ toEl: $, dx: c, dy: d, dw: w, dh: f }) => {
-            $.style.transform = `translate(${(1 - o) * c}px,${(1 - o) * d}px) scale(${o + (1 - o) * w}, ${o + (1 - o) * f})`;
+        tick: (h) => {
+          p.forEach(({ toEl: $, dx: u, dy: g, dw: f, dh: w }) => {
+            $.style.transform = `translate(${(1 - h) * u}px,${(1 - h) * g}px) scale(${h + (1 - h) * f}, ${h + (1 - h) * w})`;
           });
         },
         onEnd: () => {
-          y.forEach(
+          p.forEach(
             ({
-              toEl: o,
+              toEl: h,
               originalTransform: $,
-              originalPosition: c,
-              originalTransformOrigin: d
+              originalPosition: u,
+              originalTransformOrigin: g,
+              originalZIndex: f
             }) => {
-              o.style.transform = $, o.style.position = c, o.style.transformOrigin = d;
+              h.style.transform = $, h.style.position = u, h.style.transformOrigin = g, h.style.zIndex = f;
             }
           );
         }
       };
     },
-    out: async (a) => ({
+    out: async (i) => ({
       onStart: () => {
-        i = a, s && (s(!0), s = null);
+        e = i, l && (l(!0), l = null);
       },
-      prepare: (r) => {
-        k(r), r.style.opacity = "0";
+      prepare: (o) => {
+        x(o), o.style.opacity = "0";
       }
     })
   };
 };
 function S(t, n) {
-  const e = t.getBoundingClientRect(), i = n.getBoundingClientRect();
+  const s = t.getBoundingClientRect(), e = n.getBoundingClientRect();
   return new DOMRect(
-    i.left - e.left,
-    i.top - e.top,
-    i.width,
-    i.height
+    e.left - s.left,
+    e.top - s.top,
+    e.width,
+    e.height
   );
 }
 function C({
   detailRect: t,
   galleryRect: n,
-  pageRect: e,
-  scrollOffset: i
-}, s) {
-  const l = n.left - t.left + (n.width - t.width) / 2 - i.x, h = n.top - t.top + (n.height - t.height) / 2 - i.y, a = n.width / t.width, r = n.height / t.height, u = Math.max(a, r), g = t.top / e.height * 100, p = (e.width - (t.left + t.width)) / e.width * 100, y = (e.height - (t.top + t.height)) / e.height * 100, o = t.left / e.width * 100;
-  return s.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, ($) => {
-    const c = 1 - $, d = g * c, w = p * c, f = y * c, x = o * c;
-    s.style.clipPath = `inset(${d}% ${w}% ${f}% ${x}%)`, s.style.transform = `translate(${l * c}px, ${h * c}px) scale(${1 + (u - 1) * c})`;
+  pageRect: s,
+  scrollOffset: e
+}, l) {
+  const r = n.left - t.left + (n.width - t.width) / 2 - e.x, a = n.top - t.top + (n.height - t.height) / 2 - e.y, i = n.width / t.width, o = n.height / t.height, c = Math.max(i, o), y = t.top / s.height * 100, d = (s.width - (t.left + t.width)) / s.width * 100, p = (s.height - (t.top + t.height)) / s.height * 100, h = t.left / s.width * 100;
+  return l.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, ($) => {
+    const u = 1 - $, g = y * u, f = d * u, w = p * u, k = h * u;
+    l.style.clipPath = `inset(${g}% ${f}% ${w}% ${k}%)`, l.style.transform = `translate(${r * u}px, ${a * u}px) scale(${1 + (c - 1) * u})`;
   };
 }
-function D({
+function M({
   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, h = n.width / t.width, a = n.height / t.height, r = Math.max(h, a);
-  return (u) => {
-    i.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`;
-    const g = 1 - u;
-    i.style.transform = `translate(${s * g - e.x}px, ${l * g - e.y}px) scale(${1 + (r - 1) * g})`, i.style.opacity = `${1 - g}`;
+  scrollOffset: s
+}, e) {
+  const l = n.left - t.left + (n.width - t.width) / 2 + s.x, r = n.top - t.top + (n.height - t.height) / 2 + s.y, a = n.width / t.width, i = n.height / t.height, o = Math.max(a, i);
+  return (c) => {
+    e.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`;
+    const y = 1 - c;
+    e.style.transform = `translate(${l * y - s.x}px, ${r * y - s.y}px) scale(${1 + (o - 1) * y})`, e.style.opacity = `${1 - y}`;
   };
 }
-function P({
+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, h = n.width / t.width, a = n.height / t.height, r = Math.max(h, a);
-  return (u) => {
-    const g = 1 - u, p = u;
-    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 + (r - 1) * g})`, i.style.opacity = `${p}`;
+  scrollOffset: s
+}, e) {
+  const l = n.left - t.left + (n.width - t.width) / 2 - s.x, r = n.top - t.top + (n.height - t.height) / 2 - s.y, a = n.width / t.width, i = n.height / t.height, o = Math.max(a, i);
+  return (c) => {
+    const y = 1 - c, d = c;
+    e.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, e.style.transform = `translate(${l * y}px, ${r * y}px) scale(${1 + (o - 1) * y})`, e.style.opacity = `${d}`;
   };
 }
-function F({
+function _({
   detailRect: t,
   galleryRect: n,
-  pageRect: e,
-  scrollOffset: i
-}, s) {
-  const l = n.left - t.left + (n.width - t.width) / 2 + i.x, h = n.top - t.top + (n.height - t.height) / 2 + i.y, a = n.width / t.width, r = n.height / t.height, u = Math.min(a, r), g = t.top / e.height * 100, p = (e.width - (t.left + t.width)) / e.width * 100, y = (e.height - (t.top + t.height)) / e.height * 100, o = t.left / e.width * 100;
-  return s.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, ($) => {
-    const c = 1 - $, d = g * c, w = p * c, f = y * c, x = o * c;
-    s.style.clipPath = `inset(${d}% ${w}% ${f}% ${x}%)`, s.style.transform = `translate(${l * c - i.x}px, ${h * c - i.y}px) scale(${1 + (u - 1) * c})`;
+  pageRect: s,
+  scrollOffset: e
+}, l) {
+  const r = n.left - t.left + (n.width - t.width) / 2 + e.x, a = n.top - t.top + (n.height - t.height) / 2 + e.y, i = n.width / t.width, o = n.height / t.height, c = Math.min(i, o), y = t.top / s.height * 100, d = (s.width - (t.left + t.width)) / s.width * 100, p = (s.height - (t.top + t.height)) / s.height * 100, h = t.left / s.width * 100;
+  return l.style.transformOrigin = `${t.left + t.width / 2}px ${t.top + t.height / 2}px`, ($) => {
+    const u = 1 - $, g = y * u, f = d * u, w = p * u, k = h * u;
+    l.style.clipPath = `inset(${g}% ${f}% ${w}% ${k}%)`, l.style.transform = `translate(${r * u - e.x}px, ${a * u - e.y}px) scale(${1 + (c - 1) * u})`;
   };
 }
-function L(t, n, e) {
-  const i = t.querySelector(
+function U(t, n, s) {
+  const e = t.querySelector(
     "[data-pinterest-detail-key]"
-  ), s = n.querySelector(
+  ), 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 l = null, h = null, a = !1;
-  if (!i && s) {
-    h = s;
-    const p = h.getAttribute("data-pinterest-detail-key");
-    if (!p) return null;
-    l = t.querySelector(
-      `[data-pinterest-gallery-key="${p}"]`
-    ), l && (a = !0);
-  } else if (i && !s) {
-    h = i;
-    const p = h.getAttribute("data-pinterest-detail-key");
-    if (!p) return null;
-    l = n.querySelector(
-      `[data-pinterest-gallery-key="${p}"]`
-    ), l && (a = !1);
+  let r = null, a = null, i = !1;
+  if (!e && l) {
+    a = l;
+    const d = a.getAttribute("data-pinterest-detail-key");
+    if (!d) return null;
+    r = t.querySelector(
+      `[data-pinterest-gallery-key="${d}"]`
+    ), r && (i = !0);
+  } else if (e && !l) {
+    a = e;
+    const d = a.getAttribute("data-pinterest-detail-key");
+    if (!d) return null;
+    r = n.querySelector(
+      `[data-pinterest-gallery-key="${d}"]`
+    ), r && (i = !1);
   }
-  if (!l || !h)
+  if (!r || !a)
     return null;
-  const r = S(a ? t : n, l), u = S(a ? n : t, h), g = n.getBoundingClientRect();
-  return a ? {
+  const o = S(i ? t : n, r), c = S(i ? n : t, a), y = n.getBoundingClientRect();
+  return i ? {
     inAnimation: C(
-      { detailRect: u, galleryRect: r, pageRect: g, scrollOffset: e },
+      { detailRect: c, galleryRect: o, pageRect: y, scrollOffset: s },
       n
     ),
-    outAnimation: D(
-      { galleryRect: r, detailRect: u, scrollOffset: e },
+    outAnimation: M(
+      { galleryRect: o, detailRect: c, scrollOffset: s },
       t
     )
   } : {
-    inAnimation: P(
-      { galleryRect: r, detailRect: u, scrollOffset: e },
+    inAnimation: O(
+      { galleryRect: o, detailRect: c, scrollOffset: s },
       n
     ),
-    outAnimation: F(
-      { detailRect: u, galleryRect: r, pageRect: g, scrollOffset: e },
+    outAnimation: _(
+      { detailRect: c, galleryRect: o, pageRect: y, scrollOffset: s },
       t
     )
   };
 }
-const I = (t = {}) => {
-  var h, a;
+const N = (t = {}) => {
+  var a, i;
   const n = {
-    stiffness: ((h = t.spring) == null ? void 0 : h.stiffness) ?? 50,
-    damping: ((a = t.spring) == null ? void 0 : a.damping) ?? 10
-  }, e = t.timeout ?? 300;
-  let i = null, s = null, l = null;
+    stiffness: ((a = t.spring) == null ? void 0 : a.stiffness) ?? 50,
+    damping: ((i = t.spring) == null ? void 0 : i.damping) ?? 10
+  }, s = t.timeout ?? 300;
+  let e = null, l = null, r = null;
   return {
-    in: async (r, { scrollOffset: u }) => {
-      const g = r;
-      return !await new Promise((y) => {
-        i ? y(!0) : (s = y, setTimeout(() => {
-          s = null, y(!1);
-        }, e));
-      }) || !i ? (i = null, {
+    in: async (o, { scrollOffset: c }) => {
+      const y = o;
+      return !await new Promise((p) => {
+        e ? p(!0) : (l = p, setTimeout(() => {
+          l = null, p(!1);
+        }, s));
+      }) || !e ? (e = null, {
         spring: n,
         tick: () => {
         }
-      }) : (l = L(i, g, u), l ? (i = null, {
+      }) : (r = U(e, y, c), r ? (e = null, {
         spring: n,
-        tick: (y) => {
-          l && l.inAnimation(y);
+        tick: (p) => {
+          r && r.inAnimation(p);
         }
       }) : {
         spring: n,
@@ -251,46 +310,52 @@ const I = (t = {}) => {
         }
       });
     },
-    out: async (r) => ({
+    out: async (o) => ({
       spring: n,
       onStart: () => {
-        i = r, s && (s(!0), s = null);
+        e = o, l && (l(!0), l = null);
       },
-      prepare: (u) => {
-        k(u), u.style.zIndex = "-1";
+      prepare: (c) => {
+        x(c), c.style.zIndex = "-1";
       },
-      tick: (u) => {
-        l && l.outAnimation(u);
+      tick: (c) => {
+        r && r.outAnimation(c);
       }
     })
   };
-}, G = (t = {}) => {
-  var s, l;
-  const n = t.direction ?? "up", e = {
-    stiffness: ((s = t.spring) == null ? void 0 : s.stiffness) ?? 300,
-    damping: ((l = t.spring) == null ? void 0 : l.damping) ?? 30
-  }, i = n === "up";
+}, I = {
+  stiffness: 30,
+  damping: 7
+}, Z = (t = {}) => {
+  var l, r;
+  const n = t.direction ?? "up", s = {
+    stiffness: ((l = t.spring) == null ? void 0 : l.stiffness) ?? I.stiffness,
+    damping: ((r = t.spring) == null ? void 0 : r.damping) ?? I.damping
+  }, e = n === "up";
   return {
-    in: (h) => ({
-      spring: e,
-      tick: (a) => {
-        const r = i ? (1 - a) * 100 : (1 - a) * -100;
-        h.style.transform = `translateY(${r}%)`;
+    in: (a) => ({
+      spring: s,
+      tick: (i) => {
+        const o = e ? (1 - i) * 100 : (1 - i) * -100;
+        a.style.transform = `translateY(${o}vh)`;
       }
     }),
-    out: (h) => ({
-      spring: e,
-      tick: (a) => {
-        const r = i ? (1 - a) * -100 : (1 - a) * 100;
-        h.style.transform = `translateY(${r}%)`;
+    out: (a) => ({
+      spring: s,
+      tick: (i) => {
+        const o = e ? (1 - i) * -100 : (1 - i) * 100;
+        a.style.transform = `translateY(${o}vh)`;
       },
-      prepare: k
+      prepare: (i) => {
+        x(i), i.style.zIndex = e ? "-1" : "1";
+      }
     })
   };
 };
 export {
-  X as fade,
-  b as hero,
-  I as pinterest,
-  G as scroll
+  b as drill,
+  v as fade,
+  H as hero,
+  N as pinterest,
+  Z as scroll
 };

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

@@ -1 +1 @@
-{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/scroll.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG9D,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,GAAI,UAAS,aAAkB,KAAG,eA8BpD,CAAC"}
+{"version":3,"file":"scroll.d.ts","sourceRoot":"","sources":["../../src/lib/view-transitions/scroll.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAG9D,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,IAAI,GAAG,MAAM,CAAC;IAC1B,MAAM,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;CAChC;AAOD,eAAO,MAAM,MAAM,GAAI,UAAS,aAAkB,KAAG,eAkCpD,CAAC"}

package/package.json

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

package/dist/utils-BSgyev81.cjs

@@ -1 +0,0 @@
-"use strict";const n=e=>{e.style.position="absolute",e.style.width="100%",e.style.top="0",e.style.left="0"},r=e=>{let t=e.parentElement;for(;t&&t!==document.body;){const l=window.getComputedStyle(t),o=l.overflow+l.overflowY+l.overflowX;if(o.includes("auto")||o.includes("scroll")||t.scrollHeight>t.clientHeight||t.scrollWidth>t.clientWidth)return t;t=t.parentElement}return document.documentElement};exports.getScrollingElement=r;exports.prepareOutgoing=n;

package/dist/utils-DR41YsAh.js

@@ -1,16 +0,0 @@
-const n = (e) => {
-  e.style.position = "absolute", e.style.width = "100%", e.style.top = "0", e.style.left = "0";
-}, r = (e) => {
-  let t = e.parentElement;
-  for (; t && t !== document.body; ) {
-    const o = window.getComputedStyle(t), l = o.overflow + o.overflowY + o.overflowX;
-    if (l.includes("auto") || l.includes("scroll") || t.scrollHeight > t.clientHeight || t.scrollWidth > t.clientWidth)
-      return t;
-    t = t.parentElement;
-  }
-  return document.documentElement;
-};
-export {
-  r as g,
-  n as p
-};