@ssgoi/react 4.2.1 → 5.2.0

package/dist/core/dist/types.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function m(e){return("tick"in e||"css"in e)&&!("items"in e)}function a(e){return"items"in e}function f(e){return"css"in e&&typeof e.css=="function"}function p(e){return"tick"in e&&typeof e.tick=="function"}async function d(e){const t=await e;return a(t)?{prepare:t.prepare,wait:t.wait,onStart:t.onStart,onEnd:t.onEnd,items:t.items,schedule:t.schedule}:{prepare:t.prepare,wait:t.wait,onStart:t.onStart,onEnd:t.onEnd,items:[{physics:t.physics,tick:t.tick,css:t.css}],schedule:"parallel"}}function h(e,t){const c=e.schedule??"parallel",o=e.items.map(s=>{let n;switch(c){case"parallel":n=0;break;case"sequential":n=1;break;case"stagger":n=Math.max(0,Math.min(1,s.offset??0));break;default:n=0}const{css:i,offset:k,...l}=s,u=i?typeof i=="function"?t?{element:t,style:i}:void 0:{element:i.element,style:i.style}:void 0;return{...l,css:u,normalizedOffset:n}}),{schedule:y,...r}=e;return{...r,items:o}}exports.isCssAnimation=f;exports.isMultiAnimation=a;exports.isSingleAnimation=m;exports.isTickAnimation=p;exports.normalizeSchedule=h;exports.normalizeToMultiAnimation=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function d(e){return("tick"in e||"css"in e)&&!("items"in e)}function a(e){return"items"in e}function y(e){return"css"in e&&typeof e.css=="function"}function p(e){return"tick"in e&&typeof e.tick=="function"}function o(e){return"keyframes"in e&&e.keyframes!==void 0&&e.keyframes!==null}async function k(e){const n=await e;return a(n)?{prepare:n.prepare,wait:n.wait,onReady:n.onReady,onStart:n.onStart,onEnd:n.onEnd,items:n.items,schedule:n.schedule}:{prepare:n.prepare,wait:n.wait,onReady:n.onReady,onStart:n.onStart,onEnd:n.onEnd,items:[{physics:n.physics,tick:n.tick,css:n.css}],schedule:"parallel"}}function h(e,n){const r=e.schedule??"parallel",c=e.items.map(s=>{let t;switch(r){case"parallel":t=0;break;case"sequential":t=1;break;case"stagger":t=Math.max(0,Math.min(1,s.offset??0));break;default:t=0}if(o(s)){const{offset:A,...m}=s;return{...m,normalizedOffset:t}}const{css:i,offset:w,...u}=s,f=i?typeof i=="function"?n?{element:n,style:i}:void 0:{element:i.element,style:i.style}:void 0;return{...u,css:f,normalizedOffset:t}}),{schedule:S,...l}=e;return{...l,items:c}}exports.isCssAnimation=y;exports.isKeyframesAnimation=o;exports.isMultiAnimation=a;exports.isSingleAnimation=d;exports.isTickAnimation=p;exports.normalizeSchedule=h;exports.normalizeToMultiAnimation=k;

package/dist/core/dist/types.js

@@ -1,42 +1,47 @@
-function p(e) {
-  return ("tick" in e || "css" in e) && !("items" in e);
+function k(n) {
+  return ("tick" in n || "css" in n) && !("items" in n);
 }
-function u(e) {
-  return "items" in e;
+function f(n) {
+  return "items" in n;
 }
-function d(e) {
-  return "css" in e && typeof e.css == "function";
+function h(n) {
+  return "css" in n && typeof n.css == "function";
 }
-function h(e) {
-  return "tick" in e && typeof e.tick == "function";
+function w(n) {
+  return "tick" in n && typeof n.tick == "function";
 }
-async function k(e) {
-  const n = await e;
-  return u(n) ? {
-    prepare: n.prepare,
-    wait: n.wait,
-    onStart: n.onStart,
-    onEnd: n.onEnd,
-    items: n.items,
-    schedule: n.schedule
+function m(n) {
+  return "keyframes" in n && n.keyframes !== void 0 && n.keyframes !== null;
+}
+async function A(n) {
+  const e = await n;
+  return f(e) ? {
+    prepare: e.prepare,
+    wait: e.wait,
+    onReady: e.onReady,
+    onStart: e.onStart,
+    onEnd: e.onEnd,
+    items: e.items,
+    schedule: e.schedule
   } : {
-    prepare: n.prepare,
-    wait: n.wait,
-    onStart: n.onStart,
-    onEnd: n.onEnd,
+    prepare: e.prepare,
+    wait: e.wait,
+    onReady: e.onReady,
+    onStart: e.onStart,
+    onEnd: e.onEnd,
     items: [
       {
-        physics: n.physics,
-        tick: n.tick,
-        css: n.css
+        physics: e.physics,
+        tick: e.tick,
+        css: e.css
       }
     ],
     schedule: "parallel"
   };
 }
-function y(e, n) {
-  const a = e.schedule ?? "parallel", c = e.items.map(
-    (s) => {
+function S(n, e) {
+  const a = n.schedule ?? "parallel", o = n.items.map(
+    (i) => {
       let t;
       switch (a) {
         case "parallel":
@@ -46,25 +51,30 @@ function y(e, n) {
           t = 1;
           break;
         case "stagger":
-          t = Math.max(0, Math.min(1, s.offset ?? 0));
+          t = Math.max(0, Math.min(1, i.offset ?? 0));
           break;
         default:
           t = 0;
       }
-      const { css: i, offset: f, ...r } = s, l = i ? typeof i == "function" ? n ? { element: n, style: i } : void 0 : { element: i.element, style: i.style } : void 0;
-      return { ...r, css: l, normalizedOffset: t };
+      if (m(i)) {
+        const { offset: y, ...u } = i;
+        return { ...u, normalizedOffset: t };
+      }
+      const { css: s, offset: p, ...c } = i, l = s ? typeof s == "function" ? e ? { element: e, style: s } : void 0 : { element: s.element, style: s.style } : void 0;
+      return { ...c, css: l, normalizedOffset: t };
     }
-  ), { schedule: m, ...o } = e;
+  ), { schedule: d, ...r } = n;
   return {
-    ...o,
-    items: c
+    ...r,
+    items: o
   };
 }
 export {
-  d as isCssAnimation,
-  u as isMultiAnimation,
-  p as isSingleAnimation,
-  h as isTickAnimation,
-  y as normalizeSchedule,
-  k as normalizeToMultiAnimation
+  h as isCssAnimation,
+  m as isKeyframesAnimation,
+  f as isMultiAnimation,
+  k as isSingleAnimation,
+  w as isTickAnimation,
+  S as normalizeSchedule,
+  A as normalizeToMultiAnimation
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./react/src/lib/transition.cjs"),i=require("./core/dist/types.cjs"),o=require("./react/src/lib/ssgoi.cjs"),t=require("./react/src/lib/ssgoi-transition.cjs"),s=require("./react/src/lib/transition-scope.cjs");exports.transition=n.transition;exports.isCssAnimation=i.isCssAnimation;exports.isMultiAnimation=i.isMultiAnimation;exports.isSingleAnimation=i.isSingleAnimation;exports.isTickAnimation=i.isTickAnimation;exports.normalizeSchedule=i.normalizeSchedule;exports.normalizeToMultiAnimation=i.normalizeToMultiAnimation;exports.Ssgoi=o.Ssgoi;exports.SsgoiTransition=t.SsgoiTransition;exports.TransitionScope=s.TransitionScope;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./react/src/lib/transition.cjs"),i=require("./core/dist/types.cjs"),o=require("./react/src/lib/ssgoi.cjs"),s=require("./react/src/lib/ssgoi-transition.cjs"),t=require("./react/src/lib/transition-scope.cjs");exports.transition=n.transition;exports.isCssAnimation=i.isCssAnimation;exports.isKeyframesAnimation=i.isKeyframesAnimation;exports.isMultiAnimation=i.isMultiAnimation;exports.isSingleAnimation=i.isSingleAnimation;exports.isTickAnimation=i.isTickAnimation;exports.normalizeSchedule=i.normalizeSchedule;exports.normalizeToMultiAnimation=i.normalizeToMultiAnimation;exports.Ssgoi=o.Ssgoi;exports.SsgoiTransition=s.SsgoiTransition;exports.TransitionScope=t.TransitionScope;

package/dist/index.js

@@ -1,17 +1,18 @@
 import { transition as n } from "./react/src/lib/transition.js";
-import { isCssAnimation as r, isMultiAnimation as m, isSingleAnimation as e, isTickAnimation as s, normalizeSchedule as a, normalizeToMultiAnimation as l } from "./core/dist/types.js";
-import { Ssgoi as f } from "./react/src/lib/ssgoi.js";
-import { SsgoiTransition as A } from "./react/src/lib/ssgoi-transition.js";
-import { TransitionScope as T } from "./react/src/lib/transition-scope.js";
+import { isCssAnimation as r, isKeyframesAnimation as m, isMultiAnimation as e, isSingleAnimation as s, isTickAnimation as a, normalizeSchedule as f, normalizeToMultiAnimation as l } from "./core/dist/types.js";
+import { Ssgoi as A } from "./react/src/lib/ssgoi.js";
+import { SsgoiTransition as S } from "./react/src/lib/ssgoi-transition.js";
+import { TransitionScope as c } from "./react/src/lib/transition-scope.js";
 export {
-  f as Ssgoi,
-  A as SsgoiTransition,
-  T as TransitionScope,
+  A as Ssgoi,
+  S as SsgoiTransition,
+  c as TransitionScope,
   r as isCssAnimation,
-  m as isMultiAnimation,
-  e as isSingleAnimation,
-  s as isTickAnimation,
-  a as normalizeSchedule,
+  m as isKeyframesAnimation,
+  e as isMultiAnimation,
+  s as isSingleAnimation,
+  a as isTickAnimation,
+  f as normalizeSchedule,
   l as normalizeToMultiAnimation,
   n as transition
 };

package/dist/lib/ssgoi.d.ts

@@ -3,13 +3,6 @@ import { SsgoiConfig } from './types';
 interface SsgoiProps {
     config: SsgoiConfig;
     children: ReactNode;
-    /**
-     * Hook to get current pathname (e.g., Next.js usePathname)
-     * @example
-     * import { usePathname } from 'next/navigation';
-     * <Ssgoi config={config} usePathname={usePathname}>
-     */
-    usePathname?: () => string;
 }
 export declare const Ssgoi: React.FC<SsgoiProps>;
 export {};

package/dist/lib/types.d.ts

@@ -1,23 +1,5 @@
-import { CSSProperties } from 'react';
 import { SsgoiContext } from '@ssgoi/core/types';
 export * from '@ssgoi/core/types';
-/**
- * Navigation info containing from/to paths
- */
-export type NavigationInfo = {
-    from: string | null;
-    to: string;
-};
-/**
- * React-specific context type with style control
- */
 export type ReactSsgoiContext = {
-    /** Get transition config for a path */
     getTransition: SsgoiContext;
-    /**
-     * Get initial style for an element
-     * Returns { visibility: "hidden" } on first call if transition is configured, {} otherwise
-     * Subsequent calls always return {} to prevent re-hiding on rerender
-     */
-    getInitialStyle: () => CSSProperties;
 };

package/dist/react/src/lib/ssgoi-transition.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react/jsx-runtime"),e=require("react"),T=require("./transition.cjs"),j=require("./context.cjs"),f=require("./utils.cjs"),x=({children:a,id:s,as:R,className:m,...g})=>{const{getTransition:S,getInitialStyle:y}=j.useSsgoi(),b=R||"div",n=e.useRef(null),i=e.useRef(!0),t=e.useRef(null);t.current===null&&(t.current=y());let r;i.current?r=t.current:n.current&&t.current&&(r=f.forkStyleFromElement(n.current,t.current));const o=e.useCallback(l=>{n.current=l,l&&(i.current=!1)},[]),c=S(s),u=e.useMemo(()=>T.transition(c),[c]),d=e.useMemo(()=>f.combineRefs(o,u),[o,u]);return q.jsx(b,{ref:d,"data-ssgoi-transition":s,className:m,style:r,...g,children:a})};exports.SsgoiTransition=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),g=require("react"),S=require("./transition.cjs"),f=require("./context.cjs"),m=({children:o,id:t,as:i,className:s,...e})=>{const{getTransition:r}=f.useSsgoi(),a=i||"div",n=r(t),c=g.useMemo(()=>S.transition(n),[n]);return u.jsx(a,{ref:c,"data-ssgoi-transition":t,className:s,...e,children:o})};exports.SsgoiTransition=m;

package/dist/react/src/lib/ssgoi-transition.js

@@ -1,44 +1,30 @@
 "use client";
-import { jsx as d } from "react/jsx-runtime";
-import { useRef as r, useCallback as C, useMemo as u } from "react";
-import { transition as k } from "./transition.js";
-import { useSsgoi as x } from "./context.js";
-import { forkStyleFromElement as E, combineRefs as F } from "./utils.js";
-const h = ({
-  children: m,
+import { jsx as f } from "react/jsx-runtime";
+import { useMemo as p } from "react";
+import { transition as c } from "./transition.js";
+import { useSsgoi as g } from "./context.js";
+const T = ({
+  children: n,
   id: o,
-  as: a,
-  className: R,
-  ...p
+  as: i,
+  className: r,
+  ...s
 }) => {
-  const { getTransition: g, getInitialStyle: S } = x(), y = a || "div", e = r(null), i = r(!0), t = r(null);
-  t.current === null && (t.current = S());
-  let n;
-  i.current ? n = t.current : e.current && t.current && (n = E(
-    e.current,
-    t.current
-  ));
-  const s = C((l) => {
-    e.current = l, l && (i.current = !1);
-  }, []), c = g(o), f = u(
-    () => k(c),
-    [c]
-  ), b = u(
-    () => F(s, f),
-    [s, f]
+  const { getTransition: m } = g(), e = i || "div", t = m(o), a = p(
+    () => c(t),
+    [t]
   );
-  return /* @__PURE__ */ d(
-    y,
+  return /* @__PURE__ */ f(
+    e,
     {
-      ref: b,
+      ref: a,
       "data-ssgoi-transition": o,
-      className: R,
-      style: n,
-      ...p,
-      children: m
+      className: r,
+      ...s,
+      children: n
     }
   );
 };
 export {
-  h as SsgoiTransition
+  T as SsgoiTransition
 };

package/dist/react/src/lib/ssgoi.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),v=require("./context.cjs"),s=require("@ssgoi/core");function R(t){const n=o.useRef(null),e=o.useRef(null);t!==null&&n.current!==t&&(e.current=n.current,n.current=t);const r=o.useRef({from:null,to:""});return t!==null&&(r.current={from:e.current,to:t}),o.useCallback(()=>r.current,[])}function S(t){return{trigger(){},get(n){const{from:e,to:r}=t();return!e||!r||e===r?Promise.resolve(null):Promise.resolve({from:e,to:r})}}}const y=o.memo(({config:t,children:n,usePathname:e})=>{const r=e?.()??null,i=R(r),l=o.useMemo(()=>{const{getTransition:g,hasMatchingTransition:f}=s.createSggoiTransitionContext(t,{createNavigationDetector:e?()=>S(i):s.createAnyOrderDetector});return{getTransition:g,getInitialStyle:()=>{if(!e)return{};const{from:u,to:c}=i();return!u||u===c?{}:f(u,c)?{visibility:"hidden"}:{}}}},[t,e,i]);return a.jsx(v.SsgoiProvider,{value:l,children:n})});exports.Ssgoi=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),t=require("react"),i=require("./context.cjs"),n=require("@ssgoi/core"),u=t.memo(({config:e,children:o})=>{const r=t.useMemo(()=>({getTransition:n.createSggoiTransitionContext(e,{outFirst:!1})}),[e]);return s.jsx(i.SsgoiProvider,{value:r,children:o})});exports.Ssgoi=u;

package/dist/react/src/lib/ssgoi.js

@@ -1,43 +1,21 @@
 "use client";
-import { jsx as g } from "react/jsx-runtime";
-import a, { useMemo as m, useRef as c, useCallback as v } from "react";
-import { SsgoiProvider as y } from "./context.js";
-import { createSggoiTransitionContext as R, createAnyOrderDetector as S } from "@ssgoi/core";
-function d(t) {
-  const n = c(null), r = c(null);
-  t !== null && n.current !== t && (r.current = n.current, n.current = t);
-  const e = c({ from: null, to: "" });
-  return t !== null && (e.current = { from: r.current, to: t }), v(() => e.current, []);
-}
-function p(t) {
-  return {
-    trigger() {
-    },
-    get(n) {
-      const { from: r, to: e } = t();
-      return !r || !e || r === e ? Promise.resolve(null) : Promise.resolve({ from: r, to: e });
-    }
-  };
-}
-const C = a.memo(
-  ({ config: t, children: n, usePathname: r }) => {
-    const e = r?.() ?? null, o = d(e), l = m(() => {
-      const { getTransition: s, hasMatchingTransition: f } = R(t, {
-        createNavigationDetector: r ? () => p(o) : S
-      });
-      return {
-        getTransition: s,
-        getInitialStyle: () => {
-          if (!r)
-            return {};
-          const { from: i, to: u } = o();
-          return !i || i === u ? {} : f(i, u) ? { visibility: "hidden" } : {};
-        }
-      };
-    }, [t, r, o]);
-    return /* @__PURE__ */ g(y, { value: l, children: n });
+import { jsx as e } from "react/jsx-runtime";
+import i, { useMemo as m } from "react";
+import { SsgoiProvider as s } from "./context.js";
+import { createSggoiTransitionContext as n } from "@ssgoi/core";
+const f = i.memo(
+  ({ config: o, children: t }) => {
+    const r = m(
+      () => ({
+        getTransition: n(o, {
+          outFirst: !1
+        })
+      }),
+      [o]
+    );
+    return /* @__PURE__ */ e(s, { value: r, children: t });
   }
 );
 export {
-  C as Ssgoi
+  f as Ssgoi
 };

package/dist/types.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./core/dist/types.cjs");exports.isCssAnimation=i.isCssAnimation;exports.isMultiAnimation=i.isMultiAnimation;exports.isSingleAnimation=i.isSingleAnimation;exports.isTickAnimation=i.isTickAnimation;exports.normalizeSchedule=i.normalizeSchedule;exports.normalizeToMultiAnimation=i.normalizeToMultiAnimation;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./core/dist/types.cjs");exports.isCssAnimation=i.isCssAnimation;exports.isKeyframesAnimation=i.isKeyframesAnimation;exports.isMultiAnimation=i.isMultiAnimation;exports.isSingleAnimation=i.isSingleAnimation;exports.isTickAnimation=i.isTickAnimation;exports.normalizeSchedule=i.normalizeSchedule;exports.normalizeToMultiAnimation=i.normalizeToMultiAnimation;

package/dist/types.js

@@ -1,9 +1,10 @@
-import { isCssAnimation as o, isMultiAnimation as m, isSingleAnimation as t, isTickAnimation as a, normalizeSchedule as e, normalizeToMultiAnimation as l } from "./core/dist/types.js";
+import { isCssAnimation as o, isKeyframesAnimation as m, isMultiAnimation as a, isSingleAnimation as t, isTickAnimation as e, normalizeSchedule as s, normalizeToMultiAnimation as l } from "./core/dist/types.js";
 export {
   o as isCssAnimation,
-  m as isMultiAnimation,
+  m as isKeyframesAnimation,
+  a as isMultiAnimation,
   t as isSingleAnimation,
-  a as isTickAnimation,
-  e as normalizeSchedule,
+  e as isTickAnimation,
+  s as normalizeSchedule,
   l as normalizeToMultiAnimation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/react",
-  "version": "4.2.1",
+  "version": "5.2.0",
   "description": "React bindings for SSGOI - Native app-like page transitions for React applications",
   "private": false,
   "type": "module",
@@ -78,7 +78,7 @@
   "dependencies": {
     "unplugin": "^2.3.2",
     "@babel/core": "^7.26.10",
-    "@ssgoi/core": "^4.2.0"
+    "@ssgoi/core": "^5.2.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",
@@ -100,9 +100,20 @@
   "keywords": [
     "react",
     "page-transition",
+    "page-transitions",
+    "view-transitions",
+    "view-transition-api-alternative",
     "animation",
     "ssgoi",
-    "spring-physics"
+    "spring-physics",
+    "nextjs",
+    "next-js",
+    "cross-browser",
+    "navigation-animation",
+    "hero-transition",
+    "shared-element-transition",
+    "route-transition",
+    "drill-transition"
   ],
   "author": "MeurSyphus <tmdeoans@snu.ac.kr>",
   "license": "MIT",

package/dist/lib/utils.d.ts

@@ -1,10 +0,0 @@
-import { CSSProperties } from 'react';
-/**
- * Combines multiple ref callbacks into one
- */
-export declare function combineRefs<T>(...refs: Array<((el: T | null) => void) | null | undefined>): (el: T | null) => void;
-/**
- * Forks style from element.style based on initialStyle keys
- * Returns the current DOM style values for keys that were in initialStyle
- */
-export declare function forkStyleFromElement(element: HTMLElement, initialStyle: CSSProperties): CSSProperties;

package/dist/react/src/lib/utils.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function f(...t){return o=>{t.forEach(e=>e?.(o))}}function c(t,o){const e={};for(const n of Object.keys(o)){const r=t.style[n];r&&(e[n]=r)}return e}exports.combineRefs=f;exports.forkStyleFromElement=c;

package/dist/react/src/lib/utils.js

@@ -1,17 +0,0 @@
-function f(...o) {
-  return (t) => {
-    o.forEach((e) => e?.(t));
-  };
-}
-function c(o, t) {
-  const e = {};
-  for (const n of Object.keys(t)) {
-    const r = o.style[n];
-    r && (e[n] = r);
-  }
-  return e;
-}
-export {
-  f as combineRefs,
-  c as forkStyleFromElement
-};