@ocelescope/core 0.0.0 → 0.0.1

package/dist/index.css

@@ -1 +1,2 @@
 ._0yGNhG_wrapper{width:100%;margin-bottom:30px;position:relative}._0yGNhG_dropzone{color:var(--mantine-color-bright);border-width:1px;padding-bottom:50px}._0yGNhG_icon{color:light-dark(var(--mantine-color-gray-4),var(--mantine-color-white))}._0yGNhG_control{width:250px;position:absolute;bottom:-20px;left:calc(50% - 125px)}._0yGNhG_description{text-align:center;font-size:var(--mantine-font-size-sm);color:var(--mantine-color-dimmed);margin-top:var(--mantine-spacing-xs)}
+._4Ar51a_navbar{background-color:var(--mantine-color-white);border-right:1px solid var(--mantine-color-gray-3);flex-direction:column;width:300px;display:flex}[data-mantine-color-scheme=dark] ._4Ar51a_navbar{background-color:var(--mantine-color-dark-6);border-right-color:var(--mantine-color-dark-4)}._4Ar51a_header{padding:var(--mantine-spacing-md);margin-left:calc(var(--mantine-spacing-md) * -1);margin-right:calc(var(--mantine-spacing-md) * -1);color:var(--mantine-color-black);border-bottom:1px solid var(--mantine-color-gray-3);padding-top:0}[data-mantine-color-scheme=dark] ._4Ar51a_header{color:var(--mantine-color-white);border-bottom-color:var(--mantine-color-dark-4)}._4Ar51a_links{margin-left:calc(var(--mantine-spacing-md) * -1);margin-right:calc(var(--mantine-spacing-md) * -1);flex:1}._4Ar51a_footer{margin-left:calc(var(--mantine-spacing-md) * -1);margin-right:calc(var(--mantine-spacing-md) * -1);border-top:1px solid var(--mantine-color-gray-3)}[data-mantine-color-scheme=dark] ._4Ar51a_footer{border-top-color:var(--mantine-color-dark-4)}._4Ar51a_control{width:100%;padding:var(--mantine-spacing-xs) var(--mantine-spacing-md);color:var(--mantine-color-text);font-weight:500;font-size:var(--mantine-font-size-sm);display:block}._4Ar51a_control:hover{background-color:var(--mantine-color-gray-0);color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] ._4Ar51a_control:hover{background-color:var(--mantine-color-dark-7);color:var(--mantine-color-dark-0)}._4Ar51a_link{padding:var(--mantine-spacing-xs) var(--mantine-spacing-md);padding-left:var(--mantine-spacing-md);margin-left:var(--mantine-spacing-xl);font-weight:500;font-size:var(--mantine-font-size-sm);color:var(--mantine-color-gray-7);border-left:1px solid var(--mantine-color-gray-3);text-decoration:none;display:block}[data-mantine-color-scheme=dark] ._4Ar51a_link{color:var(--mantine-color-dark-0);border-left-color:var(--mantine-color-dark-4)}._4Ar51a_link:hover{background-color:var(--mantine-color-gray-0);color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] ._4Ar51a_link:hover{background-color:var(--mantine-color-dark-7);color:var(--mantine-color-dark-0)}._4Ar51a_chevron{transition:transform .2s}._4Ar51a_button{font-size:var(--mantine-font-size-sm);color:var(--mantine-color-gray-7);padding:var(--mantine-spacing-xs) var(--mantine-spacing-sm);border-radius:var(--mantine-radius-sm);font-weight:500;text-decoration:none}[data-mantine-color-scheme=dark] ._4Ar51a_button{color:var(--mantine-color-dark-1)}._4Ar51a_button:hover{background-color:var(--mantine-color-gray-0);color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] ._4Ar51a_button:hover{background-color:var(--mantine-color-dark-6);color:var(--mantine-color-white)}._4Ar51a_button:hover ._4Ar51a_linkIcon{color:var(--mantine-color-black)}[data-mantine-color-scheme=dark] ._4Ar51a_button:hover ._4Ar51a_linkIcon{color:var(--mantine-color-white)}._4Ar51a_button[data-active],._4Ar51a_button[data-active]:hover{background-color:var(--mantine-color-blue-light);color:var(--mantine-color-blue-light-color)}._4Ar51a_button[data-active] ._4Ar51a_linkIcon,._4Ar51a_button[data-active]:hover ._4Ar51a_linkIcon{color:var(--mantine-color-blue-light-color)}._4Ar51a_buttonIcon{color:var(--mantine-color-gray-6);width:25px;height:25px}[data-mantine-color-scheme=dark] ._4Ar51a_buttonIcon{color:var(--mantine-color-dark-2)}

package/dist/index.d.ts

@@ -3,12 +3,6 @@ import { SVGProps } from "react";
 import * as next0 from "next";
 import { GetStaticPaths, GetStaticProps } from "next";
 
-//#region src/components/OcelescopeApp.d.ts
-declare const OcelescopeApp: React.FC<any>;
-//#endregion
-//#region src/components/OcelescopeDocument.d.ts
-declare const OcelescopeDocument: React.FC;
-//#endregion
 //#region src/lib/config.d.ts
 type Author = {
   name: string;
@@ -32,6 +26,8 @@ type OcelescopeConfig = {
   homePage?: React.FC;
   modules?: readonly ModuleDefinition[];
 };
+declare const defineModule: (def: ModuleDefinition) => ModuleDefinition;
+declare const defineModuleRoute: (def: ModuleRouteDefinition) => ModuleRouteDefinition;
 //#endregion
 //#region src/components/ModulePage.d.ts
 type ModulePageProps = {
@@ -48,4 +44,32 @@ declare const createModulesPage: (config: OcelescopeConfig) => {
   };
 };
 //#endregion
-export { ModuleDefinition, ModuleRouteDefinition, OcelescopeApp, OcelescopeConfig, OcelescopeDocument, createModulesPage };
+//#region src/components/OcelescopeApp.d.ts
+declare const OcelescopeApp: (config: OcelescopeConfig) => React.FC<any>;
+//#endregion
+//#region src/components/OcelescopeDocument.d.ts
+declare const OcelescopeDocument: React.FC;
+//#endregion
+//#region src/hooks/useCurrentOCEL.d.ts
+declare const useCurrentOcel: () => {
+  id: string | null;
+  setCurrentOcel: (id: string) => void;
+};
+//#endregion
+//#region src/lib/getModuleRoute.d.ts
+declare const getModuleRoute: ({
+  moduleName,
+  routeName,
+  query
+}: {
+  moduleName: string;
+  routeName: string;
+  query?: Record<string, string>;
+}) => {
+  query?: {
+    [x: string]: string;
+  };
+  pathname: string;
+};
+//#endregion
+export { ModuleDefinition, ModuleRouteDefinition, OcelescopeApp, OcelescopeConfig, OcelescopeDocument, createModulesPage, defineModule, defineModuleRoute, getModuleRoute, useCurrentOcel };

package/dist/index.js

@@ -1,25 +1,48 @@
-import { ActionIcon, AppShell, Badge, Burger, Button, ColorSchemeScript, Container, Group, LoadingOverlay, MantineProvider, Menu, MenuItem, Modal, Select, Stack, Text, TextInput, ThemeIcon, Title, mantineHtmlProps, useMantineTheme } from "@mantine/core";
-import { HydrationBoundary, QueryClient, QueryClientProvider, useQueryClient } from "@tanstack/react-query";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useDisclosure } from "@mantine/hooks";
-import { CheckIcon, ContainerIcon, DownloadIcon, EllipsisVerticalIcon, EyeIcon, PencilIcon, TrashIcon, Upload, UploadIcon, X, XIcon } from "lucide-react";
+import { ActionIcon, AppShell, Badge, Box, Burger, Button, ColorSchemeScript, Container, Divider, Group, LoadingOverlay, MantineProvider, Menu, MenuItem, Modal, NavLink, Select, Stack, Text, TextInput, ThemeIcon, Title, mantineHtmlProps, useMantineTheme } from "@mantine/core";
+import { generateColor } from "@marko19907/string-to-color";
+import { useDeleteOcel, useDeleteResource, useGetDefaultOcel, useGetOcels, useGetResourceMeta, useImportDefaultOcel, useRenameOcel, useRenameResource, useResources, useUpload } from "@ocelescope/api-base";
+import { ResourceModal } from "@ocelescope/resources";
+import { CheckIcon, ContainerIcon, DownloadIcon, EllipsisVerticalIcon, EyeIcon, HomeIcon, PackageIcon, PencilIcon, TrashIcon, Upload, UploadIcon, X, XIcon } from "lucide-react";
 import { DataTable } from "mantine-datatable";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { env, useSessionStore } from "@ocelescope/api-client";
+import { parse } from "content-disposition-attachment";
+import { saveAs } from "file-saver";
+import { HydrationBoundary, QueryClient, QueryClientProvider, useQueryClient } from "@tanstack/react-query";
+import dayjs from "dayjs";
+import isBetween from "dayjs/plugin/isBetween";
 import { Dropzone } from "@mantine/dropzone";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useDeleteOcel, useDeleteResource, useGetDefaultOcel, useGetOcels, useGetResourceMeta, useImportDefaultOcel, useRenameOcel, useRenameResource, useResources, useUpload } from "@ocelescope/api-base";
-import { env, useSessionStore } from "@ocelescope/api-client";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { useDisclosure } from "@mantine/hooks";
 import { create } from "zustand";
 import { persist } from "zustand/middleware";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import Link from "next/link";
+import { useRouter } from "next/router";
 import { Head, Html, Main, NextScript } from "next/document";
-import { ResourceModal } from "@ocelescope/resources";
-import { saveAs } from "file-saver";
-import { parse } from "content-disposition-attachment";
-import dayjs from "dayjs";
-import isBetween from "dayjs/plugin/isBetween";
-import { generateColor } from "@marko19907/string-to-color";
 
 import './index.css';
+//#region src/hooks/useDownload.ts
+const useDownloadFile = () => {
+	const { sessionId } = useSessionStore();
+	const downloadFile = async (path) => {
+		try {
+			const response = await fetch(`${env.backend_url}${path}`, {
+				method: "GET",
+				headers: { [env.session_id]: sessionId ?? "" }
+			});
+			if (!response.ok) throw new Error("Failed to download file");
+			const blob = await response.blob();
+			const contentDisposition = parse(response.headers.get("Content-Disposition") ?? "");
+			saveAs(blob, contentDisposition.attachment ? contentDisposition.filename : "fileName");
+		} catch (err) {
+			console.error("Download error:", err);
+		}
+	};
+	return downloadFile;
+};
+
+//#endregion
 //#region src/hooks/useInvalidate.ts
 const useInvalidate = () => {
 	const queryClient = useQueryClient();
@@ -27,21 +50,27 @@ const useInvalidate = () => {
 };
 var useInvalidate_default = useInvalidate;
 
+//#endregion
+//#region src/lib/dayjs.ts
+dayjs.extend(isBetween);
+var dayjs_default = dayjs;
+const formatDateTime = (dateString) => dayjs(dateString).format("YYYY-MM-DD HH:mm");
+
 //#endregion
 //#region src/components/Dropzone/Dropzone.module.css?css_module
-const classes = {
-	"control": "_0yGNhG_control",
+const classes$1 = {
 	"icon": "_0yGNhG_icon",
-	"description": "_0yGNhG_description",
 	"wrapper": "_0yGNhG_wrapper",
-	"dropzone": "_0yGNhG_dropzone"
+	"dropzone": "_0yGNhG_dropzone",
+	"control": "_0yGNhG_control",
+	"description": "_0yGNhG_description"
 };
-var Dropzone_module_default = classes;
-const _control0 = classes["control"];
-const _icon0 = classes["icon"];
-const _description0 = classes["description"];
-const _wrapper0 = classes["wrapper"];
-const _dropzone0 = classes["dropzone"];
+var Dropzone_module_default = classes$1;
+const _icon0 = classes$1["icon"];
+const _wrapper0 = classes$1["wrapper"];
+const _dropzone0 = classes$1["dropzone"];
+const _control0$1 = classes$1["control"];
+const _description0 = classes$1["description"];
 
 //#endregion
 //#region src/components/Dropzone/Dropzone.tsx
@@ -190,180 +219,6 @@ const UploadSection = ({ onSuccess }) => {
 };
 var UploadSection_default = UploadSection;
 
-//#endregion
-//#region src/components/UploadModal/UploadModal.tsx
-const UploadModal = ({ visible, onClose }) => {
-	return /* @__PURE__ */ jsx(Modal, {
-		title: /* @__PURE__ */ jsx(Text, {
-			size: "h3",
-			children: "Upload"
-		}),
-		opened: visible,
-		onClose,
-		size: "xl",
-		children: /* @__PURE__ */ jsx(UploadSection_default, { onSuccess: onClose })
-	});
-};
-var UploadModal_default = UploadModal;
-
-//#endregion
-//#region src/store/currentOcelStore.ts
-const useCurrentOcelStore = create()(persist((set) => ({
-	ocelId: null,
-	setOcel: (id) => set({ ocelId: id }),
-	clearOcel: () => set({ ocelId: null })
-}), { name: env.current_ocel_id }));
-var currentOcelStore_default = useCurrentOcelStore;
-
-//#endregion
-//#region src/hooks/useCurrentOCEL.ts
-const useCurrentOcel = () => {
-	const { data: ocels = [] } = useGetOcels();
-	const { ocelId, setOcel, clearOcel } = currentOcelStore_default();
-	useEffect(() => {
-		if (ocelId && !ocels?.some(({ id }) => id === ocelId)) clearOcel();
-		if (!ocelId && ocels[0]) setOcel(ocels[0].id);
-	}, [
-		clearOcel,
-		setOcel,
-		ocels,
-		ocelId
-	]);
-	return {
-		id: ocelId,
-		setCurrentOcel: setOcel
-	};
-};
-var useCurrentOCEL_default = useCurrentOcel;
-
-//#endregion
-//#region src/components/OcelSelect/OcelSelect.tsx
-const OcelSelect = ({ extension, ...props }) => {
-	const { data } = useGetOcels(extension ? { extension_name: extension } : {});
-	const ocels = useMemo(() => data ?? [], [data]);
-	return /* @__PURE__ */ jsx(Select, {
-		...props,
-		data: ocels.map(({ name, id }) => ({
-			value: id,
-			label: name
-		}))
-	});
-};
-const CurrentOcelSelect = () => {
-	const { id, setCurrentOcel } = useCurrentOCEL_default();
-	return /* @__PURE__ */ jsx(OcelSelect, {
-		value: id,
-		unselectable: "off",
-		onChange: (id$1) => {
-			if (id$1) setCurrentOcel(id$1);
-		}
-	});
-};
-
-//#endregion
-//#region src/components/AppShell/AppShell.tsx
-const AppShell$1 = ({ children }) => {
-	const [mobileOpened, { toggle: toggleMobile }] = useDisclosure(true);
-	const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
-	const [isUploadModalVisible, setIsUploadModalVisible] = useState(false);
-	return /* @__PURE__ */ jsxs(AppShell, {
-		header: { height: 60 },
-		navbar: {
-			width: 300,
-			breakpoint: "sm",
-			collapsed: {
-				mobile: !mobileOpened,
-				desktop: !desktopOpened
-			}
-		},
-		padding: "md",
-		children: [
-			/* @__PURE__ */ jsx(AppShell.Header, { children: /* @__PURE__ */ jsxs(Group, {
-				h: "100%",
-				px: "md",
-				justify: "space-between",
-				children: [/* @__PURE__ */ jsxs(Group, {
-					align: "center",
-					children: [/* @__PURE__ */ jsx(Burger, {
-						opened: mobileOpened,
-						onClick: toggleMobile,
-						hiddenFrom: "sm",
-						size: "sm"
-					}), /* @__PURE__ */ jsx(Burger, {
-						opened: desktopOpened,
-						onClick: toggleDesktop,
-						visibleFrom: "sm",
-						size: "sm"
-					})]
-				}), /* @__PURE__ */ jsxs(Group, { children: [
-					/* @__PURE__ */ jsx(CurrentOcelSelect, {}),
-					/* @__PURE__ */ jsx(Button, {
-						leftSection: /* @__PURE__ */ jsx(UploadIcon, { size: 18 }),
-						onClick: () => setIsUploadModalVisible(true),
-						children: "Upload"
-					}),
-					/* @__PURE__ */ jsx(UploadModal_default, {
-						visible: isUploadModalVisible,
-						onClose: () => setIsUploadModalVisible(false)
-					})
-				] })]
-			}) }),
-			/* @__PURE__ */ jsx(AppShell.Navbar, {}),
-			/* @__PURE__ */ jsx(AppShell.Main, { children })
-		]
-	});
-};
-
-//#endregion
-//#region src/components/OcelescopeApp.tsx
-const OcelescopeApp = ({ Component, pageProps }) => {
-	const [client] = useState(() => new QueryClient());
-	return /* @__PURE__ */ jsxs(QueryClientProvider, {
-		client,
-		children: [/* @__PURE__ */ jsx(HydrationBoundary, {
-			state: pageProps.dehydratedState,
-			children: /* @__PURE__ */ jsx(MantineProvider, { children: /* @__PURE__ */ jsx(AppShell$1, { children: /* @__PURE__ */ jsx(Component, {}) }) })
-		}), /* @__PURE__ */ jsx(ReactQueryDevtools, {})]
-	});
-};
-
-//#endregion
-//#region src/components/OcelescopeDocument.tsx
-const OcelescopeDocument = () => {
-	return /* @__PURE__ */ jsxs(Html, {
-		lang: "en",
-		...mantineHtmlProps,
-		children: [/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx(ColorSchemeScript, { defaultColorScheme: "auto" }) }), /* @__PURE__ */ jsxs("body", { children: [/* @__PURE__ */ jsx(Main, {}), /* @__PURE__ */ jsx(NextScript, {})] })]
-	});
-};
-
-//#endregion
-//#region src/hooks/useDownload.ts
-const useDownloadFile = () => {
-	const { sessionId } = useSessionStore();
-	const downloadFile = async (path) => {
-		try {
-			const response = await fetch(`${env.backend_url}${path}`, {
-				method: "GET",
-				headers: { [env.session_id]: sessionId ?? "" }
-			});
-			if (!response.ok) throw new Error("Failed to download file");
-			const blob = await response.blob();
-			const contentDisposition = parse(response.headers.get("Content-Disposition") ?? "");
-			saveAs(blob, contentDisposition.attachment ? contentDisposition.filename : "fileName");
-		} catch (err) {
-			console.error("Download error:", err);
-		}
-	};
-	return downloadFile;
-};
-
-//#endregion
-//#region src/lib/dayjs.ts
-dayjs.extend(isBetween);
-var dayjs_default = dayjs;
-const formatDateTime = (dateString) => dayjs(dateString).format("YYYY-MM-DD HH:mm");
-
 //#endregion
 //#region src/components/EntityTable/EntityTable.tsx
 const ocelExtenisions = [
@@ -582,7 +437,7 @@ const createModulesPage = (config) => {
 		};
 	};
 	const getStaticProps = async ({ params }) => {
-		const slugs = params?.slug ?? [];
+		const slugs = params?.["slug"] ?? [];
 		const moduleConfig = modules.find(({ name }) => name === slugs[1]);
 		const routeName = moduleConfig?.routes.find(({ name }) => name === slugs[2])?.name;
 		return moduleConfig && routeName ? { props: { moduleProps: {
@@ -602,4 +457,283 @@ const createModulesPage = (config) => {
 };
 
 //#endregion
-export { OcelescopeApp, OcelescopeDocument, createModulesPage };
+//#region src/store/currentOcelStore.ts
+const useCurrentOcelStore = create()(persist((set) => ({
+	ocelId: null,
+	setOcel: (id) => set({ ocelId: id }),
+	clearOcel: () => set({ ocelId: null })
+}), { name: env.current_ocel_id }));
+var currentOcelStore_default = useCurrentOcelStore;
+
+//#endregion
+//#region src/hooks/useCurrentOCEL.ts
+const useCurrentOcel = () => {
+	const { data: ocels = [] } = useGetOcels();
+	const { ocelId, setOcel, clearOcel } = currentOcelStore_default();
+	useEffect(() => {
+		if (ocelId && !ocels?.some(({ id }) => id === ocelId)) clearOcel();
+		if (!ocelId && ocels[0]) setOcel(ocels[0].id);
+	}, [
+		clearOcel,
+		setOcel,
+		ocels,
+		ocelId
+	]);
+	return {
+		id: ocelId,
+		setCurrentOcel: setOcel
+	};
+};
+
+//#endregion
+//#region src/components/OcelSelect/OcelSelect.tsx
+const OcelSelect = ({ extension, ...props }) => {
+	const { data } = useGetOcels(extension ? { extension_name: extension } : {});
+	const ocels = useMemo(() => data ?? [], [data]);
+	return /* @__PURE__ */ jsx(Select, {
+		...props,
+		data: ocels.map(({ name, id }) => ({
+			value: id,
+			label: name
+		}))
+	});
+};
+const CurrentOcelSelect = () => {
+	const { id, setCurrentOcel } = useCurrentOcel();
+	return /* @__PURE__ */ jsx(OcelSelect, {
+		value: id,
+		unselectable: "off",
+		onChange: (id$1) => {
+			if (id$1) setCurrentOcel(id$1);
+		}
+	});
+};
+
+//#endregion
+//#region src/components/UploadModal/UploadModal.tsx
+const UploadModal = ({ visible, onClose }) => {
+	return /* @__PURE__ */ jsx(Modal, {
+		title: /* @__PURE__ */ jsx(Text, {
+			size: "h3",
+			children: "Upload"
+		}),
+		opened: visible,
+		onClose,
+		size: "xl",
+		children: /* @__PURE__ */ jsx(UploadSection_default, { onSuccess: onClose })
+	});
+};
+var UploadModal_default = UploadModal;
+
+//#endregion
+//#region src/components/AppShell/AppShell.module.css?css_module
+const classes = {
+	"chevron": "_4Ar51a_chevron",
+	"linkIcon": "_4Ar51a_linkIcon",
+	"links": "_4Ar51a_links",
+	"navbar": "_4Ar51a_navbar",
+	"buttonIcon": "_4Ar51a_buttonIcon",
+	"link": "_4Ar51a_link",
+	"control": "_4Ar51a_control",
+	"header": "_4Ar51a_header",
+	"footer": "_4Ar51a_footer",
+	"button": "_4Ar51a_button"
+};
+var AppShell_module_default = classes;
+const _chevron0 = classes["chevron"];
+const _linkIcon0 = classes["linkIcon"];
+const _links0 = classes["links"];
+const _navbar0 = classes["navbar"];
+const _buttonIcon0 = classes["buttonIcon"];
+const _link0 = classes["link"];
+const _control0 = classes["control"];
+const _header0 = classes["header"];
+const _footer0 = classes["footer"];
+const _button0 = classes["button"];
+
+//#endregion
+//#region src/lib/getModuleRoute.ts
+const getModuleRoute = ({ moduleName, routeName, query }) => {
+	return {
+		pathname: `/modules/${moduleName}/${routeName}`,
+		...query && { query: { ...query } }
+	};
+};
+
+//#endregion
+//#region src/hooks/useModulePath.ts
+const useModulePath = (config) => {
+	const { slug } = useRouter().query;
+	const [moduleName, routeName] = [slug?.[0], slug?.[1]];
+	return useMemo(() => {
+		const moduleConfig = config?.modules?.find(({ name }) => name === moduleName);
+		const routeConfig = moduleConfig?.routes.find(({ name }) => name === routeName);
+		return {
+			moduleName: moduleConfig?.name,
+			routeName: routeConfig?.name
+		};
+	}, [moduleName, routeName]);
+};
+var useModulePath_default = useModulePath;
+
+//#endregion
+//#region src/components/AppShell/components/Header.tsx
+const NavBar = ({ config }) => {
+	const { modules = [] } = config;
+	const router = useRouter();
+	const modulePath = useModulePath_default(config);
+	const { data: ocels } = useGetOcels();
+	const isOcelAvailable = ocels?.length !== 0;
+	return /* @__PURE__ */ jsx(AppShell.Navbar, {
+		className: AppShell_module_default["navbar"] ?? "",
+		children: /* @__PURE__ */ jsxs(Stack, {
+			justify: "space-between",
+			h: "100%",
+			gap: 0,
+			children: [/* @__PURE__ */ jsxs(Stack, {
+				gap: 0,
+				flex: 1,
+				children: [
+					/* @__PURE__ */ jsx(NavLink, {
+						component: Link,
+						href: "/",
+						label: "Home",
+						leftSection: /* @__PURE__ */ jsx(HomeIcon, { size: 16 }),
+						active: router.asPath === "/"
+					}),
+					/* @__PURE__ */ jsx(Divider, {}),
+					modules.map(({ label, name, icon: Icon = PackageIcon, routes }) => {
+						const isModuleDisabled = !Object.values(routes).some(({ requiresOcel }) => !requiresOcel) && !isOcelAvailable;
+						return /* @__PURE__ */ jsx(NavLink, {
+							leftSection: /* @__PURE__ */ jsx(Icon, {
+								width: 18,
+								height: 18,
+								size: 18
+							}),
+							label,
+							defaultOpened: name === modulePath?.moduleName,
+							component: Link,
+							href: getModuleRoute({
+								moduleName: name,
+								routeName: routes[0]?.name ?? ""
+							}),
+							disabled: isModuleDisabled,
+							...isModuleDisabled ? { opened: false } : {},
+							active: Object.keys(routes).length === 1 && name === modulePath?.moduleName,
+							children: Object.keys(routes).length > 1 && Object.values(routes).map(({ label: routeLabel, name: routeName, requiresOcel }) => /* @__PURE__ */ jsx(NavLink, {
+								label: routeLabel,
+								href: getModuleRoute({
+									moduleName: name,
+									routeName
+								}),
+								disabled: !!requiresOcel && !isOcelAvailable,
+								component: Link,
+								active: name === modulePath?.moduleName && routeName === modulePath.moduleName
+							}, routeName))
+						}, name);
+					})
+				]
+			}), /* @__PURE__ */ jsx(Divider, {})]
+		})
+	});
+};
+var Header_default = NavBar;
+
+//#endregion
+//#region src/components/AppShell/AppShell.tsx
+const AppShell$1 = ({ config, children }) => {
+	const [mobileOpened, { toggle: toggleMobile }] = useDisclosure(true);
+	const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
+	const [isUploadModalVisible, setIsUploadModalVisible] = useState(false);
+	return /* @__PURE__ */ jsxs(AppShell, {
+		header: { height: 60 },
+		navbar: {
+			width: 300,
+			breakpoint: "sm",
+			collapsed: {
+				mobile: !mobileOpened,
+				desktop: !desktopOpened
+			}
+		},
+		padding: "md",
+		children: [
+			/* @__PURE__ */ jsx(AppShell.Header, { children: /* @__PURE__ */ jsxs(Group, {
+				h: "100%",
+				px: "md",
+				justify: "space-between",
+				children: [/* @__PURE__ */ jsxs(Group, {
+					align: "center",
+					children: [/* @__PURE__ */ jsx(Burger, {
+						opened: mobileOpened,
+						onClick: toggleMobile,
+						hiddenFrom: "sm",
+						size: "sm"
+					}), /* @__PURE__ */ jsx(Burger, {
+						opened: desktopOpened,
+						onClick: toggleDesktop,
+						visibleFrom: "sm",
+						size: "sm"
+					})]
+				}), /* @__PURE__ */ jsxs(Group, { children: [
+					/* @__PURE__ */ jsx(CurrentOcelSelect, {}),
+					/* @__PURE__ */ jsx(Button, {
+						leftSection: /* @__PURE__ */ jsx(UploadIcon, { size: 18 }),
+						onClick: () => setIsUploadModalVisible(true),
+						children: "Upload"
+					}),
+					/* @__PURE__ */ jsx(UploadModal_default, {
+						visible: isUploadModalVisible,
+						onClose: () => setIsUploadModalVisible(false)
+					})
+				] })]
+			}) }),
+			/* @__PURE__ */ jsx(Header_default, { config }),
+			/* @__PURE__ */ jsx(AppShell.Main, {
+				style: { overflow: "hidden" },
+				h: "calc(100dvh - var(--app-shell-header-offset, 0rem) - var(--app-shell-footer-height, 0px) + var(--app-shell-padding, 0))",
+				children: /* @__PURE__ */ jsx(Box, {
+					h: "100%",
+					style: {
+						overflow: "scroll",
+						position: "relative"
+					},
+					children
+				})
+			})
+		]
+	});
+};
+
+//#endregion
+//#region src/components/OcelescopeApp.tsx
+const OcelescopeApp = (config) => ({ Component, pageProps }) => {
+	const [client] = useState(() => new QueryClient());
+	return /* @__PURE__ */ jsxs(QueryClientProvider, {
+		client,
+		children: [/* @__PURE__ */ jsx(HydrationBoundary, {
+			state: pageProps.dehydratedState,
+			children: /* @__PURE__ */ jsx(MantineProvider, { children: /* @__PURE__ */ jsx(AppShell$1, {
+				config,
+				children: /* @__PURE__ */ jsx(Component, { ...pageProps })
+			}) })
+		}), /* @__PURE__ */ jsx(ReactQueryDevtools, {})]
+	});
+};
+
+//#endregion
+//#region src/components/OcelescopeDocument.tsx
+const OcelescopeDocument = () => {
+	return /* @__PURE__ */ jsxs(Html, {
+		lang: "en",
+		...mantineHtmlProps,
+		children: [/* @__PURE__ */ jsx(Head, { children: /* @__PURE__ */ jsx(ColorSchemeScript, { defaultColorScheme: "auto" }) }), /* @__PURE__ */ jsxs("body", { children: [/* @__PURE__ */ jsx(Main, {}), /* @__PURE__ */ jsx(NextScript, {})] })]
+	});
+};
+
+//#endregion
+//#region src/lib/config.ts
+const defineModule = (def) => def;
+const defineModuleRoute = (def) => def;
+
+//#endregion
+export { OcelescopeApp, OcelescopeDocument, createModulesPage, defineModule, defineModuleRoute, getModuleRoute, useCurrentOcel };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ocelescope/core",
   "type": "module",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Core React component and style library for Ocelescope (Mantine + React Query).",
   "author": "Görkem-Emre Öztürk <goerkem.oeztuerk@rwth-aachen.de>",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@mantine/core": "^8.3.14",
     "@mantine/dropzone": "^8.3.14",
     "@mantine/hooks": "^8.3.14",
-    "@tanstack/react-query": "^5.90.20",
+    "@tanstack/react-query": "^5.90.21",
     "@tanstack/react-query-devtools": "^5.91.3",
     "content-disposition-attachment": "^0.3.1",
     "clsx": "^2.1.1",
@@ -46,8 +46,8 @@
     "@marko19907/string-to-color": "^1.0.2",
     "dayjs": "^1.11.19",
     "@ocelescope/api-base": "0.0.0",
-    "@ocelescope/api-client": "0.0.0",
-    "@ocelescope/resources": "0.0.0"
+    "@ocelescope/resources": "0.0.0",
+    "@ocelescope/api-client": "0.0.0"
   },
   "devDependencies": {
     "@tsconfig/strictest": "^2.0.8",