diff --git a/components/CanvasEditor.vue b/components/CanvasEditor.vue
deleted file mode 100644
index 6ba2e9a..0000000
--- a/components/CanvasEditor.vue
+++ /dev/null
@@ -1,932 +0,0 @@
-<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 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, getID, ID_SIZE } 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, width, height };
-});
-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);
-
-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;
-
-    dispX.value = 0;
-    dispY.value = 0;
-    zoom.value = 0.5;
-
-    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)
-{
-    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(ID_SIZE), 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(ID_SIZE), 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>
\ No newline at end of file
diff --git a/components/Editor.vue b/components/Editor.vue
deleted file mode 100644
index 175cc48..0000000
--- a/components/Editor.vue
+++ /dev/null
@@ -1,213 +0,0 @@
-<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.to));
-
-                    return true;
-                },
-            });
-        }
-
-        return decorations;
-    }
-}
-</script>
-
-<script setup lang="ts">
-const { autofocus = false } = defineProps<{
-    placeholder?: string
-    autofocus?: boolean
-}>();
-const model = defineModel<string>();
-
-const editor = useTemplateRef('editor');
-const view = ref<EditorView>();
-
-onMounted(() => {
-    if(editor.value)
-    {
-        view.value = new EditorView({
-            doc: model.value,
-            parent: editor.value,
-            extensions: [
-                markdown({
-                    base: markdownLanguage
-                }),
-                history(),
-                search(),
-                dropCursor(),
-                EditorState.allowMultipleSelections.of(true),
-                indentOnInput(),
-                syntaxHighlighting(highlight),
-                bracketMatching(),
-                closeBrackets(),
-                crosshairCursor(),
-                EditorView.lineWrapping,
-                keymap.of([
-                    ...closeBracketsKeymap,
-                    ...defaultKeymap,
-                    ...searchKeymap,
-                    ...historyKeymap,
-                    ...foldKeymap,
-                    ...completionKeymap,
-                    ...lintKeymap
-                ]),
-                EditorView.updateListener.of((viewUpdate: ViewUpdate) => {
-                    if (viewUpdate.docChanged && !viewUpdate.transactions.some(tr => tr.annotation(External)))
-                    {
-                        model.value = viewUpdate.state.doc.toString();
-                    }
-                }),
-                EditorView.contentAttributes.of({spellcheck: "true"}),
-                ViewPlugin.fromClass(Decorator, {
-                    decorations: e => e.decorations,
-                })
-            ]
-        });
-
-        if(autofocus)
-        {
-            view.value.focus();
-        }
-    }
-});
-
-onBeforeUnmount(() => {
-    if (view.value)
-    {
-        view.value?.destroy();
-        view.value = undefined;
-    }
-});
-
-watchEffect(() => {
-    if (model.value === void 0) {
-        return;
-    }
-    const currentValue = view.value ? view.value.state.doc.toString() : "";
-    if (view.value && model.value !== currentValue) {
-        view.value.dispatch({
-            changes: { from: 0, to: currentValue.length, insert: model.value || "" },
-            annotations: [External.of(true)],
-        });
-    }
-});
-
-defineExpose({ focus: () => editor.value?.focus() });
-</script>
-
-<template>
-    <div ref="editor" class="flex flex-1 w-full justify-stretch items-stretch py-2 px-1.5 font-sans text-base"></div>
-</template>
-
-<style>
-.variant-cap
-{
-    font-variant: small-caps;
-}
-.cm-editor
-{
-    @apply bg-transparent;
-    @apply flex-1 h-full;
-    @apply font-sans;
-
-    @apply text-light-100 dark:text-dark-100;
-}
-.cm-editor .cm-content
-{
-    @apply caret-light-100 dark:caret-dark-100;
-}
-.cm-line
-{
-    @apply text-base;
-    @apply font-sans;
-}
-</style>
\ No newline at end of file
diff --git a/components/TrainingConfigEditor.vue b/components/TrainingConfigEditor.vue
deleted file mode 100644
index 7b8b04f..0000000
--- a/components/TrainingConfigEditor.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/components/TrainingViewer.vue b/components/TrainingViewer.vue
deleted file mode 100644
index cd393b5..0000000
--- a/components/TrainingViewer.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup lang="ts">
-import { MAIN_STATS, mainStatTexts } from '#shared/character.util';
-import type { CharacterConfig, MainStat } 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] as MainStat]" 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>
\ No newline at end of file
diff --git a/components/canvas/CanvasEdge.vue b/components/canvas/CanvasEdge.vue
deleted file mode 100644
index aa8eb9c..0000000
--- a/components/canvas/CanvasEdge.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-    <div class="absolute overflow-visible">
-        <div v-if="edge.label" :style="{ transform: `${labelPos} translate(-50%, -50%)` }" class="relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 z-20">{{ edge.label }}</div>
-        <svg class="absolute top-0 overflow-visible h-px w-px">
-            <g :style="{'--canvas-color': edge.color?.hex}" class="z-0">
-                <g :style="`transform: translate(${path!.to.x}px, ${path!.to.y}px) scale(var(--zoom-multiplier)) rotate(${rotation[path!.side]}deg);`">
-                    <polygon :class="style.fill" points="0,0 6.5,10.4 -6.5,10.4"></polygon>
-                </g>
-                <path :style="`stroke-width: calc(3px * var(--zoom-multiplier));`" style="stroke-linecap: butt;" :class="style.stroke" class="fill-none stroke-[4px]" :d="path!.path"></path>
-            </g>
-        </svg>
-    </div>
-</template>
-
-<style>
-.fill-colored
-{
-    --tw-bg-opacity: 1;
-    fill: rgba(from var(--canvas-color) r g b / var(--tw-bg-opacity));
-}
-</style>
-<script setup lang="ts">
-import { getPath, labelCenter, rotation } from '#shared/canvas.util';
-import type { CanvasEdge, CanvasNode } from '~/types/canvas';
-
-const { edge, nodes } = defineProps<{
-    edge: CanvasEdge
-    nodes: CanvasNode[]
-}>();
-
-const from = computed(() => nodes!.find(f => f.id === edge.fromNode));
-const to = computed(() => nodes!.find(f => f.id === edge.toNode));
-const path = computed(() => getPath(from.value!, edge.fromSide, to.value!, edge.toSide));
-const labelPos = computed(() => labelCenter(from.value!, edge.fromSide, to.value!, edge.toSide));
-
-const style = computed(() => {
-    return edge.color ? edge.color?.class ? 
-        { fill: `fill-light-${edge.color?.class} dark:fill-dark-${edge.color?.class}`, stroke: `stroke-light-${edge.color?.class} dark:stroke-dark-${edge.color?.class}` } : 
-        { fill: `fill-colored`, stroke: `stroke-[color:var(--canvas-color)]` } : 
-        { stroke: `stroke-light-40 dark:stroke-dark-40`, fill: `fill-light-40 dark:fill-dark-40` }
-});
-</script>
\ No newline at end of file
diff --git a/components/canvas/CanvasEdgeEditor.vue b/components/canvas/CanvasEdgeEditor.vue
deleted file mode 100644
index 68f91f2..0000000
--- a/components/canvas/CanvasEdgeEditor.vue
+++ /dev/null
@@ -1,98 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/components/canvas/CanvasNode.vue b/components/canvas/CanvasNode.vue
deleted file mode 100644
index 637a8b4..0000000
--- a/components/canvas/CanvasNode.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<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 && node.text.length > 0" class="flex items-center">
-                    <MarkdownRenderer :content="node.text" />
-                </div>
-            </div>
-        </div>
-        <div v-if="node.type === 'group' && node.label !== undefined" :class="style.border" style="max-width: 100%; font-size: calc(18px * var(--zoom-multiplier))" class="origin-bottom-left tracking-wider border-4 truncate inline-block text-light-100 dark:text-dark-100 absolute bottom-[100%] mb-2 px-2 py-1 font-thin">{{ node.label }}</div>
-    </div>
-</template>
-
-<style>
-.bg-colored
-{
-    --tw-bg-opacity: 1;
-    background-color: rgba(from var(--canvas-color) r g b / var(--tw-bg-opacity));
-}
-</style>
-<script setup lang="ts">
-import type { CanvasNode } from '~/types/canvas';
-
-const { node } = defineProps<{
-    node: CanvasNode
-    zoom: number
-}>();
-
-const style = computed(() => {
-    return node.color ? node.color?.class ? 
-        { bg: `bg-light-${node.color?.class} dark:bg-dark-${node.color?.class}`, border: `border-light-${node.color?.class} dark:border-dark-${node.color?.class}` } : 
-        { bg: `bg-colored`, border: `border-[color:var(--canvas-color)]` } : 
-        { border: `border-light-40 dark:border-dark-40`, bg: `bg-light-40 dark:bg-dark-40` }
-});
-</script>
\ No newline at end of file
diff --git a/components/canvas/CanvasNodeEditor.vue b/components/canvas/CanvasNodeEditor.vue
deleted file mode 100644
index 99fb275..0000000
--- a/components/canvas/CanvasNodeEditor.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<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 && 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, width: number, height: 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) * width, 64);
-        realh = Math.max(realh + (e.movementY / zoom) * height, 64);
-
-        const result = e.altKey ? undefined : snap({ ...node, x: realx, y: realy, width: realw, height: realh }, { x, y, width, height });
-
-        node.x = result?.x ?? realx;
-        node.y = result?.y ?? realy;
-        node.width = result?.width ?? realw;
-        node.height = result?.height ?? 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>
\ No newline at end of file
diff --git a/components/page/Canvas.vue b/components/page/Canvas.vue
deleted file mode 100644
index 3ea5599..0000000
--- a/components/page/Canvas.vue
+++ /dev/null
@@ -1,109 +0,0 @@
-<script lang="ts">
-/*
-
-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 type { CanvasContent } from '~/types/content';
-import { Canvas } from '#shared/canvas.util';
-
-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 element = useTemplateRef('element');
-
-onMounted(() => {
-    mount();
-});
-
-if(overview.value && !overview.value.content)
-{
-    await get(path);
-    mount();
-}
-
-const canvas = computed(() => overview.value && overview.value.content ? overview.value.content : undefined);
-console.log(canvas.value);
-
-function mount()
-{
-    if(element.value && canvas.value)
-    {
-        const c = new Canvas(canvas.value);
-        element.value.appendChild(c.container);
-        c.mount();
-    }
-    updateScaleVar();
-}
-</script>
-
-<template>
-    <div ref="element"></div>
-</template>
\ No newline at end of file
diff --git a/components/page/Markdown.vue b/components/page/Markdown.vue
deleted file mode 100644
index 33a9e77..0000000
--- a/components/page/Markdown.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/components/prose/FakeA.vue b/components/prose/FakeA.vue
deleted file mode 100644
index 6ac885a..0000000
--- a/components/prose/FakeA.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/components/prose/PreviewA.vue b/components/prose/PreviewA.vue
index 1189fc5..d1b0db5 100644
--- a/components/prose/PreviewA.vue
+++ b/components/prose/PreviewA.vue
@@ -1,30 +1,22 @@
 <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>
+	<span ref="container"></span>
 </template>
 
 <script setup lang="ts">
 import { parseURL } from 'ufo';
-import { Icon } from '@iconify/vue/dist/iconify.js';
-import { iconByType } from '#shared/content.util';
+import proses, { fakeA } from '#shared/proses';
+import { text } from '#shared/dom.util';
 
-const { href } = defineProps<{
-	href: string
-	class?: string
+const { href, label } = defineProps<{
+	href: string,
+	label: string
 }>();
 
-const { hash, pathname } = parseURL(href);
+const container = useTemplateRef('container');
 
-const { content } = useContent();
-const overview = computed(() => content.value.find(e => e.path === decodeURIComponent(pathname)));
+onMounted(() => {
+	queueMicrotask(() => {
+		container.value && container.value.appendChild(proses('a', fakeA, [ text(label) ], { href }) as HTMLElement);
+	});
+});
 </script>
\ No newline at end of file
diff --git a/components/prose/ProseA.vue b/components/prose/ProseA.vue
deleted file mode 100644
index 4f8d1ed..0000000
--- a/components/prose/ProseA.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-	<NuxtLink class="text-accent-blue inline-flex items-center" :to="overview ? { name: 'explore-path', params: { path: overview.path }, hash: decodeURIComponent(hash) } : href" :class="class">
-		<HoverCard nuxt-client class="min-w-[200px] min-h-[150px] max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview?.type === 'canvas'}" :disabled="!overview">
-			<template #content>
-				<Markdown v-if="overview?.type === 'markdown'" class="!px-6" :path="decodeURIComponent(pathname)" :filter="hash.substring(1)" popover />
-				<template v-else-if="overview?.type === 'canvas'"><div class="w-[600px] h-[600px] relative"><Canvas :path="decodeURIComponent(pathname)" /></div></template>
-			</template>
-			<span>
-				<slot v-bind="$attrs"></slot>
-				<Icon class="w-4 h-4 inline-block" v-if="overview && overview.type !== 'markdown'" :icon="iconByType[overview.type]" />
-			</span>
-		</HoverCard>
-	</NuxtLink>
-</template>
-
-<script setup lang="ts">
-import { parseURL } from 'ufo';
-import { Icon } from '@iconify/vue/dist/iconify.js';
-import { iconByType } from '#shared/content.util';
-
-const { href } = defineProps<{
-	href: string
-	class?: string
-}>();
-
-const { hash, pathname } = parseURL(href);
-
-const { content } = useContent();
-const overview = computed(() => content.value.find(e => e.path === decodeURIComponent(pathname)));
-</script>
-
-<style>
-.cm-link {
-	@apply text-accent-blue inline-flex items-center cursor-pointer hover:text-opacity-85;
-}
-</style>
\ No newline at end of file
diff --git a/components/prose/ProseBlockquote.vue b/components/prose/ProseBlockquote.vue
deleted file mode 100644
index d854e13..0000000
--- a/components/prose/ProseBlockquote.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<template>
-  <blockquote class="empty:before:hidden ps-4 my-4 relative before:absolute before:-top-1 before:-bottom-1 before:left-0 before:w-1 before:bg-light-30 dark:before:bg-dark-30" ref="el">
-    <slot />
-  </blockquote>
-</template>
-
-<style>
-.HyperMD-quote
-{
-  @apply before:hidden;
-}
-.HyperMD-quote.hmd-inactive-line
-{
-  @apply before:block empty:before:!hidden !pb-2 !ps-4 !relative before:!absolute before:!-top-1 before:!-bottom-1 before:!left-0 before:!w-1 before:!bg-none before:!bg-light-30 dark:before:!bg-dark-30;
-}
-.HyperMD-quote.HyperMD-header
-{
-  @apply before:!hidden;
-}
-.hmd-inactive-line .cm-formatting-quote
-{
-  @apply !hidden;
-}
-.cm-quote 
-{
-  @apply text-light-100 dark:text-dark-100;
-}
-</style>
\ No newline at end of file
diff --git a/components/prose/ProseCallout.vue b/components/prose/ProseCallout.vue
deleted file mode 100644
index ef15f9d..0000000
--- a/components/prose/ProseCallout.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<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 { Icon } from '@iconify/vue/dist/iconify.js';
-const {	type, title, fold } = defineProps<{
-	type: string;
-	title?: string;
-	fold?: boolean;
-}>();
-const disabled = computed(() => fold === undefined);
-</script>
\ No newline at end of file
diff --git a/components/prose/ProseCode.vue b/components/prose/ProseCode.vue
deleted file mode 100644
index ba977b5..0000000
--- a/components/prose/ProseCode.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <code><slot /></code>
-</template>
-
-<style>
-.cm-inline-code
-{
-  @apply !border-none !bg-transparent !text-light-100 dark:!text-dark-100 !p-0;
-}
-</style>
\ No newline at end of file
diff --git a/components/prose/ProseEm.vue b/components/prose/ProseEm.vue
deleted file mode 100644
index 7f4ae1f..0000000
--- a/components/prose/ProseEm.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <em>
-    <slot />
-  </em>
-</template>
diff --git a/components/prose/ProseH1.vue b/components/prose/ProseH1.vue
deleted file mode 100644
index 90c4c2d..0000000
--- a/components/prose/ProseH1.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <h1 :id="parseId(id)" class="text-5xl font-thin mt-3 mb-8 first:pt-0 pt-2">
-    <slot />
-  </h1>
-</template>
-
-<script setup lang="ts">
-import { parseId } from '#shared/general.util';
-const props = defineProps<{ id?: string }>()
-</script>
-
-<style>
-.HyperMD-header-1
-{
-  @apply text-5xl pt-4 pb-2 after:hidden;
-}
-.HyperMD-header-1 .cm-header
-{
-  @apply font-thin;
-}
-</style>
\ No newline at end of file
diff --git a/components/prose/ProseH2.vue b/components/prose/ProseH2.vue
deleted file mode 100644
index 7c2d894..0000000
--- a/components/prose/ProseH2.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <h2 :id="parseId(id)" class="text-4xl font-semibold mt-3 mb-6 ms-1 first:pt-0 pt-2">
-    <slot />
-  </h2>
-</template>
-
-<script setup lang="ts">
-import { parseId } from '#shared/general.util';
-const props = defineProps<{ id?: string }>()
-
-const generate = computed(() => props.id)
-</script>
-
-<style>
-.HyperMD-header-2
-{
-  @apply !text-4xl !pt-4 !pb-2 !ps-1 leading-loose after:hidden;
-}
-.HyperMD-header-2 .cm-header
-{
-  @apply font-semibold;
-}
-</style>
\ No newline at end of file
diff --git a/components/prose/ProseH3.vue b/components/prose/ProseH3.vue
deleted file mode 100644
index 0a7af82..0000000
--- a/components/prose/ProseH3.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <h3 :id="parseId(id)" class="text-2xl font-bold  mt-2 mb-4">
-    <slot />
-  </h3>
-</template>
-
-<script setup lang="ts">
-import { parseId } from '#shared/general.util';
-const props = defineProps<{ id?: string }>()
-
-const generate = computed(() => props.id)
-</script>
-
-<style>
-.HyperMD-header-3
-{
-  @apply !text-2xl !font-bold !pt-1 after:!hidden;
-}
-.HyperMD-header-3 .cm-header
-{
-  @apply font-bold;
-}
-</style>
\ No newline at end of file
diff --git a/components/prose/ProseH4.vue b/components/prose/ProseH4.vue
deleted file mode 100644
index 2eb8092..0000000
--- a/components/prose/ProseH4.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<template>
-  <h4 :id="parseId(id)" class="text-xl font-semibold my-2" style="font-variant: small-caps;">
-    <slot />
-  </h4>
-</template>
-
-<script setup lang="ts">
-import { parseId } from '#shared/general.util';
-const props = defineProps<{ id?: string }>()
-</script>
-
-<style>
-.HyperMD-header-4
-{
-  @apply !text-xl font-semibold pt-1 after:hidden;
-  font-variant: small-caps;
-}
-.HyperMD-header-4 .cm-header
-{
-  @apply font-semibold;
-}
-</style>
\ No newline at end of file
diff --git a/components/prose/ProseH5.vue b/components/prose/ProseH5.vue
deleted file mode 100644
index c419cd8..0000000
--- a/components/prose/ProseH5.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <h5 :id="parseId(id)" class="text-lg font-semibold my-1">
-    <slot />
-  </h5>
-</template>
-
-<script setup lang="ts">
-import { parseId } from '#shared/general.util';
-const props = defineProps<{ id?: string }>()
-
-const generate = computed(() => props.id)
-</script>
diff --git a/components/prose/ProseH6.vue b/components/prose/ProseH6.vue
deleted file mode 100644
index 21a007c..0000000
--- a/components/prose/ProseH6.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <h6 :id="parseId(id)">
-    <slot />
-  </h6>
-</template>
-
-<script setup lang="ts">
-import { parseId } from '#shared/general.util';
-const props = defineProps<{ id?: string }>()
-
-const generate = computed(() => props.id)
-</script>
diff --git a/components/prose/ProseHr.vue b/components/prose/ProseHr.vue
deleted file mode 100644
index 5ab6aeb..0000000
--- a/components/prose/ProseHr.vue
+++ /dev/null
@@ -1,10 +0,0 @@
-<template>
-  <Separator class="border-b border-light-35 dark:border-dark-35 m-4" />
-</template>
-
-<style>
-.HyperMD-hr
-{
-  @apply bg-light-35 dark:bg-dark-35 h-px;
-}
-</style>
\ No newline at end of file
diff --git a/components/prose/ProseImg.vue b/components/prose/ProseImg.vue
deleted file mode 100644
index 8244bb1..0000000
--- a/components/prose/ProseImg.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <img
-    :src="refinedSrc"
-    :alt="alt"
-    :width="width"
-    :height="height"
-  />
-</template>
-
-<script setup lang="ts">
-import { withTrailingSlash, withLeadingSlash, joinURL } from 'ufo'
-import { useRuntimeConfig, computed, resolveComponent } from '#imports'
-
-const props = defineProps({
-  src: {
-    type: String,
-    default: ''
-  },
-  alt: {
-    type: String,
-    default: ''
-  },
-  width: {
-    type: [String, Number],
-    default: undefined
-  },
-  height: {
-    type: [String, Number],
-    default: undefined
-  }
-})
-
-const refinedSrc = computed(() => {
-  if (props.src?.startsWith('/') && !props.src.startsWith('//')) {
-    const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL))
-    if (_base !== '/' && !props.src.startsWith(_base)) {
-      return joinURL(_base, props.src)
-    }
-  }
-  return props.src
-})
-</script>
diff --git a/components/prose/ProseLi.vue b/components/prose/ProseLi.vue
deleted file mode 100644
index 9859025..0000000
--- a/components/prose/ProseLi.vue
+++ /dev/null
@@ -1,22 +0,0 @@
-<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>
\ No newline at end of file
diff --git a/components/prose/ProseOl.vue b/components/prose/ProseOl.vue
deleted file mode 100644
index 7d3a886..0000000
--- a/components/prose/ProseOl.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <ol>
-    <slot />
-  </ol>
-</template>
diff --git a/components/prose/ProseP.vue b/components/prose/ProseP.vue
deleted file mode 100644
index 64d97e5..0000000
--- a/components/prose/ProseP.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <p><slot /></p>
-</template>
\ No newline at end of file
diff --git a/components/prose/ProsePre.vue b/components/prose/ProsePre.vue
deleted file mode 100644
index ab89465..0000000
--- a/components/prose/ProsePre.vue
+++ /dev/null
@@ -1,36 +0,0 @@
-<template>
-  <pre :class="$props.class"><slot /></pre>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  code: {
-    type: String,
-    default: ''
-  },
-  language: {
-    type: String,
-    default: null
-  },
-  filename: {
-    type: String,
-    default: null
-  },
-  highlights: {
-    type: Array as () => number[],
-    default: () => []
-  },
-  meta: {
-    type: String,
-    default: null
-  },
-  class: {
-    type: String,
-    default: null
-  }
-})
-</script>
-
-<style>
-pre code .line{display:block}
-</style>
diff --git a/components/prose/ProseScript.vue b/components/prose/ProseScript.vue
deleted file mode 100644
index e95f58a..0000000
--- a/components/prose/ProseScript.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div v-if="isDev">
-    Rendering the <code>script</code> element is dangerous and is disabled by default. Consider implementing your own <code>ProseScript</code> element to have control over script rendering.
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  src: {
-    type: String,
-    default: ''
-  }
-})
-const isDev = import.meta.dev
-</script>
diff --git a/components/prose/ProseSmall.vue b/components/prose/ProseSmall.vue
deleted file mode 100644
index 39e9217..0000000
--- a/components/prose/ProseSmall.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-    <small class="text-light-60 dark:text-dark-60 text-sm italic">
-        <slot />
-    </small>
-</template>
\ No newline at end of file
diff --git a/components/prose/ProseStrong.vue b/components/prose/ProseStrong.vue
deleted file mode 100644
index 994fae3..0000000
--- a/components/prose/ProseStrong.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <strong>
-    <slot />
-  </strong>
-</template>
diff --git a/components/prose/ProseTable.vue b/components/prose/ProseTable.vue
deleted file mode 100644
index a8ca108..0000000
--- a/components/prose/ProseTable.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <table class="mx-4 my-8 border-collapse border border-light-35 dark:border-dark-35">
-    <slot />
-  </table>
-</template>
diff --git a/components/prose/ProseTag.vue b/components/prose/ProseTag.vue
deleted file mode 100644
index afce4f3..0000000
--- a/components/prose/ProseTag.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<template>
-        <HoverCard nuxt-client class="min-w-[200px] min-h-[150px] max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]">
-			<template #content>
-				<Markdown class="!px-6" path="tags" :filter="tag" popover />
-			</template>
-            <span class="before:content-['#'] cursor-default bg-accent-blue bg-opacity-10 hover:bg-opacity-20 text-accent-blue text-sm px-1 ms-1 pb-0.5 rounded-full rounded-se-none border border-accent-blue border-opacity-30">
-				<slot></slot>
-			</span>
-		</HoverCard>
-</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>
-
-<script setup lang="ts">
-const { tag } = defineProps<{
-    tag: string
-}>();
-
-const { content } = useContent();
-const overview = computed(() => content.value.find(e => e.path === "tags"));
-</script>
\ No newline at end of file
diff --git a/components/prose/ProseTbody.vue b/components/prose/ProseTbody.vue
deleted file mode 100644
index 09d6191..0000000
--- a/components/prose/ProseTbody.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <tbody>
-    <slot />
-  </tbody>
-</template>
diff --git a/components/prose/ProseTd.vue b/components/prose/ProseTd.vue
deleted file mode 100644
index 57d94fc..0000000
--- a/components/prose/ProseTd.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <td class="border border-light-35 dark:border-dark-35 py-1 px-2">
-    <slot />
-  </td>
-</template>
diff --git a/components/prose/ProseTh.vue b/components/prose/ProseTh.vue
deleted file mode 100644
index fd3a967..0000000
--- a/components/prose/ProseTh.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <th class="border border-light-35 dark:border-dark-35 px-4 first:pt-0">
-    <slot />
-  </th>
-</template>
diff --git a/components/prose/ProseThead.vue b/components/prose/ProseThead.vue
deleted file mode 100644
index 95dbdb7..0000000
--- a/components/prose/ProseThead.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <thead>
-    <slot />
-  </thead>
-</template>
diff --git a/components/prose/ProseTr.vue b/components/prose/ProseTr.vue
deleted file mode 100644
index 926f7c1..0000000
--- a/components/prose/ProseTr.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <tr>
-    <slot />
-  </tr>
-</template>
diff --git a/components/prose/ProseUl.vue b/components/prose/ProseUl.vue
deleted file mode 100644
index 5c12ce9..0000000
--- a/components/prose/ProseUl.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <ul>
-    <slot />
-  </ul>
-</template>
diff --git a/db.sqlite b/db.sqlite
index 619ecd4..e8c0a12 100644
Binary files a/db.sqlite and b/db.sqlite differ
diff --git a/pages/admin/jobs.vue b/pages/admin/jobs.vue
index 2bb8c6f..1b1aeb7 100644
--- a/pages/admin/jobs.vue
+++ b/pages/admin/jobs.vue
@@ -13,7 +13,7 @@ const schemaList: Record<string, z.ZodObject<any> | null> = {
 </script>
 
 <script setup lang="ts">
-import { z } from 'zod';
+import { z } from 'zod/v4';
 import { Icon } from '@iconify/vue/dist/iconify.js';
 
 definePageMeta({
diff --git a/pages/character/[id]/index.client.vue b/pages/character/[id]/index.client.vue
index 3f42379..de56772 100644
--- a/pages/character/[id]/index.client.vue
+++ b/pages/character/[id]/index.client.vue
@@ -7,6 +7,7 @@ import type { SpellConfig } from '~/types/character';
 import type { CharacterConfig } from '~/types/character';
 import { CharacterCompiler, defaultCharacter, elementTexts, spellTypeTexts } from '~/shared/character.util';
 import { getText } from '~/shared/i18n';
+import { fakeA } from '~/shared/proses';
 
 const config = characterConfig as CharacterConfig;
 
@@ -16,7 +17,6 @@ const { add } = useToast();
 
 const { data, status, error } = await useFetch(`/api/character/${id}`);
 const compiler = new CharacterCompiler(data.value ?? defaultCharacter);
-console.log(compiler);
 const character = ref(compiler.compiled);
 /*
 text-light-red dark:text-dark-red border-light-red dark:border-dark-red bg-light-red dark:bg-dark-red
@@ -89,26 +89,26 @@ text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-pur
                     <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>
+                            <PreviewA v-if="character.mastery.strength + character.mastery.dexterity > 0" href="regles/annexes/equipement#Les armes légères" label="Arme légère" />
+                            <PreviewA v-if="character.mastery.strength + character.mastery.dexterity > 0" href="regles/annexes/equipement#Les armes de jet" label="Arme de jet" />
+                            <PreviewA v-if="character.mastery.strength + character.mastery.dexterity > 0" href="regles/annexes/equipement#Les armes naturelles" label="Arme naturelle" />
+                            <PreviewA v-if="character.mastery.strength > 1" href="regles/annexes/equipement#Les armes" label="Arme standard" />
+                            <PreviewA v-if="character.mastery.strength > 1" href="regles/annexes/equipement#Les armes improvisées" label="Arme improvisée" />
+                            <PreviewA v-if="character.mastery.strength > 2" href="regles/annexes/equipement#Les armes lourdes" label="Arme lourde" />
+                            <PreviewA v-if="character.mastery.strength > 3" href="regles/annexes/equipement#Les armes à deux mains" label="Arme à deux mains" />
+                            <PreviewA v-if="character.mastery.dexterity > 0 && character.mastery.strength > 1" href="regles/annexes/equipement#Les armes maniables" label="Arme maniable" />
+                            <PreviewA v-if="character.mastery.dexterity > 1 && character.mastery.strength > 1" href="regles/annexes/equipement#Les armes à projectiles" label="Arme à projectiles" />
+                            <PreviewA v-if="character.mastery.dexterity > 1 && character.mastery.strength > 2" href="regles/annexes/equipement#Les armes longues" label="Arme longue" />
+                            <PreviewA v-if="character.mastery.shield > 0" href="regles/annexes/equipement#Les boucliers" label="Bouclier" />
+                            <PreviewA v-if="character.mastery.shield > 0 && character.mastery.strength > 3" href="regles/annexes/equipement#Les boucliers à deux mains" label="Bouclier à deux mains" />
                         </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>
+                            <PreviewA v-if="character.mastery.armor > 0" href="regles/annexes/equipement#Les armures légères" label="Armure légère" />
+                            <PreviewA v-if="character.mastery.armor > 1" href="regles/annexes/equipement#Les armures" label="Armure standard" />
+                            <PreviewA v-if="character.mastery.armor > 2" href="regles/annexes/equipement#Les armures lourdes" label="Armure lourde" />
                         </div>
                     </div>
                     <div class="flex flex-col">
@@ -137,22 +137,22 @@ text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-pur
                                 <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.lists.action?.map(e => getText(e))?.join('\n')" />
+                                    <MarkdownRenderer :content="character.lists.action?.map(e => getText(e))?.join('\n')" :properties="{ tags: { a: fakeA } }" />
                                 </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.lists.reaction?.map(e => getText(e))?.join('\n')" />
+                                    <MarkdownRenderer :content="character.lists.reaction?.map(e => getText(e))?.join('\n')" :properties="{ tags: { a: fakeA } }" />
                                 </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.lists.freeaction?.map(e => getText(e))?.join('\n')" />
+                                    <MarkdownRenderer :content="character.lists.freeaction?.map(e => getText(e))?.join('\n')" :properties="{ tags: { a: fakeA } }" />
                                 </div>
                             </div>
                             <div class="flex flex-col">
                                 <span class="text-lg font-semibold">Aptitudes</span>
-                                <MarkdownRenderer :content="character.lists.passive?.map(e => getText(e))?.map(e => `> ${e}`).join('\n\n')" />
+                                <MarkdownRenderer :content="character.lists.passive?.map(e => getText(e))?.map(e => `> ${e}`).join('\n\n')" :properties="{ tags: { a: fakeA } }" />
                             </div>
                         </div>
                     </TabsContent>
diff --git a/pages/character/index.client.vue b/pages/character/index.client.vue
index b0af2bc..9e75d61 100644
--- a/pages/character/index.client.vue
+++ b/pages/character/index.client.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { Icon } from '@iconify/vue/dist/iconify.js';
 import characterConfig from '#shared/character-config.json';
 import type { CharacterConfig } from '~/types/character';
 
@@ -7,7 +6,6 @@ definePageMeta({
     guestsGoesTo: '/user/login',
 })
 const { add } = useToast();
-const { user } = useUserSession();
 
 const { data: characters, error, status } = await useFetch(`/api/character`);
 const config = characterConfig as CharacterConfig;
diff --git a/pages/character/manage.client.vue b/pages/character/manage.client.vue
index 2b4f797..06c730b 100644
--- a/pages/character/manage.client.vue
+++ b/pages/character/manage.client.vue
@@ -23,54 +23,4 @@ onMounted(() => {
         <Title>d[any] - Edition de données</Title>
     </Head>
     <div ref="container" class="flex flex-1 max-w-full flex-col gap-8 justify-start items-center px-8 w-full"></div>
-    <!-- <TabsRoot class="flex flex-1 max-w-full flex-col gap-8 justify-start items-center px-8 w-full" default-value="features">
-        <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 ({{ config.peoples.length }})</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 ({{ Object.keys(config.abilities).length }})</TabsTrigger>
-            <TabsTrigger value="aspects" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Aspects ({{ config.aspects.length }})</TabsTrigger>
-            <TabsTrigger value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Sorts ({{ config.spells.length }})</TabsTrigger>
-            <TabsTrigger value="features" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Features ({{ Object.keys(config.features).length }})</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 flex-row outline-none max-w-full w-full relative overflow-hidden">
-            <div class="flex flex-1 outline-none max-w-full overflow-hidden">
-                <TabsContent value="peoples" class="outline-none flex gap-4 flex-col overflow-hidden">
-                    <div class=""></div>
-                </TabsContent>
-                <TabsContent value="training" class="outline-none flex gap-4 flex-col overflow-hidden">
-                    <div class="">
-                        
-                    </div>
-                </TabsContent>
-                <TabsContent value="abilities" class="outline-none flex gap-4 flex-col overflow-hidden">
-                    <div class=""></div>
-                </TabsContent>
-                <TabsContent value="aspects" class="outline-none flex gap-4 flex-col overflow-hidden">
-                    <div class=""></div>
-                </TabsContent>
-                <TabsContent value="spells" class="outline-none flex gap-4 flex-col overflow-hidden">
-                    <div class=""></div>
-                </TabsContent>
-                <TabsContent value="features" class="outline-none flex gap-4 flex-col overflow-hidden">
-                    <div class="flex flex-col w-full gap-2 justify-end items-end relative">
-                        <Button icon @click="createFeature"><Icon icon="radix-icons:plus" class="w-6 h-6" /></Button>
-                    </div>
-                    <div class="flex flex-col gap-2 overflow-x-hidden pe-2">
-                        <div class="flex flex-row gap-2 w-full border-b border-light-35 dark:border-dark-35 pb-2" v-for="feature of config.features">
-                            <div class="w-full flex flex-row px-4 gap-8 items-center">
-                                <span class="font-mono">{{ feature.id }}</span>
-                                <span class="truncate">{{ feature.description }}</span>
-                            </div>
-                            <div class="flex flex-row gap-2 items-center">
-                                <Button icon @click="editFeature(feature.id)"><Icon icon="radix-icons:pencil-1" /></Button>
-                                <Button icon @click="deleteFeature(feature.id)"><Icon icon="radix-icons:trash" /></Button>
-                            </div>
-                        </div>
-                    </div>
-                </TabsContent>
-            </div>
-        </div>
-    </TabsRoot> -->
 </template>
\ No newline at end of file
diff --git a/pages/explore/edit/index.vue b/pages/explore/edit/index.vue
index 35953d2..1c132e8 100644
--- a/pages/explore/edit/index.vue
+++ b/pages/explore/edit/index.vue
@@ -95,193 +95,4 @@ onMounted(async () => {
 onBeforeUnmount(() => {
 	editor?.unmount();
 });
-/* import { Icon } from '@iconify/vue/dist/iconify.js';
-import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/tree-item';
-import type { FileType, LocalContent, TreeItem } from '#shared/content.util';
-import { DEFAULT_CONTENT, iconByType, Content, getPath } from '#shared/content.util';
-import type { Preferences } from '~/types/general';
-import { fakeA as proseA } from '#shared/proses';
-import { parsePath } from '~/shared/general.util';
-import type { CanvasContent } from '~/types/canvas';
-
-export type TreeItemEditable = LocalContent &
-{
-	parent?: string;
-	name?: string;
-	customPath?: boolean;
-	children?: TreeItemEditable[];
-}
-
-definePageMeta({
-	rights: ['admin', 'editor'],
-	layout: 'null',
-});
-
-const { user } = useUserSession();
-
-const router = useRouter();
-const open = ref(true), topOpen = ref(true);
-
-const toaster = useToast();
-const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');
-
-let navigation = Content.tree as TreeItemEditable[];
-const selected = ref<TreeItemEditable>();
-
-const preferences = useCookie<Preferences>('preferences', { default: () => ({ markdown: { editing: 'split' }, canvas: { gridSnap: true, neighborSnap: true, spacing: 32 } }), watch: true, maxAge: 60*60*24*31 });
-
-watch(selected, async (value, old) => {
-	if(selected.value)
-	{
-		if(!selected.value.content && selected.value.path)
-		{
-			selected.value = await Content.content(selected.value.path);
-		}
-
-		router.replace({ hash: '#' + selected.value!.path || getPath(selected.value!) });
-	}
-	else
-	{
-		router.replace({ hash: '' });
-	}
-})
-const debouncedSave = useDebounceFn(save, 60000, { maxWait: 180000 });
-
-useShortcuts({
-    //meta_s: { usingInput: true, handler: () => save(), prevent: true },
-    meta_n: { usingInput: true, handler: () => add('markdown'), prevent: true },
-    meta_shift_n: { usingInput: true, handler: () => add('folder'), prevent: true },
-    meta_shift_z: { usingInput: true, handler: () => router.push({ name: 'explore-path', params: { path: 'index' } }), prevent: true }
-})
-
-function add(type: FileType): void
-{
-	if(!navigation)
-	{
-		return;
-	}
-
-	const news = [...tree.search(navigation, 'title', 'Nouveau')].filter((e, i, a) => a.indexOf(e) === i);
-	const title = `Nouveau${news.length > 0 ? ' (' + news.length +')' : ''}`;
-	const item: TreeItemEditable = { navigable: true, private: false, parent: '', path: '', title: title, name: parsePath(title), type: type, order: 0, children: [], customPath: false, content: DEFAULT_CONTENT[type], owner: -1, timestamp: new Date(), visit: 0 };
-
-	if(!selected.value)
-	{
-		navigation = [...navigation, item];
-	}
-	else if(selected.value?.children)
-	{
-		item.parent = getPath(selected.value);
-		navigation = tree.insertChild(navigation, item.parent, item);
-	}
-	else
-	{
-		navigation = tree.insertAfter(navigation, getPath(selected.value), item);
-	}
-}
-function updateTree(instruction: Instruction, itemId: string, targetId: string) : TreeItemEditable[] | undefined {
-	if(!navigation)
-		return;
-
-    const item = tree.find(navigation, itemId);
-    const target = tree.find(navigation, targetId);
-
-	if(!item)
-		return;
-	
-	if (instruction.type === 'reparent') {
-		const path = tree.getPathToItem({
-			current: navigation,
-			targetId: targetId,
-		});
-		if (!path) {
-			console.error(`missing ${path}`);
-			return;
-		}
-
-		const desiredId = path[instruction.desiredLevel];
-		let result = tree.remove(navigation, itemId);
-		result = tree.insertAfter(result, desiredId, item);
-		return result;
-	}
-
-	// the rest of the actions require you to drop on something else
-	if (itemId === targetId)
-		return navigation;
-
-	if (instruction.type === 'reorder-above') {
-		let result = tree.remove(navigation, itemId);
-		result = tree.insertBefore(result, targetId, item);
-		return result;
-	}
-
-	if (instruction.type === 'reorder-below') {
-		let result = tree.remove(navigation, itemId);
-		result = tree.insertAfter(result, targetId, item);
-		return result;
-	}
-
-	if (instruction.type === 'make-child') {
-        if(!target || target.type !== 'folder')
-            return;
-
-		let result = tree.remove(navigation, itemId);
-		result = tree.insertChild(result, targetId, item);
-        rebuildPath([item], targetId);
-		return result;
-	}
-
-  return navigation;
-}
-function transform(items: TreeItem[] | undefined): TreeItemEditable[] | undefined
-{
-	return items?.map(e => ({
-		...e, 
-		parent: e.path.substring(0, e.path.lastIndexOf('/')),
-		name: e.path.substring(e.path.lastIndexOf('/') + 1),
-		customPath: e.path.substring(e.path.lastIndexOf('/') + 1) !== parsePath(e.title), 
-		children: transform(e.children)
-	})) as TreeItemEditable[] | undefined;
-}
-function flatten(items: TreeItemEditable[] | undefined): TreeItemEditable[]
-{
-	return items?.flatMap(e => [e, ...flatten(e.children)]) ?? [];
-}
-function drop(instruction: Instruction, itemId: string, targetId: string)
-{
-    navigation = updateTree(instruction, itemId, targetId) ?? navigation ?? [];
-}
-function rebuildPath(tree: TreeItemEditable[] | null | undefined, parentPath: string)
-{
-    if(!tree)
-        return;
-
-    tree.forEach(e => {
-        e.parent = parentPath;
-        rebuildPath(e.children, getPath(e));
-    });
-}
-function save()
-{
-	if(selected.value && selected.value.content)
-	{
-		selected.value.path = getPath(selected.value);
-		Content.save(selected.value);
-	}
-}
-
-const defaultExpanded = computed(() => {
-	if(router.currentRoute.value.hash)
-	{
-		const split = router.currentRoute.value.hash.substring(1).split('/');
-		split.forEach((e, i) => { if(i !== 0) split[i] = split[i - 1] + '/' + e });
-		return split;
-	}
-});
-/*watch(router.currentRoute, (value) => {
-	if(value && value.hash && navigation)
-		selected.value = tree.find(navigation, value.hash.substring(1));
-	else
-		selected.value = undefined;
-}, { immediate: true }); */
 </script>
\ No newline at end of file
diff --git a/pages/user/login.vue b/pages/user/login.vue
index 1488d4d..9a1ef45 100644
--- a/pages/user/login.vue
+++ b/pages/user/login.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import type { ZodError } from 'zod';
+import type { ZodError } from 'zod/v4';
 import { schema, type Login } from '~/schemas/login';
 import { Icon } from '@iconify/vue/dist/iconify.js';
 
diff --git a/pages/user/register.vue b/pages/user/register.vue
index 8c44575..f7fe466 100644
--- a/pages/user/register.vue
+++ b/pages/user/register.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script setup lang="ts">
-import { ZodError } from 'zod';
+import { ZodError } from 'zod/v4';
 import { schema, type Registration } from '~/schemas/registration';
 import { Icon } from '@iconify/vue/dist/iconify.js';
 
diff --git a/server/api/auth/login.post.ts b/server/api/auth/login.post.ts
index f1478b6..cc0a783 100644
--- a/server/api/auth/login.post.ts
+++ b/server/api/auth/login.post.ts
@@ -1,9 +1,9 @@
 import useDatabase from '~/composables/useDatabase';
 import { schema } from '~/schemas/login';
 import type { UserSession, UserSessionRequired } from '~/types/auth';
-import { ZodError } from 'zod';
+import { ZodError } from 'zod/v4';
 import { checkSession, logSession } from '~/server/utils/user';
-import { usersDataTable, usersTable } from '~/db/schema';
+import { usersTable } from '~/db/schema';
 import { eq, or, sql } from 'drizzle-orm';
 
 interface SuccessHandler
@@ -50,7 +50,7 @@ export default defineEventHandler(async (e): Promise<Return> => {
             await clearUserSession(e);
 
             setResponseStatus(e, 401);
-            return { success: false, error: new ZodError([{ code: 'custom', path: ['username'], message: 'Identifiant inconnu' }]) };
+            return { success: false, error: new ZodError([{ code: 'custom', input: undefined, path: ['username'], message: 'Identifiant inconnu' }]) };
         }
         
         const valid = await Bun.password.verify(body.data.password, id.hash);
@@ -60,7 +60,7 @@ export default defineEventHandler(async (e): Promise<Return> => {
             await clearUserSession(e);
 
             setResponseStatus(e, 401);
-            return { success: false, error: new ZodError([{ code: 'custom', path: ['password'], message: 'Mot de passe incorrect' }]) };
+            return { success: false, error: new ZodError([{ code: 'custom', input: undefined, path: ['password'], message: 'Mot de passe incorrect' }]) };
         }
 
         const user = db.query.usersTable.findFirst({
diff --git a/server/api/auth/register.post.ts b/server/api/auth/register.post.ts
index b16346d..2d814c1 100644
--- a/server/api/auth/register.post.ts
+++ b/server/api/auth/register.post.ts
@@ -1,11 +1,12 @@
 import { count, eq, sql } from 'drizzle-orm';
-import { ZodError, type ZodIssue } from 'zod';
+import { ZodError } from 'zod/v4';
 import useDatabase from '~/composables/useDatabase';
 import { usersDataTable, usersTable } from '~/db/schema';
 import { schema } from '~/schemas/registration';
 import { checkSession, logSession } from '~/server/utils/user';
 import type { UserSession, UserSessionRequired } from '~/types/auth';
 import sendMail from '~/server/tasks/mail';
+import type { $ZodIssue } from 'zod/v4/core';
 
 interface SuccessHandler
 {
@@ -47,11 +48,11 @@ export default defineEventHandler(async (e): Promise<Return> => {
         const checkUsername = db.select({ count: count() }).from(usersTable).where(eq(usersTable.username, sql.placeholder('username'))).prepare().get({ username: body.data.username });
         const checkEmail = db.select({ count: count() }).from(usersTable).where(eq(usersTable.email, sql.placeholder('email'))).prepare().get({ email: body.data.email });
 
-        const errors: ZodIssue[] = [];
+        const errors: $ZodIssue[] = [];
         if(!checkUsername || checkUsername.count !== 0)
-            errors.push({ code: 'custom', path: ['username'], message: "Ce nom d'utilisateur est déjà utilisé" });
+            errors.push({ code: 'custom', input: undefined, path: ['username'], message: "Ce nom d'utilisateur est déjà utilisé" });
         if(!checkEmail || checkEmail.count !== 0)
-            errors.push({ code: 'custom', path: ['email'], message: "Cette adresse mail est déjà utilisée" });
+            errors.push({ code: 'custom', input: undefined, path: ['email'], message: "Cette adresse mail est déjà utilisée" });
 
         if(errors.length > 0)
         {
diff --git a/server/api/auth/request-reset.post.ts b/server/api/auth/request-reset.post.ts
index 7b0f069..bfd34d3 100644
--- a/server/api/auth/request-reset.post.ts
+++ b/server/api/auth/request-reset.post.ts
@@ -1,6 +1,6 @@
 import { hash } from 'bun';
 import { eq, or } from 'drizzle-orm';
-import { z } from 'zod';
+import { z } from 'zod/v4';
 import useDatabase from '~/composables/useDatabase';
 import { usersTable } from '~/db/schema';
 import sendMail from '~/server/tasks/mail';
diff --git a/server/api/auth/reset.post.ts b/server/api/auth/reset.post.ts
index 97226b8..087b383 100644
--- a/server/api/auth/reset.post.ts
+++ b/server/api/auth/reset.post.ts
@@ -1,11 +1,12 @@
 import { count, eq, sql } from 'drizzle-orm';
-import { ZodError, type ZodIssue } from 'zod';
+import { ZodError } from 'zod/v4';
 import useDatabase from '~/composables/useDatabase';
 import { usersDataTable, usersTable } from '~/db/schema';
 import { schema } from '~/schemas/registration';
 import { checkSession, logSession } from '~/server/utils/user';
 import type { UserSession, UserSessionRequired } from '~/types/auth';
 import sendMail from '~/server/tasks/mail';
+import type { $ZodIssue } from 'zod/v4/core';
 
 interface SuccessHandler
 {
@@ -47,11 +48,11 @@ export default defineEventHandler(async (e): Promise<Return> => {
         const checkUsername = db.select({ count: count() }).from(usersTable).where(eq(usersTable.username, sql.placeholder('username'))).prepare().get({ username: body.data.username });
         const checkEmail = db.select({ count: count() }).from(usersTable).where(eq(usersTable.email, sql.placeholder('email'))).prepare().get({ email: body.data.email });
 
-        const errors: ZodIssue[] = [];
+        const errors: $ZodIssue[] = [];
         if(!checkUsername || checkUsername.count !== 0)
-            errors.push({ code: 'custom', path: ['username'], message: "Ce nom d'utilisateur est déjà utilisé" });
+            errors.push({ code: 'custom', input: undefined, path: ['username'], message: "Ce nom d'utilisateur est déjà utilisé" });
         if(!checkEmail || checkEmail.count !== 0)
-            errors.push({ code: 'custom', path: ['email'], message: "Cette adresse mail est déjà utilisée" });
+            errors.push({ code: 'custom', input: undefined, path: ['email'], message: "Cette adresse mail est déjà utilisée" });
 
         if(errors.length > 0)
         {
diff --git a/server/api/character.post.ts b/server/api/character.post.ts
index e257d7d..3e3ee73 100644
--- a/server/api/character.post.ts
+++ b/server/api/character.post.ts
@@ -1,4 +1,4 @@
-import { z } from 'zod';
+import { z } from 'zod/v4';
 import useDatabase from '~/composables/useDatabase';
 import { characterAbilitiesTable, characterLevelingTable, characterModifiersTable, characterSpellsTable, characterTable, characterTrainingTable } from '~/db/schema';
 import { CharacterValidation } from '#shared/character.util';
@@ -38,17 +38,14 @@ export default defineEventHandler(async (e) => {
                 thumbnail: body.data.thumbnail,
             }).returning({ id: characterTable.id }).get().id;
     
-            if(body.data.leveling.length > 0) tx.insert(characterLevelingTable).values(body.data.leveling.map(e => ({ character: id, level: e[0], choice: e[1] }))).run();
+            if(Object.keys(body.data.leveling).length > 0) tx.insert(characterLevelingTable).values(Object.entries(body.data.leveling).map(e => ({ character: id, level: parseInt(e[0], 10), choice: e[1]! }))).run();
 
-            const training = Object.entries(body.data.training).flatMap(e => e[1].map(_e => ({ character: id, stat: e[0] as MainStat, level: _e[0], choice: _e[1] })));
+            const training = Object.entries(body.data.training).flatMap(e => Object.entries(e[1]).map(_e => ({ character: id, stat: e[0] as MainStat, level: parseInt(_e[0], 10), choice: _e[1]! })));
             if(training.length > 0) tx.insert(characterTrainingTable).values(training).run();
 
-            const modifiers = Object.entries(body.data.modifiers).map((e) => ({ character: id, modifier: e[0] as MainStat, value: e[1] }));
-            if(modifiers.length > 0) tx.insert(characterModifiersTable).values(modifiers).run();
-
             if(body.data.spells.length > 0) tx.insert(characterSpellsTable).values(body.data.spells.map(e => ({ character: id, value: e }))).run();
 
-            const abilities = Object.entries(body.data.abilities).map(e => ({ character: id, ability: e[0] as Ability, value: e[1][0], max: e[1][1] }));
+            const abilities = Object.entries(body.data.abilities).map(e => ({ character: id, ability: e[0] as Ability, value: e[1] }));
             if(abilities.length > 0) tx.insert(characterAbilitiesTable).values(abilities).run();
     
             return id;
diff --git a/server/api/users/[id]/change-password.post.ts b/server/api/users/[id]/change-password.post.ts
index b00807f..9fe8940 100644
--- a/server/api/users/[id]/change-password.post.ts
+++ b/server/api/users/[id]/change-password.post.ts
@@ -1,5 +1,5 @@
-import { and, count, eq } from 'drizzle-orm';
-import { z } from 'zod';
+import { eq } from 'drizzle-orm';
+import { z } from 'zod/v4';
 import { usersTable } from '~/db/schema';
 import { schema as registration } from '~/schemas/registration';
 import useDatabase from '~/composables/useDatabase';
@@ -54,12 +54,12 @@ export default defineEventHandler(async (e) => {
                 message: 'Unauthorized',
             });
         }
-        if(!await Bun.password.verify(body.data.oldPassword, check.hash))
+        if(!await Bun.password.verify(body.data.oldPassword as string, check.hash))
         {
             return { success: false, error: "Ancien mot de passe incorrect" };
         }
 
-        db.update(usersTable).set({ hash: await Bun.password.hash(body.data.newPassword) }).where(eq(usersTable.id, session.user.id)).run();
+        db.update(usersTable).set({ hash: await Bun.password.hash(body.data.newPassword as string) }).where(eq(usersTable.id, session.user.id)).run();
 
         return { success: true };
     }
diff --git a/server/api/users/[id]/reset-password.post.ts b/server/api/users/[id]/reset-password.post.ts
index 29a5790..7c84b8b 100644
--- a/server/api/users/[id]/reset-password.post.ts
+++ b/server/api/users/[id]/reset-password.post.ts
@@ -1,5 +1,5 @@
 import { eq, getTableColumns, lte } from 'drizzle-orm';
-import { z } from 'zod';
+import { z } from 'zod/v4';
 import useDatabase from '~/composables/useDatabase';
 import { emailValidationTable, usersTable } from '~/db/schema';
 
diff --git a/shared/canvas.util.ts b/shared/canvas.util.ts
index aec5eb7..b862915 100644
--- a/shared/canvas.util.ts
+++ b/shared/canvas.util.ts
@@ -127,6 +127,7 @@ function center(touches: TouchList): Position
 function distance(touches: TouchList): number
 {
     const [A, B] = touches;
+    if(!A || !B) return 0;
     return Math.hypot(B.clientX - A.clientX, B.clientY - A.clientY);
 }
 
@@ -172,10 +173,9 @@ export class Node extends EventTarget
             { border: `border-light-40 dark:border-dark-40`, bg: `bg-light-40 dark:bg-dark-40` }
     }
 }
+
 export class NodeEditable extends Node
-{
-    private static input: HTMLInputElement = dom('input', { 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', style: { 'max-width': '100%', 'font-size': 'calc(18px * var(--zoom-multiplier))' }, listeners: { click: e => e.stopImmediatePropagation() } });
-    
+{    
     edges: Set<EdgeEditable> = new Set();
 
     private dirty: boolean = false;
@@ -310,7 +310,6 @@ export class Edge extends EventTarget
 }
 export class EdgeEditable extends Edge
 {
-    private static input: HTMLInputElement = dom('input', { class: 'relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 z-20 -translate-x-1/2 -translate-y-1/2', listeners: { click: e => e.stopImmediatePropagation() } });
     private focusing: boolean = false;
     private editing: boolean = false;
 
@@ -879,9 +878,9 @@ export class CanvasEditor extends Canvas
             this.pattern.setAttribute("width", (this._zoom * CanvasEditor.SPACING).toFixed(3));
             this.pattern.setAttribute("height", (this._zoom * CanvasEditor.SPACING).toFixed(3));
     
-            this.pattern.children[0].setAttribute('cx', (this._zoom).toFixed(3));
-            this.pattern.children[0].setAttribute('cy', (this._zoom).toFixed(3));
-            this.pattern.children[0].setAttribute('r', (this._zoom).toFixed(3));
+            this.pattern.children[0]!.setAttribute('cx', (this._zoom).toFixed(3));
+            this.pattern.children[0]!.setAttribute('cy', (this._zoom).toFixed(3));
+            this.pattern.children[0]!.setAttribute('r', (this._zoom).toFixed(3));
         }
     }
     override mount()
diff --git a/shared/character-config.json b/shared/character-config.json
index 6b428a4..64437bb 100644
--- a/shared/character-config.json
+++ b/shared/character-config.json
@@ -1417,7 +1417,7 @@
                 "fire"
             ],
             "cost": 3,
-            "speed": "10 ",
+            "speed": 10,
             "concentration": false,
             "tags": [
                 "utilitary"
@@ -1474,7 +1474,7 @@
         },
         {
             "id": "t0uorr9gpk3n2325s4bgozwcjlk4g7af",
-            "name": "No name",
+            "name": "Glisse gracieuse",
             "rank": 1,
             "type": "knowledge",
             "elements": [
@@ -1538,7 +1538,7 @@
         },
         {
             "id": "p2o6hrfw5fgf22wpm7ocsxh6inhul3b1",
-            "name": "No name",
+            "name": "Menace statique",
             "rank": 1,
             "type": "instinct",
             "elements": [
@@ -1554,7 +1554,7 @@
         },
         {
             "id": "31neb3hkr8o2pc6wq5juhkfywqpufi7c",
-            "name": "No name",
+            "name": "Vrombissement assourdissant",
             "rank": 1,
             "type": "instinct",
             "elements": [
@@ -1570,7 +1570,7 @@
         },
         {
             "id": "ci60uqd0xv6bvfpaugu5f1m9c0f4b2ta",
-            "name": "No name",
+            "name": "Pilier de force",
             "rank": 1,
             "type": "precision",
             "elements": [
@@ -1586,7 +1586,7 @@
         },
         {
             "id": "q8bn095qcyuqk10wru6oe0mdg6ilsqke",
-            "name": "No name",
+            "name": "Choc de roche",
             "rank": 1,
             "type": "precision",
             "elements": [
@@ -1618,7 +1618,7 @@
         },
         {
             "id": "1yg0jfxt9tomjk8nfv6refiranzfcmqp",
-            "name": "No name",
+            "name": "Peau de pierre",
             "rank": 1,
             "type": "instinct",
             "elements": [
@@ -1641,7 +1641,7 @@
                 "earth"
             ],
             "cost": null,
-            "speed": "10 ",
+            "speed": 10,
             "concentration": false,
             "tags": [
                 "utilitary"
@@ -1689,7 +1689,7 @@
                 "arcana"
             ],
             "cost": 2,
-            "speed": "1 ",
+            "speed": 1,
             "concentration": false,
             "tags": [
                 "utilitary"
@@ -1705,7 +1705,7 @@
                 "arcana"
             ],
             "cost": 3,
-            "speed": "1 ",
+            "speed": 1,
             "concentration": true,
             "tags": [
                 "utilitary"
@@ -1762,7 +1762,7 @@
         },
         {
             "id": "ufggg6m2fbrkb8hsmqmn5p57eow5z4du",
-            "name": "No name",
+            "name": "Insaisissable",
             "rank": 1,
             "type": "precision",
             "elements": [
@@ -1785,7 +1785,7 @@
                 "nature"
             ],
             "cost": 2,
-            "speed": "1 ",
+            "speed": 1,
             "concentration": false,
             "tags": [
                 "utilitary"
@@ -1794,7 +1794,7 @@
         },
         {
             "id": "ia1l0huseavhkm1uhkea50d4j5isz98a",
-            "name": "No name",
+            "name": "Echange d'énergie",
             "rank": 1,
             "type": "instinct",
             "elements": [
@@ -1810,7 +1810,7 @@
         },
         {
             "id": "67cka4v8izu8qdfo2mqulkq26fp99etg",
-            "name": "No name",
+            "name": "Corrosion",
             "rank": 1,
             "type": "precision",
             "elements": [
@@ -1826,7 +1826,7 @@
         },
         {
             "id": "6mkmnwb4m28kx4n44yy4st9qut218pwc",
-            "name": "No name",
+            "name": "Appel de la nature",
             "rank": 1,
             "type": "instinct",
             "elements": [
@@ -1890,7 +1890,7 @@
         },
         {
             "id": "79l392k10xs5871a26rd5omm7djswuoz",
-            "name": "No name",
+            "name": "Visions de terreur",
             "rank": 1,
             "type": "instinct",
             "elements": [
@@ -1922,7 +1922,7 @@
         },
         {
             "id": "ewyy5jeqa5zvffqpa2hxg9ehifg2nwj7",
-            "name": "No name",
+            "name": "Manteau de flamme",
             "rank": 2,
             "type": "knowledge",
             "elements": [
@@ -1970,7 +1970,7 @@
         },
         {
             "id": "kxk0yq1qd0b4sl2yyfi9xje6vfkxh0aa",
-            "name": "No name",
+            "name": "Gel encombrant",
             "rank": 2,
             "type": "instinct",
             "elements": [
@@ -2034,7 +2034,7 @@
         },
         {
             "id": "54z5hr40pfmsbbeyksgj1ybvdzy2lrg1",
-            "name": "No name",
+            "name": "Choc auditif",
             "rank": 2,
             "type": "instinct",
             "elements": [
@@ -2050,7 +2050,7 @@
         },
         {
             "id": "awt4tmkif5valsga4bcbezhjhckm7mxq",
-            "name": "No name",
+            "name": "Aura statique",
             "rank": 2,
             "type": "knowledge",
             "elements": [
@@ -2066,7 +2066,7 @@
         },
         {
             "id": "vubi6idvry4vim1oavd9xneakek6jnnq",
-            "name": "No name",
+            "name": "Lame de roc",
             "rank": 2,
             "type": "knowledge",
             "elements": [
@@ -2082,7 +2082,7 @@
         },
         {
             "id": "unqrb8i8erotcaqt9g7e2jn6g0go9kfu",
-            "name": "No name",
+            "name": "Torgnole rocailleuse",
             "rank": 2,
             "type": "precision",
             "elements": [
@@ -2098,7 +2098,7 @@
         },
         {
             "id": "1o219d03xifhmcf7v5tb6z1n2dfv9cfh",
-            "name": "No name",
+            "name": "Faiblesse d'éther",
             "rank": 2,
             "type": "instinct",
             "elements": [
@@ -2162,7 +2162,7 @@
         },
         {
             "id": "ewkikv0f2p1332ic8m8tlf52f6k4mn3u",
-            "name": "No name",
+            "name": "Partage d'esprit",
             "rank": 2,
             "type": "knowledge",
             "elements": [
@@ -2178,7 +2178,7 @@
         },
         {
             "id": "xockmmr8iu687kpjw09fua3835gwfzog",
-            "name": "No name",
+            "name": "Air chaotique",
             "rank": 2,
             "type": "knowledge",
             "elements": [
@@ -2194,7 +2194,7 @@
         },
         {
             "id": "c3f71icemysqn30kcts3sup4rsq3nx7e",
-            "name": "No name",
+            "name": "Bénédiction des vents",
             "rank": 2,
             "type": "precision",
             "elements": [
@@ -2210,7 +2210,7 @@
         },
         {
             "id": "zno89j1hd5jkgafhhar3x5tt17we1rzl",
-            "name": "No name",
+            "name": "Pression descendante",
             "rank": 2,
             "type": "precision",
             "elements": [
@@ -2226,7 +2226,7 @@
         },
         {
             "id": "bov1z1ieb4s7gbzbgps21e1pvouohdwk",
-            "name": "No name",
+            "name": "Bourrasque opposante",
             "rank": 2,
             "type": "instinct",
             "elements": [
@@ -2242,7 +2242,7 @@
         },
         {
             "id": "p6kpqeqrrhw8iopl9b9jmuxuabtquvps",
-            "name": "No name",
+            "name": "Epuisement spontané",
             "rank": 2,
             "type": "knowledge",
             "elements": [
@@ -2258,7 +2258,7 @@
         },
         {
             "id": "kwy42uq39xk85us5ozf0fm9t79041127",
-            "name": "No name",
+            "name": "Echange d'énergie supérieur",
             "rank": 2,
             "type": "instinct",
             "elements": [
@@ -2274,7 +2274,7 @@
         },
         {
             "id": "o5xy0qagub9x7hsityncleza1ysrglm2",
-            "name": "No name",
+            "name": "Vision dans le noir",
             "rank": 2,
             "type": "knowledge",
             "elements": [
@@ -2402,7 +2402,7 @@
         },
         {
             "id": "bm9ywuo2gdtnzrigr1hg7y4falkrgm10",
-            "name": "No name",
+            "name": "Permutation",
             "rank": 3,
             "type": "instinct",
             "elements": [
@@ -2450,7 +2450,7 @@
         },
         {
             "id": "fchuvggmgrh89dyx06kk3433a1wf4u3m",
-            "name": "No name",
+            "name": "Erection de matière",
             "rank": 3,
             "type": "knowledge",
             "elements": [
@@ -2466,7 +2466,7 @@
         },
         {
             "id": "kfz4nibuso2um6na7v5z2lc22ng1lgca",
-            "name": "No name",
+            "name": "Densité tranchante",
             "rank": 3,
             "type": "precision",
             "elements": [
@@ -2562,7 +2562,7 @@
         },
         {
             "id": "6z02eebtw1p7wlfc4jned3iwo16bb772",
-            "name": "No name",
+            "name": "Redirection",
             "rank": 3,
             "type": "instinct",
             "elements": [
@@ -2614,10 +2614,7 @@
             "name": "Akkatom",
             "description": "",
             "stat": "strength",
-            "alignment": {
-                "kindness": "good",
-                "loyalty": "neutral"
-            },
+            "alignment": "neutral_good",
             "magic": true,
             "difficulty": 9,
             "physic": {
@@ -2638,10 +2635,7 @@
             "name": "Anseilid",
             "description": "",
             "stat": "intelligence",
-            "alignment": {
-                "kindness": "neutral",
-                "loyalty": "chaotic"
-            },
+            "alignment": "chaotic_neutral",
             "magic": true,
             "difficulty": 13,
             "physic": {
@@ -2662,10 +2656,7 @@
             "name": "Arsinam",
             "description": "",
             "stat": "constitution",
-            "alignment": {
-                "kindness": "neutral",
-                "loyalty": "chaotic"
-            },
+            "alignment": "chaotic_neutral",
             "magic": false,
             "difficulty": 8,
             "physic": {
@@ -2686,10 +2677,7 @@
             "name": "Asnol",
             "description": "",
             "stat": "intelligence",
-            "alignment": {
-                "kindness": "evil",
-                "loyalty": "neutral"
-            },
+            "alignment": "neutral_evil",
             "magic": true,
             "difficulty": 9,
             "physic": {
@@ -2710,10 +2698,7 @@
             "name": "Beth'oit",
             "description": "",
             "stat": "charisma",
-            "alignment": {
-                "kindness": "good",
-                "loyalty": "loyal"
-            },
+            "alignment": "loyal_good",
             "magic": true,
             "difficulty": 9,
             "physic": {
@@ -2734,10 +2719,7 @@
             "name": "Brukaur",
             "description": "",
             "stat": "constitution",
-            "alignment": {
-                "kindness": "neutral",
-                "loyalty": "chaotic"
-            },
+            "alignment": "chaotic_neutral",
             "magic": false,
             "difficulty": 9,
             "physic": {
@@ -2758,10 +2740,7 @@
             "name": "Calderan",
             "description": "",
             "stat": "intelligence",
-            "alignment": {
-                "kindness": "neutral",
-                "loyalty": "loyal"
-            },
+            "alignment": "loyal_neutral",
             "magic": true,
             "difficulty": 9,
             "physic": {
@@ -2782,10 +2761,7 @@
             "name": "Dao Tua",
             "description": "",
             "stat": "charisma",
-            "alignment": {
-                "kindness": "evil",
-                "loyalty": "neutral"
-            },
+            "alignment": "neutral_evil",
             "magic": false,
             "difficulty": 9,
             "physic": {
@@ -2806,10 +2782,7 @@
             "name": "Digride",
             "description": "",
             "stat": "dexterity",
-            "alignment": {
-                "kindness": "evil",
-                "loyalty": "neutral"
-            },
+            "alignment": "neutral_evil",
             "magic": true,
             "difficulty": 10,
             "physic": {
@@ -2830,10 +2803,7 @@
             "name": "Drinbuur",
             "description": "",
             "stat": "psyche",
-            "alignment": {
-                "kindness": "good",
-                "loyalty": "neutral"
-            },
+            "alignment": "neutral_good",
             "magic": true,
             "difficulty": 10,
             "physic": {
@@ -2854,10 +2824,7 @@
             "name": "Franeline",
             "description": "",
             "stat": "dexterity",
-            "alignment": {
-                "kindness": "neutral",
-                "loyalty": "neutral"
-            },
+            "alignment": "neutral_neutral",
             "magic": true,
             "difficulty": 8,
             "physic": {
@@ -2878,10 +2845,7 @@
             "name": "Goldreg",
             "description": "",
             "stat": "psyche",
-            "alignment": {
-                "kindness": "evil",
-                "loyalty": "neutral"
-            },
+            "alignment": "loyal_evil",
             "magic": false,
             "difficulty": 9,
             "physic": {
@@ -2902,10 +2866,7 @@
             "name": "Hashura",
             "description": "",
             "stat": "charisma",
-            "alignment": {
-                "kindness": "neutral",
-                "loyalty": "neutral"
-            },
+            "alignment": "neutral_neutral",
             "magic": true,
             "difficulty": 10,
             "physic": {
@@ -2926,10 +2887,7 @@
             "name": "Incabat",
             "description": "",
             "stat": "constitution",
-            "alignment": {
-                "kindness": "evil",
-                "loyalty": "neutral"
-            },
+            "alignment": "neutral_evil",
             "magic": false,
             "difficulty": 10,
             "physic": {
@@ -2950,10 +2908,7 @@
             "name": "Kaha Bii",
             "description": "",
             "stat": "curiosity",
-            "alignment": {
-                "kindness": "good",
-                "loyalty": "loyal"
-            },
+            "alignment": "loyal_good",
             "magic": true,
             "difficulty": 10,
             "physic": {
@@ -2974,10 +2929,7 @@
             "name": "Kronian",
             "description": "",
             "stat": "psyche",
-            "alignment": {
-                "kindness": "evil",
-                "loyalty": "neutral"
-            },
+            "alignment": "neutral_evil",
             "magic": true,
             "difficulty": 10,
             "physic": {
@@ -2998,10 +2950,7 @@
             "name": "Kuelid",
             "description": "",
             "stat": "intelligence",
-            "alignment": {
-                "kindness": "neutral",
-                "loyalty": "loyal"
-            },
+            "alignment": "loyal_neutral",
             "magic": true,
             "difficulty": 9,
             "physic": {
@@ -3022,10 +2971,7 @@
             "name": "Lonidae",
             "description": "",
             "stat": "intelligence",
-            "alignment": {
-                "kindness": "evil",
-                "loyalty": "chaotic"
-            },
+            "alignment": "chaotic_evil",
             "magic": true,
             "difficulty": 10,
             "physic": {
@@ -3046,10 +2992,7 @@
             "name": "Miador",
             "description": "",
             "stat": "dexterity",
-            "alignment": {
-                "kindness": "neutral",
-                "loyalty": "loyal"
-            },
+            "alignment": "loyal_neutral",
             "magic": true,
             "difficulty": 8,
             "physic": {
@@ -3070,10 +3013,7 @@
             "name": "Mul'dekar",
             "description": "",
             "stat": "curiosity",
-            "alignment": {
-                "kindness": "evil",
-                "loyalty": "neutral"
-            },
+            "alignment": "neutral_evil",
             "magic": true,
             "difficulty": 10,
             "physic": {
@@ -3094,10 +3034,7 @@
             "name": "Nigiak",
             "description": "",
             "stat": "charisma",
-            "alignment": {
-                "kindness": "neutral",
-                "loyalty": "loyal"
-            },
+            "alignment": "loyal_neutral",
             "magic": true,
             "difficulty": 9,
             "physic": {
@@ -3118,10 +3055,7 @@
             "name": "Nyelis",
             "description": "",
             "stat": "curiosity",
-            "alignment": {
-                "kindness": "neutral",
-                "loyalty": "neutral"
-            },
+            "alignment": "neutral_neutral",
             "magic": true,
             "difficulty": 8,
             "physic": {
@@ -3142,10 +3076,7 @@
             "name": "Onimee",
             "description": "",
             "stat": "dexterity",
-            "alignment": {
-                "kindness": "neutral",
-                "loyalty": "chaotic"
-            },
+            "alignment": "chaotic_neutral",
             "magic": false,
             "difficulty": 7,
             "physic": {
@@ -3166,10 +3097,7 @@
             "name": "Othompa",
             "description": "",
             "stat": "psyche",
-            "alignment": {
-                "kindness": "evil",
-                "loyalty": "neutral"
-            },
+            "alignment": "neutral_evil",
             "magic": true,
             "difficulty": 10,
             "physic": {
@@ -3190,10 +3118,7 @@
             "name": "Promolide",
             "description": "",
             "stat": "constitution",
-            "alignment": {
-                "kindness": "evil",
-                "loyalty": "chaotic"
-            },
+            "alignment": "chaotic_evil",
             "magic": true,
             "difficulty": 11,
             "physic": {
@@ -3214,10 +3139,7 @@
             "name": "Qua'faltar",
             "description": "",
             "stat": "psyche",
-            "alignment": {
-                "kindness": "evil",
-                "loyalty": "chaotic"
-            },
+            "alignment": "chaotic_evil",
             "magic": true,
             "difficulty": 10,
             "physic": {
@@ -3238,10 +3160,7 @@
             "name": "Rudnar",
             "description": "",
             "stat": "dexterity",
-            "alignment": {
-                "kindness": "good",
-                "loyalty": "chaotic"
-            },
+            "alignment": "chaotic_good",
             "magic": true,
             "difficulty": 10,
             "physic": {
@@ -3262,10 +3181,7 @@
             "name": "Shelfine",
             "description": "",
             "stat": "intelligence",
-            "alignment": {
-                "kindness": "good",
-                "loyalty": "chaotic"
-            },
+            "alignment": "chaotic_good",
             "magic": true,
             "difficulty": 8,
             "physic": {
@@ -3286,10 +3202,7 @@
             "name": "Shlahog",
             "description": "",
             "stat": "strength",
-            "alignment": {
-                "kindness": "evil",
-                "loyalty": "chaotic"
-            },
+            "alignment": "chaotic_evil",
             "magic": true,
             "difficulty": 10,
             "physic": {
@@ -3310,10 +3223,7 @@
             "name": "Thymeïr",
             "description": "",
             "stat": "strength",
-            "alignment": {
-                "kindness": "evil",
-                "loyalty": "chaotic"
-            },
+            "alignment": "chaotic_evil",
             "magic": false,
             "difficulty": 10,
             "physic": {
@@ -3334,10 +3244,7 @@
             "name": "Urdi'rik",
             "description": "",
             "stat": "constitution",
-            "alignment": {
-                "kindness": "evil",
-                "loyalty": "loyal"
-            },
+            "alignment": "loyal_evil",
             "magic": true,
             "difficulty": 10,
             "physic": {
@@ -3358,10 +3265,7 @@
             "name": "Vadeaxil",
             "description": "",
             "stat": "strength",
-            "alignment": {
-                "kindness": "neutral",
-                "loyalty": "neutral"
-            },
+            "alignment": "neutral_neutral",
             "magic": true,
             "difficulty": 8,
             "physic": {
@@ -3382,10 +3286,7 @@
             "name": "Vernil",
             "description": "",
             "stat": "curiosity",
-            "alignment": {
-                "kindness": "neutral",
-                "loyalty": "neutral"
-            },
+            "alignment": "neutral_neutral",
             "magic": false,
             "difficulty": 8,
             "physic": {
@@ -3406,10 +3307,7 @@
             "name": "Yinkovn",
             "description": "",
             "stat": "psyche",
-            "alignment": {
-                "kindness": "neutral",
-                "loyalty": "neutral"
-            },
+            "alignment": "neutral_neutral",
             "magic": true,
             "difficulty": 9,
             "physic": {
@@ -3430,10 +3328,7 @@
             "name": "Zaliax",
             "description": "",
             "stat": "strength",
-            "alignment": {
-                "kindness": "evil",
-                "loyalty": "loyal"
-            },
+            "alignment": "loyal_evil",
             "magic": false,
             "difficulty": 9,
             "physic": {
@@ -3454,10 +3349,7 @@
             "name": "Zeniom",
             "description": "",
             "stat": "charisma",
-            "alignment": {
-                "kindness": "neutral",
-                "loyalty": "chaotic"
-            },
+            "alignment": "chaotic_neutral",
             "magic": true,
             "difficulty": 10,
             "physic": {
diff --git a/shared/character.util.ts b/shared/character.util.ts
index fefac14..db730ed 100644
--- a/shared/character.util.ts
+++ b/shared/character.util.ts
@@ -180,11 +180,10 @@ export const CharacterValidation = z.object({
     notes: z.string().nullable().optional(),
     health: z.number().default(0),
     mana: z.number().default(0),
-    training: z.record(z.enum(MAIN_STATS), z.record(z.enum(TRAINING_LEVELS.map(String)), z.number().optional())),
-    leveling: z.record(z.enum(LEVELS.map(String)), z.number().optional()),
-    abilities: z.record(z.enum(ABILITIES), z.number().optional()),
+    training: z.record(z.enum(MAIN_STATS), z.record(z.enum(TRAINING_LEVELS.map(String)), z.number())),
+    leveling: z.record(z.enum(LEVELS.map(String)), z.number()),
+    abilities: z.record(z.enum(ABILITIES), z.number()),
     spells: z.string().array(),
-    modifiers: z.record(z.enum(MAIN_STATS), z.number().optional()),
     choices: z.record(z.string(), z.array(z.number())),
     owner: z.number(),
     username: z.string().optional(),
@@ -429,7 +428,7 @@ export class CharacterBuilder extends CharacterCompiler
     }
     private render()
     {
-        this._steps = [
+        /*this._steps = [
             PeoplePicker,
             LevelPicker,
             TrainingPicker,
@@ -438,9 +437,9 @@ export class CharacterBuilder extends CharacterCompiler
         ];
         this._stepsHeader = this._steps.map((e, i) => 
             dom("div", { class: "group flex items-center", }, [
-                dom("div", { 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 cursor-pointer", listeners: { click: () => this.display(i) } }, [text(e.name)]),
+                dom("div", { 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 cursor-pointer", listeners: { click: () => this.display(i) } }, [text(e.header)]),
             ])
-        );
+        );*/
         this._helperText = text("Choisissez un peuple afin de définir la progression de votre personnage au fil des niveaux.")
         this._content = dom('div', { class: 'flex-1 outline-none max-w-full w-full overflow-y-auto', attributes: { id: 'characterEditorContainer' } });
         this._container.appendChild(div('flex flex-1 flex-col justify-start items-center px-8 w-full h-full overflow-y-hidden', [
@@ -461,15 +460,15 @@ export class CharacterBuilder extends CharacterCompiler
         if(step < 0 || step >= this._stepsHeader.length)
             return;
 
-        if(step !== 0 && this._steps.slice(0, step).some(e => !e.validate(this)))
-            return;
+        //if(step !== 0 && this._steps.slice(0, step).some(e => !e.validate(this)))
+        //    return;
 
-        this._stepsHeader.forEach(e => e.setAttribute('data-state', 'inactive'));
-        this._stepsHeader[step]!.setAttribute('data-state', 'active');
+        //this._stepsHeader.forEach(e => e.setAttribute('data-state', 'inactive'));
+        //this._stepsHeader[step]!.setAttribute('data-state', 'active');
 
-        this._content?.replaceChildren(...(new this._steps[step]!(this)).dom);
+        //this._content?.replaceChildren(...(new this._steps[step]!(this)).dom);
 
-        this._helperText.textContent = this._steps[step]!.description;
+        //this._helperText.textContent = this._steps[step]!.description;
     }
     async save(leave: boolean = true)
     {
@@ -672,7 +671,7 @@ export class PickableFeature
 abstract class BuilderTab {
     protected _builder: CharacterBuilder;
     protected _content!: Array<Node | string>;
-    static name: string;
+    static header: string;
     static description: string;
 
     constructor(builder: CharacterBuilder) { this._builder = builder; }
@@ -694,7 +693,7 @@ class PeoplePicker extends BuilderTab
 
     private _activeOption?: HTMLDivElement;
 
-    static override name = 'Peuple';
+    static override header = 'Peuple';
     static override description = 'Choisissez un peuple afin de définir la progression de votre personnage au fil des niveaux.';
 
     constructor(builder: CharacterBuilder)
@@ -756,7 +755,7 @@ class LevelPicker extends BuilderTab
     private _manaText: Text;
     private _options: HTMLDivElement[][];
 
-    static override name = 'Niveaux';
+    static override header = 'Niveaux';
     static override description = 'Déterminez la progression de votre personnage en choisissant une option par niveau disponible.';
 
     constructor(builder: CharacterBuilder)
@@ -836,7 +835,7 @@ class TrainingPicker extends BuilderTab
     private _statIndicator: HTMLSpanElement;
     private _statContainer: HTMLDivElement;
 
-    static override name = 'Entrainement';
+    static override header = 'Entrainement';
     static override description = 'Spécialisez votre personnage en attribuant vos points d\'entrainement parmi les 7 branches disponibles.\nChaque paliers de 3 points augmentent votre modifieur.';
 
     constructor(builder: CharacterBuilder)
@@ -914,7 +913,7 @@ class AbilityPicker extends BuilderTab
     private _tooltips: Text[] = [];
     private _maxs: HTMLElement[] = [];
 
-    static override name = 'Compétences';
+    static override header = 'Compétences';
     static override description = 'Diversifiez vos possibilités en affectant vos points dans les différentes compétences disponibles.';
 
     constructor(builder: CharacterBuilder)
@@ -1025,7 +1024,7 @@ class AspectPicker extends BuilderTab
 
     private _options: HTMLDivElement[];
 
-    static override name = 'Aspect';
+    static override header = 'Aspect';
     static override description = 'Déterminez l\'Aspect qui vous corresponds et benéficiez de puissants bonus.';
 
     constructor(builder: CharacterBuilder)
diff --git a/shared/feature.util.ts b/shared/feature.util.ts
index 80388d9..5d482ad 100644
--- a/shared/feature.util.ts
+++ b/shared/feature.util.ts
@@ -1,9 +1,9 @@
-import type { Ability, AspectConfig, CharacterConfig, Feature, FeatureEffect, FeatureItem, MainStat, Resistance, SpellConfig } from "~/types/character";
+import type { Ability, AspectConfig, CharacterConfig, Feature, FeatureEffect, FeatureItem, MainStat, Resistance, SpellConfig, TrainingLevel } from "~/types/character";
 import { div, dom, icon, text, type NodeChildren } from "#shared/dom.util";
 import { MarkdownEditor } from "#shared/editor.util";
 import { fakeA } from "#shared/proses";
 import { button, combobox, foldable, input, multiselect, numberpicker, select, table, toggle, type Option } from "#shared/components.util";
-import { fullblocker, tooltip } from "#shared/floating.util";
+import { confirm, contextmenu, fullblocker, tooltip } from "#shared/floating.util";
 import { ALIGNMENTS, alignmentTexts, elementTexts, MAIN_STATS, mainStatShortTexts, mainStatTexts, SPELL_ELEMENTS, SPELL_TYPES, spellTypeTexts } from "#shared/character.util";
 import characterConfig from "#shared/character-config.json";
 import { getID, ID_SIZE } from "#shared/general.util";
@@ -139,14 +139,21 @@ class TrainingEditor extends BuilderTab
                         this._builder.edit(config.features[option]!).then(e => {
                             element.replaceChildren(markdownUtil(config.features[option]!.description, undefined, { tags: { a: fakeA } }));
                         });
+                    }, contextmenu: (e) => {
+                        e.preventDefault();
+                        const context = contextmenu(e.clientX, e.clientY, [ 
+                            dom('div', { class: 'px-2 py-1 border-bottom border-light-35 dark:border-dark-35 cursor-pointer hover:bg-light-40 dark:hover:bg-dark-40 text-light-100 dark:text-dark-100', listeners: { click: () => { context.close(); } } }, [ text('Nouveau avant') ]),
+                            dom('div', { class: 'px-2 py-1 border-bottom border-light-35 dark:border-dark-35 cursor-pointer hover:bg-light-40 dark:hover:bg-dark-40 text-light-100 dark:text-dark-100', listeners: { click: () => { context.close(); } } }, [ text('Nouveau après') ]),
+                            dom('div', { class: 'px-2 py-1 border-bottom border-light-35 dark:border-dark-35 cursor-pointer hover:bg-light-40 dark:hover:bg-dark-40 text-light-100 dark:text-dark-100', listeners: { click: () => { context.close(); confirm('Voulez-vous vraiment supprimer cet element ?').then(e => { if(e) { delete config.training[stat][level[0] as any as TrainingLevel]; /* redraw */ } }) } } }, [ text('Supprimer') ])
+                        ], { placement: "right-start", priority: false });
                     }}}, [ markdownUtil(config.features[option]!.description, undefined, { tags: { a: fakeA } }) ]);
                     return element;
                 })),
             ])
         }
-        
+
         this._options = MAIN_STATS.reduce((p, v) => { p[v] = statRenderBlock(v); return p; }, {} as Record<MainStat, HTMLDivElement[][]>);
-        
+
         this._statIndicator = dom('span', { 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' });
         this._statContainer = div('relative  select-none transition-[left] flex flex-1 flex-row max-w-full', Object.values(this._options).map(e => div('flex flex-shrink-0 flex-col gap-4 relative w-full overflow-y-auto px-8', e.flatMap(_e => [..._e]))));
         this._content = [ div("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", [
@@ -197,9 +204,9 @@ class AspectEditor extends BuilderTab
                 alignment: select(ALIGNMENTS.map(f => ({ text: alignmentTexts[f], value: f })), { change: (value) => aspect.alignment = value, defaultValue: aspect.alignment, class: { container: '!m-0 w-full' } }),
                 magic: toggle({ defaultValue: aspect.magic, change: (value) => aspect.magic = value, class: { container: '' } }),
                 difficulty: numberpicker({ min: 6, max: 13, input: (value) => aspect.difficulty = value, defaultValue: aspect.difficulty, class: '!m-0 w-full' }),
-                physic: div('flex flex-row justify-center gap-2', [ numberpicker({ defaultValue: aspect.physic.min, input: (value) => aspect.physic.min = value }), numberpicker({ defaultValue: aspect.physic.max, input: (value) => aspect.physic.max = value }) ]),
-                mental: div('flex flex-row justify-center gap-2', [ numberpicker({ defaultValue: aspect.mental.min, input: (value) => aspect.mental.min = value }), numberpicker({ defaultValue: aspect.mental.max, input: (value) => aspect.mental.max = value }) ]),
-                personality: div('flex flex-row justify-center gap-2', [ numberpicker({ defaultValue: aspect.personality.min, input: (value) => aspect.personality.min = value }), numberpicker({ defaultValue: aspect.personality.max, input: (value) => aspect.personality.max = value }) ]),
+                physic: div('flex flex-row justify-center', [ numberpicker({ defaultValue: aspect.physic.min, input: (value) => aspect.physic.min = value, class: '!m-0' }), numberpicker({ defaultValue: aspect.physic.max, input: (value) => aspect.physic.max = value, class: '!m-0' }) ]),
+                mental: div('flex flex-row justify-center', [ numberpicker({ defaultValue: aspect.mental.min, input: (value) => aspect.mental.min = value, class: '!m-0' }), numberpicker({ defaultValue: aspect.mental.max, input: (value) => aspect.mental.max = value, class: '!m-0' }) ]),
+                personality: div('flex flex-row justify-center', [ numberpicker({ defaultValue: aspect.personality.min, input: (value) => aspect.personality.min = value, class: '!m-0' }), numberpicker({ defaultValue: aspect.personality.max, input: (value) => aspect.personality.max = value, class: '!m-0' }) ]),
                 action: div('flex flex-row justify-center gap-2', [ button(icon('radix-icons:file-text'), () => {}, 'p-1'), button(icon('radix-icons:trash'), () => remove(aspect), 'p-1') ])
             };
         }
diff --git a/shared/proses.ts b/shared/proses.ts
index 642f2e0..9f7337b 100644
--- a/shared/proses.ts
+++ b/shared/proses.ts
@@ -4,7 +4,7 @@ import render from "#shared/markdown.util";
 import { popper } from "#shared/floating.util";
 import { Canvas } from "#shared/canvas.util";
 import { Content, iconByType, type LocalContent } from "#shared/content.util";
-import { unifySlug } from "#shared/general.util";
+import { parsePath, unifySlug } from "#shared/general.util";
 import { loading } from "./components.util";
 
 
@@ -84,6 +84,7 @@ export const fakeA: Prose = {
             ])
         ]);
 
+
         if(!!overview)
         {
             const magicKeys = useMagicKeys();