nucleus-core-ts 0.8.0

package/public/index.tsx

@@ -0,0 +1,52 @@
+import { useEffect } from "react";
+import { createRoot } from "react-dom/client";
+import {
+	Capabilities,
+	CTA,
+	Docs,
+	Features,
+	Footer,
+	Hero,
+	Managers,
+	Nav,
+	Stack,
+} from "./components";
+import { useStore } from "./store";
+import "./styles.css";
+import "./docs.css";
+
+function HomePage() {
+	return (
+		<>
+			<Hero />
+			<Features />
+			<Managers />
+			<Stack />
+			<Capabilities />
+			<CTA />
+			<Footer />
+		</>
+	);
+}
+
+function App() {
+	const store = useStore();
+
+	useEffect(() => {
+		store.initTheme();
+		store.initRouter();
+	}, []);
+
+	return (
+		<>
+			<Nav />
+			{store.currentPage === "home" && <HomePage />}
+			{store.currentPage === "docs" && <Docs />}
+		</>
+	);
+}
+
+const container = document.getElementById("root");
+if (container) {
+	createRoot(container).render(<App />);
+}

package/public/store.ts

@@ -0,0 +1,79 @@
+import { createStore } from "h-state";
+
+type Theme = "light" | "dark";
+type Page = "home" | "docs";
+
+interface AppState extends Record<string, unknown> {
+	theme: Theme;
+	currentPage: Page;
+	docsSidebarOpen: boolean;
+	activeSection: string;
+	activeItem: string;
+}
+
+interface AppMethods extends Record<string, unknown> {
+	toggleTheme: () => void;
+	initTheme: () => void;
+	navigate: (page: Page) => void;
+	initRouter: () => void;
+	toggleDocsSidebar: () => void;
+	setActiveDoc: (section: string, item: string) => void;
+}
+
+export const { useStore } = createStore<AppState, AppMethods>(
+	{
+		theme: "light",
+		currentPage: "home",
+		docsSidebarOpen: false,
+		activeSection: "getting-started",
+		activeItem: "what-is-nucleus",
+	},
+	{
+		toggleTheme: (store) => () => {
+			const newTheme = store.theme === "light" ? "dark" : "light";
+			store.theme = newTheme;
+			localStorage.setItem("theme", newTheme);
+			document.documentElement.setAttribute("data-theme", newTheme);
+		},
+		initTheme: (store) => () => {
+			const saved = localStorage.getItem("theme") as Theme | null;
+			const prefersDark = window.matchMedia(
+				"(prefers-color-scheme: dark)",
+			).matches;
+			const theme = saved || (prefersDark ? "dark" : "light");
+			store.theme = theme;
+			document.documentElement.setAttribute("data-theme", theme);
+		},
+		navigate: (store) => (page: Page) => {
+			store.currentPage = page;
+			const url = page === "home" ? "/" : `/${page}`;
+			window.history.pushState({}, "", url);
+			window.scrollTo(0, 0);
+		},
+		initRouter: (store) => () => {
+			const path = window.location.pathname;
+			if (path === "/docs" || path.startsWith("/docs")) {
+				store.currentPage = "docs";
+			} else {
+				store.currentPage = "home";
+			}
+			window.addEventListener("popstate", () => {
+				const p = window.location.pathname;
+				store.currentPage =
+					p === "/docs" || p.startsWith("/docs") ? "docs" : "home";
+			});
+		},
+		toggleDocsSidebar: (store) => () => {
+			store.docsSidebarOpen = !store.docsSidebarOpen;
+		},
+		setActiveDoc: (store) => (section: string, item: string) => {
+			store.activeSection = section;
+			store.activeItem = item;
+			store.docsSidebarOpen = false;
+		},
+	},
+	{
+		enabled: true,
+		key: "nucleus-app",
+	},
+);