Add CharacterBuilder class to unify and compile the features

This reverts commit 685bd47fc4.

.gitignore

@@ -22,3 +22,8 @@ logs
 .env
 .env.*
 !.env.example
+
+bun.lockb
+db.sqlite
+db.sqlite-wal
+db.sqlite-shm

app.vue

@@ -1,12 +1,46 @@
 <template>
 	<div class="text-light-100 dark:text-dark-100 flex bg-light-0 dark:bg-dark-0 h-screen overflow-hidden">
-    <NuxtRouteAnnouncer/>
-    <NuxtLayout>
-      <TooltipProvider>
-        <ToastProvider>
-          <NuxtPage></NuxtPage>
-        </ToastProvider>
-      </TooltipProvider>
-    </NuxtLayout>
-  </div>
+		<NuxtRouteAnnouncer/>
+		<NuxtLoadingIndicator />
+		<TooltipProvider>
+			<NuxtLayout>
+				<div class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 justify-center overflow-auto max-h-full max-w-full relative">
+					<NuxtPage />
+				</div>
+			</NuxtLayout>
+			<Toaster v-model="list" />
+		</TooltipProvider>
+	</div>
 </template>
+
+<script setup lang="ts">
+provideToaster();
+
+const { list } = useToast();
+</script>
+
+<style>
+::-webkit-scrollbar {
+	width: 12px;
+	height: 12px;
+}
+ 
+::-webkit-scrollbar-thumb {
+	@apply bg-light-40;
+	@apply dark:bg-dark-40;
+	@apply rounded-md;
+	@apply border-2;
+	@apply border-solid;
+	@apply border-transparent;
+	@apply bg-clip-padding;
+}
+ 
+::-webkit-scrollbar-thumb:hover {
+	@apply bg-light-50;
+	@apply dark:bg-dark-50;
+}
+
+::-webkit-scrollbar-corner {
+	@apply bg-transparent;
+}
+</style>

components/Button.vue

@@ -1,6 +0,0 @@
-<template>
-    <button class="text-light-100 dark:text-dark-100 font-semibold hover:bg-light-30 dark:hover:bg-dark-30 inline-flex h-[35px] items-center justify-center bg-light-25 dark:bg-dark-25 px-[15px] leading-none outline-none
-    border border-light-25 dark:border-dark-25 hover:border-light-30 dark:hover:border-dark-30 active:border-light-40 dark:active:border-dark-40 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40">
-        <slot />
-    </button>
-</template>

components/CanvasEditor.vue

@@ -0,0 +1,931 @@
+<script lang="ts">
+import { bezier, getBbox, opposite, posFromDir, rotation, type Box, type Direction, type Path, type Position } from '#shared/canvas.util';
+import type CanvasNodeEditor from './canvas/CanvasNodeEditor.vue';
+import type CanvasEdgeEditor from './canvas/CanvasEdgeEditor.vue';
+import { SnapFinder, type SnapHint } from '#shared/physics.util';
+import type { CanvasPreferences } from '~/types/general';
+export type Element = { type: 'node' | 'edge', id: string };
+
+interface ActionMap {
+    remove: CanvasNode | CanvasEdge | undefined;
+    create: CanvasNode | CanvasEdge | undefined;
+    property: CanvasNode | CanvasEdge;
+}
+type Action = keyof ActionMap;
+interface HistoryEvent<T extends Action = Action>
+{
+    event: T;
+    actions: HistoryAction<T>[];
+}
+interface HistoryAction<T extends Action>
+{
+    element: Element;
+    from: ActionMap[T];
+    to: ActionMap[T];
+}
+
+type NodeEditor = InstanceType<typeof CanvasNodeEditor>;
+type EdgeEditor = InstanceType<typeof CanvasEdgeEditor>;
+
+const cancelEvent = (e: Event) => e.preventDefault();
+const stopPropagation = (e: Event) => e.stopImmediatePropagation();
+function getID(length: number)
+{
+    for (var id = [], i = 0; i < length; i++)
+        id.push((16 * Math.random() | 0).toString(16));
+    return id.join("");
+}
+function center(touches: TouchList): Position
+{
+    const pos = { x: 0, y: 0 };
+
+    for(const touch of touches)
+    {
+        pos.x += touch.clientX;
+        pos.y += touch.clientY;
+    }
+
+    pos.x /= touches.length;
+    pos.y /= touches.length;
+    return pos;
+}
+function distance(touches: TouchList): number
+{
+    const [A, B] = touches;
+    return Math.hypot(B.clientX - A.clientX, B.clientY - A.clientY);
+}
+</script>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import { clamp } from '#shared/general.util';
+import type { CanvasContent, CanvasEdge, CanvasNode } from '~/types/canvas';
+
+const canvas = defineModel<CanvasContent>({ required: true });
+const props = defineProps<{
+    path: string,
+}>();
+
+const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5), spacing = ref<number | undefined>(32);
+const focusing = ref<Element>(), editing = ref<Element>();
+const canvasRef = useTemplateRef('canvasRef'), transformRef = useTemplateRef('transformRef'), patternRef = useTemplateRef('patternRef'), toolbarRef = useTemplateRef('toolbarRef'), viewportSize = useElementBounding(canvasRef);
+const nodes = useTemplateRef<NodeEditor[]>('nodes'), edges = useTemplateRef<EdgeEditor[]>('edges');
+const canvasSettings = useCookie<CanvasPreferences>('canvasPreference', { default: () => ({ gridSnap: true, neighborSnap: true, spacing: 32 }) });
+const hints = ref<SnapHint[]>([]);
+const viewport = computed<Box>(() => {
+    const width = viewportSize.width.value / zoom.value, height = viewportSize.height.value / zoom.value;
+    const movementX = viewportSize.width.value - width, movementY = viewportSize.height.value - height;
+    return { x: -dispX.value + movementX / 2, y: -dispY.value + movementY / 2, w: width, h: height };
+});
+const updateScaleVar = useDebounceFn(() => {
+    if(transformRef.value)
+    {
+        console.log(zoom.value);
+        transformRef.value.style.setProperty('--tw-scale', zoom.value.toString());
+    }
+    if(canvasRef.value)
+    {
+        canvasRef.value.style.setProperty('--zoom-multiplier', (1 / Math.pow(zoom.value, 0.7)).toFixed(3));
+    }
+}, 100);
+
+type DragOrigin = { type: 'edge', id: string, destination: 'from' | 'to', node: string } | { type: 'node', id: string };
+const fakeEdge = ref<{ from?: Position, fromSide?: Direction, to?: Position, toSide?: Direction, path?: Path, style?: { stroke: string, fill: string }, hex?: string, drag?: DragOrigin, snapped?: { node: string, side: Direction } }>({});
+
+const focused = computed(() => focusing.value ? focusing.value?.type === 'node' ? nodes.value?.find(e => !!e && e.id === focusing.value!.id) : edges.value?.find(e => !!e && e.id === focusing.value!.id) : undefined), edited = computed(() => editing.value ? editing.value?.type === 'node' ? nodes.value?.find(e => !!e && e.id === editing.value!.id) : edges.value?.find(e => !!e && e.id === editing.value!.id) : undefined);
+let snapFinder: SnapFinder;
+
+const history = ref<HistoryEvent[]>([]);
+const historyPos = ref(-1);
+const historyCursor = computed(() => history.value.length > 0 && historyPos.value > -1 ? history.value[historyPos.value] : undefined);
+
+watch(props, () => {
+    snapFinder = new SnapFinder(hints, viewport, { gridSize: 512, preferences: canvasSettings.value, threshold: 16, cellSize: 64 })
+    canvas.value.nodes?.forEach((e) => snapFinder.update(e));
+    focusing.value = undefined;
+    editing.value = undefined;
+    history.value = [];
+    historyPos.value = -1;
+    fakeEdge.value = {};
+}, { immediate: true });
+
+watch(canvas, () => {
+    updateToolbarTransform();
+}, { immediate: true, deep: true, });
+
+const reset = (_: MouseEvent) => {
+    zoom.value = minZoom.value;
+
+    dispX.value = 0;
+    dispY.value = 0;
+
+    updateTransform();
+}
+
+function addAction<T extends Action = Action>(event: T, actions: HistoryAction<T>[])
+{
+    historyPos.value++;
+    history.value.splice(historyPos.value, history.value.length - historyPos.value);
+    history.value[historyPos.value] = { event, actions };
+}
+onMounted(() => {
+    let lastX = 0, lastY = 0, lastDistance = 0;
+    const dragMove = (e: MouseEvent) => {
+        dispX.value = dispX.value - (lastX - e.clientX) / zoom.value;
+        dispY.value = dispY.value - (lastY - e.clientY) / zoom.value;
+
+        lastX = e.clientX;
+        lastY = e.clientY;
+
+        updateTransform();
+    };
+    const dragEnd = (e: MouseEvent) => {
+        window.removeEventListener('mouseup', dragEnd);
+        window.removeEventListener('mousemove', dragMove);
+    };
+    canvasRef.value?.addEventListener('mouseenter', () => { 
+        window.addEventListener('wheel', cancelEvent, { passive: false });
+        document.addEventListener('gesturestart', cancelEvent);
+        document.addEventListener('gesturechange', cancelEvent);
+
+        canvasRef.value?.addEventListener('mouseleave', () => {
+            window.removeEventListener('wheel', cancelEvent);
+            document.removeEventListener('gesturestart', cancelEvent);
+            document.removeEventListener('gesturechange', cancelEvent);
+        });
+    })
+    canvasRef.value?.addEventListener('mousedown', (e) => {
+        if(e.button === 1)
+        {
+            lastX = e.clientX;
+            lastY = e.clientY;
+
+            window.addEventListener('mouseup', dragEnd, { passive: true });
+            window.addEventListener('mousemove', dragMove, { passive: true });
+        }
+    }, { passive: true });
+    canvasRef.value?.addEventListener('wheel', (e) => {
+        if((zoom.value >= 3 && e.deltaY < 0) || (zoom.value <= minZoom.value && e.deltaY > 0))
+            return;
+
+        const diff = Math.exp(e.deltaY * -0.001);
+        const centerX = (viewportSize.x.value + viewportSize.width.value / 2), centerY = (viewportSize.y.value + viewportSize.height.value / 2);
+        const mousex = centerX - e.clientX, mousey = centerY - e.clientY;
+
+        dispX.value = dispX.value - (mousex / (diff * zoom.value) - mousex / zoom.value);
+        dispY.value = dispY.value - (mousey / (diff * zoom.value) - mousey / zoom.value);
+
+        zoom.value = clamp(zoom.value * diff, minZoom.value, 3);
+        spacing.value = canvasSettings.value.gridSnap ? canvasSettings.value.spacing ?? 32 : undefined;
+
+        updateTransform();
+    }, { passive: true });
+    canvasRef.value?.addEventListener('touchstart', (e) => {
+        ({ x: lastX, y: lastY } = center(e.touches));
+
+        if(e.touches.length > 1)
+        {
+            lastDistance = distance(e.touches);
+        }
+
+        canvasRef.value?.addEventListener('touchend', touchend, { passive: true });
+        canvasRef.value?.addEventListener('touchcancel', touchcancel, { passive: true });
+        canvasRef.value?.addEventListener('touchmove', touchmove, { passive: true });
+    }, { passive: true });
+    const touchend = (e: TouchEvent) => {
+        if(e.touches.length > 1)
+        {
+            ({ x: lastX, y: lastY } = center(e.touches));
+        }
+
+        canvasRef.value?.removeEventListener('touchend', touchend);
+        canvasRef.value?.removeEventListener('touchcancel', touchcancel);
+        canvasRef.value?.removeEventListener('touchmove', touchmove);
+    };
+    const touchcancel = (e: TouchEvent) => {
+        if(e.touches.length > 1)
+        {
+            ({ x: lastX, y: lastY } = center(e.touches));
+        }
+
+        canvasRef.value?.removeEventListener('touchend', touchend);
+        canvasRef.value?.removeEventListener('touchcancel', touchcancel);
+        canvasRef.value?.removeEventListener('touchmove', touchmove);
+    };
+    const touchmove = (e: TouchEvent) => {
+        const pos = center(e.touches);
+        dispX.value = dispX.value - (lastX - pos.x) / zoom.value;
+        dispY.value = dispY.value - (lastY - pos.y) / zoom.value;
+        lastX = pos.x;
+        lastY = pos.y;
+
+        if(e.touches.length === 2)
+        {
+            const dist = distance(e.touches);
+            const diff = dist / lastDistance;
+            
+            zoom.value = clamp(zoom.value * diff, minZoom.value, 3);
+        }
+
+        updateTransform();
+    };
+
+    updateTransform();
+});
+
+function updateTransform()
+{
+    if(transformRef.value)
+    {
+        transformRef.value.style.transform = `scale3d(${zoom.value}, ${zoom.value}, 1) translate3d(${dispX.value}px, ${dispY.value}px, 0)`;
+        updateScaleVar();
+    }
+    if(patternRef.value && canvasSettings.value.gridSnap)
+    {
+        patternRef.value.parentElement?.classList.remove('hidden');
+        patternRef.value.setAttribute("x", (viewportSize.width.value / 2 + dispX.value % spacing.value! * zoom.value).toFixed(3));
+        patternRef.value.setAttribute("y", (viewportSize.height.value / 2 + dispY.value % spacing.value! * zoom.value).toFixed(3));
+        patternRef.value.setAttribute("width", (zoom.value * spacing.value!).toFixed(3));
+        patternRef.value.setAttribute("height", (zoom.value * spacing.value!).toFixed(3));
+
+        patternRef.value.children[0].setAttribute('cx', (zoom.value).toFixed(3));
+        patternRef.value.children[0].setAttribute('cy', (zoom.value).toFixed(3));
+        patternRef.value.children[0].setAttribute('r', (zoom.value).toFixed(3));
+    }
+    else if(patternRef.value && !canvasSettings.value.gridSnap)
+    {
+        patternRef.value.parentElement?.classList.remove('hidden');
+    }
+}
+function updateToolbarTransform()
+{
+    const offsetY = -12;
+    if(toolbarRef.value)
+    {
+        if(!focusing.value)
+        {
+            toolbarRef.value.style.transform = '';
+        }
+        else if(focusing.value.type === 'node')
+        {
+            const node = canvas.value.nodes!.find(e => e.id === focusing.value!.id)!;
+            toolbarRef.value.style.transform = `translate(${node.x}px, ${node.y}px) translateY(-100%) translateY(${offsetY}px) translateX(-50%) translateX(${node.width / 2}px) scale(calc(1 / var(--tw-scale)))`;
+        }
+        else
+        {
+            const path = edges.value!.find(e => e.id === focusing.value!.id)!.path;
+            const x = path.from.x + (path.to.x - path.from.x) / 2, y = path.from.y;
+            toolbarRef.value.style.transform = `translate(${x}px, ${y}px) translateY(-100%) translateY(${offsetY}px) translateX(-50%) scale(calc(1 / var(--tw-scale)))`;
+        }
+    }
+}
+function moveNode(ids: string[], deltax: number, deltay: number)
+{
+    if(ids.length === 0)
+        return;
+    
+    const actions: HistoryAction<'property'>[] = [];
+    for(const id of ids)
+    {
+        const node = canvas.value.nodes!.find(e => e.id === id)!;
+        snapFinder.update(node);
+
+        actions.push({ element: { type: 'node', id }, from: { ...node, x: node.x - deltax, y: node.y - deltay }, to: { ...node } });
+    }
+
+    addAction('property', actions);
+}
+function resizeNode(ids: string[], deltax: number, deltay: number, deltaw: number, deltah: number)
+{
+    if(ids.length === 0)
+        return;
+    
+    const actions: HistoryAction<'property'>[] = [];
+    for(const id of ids)
+    {
+        const node = canvas.value.nodes!.find(e => e.id === id)!;
+        snapFinder.update(node);
+
+        actions.push({ element: { type: 'node', id }, from: { ...node, x: node.x - deltax, y: node.y - deltay, width: node.width - deltaw, height: node.height - deltah }, to: { ...node } });
+    }
+
+    addAction('property', actions);
+}
+function select(element: Element)
+{
+    if(focusing.value && (focusing.value.id !== element.id || focusing.value.type !== element.type))
+    {
+        unselect();
+    }
+
+    focusing.value = element;
+
+    focused.value?.dom?.addEventListener('click', stopPropagation, { passive: true });
+    canvasRef.value?.addEventListener('click', unselect, { once: true });
+    updateToolbarTransform();
+}
+function edit(element: Element)
+{
+    editing.value = element;
+
+    focused.value?.dom?.addEventListener('wheel', stopPropagation, { passive: true });
+    focused.value?.dom?.addEventListener('dblclick', stopPropagation, { passive: true });
+    canvasRef.value?.addEventListener('click', unselect, { once: true });
+}
+function createNode(e: MouseEvent)
+{
+    let box = canvasRef.value?.getBoundingClientRect()!;
+    const width = 250, height = 100;
+    const x = (e.layerX / zoom.value) - dispX.value - (width  / 2);
+    const y = (e.layerY / zoom.value) - dispY.value - (height / 2);
+    const node: CanvasNode = { id: getID(16), x, y, width, height, type: 'text' };
+
+    if(!canvas.value.nodes)
+        canvas.value.nodes = [node];
+    else
+        canvas.value.nodes.push(node);
+
+    snapFinder.add(node);
+    addAction('create', [{ element: { type: 'node', id: node.id }, from: undefined, to: node }]);
+}
+function remove(elements: Element[])
+{
+    if(elements.length === 0)
+        return;
+
+    const actions: HistoryAction<'remove'>[] = [];
+    focusing.value = undefined;
+    editing.value = undefined;
+
+    const c = canvas.value;
+
+    for(const element of elements)
+    {
+        if(element.type === 'node')
+        {
+            const edges = c.edges?.map((e, i) => ({ id: e.id, from: e.fromNode, to: e.toNode, index: i }))?.filter(e => e.from === element.id || e.to === element.id) ?? [];
+            for(let i = edges.length - 1; i >= 0; i--)
+            {
+                actions.push({ element: { type: 'edge', id: edges[i].id }, from: c.edges!.splice(edges[i].index, 1)[0], to: undefined });
+            }
+
+            const index = c.nodes!.findIndex(e => e.id === element.id);
+            const node = c.nodes!.splice(index, 1)[0];
+
+            snapFinder.remove(node);
+            actions.push({ element: { type: 'node', id: element.id }, from: node, to: undefined });
+        }
+        else if(element.type === 'edge' && !actions.find(e => e.element.type === 'edge' && e.element.id === element.id))
+        {
+            const index = c.edges!.findIndex(e => e.id === element.id);
+            actions.push({ element: { type: 'edge', id: element.id }, from: c.edges!.splice(index, 1)[0], to: undefined });
+        }
+    }
+
+    canvas.value = c;
+
+    addAction('remove', actions);
+}
+function dragEdgeTo(e: MouseEvent): void
+{
+    (fakeEdge.value.to as Position).x += e.movementX / zoom.value;
+    (fakeEdge.value.to as Position).y += e.movementY / zoom.value;
+
+    const result = snapFinder.findEdgeSnapPosition(fakeEdge.value.drag!.id, fakeEdge.value.to!.x, fakeEdge.value.to!.y);
+
+    fakeEdge.value.snapped = result ? { node: result.node, side: result.direction } : undefined;
+    fakeEdge.value.path = bezier((fakeEdge.value.from as Position), fakeEdge.value.fromSide!, result ?? (fakeEdge.value.to as Position), result?.direction ?? fakeEdge.value.toSide!);
+}
+function dragEndEdgeTo(e: MouseEvent): void
+{
+    window.removeEventListener('mousemove', dragEdgeTo);
+    window.removeEventListener('mouseup', dragEndEdgeTo);
+
+    if(fakeEdge.value.snapped)
+    {
+        const node = canvas.value.nodes!.find(e => e.id === fakeEdge.value.drag!.id)!;
+        const edge: CanvasEdge = { fromNode: fakeEdge.value.drag!.id, fromSide: fakeEdge.value.fromSide!, toNode: fakeEdge.value.snapped.node, toSide: fakeEdge.value.snapped.side, id: getID(16), color: node.color };
+        canvas.value.edges?.push(edge);
+
+        addAction('create', [{ from: undefined, to: edge, element: { id: edge.id, type: 'edge' } }]);
+    }
+
+    fakeEdge.value = {};
+}
+function dragStartEdgeTo(id: string, e: MouseEvent, direction: Direction): void
+{
+    const node = canvas.value.nodes!.find(e => e.id === id)!;
+    fakeEdgeFromNode(node, direction);
+
+    window.addEventListener('mousemove', dragEdgeTo, { passive: true });
+    window.addEventListener('mouseup', dragEndEdgeTo, { passive: true });
+}
+function dragEdgeSide(e: MouseEvent): void
+{
+    if(fakeEdge.value.drag?.type === 'node')
+        return;
+
+    const destination = fakeEdge.value.drag!.destination;
+    const pos = fakeEdge.value[destination]!;
+
+    pos.x += e.movementX / zoom.value;
+    pos.y += e.movementY / zoom.value;
+
+    const result = snapFinder.findEdgeSnapPosition(fakeEdge.value.drag!.node, pos.x, pos.y);
+
+    fakeEdge.value.snapped = result ? { node: result.node, side: result.direction } : undefined;
+    fakeEdge.value.path = bezier(destination === 'from' ? (result ?? pos) : fakeEdge.value.from!, destination === 'from' ? result?.direction ?? fakeEdge.value.fromSide! : fakeEdge.value.fromSide!, destination === 'to' ? (result ?? pos) : fakeEdge.value.to!, destination === 'to' ? result?.direction ?? fakeEdge.value.toSide! : fakeEdge.value.toSide!);
+}
+function dragEndEdgeSide(e: MouseEvent): void
+{
+    if(fakeEdge.value.drag?.type === 'node')
+        return;
+
+    window.removeEventListener('mousemove', dragEdgeSide);
+    window.removeEventListener('mouseup', dragEndEdgeSide);
+
+    if(fakeEdge.value.snapped)
+    {
+        const edge = canvas.value.edges!.find(e => e.id === fakeEdge.value.drag?.id)!
+        const old = { ... edge };
+
+        const destination = fakeEdge.value.drag!.destination;
+
+        edge.fromNode = destination === 'to' ? fakeEdge.value.drag!.node : fakeEdge.value.snapped.node;
+        edge.fromSide = destination === 'to' ? fakeEdge.value.fromSide! : fakeEdge.value.snapped.side;
+
+        edge.toNode = destination === 'from' ? fakeEdge.value.drag!.node : fakeEdge.value.snapped.node;
+        edge.toSide = destination === 'from' ? fakeEdge.value.toSide! : fakeEdge.value.snapped.side;
+
+        addAction('property', [{ from: old, to: edge, element: { id: edge.id, type: 'edge' } }]);
+    }
+
+    fakeEdge.value = {};
+}
+function dragStartEdgeSide(id: string, e: MouseEvent, direction: 'from' | 'to'): void
+{
+    const edge = canvas.value.edges!.find(e => e.id === id)!;
+    fakeEdgeFromEdge(edge, direction);
+
+    window.addEventListener('mousemove', dragEdgeSide, { passive: true });
+    window.addEventListener('mouseup', dragEndEdgeSide, { passive: true });
+}
+function fakeEdgeFromEdge(edge: CanvasEdge, direction: 'from' | 'to'): void
+{
+    fakeEdge.value.drag = { type: 'edge', id: edge.id, destination: direction, node: direction === 'to' ? edge.fromNode : edge.toNode };
+
+    const destinationNode = direction === 'from' ? canvas.value.nodes!.find(e => e.id === edge.fromNode)! : canvas.value.nodes!.find(e => e.id === edge.toNode)!;
+    const otherNode = direction === 'from' ? canvas.value.nodes!.find(e => e.id === edge.toNode)! : canvas.value.nodes!.find(e => e.id === edge.fromNode)!;
+    const destinationPos = posFromDir(getBbox(destinationNode), direction === 'from' ? edge.fromSide : edge.toSide);
+    const otherPos = posFromDir(getBbox(otherNode), direction === 'from' ? edge.toSide : edge.fromSide);
+
+    fakeEdge.value.from = direction === 'from' ? destinationPos : otherPos;
+    fakeEdge.value.fromSide = edge.fromSide;
+
+    fakeEdge.value.to = direction === 'to' ? destinationPos : otherPos;
+    fakeEdge.value.toSide = edge.toSide;
+
+    fakeEdge.value.path = bezier(destinationPos, edge.fromSide, otherPos, edge.toSide);
+    fakeEdge.value.hex = edge.color?.hex;
+    
+    fakeEdge.value.style = edge?.color ? edge.color?.class ? 
+        { fill: `fill-light-${edge.color?.class} dark:fill-dark-${edge.color?.class}`, stroke: `stroke-light-${edge.color?.class} dark:stroke-dark-${edge.color?.class}` } : 
+        { fill: `fill-colored`, stroke: `stroke-[color:var(--canvas-color)]` } : 
+        { stroke: `stroke-light-40 dark:stroke-dark-40`, fill: `fill-light-40 dark:fill-dark-40` };
+}
+function fakeEdgeFromNode(node: CanvasNode, direction: Direction): void
+{
+    const pos = posFromDir(getBbox(node), direction);
+
+    fakeEdge.value.drag = { type: 'node', id: node.id };
+
+    fakeEdge.value.from = { ... pos };
+    fakeEdge.value.fromSide = direction;
+
+    fakeEdge.value.to = { ... pos };
+    fakeEdge.value.toSide = opposite[direction];
+
+    fakeEdge.value.path = bezier(pos, fakeEdge.value.fromSide!, pos, fakeEdge.value.toSide!);
+    fakeEdge.value.hex = node.color?.hex;
+    
+    fakeEdge.value.style = node?.color ? node.color?.class ? 
+        { fill: `fill-light-${node.color?.class} dark:fill-dark-${node.color?.class}`, stroke: `stroke-light-${node.color?.class} dark:stroke-dark-${node.color?.class}` } : 
+        { fill: `fill-colored`, stroke: `stroke-[color:var(--canvas-color)]` } : 
+        { stroke: `stroke-light-40 dark:stroke-dark-40`, fill: `fill-light-40 dark:fill-dark-40` };
+}
+function editNodeProperty<T extends keyof CanvasNode>(ids: string[], property: T, value: CanvasNode[T])
+{
+    if(ids.length === 0)
+        return;
+    
+    const actions: HistoryAction<'property'>[] = [];
+
+    for(const id of ids)
+    {
+        const copy = JSON.parse(JSON.stringify(canvas.value.nodes!.find(e => e.id === id)!)) as CanvasNode;
+        canvas.value.nodes!.find(e => e.id === id)![property] = value;
+        actions.push({ element: { type: 'node', id }, from: copy, to: canvas.value.nodes!.find(e => e.id === id)! });
+    }
+
+    addAction('property', actions);
+}
+function editEdgeProperty<T extends keyof CanvasEdge>(ids: string[], property: T, value: CanvasEdge[T])
+{
+    if(ids.length === 0)
+        return;
+    
+    const actions: HistoryAction<'property'>[] = [];
+
+    for(const id of ids)
+    {
+        const copy = JSON.parse(JSON.stringify(canvas.value.edges!.find(e => e.id === id)!)) as CanvasEdge;
+        canvas.value.edges!.find(e => e.id === id)![property] = value;
+        actions.push({ element: { type: 'edge', id }, from: copy, to: canvas.value.edges!.find(e => e.id === id)! });
+    }
+
+    addAction('property', actions);
+}
+
+const unselect = () => {
+    if(focusing.value !== undefined)
+    {
+        focused.value?.dom?.removeEventListener('click', stopPropagation);
+        focused.value?.unselect();
+        updateToolbarTransform();
+    }
+    focusing.value = undefined;
+
+    if(editing.value !== undefined)
+    {
+        edited.value?.dom?.removeEventListener('wheel', stopPropagation);
+        edited.value?.dom?.removeEventListener('dblclick', stopPropagation);
+        edited.value?.dom?.removeEventListener('click', stopPropagation);
+        edited.value?.unselect();
+    }
+    editing.value = undefined;
+};
+const undo = () => {
+    if(!historyCursor.value)
+        return;
+
+    for(const action of historyCursor.value.actions)
+    {
+        if(action.element.type === 'node')
+        {
+            switch(historyCursor.value.event)
+            {
+                case 'create':
+                {
+                    const a = action as HistoryAction<'create'>;
+                    const index = canvas.value.nodes!.findIndex(e => e.id === action.element.id);
+                    snapFinder.remove(canvas.value.nodes!.splice(index, 1)[0]);
+                    break;
+                }
+                case 'remove':
+                {
+                    const a = action as HistoryAction<'remove'>;
+                    canvas.value.nodes!.push(a.from as CanvasNode);
+                    snapFinder.add(a.from as CanvasNode);
+                    break;
+                }
+                case 'property':
+                {
+                    const a = action as HistoryAction<'property'>;
+                    const index = canvas.value.nodes!.findIndex(e => e.id === action.element.id);
+                    canvas.value.nodes![index] = a.from as CanvasNode;
+                    snapFinder.update(a.from as CanvasNode);
+                    break;
+                }
+            }
+        }
+        else if(action.element.type === 'edge')
+        {
+            switch(historyCursor.value.event)
+            {
+                case 'create':
+                {
+                    const a = action as HistoryAction<'create'>;
+                    const index = canvas.value.edges!.findIndex(e => e.id === action.element.id);
+                    canvas.value.edges!.splice(index, 1);
+                    break;
+                }
+                case 'remove':
+                {
+                    const a = action as HistoryAction<'remove'>;
+                    canvas.value.edges!.push(a.from!  as CanvasEdge);
+                    break;
+                }
+                case 'property':
+                {
+                    const a = action as HistoryAction<'property'>;
+                    const index = canvas.value.edges!.findIndex(e => e.id === action.element.id);
+                    canvas.value.edges![index] = a.from as CanvasEdge;
+                    break;
+                }
+            }
+        }
+    }
+
+    historyPos.value--;
+};
+const redo = () => {
+    if(!history.value || history.value.length - 1 <= historyPos.value)
+        return;
+
+    historyPos.value++;
+    
+    if(!historyCursor.value)
+    {
+        historyPos.value--;
+        return;
+    }
+
+    for(const action of historyCursor.value.actions)
+    {        
+        if(action.element.type === 'node')
+        {
+            switch(historyCursor.value.event)
+            {
+                case 'create':
+                {
+                    const a = action as HistoryAction<'create'>;
+                    canvas.value.nodes!.push(a.to as CanvasNode);
+                    snapFinder.add(a.to as CanvasNode);
+                    break;
+                }
+                case 'remove':
+                {
+                    const a = action as HistoryAction<'remove'>;
+                    const index = canvas.value.nodes!.findIndex(e => e.id === action.element.id);
+                    snapFinder.remove(canvas.value.nodes!.splice(index, 1)[0]);
+                    break;
+                }
+                case 'property':
+                {
+                    const a = action as HistoryAction<'property'>;
+                    const index = canvas.value.nodes!.findIndex(e => e.id === action.element.id);
+                    canvas.value.nodes![index] = a.to as CanvasNode;
+                    snapFinder.update(a.to as CanvasNode);
+                    break;
+                }
+            }
+        }
+        else if(action.element.type === 'edge')
+        {
+            switch(historyCursor.value.event)
+            {
+                case 'create':
+                {
+                    const a = action as HistoryAction<'create'>;
+                    canvas.value.edges!.push(a.to as CanvasEdge);
+                    break;
+                }
+                case 'remove':
+                {
+                    const a = action as HistoryAction<'remove'>;
+                    const index = canvas.value.edges!.findIndex(e => e.id === action.element.id);
+                    canvas.value.edges!.splice(index, 1);
+                    break;
+                }
+                case 'property':
+                {
+                    const a = action as HistoryAction<'property'>;
+                    const index = canvas.value.edges!.findIndex(e => e.id === action.element.id);
+                    canvas.value.edges![index] = a.to as CanvasEdge;
+                    break;
+                }
+            }
+        }
+    }
+};
+
+useShortcuts({
+    meta_z: undo,
+    meta_y: redo,
+    Delete: () => { if(focusing.value !== undefined) { remove([focusing.value]) } }
+});
+</script>
+
+<template>
+    <div ref="canvasRef" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none" @dblclick.left="createNode">
+        <div class="flex flex-col absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden gap-4" @click="stopPropagation" @dblclick="stopPropagation">
+            <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10">
+                <Tooltip message="Zoom avant" side="right">
+                    <div @click="zoom = clamp(zoom * 1.1, minZoom, 3); updateTransform()" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                        <Icon icon="radix-icons:plus" />
+                    </div>
+                </Tooltip>
+                <Tooltip message="Reset" side="right">
+                    <div @click="zoom = 1; updateTransform();" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                        <Icon icon="radix-icons:reload" />
+                    </div>
+                </Tooltip>
+                <Tooltip message="Tout contenir" side="right">
+                    <div @click="reset" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                        <Icon icon="radix-icons:corners" />
+                    </div>
+                </Tooltip>
+                <Tooltip message="Zoom arrière" side="right">
+                    <div @click="zoom = clamp(zoom / 1.1, minZoom, 3); updateTransform()" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                        <Icon icon="radix-icons:minus" />
+                    </div>
+                </Tooltip>
+            </div>
+            <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10">
+                <Tooltip message="Annuler (Ctrl+Z)" side="right">
+                    <div @click="undo" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer" :class="{ 'text-light-50 dark:text-dark-50 !cursor-default hover:bg-transparent dark:hover:bg-transparent': historyPos === -1 }">
+                        <Icon icon="ph:arrow-bend-up-left" />
+                    </div>
+                </Tooltip>
+                <Tooltip message="Retablir (Ctrl+Y)" side="right">
+                    <div @click="redo" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer" :class="{ 'text-light-50 dark:text-dark-50 !cursor-default hover:bg-transparent dark:hover:bg-transparent': historyPos === history.length - 1 }">
+                        <Icon icon="ph:arrow-bend-up-right" />
+                    </div>
+                </Tooltip>
+            </div>
+            <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10">
+                <Tooltip message="Préférences" side="right">
+                    <Dialog title="Préférences" iconClose>
+                        <template #trigger>
+                            <div class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                                <Icon icon="radix-icons:gear" />
+                            </div>
+                        </template>
+                        <template #default>
+                            <Switch v-model="canvasSettings.neighborSnap" label="S'accrocher aux voisins" @update:model-value="snapFinder.config.preferences = canvasSettings" />
+                            <Switch v-model="canvasSettings.gridSnap" label="S'accrocher à la grille" @update:model-value="(v) => { canvasSettings.spacing = v ? 32 : undefined; snapFinder.config.preferences = canvasSettings }" />
+                            <NumberPicker v-model="canvasSettings.spacing" label="Taille de la grille" :disabled="!canvasSettings.gridSnap" @update:model-value="(v) => { spacing = v; updateTransform(); snapFinder.config.preferences = canvasSettings}" />
+                        </template>
+                    </Dialog>
+                </Tooltip>
+                <Tooltip message="Aide" side="right">
+                    <Dialog title="Aide" iconClose>
+                        <template #trigger>
+                            <div class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                                <Icon icon="radix-icons:question-mark-circled" />
+                            </div>
+                        </template>
+                        <template #default>
+                            <div class="flex flex-row justify-between px-4">
+                                <div class="flex flex-col gap-2">
+                                    <ProseH4>Ordinateur</ProseH4>
+                                    <div class="flex items-center"><Icon icon="ph:mouse-left-click-fill" class="w-6 h-6"/>: Selectionner</div>
+                                    <div class="flex items-center"><Icon icon="ph:mouse-left-click-fill" class="w-6 h-6"/><Icon icon="ph:mouse-left-click-fill" class="w-6 h-6"/>: Modifier</div>
+                                    <div class="flex items-center"><Icon icon="ph:mouse-middle-click-fill" class="w-6 h-6"/>: Déplacer</div>
+                                    <div class="flex items-center"><Icon icon="ph:mouse-right-click-fill" class="w-6 h-6"/>: Menu</div>
+                                </div>
+                                <div class="flex flex-col gap-2">
+                                    <ProseH4>Mobile</ProseH4>
+                                    <div class="flex items-center"><Icon icon="ph:hand-tap" class="w-6 h-6"/>: Selectionner</div>
+                                    <div class="flex items-center"><Icon icon="ph:hand-tap" class="w-6 h-6"/><Icon icon="ph:hand-tap" class="w-6 h-6"/>: Modifier</div>
+                                    <div class="flex items-center"><Icon icon="mdi:gesture-pinch" class="w-6 h-6"/>: Zoomer</div>
+                                    <div class="flex items-center"><Icon icon="ph:hand-tap" class="w-6 h-6"/> maintenu: Menu</div>
+                                </div>
+                            </div>
+                        </template>
+                    </Dialog>
+                </Tooltip>
+            </div>
+        </div>
+        <svg class="absolute top-0 left-0 w-full h-full pointer-events-none">
+            <pattern ref="patternRef" id="canvasPattern" patternUnits="userSpaceOnUse">
+                <circle cx="0.75" cy="0.75" r="0.75" class="fill-light-35 dark:fill-dark-35"></circle>
+            </pattern>
+            <rect x="0" y="0" width="100%" height="100%" fill="url(#canvasPattern)"></rect>
+        </svg>
+        <div ref="transformRef" :style="{
+            'transform-origin': 'center center',
+        }" class="h-full">
+            <div class="absolute top-0 left-0 w-full h-full pointer-events-none *:pointer-events-auto *:select-none touch-none">
+                <div class="absolute z-20 destination-bottom" ref="toolbarRef">
+                    <template v-if="focusing">
+                        <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 flex flex-row" v-if="focusing.type === 'node'">
+                            <PopoverRoot>
+                                <PopoverTrigger asChild>
+                                    <div @click="stopPropagation">
+                                        <Tooltip message="Couleur" side="top">
+                                            <div class="w-10 h-10 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                                                <Icon icon="ph:palette" class="w-6 h-6" />
+                                            </div>
+                                        </Tooltip>
+                                    </div>
+                                </PopoverTrigger>
+                                <PopoverPortal disabled>
+                                    <PopoverContent align="center" side="top" class="bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 m-2">
+                                        <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 flex flex-row *:cursor-pointer">
+                                            <div @click="editNodeProperty([focusing.id], 'color', undefined)" class="p-2 hover:bg-light-35 hover:dark:bg-dark-35">
+                                                <span class="bg-light-40 dark:bg-dark-40 w-4 h-4 block"></span>
+                                            </div>
+                                            <div @click="editNodeProperty([focusing.id], 'color', { class: 'red' })" class="p-2 hover:bg-light-35 hover:dark:bg-dark-35">
+                                                <span class="bg-light-red dark:bg-dark-red w-4 h-4 block"></span>
+                                            </div>
+                                            <div @click="editNodeProperty([focusing.id], 'color', { class: 'orange' })" class="p-2 hover:bg-light-35 hover:dark:bg-dark-35">
+                                                <span class="bg-light-orange dark:bg-dark-orange w-4 h-4 block"></span>
+                                            </div>
+                                            <div @click="editNodeProperty([focusing.id], 'color', { class: 'yellow' })" class="p-2 hover:bg-light-35 hover:dark:bg-dark-35">
+                                                <span class="bg-light-yellow dark:bg-dark-yellow w-4 h-4 block"></span>
+                                            </div>
+                                            <div @click="editNodeProperty([focusing.id], 'color', { class: 'green' })" class="p-2 hover:bg-light-35 hover:dark:bg-dark-35">
+                                                <span class="bg-light-green dark:bg-dark-green w-4 h-4 block"></span>
+                                            </div>
+                                            <div @click="editNodeProperty([focusing.id], 'color', { class: 'cyan' })" class="p-2 hover:bg-light-35 hover:dark:bg-dark-35">
+                                                <span class="bg-light-cyan dark:bg-dark-cyan w-4 h-4 block"></span>
+                                            </div>
+                                            <div @click="editNodeProperty([focusing.id], 'color', { class: 'purple' })" class="p-2 hover:bg-light-35 hover:dark:bg-dark-35">
+                                                <span class="bg-light-purple dark:bg-dark-purple w-4 h-4 block"></span>
+                                            </div>
+                                            <label>
+                                                <div @click="stopPropagation" class="p-2 hover:bg-light-35 hover:dark:bg-dark-35">
+                                                    <span style="background: conic-gradient(red, yellow, green, blue, purple, red)" class="w-4 h-4 block relative"></span><input @change="(e: Event) => editNodeProperty([focusing!.id], 'color', { hex: (e.target as HTMLInputElement).value })" type="color" class="appearance-none w-0 h-0 absolute" />
+                                                </div>
+                                            </label>
+                                        </div>
+                                    </PopoverContent>
+                                </PopoverPortal>
+                            </PopoverRoot>
+                            <Tooltip message="Supprimer" side="top">
+                                <div @click="remove([focusing])" class="w-10 h-10 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                                    <Icon icon="radix-icons:trash" class="text-light-red dark:text-dark-red w-6 h-6" />
+                                </div>
+                            </Tooltip>
+                        </div>
+                        <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 flex flex-row" v-else>
+                            <PopoverRoot>
+                                <PopoverTrigger asChild>
+                                    <div @click="stopPropagation">
+                                        <Tooltip message="Couleur" side="top">
+                                            <div class="w-10 h-10 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                                                <Icon icon="ph:palette" class="w-6 h-6" />
+                                            </div>
+                                        </Tooltip>
+                                    </div>
+                                </PopoverTrigger>
+                                <PopoverPortal disabled>
+                                    <PopoverContent align="center" side="top" class="bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 m-2">
+                                        <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 flex flex-row *:cursor-pointer">
+                                            <div @click="editEdgeProperty([focusing.id], 'color', undefined)" class="p-2 hover:bg-light-35 hover:dark:bg-dark-35">
+                                                <span class="bg-light-40 dark:bg-dark-40 w-4 h-4 block"></span>
+                                            </div>
+                                            <div @click="editEdgeProperty([focusing.id], 'color', { class: 'red' })" class="p-2 hover:bg-light-35 hover:dark:bg-dark-35">
+                                                <span class="bg-light-red dark:bg-dark-red w-4 h-4 block"></span>
+                                            </div>
+                                            <div @click="editEdgeProperty([focusing.id], 'color', { class: 'orange' })" class="p-2 hover:bg-light-35 hover:dark:bg-dark-35">
+                                                <span class="bg-light-orange dark:bg-dark-orange w-4 h-4 block"></span>
+                                            </div>
+                                            <div @click="editEdgeProperty([focusing.id], 'color', { class: 'yellow' })" class="p-2 hover:bg-light-35 hover:dark:bg-dark-35">
+                                                <span class="bg-light-yellow dark:bg-dark-yellow w-4 h-4 block"></span>
+                                            </div>
+                                            <div @click="editEdgeProperty([focusing.id], 'color', { class: 'green' })" class="p-2 hover:bg-light-35 hover:dark:bg-dark-35">
+                                                <span class="bg-light-green dark:bg-dark-green w-4 h-4 block"></span>
+                                            </div>
+                                            <div @click="editEdgeProperty([focusing.id], 'color', { class: 'cyan' })" class="p-2 hover:bg-light-35 hover:dark:bg-dark-35">
+                                                <span class="bg-light-cyan dark:bg-dark-cyan w-4 h-4 block"></span>
+                                            </div>
+                                            <div @click="editEdgeProperty([focusing.id], 'color', { class: 'purple' })" class="p-2 hover:bg-light-35 hover:dark:bg-dark-35">
+                                                <span class="bg-light-purple dark:bg-dark-purple w-4 h-4 block"></span>
+                                            </div>
+                                            <label>
+                                                <div @click="stopPropagation" class="p-2 hover:bg-light-35 hover:dark:bg-dark-35">
+                                                    <span style="background: conic-gradient(red, yellow, green, blue, purple, red)" class="w-4 h-4 block relative"></span><input @change="(e: Event) => editEdgeProperty([focusing!.id], 'color', { hex: (e.target as HTMLInputElement).value })" type="color" class="appearance-none w-0 h-0 absolute" />
+                                                </div>
+                                            </label>
+                                        </div>
+                                    </PopoverContent>
+                                </PopoverPortal>
+                            </PopoverRoot>
+                            <Tooltip message="Supprimer" side="top">
+                                <div @click="remove([focusing])" class="w-10 h-10 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                                    <Icon icon="radix-icons:trash" class="text-light-red dark:text-dark-red w-6 h-6" />
+                                </div>
+                            </Tooltip>
+                        </div>
+                    </template>
+                </div>
+                <div>
+                    <CanvasNodeEditor v-for="node of canvas.nodes" :key="node.id" ref="nodes" :node="node" :zoom="zoom"
+                    @select="select" @edit="edit" @move="(i, x, y) => moveNode([i], x, y)" @resize="(i, x, y, w, h) => resizeNode([i], x, y, w, h)" @input="(id, text) => editNodeProperty([id], node.type === 'group' ? 'label' : 'text', text)" :snap="snapFinder.findNodeSnapPosition.bind(snapFinder)" @edge="dragStartEdgeTo" />
+                </div>
+                <div>
+                    <CanvasEdgeEditor v-for="edge of canvas.edges" :key="edge.id" ref="edges" :edge="edge" :nodes="canvas.nodes!" @select="select" @edit="edit" @input="(id, text) => editEdgeProperty([id], 'label', text)" @drag="dragStartEdgeSide" />
+                    <div v-if="fakeEdge.path" class="absolute overflow-visible">
+                        <svg class="absolute top-0 overflow-visible h-px w-px">
+                            <g :style="{'--canvas-color': fakeEdge.hex}" class="z-0">
+                                <g :style="`transform: translate(${fakeEdge.path!.to.x}px, ${fakeEdge.path!.to.y}px) scale(var(--zoom-multiplier)) rotate(${rotation[fakeEdge.path!.side]}deg);`">
+                                    <polygon :class="fakeEdge.style?.fill" points="0,0 6.5,10.4 -6.5,10.4"></polygon>
+                                </g>
+                                <path :style="`stroke-width: calc(3px * var(--zoom-multiplier));`" style="stroke-linecap: butt;" :class="fakeEdge.style?.stroke" class="fill-none stroke-[4px]" :d="fakeEdge.path.path"></path>
+                            </g>
+                        </svg>
+                    </div>
+                </div>
+                <svg class="absolute overflow-visible top-0 h-px w-px fill-accent-purple stroke-accent-purple stroke-1 z-50">
+                    <g v-for="hint of hints">
+                        <circle :cx="hint.start.x" :cy="hint.start.y" r="3"  />
+                        <circle v-if="hint.end" :cx="hint.end.x" :cy="hint.end.y" r="3" />
+                        <line v-if="hint.end" :x1="hint.start.x" :x2="hint.end.x" :y1="hint.start.y" :y2="hint.end.y"/>
+                    </g>
+                </svg>
+            </div>
+        </div>
+    </div>
+</template>

components/Editor.vue

@@ -0,0 +1,235 @@
+<script lang="ts">
+import { crosshairCursor, Decoration, dropCursor, EditorView, keymap, ViewPlugin, ViewUpdate, WidgetType, type DecorationSet } from '@codemirror/view';
+import { Annotation, EditorState, RangeValue, SelectionRange, type Range } from '@codemirror/state';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { bracketMatching, defaultHighlightStyle, foldKeymap, HighlightStyle, indentOnInput, syntaxHighlighting, syntaxTree } from '@codemirror/language';
+import { search, searchKeymap } from '@codemirror/search';
+import { closeBrackets, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
+import { lintKeymap } from '@codemirror/lint';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { IterMode, Tree } from '@lezer/common';
+import { tags } from '@lezer/highlight';
+const External = Annotation.define<boolean>();
+const Hidden = Decoration.mark({ class: 'hidden' });
+const Bullet = Decoration.mark({ class: '*:hidden before:absolute before:top-2 before:left-0 before:inline-block before:w-2 before:h-2 before:rounded before:bg-light-40 dark:before:bg-dark-40 relative ps-4' });
+const Blockquote = Decoration.line({ class: '*:hidden before:block !ps-4 relative before:absolute before:top-0 before:bottom-0 before:left-0 before:w-1 before:bg-none before:bg-light-30 dark:before:bg-dark-30' });
+
+const TagTag = tags.special(tags.content);
+
+const intersects = (a: {
+    from: number;
+    to: number;
+}, b: {
+    from: number;
+    to: number;
+}) => !(a.to < b.from || b.to < a.from);
+
+const highlight = HighlightStyle.define([
+    { tag: tags.heading1, class: 'text-5xl pt-4 pb-2 after:hidden' },
+    { tag: tags.heading2, class: 'text-4xl pt-4 pb-2 ps-1 leading-loose after:hidden' },
+    { tag: tags.heading3, class: 'text-2xl font-bold pt-1 after:hidden' },
+    { tag: tags.heading4, class: 'text-xl font-semibold pt-1 after:hidden variant-cap' },
+    { tag: tags.meta, color: "#404740" },
+    { tag: tags.link, textDecoration: "underline" },
+    { tag: tags.heading, textDecoration: "underline", fontWeight: "bold" },
+    { tag: tags.emphasis, fontStyle: "italic" },
+    { tag: tags.strong, fontWeight: "bold" },
+    { tag: tags.strikethrough, textDecoration: "line-through" },
+    { tag: tags.keyword, color: "#708" },
+    { tag: TagTag, class: 'cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30' }
+]);
+
+class Decorator
+{
+    static hiddenNodes: string[] = [
+        'HardBreak',
+        'LinkMark',
+        'EmphasisMark',
+        'CodeMark',
+        'CodeInfo',
+        'URL',
+    ]
+    decorations: DecorationSet;
+    constructor(view: EditorView)
+    {
+        this.decorations = Decoration.set(this.iterate(syntaxTree(view.state), view.visibleRanges, []), true);
+    }
+    update(update: ViewUpdate)
+    {
+        if(!update.docChanged && !update.viewportChanged && !update.selectionSet)
+            return;
+
+        this.decorations = this.decorations.update({
+            filter: (f, t, v) => false,
+            add: this.iterate(syntaxTree(update.state), update.view.visibleRanges, update.state.selection.ranges),
+            sort: true,
+        });
+    }
+    iterate(tree: Tree, visible: readonly {
+        from: number;
+        to: number;
+    }[], selection: readonly SelectionRange[]): Range<Decoration>[]
+    {
+        const decorations: Range<Decoration>[] = [];
+        
+        for (let { from, to } of visible) {
+            tree.iterate({
+                from, to, mode: IterMode.IgnoreMounts,
+                enter: node => {
+                    if(node.node.parent && selection.some(e => intersects(e, node.node.parent!)))
+                        return true;
+
+                    else if(node.name === 'HeaderMark')
+                        decorations.push(Hidden.range(node.from, node.to + 1));
+
+                    else if(Decorator.hiddenNodes.includes(node.name))
+                        decorations.push(Hidden.range(node.from, node.to));
+
+                    else if(node.matchContext(['BulletList', 'ListItem']) && node.name === 'ListMark')
+                        decorations.push(Bullet.range(node.from, node.to + 1));
+
+                    else if(node.matchContext(['Blockquote']))
+                        decorations.push(Blockquote.range(node.from, node.from));
+
+                    return true;
+                },
+            });
+        }
+
+        return decorations;
+    }
+}
+</script>
+
+<script setup lang="ts">
+const { autofocus = false } = defineProps<{
+    placeholder?: string
+    autofocus?: boolean
+}>();
+const model = defineModel<string>();
+
+const editor = useTemplateRef('editor');
+const view = ref<EditorView>();
+
+onMounted(() => {
+    if(editor.value)
+    {
+        view.value = new EditorView({
+            doc: model.value,
+            parent: editor.value,
+            extensions: [
+                markdown({
+                    base: markdownLanguage,
+                    extensions: {
+                        defineNodes: [
+                            { name: "Tag", style: TagTag },
+                            { name: "TagMark", style: tags.processingInstruction }
+                        ],
+                        parseInline: [{
+                            name: "Tag",
+                            parse(cx, next, pos) {
+                                if (next != 35 || cx.char(pos + 1) == 35) return -1;
+                                let elts = [cx.elt("TagMark", pos, pos + 1)];
+                                for (let i = pos + 1; i < cx.end; i++) {
+                                    let next = cx.char(i);
+                                    if (next == 35)
+                                        return cx.addElement(cx.elt("Tag", pos, i + 1, elts.concat(cx.elt("TagMark", i, i + 1))));
+                                    if (next == 92)
+                                        elts.push(cx.elt("Escape", i, i++ + 2));
+                                    if (next == 32 || next == 9 || next == 10 || next == 13) break;
+                                }
+                                return -1
+                            }
+                        }],
+                    }
+                }),
+                history(),
+                search(),
+                dropCursor(),
+                EditorState.allowMultipleSelections.of(true),
+                indentOnInput(),
+                syntaxHighlighting(highlight),
+                bracketMatching(),
+                closeBrackets(),
+                crosshairCursor(),
+                EditorView.lineWrapping,
+                keymap.of([
+                    ...closeBracketsKeymap,
+                    ...defaultKeymap,
+                    ...searchKeymap,
+                    ...historyKeymap,
+                    ...foldKeymap,
+                    ...completionKeymap,
+                    ...lintKeymap
+                ]),
+                EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
+                    if (viewUpdate.docChanged && !viewUpdate.transactions.some(tr => tr.annotation(External)))
+                    {
+                        model.value = viewUpdate.state.doc.toString();
+                    }
+                }),
+                EditorView.contentAttributes.of({spellcheck: "true"}),
+                ViewPlugin.fromClass(Decorator, {
+                    decorations: e => e.decorations,
+                })
+            ]
+        });
+
+        if(autofocus)
+        {
+            view.value.focus();
+        }
+    }
+});
+
+onBeforeUnmount(() => {
+    if (view.value)
+    {
+        view.value?.destroy();
+        view.value = undefined;
+    }
+});
+
+watchEffect(() => {
+    if (model.value === void 0) {
+        return;
+    }
+    const currentValue = view.value ? view.value.state.doc.toString() : "";
+    if (view.value && model.value !== currentValue) {
+        view.value.dispatch({
+            changes: { from: 0, to: currentValue.length, insert: model.value || "" },
+            annotations: [External.of(true)],
+        });
+    }
+});
+
+defineExpose({ focus: () => editor.value?.focus() });
+</script>
+
+<template>
+    <div ref="editor" class="flex flex-1 w-full justify-stretch items-stretch py-2 px-1.5 font-sans text-base"></div>
+</template>
+
+<style>
+.variant-cap
+{
+    font-variant: small-caps;
+}
+.cm-editor
+{
+    @apply bg-transparent;
+    @apply flex-1 h-full;
+    @apply font-sans;
+
+    @apply text-light-100 dark:text-dark-100;
+}
+.cm-editor .cm-content
+{
+    @apply caret-light-100 dark:caret-dark-100;
+}
+.cm-line
+{
+    @apply text-base;
+    @apply font-sans;
+}
+</style>

components/FramedEditor.vue

@@ -0,0 +1,40 @@
+<template>
+    <Editor ref="editor" v-model="model" autofocus :gutters="false" />
+    <iframe ref="iframe" class="w-full h-full border-0" sandbox="allow-same-origin allow-scripts"></iframe>
+</template>
+
+<script setup lang="ts">
+const model = defineModel<string>();
+const editor = useTemplateRef('editor'), iframe = useTemplateRef('iframe');
+
+onMounted(() => {
+    if(iframe.value && iframe.value.contentDocument && editor.value)
+    {
+        editor.value.$el.remove();
+
+        iframe.value.contentDocument.documentElement.setAttribute('class', document.documentElement.getAttribute('class') ?? '');
+        iframe.value.contentDocument.documentElement.setAttribute('style', document.documentElement.getAttribute('style') ?? '');
+
+        const base = iframe.value.contentDocument.head.appendChild(iframe.value.contentDocument.createElement('base'));
+        base.setAttribute('href', window.location.href);
+
+        for(let element of document.getElementsByTagName('link'))
+        {
+            if(element.getAttribute('rel') === 'stylesheet')
+                iframe.value.contentDocument.head.appendChild(element.cloneNode(true));
+        }
+
+        for(let element of document.getElementsByTagName('style'))
+        {
+            iframe.value.contentDocument.head.appendChild(element.cloneNode(true));
+        }
+
+        iframe.value.contentDocument.body.setAttribute('class', document.body.getAttribute('class') ?? '');
+        iframe.value.contentDocument.body.setAttribute('style', document.body.getAttribute('style') ?? '');
+
+        iframe.value.contentDocument.body.appendChild(editor.value.$el);
+
+        editor.value.focus();
+    }
+});
+</script>

components/HoverCard.vue

@@ -1,21 +0,0 @@
-<template>
-    <HoverCardRoot :open-delay="delay">
-        <HoverCardTrigger class="inline-block cursor-help outline-none" asChild>
-            <slot></slot>
-        </HoverCardTrigger>
-        <HoverCardPortal v-if="!disabled">
-            <HoverCardContent :side="side" class="data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 p-5 data-[state=open]:transition-all text-light-100 dark:text-dark-100" >
-                <slot name="content"></slot>
-                <HoverCardArrow class="fill-light-35 dark:fill-dark-35" />
-            </HoverCardContent>
-        </HoverCardPortal>
-    </HoverCardRoot>
-</template>
-
-<script setup lang="ts">
-const { delay = 500, disabled = false, side = 'bottom' } = defineProps<{
-    delay?: number
-    disabled?: boolean
-    side?: 'top' | 'right' | 'bottom' | 'left'
-}>();
-</script>

components/MarkdownRenderer.vue

@@ -0,0 +1,49 @@
+<template>
+	<div v-if="content && content.length > 0">
+		<ProsesRenderer #default v-if="data" :node="data" :proses="proses" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+import { heading } from 'hast-util-heading';
+import { headingRank } from 'hast-util-heading-rank';
+import { parseId } from '~/shared/general.util';
+import type { Root } from 'hast';
+
+const { content, proses, filter } = defineProps<{
+	content: string
+	proses?: Record<string, string | Component>
+	filter?: string
+}>();
+
+const parser = useMarkdown(), data = ref<Root>();
+const node = computed(() => content ? parser(content) : undefined);
+watch([node], () => {
+	if(!node.value)
+		data.value = undefined;
+	else if(!filter)
+	{
+		data.value = node.value;
+	}
+	else
+	{
+		const start = node.value?.children.findIndex(e => heading(e) && parseId(e.properties.id as string | undefined) === filter) ?? -1;
+
+		if(start === -1)
+			data.value = node.value;
+		else
+		{
+			let end = start;
+			const rank = headingRank(node.value.children[start])!;
+			while(end < node.value.children.length)
+			{
+				end++;
+				if(heading(node.value.children[end]) && headingRank(node.value.children[end])! <= rank)
+					break;
+			}
+			data.value = { ...node.value, children: node.value.children.slice(start, end) };
+		}
+	}
+}, { immediate: true, });
+</script>

components/ProsesRenderer.vue

@@ -0,0 +1,115 @@
+<script lang="ts">
+import type { RootContent, Root } from 'hast';
+import { Text, Comment } from 'vue';
+
+import ProseP from '~/components/prose/ProseP.vue';
+import ProseA from '~/components/prose/ProseA.vue';
+import ProseBlockquote from '~/components/prose/ProseBlockquote.vue';
+import ProseCallout from './prose/ProseCallout.vue';
+import ProseCode from '~/components/prose/ProseCode.vue';
+import ProsePre from '~/components/prose/ProsePre.vue';
+import ProseEm from '~/components/prose/ProseEm.vue';
+import ProseH1 from '~/components/prose/ProseH1.vue';
+import ProseH2 from '~/components/prose/ProseH2.vue';
+import ProseH3 from '~/components/prose/ProseH3.vue';
+import ProseH4 from '~/components/prose/ProseH4.vue';
+import ProseH5 from '~/components/prose/ProseH5.vue';
+import ProseH6 from '~/components/prose/ProseH6.vue';
+import ProseHr from '~/components/prose/ProseHr.vue';
+import ProseImg from '~/components/prose/ProseImg.vue';
+import ProseUl from '~/components/prose/ProseUl.vue';
+import ProseOl from '~/components/prose/ProseOl.vue';
+import ProseLi from '~/components/prose/ProseLi.vue';
+import ProseSmall from './prose/ProseSmall.vue';
+import ProseStrong from '~/components/prose/ProseStrong.vue';
+import ProseTable from '~/components/prose/ProseTable.vue';
+import ProseTag from '~/components/prose/ProseTag.vue';
+import ProseThead from '~/components/prose/ProseThead.vue';
+import ProseTbody from '~/components/prose/ProseTbody.vue';
+import ProseTd from '~/components/prose/ProseTd.vue';
+import ProseTh from '~/components/prose/ProseTh.vue';
+import ProseTr from '~/components/prose/ProseTr.vue';
+import ProseScript from '~/components/prose/ProseScript.vue';
+
+const proseList = {
+    "p": ProseP,
+    "a": ProseA,
+    "blockquote": ProseBlockquote,
+    "callout": ProseCallout,
+    "code": ProseCode,
+    "pre": ProsePre,
+    "em": ProseEm,
+    "h1": ProseH1,
+    "h2": ProseH2,
+    "h3": ProseH3,
+    "h4": ProseH4,
+    "h5": ProseH5,
+    "h6": ProseH6,
+    "hr": ProseHr,
+    "img": ProseImg,
+    "ul": ProseUl,
+    "ol": ProseOl,
+    "li": ProseLi,
+    "small": ProseSmall,
+    "strong": ProseStrong,
+    "table": ProseTable,
+    "tag": ProseTag,
+    "thead": ProseThead,
+    "tbody": ProseTbody,
+    "td": ProseTd,
+    "th": ProseTh,
+    "tr": ProseTr,
+    "script": ProseScript
+};
+
+export default defineComponent({
+    name: 'MarkdownRenderer',
+    props: {
+        node: {
+            type: Object,
+            required: true
+        },
+        proses: {
+            type: Object,
+            default: () => ({})
+        }
+    },
+    async setup(props) {
+        if(props.proses)
+        {
+            for(const prose of Object.keys(props.proses))
+            {
+                if(typeof props.proses[prose] === 'string')
+                    props.proses[prose] = await resolveComponent(props.proses[prose]);
+            }
+        }
+        return { tags: Object.assign({}, proseList, props.proses) };
+    },
+    render(ctx: any) {
+        const { node, tags } = ctx;
+
+        if(!node)
+            return null;
+
+        return h('div', null, {default: () => (node as Root).children.map(e => renderNode(e, tags)).filter(e => !!e)});
+    }
+});
+
+function renderNode(node: RootContent, tags: Record<string, any>): VNode | undefined
+{
+    if(node.type === 'text' && node.value.length > 0 && node.value !== '\n')
+    {
+        return h(Text, node.value);
+    }
+    else if(node.type === 'comment' && node.value.length > 0 && node.value !== '\n')
+    {
+        return h(Comment, node.value);
+    }
+    else if(node.type === 'element')
+    {
+        return h(tags[node.tagName] ?? node.tagName, { ...node.properties, class: node.properties.className }, { default: () => node.children.map(e => renderNode(e, tags)).filter(e => !!e) });
+    }
+
+    return undefined;
+}
+</script>

components/SelectItem.vue

@@ -1,18 +0,0 @@
-<template>
-    <SelectItem :value="value" :disabled="disabled" class="">
-        <SelectItemText class="">{{ label }}</SelectItemText>
-        <SelectItemIndicator class="">
-            <Icon icon="radix-icons:check" />
-        </SelectItemIndicator>
-    </SelectItem>
-</template>
-
-<script setup lang="ts">
-import { Icon } from '@iconify/vue/dist/iconify.js';
-import { SelectItem } from 'radix-vue';
-const { disabled = false, value } = defineProps<{
-    disabled?: boolean
-    value: NonNullable<any>
-    label: string
-}>();
-</script>

components/Switch.vue

@@ -1,20 +0,0 @@
-<template>
-    <Label class="flex justify-center items-center my-2">{{ label }}
-        <SwitchRoot v-model:checked="model" :disabled="disabled"
-            class="mx-3 w-12 h-6 select-none transition-colors border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
-        data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35  hover:border-light-50 dark:hover:border-dark-50  focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
-        data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20">
-            <SwitchThumb
-                class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 data-[state=checked]:translate-x-[26px]
-                data-[disabled]:bg-light-30 dark:data-[disabled]:bg-dark-30 data-[disabled]:border-light-30 dark:data-[disabled]:border-dark-30" />
-        </SwitchRoot>
-    </Label>
-</template>
-
-<script setup lang="ts">
-const { label, disabled } = defineProps<{
-    label?: string
-    disabled?: boolean
-}>();
-const model = defineModel<boolean>();
-</script>

components/ThemeSwitch.client.vue

@@ -0,0 +1,16 @@
+<script setup>
+const colorMode = useColorMode()
+
+const isDark = computed({
+    get() {
+        return colorMode.value === 'dark'
+    },
+    set() {
+        colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+    }
+})
+</script>
+
+<template>
+    <Switch v-model="isDark" onIcon="radix-icons:moon" offIcon="radix-icons:sun" />
+</template>

components/Toast.vue

@@ -1,64 +0,0 @@
-<template>
-    <ToastRoot :duration="duration" class="ToastRoot grid grid-cols-8 bg-light-10 dark:bg-dark-10 p-3 border border-light-30 dark:border-dark-30" v-model:open="model">
-        <ToastTitle class="font-semibold text-xl col-span-7 text-light-70 dark:text-dark-70" asChild><h4>{{ title }}</h4></ToastTitle>
-        <ToastClose v-if="closeable" aria-label="Close" class="text-2xl -translate-y-1/2 translate-x-1/2 cursor-pointer"><span aria-hidden>×</span></ToastClose>
-        <ToastDescription class="text-md col-span-8 text-light-70 dark:text-dark-70" asChild><span>{{ content }}</span></ToastDescription>
-    </ToastRoot>
-
-    <ToastViewport class="fixed bottom-0 right-0 flex flex-col p-6 gap-2 max-w-[512px] z-50 outline-none min-w-72" />
-</template>
-
-<script setup lang="ts">
-const model = defineModel<boolean>();
-
-const { closeable = true, duration, title, content } = defineProps<{
-    closeable?: boolean
-    duration?: number
-    title: string
-    content: string
-}>();
-</script>
-
-<style>
-.ToastRoot[data-state='open'] {
-  animation: slideIn .15s cubic-bezier(0.16, 1, 0.3, 1);
-}
-.ToastRoot[data-state='closed'] {
-  animation: hide .1s ease-in;
-}
-.ToastRoot[data-swipe='move'] {
-  transform: translateX(var(--radix-toast-swipe-move-x));
-}
-.ToastRoot[data-swipe='cancel'] {
-  transform: translateX(0);
-  transition: transform .2s ease-out;
-}
-.ToastRoot[data-swipe='end'] {
-  animation: swipeRight .1s ease-out;
-}
-
-@keyframes hide {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes slideIn {
-  from {
-    transform: translateX(calc(100% + var(--viewport-padding)));
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-@keyframes swipeRight {
-  from {
-    transform: translateX(var(--radix-toast-swipe-end-x));
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
-</style>

components/TrainingConfigEditor.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { CharacterConfig, MainStat, TrainingLevel } from '~/types/character';
+import PreviewA from './prose/PreviewA.vue';
+
+const { config } = defineProps<{
+    config: CharacterConfig
+}>();
+
+const selection = ref<{
+    stat: MainStat;
+    level: TrainingLevel;
+    option: number;
+}>();
+
+function focusTraining(stat: MainStat, level: TrainingLevel, option: number)
+{
+    const s = selection.value;
+    if(s !== undefined && s.stat === stat && s.level === level && s.option === option)
+    {
+        selection.value = undefined;
+    }
+    else
+    {
+        selection.value = {
+            stat, level, option
+        };
+    }
+}
+</script>
+
+<template>
+    <TrainingViewer :config="config" progress>
+        <template #default="{ stat, level, option }">
+            <div @click.capture="console.log" class="border border-light-40 dark:border-dark-40 hover:border-light-70 dark:hover:border-dark-70 cursor-pointer px-2 py-1 w-[400px]" :class="{ '!border-accent-blue': selection !== undefined && selection?.stat == stat && selection?.level == level && selection?.option == option }">
+                <MarkdownRenderer :proses="{ 'a': PreviewA }" :content="config.training[stat][level][option].description.map(e => e.text).join('\n')" />
+            </div>
+        </template>
+    </TrainingViewer>
+</template>

components/TrainingViewer.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { MAIN_STATS, mainStatTexts, type CharacterConfig } from '~/types/character';
+
+const { config } = defineProps<{
+    config: CharacterConfig
+}>();
+
+const position = ref(0);
+</script>
+
+<template>
+    <div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10 min-h-20">
+        <div class="flex flex-shrink gap-3 items-center relative w-48 ms-12">
+            <span v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent 
+            hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="position = i"></span>
+            <span :style="{ 'left': position * 1.5 + 'em' }" :data-text="mainStatTexts[MAIN_STATS[position]]" class="rounded-full w-3 h-3 bg-accent-blue absolute transition-[left]
+            after:content-[attr(data-text)] after:absolute after:-translate-x-1/2 after:top-4 after:p-px after:bg-light-0 dark:after:bg-dark-0 after:text-center"></span>
+        </div>
+        <div class="flex-1 flex">
+            <slot name="addin" :stat="MAIN_STATS[position]"></slot>
+        </div>
+        <span></span>
+    </div>
+    <div class="flex flex-1 px-8 overflow-hidden max-w-full">
+        <div class="relative cursor-grab active:cursor-grabbing select-none transition-[left] flex flex-1 flex-row max-w-full" :style="{ 'left': `-${position * 100}%` }">
+            <div class="flex flex-shrink-0 flex-col gap-4 relative w-full overflow-y-auto px-20" v-for="(stat, name) in config.training">
+                <template v-for="(options, level) of stat">
+                    <div class="w-full flex h-px"><div class="border-t border-dashed border-light-50 dark:border-dark-50 w-full"></div><span class="relative left-4">{{ level }}</span></div>
+                    <div class="flex flex-row gap-4 justify-center">
+                        <template v-for="(option, i) in options">
+                            <slot :stat="name" :level="level" :option="i"></slot>
+                        </template>
+                    </div>
+                </template>
+            </div>
+            <!-- <div class="flex flex-shrink-0 flex-col gap-4 relative w-full overflow-y-auto px-20" v-for="(stat, name) in config.training" >
+                <div class="flex flex-row gap-2 justify-center relative" v-for="(options, level) in stat">
+                    <template v-if="progress">
+                        <div class="absolute left-0 right-0 -top-2 h-px border-t border-light-30 dark:border-dark-30 border-dashed">
+                            <span class="absolute right-0 p-1 text-end">{{ level }}</span>
+                        </div>
+                    </template>
+                    <template v-for="(option, i) in options">
+                        <slot :stat="name" :level="level" :option="i"></slot>
+                    </template>
+                </div>
+            </div> -->
+        </div>
+    </div>
+</template>

components/base/Avatar.vue

@@ -0,0 +1,30 @@
+<template>
+    <AvatarRoot class="inline-flex select-none items-center justify-center overflow-hidden align-middle" :class="SIZES[size]">
+        <AvatarImage class="h-full w-full object-cover" :src="src" asChild @loading-status-change="(status) => loading = status === 'loading'">
+            <img :src="src" />
+        </AvatarImage>
+        <AvatarFallback :delay-ms="0" class="text-light-100 dark:text-dark-100 leading-1 flex h-full w-full p-4 items-center justify-center bg-light-25 dark:bg-dark-25 font-medium">
+            <Loading v-if="loading" />
+            <Icon v-else-if="!!icon" :icon="icon" class="w-full h-full" />
+            <span v-else-if="!!text">{{ text }}</span>
+        </AvatarFallback>
+    </AvatarRoot>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+const { src, icon, text, size = 'medium' } = defineProps<{
+    src: string
+    icon?: string
+    text?: string
+    size?: keyof typeof SIZES
+}>();
+const loading = ref(true);
+</script>
+<script lang="ts">
+const SIZES = {
+    'small': 'h-6',
+    'medium': 'h-10',
+    'large': 'h-16',
+};
+</script>

components/base/Button.vue

@@ -0,0 +1,18 @@
+<template>
+    <button :disabled="disabled" class="text-light-100 dark:text-dark-100 font-semibold hover:bg-light-30 dark:hover:bg-dark-30 inline-flex items-center justify-center bg-light-25 dark:bg-dark-25 leading-none outline-none
+    border border-light-25 dark:border-dark-25 hover:border-light-30 dark:hover:border-dark-30 active:border-light-40 dark:active:border-dark-40 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
+    disabled:bg-light-10 dark:disabled:bg-dark-10 disabled:border-none disabled:text-light-50 dark:disabled:text-dark-50"
+    :class="{'p-1': loading || icon, 'h-[35px] px-[15px]': !loading && !icon}" @click="!loading && emit('click')">
+        <Loading v-if="loading" />
+        <slot v-else />
+    </button>
+</template>
+
+<script setup lang="ts">
+const { icon = false, loading = false, disabled = false } = defineProps<{
+    icon?: boolean
+    loading?: boolean
+    disabled?: boolean
+}>();
+const emit = defineEmits(['click']);
+</script>

components/base/Collapsible.vue

@@ -0,0 +1,47 @@
+<template>
+    <CollapsibleRoot v-model:open="model" :disabled="disabled" :defaultOpen="defaultOpen">
+        <slot name="alwaysVisible"></slot>
+        <div class="flex flex-row justify-center items-center">
+            <span>{{ label }}<slot name="label"></slot></span>
+            <CollapsibleTrigger class="ms-4" asChild>
+                <Button icon :disabled="disabled">
+                    <Icon v-if="model" icon="radix-icons:cross-2" class="h-4 w-4" />
+                    <Icon v-else icon="radix-icons:row-spacing" class="h-4 w-4" />
+                </Button>
+            </CollapsibleTrigger>
+        </div>
+        <CollapsibleContent class="overflow-hidden data-[state=closed]:animate-[collapseClose_0.2s_ease-in-out] data-[state=open]:animate-[collapseOpen_0.2s_ease-in-out]">
+            <slot></slot>
+        </CollapsibleContent>
+    </CollapsibleRoot>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+const { label, disabled = false, defaultOpen = false } = defineProps<{
+    label?: string
+    disabled?: boolean
+    defaultOpen?: boolean
+}>();
+const model = defineModel<boolean>();
+</script>
+
+<style>
+@keyframes collapseOpen {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height);
+  }
+}
+
+@keyframes collapseClose {
+  from {
+    height: var(--radix-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}
+</style>

components/base/Combobox.vue

@@ -0,0 +1,45 @@
+<template>
+    <Label class="my-2 flex flex-1 items-center justify-between flex-col md:flex-row">
+        <span class="pb-1 md:p-0">{{ label }}</span>
+        <ComboboxRoot v-model:model-value="model" v-model:open="open" :multiple="multiple">
+            <ComboboxAnchor  :disabled="disabled" class="mx-4 inline-flex min-w-[150px] items-center justify-between px-3 text-sm font-semibold leading-none h-8 gap-1
+                bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 outline-none data-[placeholder]:font-normal
+                data-[placeholder]:text-light-50 dark:data-[placeholder]:text-dark-50 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
+                hover:border-light-50 dark:hover:border-dark-50">
+                <ComboboxTrigger class="flex flex-1 justify-between !cursor-pointer">
+                    <span v-if="!multiple">{{ model !== undefined ? options.find(e => e[1] === model)![0] : "" }}</span>
+                    <span class="flex gap-2" v-else><span v-if="model !== undefined">{{ options.find(e => e[1] === (model as T[])[0]) !== undefined ? options.find(e => e[1] === (model as T[])[0])![0] : undefined }}</span><span v-if="model !== undefined && (model as T[]).length > 1">{{((model as T[]).length > 1 ? `+${(model as T[]).length - 1}` : "") }}</span></span>
+                    <Icon icon="radix-icons:caret-down" class="h-4 w-4" />
+                </ComboboxTrigger>
+            </ComboboxAnchor>
+
+            <ComboboxPortal :disabled="disabled">
+                <ComboboxContent :position="position" align="start" class="min-w-[150px] bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] z-50">
+                    <ComboboxViewport>
+                        <ComboboxItem v-for="[label, value] of options" :value="value" :disabled="disabled" class="text-base py-2 leading-none text-light-60 dark:text-dark-60 flex items-center px-6 relative Combobox-none data-[disabled]:text-light-50 dark:data-[disabled]:text-dark-50 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-light-30 dark:data-[highlighted]:bg-dark-30 data-[highlighted]:text-light-100 dark:data-[highlighted]:text-dark-100">
+                            <span class="">{{ label }}</span>
+                            <ComboboxItemIndicator class="absolute left-1 w-4 inline-flex items-center justify-center">
+                                <Icon icon="radix-icons:check" />
+                            </ComboboxItemIndicator>
+                        </ComboboxItem>
+                    </ComboboxViewport>
+                </ComboboxContent>
+            </ComboboxPortal>
+        </ComboboxRoot>
+    </Label>
+</template>
+
+<script setup lang="ts" generic="T extends string | number | boolean | Record<string, any>">
+import { ComboboxInput, ComboboxTrigger, ComboboxViewport, ComboboxContent, ComboboxPortal, ComboboxRoot } from 'radix-vue'
+import { Icon } from '@iconify/vue/dist/iconify.js';
+const { disabled = false, position = 'popper', multiple = false } = defineProps<{
+	placeholder?: string
+    disabled?: boolean
+    position?: 'inline' | 'popper'
+    label?: string
+    multiple?: boolean
+    options: Array<[string, T]>
+}>();
+const open = ref(false);
+const model = defineModel<T | T[]>();
+</script>

components/base/Dialog.vue

@@ -1,6 +1,6 @@
 <template>
-    <DialogRoot v-if="!priority">
-        <DialogTrigger asChild><Button>{{ label }}</Button></DialogTrigger>
+    <DialogRoot v-if="!priority" v-model="model">
+        <DialogTrigger asChild><Button v-if="!!label">{{ label }}</Button><slot name="trigger" /></DialogTrigger>
         <DialogPortal v-if="!disabled">
             <DialogOverlay class="bg-light-0 dark:bg-dark-0 opacity-70 fixed inset-0 z-40" />
             <DialogContent class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30 p-6 z-50 text-light-100 dark:text-dark-100">
@@ -13,8 +13,8 @@
             </DialogContent>
         </DialogPortal>
     </DialogRoot>
-    <AlertDialogRoot v-else>
-        <AlertDialogTrigger asChild><Button>{{ label }}</Button></AlertDialogTrigger>
+    <AlertDialogRoot v-else v-model="model">
+        <AlertDialogTrigger asChild><Button v-if="!!label">{{ label }}</Button><slot name="trigger" /></AlertDialogTrigger>
         <AlertDialogPortal v-if="!disabled">
             <AlertDialogOverlay class="bg-light-0 dark:bg-dark-0 opacity-70 fixed inset-0 z-40" />
             <AlertDialogContent class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30 p-6 z-50 text-light-100 dark:text-dark-100">
@@ -35,4 +35,5 @@ const { label, title, description, priority = false, disabled = false, iconClose
     disabled?: boolean
     iconClose?: boolean
 }>();
+const model = defineModel();
 </script>

components/base/DraggableTree.vue

@@ -0,0 +1,80 @@
+<template>
+	<TreeRoot v-bind="forward" v-slot="{ flattenItems }" class="list-none select-none text-light-100 dark:text-dark-100 overflow-auto max-h-full">
+		<DraggableTreeItem v-for="item in flattenItems" :key="item._id" v-bind="item" class="group flex items-center outline-none relative cursor-pointer max-w-full" @select.prevent @toggle.prevent>
+			<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, isDraggedOver }">
+				<slot :handleToggle="handleToggle"
+						:handleSelect="handleSelect"
+						:isExpanded="isExpanded"
+						:isSelected="isSelected"
+						:isDragging="isDragging"
+						:isDraggedOver="isDraggedOver"
+						:item="item"
+					/>
+			</template>
+			<template #hint="{ instruction }">
+				<div v-if="instruction">
+					<slot name="hint" :instruction="instruction" />
+				</div>
+			</template>
+		</DraggableTreeItem>
+	</TreeRoot>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { useForwardPropsEmits, type FlattenedItem, type TreeRootEmits, type TreeRootProps } from 'radix-vue';
+import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item'
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+
+const props = defineProps<TreeRootProps<T>>();
+const emits = defineEmits<TreeRootEmits<T> & {
+		'updateTree': [instruction: Instruction, itemId: string, targetId: string];
+}>();
+
+defineSlots<{
+	default: (props: {
+		handleToggle: () => void, 
+		handleSelect: () => void, 
+		isExpanded: boolean, 
+		isSelected: boolean, 
+		isDragging: boolean, 
+		isDraggedOver: boolean, 
+		item: FlattenedItem<T>, 
+	}) => any,
+	hint: (props: {
+		instruction: Extract<Instruction, { type: 'reorder-above' | 'reorder-below' | 'make-child' }> | null
+	}) => any,
+}>();
+
+const forward = useForwardPropsEmits(props, emits);
+
+watchEffect((onCleanup) => {
+	const dndFunction = combine(
+		monitorForElements({
+			onDrop(args) {
+				const { location, source } = args;
+				
+				if (!location.current.dropTargets.length)
+					return;
+
+				const itemId = source.data.id as string;
+				const target = location.current.dropTargets[0];
+				const targetId = target.data.id as string;
+
+				const instruction: Instruction | null = extractInstruction(
+					target.data,
+				);
+
+				if (instruction !== null)
+				{
+					emits('updateTree', instruction, itemId, targetId);
+				}
+			},
+		}),
+	)
+
+	onCleanup(() => {
+		dndFunction();
+	})
+})
+</script>

components/base/DraggableTreeItem.vue

@@ -0,0 +1,140 @@
+<template>
+	<TreeItem ref="el" v-bind="forward" v-slot="{ isExpanded, isSelected, isIndeterminate, handleToggle, handleSelect }">
+		<slot
+				:is-expanded="isExpanded"
+				:is-selected="isSelected"
+				:is-indeterminate="isIndeterminate"
+				:handle-select="handleSelect"
+				:handle-toggle="handleToggle"
+				:isDragging="isDragging"
+				:isDraggedOver="isDraggedOver"
+		/>
+		<div v-if="instruction">
+			<slot name="hint" :instruction="instruction" />
+		</div>
+	</TreeItem>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { useForwardPropsEmits, type FlattenedItem, type TreeItemEmits, type TreeItemProps } from 'radix-vue';
+import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+import { type Instruction, attachInstruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item'
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
+
+const props = defineProps<TreeItemProps<T> & FlattenedItem<T>>();
+const emits = defineEmits<TreeItemEmits<T>>();
+
+defineSlots<{
+	default: (props: {
+		isExpanded: boolean
+		isSelected: boolean
+		isIndeterminate: boolean | undefined
+		isDragging: boolean
+		isDraggedOver: boolean
+		handleToggle: () => void
+		handleSelect: () => void
+	}) => any,
+	hint: (props: {
+		instruction: Extract<Instruction, { type: 'reorder-above' | 'reorder-below' | 'make-child' }> | null
+	}) => any,
+}>()
+
+const forward = useForwardPropsEmits(props, emits);
+
+const element = templateRef('el');
+const isDragging = ref(false);
+const isDraggedOver = ref(false);
+const isInitialExpanded = ref(false);
+const instruction = ref<Extract<Instruction, { type: 'reorder-above' | 'reorder-below' | 'make-child' }> | null>(null);
+
+const mode = computed(() => {
+	if (props.hasChildren)
+		return 'expanded'
+	if (props.index + 1 === props.parentItem?.children?.length)
+		return 'last-in-group'
+	return 'standard'
+});
+
+watchEffect((onCleanup) => {
+	const currentElement = unrefElement(element) as HTMLElement;
+
+	if (!currentElement)
+		return
+
+	const item = { ...props.value, level: props.level, id: props._id }
+
+	const expandItem = () => {
+		if (!element.value?.isExpanded) {
+				element.value?.handleToggle()
+		}
+	}
+
+	const closeItem = () => {
+		if (element.value?.isExpanded) {
+				element.value?.handleToggle()
+		}
+	}
+
+	const dndFunction = combine(
+		draggable({
+			element: currentElement,
+			getInitialData: () => item,
+			onDragStart: () => {
+				isDragging.value = true
+				isInitialExpanded.value = element.value?.isExpanded ?? false
+				closeItem()
+			},
+			onDrop: () => {
+				isDragging.value = false
+				if (isInitialExpanded.value)
+					expandItem()
+			},
+		}),
+
+		dropTargetForElements({
+			element: currentElement,
+			getData: ({ input, element }) => {
+				const data = { id: item.id }
+
+				return attachInstruction(data, {
+					input,
+					element,
+					indentPerLevel: 16,
+					currentLevel: props.level,
+					mode: mode.value,
+					block: [],
+				})
+			},
+			canDrop: ({ source }) => {
+				return source.data.id !== item.id
+			},
+			onDrag: ({ self }) => {
+				instruction.value = extractInstruction(self.data) as typeof instruction.value
+			},
+			onDragEnter: ({ source }) => {
+				if (source.data.id !== item.id) {
+					isDraggedOver.value = true
+				}
+			},
+			onDragLeave: () => {
+				isDraggedOver.value = false
+				instruction.value = null
+			},
+			onDrop: ({ location }) => {
+				isDraggedOver.value = false
+				instruction.value = null
+			},
+			getIsSticky: () => true,
+		}),
+
+		monitorForElements({
+			canMonitor: ({ source }) => {
+				return source.data.id !== item.id
+			},
+		}),
+	)
+
+	// Cleanup dnd function
+	onCleanup(() => dndFunction())
+})
+</script>

components/base/DropdownContentRender.vue

@@ -0,0 +1,73 @@
+<template>
+    <template v-for="(item, idx) of options">
+        <template v-if="item.type === 'item'">
+            <DropdownMenuItem :disabled="item.disabled" :textValue="item.label" @select="item.select" :class="{'!pe-1': item.kbd}" class="cursor-pointer text-base text-light-100 dark:text-dark-100 leading-none flex items-center py-1.5 relative ps-7 pe-4 select-none outline-none data-[disabled]:text-light-60 dark:data-[disabled]:text-dark-60 data-[disabled]:pointer-events-none data-[highlighted]:bg-light-35 dark:data-[highlighted]:bg-dark-35">
+                <Icon v-if="item.icon" :icon="item.icon" class="absolute left-1.5" />
+                <div class="flex flex-1 justify-between">
+                    <span>{{ item.label }}</span>
+                    <span v-if="item.kbd" class="mx-2 text-xs font-mono text-light-70 dark:text-dark-70 relative top-0.5"> {{ item.kbd }} </span>
+                </div>
+            </DropdownMenuItem>
+        </template>
+        
+        <template v-else-if="item.type === 'checkbox'">
+            <DropdownMenuCheckboxItem :disabled="item.disabled" :textValue="item.label" v-model:checked="item.checked" @update:checked="item.select" class="cursor-pointer text-base text-light-100 dark:text-dark-100 leading-none flex items-center py-1.5 relative pe-4 select-none outline-none data-[disabled]:text-light-60 dark:data-[disabled]:text-dark-60 data-[disabled]:pointer-events-none data-[highlighted]:bg-light-35 dark:data-[highlighted]:bg-dark-35">
+                <span class="w-6 flex items-center justify-center">
+                    <DropdownMenuItemIndicator>
+                        <Icon icon="radix-icons:check" />
+                    </DropdownMenuItemIndicator>
+                </span>
+                <div class="flex flex-1 justify-between">
+                    <span>{{ item.label }}</span>
+                    <span v-if="item.kbd" class="mx-2 text-xs font-mono text-light-70 dark:text-dark-70 relative top-0.5"> {{ item.kbd }} </span>
+                </div>
+            </DropdownMenuCheckboxItem>
+        </template>
+        
+        <!-- TODO -->
+        <template v-if="item.type === 'radio'">
+            <DropdownMenuLabel>{{ item.label }}</DropdownMenuLabel>
+            <DropdownMenuRadioGroup @update:model-value="item.change">
+                <DropdownMenuRadioItem v-for="option in item.items" :disabled="(option as any)?.disabled ?? false" :value="(option as any)?.value ?? option">
+                    <DropdownMenuItemIndicator>
+                        <Icon icon="radix-icons:dot-filled" />
+                    </DropdownMenuItemIndicator>
+                    <span>{{ (option as any)?.label || option }}</span>
+                </DropdownMenuRadioItem>
+            </DropdownMenuRadioGroup>
+
+            <DropdownMenuSeparator v-if="idx !== options.length - 1" />
+        </template>
+        
+        <template v-if="item.type === 'submenu'">
+            <DropdownMenuSub>
+                <DropdownMenuSubTrigger class="group cursor-pointer text-base text-light-100 dark:text-dark-100 leading-none flex items-center py-1.5 relative ps-7 select-none outline-none data-[disabled]:text-light-60 dark:data-[disabled]:text-dark-60 data-[disabled]:pointer-events-none data-[highlighted]:bg-light-35 dark:data-[highlighted]:bg-dark-35">
+                    <Icon v-if="item.icon" :icon="item.icon" />
+                    <span>{{ item.label }}</span>
+                    <Icon icon="radix-icons:chevron-right" class="absolute right-1" />
+                </DropdownMenuSubTrigger>
+                <DropdownMenuPortal>
+                    <DropdownMenuSubContent class="z-50 outline-none bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade border border-light-35 dark:border-dark-35">
+                        <DropdownContentRender :options="item.items" />
+                    </DropdownMenuSubContent>
+                </DropdownMenuPortal>
+            </DropdownMenuSub>
+        </template>
+        
+        <template v-if="item.type === 'group'">
+            <DropdownMenuLabel class="text-light-70 dark:text-dark-70 text-sm text-center pt-1">{{ item.label }}</DropdownMenuLabel>
+            <DropdownContentRender :options="item.items" />
+
+            <DropdownMenuSeparator v-if="idx !== options.length - 1" />
+        </template>
+    </template>
+</template>
+
+<script setup lang="ts">
+import type { DropdownOption } from './DropdownMenu.vue';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+
+const { options } = defineProps<{
+    options: DropdownOption[]
+}>();
+</script>

components/base/DropdownMenu.vue

@@ -0,0 +1,58 @@
+<template>
+	<DropdownMenuRoot>
+		<DropdownMenuTrigger :disabled="disabled"><slot /></DropdownMenuTrigger>
+
+		<DropdownMenuPortal>
+			<DropdownMenuContent :align="align" :side="side" class="z-50 outline-none bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade border border-light-35 dark:border-dark-35">
+				<DropdownContentRender :options="options" />
+
+				<DropdownMenuArrow class="fill-light-35 dark:fill-dark-35" />
+			</DropdownMenuContent>
+		</DropdownMenuPortal>
+	</DropdownMenuRoot>
+</template>
+
+<script setup lang="ts">
+export interface DropdownItem {
+	type: 'item';
+	label: string;
+	disabled?: boolean;
+	select?: () => void;
+	icon?: string;
+	kbd?: string;
+}
+export interface DropdownCheckbox {
+	type: 'checkbox';
+	label: string;
+	disabled?: boolean;
+	checked?: boolean | Ref<boolean>
+	select?: (state: boolean) => void;
+	kbd?: string;
+}
+export interface DropdownRadioGroup {
+	type: 'radio';
+	label: string;
+	value?: string | Ref<string>
+	items: (string | {label: string, value?: string, disabled?: boolean})[];
+	change?: (value: string) => void;
+}
+export interface DropdownSubmenu {
+	type: 'submenu';
+	label: string;
+	disabled?: boolean;
+	items: DropdownOption[];
+	icon?: string;
+}
+export interface DropdownGroup {
+	type: 'group';
+	label?: string;
+	items: DropdownOption[];
+}
+export type DropdownOption = DropdownItem | DropdownCheckbox | DropdownRadioGroup | DropdownSubmenu | DropdownGroup;
+const { options, disabled = false, side, align } = defineProps<{
+	options: DropdownOption[]
+	disabled?: boolean
+	side?: 'top' | 'right' | 'bottom' | 'left'
+	align?: 'start' | 'center' | 'end'
+}>();
+</script>

components/base/HoverCard.vue

@@ -0,0 +1,36 @@
+<template>
+    <HoverCardRoot :open-delay="delay" @update:open="(...args) => emits('open', ...args)">
+        <HoverCardTrigger class="inline-block cursor-help outline-none">
+            <slot></slot>
+        </HoverCardTrigger>
+        <HoverCardPortal v-if="!disabled">
+            <HoverCardContent :class="$attrs.class" :side="side" :align="align" avoidCollisions :collisionPadding="20" class="max-h-[var(--radix-hover-card-content-available-height)] data-[side=bottom]:animate-slideUpAndFade data-[side=right]:animate-slideLeftAndFade data-[side=left]:animate-slideRightAndFade data-[side=top]:animate-slideDownAndFade w-[300px] bg-light-10 dark:bg-dark-10 border border-light-35 dark:border-dark-35 p-5 data-[state=open]:transition-all text-light-100 dark:text-dark-100" >
+                <slot name="content"></slot>
+                <HoverCardArrow class="fill-light-35 dark:fill-dark-35" />
+            </HoverCardContent>
+        </HoverCardPortal>
+    </HoverCardRoot>
+</template>
+
+<script setup lang="ts">
+const { delay = 500, disabled = false, side = 'bottom', align = 'center', triggerKey } = defineProps<{
+    delay?: number
+    disabled?: boolean
+    side?: 'top' | 'right' | 'bottom' | 'left'
+    align?: 'start' | 'center' | 'end'
+    triggerKey?: string
+}>();
+
+const emits = defineEmits(['open']);
+const canOpen = ref(true);
+
+if(triggerKey)
+{
+    const magicKeys = useMagicKeys();
+    const keys = magicKeys[triggerKey];
+
+    watch(keys, (v) => {
+        canOpen.value = v;
+    }, { immediate: true, });
+}
+</script>

components/base/Kbd.vue

@@ -0,0 +1,3 @@
+<template>
+    <span class="rounded bg-light-35 dark:bg-dark-35 font-mono text-sm px-1 py-0 select-none" style="box-shadow: black 0 2px 0 1px;"><slot /></span>
+</template>

components/base/Loading.vue

@@ -0,0 +1,9 @@
+<template>
+    <span :class="{'w-6 h-6 border-4 border-transparent after:-top-[4px] after:-left-[4px] after:w-6 after:h-6 after:border-4': size === 'normal', 'w-4 h-4 after:-top-[2px] after:-left-[2px] after:w-4 after:h-4 after:border-2': size === 'small', 'w-12 h-12 after:-top-[6px] after:-left-[6px] after:w-12 after:h-12 after:border-[6px]': size === 'large'}" class="after:block after:relative after:rounded-full after:border-transparent after:border-t-accent-purple after:animate-spin"></span>
+</template>
+
+<script setup lang="ts">
+const { size = 'normal' } = defineProps<{
+    size?: 'small' | 'normal' | 'large'
+}>();
+</script>

components/base/Select.vue

@@ -1,6 +1,7 @@
 <template>
-    <Label>{{ label }}
-        <SelectRoot :v-model="model">
+    <Label class="my-2 flex flex-1 items-center justify-between flex-col md:flex-row">
+        <span class="pb-1 md:p-0">{{ label }}</span>
+        <SelectRoot v-model="model" :default-value="defaultValue">
             <SelectTrigger :disabled="disabled" class="mx-4 inline-flex min-w-[160px] items-center justify-between px-3 text-sm font-semibold leading-none h-8 gap-1
                 bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 outline-none data-[placeholder]:font-normal
                 data-[placeholder]:text-light-50 dark:data-[placeholder]:text-dark-50 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
@@ -11,12 +12,12 @@
 
             <SelectPortal :disabled="disabled">
                 <SelectContent :position="position"
-                    class="min-w-[160px] bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] z-40">
+                    class="min-w-[160px] bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] z-50">
                     <SelectScrollUpButton>
                         <Icon icon="radix-icons:chevron-up" />
                     </SelectScrollUpButton>
-                    <SelectViewport class="p-1">
-                        <slot></slot>
+                    <SelectViewport>
+                        <slot />
                     </SelectViewport>
                     <SelectScrollDownButton>
                         <Icon icon="radix-icons:chevron-down" />
@@ -28,12 +29,14 @@
 </template>
 
 <script setup lang="ts">
+import { SelectContent, SelectPortal, SelectRoot, SelectScrollDownButton, SelectScrollUpButton, SelectTrigger, SelectValue, SelectViewport } from 'radix-vue'
 import { Icon } from '@iconify/vue/dist/iconify.js';
-const { placeholder, disabled = false, position = 'popper', label } = defineProps<{
+const { disabled = false, position = 'popper' } = defineProps<{
 	placeholder?: string
     disabled?: boolean
     position?: 'item-aligned' | 'popper'
     label?: string
+    defaultValue?: string
 }>();
-const model = defineModel();
+const model = defineModel<string>();
 </script>

components/base/SelectGroup.vue

@@ -1,7 +1,7 @@
 <template>
     <SelectGroup :disabled="disabled" class="">
         <SelectLabel class="">{{ label }}</SelectLabel>
-        <slot></slot>
+        <slot />
     </SelectGroup>
 </template>
 

components/base/SelectItem.vue

@@ -0,0 +1,18 @@
+<template>
+    <SelectItem :value="value" :disabled="disabled" class="text-base py-2 leading-none text-light-60 dark:text-dark-60 flex items-center px-6 relative select-none data-[disabled]:text-light-50 dark:data-[disabled]:text-dark-50 data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-light-30 dark:data-[highlighted]:bg-dark-30 data-[highlighted]:text-light-100 dark:data-[highlighted]:text-dark-100">
+        <SelectItemText class="">{{ label }}</SelectItemText>
+        <SelectItemIndicator class="absolute left-1 w-4 inline-flex items-center justify-center">
+            <Icon icon="radix-icons:check" />
+        </SelectItemIndicator>
+    </SelectItem>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import { SelectItem, SelectItemIndicator, SelectItemText } from 'radix-vue'
+const { disabled = false, value } = defineProps<{
+    disabled?: boolean
+    value: NonNullable<string>
+    label: string
+}>();
+</script>

components/base/Switch.vue

@@ -0,0 +1,27 @@
+<template>
+    <Label class="flex justify-center items-center my-2">
+        <span class="md:text-base text-sm">{{ label }}</span>
+        <SwitchRoot v-model:checked="model" :disabled="disabled" :default-checked="defaultValue"
+            class="group mx-3 w-12 h-6 select-none transition-all border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
+        data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35  hover:border-light-50 dark:hover:border-dark-50  focus:shadow-raw focus:shadow-light-40 dark:focus:shadow-dark-40
+        data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 relative">
+            <SwitchThumb
+                class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 data-[state=checked]:translate-x-[26px]
+                data-[disabled]:bg-light-30 dark:data-[disabled]:bg-dark-30 data-[disabled]:border-light-30 dark:data-[disabled]:border-dark-30" />
+            <Icon v-if="onIcon && offIcon" :icon="onIcon" class="group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-0 absolute top-1 left-1 transition-opacity" />
+            <Icon v-if="onIcon && offIcon" :icon="offIcon" class="group-data-[state=checked]:opacity-0 group-data-[state=unchecked]:opacity-100 absolute top-1 right-1 transition-opacity" />
+        </SwitchRoot>
+    </Label>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+const { label, disabled, onIcon, offIcon } = defineProps<{
+    label?: string
+    disabled?: boolean
+    onIcon?: string
+    offIcon?: string
+    defaultValue?: boolean
+}>();
+const model = defineModel<boolean>();
+</script>

components/base/TagsInput.vue

@@ -0,0 +1,21 @@
+<template>
+    <TagsInputRoot v-model="model" addOnPaste class="flex gap-2 items-center border p-2 w-full flex-wrap border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10" >
+        <TagsInputItem v-for="item in model" :key="item" :value="item" class="text-light-100 dark:text-dark-100 flex items-center justify-center gap-2 bg-light-20 dark:bg-dark-20 hover:bg-light-35 dark:hover:bg-dark-35 p-1 border border-light-35 dark:border-dark-35">
+            <TagsInputItemText class="text-sm pl-1" />
+            <TagsInputItemDelete asChild>
+                <Icon icon="radix-icons:cross-2" class="w-4 h-4 cursor-pointer" />
+            </TagsInputItemDelete>
+        </TagsInputItem>
+
+        <TagsInputInput :placeholder="placeholder" class="text-sm focus:outline-none flex-1 rounded text-green9 bg-transparent placeholder:text-mauve9 px-1" />
+    </TagsInputRoot>
+</template>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+
+const { placeholder } = defineProps<{
+    placeholder?: string
+}>();
+const model = defineModel<string[]>();
+</script>

components/base/TextInput.vue

@@ -1,10 +1,11 @@
 <template>
-    <Label class="px-4 my-2">{{ label }}
+    <Label class="my-2 flex flex-1 items-center justify-between flex-col md:flex-row">
+        <span class="pb-1 md:p-0">{{ label }}</span>
         <input :placeholder="placeholder" :disabled="disabled"
             class="mx-4 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50
         bg-light-20 dark:bg-dark-20 appearance-none outline-none px-3 py-1 focus:shadow-raw transition-[box-shadow] focus:shadow-light-40 dark:focus:shadow-dark-40
         border border-light-35 dark:border-dark-35 hover:border-light-50 dark:hover:border-dark-50 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20"
-            :type="type" v-model="model" :data-disabled="disabled || undefined">
+            :type="type" v-model="model" :data-disabled="disabled || undefined" v-bind="$attrs" @change="(e) => emits('change', e)" @input="(e) => emits('input', e)">
     </Label>
 </template>
 
@@ -15,5 +16,10 @@ const { type = 'text', label, disabled = false, placeholder } = defineProps<{
     disabled?: boolean
     placeholder?: string
 }>();
+
+const emits = defineEmits<{
+    change: [Event]
+    input: [Event]
+}>();
 const model = defineModel<string>();
 </script>

components/base/Toaster.vue

@@ -0,0 +1,94 @@
+<template>
+	<ToastProvider>
+		<ToastRoot v-for="toast in model" :key="toast.id" :duration="toast.duration" class="ToastRoot bg-light-10 dark:bg-dark-10 border border-light-30 dark:border-dark-30 group" :open="toast.state ?? true" @update:open="(state: boolean) => tryClose(toast, state)" :data-type="toast.type ?? 'info'">
+			<div class="grid grid-cols-8 px-3 pt-2 pb-2">
+				<ToastTitle v-if="toast.title" class="font-semibold text-xl col-span-7 text-light-70 dark:text-dark-70" asChild><h4>{{ toast.title }}</h4></ToastTitle>
+				<ToastClose v-if="toast.closeable" aria-label="Close" class="text-xl -translate-y-2 translate-x-4 cursor-pointer"><span aria-hidden>×</span></ToastClose>
+				<ToastDescription v-if="toast.content" class="text-sm col-span-8 text-light-100 dark:text-dark-100" asChild><span>{{ toast.content }}</span></ToastDescription>
+			</div>
+			<TimerProgress v-if="toast.timer" shape="thin" :delay="toast.duration" class="mb-0 mt-0 w-full 
+			group-data-[type=error]:*:bg-light-red dark:group-data-[type=error]:*:bg-dark-red group-data-[type=success]:*:bg-light-green dark:group-data-[type=success]:*:bg-dark-green
+			group-data-[type=error]:bg-light-red dark:group-data-[type=error]:bg-dark-red group-data-[type=success]:bg-light-green dark:group-data-[type=success]:bg-dark-green !bg-opacity-50" 
+			@finish="() => tryClose(toast, false)" />
+		</ToastRoot>
+	
+		<ToastViewport class="fixed bottom-0 right-0 flex flex-col p-6 gap-2 max-w-[512px] z-50 outline-none min-w-72" />
+	</ToastProvider>
+</template>
+
+<script setup lang="ts">
+const model = defineModel<ExtraToastConfig[]>();
+
+function tryClose(config: ExtraToastConfig, state: boolean)
+{
+	if(!state)
+	{
+		const m = model.value;
+		if(m)
+		{
+			const idx = m?.findIndex(e => e.id === config.id);
+			m[idx].state = false;
+			model.value = m;
+		}
+		setTimeout(() => model.value?.splice(model.value?.findIndex(e => e.id === config.id), 1), 500);
+	}
+}
+</script>
+
+<style>
+.ToastRoot[data-type='error'] {
+	@apply border-light-red;
+	@apply dark:border-dark-red;
+	@apply bg-light-red;
+	@apply dark:bg-dark-red;
+	@apply !bg-opacity-50;
+}
+.ToastRoot[data-type='success'] {
+	@apply border-light-green;
+	@apply dark:border-dark-green;
+	@apply bg-light-green;
+	@apply dark:bg-dark-green;
+	@apply !bg-opacity-50;
+}
+.ToastRoot[data-state='open'] {
+	animation: slideIn .15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+.ToastRoot[data-state='closed'] {
+	animation: hide .1s ease-in;
+}
+.ToastRoot[data-swipe='move'] {
+	transform: translateX(var(--radix-toast-swipe-move-x));
+}
+.ToastRoot[data-swipe='cancel'] {
+	transform: translateX(0);
+	transition: transform .2s ease-out;
+}
+.ToastRoot[data-swipe='end'] {
+	animation: swipeRight .1s ease-out;
+}
+
+@keyframes hide {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+@keyframes slideIn {
+	from {
+		transform: translateX(calc(100% + var(--viewport-padding)));
+	}
+	to {
+		transform: translateX(0);
+	}
+}
+@keyframes swipeRight {
+	from {
+		transform: translateX(var(--radix-toast-swipe-end-x));
+	}
+	to {
+		transform: translateX(100%);
+	}
+}
+</style>

components/base/Tooltip.vue

@@ -4,7 +4,7 @@
             <span tabindex="0"><slot></slot></span>
         </TooltipTrigger>
         <TooltipPortal>
-            <TooltipContent class="TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70" :side="side" :side-offset="['left', 'right'].includes(side ?? '') ? 8 : 0">
+            <TooltipContent class="TooltipContent border border-light-30 dark:border-dark-30 px-2 py-1 bg-light-10 dark:bg-dark-10 text-light-70 dark:text-dark-70 z-50" :class="$attrs.class" :side="side" :align="align" :align-offset="-16" :side-offset="['left', 'right'].includes(side ?? '') ? 8 : 0">
                 {{ message }}
                 <TooltipArrow class="fill-light-30 dark:fill-dark-30"></TooltipArrow>
             </TooltipContent>
@@ -15,9 +15,10 @@
 <script setup lang="ts">
 const { message, delay = 300, side } = defineProps<{
     message: string
-    delay?: number,
+    delay?: number
     disabled?: boolean
     side?: 'left' | 'right' | 'top' | 'bottom'
+    align?: 'start' | 'center' | 'end'
 }>();
 </script>
 

components/base/Tree.vue

@@ -0,0 +1,20 @@
+<template>
+    <TreeRoot v-slot="{ flattenItems }" class="list-none select-none text-light-100 dark:text-dark-100 text-sm" :items="model" :get-key="getKey" :defaultExpanded="flatten(model)">
+        <TreeItem v-for="item in flattenItems" v-slot="{ isExpanded }" :key="item._id" :style="{ 'padding-left': `${item.level / 2 - 0.5}em` }" v-bind="item.bind" class="flex items-center ps-2 outline-none relative cursor-pointer">
+            <slot :isExpanded="isExpanded" :item="item" />
+        </TreeItem>
+    </TreeRoot>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, any>">
+const { getKey } = defineProps<{
+    getKey: (val: T) => string
+}>();
+
+const model = defineModel<T[]>();
+
+function flatten(arr: T[]): string[]
+{
+    return arr.filter(e => e.open).flatMap(e => [getKey(e), ...flatten(e.children ?? [])]);
+}
+</script>

components/canvas/CanvasEdge.vue

@@ -0,0 +1,42 @@
+<template>
+    <div class="absolute overflow-visible">
+        <div v-if="edge.label" :style="{ transform: `${labelPos} translate(-50%, -50%)` }" class="relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 z-20">{{ edge.label }}</div>
+        <svg class="absolute top-0 overflow-visible h-px w-px">
+            <g :style="{'--canvas-color': edge.color?.hex}" class="z-0">
+                <g :style="`transform: translate(${path!.to.x}px, ${path!.to.y}px) scale(var(--zoom-multiplier)) rotate(${rotation[path!.side]}deg);`">
+                    <polygon :class="style.fill" points="0,0 6.5,10.4 -6.5,10.4"></polygon>
+                </g>
+                <path :style="`stroke-width: calc(3px * var(--zoom-multiplier));`" style="stroke-linecap: butt;" :class="style.stroke" class="fill-none stroke-[4px]" :d="path!.path"></path>
+            </g>
+        </svg>
+    </div>
+</template>
+
+<style>
+.fill-colored
+{
+    --tw-bg-opacity: 1;
+    fill: rgba(from var(--canvas-color) r g b / var(--tw-bg-opacity));
+}
+</style>
+<script setup lang="ts">
+import { getPath, labelCenter, rotation } from '#shared/canvas.util';
+import type { CanvasEdge, CanvasNode } from '~/types/canvas';
+
+const { edge, nodes } = defineProps<{
+    edge: CanvasEdge
+    nodes: CanvasNode[]
+}>();
+
+const from = computed(() => nodes!.find(f => f.id === edge.fromNode));
+const to = computed(() => nodes!.find(f => f.id === edge.toNode));
+const path = computed(() => getPath(from.value!, edge.fromSide, to.value!, edge.toSide));
+const labelPos = computed(() => labelCenter(from.value!, edge.fromSide, to.value!, edge.toSide));
+
+const style = computed(() => {
+    return edge.color ? edge.color?.class ? 
+        { fill: `fill-light-${edge.color?.class} dark:fill-dark-${edge.color?.class}`, stroke: `stroke-light-${edge.color?.class} dark:stroke-dark-${edge.color?.class}` } : 
+        { fill: `fill-colored`, stroke: `stroke-[color:var(--canvas-color)]` } : 
+        { stroke: `stroke-light-40 dark:stroke-dark-40`, fill: `fill-light-40 dark:fill-dark-40` }
+});
+</script>

components/canvas/CanvasEdgeEditor.vue

@@ -0,0 +1,98 @@
+<template>
+    <div class="absolute overflow-visible group" :class="{ 'z-[1]': focusing }">
+        <input v-autofocus v-if="editing" @click="e => e.stopImmediatePropagation()" :style="{ transform: `${labelPos} translate(-50%, -50%)` }" class="relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 z-20" v-model="edge.label" />
+        <div v-else-if="edge.label" :style="{ transform: `${labelPos} translate(-50%, -50%)` }" class="relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 z-20" @click.left="select" @dblclick.left="edit">{{ edge.label }}</div>
+        <svg ref="dom" class="absolute top-0 overflow-visible h-px w-px">
+            <g :style="{'--canvas-color': edge.color?.hex}" class="z-0">
+                <g :style="`transform: translate(${path.to.x}px, ${path.to.y}px) scale(var(--zoom-multiplier)) rotate(${rotation[path.side]}deg);`">
+                    <polygon :class="style.fill" points="0,0 6.5,10.4 -6.5,10.4"></polygon>
+                </g>
+                <path :style="`stroke-width: calc(${focusing ? 6 : 3}px * var(--zoom-multiplier));`" style="stroke-linecap: butt;" :class="style.stroke" class="transition-[stroke-width] fill-none stroke-[4px]" :d="path.path"></path>
+                <path style="stroke-width: calc(22px * var(--zoom-multiplier));" class="fill-none transition-opacity z-30 opacity-0 hover:opacity-25" :class="[style.stroke, { 'opacity-25': focusing }]" :d="path.path" @click="select" @dblclick="edit"></path>
+            </g>
+        </svg>
+        <span v-if="focusing && !editing" :style="`transform: translate(${path.from.x}px, ${path.from.y}px) translate(-50%, -50%) scale(var(--zoom-multiplier))`" @mousedown.left="(e) => dragEdge(e, 'from')" :class="style.fill" class="hidden group-hover:block z-[31] absolute rounded-full border-2 border-light-70 dark:border-dark-70 bg-light-30 dark:bg-dark-30 w-6 h-6"></span>
+        <span v-if="focusing && !editing" :style="`transform: translate(${path.to.x}px, ${path.to.y}px) translate(-50%, -50%) scale(var(--zoom-multiplier))`" @mousedown.left="(e) => dragEdge(e, 'to')" :class="style.fill" class="hidden group-hover:block z-[31] absolute rounded-full border-2 border-light-70 dark:border-dark-70 bg-light-30 dark:bg-dark-30 w-6 h-6"></span>
+    </div>
+</template>
+
+<style>
+.fill-colored
+{
+    --tw-bg-opacity: 1;
+    fill: rgba(from var(--canvas-color) r g b / var(--tw-bg-opacity));
+}
+</style>
+<script setup lang="ts">
+import { getPath, labelCenter, rotation } from '#shared/canvas.util';
+import type { Element } from '../CanvasEditor.vue';
+import type { CanvasEdge, CanvasNode } from '~/types/canvas';
+
+const { edge, nodes } = defineProps<{
+    edge: CanvasEdge
+    nodes: CanvasNode[]
+}>();
+
+const emit = defineEmits<{
+    (e: 'select', id: Element): void,
+    (e: 'edit', id: Element): void,
+    (e: 'drag', id: string, _e: MouseEvent, origin: 'from' | 'to'): void,
+    (e: 'input', id: string, text?: string): void,
+}>();
+
+const dom = useTemplateRef('dom');
+const focusing = ref(false), editing = ref(false);
+
+const from = computed(() => nodes!.find(f => f.id === edge.fromNode));
+const to = computed(() => nodes!.find(f => f.id === edge.toNode));
+const path = computed(() => getPath(from.value!, edge.fromSide, to.value!, edge.toSide)!);
+const labelPos = computed(() => labelCenter(from.value!, edge.fromSide, to.value!, edge.toSide));
+
+let oldText = edge.label;
+
+function select(e: Event) {
+    if(editing.value)
+        return;
+
+    focusing.value = true;
+    emit('select', { type: 'edge', id: edge.id });
+}
+function edit(e: Event) {
+    oldText = edge.label;
+
+    focusing.value = true;
+    editing.value = true;
+
+    e.stopImmediatePropagation();
+    emit('edit', { type: 'edge', id: edge.id });
+}
+function dragEdge(e: MouseEvent, origin: 'from' | 'to') {
+    e.stopImmediatePropagation();
+
+    emit('drag', edge.id, e, origin);
+}
+function unselect() {
+    if(editing.value)
+    {
+        const text = edge.label;
+        
+        if(text !== oldText)
+        {
+            edge.label = oldText;
+
+            emit('input', edge.id, text);
+        }
+    }
+    focusing.value = false;
+    editing.value = false;
+}
+
+defineExpose({ unselect, dom, id: edge.id, path });
+
+const style = computed(() => {
+    return edge.color ? edge.color?.class ? 
+        { fill: `fill-light-${edge.color?.class} dark:fill-dark-${edge.color?.class}`, stroke: `stroke-light-${edge.color?.class} dark:stroke-dark-${edge.color?.class}`, outline: `outline-light-${edge.color?.class} dark:outline-dark-${edge.color?.class}` } : 
+        { fill: `fill-colored`, stroke: `stroke-[color:var(--canvas-color)]`, outline: `outline-[color:var(--canvas-color)]` } : 
+        { stroke: `stroke-light-40 dark:stroke-dark-40`, fill: `fill-light-40 dark:fill-dark-40`, outline: `outline-light-40 dark:outline-dark-40` }
+});
+</script>

components/canvas/CanvasNode.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="absolute" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-color': node.color?.hex}" :class="{'-z-10': node.type === 'group', 'z-10': node.type !== 'group'}">
+        <div :class="[style.border]" class="outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 w-full h-full hover:outline-4">
+            <div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07] overflow-auto" :class="style.bg">
+                <div v-if="node.text?.length > 0" class="flex items-center">
+                    <MarkdownRenderer :content="node.text" />
+                </div>
+            </div>
+        </div>
+        <div v-if="node.type === 'group' && node.label !== undefined" :class="style.border" style="max-width: 100%; font-size: calc(18px * var(--zoom-multiplier))" class="origin-bottom-left tracking-wider border-4 truncate inline-block text-light-100 dark:text-dark-100 absolute bottom-[100%] mb-2 px-2 py-1 font-thin">{{ node.label }}</div>
+    </div>
+</template>
+
+<style>
+.bg-colored
+{
+    --tw-bg-opacity: 1;
+    background-color: rgba(from var(--canvas-color) r g b / var(--tw-bg-opacity));
+}
+</style>
+<script setup lang="ts">
+import type { CanvasNode } from '~/types/canvas';
+
+const { node } = defineProps<{
+    node: CanvasNode
+    zoom: number
+}>();
+
+const style = computed(() => {
+    return node.color ? node.color?.class ? 
+        { bg: `bg-light-${node.color?.class} dark:bg-dark-${node.color?.class}`, border: `border-light-${node.color?.class} dark:border-dark-${node.color?.class}` } : 
+        { bg: `bg-colored`, border: `border-[color:var(--canvas-color)]` } : 
+        { border: `border-light-40 dark:border-dark-40`, bg: `bg-light-40 dark:bg-dark-40` }
+});
+</script>

components/canvas/CanvasNodeEditor.vue

@@ -0,0 +1,190 @@
+<template>
+    <div class="absolute" ref="dom" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-color': node.color?.hex}" :class="{'-z-10': node.type === 'group', 'z-10': node.type !== 'group'}">
+        <div v-if="!editing || node.type === 'group'" style="outline-style: solid;" :class="[style.border, style.outline, { '!outline-4 cursor-move': focusing }]" class="outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 w-full h-full hover:outline-4">
+            <div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07] overflow-auto" :class="style.bg" @click.left="(e) => { if(node.type !== 'group') selectNode(e) }" @dblclick.left="(e) => { if(node.type !== 'group') editNode(e) }">
+                <div v-if="node.text?.length > 0" class="flex items-center">
+                    <MarkdownRenderer :content="node.text" :proses="{ a: FakeA }" />
+                </div>
+            </div>
+            <div v-if="focusing">
+                <span @mousedown.left="(e) => resizeNode(e, 0, 1, 0, -1)" id="n " class="cursor-n-resize absolute -top-3 -right-3 -left-3  h-6 group">
+                    <span @mousedown.left="(e) => dragEdge(e, 'top')" :class="[style.bg]" class="hidden group-hover:block absolute rounded-full border-2 border-light-70 dark:border-dark-70 w-6 h-6 -top-1.5 left-1/2 -translate-x-3"></span>
+                </span> <!-- North -->
+                <span @mousedown.left="(e) => resizeNode(e, 0, 0, 0, 1)" id="s " class="cursor-s-resize absolute -bottom-3 -right-3 -left-3 h-6 group">
+                    <span @mousedown.left="(e) => dragEdge(e, 'bottom')" :class="[style.bg]" class="hidden group-hover:block absolute rounded-full border-2 border-light-70 dark:border-dark-70 w-6 h-6 -bottom-1.5 left-1/2 -translate-x-3"></span>
+                </span> <!-- South -->
+                <span @mousedown.left="(e) => resizeNode(e, 0, 0, 1, 0)" id="e " class="cursor-e-resize absolute -top-3 -bottom-3 -right-3 w-6 group">
+                    <span @mousedown.left="(e) => dragEdge(e, 'right')" :class="[style.bg]" class="hidden group-hover:block absolute rounded-full border-2 border-light-70 dark:border-dark-70 w-6 h-6 -right-1.5 top-1/2 -translate-y-3"></span>
+                </span> <!-- East -->
+                <span @mousedown.left="(e) => resizeNode(e, 1, 0, -1, 0)" id="w " class="cursor-w-resize absolute -top-3 -bottom-3 -left-3 w-6 group">
+                    <span @mousedown.left="(e) => dragEdge(e, 'left')" :class="[style.bg]" class="hidden group-hover:block absolute rounded-full border-2 border-light-70 dark:border-dark-70 w-6 h-6 -left-1.5 top-1/2 -translate-y-3"></span>
+                </span> <!-- West -->
+                <span @mousedown.left="(e) => resizeNode(e, 1, 1, -1, -1)" id="nw" class="cursor-nw-resize absolute -top-4 -left-4  w-8 h-8"></span> <!-- North West -->
+                <span @mousedown.left="(e) => resizeNode(e, 0, 1, 1, -1)" id="ne" class="cursor-ne-resize absolute -top-4 -right-4 w-8 h-8"></span> <!-- North East -->
+                <span @mousedown.left="(e) => resizeNode(e, 0,  0, 1, 1)" id="se" class="cursor-se-resize absolute -bottom-4 -right-4 w-8 h-8"></span> <!-- South East -->
+                <span @mousedown.left="(e) => resizeNode(e, 1, 0, -1, 1)" id="sw" class="cursor-sw-resize absolute -bottom-4 -left-4  w-8 h-8"></span> <!-- South West -->
+            </div>
+        </div>
+        <div v-else style="outline-style: solid;" :class="[style.border, style.outline, { '!outline-4': focusing }]" class="outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 overflow-hidden contain-strict w-full h-full flex py-2" >
+            <FramedEditor v-model="node.text" autofocus :gutters="false"/>
+        </div>
+        <div v-if="!editing && node.type === 'group' && node.label !== undefined"  @click.left="(e) => selectNode(e)" @dblclick.left="(e) => editNode(e)" :class="style.border" style="max-width: 100%; font-size: calc(18px * var(--zoom-multiplier))" class="origin-bottom-left tracking-wider border-4 truncate inline-block text-light-100 dark:text-dark-100 absolute bottom-[100%] mb-2 px-2 py-1 font-thin">{{ node.label }}</div>
+        <input v-else-if="editing && node.type === 'group'" v-model="node.label" @click="e => e.stopImmediatePropagation()" v-autofocus :class="[style.border, style.outline]" style="max-width: 100%; font-size: calc(18px * var(--zoom-multiplier))" class="origin-bottom-left tracking-wider border-4 truncate inline-block text-light-100 dark:text-dark-100 absolute bottom-[100%] appearance-none bg-transparent outline-4 mb-2 px-2 py-1 font-thin min-w-4" />
+    </div>
+</template>
+
+<style>
+.bg-colored
+{
+    --tw-bg-opacity: 1;
+    background-color: rgba(from var(--canvas-color) r g b / var(--tw-bg-opacity));
+}
+</style>
+<script setup lang="ts">
+import type { Box, Direction } from '#shared/canvas.util';
+import type { Element } from '../CanvasEditor.vue';
+import FakeA from '../prose/FakeA.vue';
+import type { CanvasNode } from '~/types/canvas';
+
+const { node, zoom, snap } = defineProps<{
+    node: CanvasNode
+    zoom: number,
+    snap: (activeNode: CanvasNode, resizeHandle?: Box) => Partial<Box>,
+}>();
+
+const emit = defineEmits<{
+    (e: 'select', id: Element): void,
+    (e: 'edit', id: Element): void,
+    (e: 'move', id: string, x: number, y: number): void,
+    (e: 'resize', id: string, x: number, y: number, w: number, h: number): void,
+    (e: 'input', id: string, text: string): void,
+    (e: 'edge', id: string, _e: MouseEvent, side: Direction): void,
+}>();
+
+const dom = useTemplateRef('dom');
+const focusing = ref(false), editing = ref(false);
+let oldText = node.type === 'group' ? node.label : node.text;
+
+function selectNode(e: Event) {
+    if(editing.value)
+        return;
+
+    focusing.value = true;
+    emit('select', { type: 'node', id: node.id });
+
+    dom.value?.addEventListener('mousedown', dragstart, { passive: true });
+}
+function editNode(e: Event) {
+    focusing.value = true;
+    editing.value = true;
+
+    oldText = node.type === 'group' ? node.label : node.text;
+
+    e.stopImmediatePropagation();
+
+    dom.value?.removeEventListener('mousedown', dragstart);
+    emit('edit', { type: 'node', id: node.id });
+}
+function resizeNode(e: MouseEvent, x: number, y: number, w: number, h: number) {
+    e.stopImmediatePropagation();
+
+    const startx = node.x, starty = node.y, startw = node.width, starth = node.height;
+    let realx = node.x, realy = node.y, realw = node.width, realh = node.height;
+    const resizemove = (e: MouseEvent) => {
+        if(e.button !== 0)
+            return;
+
+        realx = realx + (e.movementX / zoom) * x;
+        realy = realy + (e.movementY / zoom) * y;
+        realw = Math.max(realw + (e.movementX / zoom) * w, 64);
+        realh = Math.max(realh + (e.movementY / zoom) * h, 64);
+
+        const result = e.altKey ? undefined : snap({ ...node, x: realx, y: realy, width: realw, height: realh }, { x, y, w, h });
+
+        node.x = result?.x ?? realx;
+        node.y = result?.y ?? realy;
+        node.width = result?.w ?? realw;
+        node.height = result?.h ?? realh;
+    };
+    const resizeend = (e: MouseEvent) => {
+        if(e.button !== 0)
+            return;
+
+        emit('resize', node.id, node.x - startx, node.y - starty, node.width - startw, node.height - starth);
+
+        window.removeEventListener('mousemove', resizemove);
+        window.removeEventListener('mouseup', resizeend);
+    }
+
+    window.addEventListener('mousemove', resizemove);
+    window.addEventListener('mouseup', resizeend);
+}
+function dragEdge(e: MouseEvent, direction: Direction) {
+    e.stopImmediatePropagation();
+
+    emit('edge', node.id, e, direction)
+}
+function unselect() {
+    if(editing.value)
+    {
+        const text = node.type === 'group' ? node.label : node.text;
+        
+        if(text !== oldText)
+        {
+            if(node.type === 'group')
+                node.label = oldText;
+            else
+                node.text = oldText;
+
+            emit('input', node.id, text);
+        }
+    }
+    focusing.value = false;
+    editing.value = false;
+
+    dom.value?.removeEventListener('mousedown', dragstart);
+}
+
+let lastx = 0, lasty = 0;
+let realx = 0, realy = 0;
+const dragmove = (e: MouseEvent) => {
+    if(e.button !== 0)
+        return;
+
+    realx += e.movementX / zoom;
+    realy += e.movementY / zoom;
+
+    const result = e.altKey ? undefined : snap({ ...node, x: realx, y: realy });
+
+    node.x = result?.x ?? realx;
+    node.y = result?.y ?? realy;
+};
+const dragend = (e: MouseEvent) => {
+    if(e.button !== 0)
+        return;
+    
+    window.removeEventListener('mousemove', dragmove);
+    window.removeEventListener('mouseup', dragend);
+
+    emit('move', node.id, node.x - lastx, node.y - lasty);
+};
+const dragstart = (e: MouseEvent) => {
+    if(e.button !== 0)
+        return;
+    
+    lastx = node.x, lasty = node.y;
+    realx = node.x, realy = node.y;
+
+    window.addEventListener('mousemove', dragmove, { passive: true });
+    window.addEventListener('mouseup', dragend, { passive: true });
+};
+
+defineExpose({ unselect, dom, id: node.id });
+
+const style = computed(() => {
+    return node.color ? node.color?.class ? 
+        { bg: `bg-light-${node.color?.class} dark:bg-dark-${node.color?.class}`, border: `border-light-${node.color?.class} dark:border-dark-${node.color?.class}`, outline: `outline-light-${node.color?.class} dark:outline-dark-${node.color?.class}` } : 
+        { bg: `bg-colored`, border: `border-[color:var(--canvas-color)]`, outline: `outline-[color:var(--canvas-color)]` } : 
+        { border: `border-light-40 dark:border-dark-40`, bg: `bg-light-40 dark:bg-dark-40`, outline: `outline-light-40 dark:outline-dark-40` }
+});
+</script>

components/character/editor/AbilityEditor.vue

@@ -0,0 +1,38 @@
+<template>
+    <template v-if="model && model.people !== undefined">
+        <div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10">
+            <Label class="flex items-center justify-between gap-2">
+                <span class="pb-1 mx-2 md:p-0">Points restants</span>
+                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
+                    <NumberFieldInput class="tabular-nums w-20 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
+                </NumberFieldRoot>
+            </Label>
+            <Button @click="emit('next')">Suivant</Button>
+        </div>
+        <div class="flex flex-row flex-wrap justify-center items-center flex-1 gap-12 mx-8 my-4 px-48">
+            <template v-for="ability of config.abilities">
+                <div class="flex flex-col border border-light-50 dark:border-dark-50 p-4 gap-2 w-[200px] relative">
+                    <div class="flex justify-between">
+                        <NumberFieldRoot :min="0" class="flex w-20 justify-center border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
+                            <NumberFieldInput class="tabular-nums w-20 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
+                        </NumberFieldRoot>
+                        <Tooltip side="bottom" :message="`${mainStatTexts[ability.max[0]]} (0) + ${mainStatTexts[ability.max[1]]} (0) + 0`"><span class="text-lg text-end cursor-pointer">/ {{ 0 }}</span></Tooltip>
+                    </div>
+                    <span class="text-xl text-center font-bold">{{ ability.name }}</span>
+                    <span class="absolute -bottom-px -left-px h-[3px] bg-accent-blue" :style="{ width: `200px` }"></span>
+                </div>
+            </template>
+        </div>
+    </template>
+</template>
+
+<script setup lang="ts">
+import { mainStatTexts, type Character, type CharacterConfig } from '~/types/character';
+
+const { config } = defineProps<{
+    config: CharacterConfig,
+}>();
+const model = defineModel<Character>({ required: true });
+
+const emit = defineEmits(['next']);
+</script>

components/character/editor/AspectSelector.vue

@@ -0,0 +1,38 @@
+<template>
+    <template v-if="model && model.people !== undefined">
+        <div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10">
+            <Label class="flex items-center justify-between gap-2">
+                <span class="pb-1 mx-2 md:p-0">Physique</span>
+                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
+                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
+                </NumberFieldRoot>
+            </Label>
+            <Label class="flex items-center justify-between gap-2">
+                <span class="pb-1 mx-2 md:p-0">Mental</span>
+                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
+                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
+                </NumberFieldRoot>
+            </Label>
+            <Label class="flex items-center justify-between gap-2">
+                <span class="pb-1 mx-2 md:p-0">Caractère</span>
+                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
+                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
+                </NumberFieldRoot>
+            </Label>
+            <Button @click="emit('next')" :disabled="model.aspect === undefined">Enregistrer</Button>
+        </div>
+        <div class="flex flex-col flex-1 gap-4 mx-8 my-4">
+        </div>
+    </template>
+</template>
+
+<script setup lang="ts">
+import type { Character, CharacterConfig } from '~/types/character';
+
+const { config } = defineProps<{
+    config: CharacterConfig,
+}>();
+const model = defineModel<Character>({ required: true });
+
+const emit = defineEmits(['next']);
+</script>

components/character/editor/LevelEditor.vue

@@ -0,0 +1,56 @@
+<template>
+    <template v-if="model && model.character && model.character.people !== undefined">
+        <div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10">
+            <Label class="flex items-center justify-between gap-2">
+                <span class="pb-1 mx-2 md:p-0">Niveau</span>
+                <NumberFieldRoot :min="1" :max="20" v-model="model.character.level" @update:model-value="val => model.updateLevel(val as Level)" class="flex justify-center border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
+                    <NumberFieldInput class="tabular-nums w-20 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
+                </NumberFieldRoot>
+            </Label>
+            <Label class="flex items-center justify-between gap-2">
+                <span class="pb-1 mx-2 md:p-0">Attributions restantes</span>
+                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
+                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
+                </NumberFieldRoot>
+            </Label>
+            <Label class="flex items-center justify-between gap-2">
+                <span class="pb-1 mx-2 md:p-0">Vie</span>
+                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
+                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
+                </NumberFieldRoot>
+            </Label>
+            <Label class="flex items-center justify-between gap-2">
+                <span class="pb-1 mx-2 md:p-0">Mana</span>
+                <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
+                    <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
+                </NumberFieldRoot>
+            </Label>
+            <Button @click="emit('next')">Suivant</Button>
+        </div>
+        <div class="flex flex-col flex-1 gap-4 mx-8 my-4">
+            <template v-for="(level, index) of config.peoples[model.character.people!].options">
+                <div class="w-full flex h-px"><div class="border-t border-dashed border-light-50 dark:border-dark-50 w-full" :class="{ 'opacity-30': index > model.character.level }"></div><span class="sticky top-0">{{ index }}</span></div>
+                <div class="flex flex-row gap-4 justify-center" :class="{ 'opacity-30': index > model.character.level }">
+                    <template v-for="(option, i) of level">
+                        <div class="flex border border-light-50 dark:border-dark-50 px-4 py-2 w-[400px]" @click="model.toggleLevelOption(parseInt(index as unknown as string, 10) as Level, i)" 
+                        :class="{ 'hover:border-light-70 dark:hover:border-dark-70 cursor-pointer': index <= model.character.level, '!border-accent-blue bg-accent-blue bg-opacity-20': model.character.leveling?.some(e => e[0] == index && e[1] === i) ?? false }">
+                            <span class="text-wrap whitespace-pre">{{ option.description }}</span>
+                        </div>
+                    </template>
+                </div>
+            </template>
+        </div>
+    </template>
+</template>
+
+<script setup lang="ts">
+import type { CharacterBuilder } from '~/shared/character';
+import type { CharacterConfig, Level } from '~/types/character';
+
+const { config } = defineProps<{
+    config: CharacterConfig,
+}>();
+const model = defineModel<CharacterBuilder>({ required: true });
+
+const emit = defineEmits(['next']);
+</script>

components/character/editor/PeopleSelector.vue

@@ -0,0 +1,30 @@
+<template>
+    <template v-if="model">
+        <div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center">
+            <TextInput label="Nom" v-model="model.character.name" class="flex-none"/>
+            <Switch label="Privé ?" :default-value="model.character.visibility === 'private'" @update:model-value="(e) => model!.character.visibility = e ? 'private' : 'public'" />
+            <Button @click="emit('next')">Suivant</Button>
+        </div>
+        <div class="flex flex-1 gap-4 p-2 overflow-x-auto justify-center">
+            <div v-for="(people, i) of config.peoples" @click="model.character.people = i" class="flex flex-col flex-nowrap gap-2 p-2 border border-light-35 dark:border-dark-35 
+            cursor-pointer hover:border-light-70 dark:hover:border-dark-70 w-[320px]" :class="{ '!border-accent-blue outline-2 outline outline-accent-blue': model.character.people === i }">
+                <Avatar :src="people.name" :text="`Image placeholder`" class="h-[320px]" />
+                <span class="text-xl font-bold text-center">{{ people.name }}</span>
+                <span class="w-full border-b border-light-50 dark:border-dark-50"></span>
+                <span class="text-wrap word-break">{{ people.description }}</span>
+            </div>
+        </div>
+    </template>
+</template>
+
+<script setup lang="ts">
+import type { CharacterBuilder } from '~/shared/character';
+import type { CharacterConfig } from '~/types/character';
+
+const { config } = defineProps<{
+    config: CharacterConfig,
+}>();
+const model = defineModel<CharacterBuilder>();
+
+const emit = defineEmits(['next']);
+</script>

components/character/editor/TrainingEditor.vue

@@ -0,0 +1,69 @@
+<template>
+    <TrainingViewer :config="config">
+        <template #addin="{ stat }">
+            <div class="flex flex-1 gap-12 px-2 py-4 justify-center items-center sticky top-0 bg-light-0 dark:bg-dark-0 w-full z-10">
+                <Label class="flex items-center justify-between gap-2">
+                    <span class="pb-1 mx-2 md:p-0">Points restants</span>
+                    <NumberFieldRoot disabled :v-model="0" class="flex justify-center border border-light-25 dark:border-dark-25 bg-light-10 dark:bg-dark-10 text-light-60 dark:text-dark-60">
+                        <NumberFieldInput class="tabular-nums w-14 bg-transparent px-3 py-1 outline-none" />
+                    </NumberFieldRoot>
+                </Label>
+                <Button @click="emit('next')">Suivant</Button>
+            </div>
+        </template>
+        <template #default="{ stat, level, option }">
+            <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-[400px] hover:border-light-50 dark:hover:border-dark-50" @click="toggleOption(stat, parseInt(level as unknown as string, 10) as TrainingLevel, option)" :class="{ /*'opacity-30': level > maxTraining[stat] + 1, 'hover:border-light-60 dark:hover:border-dark-60': level <= maxTraining[stat] + 1, */'!border-accent-blue bg-accent-blue bg-opacity-20': level == 0 || (model.training[stat]?.some(e => e[0] == level && e[1] === option) ?? false) }">
+                <MarkdownRenderer :proses="{ 'a': PreviewA }" :content="config.training[stat][level][option].description.map(e => e.text).join('\n')" />
+            </div>
+        </template>
+    </TrainingViewer>
+</template>
+
+<script setup lang="ts">
+import PreviewA from '~/components/prose/PreviewA.vue';
+import { MAIN_STATS, type Character, type CharacterConfig, type MainStat, type TrainingLevel } from '~/types/character';
+
+const { config } = defineProps<{
+    config: CharacterConfig,
+}>();
+const model = defineModel<Character>({ required: true, });
+
+const maxTraining = Object.fromEntries(MAIN_STATS.map(e => [e, 0]));
+
+const emit = defineEmits(['next']);
+
+function toggleOption(stat: MainStat, level: TrainingLevel, choice: number)
+{
+    const character = model.value;
+
+    if(level == 0)
+        return;
+
+    for(let i = 1; i < level; i++) //Check previous levels as a requirement
+    {
+        if(!character.training[stat].some(e => e[0] == i))
+            return;
+    }
+
+    if(character.training[stat].some(e => e[0] == level))
+    {
+        if(character.training[stat].some(e => e[0] == level && e[1] === choice))
+        {
+            for(let i = 15; i >= level; i --) //Invalidate higher levels
+            {
+                const index = character.training[stat].findIndex(e => e[0] == i);
+                if(index !== -1)
+                    character.training[stat].splice(index, 1);
+            }
+        }
+        else
+            character.training[stat].splice(character.training[stat].findIndex(e => e[0] == level), 1, [level, choice]);
+    }
+    else //if(trainingPoints.value && trainingPoints.value > 0)
+    {
+        character.training[stat].push([level, choice]);
+    }
+
+    model.value = character;
+}
+</script>

components/page/Canvas.vue

@@ -0,0 +1,297 @@
+<script lang="ts">
+import { type Position } from '#shared/canvas.util';
+import { hasPermissions } from '~/shared/auth.util';
+
+const cancelEvent = (e: Event) => e.preventDefault();
+function center(touches: TouchList): Position
+{
+    const pos = { x: 0, y: 0 };
+
+    for(const touch of touches)
+    {
+        pos.x += touch.clientX;
+        pos.y += touch.clientY;
+    }
+
+    pos.x /= touches.length;
+    pos.y /= touches.length;
+    return pos;
+}
+function distance(touches: TouchList): number
+{
+    const [A, B] = touches;
+    return Math.hypot(B.clientX - A.clientX, B.clientY - A.clientY);
+}
+
+/*
+
+stroke-light-red
+stroke-light-orange
+stroke-light-yellow
+stroke-light-green
+stroke-light-cyan
+stroke-light-purple
+dark:stroke-dark-red
+dark:stroke-dark-orange
+dark:stroke-dark-yellow
+dark:stroke-dark-green
+dark:stroke-dark-cyan
+dark:stroke-dark-purple
+fill-light-red
+fill-light-orange
+fill-light-yellow
+fill-light-green
+fill-light-cyan
+fill-light-purple
+dark:fill-dark-red
+dark:fill-dark-orange
+dark:fill-dark-yellow
+dark:fill-dark-green
+dark:fill-dark-cyan
+dark:fill-dark-purple
+bg-light-red
+bg-light-orange
+bg-light-yellow
+bg-light-green
+bg-light-cyan
+bg-light-purple
+dark:bg-dark-red
+dark:bg-dark-orange
+dark:bg-dark-yellow
+dark:bg-dark-green
+dark:bg-dark-cyan
+dark:bg-dark-purple
+border-light-red
+border-light-orange
+border-light-yellow
+border-light-green
+border-light-cyan
+border-light-purple
+dark:border-dark-red
+dark:border-dark-orange
+dark:border-dark-yellow
+dark:border-dark-green
+dark:border-dark-cyan
+dark:border-dark-purple
+outline-light-red
+outline-light-orange
+outline-light-yellow
+outline-light-green
+outline-light-cyan
+outline-light-purple
+dark:outline-dark-red
+dark:outline-dark-orange
+dark:outline-dark-yellow
+dark:outline-dark-green
+dark:outline-dark-cyan
+dark:outline-dark-purple
+
+*/
+</script>
+
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import { clamp } from '#shared/general.util';
+import type { CanvasContent } from '~/types/content';
+
+const { path } = defineProps<{
+    path: string
+}>();
+
+const { user } = useUserSession();
+const { content, get } = useContent();
+const overview = computed(() => content.value.find(e => e.path === path) as CanvasContent | undefined);
+const isOwner = computed(() => user.value?.id === overview.value?.owner);
+
+const loading = ref(false);
+if(overview.value && !overview.value.content)
+{
+    loading.value = true;
+    await get(path);
+    loading.value = false;
+}
+const canvas = computed(() => overview.value && overview.value.content ? overview.value.content : undefined);
+console.log(canvas.value);
+
+const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
+const canvasRef = useTemplateRef('canvasRef'), transformRef = useTemplateRef('transformRef');
+
+const updateScaleVar = useDebounceFn(() => {
+    if(transformRef.value)
+    {
+        transformRef.value.style.setProperty('--tw-scale', zoom.value.toString());
+    }
+    if(canvasRef.value)
+    {
+        canvasRef.value.style.setProperty('--zoom-multiplier', (1 / Math.pow(zoom.value, 0.7)).toFixed(3));
+    }
+}, 100);
+
+const reset = (_: MouseEvent) => {
+    zoom.value = minZoom.value;
+
+    dispX.value = 0;
+    dispY.value = 0;
+
+    updateTransform();
+}
+
+onMounted(() => {
+    let lastX = 0, lastY = 0, lastDistance = 0;
+    let box = canvasRef.value?.getBoundingClientRect()!;
+    const dragMove = (e: MouseEvent) => {
+        dispX.value = dispX.value - (lastX - e.clientX) / zoom.value;
+        dispY.value = dispY.value - (lastY - e.clientY) / zoom.value;
+
+        lastX = e.clientX;
+        lastY = e.clientY;
+
+        updateTransform();
+    };
+    const dragEnd = (e: MouseEvent) => {
+        window.removeEventListener('mouseup', dragEnd);
+        window.removeEventListener('mousemove', dragMove);
+    };
+    canvasRef.value?.addEventListener('mouseenter', () => { 
+        window.addEventListener('wheel', cancelEvent, { passive: false });
+        document.addEventListener('gesturestart', cancelEvent);
+        document.addEventListener('gesturechange', cancelEvent);
+
+        canvasRef.value?.addEventListener('mouseleave', () => {
+            window.removeEventListener('wheel', cancelEvent);
+            document.removeEventListener('gesturestart', cancelEvent);
+            document.removeEventListener('gesturechange', cancelEvent);
+        });
+    })
+    window.addEventListener('resize', () => box = canvasRef.value?.getBoundingClientRect()!);
+    canvasRef.value?.addEventListener('mousedown', (e) => {
+        lastX = e.clientX;
+        lastY = e.clientY;
+
+        window.addEventListener('mouseup', dragEnd, { passive: true });
+        window.addEventListener('mousemove', dragMove, { passive: true });
+    }, { passive: true });
+    canvasRef.value?.addEventListener('wheel', (e) => {
+        if((zoom.value >= 3 && e.deltaY < 0) || (zoom.value <= minZoom.value && e.deltaY > 0))
+            return;
+
+        const diff = Math.exp(e.deltaY * -0.001);
+        const centerX = (box.x + box.width / 2), centerY = (box.y + box.height / 2);
+        const mousex = centerX - e.clientX, mousey = centerY - e.clientY;
+
+        dispX.value = dispX.value - (mousex / (diff * zoom.value) - mousex / zoom.value);
+        dispY.value = dispY.value - (mousey / (diff * zoom.value) - mousey / zoom.value);
+
+        zoom.value = clamp(zoom.value * diff, minZoom.value, 3)
+
+        updateTransform();
+    }, { passive: true });
+    canvasRef.value?.addEventListener('touchstart', (e) => {
+        ({ x: lastX, y: lastY } = center(e.touches));
+
+        if(e.touches.length > 1)
+        {
+            lastDistance = distance(e.touches);
+        }
+
+        canvasRef.value?.addEventListener('touchend', touchend, { passive: true });
+        canvasRef.value?.addEventListener('touchcancel', touchcancel, { passive: true });
+        canvasRef.value?.addEventListener('touchmove', touchmove, { passive: true });
+    }, { passive: true });
+    const touchend = (e: TouchEvent) => {
+        if(e.touches.length > 1)
+        {
+            ({ x: lastX, y: lastY } = center(e.touches));
+        }
+
+        canvasRef.value?.removeEventListener('touchend', touchend);
+        canvasRef.value?.removeEventListener('touchcancel', touchcancel);
+        canvasRef.value?.removeEventListener('touchmove', touchmove);
+    };
+    const touchcancel = (e: TouchEvent) => {
+        if(e.touches.length > 1)
+        {
+            ({ x: lastX, y: lastY } = center(e.touches));
+        }
+
+        canvasRef.value?.removeEventListener('touchend', touchend);
+        canvasRef.value?.removeEventListener('touchcancel', touchcancel);
+        canvasRef.value?.removeEventListener('touchmove', touchmove);
+    };
+    const touchmove = (e: TouchEvent) => {
+        const pos = center(e.touches);
+        dispX.value = dispX.value - (lastX - pos.x) / zoom.value;
+        dispY.value = dispY.value - (lastY - pos.y) / zoom.value;
+        lastX = pos.x;
+        lastY = pos.y;
+
+        if(e.touches.length === 2)
+        {
+            const dist = distance(e.touches);
+            const diff = dist / lastDistance;
+            lastDistance = dist;
+            
+            zoom.value = clamp(zoom.value * diff, minZoom.value, 3);
+        }
+
+        updateTransform();
+    };
+
+    updateTransform();
+});
+
+function updateTransform()
+{
+    if(transformRef.value)
+    {
+        transformRef.value.style.transform = `scale3d(${zoom.value}, ${zoom.value}, 1) translate3d(${dispX.value}px, ${dispY.value}px, 0)`;
+    }
+    updateScaleVar();
+}
+</script>
+
+<template>
+    <div ref="canvasRef" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none">
+        <div class="flex flex-col absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden gap-4">
+            <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10">
+                <Tooltip message="Zoom avant" side="right">
+                    <div @click="zoom = clamp(zoom * 1.1, minZoom, 3); updateTransform()" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                        <Icon icon="radix-icons:plus" />
+                    </div>
+                </Tooltip>
+                <Tooltip message="Reset" side="right">
+                    <div @click="zoom = 1; updateTransform();" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                        <Icon icon="radix-icons:reload" />
+                    </div>
+                </Tooltip>
+                <Tooltip message="Tout contenir" side="right">
+                    <div @click="reset" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                        <Icon icon="radix-icons:corners" />
+                    </div>
+                </Tooltip>
+                <Tooltip message="Zoom arrière" side="right">
+                    <div @click="zoom = clamp(zoom / 1.1, minZoom, 3); updateTransform()" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                        <Icon icon="radix-icons:minus" />
+                    </div>
+                </Tooltip>
+            </div>
+            <NuxtLink v-if="overview && isOwner || hasPermissions(user?.permissions ?? [], ['admin', 'editor'])" :to="{ name: 'explore-edit', hash: `#${encodeURIComponent(overview!.path)}` }" class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10">
+                <Tooltip message="Modifier" side="right">
+                    <Icon icon="radix-icons:pencil-1" class="w-8 h-8 p-2" />
+                </Tooltip>
+            </NuxtLink>
+        </div>
+        <div ref="transformRef" :style="{
+            'transform-origin': 'center center',
+        }" class="h-full">
+            <div v-if="canvas" class="absolute top-0 left-0 w-full h-full pointer-events-none *:pointer-events-auto *:select-none touch-none">
+                <div>
+                    <CanvasNode v-for="node of canvas.nodes" :key="node.id" ref="nodes" :node="node" :zoom="zoom" />
+                </div>
+                <div>
+                    <CanvasEdge v-for="edge of canvas.edges" :key="edge.id" ref="edges" :edge="edge" :nodes="canvas.nodes!" />
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

components/page/Markdown.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { hasPermissions } from '~/shared/auth.util';
+
+
+const { path } = defineProps<{
+    path: string
+    filter?: string,
+    popover?: boolean
+}>();
+const { user } = useUserSession();
+const { content, get } = useContent();
+const overview = computed(() => content.value.find(e => e.path === path));
+const isOwner = computed(() => user.value?.id === overview.value?.owner);
+
+const loading = ref(false);
+if(overview.value && !overview.value.content)
+{
+    loading.value = true;
+    await get(path);
+    loading.value = false;
+}
+</script>
+
+<template>
+    <div class="flex flex-1 justify-start items-start flex-col lg:px-16 xl:px-32 2xl:px-64 py-6">
+        <Loading v-if="loading" />
+        <template v-else-if="overview">
+            <div v-if="!popover" class="flex flex-1 flex-row justify-between items-center">
+                <ProseH1>{{ overview.title }}</ProseH1>
+                <div class="flex gap-4">
+                    <NuxtLink :href="{ name: 'explore-edit', hash: '#' + overview.path }" v-if="isOwner || hasPermissions(user?.permissions ?? [], ['admin', 'editor'])"><Button>Modifier</Button></NuxtLink>
+                </div>
+            </div>
+            <MarkdownRenderer v-if="overview.content" :content="overview.content" :filter="filter" />
+        </template>
+        <template v-else>
+            <div><ProseH2>Impossible d'afficher le contenu demandé</ProseH2></div>
+        </template>
+    </div>
+</template>

components/prose/FakeA.vue

@@ -0,0 +1,27 @@
+<template>
+    <span>
+		<HoverCard trigger-key="Ctrl" nuxt-client class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview?.type === 'canvas'}" :disabled="!overview">
+			<template #content>
+				<Markdown v-if="overview?.type === 'markdown'" class="!px-6" :path="pathname" :filter="hash.substring(1)" popover />
+				<template v-else-if="overview?.type === 'canvas'"><div class="w-[600px] h-[600px] relative"><Canvas :path="pathname" /></div></template>
+			</template>
+			<span>
+                <span class="text-accent-blue inline-flex items-center cursor-pointer hover:text-opacity-85"><slot v-bind="$attrs"></slot></span>
+			</span>
+		</HoverCard>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { parseURL } from 'ufo';
+
+const { href } = defineProps<{
+	href: string
+	class?: string
+}>();
+
+const { hash, pathname } = parseURL(href);
+
+const { content } = useContent();
+const overview = computed(() => content.value.find(e => e.path === pathname));
+</script>

components/prose/PreviewA.vue

@@ -0,0 +1,30 @@
+<template>
+	<span class="text-accent-blue inline-flex items-center" :class="class">
+		<HoverCard nuxt-client class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview?.type === 'canvas'}" :disabled="!overview">
+			<template #content>
+				<Markdown v-if="overview?.type === 'markdown'" class="!px-6" :path="decodeURIComponent(pathname)" :filter="hash.substring(1)" popover />
+				<template v-else-if="overview?.type === 'canvas'"><div class="w-[600px] h-[600px] relative"><Canvas :path="decodeURIComponent(pathname)" /></div></template>
+			</template>
+			<span>
+				<slot v-bind="$attrs"></slot>
+				<Icon class="w-4 h-4 inline-block" v-if="overview && overview.type !== 'markdown'" :icon="iconByType[overview.type]" />
+			</span>
+		</HoverCard>
+	</span>
+</template>
+
+<script setup lang="ts">
+import { parseURL } from 'ufo';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import { iconByType } from '#shared/general.util';
+
+const { href } = defineProps<{
+	href: string
+	class?: string
+}>();
+
+const { hash, pathname } = parseURL(href);
+
+const { content } = useContent();
+const overview = computed(() => content.value.find(e => e.path === decodeURIComponent(pathname)));
+</script>

components/prose/ProseA.vue

@@ -0,0 +1,36 @@
+<template>
+	<NuxtLink class="text-accent-blue inline-flex items-center" :to="overview ? { name: 'explore-path', params: { path: overview.path }, hash: decodeURIComponent(hash) } : href" :class="class">
+		<HoverCard nuxt-client class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview?.type === 'canvas'}" :disabled="!overview">
+			<template #content>
+				<Markdown v-if="overview?.type === 'markdown'" class="!px-6" :path="decodeURIComponent(pathname)" :filter="hash.substring(1)" popover />
+				<template v-else-if="overview?.type === 'canvas'"><div class="w-[600px] h-[600px] relative"><Canvas :path="decodeURIComponent(pathname)" /></div></template>
+			</template>
+			<span>
+				<slot v-bind="$attrs"></slot>
+				<Icon class="w-4 h-4 inline-block" v-if="overview && overview.type !== 'markdown'" :icon="iconByType[overview.type]" />
+			</span>
+		</HoverCard>
+	</NuxtLink>
+</template>
+
+<script setup lang="ts">
+import { parseURL } from 'ufo';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import { iconByType } from '#shared/general.util';
+
+const { href } = defineProps<{
+	href: string
+	class?: string
+}>();
+
+const { hash, pathname } = parseURL(href);
+
+const { content } = useContent();
+const overview = computed(() => content.value.find(e => e.path === decodeURIComponent(pathname)));
+</script>
+
+<style>
+.cm-link {
+	@apply text-accent-blue inline-flex items-center cursor-pointer hover:text-opacity-85;
+}
+</style>

components/prose/ProseBlockquote.vue

@@ -0,0 +1,28 @@
+<template>
+  <blockquote class="empty:before:hidden ps-4 my-4 relative before:absolute before:-top-1 before:-bottom-1 before:left-0 before:w-1 before:bg-light-30 dark:before:bg-dark-30" ref="el">
+    <slot />
+  </blockquote>
+</template>
+
+<style>
+.HyperMD-quote
+{
+  @apply before:hidden;
+}
+.HyperMD-quote.hmd-inactive-line
+{
+  @apply before:block empty:before:!hidden !pb-2 !ps-4 !relative before:!absolute before:!-top-1 before:!-bottom-1 before:!left-0 before:!w-1 before:!bg-none before:!bg-light-30 dark:before:!bg-dark-30;
+}
+.HyperMD-quote.HyperMD-header
+{
+  @apply before:!hidden;
+}
+.hmd-inactive-line .cm-formatting-quote
+{
+  @apply !hidden;
+}
+.cm-quote 
+{
+  @apply text-light-100 dark:text-dark-100;
+}
+</style>

components/prose/ProseCallout.vue

@@ -0,0 +1,146 @@
+<template>
+	<CollapsibleRoot :disabled="disabled" :defaultOpen="fold === true || fold === undefined" class="callout group overflow-hidden my-4 p-3 ps-4 bg-blend-lighten !bg-opacity-25 border-l-4 inline-block pe-8 bg-light-blue dark:bg-dark-blue" :data-type="type">
+		<CollapsibleTrigger>
+			<div :class="{ 'cursor-pointer': fold !== undefined }" class="flex flex-row items-center justify-start ps-2">
+				<Icon :icon="calloutIconByType[type] ?? defaultCalloutIcon" inline class="w-6 h-6 stroke-2 float-start me-2 flex-shrink-0" />
+				<span v-if="title" class="block font-bold text-start">{{ title }}</span>
+				<Icon icon="radix-icons:caret-right" v-if="fold !== undefined" class="transition-transform group-data-[state=open]:rotate-90 w-6 h-6 mx-6" />
+			</div>
+		</CollapsibleTrigger>
+        <CollapsibleContent class="overflow-hidden data-[state=closed]:animate-[collapseClose_0.2s_ease-in-out] data-[state=open]:animate-[collapseOpen_0.2s_ease-in-out] data-[state=closed]:h-0">
+			<div class="px-2">
+				<slot />
+			</div>
+        </CollapsibleContent>
+    </CollapsibleRoot>
+</template>
+
+<script lang="ts">
+const calloutIconByType: Record<string, string> = {
+	note: 'radix-icons:pencil-1',
+	abstract: 'radix-icons:file-text',
+	info: 'radix-icons:info-circled',
+	todo: 'radix-icons:check-circled',
+	tip: 'radix-icons:star',
+	success: 'radix-icons:check',
+	question: 'radix-icons:question-mark-circled',
+	warning: 'radix-icons:exclamation-triangle',
+	failure: 'radix-icons:cross-circled',
+	danger: 'radix-icons:circle-backslash',
+	bug: 'solar:bug-linear',
+	example: 'radix-icons:list-bullet',
+	quote: 'radix-icons:quote',
+};
+const defaultCalloutIcon = 'radix-icons:info-circled';
+</script>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+const {	type, title, fold } = defineProps<{
+	type: string;
+	title?: string;
+	fold?: boolean;
+}>();
+const disabled = computed(() => fold === undefined);
+</script>
+
+<style>
+.callout[data-type="abstract"],
+.callout[data-type="summary"],
+.callout[data-type="tldr"]
+{
+	@apply bg-light-cyan;
+	@apply dark:bg-dark-cyan;
+	@apply text-light-cyan;
+	@apply dark:text-dark-cyan;
+}
+.callout[data-type="info"]
+{
+	@apply bg-light-blue;
+	@apply dark:bg-dark-blue;
+	@apply text-light-blue;
+	@apply dark:text-dark-blue;
+}
+.callout[data-type="todo"]
+{
+	@apply bg-light-blue;
+	@apply dark:bg-dark-blue;
+	@apply text-light-blue;
+	@apply dark:text-dark-blue;
+}
+.callout[data-type="important"]
+{
+	@apply bg-light-cyan;
+	@apply dark:bg-dark-cyan;
+	@apply text-light-cyan;
+	@apply dark:text-dark-cyan;
+}
+.callout[data-type="tip"],
+.callout[data-type="hint"]
+{
+	@apply bg-light-cyan;
+	@apply dark:bg-dark-cyan;
+	@apply text-light-cyan;
+	@apply dark:text-dark-cyan;
+}
+.callout[data-type="success"],
+.callout[data-type="check"],
+.callout[data-type="done"]
+{
+	@apply bg-light-green;
+	@apply dark:bg-dark-green;
+	@apply text-light-green;
+	@apply dark:text-dark-green;
+}
+.callout[data-type="question"],
+.callout[data-type="help"],
+.callout[data-type="faq"]
+{
+	@apply bg-light-orange;
+	@apply dark:bg-dark-orange;
+	@apply text-light-orange;
+	@apply dark:text-dark-orange;
+}
+.callout[data-type="warning"],
+.callout[data-type="caution"],
+.callout[data-type="attention"]
+{
+	@apply bg-light-orange;
+	@apply dark:bg-dark-orange;
+	@apply text-light-orange;
+	@apply dark:text-dark-orange;
+}
+.callout[data-type="failure"],
+.callout[data-type="fail"],
+.callout[data-type="missing"]
+{
+	@apply bg-light-red;
+	@apply dark:bg-dark-red;
+	@apply text-light-red;
+	@apply dark:text-dark-red;
+}
+.callout[data-type="danger"],
+.callout[data-type="error"]
+{
+	@apply bg-light-red;
+	@apply dark:bg-dark-red;
+	@apply text-light-red;
+	@apply dark:text-dark-red;
+}
+.callout[data-type="bug"]
+{
+	@apply bg-light-red;
+	@apply dark:bg-dark-red;
+	@apply text-light-red;
+	@apply dark:text-dark-red;
+}
+.callout[data-type="example"]
+{
+	@apply bg-light-purple;
+	@apply dark:bg-dark-purple;
+	@apply text-light-purple;
+	@apply dark:text-dark-purple;
+}
+
+</style>

components/prose/ProseCode.vue

@@ -0,0 +1,10 @@
+<template>
+  <code><slot /></code>
+</template>
+
+<style>
+.cm-inline-code
+{
+  @apply !border-none !bg-transparent !text-light-100 dark:!text-dark-100 !p-0;
+}
+</style>

components/prose/ProseEm.vue

@@ -0,0 +1,5 @@
+<template>
+  <em>
+    <slot />
+  </em>
+</template>

components/prose/ProseH1.vue

@@ -0,0 +1,21 @@
+<template>
+  <h1 :id="parseId(id)" class="text-5xl font-thin mt-3 mb-8 first:pt-0 pt-2">
+    <slot />
+  </h1>
+</template>
+
+<script setup lang="ts">
+import { parseId } from '#shared/general.util';
+const props = defineProps<{ id?: string }>()
+</script>
+
+<style>
+.HyperMD-header-1
+{
+  @apply text-5xl pt-4 pb-2 after:hidden;
+}
+.HyperMD-header-1 .cm-header
+{
+  @apply font-thin;
+}
+</style>

components/prose/ProseH2.vue

@@ -0,0 +1,23 @@
+<template>
+  <h2 :id="parseId(id)" class="text-4xl font-semibold mt-3 mb-6 ms-1 first:pt-0 pt-2">
+    <slot />
+  </h2>
+</template>
+
+<script setup lang="ts">
+import { parseId } from '#shared/general.util';
+const props = defineProps<{ id?: string }>()
+
+const generate = computed(() => props.id)
+</script>
+
+<style>
+.HyperMD-header-2
+{
+  @apply !text-4xl !pt-4 !pb-2 !ps-1 leading-loose after:hidden;
+}
+.HyperMD-header-2 .cm-header
+{
+  @apply font-semibold;
+}
+</style>

components/prose/ProseH3.vue

@@ -0,0 +1,23 @@
+<template>
+  <h3 :id="parseId(id)" class="text-2xl font-bold  mt-2 mb-4">
+    <slot />
+  </h3>
+</template>
+
+<script setup lang="ts">
+import { parseId } from '#shared/general.util';
+const props = defineProps<{ id?: string }>()
+
+const generate = computed(() => props.id)
+</script>
+
+<style>
+.HyperMD-header-3
+{
+  @apply !text-2xl !font-bold !pt-1 after:!hidden;
+}
+.HyperMD-header-3 .cm-header
+{
+  @apply font-bold;
+}
+</style>

components/prose/ProseH4.vue

@@ -0,0 +1,22 @@
+<template>
+  <h4 :id="parseId(id)" class="text-xl font-semibold my-2" style="font-variant: small-caps;">
+    <slot />
+  </h4>
+</template>
+
+<script setup lang="ts">
+import { parseId } from '#shared/general.util';
+const props = defineProps<{ id?: string }>()
+</script>
+
+<style>
+.HyperMD-header-4
+{
+  @apply !text-xl font-semibold pt-1 after:hidden;
+  font-variant: small-caps;
+}
+.HyperMD-header-4 .cm-header
+{
+  @apply font-semibold;
+}
+</style>

components/prose/ProseH5.vue

@@ -0,0 +1,12 @@
+<template>
+  <h5 :id="parseId(id)" class="text-lg font-semibold my-1">
+    <slot />
+  </h5>
+</template>
+
+<script setup lang="ts">
+import { parseId } from '#shared/general.util';
+const props = defineProps<{ id?: string }>()
+
+const generate = computed(() => props.id)
+</script>

components/prose/ProseH6.vue

@@ -0,0 +1,12 @@
+<template>
+  <h6 :id="parseId(id)">
+    <slot />
+  </h6>
+</template>
+
+<script setup lang="ts">
+import { parseId } from '#shared/general.util';
+const props = defineProps<{ id?: string }>()
+
+const generate = computed(() => props.id)
+</script>

components/prose/ProseHr.vue

@@ -0,0 +1,10 @@
+<template>
+  <Separator class="border-b border-light-35 dark:border-dark-35 m-4" />
+</template>
+
+<style>
+.HyperMD-hr
+{
+  @apply bg-light-35 dark:bg-dark-35 h-px;
+}
+</style>

components/prose/ProseImg.vue

@@ -0,0 +1,42 @@
+<template>
+  <img
+    :src="refinedSrc"
+    :alt="alt"
+    :width="width"
+    :height="height"
+  />
+</template>
+
+<script setup lang="ts">
+import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
+import { useRuntimeConfig, computed, resolveComponent } from '#imports'
+
+const props = defineProps({
+  src: {
+    type: String,
+    default: ''
+  },
+  alt: {
+    type: String,
+    default: ''
+  },
+  width: {
+    type: [String, Number],
+    default: undefined
+  },
+  height: {
+    type: [String, Number],
+    default: undefined
+  }
+})
+
+const refinedSrc = computed(() => {
+  if (props.src?.startsWith('/') && !props.src.startsWith('//')) {
+    const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
+    if (_base !== '/' && !props.src.startsWith(_base)) {
+      return joinURL(_base, props.src)
+    }
+  }
+  return props.src
+})
+</script>

components/prose/ProseLi.vue

@@ -0,0 +1,22 @@
+<template>
+  <li class="before:absolute before:top-2 before:left-0 before:inline-block before:w-2 before:h-2 before:rounded before:bg-light-40 dark:before:bg-dark-40 relative ps-4"><slot /></li>
+</template>
+
+<style>
+.HyperMD-list-line
+{
+  @apply  !py-1;
+}
+.HyperMD-list-line.hmd-inactive-line > span
+{
+  @apply before:absolute before:top-2 before:left-0 before:inline-block before:w-2 before:h-2 before:rounded before:bg-light-40 dark:before:bg-dark-40 relative ps-4;
+}
+.hmd-inactive-line .cm-formatting-list
+{
+  @apply hidden;
+}
+.cm-hmd-list-indent
+{
+  @apply !hidden;
+}
+</style>

components/prose/ProseOl.vue

@@ -0,0 +1,5 @@
+<template>
+  <ol>
+    <slot />
+  </ol>
+</template>

components/prose/ProseP.vue

@@ -1,3 +1,3 @@
 <template>
-    Index
+  <p><slot /></p>
 </template>

components/prose/ProsePre.vue

@@ -0,0 +1,36 @@
+<template>
+  <pre :class="$props.class"><slot /></pre>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  code: {
+    type: String,
+    default: ''
+  },
+  language: {
+    type: String,
+    default: null
+  },
+  filename: {
+    type: String,
+    default: null
+  },
+  highlights: {
+    type: Array as () => number[],
+    default: () => []
+  },
+  meta: {
+    type: String,
+    default: null
+  },
+  class: {
+    type: String,
+    default: null
+  }
+})
+</script>
+
+<style>
+pre code .line{display:block}
+</style>

components/prose/ProseScript.vue

@@ -0,0 +1,15 @@
+<template>
+  <div v-if="isDev">
+    Rendering the <code>script</code> element is dangerous and is disabled by default. Consider implementing your own <code>ProseScript</code> element to have control over script rendering.
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  src: {
+    type: String,
+    default: ''
+  }
+})
+const isDev = import.meta.dev
+</script>

components/prose/ProseSmall.vue

@@ -0,0 +1,5 @@
+<template>
+    <small class="text-light-60 dark:text-dark-60 text-sm italic">
+        <slot />
+    </small>
+</template>

components/prose/ProseStrong.vue

@@ -0,0 +1,5 @@
+<template>
+  <strong>
+    <slot />
+  </strong>
+</template>

components/prose/ProseTable.vue

@@ -0,0 +1,5 @@
+<template>
+  <table class="mx-4 my-8 border-collapse border border-light-35 dark:border-dark-35">
+    <slot />
+  </table>
+</template>

components/prose/ProseTag.vue

@@ -0,0 +1,16 @@
+<template>
+    <span class="before:content-['#'] cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30">
+        <slot></slot>
+    </span>
+</template>
+
+<style>
+.cm-hashtag.cm-hashtag-begin
+{
+    @apply bg-accent-blue bg-opacity-10 text-accent-blue text-sm pb-0.5 ps-1 rounded-l-[12px]  border border-r-0 border-accent-blue border-opacity-30;
+}
+.cm-hashtag.cm-hashtag-end
+{
+    @apply bg-accent-blue bg-opacity-10 text-accent-blue text-sm pb-0.5 pe-1 rounded-r-[12px] !rounded-se-none border border-l-0 border-accent-blue border-opacity-30;
+}
+</style>

components/prose/ProseTbody.vue

@@ -0,0 +1,5 @@
+<template>
+  <tbody>
+    <slot />
+  </tbody>
+</template>

components/prose/ProseTd.vue

@@ -0,0 +1,5 @@
+<template>
+  <td class="border border-light-35 dark:border-dark-35 py-1 px-2">
+    <slot />
+  </td>
+</template>

components/prose/ProseTh.vue

@@ -0,0 +1,5 @@
+<template>
+  <th class="border border-light-35 dark:border-dark-35 px-4 first:pt-0">
+    <slot />
+  </th>
+</template>

components/prose/ProseThead.vue

@@ -0,0 +1,5 @@
+<template>
+  <thead>
+    <slot />
+  </thead>
+</template>

components/prose/ProseTr.vue

@@ -0,0 +1,5 @@
+<template>
+  <tr>
+    <slot />
+  </tr>
+</template>

components/prose/ProseUl.vue

@@ -0,0 +1,5 @@
+<template>
+  <ul>
+    <slot />
+  </ul>
+</template>

composables/useContent.ts

@@ -0,0 +1,59 @@
+import type { ExploreContent, ContentComposable, TreeItem } from '~/types/content';
+
+const useContentState = () => useState<ExploreContent[]>('content', () => []);
+
+export function useContent(): ContentComposable {
+  const contentState = useContentState();
+  return {
+    content: contentState,
+    tree: computed(() => {
+        const arr: TreeItem[] = [];
+        for(const element of contentState.value)
+        {
+            addChild(arr, element);
+        }
+        return arr;
+    }),
+    fetch,
+    get,
+  }
+}
+
+async function fetch(force: boolean) {
+    const content = useContentState();
+    if(content.value.length === 0 || force)
+        content.value = await useRequestFetch()('/api/file/overview');
+}
+
+async function get(path: string) {
+    const content = useContentState()
+    const value = content.value;
+    const item = value.find(e => e.path === path);
+    if(item)
+    {
+        item.content = await useRequestFetch()(`/api/file/content/${encodeURIComponent(path)}`);
+    }
+
+    content.value = value;
+}
+
+function addChild(arr: TreeItem[], e: ExploreContent): void {
+    const parent = arr.find(f => e.path.startsWith(f.path));
+
+    if(parent)
+    {
+        if(!parent.children)
+            parent.children = [];
+
+        addChild(parent.children, e);
+    }
+    else
+    {
+        arr.push({ ...e });
+        arr.sort((a, b) => {
+            if(a.order !== b.order)
+                return a.order - b.order;
+            return a.title.localeCompare(b.title);
+        });
+    }
+}

composables/useDatabase.ts

@@ -1,13 +1,19 @@
-import ".dotenv/config";
 import { Database } from "bun:sqlite";
-import { drizzle } from "drizzle-orm/bun-sqlite";
+import { BunSQLiteDatabase, drizzle } from "drizzle-orm/bun-sqlite";
+import * as schema from '../db/schema';
 
+let instance: BunSQLiteDatabase<typeof schema>;
 export default function useDatabase()
 {
-    const sqlite = new Database(process.env.DB_FILE);
-    const db = drizzle({ client: sqlite });
+    if(!instance)
+    {
+        const database = useRuntimeConfig().database;
+        const sqlite = new Database(database);
+        instance = drizzle({ client: sqlite, schema, /* logger: true */ });
 
-    db.run("PRAGMA journal_mode = WAL;");
+        instance.run("PRAGMA journal_mode = WAL;");
+        instance.run("PRAGMA foreign_keys = true;");
+    }
 
-    return db;
+    return instance;
 }

composables/useMarkdown.ts

@@ -0,0 +1,27 @@
+import { unified, type Processor } from "unified";
+import type { Root } from 'hast';
+import RemarkParse from "remark-parse";
+
+import RemarkRehype from 'remark-rehype';
+import RemarkOfm from 'remark-ofm';
+import RemarkGfm from 'remark-gfm';
+import RemarkBreaks from 'remark-breaks';
+import RemarkFrontmatter from 'remark-frontmatter';
+
+export default function useMarkdown(): (md: string) => Root
+{
+    let processor: Processor;
+
+    const parse = (markdown: string) => {
+        if (!processor) 
+        {
+            processor = unified().use([RemarkParse, RemarkGfm, RemarkOfm, RemarkBreaks, RemarkFrontmatter]);
+            processor.use(RemarkRehype);
+        }
+
+        const processed = processor.runSync(processor.parse(markdown)) as Root;
+        return processed;
+    }
+
+    return parse;
+}

composables/useShortcuts.ts

@@ -0,0 +1,194 @@
+import { ref, computed } from 'vue'
+import type { ComputedRef, WatchSource } from 'vue'
+import { logicAnd, logicNot } from '@vueuse/math'
+import { useEventListener, useDebounceFn, createSharedComposable, useActiveElement } from '@vueuse/core'
+
+export interface ShortcutConfig {
+  handler: Function
+  usingInput?: string | boolean
+  whenever?: WatchSource<boolean>[]
+  prevent?: boolean
+}
+
+export interface ShortcutsConfig {
+  [key: string]: ShortcutConfig | Function
+}
+
+export interface ShortcutsOptions {
+  chainDelay?: number
+}
+
+interface Shortcut {
+  handler: Function
+  condition: ComputedRef<boolean>
+  chained: boolean
+  // KeyboardEvent attributes
+  key: string
+  ctrlKey: boolean
+  metaKey: boolean
+  shiftKey: boolean
+  altKey: boolean
+  // code?: string
+  // keyCode?: number
+  prevent?: boolean
+}
+
+const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/
+const combinedShortcutRegex = /^[^_]+.*_.*[^_]+$/
+
+export const useShortcuts = (config: ShortcutsConfig, options: ShortcutsOptions = {}) => {
+  const { macOS, usingInput } = _useShortcuts()
+
+  let shortcuts: Shortcut[] = []
+
+  const chainedInputs = ref<string[]>([])
+  const clearChainedInput = () => {
+    chainedInputs.value.splice(0, chainedInputs.value.length)
+  }
+  const debouncedClearChainedInput = useDebounceFn(clearChainedInput, options.chainDelay ?? 800)
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    // Input autocomplete triggers a keydown event
+    if (!e.key) { return }
+
+    const alphabeticalKey = /^[a-z]{1}$/i.test(e.key)
+
+    let chainedKey
+    chainedInputs.value.push(e.key)
+    // try matching a chained shortcut
+    if (chainedInputs.value.length >= 2) {
+      chainedKey = chainedInputs.value.slice(-2).join('-')
+
+      for (const shortcut of shortcuts.filter(s => s.chained)) {
+        if (shortcut.key !== chainedKey) { continue }
+
+        if (shortcut.condition.value) {
+          e.stopPropagation
+          shortcut.prevent && e.preventDefault()
+          shortcut.handler()
+        }
+        clearChainedInput()
+        return
+      }
+    }
+
+    // try matching a standard shortcut
+    for (const shortcut of shortcuts.filter(s => !s.chained)) {
+      if (e.key.toLowerCase() !== shortcut.key) { continue }
+      if (e.metaKey !== shortcut.metaKey) { continue }
+      if (e.ctrlKey !== shortcut.ctrlKey) { continue }
+      // shift modifier is only checked in combination with alphabetical keys
+      // (shift with non-alphabetical keys would change the key)
+      if (alphabeticalKey && e.shiftKey !== shortcut.shiftKey) { continue }
+      // alt modifier changes the combined key anyways
+      // if (e.altKey !== shortcut.altKey) { continue }
+
+      if (shortcut.condition.value) {
+        e.preventDefault()
+        shortcut.handler()
+      }
+      clearChainedInput()
+      return
+    }
+
+    debouncedClearChainedInput()
+  }
+
+  // Map config to full detailled shortcuts
+  shortcuts = Object.entries(config).map(([key, shortcutConfig]) => {
+    if (!shortcutConfig) {
+      return null
+    }
+
+    // Parse key and modifiers
+    let shortcut: Partial<Shortcut>
+
+    if (key.includes('-') && key !== '-' && !key.match(chainedShortcutRegex)?.length) {
+      console.trace(`[Shortcut] Invalid key: "${key}"`)
+    }
+
+    if (key.includes('_') && key !== '_' && !key.match(combinedShortcutRegex)?.length) {
+      console.trace(`[Shortcut] Invalid key: "${key}"`)
+    }
+
+    const chained = key.includes('-') && key !== '-'
+    if (chained) {
+      shortcut = {
+        key: key.toLowerCase(),
+        metaKey: false,
+        ctrlKey: false,
+        shiftKey: false,
+        altKey: false
+      }
+    } else {
+      const keySplit = key.toLowerCase().split('_').map(k => k)
+      shortcut = {
+        key: keySplit.filter(k => !['meta', 'ctrl', 'shift', 'alt'].includes(k)).join('_'),
+        metaKey: keySplit.includes('meta'),
+        ctrlKey: keySplit.includes('ctrl'),
+        shiftKey: keySplit.includes('shift'),
+        altKey: keySplit.includes('alt')
+      }
+    }
+    shortcut.chained = chained
+
+    // Convert Meta to Ctrl for non-MacOS
+    if (!macOS.value && shortcut.metaKey && !shortcut.ctrlKey) {
+      shortcut.metaKey = false
+      shortcut.ctrlKey = true
+    }
+
+    // Retrieve handler function
+    if (typeof shortcutConfig === 'function') {
+      shortcut.handler = shortcutConfig
+    } else if (typeof shortcutConfig === 'object') {
+      shortcut = { ...shortcut, handler: shortcutConfig.handler, prevent: shortcutConfig.prevent }
+    }
+
+    if (!shortcut.handler) {
+      console.trace('[Shortcut] Invalid value')
+      return null
+    }
+
+    // Create shortcut computed
+    const conditions: ComputedRef<boolean>[] = []
+    if (!(shortcutConfig as ShortcutConfig).usingInput) {
+      conditions.push(logicNot(usingInput))
+    } else if (typeof (shortcutConfig as ShortcutConfig).usingInput === 'string') {
+      conditions.push(computed(() => usingInput.value === (shortcutConfig as ShortcutConfig).usingInput))
+    }
+    shortcut.condition = logicAnd(...conditions, ...((shortcutConfig as ShortcutConfig).whenever || []))
+
+    return shortcut as Shortcut
+  }).filter(Boolean) as Shortcut[]
+
+  useEventListener('keydown', onKeyDown)
+}
+
+export const _useShortcuts = () => {
+  const macOS = computed(() => process.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/))
+
+  const metaSymbol = ref(' ')
+
+  const activeElement = useActiveElement()
+  const usingInput = computed(() => {
+    const usingInput = !!(activeElement.value?.tagName === 'INPUT' || activeElement.value?.tagName === 'TEXTAREA' || activeElement.value?.contentEditable === 'true')
+
+    if (usingInput) {
+      return ((activeElement.value as any)?.name as string) || true
+    }
+
+    return false
+  })
+
+  onMounted(() => {
+    metaSymbol.value = macOS.value ? '⌘' : 'Ctrl'
+  })
+
+  return {
+    macOS,
+    metaSymbol,
+    activeElement,
+    usingInput
+  }
+}

composables/useToast.ts

@@ -0,0 +1,40 @@
+export interface ToastConfig 
+{
+    closeable?: boolean
+    duration: number
+    title?: string
+    content?: string
+    timer?: boolean
+    type?: ToastType
+}
+export type ToastType = 'info' | 'success' | 'error';
+export type ExtraToastConfig = ToastConfig & { id: string, state: boolean };
+
+let id = 0;
+
+const [provideToaster, useToast] = createInjectionState(() => {
+    const list = ref<ExtraToastConfig[]>([]);
+
+    function add(config: ToastConfig)
+    {
+        list.value.push({ ...config, id: (++id).toString(), state: true, });
+    }
+    function clear(type?: ToastType)
+    {
+        list.value.forEach(e => { if(e.type !== type) { e.state = false; } });
+    }
+
+    return { list, add, clear }
+}, { injectionKey: Symbol('toaster') });
+
+export { provideToaster, useToastWithDefault as useToast };
+
+function useToastWithDefault()
+{
+    const toasts = useToast();
+    if(!toasts)
+    {
+        return { list: ref<ExtraToastConfig[]>([]), add: () => {}, clear: () => {} };
+    }
+    return toasts;
+}

composables/useUserSession.ts

@@ -0,0 +1,40 @@
+import type { UserSession, UserSessionComposable } from '~/types/auth'
+import { useContent } from './useContent'
+
+const useSessionState = () => useState<UserSession>('nuxt-session', () => ({}))
+const useAuthReadyState = () => useState('nuxt-auth-ready', () => false)
+const useContentFetch = (force: boolean) => useContent().fetch(force);
+
+/**
+ * Composable to get back the user session and utils around it.
+ */
+export function useUserSession(): UserSessionComposable {
+  const sessionState = useSessionState()
+  const authReadyState = useAuthReadyState()
+  return {
+    ready: computed(() => authReadyState.value),
+    loggedIn: computed(() => Boolean(sessionState.value.user)),
+    user: computed(() => sessionState.value.user ?? null),
+    session: sessionState,
+    fetch,
+    clear,
+  }
+}
+
+async function fetch(): Promise<boolean> {
+  const authReadyState = useAuthReadyState()
+  const sessionState = useSessionState()
+  const loggedIn = Boolean(sessionState.value.user)
+  sessionState.value = await useRequestFetch()('/api/auth/session').catch(() => ({}))
+  if (!authReadyState.value)
+  {
+    authReadyState.value = true
+  }
+  return loggedIn !== Boolean(sessionState.value.user);
+}
+
+async function clear() {
+  await useRequestFetch()('/api/auth/session', { method: 'DELETE' })
+  useSessionState().value = {}
+  useRouter().go(0)
+}