@ssgoi/react 4.0.0 → 4.1.0

package/dist/core/dist/types.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function h(e){return("tick"in e||"css"in e)&&!("springs"in e)}function r(e){return"springs"in e}function o(e){return"css"in e&&typeof e.css=="function"}function c(e){return"tick"in e&&typeof e.tick=="function"}function a(e){if(o(e)&&c(e))throw new Error("SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other.")}function l(e){if(e.tick&&e.css)throw new Error("SpringItem cannot have both 'tick' and 'css' defined. Use one or the other.")}async function m(e){const t=await e;return r(t)?(t.springs.forEach(l),t):(a(t),{prepare:t.prepare,wait:t.wait,onStart:t.onStart,onEnd:t.onEnd,springs:[{physics:t.physics,tick:t.tick,css:t.css}],schedule:"parallel"})}function S(e,t){const u=e.schedule??"parallel",f=e.springs.map(s=>{let n;switch(u){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:y,...d}=s,g=i?typeof i=="function"?t?{element:t,style:i}:void 0:{element:i.element,style:i.style}:void 0;return{...d,css:g,normalizedOffset:n}}),{schedule:k,...p}=e;return{...p,springs:f}}exports.isCssAnimation=o;exports.isMultiSpring=r;exports.isSingleSpring=h;exports.isTickAnimation=c;exports.normalizeMultiSpringSchedule=S;exports.normalizeToMultiSpring=m;exports.validateAnimationMode=a;exports.validateSpringItem=l;
+"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;

package/dist/core/dist/types.js

@@ -1,49 +1,44 @@
-function k(n) {
-  return ("tick" in n || "css" in n) && !("springs" in n);
+function p(e) {
+  return ("tick" in e || "css" in e) && !("items" in e);
 }
-function f(n) {
-  return "springs" in n;
+function u(e) {
+  return "items" in e;
 }
-function p(n) {
-  return "css" in n && typeof n.css == "function";
+function d(e) {
+  return "css" in e && typeof e.css == "function";
 }
-function u(n) {
-  return "tick" in n && typeof n.tick == "function";
+function h(e) {
+  return "tick" in e && typeof e.tick == "function";
 }
-function h(n) {
-  if (p(n) && u(n))
-    throw new Error(
-      "SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other."
-    );
-}
-function d(n) {
-  if (n.tick && n.css)
-    throw new Error(
-      "SpringItem cannot have both 'tick' and 'css' defined. Use one or the other."
-    );
-}
-async function S(n) {
-  const e = await n;
-  return f(e) ? (e.springs.forEach(d), e) : (h(e), {
-    prepare: e.prepare,
-    wait: e.wait,
-    onStart: e.onStart,
-    onEnd: e.onEnd,
-    springs: [
+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
+  } : {
+    prepare: n.prepare,
+    wait: n.wait,
+    onStart: n.onStart,
+    onEnd: n.onEnd,
+    items: [
       {
-        physics: e.physics,
-        tick: e.tick,
-        css: e.css
+        physics: n.physics,
+        tick: n.tick,
+        css: n.css
       }
     ],
     schedule: "parallel"
-  });
+  };
 }
-function y(n, e) {
-  const r = n.schedule ?? "parallel", a = n.springs.map(
+function y(e, n) {
+  const a = e.schedule ?? "parallel", c = e.items.map(
     (s) => {
       let t;
-      switch (r) {
+      switch (a) {
         case "parallel":
           t = 0;
           break;
@@ -56,22 +51,20 @@ function y(n, e) {
         default:
           t = 0;
       }
-      const { css: i, offset: m, ...c } = s, l = i ? typeof i == "function" ? e ? { element: e, style: i } : void 0 : { element: i.element, style: i.style } : void 0;
-      return { ...c, css: l, normalizedOffset: t };
+      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 };
     }
-  ), { schedule: g, ...o } = n;
+  ), { schedule: m, ...o } = e;
   return {
     ...o,
-    springs: a
+    items: c
   };
 }
 export {
-  p as isCssAnimation,
-  f as isMultiSpring,
-  k as isSingleSpring,
-  u as isTickAnimation,
-  y as normalizeMultiSpringSchedule,
-  S as normalizeToMultiSpring,
-  h as validateAnimationMode,
-  d as validateSpringItem
+  d as isCssAnimation,
+  u as isMultiAnimation,
+  p as isSingleAnimation,
+  h as isTickAnimation,
+  y as normalizeSchedule,
+  k 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"),t=require("./react/src/lib/ssgoi.cjs"),o=require("./react/src/lib/ssgoi-transition.cjs"),e=require("./react/src/lib/transition-scope.cjs");exports.transition=n.transition;exports.isCssAnimation=i.isCssAnimation;exports.isMultiSpring=i.isMultiSpring;exports.isSingleSpring=i.isSingleSpring;exports.isTickAnimation=i.isTickAnimation;exports.normalizeMultiSpringSchedule=i.normalizeMultiSpringSchedule;exports.normalizeToMultiSpring=i.normalizeToMultiSpring;exports.validateAnimationMode=i.validateAnimationMode;exports.validateSpringItem=i.validateSpringItem;exports.Ssgoi=t.Ssgoi;exports.SsgoiTransition=o.SsgoiTransition;exports.TransitionScope=e.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"),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;

package/dist/index.js

@@ -1,19 +1,17 @@
 import { transition as n } from "./react/src/lib/transition.js";
-import { isCssAnimation as t, isMultiSpring as e, isSingleSpring as a, isTickAnimation as m, normalizeMultiSpringSchedule as p, normalizeToMultiSpring as s, validateAnimationMode as S, validateSpringItem as l } from "./core/dist/types.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 d } from "./react/src/lib/ssgoi-transition.js";
-import { TransitionScope as M } from "./react/src/lib/transition-scope.js";
+import { SsgoiTransition as A } from "./react/src/lib/ssgoi-transition.js";
+import { TransitionScope as T } from "./react/src/lib/transition-scope.js";
 export {
   f as Ssgoi,
-  d as SsgoiTransition,
-  M as TransitionScope,
-  t as isCssAnimation,
-  e as isMultiSpring,
-  a as isSingleSpring,
-  m as isTickAnimation,
-  p as normalizeMultiSpringSchedule,
-  s as normalizeToMultiSpring,
-  n as transition,
-  S as validateAnimationMode,
-  l as validateSpringItem
+  A as SsgoiTransition,
+  T as TransitionScope,
+  r as isCssAnimation,
+  m as isMultiAnimation,
+  e as isSingleAnimation,
+  s as isTickAnimation,
+  a as normalizeSchedule,
+  l as normalizeToMultiAnimation,
+  n as transition
 };

package/dist/lib/context.d.ts

@@ -1,3 +1,3 @@
-import { SsgoiContext } from './types';
-export declare const SsgoiProvider: import('react').Provider<SsgoiContext | null>;
-export declare const useSsgoi: () => SsgoiContext;
+import { ReactSsgoiContext } from './types';
+export declare const SsgoiProvider: import('react').Provider<ReactSsgoiContext | null>;
+export declare const useSsgoi: () => ReactSsgoiContext;

package/dist/lib/create-pathname-detector.d.ts

@@ -0,0 +1,6 @@
+import { NavigationDetector } from '@ssgoi/core';
+/**
+ * Creates a NavigationDetector based on pathname changes
+ * Uses getPathname() to detect navigation without relying on IN/OUT callbacks
+ */
+export declare function createPathnameDetector(getPathname: () => string): NavigationDetector;

package/dist/lib/ssgoi-transition.d.ts

@@ -1,9 +1,10 @@
-import { ReactNode, ElementType } from 'react';
+import { ReactNode, ElementType, CSSProperties } from 'react';
 type SsgoiTransitionProps<T extends ElementType = "div"> = {
     children: ReactNode;
     id: string;
     as?: T;
     className?: string;
+    style?: CSSProperties;
 };
-export declare const SsgoiTransition: <T extends ElementType = "div">({ children, id, as, className, ...rest }: SsgoiTransitionProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SsgoiTransition: <T extends ElementType = "div">({ children, id, as, className, style, ...rest }: SsgoiTransitionProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/lib/ssgoi.d.ts

@@ -3,6 +3,12 @@ import { SsgoiConfig } from './types';
 interface SsgoiProps {
     config: SsgoiConfig;
     children: ReactNode;
+    /**
+     * Function to get current pathname
+     * Used to determine initial style and navigation detection
+     * @example Next.js: () => usePathname()
+     */
+    getPathname?: () => string;
 }
 export declare const Ssgoi: React.FC<SsgoiProps>;
 export {};

package/dist/lib/types.d.ts

@@ -1 +1,15 @@
+import { CSSProperties } from 'react';
+import { SsgoiContext } from '@ssgoi/core/types';
 export * from '@ssgoi/core/types';
+/**
+ * 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" } if transition is configured, {} otherwise
+     */
+    getInitialStyle: (path: string) => CSSProperties;
+};

package/dist/react/src/lib/create-pathname-detector.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function s(o){let e=null,t=null,r=!1,l=!1;return{trigger(){},get(u){const n=o();if(!t||r&&l){if(!e||e===n)return e=n,Promise.resolve(null);t={from:e,to:n},r=!1,l=!1}u==="out"?r=!0:l=!0;const a=t;return r&&l&&(e=n,t=null),Promise.resolve(a)}}}exports.createPathnameDetector=s;

package/dist/react/src/lib/create-pathname-detector.js

@@ -0,0 +1,24 @@
+function s(u) {
+  let e = null, t = null, r = !1, l = !1;
+  return {
+    trigger() {
+    },
+    get(o) {
+      const n = u();
+      if (!t || r && l) {
+        if (!e || e === n)
+          return e = n, Promise.resolve(null);
+        t = {
+          from: e,
+          to: n
+        }, r = !1, l = !1;
+      }
+      o === "out" ? r = !0 : l = !0;
+      const a = t;
+      return r && l && (e = n, t = null), Promise.resolve(a);
+    }
+  };
+}
+export {
+  s as createPathnameDetector
+};

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

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),c=require("./transition.cjs"),u=require("./context.cjs"),g=({children:n,id:t,as:i,className:o,...s})=>{const e=u.useSsgoi(),r=i||"div";return a.jsx(r,{ref:c.transition(e(t)),"data-ssgoi-transition":t,className:o,...s,children:n})};exports.SsgoiTransition=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react/jsx-runtime"),l=require("./transition.cjs"),S=require("./context.cjs"),y=({children:n,id:t,as:i,className:e,style:o,...s})=>{const{getTransition:r,getInitialStyle:a}=S.useSsgoi(),c=i||"div",u=a(t);return g.jsx(c,{ref:l.transition(r(t)),"data-ssgoi-transition":t,className:e,style:{...o,...u},...s,children:n})};exports.SsgoiTransition=y;

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

@@ -1,23 +1,25 @@
 "use client";
-import { jsx as m } from "react/jsx-runtime";
-import { transition as e } from "./transition.js";
-import { useSsgoi as a } from "./context.js";
+import { jsx as l } from "react/jsx-runtime";
+import { transition as p } from "./transition.js";
+import { useSsgoi as c } from "./context.js";
 const u = ({
-  children: t,
-  id: o,
-  as: n,
-  className: i,
+  children: o,
+  id: t,
+  as: i,
+  className: n,
+  style: s,
   ...r
 }) => {
-  const s = a();
-  return /* @__PURE__ */ m(
-    n || "div",
+  const { getTransition: e, getInitialStyle: a } = c(), m = i || "div", g = a(t);
+  return /* @__PURE__ */ l(
+    m,
     {
-      ref: e(s(o)),
-      "data-ssgoi-transition": o,
-      className: i,
+      ref: p(e(t)),
+      "data-ssgoi-transition": t,
+      className: n,
+      style: { ...s, ...g },
       ...r,
-      children: t
+      children: o
     }
   );
 };

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

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),i=require("./context.cjs"),n=require("@ssgoi/core"),u=({config:e,children:t})=>{const o=s.useMemo(()=>n.createSggoiTransitionContext(e,{outFirst:!1}),[e]);return r.jsx(i.SsgoiProvider,{value:o,children:t})};exports.Ssgoi=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react/jsx-runtime"),n=require("react"),g=require("./context.cjs"),i=require("@ssgoi/core"),d=require("./create-pathname-detector.cjs"),m=n.memo(({config:o,children:c,getPathname:e})=>{const t=n.useRef(null),s=n.useMemo(()=>{const{getTransition:u,hasMatchingTransition:a}=i.createSggoiTransitionContext(o,{outFirst:!1,createNavigationDetector:e?()=>d.createPathnameDetector(e):i.createAnyOrderDetector});return{getTransition:u,getInitialStyle:l=>{if(!e)return{};const r=e();if(!t.current||t.current===r)return t.current=r,{};const S=t.current;return t.current=r,a(S,l)?{visibility:"hidden"}:{}}}},[o,e]);return f.jsx(g.SsgoiProvider,{value:s,children:c})});exports.Ssgoi=m;

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

@@ -1,19 +1,36 @@
 "use client";
-import { jsx as e } from "react/jsx-runtime";
-import { useMemo as i } from "react";
-import { SsgoiProvider as m } from "./context.js";
-import { createSggoiTransitionContext as s } from "@ssgoi/core";
-const f = ({ config: o, children: r }) => {
-  const t = i(
-    () => s(o, {
-      // React uses MutationObserver for unmount detection,
-      // so OUT and IN can arrive in any order
-      outFirst: !1
-    }),
-    [o]
-  );
-  return /* @__PURE__ */ e(m, { value: t, children: r });
-};
+import { jsx as m } from "react/jsx-runtime";
+import f, { useRef as l, useMemo as p } from "react";
+import { SsgoiProvider as v } from "./context.js";
+import { createSggoiTransitionContext as S, createAnyOrderDetector as d } from "@ssgoi/core";
+import { createPathnameDetector as g } from "./create-pathname-detector.js";
+const I = f.memo(
+  ({ config: o, children: n, getPathname: r }) => {
+    const t = l(null), i = p(() => {
+      const { getTransition: c, hasMatchingTransition: s } = S(o, {
+        // React uses MutationObserver for unmount detection,
+        // so OUT and IN can arrive in any order
+        outFirst: !1,
+        // Use pathname-based detector when getPathname is provided,
+        // otherwise use default any-order detector for React
+        createNavigationDetector: r ? () => g(r) : d
+      });
+      return {
+        getTransition: c,
+        getInitialStyle: (u) => {
+          if (!r)
+            return {};
+          const e = r();
+          if (!t.current || t.current === e)
+            return t.current = e, {};
+          const a = t.current;
+          return t.current = e, s(a, u) ? { visibility: "hidden" } : {};
+        }
+      };
+    }, [o, r]);
+    return /* @__PURE__ */ m(v, { value: i, children: n });
+  }
+);
 export {
-  f as Ssgoi
+  I 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.isMultiSpring=i.isMultiSpring;exports.isSingleSpring=i.isSingleSpring;exports.isTickAnimation=i.isTickAnimation;exports.normalizeMultiSpringSchedule=i.normalizeMultiSpringSchedule;exports.normalizeToMultiSpring=i.normalizeToMultiSpring;exports.validateAnimationMode=i.validateAnimationMode;exports.validateSpringItem=i.validateSpringItem;
+"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;

package/dist/types.js

@@ -1,11 +1,9 @@
-import { isCssAnimation as e, isMultiSpring as t, isSingleSpring as a, isTickAnimation as l, normalizeMultiSpringSchedule as o, normalizeToMultiSpring as r, validateAnimationMode as m, validateSpringItem as S } from "./core/dist/types.js";
+import { isCssAnimation as o, isMultiAnimation as m, isSingleAnimation as t, isTickAnimation as a, normalizeSchedule as e, normalizeToMultiAnimation as l } from "./core/dist/types.js";
 export {
-  e as isCssAnimation,
-  t as isMultiSpring,
-  a as isSingleSpring,
-  l as isTickAnimation,
-  o as normalizeMultiSpringSchedule,
-  r as normalizeToMultiSpring,
-  m as validateAnimationMode,
-  S as validateSpringItem
+  o as isCssAnimation,
+  m as isMultiAnimation,
+  t as isSingleAnimation,
+  a as isTickAnimation,
+  e as normalizeSchedule,
+  l as normalizeToMultiAnimation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/react",
-  "version": "4.0.0",
+  "version": "4.1.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.0.0"
+    "@ssgoi/core": "^4.2.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",