Add CharacterBuilder class to unify and compile the features

This reverts commit 685bd47fc4.

.gitignore

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

app.vue

@@ -1,10 +1,11 @@
 <template>
 	<div class="text-light-100 dark:text-dark-100 flex bg-light-0 dark:bg-dark-0 h-screen overflow-hidden">
 		<NuxtRouteAnnouncer/>
+		<NuxtLoadingIndicator />
 		<TooltipProvider>
 			<NuxtLayout>
-				<div class="xl:ps-12 xl:pe-12 ps-6 pe-4 flex flex-1 justify-center overflow-auto max-h-full relative">
-					<NuxtPage></NuxtPage>
+				<div class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 justify-center overflow-auto max-h-full max-w-full relative">
+					<NuxtPage />
 				</div>
 			</NuxtLayout>
 			<Toaster v-model="list" />
@@ -38,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,33 +1,154 @@
 <script lang="ts">
+import { crosshairCursor, Decoration, dropCursor, EditorView, keymap, ViewPlugin, ViewUpdate, WidgetType, type DecorationSet } from '@codemirror/view';
+import { Annotation, EditorState, RangeValue, SelectionRange, type Range } from '@codemirror/state';
+import { defaultKeymap, history, historyKeymap } from '@codemirror/commands';
+import { bracketMatching, defaultHighlightStyle, foldKeymap, HighlightStyle, indentOnInput, syntaxHighlighting, syntaxTree } from '@codemirror/language';
+import { search, searchKeymap } from '@codemirror/search';
+import { closeBrackets, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
+import { lintKeymap } from '@codemirror/lint';
+import { markdown, markdownLanguage } from '@codemirror/lang-markdown';
+import { IterMode, Tree } from '@lezer/common';
+import { tags } from '@lezer/highlight';
 const External = Annotation.define<boolean>();
+const Hidden = Decoration.mark({ class: 'hidden' });
+const Bullet = Decoration.mark({ class: '*:hidden before:absolute before:top-2 before:left-0 before:inline-block before:w-2 before:h-2 before:rounded before:bg-light-40 dark:before:bg-dark-40 relative ps-4' });
+const Blockquote = Decoration.line({ class: '*:hidden before:block !ps-4 relative before:absolute before:top-0 before:bottom-0 before:left-0 before:w-1 before:bg-none before:bg-light-30 dark:before:bg-dark-30' });
+
+const TagTag = tags.special(tags.content);
+
+const intersects = (a: {
+    from: number;
+    to: number;
+}, b: {
+    from: number;
+    to: number;
+}) => !(a.to < b.from || b.to < a.from);
+
+const highlight = HighlightStyle.define([
+    { tag: tags.heading1, class: 'text-5xl pt-4 pb-2 after:hidden' },
+    { tag: tags.heading2, class: 'text-4xl pt-4 pb-2 ps-1 leading-loose after:hidden' },
+    { tag: tags.heading3, class: 'text-2xl font-bold pt-1 after:hidden' },
+    { tag: tags.heading4, class: 'text-xl font-semibold pt-1 after:hidden variant-cap' },
+    { tag: tags.meta, color: "#404740" },
+    { tag: tags.link, textDecoration: "underline" },
+    { tag: tags.heading, textDecoration: "underline", fontWeight: "bold" },
+    { tag: tags.emphasis, fontStyle: "italic" },
+    { tag: tags.strong, fontWeight: "bold" },
+    { tag: tags.strikethrough, textDecoration: "line-through" },
+    { tag: tags.keyword, color: "#708" },
+    { tag: TagTag, class: 'cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30' }
+]);
+
+class Decorator
+{
+    static hiddenNodes: string[] = [
+        'HardBreak',
+        'LinkMark',
+        'EmphasisMark',
+        'CodeMark',
+        'CodeInfo',
+        'URL',
+    ]
+    decorations: DecorationSet;
+    constructor(view: EditorView)
+    {
+        this.decorations = Decoration.set(this.iterate(syntaxTree(view.state), view.visibleRanges, []), true);
+    }
+    update(update: ViewUpdate)
+    {
+        if(!update.docChanged && !update.viewportChanged && !update.selectionSet)
+            return;
+
+        this.decorations = this.decorations.update({
+            filter: (f, t, v) => false,
+            add: this.iterate(syntaxTree(update.state), update.view.visibleRanges, update.state.selection.ranges),
+            sort: true,
+        });
+    }
+    iterate(tree: Tree, visible: readonly {
+        from: number;
+        to: number;
+    }[], selection: readonly SelectionRange[]): Range<Decoration>[]
+    {
+        const decorations: Range<Decoration>[] = [];
+        
+        for (let { from, to } of visible) {
+            tree.iterate({
+                from, to, mode: IterMode.IgnoreMounts,
+                enter: node => {
+                    if(node.node.parent && selection.some(e => intersects(e, node.node.parent!)))
+                        return true;
+
+                    else if(node.name === 'HeaderMark')
+                        decorations.push(Hidden.range(node.from, node.to + 1));
+
+                    else if(Decorator.hiddenNodes.includes(node.name))
+                        decorations.push(Hidden.range(node.from, node.to));
+
+                    else if(node.matchContext(['BulletList', 'ListItem']) && node.name === 'ListMark')
+                        decorations.push(Bullet.range(node.from, node.to + 1));
+
+                    else if(node.matchContext(['Blockquote']))
+                        decorations.push(Blockquote.range(node.from, node.from));
+
+                    return true;
+                },
+            });
+        }
+
+        return decorations;
+    }
+}
 </script>
 
 <script setup lang="ts">
-import { dropCursor, crosshairCursor, keymap, EditorView, ViewUpdate } 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 { searchKeymap } from '@codemirror/search';
-import { closeBrackets, closeBracketsKeymap, completionKeymap } from '@codemirror/autocomplete';
-import { lintKeymap } from '@codemirror/lint';
+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 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(),
@@ -46,20 +167,26 @@ onMounted(() => {
                     {
                         model.value = viewUpdate.state.doc.toString();
                     }
+                }),
+                EditorView.contentAttributes.of({spellcheck: "true"}),
+                ViewPlugin.fromClass(Decorator, {
+                    decorations: e => e.decorations,
                 })
             ]
         });
-        view.value = new EditorView({
-            state: state.value,
-            parent: editor.value,
-        });
+
+        if(autofocus)
+        {
+            view.value.focus();
         }
-})
+    }
+});
 
 onBeforeUnmount(() => {
-    if (view.value) {
-        view.value?.destroy()
-        view.value = undefined
+    if (view.value)
+    {
+        view.value?.destroy();
+        view.value = undefined;
     }
 });
 
@@ -75,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 dark:caret-dark-100;
+    @apply caret-light-100 dark:caret-dark-100;
+}
+.cm-line
+{
+    @apply text-base;
+    @apply font-sans;
 }
 </style>

components/FramedEditor.vue

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

components/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,111 +1,49 @@
-<script lang="ts">
-import type { RootContent, Root } from 'hast';
-import { Text, Comment } from 'vue';
+<template>
+	<div v-if="content && content.length > 0">
+		<ProsesRenderer #default v-if="data" :node="data" :proses="proses" />
+	</div>
+</template>
 
-import ProseP from '~/components/prose/ProseP.vue';
-import ProseA from '~/components/prose/ProseA.vue';
-import ProseBlockquote from '~/components/prose/ProseBlockquote.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 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';
+<script setup lang="ts">
+import type { Component } from 'vue';
+import { heading } from 'hast-util-heading';
+import { headingRank } from 'hast-util-heading-rank';
+import { parseId } from '~/shared/general.util';
+import type { Root } from 'hast';
 
-const proseList = {
-    "p": ProseP,
-    "a": ProseA,
-    "blockquote": ProseBlockquote,
-    "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,
-    "strong": ProseStrong,
-    "table": ProseTable,
-    "tag": ProseTag,
-    "thead": ProseThead,
-    "tbody": ProseTbody,
-    "td": ProseTd,
-    "th": ProseTh,
-    "tr": ProseTr,
-    "script": ProseScript
-};
+const { content, proses, filter } = defineProps<{
+	content: string
+	proses?: Record<string, string | Component>
+	filter?: string
+}>();
 
-export default defineComponent({
-    name: 'MarkdownRenderer',
-    props: {
-        node: {
-            type: Object,
-            required: true
-        },
-        proses: {
-            type: Object,
-            default: () => ({})
-        }
-    },
-    async setup(props) {
-        if(props.proses)
+const parser = useMarkdown(), data = ref<Root>();
+const node = computed(() => content ? parser(content) : undefined);
+watch([node], () => {
+	if(!node.value)
+		data.value = undefined;
+	else if(!filter)
 	{
-            for(const prose of Object.keys(props.proses))
+		data.value = node.value;
+	}
+	else
 	{
-                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;
+		const start = node.value?.children.findIndex(e => heading(e) && parseId(e.properties.id as string | undefined) === filter) ?? -1;
 
-        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')
+		if(start === -1)
+			data.value = node.value;
+		else
 		{
-        return h(Text, node.value);
-    }
-    else if(node.type === 'comment' && node.value.length > 0 && node.value !== '\n')
+			let end = start;
+			const rank = headingRank(node.value.children[start])!;
+			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')
-    {
-        return h(tags[node.tagName] ?? node.tagName, { ...node.properties, class: node.properties.className }, { default: () => node.children.map(e => renderNode(e, tags)).filter(e => !!e) });
+			data.value = { ...node.value, children: node.value.children.slice(start, end) };
 		}
-
-    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/TrainingConfigEditor.vue

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

components/TrainingViewer.vue

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

components/base/Avatar.vue

@@ -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">
+    <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>
@@ -18,9 +18,10 @@
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue/dist/iconify.js';
-const { label, disabled = false } = defineProps<{
+const { label, disabled = false, defaultOpen = false } = defineProps<{
     label?: string
     disabled?: boolean
+    defaultOpen?: boolean
 }>();
 const model = defineModel<boolean>();
 </script>

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 border border-light-35 dark:border-dark-35 text-light-100 dark:text-dark-100 p-2 xl:text-base text-sm overflow-auto w-[450px] 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>
+	<TreeRoot v-bind="forward" v-slot="{ flattenItems }" class="list-none select-none text-light-100 dark:text-dark-100 overflow-auto max-h-full">
+		<DraggableTreeItem v-for="item in flattenItems" :key="item._id" v-bind="item" class="group flex items-center outline-none relative cursor-pointer max-w-full" @select.prevent @toggle.prevent>
 			<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, isDraggedOver }">
 				<slot :handleToggle="handleToggle"
 						:handleSelect="handleSelect"

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

@@ -1,6 +1,6 @@
 <template>
 	<DropdownMenuRoot>
-		<DropdownMenuTrigger :disabled="disabled" ><slot /></DropdownMenuTrigger>
+		<DropdownMenuTrigger :disabled="disabled"><slot /></DropdownMenuTrigger>
 
 		<DropdownMenuPortal>
 			<DropdownMenuContent :align="align" :side="side" class="z-50 outline-none bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade border border-light-35 dark:border-dark-35">

components/base/HoverCard.vue

@@ -1,10 +1,10 @@
 <template>
-    <HoverCardRoot :open-delay="delay">
+    <HoverCardRoot :open-delay="delay" @update:open="(...args) => emits('open', ...args)">
         <HoverCardTrigger class="inline-block cursor-help outline-none">
             <slot></slot>
         </HoverCardTrigger>
         <HoverCardPortal v-if="!disabled">
-            <HoverCardContent :class="$attrs.class" :side="side" 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,9 +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 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/Switch.vue

@@ -1,6 +1,7 @@
 <template>
-    <Label class="flex justify-center items-center my-2">{{ label }}
-        <SwitchRoot v-model:checked="model" :disabled="disabled"
+    <Label class="flex justify-center items-center my-2">
+        <span class="md:text-base text-sm">{{ label }}</span>
+        <SwitchRoot v-model:checked="model" :disabled="disabled" :default-checked="defaultValue"
             class="group mx-3 w-12 h-6 select-none transition-all border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
         data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35  hover:border-light-50 dark:hover:border-dark-50  focus:shadow-raw focus:shadow-light-40 dark:focus:shadow-dark-40
         data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 relative">
@@ -20,6 +21,7 @@ const { label, disabled, onIcon, offIcon } = defineProps<{
     disabled?: boolean
     onIcon?: string
     offIcon?: string
+    defaultValue?: boolean
 }>();
 const model = defineModel<boolean>();
 </script>

components/base/TagsInput.vue

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

components/base/Toaster.vue

@@ -4,10 +4,12 @@
 			<div class="grid grid-cols-8 px-3 pt-2 pb-2">
 				<ToastTitle v-if="toast.title" class="font-semibold text-xl col-span-7 text-light-70 dark:text-dark-70" asChild><h4>{{ toast.title }}</h4></ToastTitle>
 				<ToastClose v-if="toast.closeable" aria-label="Close" class="text-xl -translate-y-2 translate-x-4 cursor-pointer"><span aria-hidden>×</span></ToastClose>
-				<ToastDescription v-if="toast.content" class="text-sm col-span-8 text-light-70 dark:text-dark-70" asChild><span>{{ toast.content }}</span></ToastDescription>
+				<ToastDescription v-if="toast.content" class="text-sm col-span-8 text-light-100 dark:text-dark-100" asChild><span>{{ toast.content }}</span></ToastDescription>
 			</div>
-			<TimerProgress v-if="toast.timer" shape="thin" :delay="toast.duration" class="mb-0 mt-0 w-full group-data-[type=error]:bg-light-redBack dark:group-data-[type=error]:bg-dark-redBack group-data-[type=error]:*:bg-light-red dark:group-data-[type=error]:*:bg-dark-red
-			group-data-[type=success]:bg-light-greenBack dark:group-data-[type=success]:bg-dark-greenBack group-data-[type=success]:*:bg-light-green dark:group-data-[type=success]:*:bg-dark-green" @finish="() => tryClose(toast, false)" />
+			<TimerProgress v-if="toast.timer" shape="thin" :delay="toast.duration" class="mb-0 mt-0 w-full 
+			group-data-[type=error]:*:bg-light-red dark:group-data-[type=error]:*:bg-dark-red group-data-[type=success]:*:bg-light-green dark:group-data-[type=success]:*:bg-dark-green
+			group-data-[type=error]:bg-light-red dark:group-data-[type=error]:bg-dark-red group-data-[type=success]:bg-light-green dark:group-data-[type=success]:bg-dark-green !bg-opacity-50" 
+			@finish="() => tryClose(toast, false)" />
 		</ToastRoot>
 	
 		<ToastViewport class="fixed bottom-0 right-0 flex flex-col p-6 gap-2 max-w-[512px] z-50 outline-none min-w-72" />
@@ -37,14 +39,16 @@ function tryClose(config: ExtraToastConfig, state: boolean)
 .ToastRoot[data-type='error'] {
 	@apply border-light-red;
 	@apply dark:border-dark-red;
-	@apply bg-light-redBack;
-	@apply dark:bg-dark-redBack;
+	@apply bg-light-red;
+	@apply dark:bg-dark-red;
+	@apply !bg-opacity-50;
 }
 .ToastRoot[data-type='success'] {
 	@apply border-light-green;
 	@apply dark:border-dark-green;
-	@apply bg-light-greenBack;
-	@apply dark:bg-dark-greenBack;
+	@apply bg-light-green;
+	@apply dark:bg-dark-green;
+	@apply !bg-opacity-50;
 }
 .ToastRoot[data-state='open'] {
 	animation: slideIn .15s cubic-bezier(0.16, 1, 0.3, 1);

components/base/Tooltip.vue

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

components/base/Tree.vue

@@ -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)">
-        <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">
+    <TreeRoot v-slot="{ flattenItems }" class="list-none select-none text-light-100 dark:text-dark-100 text-sm" :items="model" :get-key="getKey" :defaultExpanded="flatten(model)">
+        <TreeItem v-for="item in flattenItems" v-slot="{ isExpanded }" :key="item._id" :style="{ 'padding-left': `${item.level / 2 - 0.5}em` }" v-bind="item.bind" class="flex items-center ps-2 outline-none relative cursor-pointer">
             <slot :isExpanded="isExpanded" :item="item" />
         </TreeItem>
     </TreeRoot>

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

components/canvas/CanvasEdgeEditor.vue

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

components/canvas/CanvasNode.vue

@@ -1,27 +1,15 @@
-<script setup lang="ts">
-import { Icon } from '@iconify/vue/dist/iconify.js';
-import type { CanvasNode } from '~/types/canvas';
-
-interface Props {
-    node: CanvasNode;
-    zoom: number;
-}
-
-const props = defineProps<Props>();
-
-const size = Math.max(props.node.width, props.node.height);
-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>
+<template>
+    <div class="absolute" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-color': node.color?.hex}" :class="{'-z-10': node.type === 'group', 'z-10': node.type !== 'group'}">
+        <div :class="[style.border]" class="outline-0 transition-[outline-width] border-2 bg-light-20 dark:bg-dark-20 w-full h-full hover:outline-4">
+            <div class="w-full h-full py-2 px-4 flex !bg-opacity-[0.07] overflow-auto" :class="style.bg">
+                <div v-if="node.text?.length > 0" class="flex items-center">
+                    <MarkdownRenderer :content="node.text" />
+                </div>
+            </div>
+        </div>
+        <div v-if="node.type === 'group' && node.label !== undefined" :class="style.border" style="max-width: 100%; font-size: calc(18px * var(--zoom-multiplier))" class="origin-bottom-left tracking-wider border-4 truncate inline-block text-light-100 dark:text-dark-100 absolute bottom-[100%] mb-2 px-2 py-1 font-thin">{{ node.label }}</div>
+    </div>
+</template>
 
 <style>
 .bg-colored
@@ -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>
-    <div class="absolute" :style="{transform: `translate(${node.x}px, ${node.y}px)`, width: `${node.width}px`, height: `${node.height}px`, '--canvas-color': node.color?.hex}" :class="{'-z-10': node.type === 'group', 'z-10': node.type !== 'group'}">
-        <div :class="[colors.border]" class="border-2 bg-light-20 dark:bg-dark-20 overflow-hidden contain-strict w-full h-full flex">
-            <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">
-                        <Markdown :content="node.text" />
-                    </div>
-                </template>
-                <template v-else>
-                    <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"/>
-                    </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>
+const { node } = defineProps<{
+    node: CanvasNode
+    zoom: number
+}>();
+
+const style = computed(() => {
+    return node.color ? node.color?.class ? 
+        { bg: `bg-light-${node.color?.class} dark:bg-dark-${node.color?.class}`, border: `border-light-${node.color?.class} dark:border-dark-${node.color?.class}` } : 
+        { bg: `bg-colored`, border: `border-[color:var(--canvas-color)]` } : 
+        { border: `border-light-40 dark:border-dark-40`, bg: `bg-light-40 dark:bg-dark-40` }
+});
+</script>

components/canvas/CanvasNodeEditor.vue

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

components/character/editor/AbilityEditor.vue

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

components/character/editor/AspectSelector.vue

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

components/character/editor/LevelEditor.vue

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

components/character/editor/PeopleSelector.vue

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

components/character/editor/TrainingEditor.vue

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

components/page/Canvas.vue

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

components/page/Markdown.vue

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

components/prose/FakeA.vue

@@ -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,56 +1,36 @@
 <template>
-    <NuxtLink no-prefetch class="text-accent-blue inline-flex items-center" v-if="data && data[0]"
-    :to="{ name: 'explore-path', params: { path: data[0].path }, hash: hash }" :class="class">
-        <HoverCard class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': data[0].type === 'canvas'}">
+	<NuxtLink class="text-accent-blue inline-flex items-center" :to="overview ? { name: 'explore-path', params: { path: overview.path }, hash: decodeURIComponent(hash) } : href" :class="class">
+		<HoverCard nuxt-client class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview?.type === 'canvas'}" :disabled="!overview">
 			<template #content>
-                <template v-if="data[0].type === 'markdown'">
-                    <div class="px-10">
-                        <Markdown :content="data[0].content" />
-                    </div>
+				<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>
-                <template v-else-if="data[0].type === 'canvas'">
-                    <div class="w-[600px] h-[600px] relative">
-                        <Canvas :canvas="JSON.parse(data[0].content)" />
-                    </div>
-                </template>
-            </template>
-            <template #default>
+			<span>
 				<slot v-bind="$attrs"></slot>
-                <Icon class="w-4 h-4 inline-block" v-if="data && data[0] && data[0].type !== 'markdown'" :icon="iconByType[data[0].type]" />
-            </template>
+				<Icon class="w-4 h-4 inline-block" v-if="overview && overview.type !== 'markdown'" :icon="iconByType[overview.type]" />
+			</span>
 		</HoverCard>
 	</NuxtLink>
-    <NuxtLink no-prefetch 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="data && data[0] && data[0].type !== 'markdown'" :height="20" :width="20"
-            :icon="`icons/link-${data[0].type.toLowerCase()}`" />
-    </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 data = ref(), loading = ref(false);
+const { hash, pathname } = parseURL(href);
 
-if(!!pathname && !protocol)
-{
-    loading.value = true;
-    try {
-        data.value = await $fetch(`/api/file`, {
-            query: {
-                search: `%${pathname}`
-            },
-        });
-    } catch(e) { }
-    loading.value = false;
-}
+const { content } = useContent();
+const overview = computed(() => content.value.find(e => e.path === decodeURIComponent(pathname)));
 </script>
+
+<style>
+.cm-link {
+	@apply text-accent-blue inline-flex items-center cursor-pointer hover:text-opacity-85;
+}
+</style>

components/prose/ProseBlockquote.vue

@@ -1,179 +1,28 @@
 <template>
-  <blockquote ref="el">
+  <blockquote class="empty:before:hidden ps-4 my-4 relative before:absolute before:-top-1 before:-bottom-1 before:left-0 before:w-1 before:bg-light-30 dark:before:bg-dark-30" ref="el">
     <slot />
   </blockquote>
 </template>
 
-<script setup lang="ts">
-const attrs = useAttrs(), el = ref<HTMLQuoteElement>(), title = ref<Element | null>(null);
-
-onMounted(() => {
-  if(el && el.value && attrs.hasOwnProperty("dataCalloutFold"))
-  {
-    title.value = el.value.querySelector('.callout-title');
-    title.value?.addEventListener('click', toggle);
-  }
-});
-onUnmounted(() => {
-  title.value?.removeEventListener('click', toggle);
-})
-function toggle() {
-  el.value?.classList?.toggle('is-collapsed');
-}
-</script>
-
 <style>
-blockquote:not(.callout)
-{
-  @apply ps-4;
-  @apply my-4;
-  @apply relative;
-  @apply before:absolute;
-  @apply before:-top-1;
-  @apply before:-bottom-1;
-  @apply before:left-0;
-  @apply before:w-1;
-  @apply before:bg-light-30;
-  @apply dark:before:bg-dark-30;
-}
-blockquote:empty
+.HyperMD-quote
 {
   @apply before:hidden;
 }
-.callout {
-  @apply bg-light-blue;
-  @apply dark:bg-dark-blue;
-}
-.callout.is-collapsible .callout-title
+.HyperMD-quote.hmd-inactive-line
 {
-  @apply cursor-pointer;
+  @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;
 }
-.callout .fold
+.HyperMD-quote.HyperMD-header
 {
-  @apply transition-transform;
+  @apply before:!hidden;
 }
-.callout.is-collapsed .fold
+.hmd-inactive-line .cm-formatting-quote
 {
-  @apply -rotate-90;
+  @apply !hidden;
 }
-.callout.is-collapsed > p
+.cm-quote 
 {
-  @apply hidden;
-}
-.callout[datacallout="abstract"],
-.callout[datacallout="summary"],
-.callout[datacallout="tldr"] {
-  @apply bg-light-cyan;
-  @apply dark:bg-dark-cyan;
-  @apply text-light-cyan;
-  @apply dark:text-dark-cyan;
-}
-.callout[datacallout="info"] {
-  @apply bg-light-blue;
-  @apply dark:bg-dark-blue;
-  @apply text-light-blue;
-  @apply dark:text-dark-blue;
-}
-.callout[datacallout="todo"] {
-  @apply bg-light-blue;
-  @apply dark:bg-dark-blue;
-  @apply text-light-blue;
-  @apply dark:text-dark-blue;
-}
-.callout[datacallout="important"] {
-  @apply bg-light-cyan;
-  @apply dark:bg-dark-cyan;
-  @apply text-light-cyan;
-  @apply dark:text-dark-cyan;
-}
-.callout[datacallout="tip"],
-.callout[datacallout="hint"] {
-  @apply bg-light-cyan;
-  @apply dark:bg-dark-cyan;
-  @apply text-light-cyan;
-  @apply dark:text-dark-cyan;
-}
-.callout[datacallout="success"],
-.callout[datacallout="check"],
-.callout[datacallout="done"] {
-  @apply bg-light-green;
-  @apply dark:bg-dark-green;
-  @apply text-light-green;
-  @apply dark:text-dark-green;
-}
-.callout[datacallout="question"],
-.callout[datacallout="help"],
-.callout[datacallout="faq"] {
-  @apply bg-light-orange;
-  @apply dark:bg-dark-orange;
-  @apply text-light-orange;
-  @apply dark:text-dark-orange;
-}
-.callout[datacallout="warning"],
-.callout[datacallout="caution"],
-.callout[datacallout="attention"] {
-  @apply bg-light-orange;
-  @apply dark:bg-dark-orange;
-  @apply text-light-orange;
-  @apply dark:text-dark-orange;
-}
-.callout[datacallout="failure"],
-.callout[datacallout="fail"],
-.callout[datacallout="missing"] {
-  @apply bg-light-red;
-  @apply dark:bg-dark-red;
-  @apply text-light-red;
-  @apply dark:text-dark-red;
-}
-.callout[datacallout="danger"],
-.callout[datacallout="error"] {
-  @apply bg-light-red;
-  @apply dark:bg-dark-red;
-  @apply text-light-red;
-  @apply dark:text-dark-red;
-}
-.callout[datacallout="bug"] {
-  @apply bg-light-red;
-  @apply dark:bg-dark-red;
-  @apply text-light-red;
-  @apply dark:text-dark-red;
-}
-.callout[datacallout="example"] {
-  @apply bg-light-purple;
-  @apply dark:bg-dark-purple;
-  @apply text-light-purple;
-  @apply dark:text-dark-purple;
-}
-
-.callout
-{
-  @apply overflow-hidden;
-  @apply my-4;
-  @apply p-3;
-  @apply ps-6;
-  @apply bg-blend-lighten;
-  @apply !bg-opacity-25;
-  @apply border-l-4;
-  @apply inline-block;
-  @apply pe-8;
-}
-.callout-icon
-{
-  @apply w-6;
-  @apply h-6;
-  @apply stroke-2;
-  @apply float-start;
-  @apply me-2;
-}
-.callout-title-inner
-{
-  @apply block;
-  @apply font-bold;
-  @apply ps-8;
-}
-.callout > p
-{
-  @apply mt-2;
-  @apply font-semibold;
+  @apply text-light-100 dark:text-dark-100;
 }
 </style>

components/prose/ProseCallout.vue

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

components/prose/ProseCode.vue

@@ -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-light-35 dark:border-dark-35 m-4" />
+  <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/ProseP.vue

@@ -1,12 +1,3 @@
 <template>
   <p><slot /></p>
 </template>
-
-<style>
-.text-comment
-{
-  @apply text-light-50;
-  @apply dark:text-dark-50;
-  @apply text-sm;
-}
-</style>

components/prose/ProseSmall.vue

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

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

@@ -4,10 +4,9 @@ import RemarkParse from "remark-parse";
 
 import RemarkRehype from 'remark-rehype';
 import RemarkOfm from 'remark-ofm';
-import RemarkBreaks from 'remark-breaks'
 import RemarkGfm from 'remark-gfm';
+import RemarkBreaks from 'remark-breaks';
 import RemarkFrontmatter from 'remark-frontmatter';
-import RehypeRaw from 'rehype-raw';
 
 export default function useMarkdown(): (md: string) => Root
 {
@@ -16,9 +15,8 @@ export default function useMarkdown(): (md: string) => Root
     const parse = (markdown: string) => {
         if (!processor) 
         {
-            processor = unified().use([RemarkParse, RemarkGfm , RemarkOfm , RemarkBreaks, RemarkFrontmatter]);
-            processor.use(RemarkRehype, { allowDangerousHtml: true });
-            processor.use(RehypeRaw);
+            processor = unified().use([RemarkParse, RemarkGfm, RemarkOfm, RemarkBreaks, RemarkFrontmatter]);
+            processor.use(RemarkRehype);
         }
 
         const processed = processor.runSync(processor.parse(markdown)) as Root;

composables/useShortcuts.ts

@@ -7,6 +7,7 @@ export interface ShortcutConfig {
   handler: Function
   usingInput?: string | boolean
   whenever?: WatchSource<boolean>[]
+  prevent?: boolean
 }
 
 export interface ShortcutsConfig {
@@ -29,6 +30,7 @@ interface Shortcut {
   altKey: boolean
   // code?: string
   // keyCode?: number
+  prevent?: boolean
 }
 
 const chainedShortcutRegex = /^[^-]+.*-.*[^-]+$/
@@ -61,7 +63,8 @@ export const useShortcuts = (config: ShortcutsConfig, options: ShortcutsOptions
         if (shortcut.key !== chainedKey) { continue }
 
         if (shortcut.condition.value) {
-          e.preventDefault()
+          e.stopPropagation
+          shortcut.prevent && e.preventDefault()
           shortcut.handler()
         }
         clearChainedInput()
@@ -139,7 +142,7 @@ export const useShortcuts = (config: ShortcutsConfig, options: ShortcutsOptions
     if (typeof shortcutConfig === 'function') {
       shortcut.handler = shortcutConfig
     } else if (typeof shortcutConfig === 'object') {
-      shortcut = { ...shortcut, handler: shortcutConfig.handler }
+      shortcut = { ...shortcut, handler: shortcutConfig.handler, prevent: shortcutConfig.prevent }
     }
 
     if (!shortcut.handler) {

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', {
-    headers: {
-      Accept: 'text/json',
-    },
-    retry: false,
-  }).catch(() => ({}))
-  if (!authReadyState.value) {
+  const sessionState = useSessionState()
+  const loggedIn = Boolean(sessionState.value.user)
+  sessionState.value = await useRequestFetch()('/api/auth/session').catch(() => ({}))
+  if (!authReadyState.value)
+  {
     authReadyState.value = true
   }
+  return loggedIn !== Boolean(sessionState.value.user);
 }
 
 async function clear() {
-  await $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 '~/shared/character';
 
 export const usersTable = sqliteTable("users", {
     id: int().primaryKey({ autoIncrement: true }),
@@ -12,38 +13,85 @@ export const usersTable = sqliteTable("users", {
 export const usersDataTable = sqliteTable("users_data", {
     id: int().primaryKey().references(() => usersTable.id, { onDelete: 'cascade', onUpdate: 'cascade' }),
     signin: int({ mode: 'timestamp' }).notNull().$defaultFn(() => new Date()),
+    lastTimestamp: int({ mode: 'timestamp' }).notNull().$defaultFn(() => new Date()),
+    logCount: int().notNull().default(0),
 });
 
 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 => {
-    return {
-        pk: primaryKey({ columns: [table.id, table.user_id] }),
-    }
-});
+}, (table) => [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 => {
-    return {
-        pk: primaryKey({ columns: [table.id, table.permission] }),
-    }
-});
+}, (table) => [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),
-    order: int().unique('order').notNull(),
+    order: int().notNull(),
+    visit: int().notNull().default(0),
+    timestamp: int({ mode: 'timestamp' }).notNull().$defaultFn(() => new Date()),
 });
 
+export const emailValidationTable = sqliteTable("email_validation", {
+    id: text().primaryKey(),
+    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),
@@ -62,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/0004_ancient_thunderball.sql

@@ -0,0 +1,21 @@
+PRAGMA foreign_keys=OFF;--> statement-breakpoint
+CREATE TABLE `__new_explorer_content` (
+	`path` text PRIMARY KEY NOT NULL,
+	`owner` integer NOT NULL,
+	`title` text NOT NULL,
+	`type` text NOT NULL,
+	`content` blob,
+	`navigable` integer DEFAULT true NOT NULL,
+	`private` integer DEFAULT false NOT NULL,
+	`order` integer NOT NULL,
+	`visit` integer DEFAULT 0 NOT NULL,
+	`timestamp` integer NOT NULL,
+	FOREIGN KEY (`owner`) REFERENCES `users`(`id`) ON UPDATE cascade ON DELETE cascade
+);
+--> statement-breakpoint
+INSERT INTO `__new_explorer_content`("path", "owner", "title", "type", "content", "navigable", "private", "order", "visit", "timestamp") SELECT "path", "owner", "title", "type", "content", "navigable", "private", "order", "visit", "timestamp" FROM `explorer_content`;--> statement-breakpoint
+DROP TABLE `explorer_content`;--> statement-breakpoint
+ALTER TABLE `__new_explorer_content` RENAME TO `explorer_content`;--> statement-breakpoint
+PRAGMA foreign_keys=ON;--> statement-breakpoint
+ALTER TABLE `users_data` ADD `lastTimestamp` integer NOT NULL;--> statement-breakpoint
+ALTER TABLE `users_data` ADD `logCount` integer DEFAULT 0 NOT NULL;

drizzle/0005_panoramic_slayback.sql

@@ -0,0 +1,4 @@
+CREATE TABLE `email_validation` (
+	`id` text PRIMARY KEY NOT NULL,
+	`timestamp` integer NOT NULL
+);

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/0004_snapshot.json

@@ -0,0 +1,335 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "b6acf5d6-d8df-4308-8d4d-55c25741cc4f",
+  "prevId": "a1a7b478-d0c3-4fc6-b74a-1a010c1d8ca1",
+  "tables": {
+    "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/0005_snapshot.json

@@ -0,0 +1,359 @@
+{
+  "version": "6",
+  "dialect": "sqlite",
+  "id": "a2731c1f-4150-4423-946e-670d794f8961",
+  "prevId": "b6acf5d6-d8df-4308-8d4d-55c25741cc4f",
+  "tables": {
+    "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/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

@@ -29,6 +29,69 @@
       "when": 1731344368953,
       "tag": "0003_cultured_skaar",
       "breakpoints": true
+    },
+    {
+      "idx": 4,
+      "version": "6",
+      "when": 1732722840534,
+      "tag": "0004_ancient_thunderball",
+      "breakpoints": true
+    },
+    {
+      "idx": 5,
+      "version": "6",
+      "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
     }
   ]
 }

error.vue

@@ -14,12 +14,12 @@
 </template>
 
 <script setup lang="ts">
-import type { NuxtError } from '#app'
+import type { NuxtError } from '#app';
 import { Icon } from '@iconify/vue/dist/iconify.js';
 
 const props = defineProps({
   error: Object as () => NuxtError
-})
+});
 
-const handleError = () => clearError({ redirect: '/' })
+const handleError = () => clearError({ redirect: '/' });
 </script>

layouts/default.vue

@@ -1,97 +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="flex items-center px-2">
+        <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 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>
-			</div>
-			<div class="flex items-center px-2">
-				<Tooltip message="Changer de theme" side="left"><ThemeSwitch /></Tooltip>
-				<Tooltip v-if="!loggedIn" :message="'Se connecter'" side="right">
-					<div class="hover:border-opacity-70 flex">
-						<Icon :icon="'radix-icons:person'" class="w-7 h-7 p-1" />
-					</div>
-				</Tooltip>
-				<Tooltip v-else :message="'Mon profil'" side="right">
-					<DropdownMenu :options="[{
-							type: 'item',
-							label: 'Mon profil',
-							icon: 'radix-icons:avatar',
-							select: () => useRouter().push({ name: 'user-profile' }),
-						}, {
-							type: 'item',
-							label: 'Deconnexion',
-							icon: 'radix-icons:close',
-							select: () => clear(),
-						}]" side="right" align="start">
-						<div class="hover:border-opacity-70 flex">
-							<Icon :icon="'radix-icons:avatar'" class="w-7 h-7 p-1" />
-						</div>
-					</DropdownMenu>
-				</Tooltip>
-			</div>
-        </div>
-        <div class="flex flex-1 flex-row relative h-screen overflow-hidden">
-			<CollapsibleContent asChild forceMount>
-				<div class="bg-light-0 md:py-11 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] py-8 max-md:z-40 max-md:data-[state=open]:left-0">
-					<div class="relative bottom-6 flex flex-col gap-4 xl:px-6 px-3">
-						<div class="flex justify-between items-center max-md:hidden">
-							<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 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 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>
-								</Tooltip>
-								<Tooltip v-else :message="'Mon profil'" side="right">
-									<DropdownMenu :options="[{
-											type: 'item',
-											label: 'Mon profil',
-											select: () => useRouter().push({ name: 'user-profile' }),
-										}, {
-											type: 'item',
-											label: 'Deconnexion',
-											select: () => clear(),
-										}]" 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" />
+			<NavigationMenuRoot class="relative">
+				<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>
-									</DropdownMenu>
-								</Tooltip>
+			</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 w-screen overflow-hidden">
+			<CollapsibleContent asChild forceMount>
+				<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-1 px-2 max-w-full max-h-full overflow-y-auto overflow-x-hidden">
+						<div v-if="user" class="flex flex-1 py-4 px-2 flex-row flex-1 justify-between items-center">
+							<NuxtLink v-if="hasPermissions(user.permissions, ['admin', 'editor'])" :to="{ name: 'explore-edit' }"><Button icon><Icon icon="radix-icons:pencil-2" /></Button></NuxtLink>
 						</div>
-					<div class="flex-1 xl:px-6 px-3 max-w-full max-h-full overflow-y-auto overflow-x-hidden">
-						<NuxtLink :href="{ name: 'explore' }" no-prefetch 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">
-							<div class="pl-3 py-1 flex-1 truncate">Projet</div>
-						</NuxtLink>
-						<Tree v-if="pages" v-model="pages" :getKey="(item) => item.path">
+						<Tree v-if="pages" v-model="pages" :getKey="(item) => item.path" class="ps-4">
 							<template #default="{ item, isExpanded }">
-								<NuxtLink :href="item.value.path && !item.hasChildren ? { name: 'explore-path', params: { path: item.value.path } } : undefined" no-prefetch 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">
-									<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` }" />
+								<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 / 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 text-start text-xs text-light-60 dark:text-dark-60 relative top-4">
+					<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>
@@ -102,11 +72,26 @@
 
 <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.utils';
+import { iconByType } from '#shared/general.util';
+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',
+	label: 'Mon profil',
+	select: () => useRouter().push({ name: 'user-profile' }),
+}, {
+	type: 'item',
+	label: 'Deconnexion',
+	select: () => clear(),
+}]);
 
 const open = ref(false);
-const { loggedIn, clear } = useUserSession();
+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);
@@ -115,13 +100,10 @@ watch(route, () => {
 	open.value = false;
 });
 
-const { data: pages } = await useLazyFetch('/api/navigation', {
-	transform: transform,
-	watch: [useRouter().currentRoute]
-});
-
-function transform(list: NavigationTreeItem[] | undefined): NavigationTreeItem[] | undefined
+const { tree } = useContent();
+const pages = computed(() => transform(tree.value));
+function transform(list: TreeItem[] | undefined): TreeItem[] | 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>

layouts/null.vue

@@ -0,0 +1,3 @@
+<template>
+    <slot></slot>
+</template>

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,15 +1,18 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 import vuePlugin from 'rollup-plugin-vue'
-import postcssPlugin from 'rollup-plugin-postcss'
+import fs from 'node:fs'
+import path from 'node:path'
 
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
+  ssr: false,
   modules: [
     '@nuxtjs/color-mode',
     'nuxt-security',
     '@nuxtjs/tailwindcss',
     '@vueuse/nuxt',
     'radix-vue/nuxt',
+    '@nuxtjs/sitemap',
   ],
   tailwindcss: {
     viewer: false,
@@ -54,14 +57,14 @@ export default defineNuxtConfig({
           current: 'currentColor',
           light: {
             red: '#e93147',
-            redBack: '#F9C7CD',
-            orange: '#ec7500',
-            yellow: '#e0ac00',
-            green: '#08b94e',
-            greenBack: '#BCECCF',
+            orange: '#FF9800',
+            yellow: '#FFEB3B',
+            green: '#388E3C',
+            indigo: '#7986CB',
             cyan: '#00bfbc',
+            lime: '#8BC34A',
             blue: '#086ddd',
-            purple: '#7852ee',
+            purple: '#AB47BC',
             pink: '#d53984',
             0: "#ffffff",
             5: "#fcfcfc",
@@ -101,8 +104,8 @@ export default defineNuxtConfig({
             100: '#dadada',
           },
           accent: {
-            purple: '#8a5cf5',
-            blue: '#53aaf5',
+            purple: '#43A047',
+            blue: '#26C6DA',
           },
         }
       }
@@ -117,25 +120,17 @@ export default defineNuxtConfig({
       path: '~/components',
       pathPrefix: false,
     },
-    {
-      path: '~/server/components',
-      pathPrefix: true,
-      global: true,
-    },
   ],
   nitro: {
-    alias: {
-      'public': '//public',
-    },
-    publicAssets: [{
-      baseURL: 'public',
-      dir: 'public',
-    }],
     preset: 'bun',
     experimental: {
       tasks: true,
     },
+    watchOptions: {
+      usePolling: true,
+    },
     rollupConfig: {
+      external: ['bun'],
       plugins: [
         vuePlugin({ include: /\.vue$/, target: 'node' })
       ]
@@ -143,12 +138,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: '',
@@ -158,9 +155,49 @@ export default defineNuxtConfig({
     rateLimiter: false,
     headers: {
       contentSecurityPolicy: {
-        "img-src": "'self' data: blob:"
+        "img-src": "'self' data: blob:",
+        "base-uri": "localhost:*"
       }
     },
     xssValidator: false,
   },
+  sitemap: {
+    exclude: ['/admin/**', '/explore/edit', '/user/mailvalidated', '/user/changing-password', '/user/reset-password'],
+    sources: ['/api/__sitemap__/urls']
+  },
+  experimental: {
+    buildCache: true,
+    componentIslands: {
+      selectiveClient: true,
+    },
+    defaults: {
+      nuxtLink: {
+        prefetchOn: {
+          interaction: false,
+          visibility: false,
+        }
+      }
+    }
+  },
+  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'),
+    }
+  },
+  devtools: {
+    enabled: false,
+  },
+  vite: {
+    server: {
+      watch: {
+        usePolling: true,
+      }
+    }
+  },
+  watchers: {
+    chokidar: {
+      usePolling: true,
+    }
+  }
 })

package.json

@@ -3,49 +3,56 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "predev": "bun i && bunx nuxi cleanup",
-    "dev": "bunx --bun nuxi dev"
+    "predev": "bun i",
+    "dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 bunx --bun nuxi dev --no-f"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@iconify/vue": "^4.1.2",
+    "@atlaskit/pragmatic-drag-and-drop": "^1.7.4",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
+    "@codemirror/lang-markdown": "^6.3.3",
+    "@iconify/vue": "^4.3.0",
+    "@lezer/highlight": "^1.2.1",
+    "@markdoc/markdoc": "^0.5.2",
     "@nuxtjs/color-mode": "^3.5.2",
-    "@nuxtjs/tailwindcss": "^6.12.2",
+    "@nuxtjs/sitemap": "^7.4.2",
+    "@nuxtjs/tailwindcss": "^6.13.1",
     "@vueuse/gesture": "^2.0.0",
-    "@vueuse/math": "^11.2.0",
-    "@vueuse/nuxt": "^11.1.0",
-    "codemirror": "^6.0.1",
-    "drizzle-orm": "^0.35.3",
+    "@vueuse/math": "^13.4.0",
+    "@vueuse/nuxt": "^13.4.0",
+    "codemirror": "^6.0.2",
+    "drizzle-orm": "^0.44.2",
     "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",
-    "nodemailer": "^6.9.16",
-    "nuxt": "^3.14.159",
-    "nuxt-security": "^2.0.0",
-    "radix-vue": "^1.9.8",
+    "mdast-util-find-and-replace": "^3.0.2",
+    "nodemailer": "^7.0.3",
+    "nuxt": "3.17.5",
+    "nuxt-security": "^2.2.0",
+    "radix-vue": "^1.9.17",
     "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",
+    "remark-rehype": "^11.1.2",
     "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-router": "latest",
-    "zod": "^3.23.8"
+    "vue": "^3.5.17",
+    "vue-router": "^4.5.1",
+    "zod": "^3.25.67"
   },
   "devDependencies": {
-    "@types/bun": "^1.1.12",
+    "@types/bun": "^1.2.17",
     "@types/lodash.capitalize": "^4.2.9",
-    "@types/nodemailer": "^6.4.16",
+    "@types/nodemailer": "^6.4.17",
     "@types/unist": "^3.0.3",
-    "better-sqlite3": "^11.5.0",
-    "bun-types": "^1.1.34",
-    "drizzle-kit": "^0.26.2",
+    "better-sqlite3": "^12.1.1",
+    "bun-types": "^1.2.17",
+    "drizzle-kit": "^0.31.4",
     "mdast-util-to-string": "^4.0.0",
     "rehype-stringify": "^10.0.1"
   }

pages/admin/index.vue

@@ -1,65 +1,159 @@
 <script lang="ts">
-const mailSchema = z.object({
-    to: z.string().email(),
-    template: z.string(),
-    data: z.string(),
-});
+/**
+ * Format bytes as human-readable text.
+ * 
+ * @param bytes Number of bytes.
+ * @param si True to use metric (SI) units, aka powers of 1000. False to use 
+ *           binary (IEC), aka powers of 1024.
+ * @param dp Number of decimal places to display.
+ * 
+ * @return Formatted string.
+ */
+ function textualFileSize(bytes: number, si: boolean = false, dp: number = 2) {
+  const thresh = si ? 1000 : 1024;
 
-const schemaList: Record<string, z.ZodObject<any> | null> = {
-    'pull': null,
-    'push': null,
-    'mail': mailSchema,
+  if (Math.abs(bytes) < thresh) {
+    return bytes + ' B';
+  }
+
+  const units = ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  let u = -1;
+  const r = 10**dp;
+
+  do {
+    bytes /= thresh;
+    ++u;
+  } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+
+
+  return bytes.toFixed(dp) + ' ' + units[u];
 }
 </script>
 
 <script setup lang="ts">
-import { z } from 'zod';
+import { format, iconByType } from '~/shared/general.util';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+
+interface File
+{
+    path: string;
+    owner: number;
+    title: string;
+    type: "file" | "canvas" | "markdown" | 'folder';
+    size: number;
+    navigable: boolean;
+    private: boolean;
+    order: number;
+    visit: number;
+    timestamp: string;
+}
+interface User
+{
+    id: number;
+    username: string;
+    state: number;
+    session: {
+        id: number;
+    }[];
+    data: {
+        id: number;
+        signin: string;
+        lastTimestamp: string;
+        logCount: number;
+    };
+    permission: string[];
+}
 
 definePageMeta({
     rights: ['admin'],
-})
-const job = ref<string>('');
+});
 
 const toaster = useToast();
-const payload = reactive<Record<string, any>>({
-    data: JSON.stringify({ username: "Peaceultime", id: 1, timestamp: Date.now() }),
-    to: 'clem31470@gmail.com',
-});
-const data = ref(), status = ref<'idle' | 'pending' | 'success' | 'error'>('idle'), success = ref(false), error = ref<Error | null>();
-async function fetch()
-{
-    status.value = 'pending';
-    data.value = null;
-    error.value = null;
-    success.value = false;
 
+const { data: users } = useFetch('/api/admin/users', {
+    transform: (users) => { 
+        //@ts-ignore
+        users.forEach(e => e.permission = e.permission.map(p => p.permission)); 
+        //@ts-ignore
+        return users as User[];
+    },
+});
+const { data: pages } = useFetch('/api/admin/pages');
+
+const sorter = ref<((a: File, b: File) => number) | null>(null);
+const sortField = ref<keyof File | null>(null), sortOrder = ref<null | 'asc' | 'desc'>('asc');
+const sortedPage = ref([...pages.value ?? []]);
+
+const permissionCopy = ref<string[]>([]);
+
+watch([sortField, sortOrder, sorter], () => {
+    sortedPage.value = (sorter.value === null ? ([...pages.value ?? []]) : sortedPage.value.sort(sorter.value))
+}, {
+    immediate: true,
+});
+
+function sort(field: keyof File, type: 'string' | 'number')
+{
+    if(sortField.value === field)
+    {
+        if(sortOrder.value === 'asc')
+        {
+            sortOrder.value = 'desc';
+            sorter.value = type === 'string' ? (a: File, b: File) => (b[field] as string).localeCompare(a[field] as string) : (a: File, b: File) => (b[field] as number) - (a[field] as number);
+        }
+        else
+        {
+            sortOrder.value = null;
+            sortField.value = null;
+            sorter.value = null;
+        }
+    }
+    else
+    {
+        sortField.value = field;
+        sortOrder.value = 'asc';
+        sorter.value = type === 'string' ? (a: File, b: File) => (a[field] as string).localeCompare(b[field] as string) : (a: File, b: File) => (a[field] as number) - (b[field] as number);
+    }
+}
+async function editPermissions(user: User)
+{
     try
     {
-        const schema = schemaList[job.value];
-
-        if(schema)
-        {
-            console.log(payload);
-            const parsedPayload = schema.parse(payload);
-        }
-
-        data.value = await $fetch(`/api/admin/jobs/${job.value}`, {
+        await $fetch(`/api/admin/user/${user.id}/permissions`, {
             method: 'POST',
-            body: payload,
+            body: permissionCopy.value,
+        });
+        user.permission = permissionCopy.value;
+        toaster.add({
+            duration: 10000, type: 'success', content: 'Permissions mises à jour.', timer: true,
         });
-        status.value = 'success';
-        error.value = null;
-        success.value = true;
-
-        toaster.add({ duration: 10000, content: data.value ?? 'Job executé avec succès', type: 'success', timer: true, });
     }
     catch(e)
     {
-        status.value = 'error';
-        error.value = e as Error;
-        success.value = false;
+        toaster.add({
+            duration: 10000, type: 'error', content: (e as any).message, timer: true,
+        });
+    }
+}
+async function logout(user: User)
+{
+    try
+    {
+        await $fetch(`/api/admin/user/${user.id}/logout`, {
+            method: 'POST',
+        });
 
-        toaster.add({ duration: 10000, content: error.value.message, type: 'error', timer: true, });
+        user.session.length = 0;
+        
+        toaster.add({
+            duration: 10000, type: 'success', content: 'L\'utilisateur vient d\'être déconnecté.', timer: true,
+        });
+    }
+    catch(e)
+    {
+        toaster.add({
+            duration: 10000, type: 'error', content: (e as any).message, timer: true,
+        });
     }
 }
 </script>
@@ -68,22 +162,115 @@ async function fetch()
     <Head>
         <Title>d[any] - Administration</Title>
     </Head>
-    <div class="flex flex-col justify-start items-center">
-        <ProseH2>Administration</ProseH2>
-        <div class="flex flex-row w-full gap-8">
-            <Select label="Job" v-model="job">
-                <SelectItem label="Récupérer les données d'Obsidian" value="pull" />
-                <SelectItem label="Envoyer les données dans Obsidian" value="push" disabled />
-                <SelectItem label="Envoyer un mail de test" value="mail" />
-            </Select>
-            <Select v-if="job === 'mail'" v-model="payload.template" label="Modèle" class="w-full" ><SelectItem label="Inscription" value="registration" /></Select>
+    <div class="flex flex-1 flex-col p-4">
+        <div class="flex flex-row justify-between items-center">
+            <ProseH2 class="text-center flex-1">Administration</ProseH2>
+            <Button><NuxtLink :to="{ name: 'admin-jobs' }">Jobs</NuxtLink></Button>
+        </div>
+        <div class="flex flex-1 w-full justify-center items-stretch flex-row gap-4">
+            <div class="flex-1">
+                <Collapsible v-if=users :label="`Utilisateurs (${users.length})`">
+                    <div class="flex flex-1 mt-2">
+                        <table class="border-collapse">
+                            <thead>
+                                <tr>
+                                    <th class="border border-light-35 dark:border-dark-35 px-2 py-1">Utilisateur</th>
+                                    <th class="border border-light-35 dark:border-dark-35 px-2 py-1">Inscription</th>
+                                    <th class="border border-light-35 dark:border-dark-35 px-2 py-1">Dernière connexion</th>
+                                    <th class="border border-light-35 dark:border-dark-35 px-2 py-1">Mail</th>
+                                    <th class="border border-light-35 dark:border-dark-35 px-2 py-1">Sessions</th>
+                                    <th class="border border-light-35 dark:border-dark-35 px-2 py-1">Permissions</th>
+                                </tr>
+                            </thead>
+                            <tbody class="font-normal">
+                                <tr v-for="user in users">
+                                    <td class="border border-light-35 dark:border-dark-35 px-2 py-1 max-w-32 truncate"><NuxtLink :to="{ name: 'user-id', params: { id: user.id } }" class="hover:text-accent-purple font-bold" :title="user.username">{{ user.username }}</NuxtLink></td>
+                                    <td class="border border-light-35 dark:border-dark-35 px-2 py-1 text-sm text-light-70 dark:text-dark-70 text-center">{{ format(new Date(user.data.signin), 'dd/MM/yyyy') }}</td>
+                                    <td class="border border-light-35 dark:border-dark-35 px-2 py-1 text-sm text-light-70 dark:text-dark-70 text-center">{{ format(new Date(user.data.lastTimestamp), 'dd/MM/yyyy HH:mm:ss') }}</td>
+                                    <td class="border border-light-35 dark:border-dark-35 px-2 py-1 text-center"><Icon :class="{ 'text-light-red dark:text-dark-red': user.state === 0, 'text-light-green dark:text-dark-green': user.state !== 0 }" :icon="user.state === 0 ? `radix-icons:cross-2` : `radix-icons:check`" /></td>
+                                    <td class="border border-light-35 dark:border-dark-35 px-2 py-1">
+                                        <DialogRoot>
+                                            <DialogTrigger asChild><span class="text-accent-blue hover:text-accent-purple font-bold cursor-pointer">{{ user.session.length }}</span></DialogTrigger>
+                                            <DialogPortal>
+                                                <DialogOverlay class="bg-light-0 dark:bg-dark-0 opacity-70 fixed inset-0 z-40" />
+                                                <DialogContent
+                                                    class="data-[state=open]:animate-contentShow fixed top-[50%] left-[50%] max-h-[85vh] w-[90vw] max-w-[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">
+                                                    <DialogTitle class="text-3xl font-light relative -top-2">Deconnecter l'utilisateur ?
+                                                    </DialogTitle>
+                                                    <div class="flex flex-1 justify-end gap-4">
+                                                        <DialogClose asChild><Button>Non</Button></DialogClose>
+                                                        <DialogClose asChild><Button @click="() => logout(user)" class="border-light-green dark:border-dark-green hover:border-light-green dark:hover:border-dark-green hover:bg-light-greenBack dark:hover:bg-dark-greenBack text-light-green dark:text-dark-green focus:shadow-light-green dark:focus:shadow-dark-green">Oui</Button></DialogClose>
+                                                    </div>
+                                                </DialogContent>
+                                            </DialogPortal>
+                                        </DialogRoot>
+                                    </td>
+                                    <td class="border border-light-35 dark:border-dark-35 px-2 py-1">
+                                        <AlertDialogRoot>
+                                            <AlertDialogTrigger asChild><span class="text-accent-blue hover:text-accent-purple font-bold" @click="permissionCopy = [...user.permission]">{{ user.permission.length }}</span></AlertDialogTrigger>
+                                            <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">Permissions de {{ user.username }}</AlertDialogTitle>
+                                                    <AlertDialogDescription><TagsInput v-model="permissionCopy" /></AlertDialogDescription>
+                                                    <div class="flex flex-1 justify-end gap-4">
+                                                        <AlertDialogCancel asChild><Button>Annuler</Button></AlertDialogCancel>
+                                                        <AlertDialogAction asChild><Button @click="() => editPermissions(user)" class="border-light-green dark:border-dark-green hover:border-light-green dark:hover:border-dark-green hover:bg-light-greenBack dark:hover:bg-dark-greenBack text-light-green dark:text-dark-green focus:shadow-light-green dark:focus:shadow-dark-green">Modifier</Button></AlertDialogAction>
+                                                    </div>
+                                                </AlertDialogContent>
+                                            </AlertDialogPortal>
+                                        </AlertDialogRoot>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </Collapsible>
+            </div>
+            <div class="flex-1">
+                <Collapsible v-if=pages :label="`Pages (${pages.length})`">
+                    <div class="flex flex-1 mt-2">
+                        <table class="border-collapse">
+                            <thead>
+                                <tr>
+                                    <th class="border border-light-35 dark:border-dark-35 px-2 py-1"><div class="flex justify-center items-center gap-2"><span>Page</span><span @click="() => sort('title', 'string')"><Icon :icon="sortField === 'title' ? sortOrder === 'asc' ? 'radix-icons:chevron-down' : 'radix-icons:chevron-up' : 'radix-icons:caret-sort'" /></span></div></th>
+                                    <th class="border border-light-35 dark:border-dark-35 px-2 py-1"><div class="flex justify-center items-center gap-2"><span>Type</span></div></th>
+                                    <th class="border border-light-35 dark:border-dark-35 px-2 py-1"><div class="flex justify-center items-center gap-2"><span>Propriétaire</span><span @click="() => sort('owner', 'number')"><Icon :icon="sortField === 'owner' ? sortOrder === 'asc' ? 'radix-icons:chevron-down' : 'radix-icons:chevron-up' : 'radix-icons:caret-sort'" /></span></div></th>
+                                    <th class="border border-light-35 dark:border-dark-35 px-2 py-1"><div class="flex justify-center items-center gap-2"><span>Status</span></div></th>
+                                    <th class="border border-light-35 dark:border-dark-35 px-2 py-1"><div class="flex justify-center items-center gap-2"><span>Taille</span><span @click="() => sort('size', 'number')"><Icon :icon="sortField === 'size' ? sortOrder === 'asc' ? 'radix-icons:chevron-down' : 'radix-icons:chevron-up' : 'radix-icons:caret-sort'" /></span></div></th>
+                                    <th class="border border-light-35 dark:border-dark-35 px-2 py-1"><div class="flex justify-center items-center gap-2"><span>Visites</span><span @click="() => sort('visit', 'number')"><Icon :icon="sortField === 'visit' ? sortOrder === 'asc' ? 'radix-icons:chevron-down' : 'radix-icons:chevron-up' : 'radix-icons:caret-sort'" /></span></div></th>
+                                    <th class="border border-light-35 dark:border-dark-35 px-2 py-1"><div class="flex justify-center items-center gap-2"><span>Actions</span></div></th>
+                                </tr>
+                            </thead>
+                            <tbody class="font-normal">
+                                <DialogRoot>
+                                    <tr v-for="page in sortedPage" :id="page.path">
+                                        <td class="border border-light-35 dark:border-dark-35 px-2 py-1 max-w-48 truncate"><NuxtLink :to="{ name: 'explore-path', params: { path: page.path } }" class="hover:text-accent-purple font-bold" :title="page.title">{{ page.title }}</NuxtLink></td>
+                                        <td class="border border-light-35 dark:border-dark-35 px-2 py-1"><Icon :icon="iconByType[page.type]" /></td>
+                                        <td class="border border-light-35 dark:border-dark-35 px-2 py-1 text-sm text-light-70 dark:text-dark-70 text-center max-w-32 truncate"><span :title=" users?.find(e => e.id === page.owner)?.username ?? 'Inconnu'">{{ users?.find(e => e.id === page.owner)?.username ?? "Inconnu" }}</span></td>
+                                        <td class="border border-light-35 dark:border-dark-35 px-2 py-1 ">
+                                            <div class="flex gap-2 justify-center">
+                                                <span>
+                                                    <Icon v-if="page.private" icon="radix-icons:lock-closed" />
+                                                    <Icon v-else class="text-light-50 dark:text-dark-50" icon="radix-icons:lock-open-2" />
+                                                </span>
+                                                <span>
+                                                    <Icon v-if="page.navigable" icon="radix-icons:eye-open" />
+                                                    <Icon v-else class="text-light-50 dark:text-dark-50" icon="radix-icons:eye-none" />
+                                                </span>
+                                            </div>
+                                        </td>
+                                        <td class="border border-light-35 dark:border-dark-35 px-2 py-1 text-center">{{ textualFileSize(page.size) }}</td>
+                                        <td class="border border-light-35 dark:border-dark-35 px-2 py-1 text-center">{{ page.visit }}</td>
+                                        <td class="border border-light-35 dark:border-dark-35 px-2 py-1 text-center"><div class="flex justify-center items-center"><NuxtLink :to="{ name: 'explore-edit', hash: '#' + page.path }"><Icon icon="radix-icons:pencil-1" /></NuxtLink></div></td>
+                                    </tr>
+                                </DialogRoot>
+                            </tbody>
+                        </table>
+                    </div>
+                </Collapsible>
             </div>
-        <div v-if="job === 'mail'" class="flex justify-center items-center flex-col">
-            <TextInput label="Destinataire" class="w-full" v-model="payload.to" />
-            <textarea v-model="payload.data" class="w-[640px] bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 outline-none m-2 px-2"></textarea>
         </div>
-        <Button class="self-center" @click="() => !!job && fetch()" :loading="status === 'pending'">
-            <span>Executer</span>
-        </Button>
     </div>
 </template>

pages/admin/jobs.vue

@@ -0,0 +1,92 @@
+<script lang="ts">
+const mailSchema = z.object({
+    to: z.string().email(),
+    template: z.string(),
+    data: z.string(),
+});
+
+const schemaList: Record<string, z.ZodObject<any> | null> = {
+    'pull': null,
+    'push': null,
+    'mail': mailSchema,
+}
+</script>
+
+<script setup lang="ts">
+import { z } from 'zod';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+
+definePageMeta({
+    rights: ['admin'],
+})
+const job = ref<string>('');
+
+const toaster = useToast();
+const payload = reactive<Record<string, any>>({
+    data: JSON.stringify({ username: "Peaceultime", id: 1, timestamp: Date.now() }),
+    to: 'clem31470@gmail.com',
+});
+const data = ref(), status = ref<'idle' | 'pending' | 'success' | 'error'>('idle'), success = ref(false), error = ref<Error | null>();
+async function fetch()
+{
+    status.value = 'pending';
+    data.value = null;
+    error.value = null;
+    success.value = false;
+
+    try
+    {
+        const schema = schemaList[job.value];
+
+        if(schema)
+        {
+            const parsedPayload = schema.parse(payload);
+        }
+
+        data.value = await $fetch(`/api/admin/jobs/${job.value}`, {
+            method: 'POST',
+            body: payload,
+        });
+        status.value = 'success';
+        error.value = null;
+        success.value = true;
+
+        toaster.add({ duration: 10000, content: data.value ?? 'Job executé avec succès', type: 'success', timer: true, });
+    }
+    catch(e)
+    {
+        status.value = 'error';
+        error.value = e as Error;
+        success.value = false;
+
+        toaster.add({ duration: 10000, content: error.value.message, type: 'error', timer: true, });
+    }
+}
+</script>
+
+<template>
+    <Head>
+        <Title>d[any] - Administration</Title>
+    </Head>
+    <div class="flex flex-col justify-start items-center p-4">
+        <div class="flex flex-row justify-between items-center gap-8">
+            <span class="border border-transparent hover:border-light-35 dark:hover:border-dark-35 p-1 cursor-pointer" @click="() => $router.go(-1)"><Icon icon="radix-icons:arrow-left" class="text-light-50 dark:text-dark-50 w-6 h-6"/></span>
+            <ProseH2 class="text-center flex-1">Administration</ProseH2>
+        </div>
+        <div class="flex flex-row w-full gap-8">
+            <Select label="Job" v-model="job">
+                <SelectItem label="Récupérer les données d'Obsidian" value="pull" />
+                <SelectItem label="Envoyer les données dans Obsidian" value="push" disabled />
+                <SelectItem label="Envoyer un mail de test" value="mail" />
+            </Select>
+            <Select v-if="job === 'mail'" v-model="payload.template" label="Modèle" class="w-full" ><SelectItem label="Inscription" value="registration" /></Select>
+        </div>
+        <div v-if="job === 'mail'" class="flex justify-center items-center flex-col">
+            <TextInput label="Destinataire" class="w-full" v-model="payload.to" />
+            <textarea v-model="payload.data" class="w-[640px] bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 outline-none m-2 px-2"></textarea>
+        </div>
+        <Button class="self-center" @click="() => !!job && fetch()" :loading="status === 'pending'">
+            <span>Executer</span>
+        </Button>
+    </div>
+</template>

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

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import characterConfig from '#shared/character-config.json';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import { CharacterBuilder, defaultCharacter } from '~/shared/character';
+import type { Character, CharacterConfig } from '~/types/character';
+
+const stepTexts: Record<number, string> = {
+    0: 'Choisissez un peuple afin de définir la progression de votre personnage au fil des niveaux.',
+    1: 'Déterminez la progression de votre personnage en choisissant une option par niveau disponible.',
+    2: 'Spécialisez votre personnage en attribuant vos points d\'entrainement parmi les 7 branches disponibles.\nChaque paliers de 3 points augmentent votre modifieur.',
+    3: 'Diversifiez vos possibilités en affectant vos points dans les différentes compétences disponibles.',
+    4: 'Déterminez l\'Aspect qui vous corresponds et benéficiez de puissants bonus.'
+};
+
+definePageMeta({
+    guestsGoesTo: '/user/login',
+});
+let id = useRouter().currentRoute.value.params.id;
+const { add } = useToast();
+const config = characterConfig as CharacterConfig;
+const data = ref<Character>({ ...defaultCharacter });
+const builder = markRaw(new CharacterBuilder(data.value));
+
+const step = ref(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);
+}
+
+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')
+    {
+        //@ts-ignore
+        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
+    {
+        //@ts-ignore
+        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-1 max-w-full flex-col align-center">
+        <StepperRoot class="flex flex-1 flex-col justify-start items-center px-8 w-full h-full overflow-y-hidden" v-model="step">
+            <div class="flex w-full flex-row gap-4 items-center justify-between px-4 bg-light-0 dark:bg-dark-0 z-20">
+                <div></div>
+                <div class="flex w-full flex-row gap-4 items-center justify-center relative">
+                    <StepperItem :step="0" class="group"><StepperTrigger class="px-2 py-1 border-b border-transparent hover:border-accent-blue group-data-[state=active]:text-accent-blue">Peuples</StepperTrigger></StepperItem>
+                    <StepperItem :disabled="data.people === undefined" :step="1" class="group flex items-center"><Icon icon="radix-icons:chevron-right" class="w-6 h-6 group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" /><StepperTrigger class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent group-data-[state=active]:text-accent-blue">Niveaux</StepperTrigger></StepperItem>
+                    <StepperItem :disabled="data.people === undefined" :step="2" class="group flex items-center"><Icon icon="radix-icons:chevron-right" class="w-6 h-6 group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" /><StepperTrigger class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent group-data-[state=active]:text-accent-blue">Entrainement</StepperTrigger></StepperItem>
+                    <StepperItem :disabled="data.people === undefined" :step="3" class="group flex items-center"><Icon icon="radix-icons:chevron-right" class="w-6 h-6 group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" /><StepperTrigger class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent group-data-[state=active]:text-accent-blue">Compétences</StepperTrigger></StepperItem>
+                    <StepperItem :disabled="data.people === undefined" :step="4" class="group flex items-center"><Icon icon="radix-icons:chevron-right" class="w-6 h-6 group-data-[disabled]:text-light-50 dark:group-data-[disabled]:text-dark-50 group-data-[disabled]:hover:border-transparent me-4" /><StepperTrigger class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent group-data-[state=active]:text-accent-blue">Aspect</StepperTrigger></StepperItem>
+                </div>
+                <div>
+                    <Tooltip class="max-w-96" side="bottom" align="end" :message="stepTexts[step]"><Icon icon="radix-icons:question-mark-circled" class="w-5 h-5" /></Tooltip>
+                </div>
+            </div>
+            <div class="flex-1 outline-none max-w-full w-full overflow-y-auto" v-show="step === 0">
+                <PeopleSelector v-model="builder" :config="config" @next="step = 1" />
+            </div>
+            <div class="flex-1 outline-none max-w-full w-full overflow-y-auto" v-show="step === 1">
+                <LevelEditor v-model="builder" :config="config" @next="step = 2" />
+            </div>
+            <!-- <div class="flex-1 outline-none max-w-full w-full h-full max-h-full overflow-y-auto" v-show="step === 2">
+                <TrainingEditor v-model="builder" :config="config" @next="step = 3" />
+            </div>
+            <div class="flex-1 outline-none max-w-full w-fulloverflow-y-auto" v-show="step === 3">
+                <AbilityEditor v-model="builder" :config="config" @next="step = 4" />
+            </div>
+            <div class="flex-1 outline-none max-w-full w-full overflow-y-auto" v-show="step === 4">
+                <AspectSelector v-model="builder" :config="config" @next="save(true)" />
+            </div> -->
+        </StepperRoot>
+    </div>
+</template>

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

@@ -0,0 +1,193 @@
+<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 { clamp } from '~/shared/general.util';
+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`);
+
+/*
+text-light-red dark:text-dark-red border-light-red dark:border-dark-red bg-light-red dark:bg-dark-red
+text-light-blue dark:text-dark-blue border-light-blue dark:border-dark-blue bg-light-blue dark:bg-dark-blue
+text-light-yellow dark:text-dark-yellow border-light-yellow dark:border-dark-yellow bg-light-yellow dark:bg-dark-yellow
+text-light-orange dark:text-dark-orange border-light-orange dark:border-dark-orange bg-light-orange dark:bg-dark-orange
+text-light-indigo dark:text-dark-indigo border-light-indigo dark:border-dark-indigo bg-light-indigo dark:bg-dark-indigo
+text-light-lime dark:text-dark-lime border-light-lime dark:border-dark-lime bg-light-lime dark:bg-dark-lime
+text-light-green dark:text-dark-green border-light-green dark:border-dark-green bg-light-green dark:bg-dark-green
+text-light-yellow dark:text-dark-yellow border-light-yellow dark:border-dark-yellow bg-light-yellow dark:bg-dark-yellow
+text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-purple bg-light-purple dark:bg-dark-purple
+*/
+</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 flex-col 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.health }}/{{ 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-10 grid-cols-1 gap-4 items-center border-b border-light-30 dark:border-dark-30 me-4 pe-4">
+                <div class="flex relative justify-between ps-4 gap-2 2xl:col-span-6">
+                    <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 flex-1 relative 2xl:border-l border-light-30 dark:border-dark-30 ps-4 2xl:col-span-4 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>
+                    <Icon icon="ph:shield-checkered" class="w-8 h-8" />
+                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">{{ clamp(character.defense.static + character.defense.passivedodge + character.defense.passiveparry, 0, character.defense.hardcap) }}</span><span class="text-sm 2xl:text-base">Passive</span></div>
+                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">{{ clamp(character.defense.static + character.defense.passivedodge + character.defense.activeparry, 0, character.defense.hardcap) }}</span><span class="text-sm 2xl:text-base">Blocage</span></div>
+                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">{{ clamp(character.defense.static + character.defense.activedodge + character.defense.passiveparry, 0, character.defense.hardcap) }}</span><span class="text-sm 2xl:text-base">Esquive</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">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 relative px-4 gap-4">
+                        <TabsIndicator class="absolute 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" class="border !border-opacity-50 rounded-full !bg-opacity-20 px-2 py-px">{{ 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/character/manage.client.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import characterConfig from '#shared/character-config.json';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+import type { CharacterConfig } from '~/types/character';
+
+//@ts-ignore
+const config = ref<CharacterConfig>(characterConfig);
+
+function copy()
+{
+    navigator.clipboard.writeText(JSON.stringify(config.value));
+}
+</script>
+
+<template>
+    <Head>
+        <Title>d[any] - Edition de données</Title>
+    </Head>
+    <TabsRoot class="flex flex-1 max-w-full flex-col gap-8 justify-start items-center px-8 w-full" default-value="training">
+        <TabsList class="flex flex-row gap-4 self-center relative px-4">
+            <TabsIndicator class="absolute 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="peoples" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Peuples</TabsTrigger>
+            <TabsTrigger value="training" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Entrainement</TabsTrigger>
+            <TabsTrigger value="abilities" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Compétences</TabsTrigger>
+            <TabsTrigger value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Sorts</TabsTrigger>
+            <Tooltip message="Copier le JSON" side="right"><Button icon @click="copy" class="p-2"><Icon icon="radix-icons:clipboard-copy" /></Button></Tooltip>
+        </TabsList>
+        <div class="flex-1 outline-none max-w-full w-full">
+            <TabsContent value="peoples">
+            </TabsContent>
+            <TabsContent value="training">
+                <TrainingConfigEditor :config="config" />
+            </TabsContent>
+            <TabsContent value="abilities">
+                
+            </TabsContent>
+            <TabsContent value="spells">
+                
+            </TabsContent>
+        </div>
+    </TabsRoot>
+</template>

pages/editor.vue

@@ -1,22 +0,0 @@
-<template>
-    <Head>
-        <Title>d[any] - Editeur</Title>
-    </Head>
-    <Editor v-model="model" />
-</template>
-
-<script setup lang="ts">
-definePageMeta({
-    rights: ['admin', 'editor'],
-})
-const model = defineModel<string>({
-    default: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis orci et est malesuada vulputate. Aenean sagittis congue eros, non feugiat metus bibendum consectetur. Duis volutpat leo nisi, in maximus nulla rhoncus ac. Sed scelerisque ipsum et volutpat dignissim. Integer massa nibh, imperdiet quis condimentum vitae, imperdiet quis quam. Cras pretium ex eget hendrerit porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque rutrum scelerisque quam, sit amet malesuada mi convallis aliquam. Curabitur eget dolor in diam scelerisque tincidunt at et sapien. Nulla vel nisl finibus odio porttitor sagittis ac ut sem. Aenean orci enim, fringilla eu porta eget, egestas vel libero. Aenean ac efficitur nunc, id finibus nibh. Suspendisse potenti. Quisque vel vestibulum ante. Morbi mi nulla, gravida ac malesuada at, hendrerit nec nibh.
-
-Fusce sodales convallis velit, ac tempor sem auctor sed.Aenean commodo sodales lorem eu mollis.Suspendisse lectus diam, bibendum quis maximus id, euismod placerat velit.Vestibulum hendrerit justo vel ultricies molestie.Donec rhoncus, ante at facilisis fermentum, diam diam hendrerit nunc, et dapibus lacus leo in massa.Duis iaculis sem sed molestie posuere.Morbi a erat hendrerit, volutpat libero non, elementum dui.
-
-Cras imperdiet velit cursus, fringilla tellus eu, lacinia neque.Sed id est suscipit quam gravida vestibulum ut sed tortor.Aliquam erat volutpat.Praesent non orci ac quam consequat tempor.Nulla facilisi.Proin at vulputate lectus.Nunc at tellus at diam faucibus eleifend et et diam.Duis pellentesque lobortis lectus id egestas.Sed quis lacinia sapien.Quisque porta tincidunt pulvinar.Aliquam hendrerit hendrerit quam, sed pulvinar turpis dictum nec.
-
-Donec bibendum, orci nec tempus fermentum, diam tellus pretium elit, vel porttitor ligula lectus a augue.Aliquam tristique, mi eu mollis sodales, enim lorem hendrerit est, id semper dui tellus id felis.Duis finibus lacus nunc, vitae tincidunt metus sagittis at.Curabitur euismod neque sed malesuada consectetur.Aliquam eget efficitur urna.Sed neque sem, interdum in turpis vitae, efficitur aliquam neque.Integer consectetur consequat diam, sed suscipit arcu maximus ac.Nunc imperdiet leo condimentum tellus luctus porta.Aenean et lorem sit amet eros rutrum fermentum.
-
-Nam placerat leo sed nulla imperdiet dapibus.Etiam vitae tortor efficitur, interdum ipsum non, tincidunt ante.Quisque et placerat nisi, eu bibendum neque.Nulla facilisi.Pellentesque accumsan lacus arcu, vitae iaculis elit sollicitudin quis.Sed et iaculis neque.In quis nunc laoreet turpis fermentum sodales.Etiam eget sodales lorem.Nunc id risus ac purus mollis auctor.Integer imperdiet placerat massa eu efficitur.` });
-</script>