add 2nd RAF for style change

app.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import * as Iso from "@eno/iso";
 import Collapse, {CollapseButton, CollapseGroup} from "$/collapse.tsx";
+import C from "./context.tsx";
 
 const Comp = React.lazy(()=>import("./deep/component.tsx"));
 
@@ -20,11 +21,9 @@ export default ()=>
                 <p>Hello!</p>
             </Collapse>
         </header>
-        <div>
-            <CollapseGroup>
-                <CollapseButton></CollapseButton>
-            </CollapseGroup>
-        </div>
+        
+        <C/>
+
         <main class="layout-middle">
         <Iso.Switch>
             <Iso.Case value="/">

components/collapse.tsx

@@ -74,7 +74,7 @@ export const CollapseButton =()=>
 }
 
 type DoneCallback =(openState:boolean)=>void;
-type CollapseControls =(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)=>void;
+export type CollapseControls =(inOpen?:boolean, inMs?:number, inDone?:DoneCallback)=>void;
 export function Collapser(inElement:HTMLElement, initialState = false)
 {
     let userDone:DoneCallback = (openState) => {};
@@ -91,6 +91,7 @@ export function Collapser(inElement:HTMLElement, initialState = false)
           inElement.style.height = "auto";
           inElement.style.overflow = "visible";
         }
+        console.log(" -- anim stop --")
         userDone(userMode);
       }
     };
@@ -102,15 +103,25 @@ export function Collapser(inElement:HTMLElement, initialState = false)
 
       if(arguments.length)
       {
+        console.log(" -- anim start --", inOpen);
         userDone = inDone|| ((m)=>{}) as DoneCallback;
-        userMode = inOpen||!userMode;
+        userMode = inOpen === true;
+
         inElement.style.height = inElement.clientHeight + "px";
+        if(inOpen === false)
+        {
+          console.log(" --height check", inElement.style.height)
+        }
         inElement.style.overflow = "hidden";
         inElement.style.transition = "none";
         frameRequest = requestAnimationFrame(()=>
         {
-          inElement.style.height = `${inOpen ? inElement.scrollHeight : 0}px`;
           inElement.style.transition = `height ${(inMs||1000) / 1000}s`;
+          frameRequest = requestAnimationFrame(()=>
+          {
+            inElement.style.height = `${inOpen ? inElement.scrollHeight : 0}px`;
+          });
+          
         });
       }
       else

context.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { CollapseControls, Collapser } from "./components/collapse.tsx";
+
+type StateArgs = {done?:boolean, open?:boolean};
+type StateObj = {done:boolean, open:boolean};
+type StateBinding = [state:StateObj, update:(args:StateArgs)=>void];
+
+const CTX = React.createContext([{done:true, open:false}, (args)=>{}] as StateBinding);
+
+export default ()=>
+{
+    const [stateGet, stateSet] = React.useState({done:true, open:false} as StateObj);
+    const setter =(args:StateArgs)=> stateSet({...stateGet, ...args});
+
+    return <CTX.Provider value={[stateGet, setter]}>
+        <Inner/>
+    </CTX.Provider>;
+}
+
+const Inner =()=>
+{
+    const [stateGet, stateSet] = React.useContext(CTX);
+    const refElement = React.useRef( null );
+    const refControl:React.MutableRefObject<CollapseControls|null> = React.useRef( null );
+
+    React.useEffect(()=>
+    {
+        refControl.current = Collapser(refElement.current, true);
+    }
+    , []);
+
+    React.useEffect(()=>
+    {
+        console.log("open changed to:", stateGet.open);
+        refControl.current && refControl.current(stateGet.open, 1000, ()=>stateSet({done:true}));
+        
+    }, [stateGet.open])
+
+    React.useEffect(()=>{
+        console.log("done changed to:", stateGet.done);
+    }, [stateGet.done])
+
+    return <div class="p-4">
+        <p>{JSON.stringify(stateGet)}</p>
+        <button class="px-10 py-2 bg-red-500 text-white" onClick={e=>stateSet({open:!stateGet.open, done:false})}>click</button>
+        <div ref={refElement}>
+            <p>hello</p>
+            <p>hello</p>
+            <p>hello</p>
+            <p>hello</p>
+            <p>hello</p>
+            <p>hello</p>
+            <p>hello</p>
+        </div>
+    </div>;
+
+};