@ocelescope/core 0.0.0

package/README.md

@@ -0,0 +1,29 @@
+# react-components-starter
+
+A starter for creating a React component library.
+
+## Development
+
+- Install dependencies:
+
+```bash
+npm install
+```
+
+- Run the playground:
+
+```bash
+npm run play
+```
+
+- Run the unit tests:
+
+```bash
+npm run test
+```
+
+- Build the library:
+
+```bash
+npm run build
+```

package/dist/index.css

@@ -0,0 +1 @@
+._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)}

package/dist/index.d.ts

@@ -0,0 +1,51 @@
+import * as react0 from "react";
+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;
+  link?: string;
+};
+type ModuleDefinition = {
+  name: string;
+  label: string;
+  authors: Author[];
+  description: string;
+  routes: ModuleRouteDefinition[];
+  icon?: React.ComponentType<SVGProps<SVGSVGElement>>;
+};
+type ModuleRouteDefinition = {
+  name: string;
+  label: string;
+  requiresOcel?: boolean;
+  component: React.ComponentType;
+};
+type OcelescopeConfig = {
+  homePage?: React.FC;
+  modules?: readonly ModuleDefinition[];
+};
+//#endregion
+//#region src/components/ModulePage.d.ts
+type ModulePageProps = {
+  moduleProps?: {
+    moduleName: string;
+    routeName: string;
+  };
+};
+declare const createModulesPage: (config: OcelescopeConfig) => {
+  getStaticPaths: GetStaticPaths;
+  getStaticProps: GetStaticProps<ModulePageProps>;
+  ModulePage: react0.FunctionComponent<ModulePageProps> & {
+    getInitialProps?(context: next0.NextPageContext): ModulePageProps | Promise<ModulePageProps>;
+  };
+};
+//#endregion
+export { ModuleDefinition, ModuleRouteDefinition, OcelescopeApp, OcelescopeConfig, OcelescopeDocument, createModulesPage };

package/dist/index.js

@@ -0,0 +1,605 @@
+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 { DataTable } from "mantine-datatable";
+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 { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+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/useInvalidate.ts
+const useInvalidate = () => {
+	const queryClient = useQueryClient();
+	return async (routeNames) => await queryClient.invalidateQueries({ predicate: (query) => typeof query.queryKey[0] === "string" && routeNames.some((route) => query.queryKey[0].includes(`/${route}`)) });
+};
+var useInvalidate_default = useInvalidate;
+
+//#endregion
+//#region src/components/Dropzone/Dropzone.module.css?css_module
+const classes = {
+	"control": "_0yGNhG_control",
+	"icon": "_0yGNhG_icon",
+	"description": "_0yGNhG_description",
+	"wrapper": "_0yGNhG_wrapper",
+	"dropzone": "_0yGNhG_dropzone"
+};
+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"];
+
+//#endregion
+//#region src/components/Dropzone/Dropzone.tsx
+const FileDropzone = ({ onUpload, accept, content }) => {
+	const theme = useMantineTheme();
+	const openRef = useRef(null);
+	return /* @__PURE__ */ jsxs("div", {
+		className: Dropzone_module_default.wrapper,
+		children: [/* @__PURE__ */ jsx(Dropzone, {
+			openRef,
+			onDrop: onUpload,
+			className: Dropzone_module_default.dropzone,
+			radius: "md",
+			accept: accept ?? {},
+			children: /* @__PURE__ */ jsxs("div", {
+				style: { pointerEvents: "none" },
+				children: [
+					/* @__PURE__ */ jsxs(Group, {
+						justify: "center",
+						children: [
+							/* @__PURE__ */ jsx(Dropzone.Accept, { children: /* @__PURE__ */ jsx(DownloadIcon, {
+								size: 50,
+								color: theme.colors.blue[6]
+							}) }),
+							/* @__PURE__ */ jsx(Dropzone.Reject, { children: /* @__PURE__ */ jsx(X, {
+								size: 50,
+								color: theme.colors.red[6]
+							}) }),
+							/* @__PURE__ */ jsx(Dropzone.Idle, { children: /* @__PURE__ */ jsx(Upload, {
+								size: 50,
+								className: Dropzone_module_default.icon
+							}) })
+						]
+					}),
+					/* @__PURE__ */ jsxs(Text, {
+						ta: "center",
+						fw: 700,
+						fz: "lg",
+						mt: "xl",
+						children: [
+							content.accept && /* @__PURE__ */ jsx(Dropzone.Accept, { children: content.accept }),
+							content.reject && /* @__PURE__ */ jsx(Dropzone.Reject, { children: content.reject }),
+							content.idle && /* @__PURE__ */ jsx(Dropzone.Idle, { children: content.idle })
+						]
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						className: Dropzone_module_default.description,
+						children: content.description || /* @__PURE__ */ jsx("span", { children: "Drag'n'drop files here to upload." })
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsx(Button, {
+			className: Dropzone_module_default.control,
+			size: "sm",
+			radius: "xl",
+			onClick: () => openRef.current?.(),
+			children: "Select files"
+		})]
+	});
+};
+var Dropzone_default = FileDropzone;
+
+//#endregion
+//#region src/components/UploadSection/UploadSection.tsx
+const DefaultOcels = ({ onSuccess, setIsPending }) => {
+	const { data: ocels = [] } = useGetDefaultOcel({});
+	const invalidate = useInvalidate_default();
+	const { mutate: uploadDefault } = useImportDefaultOcel({ mutation: {
+		onSuccess: async () => {
+			await invalidate(["ocels"]);
+			onSuccess();
+		},
+		onMutate: () => setIsPending(true),
+		onSettled: () => setIsPending(false)
+	} });
+	return /* @__PURE__ */ jsx(DataTable, {
+		noHeader: true,
+		records: ocels,
+		idAccessor: "key",
+		highlightOnHover: true,
+		withRowBorders: false,
+		onRowClick: ({ record }) => {
+			uploadDefault({ params: { ...record } });
+		},
+		columns: [
+			{
+				accessor: "",
+				render: () => /* @__PURE__ */ jsx(ThemeIcon, {
+					variant: "transparent",
+					children: /* @__PURE__ */ jsx(ContainerIcon, {})
+				})
+			},
+			{ accessor: "name" },
+			{
+				accessor: "version",
+				textAlign: "right",
+				render: ({ version }) => `v${version}`
+			}
+		]
+	});
+};
+const FileUploadZone = ({ onSuccess, setIsPending }) => {
+	const { mutate: upload } = useUpload({ mutation: {
+		onSuccess,
+		onMutate: () => setIsPending(true),
+		onSettled: () => setIsPending(false)
+	} });
+	return /* @__PURE__ */ jsx(Dropzone_default, {
+		content: { description: /* @__PURE__ */ jsx("span", { children: `Drag'n'drop your ${[
+			"OCELs",
+			"Plugins",
+			"Resources"
+		].join(", ")} here to upload.` }) },
+		onUpload: async (files) => {
+			upload({ data: { files } });
+		}
+	});
+};
+const UploadSection = ({ onSuccess }) => {
+	const [isPending, setIsPending] = useState(false);
+	const onUploadSuccess = useCallback(() => {
+		setIsPending(false);
+		onSuccess?.();
+	}, [onSuccess]);
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: "xs",
+		pos: "relative",
+		children: [
+			/* @__PURE__ */ jsx(LoadingOverlay, {
+				visible: isPending,
+				overlayProps: {
+					radius: "sm",
+					blur: 2
+				}
+			}),
+			/* @__PURE__ */ jsx(FileUploadZone, {
+				onSuccess: onUploadSuccess,
+				setIsPending
+			}),
+			/* @__PURE__ */ jsx(DefaultOcels, {
+				onSuccess: onUploadSuccess,
+				setIsPending
+			})
+		]
+	});
+};
+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 = [
+	".sqlite",
+	".xmlocel",
+	".jsonocel"
+];
+const EntityTable = () => {
+	const { data: ocels = [] } = useGetOcels();
+	const { data: resources = [] } = useResources();
+	const invalidate = useInvalidate_default();
+	const downloadFile = useDownloadFile();
+	const { data: resourceMeta = {} } = useGetResourceMeta();
+	const { mutate: deleteResource } = useDeleteResource({ mutation: { onSuccess: () => invalidate(["resources"]) } });
+	const { mutate: deleteOcel } = useDeleteOcel({ mutation: { onSuccess: () => invalidate(["ocels"]) } });
+	const { mutate: renameOcel } = useRenameOcel({ mutation: { onSuccess: () => invalidate(["ocels"]) } });
+	const { mutate: renameResource } = useRenameResource({ mutation: { onSuccess: () => invalidate(["resources"]) } });
+	const deleteEntity = useCallback((id, entityType) => {
+		switch (entityType) {
+			case "ocel":
+				deleteOcel({ params: { ocel_id: id } });
+				break;
+			case "resource":
+				deleteResource({ resourceId: id });
+				break;
+		}
+	}, [deleteResource, deleteOcel]);
+	const renameEntitiy = useCallback((id, entityType, newName) => {
+		switch (entityType) {
+			case "ocel":
+				renameOcel({ params: {
+					ocel_id: id,
+					new_name: newName
+				} });
+				break;
+			case "resource": renameResource({
+				resourceId: id,
+				params: { new_name: newName }
+			});
+		}
+	}, [renameOcel, renameResource]);
+	const [renamedEntitiy, setRenamedEntitiy] = useState(void 0);
+	const [viewedResouce, setViewedResource] = useState();
+	const entities = useMemo(() => {
+		const ocelEntities = ocels.map(({ name, created_at, id, extensions }) => ({
+			id,
+			name,
+			type: "ocel",
+			entityTypes: extensions.map(({ label }) => label),
+			createdAt: formatDateTime(created_at),
+			downloadFormats: [
+				".xml",
+				".json",
+				".sqlite"
+			]
+		}));
+		const resourceEntities = resources.map(({ id, name, type, created_at }) => ({
+			id,
+			name,
+			entityTypes: [resourceMeta[type]?.label ?? type],
+			type: "resource",
+			createdAt: formatDateTime(dayjs_default(created_at).toISOString())
+		}));
+		return [...ocelEntities, ...resourceEntities];
+	}, [
+		ocels,
+		resources,
+		resourceMeta
+	]);
+	return /* @__PURE__ */ jsxs(Fragment, { children: [viewedResouce && /* @__PURE__ */ jsx(ResourceModal, {
+		id: viewedResouce,
+		onClose: () => setViewedResource(void 0)
+	}), entities.length ? /* @__PURE__ */ jsx(DataTable, {
+		withTableBorder: true,
+		borderRadius: "md",
+		idAccessor: "id",
+		columns: [
+			{
+				accessor: "name",
+				render: ({ id, type, name }) => /* @__PURE__ */ jsx(Fragment, { children: renamedEntitiy?.id === id ? /* @__PURE__ */ jsxs(Group, { children: [/* @__PURE__ */ jsx(TextInput, {
+					variant: "unstyled",
+					value: renamedEntitiy.value,
+					style: { borderBottom: "1px solid #9ca3af" },
+					onChange: (e) => {
+						setRenamedEntitiy({
+							id,
+							value: e.target.value
+						});
+					}
+				}), /* @__PURE__ */ jsxs(Group, {
+					gap: "xs",
+					children: [/* @__PURE__ */ jsx(ActionIcon, {
+						color: "green",
+						m: 0,
+						onClick: () => {
+							renameEntitiy(id, type, renamedEntitiy.value);
+							setRenamedEntitiy(void 0);
+						},
+						children: /* @__PURE__ */ jsx(CheckIcon, { size: 16 })
+					}), /* @__PURE__ */ jsx(ActionIcon, {
+						color: "red",
+						m: 0,
+						onClick: () => {
+							setRenamedEntitiy(void 0);
+						},
+						children: /* @__PURE__ */ jsx(XIcon, { size: 16 })
+					})]
+				})] }) : name })
+			},
+			{ accessor: "createdAt" },
+			{
+				accessor: "entityTypes",
+				title: "Type",
+				render: ({ type, entityTypes }) => /* @__PURE__ */ jsx(Group, {
+					gap: "xs",
+					children: [...type === "ocel" ? ["OCEL"] : [], ...entityTypes].map((entityType) => /* @__PURE__ */ jsx(Badge, {
+						color: generateColor(entityType),
+						children: entityType
+					}, entityType))
+				})
+			},
+			{
+				accessor: "",
+				textAlign: "right",
+				width: "0%",
+				render: ({ type, id, name }) => /* @__PURE__ */ jsxs(Menu, {
+					width: 200,
+					position: "left-start",
+					children: [/* @__PURE__ */ jsx(Menu.Target, { children: /* @__PURE__ */ jsx(ActionIcon, {
+						variant: "subtle",
+						onClick: (e) => e.stopPropagation(),
+						children: /* @__PURE__ */ jsx(EllipsisVerticalIcon, { size: 20 })
+					}) }), /* @__PURE__ */ jsxs(Menu.Dropdown, {
+						onClick: (e) => e.stopPropagation(),
+						children: [
+							/* @__PURE__ */ jsx(Menu.Item, {
+								leftSection: /* @__PURE__ */ jsx(PencilIcon, { size: 16 }),
+								onClick: () => setRenamedEntitiy({
+									id,
+									value: name
+								}),
+								children: "Rename"
+							}),
+							type === "resource" && /* @__PURE__ */ jsx(MenuItem, {
+								leftSection: /* @__PURE__ */ jsx(EyeIcon, { size: 16 }),
+								onClick: () => setViewedResource(id),
+								children: "Inspect"
+							}),
+							type === "ocel" ? /* @__PURE__ */ jsxs(Menu.Sub, {
+								position: "right-start",
+								children: [/* @__PURE__ */ jsx(Menu.Sub.Target, { children: /* @__PURE__ */ jsx(Menu.Sub.Item, {
+									leftSection: /* @__PURE__ */ jsx(DownloadIcon, { size: 16 }),
+									children: "Download"
+								}) }), /* @__PURE__ */ jsx(Menu.Sub.Dropdown, { children: ocelExtenisions.map((extension) => /* @__PURE__ */ jsx(Menu.Item, {
+									onClick: () => downloadFile(`/ocels/download?${new URLSearchParams({
+										ocel_id: id,
+										ext: extension
+									}).toString()}`),
+									children: extension
+								}, extension)) })]
+							}) : /* @__PURE__ */ jsx(Menu.Item, {
+								onClick: () => downloadFile(`/resources/resource/${id}/download`),
+								leftSection: /* @__PURE__ */ jsx(DownloadIcon, { size: 16 }),
+								children: "Download"
+							}),
+							/* @__PURE__ */ jsx(Menu.Divider, {}),
+							/* @__PURE__ */ jsx(Menu.Item, {
+								leftSection: /* @__PURE__ */ jsx(TrashIcon, {
+									size: 16,
+									color: "red"
+								}),
+								color: "red",
+								fw: "bold",
+								onClick: () => deleteEntity(id, type),
+								children: "Delete"
+							})
+						]
+					})]
+				})
+			}
+		],
+		records: entities
+	}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Title, {
+		size: "h3",
+		children: "Upload"
+	}), /* @__PURE__ */ jsx(UploadSection_default, {})] })] });
+};
+var EntityTable_default = EntityTable;
+
+//#endregion
+//#region src/components/DefaultHomePage/DefaultHomePage.tsx
+const DefaultHomePage = ({ children }) => {
+	return /* @__PURE__ */ jsx(Container, {
+		h: "100%",
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: "sm",
+			h: "100%",
+			children: [/* @__PURE__ */ jsx(EntityTable_default, {}), children]
+		})
+	});
+};
+var DefaultHomePage_default = DefaultHomePage;
+
+//#endregion
+//#region src/components/ModulePage.tsx
+const createModulesPage = (config) => {
+	const { modules = [], homePage: HomePage = DefaultHomePage_default } = config;
+	const getStaticPaths = async () => {
+		return {
+			paths: [...modules.flatMap(({ name: moduleName, routes }) => routes.map(({ name: routeName }) => ({ params: { slug: [
+				"modules",
+				moduleName,
+				routeName
+			] } }))), { params: { slug: [] } }],
+			fallback: false
+		};
+	};
+	const getStaticProps = async ({ params }) => {
+		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: {
+			moduleName: moduleConfig.name,
+			routeName
+		} } } : { props: {} };
+	};
+	const ModulePage = ({ moduleProps }) => {
+		const RouteComponent = modules.find(({ name }) => name === moduleProps?.moduleName)?.routes.find(({ name }) => name === moduleProps?.routeName)?.component;
+		return RouteComponent ? /* @__PURE__ */ jsx(RouteComponent, {}) : /* @__PURE__ */ jsx(HomePage, {});
+	};
+	return {
+		getStaticPaths,
+		getStaticProps,
+		ModulePage
+	};
+};
+
+//#endregion
+export { OcelescopeApp, OcelescopeDocument, createModulesPage };

package/dist/styles/styles.d.ts

@@ -0,0 +1,3 @@
+import "@mantine/core/styles.css";
+import "mantine-datatable/styles.css";
+import "@mantine/dropzone/styles.css";

package/dist/styles/styles.js

@@ -0,0 +1,4 @@
+import './index.css';
+import "@mantine/core/styles.css";
+import "mantine-datatable/styles.css";
+import "@mantine/dropzone/styles.css";

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@ocelescope/core",
+  "type": "module",
+  "version": "0.0.0",
+  "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",
+  "homepage": "https://www.ocelescope.org",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/promi4s/ocelescope.git"
+  },
+  "bugs": {
+    "url": "https://github.com/promi4s/ocelescope/issues"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json",
+    "./styles": "./dist/styles/styles.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "@mantine/core": "^8.3.14",
+    "@mantine/dropzone": "^8.3.14",
+    "@mantine/hooks": "^8.3.14",
+    "@tanstack/react-query": "^5.90.20",
+    "@tanstack/react-query-devtools": "^5.91.3",
+    "content-disposition-attachment": "^0.3.1",
+    "clsx": "^2.1.1",
+    "file-saver": "^2.0.5",
+    "lucide-react": "^0.563.0",
+    "mantine-datatable": "^8.3.13",
+    "next": "^16.1.6",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "zod": "^4.3.6",
+    "zustand": "^5.0.11",
+    "@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"
+  },
+  "devDependencies": {
+    "@tsconfig/strictest": "^2.0.8",
+    "@types/css-modules": "^1.0.5",
+    "@types/file-saver": "^2.0.7",
+    "@types/node": "^25.0.3",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "bumpp": "^10.3.2",
+    "tsdown": "^0.18.1",
+    "typescript": "^5.9.3"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "dev": "tsdown --watch ./src"
+  }
+}