New SQL tables structure

This reverts commit 685bd47fc4.

app.vue

@@ -5,7 +5,7 @@
 		<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 relative">
-					<NuxtPage></NuxtPage>
+					<NuxtPage />
 				</div>
 			</NuxtLayout>
 			<Toaster v-model="list" />
@@ -39,4 +39,8 @@ const { list } = useToast();
 	@apply bg-light-50;
 	@apply dark:bg-dark-50;
 }
+
+::-webkit-scrollbar-corner {
+	@apply bg-transparent;
+}
 </style>

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

@@ -1,41 +1,157 @@
 <script lang="ts">
-const External = Annotation.define<boolean>();
+import { crosshairCursor, Decoration, dropCursor, EditorView, keymap, ViewPlugin, ViewUpdate, WidgetType, type DecorationSet } from '@codemirror/view';
-</script>
+import { Annotation, EditorState, RangeValue, SelectionRange, type Range } from '@codemirror/state';
-
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
-<script setup lang="ts">
+import { bracketMatching, defaultHighlightStyle, foldKeymap, HighlightStyle, indentOnInput, syntaxHighlighting, syntaxTree } from '@codemirror/language';
-import { dropCursor, crosshairCursor, keymap, EditorView, ViewUpdate, placeholder as placeholderExtension } from '@codemirror/view';
-import { Annotation, EditorState } from '@codemirror/state';
-import { indentOnInput, syntaxHighlighting, defaultHighlightStyle, bracketMatching, foldKeymap } from '@codemirror/language';
-import { history, defaultKeymap, historyKeymap } from '@codemirror/commands';
 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>();
-const state = ref<EditorState>();
-
-const { placeholder } = defineProps<{
-    placeholder?: string
-}>();
-const model = defineModel<string>();
 
 onMounted(() => {
     if(editor.value)
     {
-        state.value = EditorState.create({
+        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(defaultHighlightStyle, { fallback: true }),
+                syntaxHighlighting(highlight),
                 bracketMatching(),
                 closeBrackets(),
                 crosshairCursor(),
-                placeholderExtension(placeholder ?? ''),
                 EditorView.lineWrapping,
                 keymap.of([
                     ...closeBracketsKeymap,
@@ -53,19 +169,24 @@ onMounted(() => {
                     }
                 }),
                 EditorView.contentAttributes.of({spellcheck: "true"}),
+                ViewPlugin.fromClass(Decorator, {
+                    decorations: e => e.decorations,
+                })
             ]
         });
-        view.value = new EditorView({
+
-            state: state.value,
+        if(autofocus)
-            parent: editor.value,
+        {
-        });
+            view.value.focus();
         }
-})
+    }
+});
 
 onBeforeUnmount(() => {
-    if (view.value) {
+    if (view.value)
-        view.value?.destroy()
+    {
-        view.value = undefined
+        view.value?.destroy();
+        view.value = undefined;
     }
 });
 
@@ -81,20 +202,34 @@ watchEffect(() => {
         });
     }
 });
+
+defineExpose({ focus: () => editor.value?.focus() });
 </script>
 
 <template>
-    <div ref="editor" class="flex flex-1 w-full justify-stretch items-stretch border border-light-35 dark:border-dark-35 caret-light-100 dark:caret-dark-100" />
+    <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;
+    @apply caret-light-100 dark:caret-dark-100;
-    @apply 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/Markdown.vue

@@ -1,26 +0,0 @@
-<template>
-    <template v-if="content && content.length > 0">
-      <Suspense :timeout="0">
-        <MarkdownRenderer #default :key="key" v-if="node" :node="node" :proses="proses"></MarkdownRenderer>
-        <template #fallback><Loading /></template>
-      </Suspense>
-    </template>
-  </template>
-  
-  <script setup lang="ts">
-  import { hash } from 'ohash'
-  
-  const { content } = defineProps({
-    content: {
-      type: String,
-      required: true,
-    },
-    proses: {
-      type: Object
-    }
-  })
-  
-  const parser = useMarkdown();
-  const key = computed(() => hash(content));
-  const node = computed(() => content ? parser(content) : undefined);
-  </script>

components/MarkdownRenderer.vue

@@ -1,115 +1,49 @@
-<script lang="ts">
+<template>
-import type { RootContent, Root } from 'hast';
+	<div v-if="content && content.length > 0">
-import { Text, Comment } from 'vue';
+		<ProsesRenderer #default v-if="data" :node="data" :proses="proses" />
+	</div>
+</template>
 
-import ProseP from '~/components/prose/ProseP.vue';
+<script setup lang="ts">
-import ProseA from '~/components/prose/ProseA.vue';
+import type { Component } from 'vue';
-import ProseBlockquote from '~/components/prose/ProseBlockquote.vue';
+import { heading } from 'hast-util-heading';
-import ProseCallout from './prose/ProseCallout.vue';
+import { headingRank } from 'hast-util-heading-rank';
-import ProseCode from '~/components/prose/ProseCode.vue';
+import { parseId } from '~/shared/general.util';
-import ProsePre from '~/components/prose/ProsePre.vue';
+import type { Root } from 'hast';
-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 = {
+const { content, proses, filter } = defineProps<{
-    "p": ProseP,
+	content: string
-    "a": ProseA,
+	proses?: Record<string, string | Component>
-    "blockquote": ProseBlockquote,
+	filter?: string
-    "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({
+const parser = useMarkdown(), data = ref<Root>();
-    name: 'MarkdownRenderer',
+const node = computed(() => content ? parser(content) : undefined);
-    props: {
+watch([node], () => {
-        node: {
+	if(!node.value)
-            type: Object,
+		data.value = undefined;
-            required: true
+	else if(!filter)
-        },
-        proses: {
-            type: Object,
-            default: () => ({})
-        }
-    },
-    async setup(props) {
-        if(props.proses)
 	{
-            for(const prose of Object.keys(props.proses))
+		data.value = node.value;
+	}
+	else
 	{
-                if(typeof props.proses[prose] === 'string')
+		const start = node.value?.children.findIndex(e => heading(e) && parseId(e.properties.id as string | undefined) === filter) ?? -1;
-                    props.proses[prose] = await resolveComponent(props.proses[prose]);
-            }
-        }
-        return { tags: Object.assign({}, proseList, props.proses) };
-    },
-    render(ctx: any) {
-        const { node, tags } = ctx;
 
-        if(!node)
+		if(start === -1)
-            return null;
+			data.value = node.value;
-
+		else
-        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);
+			let end = start;
-    }
+			const rank = headingRank(node.value.children[start])!;
-    else if(node.type === 'comment' && node.value.length > 0 && node.value !== '\n')
+			while(end < node.value.children.length)
 			{
-        return h(Comment, node.value);
+				end++;
+				if(heading(node.value.children[end]) && headingRank(node.value.children[end])! <= rank)
+					break;
 			}
-    else if(node.type === 'element')
+			data.value = { ...node.value, children: node.value.children.slice(start, end) };
-    {
-        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;
+}, { 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/base/Avatar.vue

@@ -1,5 +1,5 @@
 <template>
-    <AvatarRoot class="inline-flex h-12 w-12 select-none items-center justify-center overflow-hidden align-middle">
+    <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>
@@ -13,10 +13,18 @@
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue/dist/iconify.js';
-const { src, icon, text } = defineProps<{
+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/Collapsible.vue

@@ -1,7 +1,8 @@
 <template>
     <CollapsibleRoot v-model:open="model" :disabled="disabled" :defaultOpen="defaultOpen">
+        <slot name="alwaysVisible"></slot>
         <div class="flex flex-row justify-center items-center">
-            <span v-if="!!label">{{ label }}</span>
+            <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" />
@@ -9,7 +10,6 @@
                 </Button>
             </CollapsibleTrigger>
         </div>
-        <slot name="alwaysVisible"></slot>
         <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>

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/DraggableTree.vue

@@ -1,6 +1,6 @@
 <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="flex items-center outline-none relative cursor-pointer hover:bg-light-20 dark:hover:bg-dark-20 data-[selected]:bg-light-35 dark:data-[selected]:bg-dark-35" @select.prevent @toggle.prevent>
+		<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"

components/base/DropdownContentRender.vue

@@ -1,7 +1,7 @@
 <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="group 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">
+            <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>
@@ -10,14 +10,17 @@
             </DropdownMenuItem>
         </template>
         
-        <!-- TODO -->
         <template v-else-if="item.type === 'checkbox'">
-            <DropdownMenuCheckboxItem :disabled="item.disabled" :textValue="item.label" @update:checked="item.select">
+            <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"> {{ item.kbd }} </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>
         

components/base/HoverCard.vue

@@ -4,7 +4,7 @@
             <slot></slot>
         </HoverCardTrigger>
         <HoverCardPortal v-if="!disabled">
-            <HoverCardContent :class="$attrs.class" :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" >
+            <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>
@@ -13,11 +13,24 @@
 </template>
 
 <script setup lang="ts">
-const { delay = 500, disabled = false, side = 'bottom' } = defineProps<{
+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 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

@@ -1,5 +1,5 @@
 <template>
-    <span :class="{'w-6 h-6 border-4 after:-top-[4px] after:-left-[4px] after:w-6 after:h-6 after:border-4': size === 'normal', 'w-4 h-4 border-2 after:-top-[2px] after:-left-[2px] after:w-4 after:h-4 after:border-2': size === 'small', 'w-12 h-12 border-[6px] after:-top-[6px] after:-left-[6px] after:w-12 after:h-12 after:border-[6px]': size === 'large'}" class="rounded-full border-light-35 dark:border-dark-35 after:block after:relative after:rounded-full after:border-transparent after:border-t-accent-purple after:animate-spin"></span>
+    <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">

components/base/Select.vue

@@ -1,7 +1,7 @@
 <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>
-        <SelectRoot v-model="model">
+        <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
@@ -12,7 +12,7 @@
 
             <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>
@@ -31,11 +31,12 @@
 <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<string>();
 </script>

components/base/SelectItem.vue

@@ -12,7 +12,7 @@ import { Icon } from '@iconify/vue/dist/iconify.js';
 import { SelectItem, SelectItemIndicator, SelectItemText } from 'radix-vue'
 const { disabled = false, value } = defineProps<{
     disabled?: boolean
-    value: NonNullable<any>
+    value: NonNullable<string>
     label: string
 }>();
 </script>

components/base/Tree.vue

@@ -1,6 +1,6 @@
 <template>
-    <TreeRoot v-slot="{ flattenItems }" class="list-none select-none text-light-100 dark:text-dark-100 p-2 xl:text-base text-sm" :items="model" :get-key="getKey" :defaultExpanded="flatten(model)">
+    <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 - 0.5}em` }" v-bind="item.bind" class="flex items-center px-2 outline-none relative cursor-pointer">
+        <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>

components/canvas/Canvas.vue

@@ -1,224 +0,0 @@
-<script setup lang="ts">
-import { useDrag, usePinch, useWheel } from '@vueuse/gesture';
-import type { CanvasContent, CanvasNode } from '~/types/canvas';
-import { Icon } from '@iconify/vue/dist/iconify.js';
-import { clamp } from '#shared/general.utils';
-
-interface Props
-{
-    canvas: CanvasContent;
-}
-const props = defineProps<Props>();
-
-const dispX = ref(0), dispY = ref(0), minZoom = ref(0.1), zoom = ref(0.5);
-const canvas = useTemplateRef('canvas');
-
-const reset = (_: MouseEvent) => {
-    zoom.value = minZoom.value; 
-
-    dispX.value = 0; 
-    dispY.value = 0;
-}
-function edgePos(side: 'bottom' | 'top' | 'left' | 'right', pos: { x: number, y: number }, offset: number): { x: number, y: number } {
-    switch (side) {
-        case "left":
-            return {
-                x: pos.x - offset,
-                y: pos.y
-            };
-        case "right":
-            return {
-                x: pos.x + offset,
-                y: pos.y
-            };
-        case "top":
-            return {
-                x: pos.x,
-                y: pos.y - offset
-            };
-        case "bottom":
-            return {
-                x: pos.x,
-                y: pos.y + offset
-            }
-    }
-}
-function getNode(id: string): CanvasNode | undefined
-{
-    return props.canvas.nodes.find(e => e.id === id);
-}
-function posFromDir(e: { minX: number, minY: number, maxX: number, maxY: number }, t: 'bottom' | 'top' | 'left' | 'right'): { x: number, y: number } {
-    switch (t) {
-        case "top":
-            return { x: (e.minX + e.maxX) / 2, y: e.minY };
-        case "right":
-            return { x: e.maxX, y: (e.minY + e.maxY) / 2 };
-        case "bottom":
-            return { x: (e.minX + e.maxX) / 2, y: e.maxY };
-        case "left":
-            return { x: e.minX, y: (e.minY + e.maxY) / 2 };
-    }
-}
-function getBbox(node: CanvasNode): { minX: number, minY: number, maxX: number, maxY: number } {
-    return { minX: node.x, minY: node.y, maxX: node.x + node.width, maxY: node.y + node.height };
-}
-function path(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', to: CanvasNode, toSide: 'bottom' | 'top' | 'left' | 'right'): any {
-    if(from === undefined || to === undefined)
-    {
-        return {
-            path: '',
-            from: {},
-            to: {},
-            toSide: '',
-        }
-    }
-    const start = posFromDir(getBbox(from), fromSide), end = posFromDir(getBbox(to), toSide);
-    return bezier(start, fromSide, end, toSide);
-}
-function bezier(from: { x: number, y: number }, fromSide: 'bottom' | 'top' | 'left' | 'right', to: { x: number, y: number }, toSide: 'bottom' | 'top' | 'left' | 'right'): any {
-    const r = Math.hypot(from.x - to.x, from.y - to.y), o = clamp(r / 2, 70, 150), a = edgePos(fromSide, from, o), s = edgePos(toSide, to, o);
-    return {
-        path: `M${from.x},${from.y} C${a.x},${a.y} ${s.x},${s.y} ${to.x},${to.y}`,
-        from: from,
-        to: to,
-        side: toSide,
-    };
-}
-function labelCenter(from: CanvasNode, fromSide: 'bottom' | 'top' | 'left' | 'right', to: CanvasNode, toSide: 'bottom' | 'top' | 'left' | 'right'): string {
-    const start = posFromDir(getBbox(from), fromSide), end = posFromDir(getBbox(to), toSide);
-    const len = Math.hypot(start.x - end.x, start.y - end.y), offset = clamp(len / 2, 70, 150), b = edgePos(fromSide, start, offset), s = edgePos(toSide, end, offset);
-    const center = getCenter(start, end, b, s, 0.5);
-    return `translate(${center.x}px, ${center.y}px)`;
-}
-function getCenter(n: { x: number, y: number }, i: { x: number, y: number }, r: { x: number, y: number }, o: { x: number, y: number }, e: number): { x: number, y: number } {
-    const a = 1 - e, s = a * a * a, l = 3 * e * a * a, c = 3 * e * e * a, u = e * e * e;
-    return {
-        x: s * n.x + l * r.x + c * o.x + u * i.x,
-        y: s * n.y + l * r.y + c * o.y + u * i.y
-    };
-}
-/*
-
-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
-
-*/
-
-const pinchHandler = usePinch(({ event, offset: [z] }: { event: Event, offset: number[] }) => { 
-    zoom.value = clamp(z / 2048, minZoom.value, 3);
-}, {
-    domTarget: canvas,
-    eventOptions: { passive: false, }
-})
-const dragHandler = useDrag(({ event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
-    dispX.value += x / zoom.value;
-    dispY.value += y / zoom.value;
-}, {
-    domTarget: canvas,
-    eventOptions: { passive: false, }
-})
-const wheelHandler = useWheel(({ event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
-    zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3);
-}, {
-    domTarget: canvas,
-    eventOptions: { passive: false, }
-})
-</script>
-
-<template>
-    <Suspense>
-        <template #default>
-            <div id="canvas" ref="canvas" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none"
-                :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
-                <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden">
-                    <Tooltip message="Zoom avant" side="right">
-                        <div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" 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" 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 * 0.9, minZoom, 3)" 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="absolute top-0 left-0 w-full h-full origin-center pointer-events-none *:pointer-events-auto *:select-none"
-                    :style="{transform: `scale(${zoom}) translate(${dispX}px, ${dispY}px)`}">
-                    <div>
-                        <CanvasNode v-for="node of props.canvas.nodes" :key="node.id" :node="node" :zoom="zoom" />
-                    </div>
-                    <template v-for="edge of props.canvas.edges">
-                        <div :key="edge.id" v-if="edge.label" class="absolute z-10"
-                            :style="{ transform: labelCenter(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide) }">
-                            <div class="relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 -translate-x-[50%] -translate-y-[50%]">{{ edge.label }}</div>
-                        </div>
-                    </template>
-                    <svg class="absolute top-0 left-0 overflow-visible w-full h-full origin-top pointer-events-none">
-                        <CanvasEdge v-for="edge of props.canvas.edges" :key="edge.id"
-                            :path="path(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide)"
-                            :color="edge.color" :label="edge.label" />
-                    </svg>
-                </div>
-            </div>
-        </template>
-        <template #fallback>
-            <div class="loading"></div>
-        </template>
-    </Suspense>
-</template>

components/canvas/CanvasEdge.vue

@@ -1,33 +1,42 @@
-<script setup lang="ts">
-import type { CanvasColor } from "~/types/canvas";
-
-type Direction = 'bottom' | 'top' | 'left' | 'right';
-interface Props
-{
-    path: {
-        path: string;
-        from: { x: number; y: number };
-        to: { x: number; y: number };
-        side: Direction;
-    };
-    color?: CanvasColor;
-    label?: string;
-}
-const props = defineProps<Props>();
-
-const rotation: Record<Direction, string> = {
-    top: "180",
-    bottom: "0",
-    left: "90",
-    right: "270"
-};
-</script>
-
 <template>
-    <g :style="{'--canvas-color': color?.hex}" class="z-0">
+    <div class="absolute overflow-visible">
-        <path :style="`stroke-linecap: butt; stroke-width: calc(3px * var(--zoom-multiplier));`" :class="color?.class ? `stroke-light-${color.class} dark:stroke-dark-${color.class}` : ((color && color?.hex !== undefined) ? 'stroke-[color:var(--canvas-color)]' : 'stroke-light-40 dark:stroke-dark-40')" class="fill-none stroke-[4px]" :d="path.path"></path>
+        <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>
-        <g :style="`transform: translate(${path.to.x}px, ${path.to.y}px) scale(var(--zoom-multiplier)) rotate(${rotation[path.side]}deg);`">
+        <svg class="absolute top-0 overflow-visible h-px w-px">
-            <polygon :class="color?.class ? `fill-light-${color.class} dark:fill-dark-${color.class}` : ((color && color?.hex !== undefined) ? 'fill-[color:var(--canvas-color)]' : 'fill-light-40 dark:fill-dark-40')" points="0,0 6.5,10.4 -6.5,10.4"></polygon>
+            <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

@@ -1,27 +1,15 @@
-<script setup lang="ts">
+<template>
-import { Icon } from '@iconify/vue/dist/iconify.js';
+    <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'}">
-import type { CanvasNode } from '~/types/canvas';
+        <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">
-interface Props {
+                <div v-if="node.text?.length > 0" class="flex items-center">
-    node: CanvasNode;
+                    <MarkdownRenderer :content="node.text" />
-    zoom: number;
+                </div>
-}
+            </div>
-
+        </div>
-const props = defineProps<Props>();
+        <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>
-const size = Math.max(props.node.width, props.node.height);
+</template>
-const colors = computed(() => {
-    if(props.node.color)
-    {
-        const color = props.node.color;
-        return color?.class ? { bg: `bg-light-${color?.class} dark:bg-dark-${color?.class}`, border: `border-light-${color?.class} dark:border-dark-${color?.class}`} : { bg: `bg-colored`, border: `border-[color:var(--canvas-color)]` };
-    }
-    else
-    {
-        return { border: `border-light-40 dark:border-dark-40`, bg: `bg-light-40 dark:bg-dark-40` };
-    }
-})
-</script>
 
 <style>
 .bg-colored
@@ -30,23 +18,18 @@ const colors = computed(() => {
     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';
 
-<template>
+const { node } = defineProps<{
-    <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'}">
+    node: CanvasNode
-        <div :class="[colors.border]" class="border-2 bg-light-20 dark:bg-dark-20 overflow-hidden contain-strict w-full h-full flex">
+    zoom: number
-            <div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07]" :class="colors.bg">
+}>();
-                <template v-if="node.type === 'group' || zoom > Math.min(0.4, 1000 / size)">
+
-                    <div v-if="node.text?.length > 0" class="flex items-center">
+const style = computed(() => {
-                        <Markdown :content="node.text" />
+    return node.color ? node.color?.class ? 
-                    </div>
+        { bg: `bg-light-${node.color?.class} dark:bg-dark-${node.color?.class}`, border: `border-light-${node.color?.class} dark:border-dark-${node.color?.class}` } : 
-                </template>
+        { bg: `bg-colored`, border: `border-[color:var(--canvas-color)]` } : 
-                <template v-else>
+        { border: `border-light-40 dark:border-dark-40`, bg: `bg-light-40 dark:bg-dark-40` }
-                    <div class="flex flex-1 justify-center items-center bg-light-30 dark:bg-dark-30">
+});
-                        <Icon icon="radix-icons:text-align-left" class="w-8 h-8"/>
+</script>
-                    </div>
-                </template>
-            </div>
-        </div>
-        <div v-if="node.type === 'group' && node.label !== undefined" :class="[colors.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>

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/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

@@ -1,3 +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

@@ -1,76 +1,36 @@
 <template>
-    <NuxtLink class="text-accent-blue inline-flex items-center" v-if="overview"
+	<NuxtLink class="text-accent-blue inline-flex items-center" :to="overview ? { name: 'explore-path', params: { path: overview.path }, hash: decodeURIComponent(hash) } : href" :class="class">
-    :to="{ name: 'explore-path', params: { path: overview.path }, hash: hash }" :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">
-        <HoverCard class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview.type === 'canvas'}" @open="load">
 			<template #content>
-                <template v-if="loading">
+				<Markdown v-if="overview?.type === 'markdown'" class="!px-6" :path="decodeURIComponent(pathname)" :filter="hash.substring(1)" popover />
-                    <Loading />
+				<template v-else-if="overview?.type === 'canvas'"><div class="w-[600px] h-[600px] relative"><Canvas :path="decodeURIComponent(pathname)" /></div></template>
 			</template>
-                <template v-else-if="overview.type === 'markdown'">
+			<span>
-                    <div class="px-10">
-                        <Markdown :content="content!.content" />
-                    </div>
-                </template>
-                <template v-else-if="overview.type === 'canvas'">
-                    <div class="w-[600px] h-[600px] relative">
-                        <Canvas :canvas="JSON.parse(content!.content)" />
-                    </div>
-                </template>
-            </template>
-            <template #default>
 				<slot v-bind="$attrs"></slot>
 				<Icon class="w-4 h-4 inline-block" v-if="overview && overview.type !== 'markdown'" :icon="iconByType[overview.type]" />
-            </template>
+			</span>
 		</HoverCard>
 	</NuxtLink>
-    <NuxtLink v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
-        <slot v-bind="$attrs"></slot>
-        <Icon class="w-4 h-4 inline-block" v-if="overview && overview.type !== 'markdown'" :height="20" :width="20" :icon="iconByType[overview.type]" />
-    </NuxtLink>
-    <slot :class="class" v-else v-bind="$attrs"></slot>
 </template>
 
 <script setup lang="ts">
 import { parseURL } from 'ufo';
 import { Icon } from '@iconify/vue/dist/iconify.js';
-import { iconByType } from '#shared/general.utils';
+import { iconByType } from '#shared/general.util';
 
 const { href } = defineProps<{
 	href: string
 	class?: string
 }>();
 
-const { hash, pathname, protocol } = parseURL(href);
+const { hash, pathname } = parseURL(href);
-const overview = ref<{
-    path: string;
-    owner: number;
-    title: string;
-    type: "file" | "folder" | "markdown" | "canvas";
-    navigable: boolean;
-    private: boolean;
-    order: number;
-    visit: number;
-}>(), content = ref<{
-    content: string;
-}>(), loading = ref(false), fetched = ref(false);
 
-if(!!pathname && !protocol)
+const { content } = useContent();
-{
+const overview = computed(() => content.value.find(e => e.path === decodeURIComponent(pathname)));
-    try {
-        overview.value = await $fetch(`/api/file/overview/${encodeURIComponent(pathname)}`);
-    } catch(e) {}
-}
-
-async function load()
-{
-    if(fetched.value === true)
-        return;
-
-    fetched.value = true;
-    loading.value = true;
-    try {
-        content.value = await $fetch(`/api/file/content/${encodeURIComponent(pathname)}`);
-    } catch(e) { }
-    loading.value = false;
-}
 </script>
+
+<style>
+.cm-link {
+	@apply text-accent-blue inline-flex items-center cursor-pointer hover:text-opacity-85;
+}
+</style>

components/prose/ProseBlockquote.vue

@@ -3,3 +3,26 @@
     <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

@@ -2,8 +2,8 @@
 	<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" class="w-6 h-6 stroke-2 float-start me-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">{{ title }}</span>
+				<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>

components/prose/ProseCode.vue

@@ -1,3 +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/ProseH1.vue

@@ -1,10 +1,21 @@
 <template>
-  <h1 :id="parseId(id)" class="text-5xl font-thin mt-3 mb-8 first:pt-0 pt-2 relative lg:right-8 sm:right-4 right-2">
+  <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.utils';
+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

@@ -1,12 +1,23 @@
 <template>
-  <h2 :id="parseId(id)" class="text-4xl font-semibold mt-3 mb-6 ms-1 first:pt-0 pt-2 relative sm:right-4 right-2">
+  <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.utils';
+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

@@ -5,8 +5,19 @@
 </template>
 
 <script setup lang="ts">
-import { parseId } from '#shared/general.utils';
+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

@@ -5,6 +5,18 @@
 </template>
 
 <script setup lang="ts">
-import { parseId } from '#shared/general.utils';
+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

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

components/prose/ProseH6.vue

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

components/prose/ProseHr.vue

@@ -1,3 +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/ProseLi.vue

@@ -1,3 +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/ProseTag.vue

@@ -3,3 +3,14 @@
         <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>

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/useMarkdown.ts

@@ -5,6 +5,7 @@ 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
@@ -14,7 +15,7 @@ export default function useMarkdown(): (md: string) => Root
     const parse = (markdown: string) => {
         if (!processor) 
         {
-            processor = unified().use([RemarkParse, RemarkGfm, RemarkOfm, RemarkFrontmatter]);
+            processor = unified().use([RemarkParse, RemarkGfm, RemarkOfm, RemarkBreaks, RemarkFrontmatter]);
             processor.use(RemarkRehype);
         }
 

composables/useUserSession.ts

@@ -1,11 +1,12 @@
 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.
- * @see https://github.com/atinux/nuxt-auth-utils
  */
 export function useUserSession(): UserSessionComposable {
   const sessionState = useSessionState()
@@ -13,28 +14,27 @@ export function useUserSession(): UserSessionComposable {
   return {
     ready: computed(() => authReadyState.value),
     loggedIn: computed(() => Boolean(sessionState.value.user)),
-    user: computed(() => sessionState.value.user || null),
+    user: computed(() => sessionState.value.user ?? null),
     session: sessionState,
     fetch,
     clear,
   }
 }
 
-async function fetch() {
+async function fetch(): Promise<boolean> {
   const authReadyState = useAuthReadyState()
-  useSessionState().value = await useRequestFetch()('/api/auth/session', {
+  const sessionState = useSessionState()
-    headers: {
+  const loggedIn = Boolean(sessionState.value.user)
-      Accept: 'text/json',
+  sessionState.value = await useRequestFetch()('/api/auth/session').catch(() => ({}))
-    },
+  if (!authReadyState.value)
-    retry: false,
+  {
-  }).catch(() => ({}))
-  if (!authReadyState.value) {
     authReadyState.value = true
   }
+  return loggedIn !== Boolean(sessionState.value.user);
 }
 
 async function clear() {
-  await $fetch('/api/auth/session', { method: 'DELETE' })
+  await useRequestFetch()('/api/auth/session', { method: 'DELETE' })
   useSessionState().value = {}
-  useRouter().go(0);
+  useRouter().go(0)
 }

db/schema.ts

@@ -1,5 +1,6 @@
 import { relations } from 'drizzle-orm';
-import { int, text, sqliteTable, type SQLiteTableExtraConfig, primaryKey, blob } from 'drizzle-orm/sqlite-core';
+import { int, text, sqliteTable, primaryKey, blob } from 'drizzle-orm/sqlite-core';
+import { ABILITIES, MAIN_STATS } from '../types/character';
 
 export const usersTable = sqliteTable("users", {
     id: int().primaryKey({ autoIncrement: true }),
@@ -20,26 +21,18 @@ export const userSessionsTable = sqliteTable("user_sessions", {
     id: int().notNull(),
     user_id: int().notNull().references(() => usersTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
     timestamp: int({ mode: 'timestamp' }).notNull().$defaultFn(() => new Date()),
-}, (table): SQLiteTableExtraConfig => {
+}, (table) => [primaryKey({ columns: [table.id, table.user_id] })]);
-    return {
-        pk: primaryKey({ columns: [table.id, table.user_id] }),
-    }
-});
 
 export const userPermissionsTable = sqliteTable("user_permissions", {
     id: int().notNull().references(() => usersTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
     permission: text().notNull(),
-}, (table): SQLiteTableExtraConfig => {
+}, (table) => [primaryKey({ columns: [table.id, table.permission] })]);
-    return {
-        pk: primaryKey({ columns: [table.id, table.permission] }),
-    }
-});
 
 export const explorerContentTable = sqliteTable("explorer_content", {
     path: text().primaryKey(),
     owner: int().notNull().references(() => usersTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
     title: text().notNull(),
-    type: text({ enum: ['file', 'folder', 'markdown', 'canvas'] }).notNull(),
+    type: text({ enum: ['file', 'folder', 'markdown', 'canvas', 'map'] }).notNull(),
     content: blob({ mode: 'buffer' }),
     navigable: int({ mode: 'boolean' }).notNull().default(true),
     private: int({ mode: 'boolean' }).notNull().default(false),
@@ -53,6 +46,52 @@ export const emailValidationTable = sqliteTable("email_validation", {
     timestamp: int({ mode: 'timestamp' }).notNull(),
 })
 
+export const characterTable = sqliteTable("character", {
+    id: int().primaryKey({ autoIncrement: true }),
+    name: text().notNull(),
+    owner: int().notNull().references(() => usersTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
+    people: int().notNull(),
+    level: int().notNull().default(1),
+    aspect: int(),
+    notes: text(),
+    health: int().notNull().default(0),
+    mana: int().notNull().default(0),
+    
+    visibility: text({ enum: ['private', 'public'] }).notNull().default('private'),
+    thumbnail: blob(),
+});
+
+export const characterTrainingTable = sqliteTable("character_training", {
+    character: int().notNull().references(() => characterTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
+    stat: text({ enum: MAIN_STATS }).notNull(),
+    level: int().notNull(),
+    choice: int().notNull(),
+}, (table) => [primaryKey({ columns: [table.character, table.stat, table.level] })]);
+
+export const characterLevelingTable = sqliteTable("character_leveling", {
+    character: int().notNull().references(() => characterTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
+    level: int().notNull(),
+    choice: int().notNull(),
+}, (table) => [primaryKey({ columns: [table.character, table.level] })]);
+
+export const characterAbilitiesTable = sqliteTable("character_abilities", {
+    character: int().notNull().references(() => characterTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
+    ability: text({ enum: ABILITIES }).notNull(),
+    value: int().notNull().default(0),
+    max: int().notNull().default(0),
+}, (table) => [primaryKey({ columns: [table.character, table.ability] })]);
+
+export const characterModifiersTable = sqliteTable("character_modifiers", {
+    character: int().notNull().references(() => characterTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
+    modifier: text({ enum: MAIN_STATS }).notNull(),
+    value: int().notNull().default(0),
+}, (table) => [primaryKey({ columns: [table.character, table.modifier] })]);
+
+export const characterSpellsTable = sqliteTable("character_spell", {
+    character: int().notNull().references(() => characterTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
+    value: text().notNull(),
+}, (table) => [primaryKey({ columns: [table.character, table.value] })]);
+
 export const usersRelation = relations(usersTable, ({ one, many }) => ({
     data: one(usersDataTable, { fields: [usersTable.id], references: [usersDataTable.id], }),
     session: many(userSessionsTable),
@@ -71,3 +110,27 @@ export const userPermissionsRelation = relations(userPermissionsTable, ({ one })
 export const explorerContentRelation = relations(explorerContentTable, ({ one }) => ({
     users: one(usersTable, { fields: [explorerContentTable.owner], references: [usersTable.id], }),
 }));
+export const characterRelation = relations(characterTable, ({ one, many }) => ({
+    user: one(usersTable, { fields: [characterTable.owner], references: [usersTable.id], }),
+    training: many(characterTrainingTable),
+    levels: many(characterLevelingTable),
+    abilities: many(characterAbilitiesTable),
+    modifiers: many(characterModifiersTable),
+    spells: many(characterSpellsTable)
+}));
+
+export const characterTrainingRelation = relations(characterTrainingTable, ({ one }) => ({
+    character: one(characterTable, { fields: [characterTrainingTable.character], references: [characterTable.id] })
+}));
+export const characterLevelingRelation = relations(characterLevelingTable, ({ one }) => ({
+    character: one(characterTable, { fields: [characterLevelingTable.character], references: [characterTable.id] })
+}));
+export const characterAbilitiesRelation = relations(characterAbilitiesTable, ({ one }) => ({
+    character: one(characterTable, { fields: [characterAbilitiesTable.character], references: [characterTable.id] })
+}));
+export const characterModifierRelation = relations(characterModifiersTable, ({ one }) => ({
+    character: one(characterTable, { fields: [characterModifiersTable.character], references: [characterTable.id] })
+}));
+export const characterSpellsRelation = relations(characterSpellsTable, ({ one }) => ({
+    character: one(characterTable, { fields: [characterSpellsTable.character], references: [characterTable.id] })
+}));

drizzle/0006_clever_marvex.sql

@@ -0,0 +1,7 @@
+CREATE TABLE `character` (
+	`id` text PRIMARY KEY NOT NULL,
+	`name` text NOT NULL,
+	`owner` integer NOT NULL,
+	`options` text NOT NULL,
+	FOREIGN KEY (`owner`) REFERENCES `users`(`id`) ON UPDATE cascade ON DELETE cascade
+);

drizzle/0007_tearful_true_believers.sql

@@ -0,0 +1,14 @@
+PRAGMA foreign_keys=OFF;--> statement-breakpoint
+CREATE TABLE `__new_character` (
+	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
+	`name` text NOT NULL,
+	`owner` integer NOT NULL,
+	`progress` text NOT NULL,
+	`thumbnail` blob,
+	FOREIGN KEY (`owner`) REFERENCES `users`(`id`) ON UPDATE cascade ON DELETE cascade
+);
+--> statement-breakpoint
+INSERT INTO `__new_character`("id", "name", "owner", "progress", "thumbnail") SELECT "id", "name", "owner", "progress", "thumbnail" FROM `character`;--> statement-breakpoint
+DROP TABLE `character`;--> statement-breakpoint
+ALTER TABLE `__new_character` RENAME TO `character`;--> statement-breakpoint
+PRAGMA foreign_keys=ON;

drizzle/0008_glorious_johnny_blaze.sql

@@ -0,0 +1 @@
+ALTER TABLE `character` ADD `values` text DEFAULT '{}' NOT NULL;

drizzle/0009_thin_omega_sentinel.sql

@@ -0,0 +1 @@
+ALTER TABLE `character` ADD `visibility` text DEFAULT 'private' NOT NULL;

drizzle/0010_bored_sabra.sql

@@ -0,0 +1,47 @@
+CREATE TABLE `character_abilities` (
+	`character` integer NOT NULL,
+	`ability` text NOT NULL,
+	`value` integer DEFAULT 0 NOT NULL,
+	PRIMARY KEY(`character`, `ability`),
+	FOREIGN KEY (`character`) REFERENCES `character`(`id`) ON UPDATE cascade ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `character_leveling` (
+	`character` integer NOT NULL,
+	`level` integer NOT NULL,
+	`choice` integer NOT NULL,
+	PRIMARY KEY(`character`, `level`),
+	FOREIGN KEY (`character`) REFERENCES `character`(`id`) ON UPDATE cascade ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `character_modifiers` (
+	`character` integer NOT NULL,
+	`modifier` text NOT NULL,
+	`value` integer DEFAULT 0 NOT NULL,
+	PRIMARY KEY(`character`, `modifier`),
+	FOREIGN KEY (`character`) REFERENCES `character`(`id`) ON UPDATE cascade ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `character_spell` (
+	`character` integer PRIMARY KEY NOT NULL,
+	`value` text NOT NULL,
+	FOREIGN KEY (`character`) REFERENCES `character`(`id`) ON UPDATE cascade ON DELETE cascade
+);
+--> statement-breakpoint
+CREATE TABLE `character_training` (
+	`character` integer NOT NULL,
+	`stat` text NOT NULL,
+	`level` integer NOT NULL,
+	`choice` integer NOT NULL,
+	PRIMARY KEY(`character`, `stat`, `level`),
+	FOREIGN KEY (`character`) REFERENCES `character`(`id`) ON UPDATE cascade ON DELETE cascade
+);
+--> statement-breakpoint
+ALTER TABLE `character` ADD `people` integer NOT NULL;--> statement-breakpoint
+ALTER TABLE `character` ADD `level` integer DEFAULT 1 NOT NULL;--> statement-breakpoint
+ALTER TABLE `character` ADD `aspect` integer;--> statement-breakpoint
+ALTER TABLE `character` ADD `notes` text;--> statement-breakpoint
+ALTER TABLE `character` ADD `health` integer DEFAULT 0 NOT NULL;--> statement-breakpoint
+ALTER TABLE `character` ADD `mana` integer DEFAULT 0 NOT NULL;--> statement-breakpoint
+ALTER TABLE `character` DROP COLUMN `progress`;--> statement-breakpoint
+ALTER TABLE `character` DROP COLUMN `values`;

drizzle/0011_demonic_titania.sql

@@ -0,0 +1 @@
+ALTER TABLE `character_abilities` ADD `max` integer DEFAULT 0 NOT NULL;

drizzle/0012_graceful_energizer.sql

@@ -0,0 +1,12 @@
+PRAGMA foreign_keys=OFF;--> statement-breakpoint
+CREATE TABLE `__new_character_spell` (
+	`character` integer NOT NULL,
+	`value` text NOT NULL,
+	PRIMARY KEY(`character`, `value`),
+	FOREIGN KEY (`character`) REFERENCES `character`(`id`) ON UPDATE cascade ON DELETE cascade
+);
+--> statement-breakpoint
+INSERT INTO `__new_character_spell`("character", "value") SELECT "character", "value" FROM `character_spell`;--> statement-breakpoint
+DROP TABLE `character_spell`;--> statement-breakpoint
+ALTER TABLE `__new_character_spell` RENAME TO `character_spell`;--> statement-breakpoint
+PRAGMA foreign_keys=ON;

drizzle/meta/0006_snapshot.json

@@ -0,0 +1,411 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "4e31a794-f0ae-4c44-a846-6e1bafa4b247",
+  "prevId": "a2731c1f-4150-4423-946e-670d794f8961",
+  "tables": {
+    "character": {
+      "name": "character",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner": {
+          "name": "owner",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "options": {
+          "name": "options",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_owner_users_id_fk": {
+          "name": "character_owner_users_id_fk",
+          "tableFrom": "character",
+          "tableTo": "users",
+          "columnsFrom": [
+            "owner"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "email_validation": {
+      "name": "email_validation",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "explorer_content": {
+      "name": "explorer_content",
+      "columns": {
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner": {
+          "name": "owner",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content": {
+          "name": "content",
+          "type": "blob",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "navigable": {
+          "name": "navigable",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "private": {
+          "name": "private",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "order": {
+          "name": "order",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "visit": {
+          "name": "visit",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "explorer_content_owner_users_id_fk": {
+          "name": "explorer_content_owner_users_id_fk",
+          "tableFrom": "explorer_content",
+          "tableTo": "users",
+          "columnsFrom": [
+            "owner"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_permissions": {
+      "name": "user_permissions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_permissions_id_users_id_fk": {
+          "name": "user_permissions_id_users_id_fk",
+          "tableFrom": "user_permissions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_permissions_id_permission_pk": {
+          "columns": [
+            "id",
+            "permission"
+          ],
+          "name": "user_permissions_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_sessions": {
+      "name": "user_sessions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_sessions_user_id_users_id_fk": {
+          "name": "user_sessions_user_id_users_id_fk",
+          "tableFrom": "user_sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_sessions_id_user_id_pk": {
+          "columns": [
+            "id",
+            "user_id"
+          ],
+          "name": "user_sessions_id_user_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users_data": {
+      "name": "users_data",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "signin": {
+          "name": "signin",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "lastTimestamp": {
+          "name": "lastTimestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "logCount": {
+          "name": "logCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "users_data_id_users_id_fk": {
+          "name": "users_data_id_users_id_fk",
+          "tableFrom": "users_data",
+          "tableTo": "users",
+          "columnsFrom": [
+            "id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "hash": {
+          "name": "hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "state": {
+          "name": "state",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {
+        "users_username_unique": {
+          "name": "users_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
+        },
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        },
+        "users_hash_unique": {
+          "name": "users_hash_unique",
+          "columns": [
+            "hash"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/0007_snapshot.json

@@ -0,0 +1,420 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "15ea15e0-3d44-4dff-a4cd-f8666c4aa5ed",
+  "prevId": "4e31a794-f0ae-4c44-a846-6e1bafa4b247",
+  "tables": {
+    "character": {
+      "name": "character",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner": {
+          "name": "owner",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "progress": {
+          "name": "progress",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "thumbnail": {
+          "name": "thumbnail",
+          "type": "blob",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_owner_users_id_fk": {
+          "name": "character_owner_users_id_fk",
+          "tableFrom": "character",
+          "tableTo": "users",
+          "columnsFrom": [
+            "owner"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "email_validation": {
+      "name": "email_validation",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "explorer_content": {
+      "name": "explorer_content",
+      "columns": {
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner": {
+          "name": "owner",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content": {
+          "name": "content",
+          "type": "blob",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "navigable": {
+          "name": "navigable",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "private": {
+          "name": "private",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "order": {
+          "name": "order",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "visit": {
+          "name": "visit",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "explorer_content_owner_users_id_fk": {
+          "name": "explorer_content_owner_users_id_fk",
+          "tableFrom": "explorer_content",
+          "tableTo": "users",
+          "columnsFrom": [
+            "owner"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_permissions": {
+      "name": "user_permissions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_permissions_id_users_id_fk": {
+          "name": "user_permissions_id_users_id_fk",
+          "tableFrom": "user_permissions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_permissions_id_permission_pk": {
+          "columns": [
+            "id",
+            "permission"
+          ],
+          "name": "user_permissions_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_sessions": {
+      "name": "user_sessions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_sessions_user_id_users_id_fk": {
+          "name": "user_sessions_user_id_users_id_fk",
+          "tableFrom": "user_sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_sessions_id_user_id_pk": {
+          "columns": [
+            "id",
+            "user_id"
+          ],
+          "name": "user_sessions_id_user_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users_data": {
+      "name": "users_data",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "signin": {
+          "name": "signin",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "lastTimestamp": {
+          "name": "lastTimestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "logCount": {
+          "name": "logCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "users_data_id_users_id_fk": {
+          "name": "users_data_id_users_id_fk",
+          "tableFrom": "users_data",
+          "tableTo": "users",
+          "columnsFrom": [
+            "id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "hash": {
+          "name": "hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "state": {
+          "name": "state",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {
+        "users_username_unique": {
+          "name": "users_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
+        },
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        },
+        "users_hash_unique": {
+          "name": "users_hash_unique",
+          "columns": [
+            "hash"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {
+      "\"character\".\"options\"": "\"character\".\"progress\""
+    }
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/0008_snapshot.json

@@ -0,0 +1,426 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "eb68cf2f-c7e2-4111-910d-a26b0fc438cc",
+  "prevId": "15ea15e0-3d44-4dff-a4cd-f8666c4aa5ed",
+  "tables": {
+    "character": {
+      "name": "character",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner": {
+          "name": "owner",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "progress": {
+          "name": "progress",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "values": {
+          "name": "values",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{}'"
+        },
+        "thumbnail": {
+          "name": "thumbnail",
+          "type": "blob",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_owner_users_id_fk": {
+          "name": "character_owner_users_id_fk",
+          "tableFrom": "character",
+          "tableTo": "users",
+          "columnsFrom": [
+            "owner"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "email_validation": {
+      "name": "email_validation",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "explorer_content": {
+      "name": "explorer_content",
+      "columns": {
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner": {
+          "name": "owner",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content": {
+          "name": "content",
+          "type": "blob",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "navigable": {
+          "name": "navigable",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "private": {
+          "name": "private",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "order": {
+          "name": "order",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "visit": {
+          "name": "visit",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "explorer_content_owner_users_id_fk": {
+          "name": "explorer_content_owner_users_id_fk",
+          "tableFrom": "explorer_content",
+          "tableTo": "users",
+          "columnsFrom": [
+            "owner"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_permissions": {
+      "name": "user_permissions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_permissions_id_users_id_fk": {
+          "name": "user_permissions_id_users_id_fk",
+          "tableFrom": "user_permissions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_permissions_id_permission_pk": {
+          "columns": [
+            "id",
+            "permission"
+          ],
+          "name": "user_permissions_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_sessions": {
+      "name": "user_sessions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_sessions_user_id_users_id_fk": {
+          "name": "user_sessions_user_id_users_id_fk",
+          "tableFrom": "user_sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_sessions_id_user_id_pk": {
+          "columns": [
+            "id",
+            "user_id"
+          ],
+          "name": "user_sessions_id_user_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users_data": {
+      "name": "users_data",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "signin": {
+          "name": "signin",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "lastTimestamp": {
+          "name": "lastTimestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "logCount": {
+          "name": "logCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "users_data_id_users_id_fk": {
+          "name": "users_data_id_users_id_fk",
+          "tableFrom": "users_data",
+          "tableTo": "users",
+          "columnsFrom": [
+            "id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "hash": {
+          "name": "hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "state": {
+          "name": "state",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {
+        "users_username_unique": {
+          "name": "users_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
+        },
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        },
+        "users_hash_unique": {
+          "name": "users_hash_unique",
+          "columns": [
+            "hash"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/0009_snapshot.json

@@ -0,0 +1,434 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "bffde16c-d716-40ec-9d92-cb49814815d7",
+  "prevId": "eb68cf2f-c7e2-4111-910d-a26b0fc438cc",
+  "tables": {
+    "character": {
+      "name": "character",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner": {
+          "name": "owner",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "progress": {
+          "name": "progress",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "values": {
+          "name": "values",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'{}'"
+        },
+        "visibility": {
+          "name": "visibility",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'private'"
+        },
+        "thumbnail": {
+          "name": "thumbnail",
+          "type": "blob",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_owner_users_id_fk": {
+          "name": "character_owner_users_id_fk",
+          "tableFrom": "character",
+          "tableTo": "users",
+          "columnsFrom": [
+            "owner"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "email_validation": {
+      "name": "email_validation",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "explorer_content": {
+      "name": "explorer_content",
+      "columns": {
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner": {
+          "name": "owner",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content": {
+          "name": "content",
+          "type": "blob",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "navigable": {
+          "name": "navigable",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "private": {
+          "name": "private",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "order": {
+          "name": "order",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "visit": {
+          "name": "visit",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "explorer_content_owner_users_id_fk": {
+          "name": "explorer_content_owner_users_id_fk",
+          "tableFrom": "explorer_content",
+          "tableTo": "users",
+          "columnsFrom": [
+            "owner"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_permissions": {
+      "name": "user_permissions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_permissions_id_users_id_fk": {
+          "name": "user_permissions_id_users_id_fk",
+          "tableFrom": "user_permissions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_permissions_id_permission_pk": {
+          "columns": [
+            "id",
+            "permission"
+          ],
+          "name": "user_permissions_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_sessions": {
+      "name": "user_sessions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_sessions_user_id_users_id_fk": {
+          "name": "user_sessions_user_id_users_id_fk",
+          "tableFrom": "user_sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_sessions_id_user_id_pk": {
+          "columns": [
+            "id",
+            "user_id"
+          ],
+          "name": "user_sessions_id_user_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users_data": {
+      "name": "users_data",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "signin": {
+          "name": "signin",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "lastTimestamp": {
+          "name": "lastTimestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "logCount": {
+          "name": "logCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "users_data_id_users_id_fk": {
+          "name": "users_data_id_users_id_fk",
+          "tableFrom": "users_data",
+          "tableTo": "users",
+          "columnsFrom": [
+            "id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "hash": {
+          "name": "hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "state": {
+          "name": "state",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {
+        "users_username_unique": {
+          "name": "users_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
+        },
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        },
+        "users_hash_unique": {
+          "name": "users_hash_unique",
+          "columns": [
+            "hash"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/0010_snapshot.json

@@ -0,0 +1,724 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "af3d9e4f-cea6-42fa-8f8b-d743d97b9c37",
+  "prevId": "bffde16c-d716-40ec-9d92-cb49814815d7",
+  "tables": {
+    "character_abilities": {
+      "name": "character_abilities",
+      "columns": {
+        "character": {
+          "name": "character",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "ability": {
+          "name": "ability",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_abilities_character_character_id_fk": {
+          "name": "character_abilities_character_character_id_fk",
+          "tableFrom": "character_abilities",
+          "tableTo": "character",
+          "columnsFrom": [
+            "character"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "character_abilities_character_ability_pk": {
+          "columns": [
+            "character",
+            "ability"
+          ],
+          "name": "character_abilities_character_ability_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "character_leveling": {
+      "name": "character_leveling",
+      "columns": {
+        "character": {
+          "name": "character",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "level": {
+          "name": "level",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "choice": {
+          "name": "choice",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_leveling_character_character_id_fk": {
+          "name": "character_leveling_character_character_id_fk",
+          "tableFrom": "character_leveling",
+          "tableTo": "character",
+          "columnsFrom": [
+            "character"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "character_leveling_character_level_pk": {
+          "columns": [
+            "character",
+            "level"
+          ],
+          "name": "character_leveling_character_level_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "character_modifiers": {
+      "name": "character_modifiers",
+      "columns": {
+        "character": {
+          "name": "character",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "modifier": {
+          "name": "modifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_modifiers_character_character_id_fk": {
+          "name": "character_modifiers_character_character_id_fk",
+          "tableFrom": "character_modifiers",
+          "tableTo": "character",
+          "columnsFrom": [
+            "character"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "character_modifiers_character_modifier_pk": {
+          "columns": [
+            "character",
+            "modifier"
+          ],
+          "name": "character_modifiers_character_modifier_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "character_spell": {
+      "name": "character_spell",
+      "columns": {
+        "character": {
+          "name": "character",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_spell_character_character_id_fk": {
+          "name": "character_spell_character_character_id_fk",
+          "tableFrom": "character_spell",
+          "tableTo": "character",
+          "columnsFrom": [
+            "character"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "character": {
+      "name": "character",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner": {
+          "name": "owner",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "people": {
+          "name": "people",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "level": {
+          "name": "level",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 1
+        },
+        "aspect": {
+          "name": "aspect",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "notes": {
+          "name": "notes",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "health": {
+          "name": "health",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "mana": {
+          "name": "mana",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "visibility": {
+          "name": "visibility",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'private'"
+        },
+        "thumbnail": {
+          "name": "thumbnail",
+          "type": "blob",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_owner_users_id_fk": {
+          "name": "character_owner_users_id_fk",
+          "tableFrom": "character",
+          "tableTo": "users",
+          "columnsFrom": [
+            "owner"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "character_training": {
+      "name": "character_training",
+      "columns": {
+        "character": {
+          "name": "character",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "stat": {
+          "name": "stat",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "level": {
+          "name": "level",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "choice": {
+          "name": "choice",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_training_character_character_id_fk": {
+          "name": "character_training_character_character_id_fk",
+          "tableFrom": "character_training",
+          "tableTo": "character",
+          "columnsFrom": [
+            "character"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "character_training_character_stat_level_pk": {
+          "columns": [
+            "character",
+            "stat",
+            "level"
+          ],
+          "name": "character_training_character_stat_level_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "email_validation": {
+      "name": "email_validation",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "explorer_content": {
+      "name": "explorer_content",
+      "columns": {
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner": {
+          "name": "owner",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content": {
+          "name": "content",
+          "type": "blob",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "navigable": {
+          "name": "navigable",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "private": {
+          "name": "private",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "order": {
+          "name": "order",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "visit": {
+          "name": "visit",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "explorer_content_owner_users_id_fk": {
+          "name": "explorer_content_owner_users_id_fk",
+          "tableFrom": "explorer_content",
+          "tableTo": "users",
+          "columnsFrom": [
+            "owner"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_permissions": {
+      "name": "user_permissions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_permissions_id_users_id_fk": {
+          "name": "user_permissions_id_users_id_fk",
+          "tableFrom": "user_permissions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_permissions_id_permission_pk": {
+          "columns": [
+            "id",
+            "permission"
+          ],
+          "name": "user_permissions_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_sessions": {
+      "name": "user_sessions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_sessions_user_id_users_id_fk": {
+          "name": "user_sessions_user_id_users_id_fk",
+          "tableFrom": "user_sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_sessions_id_user_id_pk": {
+          "columns": [
+            "id",
+            "user_id"
+          ],
+          "name": "user_sessions_id_user_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users_data": {
+      "name": "users_data",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "signin": {
+          "name": "signin",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "lastTimestamp": {
+          "name": "lastTimestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "logCount": {
+          "name": "logCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "users_data_id_users_id_fk": {
+          "name": "users_data_id_users_id_fk",
+          "tableFrom": "users_data",
+          "tableTo": "users",
+          "columnsFrom": [
+            "id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "hash": {
+          "name": "hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "state": {
+          "name": "state",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {
+        "users_username_unique": {
+          "name": "users_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
+        },
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        },
+        "users_hash_unique": {
+          "name": "users_hash_unique",
+          "columns": [
+            "hash"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/0011_snapshot.json

@@ -0,0 +1,732 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "e0aaebf1-54e4-4f61-804b-7cce23c88069",
+  "prevId": "af3d9e4f-cea6-42fa-8f8b-d743d97b9c37",
+  "tables": {
+    "character_abilities": {
+      "name": "character_abilities",
+      "columns": {
+        "character": {
+          "name": "character",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "ability": {
+          "name": "ability",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "max": {
+          "name": "max",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_abilities_character_character_id_fk": {
+          "name": "character_abilities_character_character_id_fk",
+          "tableFrom": "character_abilities",
+          "tableTo": "character",
+          "columnsFrom": [
+            "character"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "character_abilities_character_ability_pk": {
+          "columns": [
+            "character",
+            "ability"
+          ],
+          "name": "character_abilities_character_ability_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "character_leveling": {
+      "name": "character_leveling",
+      "columns": {
+        "character": {
+          "name": "character",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "level": {
+          "name": "level",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "choice": {
+          "name": "choice",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_leveling_character_character_id_fk": {
+          "name": "character_leveling_character_character_id_fk",
+          "tableFrom": "character_leveling",
+          "tableTo": "character",
+          "columnsFrom": [
+            "character"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "character_leveling_character_level_pk": {
+          "columns": [
+            "character",
+            "level"
+          ],
+          "name": "character_leveling_character_level_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "character_modifiers": {
+      "name": "character_modifiers",
+      "columns": {
+        "character": {
+          "name": "character",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "modifier": {
+          "name": "modifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_modifiers_character_character_id_fk": {
+          "name": "character_modifiers_character_character_id_fk",
+          "tableFrom": "character_modifiers",
+          "tableTo": "character",
+          "columnsFrom": [
+            "character"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "character_modifiers_character_modifier_pk": {
+          "columns": [
+            "character",
+            "modifier"
+          ],
+          "name": "character_modifiers_character_modifier_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "character_spell": {
+      "name": "character_spell",
+      "columns": {
+        "character": {
+          "name": "character",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_spell_character_character_id_fk": {
+          "name": "character_spell_character_character_id_fk",
+          "tableFrom": "character_spell",
+          "tableTo": "character",
+          "columnsFrom": [
+            "character"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "character": {
+      "name": "character",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner": {
+          "name": "owner",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "people": {
+          "name": "people",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "level": {
+          "name": "level",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 1
+        },
+        "aspect": {
+          "name": "aspect",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "notes": {
+          "name": "notes",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "health": {
+          "name": "health",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "mana": {
+          "name": "mana",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "visibility": {
+          "name": "visibility",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'private'"
+        },
+        "thumbnail": {
+          "name": "thumbnail",
+          "type": "blob",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_owner_users_id_fk": {
+          "name": "character_owner_users_id_fk",
+          "tableFrom": "character",
+          "tableTo": "users",
+          "columnsFrom": [
+            "owner"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "character_training": {
+      "name": "character_training",
+      "columns": {
+        "character": {
+          "name": "character",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "stat": {
+          "name": "stat",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "level": {
+          "name": "level",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "choice": {
+          "name": "choice",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_training_character_character_id_fk": {
+          "name": "character_training_character_character_id_fk",
+          "tableFrom": "character_training",
+          "tableTo": "character",
+          "columnsFrom": [
+            "character"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "character_training_character_stat_level_pk": {
+          "columns": [
+            "character",
+            "stat",
+            "level"
+          ],
+          "name": "character_training_character_stat_level_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "email_validation": {
+      "name": "email_validation",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "explorer_content": {
+      "name": "explorer_content",
+      "columns": {
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner": {
+          "name": "owner",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content": {
+          "name": "content",
+          "type": "blob",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "navigable": {
+          "name": "navigable",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "private": {
+          "name": "private",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "order": {
+          "name": "order",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "visit": {
+          "name": "visit",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "explorer_content_owner_users_id_fk": {
+          "name": "explorer_content_owner_users_id_fk",
+          "tableFrom": "explorer_content",
+          "tableTo": "users",
+          "columnsFrom": [
+            "owner"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_permissions": {
+      "name": "user_permissions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_permissions_id_users_id_fk": {
+          "name": "user_permissions_id_users_id_fk",
+          "tableFrom": "user_permissions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_permissions_id_permission_pk": {
+          "columns": [
+            "id",
+            "permission"
+          ],
+          "name": "user_permissions_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_sessions": {
+      "name": "user_sessions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_sessions_user_id_users_id_fk": {
+          "name": "user_sessions_user_id_users_id_fk",
+          "tableFrom": "user_sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_sessions_id_user_id_pk": {
+          "columns": [
+            "id",
+            "user_id"
+          ],
+          "name": "user_sessions_id_user_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users_data": {
+      "name": "users_data",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "signin": {
+          "name": "signin",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "lastTimestamp": {
+          "name": "lastTimestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "logCount": {
+          "name": "logCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "users_data_id_users_id_fk": {
+          "name": "users_data_id_users_id_fk",
+          "tableFrom": "users_data",
+          "tableTo": "users",
+          "columnsFrom": [
+            "id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "hash": {
+          "name": "hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "state": {
+          "name": "state",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {
+        "users_username_unique": {
+          "name": "users_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
+        },
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        },
+        "users_hash_unique": {
+          "name": "users_hash_unique",
+          "columns": [
+            "hash"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/0012_snapshot.json

@@ -0,0 +1,740 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "cb7a2b9c-1392-4f23-9fc2-9ce8de2e0231",
+  "prevId": "e0aaebf1-54e4-4f61-804b-7cce23c88069",
+  "tables": {
+    "character_abilities": {
+      "name": "character_abilities",
+      "columns": {
+        "character": {
+          "name": "character",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "ability": {
+          "name": "ability",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "max": {
+          "name": "max",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_abilities_character_character_id_fk": {
+          "name": "character_abilities_character_character_id_fk",
+          "tableFrom": "character_abilities",
+          "tableTo": "character",
+          "columnsFrom": [
+            "character"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "character_abilities_character_ability_pk": {
+          "columns": [
+            "character",
+            "ability"
+          ],
+          "name": "character_abilities_character_ability_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "character_leveling": {
+      "name": "character_leveling",
+      "columns": {
+        "character": {
+          "name": "character",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "level": {
+          "name": "level",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "choice": {
+          "name": "choice",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_leveling_character_character_id_fk": {
+          "name": "character_leveling_character_character_id_fk",
+          "tableFrom": "character_leveling",
+          "tableTo": "character",
+          "columnsFrom": [
+            "character"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "character_leveling_character_level_pk": {
+          "columns": [
+            "character",
+            "level"
+          ],
+          "name": "character_leveling_character_level_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "character_modifiers": {
+      "name": "character_modifiers",
+      "columns": {
+        "character": {
+          "name": "character",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "modifier": {
+          "name": "modifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_modifiers_character_character_id_fk": {
+          "name": "character_modifiers_character_character_id_fk",
+          "tableFrom": "character_modifiers",
+          "tableTo": "character",
+          "columnsFrom": [
+            "character"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "character_modifiers_character_modifier_pk": {
+          "columns": [
+            "character",
+            "modifier"
+          ],
+          "name": "character_modifiers_character_modifier_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "character_spell": {
+      "name": "character_spell",
+      "columns": {
+        "character": {
+          "name": "character",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_spell_character_character_id_fk": {
+          "name": "character_spell_character_character_id_fk",
+          "tableFrom": "character_spell",
+          "tableTo": "character",
+          "columnsFrom": [
+            "character"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "character_spell_character_value_pk": {
+          "columns": [
+            "character",
+            "value"
+          ],
+          "name": "character_spell_character_value_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "character": {
+      "name": "character",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner": {
+          "name": "owner",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "people": {
+          "name": "people",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "level": {
+          "name": "level",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 1
+        },
+        "aspect": {
+          "name": "aspect",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "notes": {
+          "name": "notes",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "health": {
+          "name": "health",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "mana": {
+          "name": "mana",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "visibility": {
+          "name": "visibility",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": "'private'"
+        },
+        "thumbnail": {
+          "name": "thumbnail",
+          "type": "blob",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_owner_users_id_fk": {
+          "name": "character_owner_users_id_fk",
+          "tableFrom": "character",
+          "tableTo": "users",
+          "columnsFrom": [
+            "owner"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "character_training": {
+      "name": "character_training",
+      "columns": {
+        "character": {
+          "name": "character",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "stat": {
+          "name": "stat",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "level": {
+          "name": "level",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "choice": {
+          "name": "choice",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "character_training_character_character_id_fk": {
+          "name": "character_training_character_character_id_fk",
+          "tableFrom": "character_training",
+          "tableTo": "character",
+          "columnsFrom": [
+            "character"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "character_training_character_stat_level_pk": {
+          "columns": [
+            "character",
+            "stat",
+            "level"
+          ],
+          "name": "character_training_character_stat_level_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "email_validation": {
+      "name": "email_validation",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "explorer_content": {
+      "name": "explorer_content",
+      "columns": {
+        "path": {
+          "name": "path",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "owner": {
+          "name": "owner",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "title": {
+          "name": "title",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "type": {
+          "name": "type",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "content": {
+          "name": "content",
+          "type": "blob",
+          "primaryKey": false,
+          "notNull": false,
+          "autoincrement": false
+        },
+        "navigable": {
+          "name": "navigable",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": true
+        },
+        "private": {
+          "name": "private",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": false
+        },
+        "order": {
+          "name": "order",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "visit": {
+          "name": "visit",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "explorer_content_owner_users_id_fk": {
+          "name": "explorer_content_owner_users_id_fk",
+          "tableFrom": "explorer_content",
+          "tableTo": "users",
+          "columnsFrom": [
+            "owner"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_permissions": {
+      "name": "user_permissions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "permission": {
+          "name": "permission",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_permissions_id_users_id_fk": {
+          "name": "user_permissions_id_users_id_fk",
+          "tableFrom": "user_permissions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_permissions_id_permission_pk": {
+          "columns": [
+            "id",
+            "permission"
+          ],
+          "name": "user_permissions_id_permission_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "user_sessions": {
+      "name": "user_sessions",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "timestamp": {
+          "name": "timestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "user_sessions_user_id_users_id_fk": {
+          "name": "user_sessions_user_id_users_id_fk",
+          "tableFrom": "user_sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {
+        "user_sessions_id_user_id_pk": {
+          "columns": [
+            "id",
+            "user_id"
+          ],
+          "name": "user_sessions_id_user_id_pk"
+        }
+      },
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users_data": {
+      "name": "users_data",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "signin": {
+          "name": "signin",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "lastTimestamp": {
+          "name": "lastTimestamp",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "logCount": {
+          "name": "logCount",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "users_data_id_users_id_fk": {
+          "name": "users_data_id_users_id_fk",
+          "tableFrom": "users_data",
+          "tableTo": "users",
+          "columnsFrom": [
+            "id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "cascade"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    },
+    "users": {
+      "name": "users",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "integer",
+          "primaryKey": true,
+          "notNull": true,
+          "autoincrement": true
+        },
+        "username": {
+          "name": "username",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "hash": {
+          "name": "hash",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false
+        },
+        "state": {
+          "name": "state",
+          "type": "integer",
+          "primaryKey": false,
+          "notNull": true,
+          "autoincrement": false,
+          "default": 0
+        }
+      },
+      "indexes": {
+        "users_username_unique": {
+          "name": "users_username_unique",
+          "columns": [
+            "username"
+          ],
+          "isUnique": true
+        },
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "columns": [
+            "email"
+          ],
+          "isUnique": true
+        },
+        "users_hash_unique": {
+          "name": "users_hash_unique",
+          "columns": [
+            "hash"
+          ],
+          "isUnique": true
+        }
+      },
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "checkConstraints": {}
+    }
+  },
+  "views": {},
+  "enums": {},
+  "_meta": {
+    "schemas": {},
+    "tables": {},
+    "columns": {}
+  },
+  "internal": {
+    "indexes": {}
+  }
+}

drizzle/meta/_journal.json

@@ -43,6 +43,55 @@
       "when": 1734426608563,
       "tag": "0005_panoramic_slayback",
       "breakpoints": true
+    },
+    {
+      "idx": 6,
+      "version": "6",
+      "when": 1745072860245,
+      "tag": "0006_clever_marvex",
+      "breakpoints": true
+    },
+    {
+      "idx": 7,
+      "version": "6",
+      "when": 1745074613379,
+      "tag": "0007_tearful_true_believers",
+      "breakpoints": true
+    },
+    {
+      "idx": 8,
+      "version": "6",
+      "when": 1745675022171,
+      "tag": "0008_glorious_johnny_blaze",
+      "breakpoints": true
+    },
+    {
+      "idx": 9,
+      "version": "6",
+      "when": 1745920443528,
+      "tag": "0009_thin_omega_sentinel",
+      "breakpoints": true
+    },
+    {
+      "idx": 10,
+      "version": "6",
+      "when": 1746014143374,
+      "tag": "0010_bored_sabra",
+      "breakpoints": true
+    },
+    {
+      "idx": 11,
+      "version": "6",
+      "when": 1746017162319,
+      "tag": "0011_demonic_titania",
+      "breakpoints": true
+    },
+    {
+      "idx": 12,
+      "version": "6",
+      "when": 1746027790969,
+      "tag": "0012_graceful_energizer",
+      "breakpoints": true
     }
   ]
 }

layouts/default.vue

@@ -1,84 +1,67 @@
 <template>
     <CollapsibleRoot class="flex flex-1 flex-col" v-model:open="open">
-        <div class="z-50 md:hidden flex w-full items-center justify-between h-12 border-b border-light-35 dark:border-dark-35">
+        <div class="z-50 flex w-full items-center justify-between border-b border-light-35 dark:border-dark-35 px-2">
-			<div class="flex items-center px-2">
+			<div class="flex items-center px-2 gap-4">
 				<CollapsibleTrigger asChild>
-					<Button icon class="ms-2 !bg-transparent group">
+					<Button icon class="!bg-transparent group md:hidden">
 						<Icon class="group-data-[state=open]:hidden" icon="radix-icons:hamburger-menu" />
 						<Icon class="group-data-[state=closed]:hidden" icon="radix-icons:cross-1" />
 					</Button>
 				</CollapsibleTrigger>
-				<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-md:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }">Accueil</NuxtLink>
+				<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-opacity-70 m-2 flex items-center gap-4" aria-label="Accueil" :to="{ path: '/', force: true }">
-			</div>
+					<Avatar src="/logo.dark.svg" class="dark:block hidden" />
-			<div class="flex items-center px-2">
+					<Avatar src="/logo.light.svg" class="block dark:hidden" />
-				<Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
+					<span class="text-xl max-md:hidden">d[any]</span>
-				<Tooltip v-if="!loggedIn" :message="'Se connecter'" side="right">
-					<NuxtLink :to="{ name: 'user-login' }">
-						<div class="hover:border-opacity-70 flex items-center">
-							<Icon :icon="'radix-icons:person'" class="w-7 h-7 p-1" />
-						</div>
 				</NuxtLink>
-				</Tooltip>
-				<Tooltip v-else :message="'Mon profil'" side="right">
-					<DropdownMenu :options="options" side="bottom" align="end">
-						<div class="hover:border-opacity-70 flex items-center">
-							<Icon :icon="'radix-icons:avatar'" class="w-7 h-7 p-1" />
 			</div>
-					</DropdownMenu>
+			<NavigationMenuRoot class="relative">
-				</Tooltip>
+				<NavigationMenuList class="flex items-center gap-8 max-md:hidden">
+					<NavigationMenuItem>
+						<NavigationMenuTrigger>
+							<NuxtLink :href="{ name: 'character' }" class="text-light-70 dark:text-dark-70" active-class="!text-accent-blue"><span class="pl-3 py-1 flex-1 truncate">Personnages</span></NuxtLink>
+						</NavigationMenuTrigger>
+						<NavigationMenuContent class="absolute top-0 left-0 w-full sm:w-auto bg-light-0 dark:bg-dark-0 border border-light-30 dark:border-dark-30">
+							<NuxtLink :href="{ name: 'character-list' }" class="text-light-70 dark:text-dark-70" active-class="!text-accent-blue"><span class="py-2 px-3 flex-1 truncate">Tous les personnages</span></NuxtLink>
+						</NavigationMenuContent>
+					</NavigationMenuItem>
+				</NavigationMenuList>
+				<div class="absolute top-full left-0 flex w-full justify-center my-4">
+					<NavigationMenuViewport class="h-[var(--radix-navigation-menu-viewport-height)] w-full origin-[top_center] overflow-hidden rounded-[10px] bg-white transition-[width,_height] duration-300 sm:w-[var(--radix-navigation-menu-viewport-width)]" />
+				</div>
+			</NavigationMenuRoot>
+			<div class="flex items-center px-2 gap-4">
+				<template v-if="!loggedIn">
+					<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-light-70 dark:hover:text-dark-70" :to="{ name: 'user-login' }">Se connecter</NuxtLink>
+					<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-light-70 dark:hover:text-dark-70 max-md:hidden" :to="{ name: 'user-register' }">Créer un compte</NuxtLink>
+				</template>
+				<template v-else>
+					<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-light-70 dark:hover:text-dark-70" :to="{ name: 'user-login' }">{{ user!.username }}</NuxtLink>
+				</template>
 			</div>
         </div>
         <div class="flex flex-1 flex-row relative h-screen overflow-hidden">
 			<CollapsibleContent asChild forceMount>
-				<div class="bg-light-0 dark:bg-dark-0 z-40 xl:w-96 md:w-[15em] w-full border-r border-light-30 dark:border-dark-30 flex flex-col justify-between max-md:absolute max-md:-top-0 max-md:-bottom-0 md:left-0 max-md:data-[state=closed]:-left-full max-md:transition-[left] max-md:z-40 max-md:data-[state=open]:left-0">
+				<div class="bg-light-0 dark:bg-dark-0 z-40 w-screen md:w-[18rem] border-r border-light-30 dark:border-dark-30 flex flex-col justify-between my-2 max-md:data-[state=closed]:hidden">
-					<div class="flex flex-col gap-4 xl:px-6 px-3 py-4">
+					<div class="flex-1 px-2 max-w-full max-h-full overflow-y-auto overflow-x-hidden">
-						<div class="flex justify-between items-center max-md:hidden">
+						<div v-if="user" class="flex flex-1 py-4 px-2 flex-row flex-1 justify-between items-center">
-							<NuxtLink class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-md:ps-6" aria-label="Accueil" :to="{ path: '/', force: true }">
+							<NuxtLink v-if="hasPermissions(user.permissions, ['admin', 'editor'])" :to="{ name: 'explore-edit' }"><Button icon><Icon icon="radix-icons:pencil-2" /></Button></NuxtLink>
-								<Avatar src="/logo.dark.svg" class="dark:block hidden" />
-        						<Avatar src="/logo.light.svg" class="block dark:hidden" />
-							</NuxtLink>
-							<div class="flex gap-4 items-center">
-								<Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
-								<Tooltip v-if="!loggedIn" :message="'Se connecter'" side="right">
-									<NuxtLink :to="{ name: 'user-login' }">
-										<div class="bg-light-20 dark:bg-dark-20 hover:border-opacity-70 flex border p-px border-light-50 dark:border-dark-50">
-											<Icon :icon="'radix-icons:person'" class="w-7 h-7 p-1" />
 						</div>
-									</NuxtLink>
+						<Tree v-if="pages" v-model="pages" :getKey="(item) => item.path" class="ps-4">
-								</Tooltip>
-								<Tooltip v-else :message="'Mon profil'" side="right">
-									<DropdownMenu :options="options" side="right" align="start">
-										<div class="bg-light-20 dark:bg-dark-20 hover:border-opacity-70 flex border p-px border-light-50 dark:border-dark-50">
-											<Icon :icon="'radix-icons:avatar'" class="w-7 h-7 p-1" />
-										</div>
-									</DropdownMenu>
-								</Tooltip>
-							</div>
-						</div>
-					</div>
-					<div class="flex-1 xl:px-6 px-3 max-w-full max-h-full overflow-y-auto overflow-x-hidden">
-						<div class="flex flex-row flex-1 justify-between items-center">
-							<NuxtLink :href="{ name: 'explore-path', params: { path: 'index' } }" class="flex flex-1 font-bold text-lg items-center border-light-35 dark:border-dark-35 hover:border-accent-blue" active-class="text-accent-blue border-s-2 !border-accent-blue">
-								<span class="pl-3 py-1 flex-1 truncate">Projet</span>
-							</NuxtLink>
-							<NuxtLink v-if="user && hasPermissions(user.permissions, ['admin', 'editor'])" :to="{ name: 'explore-edit' }"><Button icon><Icon icon="radix-icons:pencil-2" /></Button></NuxtLink>
-						</div>
-						<Tree v-if="pages" v-model="pages" :getKey="(item) => item.path">
 							<template #default="{ item, isExpanded }">
-								<NuxtLink :href="item.value.path && !item.hasChildren ? { name: 'explore-path', params: { path: item.value.path } } : undefined" class="flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple" :class="{ 'font-medium': item.hasChildren }" active-class="text-accent-blue" :data-private="item.value.private">
+								<NuxtLink :href="item.value.path && !item.hasChildren ? { name: 'explore-path', params: { path: item.value.path } } : undefined" class="flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple max-w-full" :class="{ 'font-medium': item.hasChildren }" active-class="text-accent-blue" :data-private="item.value.private">
-									<Icon v-if="item.hasChildren" icon="radix-icons:chevron-right" :class="{ 'rotate-90': isExpanded }" class="h-4 w-4 transition-transform absolute" :style="{ 'left': `${item.level - 1}em` }" />
+									<Icon v-if="item.hasChildren" icon="radix-icons:chevron-right" :class="{ 'rotate-90': isExpanded }" class="h-4 w-4 transition-transform absolute" :style="{ 'left': `${item.level / 2 - 1.5}em` }" />
 									<Icon v-else-if="iconByType[item.value.type]" :icon="iconByType[item.value.type]" class="w-5 h-5" />
-									<div class="pl-3 py-1 flex-1 truncate">
+									<div class="pl-1.5 py-1.5 flex-1 truncate">
 										{{ item.value.title }}
 									</div>
-									<Tooltip message="Privé" side="right"><Icon v-show="item.value.private" icon="radix-icons:lock-closed" /></Tooltip>
+									<Tooltip message="Privé" side="right"><Icon v-show="item.value.private" class="mx-1" icon="radix-icons:lock-closed" /></Tooltip>
 								</NuxtLink>
 							</template>
 						</Tree>
 					</div>
-					<div class="xl:px-12 px-6 py-4 text-center text-xs text-light-60 dark:text-dark-60">
+					<div class="xl:px-12 px-6 pt-4 pb-2 text-center text-xs text-light-60 dark:text-dark-60">
 						<NuxtLink class="hover:underline italic" :to="{ name: 'roadmap' }">Roadmap</NuxtLink> - <NuxtLink class="hover:underline italic" :to="{ name: 'legal' }">Mentions légales</NuxtLink>
-						<p>Copyright Peaceultime - 2024</p>
+						<p>Copyright Peaceultime - 2025</p>
 					</div>
 				</div>
 			</CollapsibleContent>
@@ -89,10 +72,10 @@
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue/dist/iconify.js';
-import type { NavigationTreeItem } from '~/server/api/navigation.get';
+import { iconByType } from '#shared/general.util';
-import { iconByType } from '#shared/general.utils';
 import type { DropdownOption } from '~/components/base/DropdownMenu.vue';
 import { hasPermissions } from '~/shared/auth.util';
+import type { TreeItem } from '~/types/content';
 
 const options = ref<DropdownOption[]>([{
 	type: 'item',
@@ -106,6 +89,9 @@ const options = ref<DropdownOption[]>([{
 
 const open = ref(false);
 const { loggedIn, user, clear } = useUserSession();
+const { fetch } = useContent();
+
+await fetch(false);
 
 const route = useRouter().currentRoute;
 const path = computed(() => route.value.params.path ? Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path : undefined);
@@ -114,13 +100,10 @@ watch(route, () => {
 	open.value = false;
 });
 
-const { data: pages } = await useLazyFetch('/api/navigation', {
+const { tree } = useContent();
-	transform: transform,
+const pages = computed(() => transform(tree.value));
-	watch: [useRouter().currentRoute]
+function transform(list: TreeItem[] | undefined): TreeItem[] | undefined
-});
-
-function transform(list: NavigationTreeItem[] | undefined): NavigationTreeItem[] | undefined
 {
-	return list?.map(e => ({ ...e, open: path.value?.startsWith(e.path), children: transform(e.children) }));
+	return list?.filter(e => e.navigable)?.map(e => ({ ...e, open: path.value?.startsWith(e.path), children: transform(e.children) }));
 }
 </script>

localhost+1-key.pem

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvAIBADANBgkqhkiG9w0BAQEFAASCBKYwggSiAgEAAoIBAQDjNZPI8RGt6fVV
+e0403ySKRX1Zh4lPYucvxsojrG86ZS/gm+zHFbTf8kwBR5CUWLuqkNo3vql6W7Go
+rbPLvbGs1uultilwMRxp0RHx23zecKQMdKA5GiLW+9AI8O23RqNWyF9nJAPdq7TV
+Dux8OpJXPuT6SWGLBaXcagbe8H/cVMsTqx8FGoOxh9A+MIV6bNaaxvpSR82H9s7i
+nRSJVxxwHYigrGO5iWvehbjzX0zCD3hzQfZpWWrKa8v8p8+3jkE2dr6l5h1T6Qmi
+7ZlINiY4vyxgAUM4L9fwSoStWKLf8SnqYOlLXTm7bpBbu5oOQ8yKtJXyat0xx11B
+FqkqeJmFAgMBAAECggEAcX7U6L5K54YD0AR9J3oDxbI6kFtc4rPz6fCyDqnXEeNz
+zA33c+dK58cf4k++T+wXKnebGdd6zy04jJrgQjjqpPziz280Od++YrlV7muGb5Ly
+z2n+kyeUGbHF1IGNLUzy0Kncxie+ap+YAAmpZdDYQw6e0MuRFyHmHTk1X23hYMxl
+hc8AH5+l+FW0RfgGR8tUFTVc6KbojnKWq2G946NFxHoRwy2/2xEnZu5nciIeUY4O
+2McnVDlLcomMTt6ScJjZo+fnTyKsWX4yrk3nVPPm7h9Oh4i4QB3/OEqKnlsUCS3u
+fD3UWlamTF7CETUpuGGj0UaIGFwi3X3SjbuQPZGYzQKBgQDwKmFlL62GyMXsEnI4
+AVHdnRRCUEgJbX/JVftYdn6psPiCZz+ypr6UKBiyQH0QtxUHxqD2iT2nDR5RmZZR
+cHhBiJ0KBE3JS3lCm+QcW9r4FOb+V91CycHl4FbnR7LGzJ4ScG0t9F/bJdbyuuiO
+nwN+sjoNQ55jckaWN5H3kgh8jwKBgQDyMIPuENPUoQksN9ijWkRJPg9qOSF72kEu
+Ro3wvNdLqC3J3k+Z9Y++diPYOI16nMj/5aTOlWptcr1tzy/rBxXrL1/8uPoGuWGJ
+OxDrc2lr0rwP6yp8bsmJkhGa1zv5pfisP6L6l/kaRwJ4oe7aUEQUXLndR4D/BIYe
+PYcOOJs6qwKBgHhUg5/zF3pkteXmCBxPbPkgbrobBzzSBCiYT+qu1B+pb5nGqX+V
+U/9fZ6BH92GcmYjf2F4tvRop1HsF/O6o71fGXwhZx6+HhSX+fXhH/Zo2vtXIqC+C
+bwgCMwiGP+ijNMAAXHOd8TkX6G6Nf1+WBGZCXhuvOXiSFRPGm/fyzxW5AoGAQJXp
+iOIZ63kqXg1ii2V2EmYnbDdiE4pHmZSdI5bofzeRRmUvqyoONEeDFZU3PXx0KbHO
++nxkDl3r4E3BRJb2JGrU2StnGcX0GcmToIZ9lZB0MHaRNO/CdRpr8XP2fYPiReUO
+jG9cscJACXV9oeCH1zpHIph/8QH+1i+oRYWY99MCgYBIMjO4P1t59yCR+hVAs6vB
+AvY9hcjsrsqqCjuk10BAknGf7sXVcJKXh6ZwOZTq+s3f+jvdCILqomjnTETtvqi3
+o+lxM5BsI3kih1ZZwmp6l5OZ+XoOHC2enJq6+yvar2cQQ3JXHqgaOeGqvPp79Qgi
+lUhewf7i9ea3HhsAJVn5zQ==
+-----END PRIVATE KEY-----

localhost+1.pem

@@ -0,0 +1,25 @@
+-----BEGIN CERTIFICATE-----
+MIIEPTCCAqWgAwIBAgIRAOY00hX9DwO86FISPVYlPOEwDQYJKoZIhvcNAQELBQAw
+czEeMBwGA1UEChMVbWtjZXJ0IGRldmVsb3BtZW50IENBMSQwIgYDVQQLDBtQQy1D
+TEVNRU5UXFBlYWNlQFBDLUNsZW1lbnQxKzApBgNVBAMMIm1rY2VydCBQQy1DTEVN
+RU5UXFBlYWNlQFBDLUNsZW1lbnQwHhcNMjUwMTA4MjAzMzU2WhcNMjcwNDA4MTkz
+MzU2WjBPMScwJQYDVQQKEx5ta2NlcnQgZGV2ZWxvcG1lbnQgY2VydGlmaWNhdGUx
+JDAiBgNVBAsMG1BDLUNMRU1FTlRcUGVhY2VAUEMtQ2xlbWVudDCCASIwDQYJKoZI
+hvcNAQEBBQADggEPADCCAQoCggEBAOM1k8jxEa3p9VV7TjTfJIpFfVmHiU9i5y/G
+yiOsbzplL+Cb7McVtN/yTAFHkJRYu6qQ2je+qXpbsaits8u9sazW66W2KXAxHGnR
+EfHbfN5wpAx0oDkaItb70Ajw7bdGo1bIX2ckA92rtNUO7Hw6klc+5PpJYYsFpdxq
+Bt7wf9xUyxOrHwUag7GH0D4whXps1prG+lJHzYf2zuKdFIlXHHAdiKCsY7mJa96F
+uPNfTMIPeHNB9mlZaspry/ynz7eOQTZ2vqXmHVPpCaLtmUg2Jji/LGABQzgv1/BK
+hK1Yot/xKepg6UtdObtukFu7mg5DzIq0lfJq3THHXUEWqSp4mYUCAwEAAaNwMG4w
+DgYDVR0PAQH/BAQDAgWgMBMGA1UdJQQMMAoGCCsGAQUFBwMBMB8GA1UdIwQYMBaA
+FDPM3O7GEA4DgJchIK0hiZtf97UjMCYGA1UdEQQfMB2CCWxvY2FsaG9zdIcQAAAA
+AAAAAAAAAAAAAAAAATANBgkqhkiG9w0BAQsFAAOCAYEAWLbhajkW3jpXKBNnE4dp
+fCD1uJ/G8Cuy1poNsXIp2mlhDu4b1mC8mMPwhd01OEXbxZnzLdFiYYy5evxkCODX
+TlohrWObgCs4iRtSpFT2QOkqLfohdNBtKN6fK2XGbxTqLfW5VStRH2//MzL0P+Cm
+tUI8P0Tt3Y5jAxrTqmXptlsKkgyhhNUHlXfJCxhvlfvcTvagmCMjf6xBF5ExRH/n
+GRiWbqSpKQV2PpJObWC8asMJebjkLHQos0v7EobfgbUVVlQRksvlu4EjRZZO3GVD
+d0+4oUVkG1MHAixNgxvoKrIA2RSYq4D/VBTKvE727SeqySAC4eAaGeD74yG9Tuzr
+lTBEauqDRlyJX4sS2D1dub655FScNQCdxiB0v+nNuBaJubrGWtXbiBsXYlbHl2cL
+Nq8rZAobhB0o4DHUIOsY0ygFxqZrZ+3po5gyEb1rbcejTzUoyrh+PCCC6vxbfkOR
+Db1NyZTKXtVrbOYn6mJ6tsJC2oI+ngciN1mo0eg/ULxB
+-----END CERTIFICATE-----

middleware/auth.global.ts

@@ -2,9 +2,13 @@ import { hasPermissions } from "#shared/auth.util";
 
 export default defineNuxtRouteMiddleware(async (to, from) => {
     const { loggedIn, fetch, user } = useUserSession();
+    const { fetch: fetchContent } = useContent();
     const meta = to.meta;
 
-    await fetch();
+    if(await fetch())
+    {
+        fetchContent(true);
+    }
     
     if(!!meta.guestsGoesTo && !loggedIn.value)
     {

nuxt.config.ts

@@ -1,5 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 import vuePlugin from 'rollup-plugin-vue'
+import fs from 'node:fs'
+import path from 'node:path'
 
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
@@ -101,8 +103,8 @@ export default defineNuxtConfig({
             100: '#dadada',
           },
           accent: {
-            purple: '#8a5cf5',
+            purple: '#43A047',
-            blue: '#53aaf5',
+            blue: '#26C6DA',
           },
         }
       }
@@ -132,12 +134,14 @@ export default defineNuxtConfig({
   },
   runtimeConfig: {
     session: {
-      password: '699c46bd-9aaa-4364-ad01-510ee4fe7013'
+      password: '699c46bd-9aaa-4364-ad01-510ee4fe7013',
+      maxAge: 60 * 60 * 24 *30,
     },
     database: 'db.sqlite',
     mail: {
       host: '',
       port: '',
+      proxy: '',
       user: '',
       passwd: '',
       dkim: '',
@@ -147,7 +151,8 @@ export default defineNuxtConfig({
     rateLimiter: false,
     headers: {
       contentSecurityPolicy: {
-        "img-src": "'self' data: blob:"
+        "img-src": "'self' data: blob:",
+        "base-uri": "localhost:*"
       }
     },
     xssValidator: false,
@@ -157,6 +162,10 @@ export default defineNuxtConfig({
     sources: ['/api/__sitemap__/urls']
   },
   experimental: {
+    buildCache: true,
+    componentIslands: {
+      selectiveClient: true,
+    },
     defaults: {
       nuxtLink: {
         prefetchOn: {
@@ -165,5 +174,11 @@ export default defineNuxtConfig({
         }
       }
     }
+  },
+  devServer: {
+    https: {
+      key: fs.readFileSync(path.resolve(__dirname, 'localhost+1-key.pem')).toString('utf-8'),
+      cert: fs.readFileSync(path.resolve(__dirname, 'localhost+1.pem')).toString('utf-8'),
+    }
   }
 })

package.json

@@ -4,49 +4,55 @@
   "type": "module",
   "scripts": {
     "predev": "bun i",
-    "dev": "bunx --bun nuxi dev"
+    "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 bunx --bun nuxi dev"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@iconify/vue": "^4.1.2",
+    "@codemirror/lang-markdown": "^6.3.2",
+    "@iconify/vue": "^4.3.0",
+    "@lezer/highlight": "^1.2.1",
+    "@markdoc/markdoc": "^0.5.1",
     "@nuxtjs/color-mode": "^3.5.2",
-    "@nuxtjs/sitemap": "^7.0.0",
+    "@nuxtjs/sitemap": "^7.2.5",
-    "@nuxtjs/tailwindcss": "^6.12.2",
+    "@nuxtjs/tailwindcss": "^6.13.1",
     "@vueuse/gesture": "^2.0.0",
-    "@vueuse/math": "^11.3.0",
+    "@vueuse/math": "^12.7.0",
-    "@vueuse/nuxt": "^11.3.0",
+    "@vueuse/nuxt": "^12.7.0",
     "codemirror": "^6.0.1",
-    "drizzle-orm": "^0.35.3",
+    "drizzle-orm": "^0.39.3",
     "hast": "^1.0.0",
+    "hast-util-heading": "^3.0.0",
+    "hast-util-heading-rank": "^3.0.0",
     "lodash.capitalize": "^4.2.1",
-    "mdast-util-find-and-replace": "^3.0.1",
+    "mdast-util-find-and-replace": "^3.0.2",
-    "nodemailer": "^6.9.16",
+    "nodemailer": "^6.10.0",
-    "nuxt": "^3.14.1592",
+    "nuxt": "3.15.4",
     "nuxt-security": "^2.1.5",
-    "radix-vue": "^1.9.10",
+    "radix-vue": "^1.9.15",
     "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",
     "remark-frontmatter": "^5.0.0",
-    "remark-gfm": "^4.0.0",
+    "remark-gfm": "^4.0.1",
+    "remark-ofm": "link:remark-ofm",
     "remark-parse": "^11.0.0",
     "remark-rehype": "^11.1.1",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-vue": "^6.0.0",
     "unified": "^11.0.5",
     "unist-util-visit": "^5.0.0",
-    "vue": "latest",
+    "vue": "^3.5.13",
-    "vue-router": "latest",
+    "vue-router": "^4.5.0",
-    "zod": "^3.23.8"
+    "zod": "^3.24.2"
   },
   "devDependencies": {
-    "@types/bun": "^1.1.14",
+    "@types/bun": "^1.2.2",
     "@types/lodash.capitalize": "^4.2.9",
     "@types/nodemailer": "^6.4.17",
     "@types/unist": "^3.0.3",
-    "better-sqlite3": "^11.6.0",
+    "better-sqlite3": "^11.8.1",
-    "bun-types": "^1.1.38",
+    "bun-types": "^1.2.2",
-    "drizzle-kit": "^0.26.2",
+    "drizzle-kit": "^0.30.4",
     "mdast-util-to-string": "^4.0.0",
     "rehype-stringify": "^10.0.1"
   }

pages/admin/index.vue

@@ -31,7 +31,7 @@
 </script>
 
 <script setup lang="ts">
-import { format, iconByType } from '~/shared/general.utils';
+import { format, iconByType } from '~/shared/general.util';
 import { Icon } from '@iconify/vue/dist/iconify.js';
 
 interface File

pages/admin/jobs.vue

@@ -40,7 +40,6 @@ async function fetch()
 
         if(schema)
         {
-            console.log(payload);
             const parsedPayload = schema.parse(payload);
         }
 

pages/character/[id]/edit.client.vue

@@ -0,0 +1,381 @@
+<script lang="ts">
+import config from '#shared/character-config.json';
+
+function raceOptionToText(option: RaceOption): string
+{
+    const text = [];
+    if(option.training) text.push(`+${option.training} point${option.training > 1 ? 's' : ''} de statistique${option.training > 1 ? 's' : ''}.`);
+    if(option.shaping) text.push(`+${option.shaping} transformation${option.shaping > 1 ? 's' : ''} par jour.`);
+    if(option.modifier) text.push(`+${option.modifier} au modifieur de votre choix.`);
+    if(option.abilities) text.push(`+${option.abilities} point${option.abilities > 1 ? 's' : ''} de compétence${option.abilities > 1 ? 's' : ''}.`);
+    if(option.health) text.push(`+${option.health} PV max.`);
+    if(option.mana) text.push(`+${option.mana} mana max.`);
+    if(option.spellslots) text.push(`+${option.spellslots} sort${option.spellslots > 1 ? 's' : ''} maitrisé${option.spellslots > 1 ? 's' : ''}.`);
+    return text.join('\n');
+}
+function getFeaturesOf(stat: MainStat, progression: DoubleIndex<TrainingLevel>[]): TrainingOption[]
+{
+    const characterData = config as CharacterConfig;
+    return progression.map(e => characterData.training[stat][e[0]][e[1]]);
+}
+
+
+
+function abilitySpecialFeatures(type: "points" | "max", curiosity: DoubleIndex<TrainingLevel>[], value: number): number
+{
+    if(type === 'points')
+    {
+        if(curiosity.find(e => e[0] == 6 && e[1] === 0))
+            return Math.max(6, value);
+        if(curiosity.find(e => e[0] == 6 && e[1] === 2))
+            return value + 1;
+    }
+    return value;
+}
+</script>
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import PreviewA from '~/components/prose/PreviewA.vue';
+import { clamp } from '~/shared/general.util';
+import { defaultCharacter, elementTexts, mainStatTexts, spellTypeTexts, type Ability, type Character, type CharacterConfig, type DoubleIndex, type Level, type MainStat, type RaceOption, type SpellConfig, type SpellElement, type SpellType, type TrainingLevel, type TrainingOption } from '~/types/character';
+
+definePageMeta({
+    guestsGoesTo: '/user/login',
+});
+let id = useRouter().currentRoute.value.params.id;
+const { add } = useToast();
+const characterConfig = config as CharacterConfig;
+const data = ref<Character>({ ...defaultCharacter });
+const spellFilter = ref<{
+    ranks: Array<1 | 2 | 3>,
+    types: Array<SpellType>,
+    text: string,
+    elements: Array<SpellElement>,
+    tags: string[],
+}>({
+    ranks: [],
+    types: [],
+    text: "",
+    elements: [],
+    tags: [],
+});
+
+const peopleOpen = ref(false), trainingOpen = ref(false), abilityOpen = ref(false), spellOpen = ref(false), notesOpen = ref(false), trainingTab = ref(0);
+const raceOptions = computed(() => data.value.people !== undefined ? characterConfig.peoples[data.value.people!].options : undefined);
+const selectedRaceOptions = computed(() => raceOptions !== undefined ? data.value.leveling!.map(e => raceOptions.value![e[0]][e[1]]) : undefined);
+const trainingPoints = computed(() => raceOptions.value ? data.value.leveling?.reduce((p, v) => p + (raceOptions.value![v[0]][v[1]].training ?? 0), 0) : 0);
+const training = computed(() => Object.entries(characterConfig.training).map(e => [e[0], getFeaturesOf(e[0] as MainStat, data.value.training[e[0] as MainStat])]) as [MainStat, TrainingOption[]][]);
+const maxTraining = computed(() => Object.entries(data.value.training).reduce((p, v) => { p[v[0] as MainStat] = v[1].reduce((_p, _v) => Math.max(_p, _v[0]) , 0); return p; }, {} as Record<MainStat, number>));
+const trainingSpent = computed(() => Object.values(maxTraining.value).reduce((p, v) => p + v, 0));
+const modifiers = computed(() => Object.entries(maxTraining.value).reduce((p, v) => { p[v[0] as MainStat] = Math.floor(v[1] / 3) + (data.value.modifiers ? (data.value.modifiers[v[0] as MainStat] ?? 0) : 0); return p; }, {} as Record<MainStat, number>))
+const modifierPoints = computed(() => (selectedRaceOptions.value ? selectedRaceOptions.value.reduce((p, v) => p + (v?.modifier ?? 0), 0) : 0) + training.value.reduce((p, v) => p + v[1].reduce((_p, _v) => _p + (_v?.modifier ?? 0), 0), 0));
+const modifierSpent = computed(() => Object.values(data.value.modifiers ?? {}).reduce((p, v) => p + v, 0));
+const abilityPoints = computed(() => (selectedRaceOptions.value ? selectedRaceOptions.value.reduce((p, v) => p + (v?.abilities ?? 0), 0) : 0) + training.value.flatMap(e => e[1].filter(_e => _e.ability !== undefined)).reduce((p, v) => p + v.ability!, 0));
+const abilityMax = computed(() => Object.entries(characterConfig.abilities).reduce((p, v) => { p[v[0] as Ability] = abilitySpecialFeatures("max", data.value.training.curiosity, Math.floor(maxTraining.value[v[1].max[0]] / 3) + Math.floor(maxTraining.value[v[1].max[1]] / 3)); return p; }, {} as Record<Ability, number>));
+const abilitySpent = computed(() => Object.values(data.value.abilities ?? {}).reduce((p, v) => p + v[0], 0));
+const spellranks = computed(() => training.value.flatMap(e => e[1].filter(_e => _e.spellrank !== undefined)).reduce((p, v) => { p[v.spellrank!]++; return p; }, { instinct: 0, precision: 0, knowledge: 0 } as Record<SpellType, 0 | 1 | 2 | 3>));
+const spellsPoints = computed(() => training.value.flatMap(e => e[1].filter(_e => _e.spellslot !== undefined)).reduce((p, v) => p + (modifiers.value.hasOwnProperty(v.spellslot as MainStat) ? modifiers.value[v.spellslot as MainStat] : v.spellslot as number), 0));
+
+if(id !== 'new')
+{
+    const character = await useRequestFetch()(`/api/character/${id}`);
+
+    if(!character)
+    {
+        throw new Error('Donnée du personnage introuvables');
+    }
+
+    data.value = Object.assign(defaultCharacter, data.value, character);
+}
+
+function selectRaceOption(level: Level, choice: number)
+{
+    const character = data.value;
+    if(level > character.level)
+        return;
+
+    if(character.leveling === undefined)
+        character.leveling = [[1, 0]];
+
+    if(level == 1)
+        return;
+
+    for(let i = 1; i < level; i++) //Check previous levels as a requirement
+    {
+        if(!character.leveling.some(e => e[0] == i))
+            return;
+    }
+
+    if(character.leveling.some(e => e[0] == level))
+    {
+        character.leveling.splice(character.leveling.findIndex(e => e[0] == level), 1, [level, choice]);
+    }
+    else
+    {
+        character.leveling.push([level, choice]);
+    }
+
+    data.value = character;
+}
+function switchTrainingOption(stat: MainStat, level: TrainingLevel, choice: number)
+{
+    const character = data.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]);
+    }
+
+    data.value = character;
+}
+function updateLevel()
+{
+    const character = data.value;
+
+    if(character.leveling) //Invalidate higher levels
+    {
+        for(let level = 20; level > character.level; level--)
+        {
+            const index = character.leveling.findIndex(e => e[0] == level);
+            if(index !== -1)
+                character.leveling.splice(index, 1);
+        }
+    }
+
+    data.value = character;
+}
+function filterSpells(spells: SpellConfig[])
+{
+    const filter = spellFilter.value
+    let list = [...spells];
+    list = list.filter(e => spellranks.value[e.type] >= e.rank);
+    if(filter.text.length > 0) list = list.filter(e => e.name.toLowerCase().includes(filter.text.toLowerCase()));
+    if(filter.types.length > 0) list = list.filter(e => filter.types.includes(e.type));
+    if(filter.ranks.length > 0) list = list.filter(e => filter.ranks.includes(e.rank));
+    if(filter.elements.length > 0) list = list.filter(e => filter.elements.some(f => e.elements.includes(f)));
+    if(filter.tags.length > 0) list = list.filter(e => !e.tags || filter.tags.some(f => e.tags!.includes(f)));
+
+    return list;
+}
+async function save(leave: boolean)
+{
+    if(data.value.name === '' || data.value.people === undefined || data.value.people === -1)
+    {                
+        add({ title: 'Données manquantes', content: "Merci de saisir un nom et une race avant de pouvoir enregistrer votre personnage", type: 'error', duration: 25000, timer: true });
+        return;
+    }
+    if(id === 'new')
+    {
+        id = await useRequestFetch()(`/api/character`, {
+            method: 'post',
+            body: data.value,
+            onResponseError: (e) => {
+                add({ title: 'Erreur d\'enregistrement', content: e.response.status === 401 ? "Vous n'êtes pas autorisé à effectué cette opération" : e.response.statusText, type: 'error', duration: 25000, timer: true });
+            }
+        });
+        add({ content: 'Personnage créé', type: 'success', duration: 25000, timer: true });
+        useRouter().replace({ name: 'character-id-edit', params: { id: id } })
+        if(leave) useRouter().push({ name: 'character-id', params: { id: id } });
+    }
+    else
+    {
+        await useRequestFetch()(`/api/character/${id}`, {
+            method: 'post',
+            body: data.value,
+            onResponseError: (e) => {
+                add({ title: 'Erreur d\'enregistrement', content: e.response.status === 401 ? "Vous n'êtes pas autorisé à effectué cette opération" : e.response.statusText, type: 'error', duration: 25000, timer: true });
+            }
+        });
+        add({ content: 'Personnage enregistré', type: 'success', duration: 25000, timer: true });
+        if(leave) useRouter().push({ name: 'character-id', params: { id: id } });
+    }
+}
+
+useShortcuts({
+    "Meta_S": () =>save(false),
+})
+</script>
+
+<template>
+    <Head>
+        <Title>d[any] - Edition de {{ data.name || 'nouveau personnage' }}</Title>
+    </Head>
+    <div  class="flex flex-col gap-8 align-center">
+        <div class="flex flex-row gap-4 align-center justify-between">
+            <div></div>
+            <div class="flex flex-row gap-4 align-center justify-center">
+                <Tooltip side="left" message="Developpement en cours"><Avatar src="" icon="radix-icons:person" size="large" /></Tooltip>
+                <Label class="flex items-start justify-between flex-col gap-2">
+                    <span class="pb-1 mx-2 md:p-0">Nom du personnage</span>
+                    <input class="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 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="text" v-model="data.name">
+                </Label>
+                <Label class="flex items-start justify-between flex-col gap-2">
+                    <span class="pb-1 mx-2 md:p-0">Niveau</span>
+                    <NumberFieldRoot :min="1" :max="20" v-model="data.level" @update:model-value="updateLevel" class="flex justify-center border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
+                data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 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-start justify-between flex-col gap-2">
+                    <span class="pb-1 mx-6 md:p-0">Visibilité</span>
+                    <Select class="!my-0" v-model="data.visibility">
+                        <SelectItem label="Privé" value="private" />
+                        <SelectItem label="Public" value="public" />
+                    </Select>
+                </Label>
+            </div>
+            <div  class="self-center">
+                <Tooltip side="right" message="Ctrl+S"><Button @click="() => save(true)">Enregistrer</Button></Tooltip>
+            </div>
+        </div>
+        <div class="flex flex-1 flex-col min-w-[800px] w-[75vw] max-w-[1200px]">
+            <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1" v-model="peopleOpen" @update:model-value="() => { trainingOpen = false; abilityOpen = false; spellOpen = false; notesOpen = false; }">
+                <template #label>
+                    <span class="font-bold text-xl">Peuple</span>
+                </template>
+                <template #default>
+                    <div class="m-2 overflow-auto">
+                        <Combobox label="Peuple de votre personnage" v-model="data.people" :options="config.peoples.map((people, index) => [people.name, index])" @update:model-value="(index) => { data.people = index as number | undefined; data.leveling = [[1, 0]]}" />
+                        <template v-if="data.people !== undefined">
+                            <div class="w-full border-b border-light-30 dark:border-dark-30 pb-4">
+                                <span class="text-sm text-light-70 dark:text-dark-70">{{ characterConfig.peoples[data.people].description }}</span>
+                            </div>
+                            <div class="flex flex-col gap-4 max-h-[50vh] pe-4 relative">
+                                <span class="sticky top-0 py-1 bg-light-0 dark:bg-dark-0 z-10 text-xl">Niveaux restants: {{ data.level - (data.leveling?.length ?? 0) }}</span>
+                                <div class="flex flex-row gap-4 justify-center" v-for="(level, index) of characterConfig.peoples[data.people].options" :class="{ 'opacity-30': index > data.level }">
+                                    <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-64" v-for="(option, i) of level" @click="selectRaceOption(parseInt(index as unknown as string, 10) as Level, i)" :class="{ 'hover:border-light-60 dark:hover:border-dark-60': index <= data.level, '!border-accent-blue bg-accent-blue bg-opacity-20': data.leveling?.some(e => e[0] == index && e[1] === i) ?? false }"><MarkdownRenderer :content="raceOptionToText(option)" /></div>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+                </template>
+            </Collapsible>
+            <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1" v-model="trainingOpen" :disabled="data.people === undefined" @update:model-value="() => { peopleOpen = false; abilityOpen = false; spellOpen = false; notesOpen = false; }">
+                <template #label>
+                    <span class="font-bold text-xl">Entrainement</span>
+                </template>
+                <template #default>
+                    <div class="flex flex-col gap-4 max-h-[50vh] pe-4 relative overflow-y-auto overflow-x-hidden">
+                        <div class="sticky top-0 z-10 py-2 bg-light-0 dark:bg-dark-0 flex justify-between">
+                            <Icon icon="radix-icons:caret-left" class="w-6 h-6 border border-light-30 dark:border-dark-30 cursor-pointer" @click="() => trainingTab = clamp(trainingTab - 1, 0, 6)" />
+                            <span class="text-xl" :class="{ 'text-light-red dark:text-dark-red': (trainingPoints ?? 0) < trainingSpent }">Points d'entrainement restants: {{ (trainingPoints ?? 0) - trainingSpent }}</span>
+                            <Icon icon="radix-icons:caret-right" class="w-6 h-6 border border-light-30 dark:border-dark-30 cursor-pointer" @click="() => trainingTab = clamp(trainingTab + 1, 0, 6)" />
+                        </div>
+                        <div class="flex gap-4 relative" :style="`left: calc(calc(-100% - 1em) * ${trainingTab}); transition: left .5s ease;`">
+                            <div class="flex w-full flex-shrink-0 flex-col gap-2 relative" v-for="(text, stat) of mainStatTexts">
+                                <div class="sticky top-1 mx-16 z-10 flex justify-between">
+                                    <div class="py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold border border-light-30 dark:border-dark-30 flex">{{ text }}
+                                        <div class="flex gap-2" v-if="maxTraining[stat] >= 0">: Niveau {{ maxTraining[stat] }} (+{{ modifiers[stat] }} 
+                                            <NumberFieldRoot :default-value="data.modifiers[stat] ?? 0" v-model="data.modifiers[stat]" class="flex justify-center border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
+                                data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 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-8 text-base font-normal bg-transparent px-2 outline-none caret-light-50 dark:caret-dark-50" />
+                                            </NumberFieldRoot>
+                                        )</div></div>
+                                    <div class="py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 justify-center items-center" :class="{ 'text-light-red dark:text-dark-red': (modifierPoints ?? 0) < modifierSpent }">Modifieur bonus: {{ modifierPoints - modifierSpent }}</div>
+                                </div>
+                                <div class="flex flex-row gap-4 justify-center" v-for="(level, index) of characterConfig.training[stat]" :class="{ 'opacity-30': index > maxTraining[stat] + 1 }">
+                                    <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-1/3" v-for="(option, i) of level" @click="switchTrainingOption(stat, parseInt(index as unknown as string, 10) as TrainingLevel, i)" :class="{ 'hover:border-light-60 dark:hover:border-dark-60': index <= maxTraining[stat] + 1, '!border-accent-blue bg-accent-blue bg-opacity-20': index == 0 || (data.training[stat]?.some(e => e[0] == index && e[1] === i) ?? false) }"><MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" /></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Collapsible>
+            <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1" v-model="abilityOpen" :disabled="data.people === undefined" @update:model-value="() => { trainingOpen = false; peopleOpen = false; spellOpen = false; notesOpen = false; }">
+                <template #label>
+                    <span class="font-bold text-xl">Compétences</span>
+                </template>
+                <template #default>
+                    <div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
+                        <div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex justify-between">
+                            <span class="text-xl -mx-2" :class="{ 'text-light-red dark:text-dark-red': (abilityPoints ?? 0) < abilitySpent }">Points d'entrainement restants: {{ (abilityPoints ?? 0) - abilitySpent }}</span>
+                        </div>
+                        <div class="grid gap-4 grid-cols-6">
+                            <div v-for="(ability, index) of characterConfig.abilities" class="flex flex-col items-center border border-light-30 dark:border-dark-30 p-2">
+                                <div class="flex items-center justify-center gap-4">
+                                    <NumberFieldRoot :min="0" :default-value="data.abilities[index] ? data.abilities[index][0] : 0" @update:model-value="(value) => { data.abilities[index] = [value, data.abilities[index] ? data.abilities[index][1] : 0]; }" class="border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
+                                data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 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-8 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
+                                    </NumberFieldRoot>
+                                    <span class="font-bold col-span-4">/{{ abilityMax[index] }}</span>
+                                </div>
+                                <span class="text-xl font-bold flex-2">{{ ability.name }}</span>
+                                <span class="text-sm text-light-70 dark:text-dark-70 flex-1">({{ mainStatTexts[ability.max[0]] }} + {{ mainStatTexts[ability.max[1]] }})</span>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Collapsible>
+            <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1" v-model="spellOpen" :disabled="data.people === undefined" @update:model-value="() => { trainingOpen = false; peopleOpen = false; abilityOpen = false; notesOpen = false; }">
+                <template #label>
+                    <span class="font-bold text-xl">Sorts</span>
+                </template>
+                <template #default>
+                    <div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
+                        <div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 items-center">
+                            <span class="text-xl pe-4" :class="{ 'text-light-red dark:text-dark-red': spellsPoints < (data.spells?.length ?? 0) }">Sorts: {{ data.spells?.length ?? 0 }}/{{ spellsPoints }}</span>
+                            <TextInput label="Nom" v-model="spellFilter.text" />
+                            <Combobox label="Rang" v-model="spellFilter.ranks" multiple :options="[['Rang 1', 1], ['Rang 2', 2], ['Rang 3', 3]]" />
+                            <Combobox label="Type" v-model="spellFilter.types" multiple :options="[['Précision', 'precision'], ['Savoir', 'knowledge'], ['Instinct', 'instinct']]" />
+                            <Combobox label="Element" v-model="spellFilter.elements" multiple :options="[['Feu', 'fire'], ['Glace', 'ice'], ['Foudre', 'thunder'], ['Terre', 'earth'], ['Arcane', 'arcana'], ['Air', 'air'], ['Nature', 'nature'], ['Lumière', 'light'], ['Psy', 'psyche']]" />
+                        </div>
+                        <div class="grid gap-4 grid-cols-2">
+                            <div class="py-1 px-2 border border-light-30 dark:border-dark-30 flex flex-col hover:border-light-50 dark:hover:border-dark-50 cursor-pointer" v-for="spell of filterSpells(characterConfig.spells)" :class="{ '!border-accent-blue bg-accent-blue bg-opacity-20': data.spells?.find(e => e === spell.id) }"
+                                @click="() => data.spells?.includes(spell.id) ? data.spells.splice(data.spells.findIndex((e: string) => e === spell.id), 1) : data.spells!.push(spell.id)">
+                                <div class="flex flex-row justify-between">
+                                    <span class="text-lg font-bold">{{ spell.name }}</span>
+                                    <div class="flex flex-row items-center gap-6">
+                                        <div class="flex flex-row text-sm gap-2">
+                                            <span v-for="element of spell.elements" :class="elementTexts[element].class">{{ elementTexts[element].text }}</span>
+                                        </div>
+                                        <div class="flex flex-row text-sm gap-1">
+                                            <span class="">Rang {{ spell.rank }}</span><span>/</span>
+                                            <span class="">{{ spellTypeTexts[spell.type] }}</span><span>/</span>
+                                            <span class="">{{ spell.cost }} mana</span><span>/</span>
+                                            <span class="">{{ typeof spell.speed === 'string' ? spell.speed : `${spell.speed} minutes` }}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                                <MarkdownRenderer :content="spell.effect" />
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </Collapsible>
+            <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1" v-model="notesOpen" @update:model-value="() => { trainingOpen = false; peopleOpen = false; abilityOpen = false; spellOpen = false; }">
+                <template #label>
+                    <span class="font-bold text-xl">Notes libres</span>
+                </template>
+                <template #default>
+                    <Editor class="min-h-[400px] border border-light-30 dark:border-dark-30" v-model="data.notes" />
+                </template>
+            </Collapsible>
+        </div>
+    </div>
+</template>

pages/character/[id]/index.client.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import config from '#shared/character-config.json';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import PreviewA from '~/components/prose/PreviewA.vue';
+import type { SpellConfig } from '~/types/character';
+import { elementTexts, spellTypeTexts, type CharacterConfig } from '~/types/character';
+
+const characterConfig = config as CharacterConfig;
+
+const id = useRouter().currentRoute.value.params.id;
+const { user } = useUserSession();
+const { add } = useToast();
+
+const { data: character, status, error } = await useFetch(`/api/character/${id}/compiled`);
+</script>
+
+<template>
+    <div v-if="status === 'pending'">
+        <Head>
+            <Title>d[any] - Chargement ...</Title>
+        </Head>
+    </div>
+    <div v-else-if="status === 'success' && character && !error">
+        <Head>
+            <Title>d[any] - {{ character.name }}</Title>
+        </Head>
+        <div class="flex flex-row gap-4 justify-between">
+            <div></div>
+            <div class="flex lg:flex-row flex-col gap-6 items-center justify-center">
+                <div class="flex gap-6 items-center">
+                    <Avatar src="" icon="radix-icons:person" size="large" />
+                    <div class="flex flex-col">
+                        <span class="text-xl font-bold">{{ character.name }}</span>
+                        <span class="text-sm">De {{ character.username }}</span>
+                    </div>
+                    <div class="flex flex-col">
+                        <span class="font-bold">Niveau {{ character.level }}</span>
+                        <span>{{ character.race === -1 ? "Race inconnue" : characterConfig.peoples[character.race].name }}</span>
+                    </div>
+                </div>
+                <div class="flex gap-6 lg:border-l border-light-30 dark:border-dark-30 py-4 ps-4">
+                    <span class="flex flex-row items-center gap-2">PV: {{ character.health - character.values.hp }}/{{ character.health }}</span>
+                    <span class="flex flex-row items-center gap-2">Mana: {{ character.mana - character.values.mana }}/{{ character.mana }}</span>
+                </div>
+            </div>
+            <div  class="self-center">
+                <Tooltip side="right" message="Modifier" v-if="user && user.id === character.owner"><NuxtLink :to="{ name: 'character-id-edit', params: { id: character.id } }"><Button icon><Icon icon="radix-icons:pencil-2" /></Button></NuxtLink></Tooltip>
+            </div>
+        </div>
+        <div class="flex flex-1 flex-col justify-center gap-4 *:py-2">
+            <div class="grid 2xl:grid-cols-12 grid-cols-2 gap-4 items-center border-b border-light-30 dark:border-dark-30">
+                <div class="flex relative justify-between ps-4 gap-2 2xl:col-span-6 lg:col-span-2">
+                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.strength }}</span><span class="text-sm 2xl:text-base">Force</span></div>
+                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.dexterity }}</span><span class="text-sm 2xl:text-base">Dextérité</span></div>
+                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.constitution }}</span><span class="text-sm 2xl:text-base">Constitution</span></div>
+                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.intelligence }}</span><span class="text-sm 2xl:text-base">Intelligence</span></div>
+                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.curiosity }}</span><span class="text-sm 2xl:text-base">Curiosité</span></div>
+                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.charisma }}</span><span class="text-sm 2xl:text-base">Charisme</span></div>
+                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.psyche }}</span><span class="text-sm 2xl:text-base">Psyché</span></div>
+                </div>
+                <div class="flex relative 2xl:border-l border-light-30 dark:border-dark-30 ps-4 2xl:col-span-2">
+                    <div class="flex flex-1 flex-row items-center justify-between">
+                        <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">+{{ character.initiative }}</span><span>Initiative</span></div>
+                        <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">{{ character.speed === false ? "Aucun déplacement" : `${character.speed} cases` }}</span><span>Course</span></div>
+                    </div>
+                    <!-- <div class="absolute top-0 left-0 bottom-0 right-0 bg-light-0 dark:bg-dark-0 bg-opacity-50 dark:bg-opacity-50 text-xl font-bold flex items-center justify-center">Les données secondaires arrivent bientôt.</div> -->
+                </div>
+                <div class="flex relative border-l border-light-30 dark:border-dark-30 ps-4 2xl:col-span-4">
+                        <div class="flex flex-col px-2">
+                            <span class="text-xl">Défense passive: <span class="text-2xl font-bold">{{ character.defense.static }}</span>/+<span class="text-2xl font-bold">{{ character.defense.passivedodge }}</span>/+<span class="text-2xl font-bold">{{ character.defense.passiveparry }}</span></span>
+                            <span class="text-xl">Défense active: <span class="float-right">+<span class="text-2xl font-bold">{{ character.defense.activedodge }}</span>/+<span class="text-2xl font-bold">{{ character.defense.activeparry }}</span></span></span>
+                        </div>
+                    </div>
+            </div>
+            <div class="flex flex-1 px-8">
+                <div class="flex flex-col pe-8 gap-4 py-8 w-80 border-r border-light-30 dark:border-dark-30">
+                    <div class="flex flex-col">
+                        <span class="text-lg font-semibold border-b border-light-30 dark:border-dark-30">Maitrise d'arme</span>
+                        <div class="grid grid-cols-2 gap-x-3 gap-y-1">
+                            <PreviewA v-if="character.mastery.strength + character.mastery.dexterity > 0" href="1. Règles/99. Annexes/4. Équipement#Les armes légères">Arme légère</PreviewA>
+                            <PreviewA v-if="character.mastery.strength + character.mastery.dexterity > 0" href="1. Règles/99. Annexes/4. Équipement#Les armes de jet">Arme de jet</PreviewA>
+                            <PreviewA v-if="character.mastery.strength + character.mastery.dexterity > 0" href="1. Règles/99. Annexes/4. Équipement#Les armes naturelles">Arme naturelle</PreviewA>
+                            <PreviewA v-if="character.mastery.strength > 1" href="1. Règles/99. Annexes/4. Équipement#Les armes">Arme standard</PreviewA>
+                            <PreviewA v-if="character.mastery.strength > 1" href="1. Règles/99. Annexes/4. Équipement#Les armes improvisées">Arme improvisée</PreviewA>
+                            <PreviewA v-if="character.mastery.strength > 2" href="1. Règles/99. Annexes/4. Équipement#Les armes lourdes">Arme lourde</PreviewA>
+                            <PreviewA v-if="character.mastery.strength > 3" href="1. Règles/99. Annexes/4. Équipement#Les armes à deux mains">Arme à deux mains</PreviewA>
+                            <PreviewA v-if="character.mastery.dexterity > 0 && character.mastery.strength > 1" href="1. Règles/99. Annexes/4. Équipement#Les armes maniables">Arme maniable</PreviewA>
+                            <PreviewA v-if="character.mastery.dexterity > 1 && character.mastery.strength > 1" href="1. Règles/99. Annexes/4. Équipement#Les armes à projectiles">Arme à projectiles</PreviewA>
+                            <PreviewA v-if="character.mastery.dexterity > 1 && character.mastery.strength > 2" href="1. Règles/99. Annexes/4. Équipement#Les armes longues">Arme longue</PreviewA>
+                            <PreviewA v-if="character.mastery.shield > 0" href="1. Règles/99. Annexes/4. Équipement#Les boucliers">Bouclier</PreviewA>
+                            <PreviewA v-if="character.mastery.shield > 0 && character.mastery.strength > 3" href="1. Règles/99. Annexes/4. Équipement#Les boucliers à deux mains">Bouclier à deux mains</PreviewA>
+                        </div>
+                    </div>
+                    <div v-if="character.mastery.armor > 0" class="flex flex-col">
+                        <span class="text-lg font-semibold border-b border-light-30 dark:border-dark-30">Maitrise d'armure</span>
+                        <div class="grid grid-cols-2 gap-x-3 gap-y-1">
+                            <PreviewA v-if="character.mastery.armor > 0" href="1. Règles/99. Annexes/4. Équipement#Les armures légères">Armure légère</PreviewA>
+                            <PreviewA v-if="character.mastery.armor > 1" href="1. Règles/99. Annexes/4. Équipement#Les armures">Armure standard</PreviewA>
+                            <PreviewA v-if="character.mastery.armor > 2" href="1. Règles/99. Annexes/4. Équipement#Les armures lourdes">Armure lourde</PreviewA>
+                        </div>
+                    </div>
+                    <div class="flex flex-col">
+                        <span class="text-lg font-semibold border-b border-light-30 dark:border-dark-30">Maitrise de sorts</span>
+                        <span>Sorts de précision: <span class="font-bold">{{ character.spellranks.precision }}</span></span>
+                        <span>Sorts de savoir: <span class="font-bold">{{ character.spellranks.knowledge }}</span></span>
+                        <span>Sorts d'instinct: <span class="font-bold">{{ character.spellranks.instinct }}</span></span>
+                    </div>
+                    <div class="flex flex-col">
+                        <span class="text-lg font-semibold border-b border-light-30 dark:border-dark-30 mb-2 flex items-center gap-4">Résistances (Attaque/Défense) <Tooltip side="right" message="Les défenses affichées incluent déjà leur modifieur de statistique."><Icon icon="radix-icons:question-mark-circled" /></Tooltip></span>
+                        <div class="grid grid-cols-3 gap-1">
+                            <div class="flex flex-col px-2 items-center text-sm text-light-70 dark:text-dark-70" v-for="(value, resistance) of character.resistance"><span class="font-bold text-base text-light-100 dark:text-dark-100">+{{ value[0] }}/+{{ value[1] + character.modifier[characterConfig.resistances[resistance].statistic as MainStat] }}</span><span>{{ characterConfig.resistances[resistance].name }}</span></div>
+                        </div>
+                    </div>
+                    <div class="flex flex-col">
+                        <span class="text-lg font-semibold border-b border-light-30 dark:border-dark-30 mb-2">Compétences</span>
+                        <div class="grid grid-cols-3 gap-1">
+                            <div class="flex flex-col px-2 items-center text-sm text-light-70 dark:text-dark-70" v-for="(value, ability) of character.abilities"><span class="font-bold text-base text-light-100 dark:text-dark-100">+{{ value }}</span><span>{{ characterConfig.abilities[ability].name }}</span></div>
+                        </div>
+                    </div>
+                </div>
+                <TabsRoot default-value="features" class="w-[60rem]">
+                    <TabsList class="flex flex-row gap-4 relative px-4">
+                        <TabsIndicator class="absolute px-8 left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator>
+                        <TabsTrigger value="features" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Aptitudes</TabsTrigger>
+                        <TabsTrigger value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Sorts</TabsTrigger>
+                        <TabsTrigger value="notes" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Notes</TabsTrigger>
+                    </TabsList>
+                    <TabsContent value="features">
+                        <div class="flex flex-1 flex-col ps-8 gap-4 py-8">
+                            <div class="grid grid-cols-3 gap-2">
+                                <div class="flex flex-col">
+                                    <span class="text-lg font-semibold">Actions</span>
+                                    <span class="text-sm text-light-70 dark:text-dark-70">Attaquer - Saisir - Faire chuter - Déplacer - Courir - Pas de coté - Lancer un sort - S'interposer - Se transformer - Utiliser un objet - Anticiper une action - Improviser</span>
+                                    <MarkdownRenderer :content="character.features.action.join('\n')" />
+                                </div>
+                                <div class="flex flex-col">
+                                    <span class="text-lg font-semibold">Réactions</span>
+                                    <span class="text-sm text-light-70 dark:text-dark-70">Parade - Esquive - Saisir une opportunité - Prendre en tenaille - Intercepter - Désarmer</span>
+                                    <MarkdownRenderer :content="character.features.reaction.join('\n')" />
+                                </div>
+                                <div class="flex flex-col">
+                                    <span class="text-lg font-semibold">Actions libre</span>
+                                    <span class="text-sm text-light-70 dark:text-dark-70">Analyser une situation - Communiquer</span>
+                                    <MarkdownRenderer :content="character.features.freeaction.join('\n')" />
+                                </div>
+                            </div>
+                            <div class="flex flex-col">
+                                <span class="text-lg font-semibold">Aptitudes</span>
+                                <MarkdownRenderer :content="character.features.misc.map(e => `> ${e}`).join('\n\n')" />
+                            </div>
+                        </div>
+                    </TabsContent>
+                    <TabsContent v-if="character.spells.length > 0" value="spells">
+                        <div class="flex flex-1 flex-col ps-8 gap-4 py-8">
+                            <div class="flex flex-col">
+                                <div class="pb-4 px-2 mt-4 border-b last:border-none border-light-30 dark:border-dark-30 flex flex-col" v-for="spell of character.spells.map(e => characterConfig.spells.find((f: SpellConfig) => f.id === e)).filter(e => !!e)">
+                                    <div class="flex flex-row justify-between">
+                                        <span class="text-lg font-bold">{{ spell.name }}</span>
+                                        <div class="flex flex-row items-center gap-6">
+                                            <div class="flex flex-row text-sm gap-2">
+                                                <span v-for="element of spell.elements" :class="elementTexts[element].class">{{ elementTexts[element].text }}</span>
+                                            </div>
+                                            <div class="flex flex-row text-sm gap-1">
+                                                <span class="">Rang {{ spell.rank }}</span><span>/</span>
+                                                <span class="">{{ spellTypeTexts[spell.type] }}</span><span>/</span>
+                                                <span class="">{{ spell.cost }} mana</span><span>/</span>
+                                                <span class="">{{ typeof spell.speed === 'string' ? spell.speed : `${spell.speed} minutes` }}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <MarkdownRenderer :content="spell.effect" />
+                                </div>
+                            </div>
+                        </div>
+                    </TabsContent>
+                    <TabsContent value="notes">
+                        <div class="flex flex-1 flex-col ps-8 gap-4 py-8">
+                            <MarkdownRenderer :content="character.notes" />
+                        </div>
+                    </TabsContent>
+                </TabsRoot>
+            </div>
+        </div>
+    </div>
+    <div v-else>
+        <Head>
+            <Title>d[any] - Erreur</Title>
+        </Head>
+        <div>Erreur de chargement</div>
+    </div>
+</template>

pages/character/index.client.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue/dist/iconify.js';
+
+definePageMeta({
+    guestsGoesTo: '/user/login',
+})
+const { add } = useToast();
+const { user } = useUserSession();
+
+const { data: characters, error, status } = await useFetch(`/api/character`);
+
+async function deleteCharacter(id: number)
+{
+    status.value = "pending";
+    await useRequestFetch()(`/api/character/${id}`, { method: 'delete' });
+    status.value = "success";
+    add({ content: 'Personnage supprimé', type: 'info', duration: 25000, timer: true, });
+    characters.value = characters.value?.filter(e => e.id !== id);
+}
+async function duplicateCharacter(id: number)
+{
+    status.value = "pending";
+    const newId = await useRequestFetch()(`/api/character/${id}/duplicate`, { method: 'post' });
+    status.value = "success";
+    add({ content: 'Personnage dupliqué', type: 'info', duration: 25000, timer: true, });
+    useRouter().push({ name: 'character-id', params: { id: newId } });
+}
+</script>
+
+<template>
+    <Head>
+        <Title>d[any] - Mes personnages</Title>
+    </Head>
+    <div class="flex flex-col">
+        <div class="flex align-center justify-center">
+            <NuxtLink v-if="user?.state === 1" :to="{ name: 'character-id-edit', params: { id: 'new' } }"><Button>Nouveau personnage</Button></NuxtLink>
+            <Tooltip v-else side="top" message="Veuillez valider votre email avant de pouvoir créer un personnage."><Button disabled>Nouveau personnage</Button></Tooltip>
+        </div>
+        <div v-if="status === 'pending'" class="flex flex-1 justify-center align-center">
+            <Loading size="large" />
+        </div>
+        <div v-else-if="status === 'success'" class="grid p-6 2xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 gap-4 w-full">
+            <div class="border border-light-30 dark:border-dark-30 p-3 flex flex-row gap-4" v-for="character of characters">
+                <Avatar size="large" icon="radix-icons:person" src="" />
+                <div class="flex flex-1 flex-shrink flex-col truncate">
+                    <NuxtLink class="text-xl font-bold hover:text-accent-blue truncate" :to="{ name: 'character-id', params: { id: character.id } }" :title="character.name">{{ character.name }}</NuxtLink>
+                    <span class="text-sm truncate">Niveau {{ character.level }}</span>
+                </div>
+                <AlertDialogRoot>
+                    <DropdownMenuRoot>
+                        <DropdownMenuTrigger class="self-start">
+                            <Button icon><Icon icon="radix-icons:dots-vertical" /></Button>
+                        </DropdownMenuTrigger>
+
+                        <DropdownMenuPortal>
+                            <DropdownMenuContent align="end" side="bottom" 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">
+                                <DropdownMenuItem @select="useRouter().push({ name: 'character-id-edit', params: { id: character.id } })" class="cursor-pointer text-base text-light-100 dark:text-dark-100 leading-none flex items-baseline 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 icon="radix-icons:pencil-1" class="absolute left-1.5" />
+                                    <span>Editer</span>
+                                </DropdownMenuItem>
+                                <DropdownMenuItem @select="duplicateCharacter(character.id)" 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 icon="radix-icons:clipboard-copy" class="absolute left-1.5" />
+                                    <span>Dupliquer</span>
+                                </DropdownMenuItem>
+                                <AlertDialogTrigger>
+                                    <DropdownMenuItem class="cursor-pointer text-base text-light-red dark:text-dark-red 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-red dark:data-[highlighted]:bg-dark-red data-[highlighted]:bg-opacity-30 dark:data-[highlighted]:bg-opacity-30">
+                                        <Icon icon="radix-icons:trash" class="absolute left-1.5" />
+                                        <span>Supprimer</span>
+                                    </DropdownMenuItem>
+                                </AlertDialogTrigger>
+
+                                <DropdownMenuArrow class="fill-light-35 dark:fill-dark-35" />
+                            </DropdownMenuContent>
+                        </DropdownMenuPortal>
+                    </DropdownMenuRoot>
+                    <AlertDialogPortal>
+                        <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-[800px] 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">
+                            <AlertDialogTitle class="text-3xl font-light relative -top-2">Supprimer {{ character.name }} ?</AlertDialogTitle>
+                            <div class="flex flex-1 justify-end gap-4">
+                                <AlertDialogCancel asChild><Button>Non</Button></AlertDialogCancel>
+                                <AlertDialogAction asChild><Button @click="() => deleteCharacter(character.id)" class="border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red hover:bg-light-redBack dark:hover:bg-dark-redBack text-light-red dark:text-dark-red focus:shadow-light-red dark:focus:shadow-dark-red">Oui</Button></AlertDialogAction>
+                            </div>
+                        </AlertDialogContent>
+                    </AlertDialogPortal>
+                </AlertDialogRoot>
+            </div>
+        </div>
+        <div v-else>
+            <span>Erreur de chargement</span>
+            <span>{{ error?.message }}</span>
+        </div>
+    </div>
+</template>

pages/character/list.client.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+const { data: characters, error, status } = await useFetch(`/api/character`, { params: { visibility: "public" } });
+</script>
+
+<template>
+    <Head>
+        <Title>d[any] - Liste des personnages</Title>
+    </Head>
+    <div class="flex flex-col">
+        <div v-if="status === 'pending'" class="flex flex-1 justify-center align-center">
+            <Loading size="large" />
+        </div>
+        <div v-else-if="status === 'success'" class="grid p-6 2xl:grid-cols-3 lg:grid-cols-2 grid-cols-1 gap-4 w-full">
+            <div class="border border-light-30 dark:border-dark-30 p-3 flex flex-row gap-4" v-for="character of characters">
+                <Avatar size="large" icon="radix-icons:person" src="" />
+                <div class="flex flex-1 flex-shrink flex-col truncate">
+                    <NuxtLink class="text-xl font-bold hover:text-accent-blue truncate" :to="{ name: 'character-id', params: { id: character.id } }" :title="character.name">{{ character.name }}</NuxtLink>
+                    <span class="text-sm truncate">Niveau {{ character.progress.level }}</span>
+                </div>
+            </div>
+        </div>
+        <div v-else>
+            <span>Erreur de chargement</span>
+            <span>{{ error?.message }}</span>
+        </div>
+    </div>
+</template>

pages/explore/[...path].vue

@@ -1,45 +1,11 @@
 <template>
-    <div v-if="overviewStatus === 'pending'" class="flex">
+    <div class="flex flex-1 justify-start items-start" v-if="overview">
-        <Head>
-            <Title>d[any] - Chargement</Title>
-        </Head>
-        <Loading />
-    </div>
-    <div class="flex flex-1 justify-start items-start" v-else-if="overview">
         <Head>
             <Title>d[any] - {{ overview.title }}</Title>
         </Head>
-        <template v-if="overview.type === 'markdown'">
+        <Markdown v-if="overview.type === 'markdown'" :path="path" />
-            <div class="flex flex-1 justify-start items-start flex-col xl:px-24 md:px-8 px-4 py-6">
+        <Canvas v-else-if="overview.type === 'canvas'" :path="path" />
-                <div class="flex flex-1 flex-row justify-between items-center">
+        <ProseH2 v-else class="flex-1 text-center">Impossible d'afficher le contenu demandé</ProseH2>
-                    <ProseH1>{{ overview.title }}</ProseH1>
-                    <div class="flex gap-4">
-                        <NuxtLink :href="{ name: 'explore-edit', hash: '#' + overview.path }" v-if="isOwner"><Button>Modifier</Button></NuxtLink>
-                    </div>
-                </div>
-                <Markdown v-if="content" :content="content.content" />
-                <Loading v-else />
-            </div>
-        </template>
-        <template v-else-if="overview.type === 'canvas'">
-            <Canvas v-if="content" :canvas="JSON.parse(content.content)" />
-            <Loading v-else />
-        </template>
-        <template v-else>
-            <ProseH2 class="flex-1 text-center">Impossible d'afficher le contenu demandé</ProseH2>
-        </template>
-    </div>
-    <div v-else-if="overviewStatus === 'error'">
-        <Head>
-            <Title>d[any] - Erreur</Title>
-        </Head>
-        <span>{{ overviewError?.message }}</span>
-    </div>
-    <div v-else-if="contentStatus === 'error'">
-        <Head>
-            <Title>d[any] - Erreur</Title>
-        </Head>
-        <span>{{ contentError?.message }}</span>
     </div>
     <div v-else>
         <Head>
@@ -53,9 +19,6 @@
 const route = useRouter().currentRoute;
 const path = computed(() => Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path);
 
-const { user } = useUserSession();
+const { content } = useContent();
-
+const overview = computed(() => content.value.find(e => e.path === path.value));
-const { data: overview, status: overviewStatus, error: overviewError } = await useFetch(`/api/file/overview/${encodeURIComponent(path.value)}`, { watch: [route, path], });
-const { data: content, status: contentStatus, error: contentError } = await useFetch(`/api/file/content/${encodeURIComponent(path.value)}`, { watch: [route, path], });
-const isOwner = computed(() => user.value?.id === overview.value?.owner);
 </script>

pages/explore/edit/index.vue

@@ -5,60 +5,37 @@
 	<ClientOnly>
 		<CollapsibleRoot asChild class="flex flex-1 flex-col xl:-mx-12 xl:-my-8 lg:-mx-8 lg:-my-6 -mx-6 -my-3  overflow-hidden" v-model="open">
 			<div>
-				<div class="z-50 md:hidden flex w-full items-center justify-between h-12 border-b border-light-35 dark:border-dark-35">
+				<div class="z-50 flex w-full items-center justify-between border-b border-light-35 dark:border-dark-35 px-2">
-					<div class="flex items-center px-2">
+					<div class="flex items-center px-2 gap-4">
 						<CollapsibleTrigger asChild>
-							<Button icon class="ms-2 !bg-transparent group">
+							<Button icon class="!bg-transparent group md:hidden">
 								<Icon class="group-data-[state=open]:hidden" icon="radix-icons:hamburger-menu" />
 								<Icon class="group-data-[state=closed]:hidden" icon="radix-icons:cross-1" />
 							</Button>
 						</CollapsibleTrigger>
+						<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-opacity-70 m-2 flex items-center gap-4" aria-label="Accueil" :to="{ path: '/', force: true }">
+							<Avatar src="/logo.dark.svg" class="dark:block hidden" />
+							<Avatar src="/logo.light.svg" class="block dark:hidden" />
+							<span class="text-xl max-md:hidden">d[any]</span>
+						</NuxtLink>
 					</div>
-					<div class="flex items-center px-2">
+					<div class="flex items-center px-2 gap-4">
-						<Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
+						<NuxtLink class="text-light-100 dark:text-dark-100 hover:text-light-70 dark:hover:text-dark-70" :to="{ name: 'user-login' }">{{ user!.username }}</NuxtLink>
 					</div>
 				</div>
 				<div class="flex flex-1 flex-row relative overflow-hidden">
 					<CollapsibleContent asChild forceMount>
-						<div class=" overflow-hidden bg-light-0 dark:bg-dark-0 z-40 xl:w-96 md:w-[15em] max-h-full w-full border-r border-light-30 dark:border-dark-30 flex flex-col justify-between max-md:absolute max-md:-top-0 max-md:-bottom-0 md:left-0 max-md:data-[state=closed]:-left-full max-md:transition-[left] max-md:z-40 max-md:data-[state=open]:left-0">
+						<div class="bg-light-0 dark:bg-dark-0 z-40 w-screen md:w-[18rem] border-r border-light-30 dark:border-dark-30 flex flex-col justify-between my-2 max-md:data-[state=closed]:hidden">
-							<div class="flex flex-col gap-4 xl:px-6 px-3 py-4">
+							<div class="flex-1 px-2 max-w-full max-h-full overflow-y-auto overflow-x-hidden">
-								<div class="flex justify-between items-center max-md:hidden">
+								<div class="flex flex-row justify-between items-center pt-2 pb-4 mb-2 px-2 gap-4 border-b border-light-35 dark:border-dark-35">
-									<div class=" text-light-100 dark:text-dark-100 hover:text-opacity-70 max-md:ps-6" aria-label="Accueil">
+									<Button @click="router.push({ name: 'explore-path', params: { path: selected ? getPath(selected) : 'index' } })">Quitter</Button>
-										<Avatar src="/logo.dark.svg" class="dark:block hidden" />
+									<Button @click="save(true);">Enregistrer</Button>
-										<Avatar src="/logo.light.svg" class="block dark:hidden" />
-									</div>
-									<div class="flex gap-4 items-center">
-										<Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
-									</div>
-								</div>
-							</div>
-							<div class="flex flex-1 flex-col max-w-full max-h-full overflow-hidden py-3" v-if="navigation">
-								<div class="flex flex-row justify-between items-center mb-4 px-6">
-									<div class="flex flex-1 flex-row justify-start items-center gap-4">
-										<Tooltip side="top" message="Annuler (Ctrl+Shift+W)" ><Button icon @click="router.go(-1)"><Icon class="w-5 h-5" icon="radix-icons:arrow-left" /></Button></Tooltip>
-										<Tooltip side="top" message="Enregistrer (Ctrl+S)" ><Button icon :loading="saveStatus === 'pending'" @click="save(true)"><Icon class="w-5 h-5" icon="radix-icons:check" /></Button></Tooltip>
-										<span v-if="edited" class="text-sm text-light-60 dark:text-dark-60 italic">Modifications non enregistrées</span>
-									</div>
-									<div class="flex flex-row justify-end items-center gap-4">
-										<AlertDialogRoot v-if="selected">
-											<Tooltip side="top" message="Supprimer"><AlertDialogTrigger as="span"><Button icon class="border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red hover:bg-light-redBack dark:hover:bg-dark-redBack text-light-red dark:text-dark-red focus:shadow-light-red dark:focus:shadow-dark-red" ><Icon class="w-5 h-5" icon="radix-icons:trash" /></Button></AlertDialogTrigger></Tooltip>
-											<AlertDialogPortal>
-												<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-[800px] 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 flex md:flex-row flex-col gap-4 items-center">
-													<AlertDialogTitle class="text-xl font-semibold">Supprimer <span>{{ selected.title }}</span><span v-if="selected.children"> et tous ces enfants</span> ?</AlertDialogTitle>
-													<div class="flex flex-1 flex-row gap-4 justify-end">
-														<AlertDialogAction asChild @click="navigation = tree.remove(navigation, getPath(selected))"><Button class="border-light-red dark:border-dark-red hover:border-light-red dark:hover:border-dark-red hover:bg-light-redBack dark:hover:bg-dark-redBack text-light-red dark:text-dark-red focus:shadow-light-red dark:focus:shadow-dark-red">Oui</Button></AlertDialogAction>
-														<AlertDialogCancel asChild><Button>Non</Button></AlertDialogCancel>
-													</div>
-												</AlertDialogContent>
-											</AlertDialogPortal>
-										</AlertDialogRoot>
 									<Tooltip side="top" message="Nouveau">
-											<DropdownMenu align="center" side="bottom" :options="[{
+										<DropdownMenu align="end" side="bottom" :options="[{
 											type: 'item',
 											label: 'Markdown',
 											kbd: 'Ctrl+N',
-												icon: 'radix-icons:file',
+											icon: 'radix-icons:file-text',
 											select: () => add('markdown'),
 										}, {
 											type: 'item',
@@ -71,29 +48,32 @@
 											label: 'Canvas',
 											icon: 'ph:graph-light',
 											select: () => add('canvas'),
+										}, {
+											type: 'item',
+											label: 'Carte',
+											icon: 'lucide:map',
+											select: () => add('map'),
 										}, {
 											type: 'item',
 											label: 'Fichier',
-												icon: 'radix-icons:file-text',
+											icon: 'radix-icons:file',
 											select: () => add('file'),
 										}]">
 											<Button icon><Icon class="w-5 h-5" icon="radix-icons:plus" /></Button>
 										</DropdownMenu>
 									</Tooltip>
 								</div>
-								</div>
+								<DraggableTree class="ps-4 text-sm" :items="navigation ?? undefined" :get-key="(item: Partial<TreeItemEditable>) => item.path !== undefined ? getPath(item as TreeItemEditable) : ''" @updateTree="drop" 
-								<DraggableTree class="ps-4 pe-2 xl:text-base text-sm" 
+								v-model="selected" :defaultExpanded="defaultExpanded" :get-children="(item: Partial<TreeItemEditable>) => item.type === 'folder' ? item.children : undefined" >
-								:items="navigation ?? undefined" :get-key="(item: Partial<ProjectExtendedItem>) => item.path !== undefined ? getPath(item as ProjectExtendedItem) : ''" @updateTree="drop" 
+									<template #default="{ handleToggle, handleSelect, isExpanded, isDragging, item }">
-								v-model="selected" :defaultExpanded="defaultExpanded" >
+										<div class="flex flex-1 items-center overflow-hidden" :class="{ 'opacity-50': isDragging }" :style="{ 'padding-left': `${item.level / 2 - 0.5}em` }">
-									<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, item }">
+											<div class="flex flex-1 items-center hover:border-accent-blue hover:text-accent-purple group-data-[selected]:text-accent-blue">
-										<div class="flex flex-1 items-center px-2 max-w-full pe-4" :class="{ 'opacity-50': isDragging }" :style="{ 'padding-left': `${item.level - 0.5}em` }">
+												<Icon @click="handleToggle" v-if="item.hasChildren" icon="radix-icons:chevron-right" :class="{ 'rotate-90': isExpanded }" class="h-4 w-4 transition-transform absolute" :style="{ 'left': `${item.level / 2 - 1.5}em` }" />
-											<span class="py-2 px-2" @click="handleToggle" v-if="item.hasChildren" >
+												<Icon v-else-if="iconByType[item.value.type]" :icon="iconByType[item.value.type]" class="w-5 h-5" @click="handleSelect" />
-												<Icon :icon="isExpanded ? 'lucide:folder-open' : 'lucide:folder'"/>
+												<div class="pl-1.5 py-1.5 flex-1 truncate" :title="item.value.title" @click="handleSelect" :class="{ 'font-semibold': item.hasChildren }">
-											</span>
-											<Icon v-else-if="iconByType[item.value.type]" :icon="iconByType[item.value.type]" class="group-[:hover]:text-accent-purple mx-2" @click="handleSelect" />
-											<div class="pl-3 py-1 flex-1 truncate" :title="item.value.title" @click="handleSelect" :class="{ 'font-semibold': item.hasChildren }">
 													{{ item.value.title }}
 												</div>
+											</div>
 											<div class="flex gap-2">
 												<span @click="item.value.private = !item.value.private">
 													<Icon v-if="item.value.private" icon="radix-icons:lock-closed" />
@@ -108,7 +88,7 @@
 									</template>
 									<template #hint="{ instruction }">
 										<div v-if="instruction" class="absolute h-full w-full top-0 right-0 border-light-50 dark:border-dark-50" :style="{
-												width: `calc(100% - ${instruction.currentLevel - 1}em)`
+												width: `calc(100% - ${instruction.currentLevel / 2 - 1.5}em)`
 											}" :class="{
 												'!border-b-4': instruction?.type === 'reorder-below',
 												'!border-t-4': instruction?.type === 'reorder-above',
@@ -117,50 +97,110 @@
 									</template>
 								</DraggableTree>
 							</div>
+							<div class="xl:px-12 px-6 pt-4 pb-2 text-center text-xs text-light-60 dark:text-dark-60">
+								<NuxtLink class="hover:underline italic" :to="{ name: 'roadmap' }">Roadmap</NuxtLink> - <NuxtLink class="hover:underline italic" :to="{ name: 'legal' }">Mentions légales</NuxtLink>
+								<p>Copyright Peaceultime - 2025</p>
+							</div>
 						</div>
 					</CollapsibleContent>
 					<div class="flex flex-1 flex-row max-h-full overflow-hidden">
-						<div v-if="selected" class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 flex-col items-start justify-start max-h-full relative">
+						<div v-if="selected" class="flex flex-1 flex-col items-start justify-start max-h-full relative">
 							<Head>
 								<Title>d[any] - Modification de {{ selected.title }}</Title>
 							</Head>
-							<div>
+							<CollapsibleRoot v-model:open="topOpen" class="group data-[state=open]:mt-4 w-full relative">
-								<input type="text" v-model="selected.title" placeholder="Titre" class="inline md:h-16 h-12 w-full caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none py-1 md:text-5xl text-4xl font-thin bg-transparent" />
+								<CollapsibleTrigger asChild>
-								<div class="flex flex-col justify-start items-start">
+									<Button class="absolute left-1/2 -translate-x-1/2 group-data-[state=open]:-bottom-3 group-data-[state=closed]:-bottom-6 z-30" icon>
-									<Switch label="Chemin personnalisé" v-model="selected.customPath" />
+										<Icon v-if="topOpen" icon="radix-icons:caret-up" class="h-4 w-4" />
-									<span>
+										<Icon v-else icon="radix-icons:caret-down" class="h-4 w-4" />
-										<pre v-if="selected.customPath" class="flex md:items-center md:text-base md:text-nowrap text-wrap md:flex-nowrap flex-wrap text-sm">/{{ selected.parent !== '' ? selected.parent + '/' : '' }}<TextInput v-model="selected.name" @input="(e) => {
+									</Button>
+								</CollapsibleTrigger>
+								<CollapsibleContent class="xl:px-12 lg:px-8 px-6">
+									<div class="pb-2 grid lg:grid-cols-2 grid-cols-1 lg:items-center justify-between gap-x-4 flex-1 border-b border-light-35 dark:border-dark-35">
+										<input type="text" v-model="selected.title" @input="() => {
+											if(selected && !selected.customPath)
+											{
+												selected.name = parsePath(selected.title);
+												rebuildPath(selected.children, getPath(selected));
+											}
+										}" placeholder="Titre" style="line-height: normal;" class="flex-1 md:text-5xl text-4xl md:h-14 h-12 caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none pb-3 font-thin bg-transparent"/>
+										<div class="flex flex-row justify-between items-center gap-x-4">
+											<div v-if="selected.customPath" class="flex lg:items-center truncate">
+												<pre class="md:text-base text-sm truncate" style="direction: rtl">/{{ selected.parent !== '' ? selected.parent + '/' : '' }}</pre>
+												<TextInput v-model="selected.name" @input="(e: Event) => {
 													if(selected && selected.customPath)
 													{
 														selected.name = parsePath(selected.name);
 														rebuildPath(selected.children, getPath(selected));
 													}
-										}" class="mx-0"/></pre>
+												}" class="mx-0 font-mono"/>
-										<pre v-else class="md:text-base text-smmd:text-nowrap text-wrap ">/{{ getPath(selected) }}</pre>
+											</div>
-									</span>
+											<pre v-else class="md:text-base text-sm truncate" style="direction: rtl">{{ getPath(selected) }}/</pre>
+											<div class="flex gap-4">
+												<Dialog :title="`Supprimer '${selected.title}'${selected.children?.length ?? 0 > 0 ? ' et ses enfants' : ''}`">
+													<template #trigger><Button icon class="bg-light-red dark:bg-dark-red !bg-opacity-40 border-light-red dark:border-dark-red hover:bg-light-red dark:hover:bg-dark-red hover:!bg-opacity-70 hover:border-light-red dark:hover:border-dark-red"><Icon icon="radix-icons:trash" /></Button></template>
+													<template #default>
+														<div class="flex gap-4">
+															<DialogClose><Button @click="navigation = tree.remove(navigation, getPath(selected)); selected = undefined;" class="bg-light-red dark:bg-dark-red !bg-opacity-40 border-light-red dark:border-dark-red hover:bg-light-red dark:hover:bg-dark-red hover:!bg-opacity-70 hover:border-light-red dark:hover:border-dark-red">Oui</Button></DialogClose>
+															<DialogClose><Button>Non</Button></DialogClose>
+														</div>
+													</template>
+												</Dialog>
+												<Dialog title="Préférences Markdown" v-if="selected.type === 'markdown'">
+													<template #trigger><Button icon><Icon icon="radix-icons:gear" /></Button></template>
+													<template #default>
+														<Select label="Editeur de markdown" :modelValue="preferences.markdown.editing" @update:model-value="v => preferences.markdown.editing = (v as 'reading' | 'editing' | 'split')">
+															<SelectItem label="Mode lecture" value="reading" />
+															<SelectItem label="Mode edition" value="editing" />
+															<SelectItem label="Ecran partagé" value="split" />
+														</Select>
+													</template>
+												</Dialog>
+												<DropdownMenu align="end" :options="[{
+													type: 'checkbox',
+													label: 'URL custom',
+													select: (state: boolean) => { selected!.customPath = state; if(!state) selected!.name = parsePath(selected!.title) },
+													checked: selected.customPath
+												}]">
+													<Button icon><Icon icon="radix-icons:dots-vertical"/></Button>
+												</DropdownMenu>
 											</div>
 										</div>
-							<div class="py-4 flex-1 w-full max-h-full flex overflow-hidden">
+									</div>
+								</CollapsibleContent>
+							</CollapsibleRoot>
+							<div class="py-4 flex-1 w-full max-h-full flex overflow-hidden xl:px-12 lg:px-8 px-6 relative">
 								<template v-if="selected.type === 'markdown'">
 									<div v-if="contentStatus === 'pending'" class="flex flex-1 justify-center items-center">
 										<Loading />
 									</div>
 									<span v-else-if="contentError">{{ contentError }}</span>
-									<SplitterGroup direction="horizontal" class="flex-1 w-full flex" v-else-if="selected.content !== undefined">
+									<template v-else-if="preferences.markdown.editing === 'editing'">
+										<Editor v-model="selected.content" autofocus class="flex-1 bg-transparent appearance-none outline-none max-h-full resize-none !overflow-y-auto lg:mx-16 xl:mx-32 2xl:mx-64" />
+									</template>
+									<template v-else-if="preferences.markdown.editing === 'reading'">
+										<div class="flex-1 max-h-full !overflow-y-auto px-4 xl:px-32 2xl:px-64"><MarkdownRenderer :content="(debounced as string)" :proses="{ 'a': FakeA }" /></div>
+									</template>
+									<template v-else-if="preferences.markdown.editing === 'split'">
+										<SplitterGroup direction="horizontal" class="flex-1 w-full flex">
 											<SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }" :defaultSize="50">
-											<Editor v-model="selected.content" placeholder="Commencer votre aventure ..." class="flex-1 bg-transparent appearance-none outline-none max-h-full resize-none !overflow-y-auto" :class="{ 'hidden': isCollapsed }" />
+												<Editor v-model="selected.content" autofocus class="flex-1 bg-transparent appearance-none outline-none max-h-full resize-none !overflow-y-auto" :class="{ 'hidden': isCollapsed }" />
 											</SplitterPanel>
 											<SplitterResizeHandle class="bg-light-35 dark:bg-dark-35 w-px xl!mx-4 mx-2" />
 											<SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }">
-											<div class="flex-1 max-h-full !overflow-y-auto px-8" :class="{ 'hidden': isCollapsed }"><Markdown :content="debounced" :proses="{ 'a': FakeA }" /></div>
+												<div class="flex-1 max-h-full !overflow-y-auto px-8" :class="{ 'hidden': isCollapsed }"><MarkdownRenderer :content="(debounced as string)" :proses="{ 'a': FakeA }" /></div>
 											</SplitterPanel>
 										</SplitterGroup>
 									</template>
+								</template>
 								<template v-else-if="selected.type === 'canvas'">
-									<span class="flex flex-1 justify-center items-center"><ProseH3>Editeur de graphe en cours de développement</ProseH3></span>
+									<CanvasEditor v-if="selected.content" :modelValue="selected.content" :path="getPath(selected)" />
+								</template>
+								<template v-else-if="selected.type === 'map'">
+									<span class="flex flex-1 justify-center items-center"><ProseH3>Editeur de carte en cours de développement</ProseH3></span>
 								</template>
 								<template v-else-if="selected.type === 'file'">
-									<span>Modifier le contenu :</span><input type="file" @change="(e) => console.log(e)" />
+									<span>Modifier le contenu :</span><input type="file" @change="(e: Event) => console.log((e.target as HTMLInputElement).files?.length)" />
 								</template>
 							</div>
 						</div>
@@ -174,21 +214,17 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue/dist/iconify.js';
 import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/tree-item';
-import { parsePath } from '#shared/general.utils';
+import { iconByType, convertContentFromText, convertContentToText, DEFAULT_CONTENT,parsePath } from '#shared/general.util';
-import type { ProjectItem } from '~/schemas/project';
+import type { ExploreContent, FileType, TreeItem } from '~/types/content';
-import type { FileType } from '~/schemas/file';
-import { iconByType } from '#shared/general.utils';
 import FakeA from '~/components/prose/FakeA.vue';
+import type { Preferences } from '~/types/general';
 
-interface ProjectExtendedItem extends ProjectItem
+export type TreeItemEditable = TreeItem &
 {
-	customPath: boolean
+	parent: string;
-	content?: string
+	name: string;
-	children?: ProjectExtendedItem[]
+	customPath: boolean;
-}
+	children?: TreeItemEditable[];
-interface ProjectExtended
-{
-	items: ProjectExtendedItem[]
 }
 
 definePageMeta({
@@ -196,35 +232,21 @@ definePageMeta({
 	layout: 'null',
 });
 
+const { user } = useUserSession();
+
 const router = useRouter();
-const open = ref(true);
+const open = ref(true), topOpen = ref(true);
 
 const toaster = useToast();
 const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');
 
-const { data: project } = await useFetch(`/api/project`, {
+const { content: complete, tree: project } = useContent();
-	transform: (project) => {
+const navigation = ref<TreeItemEditable[]>(transform(JSON.parse(JSON.stringify(project.value)))!);
-		if(project)
+const selected = ref<TreeItemEditable>(), edited = ref(false);
-			(project as ProjectExtended).items = transform(project.items)!;
-
-		return project as ProjectExtended;
-	}
-});
-const navigation = computed<ProjectExtendedItem[] | undefined>({ 
-    get: () => project.value?.items,
-    set: (value) => {
-        const proj = project.value;
-		edited.value = true;
-
-        if(proj && value)
-            proj.items = value;
-
-        project.value = proj;
-    }
-});
-const selected = ref<ProjectExtendedItem>(), edited = ref(false);
 const contentStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle'), contentError = ref<string>();
 
+const preferences = useCookie<Preferences>('preferences', { default: () => ({ markdown: { editing: 'split' }, canvas: { snap: true, size: 32 } }), watch: true, maxAge: 60*60*24*31 });
+
 watch(selected, async (value, old) => {
 	if(selected.value)
 	{
@@ -237,12 +259,12 @@ watch(selected, async (value, old) => {
 
 				if(storedEdit)
 				{
-					selected.value.content = storedEdit;
+					selected.value.content = convertContentFromText(selected.value.type, storedEdit);
 					contentStatus.value = 'success';
 				}
 				else
 				{
-					selected.value.content = (await $fetch(`/api/file/content/${encodeURIComponent(selected.value.path)}`, { query: { type: 'editing'} }))?.content;
+					selected.value.content = (await $fetch(`/api/file/content/${encodeURIComponent(selected.value.path)}`, { query: { type: 'editing'} }));
 					contentStatus.value = 'success';
 				}
 				
@@ -260,7 +282,7 @@ watch(selected, async (value, old) => {
 			//@ts-ignore
 			debounced.value = selected.value.content ?? '';
 		}
-		router.replace({ hash: '#' + encodeURIComponent(selected.value.path || getPath(selected.value)) });
+		router.replace({ hash: '#' + selected.value.path || getPath(selected.value) });
 	}
 	else
 	{
@@ -272,17 +294,17 @@ const debounced = useDebounce(content, 250, { maxWait: 500 });
 
 watch(debounced, () => {
 	if(selected.value && debounced.value)
-		sessionStorage.setItem(`editing:${encodeURIComponent(selected.value.path)}`, debounced.value);
+		sessionStorage.setItem(`editing:${encodeURIComponent(selected.value.path)}`, typeof debounced.value === 'string' ? debounced.value : JSON.stringify(debounced.value));
 });
 useShortcuts({
-    meta_s: { usingInput: true, handler: () => save(false) },
+    meta_s: { usingInput: true, handler: () => save(false), prevent: true },
-    meta_n: { usingInput: true, handler: () => add('markdown') },
+    meta_n: { usingInput: true, handler: () => add('markdown'), prevent: true },
-    meta_shift_n: { usingInput: true, handler: () => add('folder') },
+    meta_shift_n: { usingInput: true, handler: () => add('folder'), prevent: true },
-    meta_shift_z: { usingInput: true, handler: () => router.push({ name: 'explore-path', params: { path: 'index' } }) }
+    meta_shift_z: { usingInput: true, handler: () => router.push({ name: 'explore-path', params: { path: 'index' } }), prevent: true }
 })
 
 const tree = {
-  remove(data: ProjectExtendedItem[], id: string): ProjectExtendedItem[] {
+  remove(data: TreeItemEditable[], id: string): TreeItemEditable[] {
 	return data
 	  .filter(item => getPath(item) !== id)
 	  .map((item) => {
@@ -295,7 +317,7 @@ const tree = {
 		return item;
 	  });
   },
-  insertBefore(data: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
+  insertBefore(data: TreeItemEditable[], targetId: string, newItem: TreeItemEditable): TreeItemEditable[] {
 	return data.flatMap((item) => {
 	  if (getPath(item) === targetId)
 		return [newItem, item];
@@ -309,7 +331,7 @@ const tree = {
 	  return item;
 	});
   },
-  insertAfter(data: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
+  insertAfter(data: TreeItemEditable[], targetId: string, newItem: TreeItemEditable): TreeItemEditable[] {
 	return data.flatMap((item) => {
 	  if (getPath(item) === targetId)
 		return [item, newItem];
@@ -324,7 +346,7 @@ const tree = {
 	  return item;
 	});
   },
-  insertChild(data: ProjectExtendedItem[], targetId: string, newItem: ProjectExtendedItem): ProjectExtendedItem[] {
+  insertChild(data: TreeItemEditable[], targetId: string, newItem: TreeItemEditable): TreeItemEditable[] {
 	return data.flatMap((item) => {
 	  if (getPath(item) === targetId) {
 		// already a parent: add as first child
@@ -345,7 +367,7 @@ const tree = {
 	  };
 	});
   },
-  find(data: ProjectExtendedItem[], itemId: string): ProjectExtendedItem | undefined {
+  find(data: TreeItemEditable[], itemId: string): TreeItemEditable | undefined {
 	for (const item of data) {
 	  if (getPath(item) === itemId)
 		return item;
@@ -357,7 +379,7 @@ const tree = {
 	  }
 	}
   },
-  search(data: ProjectExtendedItem[], prop: keyof ProjectExtendedItem, value: string): ProjectExtendedItem[] {
+  search(data: TreeItemEditable[], prop: keyof TreeItemEditable, value: string): TreeItemEditable[] {
 	const arr = [];
 
 	for (const item of data)
@@ -377,7 +399,7 @@ const tree = {
 	targetId,
 	parentIds = [],
   }: {
-	current: ProjectExtendedItem[]
+	current: TreeItemEditable[]
 	targetId: string
 	parentIds?: string[]
   }): string[] | undefined {
@@ -394,7 +416,7 @@ const tree = {
 		return nested;
 	}
   },
-  hasChildren(item: ProjectExtendedItem): boolean {
+  hasChildren(item: TreeItemEditable): boolean {
 	return (item.children ?? []).length > 0;
   },
 }
@@ -408,7 +430,7 @@ function add(type: FileType): void
 
 	const news = [...tree.search(navigation.value, 'title', 'Nouveau')].filter((e, i, a) => a.indexOf(e) === i);
 	const title = `Nouveau${news.length > 0 ? ' (' + news.length +')' : ''}`;
-	const item: ProjectExtendedItem = { navigable: true, private: false, parent: '', path: '', title: title, name: parsePath(title), type: type, order: 0, children: type === 'folder' ? [] : undefined, customPath: false, content: type === 'markdown' ? '' : undefined };
+	const item: TreeItemEditable = { navigable: true, private: false, parent: '', path: '', title: title, name: parsePath(title), type: type, order: 0, children: [], customPath: false, content: DEFAULT_CONTENT[type], owner: -1, timestamp: new Date(), visit: 0 };
 
 	if(!selected.value)
 	{
@@ -424,7 +446,7 @@ function add(type: FileType): void
 		navigation.value = tree.insertAfter(navigation.value, getPath(selected.value), item);
 	}
 }
-function updateTree(instruction: Instruction, itemId: string, targetId: string) : ProjectExtendedItem[] | undefined {
+function updateTree(instruction: Instruction, itemId: string, targetId: string) : TreeItemEditable[] | undefined {
 	if(!navigation.value)
 		return;
 
@@ -478,15 +500,25 @@ function updateTree(instruction: Instruction, itemId: string, targetId: string)
 
   return navigation.value;
 }
-function transform(items: ProjectItem[] | undefined): ProjectExtendedItem[] | undefined
+function transform(items: TreeItem[] | undefined): TreeItemEditable[] | undefined
 {
-	return items?.map(e => ({...e, customPath: e.name !== parsePath(e.title), children: transform(e.children)}));
+	return items?.map(e => ({
+		...e, 
+		parent: e.path.substring(0, e.path.lastIndexOf('/')),
+		name: e.path.substring(e.path.lastIndexOf('/') + 1),
+		customPath: e.path.substring(e.path.lastIndexOf('/') + 1) !== parsePath(e.title), 
+		children: transform(e.children)
+	})) as TreeItemEditable[] | undefined;
+}
+function flatten(items: TreeItemEditable[] | undefined): TreeItemEditable[]
+{
+	return items?.flatMap(e => [e, ...flatten(e.children)]) ?? [];
 }
 function drop(instruction: Instruction, itemId: string, targetId: string)
 {
     navigation.value = updateTree(instruction, itemId, targetId) ?? navigation.value ?? [];
 }
-function rebuildPath(tree: ProjectExtendedItem[] | null | undefined, parentPath: string)
+function rebuildPath(tree: TreeItemEditable[] | null | undefined, parentPath: string)
 {
     if(!tree)
         return;
@@ -498,30 +530,33 @@ function rebuildPath(tree: ProjectExtendedItem[] | null | undefined, parentPath:
 }
 async function save(redirect: boolean): Promise<void>
 {
+	//@ts-ignore
+	const map = (e: TreeItemEditable[]): TreeItemEditable[] => e.map(f => ({ ...f, content: f.content ? convertContentToText(f.type, f.content) : undefined, children: f.children ? map(f.children) : undefined }));
 	saveStatus.value = 'pending';
 	try {
-		await $fetch(`/api/project`, {
+		const result = await $fetch(`/api/project`, {
 			method: 'post',
-			body: project.value,
+			body: map(navigation.value),
 		});
 		saveStatus.value = 'success';
 		edited.value = false;
 		sessionStorage.clear();
 
 		toaster.clear('error');
-		toaster.add({
+		toaster.add({ type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000 });
-			type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000
-		});
 
+		//@ts-ignore
+		complete.value = result as ExploreContent[];
 		if(redirect) router.go(-1);
 	} catch(e: any) {
 		toaster.add({
 			type: 'error', content: e.message, timer: true, duration: 10000
 		})
+		console.error(e);
 		saveStatus.value = 'error';
 	}
 }
-function getPath(item: ProjectExtendedItem): string
+function getPath(item: TreeItemEditable): string
 {
     return [item.parent, parsePath(item.customPath ? item.name : item.title)].filter(e => !!e).join('/');
 }
@@ -534,10 +569,10 @@ const defaultExpanded = computed(() => {
 		return split;
 	}
 })
-watch(router.currentRoute, (value) => {
+/*watch(router.currentRoute, (value) => {
 	if(value && value.hash && navigation.value)
-		selected.value = tree.find(navigation.value, decodeURIComponent(value.hash.substring(1)));
+		selected.value = tree.find(navigation.value, value.hash.substring(1));
 	else
 		selected.value = undefined;
-}, { immediate: true });
+}, { immediate: true });*/
 </script>

pages/index.vue

@@ -2,9 +2,5 @@
     <Head>
         <Title>d[any] - Accueil</Title>
     </Head>
-    <div class="h-full w-full flex flex-1 flex-col justify-center items-center">
-        <Avatar src="/logo.dark.svg" class="dark:block hidden w-48 h-48" />
-        <Avatar src="/logo.light.svg" class="block dark:hidden w-48 h-48" />
     <h1 class="text-5xl font-thin font-mono">Bienvenue</h1>
-    </div>
 </template>

pages/user/changing-password.vue

@@ -8,8 +8,8 @@
             <ProseH4>Modification de mon mot de passe</ProseH4>
         </div>
         <form @submit.prevent="submit" class="flex flex-1 flex-col justify-center items-stretch">
-            <TextInput type="password" label="Ancien mot de passe" autocomplete="currentPassword" v-model="oldPasswd"/>
+            <TextInput type="password" label="Ancien mot de passe" name="old-password" autocomplete="current-password" v-model="oldPasswd"/>
-            <TextInput type="password" label="Nouveau mot de passe" autocomplete="newPassword" v-model="newPasswd" :class="{ 'border-light-red dark:border-dark-red': error }"/>
+            <TextInput type="password" label="Nouveau mot de passe" name="new-password" autocomplete="new-password" v-model="newPasswd" :class="{ 'border-light-red dark:border-dark-red': error }"/>
             <div class="grid grid-cols-2 flex-col font-light border border-light-35 dark:border-dark-35 px-4 py-2 m-4 ms-0 text-sm leading-[18px] lg:text-base order-8 col-span-2 md:col-span-1 md:order-none">
                 <span class="col-span-2">Prérequis de sécurité</span>
                 <span class="ps-4 flex items-center gap-2" :class="{'text-light-red dark:text-dark-red': !checkedLength}"><Icon v-show="!checkedLength" icon="radix-icons:cross-2" />8 à 128 caractères</span>
@@ -18,8 +18,8 @@
                 <span class="ps-4 flex items-center gap-2" :class="{'text-light-red dark:text-dark-red': !checkedDigit}"><Icon v-show="!checkedDigit" icon="radix-icons:cross-2" />Un chiffre</span>
                 <span class="ps-4 flex items-center gap-2" :class="{'text-light-red dark:text-dark-red': !checkedSymbol}"><Icon v-show="!checkedSymbol" icon="radix-icons:cross-2" />Un caractère special</span>
             </div>
-            <TextInput type="password" label="Repeter le nouveau mot de passe" autocomplete="newPassword" v-model="repeatPasswd" :class="{ 'border-light-red dark:border-dark-red': manualError }"/>
+            <TextInput type="password" label="Repeter le nouveau mot de passe" autocomplete="new-password" v-model="repeatPasswd" :class="{ 'border-light-red dark:border-dark-red': manualError }"/>
-            <Button class="border border-light-35 dark:border-dark-35 self-center" :loading="status === 'pending'">Mettre à jour mon mot de passe</Button>
+            <Button type="submit" class="border border-light-35 dark:border-dark-35 self-center" :loading="status === 'pending'">Mettre à jour mon mot de passe</Button>
         </form>
     </div>
 </template>

pages/user/login.vue

@@ -8,9 +8,9 @@
             <ProseH4>Connexion</ProseH4>
         </div>
         <form @submit.prevent="() => submit()" class="flex flex-1 flex-col justify-center items-stretch">
-            <TextInput type="text" label="Utilisateur ou email" autocomplete="username" v-model="state.usernameOrEmail"/>
+            <TextInput type="text" label="Utilisateur ou email" name="username" autocomplete="username email" v-model="state.usernameOrEmail"/>
-            <TextInput type="password" label="Mot de passe" autocomplete="current-password" v-model="state.password"/>
+            <TextInput type="password" label="Mot de passe" name="password" autocomplete="current-password" v-model="state.password"/>
-            <Button class="border border-light-35 dark:border-dark-35 self-center" :loading="status === 'pending'">Se connecter</Button>
+            <Button type="submit" class="border border-light-35 dark:border-dark-35 self-center" :loading="status === 'pending'">Se connecter</Button>
             <NuxtLink class="mt-4 text-center block text-sm font-semibold tracking-wide hover:text-accent-blue" :to="{ name: 'user-reset-password' }">Mot de passe oublié ?</NuxtLink>
             <NuxtLink class="mt-4 text-center block text-sm font-semibold tracking-wide hover:text-accent-blue" :to="{ name: 'user-register' }">Pas de compte ?</NuxtLink>
         </form>

pages/user/register.vue

@@ -8,9 +8,9 @@
             <ProseH4>Inscription</ProseH4>
         </div>
         <form @submit.prevent="() => submit()" class="grid flex-1 p-4 grid-cols-2 md:grid-cols-1 gap-4 md:gap-0">
-            <TextInput type="text" label="Nom d'utilisateur" autocomplete="username" v-model="state.username" class="w-full md:w-auto"/>
+            <TextInput type="text" label="Nom d'utilisateur" name="username" autocomplete="username" v-model="state.username" class="w-full md:w-auto"/>
-            <TextInput type="email" label="Email" autocomplete="email" v-model="state.email" class="w-full md:w-auto"/>
+            <TextInput type="email" label="Email" name="email" autocomplete="email" v-model="state.email" class="w-full md:w-auto"/>
-            <TextInput type="password" label="Mot de passe" autocomplete="new-password" v-model="state.password" class="w-full md:w-auto"/>
+            <TextInput type="password" label="Mot de passe" name="password" autocomplete="new-password" v-model="state.password" class="w-full md:w-auto"/>
             <div class="grid grid-cols-2 flex-col font-light border border-light-35 dark:border-dark-35 px-4 py-2 m-4 ms-0 text-sm leading-[18px] lg:text-base order-8 col-span-2 md:col-span-1 md:order-none">
                 <span class="col-span-2">Prérequis de sécurité</span>
                 <span class="ps-4 flex items-center gap-2" :class="{'text-light-red dark:text-dark-red': !checkedLength}"><Icon v-show="!checkedLength" icon="radix-icons:cross-2" />8 à 128 caractères</span>
@@ -20,7 +20,7 @@
                 <span class="ps-4 flex items-center gap-2" :class="{'text-light-red dark:text-dark-red': !checkedSymbol}"><Icon v-show="!checkedSymbol" icon="radix-icons:cross-2" />Un caractère special</span>
             </div>
             <TextInput type="password" label="Confirmation du mot de passe" autocomplete="new-password" v-model="confirmPassword" class="w-full md:w-auto"/>
-            <Button class="border border-light-35 dark:border-dark-35 max-w-48 w-full order-9 col-span-2 md:col-span-1 m-auto" :loading="status === 'pending'">S'inscrire</Button>
+            <Button type="submit" class="border border-light-35 dark:border-dark-35 max-w-48 w-full order-9 col-span-2 md:col-span-1 m-auto" :loading="status === 'pending'">S'inscrire</Button>
             <span class="mt-4 order-10 flex justify-center items-center gap-4 col-span-2 md:col-span-1 m-auto">Vous avez déjà un compte ?<NuxtLink class="text-center block text-sm font-semibold tracking-wide hover:text-accent-blue" :to="{ name: 'user-login' }">Se connecter</NuxtLink></span>
         </form>
     </div>

plugins/autofocus.ts

@@ -0,0 +1,7 @@
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.vueApp.directive('autofocus', {
+        mounted(el, binding) {
+            el.focus();
+        }
+    })
+})

schemas/file.ts

@@ -1,6 +1,6 @@
 import { z } from "zod";
 
-export const fileType = z.enum(['folder', 'file', 'markdown', 'canvas']);
+export const fileType = z.enum(['folder', 'file', 'markdown', 'canvas', 'map']);
 export const schema = z.object({
     path: z.string(),
     owner: z.number().finite(),

schemas/project.ts

@@ -15,11 +15,8 @@ const baseItem = z.object({
 export const item: z.ZodType<ProjectItem> = baseItem.extend({
     children: z.lazy(() => item.array().optional()),
 });
-export const project = z.object({
+export const project = z.array(item);
-    items: z.array(item),
-});
 
-export type Project = z.infer<typeof project>;
 export type ProjectItem = z.infer<typeof baseItem> & {
     children?: ProjectItem[]
 }; 

server/api/auth/register.post.ts

@@ -5,6 +5,7 @@ import { usersDataTable, usersTable } from '~/db/schema';
 import { schema } from '~/schemas/registration';
 import { checkSession, logSession } from '~/server/utils/user';
 import type { UserSession, UserSessionRequired } from '~/types/auth';
+import sendMail from '~/server/tasks/mail';
 
 interface SuccessHandler
 {
@@ -82,7 +83,7 @@ export default defineEventHandler(async (e): Promise<Return> => {
                     id: emailId, timestamp,
                 }
             });
-            await runTask('mail', {
+            await sendMail({
                 payload: {
                     type: 'mail',
                     to: [body.data.email],

server/api/auth/request-reset.post.ts

@@ -3,6 +3,7 @@ import { eq, or } from 'drizzle-orm';
 import { z } from 'zod';
 import useDatabase from '~/composables/useDatabase';
 import { usersTable } from '~/db/schema';
+import sendMail from '~/server/tasks/mail';
 
 const schema = z.object({
     profile: z.string(),
@@ -32,7 +33,7 @@ export default defineEventHandler(async (e) => {
                     id, timestamp,
                 }
             });
-            await runTask('mail', {
+            await sendMail({
                 payload: {
                     type: 'mail',
                     data: {

server/api/auth/reset.post.ts

@@ -5,6 +5,7 @@ import { usersDataTable, usersTable } from '~/db/schema';
 import { schema } from '~/schemas/registration';
 import { checkSession, logSession } from '~/server/utils/user';
 import type { UserSession, UserSessionRequired } from '~/types/auth';
+import sendMail from '~/server/tasks/mail';
 
 interface SuccessHandler
 {
@@ -73,7 +74,7 @@ export default defineEventHandler(async (e): Promise<Return> => {
 
             logSession(e, await setUserSession(e, { user: { id: id.id, username: body.data.username, email: body.data.email, state: 0, signin: new Date(), permissions: [], lastTimestamp: new Date(), logCount: 1 } }) as UserSessionRequired);
 
-            await runTask('mail', {
+            await sendMail({
                 payload: {
                     type: 'mail',
                     to: [body.data.email],

server/api/character.get.ts

@@ -0,0 +1,95 @@
+import { and, eq, SQL, sql, type Operators } from 'drizzle-orm';
+import useDatabase from '~/composables/useDatabase';
+import { characterTable, userPermissionsTable } from '~/db/schema';
+import { hasPermissions } from '~/shared/auth.util';
+import { group } from '~/shared/general.util';
+import type { Character, DoubleIndex, Level, MainStat, TrainingLevel } from '~/types/character';
+
+export default defineEventHandler(async (e) => {
+    let { visibility } = getQuery(e) as { visibility?: "public" | "own" | "admin" };
+
+    if(!visibility)
+    {
+        visibility = "own";
+    }
+
+    let where: ((character: typeof characterTable._.config.columns, sql: Operators) => SQL | undefined) | undefined = undefined;
+    const db = useDatabase();
+
+    if(visibility === "own")
+    {
+        const session = await getUserSession(e);
+        if(!session.user)
+        {
+            setResponseStatus(e, 401);
+            return;
+        }
+
+        where = (character, { eq, and }) => and(eq(character.owner, session.user!.id), eq(character.visibility, "private"));
+    }
+    else if(visibility === 'public')
+    {
+        where = (character, { eq, and }) => eq(character.visibility, "public");
+    }
+    else if(visibility === 'admin')
+    {
+        const session = await getUserSession(e);
+        if(!session.user)
+        {
+            setResponseStatus(e, 401);
+            return;
+        }
+        const db = useDatabase();
+
+        const rights = db.select({ right: userPermissionsTable.permission }).from(userPermissionsTable).where(eq(userPermissionsTable.id, session.user.id)).all();
+        if(rights.length === 0 || !hasPermissions(rights.map(e => e.right), ['admin']))
+        {
+            setResponseStatus(e, 403);
+            return;
+        }
+
+        where = undefined;
+    }
+    
+    const characters = db.query.characterTable.findMany({
+        with: {
+            abilities: true,
+            levels: true,
+            modifiers: true,
+            spells: true,
+            training: true,
+            user: {
+                columns: { username: true }
+            }
+        },
+        where: where,
+    }).sync();
+
+    if(characters !== undefined)
+    {
+        return characters.map(character => ({
+            id: character.id,
+
+            name: character.name,
+            people: character.people,
+            level: character.level,
+            aspect: character.aspect,
+            notes: character.notes,
+            health: character.health,
+            mana: character.mana,
+
+            training: character.training.reduce((p, v) => { if(!(v.stat in p)) p[v.stat] = []; p[v.stat].push([v.level as TrainingLevel, v.choice]); return p; }, {} as Record<MainStat, DoubleIndex<TrainingLevel>[]>),
+            leveling: character.levels.map(e => [e.level as Level, e.choice] as DoubleIndex<Level>),
+            abilities: group(character.abilities.map(e => ({ ...e, value: [e.value, e.max] as [number, number] })), "ability", "value"),
+            spells: character.spells.map(e => e.value),
+            modifiers: group(character.modifiers, "modifier", "value"),
+
+            owner: character.owner,
+            username: character.user.username,
+            visibility: character.visibility,
+        } as Character));
+    }
+    
+    setResponseStatus(e, 404);
+    return;
+});

server/api/character.post.ts

@@ -0,0 +1,66 @@
+import { z } from 'zod';
+import useDatabase from '~/composables/useDatabase';
+import { characterAbilitiesTable, characterLevelingTable, characterModifiersTable, characterSpellsTable, characterTable, characterTrainingTable } from '~/db/schema';
+import { CharacterValidation, type Ability, type DoubleIndex, type MainStat, type TrainingLevel } from '~/types/character';
+
+
+export default defineEventHandler(async (e) => {
+    const body = await readValidatedBody(e, CharacterValidation.extend({ id: z.unknown(), }).safeParse);
+    if(!body.success)
+    {
+        setResponseStatus(e, 400);
+        return body.error.message;
+    }
+
+    const session = await getUserSession(e);
+    if(!session.user || session.user.state !== 1)
+    {
+        setResponseStatus(e, 401);
+        return;
+    }
+
+    const db = useDatabase();
+
+    try
+    {
+        const id = db.transaction((tx) => {
+            const id = tx.insert(characterTable).values({
+                name: body.data.name,
+                owner: session.user!.id,
+                people: body.data.people!,
+                level: body.data.level,
+                aspect: body.data.aspect,
+                notes: body.data.notes,
+                health: body.data.health,
+                mana: body.data.mana,
+                visibility: body.data.visibility,
+                thumbnail: body.data.thumbnail,
+            }).returning({ id: characterTable.id }).get().id;
+    
+            if(body.data.leveling.length > 0) tx.insert(characterLevelingTable).values(body.data.leveling.map(e => ({ character: id, level: e[0], choice: e[1] }))).run();
+
+            const training = Object.entries(body.data.training).flatMap(e => e[1].map(_e => ({ character: id, stat: e[0] as MainStat, level: _e[0], choice: _e[1] })));
+            if(training.length > 0) tx.insert(characterTrainingTable).values(training).run();
+
+            const modifiers = Object.entries(body.data.modifiers).map((e) => ({ character: id, modifier: e[0] as MainStat, value: e[1] }));
+            if(modifiers.length > 0) tx.insert(characterModifiersTable).values(modifiers).run();
+
+            if(body.data.spells.length > 0) tx.insert(characterSpellsTable).values(body.data.spells.map(e => ({ character: id, value: e }))).run();
+
+            const abilities = Object.entries(body.data.abilities).map(e => ({ character: id, ability: e[0] as Ability, value: e[1][0], max: e[1][1] }));
+            if(abilities.length > 0) tx.insert(characterAbilitiesTable).values(abilities).run();
+    
+            return id;
+        });
+    
+        setResponseStatus(e, 201);
+        return id;
+    }
+    catch(_e)
+    {
+        console.error(_e);
+
+        setResponseStatus(e, 500);
+        return;
+    }
+});

server/api/character/[id].delete.ts

@@ -0,0 +1,33 @@
+import { eq } from 'drizzle-orm';
+import useDatabase from '~/composables/useDatabase';
+import { characterTable } from '~/db/schema';
+
+export default defineEventHandler(async (e) => {
+    const id = getRouterParam(e, "id");
+    if(!id)
+    {
+        setResponseStatus(e, 400);
+        return;
+    }
+
+    const db = useDatabase();
+    const old = db.select({ id: characterTable.id, owner: characterTable.owner }).from(characterTable).where(eq(characterTable.id, id)).get();
+    
+    if(!old)
+    {
+        setResponseStatus(e, 404);
+        return;
+    }
+
+    const session = await getUserSession(e);
+    if(!session.user || old.owner !== session.user.id)
+    {
+        setResponseStatus(e, 401);
+        return;
+    }
+
+    db.delete(characterTable).where(eq(characterTable.id, id)).run();
+
+    setResponseStatus(e, 200);
+    return;
+});

server/api/character/[id].get.ts

@@ -0,0 +1,66 @@
+import { and, eq, sql } from 'drizzle-orm';
+import useDatabase from '~/composables/useDatabase';
+import { characterTable } from '~/db/schema';
+import { group } from '~/shared/general.util';
+import type { Character, DoubleIndex, Level, MainStat, TrainingLevel } from '~/types/character';
+
+export default defineEventHandler(async (e) => {
+    const id = getRouterParam(e, "id");
+
+    if(!id)
+    {
+        setResponseStatus(e, 400);
+        return;
+    }
+
+    const session = await getUserSession(e);
+
+    if(!session.user)
+    {
+        setResponseStatus(e, 401);
+        return;
+    }
+
+    const db = useDatabase();
+    const character = db.query.characterTable.findFirst({
+        with: {
+            abilities: true,
+            levels: true,
+            modifiers: true,
+            spells: true,
+            training: true,
+            user: {
+                columns: { username: true }
+            }
+        },
+        where: (character, { eq, and }) => and(eq(character.id, parseInt(id, 10)), eq(characterTable.owner, session.user!.id)),
+    }).sync();
+
+    if(character !== undefined)
+    {
+        return {
+            id: character.id,
+
+            name: character.name,
+            people: character.people,
+            level: character.level,
+            aspect: character.aspect,
+            notes: character.notes,
+            health: character.health,
+            mana: character.mana,
+
+            training: character.training.reduce((p, v) => { if(!(v.stat in p)) p[v.stat] = []; p[v.stat].push([v.level as TrainingLevel, v.choice]); return p; }, {} as Record<MainStat, DoubleIndex<TrainingLevel>[]>),
+            leveling: character.levels.map(e => [e.level as Level, e.choice] as DoubleIndex<Level>),
+            abilities: group(character.abilities.map(e => ({ ...e, value: [e.value, e.max] as [number, number] })), "ability", "value"),
+            spells: character.spells.map(e => e.value),
+            modifiers: group(character.modifiers, "modifier", "value"),
+
+            owner: character.owner,
+            username: character.user.username,
+            visibility: character.visibility,
+        } as Character;
+    }
+    
+    setResponseStatus(e, 404);
+    return;
+});

server/api/character/[id].post.ts

@@ -0,0 +1,75 @@
+import { eq } from 'drizzle-orm';
+import useDatabase from '~/composables/useDatabase';
+import { characterAbilitiesTable, characterLevelingTable, characterModifiersTable, characterSpellsTable, characterTable, characterTrainingTable } from '~/db/schema';
+import { CharacterValidation, type Ability, type MainStat } from '~/types/character';
+
+export default defineEventHandler(async (e) => {
+    const params = getRouterParam(e, "id");
+    if(!params)
+    {
+        setResponseStatus(e, 400);
+        return;
+    }
+    const id = parseInt(params, 10);
+
+    const body = await readValidatedBody(e, CharacterValidation.safeParse);
+    if(!body.success)
+    {
+        setResponseStatus(e, 400);
+        return body.error.message;
+    }
+
+    const db = useDatabase();
+    const old = db.select({ id: characterTable.id, owner: characterTable.owner }).from(characterTable).where(eq(characterTable.id, id)).get();
+    
+    if(!old)
+    {
+        setResponseStatus(e, 404);
+        return;
+    }
+
+    const session = await getUserSession(e);
+    if(!session.user || old.owner !== session.user.id || session.user.state !== 1)
+    {
+        setResponseStatus(e, 401);
+        return;
+    }
+    
+    db.transaction((tx) => {
+        tx.update(characterTable).set({
+            name: body.data.name,
+            people: body.data.people!,
+            level: body.data.level,
+            aspect: body.data.aspect,
+            notes: body.data.notes,
+            health: body.data.health,
+            mana: body.data.mana,
+            visibility: body.data.visibility,
+            thumbnail: body.data.thumbnail,
+        }).where(eq(characterTable.id, id)).run();
+
+        tx.delete(characterLevelingTable).where(eq(characterLevelingTable.character, id)).run();
+        tx.delete(characterTrainingTable).where(eq(characterTrainingTable.character, id)).run();
+        tx.delete(characterModifiersTable).where(eq(characterModifiersTable.character, id)).run();
+        tx.delete(characterSpellsTable).where(eq(characterSpellsTable.character, id)).run();
+        tx.delete(characterAbilitiesTable).where(eq(characterAbilitiesTable.character, id)).run();
+
+        if(body.data.leveling.length > 0) tx.insert(characterLevelingTable).values(body.data.leveling.map(e => ({ character: id, level: e[0], choice: e[1] }))).run();
+
+        const training = Object.entries(body.data.training).flatMap(e => e[1].map(_e => ({ character: id, stat: e[0] as MainStat, level: _e[0], choice: _e[1] })));
+        if(training.length > 0) tx.insert(characterTrainingTable).values(training).run();
+
+        const modifiers = Object.entries(body.data.modifiers).map((e) => ({ character: id, modifier: e[0] as MainStat, value: e[1] }));
+        if(modifiers.length > 0) tx.insert(characterModifiersTable).values(modifiers).run();
+
+        if(body.data.spells.length > 0) tx.insert(characterSpellsTable).values(body.data.spells.map(e => ({ character: id, value: e }))).run();
+
+        const abilities = Object.entries(body.data.abilities).map(e => ({ character: id, ability: e[0] as Ability, value: e[1][0], max: e[1][1] }));
+        if(abilities.length > 0) tx.insert(characterAbilitiesTable).values(abilities).run();
+    });
+
+    await useStorage('cache').removeItem(`nitro:functions:character:${id}.json`);
+
+    setResponseStatus(e, 200);
+    return;
+});

server/api/character/[id]/compiled.get.ts

@@ -0,0 +1,220 @@
+import useDatabase from '~/composables/useDatabase';
+import { defaultCharacter, type Ability, type Character, type CharacterConfig, type CompiledCharacter, type DoubleIndex, type Feature, type Level, type MainStat, type TrainingLevel, type TrainingOption } from '~/types/character';
+import characterData from '#shared/character-config.json';
+import { group } from '~/shared/general.util';
+
+export default defineEventHandler(async (e) => {
+    const id = getRouterParam(e, "id");
+    if(!id)
+    {
+        setResponseStatus(e, 400);
+        return;
+    }
+
+    const db = useDatabase();
+    const character = db.query.characterTable.findFirst({
+        with: {
+            abilities: true,
+            levels: true,
+            modifiers: true,
+            spells: true,
+            training: true,
+            user: {
+                columns: { username: true }
+            }
+        },
+        where: (character, { eq }) => eq(character.id, parseInt(id, 10)),
+    }).sync();
+
+    if(character !== undefined)
+    {
+        return compileCharacter(Object.assign(defaultCharacter, {
+            id: character.id,
+
+            name: character.name,
+            people: character.people,
+            level: character.level,
+            aspect: character.aspect,
+            notes: character.notes,
+            health: character.health,
+            mana: character.mana,
+
+            training: character.training.reduce((p, v) => { if(!(v.stat in p)) p[v.stat] = []; p[v.stat].push([v.level as TrainingLevel, v.choice]); return p; }, {} as Record<MainStat, DoubleIndex<TrainingLevel>[]>),
+            leveling: character.levels.map(e => [e.level as Level, e.choice] as DoubleIndex<Level>),
+            abilities: group(character.abilities.map(e => ({ ...e, value: [e.value, e.max] as [number, number] })), "ability", "value"),
+            spells: character.spells.map(e => e.value),
+            modifiers: group(character.modifiers, "modifier", "value"),
+
+            owner: character.owner,
+            username: character.user.username,
+            visibility: character.visibility,
+        } as Character) as Character);
+    }
+    
+    setResponseStatus(e, 404);
+    return;
+}/* , { name: "character", getKey: (e) => getRouterParam(e, "id") || 'error' } */);
+
+function compileCharacter(character: Character & { username?: string }): CompiledCharacter
+{
+    const config = characterData as CharacterConfig;
+    const race = character.people !== undefined ? config.peoples[character.people] : undefined;
+    const raceOptions = race ? character.leveling!.map(e => race.options[e[0]][e[1]]) : [];
+    const features = Object.entries(config.training).map(e => [e[0], getFeaturesOf(e[0] as MainStat, character.training[e[0] as MainStat])]) as [MainStat, TrainingOption[]][];
+
+    const compiled: CompiledCharacter = {
+        id: character.id,
+        owner: character.owner,
+        username: character.username,
+        name: character.name,
+        health: raceOptions.reduce((p, v) => p + (v.health ?? 0), 0),
+        mana: raceOptions.reduce((p, v) => p + (v.mana ?? 0), 0),
+        race: character.people!,
+        modifier: features.map(e => [e[0], Math.floor((e[1].length - 1) / 3) + (character.modifiers[e[0]] ?? 0)] as [MainStat, number]).reduce((p, v) => { p[v[0]] = v[1]; return p }, {} as Record<MainStat, number>),
+        level: character.level,
+        values: {
+            health: character.health,
+            mana: character.mana
+        },
+        features: {
+            action: [],
+            reaction: [],
+            freeaction: [],
+            misc: [],
+        },
+        abilities: {
+            athletics: 0,
+            acrobatics: 0,
+            intimidation: 0,
+            sleightofhand: 0,
+            stealth: 0,
+            survival: 0,
+            investigation: 0,
+            history: 0,
+            religion: 0,
+            arcana: 0,
+            understanding: 0,
+            perception: 0,
+            performance: 0,
+            medecine: 0,
+            persuasion: 0,
+            animalhandling: 0,
+            deception: 0
+        },
+        spellslots: 0,
+        artslots: 0,
+        spellranks: {
+            instinct: 0,
+            knowledge: 0,
+            precision: 0,
+            arts: 0,
+        },
+        spells: character.spells ?? [],
+        speed: false,
+        defense: {
+            static: 6,
+            activeparry: 0,
+            activedodge: 0,
+            passiveparry: 0,
+            passivedodge: 0,
+        },
+        mastery: {
+            strength: 0,
+            dexterity: 0,
+            shield: 0,
+            armor: 0,
+            multiattack: 1,
+            magicpower: 0,
+            magicspeed: 0,
+            magicelement: 0
+        },
+        resistance: {
+            stun: [0, 0],
+            bleed: [0, 0],
+            poison: [0, 0],
+            fear: [0, 0],
+            influence: [0, 0],
+            charm: [0, 0],
+            possesion: [0, 0],
+            precision: [0, 0],
+            knowledge: [0, 0],
+            instinct: [0, 0]
+        },
+        initiative: 0,
+        aspect: "",
+        notes: character.notes ?? "",
+    };
+
+    features.forEach(e => e[1].forEach((_e, i) => applyTrainingOption(e[0], _e, compiled, i === e[1].length - 1)));
+    specialFeatures(compiled, character.training);
+
+    Object.entries(character.abilities).forEach(e => compiled.abilities[e[0] as Ability]! += e[1][0]);
+
+    return compiled;
+}
+function applyTrainingOption(stat: MainStat, option: TrainingOption, character: CompiledCharacter, last: boolean)
+{
+    if(option.health) character.health += option.health;
+    if(option.mana) character.mana += option.mana;
+    if(option.mastery) character.mastery[option.mastery]++;
+    if(option.speed) character.speed = option.speed;
+    if(option.initiative) character.initiative += option.initiative;
+    if(option.spellrank) character.spellranks[option.spellrank]++;
+    if(option.defense) option.defense.forEach(e => character.defense[e]++);
+    if(option.resistance) option.resistance.forEach(e => character.resistance[e[0]][e[1] === "attack" ? 0 : 1]++);
+    if(option.spellslot) character.spellslots += option.spellslot in character.modifier ? character.modifier[option.spellslot as MainStat] : option.spellslot as number;
+    if(option.arts) character.artslots += option.arts in character.modifier ? character.modifier[option.arts as MainStat] : option.arts as number;
+    if(option.spell) character.spells.push(option.spell);
+
+    option.description.forEach(line => !line.disposable && (last || !line.replaced) && character.features[line.category ?? "misc"].push(line.text));
+
+    //if(option.features) option.features.forEach(e => applyFeature(e, character));
+}
+function specialFeatures(character: CompiledCharacter, levels: Record<MainStat, DoubleIndex<TrainingLevel>[]>)
+{
+    //Cap la défense
+    const strengthCap3 = levels.strength.some(e => e[0] === 0);
+    const strengthCap6 = levels.strength.some(e => e[0] === 1);
+    const strengthUncapped = levels.strength.some(e => e[0] === 2);
+
+    const dexterityCap3 = levels.dexterity.some(e => e[0] === 0);
+    const dexterityCap3Stat = levels.dexterity.some(e => e[0] === 1);
+    const dexterityUncapped = levels.dexterity.some(e => e[0] === 2);
+
+    if(!strengthUncapped || !dexterityUncapped)
+    {
+        if(strengthCap6)
+        {
+            character.defense = {
+                static: 6,
+                activeparry: 0,
+                activedodge: 0,
+                passiveparry: 0,
+                passivedodge: 0,
+            };
+        }
+        else if(strengthCap3 || dexterityCap3)
+        {
+            character.defense = {
+                static: 3,
+                activeparry: 0,
+                activedodge: 0,
+                passiveparry: 0,
+                passivedodge: 0,
+            };
+        }
+        else if(dexterityCap3Stat)
+        {
+            character.defense.static = 3;
+        }
+    }
+}/* 
+function applyFeature(feature: Feature, character: CompiledCharacter)
+{
+    
+} */
+export function getFeaturesOf(stat: MainStat, progression: DoubleIndex<TrainingLevel>[]): TrainingOption[]
+{
+    const config = characterData as CharacterConfig;
+    return progression.map(e => config.training[stat][e[0]][e[1]]);
+}

server/api/character/[id]/duplicate.post.ts

@@ -0,0 +1,37 @@
+import { eq } from 'drizzle-orm';
+import useDatabase from '~/composables/useDatabase';
+import { characterTable } from '~/db/schema';
+
+export default defineEventHandler(async (e) => {
+    const id = getRouterParam(e, "id");
+    if(!id)
+    {
+        setResponseStatus(e, 400);
+        return;
+    }
+
+    const db = useDatabase();
+    const old = db.select().from(characterTable).where(eq(characterTable.id, parseInt(id, 10))).get();
+    
+    if(!old)
+    {
+        setResponseStatus(e, 404);
+        return;
+    }
+
+    const session = await getUserSession(e);
+    if(!session.user || old.owner !== session.user.id || session.user.state !== 1)
+    {
+        setResponseStatus(e, 401);
+        return;
+    }
+
+    const returned = await db.insert(characterTable).values({
+        name: `Copie de ${old.name}`,
+        progress: old.progress,
+        owner: session.user.id,
+    }).returning({ id: characterTable.id });
+
+    setResponseStatus(e, 201);
+    return returned[0].id;
+});

server/api/character/[id]/values.get.ts

@@ -0,0 +1,34 @@
+import { and, eq, sql } from 'drizzle-orm';
+import useDatabase from '~/composables/useDatabase';
+import { characterTable } from '~/db/schema';
+import type { Character, CharacterValues } from '~/types/character';
+
+export default defineEventHandler(async (e) => {
+    const id = getRouterParam(e, "id");
+
+    if(!id)
+    {
+        setResponseStatus(e, 400);
+        return;
+    }
+
+    const session = await getUserSession(e);
+    if(!session.user)
+    {
+        setResponseStatus(e, 401);
+        return;
+    }
+
+    const db = useDatabase();
+    const character = db.select({
+        values: characterTable.values
+    }).from(characterTable).where(and(eq(characterTable.id, parseInt(id, 10)), eq(characterTable.owner, session.user.id))).get();
+
+    if(character !== undefined)
+    {
+        return character.values as CharacterValues;
+    }
+    
+    setResponseStatus(e, 404);
+    return;
+});

server/api/character/[id]/values.post.ts

@@ -0,0 +1,42 @@
+import { eq } from 'drizzle-orm';
+import useDatabase from '~/composables/useDatabase';
+import { characterTable } from '~/db/schema';
+
+export default defineEventHandler(async (e) => {
+    const id = getRouterParam(e, "id");
+    if(!id)
+    {
+        setResponseStatus(e, 400);
+        return;
+    }
+
+    const body = await readBody(e);
+    if(!body)
+    {
+        setResponseStatus(e, 400);
+        return;
+    }
+
+    const db = useDatabase();
+    const old = db.select({ id: characterTable.id, owner: characterTable.owner }).from(characterTable).where(eq(characterTable.id, parseInt(id, 10))).get();
+    
+    if(!old)
+    {
+        setResponseStatus(e, 404);
+        return;
+    }
+
+    const session = await getUserSession(e);
+    if(!session.user || old.owner !== session.user.id || session.user.state !== 1)
+    {
+        setResponseStatus(e, 401);
+        return;
+    }
+
+    db.update(characterTable).set({
+        values: body,
+    }).where(eq(characterTable.id, parseInt(id, 10))).run();
+
+    setResponseStatus(e, 200);
+    return;
+});