init

src/main.tsx

@@ -1,9 +1,10 @@
-import { StrictMode } from "react";
-import { createRoot } from "react-dom/client";
-import "./index.css";
-import { ReactRouterProvider } from "./providers/RouterPorvider.tsx";
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import '@/styles/fonts.css';
+import '@/styles/global.css';
+import { ReactRouterProvider } from './providers/RouterPorvider.tsx';
 
-createRoot(document.getElementById("root")!).render(
+createRoot(document.getElementById('root')!).render(
 	<StrictMode>
 		<ReactRouterProvider />
 	</StrictMode>,

src/pages/.cursor/rules/pages_rules.mdc

@@ -0,0 +1,5 @@
+---
+description:
+globs:
+alwaysApply: false
+---

src/pages/about/index.tsx

@@ -1,8 +1,8 @@
-import "./index.css";
-import { useGlobalStore } from "@/store/global";
+import './index.css';
+// import { useGlobalStore } from "@/store/global";
 
 function About() {
-	const { count, increment } = useGlobalStore((state) => state);
+	// const { count, increment } = useGlobalStore((state) => state);
 
 	return <div>about page</div>;
 }

src/pages/home/index.tsx

@@ -1,13 +1,29 @@
-import "./index.css";
-import { useGlobalStore } from "@/store/global";
+import Postmate from 'postmate';
+import { useEffect } from 'react';
+import { useGlobalStore } from '@/store/global';
+import './index.css';
 
 function Home() {
 	const { count, increment } = useGlobalStore((state) => state);
 
+	console.log('count', count);
+
+	useEffect(() => {
+		const handshake = new Postmate.Model({
+			// Expose your model to the Parent. Property values may be functions, promises, or regular values
+			height: () => (document as any).height || (document.body as any).offsetHeight,
+		});
+
+		// When parent <-> child handshake is complete, events may be emitted to the parent
+		handshake.then((parent) => {
+			parent.emit('some-event', 'Hello, World!');
+		});
+	}, []);
+
 	return (
 		<>
 			<div>
-				<div className="text-3xl font-bold underline">Hello World</div>
+				<div className="text-3xl font-bold underline">Hello World2</div>
 			</div>
 			<h1>Vite + React</h1>
 			<button type="button" onClick={increment}>

src/providers/RouterPorvider.tsx

@@ -1,15 +1,15 @@
-import { createBrowserRouter } from "react-router";
-import { RouterProvider } from "react-router/dom";
-import Home from "@/pages/home";
-import About from "@/pages/about";
+import { createBrowserRouter } from 'react-router';
+import { RouterProvider } from 'react-router/dom';
+import About from '@/pages/about';
+import Home from '@/pages/home';
 
 const router = createBrowserRouter([
 	{
-		path: "/",
+		path: '/',
 		element: <Home />,
 	},
 	{
-		path: "/about",
+		path: '/about',
 		element: <About />,
 	},
 ]);

src/store/.cursor/rules/store_rules.mdc

@@ -0,0 +1,5 @@
+---
+description:
+globs:
+alwaysApply: false
+---

src/store/global.tsx

@@ -1,4 +1,4 @@
-import { create } from "zustand";
+import { create } from 'zustand';
 
 type GlobalState = {
 	count: number;
@@ -7,5 +7,8 @@ type GlobalState = {
 
 export const useGlobalStore = create<GlobalState>((set) => ({
 	count: 0,
-	increment: () => set((state) => ({ count: state.count + 1 })),
+	increment: () => {
+		console.log('increment');
+		set((state) => ({ count: state.count + 1 }));
+	},
 }));