From 1a98913639a251260be17cb7a20f4a75e0ebd31c Mon Sep 17 00:00:00 2001
From: oliviareichl <122532494+oliviareichl@users.noreply.github.com>
Date: Wed, 25 Sep 2024 12:52:12 +0200
Subject: [PATCH] Feat/detail view (#8)

implement a first version of the detail view, which displays all data of
the work + implement an sheet overlay for places with a map display.
---
 components/map-sidebar.vue                   |  49 ++
 components/map.client.vue                    | 107 ++++
 components/map.context.ts                    |   7 +
 components/search-data-table/data-table.vue  |  99 +++-
 components/ui/accordion/AccordionContent.vue |   2 +-
 components/ui/accordion/AccordionTrigger.vue |   4 +-
 components/ui/sheet/Sheet.vue                |  19 +
 components/ui/sheet/SheetClose.vue           |  11 +
 components/ui/sheet/SheetContent.vue         |  70 +++
 components/ui/sheet/SheetDescription.vue     |  23 +
 components/ui/sheet/SheetFooter.vue          |  13 +
 components/ui/sheet/SheetHeader.vue          |  13 +
 components/ui/sheet/SheetTitle.vue           |  23 +
 components/ui/sheet/SheetTrigger.vue         |  11 +
 components/ui/sheet/index.ts                 |  31 +
 components/ui/tooltip/Tooltip.vue            |  19 +
 components/ui/tooltip/TooltipContent.vue     |  49 ++
 components/ui/tooltip/TooltipProvider.vue    |  11 +
 components/ui/tooltip/TooltipTrigger.vue     |  11 +
 components/ui/tooltip/index.ts               |   4 +
 composables/use-get-work.ts                  |  16 +
 config/map.config.ts                         |   6 +
 package.json                                 |   1 +
 pages/work/[id].vue                          | 577 +++++++++++++++++++
 pnpm-lock.yaml                               | 436 +++++++++++++-
 scripts/generate-api-client.ts               |   2 +-
 types/api.ts                                 |   1 +
 utils/get-work-icon.ts                       |  75 +++
 28 files changed, 1657 insertions(+), 33 deletions(-)
 create mode 100644 components/map-sidebar.vue
 create mode 100644 components/map.client.vue
 create mode 100644 components/map.context.ts
 create mode 100644 components/ui/sheet/Sheet.vue
 create mode 100644 components/ui/sheet/SheetClose.vue
 create mode 100644 components/ui/sheet/SheetContent.vue
 create mode 100644 components/ui/sheet/SheetDescription.vue
 create mode 100644 components/ui/sheet/SheetFooter.vue
 create mode 100644 components/ui/sheet/SheetHeader.vue
 create mode 100644 components/ui/sheet/SheetTitle.vue
 create mode 100644 components/ui/sheet/SheetTrigger.vue
 create mode 100644 components/ui/sheet/index.ts
 create mode 100644 components/ui/tooltip/Tooltip.vue
 create mode 100644 components/ui/tooltip/TooltipContent.vue
 create mode 100644 components/ui/tooltip/TooltipProvider.vue
 create mode 100644 components/ui/tooltip/TooltipTrigger.vue
 create mode 100644 components/ui/tooltip/index.ts
 create mode 100644 composables/use-get-work.ts
 create mode 100644 config/map.config.ts
 create mode 100644 pages/work/[id].vue
 create mode 100644 utils/get-work-icon.ts

diff --git a/components/map-sidebar.vue b/components/map-sidebar.vue
new file mode 100644
index 0000000..b10388c
--- /dev/null
+++ b/components/map-sidebar.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+import { EyeIcon, MapPinIcon } from "lucide-vue-next";
+
+const router = useRouter();
+
+const props = defineProps<{
+	place: {
+		id: number | undefined;
+		name: string | undefined;
+		longitude: number | null | undefined;
+		latitude: number | null | undefined;
+		description: string | undefined;
+	};
+	relation: string;
+}>();
+
+function setPlaceQuery(id: number | undefined) {
+	if (id != null) {
+		void router.push({
+			query: { place: id },
+		});
+	}
+}
+</script>
+
+<template>
+	<Sheet>
+		<SheetTrigger as-child @click="setPlaceQuery(props.place.id)">
+			<EyeIcon :size="16" class="text-frisch-orange" />
+		</SheetTrigger>
+		<SheetContent>
+			<div class="flex items-center gap-1 text-sm">
+				<MapPinIcon :size="16" />
+				{{ props.relation }}
+			</div>
+			<SheetTitle class="pb-2">{{ props.place.name }}</SheetTitle>
+			<SheetDescription>
+				<div v-if="props.place.longitude != null && props.place.latitude != null">
+					<Map :longitude="props.place.longitude" :latitude="props.place.latitude" />
+				</div>
+				<div class="py-2 text-base font-semibold text-black">Beschreibung</div>
+				<div v-if="props.place.description !== ''">
+					{{ props.place.description }}
+				</div>
+				<div v-else>Keine Beschreibung vorhanden.</div>
+			</SheetDescription>
+		</SheetContent>
+	</Sheet>
+</template>
diff --git a/components/map.client.vue b/components/map.client.vue
new file mode 100644
index 0000000..9866b52
--- /dev/null
+++ b/components/map.client.vue
@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+import "maplibre-gl/dist/maplibre-gl.css";
+
+import { assert } from "@acdh-oeaw/lib";
+import { FullscreenControl, Map as GeoMap, NavigationControl, ScaleControl } from "maplibre-gl";
+
+import { type GeoMapContext, geoMapContextKey } from "@/components/map.context";
+
+const props = defineProps<{
+	longitude: number;
+	latitude: number;
+}>();
+
+const elementRef = ref<HTMLElement | null>(null);
+
+const context: GeoMapContext = {
+	map: null,
+};
+
+onMounted(create);
+onScopeDispose(dispose);
+
+async function create() {
+	await nextTick();
+	assert(elementRef.value != null);
+
+	const map = new GeoMap({
+		center: [props.longitude, props.latitude],
+		container: elementRef.value,
+		maxZoom: 24,
+		minZoom: 1,
+		pitch: initialViewState.pitch,
+		style: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json", // style URL,
+		zoom: initialViewState.zoom,
+	});
+
+	context.map = map;
+
+	map.on("load", init);
+}
+
+function init() {
+	assert(context.map != null);
+	const map = context.map;
+
+	//
+
+	const nav = new NavigationControl({});
+	map.addControl(nav, "top-left");
+
+	//
+
+	const fullscreen = new FullscreenControl({});
+	map.addControl(fullscreen, "top-right");
+
+	//
+
+	const scale = new ScaleControl({});
+	map.addControl(scale, "bottom-left");
+
+	//
+	const placeId = "place-data";
+	map.addSource("place-data", {
+		type: "geojson",
+		data: {
+			type: "FeatureCollection",
+			features: [
+				{
+					type: "Feature",
+					properties: {},
+					geometry: {
+						type: "Point",
+						coordinates: [props.longitude, props.latitude],
+					},
+				},
+			],
+		},
+	});
+
+	//
+
+	map.addLayer({
+		id: "points",
+		type: "circle",
+		source: placeId,
+		filter: ["==", "$type", "Point"],
+		paint: {
+			"circle-color": "rgb(236 81 0)",
+			"circle-radius": 6,
+		},
+	});
+}
+
+function dispose() {
+	context.map?.remove();
+}
+
+defineExpose(context);
+provide(geoMapContextKey, context);
+</script>
+
+<template>
+	<div class="relative grid h-80 text-black">
+		<div ref="elementRef" data-geo-map="true" />
+		<slot />
+	</div>
+</template>
diff --git a/components/map.context.ts b/components/map.context.ts
new file mode 100644
index 0000000..c49a7d7
--- /dev/null
+++ b/components/map.context.ts
@@ -0,0 +1,7 @@
+import type { Map as GeoMap } from "maplibre-gl";
+
+export interface GeoMapContext {
+	map: GeoMap | null;
+}
+
+export const geoMapContextKey = Symbol("geo-map-context");
diff --git a/components/search-data-table/data-table.vue b/components/search-data-table/data-table.vue
index 64106fd..3b22895 100644
--- a/components/search-data-table/data-table.vue
+++ b/components/search-data-table/data-table.vue
@@ -1,6 +1,12 @@
 <script lang="ts" setup>
-import { type ColumnDef, FlexRender, getCoreRowModel, useVueTable } from "@tanstack/vue-table";
+import {
+	type ColumnDef as TanStackColumnDef,
+	FlexRender,
+	getCoreRowModel,
+	useVueTable,
+} from "@tanstack/vue-table";
 
+import NavLink from "@/components/nav-link.vue";
 import {
 	Table,
 	TableBody,
@@ -9,6 +15,7 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import type { SearchResults } from "@/types/api.ts";
 
 const props = defineProps<{
@@ -16,22 +23,58 @@ const props = defineProps<{
 	resultsTotal: number;
 }>();
 
-const columns: Array<ColumnDef<SearchResults["results"][number]>> = [
+type CustomColumnDef<T> = TanStackColumnDef<T> & {
+	maxWidth?: boolean;
+};
+
+const columns: Array<CustomColumnDef<SearchResults["results"][number]>> = [
 	{
 		accessorKey: "work_type",
 		header: () => h("div", "Typ"),
 		cell: ({ row }) => {
-			// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-explicit-any
-			const workType = row.getValue("work_type") as Array<any> | undefined;
-			return h("div", {}, workType?.map((type) => type.name).join(", "));
+			const workType = row.getValue("work_type");
+
+			if (!Array.isArray(workType) || workType.length === 0) {
+				return h("span", {}, "");
+			}
+
+			const firstWorkTypeName = workType[0]?.name;
+			const IconComponent = firstWorkTypeName ? getWorkIcon(firstWorkTypeName) : null;
+
+			const tooltipWrapper = h(TooltipProvider, {}, () => [
+				h(Tooltip, {}, () => [
+					h(TooltipTrigger, { class: "cursor-default" }, () => [
+						IconComponent
+							? h(IconComponent, { class: "size-4 shrink-0" })
+							: h("span", {}, workType.map((type) => type.name).join(", ")),
+					]),
+					h(TooltipContent, {}, () => workType.map((type) => type.name).join(", ")),
+				]),
+			]);
+
+			return h("span", {}, [
+				tooltipWrapper,
+				h("div", { class: "sr-only" }, workType.map((type) => type.name).join(", ")),
+			]);
 		},
 	},
 	{
 		accessorKey: "title",
 		header: () => h("div", "Titel"),
 		cell: ({ row }) => {
-			return h("div", row.getValue("title"));
+			return h(
+				NavLink,
+				{
+					class:
+						"underline decoration-dotted transition hover:no-underline focus-visible:no-underline",
+					href: {
+						path: row.original.id ? `/work/${row.original.id as unknown as string}` : "",
+					},
+				},
+				row.getValue("title"),
+			);
 		},
+		maxWidth: true, // Custom property
 	},
 	{
 		accessorKey: "expression_data",
@@ -39,7 +82,7 @@ const columns: Array<ColumnDef<SearchResults["results"][number]>> = [
 		cell: ({ row }) => {
 			// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-explicit-any
 			const edition = row.getValue("expression_data") as Array<any> | undefined;
-			return h("div", {}, edition?.map((type) => type.edition).join(", "));
+			return h("div", {}, edition?.map((type) => type.edition_type).join(", "));
 		},
 	},
 	{
@@ -64,9 +107,19 @@ const columns: Array<ColumnDef<SearchResults["results"][number]>> = [
 		accessorKey: "expression_data",
 		header: () => h("div", "Veröffentlichungsdatum"),
 		cell: ({ row }) => {
-			// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-explicit-any
-			const publicationDate = row.getValue("expression_data") as Array<any> | undefined;
-			return h("div", {}, publicationDate?.map((type) => type.publication_date).join(", "));
+			const publicationData = row.getValue("expression_data");
+
+			const publicationDates = Array.isArray(publicationData)
+				? publicationData
+						.map((type) => {
+							const date = type.publication_date || "";
+							const year = date.split("-")[0] || "";
+							return year;
+						})
+						.join(", ")
+				: "";
+
+			return h("div", {}, publicationDates);
 		},
 	},
 ];
@@ -80,18 +133,31 @@ const table = useVueTable({
 	},
 	getCoreRowModel: getCoreRowModel(),
 });
+
+function getHeaderClass<T>(columnDef?: CustomColumnDef<T>): string {
+	return columnDef?.maxWidth ? "max-w-xl" : "";
+}
+
+function getCellClass<T>(columnDef?: CustomColumnDef<T>): string {
+	return columnDef?.maxWidth ? "max-w-xl" : "";
+}
 </script>
 
 <template>
 	<div>
-		<div class="w-full rounded-md border">
+		<div class="w-full border">
 			<Table>
-				<TableHeader>
+				<TableHeader class="table-fixed">
 					<TableCaption class="sr-only">
 						<span>Suchergebnisse</span>
 					</TableCaption>
 					<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-						<TableHead v-for="header in headerGroup.headers" :key="header.id">
+						<TableHead
+							v-for="header in headerGroup.headers"
+							:key="header.id"
+							:class="getHeaderClass(header.column.columnDef)"
+							class="truncate p-2 text-left"
+						>
 							<FlexRender
 								v-if="!header.isPlaceholder"
 								:render="header.column.columnDef.header"
@@ -107,7 +173,12 @@ const table = useVueTable({
 							:key="row.id"
 							:data-state="row.getIsSelected() ? 'selected' : undefined"
 						>
-							<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
+							<TableCell
+								v-for="cell in row.getVisibleCells()"
+								:key="cell.id"
+								class="truncate p-2"
+								:class="getCellClass(cell.column.columnDef)"
+							>
 								<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
 							</TableCell>
 						</TableRow>
diff --git a/components/ui/accordion/AccordionContent.vue b/components/ui/accordion/AccordionContent.vue
index d12f0a5..2ee1d32 100644
--- a/components/ui/accordion/AccordionContent.vue
+++ b/components/ui/accordion/AccordionContent.vue
@@ -18,7 +18,7 @@ const delegatedProps = computed(() => {
 		v-bind="delegatedProps"
 		class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
 	>
-		<div :class="cn('pt-0', props.class)">
+		<div :class="cn('pb-4 pt-0', props.class)">
 			<slot />
 		</div>
 	</AccordionContent>
diff --git a/components/ui/accordion/AccordionTrigger.vue b/components/ui/accordion/AccordionTrigger.vue
index 1697e75..94908f5 100644
--- a/components/ui/accordion/AccordionTrigger.vue
+++ b/components/ui/accordion/AccordionTrigger.vue
@@ -20,7 +20,7 @@ const delegatedProps = computed(() => {
 			v-bind="delegatedProps"
 			:class="
 				cn(
-					'flex flex-1 items-center pb-2 justify-between text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180',
+					'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
 					props.class,
 				)
 			"
@@ -28,7 +28,7 @@ const delegatedProps = computed(() => {
 			<slot />
 			<slot name="icon">
 				<ChevronDownIcon
-					class="size-4 shrink-0 text-frisch-orange transition-transform duration-200"
+					class="size-4 shrink-0 text-muted-foreground transition-transform duration-200"
 				/>
 			</slot>
 		</AccordionTrigger>
diff --git a/components/ui/sheet/Sheet.vue b/components/ui/sheet/Sheet.vue
new file mode 100644
index 0000000..fc7bc07
--- /dev/null
+++ b/components/ui/sheet/Sheet.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+	DialogRoot,
+	type DialogRootEmits,
+	type DialogRootProps,
+	useForwardPropsEmits,
+} from "radix-vue";
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<DialogRoot v-bind="forwarded">
+		<slot />
+	</DialogRoot>
+</template>
diff --git a/components/ui/sheet/SheetClose.vue b/components/ui/sheet/SheetClose.vue
new file mode 100644
index 0000000..fc11967
--- /dev/null
+++ b/components/ui/sheet/SheetClose.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from "radix-vue";
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+	<DialogClose v-bind="props">
+		<slot />
+	</DialogClose>
+</template>
diff --git a/components/ui/sheet/SheetContent.vue b/components/ui/sheet/SheetContent.vue
new file mode 100644
index 0000000..3e5afaa
--- /dev/null
+++ b/components/ui/sheet/SheetContent.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { Cross2Icon } from "@radix-icons/vue";
+import {
+	DialogClose,
+	DialogContent,
+	type DialogContentEmits,
+	type DialogContentProps,
+	DialogOverlay,
+	DialogPortal,
+	useForwardPropsEmits,
+} from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+import { type SheetVariants, sheetVariants } from ".";
+
+interface SheetContentProps extends DialogContentProps {
+	class?: HTMLAttributes["class"];
+	side?: SheetVariants["side"];
+}
+
+const route = useRoute();
+const router = useRouter();
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = defineProps<SheetContentProps>();
+
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = computed(() => {
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const { class: _, side, ...delegated } = props;
+
+	return delegated;
+});
+
+function closeSidebar() {
+	const query = { place: route.query.place };
+	delete query.place;
+	void router.push({ query });
+}
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<DialogPortal>
+		<DialogOverlay
+			class="fixed inset-0 z-50 bg-frisch-indigo/40 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+			@click="closeSidebar()"
+		/>
+		<DialogContent
+			:class="cn(sheetVariants({ side }), props.class)"
+			v-bind="{ ...forwarded, ...$attrs }"
+		>
+			<slot />
+
+			<DialogClose
+				class="absolute right-4 top-4 opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary"
+				@click="closeSidebar()"
+			>
+				<Cross2Icon class="size-4" />
+			</DialogClose>
+		</DialogContent>
+	</DialogPortal>
+</template>
diff --git a/components/ui/sheet/SheetDescription.vue b/components/ui/sheet/SheetDescription.vue
new file mode 100644
index 0000000..a11c1b6
--- /dev/null
+++ b/components/ui/sheet/SheetDescription.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { DialogDescription, type DialogDescriptionProps } from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+	const { class: _, ...delegated } = props;
+
+	return delegated;
+});
+</script>
+
+<template>
+	<DialogDescription
+		:class="cn('text-sm text-muted-foreground', props.class)"
+		v-bind="delegatedProps"
+	>
+		<slot />
+	</DialogDescription>
+</template>
diff --git a/components/ui/sheet/SheetFooter.vue b/components/ui/sheet/SheetFooter.vue
new file mode 100644
index 0000000..03ab0a9
--- /dev/null
+++ b/components/ui/sheet/SheetFooter.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+	<div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
+		<slot />
+	</div>
+</template>
diff --git a/components/ui/sheet/SheetHeader.vue b/components/ui/sheet/SheetHeader.vue
new file mode 100644
index 0000000..3cd5c7b
--- /dev/null
+++ b/components/ui/sheet/SheetHeader.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>();
+</script>
+
+<template>
+	<div :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)">
+		<slot />
+	</div>
+</template>
diff --git a/components/ui/sheet/SheetTitle.vue b/components/ui/sheet/SheetTitle.vue
new file mode 100644
index 0000000..80a95a7
--- /dev/null
+++ b/components/ui/sheet/SheetTitle.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { DialogTitle, type DialogTitleProps } from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>();
+
+const delegatedProps = computed(() => {
+	const { class: _, ...delegated } = props;
+
+	return delegated;
+});
+</script>
+
+<template>
+	<DialogTitle
+		:class="cn('text-lg font-semibold text-foreground', props.class)"
+		v-bind="delegatedProps"
+	>
+		<slot />
+	</DialogTitle>
+</template>
diff --git a/components/ui/sheet/SheetTrigger.vue b/components/ui/sheet/SheetTrigger.vue
new file mode 100644
index 0000000..10ebdee
--- /dev/null
+++ b/components/ui/sheet/SheetTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from "radix-vue";
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+	<DialogTrigger v-bind="props">
+		<slot />
+	</DialogTrigger>
+</template>
diff --git a/components/ui/sheet/index.ts b/components/ui/sheet/index.ts
new file mode 100644
index 0000000..b4aa224
--- /dev/null
+++ b/components/ui/sheet/index.ts
@@ -0,0 +1,31 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+export { default as Sheet } from "./Sheet.vue";
+export { default as SheetClose } from "./SheetClose.vue";
+export { default as SheetContent } from "./SheetContent.vue";
+export { default as SheetDescription } from "./SheetDescription.vue";
+export { default as SheetFooter } from "./SheetFooter.vue";
+export { default as SheetHeader } from "./SheetHeader.vue";
+export { default as SheetTitle } from "./SheetTitle.vue";
+export { default as SheetTrigger } from "./SheetTrigger.vue";
+
+export const sheetVariants = cva(
+	"fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+	{
+		variants: {
+			side: {
+				top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+				bottom:
+					"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+				left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+				right:
+					"3xl:w-1/6 inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:w-2/3 md:w-1/2 lg:w-1/3 xl:w-1/4 2xl:w-1/5",
+			},
+		},
+		defaultVariants: {
+			side: "right",
+		},
+	},
+);
+
+export type SheetVariants = VariantProps<typeof sheetVariants>;
diff --git a/components/ui/tooltip/Tooltip.vue b/components/ui/tooltip/Tooltip.vue
new file mode 100644
index 0000000..6c3a1bb
--- /dev/null
+++ b/components/ui/tooltip/Tooltip.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+	TooltipRoot,
+	type TooltipRootEmits,
+	type TooltipRootProps,
+	useForwardPropsEmits,
+} from "radix-vue";
+
+const props = defineProps<TooltipRootProps>();
+const emits = defineEmits<TooltipRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<TooltipRoot v-bind="forwarded">
+		<slot />
+	</TooltipRoot>
+</template>
diff --git a/components/ui/tooltip/TooltipContent.vue b/components/ui/tooltip/TooltipContent.vue
new file mode 100644
index 0000000..6cf1e6d
--- /dev/null
+++ b/components/ui/tooltip/TooltipContent.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import {
+	TooltipContent,
+	type TooltipContentEmits,
+	type TooltipContentProps,
+	TooltipPortal,
+	useForwardPropsEmits,
+} from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = withDefaults(
+	defineProps<TooltipContentProps & { class?: HTMLAttributes["class"] }>(),
+	{
+		sideOffset: 4,
+	},
+);
+
+const emits = defineEmits<TooltipContentEmits>();
+
+const delegatedProps = computed(() => {
+	const { class: _, ...delegated } = props;
+
+	return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<TooltipPortal>
+		<TooltipContent
+			v-bind="{ ...forwarded, ...$attrs }"
+			:class="
+				cn(
+					'z-50 overflow-hidden bg-frisch-indigo px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+					props.class,
+				)
+			"
+		>
+			<slot />
+		</TooltipContent>
+	</TooltipPortal>
+</template>
diff --git a/components/ui/tooltip/TooltipProvider.vue b/components/ui/tooltip/TooltipProvider.vue
new file mode 100644
index 0000000..29736e2
--- /dev/null
+++ b/components/ui/tooltip/TooltipProvider.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipProvider, type TooltipProviderProps } from "radix-vue";
+
+const props = defineProps<TooltipProviderProps>();
+</script>
+
+<template>
+	<TooltipProvider v-bind="props">
+		<slot />
+	</TooltipProvider>
+</template>
diff --git a/components/ui/tooltip/TooltipTrigger.vue b/components/ui/tooltip/TooltipTrigger.vue
new file mode 100644
index 0000000..b904b5e
--- /dev/null
+++ b/components/ui/tooltip/TooltipTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { TooltipTrigger, type TooltipTriggerProps } from "radix-vue";
+
+const props = defineProps<TooltipTriggerProps>();
+</script>
+
+<template>
+	<TooltipTrigger v-bind="props">
+		<slot />
+	</TooltipTrigger>
+</template>
diff --git a/components/ui/tooltip/index.ts b/components/ui/tooltip/index.ts
new file mode 100644
index 0000000..0a8a878
--- /dev/null
+++ b/components/ui/tooltip/index.ts
@@ -0,0 +1,4 @@
+export { default as Tooltip } from "./Tooltip.vue";
+export { default as TooltipContent } from "./TooltipContent.vue";
+export { default as TooltipProvider } from "./TooltipProvider.vue";
+export { default as TooltipTrigger } from "./TooltipTrigger.vue";
diff --git a/composables/use-get-work.ts b/composables/use-get-work.ts
new file mode 100644
index 0000000..9495858
--- /dev/null
+++ b/composables/use-get-work.ts
@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/vue-query";
+
+export function useGetWork(id: MaybeRef<number>) {
+	const { $api } = useNuxtApp();
+
+	return useQuery({
+		queryKey: ["entity", id] as const,
+		async queryFn({ queryKey }) {
+			const [, id] = queryKey;
+			const response = await $api.api_work_detail_retrieve({
+				params: { id },
+			});
+			return response;
+		},
+	});
+}
diff --git a/config/map.config.ts b/config/map.config.ts
new file mode 100644
index 0000000..4419148
--- /dev/null
+++ b/config/map.config.ts
@@ -0,0 +1,6 @@
+export const initialViewState = {
+	longitude: 28.97953 /** Istanbul */,
+	latitude: 41.015137 /** Istanbul */,
+	pitch: 60 /** degrees */,
+	zoom: 10,
+};
diff --git a/package.json b/package.json
index 9f8f499..09eef1f 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
 		"cva": "^1.0.0-beta.1",
 		"fast-glob": "^3.3.2",
 		"lucide-vue-next": "^0.424.0",
+		"maplibre-gl": "^4.7.1",
 		"nuxt": "^3.12.4",
 		"pino-http": "^10.2.0",
 		"radix-vue": "^1.9.3",
diff --git a/pages/work/[id].vue b/pages/work/[id].vue
new file mode 100644
index 0000000..0903c37
--- /dev/null
+++ b/pages/work/[id].vue
@@ -0,0 +1,577 @@
+<script lang="ts" setup>
+import { GlobeIcon, UserRoundIcon, UserRoundPenIcon, VenetianMaskIcon } from "lucide-vue-next";
+
+import {
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+
+const route = useRoute();
+
+type Icon = typeof UserRoundIcon;
+
+const characterIcons: Record<string, Icon> = {
+	fiktivefigur: UserRoundPenIcon,
+	historischefigur: UserRoundIcon,
+	mythologischefigur: VenetianMaskIcon,
+};
+
+const id = computed(() => {
+	return Number(route.params.id as string);
+});
+
+const { data, isPending, isPlaceholderData } = useGetWork(
+	computed(() => {
+		return id.value;
+	}),
+);
+
+const work = computed(() => {
+	return data.value;
+});
+
+const isLoading = computed(() => {
+	return isPending.value || isPlaceholderData.value;
+});
+
+const characters = computed(() => {
+	return {
+		main: work.value?.characters
+			?.filter((character) => character.relevancy === "erwähnte Figur")
+			.map((character) => {
+				const fictionality = character.fictionality ? character.fictionality[0] : "";
+				return {
+					name: character.fallback_name,
+					fictionality: fictionality,
+					icon: setCharacterIcon(fictionality ?? ""),
+				};
+			}),
+		secondary: work.value?.characters
+			?.filter((character) => character.relevancy === "erwähnte Figur")
+			.map((character) => {
+				const fictionality = character.fictionality ? character.fictionality[0] : "";
+				return {
+					name: character.fallback_name,
+					fictionality: fictionality,
+					icon: setCharacterIcon(fictionality ?? ""),
+				};
+			}),
+		spokenOf: work.value?.characters
+			?.filter((character) => character.relevancy === "erwähnte Figur")
+			.map((character) => {
+				const fictionality = character.fictionality ? character.fictionality[0] : "";
+				return {
+					name: character.fallback_name,
+					fictionality: fictionality,
+					icon: setCharacterIcon(fictionality ?? ""),
+				};
+			}),
+	};
+});
+
+function setCharacterIcon(fictionality: string): Icon | null {
+	const normalizedFictionality = fictionality
+		.toLowerCase()
+		.replace(/[-\s,]/g, "") // Removes dashes, spaces, and commas
+		.replace(/[^a-zA-Zäöüß]/g, ""); // Removes any non-alphabet characters except for umlauts and ß
+	return characterIcons[normalizedFictionality] ?? null;
+}
+
+const places = computed(() => {
+	return {
+		mentioned: work.value?.places
+			?.filter((place) => place.relation_type === "mentions")
+			.map((place) => ({
+				id: place.id,
+				name: place.name,
+				longitude: place.longitude,
+				latitude: place.latitude,
+				description: place.description,
+			})),
+		discussed: work.value?.places
+			?.filter((place) => place.relation_type === "discusses")
+			.map((place) => ({
+				id: place.id,
+				name: place.name,
+				longitude: place.longitude,
+				latitude: place.latitude,
+				description: place.description,
+			})),
+		takesPlaceIn: work.value?.places
+			?.filter((place) => place.relation_type === "takes place in")
+			.map((place) => ({
+				id: place.id,
+				name: place.name,
+				longitude: place.longitude,
+				latitude: place.latitude,
+				description: place.description,
+			})),
+	};
+});
+
+const relatedWork = computed(() => {
+	return {
+		referencedIn: work.value?.related_works
+			?.filter((relation) => relation.relation_type === "is referenced in")
+			.map((relation) => ({
+				id: relation.id,
+				title: relation.title,
+			})),
+		references: work.value?.related_works
+			?.filter((relation) => relation.relation_type === "references")
+			.map((relation) => ({
+				id: relation.id,
+				title: relation.title,
+			})),
+		discussedIn: work.value?.related_works
+			?.filter((relation) => relation.relation_type === "is discussed in")
+			.map((relation) => ({
+				id: relation.id,
+				title: relation.title,
+			})),
+	};
+});
+
+const analysisTags = computed(() => {
+	return [
+		{ name: "Zeitliche Ordnung", value: work.value?.temporal_order?.[0] },
+		{ name: "Zeitliche Dauer", value: work.value?.temporal_duration?.[0] },
+		{ name: "Zeitliche Häufigkeit", value: work.value?.temporal_frequency?.[0] },
+		{ name: "Stilfigur", value: work.value?.figure_speech?.[0] },
+		{ name: "Fokalisierung", value: work.value?.focalization?.[0] },
+		{ name: "Narrative Situation", value: work.value?.narrative_situation?.[0] },
+		{ name: "Narrative Chronologie", value: work.value?.narrative_chronology?.[0] },
+		{ name: "Narrative Ebene", value: work.value?.narrative_level?.[0] },
+		{ name: "Narrative Stimme", value: work.value?.narrative_voice?.[0] },
+	].filter((item) => item.value !== undefined);
+});
+
+const icon = computed(() => {
+	if (work.value?.work_type?.[0]?.name != null) {
+		return getWorkIcon(work.value.work_type[0]?.name);
+	}
+	return null;
+});
+</script>
+
+<template>
+	<MainContent class="relative grid h-full bg-frisch-marine pr-20">
+		<div v-if="!isLoading" class="grid h-full grid-cols-[auto_1fr]">
+			<div
+				class="size-0 border-y-[85px] border-l-[85px] border-y-transparent border-l-frisch-orange"
+			/>
+			<div class="grid grid-cols-2 gap-8">
+				<div v-if="work != null" class="bg-white p-16">
+					<!-- TODO: maybe display siglum here -->
+					<div v-if="work?.work_type != null" class="flex items-center gap-2 pb-2">
+						<component :is="icon" :size="20" />
+						{{ work?.work_type[0]?.name }}
+					</div>
+					<div class="pb-2">
+						<div class="text-xl font-semibold">
+							{{ work?.title }}
+						</div>
+						<div v-if="work?.subtitle" class="italic">
+							{{ work?.subtitle }}
+						</div>
+					</div>
+					<div v-if="work?.expression_data != null" class="pb-2">
+						<div class="pb-2">
+							<span v-for="(entry, index) in work.expression_data" :key="index">
+								<span>{{ entry?.edition_type?.[0] || "" }}</span>
+								<span v-if="entry.edition_type?.[0]">{{ ", " }}</span>
+								<span>{{ entry?.place_of_publication?.[0]?.name || "" }}</span>
+								<span v-if="entry?.place_of_publication?.[0]?.name">{{ ": " }}</span>
+								{{ entry?.publisher?.name || "" }}
+								<span>{{ entry?.publication_date?.split("-")?.[0] || "" }}</span>
+								<span v-if="entry?.publication_date">.</span>
+								<span v-if="index !== work?.expression_data.length - 1">{{ " | " }}</span>
+							</span>
+						</div>
+
+						<div v-if="work?.expression_data[0]?.language != null" class="flex items-center">
+							<GlobeIcon :size="16" class="mr-2" />
+							<div v-for="(language, index) in work?.expression_data[0]?.language" :key="index">
+								<span>{{ language }}</span>
+								<span v-if="index !== work?.expression_data[0]?.language.length - 1">
+									{{ ", " }}&nbsp;
+								</span>
+							</div>
+						</div>
+					</div>
+					<span v-for="topic in work?.topics" :key="topic.id" class="mb-2 mr-1">
+						<div class="mb-1 inline-block bg-frisch-grey px-2 py-1 text-xs text-white opacity-85">
+							<NuxtLink
+								:href="{
+									path: `/search`,
+									query: {
+										topic: topic.name,
+									},
+								}"
+							>
+								{{ topic.name }}
+							</NuxtLink>
+						</div>
+					</span>
+					<Separator class="my-4 h-[3px] bg-frisch-marine"></Separator>
+					<div class="py-2 text-lg font-semibold">Zusammenfassung</div>
+					<div v-if="work?.summary" class="block hyphens-auto text-justify">
+						{{ work?.summary }}
+					</div>
+					<div v-else class="text-sm text-muted-foreground">Keine Zusammenfassung vorhanden.</div>
+					<Accordion type="single" class="font-normal" collapsible>
+						<AccordionItem value="context">
+							<AccordionTrigger>
+								<div class="text-lg font-semibold">Kontexte</div>
+							</AccordionTrigger>
+							<AccordionContent class="text-base">
+								<div v-if="work?.context || work?.historical_events">
+									<div class="pb-1">
+										{{ work?.context }}
+									</div>
+									<div v-if="work?.historical_events">
+										<span class="font-semibold">Historische Events:&nbsp;</span>
+										<span>{{ work?.historical_events }}</span>
+									</div>
+								</div>
+								<div v-else class="text-sm text-muted-foreground">Keine Kontexte vorhanden.</div>
+							</AccordionContent>
+						</AccordionItem>
+					</Accordion>
+					<div>
+						<Accordion type="single" collapsible>
+							<AccordionItem value="characters">
+								<AccordionTrigger>
+									<div class="text-lg font-semibold">Charaktere</div>
+								</AccordionTrigger>
+								<AccordionContent class="text-base">
+									<div class="grid grid-cols-3 gap-4">
+										<div>
+											<div class="pb-2 font-semibold">Hauptfiguren</div>
+											<div v-if="characters.main != null && characters.main.length > 0">
+												<div v-for="character in characters.main" :key="character.name">
+													<TooltipProvider>
+														<Tooltip>
+															<TooltipTrigger as-child>
+																<component
+																	:is="character.icon"
+																	:size="16"
+																	class="inline text-frisch-orange"
+																/>
+															</TooltipTrigger>
+															<TooltipContent>
+																<p>{{ character.fictionality }}</p>
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+
+													{{ character.name }}
+												</div>
+											</div>
+											<div v-else class="text-sm text-muted-foreground">
+												Keine Hauptfiguren vorhanden.
+											</div>
+										</div>
+										<div>
+											<div class="pb-2 font-semibold">Nebenfiguren</div>
+											<div v-if="characters.secondary != null && characters.secondary.length > 0">
+												<div v-for="character in characters.secondary" :key="character.name">
+													<TooltipProvider>
+														<Tooltip>
+															<TooltipTrigger as-child>
+																<component
+																	:is="character.icon"
+																	:size="16"
+																	class="inline text-frisch-orange"
+																/>
+															</TooltipTrigger>
+															<TooltipContent>
+																<p>{{ character.fictionality }}</p>
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+
+													{{ character.name }}
+												</div>
+											</div>
+											<div v-else class="text-sm text-muted-foreground">
+												Keine Nebenfiguren vorhanden.
+											</div>
+										</div>
+										<div>
+											<div class="pb-2 font-semibold">Erwähnte Figuren</div>
+											<div v-if="characters.spokenOf != null && characters.spokenOf.length > 0">
+												<div v-for="character in characters.spokenOf" :key="character.name">
+													<TooltipProvider>
+														<Tooltip>
+															<TooltipTrigger as-child>
+																<component
+																	:is="character.icon"
+																	:size="16"
+																	class="inline text-frisch-orange"
+																/>
+															</TooltipTrigger>
+															<TooltipContent>
+																<p>{{ character.fictionality }}</p>
+															</TooltipContent>
+														</Tooltip>
+													</TooltipProvider>
+
+													{{ character.name }}
+												</div>
+											</div>
+											<div v-else class="text-sm text-muted-foreground">
+												Keine erwähnten Figuren vorhanden.
+											</div>
+										</div>
+									</div>
+								</AccordionContent>
+							</AccordionItem>
+						</Accordion>
+					</div>
+					<div>
+						<Accordion type="single" collapsible>
+							<AccordionItem value="places">
+								<AccordionTrigger>
+									<div class="text-lg font-semibold">Orte</div>
+								</AccordionTrigger>
+								<AccordionContent class="text-base">
+									<div>
+										<div class="grid grid-cols-3 gap-4">
+											<div>
+												<div class="pb-2 font-semibold">Schauplätze</div>
+												<div v-if="places.takesPlaceIn != null && places.takesPlaceIn.length > 0">
+													<div v-for="place in places.takesPlaceIn" :key="place.id">
+														<span class="grid grid-cols-[auto_1fr] items-center gap-1">
+															<span>{{ place.name }}</span>
+															<span
+																v-if="place.id && place.latitude && place.longitude"
+																class="flex items-center"
+															>
+																<NuxtLink
+																	:href="{
+																		path: `/work/${work.id}`,
+																		query: {
+																			place: place.id,
+																		},
+																	}"
+																>
+																	<span class="sr-only">Ort anzeigen</span>
+																	<MapSidebar :place="place" relation="Schauplatz" />
+																</NuxtLink>
+															</span>
+														</span>
+													</div>
+												</div>
+												<div v-else class="text-sm text-muted-foreground">
+													Keine Schauplätze vorhanden.
+												</div>
+											</div>
+											<div>
+												<div class="pb-2 font-semibold">Beleuchtete Orte</div>
+												<div v-if="places.discussed != null && places.discussed.length > 0">
+													<div v-for="place in places.discussed" :key="place.id">
+														<span class="grid grid-cols-[auto_1fr] items-center gap-1">
+															<span>{{ place.name }}</span>
+															<span
+																v-if="place.id && place.latitude && place.longitude"
+																class="flex items-center"
+															>
+																<NuxtLink
+																	:href="{
+																		path: `/work/${work.id}`,
+																		query: {
+																			place: place.id,
+																		},
+																	}"
+																>
+																	<span class="sr-only">Ort anzeigen</span>
+																	<MapSidebar :place="place" relation="Beleuchteter Ort" />
+																</NuxtLink>
+															</span>
+														</span>
+													</div>
+												</div>
+												<div v-else class="text-sm text-muted-foreground">
+													Keine beleuchteten Orte vorhanden.
+												</div>
+											</div>
+											<div>
+												<div class="pb-2 font-semibold">Erwähnte Orte</div>
+												<div v-if="places.mentioned != null && places.mentioned.length > 0">
+													<div v-for="place in places.mentioned" :key="place.id">
+														<span class="grid grid-cols-[auto_1fr] items-center gap-1">
+															<span>{{ place.name }}</span>
+															<span
+																v-if="place.id && place.latitude && place.longitude"
+																class="flex items-center"
+															>
+																<NuxtLink
+																	:href="{
+																		path: `/work/${work.id}`,
+																		query: {
+																			place: place.id,
+																		},
+																	}"
+																>
+																	<span class="sr-only">Ort anzeigen</span>
+																	<MapSidebar :place="place" relation="Erwähnter Ort" />
+																</NuxtLink>
+															</span>
+														</span>
+													</div>
+												</div>
+												<div v-else class="text-sm text-muted-foreground">
+													Keine erwähnten Orte vorhanden.
+												</div>
+											</div>
+										</div>
+									</div>
+								</AccordionContent>
+							</AccordionItem>
+						</Accordion>
+					</div>
+					<div>
+						<Accordion type="single" collapsible>
+							<AccordionItem value="relations">
+								<AccordionTrigger>
+									<div class="text-lg font-semibold">Bezüge</div>
+								</AccordionTrigger>
+								<AccordionContent class="text-base">
+									<div>
+										<div class="grid grid-cols-3 gap-4">
+											<div>
+												<div class="pb-2 font-semibold">Erwähnte Werke</div>
+												<div v-if="relatedWork.references && relatedWork.references.length > 0">
+													<div v-for="relation in relatedWork.references" :key="relation.id">
+														<NuxtLink
+															class="underline decoration-dotted transition hover:no-underline focus-visible:no-underline"
+															:href="`/work/${relation.id}`"
+														>
+															{{ relation.title }}
+														</NuxtLink>
+													</div>
+												</div>
+												<div v-else class="text-sm text-muted-foreground">
+													Keine Bezüge vorhanden.
+												</div>
+											</div>
+											<div>
+												<div class="pb-2 font-semibold">Wurde erwähnt in</div>
+												<div v-if="relatedWork.referencedIn && relatedWork.referencedIn.length > 0">
+													<div v-for="relation in relatedWork.referencedIn" :key="relation.id">
+														<NuxtLink
+															class="underline decoration-dotted transition hover:no-underline focus-visible:no-underline"
+															:href="`/work/${relation.id}`"
+														>
+															{{ relation.title }}
+														</NuxtLink>
+													</div>
+												</div>
+												<div v-else class="text-sm text-muted-foreground">
+													Keine Bezüge vorhanden.
+												</div>
+											</div>
+											<div>
+												<div class="pb-2 font-semibold">Wurde diskutiert in</div>
+												<div v-if="relatedWork.discussedIn && relatedWork.discussedIn.length > 0">
+													<div v-for="relation in relatedWork.discussedIn" :key="relation.id">
+														<NuxtLink
+															class="underline decoration-dotted transition hover:no-underline focus-visible:no-underline"
+															:href="`/work/${relation.id}`"
+														>
+															{{ relation.title }}
+														</NuxtLink>
+													</div>
+												</div>
+												<div v-else class="text-sm text-muted-foreground">
+													Keine Bezüge vorhanden.
+												</div>
+											</div>
+										</div>
+									</div>
+								</AccordionContent>
+							</AccordionItem>
+						</Accordion>
+					</div>
+					<div>
+						<Accordion type="single" collapsible>
+							<AccordionItem value="relations">
+								<AccordionTrigger>
+									<div class="text-lg font-semibold">Physikalische Objekte</div>
+								</AccordionTrigger>
+								<AccordionContent class="text-base">
+									<div>
+										<div>
+											<div v-if="work?.physical_objects && work?.physical_objects.length > 0">
+												<div class="grid grid-cols-[auto_1fr] gap-10">
+													<div>
+														<div class="pb-2 font-semibold">Archiv</div>
+														<div v-for="thing in work?.physical_objects" :key="thing.id">
+															<div>
+																{{ thing.archive?.name }}
+															</div>
+														</div>
+													</div>
+													<div>
+														<div class="pb-2 font-semibold">Objekt</div>
+														<div v-for="thing in work?.physical_objects" :key="thing.id">
+															<div>{{ thing.name }}</div>
+														</div>
+													</div>
+												</div>
+											</div>
+											<div v-else class="text-sm text-muted-foreground">
+												Keine physikalischen Objekte vorhanden.
+											</div>
+										</div>
+									</div>
+								</AccordionContent>
+							</AccordionItem>
+						</Accordion>
+					</div>
+				</div>
+				<div class="bg-white py-8">
+					<div class="grid grid-cols-[auto_1fr] items-center gap-4">
+						<div
+							class="size-0 border-y-[55px] border-l-[55px] border-y-transparent border-l-frisch-marine"
+						/>
+						<div class="py-2 text-lg font-semibold">Narratologische Analyse</div>
+					</div>
+					<div class="block hyphens-auto px-16 text-justify">
+						<div v-if="work?.text_analysis">
+							{{ work?.text_analysis }}
+						</div>
+						<div v-else class="text-sm text-muted-foreground">
+							Keine narrotologische Analyse vorhanden.
+						</div>
+						<div v-if="analysisTags.length > 0" class="py-4">
+							<span v-for="tag in analysisTags" :key="tag.name" class="mb-2 mr-1">
+								<TooltipProvider>
+									<Tooltip>
+										<TooltipTrigger as-child>
+											<span
+												class="mb-1 inline-block cursor-default bg-frisch-orange px-2 py-1 text-xs text-white opacity-85"
+											>
+												{{ tag.value }}
+											</span>
+										</TooltipTrigger>
+										<TooltipContent>
+											<p>{{ tag.name }}</p>
+										</TooltipContent>
+									</Tooltip>
+								</TooltipProvider>
+							</span>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+		<Centered v-else class="pointer-events-none">
+			<LoadingSpinner />
+		</Centered>
+	</MainContent>
+</template>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bd377d6..882b180 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ importers:
       lucide-vue-next:
         specifier: ^0.424.0
         version: 0.424.0(vue@3.4.36(typescript@5.6.2))
+      maplibre-gl:
+        specifier: ^4.7.1
+        version: 4.7.1
       nuxt:
         specifier: ^3.12.4
         version: 3.12.4(@parcel/watcher@2.4.1)(@types/node@20.14.14)(eslint@8.57.0)(ioredis@5.4.1)(magicast@0.3.4)(optionator@0.9.4)(rollup@4.20.0)(stylelint@16.8.1(typescript@5.6.2))(terser@5.31.4)(typescript@5.6.2)(vite@5.4.0(@types/node@20.14.14)(terser@5.31.4))(vue-tsc@2.0.29(typescript@5.6.2))
@@ -1065,10 +1068,38 @@ packages:
   '@liuli-util/fs-extra@0.1.0':
     resolution: {integrity: sha512-eaAyDyMGT23QuRGbITVY3SOJff3G9ekAAyGqB9joAnTBmqvFN+9a1FazOdO70G6IUqgpKV451eBHYSRcOJ/FNQ==}
 
+  '@mapbox/geojson-rewind@0.5.2':
+    resolution: {integrity: sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==}
+    hasBin: true
+
+  '@mapbox/jsonlint-lines-primitives@2.0.2':
+    resolution: {integrity: sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==}
+    engines: {node: '>= 0.6'}
+
   '@mapbox/node-pre-gyp@1.0.11':
     resolution: {integrity: sha512-Yhlar6v9WQgUp/He7BdgzOz8lqMQ8sU+jkCq7Wx8Myc5YFJLbEe7lgui/V7G1qB1DJykHSGwreceSaD60Y0PUQ==}
     hasBin: true
 
+  '@mapbox/point-geometry@0.1.0':
+    resolution: {integrity: sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==}
+
+  '@mapbox/tiny-sdf@2.0.6':
+    resolution: {integrity: sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA==}
+
+  '@mapbox/unitbezier@0.0.1':
+    resolution: {integrity: sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==}
+
+  '@mapbox/vector-tile@1.3.1':
+    resolution: {integrity: sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==}
+
+  '@mapbox/whoots-js@3.1.0':
+    resolution: {integrity: sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==}
+    engines: {node: '>=6.0.0'}
+
+  '@maplibre/maplibre-gl-style-spec@20.3.1':
+    resolution: {integrity: sha512-5ueL4UDitzVtceQ8J4kY+Px3WK+eZTsmGwha3MBKHKqiHvKrjWWwBCIl1K8BuJSc5OFh83uI8IFNoFvQxX2uUw==}
+    hasBin: true
+
   '@miyaneee/rollup-plugin-json5@1.2.0':
     resolution: {integrity: sha512-JjTIaXZp9WzhUHpElrqPnl1AzBi/rvRs065F71+aTmlqvTMVkdbjZ8vfFl4nRlgJy+TPBw69ZK4pwFdmOAt4aA==}
     peerDependencies:
@@ -1495,6 +1526,12 @@ packages:
   '@types/fs-extra@9.0.13':
     resolution: {integrity: sha512-nEnwB++1u5lVDM2UI4c1+5R+FYaKfaAzS4OococimjVm3nQw3TuzH5UNsocrcTBbhnerblyHj4A49qXbIiZdpA==}
 
+  '@types/geojson-vt@3.2.5':
+    resolution: {integrity: sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==}
+
+  '@types/geojson@7946.0.14':
+    resolution: {integrity: sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==}
+
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
@@ -1507,6 +1544,12 @@ packages:
   '@types/junit-report-builder@3.0.2':
     resolution: {integrity: sha512-R5M+SYhMbwBeQcNXYWNCZkl09vkVfAtcPIaCGdzIkkbeaTrVbGQ7HVgi4s+EmM/M1K4ZuWQH0jGcvMvNePfxYA==}
 
+  '@types/mapbox__point-geometry@0.1.4':
+    resolution: {integrity: sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==}
+
+  '@types/mapbox__vector-tile@1.3.4':
+    resolution: {integrity: sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==}
+
   '@types/mdast@4.0.4':
     resolution: {integrity: sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==}
 
@@ -1516,9 +1559,15 @@ packages:
   '@types/node@20.14.14':
     resolution: {integrity: sha512-d64f00982fS9YoOgJkAMolK7MN8Iq3TDdVjchbYHdEmjth/DHowx82GnoA+tVUAN+7vxfYUgAzi+JXbKNd2SDQ==}
 
+  '@types/pbf@3.0.5':
+    resolution: {integrity: sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==}
+
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
+  '@types/supercluster@7.1.3':
+    resolution: {integrity: sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==}
+
   '@types/unist@2.0.10':
     resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==}
 
@@ -1877,6 +1926,10 @@ packages:
   aria-query@5.3.0:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
 
+  arr-union@3.1.0:
+    resolution: {integrity: sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==}
+    engines: {node: '>=0.10.0'}
+
   array-buffer-byte-length@1.0.1:
     resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==}
     engines: {node: '>= 0.4'}
@@ -1909,6 +1962,10 @@ packages:
     resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
     engines: {node: '>=12'}
 
+  assign-symbols@1.0.0:
+    resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==}
+    engines: {node: '>=0.10.0'}
+
   ast-kit@0.12.2:
     resolution: {integrity: sha512-es1zHFsnZ4Y4efz412nnrU3KvVAhgqy90a7Yt9Wpi5vQ3l4aYMOX0Qx4FD0elKr5ITEhiUGCSFcgGYf4YTuACg==}
     engines: {node: '>=16.14.0'}
@@ -2053,6 +2110,12 @@ packages:
     resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
     engines: {node: '>=18'}
 
+  bytewise-core@1.2.3:
+    resolution: {integrity: sha512-nZD//kc78OOxeYtRlVk8/zXqTB4gf/nlguL1ggWA8FuchMyOxcyHR4QPQZMUmA7czC+YnaBrPUCubqAWe50DaA==}
+
+  bytewise@1.1.0:
+    resolution: {integrity: sha512-rHuuseJ9iQ0na6UDhnrRVDh8YnWVlU6xM3VH6q/+yHDeUH2zIhUzP+2/h3LIrhLDBtTqzWpE3p3tP/boefskKQ==}
+
   c12@1.11.1:
     resolution: {integrity: sha512-KDU0TvSvVdaYcQKQ6iPHATGz/7p/KiVjPg4vQrB6Jg/wX9R0yl5RZxWm9IoZqaIHD2+6PZd81+KMGwRr/lRIUg==}
     peerDependencies:
@@ -2632,6 +2695,9 @@ packages:
   duplexer@0.1.2:
     resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==}
 
+  earcut@3.0.0:
+    resolution: {integrity: sha512-41Fs7Q/PLq1SDbqjsgcY7GA42T0jvaCNGXgGtsNdvg+Yv8eIu06bxv4/PoREkZ9nMDNwnUSG9OFB9+yv8eKhDg==}
+
   eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
 
@@ -2934,6 +3000,14 @@ packages:
     resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
     engines: {node: '>=6'}
 
+  extend-shallow@2.0.1:
+    resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
+    engines: {node: '>=0.10.0'}
+
+  extend-shallow@3.0.2:
+    resolution: {integrity: sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==}
+    engines: {node: '>=0.10.0'}
+
   extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
 
@@ -3088,6 +3162,9 @@ packages:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
 
+  geojson-vt@4.0.2:
+    resolution: {integrity: sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==}
+
   get-caller-file@2.0.5:
     resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==}
     engines: {node: 6.* || 8.* || >= 10.*}
@@ -3121,6 +3198,10 @@ packages:
   get-tsconfig@4.7.6:
     resolution: {integrity: sha512-ZAqrLlu18NbDdRaHq+AKXzAmqIUPswPWKUchfytdAjiRFnCe5ojG2bstg6mRiZabkKfCoL/e98pbBELIV/YCeA==}
 
+  get-value@2.0.6:
+    resolution: {integrity: sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==}
+    engines: {node: '>=0.10.0'}
+
   giget@1.2.3:
     resolution: {integrity: sha512-8EHPljDvs7qKykr6uw8b+lqLiUc/vUg+KVTI0uND4s63TdsZM2Xus3mflvF0DDG9SiM4RlCkFGL+7aAjRmV7KA==}
     hasBin: true
@@ -3141,6 +3222,9 @@ packages:
   github-slugger@2.0.0:
     resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
 
+  gl-matrix@3.4.3:
+    resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==}
+
   glob-parent@5.1.2:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -3174,6 +3258,10 @@ packages:
     resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
     engines: {node: '>=6'}
 
+  global-prefix@4.0.0:
+    resolution: {integrity: sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==}
+    engines: {node: '>=16'}
+
   globals@11.12.0:
     resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==}
     engines: {node: '>=4'}
@@ -3358,6 +3446,10 @@ packages:
     resolution: {integrity: sha512-QQnnxNyfvmHFIsj7gkPcYymR8Jdw/o7mp5ZFihxn6h8Ci6fh3Dx4E1gPjpQEpIuPo9XVNY/ZUwh4BPMjGyL01g==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
 
+  ini@4.1.3:
+    resolution: {integrity: sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==}
+    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
+
   internal-slot@1.0.7:
     resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==}
     engines: {node: '>= 0.4'}
@@ -3441,6 +3533,14 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     hasBin: true
 
+  is-extendable@0.1.1:
+    resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
+    engines: {node: '>=0.10.0'}
+
+  is-extendable@1.0.1:
+    resolution: {integrity: sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==}
+    engines: {node: '>=0.10.0'}
+
   is-extglob@2.1.1:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -3507,6 +3607,10 @@ packages:
     resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
     engines: {node: '>=12'}
 
+  is-plain-object@2.0.4:
+    resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
+    engines: {node: '>=0.10.0'}
+
   is-plain-object@5.0.0:
     resolution: {integrity: sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==}
     engines: {node: '>=0.10.0'}
@@ -3581,8 +3685,17 @@ packages:
   isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
 
-  jackspeak@3.4.3:
-    resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
+  isexe@3.1.1:
+    resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==}
+    engines: {node: '>=16'}
+
+  isobject@3.0.1:
+    resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
+    engines: {node: '>=0.10.0'}
+
+  jackspeak@3.4.0:
+    resolution: {integrity: sha512-JVYhQnN59LVPFCEcVa2C3CrEKYacvjRfqIQl+h8oi91aLYQVWRYbxjPcv1bUiUy/kLmQaANrYfNMCO3kuEDHfw==}
+    engines: {node: '>=14'}
 
   jiti@1.21.6:
     resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==}
@@ -3630,6 +3743,9 @@ packages:
   json-stable-stringify-without-jsonify@1.0.1:
     resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==}
 
+  json-stringify-pretty-compact@4.0.0:
+    resolution: {integrity: sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==}
+
   json5@1.0.2:
     resolution: {integrity: sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==}
     hasBin: true
@@ -3650,6 +3766,9 @@ packages:
     resolution: {integrity: sha512-IMCp5XyDQ4YESDE4Za7im3buM0/7cMnRfe17k2X8B05FnUl9vqnaliX6cgOEmPIeWKfJrEe/gANRq/XgqttCqQ==}
     engines: {node: '>=8'}
 
+  kdbush@4.0.2:
+    resolution: {integrity: sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==}
+
   keyv@4.5.4:
     resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
 
@@ -3789,6 +3908,10 @@ packages:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
 
+  maplibre-gl@4.7.1:
+    resolution: {integrity: sha512-lgL7XpIwsgICiL82ITplfS7IGwrB1OJIw/pCvprDp2dhmSSEBgmPzYRvwYYYvJGJD7fxUv1Tvpih4nZ6VrLuaA==}
+    engines: {node: '>=16.14.0', npm: '>=8.1.0'}
+
   markdown-table@3.0.3:
     resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==}
 
@@ -4054,6 +4177,9 @@ packages:
   muggle-string@0.4.1:
     resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
 
+  murmurhash-js@1.0.0:
+    resolution: {integrity: sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==}
+
   mustache@4.2.0:
     resolution: {integrity: sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==}
     hasBin: true
@@ -4379,6 +4505,10 @@ packages:
     resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
     engines: {node: '>= 14.16'}
 
+  pbf@3.3.0:
+    resolution: {integrity: sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==}
+    hasBin: true
+
   perfect-debounce@1.0.0:
     resolution: {integrity: sha512-xCy9V055GLEqoFaHoC1SoLIaLmWctgCUaBaWxDZ7/Zx4CTyX7cJQLJOok/orfjZAh9kEYpjJa4d0KcJmCbctZA==}
 
@@ -4663,6 +4793,9 @@ packages:
     resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==}
     engines: {node: ^10 || ^12 || >=14}
 
+  potpack@2.0.0:
+    resolution: {integrity: sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw==}
+
   prebuild-install@7.1.2:
     resolution: {integrity: sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==}
     engines: {node: '>=10'}
@@ -4706,6 +4839,9 @@ packages:
   property-information@6.5.0:
     resolution: {integrity: sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==}
 
+  protocol-buffers-schema@3.6.0:
+    resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==}
+
   protocols@2.0.1:
     resolution: {integrity: sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==}
 
@@ -4728,6 +4864,12 @@ packages:
   quick-format-unescaped@4.0.4:
     resolution: {integrity: sha512-tYC1Q1hgyRuHgloV/YXs2w15unPVh8qfu/qCTfhTYamaw7fyhumKa2yGpdSo87vY32rIclj+4fWYQXUMs9EHvg==}
 
+  quickselect@2.0.0:
+    resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
+
+  quickselect@3.0.0:
+    resolution: {integrity: sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==}
+
   radix-vue@1.9.3:
     resolution: {integrity: sha512-9pewcgzghM+B+FO1h9mMsZa/csVH6hElpN1sqmG4/qoeieiDG0i4nhMjS7p2UOz11EEdVm7eLandHSPyx7hYhg==}
     peerDependencies:
@@ -4855,6 +4997,9 @@ packages:
   resolve-pkg-maps@1.0.0:
     resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}
 
+  resolve-protobuf-schema@2.1.0:
+    resolution: {integrity: sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==}
+
   resolve@1.22.8:
     resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==}
     hasBin: true
@@ -4901,6 +5046,9 @@ packages:
   run-parallel@1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
 
+  rw@1.3.3:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+
   safe-array-concat@1.1.2:
     resolution: {integrity: sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==}
     engines: {node: '>=0.4'}
@@ -4969,6 +5117,10 @@ packages:
     resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==}
     engines: {node: '>= 0.4'}
 
+  set-value@2.0.1:
+    resolution: {integrity: sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==}
+    engines: {node: '>=0.10.0'}
+
   setprototypeof@1.2.0:
     resolution: {integrity: sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==}
 
@@ -5080,6 +5232,18 @@ packages:
   sonic-boom@4.0.1:
     resolution: {integrity: sha512-hTSD/6JMLyT4r9zeof6UtuBDpjJ9sO08/nmS5djaA9eozT9oOlNdpXSnzcgj4FTqpk3nkLrs61l4gip9r1HCrQ==}
 
+  sort-asc@0.2.0:
+    resolution: {integrity: sha512-umMGhjPeHAI6YjABoSTrFp2zaBtXBej1a0yKkuMUyjjqu6FJsTF+JYwCswWDg+zJfk/5npWUUbd33HH/WLzpaA==}
+    engines: {node: '>=0.10.0'}
+
+  sort-desc@0.2.0:
+    resolution: {integrity: sha512-NqZqyvL4VPW+RAxxXnB8gvE1kyikh8+pR+T+CXLksVRN9eiQqkQlPwqWYU0mF9Jm7UnctShlxLyAt1CaBOTL1w==}
+    engines: {node: '>=0.10.0'}
+
+  sort-object@3.0.3:
+    resolution: {integrity: sha512-nK7WOY8jik6zaG9CRwZTaD5O7ETWDLZYMM12pqY8htll+7dYeqGfEUPcUBHOpSJg2vJOrvFIY2Dl5cX2ih1hAQ==}
+    engines: {node: '>=0.10.0'}
+
   source-map-js@1.2.0:
     resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==}
     engines: {node: '>=0.10.0'}
@@ -5102,6 +5266,10 @@ packages:
     resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
     engines: {node: '>=0.10.0'}
 
+  split-string@3.1.0:
+    resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==}
+    engines: {node: '>=0.10.0'}
+
   split2@4.2.0:
     resolution: {integrity: sha512-UcjcJOWknrNkF6PLX83qcHM6KHgVKNkV62Y8a5uYDVv9ydGQVwAHMKqHdJje1VTWpljG0WYpCDhrCdAOYH4TWg==}
     engines: {node: '>= 10.x'}
@@ -5244,6 +5412,9 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     hasBin: true
 
+  supercluster@8.0.1:
+    resolution: {integrity: sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==}
+
   superjson@2.2.1:
     resolution: {integrity: sha512-8iGv75BYOa0xRJHK5vRLEjE2H/i4lulTjzpUXic3Eg8akftYjkmQDa8JARQ42rlczXyFR3IeRoeFCc7RxHsYZA==}
     engines: {node: '>=16'}
@@ -5351,10 +5522,13 @@ packages:
   tinybench@2.9.0:
     resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
 
-  tinypool@1.0.0:
-    resolution: {integrity: sha512-KIKExllK7jp3uvrNtvRBYBWBOAXSX8ZvoaD8T+7KB/QHIuoJW3Pmr60zucywjAlMb5TeXUkcs/MWeWLu0qvuAQ==}
+  tinypool@1.0.1:
+    resolution: {integrity: sha512-URZYihUbRPcGv95En+sz6MfghfIc2OJ1sv/RmhWZLouPY0/8Vo80viwPvg3dlaS9fuq7fQMEfgRRK7BBZThBEA==}
     engines: {node: ^18.0.0 || >=20.0.0}
 
+  tinyqueue@3.0.0:
+    resolution: {integrity: sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==}
+
   tinyrainbow@1.2.0:
     resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
     engines: {node: '>=14.0.0'}
@@ -5470,6 +5644,15 @@ packages:
     engines: {node: '>=14.17'}
     hasBin: true
 
+  typewise-core@1.2.0:
+    resolution: {integrity: sha512-2SCC/WLzj2SbUwzFOzqMCkz5amXLlxtJqDKTICqg30x+2DZxcfZN2MvQZmGfXWKNWaKK9pBPsvkcwv8bF/gxKg==}
+
+  typewise@1.0.3:
+    resolution: {integrity: sha512-aXofE06xGhaQSPzt8hlTY+/YWQhm9P0jYUp1f2XtmW/3Bk0qzXcyFWAtPoo2uTGQj1ZwbDuSyuxicq+aDo8lCQ==}
+
+  ufo@1.5.3:
+    resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
+
   ufo@1.5.4:
     resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==}
 
@@ -5520,6 +5703,10 @@ packages:
   unimport@3.10.0:
     resolution: {integrity: sha512-/UvKRfWx3mNDWwWQhR62HsoM3wxHwYdTq8ellZzMOHnnw4Dp8tovgthyW7DjTrbjDL+i4idOp06voz2VKlvrLw==}
 
+  union-value@1.0.1:
+    resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==}
+    engines: {node: '>=0.10.0'}
+
   unist-builder@4.0.0:
     resolution: {integrity: sha512-wmRFnH+BLpZnTKpc5L7O67Kac89s9HMrtELpnNaE6TAobq5DTZZs5YaTQfAZBA9bFPECx2uVAPO31c+GVug8mg==}
 
@@ -5783,6 +5970,9 @@ packages:
   vscode-uri@3.0.8:
     resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
 
+  vt-pbf@3.1.3:
+    resolution: {integrity: sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==}
+
   vue-bundle-renderer@2.1.0:
     resolution: {integrity: sha512-uZ+5ZJdZ/b43gMblWtcpikY6spJd0nERaM/1RtgioXNfWFbjKlUwrS8HlrddN6T2xtptmOouWclxLUkpgcVX3Q==}
 
@@ -5893,6 +6083,11 @@ packages:
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
     hasBin: true
 
+  which@4.0.0:
+    resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==}
+    engines: {node: ^16.13.0 || >=18.0.0}
+    hasBin: true
+
   why-is-node-running@2.3.0:
     resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
     engines: {node: '>=8'}
@@ -6759,6 +6954,13 @@ snapshots:
       '@types/fs-extra': 9.0.13
       fs-extra: 10.1.0
 
+  '@mapbox/geojson-rewind@0.5.2':
+    dependencies:
+      get-stream: 6.0.1
+      minimist: 1.2.8
+
+  '@mapbox/jsonlint-lines-primitives@2.0.2': {}
+
   '@mapbox/node-pre-gyp@1.0.11':
     dependencies:
       detect-libc: 2.0.3
@@ -6774,6 +6976,29 @@ snapshots:
       - encoding
       - supports-color
 
+  '@mapbox/point-geometry@0.1.0': {}
+
+  '@mapbox/tiny-sdf@2.0.6': {}
+
+  '@mapbox/unitbezier@0.0.1': {}
+
+  '@mapbox/vector-tile@1.3.1':
+    dependencies:
+      '@mapbox/point-geometry': 0.1.0
+
+  '@mapbox/whoots-js@3.1.0': {}
+
+  '@maplibre/maplibre-gl-style-spec@20.3.1':
+    dependencies:
+      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/unitbezier': 0.0.1
+      json-stringify-pretty-compact: 4.0.0
+      minimist: 1.2.8
+      quickselect: 2.0.0
+      rw: 1.3.3
+      sort-object: 3.0.3
+      tinyqueue: 3.0.0
+
   '@miyaneee/rollup-plugin-json5@1.2.0(rollup@4.20.0)':
     dependencies:
       '@rollup/pluginutils': 5.1.0(rollup@4.20.0)
@@ -6939,7 +7164,7 @@ snapshots:
       ohash: 1.1.3
       pathe: 1.1.2
       std-env: 3.7.0
-      ufo: 1.5.4
+      ufo: 1.5.3
     optionalDependencies:
       ipx: 2.1.0(ioredis@5.4.1)
     transitivePeerDependencies:
@@ -7120,7 +7345,7 @@ snapshots:
       pathe: 1.1.2
       scule: 1.3.0
       sucrase: 3.35.0
-      ufo: 1.5.4
+      ufo: 1.5.3
       unplugin: 1.12.0
       vue-i18n: 9.13.1(vue@3.4.36(typescript@5.6.2))
       vue-router: 4.4.3(vue@3.4.36(typescript@5.6.2))
@@ -7452,6 +7677,12 @@ snapshots:
     dependencies:
       '@types/node': 20.14.14
 
+  '@types/geojson-vt@3.2.5':
+    dependencies:
+      '@types/geojson': 7946.0.14
+
+  '@types/geojson@7946.0.14': {}
+
   '@types/hast@3.0.4':
     dependencies:
       '@types/unist': 3.0.2
@@ -7464,6 +7695,14 @@ snapshots:
 
   '@types/junit-report-builder@3.0.2': {}
 
+  '@types/mapbox__point-geometry@0.1.4': {}
+
+  '@types/mapbox__vector-tile@1.3.4':
+    dependencies:
+      '@types/geojson': 7946.0.14
+      '@types/mapbox__point-geometry': 0.1.4
+      '@types/pbf': 3.0.5
+
   '@types/mdast@4.0.4':
     dependencies:
       '@types/unist': 3.0.2
@@ -7474,8 +7713,14 @@ snapshots:
     dependencies:
       undici-types: 5.26.5
 
+  '@types/pbf@3.0.5': {}
+
   '@types/resolve@1.20.2': {}
 
+  '@types/supercluster@7.1.3':
+    dependencies:
+      '@types/geojson': 7946.0.14
+
   '@types/unist@2.0.10': {}
 
   '@types/unist@3.0.2': {}
@@ -7993,6 +8238,8 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
+  arr-union@3.1.0: {}
+
   array-buffer-byte-length@1.0.1:
     dependencies:
       call-bind: 1.0.7
@@ -8045,6 +8292,8 @@ snapshots:
 
   assertion-error@2.0.1: {}
 
+  assign-symbols@1.0.0: {}
+
   ast-kit@0.12.2:
     dependencies:
       '@babel/parser': 7.25.3
@@ -8202,6 +8451,15 @@ snapshots:
     dependencies:
       run-applescript: 7.0.0
 
+  bytewise-core@1.2.3:
+    dependencies:
+      typewise-core: 1.2.0
+
+  bytewise@1.1.0:
+    dependencies:
+      bytewise-core: 1.2.3
+      typewise: 1.0.3
+
   c12@1.11.1(magicast@0.3.4):
     dependencies:
       chokidar: 3.6.0
@@ -8733,6 +8991,8 @@ snapshots:
 
   duplexer@0.1.2: {}
 
+  earcut@3.0.0: {}
+
   eastasianwidth@0.2.0: {}
 
   ee-first@1.1.1: {}
@@ -9227,6 +9487,15 @@ snapshots:
   expand-template@2.0.3:
     optional: true
 
+  extend-shallow@2.0.1:
+    dependencies:
+      is-extendable: 0.1.1
+
+  extend-shallow@3.0.2:
+    dependencies:
+      assign-symbols: 1.0.0
+      is-extendable: 1.0.1
+
   extend@3.0.2: {}
 
   externality@1.0.2:
@@ -9375,6 +9644,8 @@ snapshots:
 
   gensync@1.0.0-beta.2: {}
 
+  geojson-vt@4.0.2: {}
+
   get-caller-file@2.0.5: {}
 
   get-east-asian-width@1.2.0: {}
@@ -9405,6 +9676,8 @@ snapshots:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
+  get-value@2.0.6: {}
+
   giget@1.2.3:
     dependencies:
       citty: 0.1.6
@@ -9432,6 +9705,8 @@ snapshots:
 
   github-slugger@2.0.0: {}
 
+  gl-matrix@3.4.3: {}
+
   glob-parent@5.1.2:
     dependencies:
       is-glob: 4.0.3
@@ -9443,7 +9718,7 @@ snapshots:
   glob@10.4.5:
     dependencies:
       foreground-child: 3.2.1
-      jackspeak: 3.4.3
+      jackspeak: 3.4.0
       minimatch: 9.0.5
       minipass: 7.1.2
       package-json-from-dist: 1.0.0
@@ -9480,6 +9755,12 @@ snapshots:
       kind-of: 6.0.3
       which: 1.3.1
 
+  global-prefix@4.0.0:
+    dependencies:
+      ini: 4.1.3
+      kind-of: 6.0.3
+      which: 4.0.0
+
   globals@11.12.0: {}
 
   globals@13.24.0:
@@ -9532,7 +9813,7 @@ snapshots:
       iron-webcrypto: 1.2.1
       ohash: 1.1.3
       radix3: 1.1.2
-      ufo: 1.5.4
+      ufo: 1.5.3
       uncrypto: 0.1.3
       unenv: 1.10.0
     transitivePeerDependencies:
@@ -9705,6 +9986,8 @@ snapshots:
 
   ini@4.1.1: {}
 
+  ini@4.1.3: {}
+
   internal-slot@1.0.7:
     dependencies:
       es-errors: 1.3.0
@@ -9740,7 +10023,7 @@ snapshots:
       pathe: 1.1.2
       sharp: 0.32.6
       svgo: 3.3.2
-      ufo: 1.5.4
+      ufo: 1.5.3
       unstorage: 1.10.2(ioredis@5.4.1)
       xss: 1.0.15
     transitivePeerDependencies:
@@ -9822,6 +10105,12 @@ snapshots:
 
   is-docker@3.0.0: {}
 
+  is-extendable@0.1.1: {}
+
+  is-extendable@1.0.1:
+    dependencies:
+      is-plain-object: 2.0.4
+
   is-extglob@2.1.1: {}
 
   is-fullwidth-code-point@3.0.0: {}
@@ -9867,6 +10156,10 @@ snapshots:
 
   is-plain-obj@4.1.0: {}
 
+  is-plain-object@2.0.4:
+    dependencies:
+      isobject: 3.0.1
+
   is-plain-object@5.0.0: {}
 
   is-reference@1.2.1:
@@ -9930,7 +10223,11 @@ snapshots:
 
   isexe@2.0.0: {}
 
-  jackspeak@3.4.3:
+  isexe@3.1.1: {}
+
+  isobject@3.0.1: {}
+
+  jackspeak@3.4.0:
     dependencies:
       '@isaacs/cliui': 8.0.2
     optionalDependencies:
@@ -9967,6 +10264,8 @@ snapshots:
 
   json-stable-stringify-without-jsonify@1.0.1: {}
 
+  json-stringify-pretty-compact@4.0.0: {}
+
   json5@1.0.2:
     dependencies:
       minimist: 1.2.8
@@ -9993,6 +10292,8 @@ snapshots:
       make-dir: 3.1.0
       xmlbuilder: 15.1.1
 
+  kdbush@4.0.2: {}
+
   keyv@4.5.4:
     dependencies:
       json-buffer: 3.0.1
@@ -10157,6 +10458,35 @@ snapshots:
     dependencies:
       semver: 6.3.1
 
+  maplibre-gl@4.7.1:
+    dependencies:
+      '@mapbox/geojson-rewind': 0.5.2
+      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/point-geometry': 0.1.0
+      '@mapbox/tiny-sdf': 2.0.6
+      '@mapbox/unitbezier': 0.0.1
+      '@mapbox/vector-tile': 1.3.1
+      '@mapbox/whoots-js': 3.1.0
+      '@maplibre/maplibre-gl-style-spec': 20.3.1
+      '@types/geojson': 7946.0.14
+      '@types/geojson-vt': 3.2.5
+      '@types/mapbox__point-geometry': 0.1.4
+      '@types/mapbox__vector-tile': 1.3.4
+      '@types/pbf': 3.0.5
+      '@types/supercluster': 7.1.3
+      earcut: 3.0.0
+      geojson-vt: 4.0.2
+      gl-matrix: 3.4.3
+      global-prefix: 4.0.0
+      kdbush: 4.0.2
+      murmurhash-js: 1.0.0
+      pbf: 3.3.0
+      potpack: 2.0.0
+      quickselect: 3.0.0
+      supercluster: 8.0.1
+      tinyqueue: 3.0.0
+      vt-pbf: 3.1.3
+
   markdown-table@3.0.3: {}
 
   mathml-tag-names@2.1.3: {}
@@ -10548,7 +10878,7 @@ snapshots:
       acorn: 8.12.1
       pathe: 1.1.2
       pkg-types: 1.1.3
-      ufo: 1.5.4
+      ufo: 1.5.3
 
   mri@1.2.0: {}
 
@@ -10562,6 +10892,8 @@ snapshots:
 
   muggle-string@0.4.1: {}
 
+  murmurhash-js@1.0.0: {}
+
   mustache@4.2.0: {}
 
   mz@2.7.0:
@@ -10856,7 +11188,7 @@ snapshots:
       execa: 8.0.1
       pathe: 1.1.2
       pkg-types: 1.1.3
-      ufo: 1.5.4
+      ufo: 1.5.3
 
   object-assign@4.1.1: {}
 
@@ -11088,6 +11420,11 @@ snapshots:
 
   pathval@2.0.0: {}
 
+  pbf@3.3.0:
+    dependencies:
+      ieee754: 1.2.1
+      resolve-protobuf-schema: 2.1.0
+
   perfect-debounce@1.0.0: {}
 
   picocolors@1.0.1: {}
@@ -11356,6 +11693,8 @@ snapshots:
       picocolors: 1.0.1
       source-map-js: 1.2.0
 
+  potpack@2.0.0: {}
+
   prebuild-install@7.1.2:
     dependencies:
       detect-libc: 2.0.3
@@ -11395,6 +11734,8 @@ snapshots:
 
   property-information@6.5.0: {}
 
+  protocol-buffers-schema@3.6.0: {}
+
   protocols@2.0.1: {}
 
   proxy-from-env@1.1.0: {}
@@ -11413,6 +11754,10 @@ snapshots:
 
   quick-format-unescaped@4.0.4: {}
 
+  quickselect@2.0.0: {}
+
+  quickselect@3.0.0: {}
+
   radix-vue@1.9.3(vue@3.4.36(typescript@5.6.2)):
     dependencies:
       '@floating-ui/dom': 1.6.10
@@ -11627,6 +11972,10 @@ snapshots:
 
   resolve-pkg-maps@1.0.0: {}
 
+  resolve-protobuf-schema@2.1.0:
+    dependencies:
+      protocol-buffers-schema: 3.6.0
+
   resolve@1.22.8:
     dependencies:
       is-core-module: 2.15.0
@@ -11688,6 +12037,8 @@ snapshots:
     dependencies:
       queue-microtask: 1.2.3
 
+  rw@1.3.3: {}
+
   safe-array-concat@1.1.2:
     dependencies:
       call-bind: 1.0.7
@@ -11789,6 +12140,13 @@ snapshots:
       functions-have-names: 1.2.3
       has-property-descriptors: 1.0.2
 
+  set-value@2.0.1:
+    dependencies:
+      extend-shallow: 2.0.1
+      is-extendable: 0.1.1
+      is-plain-object: 2.0.4
+      split-string: 3.1.0
+
   setprototypeof@1.2.0: {}
 
   shadcn-vue@0.10.5(@vitest/ui@2.0.5(vitest@2.0.5))(magicast@0.3.4)(vitest@2.0.5(@types/node@20.14.14)(@vitest/ui@2.0.5)(terser@5.31.4))(vue@3.4.36(typescript@5.6.2)):
@@ -11945,6 +12303,19 @@ snapshots:
     dependencies:
       atomic-sleep: 1.0.0
 
+  sort-asc@0.2.0: {}
+
+  sort-desc@0.2.0: {}
+
+  sort-object@3.0.3:
+    dependencies:
+      bytewise: 1.1.0
+      get-value: 2.0.6
+      is-extendable: 0.1.1
+      sort-asc: 0.2.0
+      sort-desc: 0.2.0
+      union-value: 1.0.1
+
   source-map-js@1.2.0: {}
 
   source-map-support@0.5.21:
@@ -11960,6 +12331,10 @@ snapshots:
 
   speakingurl@14.0.1: {}
 
+  split-string@3.1.0:
+    dependencies:
+      extend-shallow: 3.0.2
+
   split2@4.2.0: {}
 
   sprintf-js@1.0.3: {}
@@ -12145,6 +12520,10 @@ snapshots:
       pirates: 4.0.6
       ts-interface-checker: 0.1.13
 
+  supercluster@8.0.1:
+    dependencies:
+      kdbush: 4.0.2
+
   superjson@2.2.1:
     dependencies:
       copy-anything: 3.0.5
@@ -12300,7 +12679,9 @@ snapshots:
 
   tinybench@2.9.0: {}
 
-  tinypool@1.0.0: {}
+  tinypool@1.0.1: {}
+
+  tinyqueue@3.0.0: {}
 
   tinyrainbow@1.2.0: {}
 
@@ -12412,6 +12793,14 @@ snapshots:
 
   typescript@5.6.2: {}
 
+  typewise-core@1.2.0: {}
+
+  typewise@1.0.3:
+    dependencies:
+      typewise-core: 1.2.0
+
+  ufo@1.5.3: {}
+
   ufo@1.5.4: {}
 
   uglify-js@3.19.1:
@@ -12493,6 +12882,13 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
+  union-value@1.0.1:
+    dependencies:
+      arr-union: 3.1.0
+      get-value: 2.0.6
+      is-extendable: 0.1.1
+      set-value: 2.0.1
+
   unist-builder@4.0.0:
     dependencies:
       '@types/unist': 3.0.2
@@ -12735,7 +13131,7 @@ snapshots:
       pathe: 1.1.2
       std-env: 3.7.0
       tinybench: 2.9.0
-      tinypool: 1.0.0
+      tinypool: 1.0.1
       tinyrainbow: 1.2.0
       vite: 5.4.0(@types/node@20.14.14)(terser@5.31.4)
       vite-node: 2.0.5(@types/node@20.14.14)(terser@5.31.4)
@@ -12776,6 +13172,12 @@ snapshots:
 
   vscode-uri@3.0.8: {}
 
+  vt-pbf@3.1.3:
+    dependencies:
+      '@mapbox/point-geometry': 0.1.0
+      '@mapbox/vector-tile': 1.3.1
+      pbf: 3.3.0
+
   vue-bundle-renderer@2.1.0:
     dependencies:
       ufo: 1.5.4
@@ -12804,7 +13206,7 @@ snapshots:
       '@intlify/shared': 9.13.1
       '@intlify/vue-i18n-bridge': 1.1.0(vue-i18n@9.13.1(vue@3.4.36(typescript@5.6.2)))
       '@intlify/vue-router-bridge': 1.1.0(vue-router@4.4.3(vue@3.4.36(typescript@5.6.2)))(vue@3.4.36(typescript@5.6.2))
-      ufo: 1.5.4
+      ufo: 1.5.3
       vue-demi: 0.14.10(vue@3.4.36(typescript@5.6.2))
     optionalDependencies:
       vue: 3.4.36(typescript@5.6.2)
@@ -12886,6 +13288,10 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  which@4.0.0:
+    dependencies:
+      isexe: 3.1.1
+
   why-is-node-running@2.3.0:
     dependencies:
       siginfo: 2.0.0
diff --git a/scripts/generate-api-client.ts b/scripts/generate-api-client.ts
index 1bba07e..b509c7f 100644
--- a/scripts/generate-api-client.ts
+++ b/scripts/generate-api-client.ts
@@ -19,7 +19,7 @@ async function generate() {
 			pathname: "/apis/swagger/schema",
 			searchParams: createUrlSearchParams({ format: "json" }),
 		}),
-		prefixes: ["/api/work-detail/:id", "/api/work-preview"],
+		prefixes: ["/api/work-detail/{id}", "/api/work-preview"],
 		dist: outputFilePath,
 	};
 
diff --git a/types/api.ts b/types/api.ts
index 403ed03..b8762a6 100644
--- a/types/api.ts
+++ b/types/api.ts
@@ -7,6 +7,7 @@ type Api = ApiOf<typeof api>;
 
 export type SearchFilters = ZodiosQueryParamsByPath<Api, "get", "/api/work-preview/">;
 export type SearchResults = ZodiosResponseByPath<Api, "get", "/api/work-preview/">;
+export type WorkDetail = ZodiosResponseByPath<Api, "get", "/api/work-detail/:id/">;
 
 export type SearchFacetLanguage = NonNullable<SearchFilters["facet_language"]>;
 export type SearchFacetTopic = NonNullable<SearchFilters["facet_topic"]>;
diff --git a/utils/get-work-icon.ts b/utils/get-work-icon.ts
new file mode 100644
index 0000000..900afcd
--- /dev/null
+++ b/utils/get-work-icon.ts
@@ -0,0 +1,75 @@
+import {
+	BookOpenTextIcon,
+	DramaIcon,
+	FeatherIcon,
+	FilesIcon,
+	ImageIcon,
+	NewspaperIcon,
+	NotebookTabsIcon,
+	RadioIcon,
+	TextIcon,
+} from "lucide-vue-next";
+
+type Icon = typeof BookOpenTextIcon;
+
+const icons: Record<string, Icon> = {
+	roman: BookOpenTextIcon,
+	erzählung: BookOpenTextIcon,
+	literarischerText: BookOpenTextIcon,
+	poetikvorlesung: BookOpenTextIcon,
+	kinderundjugendbuch: BookOpenTextIcon,
+	rede: BookOpenTextIcon,
+	essay: BookOpenTextIcon,
+	vorlesung: BookOpenTextIcon,
+	rezension: BookOpenTextIcon,
+	lyrik: FeatherIcon,
+	drama: DramaIcon,
+	hörspieldrehbuch: DramaIcon,
+	filmdrehbuchfilmvorlage: DramaIcon,
+	hörspiel: RadioIcon,
+	film: RadioIcon,
+	kinderundjugendbuchproduktion: RadioIcon,
+	hörspielübersetzunghörspielbearbeitung: RadioIcon,
+	literatursendung: RadioIcon,
+	anderweitigerbeitraginaudiovisuellenmedien: RadioIcon,
+	//next item is not in the hierachry:
+	musik: RadioIcon,
+	paratext: TextIcon,
+	//next item is not in the hierachry:
+	vorabdruck: TextIcon,
+	//next item is not in the hierachry:
+	religiöserText: TextIcon,
+	abbildung: ImageIcon,
+	//next item is not in the hierachry:
+	kunstwerk: ImageIcon,
+	monografie: NotebookTabsIcon,
+	sammelband: NotebookTabsIcon,
+	artikel: NotebookTabsIcon,
+	journalartikel: NotebookTabsIcon,
+	hochschulschrift: NotebookTabsIcon,
+	diplomarbeit: NotebookTabsIcon,
+	dissertation: NotebookTabsIcon,
+	//next item is not in the hierachry:
+	nachschlagewerk: NotebookTabsIcon,
+	besprechung: NewspaperIcon,
+	bericht: NewspaperIcon,
+	ankündigung: NewspaperIcon,
+	porträt: NewspaperIcon,
+	anderweitigejournalistischerezeption: NewspaperIcon,
+	//next item is not in the hierachry:
+	interview: NewspaperIcon,
+	//next item is not in the hierachry:
+	korrespondenz: NewspaperIcon,
+	dramaopernaufführung: FilesIcon,
+	nachdichtungvonbarbarafrischmuth: FilesIcon,
+	//next item is not in the hierachry:
+	übersetzung: FilesIcon,
+};
+
+export function getWorkIcon(workType: string): Icon | null {
+	const normalizedWorkType = workType
+		.toLowerCase()
+		.replace(/[-\s,]/g, "") // Removes dashes, spaces, and commas
+		.replace(/[^a-zA-Zäöüß]/g, ""); // Removes any non-alphabet characters except for umlauts and ß
+	return icons[normalizedWorkType] ?? null;
+}